/*
Theme Name: Tanuki Air
Theme URI: https://tanukilibros.com
Author: Tanuki Libros
Author URI: https://tanukilibros.com
Description: Un tema ligero, moderno y pixel-perfect para Tanuki Libros, enfocado en el diseño "Air".
Version: 1.5
License: GPL v2 or later
Text Domain: tanuki-air
*/

/* -------------------------------------------------------------------------- */
/* 1. RESET & VARIABLES
/* -------------------------------------------------------------------------- */
:root {
  --tanuki-purple: #52196f;
  --tanuki-pink: #e86479;
  --tanuki-turquoise: #63c8d8;
  --tanuki-yellow: #febf00;
  --tanuki-lime: #bed62f;
  --tanuki-orange: #fbad18;
  --tanuki-text: #333333;
  --tanuki-bg: #ffffff;
  --max-width: 1280px;
  --font-main: 'Montserrat', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  background-color: var(--tanuki-bg);
  color: var(--tanuki-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Prevent ANY unexpected horizontal scroll site-wide */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Better Hyphenation for Spanish Headings */
html[lang^="es"] h1,
html[lang^="es"] h2,
html[lang^="es"] h3,
html[lang^="es"] h4,
html[lang^="es"] h5,
html[lang^="es"] h6 {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-family: 'Montserrat', sans-serif !important; /* Editorial unificator */
}

.site {
  display: flex;
  flex-direction: column;
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .container {
    padding: 0 15px !important; /* RECLAIMED WIDTH FROM GLOBAL CONTAINER */
  }
}

/* En la página de producto el .container no tiene padding lateral —
   el .product-main-layout maneja su propio espacio interno. */
.product-page-main > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Utilities */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.d-flex {
  display: flex;
}
.d-grid {
  display: grid;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 1rem;
}
.gap-2 {
  gap: 2rem !important;
}

/* Colors */
.bg-pink {
  background-color: var(--tanuki-pink);
  color: white;
}
.bg-yellow {
  background-color: var(--tanuki-yellow);
  color: var(--tanuki-text);
}
.bg-turquoise {
  background-color: var(--tanuki-turquoise);
  color: white;
}
.bg-orange {
  background-color: var(--tanuki-orange);
  color: var(--tanuki-text);
}
.bg-lime {
  background-color: var(--tanuki-lime);
  color: var(--tanuki-text);
}

.text-purple {
  color: var(--tanuki-purple) !important;
}

/* -------------------------------------------------------------------------- */
/* 1.5 FOOTER
/* -------------------------------------------------------------------------- */
.site-footer {
  background-color: #fff;
  padding: 3rem 0;
  border-top: 1px solid #eee;
  margin-top: auto;
}

.footer-info {
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.footer-legal-links {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: #888;
  font-size: 0.8rem;
  transition: color 0.2s;
}

.footer-legal-links a:hover {
  color: var(--tanuki-pink);
}

.footer-legal-links .sep {
  color: #eee;
  font-size: 0.8rem;
}


/* -------------------------------------------------------------------------- */
/* 2. HEADER
/* -------------------------------------------------------------------------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* Top Row: Logo & Actions Space-Efficient */
.header-top {
  padding: 0.8rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 60px;
}

.site-logo-text a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tanuki-purple);
  text-transform: uppercase;
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 2px;
}

.custom-logo-link img {
  max-height: 75px;
  width: auto;
  display: block;
}

.site-logo-text img {
  height: 45px;
  width: auto;
}

/* Bottom Row: Nav */
.header-bottom {
  background: #f9f9f9;
  border-top: 1px solid #f0f0f0;
}

.nav-container {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hide mobile scroll button by default */
.mobile-nav-scroll-btn {
  display: none;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2rem !important;
}

.main-navigation a {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  transition: all 0.3s ease; /* Smooth transition for everything */
  display: inline-block;
}
.main-navigation a:hover {
  color: var(--tanuki-orange); /* More vibrant hover color */
  transform: translateY(-3px); /* Noticeable lift */
}

.header-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.action-icon {
  color: var(--tanuki-purple);
  opacity: 0.7;
  transition: all 0.3s ease;
  display: inline-block;
}
.action-icon:hover {
  opacity: 1;
  color: var(--tanuki-orange); /* Color shift on hover */
  transform: scale(1.2); /* Pop effect */
}

/* -------------------------------------------------------------------------- */
/* 3. LIBRARIES & PRODUCT GRID
/* -------------------------------------------------------------------------- */
.home-section {
  padding: 3rem 0;
}

.section-group {
  display: grid;
  grid-template-columns: 3fr 1fr; /* Main, Sidebar */
  gap: 3rem;
  align-items: start;
}

.section-heading {
  margin-bottom: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid #eee;
  padding-bottom: 1rem;
}

.section-heading h2 {
  font-size: 1.8rem;
  color: var(--tanuki-purple);
}

/* Product Card */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Custom 2+3 Grid for Novedades on Tablet & Desktop */
@media (min-width: 768px) {
  .libraries-section {
    box-sizing: border-box;
    padding: 2rem 0 !important;
  }

  .libraries-section .container,
  .libraries-section .section-group {
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .libraries-section .products-area {
    height: 100vh;
    max-height: 850px; /* Limit height to a reasonable desktop maximum */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .libraries-section .section-group {
    display: grid;
    grid-template-columns: 5.5fr 1fr !important; /* Default for Desktop */
    gap: 2.5rem;
    flex-grow: 1;
    min-height: 0;
  }

  /* Optimized ratio for Tablets - Expanded products area to fill empty space */
  @media (max-width: 1024px) {
    .libraries-section .section-group {
      display: grid !important;
      grid-template-columns: 5fr 1fr !important; /* More aggressive (approx 83/17) */
      gap: 1rem !important; /* Reduced gap to fill space */
    }

    .libraries-section .products-area {
      height: auto !important; /* Allow natural scrolling for vertical cards */
      max-height: none !important;
    }

    /* Ensure sidebar content is properly sized */
    .lib-row {
      padding: 1rem 0.75rem; /* Adjusted padding for better fit */
      font-size: 0.9rem; /* Slightly reduced */
    }

    .lib-row img {
      height: 45px; /* Slightly reduced from 50px */
      width: 45px;
    }
  }

  .novedades-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: 1.2fr 1fr !important;
    gap: 1.2rem !important;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
  }

  @media (max-width: 1024px) {
    .novedades-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: auto !important; /* Natural height */
      gap: 1.5rem !important;
      height: auto !important;
      min-height: 0;
    }
  }

  .novedades-grid .tanuki-card {
    height: 100% !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.2rem;
  }

  @media (max-width: 1024px) {
    .novedades-grid .tanuki-card {
      flex-direction: column !important; /* ALL cards vertical on tablet */
      gap: 0.5rem;
    }
    .novedades-grid .tanuki-card.item-5 {
      display: none !important; /* Hide 5th item on tablet as requested */
    }
  }

  /* Precise Grid Areas (2 on top, 3 on bottom) for Desktop */
  .novedades-grid .tanuki-card.item-1 {
    grid-area: 1 / 1 / 2 / 4;
  }
  .novedades-grid .tanuki-card.item-2 {
    grid-area: 1 / 4 / 2 / 7;
  }
  .novedades-grid .tanuki-card.item-3 {
    grid-area: 2 / 1 / 3 / 3;
  }
  .novedades-grid .tanuki-card.item-4 {
    grid-area: 2 / 3 / 3 / 5;
  }
  .novedades-grid .tanuki-card.item-5 {
    grid-area: 2 / 5 / 3 / 7;
  }

  /* Sketch Layout for Tablet (2x2 Vertical Grid) */
  @media (max-width: 1024px) {
    .novedades-grid .tanuki-card.item-1 {
      grid-area: 1 / 1 / 2 / 2 !important;
    }
    .novedades-grid .tanuki-card.item-2 {
      grid-area: 1 / 2 / 2 / 3 !important;
    }
    .novedades-grid .tanuki-card.item-3 {
      grid-area: 2 / 1 / 3 / 2 !important;
    }
    .novedades-grid .tanuki-card.item-4 {
      grid-area: 2 / 2 / 3 / 3 !important;
    }
  }

  /* Scaling adjustment for cards in this grid */
  .novedades-grid .card-img-box {
    position: relative !important;
    flex: 1 1 0% !important; /* Take ALL available space */
    min-height: 0 !important; /* Allow shrinking below content size */
    background: #f0f0f0; /* Fallback background */
    overflow: hidden !important; /* Absolute safety */
    display: block !important;
  }

  .novedades-grid .card-img-box img {
    position: absolute !important;
    /* Simulate padding using absolute offsets */
    top: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
    margin: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 2rem) !important;
    max-height: calc(100% - 2rem) !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @media (max-width: 1024px) {
    .novedades-grid .card-img-box {
      flex: 1 1 auto !important; /* Flexible image box */
      aspect-ratio: auto !important; /* Allow flexible height */
      width: 100% !important;
      height: auto !important;
      margin-bottom: 0.5rem;
      padding: 0.8rem !important;
      max-height: none; /* Remove height limit */
    }
    .novedades-grid .card-img-box img {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      max-width: 100% !important;
      max-height: 100% !important;
      margin: auto !important;
    }
  }

  /* Content Wrapper for Vertical Cards */
  .novedades-grid .card-content {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto !important; /* Don't shrink text area */
    min-width: 0;
    min-height: 120px; /* Ensure space for title/price */
  }

  @media (max-width: 1024px) {
    .novedades-grid .card-content {
      justify-content: flex-start;
      padding: 0 0.5rem 0.5rem;
      text-align: center;
    }
  }

  .novedades-grid .tanuki-card:hover .card-img-box img {
    transform: scale(1.05);
  }

  /* Compact text for Novedades grid */
  .novedades-grid h3 {
    font-size: 0.7rem;
    line-height: 1.1;
    margin: 0.2rem 0;
    height: 2.2em;
    overflow: hidden;
  }

  .novedades-grid .author {
    font-size: 0.65rem;
    margin-bottom: 0.1rem;
    height: 1.1em;
  }

  @media (max-width: 1024px) {
    .novedades-grid h3 {
      font-size: 0.9rem; /* Slightly larger for 2-column grid */
      text-align: center !important;
      height: 2.4em;
      margin-bottom: 0.3rem;
    }
    .novedades-grid .author {
      text-align: center !important;
      font-size: 0.8rem;
    }
    .novedades-grid .rating {
      justify-content: center !important;
      margin: 0.4rem 0 !important;
    }
    .novedades-grid .price {
      text-align: center !important;
      font-size: 1rem;
      margin: 0.6rem 0 !important;
    }
    .novedades-grid .btn-add {
      font-size: 0.75rem;
      padding: 10px;
      max-width: 180px;
      margin: 0 auto;
    }
  }

  .novedades-grid .link-more {
    display: none; /* Keep hidden to avoid vertical bloat */
  }

  .sidebar-libraries {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .sidebar-libraries .lib-list {
    flex-grow: 1;
    overflow: visible;
  }

  .lib-row {
    display: flex;
    flex-direction: row-reverse; /* Default Desktop: Icon on right */
    align-items: center;
    justify-content: flex-start;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
  }

  /* Specific Natural Alignment ONLY for Tablets (where column is now 30%) */
  @media (max-width: 1024px) {
    .lib-row {
      flex-direction: row;
      justify-content: flex-start; /* Mobile: Start of row is LEFT */
      padding: 1.1rem 0; /* Balanced air for 30% column */
      font-size: 0.95rem;
      text-align: left;
    }
    .sidebar-libraries h2 {
      text-align: left;
    }

    .sidebar-libraries .section-heading {
      justify-content: flex-start;
    }
  }

  .lib-row span {
    flex: 1;
  }
}

.tanuki-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  padding-bottom: 0.3rem;
  /* Flexbox for equal height alignment */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tanuki-card:hover {
  transform: translateY(-4px);
}

.card-img-box {
  background: var(--tanuki-pink);
  padding: 1rem; /* Consistently 1rem across the site */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3rem;
  border-radius: 8px;
  /* FORCE Uniform Size */
  width: 100%;
  aspect-ratio: 2 / 3; /* More vertical vertical ratio fits books better and reduces side air */
  height: auto; /* Let aspect ratio define height */
}

/* Specific overlap reduction for Favorites */
.favorites-section .card-img-box {
  padding: 1rem; /* Consistent 1rem air */
  aspect-ratio: 2 / 3;
}

.favorites-section .tanuki-card {
  max-width: 140px; /* Even more compact to fit more items in a row */
  margin: 0 auto;
}

.card-img-box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
}

.tanuki-card h3 {
  font-size: 0.8rem;
  color: var(--tanuki-pink);
  font-weight: 800;
  margin: 0.2rem 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Support up to 3 lines */
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
  height: 2.4em; /* Height for 3 lines approx */
  line-height: 1.2em;
  flex-shrink: 0;
}

.author {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  color: #666;
  font-weight: 400; /* Regular Author */
  /* ABSOLUTE ALIGNMENT: Handle long names or 'Varios' without jumps */
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  margin-bottom: 0.1rem;
  flex-shrink: 0;
}

/* Star Rating (WooCommerce Override) */
.woocommerce .star-rating,
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1.2em;
  line-height: 1.2em;
  font-size: 1.1rem;
  width: 5.4em;
  font-family: 'Montserrat', sans-serif !important;
}

.woocommerce .star-rating::before,
.star-rating::before {
  content: "\2605\2605\2605\2605\2605" !important;
  color: #eee !important;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  letter-spacing: 2px;
  font-family: inherit !important;
}

.woocommerce .star-rating span,
.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em; /* Hide text "Rated x out of 5" */
}

.woocommerce .star-rating span::before,
.star-rating span::before {
  content: "\2605\2605\2605\2605\2605" !important;
  top: 0;
  position: absolute;
  left: 0;
  color: var(--accent-color, var(--tanuki-yellow)) !important;
  letter-spacing: 2px;
  font-family: inherit !important;
}

.price {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--accent-color, #000);
  margin-bottom: 0.4rem;
  /* Push to bottom of flex container */
  margin-top: auto;
}

.tanuki-card .btn-add,
.btn-add {
  display: block;
  width: 100%;
  background: var(--accent-color, var(--tanuki-pink));
  color: white;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem; /* Adjusted for readability */
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  line-height: 1.2;
}

/* Mobile Override for Giant Buttons */
@media (max-width: 768px) {
  .tanuki-card .btn-add,
  .btn-add {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.5rem !important;
    white-space: normal; /* Allow wrapping if needed */
    height: auto;
  }
}

.tanuki-card .btn-add:hover,
.btn-add:hover {
  opacity: 0.85;
}

.link-more {
  display: block;
  text-align: center;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  text-decoration: underline;
  color: var(--tanuki-pink);
}

/* Sidebar List */
.sidebar-libraries h2 {
  font-size: 1.8rem;
  color: var(--tanuki-purple);
  margin-bottom: 2rem;
  text-align: left;
}

.lib-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lib-row {
  background: #fff; /* Clean white background */
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start; /* Desktop: Start of row-reverse is RIGHT */
  align-items: center;
  padding: 0.75rem;
  gap: 1rem;
  /* height: 60px; REMOVED fixed height */
  border-bottom: 1px solid #eee; /* Divider */
  transition: all 0.2s ease;
}
.lib-row:hover {
  background: var(--tanuki-orange); /* Vibrant Orange */
  transform: translateX(5px);
}
.lib-row:hover span {
  color: #fff; /* White text for contrast */
}

.lib-row img {
  height: 50px; /* Slightly smaller */
  width: 50px;
  object-fit: cover;
  background: #ddd;
  border-radius: 4px; /* Soften edges */
}

.lib-row span {
  font-weight: 700;
  font-size: 0.9rem;
  color: #333; /* Dark text */
}

/* ... */

.nav-box {
  height: 60px; /* More compact */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align left */
  padding-left: 1.5rem;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px; /* Commercial pill/rounded look */
  transition: all 0.2s ease;
  border: 2px solid transparent; /* Prepare for border */
}

/* Specific colors as borders/accents instead of full blocks */
.nav-box.bg-yellow {
  background: transparent;
  border-color: var(--tanuki-yellow);
  color: var(--tanuki-yellow);
}
.nav-box.bg-yellow:hover {
  background: var(--tanuki-yellow);
  color: #000;
}

.nav-box.bg-orange {
  background: transparent;
  border-color: var(--tanuki-orange);
  color: var(--tanuki-orange);
}
.nav-box.bg-orange:hover {
  background: var(--tanuki-orange);
  color: #fff;
}

.nav-box.bg-lime {
  background: transparent;
  border-color: var(--tanuki-lime);
  color: var(--tanuki-lime);
}
.nav-box.bg-lime:hover {
  background: var(--tanuki-lime);
  color: #000;
}

/* -------------------------------------------------------------------------- */
/* 4. COLLECTIONS (BANNERS)
/* -------------------------------------------------------------------------- */
.collection-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem !important;
  margin: 2rem 0;
}

.banner-box {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.banner-box h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  line-height: 1;
  color: white;
}

/* -------------------------------------------------------------------------- */
/* 5. FAVORITES
/* -------------------------------------------------------------------------- */
.favorites-title {
  color: var(--tanuki-purple);
  text-align: left;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.favorites-compact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.fav-item {
  display: flex;
  flex-direction: column;
}

.fav-img-wrapper {
  background: #eee;
  margin-bottom: 0.8rem;
  height: 220px; /* Reduced fixed height container */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fav-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fav-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  min-height: 2.5em; /* Force 2 lines approx */
}
.fav-meta {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tanuki-orange);
}

/* -------------------------------------------------------------------------- */
/* 6. BLOG
/* -------------------------------------------------------------------------- */
.blog-section {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem !important;
  margin-bottom: 3rem;
}

.blog-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.nav-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  text-align: center;
  padding: 0.6rem; /* Slimmer buttons */
}

/* Specific button styles */
.nav-box.bg-yellow {
  border-color: var(--tanuki-yellow);
  color: var(--tanuki-yellow);
}
.nav-box.bg-yellow:hover {
  background: var(--tanuki-yellow);
  color: #000;
}

.nav-box.bg-orange {
  border-color: var(--tanuki-orange);
  color: var(--tanuki-orange);
}
.nav-box.bg-orange:hover {
  background: var(--tanuki-orange);
  color: #fff;
}

.nav-box.bg-lime {
  border-color: var(--tanuki-lime);
  color: var(--tanuki-lime);
}
.nav-box.bg-lime:hover {
  background: var(--tanuki-lime);
  color: #000;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: transparent;
}

.blog-thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* Landscape makes it significantly shorter */
  background: #eee;
  flex-shrink: 0;
  overflow: hidden;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-info {
  padding: 0.8rem 1rem; /* Compact padding */
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  flex-grow: 1;
  display: flex;
  align-items: center;
  min-height: 3.5em; /* Guarantee two lines approx */
  transition: all 0.2s ease;
}

.blog-card:hover .blog-info {
  background-color: var(--tanuki-purple) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------- */
/* 7. RESPONSIVE
/* -------------------------------------------------------------------------- */

/* TABLETS & SMALL LAPTOPS - OPTIMIZED FOR 1024px */
@media (max-width: 1024px) {
  :root {
    --max-width: 100%;
  }

  .container {
    padding: 0 2rem; /* Increased from 1.5rem for better breathing room */
  }

  .section-group {
    grid-template-columns: 1fr; /* Move sidebar to bottom */
    gap: 2.5rem; /* Increased gap for better visual separation */
  }

  /* Grids: Optimized columns with proper touch spacing */
  .grid-3,
  .favorites-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important; /* Increased from 1.5rem - minimum 8px touch spacing */
  }

  .favorites-compact-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem; /* Increased from 1.2rem for better touch targets */
  }

  .favorites-compact-grid .item-5 {
    display: none !important;
  }

  .blog-grid {
    grid-template-columns: repeat(
      3,
      1fr
    ) !important; /* Changed from 2 to 3 for better use of space */
    gap: 2rem !important; /* Proper touch spacing */
  }

  .blog-section {
    grid-template-columns: 1fr; /* Stack blog nav above grid */
    gap: 2.5rem; /* Increased for better visual hierarchy */
  }

  .blog-nav {
    flex-direction: row; /* Horizontal nav for tablets */
    height: auto;
    overflow-x: auto; /* Allow scrolling if many tags added */
    padding-bottom: 0.5rem;
    gap: 1rem; /* Added explicit gap for touch spacing */
  }

  .nav-box {
    min-width: 140px; /* Reduced from 160px for better fit */
    height: 52px; /* Increased from 50px for better touch target (minimum 44px) */
    font-size: 0.85rem; /* Slightly reduced for better fit */
    padding: 0.75rem 1rem; /* Added explicit padding */
  }

  /* Header optimizations for tablets - MERGED INTO SINGLE MEDIA QUERY */
  .header-top {
    padding: 0.75rem 0 !important;
    justify-content: space-between;
    min-height: 64px;
  }

  .site-logo-text a {
    font-size: 1.6rem !important;
  }

  .site-logo-text img {
    height: 40px !important;
  }

  /* Mobile: header más compacto */
  @media (max-width: 768px) {
    .header-top {
      padding: 0.4rem 0 !important;
      min-height: 48px !important;
    }

    .site-logo-text img {
      height: 30px !important;
    }

    .custom-logo-link img {
      max-height: 36px !important;
    }

    .header-bottom .nav-container {
      height: 38px !important;
    }

    .header-actions {
      gap: 0.75rem !important;
    }

    .action-icon {
      padding: 0.25rem !important;
    }
  }

  /* Navigation Bar: Optimized for tablet touch */
  .header-bottom {
    background: #fff;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .header-bottom .nav-container {
    flex-direction: row !important;
    height: 52px !important; /* Increased from 44px for better touch targets */
    padding: 0 !important;
    gap: 0 !important;
    position: relative;
    justify-content: space-between !important;
  }

  .main-navigation {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Blur removed as requested */
    /* mask-image: linear-gradient(to right, black 90%, transparent 100%); */
    /* -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%); */
  }

  .main-navigation::-webkit-scrollbar {
    display: none;
  }

  .main-navigation ul {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding: 0 1rem !important; /* Reduced padding to make room for button */
    gap: 1.5rem !important;
    height: 100%;
    align-items: center;
    margin: 0 !important;
  }

  /* Mobile Nav Scroll Buttons */
  .mobile-nav-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px; /* Slightly rounded square */
    color: var(--tanuki-purple);
    flex-shrink: 0;
    z-index: 10;
    cursor: pointer;
    transition:
      opacity 0.3s ease,
      transform 0.2s ease;
    opacity: 0; /* Hidden by default until JS kicks in */
    pointer-events: none;
  }

  .mobile-nav-scroll-btn.btn-left {
    margin-right: 0.5rem;
    box-shadow: 5px 0 10px rgba(255, 255, 255, 0.8);
  }

  .mobile-nav-scroll-btn.btn-right {
    margin-left: 0.5rem;
    box-shadow: -5px 0 10px rgba(255, 255, 255, 0.8);
  }

  /* Active state handled by JS (opacity: 1) */

  .nav-container {
    position: relative;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .main-navigation a {
    font-size: 0.75rem !important; /* Increased from 0.65rem for better readability */
    font-weight: 800 !important;
    white-space: nowrap !important;
    letter-spacing: 0.8px !important; /* Slightly reduced for better fit */
    padding: 0.5rem 0.75rem; /* Added padding for better touch targets */
  }

  .header-actions {
    width: auto !important;
    justify-content: flex-end !important;
    border-top: none !important;
    padding-top: 0 !important;
    gap: 1.25rem !important; /* Increased from 1rem for better touch spacing */
  }

  .action-icon {
    padding: 0.5rem; /* Added padding for larger touch target */
  }

  .favorites-title {
    font-size: 1.75rem; /* Increased from 1.5rem for better hierarchy */
    margin-bottom: 2rem; /* Added explicit margin */
  }

  /* Typography adjustments for better readability */
  .section-heading h2 {
    font-size: 1.6rem; /* Slightly reduced for tablets */
  }

  .tanuki-card h3 {
    font-size: 0.85rem; /* Slightly larger for better readability */
  }

  .author {
    font-size: 0.75rem; /* Slightly larger */
  }

  .price {
    font-size: 0.95rem; /* Slightly larger */
  }

  /* Card spacing optimizations */
  .tanuki-card {
    padding-bottom: 0.5rem; /* Increased for better spacing */
  }

  .card-img-box {
    margin-bottom: 0.5rem; /* Increased from 0.3rem */
  }

  .banner-box {
    height: 180px; /* Increased from 150px for better proportions */
  }

  .banner-box h2 {
    font-size: 2rem; /* Increased from 1.8rem for better impact */
  }
}

/* SMALL PHONES */
@media (max-width: 480px) {
  .grid-3,
  .favorites-grid,
  .favorites-compact-grid,
  .blog-grid,
  .collection-banners {
    grid-template-columns: 1fr !important;
  }

  .tanuki-card {
    padding-bottom: 1.5rem;
  }

  .blog-nav {
    gap: 0.5rem;
  }

  .nav-box {
    min-width: 120px;
    font-size: 0.8rem;
    padding: 0.5rem;
  }

  .site-logo-text a {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 8. SINGLE PRODUCT PAGE
/* -------------------------------------------------------------------------- */

.product-page-main {
  padding: 4rem 0;
  background-color: color-mix(
    in srgb,
    var(--accent-color),
    white 92%
  );
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------- */
/* BARRAS DE COLOR DEL PRODUCTO — mobile-first                                */
/* -------------------------------------------------------------------------- */

/*
 * MOBILE (base, ≤900px):
 * Sin espacio lateral — el color del producto aparece como
 * franja horizontal de 6px en el top. Sutil, presente, no ocupa
 * espacio de contenido. Es el único elemento de color que el
 * usuario mobile ve al entrar a la página.
 */
.product-page-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--accent-color, var(--tanuki-pink));
  z-index: 1;
  pointer-events: none;
}
.product-page-main::after {
  content: none;
}

/*
 * TABLET (901–1025px):
 * El layout usa max-width: 96% con margin auto — hay ~2% de espacio
 * real a cada lado. Barras delgadas laterales que ya empiezan a
 * enmarcar la tarjeta. La franja top desaparece (las barras la
 * reemplazan como elemento de anclaje de color).
 */
@media screen and (min-width: 901px) and (max-width: 1025px) {
  .product-page-main::before,
  .product-page-main::after {
    content: '';
    position: absolute;
    top: 0;
    width: 2vw;
    height: 100%;
    background: var(--accent-color, var(--tanuki-pink));
    z-index: 1;
    pointer-events: none;
  }
  .product-page-main::before { left: 0; }
  .product-page-main::after  { right: 0; }
}

/*
 * DESKTOP (>1025px):
 * El contenido se queda fijo en 1025px centrado.
 * Las barras laterales son todo lo que queda a los lados.
 * A mayor viewport, más barra — el contenido no crece.
 */
@media screen and (min-width: 1026px) {
  body.single-product .product-page-main::before,
  body.single-product .product-page-main::after,
  .product-page-main::before,
  .product-page-main::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: calc((100vw - 1025px) / 2) !important; /* Restored ADN Tanuki wide bars */
    height: 100% !important;
    background: var(--accent-color, var(--tanuki-pink)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  .product-page-main::before { left: 0 !important; }
  .product-page-main::after  { right: 0 !important; }
}

/* Layout Grid */
.product-main-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* 2 columns: Gallery and Details */
  grid-template-rows: auto auto auto; /* 3 rows: Details, Synopsis, Sidebar */
  gap: 3rem;
  align-items: start;
  background-color: #ffffff; /* Clean white card layout */
  padding: 4rem;
  @media (max-width: 900px) {
    padding: 20px 15px !important;
  }
  @media (max-width: 350px) {
    padding: 15px 10px !important; /* ULTRA-NARROW FIX */
  }
  border-radius: 32px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.8);
  max-width: 1025px;   /* fijo: el contenido no crece, solo las barras */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.product-gallery {
  grid-column: 1;
  grid-row: 1 / span 2; /* Ensures it takes left side correctly in grid */
  min-width: 0;
}

.product-featured-image-top {
  display: none; /* Hidden on desktop */
}

.product-details {
  grid-column: 2;
  grid-row: 1 !important;
  min-width: 0;
}

.synopsis {
  grid-column: 2;
  grid-row: 2 !important;
  min-width: 0;
  margin-bottom: 2rem;
}

.product-sidebar {
  grid-column: 1 / span 2;
  grid-row: 3 !important;
  border-top: 1px solid #f0f0f0;
  padding-top: 3rem;
  min-width: 0;
}

/* WooCommerce Native Gallery - Premium Bento Refinement */
.woocommerce-product-gallery {
  position: relative !important;
  background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.04);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
  margin-bottom: 2.5rem !important;
}

.woocommerce-product-gallery:hover {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.08),
    0 25px 50px -10px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.woocommerce-product-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at top right,
    rgba(255, 255, 255, 0.8) 0%,
    transparent 40%
  );
  opacity: 0.5;
}

.woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  aspect-ratio: 4/5;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Eliminated zoom effect */

/* Luxury Thumbnails Grid */
.flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  justify-content: center !important;
  position: static !important;
  margin-top: 2rem !important;
  list-style: none !important;
  padding: 0 1rem !important;
}

.flex-control-nav.flex-control-thumbs li {
  width: 75px !important;
  height: 100px !important;
  cursor: pointer !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  border: 2px solid transparent !important;
}

.flex-control-nav.flex-control-thumbs li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.flex-control-nav.flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 0.5;
  filter: grayscale(20%);
  transition: all 0.4s ease !important;
}

.flex-control-nav.flex-control-thumbs li:hover img,
.flex-control-nav.flex-control-thumbs li img.flex-active {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

.flex-control-nav.flex-control-thumbs li img.flex-active {
  border-radius: 10px !important;
  border: 2px solid var(--accent-color, #e91e63) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.02);
}

/* Modern Lupa / Trigger Controls - Fixed Doubled Icon - DISABLED BY USER REQUEST */
.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Indicadores de navegación (Flechas) para móviles - Affordance */
@media (max-width: 768px) {
  .woocommerce-product-gallery {
    position: relative;
  }

  .woocommerce-product-gallery::before,
  .woocommerce-product-gallery::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    z-index: 50;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    pointer-events: none;
    opacity: 0.8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .woocommerce-product-gallery::before {
    left: 10px !important;
    right: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7' /%3E%3C/svg%3E");
  }

  .woocommerce-product-gallery::after {
    right: 10px !important;
    left: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7' /%3E%3C/svg%3E");
  }

  /* Ocultar dots si hay miniaturas */
  .woocommerce-product-gallery .flex-control-nav.flex-control-paging {
    display: none !important;
  }

  .woocommerce-product-gallery .flex-control-nav.flex-control-paging li a {
    display: block;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .woocommerce-product-gallery .flex-control-nav.flex-control-paging li a.flex-active {
    background: var(--accent-color, #000);
    transform: scale(1.2);
  }
}

/* Clean up Carousel Gaps and unwanted lines */
.woocommerce-product-gallery .flex-viewport {
  border-radius: 24px;
}

.woocommerce-product-gallery .slides {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
}

.woocommerce-product-gallery .slides li {
  margin: 0 !important;
  padding: 0 !important;
}

.no-image-fallback {
  aspect-ratio: 4/5;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Info Section Refinement */

/* Info Section */
.product-title {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  color: #000;
}

.meta-row {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
}

.meta-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #bbb;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.meta-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.color-pink,
.color-yellow,
.color-orange {
  color: var(--accent-color, var(--tanuki-pink));
}

.rating-section {
  margin-bottom: 2rem;
}

.tax-info {
  border-top: 1px solid #eee;
  padding-top: 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
}

.tax-item {
  margin-bottom: 0.5rem;
}
.tax-item .label {
  font-weight: 700;
  color: #888;
}
.tax-item a {
  color: var(--accent-color, var(--tanuki-pink));
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}
.tax-item a:hover {
  text-decoration-thickness: 2px;
}

.synopsis h2 {
  font-size: 1.5rem;
  color: var(--accent-color, var(--tanuki-purple));
  margin-bottom: 1rem;
}

.synopsis .content {
  line-height: 1.8;
  color: #444;
  margin-bottom: 2rem;
  font-family: 'Lora', serif !important; /* Elegant reading font */
  font-size: 1.15rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.product-buy-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 24px 10px; /* Reduced lateral padding to avoid 'short' feeling */
  background: #fdfdfd;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  width: 100%;
}

.main-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-color, var(--tanuki-pink));
  word-break: break-word; /* Safety for very long prices */
}

.main-price .woocommerce-Price-amount {
  color: inherit;
}

.price ins,
.main-price ins {
  text-decoration: none !important;
}

/* Buy Actions / WooCommerce Form */
/* AGGRESSIVE FULL-WIDTH STACKED LAYOUT FOR CTA */
body.single-product .product-buy-section .buy-actions form.cart {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

.buy-actions .quantity {
  display: flex;
  align-items: center;
}

.buy-actions .quantity input {
  width: 100%;
  max-width: 100px; /* Keep it sane on desktop */
  height: 48px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  margin: 0 auto; /* Center quantity */
}

.buy-actions .single_add_to_cart_button {
  flex: 1;
  min-width: 200px;
  height: 60px; /* Even taller for Serious Luxury prominence */
  background: var(--accent-color, var(--tanuki-pink)) !important;
  color: white !important;
  border-radius: 12px;
  font-size: 1.1rem !important; /* Larger font */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 900 !important; /* Ultra bold */
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.buy-actions .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  filter: saturate(1.1);
}
  opacity: 0.9;
}

.btn-outline {
  border: 1px solid var(--accent-color, var(--tanuki-yellow));
  color: var(--accent-color, var(--tanuki-yellow));
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: var(--accent-color, var(--tanuki-yellow));
  color: #fff;
}

/* Related Sidebar */
.product-sidebar h2 {
  font-size: 1.2rem;
  color: var(--accent-color, var(--tanuki-purple));
  margin-bottom: 1.5rem;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
}

/* TABLET OVERRIDE — solo para 768–1024px
   En ≤767px el layout vuelve a columna única via el bloque mobile */
@media (min-width: 768px) and (max-width: 1025px) {

  /* Grid de 2 columnas — galería izquierda, info derecha */
  .product-main-layout {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr !important;
    grid-template-rows: auto auto !important;
    gap: 2rem !important;
    padding: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .product-details {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tipografía compacta */
  .product-title {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
  }

  .meta-row {
    gap: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    flex-wrap: wrap !important;
  }

  .meta-value {
    font-size: 0.95rem !important;
  }

  .synopsis h2 {
    font-size: 1.15rem !important;
    margin-bottom: 0.6rem !important;
  }

  .synopsis .content {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.25rem !important;
  }

  .product-buy-section {
    padding: 1rem !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  .buy-actions .single_add_to_cart_button {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.8rem !important;
  }

  .tax-info {
    font-size: 0.78rem !important;
    padding-top: 1rem !important;
    margin-bottom: 1.25rem !important;
  }

  .product-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
  }

  /* Related List Styles */
  .related-list {
    display: grid !important;
    grid-template-columns: repeat(
      5,
      minmax(0, 1fr)
    ) !important; /* minmax(0, 1fr) is CRITICAL for preventing overflow */
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
  }

  /* Force very compact cards */
  .related-list .tanuki-card {
    min-height: 0 !important; /* Remove min-height constraint */
    height: auto !important;
    background: transparent !important; /* Remove white background to reduce visual weight */
    width: 100% !important;
    min-width: 0 !important; /* Allow shrinking */
  }

  .related-list .card-img-box {
    aspect-ratio: 2/3;
    padding: 0 !important; /* Remove internal padding */
    margin-bottom: 0.2rem !important;
    background: transparent !important; /* Clean look */
    width: 100% !important;
  }

  .related-list .card-img-box img {
    box-shadow: none !important; /* Remove shadow to make it flatter/accessory-like */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .related-list h3 {
    font-size: 0.65rem !important;
    line-height: 1.1;
    height: 2.2em; /* Limit to 2 lines strict */
    margin: 0 !important;
    text-align: center;
    overflow: hidden;
    width: 100%;
  }

  .related-list .rating,
  .related-list .price,
  .related-list .card-actions-wrapper,
  .related-list .author {
    display: none !important; /* Hide ALL extra info on tablet to make it purely accessory */
  }
}

/* MOBILE OVERRIDE: Back to 2 columns */
@media (max-width: 480px) {
  .related-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem !important;
  }
}

.rel-card {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.rel-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--rel-accent, var(--accent-color, var(--tanuki-pink)));
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.rel-card:hover::before {
  width: 100%;
}

.rel-card:hover {
  color: #fff;
  border-bottom-color: transparent;
}

.rel-card:hover .rel-price,
.rel-card:hover .rel-btn {
  color: #fff;
}

.rel-thumb {
  width: 80px;
  flex-shrink: 0;
}

.rel-info h3 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.rel-price {
  font-weight: 700;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--rel-accent, var(--accent-color, #000));
  transition: color 0.3s ease;
}

.rel-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rel-btn {
  font-size: 0.7rem;
  color: #777;
  text-decoration: underline;
  transition: color 0.3s ease;
}

/* Info Blocks */
.extra-info-section {
  border-top: 2px solid #f0f0f0;
  padding-top: 3rem;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 1025px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Tablet: extra-info-section y product-sidebar necesitan aire lateral
   para no tocar las barras de color */
@media (min-width: 768px) and (max-width: 1025px) {
  .extra-info-section {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .product-sidebar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.info-block {
  margin-bottom: 4rem;
}

.info-block h2 {
  color: var(--accent-color, var(--tanuki-purple));
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 2.5rem;
  letter-spacing: -0.5px;
}

/* Editorial Hierarchy for the Book Content */
.book-extra-content h2 {
  font-size: 2.2rem;
  color: var(--tanuki-purple);
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.book-extra-content h3 {
  font-size: 1.6rem;
  color: var(--accent-color);
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.book-extra-content h4 {
  font-size: 1.2rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Hide Redundant Meta */
.product_meta {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 9. AUTHOR PAGE (OFFICIAL EDITORIAL)
/* -------------------------------------------------------------------------- */

.author-editorial-page {
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 80px;
}

.editorial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.editorial-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
  border-bottom: 2px solid #000;
  margin-bottom: 60px;
  gap: 60px;
}

.hero-left {
  flex: 1;
}

.hero-right {
  flex-shrink: 0;
}

.editorial-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tanuki-purple);
  margin-bottom: 20px;
  padding: 4px 12px;
  background: #f4f4f4;
  border-radius: 4px;
}

.editorial-name {
  font-size: 9rem;
  font-weight: 800;
  color: #000;
  line-height: 0.8;
  letter-spacing: -6px;
  margin: 0;
}

.editorial-summary p {
  font-size: 1.5rem;
  color: #444;
  font-weight: 300;
  line-height: 1.4;
  margin-top: 30px;
  max-width: 700px;
}

/* Premium Portrait Design */
.main-portrait {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: #fdfdfd;
  border-radius: 12px;
  overflow: visible; /* Allow backdrop to spill out */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0 auto;
}

.main-portrait:hover {
  transform: translateY(-10px);
}

.portrait-backdrop {
  position: absolute;
  top: 15px;
  left: 15px;
  right: -15px;
  bottom: -15px;
  background: var(--tanuki-pink);
  opacity: 0.1;
  border-radius: 12px;
  z-index: -1;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-portrait:hover .portrait-backdrop {
  transform: translate(10px, 10px);
  opacity: 0.15;
}

.main-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Add a subtle inner shadow to the portrait */
.main-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.editorial-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
}

.section-heading {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.editorial-text-flow {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #222;
}

.editorial-text-flow p {
  margin-bottom: 30px;
}

.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.portfolio-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  text-decoration: none !important;
}

.portfolio-item:hover {
  border-color: var(--accent, #000);
  background: #fcfcfc;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
}

.item-visual {
  width: 60px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.item-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #000;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-meta .price {
  font-size: 0.9rem;
  font-weight: 700;
  color: #777;
}

.item-meta .action {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--tanuki-purple);
  opacity: 0;
  transition: opacity 0.3s;
}

.portfolio-item:hover .action {
  opacity: 1;
}

/* Clean editorial flow: remove legacy or redundant blocks inherited from content */
/* Clean editorial flow: only hide the column that holds books, let bio column live */
.editorial-text-flow .wp-block-column:has(.products),
.editorial-text-flow .wp-block-column:has(.woocommerce),
.editorial-text-flow .wp-block-column h2:empty + .products,
.editorial-text-flow .products,
.editorial-text-flow .woocommerce-grid {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 10. SHOP ARCHIVE (UNIFIED WITH HOME)
/* -------------------------------------------------------------------------- */

.shop-archive-main {
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 80px;
}

.shop-hero-editorial {
  padding: 80px 0 40px;
  border-bottom: 2px solid #000;
  margin-bottom: 60px;
}

.architecture-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.shop-title {
  font-size: 8rem;
  font-weight: 900;
  color: #000;
  line-height: 0.85;
  letter-spacing: -4px;
  margin: 0;
}

.shop-controls-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.result-count {
  font-size: 0.9rem;
  color: #999;
  font-style: italic;
}

/* Unified Grid - AIR & FLOW */
.tanuki-grid-layout .products {
  display: grid !important;
  grid-template-columns: repeat(
    auto-fill,
    minmax(180px, 1fr)
  ) !important; /* Slightly smaller for more items */
  gap: 50px 25px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 auto !important;
  max-width: var(--max-width);
}

/* Force Reset on WooCommerce LI styles */
.tanuki-grid-layout .products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

.tanuki-grid-layout .products::before,
.tanuki-grid-layout .products::after {
  display: none !important;
}

/* Tuning the tanuki-card for smaller scale */
.shop-archive-main .tanuki-card {
  padding: 0 0 1.5rem 0;
  border-radius: 12px;
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.shop-archive-main .card-img-box {
  width: 100% !important;
  aspect-ratio: 4 / 5.2 !important;
  position: relative !important;
  margin-bottom: 2rem;
  padding: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  overflow: hidden !important;
  display: block !important;
}

.shop-archive-main .card-img-box img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.shop-archive-main .tanuki-card h3 {
  font-size: 0.9rem;
  font-weight: 800 !important; /* Bold Title */
  letter-spacing: -0.2px;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
  height: 2.8em;
  text-align: center;
}

.shop-archive-main .author {
  font-size: 0.75rem;
  font-weight: 400 !important; /* Regular Author */
  margin-bottom: 1rem;
  padding: 0 0.5rem;
  height: 1.2em;
  text-align: center;
  color: #888;
}

.shop-archive-main .price {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding: 0 0.5rem;
  text-align: center;
  margin-top: auto; /* Push to bottom before actions */
}

.shop-archive-main .card-actions-wrapper {
  padding: 0 1rem !important;
}

.shop-pagination-wrapper {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* 11. LIBRARIES (EDITORIAL DESIGN)
/* -------------------------------------------------------------------------- */

.library-editorial,
.libraries-directory {
  padding-bottom: 100px;
  background: #fff;
}

/* Common Architecture Header */
.lib-hero,
.directory-header {
  padding: 100px 0 60px;
  border-bottom: 2px solid #000;
  margin-bottom: 80px;
}

.lib-name,
.directory-title {
  font-size: 5rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -4px;
  margin: 0;
  color: #000;
}

.eyebrow-label,
.editorial-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tanuki-purple);
  margin-bottom: 20px;
}

.lib-location-text,
.directory-intro p {
  font-size: 1.25rem;
  color: #666;
  margin-top: 25px;
  font-weight: 400;
}

/* Single Library Specifics */
.grid-2-editorial {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 80px;
  align-items: start;
}

.lib-featured-frame {
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.lib-featured-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.lib-description-flow {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 50px;
}

.lib-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.data-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #bbb;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.data-value,
.data-value-link {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}

.data-value-link {
  color: var(--tanuki-purple);
  border-bottom: 1px solid
    color-mix(in srgb, var(--tanuki-purple), transparent 70%);
}

.btn-editorial-luxury {
  display: block;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 50px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-editorial-luxury:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  background: var(--tanuki-purple);
}

/* Map frame */
.map-frame-luxury {
  border-radius: 30px;
  overflow: hidden;
  height: 450px;
  background: #f8f8f8;
  border: 1px solid #eee;
}

.map-frame-luxury iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Directory Archive */
.lib-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.lib-card-luxury {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.lib-card-visual {
  position: relative;
  aspect-ratio: 1/1;
  background: #f9f9f9;
  overflow: hidden;
}

.lib-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.lib-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(
    0,
    0,
    0,
    0.7
  ); /* Solid darkened state for better contrast without blur */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s;
}

.lib-view-text {
  background: #fff;
  color: #000;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.lib-card-luxury:hover .lib-card-visual img {
  transform: scale(1.1);
}
.lib-card-luxury:hover .lib-card-overlay {
  opacity: 1;
}

.lib-card-details {
  padding: 25px;
}

.lib-card-name {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.lib-card-location {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 20px;
}

.lib-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.lib-card-social {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tanuki-purple);
}

.lib-card-arrow {
  font-size: 1.25rem;
  transition: transform 0.3s;
}

.lib-card-luxury:hover .lib-card-arrow {
  transform: translateX(5px);
}

/* -------------------------------------------------------------------------- */
/* 12. SINGLE BLOG POST (LUXURY EDITORIAL HERO)
/* -------------------------------------------------------------------------- */

.blog-post-luxury {
  background: #fff;
  padding-bottom: 100px;
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Unified Hero Architecture */
.post-editorial-hero {
  padding: 80px 0 100px;
  background: #fff;
}

.hero-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

.post-editorial-hero.has-featured .hero-layout-grid {
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
}

.post-eyebrow {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tanuki-pink);
  margin-bottom: 25px;
}

.post-main-title {
  font-size: 4.8rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -3px;
  margin: 0;
  color: #000;
}

.post-meta-luxury {
  margin-top: 40px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.meta-sep {
  margin: 0 15px;
  color: #eee;
}

/* Hero Visual Block */
.hero-visual-block {
  position: relative;
  z-index: 1;
}

.hero-featured-frame {
  aspect-ratio: 4 / 5.2;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
  background: #f9f9f9;
}

.hero-featured-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Editorial Body */
.post-editorial-body {
  font-family: "Georgia", "Times New Roman", "Times", serif;
  font-size: 1.25rem; /* Slightly larger for serif legibility */
  line-height: 1.85;
  color: #222;
}

.post-editorial-body p {
  margin-bottom: 2rem;
}

.post-editorial-body h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 4rem 0 1.5rem;
  color: #000;
}

.post-editorial-body h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 3rem 0 1rem;
}

.post-editorial-body blockquote {
  border-left: 4px solid var(--tanuki-pink);
  padding: 1rem 0 1rem 2rem;
  margin: 3rem 0;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #555;
}

.post-editorial-body img {
  border-radius: 12px;
  margin: 3rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.post-editorial-body ul,
.post-editorial-body ol {
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
}

.post-editorial-body li {
  margin-bottom: 0.8rem;
}

/* Footer & Sharing */
.post-footer-minimal {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-tags-luxury a {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  background: #f8f8f8;
  padding: 6px 12px;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.3s;
}

.post-tags-luxury a:hover {
  background: #000;
  color: #fff;
}

.share-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #bbb;
  margin-right: 20px;
}

.share-links a {
  font-size: 0.8rem;
  font-weight: 900;
  color: #000;
  margin-left: 15px;
  border-bottom: 2px solid #eee;
}

/* Read Next Section */
.post-read-next {
  background: #fbfbfb;
  padding: 100px 0;
  margin-top: 100px;
}

.section-label-minimal {
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 50px;
  color: #999;
}

.next-entries-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.next-card {
  display: flex;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.4s ease;
}

.next-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.next-card-visual {
  width: 200px;
  flex-shrink: 0;
}

.next-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next-card-info {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.next-card-info h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.next-arrow {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--tanuki-pink);
}

@media (max-width: 1024px) {
  /* Blog post optimizations for tablets */
  .post-main-title {
    font-size: 3.5rem;
    letter-spacing: -2px;
  }

  .post-editorial-hero.has-featured .hero-layout-grid {
    grid-template-columns: 1fr; /* Stack on tablets */
    gap: 50px;
  }

  .post-editorial-body {
    font-size: 1.15rem; /* Slightly reduced for tablets */
    line-height: 1.75;
  }

  .post-editorial-body h2 {
    font-size: 1.9rem;
    margin: 3rem 0 1.2rem;
  }

  .post-editorial-body blockquote {
    font-size: 1.3rem;
    padding: 0.8rem 0 0.8rem 1.5rem;
  }

  .next-entries-grid {
    grid-template-columns: 1fr;
    gap: 30px; /* Increased for better touch spacing */
  }

  .next-card {
    flex-direction: row; /* Keep horizontal on tablets */
  }

  .next-card-visual {
    width: 160px; /* Slightly reduced */
  }

  .next-card-info {
    padding: 25px;
  }

  .next-card-info h3 {
    font-size: 1.15rem;
  }
}

@media (max-width: 600px) {
  .post-main-title {
    font-size: 2.5rem;
    letter-spacing: -1px;
  }
  .container-narrow {
    padding: 0 1.5rem;
  }
  .featured-frame-luxury {
    aspect-ratio: 16/9;
  }
  .next-card {
    flex-direction: column;
  }
  .next-card-visual {
    width: 100%;
    height: 200px;
  }
}

/* -------------------------------------------------------------------------- */
/* 13. SHOPPING CART (UX/UI REDESIGN)
/* -------------------------------------------------------------------------- */

.woocommerce-cart .woocommerce {
  padding: 80px 0 140px;
}

/* 1. Main Layout: Editorial Separation */
.woocommerce-cart .woocommerce-cart-form {
  margin-bottom: 80px;
}

/* 2. Product Table: Clean & Floating Rows */
.shop_table.cart {
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 15px !important;
}

.shop_table.cart thead {
  background: transparent !important;
}

.shop_table.cart thead th {
  padding: 0 20px 20px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #bbb !important;
  border: none !important;
}

.shop_table.cart tr.cart_item {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  border-radius: 20px !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.shop_table.cart tr.cart_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
}

.shop_table.cart td {
  border: none !important;
  padding: 30px 20px !important;
  vertical-align: middle !important;
}

/* Column Fixes */
.shop_table.cart td.product-thumbnail {
  width: 130px;
  padding-left: 30px !important;
}

.shop_table.cart td.product-thumbnail img {
  width: 100px !important;
  height: auto !important;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  display: block;
}

.shop_table.cart td.product-name a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #000 !important;
  letter-spacing: -1px !important;
  line-height: 1.2;
}

.shop_table.cart td.product-price,
.shop_table.cart td.product-subtotal {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #444 !important;
}

.shop_table.cart td.product-subtotal {
  color: var(--tanuki-purple) !important;
  text-align: right;
  padding-right: 40px !important;
}

/* Quantity Control */
.woocommerce .quantity .qty {
  width: 65px !important;
  height: 48px !important;
  background: #f8f8f8 !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Removal Button */
.shop_table.cart td.product-remove {
  width: 50px;
}

.shop_table.cart td.product-remove a.remove {
  font-size: 1.8rem !important;
  color: #ddd !important;
  transition: all 0.3s;
  display: inline-block;
  line-height: 1;
}

.shop_table.cart td.product-remove a.remove:hover {
  color: var(--tanuki-pink) !important;
  background: transparent !important;
  transform: rotate(90deg);
}

/* 3. Coupon & Actions Row */
.shop_table.cart td.actions {
  padding: 40px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shop_table.cart .coupon {
  display: flex !important;
  gap: 15px;
  align-items: center;
}

.shop_table.cart .coupon input#coupon_code {
  width: 220px !important;
  height: 54px !important;
  padding: 0 25px !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 100px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
}

.button[name="apply_coupon"],
.button[name="update_cart"] {
  height: 54px !important;
  padding: 0 35px !important;
  background: #fff !important;
  border: 2px solid #000 !important;
  color: #000 !important;
  border-radius: 100px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s !important;
}

.button[name="apply_coupon"]:hover,
.button[name="update_cart"]:not(:disabled):hover {
  background: #000 !important;
  color: #fff !important;
}

.button[name="update_cart"]:disabled {
  opacity: 0.4;
  border-color: #eee !important;
}

/* 4. Cart Totals & Collaterals: Full Width Flow */
.cart-collaterals {
  display: flex !important;
  flex-direction: column !important;
  gap: 60px;
  margin-top: 50px;
  width: 100% !important;
}

.cart_totals {
  background: #fff !important;
  padding: 50px !important;
  border-radius: 40px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08) !important;
  width: 100% !important;
  float: none !important;
}

.cart_totals h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  margin-bottom: 40px !important;
  color: #000;
}

.cart_totals table {
  width: 100% !important;
  margin: 0 0 40px !important;
  border-collapse: collapse !important;
}

.cart_totals table th,
.cart_totals table td {
  padding: 20px 0 !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
}

.cart_totals table th {
  font-weight: 500;
  color: #888;
  width: 40%;
}

.cart_totals table td {
  text-align: right;
  font-weight: 700;
  color: #000;
}

.cart_totals .order-total td strong {
  font-size: 2.2rem !important;
  color: var(--tanuki-purple) !important;
  letter-spacing: -2px !important;
}

.wc-proceed-to-checkout {
  padding: 0 !important;
}

.wc-proceed-to-checkout a.checkout-button {
  background: #000 !important;
  color: #fff !important;
  padding: 30px !important;
  border-radius: 100px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.wc-proceed-to-checkout a.checkout-button:hover {
  transform: scale(1.02) translateY(-5px);
  background: var(--tanuki-purple) !important;
  box-shadow: 0 20px 40px rgba(82, 25, 111, 0.25) !important;
}

/* Support for Responsive Cart and Shop Pages */
@media (max-width: 1024px) {
  .cart-collaterals {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* Shop Archive optimizations for tablets */
  .shop-title {
    font-size: 5rem; /* Reduced from 8rem for better fit */
    letter-spacing: -3px;
  }

  .architecture-header {
    gap: 30px; /* Increased for better spacing */
  }

  .tanuki-grid-layout .products {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columns on tablets */
    gap: 40px 20px !important; /* Increased gaps for better touch spacing */
  }

  /* Library pages optimizations */
  .lib-name,
  .directory-title {
    font-size: 3.5rem; /* Reduced from 5rem */
    letter-spacing: -2px;
  }

  .lib-hero,
  .directory-header {
    padding: 70px 0 50px; /* Reduced padding */
    margin-bottom: 60px;
  }

  .lib-card-luxury {
    padding: 30px; /* Slightly reduced */
  }

  .lib-card-title {
    font-size: 1.6rem; /* Slightly reduced */
  }
}

@media (max-width: 768px) {
  .shop_table.cart thead {
    display: none;
  }

  .shop_table.cart tr.cart_item {
    display: block;
    padding: 30px;
    position: relative;
    margin-bottom: 25px;
  }

  .shop_table.cart td {
    display: block;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }

  .shop_table.cart td.product-thumbnail {
    padding-left: 0 !important;
    margin-bottom: 20px;
  }

  .shop_table.cart td.product-thumbnail img {
    margin: 0 auto;
  }

  .shop_table.cart td.product-remove {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .shop_table.cart td.product-subtotal {
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 15px;
    padding-top: 20px !important;
  }

  .shop_table.cart td.actions {
    flex-direction: column;
    gap: 30px;
    padding: 20px 0 !important;
  }

  .shop_table.cart .coupon {
    flex-direction: column;
    width: 100%;
  }

  .shop_table.cart .coupon input#coupon_code {
    width: 100% !important;
  }

  .button[name="apply_coupon"],
  .button[name="update_cart"] {
    width: 100% !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 14. IN-ARTICLE PRODUCT CARD (BLOG INTEGRATION)
/* -------------------------------------------------------------------------- */

.tanuki-article-card {
  display: flex;
  background: #fbfbfb;
  border-radius: 20px;
  overflow: hidden;
  margin: 4rem 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.tanuki-article-card:hover {
  transform: translateY(-5px);
}

.article-card-visual {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--product-bg, #f0f0f0);
  position: relative;
}

.article-card-visual img {
  width: 100%;
  height: auto;
  max-width: 180px;
  box-shadow: 5px 15px 35px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.article-card-content {
  width: 65%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--product-accent, #999);
  margin-bottom: 15px;
}

.article-card-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 5px;
  color: #000;
  letter-spacing: -1px;
}

.article-card-author {
  font-size: 1rem;
  color: #666;
  margin-bottom: 25px;
}

.article-card-excerpt {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.article-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: auto;
}

.article-card-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: #000;
}

.article-card-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.btn-card-secondary {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #666;
  border-bottom: 2px solid #eee;
  padding-bottom: 2px;
}

.btn-card-primary {
  background: var(--product-accent, #000);
  color: #fff;
  padding: 12px 25px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: all 0.3s;
}

.btn-card-primary:hover {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .tanuki-article-card {
    flex-direction: column;
  }
  .article-card-visual,
  .article-card-content {
    width: 100%;
  }
  .article-card-visual {
    padding: 50px 0;
  }
  .article-card-footer {
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------------------------- */
/* 15. WOOCOMMERCE BLOCKS (HAND-PICKED PRODUCTS IN BLOG)
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* 15. WOOCOMMERCE BLOCKS (FIXED NARRATIVE CARDS)
/* -------------------------------------------------------------------------- */

.post-editorial-body .wc-block-handpicked-products,
.post-editorial-body .wc-block-grid {
  margin: 5rem 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both;
}

.post-editorial-body .wc-block-grid__products {
  display: block !important; /* Switch to block to avoid flex math issues */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.post-editorial-body .wc-block-grid .wc-block-grid__product {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  grid-template-rows: auto auto auto 1fr !important;
  grid-template-areas:
    "visual eyebrow"
    "visual title"
    "visual price"
    "visual action";
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 50px 0 !important;
  padding: 0 !important;
  background: var(--product-bg, #fff) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important;
}

/* NUCLEAR MOVE: Link remains transparent to the grid */
.post-editorial-body .wc-block-grid__product-link {
  display: contents !important;
}

/* 1. VISUAL AREA (Column 1) - Re-stabilized */
.post-editorial-body .wc-block-grid__product-image {
  grid-area: visual !important;
  background: rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 380px !important; /* Force height for image box */
}

.post-editorial-body .wc-block-grid__product-image img {
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 280px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 2. CONTENT AREA (Column 2) */

.post-editorial-body .wc-block-grid__product::before {
  content: "RECOMENDACIÓN TANUKI";
  grid-area: eyebrow !important;
  display: block !important;
  padding: 50px 50px 5px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: var(
    --product-accent,
    var(--tanuki-pink)
  ) !important; /* DYNAMIC ACCENT */
  text-transform: uppercase !important;
  opacity: 0.8;
}

/* TITLE */
.post-editorial-body .wc-block-grid__product-title {
  grid-area: title !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 50px 15px !important;
  color: #000 !important;
  letter-spacing: -1.5px !important;
  text-align: left !important;
  display: block !important;
}

/* RATING: GONE */
.post-editorial-body .wc-block-grid__product-rating,
.post-editorial-body .star-rating {
  display: none !important;
}

.post-editorial-body .wc-block-grid__product-price {
  grid-area: price !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(
    --product-accent,
    var(--tanuki-purple)
  ) !important; /* DYNAMIC PRICE COLOR */
  padding: 0 50px 25px !important;
  margin: 0 !important;
}

.post-editorial-body .wc-block-grid__product-add-to-cart {
  grid-area: action !important;
  padding: 0 50px 50px !important;
  margin: 0 !important;
}

.post-editorial-body .wp-block-button__link {
  font-family: 'Montserrat', sans-serif !important;
  background: #000 !important;
  color: #fff !important;
  padding: 16px 40px !important;
  border-radius: 100px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  border: none !important;
  white-space: nowrap !important;
}

.post-editorial-body .wc-block-grid__product-onsale {
  background: var(
    --product-accent,
    var(--tanuki-pink)
  ) !important; /* DYNAMIC SALE BADGE */
  font-family: 'Montserrat', sans-serif !important;
  padding: 6px 14px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  border-radius: 4px !important;
  left: 20px !important;
  top: 20px !important;
}

/* 16. SINGLE PRODUCT REVIEWS CLEANUP */
.reviews-section .woocommerce-Reviews-title {
  display: none !important;
}

/* Comment Form Fixes - Prevent Overflow on Mobile */
.reviews-section {
  width: 100%;
  overflow: hidden;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.comment-form-comment textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.comment-form-author input,
.comment-form-email input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Tablet specific fixes - 1024px */
@media (max-width: 1024px) {
  .reviews-section {
    width: 100%;
    overflow: hidden;
    padding: 0 1rem;
  }

  .comment-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Mobile specific fixes */
@media (max-width: 900px) {
  .reviews-section {
    padding: 0 !important;
    margin: 0 !important;
  }

  .comment-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  .comment-form-comment,
  .comment-form-author,
  .comment-form-email {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-form p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 17. CREATIVES DIRECTORY (AUTHORS, ILLUSTRATORS, TRANSLATORS) */
.creatives-directory {
  padding: 80px 0 140px;
}

.creatives-editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 50px;
  margin-top: 60px;
}

.creative-card-luxury {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

.creative-card-luxury:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.creative-card-visual {
  height: 420px;
  overflow: hidden;
  position: relative;
  background: #f8f8f8;
}

.creative-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.creative-card-luxury:hover .creative-card-visual img {
  transform: scale(1.05);
}

.creative-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 3rem;
  background: #f0f0f0;
  color: #bbb;
}

.creative-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  transition: opacity 0.4s;
}

.creative-card-luxury:hover .creative-card-overlay {
  opacity: 1;
}

.creative-card-overlay .view-text {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.creative-card-details {
  padding: 40px;
}

.creative-card-name {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #000 !important;
  letter-spacing: -1.5px !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.1;
}

.creative-card-bio {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creative-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
  border-top: 1px solid #f0f0f0;
}

.view-profile {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--tanuki-pink);
}

.creative-card-footer .arrow {
  font-size: 1.2rem;
  color: #000;
  transition: transform 0.3s;
}

.creative-card-luxury:hover .creative-card-footer .arrow {
  transform: translateX(5px);
}

/* Support for Responsive */
@media (max-width: 900px) {
  .post-editorial-body .wc-block-grid .wc-block-grid__product {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "visual"
      "eyebrow"
      "title"
      "price"
      "action";
  }
}
/* 18. PRODUCT PAGE - BOUTIQUE EDITORIAL MOBILE EXPERIENCE */

/* 1. Floating Buy Bar (Premium Glassmorphism) */
.floating-buy-bar {
  display: none;
  position: fixed;
  bottom: -120%; /* Hidden state */
  left: 5%;
  right: 5%;
  width: 90%;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
  padding: 12px 20px !important;
  z-index: 9999;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 100px !important;
  bottom: 30px; /* Base bottom for visibility */
  transform: translateY(200%);
  opacity: 0;
}

.floating-buy-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

.floating-buy-bar .bar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
}

.bar-visual {
  width: 40px !important;
  height: 55px !important;
  border-radius: 6px;
  overflow: hidden;
}

.bar-info {
  flex: 1;
  min-width: 0;
}

.bar-title {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1;
}

.bar-price {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  opacity: 0.7;
}

.bar-btn-buy {
  background: #000 !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Responsive Product Page Restructuring */
@media (max-width: 900px) {
  .product-page-main {
    padding-top: 2rem !important;
    padding-bottom: 60px !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ARCHIVE & EDITORIAL HEADERS - MOBILE ONLY */
  .shop-title,
  .editorial-name,
  .directory-title,
  .lib-name {
    font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
    margin-bottom: 15px !important;
  }

  .shop-hero-editorial,
  .editorial-hero,
  .lib-hero,
  .directory-header {
    padding: 40px 0 30px !important;
    margin-bottom: 30px !important;
  }

  .architecture-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .shop-controls-wrapper {
    align-items: flex-start !important;
    width: 100%;
  }

  /* EDITORIAL PAGES (AUTHORS, TRANSLATORS, ILLUSTRATORS) REDESIGN */
  .author-editorial-page .editorial-container {
    padding: 0 20px !important;
  }

  .editorial-hero {
    flex-direction: column-reverse !important;
    padding: 20px 0 40px !important;
    gap: 30px !important;
    border-bottom: 2px solid #000;
    position: relative;
    overflow: visible;
  }

  .editorial-hero::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    height: 100%;
    background: radial-gradient(
      circle at 70% 30%,
      rgba(232, 100, 121, 0.08) 0%,
      transparent 60%
    );
    z-index: -1;
    pointer-events: none;
  }

  .hero-right {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: -20px;
  }

  .main-portrait {
    width: 220px !important;
    height: 220px !important;
    border-radius: 20px !important;
    position: relative;
    z-index: 2;
    background: #fff !important;
    padding: 8px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  }

  .portrait-backdrop {
    position: absolute;
    inset: -15px;
    background: linear-gradient(
      135deg,
      var(--tanuki-pink),
      var(--tanuki-purple)
    );
    opacity: 0.15;
    border-radius: 30px;
    z-index: -1;
    filter: blur(10px);
    animation: drift 8s ease-in-out infinite alternate;
  }

  @keyframes drift {
    from {
      transform: rotate(0deg) scale(1);
    }
    to {
      transform: rotate(5deg) scale(1.05);
    }
  }

  .hero-left {
    width: 100%;
    text-align: center;
  }

  .editorial-label {
    margin-bottom: 12px !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    background: color-mix(
      in srgb,
      var(--tanuki-purple),
      transparent 90%
    ) !important;
    color: var(--tanuki-purple) !important;
  }

  .editorial-name {
    font-size: clamp(3rem, 15vw, 5rem) !important;
    letter-spacing: -3px !important;
    line-height: 0.9 !important;
    text-transform: uppercase;
  }

  .editorial-summary p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    margin-top: 20px !important;
    color: #555 !important;
  }

  .editorial-main-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .editorial-text-flow {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
  }

  /* GLASSMORPHISM PORTFOLIO CARDS */
  .portfolio-item {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    padding: 12px !important;
    gap: 15px !important;
  }

  .item-visual {
    width: 50px !important;
    height: 70px !important;
  }

  .item-name {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
  }

  .item-meta .price {
    font-size: 0.8rem !important;
  }

  .portfolio-item:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.9) !important;
  }

  .product-main-layout {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 2rem 1.5rem !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .woocommerce-product-gallery {
    margin-bottom: 1.5rem !important;
  }

  /* FLUID TYPOGRAPHY FIX */
  .product-title {
    font-size: clamp(2.2rem, 10vw, 3.8rem) !important;
    line-height: 1.15 !important; /* Fixed overlap */
    letter-spacing: -2px !important;
    margin: 0 0 20px 0 !important;
    word-break: break-word; /* Prevent bleed */
  }

  .meta-row {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 0 !important;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 20px 0 !important;
  }

  .meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .meta-label {
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
  }

  .meta-value {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }

  /* Synopsis Refinement */
  .synopsis {
    margin: 30px 0 !important;
    padding: 30px 0 !important;
    border-bottom: 1px solid #f5f5f5;
  }

  .synopsis h2 {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
  }

  .synopsis .content {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #444 !important;
  }

  /* Information Blocks */
  .extra-info-section {
    margin-top: 40px !important;
  }

  .info-block {
    margin-bottom: 60px !important;
  }

  .info-block h2 {
    font-size: 1.6rem !important;
    padding-bottom: 8px !important;
    margin-bottom: 25px !important;
  }

  /* Author Bios list */
  .author-bio-entry {
    margin-bottom: 40px;
  }

  .author-bio-entry h3 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
  }

  .author-bio-entry p {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }

  /* Related Books Grid Fix */
  .product-sidebar {
    width: 100% !important;
    margin-top: 50px !important;
  }

  .related-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .rel-card {
    background: #fff;
    padding: 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f0f0f0;
  }

  .rel-thumb {
    margin-bottom: 12px !important;
    aspect-ratio: 3/4 !important;
  }

  .rel-info h3 {
    font-size: 0.9rem !important;
    height: 2.4em !important;
    -webkit-line-clamp: 2 !important;
  }
}

@media (max-width: 480px) {
  .product-title,
  .shop-title,
  .editorial-name,
  .directory-title,
  .lib-name {
    font-size: clamp(1.8rem, 12vw, 2.5rem) !important;
    letter-spacing: -1.5px !important;
  }

  .bar-info {
    display: none; /* Keep it clean for smallest screens */
  }

  .floating-buy-bar {
    left: 4%;
    right: 4%;
    width: 92%;
    bottom: 20px;
  }
}

/* 3. New Editorial Components */
.editorial-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  color: #888;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.author-bios-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 25px;
}

.author-bio-entry {
  display: flex !important;
  flex-direction: column !important; /* Stacked on mobile */
  gap: 20px;
  align-items: flex-start;
}

.author-pic {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 100px; /* Circular for authors */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 3px solid #fff;
}

.author-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-text h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  margin-bottom: 15px !important;
}

.bio-content {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #555;
}

@media (min-width: 901px) {
  .author-bio-entry {
    flex-direction: row !important;
    align-items: center;
  }

  .author-pic {
    width: 140px;
    height: 140px;
  }
}

/* Character cleanup for headers */
.synopsis h2,
.info-block h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* -------------------------------------------------------------------------- */
/* 8. CART & CROSS-SELLS (GRID ON DESKTOP, CAROUSEL ON MOBILE)
/* -------------------------------------------------------------------------- */
.tanuki-cross-sells {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 2px solid #f0f0f0;
  width: 100% !important;
}

.cross-sells-heading {
  font-size: 1.8rem;
  color: var(--tanuki-purple);
  margin-bottom: 2rem;
  text-align: left;
}

/* Base: Desktop Layout (Full Width Grid) */
.tanuki-horizontal-row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.2rem !important;
  list-style: none !important;
  padding: 1rem 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.tanuki-horizontal-row .tanuki-card {
  width: 100% !important;
  margin: 0 !important;
  flex: none !important;
}

.tanuki-horizontal-row::before,
.tanuki-horizontal-row::after {
  display: none !important;
}

/* Mobile & Tablet: Carousel Layout (Horizontal Scroll) */
@media (max-width: 1024px) {
  .tanuki-horizontal-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 1.5rem !important;
    padding: 1rem 0 2rem 0 !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* Mask effect to show there is more content */
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
  }

  .tanuki-horizontal-row::-webkit-scrollbar {
    height: 6px;
  }

  .tanuki-horizontal-row::-webkit-scrollbar-track {
    background: #f0f0f0;
  }

  .tanuki-horizontal-row::-webkit-scrollbar-thumb {
    background: var(--tanuki-pink);
    border-radius: 10px;
  }

  .tanuki-horizontal-row .tanuki-card {
    flex: 0 0 220px !important;
    width: 220px !important;
  }

  .cross-sells-heading {
    font-size: 1.5rem;
  }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
  .tanuki-horizontal-row .tanuki-card {
    flex: 0 0 180px !important;
    width: 180px !important;
  }
}

/* El bloque tablet de 2 columnas está ahora en
   @media (min-width: 768px) and (max-width: 1024px) más arriba.
   Este bloque ha sido consolidado para evitar conflictos. */

/* ============================================================================
   FINAL OVERRIDE: RELATED PRODUCTS 5-COL GRID - UNIFIED (1024px+)
   ============================================================================ */
@media (min-width: 481px) {
  body.single-product .related-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.8rem !important;
    width: 100% !important;
  }

  body.single-product .related-list .tanuki-card {
    min-height: 0 !important;
    height: 100% !important;
    background: white !important;
    width: 100% !important;
    padding: 0 0 0.8rem 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.single-product .related-list .tanuki-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
  }

  body.single-product .related-list .card-img-box {
    aspect-ratio: 2/3 !important;
    padding: 0.6rem !important;
    margin-bottom: 8px !important;
    border-radius: 6px 6px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.single-product .related-list .card-img-box img {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15) !important;
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 90% !important;
    object-fit: contain !important;
  }

  body.single-product .related-list .card-content {
    padding: 0 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex-grow: 1 !important;
  }

  body.single-product .related-list h3 {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    height: 2.4em !important;
    margin: 0 0 4px 0 !important;
    font-weight: 800 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.single-product .related-list .author {
    display: block !important;
    font-size: 0.6rem !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    height: 1.2em !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  body.single-product .related-list .card-actions-wrapper {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
  }

  body.single-product .related-list .btn-add {
    display: block !important;
    width: 100% !important;
    font-size: 0.65rem !important;
    padding: 6px 2px !important;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 4px;
    line-height: 1;
  }

  /* Hide extras */
  body.single-product .related-list .rating,
  body.single-product .related-list .price,
  body.single-product .related-list .link-more {
    display: none !important;
  }
}

/* Tablet Spacing Fix — consolidado en @media (min-width: 768px) and (max-width: 1024px) */

/* Mobile Vertical Layout Fix (5x1) */
@media (max-width: 480px) {
  body.single-product .related-list {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  body.single-product .related-list .tanuki-card {
    padding: 0 0 1.5rem 0 !important;
  }

  body.single-product .related-list h3 {
    font-size: 1rem !important;
    height: auto !important;
    -webkit-line-clamp: unset !important;
  }

  body.single-product .related-list .author {
    font-size: 0.8rem !important;
    margin-bottom: 1rem !important;
  }

  body.single-product .related-list .btn-add {
  font-size: 0.85rem !important;
  padding: 12px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 19. BUNDLE PRODUCT ITEMS — CARRUSEL UNIVERSAL
/* -------------------------------------------------------------------------- */
/* Aplica en TODOS los viewports. Anchos y señalética se ajustan por breakpoint.
/* Navegación: touch (swipe), mouse (drag + flechas), teclado (←→).
/* -------------------------------------------------------------------------- */

/* Disponibilidad individual: oculta en todos los dispositivos */
.woosb-products .woosb-product .woosb-availability,
.woosb-products .woosb-product .stock {
  display: none !important;
}

/* Separadores punteados del plugin: fuera en todos los viewports */
.woosb-products .woosb-item-text {
  display: none !important;
}

/* -------------------------------------------------------------------
   WRAPPER: contiene carrusel + flechas + dots
------------------------------------------------------------------- */
.woosb-wrap {
  position: relative;
  /* Espacio inferior para los dots */
  padding-bottom: 2.5rem;
}

/* -------------------------------------------------------------------
   HEADER DE SEÑALÉTICA: label + flechas en la misma fila
   Inyectado por JS como .tanuki-carousel-header
------------------------------------------------------------------- */
.tanuki-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding: 0 0.25rem;
}

.tanuki-carousel-label {
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #aaa;
  /* Mobile: una sola línea con truncado — las flechas no se desplazan */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.tanuki-carousel-arrows {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0; /* las flechas nunca se comprimen */
}

.tanuki-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-color, var(--tanuki-pink));
  background: transparent;
  color: var(--accent-color, var(--tanuki-pink));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  /* Tamaño mínimo de touch target WCAG 2.5.5 */
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
}

.tanuki-carousel-btn:hover:not(:disabled) {
  background: var(--accent-color, var(--tanuki-pink));
  color: #fff;
}

.tanuki-carousel-btn:focus-visible {
  outline: 2px solid var(--accent-color, var(--tanuki-pink));
  outline-offset: 2px;
}

.tanuki-carousel-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.tanuki-carousel-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------
   TRACK: el scroll horizontal
------------------------------------------------------------------- */
.woosb-products {
  display: flex !important;
  flex-flow: row nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: 100% !important;
  gap: 1rem !important;
  padding: 0.25rem 0.5rem 1rem 0.25rem !important;
  border: none !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Cursor drag en desktop */
  cursor: grab;
  /* Evita selección de texto al arrastrar */
  user-select: none;
  -webkit-user-select: none;
}

.woosb-products.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto; /* desactiva smooth durante drag para respuesta inmediata */
}

.woosb-products::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------------------------
   TARJETA: anchos por breakpoint (Optimizado para ser MUY compacto)
------------------------------------------------------------------- */
.woosb-products .woosb-product {
  flex: 0 0 130px !important; /* Fluid but stable width */
  min-width: 0 !important;   /* REMOVE RIGID CONSTRAINTS */
  max-width: 130px !important;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  scroll-snap-align: start;
  outline: none;
}

.woosb-products .woosb-product:focus-visible {
  outline: 2px solid var(--accent-color, var(--tanuki-pink));
  outline-offset: 3px;
  border-radius: 10px;
}

.woosb-products .woosb-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.woosb-products .woosb-product:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Tablet: ~4.6 items */
@media (max-width: 1024px) {
  .woosb-products .woosb-product {
    flex: 0 0 calc(22% - 1rem) !important;
    max-width: 120px !important;
  }
}

/* Mobile: ~3.6 items */
@media (max-width: 767px) {
  .woosb-products .woosb-product {
    flex: 0 0 calc(28% - 0.5rem) !important;
    max-width: 110px !important;
  }
}

/* Pequeño mobile: ~2.6 items */
@media (max-width: 480px) {
  .woosb-products .woosb-product {
    flex: 0 0 calc(40% - 0.5rem) !important;
    max-width: 110px !important;
  }
}

/* -------------------------------------------------------------------
   CONTENIDO DE LA TARJETA
------------------------------------------------------------------- */

/* Thumbnail */
.woosb-products .woosb-product .woosb-thumb {
  width: 100% !important;
  flex: none !important;
  aspect-ratio: 2 / 3;
  background-color: var(--accent-color, var(--tanuki-pink)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.4rem !important; /* Compactor */
  box-sizing: border-box;
}

.woosb-products .woosb-product .woosb-thumb img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.18);
  /* Bloquear drag nativo de imagen */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Título */
.woosb-products .woosb-product .woosb-title {
  flex: 1 !important;
  width: 100% !important;
  padding: 0.5rem 0.6rem 0.4rem !important;
  text-align: center;
}

.woosb-products .woosb-product .woosb-title .woosb-name {
  font-family: var(--font-main) !important;
  font-size: 0.62rem !important; /* Smaller text for compact card */
  font-weight: 700 !important;
  color: var(--accent-color, var(--tanuki-pink)) !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; /* Limit to 2 lines to save horizontal space */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: center;
}

.woosb-products .woosb-product .woosb-title .woosb-name a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Precios individuales: ocultar */
.woosb-products .woosb-product .woosb-title .woosb-price,
.woosb-products .woosb-product > .woosb-price {
  display: none !important;
}

/* Cantidad */
.woosb-products .woosb-product .woosb-quantity {
  width: 100% !important;
  flex: none !important;
  padding: 0.3rem 0.6rem 0.6rem !important;
  display: flex !important;
  justify-content: center !important;
}

.woosb-products .woosb-product .woosb-quantity input {
  width: 48px !important;
  height: 32px !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
  text-align: center !important;
  font-family: var(--font-main) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--tanuki-text);
}

/* -------------------------------------------------------------------
   DOTS DE PAGINACIÓN
   Inyectados por JS como .tanuki-carousel-dots
------------------------------------------------------------------- */
.tanuki-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  pointer-events: none;
}

.tanuki-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ddd;
  transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  padding: 0;
  /* Touch target expandido sin alterar el visual */
  position: relative;
}

.tanuki-carousel-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.tanuki-carousel-dot.is-active {
  background: var(--accent-color, var(--tanuki-pink));
  width: 18px;
  border-radius: 3px;
  transform: none;
}

.tanuki-carousel-dot:focus-visible {
  outline: 2px solid var(--accent-color, var(--tanuki-pink));
  outline-offset: 2px;
}

/* Ocultar dots si hay 1 sola tarjeta */
.tanuki-carousel-dots:has(.tanuki-carousel-dot:only-child) {
  display: none;
}

/* -------------------------------------------------------------------
   REDUCIR MOVIMIENTO (accesibilidad)
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .woosb-products {
    scroll-behavior: auto;
  }
  .woosb-products .woosb-product {
    transition: none;
  }
  .tanuki-carousel-dot {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- */
/* 20. BLOQUE DE PRECIO CON DESCUENTO — IMPACTO PSICOLÓGICO DE CONVERSIÓN     */
/* -------------------------------------------------------------------------- */

/*
 * .tanuki-price-block reemplaza .main-price en la página de producto
 * cuando el producto tiene precio de venta activo.
 * Hereda --accent-color del wrapper del producto (.product-page-theme-wrapper).
 * Compatible con todos los dispositivos: mobile-first.
 */

/* Contenedor principal del bloque */
.product-buy-section .tanuki-price-block {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Evitar desbordamiento en cualquier viewport */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

/* 
 * 1.1 STICKY OVERRIDE: 
 * We hide badges and savings text in the sticky bar to maintain a compact 1-row layout.
 */
.tanuki-price-block.is-sticky {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  overflow: visible !important;
}

.tanuki-price-block.is-sticky .tanuki-price-badge,
.tanuki-price-block.is-sticky .tanuki-price-savings,
.tanuki-price-block.is-sticky .shipping-notice {
  display: none !important;
}

.tanuki-price-block.is-sticky .tanuki-price-numbers {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.tanuki-price-block.is-sticky .tanuki-price-regular {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.6) !important;
}

.tanuki-price-block.is-sticky .tanuki-price-regular .woocommerce-Price-amount,
.tanuki-price-block.is-sticky .tanuki-price-regular .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-size: inherit !important;
}

.tanuki-price-block.is-sticky .tanuki-price-sale {
  font-size: 1.3rem !important;
  color: #fff !important;
  letter-spacing: -0.5px !important;
}

/* --- 1. Badge de porcentaje de ahorro --- */
.tanuki-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--accent-color, var(--tanuki-pink));
  color: #fff;
  border-radius: 6px;
  padding: 0.28rem 0.7rem 0.28rem 0.6rem;
  width: fit-content;
  line-height: 1;
  /* Pop de entrada para llamar la atención sin ser agresivo */
  animation: tanuki-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tanuki-badge-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.tanuki-badge-pct {
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.tanuki-badge-label {
  font-family: var(--font-main);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.85;
}

/* --- 2. Fila de precios: tachado + precio final --- */
.tanuki-price-numbers {
  display: flex;
  flex-direction: column; /* mobile-first: tachado encima, precio abajo */
  gap: 0.2rem;
}

/* Desktop: precio tachado y precio de venta en la misma fila */
@media (min-width: 481px) {
  .tanuki-price-numbers {
    flex-direction: row;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
}

/* Precio regular tachado */
.tanuki-price-regular {
  /* Anulamos el estilo nativo del navegador para <del> */
  text-decoration: none;
  position: relative;
  display: inline-block;
  font-family: var(--font-main);
  font-size: 1.2rem;
  font-weight: 500;
  color: #bbb;
}

/* Línea diagonal más elegante y visible que el text-decoration nativo */
.tanuki-price-regular::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1.5px;
  background-color: #999;
  transform: rotate(-6deg);
  border-radius: 2px;
  pointer-events: none;
}

/* Forzamos el color en el span interno de WooCommerce */
.tanuki-price-regular .woocommerce-Price-amount,
.tanuki-price-regular .woocommerce-Price-currencySymbol {
  color: #bbb !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
}

/* Precio de venta — protagonista visual */
.tanuki-price-sale {
  text-decoration: none;
  font-family: var(--font-main);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent-color, var(--tanuki-pink));
  line-height: 1;
  letter-spacing: -1.5px;
}

.tanuki-price-sale .woocommerce-Price-amount,
.tanuki-price-sale .woocommerce-Price-currencySymbol {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* --- 3. Línea de ahorro absoluto --- */
.tanuki-price-savings {
  display: flex;
  align-items: flex-start; /* flex-start para que el icono se alinee con la primera línea */
  flex-wrap: wrap;         /* permite que el texto largo quebre limpiamente */
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
  color: #555;
  background-color: color-mix(in srgb, var(--accent-color, var(--tanuki-pink)), white 92%);
  border-left: 3px solid var(--accent-color, var(--tanuki-pink));
  border-radius: 0 6px 6px 0;
  line-height: 1.35;
  /* Asegura que no desborde el contenedor */
  min-width: 0;
  word-break: break-word;
}

.tanuki-price-savings strong {
  font-weight: 800;
  color: var(--accent-color, var(--tanuki-pink));
}

/* Ícono SVG de checkmark */
.tanuki-savings-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-color, var(--tanuki-pink));
  opacity: 0.8;
}

/* --- Responsive: Mobile (< 480px) --- */
@media (max-width: 480px) {
  .tanuki-price-sale {
    /* clamp: mín 1.8rem, ideal 10vw, máx 2.2rem — nunca desborda */
    font-size: clamp(1.8rem, 10vw, 2.2rem);
    letter-spacing: -1px;
  }

  .tanuki-price-regular {
    font-size: 1rem;
  }

  .tanuki-price-regular .woocommerce-Price-amount,
  .tanuki-price-regular .woocommerce-Price-currencySymbol {
    font-size: 1rem !important;
  }

  .tanuki-price-savings {
    font-size: 0.8rem;
  }

  /* El bloque de precio no puede ser más ancho que su contenedor */
  .product-buy-section {
    padding: 1rem !important;
    overflow: hidden;
  }
}

/* --- Integración con .product-buy-section existente --- */
/*
 * .product-buy-section ya tiene padding, background #fdfdfd y border-radius 16px.
 * .main-price (el contenedor nativo) tiene font-size: 2.2rem.
 * Cuando hay descuento, el filtro PHP inyecta .tanuki-price-block en lugar
 * del HTML plano, por lo que .main-price queda vacío de texto directo
 * y actúa solo como contenedor — no hay conflicto visual.
 */
.product-buy-section .main-price:has(.tanuki-price-block) {
  /* Reseteamos el font-size del wrapper para que no afecte al bloque interno */
  font-size: 1rem;
  color: inherit;
}

/* -------------------------------------------------------------------------- */
/* 21. MOBILE REDESIGN 2024: ELITE CONVERSION (Temu/AliExpress Style)        */
/* -------------------------------------------------------------------------- */

/* Ocultar elementos móviles por defecto en escritorio */
body.single-product .mobile-menu-trigger,
body.single-product .side-menu,
body.single-product .side-menu-overlay,
.mobile-menu-trigger,
.side-menu,
.side-menu-overlay,
.tanuki-bottom-sticky-bar,
.product-mobile-title-block {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* 21. STICKY PRODUCT BAR (MASTER RESPONSIVE ARCHITECTURE)
/* -------------------------------------------------------------------------- */
#tanuki-modern-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998 !important; /* High, but below site header and side cart */
  background: var(--accent-color, var(--tanuki-pink)) !important;
  color: #fff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease, visibility 0.3s;
}

#tanuki-modern-sticky-bar.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#tanuki-modern-sticky-bar .tanuki-sticky-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 90px !important; /* Standardized height */
  padding: 0 40px !important;
  max-width: var(--max-width);
  width: 100%; 
  margin: 0 auto;
  box-sizing: border-box; 
}
@media (max-width: 768px) {
  #tanuki-modern-sticky-bar .tanuki-sticky-container {
    padding: 0 15px !important;
    height: 100px !important; /* Slightly taller for mobile stack if needed */
  }
}

#tanuki-modern-sticky-bar .mobile-text { display: none; }
#tanuki-modern-sticky-bar .desktop-text { display: inline; }

@media (max-width: 480px) {
  #tanuki-modern-sticky-bar .mobile-text { display: inline; }
  #tanuki-modern-sticky-bar .desktop-text { display: none; }
}

/* Hard-kill the legacy plugin bar that uses the old ID */
#tanuki-sticky-product-bar,
.tanuki-sticky-bar-ssr,
.tanuki-sticky-product-bar-wrapper {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  pointer-events: none !important;
}

#tanuki-modern-sticky-bar .tanuki-sticky-name {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800;
  font-size: 1.1rem;
}

#tanuki-modern-sticky-bar .tanuki-sticky-price {
  color: rgba(255,255,255,0.95) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  font-size: 1.2rem;
}

#tanuki-modern-sticky-bar .tanuki-sticky-price ins {
  text-decoration: none !important;
}

#tanuki-modern-sticky-bar .tanuki-sticky-add-to-cart {
  background: var(--accent-color-light, #fff) !important;
  color: var(--accent-color, #000) !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  padding: 0 40px !important; /* Internal spacing */
  height: 54px !important; /* Fixed height with flex-center */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1 !important; /* Crucial for vertical center */
}

#tanuki-modern-sticky-bar .tanuki-sticky-add-to-cart:hover {
  background: #ffffff !important;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  #tanuki-modern-sticky-bar .tanuki-sticky-container {
    padding: 0 15px !important;
    height: 85px !important; /* Slightly taller for stack */
    gap: 10px !important;
  }
  


  #tanuki-modern-sticky-bar .tanuki-sticky-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex: 1;
    min-width: 0; /* Critical for ellipsis */
  }

  #tanuki-modern-sticky-bar .tanuki-sticky-name {
    display: block !important; 
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  #tanuki-modern-sticky-bar .tanuki-sticky-price {
    font-size: 0.95rem !important;
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.3 !important; /* Fixed tight overlap */
    margin-top: 4px;
    justify-content: center;
  }

  #tanuki-modern-sticky-bar .tanuki-sticky-price del {
    font-size: 0.8rem !important;
    display: block !important;
    margin-bottom: -2px !important; /* Tight but distinct */
    opacity: 0.7;
    text-decoration: line-through;
    color: rgba(255,255,255,0.7) !important;
  }

  #tanuki-modern-sticky-bar .tanuki-sticky-price ins {
    font-weight: 800;
    display: block !important;
  }

  #tanuki-modern-sticky-bar .tanuki-sticky-add-to-cart {
    padding: 0 15px !important;
    height: 50px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    min-width: 110px !important;
  }
}

/* TABLET REFINEMENT (481px to 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  #tanuki-modern-sticky-bar .tanuki-sticky-container {
    padding: 0 24px !important;
    gap: 25px !important;
  }
  #tanuki-modern-sticky-bar .tanuki-sticky-name {
    display: block !important;
    max-width: 350px !important; /* Visible and spacious on tablets */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #tanuki-modern-sticky-bar .tanuki-sticky-meta {
    flex: 1;
  }
}

/* Specific fix for ultra-small screens (320px) */
@media (max-width: 350px) {
  #tanuki-modern-sticky-bar .tanuki-sticky-container {
    gap: 4px !important;
  }

}



.tanuki-sticky-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px; /* RECLAIMED WIDTH FOR NARROW SCREENS */
  gap: 12px;
  width: 100%;
}

.tanuki-sticky-product-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.tanuki-sticky-image img {
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: block;
}

.tanuki-sticky-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.tanuki-sticky-name {
  font-weight: 800;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.tanuki-sticky-stock {
  font-size: 0.6rem;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tanuki-sticky-price {
  font-weight: 800;
  color: var(--accent-color, #000);
  line-height: 1;
}

.tanuki-sticky-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tanuki-sticky-add-to-cart {
  background: var(--accent-color, #000);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.tanuki-sticky-add-to-cart:active {
  transform: scale(0.96);
}

/* Selector de Cantidad - Estilo Base Refinado */
.tanuki-sticky-quantity .quantity {
  display: flex;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tanuki-sticky-quantity button {
  border: none;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}

.tanuki-sticky-quantity button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.tanuki-sticky-quantity .qty {
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 800;
  color: #000;
  padding: 0;
  -moz-appearance: textfield;
}

.tanuki-sticky-quantity .qty::-webkit-outer-spin-button,
.tanuki-sticky-quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- MOBILE SPECIFIC (< 900px) --- */
@media (max-width: 899px) {
  .tanuki-sticky-container {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .tanuki-sticky-image img {
    height: 32px;
  }
  
  .tanuki-sticky-name {
    font-size: 0.8rem;
    max-width: 90px;
  }
  
  .tanuki-sticky-price {
    font-size: 0.85rem;
  }
  
  .tanuki-sticky-stock {
    display: none; /* Ahorrar espacio vertical en móvil */
  }

  .tanuki-sticky-quantity .quantity {
    height: 32px;
  }
  
  .tanuki-sticky-quantity button {
    width: 24px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .tanuki-sticky-quantity .qty {
    width: 20px;
    font-size: 0.8rem;
  }
  
  .tanuki-sticky-add-to-cart {
    height: 32px;
    padding: 0 10px;
    font-size: 0.65rem;
  }
}

/* --- DESKTOP SPECIFIC (> 900px) --- */
@media (min-width: 900px) {
  .tanuki-sticky-image img {
    height: 40px;
  }
  
  .tanuki-sticky-name {
    font-size: 1.15rem;
  }
  
  .tanuki-sticky-price {
    font-size: 1.15rem;
  }

  .tanuki-sticky-quantity .quantity {
    height: 38px;
  }
  
  .tanuki-sticky-quantity button {
    width: 32px;
    height: 38px;
    font-size: 1.2rem;
  }
  
  .tanuki-sticky-quantity .qty {
    width: 40px;
    font-size: 1rem;
  }
  
  .tanuki-sticky-add-to-cart {
    height: 38px;
    padding: 0 25px;
    font-size: 0.85rem;
  }
}

/* --- CONTINUACIÓN DEL ARCHIVO --- */
@media (max-width: 900px) {
  /* Cabecera compacta de una sola fila - CLARITY OPTIMIZATION: 50px */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  }

  .header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 15px !important;
    min-height: 50px !important;
    gap: 10px !important;
    border-bottom: 1px solid #f0f0f0;
  }

  .mobile-menu-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #000;
  }

  /* Reducir tamaño de iconos de acción */
  .header-actions .action-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .site-branding {
    order: 2;
    margin: 0 !important;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .site-branding img {
    max-height: 28px !important;
    width: auto !important;
  }

  .header-actions {
    order: 3;
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .header-actions .account-link {
    display: none !important; /* Más limpio, solo search y cart en móvil */
  }

  /* Ocultar la barra de navegación horizontal antigua */
  .header-bottom {
    display: none !important;
  }

  /* CLARITY: Ocultar miniaturas para rescatar ~120px */
  .flex-control-nav.flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 15px !important;
    padding: 0 10px !important;
  }

  .flex-control-nav.flex-control-thumbs li {
    width: 50px !important;
    height: 65px !important;
    border-radius: 6px !important;
  }

  /* CLARITY: Reducir imagen para rescatar ~150px de scroll */
  .woocommerce-product-gallery {
    margin-bottom: 25px !important;
    max-width: 100% !important; /* Slider a ancho completo para impacto visual */
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0 !important; /* Bordes rectos para el slider mobile o redondeo suave */
    border: none !important;
    box-shadow: none !important;
  }

  .woocommerce-product-gallery img {
    border-radius: 0 !important; /* Estilo editorial full-bleed */
    box-shadow: none !important;
  }

  /* Reducir tamaño de flechas de navegación móvil */
  .mobile-gallery-arrow {
    width: 34px !important;
    height: 34px !important;
  }

  /* REORDENACIÓN MOBILE (Movida a query estricto de 767px al final del archivo) */

  /* No longer using display: contents, relying on DOM order */
  .synopsis {
    padding: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #eee; /* Visual separator */
  }

  .synopsis h2 {
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 2px !important;
    color: #999;
    margin-bottom: 15px !important;
  }

  .product-details {
    display: block !important;
    padding: 0 !important;
    max-width: 100% !important; /* LOCK WIDTH */
    overflow: hidden !important;   /* PREVENT CAROUSEL OVERFLOW FROM PUSHING PARENT */
  }

  .product-featured-image-top {
    display: block !important;
    margin-bottom: 15px !important; /* Compact */
    padding: 0 20px !important;
    text-align: center !important;
  }

  .product-featured-image-top img {
    max-height: 240px !important; /* CRITICAL: Ensure synopsis is visible above the fold */
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important; /* More subtle */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin: 0 auto !important;
  }

  .main-price {
    font-size: 1.7rem !important; /* Slightly smaller for safety */
    line-height: 1.1 !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-weight: 800 !important;
  }

  .product-gallery {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Estilos de la sección de compra (Movidos a query estricto de 767px) */

  .synopsis {
    padding: 0 20px !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
  }

  .meta-row {
    padding: 0 20px !important;
    margin-bottom: 20px !important;
  }

  .tax-info {
    order: 7 !important;
    padding: 0 20px !important;
    margin-bottom: 20px !important;
  }

  .product-sidebar {
    order: 10 !important; /* Mandar al final absoluto en móviles */
    padding: 20px 15px !important;
    background: #fdfdfd !important;
  }

  /* Ajustar estilos de sinopsis en móvil para que lea mejor arriba */
  .synopsis h2 {
    font-size: 1.2rem !important;
    margin-top: 0 !important; /* Eliminamos el margen superior por defecto */
    margin-bottom: 10px !important;
    color: var(--accent-color) !important;
  }

  .synopsis .content {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  .side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85vw;
    max-width: 300px; /* Un poco más estrecho para mayor elegancia */
    height: 100%;
    background: #fff;
    z-index: 10000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%); /* Oculto a la izquierda */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
  }

  .side-menu.active {
    transform: translateX(0); /* Posición final exacta */
  }

  .side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(4px);
    transition: all 0.4s ease;
  }

  .side-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .side-menu-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .side-logo {
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: -1px;
    color: #000;
  }

  .side-menu-close {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
  }

  .side-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }

  .mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-navigation li {
    margin-bottom: 5px;
    border-bottom: 1px solid #f9f9f9;
  }

  .mobile-navigation li a {
    display: block;
    padding: 12px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #444;
    text-decoration: none;
  }

  .side-menu-footer {
    padding: 20px;
    background: #fdfdfd;
    border-top: 1px solid #f0f0f0;
  }

  .side-footer-link {
    display: block;
    padding: 10px;
    background: #000;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
  }

  /* PRODUCT ATF ENHANCEMENTS (Movidos a query estricto de 767px al final del archivo) */

  /* Refinar iconos de cabecera */
  .header-actions .action-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.2 !important; /* Un poco más de cuerpo */
    stroke: #000 !important;
    transition: transform 0.2s ease;
  }
  
  .header-actions .action-icon:active svg {
    transform: scale(0.9);
  }

  /* Ocultado en query estricto de 767px */
}

/* 22. TRUST BADGES UTILITIES */
.tanuki-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trust-badge svg {
  color: var(--accent-color, #000);
  opacity: 0.7;
}

/* Shipping notice below price - CRITICAL: Must be small and discreet */
.price > .shipping-notice,
.main-price > .shipping-notice,
.shipping-notice {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #999 !important; /* Discreet grey for main areas */
    margin-top: 4px !important;
    text-align: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-style: italic !important;
    opacity: 0.9 !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

/* White color and left-alignment for the sticky product bar notice */
.tanuki-sticky-price .shipping-notice {
    display: block !important; /* Force new line and left-alignment */
    width: 100% !important;
    margin-left: 0 !important; /* Fix indentation */
    margin-top: 2px !important;
    font-size: 10px !important;
    color: #ffffff !important; /* Pure white */
    opacity: 1 !important;
    text-align: left !important;
}

@media (max-width: 900px) {
    .tanuki-sticky-price .shipping-notice {
        display: none; /* Hide in sticky bar on mobile to save space */
    }
}

/* -------------------------------------------------------------------------- */
/* COOKIE BANNER: MULTI-VIEWPORT LUXURY OPTIMIZATION
/* -------------------------------------------------------------------------- */

/* GENERAL: Non-blocking interaction for all viewports */
body.cmplz-banner-active {
    pointer-events: auto !important;
}
.cmplz-soft-cookiewall {
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 99999998 !important;
}

/* 1. MOBILE (< 768px): EXTREME "LUXURY TOAST" */
@media (max-width: 767px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-dismissed) {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999999 !important;
    padding: 12px 18px 10px !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12) !important;
    max-height: 38vh !important;
    overflow-y: hidden !important;
    border-top: 1px solid #eee !important;
    transform: none !important;
  }

  .cmplz-cookiebanner .cmplz-message {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    color: #444 !important;
    text-align: left !important;
    padding: 0 !important;
  }

  .cmplz-cookiebanner .cmplz-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "deny accept" !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Force hiding of all secondary UI on Mobile */
  .cmplz-cookiebanner .cmplz-header,
  .cmplz-cookiebanner .cmplz-logo,
  .cmplz-cookiebanner .cmplz-links,
  .cmplz-cookiebanner .cmplz-categories,
  .cmplz-cookiebanner .cmplz-documents,
  .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept):not(.cmplz-deny) {
    display: none !important;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    height: 38px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    margin: 0 !important;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    grid-area: accept !important;
    background-color: #1e73be !important;
    color: #ffffff !important;
  }

  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    grid-area: deny !important;
    background-color: #f5f5f5 !important;
    color: #444 !important;
  }
}

/* 2. TABLET (768px - 999px): COMPACT ROW */
@media (min-width: 768px) and (max-width: 999px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-dismissed) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 15px 30px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999999 !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid #eee !important;
  }
  
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    flex: 1 !important;
    color: #444 !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    display: flex !important;
    gap: 10px !important;
    min-width: 250px !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
    height: 40px !important;
    padding: 0 15px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    text-transform: none !important;
  }
  
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header, 
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept):not(.cmplz-deny) {
      display: none !important;
  }
}

/* 3. DESKTOP (> 1000px): SIDE BOX */
@media (min-width: 1000px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-dismissed) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    width: 380px !important;
    left: 30px !important;
    right: auto !important;
    bottom: 30px !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.12) !important;
    background-color: #ffffff !important;
    z-index: 99999999 !important;
    border: 1px solid #f0f0f0 !important;
  }
  
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
      font-size: 12px !important;
      line-height: 1.6 !important;
      margin-bottom: 20px !important;
      color: #111 !important;
      text-align: justify !important;
      hyphens: auto !important;
      display: block !important;
  }
  
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
      display: flex !important;
      gap: 10px !important;
      width: 100% !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
      height: 44px !important;
      padding: 0 20px !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      border-radius: 8px !important;
      text-transform: none !important;
      flex: 1 !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header, 
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept):not(.cmplz-deny) {
      display: none !important;
  }
}

/* 
-------------------------------------------------------------------------- */
/* STRICT MOBILE EXCLUSIVE SETTINGS (< 768px)
/* 
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* REORDENACIÓN MOBILE: IMAGEN -> COMPRA -> SINOPSIS */
  .product-main-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px 15px !important; /* RECLAIMING WIDTH: From 64px to 15px lateral air */
    border-radius: 0 !important; /* Full-bleed feel on mobile */
    box-shadow: none !important; /* Clean editorial mobile look */
    border: none !important;
  }

  /* Control preciso del orden en móvil */
  .product-mobile-title-block { order: 1; }
  .product-featured-image-top { order: 2; }
  .product-details { order: 3; }
  .synopsis { order: 4; }
  .product-gallery { order: 5; }
  .product-sidebar { order: 6; }

  /* Centrar la portada del libro en móvil */
  .product-featured-image-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  .product-featured-image-top img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 70% !important;
    height: auto !important;
  }

  /* Ocultar la fila de autores duplicada ya que la pusimos arriba */
  .product-details .meta-row {
    display: none !important;
  }

  /* --- PRODUCT ATF ENHANCEMENTS --- */
  .product-mobile-title-block {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding-top: 5px;
  }

  .product-mobile-title-block .product-title {
    font-size: 1.8rem !important;
    margin: 0 !important;
    line-height: 0.85 !important;
    font-weight: 900 !important;
    letter-spacing: -1.5px !important;
  }

  .product-mobile-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    margin-top: 4px;
    margin-bottom: 2px;
  }

  .mobile-meta-item {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }

  .mobile-meta-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    font-weight: 600;
    margin-bottom: 1px;
  }

  .mobile-meta-value {
    font-size: 0.8rem;
    font-weight: 600;
  }

  .mobile-meta-value a {
    color: inherit;
    text-decoration: none;
  }

  .product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
  }

  /* Estrellas WooCommerce - Estilo Premium */
  .star-rating {
    font-family: 'star' !important; /* Fuente oficial de WooCommerce */
    font-size: 0.85rem !important;
    width: 5.4em !important;
    height: 1em !important;
    line-height: 1 !important;
    overflow: hidden;
    position: relative;
    display: inline-block;
    color: var(--accent-color, var(--tanuki-pink)) !important;
    letter-spacing: 0.1em;
  }

  .star-rating::before {
    content: "\73\73\73\73\73"; /* Estrellas vacías */
    opacity: 0.25;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
  }

  .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1em;
  }

  .star-rating span::before {
    content: "\53\53\53\53\53"; /* Estrellas llenas */
    top: 0;
    position: absolute;
    left: 0;
  }

  .product-details .product-title {
    display: none !important;
  }

  /* REDUCCIÓN DE ESPACIO EN SECCIÓN DE COMPRA */
  .product-buy-section {
    margin-top: 5px !important;
    margin-bottom: 20px !important;
    padding: 12px 10px !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fdfdfd !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .product-buy-section .main-price {
    margin-bottom: 0px !important; /* Pegar precio a nota de envío */
  }

  .product-buy-section .shipping-notice {
    margin-bottom: 5px !important; /* Un poco de aire antes del stock */
  }

  /* LAYOUT FINAL COMPACTO: Botón al lado de cantidad, stock abajo */
  /* Usamos selectores de alta especificidad para ganar a las reglas generales del tema */
  html body.single-product .product-buy-section .main-price {
    margin-bottom: 0 !important;
  }

  html body.single-product .product-buy-section .shipping-notice {
    margin-bottom: 2px !important;
    margin-top: -4px !important; /* Pegar más al precio */
  }

  html body.single-product .product-buy-section .buy-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html body.single-product .product-buy-section .buy-actions form.cart {
    display: flex !important;
    flex-direction: row !important; /* FORZAR FILA */
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    margin-top: 5px !important;
  }

  html body.single-product .buy-actions .quantity {
    flex: 0 0 auto !important;
    margin: 0 !important;
    display: block !important;
  }

  html body.single-product .buy-actions .quantity input {
    height: 50px !important;
    width: 50px !important;
    font-size: 1.1rem !important;
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 12px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  html body.single-product .product-buy-section .main-price {
    margin-bottom: 0px !important;
    line-height: 1 !important;
  }

  html body.single-product .product-buy-section .shipping-notice {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    font-size: 0.6rem !important;
    line-height: 1 !important;
  }

  html body.single-product .product-buy-section .buy-actions form.cart {
    display: flex !important;
    flex-direction: row !important; /* FORZAR FILA */
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 0px !important;
    margin-top: 2px !important;
  }

  html body.single-product .buy-actions .quantity input {
    height: 48px !important;
    width: 45px !important;
    font-size: 1rem !important;
    background: #f5f5f5 !important;
    border: none !important;
    border-radius: 12px !important;
    text-align: center !important;
    padding: 0 !important;
  }

  html body.single-product .buy-actions .single_add_to_cart_button {
    flex: 1 !important;
    height: 48px !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    min-width: 0 !important;
  }

  /* El stock ahora va debajo de la acción principal */
  html body.single-product .product-buy-section .stock {
    order: 10 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
    color: #999 !important;
    text-transform: uppercase;
    display: flex !important;
    align-items: center !important;
    gap: 4px;
    justify-content: center !important;
    width: 100% !important;
  }

  html body.single-product .product-buy-section .stock::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4caf50;
    flex-shrink: 0;
  }

  /* BLOQUE DE CONFIANZA / PAGO SEGURO */
  .product-trust-section {
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    text-align: center !important;
    width: 100% !important;
    order: 20 !important;
  }

  .trust-label {
    font-size: 0.5rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: #bbb !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .trust-icons {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    opacity: 0.8 !important; /* Brillo total para confianza */
    pointer-events: none !important;
    margin-top: 2px !important;
  }

  .trust-item {
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .trust-item img {
    height: 100% !important;
    width: auto !important;
    display: block !important;
    max-width: none !important;
  }

  /* Ajustes específicos por logo */
  .pse-logo { height: 14px !important; }
  .mp-logo { height: 12px !important; }
  .visa-logo { height: 10px !important; }
  .mc-logo { height: 14px !important; }
  .ticket-logo { height: 14px !important; }
}

/* ===================================================
   TRUST SECTION: ESTILOS GLOBALES (TODOS LOS VIEWPORTS)
   Garantizan que el bloque de confianza se vea bien
   en tablet, desktop y cualquier ancho.
   =================================================== */
.product-trust-section {
  pointer-events: none;
  user-select: none;
}

.trust-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0.75;
  pointer-events: none;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

.trust-item img {
  height: 100%;
  width: auto;
  display: block;
  max-width: none;
}

.trust-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 6px;
}

/* Tablet y desktop: logos un poco más grandes y con más air */
@media (min-width: 768px) {
  .product-trust-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    text-align: center;
  }

  .trust-item {
    height: 22px;
  }

  .pse-logo { height: 18px; }
  .mp-logo { height: 16px; }
  .visa-logo { height: 13px; }
  .mc-logo { height: 18px; }
  .ticket-logo { height: 18px; }

  .trust-icons {
    gap: 14px;
    opacity: 0.7;
  }
}