:root {
    --bg:        #ffffff;
    --surface:#f7f4ec;
    --line:     #e8e2d2;
    --ink:     #211a0f;
    --muted:     #726a57;
    --gold:       #a87c2c;
    --gold-light: #c9a24c;
    --gold-vivid:  #8a6522;
    --band:     #211a0f;
    --error-bg: #fbefea;
    --error-border: #e7b9ab;
    --error-text: #a33a24;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#15110b; --surface:#1c1710; --line:#352c1c; --ink:#f3ecdd; --muted:#b3a68c;
      --gold:#d8b566; --gold-light:#e9d19a; --gold-vivid:#e9d19a; --band:#0c0a06;
      --error-bg:#2a1510; --error-border:#6b2c1d; --error-text:#f0a08c; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg:#15110b; --surface:#1c1710; --line:#352c1c; --ink:#f3ecdd; --muted:#b3a68c;
    --gold:#d8b566; --gold-light:#e9d19a; --gold-vivid:#e9d19a; --band:#0c0a06;
    --error-bg:#2a1510; --error-border:#6b2c1d; --error-text:#f0a08c; color-scheme: dark;
  }

  * { box-sizing: border-box; }
  html, body { background: var(--bg); }
  
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
    position: relative;
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .035; mix-blend-mode: multiply;
  }
  :where(.mdg) h1, :where(.mdg) h2, :where(.mdg) h3 { font-family: 'Bitter', Georgia, serif; text-wrap: balance; margin: 0; }
  .script { font-family: 'Italianno', cursive; line-height: 1; }
  .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  :where(.mdg) p { margin: 0; }
  :where(.mdg) a { color: inherit; }
  :where(.mdg) img, :where(.mdg) svg { max-width: 100%; }
  :where(.mdg) button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
  [hidden] { display: none !important; }
  ::selection { background: var(--gold-light); color: var(--band); }

  /* ───────── barra de desplazamiento propia ───────── */
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--gold) 55%, transparent);
    border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }
  ::-webkit-scrollbar-corner { background: transparent; }
  .search-overlay ::-webkit-scrollbar-thumb { background-color: rgba(201,162,76,.45); }
  .search-overlay ::-webkit-scrollbar-thumb:hover { background-color: rgba(201,162,76,.8); }
  /* Firefox no entiende las reglas de arriba; usa las propiedades estándar */
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 60%, transparent) transparent; }
    .search-overlay * { scrollbar-color: rgba(201,162,76,.5) transparent; }
  }

  /* el margen lateral va en el contenido, no en body: así header, bandas y fondos llegan de borde a borde */
  .wrap {
    max-width: calc(1180px + 32px); margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .kicker { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

  /* ───────── barra superior ───────── */
  body::before {
    content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
    z-index: 30; background: var(--band);
  }
  .top-bar { background: var(--band); color: #e9dfc8; }
  .top-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 9px; font-size: .78rem; }
  .social-links { display: flex; align-items: center; gap: 12px; }
  .social-links a { color: #c9bfa4; display: flex; transition: color .15s, transform .15s; }
  .social-links a:hover { color: var(--gold-light); transform: translateY(-1px); }
  .top-shipping-row { display: flex; align-items: center; gap: 10px; }
  .top-shipping-row .shipping-label { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: #c9bfa4; font-weight: 700; }
  .top-shipping-row .top-flags { display: flex; gap: 6px; }
  .top-shipping-row .top-flags span { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(233,223,200,.35); transition: transform .15s; }
  .top-shipping-row .top-flags span:hover { transform: translateY(-1px); }

  /* ───────── header: minimalista, logo centrado, todo lo demás en paneles ───────── */
  
  header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); will-change: transform; }
  .masthead-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 18px; }
  .left-side, .right-side { display: flex; align-items: center; gap: 8px; }
  .right-side { justify-content: flex-end; }
  .new-badge { display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .new-badge img { height: 64px; width: auto; }

  .utility-icon {
    width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink);
    transition: background .15s;
  }
  .utility-icon:hover { background: var(--surface); }

  .header-country-selector { position: relative; }
  .header-country-selector > button {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, background .15s;
  }
  .header-country-selector > button:hover { border-color: var(--gold); background: var(--surface); }
  
  .header-flag-select {
    display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line);
    width: clamp(16px, 6vw, 24px); aspect-ratio: 28 / 20; flex-shrink: 1; transform: scale(1.15);
  }
  .header-flag-select svg { width: 100%; height: 100%; display: block; }
  .country-selector-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
  .country-selector-label { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .header-country-name { font-size: .82rem; font-weight: 700; white-space: nowrap; }
  .header-country-selector .chevron { color: var(--muted); flex-shrink: 0; }
  .country-menu {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 25; background: var(--bg); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); padding: 7px; min-width: 190px;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .country-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .country-option {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px;
    font-size: .85rem; color: var(--ink); text-align: left;
  }
  .country-option:hover { background: var(--surface); }
  .country-option.active { font-weight: 700; color: var(--gold-vivid); }
  .country-option .option-flag { display: flex; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; }
  @media (max-width: 480px) {
    .country-selector-text, .header-country-selector .chevron { display: none; }
    .header-country-selector > button { padding: 0 9px; height: 40px; }
  }
  .btn-hamburger { display: none; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; color: var(--ink); }
  .btn-hamburger:hover { background: var(--surface); }

  .btn-cart {
    position: relative; background: var(--band); color: #f3ecdd; border-radius: 999px;
    padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; white-space: nowrap;
    text-decoration: none;
    /* nuestro, no del prototipo: ahí era un <button> (sin subrayado por
       defecto); acá es un <a> real al carrito (funciona sin JS), así que
       hay que quitarle el subrayado a mano. */
  }
  .btn-cart svg { flex-shrink: 0; }
  .btn-cart .account {
    background: var(--gold-light); color: var(--band); font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
    display: grid; place-items: center; padding: 0 3px;
  }
  @keyframes bounce-cart { 0%,100%{transform:scale(1)} 35%{transform:scale(1.2)} 60%{transform:scale(.92)} }
  .btn-cart.bounce { animation: bounce-cart .45s ease; }
  @keyframes pulse-count { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }
  .account.pulse { animation: pulse-count .4s ease; }

  .gold-line { height: 2px; background: linear-gradient(90deg, transparent, var(--gold-light) 20%, var(--gold) 50%, var(--gold-light) 80%, transparent); }

  /* overlay de búsqueda: pantalla completa, con resultados en vivo */
  .search-overlay {
    position: fixed; inset: 0; background: var(--band); z-index: 46; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .search-overlay.active { opacity: 1; visibility: visible; }
  /* el campo queda fijo arriba: solo la lista de resultados se desplaza */
  .search-content {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: 10px max(22px, env(safe-area-inset-left, 0px)) 0; max-width: 760px; margin: 0 auto; width: 100%;
  }
  .search-large { position: relative; flex-shrink: 0; display: flex; align-items: center; border-bottom: 2px solid rgba(239,231,212,.3); padding-bottom: 16px; margin-top: 10px; }
  .search-large svg { color: var(--gold-light); flex-shrink: 0; margin-right: 14px; }
  .search-large input {
    flex: 1; min-width: 0; background: none; border: none; color: #fff; font-family: 'Bitter', serif;
    font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 600;
  }
  .search-large input::placeholder { color: rgba(239,231,212,.4); }
  .search-large input:focus { outline: none; }
  .search-large input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; cursor: pointer; opacity: .8;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .search-large input::-webkit-search-cancel-button:hover { opacity: 1; }
  .search-results {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    margin-top: 14px; padding: 14px 8px 50px 0; display: flex; flex-direction: column; gap: 2px;
    mask-image: linear-gradient(to bottom, transparent, #000 18px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px);
  }
  .search-result {
    display: flex; align-items: center; gap: 16px; padding: 12px 10px; border-radius: 12px; text-decoration: none; color: #fff;
    transition: background .15s;
  }
  .search-result:hover { background: rgba(255,255,255,.06); }
  .search-result img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
  .search-result .result-info { flex: 1; min-width: 0; }
  .search-result .result-name { font-size: .94rem; font-weight: 700; }
  .search-result .result-category { font-size: .74rem; color: rgba(239,231,212,.55); margin-top: 2px; }
  .search-result .result-price { font-family: 'IBM Plex Mono', monospace; font-size: .86rem; color: var(--gold-light); font-weight: 600; flex-shrink: 0; white-space: nowrap; }
  .search-empty { margin-top: 40px; text-align: center; color: rgba(239,231,212,.5); font-size: .9rem; }

  /* overlay de búsqueda: cabecera compartida (el panel en sí está más abajo) */
  .categories-head-overlay { display: flex; justify-content: space-between; align-items: center; padding: 22px max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px)); }
  .categories-head-overlay .kicker { color: var(--gold-light); }
  .close-overlay { color: #efe7d4; font-size: 1.8rem; line-height: 1; padding: 6px; }

  /* ───────── fila de navegación + mega menú de categorías ───────── */
  .nav-row { background: var(--band); padding-block: 13px; }
  .nav-row-content { display: flex; justify-content: center; align-items: center; gap: 30px; }
  .nav-row-content > a {
    text-decoration: none; color: #efe7d4; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  }
  .nav-row-content > a:hover { color: var(--gold-light); }
  .nav-coming-soon {
    display: inline-flex; align-items: center; gap: 8px; color: rgba(239,231,212,.55); cursor: default;
    font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  }
  .coming-soon-pill {
    font-size: .56rem; letter-spacing: .06em; padding: 3px 7px; border-radius: 999px;
    border: 1px solid rgba(201,162,76,.55); color: var(--gold-light);
  }
  /* <details> es de bloque por defecto: sin display:flex aquí, el <summary>
     inline-flex queda metido en una caja de línea normal (alineada por
     baseline) en vez de centrarse igual que sus hermanos <a>, y por eso
     "Categorías" se veía un poco más abajo que el resto del menú. */
  .categories-menu-wrap { position: relative; display: inline-flex; align-items: center; }
  .categories-trigger {
    display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: #efe7d4;
  }
  .categories-trigger:hover { color: var(--gold-light); }
  .categories-trigger .chevron { transition: transform .15s; }
  .categories-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  
  
  .mega-menu {
    position: absolute; top: calc(100% + 16px); left: -18px; width: min(760px, 92vw);
    background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.4); z-index: 25; color: var(--ink);
    display: flex; align-items: stretch; overflow: hidden; max-height: 460px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
  .mega-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  
  .categories-menu-wrap:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  /* al navegar a una categoría el menú se cierra aunque el mouse siga encima */
  .categories-menu-wrap.force-closed .mega-menu { opacity: 0 !important; visibility: hidden !important; }
  
  .categories-menu-wrap::after {
    content: ""; position: absolute; left: -18px; top: 100%; width: min(760px, 92vw); height: 16px;
  }

  .mega-category-list {
    flex: 0 0 240px; border-right: 1px solid var(--line); padding: 10px; overflow-y: auto;
  }
  .mega-category-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none;
    color: var(--ink); transition: background .15s, color .15s;
  }
  .mega-category-item:hover, .mega-category-item.active { background: var(--surface); }
  .mega-category-item.active { color: var(--gold-vivid); font-weight: 700; }
  .mega-category-item-icon {
    width: 28px; height: 28px; border-radius: 999px; background: var(--bg); display: grid; place-items: center;
    color: var(--gold-vivid); flex-shrink: 0; box-shadow: 0 0 0 1px var(--line);
  }
  .mega-category-item.active .mega-category-item-icon { background: var(--gold); color: #fff; box-shadow: none; }
  .mega-category-item-name { font-size: .84rem; flex: 1; min-width: 0; }
  .mega-category-item-chevron { color: var(--line); flex-shrink: 0; }
  .mega-category-item.active .mega-category-item-chevron { color: var(--gold); }

  .mega-categories-panel { flex: 1; min-width: 0; padding: 26px 28px; overflow-y: auto; }
  .mega-category-panel-group { display: none; }
  .mega-category-panel-group.active { display: block; }
  .mega-category-panel-head {
    display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); margin-bottom: 18px;
  }
  .mega-panel-head-icon {
    width: 46px; height: 46px; border-radius: 999px; background: var(--surface); display: grid; place-items: center;
    color: var(--gold-vivid); flex-shrink: 0; transition: background .15s, color .15s, transform .15s;
  }
  .mega-category-panel-head:hover .mega-panel-head-icon { background: var(--gold); color: #fff; transform: scale(1.06) rotate(-4deg); }
  .mega-panel-head-name { display: block; font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 1.15rem; }
  .mega-category-panel-head:hover .mega-panel-head-name { color: var(--gold-vivid); }
  .mega-panel-head-kicker { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
  .mega-panel-subcategory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .mega-panel-subcategory-grid a {
    font-size: .84rem; color: var(--muted); text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--line);
    transition: color .15s, transform .15s;
  }
  .mega-panel-subcategory-grid a:hover { color: var(--gold-vivid); transform: translateX(3px); }
  .mega-panel-view-all {
    display: inline-flex; margin-top: 18px; font-size: .82rem; font-weight: 700; color: var(--gold-vivid); text-decoration: none;
  }
  .mega-panel-view-all:hover { text-decoration: underline; }
  .btn-view-mega-panel { margin-top: 2px; }
  
  .mega-panel-products { display: flex; flex-direction: column; gap: 2px; }
  .mega-panel-product {
    display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; text-decoration: none;
    color: var(--ink); transition: background .15s;
  }
  .mega-panel-product:hover { background: var(--surface); }
  .mega-panel-product-photo {
    width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--surface);
    border: 1px solid var(--line);
  }
  .mega-panel-product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mega-panel-product-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mega-panel-product-name {
    font-size: .86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mega-panel-product-price { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--gold-vivid); }
  .mega-panel-empty { font-size: .84rem; color: var(--muted); max-width: 32ch; margin-bottom: 14px; }

  /* ───────── hero: banner que se arrastra a mano ───────── */
  .hero { position: relative; }
  .carousel {
    position: relative; overflow: hidden; cursor: grab; touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
  }
  .carousel.dragging { cursor: grabbing; }
  .carousel-track { }
  /* nuestro, no del prototipo: ver nota de .slide-grid más arriba —
     .carousel-track también es un bloque Grupo, así que el flex de la
     tira se mueve a su .wp-block-group__inner-container real. */
  .carousel-track > .wp-block-group__inner-container { display: flex; will-change: transform; }
  
  .slide {
    flex: 0 0 100%; min-height: 460px; display: flex; align-items: center; position: relative; z-index: 0;
    background-color: #241a0c; background-size: cover; background-position: center;
  }
  .slide::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(18,13,5,.92) 15%, rgba(18,13,5,.6) 50%, rgba(18,13,5,.22));
  }
  .slide-grid { position: relative; z-index: 1; padding-block: 56px; padding-left: clamp(16px, 7vw, 90px); width: 100%; }
  .slide-text { color: #fbf3df; }
  .slide-text .script { font-size: clamp(1.9rem, 4.2vw, 2.6rem); color: var(--gold-light); display: block; margin-bottom: 8px; }
  .slide-text h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.22; max-width: 15ch; color: #fbf3df; }
  .slide-text p.lead { margin-top: 14px; color: rgba(251,243,223,.82); max-width: 38ch; font-size: .96rem; }
  .slide-text .btn { margin-top: 24px; }
  .slide-art { position: relative; }
  .floating-photo {
    border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(0,0,0,.5);
    aspect-ratio: 1; width: min(300px, 70vw); pointer-events: none;
  }
  .floating-photo.spin-left { transform: rotate(-3deg); }
  .floating-photo.spin-right { transform: rotate(3deg); }
  .floating-photo img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
  .carousel-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
  .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(251,243,223,.4); border: none; padding: 0; }
  .dot.active { background: var(--gold-light); width: 22px; transition: width .2s; }
  .dot.light { background: var(--line); }
  .dot.light.active { background: var(--gold); }
  .testimonial-dots .dot { background: rgba(255,255,255,.35); }
  .testimonial-dots .dot.active { background: var(--gold-light); }

  .carousel-arrow {
    width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff;
    display: grid; place-items: center; transition: background .15s, opacity .2s;
  }
  .carousel-arrow:hover { background: rgba(255,255,255,.26); }
  .carousel-arrow.light { background: var(--bg); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0,0,0,.25); }
  .carousel-arrow.light:hover { background: var(--surface); }
  .hero .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
  .hero .carousel-arrow.left { left: 16px; }
  .hero .carousel-arrow.right { right: 16px; }

  /* nuestro, no del prototipo: el fondo de cada diapositiva ahora es un
     bloque Imagen real (editable desde wp-admin) en vez de generarse por
     JS como en el prototipo; se posiciona detrás del degradé (::before)
     con z-index negativo, sin tocar esa regla. El bloque Grupo además
     envuelve sus hijos en un .wp-block-group__inner-container extra —
     el layout de .slide/.slide-grid/.slide-art se
     mueve a ese envoltorio real, mismo patrón que .pillars/.trust-route
     más abajo, para que el grid de texto+foto no se rompa por el envoltorio. */
  
  .slide-background { position: absolute; inset: 0; z-index: -1; margin: 0; }
  .slide-background img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .slide > .wp-block-group__inner-container { display: flex; align-items: center; width: 100%; height: 100%; }
  .slide-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 24px; width: 100%; }
  .slide-art > .wp-block-group__inner-container { display: flex; justify-content: center; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px;
    font-size: .88rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent;
    transition: transform .15s, opacity .15s;
  }
  .btn:active { transform: scale(.98); }
  .btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #fff; text-shadow: 0 1px 2px rgba(33,26,15,.25); }
  .btn-gold:hover { opacity: .9; }
  .btn-ghost { border: 1px solid var(--line); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--gold); }
  /* nuestro, no del prototipo: en el bloque Botón de Gutenberg, las clases
     btn/btn-oro/btn-fantasma quedan en el <div> envoltorio, pero el <a>
     real (el que se ve) solo lleva wp-element-button — por eso heredaba
     siempre el dorado por defecto. Esto lo corrige solo para "fantasma". */
  .btn-ghost .wp-element-button { background: none; color: var(--ink); border: 1px solid var(--line); text-shadow: none; }
  .btn-ghost .wp-element-button:hover { border-color: var(--gold); opacity: 1; }
  .wp-block-button.btn { display: inline-block; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }

  /* ───────── catálogo: título con estilo del inicio + carrusel ───────── */
  section.block { position: relative; padding: 64px 0; }
  section.block::before {
    content: ""; position: absolute; top: -24%; right: -12%; width: 720px; height: 720px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 36%, transparent), transparent 65%);
    z-index: 0; pointer-events: none;
  }
  section.block::after {
    content: ""; position: absolute; bottom: -26%; left: -14%; width: 540px; height: 540px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-vivid) 28%, transparent), transparent 65%);
    z-index: 0; pointer-events: none;
  }
  section.block > .wp-block-group__inner-container > .wrap { position: relative; z-index: 1; }
  .catalog-head { text-align: center; max-width: 560px; margin: 0 auto 40px; }
  .catalog-head .script { color: var(--gold); font-size: clamp(1.7rem, 3.4vw, 2.3rem); display: block; margin-bottom: 4px; }
  .catalog-head h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); font-weight: 800; }
  .highlighted { color: var(--gold-vivid); }

  .product-carousel-row { position: relative; display: flex; align-items: center; gap: 14px; }
  .product-carousel {
    flex: 1; min-width: 0; display: flex; justify-content: safe center; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: none;
  }
  .product-carousel::-webkit-scrollbar { display: none; }
  .product-card { flex: 0 0 250px; scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; }
  /* ".product-art" (afuera) y ".product-frame" (el <a> de la foto,
     adentro) cambiaron de rol: antes el marco de la foto (recorte
     cuadrado/radio/borde) estaba en ".product-art" y ese quedaba DENTRO
     del <a>. El botón circular de agregar (".btn-floating-add", más
     abajo) necesita flotar sobre la foto pero NO puede ir dentro de esa
     <a> — un <a> no puede contener otro <a>/botón interactivo adentro, es
     HTML inválido. Por eso el marco de la foto ahora es ".product-frame"
     mismo, y ".product-art" pasó a ser el contenedor de afuera
     (position:relative, SIN overflow:hidden) para que el círculo, que se
     asoma un poco fuera del borde inferior de la foto a propósito, no
     quede cortado. */
  .product-art { position: relative; }
  .product-frame {
    position: relative; z-index: 1; display: block; text-decoration: none; overflow: hidden; aspect-ratio: 1;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .15s, transform .15s;
  }
  .product-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .product-card:hover .product-frame { box-shadow: 0 14px 30px -16px rgba(0,0,0,.3); transform: translateY(-2px); }
  .sold-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--band); color: #f3ecdd;
    font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
  }
  .sold-badge.coming-soon { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
  /* círculo "+" sobre la esquina de la foto — SOLO en celular (ver media
     query más abajo); en escritorio se usa el botón en fila de
     ".price-action-row" en su lugar. Reemplaza al viejo ".quick-action"
     (un overlay de texto al pasar el mouse que nunca llegó a funcionar:
     no tenía ningún JS escuchando su click, ver inc/template-tags.php). */
  /* !important: WooCommerce trae ".woocommerce a.button" (2 clases + 1
     elemento, aparte del ":where()" que no suma nada) — le gana en
     especificidad a estas reglas de acá (2 clases, o 1 sola) en CUALQUIER
     propiedad que las dos toquen (display, position, border-radius,
     border), mismo patrón de la tabla de "Tu pedido" en el checkout (ver
     más abajo en este archivo, la nota de ".ck-table.shop_table"). Sin
     esto el círculo dejaba de ser position:absolute (se iba a
     position:relative de Woo) y quedaba metido EN EL FLUJO normal,
     empujando el texto de abajo en vez de flotar sobre la foto. El
     "background" también necesita !important por la misma pelea: el
     degradado de Woo (".add_to_cart_button{background:...!important}")
     también lleva !important, y como esa propiedad es un shorthand que no
     menciona un color sólido, de paso resetea "background-color" a
     transparente — sin el !important acá, el círculo se quedaba siempre
     con el degradado de Woo pintado encima, sin importar el estado
     (normal/agregado), aunque a simple vista se viera "dorado" igual por
     puro parecido de color. Ojo con el "a." del selector: ".add_to_cart_
     button" de Woo también lleva !important en background, y ahí las dos
     reglas quedan con la MISMA especificidad (0,1,0) — entre dos
     !important empatados gana el que carga después en el archivo, que es
     el de Woo. El "a." de acá suma el elemento (0,1,1) y desempata a favor
     de esta regla, sin tener que perseguir el orden del archivo. */
  a.btn-floating-add {
    display: none !important; position: absolute !important; z-index: 3; right: 10px; bottom: -14px;
    width: 38px; height: 38px; border-radius: 999px !important; background: var(--gold) !important; color: #fff;
    border: 3px solid var(--bg) !important; align-items: center; justify-content: center;
    box-shadow: 0 8px 16px -6px rgba(0,0,0,.35); transition: background .15s, transform .15s;
  }
  .btn-floating-add:hover { background: var(--gold-vivid) !important; }
  .btn-floating-add:active, .btn-floating-add.pulse { transform: scale(.88); }
  .btn-floating-add.added { background: var(--band) !important; }
  /* sin flex-shrink:0 el <svg> (ítem flex dentro de un botón flex:center)
     se achicaba a 0 de ancho — pasaba solo acá, no en ".btn-add svg"
     porque ESE botón no es display:flex, es inline-flex con texto al lado
     que le da una base real; este círculo no tiene más contenido que el
     ícono, así que flexbox no tenía de dónde sacarle un tamaño y lo
     colapsaba. */
  .btn-floating-add svg { flex-shrink: 0 !important; width: 13px !important; height: 13px !important; min-width: 13px; }
  .btn-floating-add.added svg { display: none; }
  /* el check de Woo (".added::after") trae de fábrica "margin-left:.53em"
     (pensado para ir pegado DESPUÉS de un texto, como en el botón de
     fila) — acá, sin texto al lado, ese margen lo único que hacía era
     empujarlo hacia la derecha dentro del círculo, descentrado. */
  .btn-floating-add.added::after { margin-left: 0 !important; }
  .product-info { padding: 14px 2px 2px; display: flex; flex-direction: column; flex: 1; }
  /* ".cat" ahora es un <span> que envuelve el/los <a> reales a cada
     categoría (antes era texto plano nomás) — el color/subrayado va en el
     <a> de adentro, no en el <span>, que solo pone la tipografía. */
  .product-info .cat { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; }
  .product-info .cat a { color: var(--muted); text-decoration: none; }
  .product-info .cat a:hover { color: var(--gold-vivid); text-decoration: underline; }
  /* la presentación ("60 cápsulas") ya no comparte fila con la categoría:
     con una categoría larga ("Articulaciones y huesos") no entraban las
     dos al lado en una tarjeta angosta — ahora va suelta, debajo del
     nombre, con su propia línea sin pelear por ancho con nada. */
  .product-info .showcase { display: block; font-size: .68rem; color: var(--muted); font-family: 'IBM Plex Mono', monospace; margin-top: 3px; }
  .product-info h3 {
    font-size: 1.02rem; font-weight: 700; margin-top: 5px; line-height: 1.3; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .price-action-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
  .product-info .price { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.1rem; color: var(--ink); }
  /* background con !important: mismo motivo que ".btn-floating-add"
     más arriba — el degradado de Woo también lleva !important y, al
     empatar en especificidad (0,1,0 las dos), gana el que carga después
     en el archivo (el de Woo). El "a." suma el elemento (0,1,1) y
     desempata a favor de esta regla. */
  a.btn-add {
    display: inline-flex !important; align-items: center; gap: 6px; background: var(--band) !important; color: #f3ecdd; border: none;
    padding: 9px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
    transition: background .15s, opacity .15s; cursor: pointer;
  }
  .btn-add svg { flex-shrink: 0; }
  .btn-add:hover { opacity: .88; }
  .btn-add.added { background: var(--gold) !important; }
  .btn-add.pulse { animation: pulse-add .32s ease; }
  /* acá el check de Woo (".added::after", ver nota de ".btn-flotante-
     agregar" más arriba) sería redundante — este botón ya dice "Añadido ✓"
     con su propio check de texto al confirmar. */
  .btn-add.added::after { display: none; }
  @keyframes pulse-add { 0%{transform:scale(1)} 45%{transform:scale(.93)} 100%{transform:scale(1)} }
  /* WooCommerce agrega de fábrica un segundo enlace "Ver carrito" pegado al
     botón apenas agrega algo — quedaba un botón al lado del otro, de más:
     el ícono del carrito del header ya rebota y muestra el contador nuevo
     (cart-animation.js), no hace falta este segundo aviso. El propio
     botón ahora confirma solo (ver .added/.pulse de arriba, los dispara
     add-confirmation.js). */
  .added_to_cart.wc-forward { display: none !important; }
  .coming-soon-note { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .coming-soon-note .coming-soon-text { font-size: .72rem; color: var(--muted); line-height: 1.3; }
  .btn-notify-me {
    flex-shrink: 0; font-size: .72rem; font-weight: 700; color: var(--gold-vivid); border: 1px solid var(--line);
    border-radius: 999px; padding: 7px 12px; transition: border-color .15s, background .15s;
  }
  .btn-notify-me:hover { border-color: var(--gold); }
  .btn-notify-me:disabled { color: var(--muted); cursor: default; }

  /* ───────── testimonios: carrusel continuo de tarjetas ───────── */
  .testimonial-block { position: relative; padding: 70px 0; }
  .testimonial-block::before, .testimonial-block::after {
    content: "\201C"; position: absolute; top: 48%; transform: translateY(-50%); font-family: 'Bitter', serif; font-weight: 800;
    font-size: clamp(9rem, 18vw, 17rem); line-height: 1; color: var(--gold); opacity: .22; pointer-events: none; z-index: 0;
  }
  .testimonial-block::before { left: clamp(-20px, 1vw, 10px); }
  .testimonial-block::after { content: "\201D"; right: clamp(-20px, 1vw, 10px); }
  .testimonial-head-band { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto 40px; }
  .testimonial-head-band .script { color: var(--gold); font-size: clamp(1.7rem, 3.4vw, 2.3rem); display: block; margin-bottom: 4px; }
  .testimonial-head-band h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); font-weight: 800; }
  .marquee-testimonios {
    position: relative; z-index: 1; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee-track { width: max-content; animation: scroll-marquee 34s linear infinite; }
  .marquee-testimonios:hover .marquee-track { animation-play-state: paused; }
  @keyframes scroll-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* nuestro, no del prototipo: .marquee-track y .review-card son bloques
     Grupo (igual que .slide-grid más arriba); el flex se mueve a su
     .wp-block-group__inner-container real. */
  .marquee-track > .wp-block-group__inner-container { display: flex; gap: 22px; }
  .review-card {
    flex: 0 0 320px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  }
  .review-card > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 12px; }
  .review-head-row { }
  .review-head-row > .wp-block-group__inner-container { display: flex; align-items: center; gap: 12px; }
  .review-flag { flex-shrink: 0; border-radius: 4px; overflow: hidden; display: flex; box-shadow: 0 0 0 1px var(--line); }
  .review-name { font-size: .9rem; font-weight: 700; font-family: 'Bitter', Georgia, serif; }
  .review-country { font-size: .74rem; color: var(--muted); }
  .stars { color: var(--gold-light); letter-spacing: 2px; font-size: .92rem; }
  .quote { font-family: 'Bitter', serif; font-size: .95rem; line-height: 1.55; color: var(--ink); font-weight: 600; }

  /* ───────── franja de confianza: carrusel animado, sin numeración ───────── */
  .trust-band { position: relative; padding: 74px 0; }
  .trust-band::before {
    content: ""; position: absolute; top: -28%; right: 4%; width: 580px; height: 580px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold-vivid) 22%, transparent), transparent 70%);
    z-index: 0; pointer-events: none;
  }
  .trust-band::after {
    content: ""; position: absolute; bottom: -22%; left: -6%; width: 380px; height: 380px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
    z-index: 0; pointer-events: none;
  }
  .trust-band > .wp-block-group__inner-container > .wrap { position: relative; z-index: 1; }
  .trust-head { text-align: center; max-width: 520px; margin: 0 auto 54px; }
  .trust-head .script { color: var(--gold); font-size: clamp(1.7rem, 3.4vw, 2.3rem); display: block; margin-bottom: 4px; }
  .trust-head h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); font-weight: 800; }

  .trust-route { position: relative; }
  .trust-route > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .route-line { position: absolute; top: 28px; left: 60px; right: 60px; height: 0; border-top: 2px dashed var(--gold-light); z-index: 0; }
  .route-stop {
    position: relative; z-index: 1; text-align: center;
    opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease;
  }
  .route-stop > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .trust-route.visible .route-stop { opacity: 1; transform: translateY(0); }
  .route-marker {
    width: 58px; height: 58px; border-radius: 999px; background: var(--bg); border: 2px solid var(--gold);
    display: grid; place-items: center; color: var(--gold-vivid);
  }
  .route-stop h4 { font-size: .95rem; font-weight: 800; margin: 0; }
  .route-stop p { font-size: .83rem; color: var(--muted); max-width: 24ch; }
  .trust-flags-row { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
  .trust-flags-row span { display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  @media (max-width: 760px) {
    .trust-route > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 20px; justify-items: stretch; }
    .route-line { display: none; }
    /* en vez de círculo grande centrado + título + texto, todo apilado
       (187px de alto por paso, casi 850px los 4 juntos — mucho scroll para
       muy poca info) pasa a una fila: ícono chico a la izquierda, texto a
       la derecha. Mismo patrón que cualquier lista de pasos en móvil, y de
       paso el ícono deja de sentirse como protagonista — queda de
       acompañante, no de foto.
       Grid y no flex-row: con flex-row el ícono/título/texto son 3
       hermanos sueltos y quedaban uno al lado del otro EN LA MISMA fila
       (título y texto como si fueran 2 columnas aparte, no un bloque de
       texto apilado bajo el ícono). El grid de 2 columnas deja al ícono
       ocupar las 2 filas de su columna, con título y texto apilados en la
       columna de al lado, que es lo que se veía mal al principio. */
    .route-stop > .wp-block-group__inner-container {
      display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center;
    }
    .route-stop { text-align: left; }
    .route-marker { grid-row: 1 / 3; width: 44px; height: 44px; flex-shrink: 0; }
    .route-marker svg { width: 19px; height: 19px; }
    .route-stop p { max-width: none; }
  }

  /* ───────── newsletter ───────── */
  .newsletter-band {
    position: relative; overflow: hidden; padding: 60px 0;
    background-color: #241a0c; background-image: url('../img/hero_fondo_moringa.jpg'); background-size: cover; background-position: center;
  }
  .newsletter-band::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(33,24,10,.78) 25%, rgba(74,55,24,.5) 65%, rgba(74,55,24,.3));
  }
  .newsletter-grid { position: relative; z-index: 1; }
  .newsletter-grid > .wp-block-group__inner-container { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; width: 100%; }
  .newsletter-text { color: #fff; max-width: 440px; }
  .newsletter-text .script { color: var(--gold-light); font-size: clamp(1.6rem, 3vw, 2.1rem); display: block; margin-bottom: 4px; }
  .newsletter-text h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: #fbf3df; }
  .newsletter-text p { margin-top: 10px; color: rgba(255,255,255,.8); font-size: .92rem; }
  .newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; max-width: 420px; }
  .newsletter-form input {
    flex: 1; min-width: 200px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fff;
    border-radius: 999px; padding: 13px 18px; font: inherit; font-size: .9rem;
  }
  .newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
  .newsletter-form input:focus { outline: none; border-color: var(--gold-light); }
  .newsletter-confirmed {
    flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: .9rem; font-weight: 600;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 13px 20px;
  }
  .newsletter-confirmed svg { color: var(--gold-light); flex-shrink: 0; }
  .newsletter-error { width: 100%; margin: 8px 0 0; font-size: .8rem; color: #f0a08c; }

  /* ───────── pie ───────── */
  footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); padding: 48px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
  footer::before {
    content: ""; position: absolute; top: -32%; left: 50%; transform: translateX(-50%); width: 820px; height: 820px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 68%);
    z-index: 0; pointer-events: none;
  }
  footer > .wrap { position: relative; z-index: 1; }
  
  .footer-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 36px; }
  .footer-brand img { height: 64px; margin-bottom: 14px; }
  .footer-brand p { color: var(--muted); font-size: .84rem; max-width: 40ch; }
  .footer-brand .social-links { margin-top: 16px; }
  .footer-brand .social-links a { color: var(--muted); }
  .footer-brand .social-links a:hover { color: var(--gold-vivid); }
  .footer-col h5 { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 700; }
  
  .footer-col a { display: block; width: fit-content; max-width: 100%; font-size: .85rem; color: var(--muted); margin-bottom: 9px; text-decoration: none; }
  .footer-col a:hover { color: var(--gold-vivid); }
  
  
  /* "--cols-categories" lo calcula footer.php (7-8 categorías por columna,
     tope 3) — acá solo se respeta ese número, nunca más de 2 columnas
     antes de los 1150px (ahí sí entran cómodas). */
  .footer-category-list--multi { columns: min(2, var(--cols-categories, 2)); column-gap: 20px; }
  @media (min-width: 1150px) { .footer-category-list--multi { columns: var(--cols-categories, 3); } }
  .footer-category-list--multi a { break-inside: avoid-column; }
  .real-payment-badges { display: flex; gap: 8px; margin-bottom: 14px; }
  .stripe-seguro { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); margin-bottom: 16px; }
  .footer-contact { font-size: .82rem; color: var(--muted); line-height: 1.7; }
  .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer-legal a { color: var(--muted); text-decoration: none; }
  .footer-legal a:hover { color: var(--gold-vivid); }
  .footer-note {
    margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  }

  /* ───────── carrito (panel lateral) ───────── */
  .cart-backdrop {
    position: fixed; inset: 0; background: rgba(23,17,8,.45); z-index: 40; opacity: 0; pointer-events: none;
    transition: opacity .25s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .cart-backdrop.active { opacity: 1; pointer-events: auto; }
  .cart-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--bg);
    z-index: 41; transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.7,.3,1); display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .cart-panel.active { transform: translateX(0); box-shadow: -24px 0 60px -30px rgba(0,0,0,.5); }
  body.cart-open .whatsapp-widget, body.search-open .whatsapp-widget, body.mobile-menu-open .whatsapp-widget { opacity: 0; pointer-events: none; }
  .whatsapp-widget { transition: opacity .2s; }
  
  body.mobile-menu-open { position: fixed; left: 0; right: 0; overflow: hidden; }
  .cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
  .cart-head h3 { font-size: 1.2rem; font-weight: 800; }
  .cart-count { font-size: .76rem; color: var(--muted); }
  .close-cart {
    width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--ink);
    border: 1px solid var(--line); transition: background .15s, border-color .15s;
  }
  .close-cart:hover { background: var(--surface); border-color: var(--gold); }
  .cart-list { flex: 1; overflow-y: auto; padding: 6px 24px; }
  .cart-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .cart-line:last-child { border-bottom: none; }
  .cart-line .icon {
    width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--surface);
    border: 1px solid var(--line); flex-shrink: 0;
  }
  .cart-line .icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .info-line { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .line-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .info-line .name { font-family: 'Bitter', Georgia, serif; font-size: .95rem; font-weight: 700; line-height: 1.3; }
  .info-line .detail { font-size: .74rem; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
  .remove-line {
    width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .remove-line:hover { background: var(--surface); color: var(--ink); }
  .line-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
  .quantity-selector.small { padding: 2px; }
  .quantity-selector.small button { width: 28px; height: 28px; font-size: .95rem; }
  .quantity-selector.small span { min-width: 24px; font-size: .85rem; }
  .line-total { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: .95rem; }

  .cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 70px 10px 30px; }
  .cart-empty .empty-icon {
    width: 72px; height: 72px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--gold-vivid); margin-bottom: 6px;
  }
  .cart-empty h4 { font-family: 'Bitter', Georgia, serif; font-size: 1.05rem; margin: 0; }
  .cart-empty p { font-size: .86rem; color: var(--muted); max-width: 30ch; }
  .cart-empty .btn { margin-top: 12px; }

  .cart-footer { border-top: 1px solid var(--line); padding: 18px 24px 22px; background: var(--surface); }
  .subtotal-row { display: flex; justify-content: space-between; align-items: baseline; }
  .subtotal-row span:first-child { font-size: .92rem; font-weight: 700; }
  .subtotal-row span:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; color: var(--gold-vivid); font-weight: 700; }
  .cart-note { font-size: .76rem; color: var(--muted); margin: 4px 0 16px; }
  .btn-block { width: 100%; justify-content: center; }
  .btn-continue {
    display: block; width: 100%; margin-top: 10px; padding: 10px; font-size: .84rem; font-weight: 600; color: var(--ink);
    border-radius: 999px; transition: background .15s;
  }
  .btn-continue:hover { background: var(--bg); }
  .cart-secure-payment { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: .72rem; color: var(--muted); }

  /* ───────── modal (lo usa la pregunta de país de la primera visita) ───────── */
  .payment-view {
    position: fixed; inset: 0; z-index: 50; background: rgba(23,17,8,.55);
    display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .payment-view.active { opacity: 1; pointer-events: auto; }
  @media (min-width: 640px) { .payment-view { align-items: center; } }
  .payment-box {
    background: var(--bg); border: 1px solid var(--line); width: min(460px, 100%); max-height: 86vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; padding: 26px max(22px, env(safe-area-inset-left, 0px)) calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateY(16px); transition: transform .2s;
  }
  @media (min-width: 640px) { .payment-box { border-radius: 16px; transform: scale(.98); } }
  .payment-view.active .payment-box { transform: none; }
  .payment-box h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }

  /* ───────── finalizar compra: estructura del checkout clásico de WooCommerce ───────── */
  .checkout-view { padding-block: 10px 70px; }
  
  .ck-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; margin-bottom: 24px; }
  .ck-header h1 { font-size: clamp(1.5rem, 2.8vw, 2.05rem); font-weight: 800; }
  .ck-back { font-size: .84rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .ck-back:hover { color: var(--gold-vivid); }
  /* ".woocommerce-info" es la caja genérica de avisos de Woo (se usa en
     más de un sitio, no solo cupón — p.eg. "no hay métodos de pago
     disponibles" en el paso 3), por eso se queda con su propio trato de
     tarjeta igual que ".ck-notice". */
  .ck-notice, .woocommerce-info {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 24px !important; padding: 14px 18px !important; border-radius: 12px;
    background: var(--surface) !important; border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important;
    font-size: .88rem; color: var(--muted) !important; position: static;
  }
  .woocommerce-info::before { content: none; }
  .ck-notice svg { color: var(--gold-vivid); flex-shrink: 0; }
  .ck-notice button { color: var(--gold-vivid); font-weight: 700; text-decoration: underline; padding: 0; }

  /* campo de cupón propio, directo (sin el "¿Tienes un cupón? Haz clic
     aquí" de antes como paso previo — un clic menos) — ver
     woocommerce/checkout/coupon-field.php. */
  
  .ck-coupon { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 24px 0; background: var(--surface); }
  .ck-coupon-label { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
  .ck-coupon-label svg { color: var(--gold-vivid); flex-shrink: 0; }
  .ck-coupon-row { display: flex; gap: 10px; flex-wrap: wrap; }
  .ck-coupon-row input {
    flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
    font: inherit; font-size: .9rem; background: var(--bg); color: var(--ink);
  }
  .ck-coupon-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168,124,44,.18); }
  .ck-coupon-row .btn { padding-block: 11px; white-space: nowrap; }
  .ck-coupon-message { margin: 10px 0 0; font-size: .82rem; color: var(--gold-vivid); font-weight: 600; }
  .ck-coupon-message--error { color: var(--error-text); }

  .ck-errors, .woocommerce-error, .woocommerce-message {
    border: 1px solid var(--error-border); background: var(--error-bg); color: var(--error-text);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: .86rem; list-style: none;
  }
  .ck-errors ul, .woocommerce-error { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
  .woocommerce-message { border-color: var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 10px; }
  .woocommerce-message::before { display: none; }
  
  .woocommerce-NoticeGroup-checkout { display: none; }
  /* el campo inválido en sí: Woo le agrega ".woocommerce-invalid" a su
     ".form-row" (sea cual sea el motivo: vacío, email o teléfono con mal
     formato) y un mensajito propio (".checkout-inline-error-message"). */
  .form-row.woocommerce-invalid input, .form-row.woocommerce-invalid select {
    border-color: var(--error-border) !important;
  }
  .checkout-inline-error-message { margin: 4px 0 0; font-size: .78rem; color: var(--error-text); }

  /* row-gap 16px (no 36px) entre facturación/envío/pago: ese valor es el
     mismo que ya usa ".ck-block + .ck-block" para apilar bloques — acá no
     se puede usar ese selector porque los 3 ya no son hermanos directos
     (el bloque de pago, #ck-payment, quedó afuera de .ck-details para poder
     ocultarlo junto con el resumen en el paso 1 del móvil). column-gap
     sigue en 36px, el espacio real entre la columna principal y el resumen. */
  .ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); column-gap: 36px; row-gap: 16px; align-items: start; }
  /* Facturación+envío (fila 1) y pago (fila 2) van en la columna 1; el
     resumen ocupa la columna 2 de punta a punta (filas 1 y 2) para poder
     seguir "sticky" mientras esas dos filas de la izquierda se desplazan. */
  .ck-details { grid-column: 1; grid-row: 1; }
  #ck-payment { grid-column: 1; grid-row: 2; }
  .ck-summary { grid-column: 2; grid-row: 1 / 3; }
  .ck-block { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--bg); }
  .ck-block + .ck-block { margin-top: 16px; }
  .ck-block h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
  .ck-step-number {
    width: 28px; height: 28px; border-radius: 999px; background: var(--band); color: #f3ecdd; flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace; font-size: .78rem; display: grid; place-items: center;
  }
  .ck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  /* margin/padding en !important: WooCommerce le pone a CADA fila su propio
     ".form-row{padding:3px;margin:0 0 6px}" — eso se SUMABA al gap:16px de
     esta grilla (dos sistemas de espaciado a la vez), dejando más aire del
     que debía entre filas. El espaciado real lo maneja solo el gap de acá. */
  /* width/float en !important: WooCommerce carga un stylesheet aparte
     (woocommerce-layout.css) que le pone a .form-row-first/.form-row-last
     "width:47%; float:left/right" — eso encogía la celda de la grilla al
     47% de su columna, y el input (que sí ocupaba el 100% de ESA celda ya
     encogida) terminaba viéndose como una cajita chica con medio espacio
     vacío al lado. Nombre/Apellidos y Región/Código postal usan esas dos
     clases, por eso eran los que se veían mal. */
  .ck-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  .ck-field.wide { grid-column: 1 / -1; }
  /* Provincia/Distrito: solo aplican a Perú — ocultos por defecto,
     peru-province-district.js les suma esta clase cuando el país
     elegido es Perú (ver woocommerce_checkout_fields en woocommerce.php). */
  .ck-field.mdg-field-pe { display: none; }
  .ck-field.mdg-field-pe.mdg-visible { display: flex; }
  .ck-field label { font-size: .8rem; font-weight: 600; }
  .ck-field label abbr.required { color: var(--error-text); text-decoration: none; }
  .ck-field .required-mark { color: var(--error-text); }
  .ck-field .optional { color: var(--muted); font-weight: 400; }
  /* !important: WooCommerce trae su propio ".woocommerce form .form-row
     .input-text" (3 clases de especificidad) con su borde oscuro por
     defecto (--wc-form-border-color) — le gana a ".ck-field input" (1 clase
     + 1 elemento) aunque este cargue después, así que hay que forzarlo. */
  .ck-field input, .ck-field select, .ck-field textarea, .ck-coupon-form input {
    width: 100%; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 12px 14px !important;
    font: inherit; font-size: .9rem; background: var(--bg) !important; color: var(--ink) !important;
    transition: border-color .15s, box-shadow .15s; box-shadow: none; outline: none;
  }
  .ck-field textarea { min-height: 96px; resize: vertical; }
  /* el <select> nativo trae su propio look por navegador (Firefox en
     particular lo deja casi sin tocar si no se le pone -moz-appearance) —
     esto lo aplana en los 3 motores y le pone una flechita propia en vez
     de la nativa, para que no varíe de un navegador a otro. */
  .ck-field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23817862' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px !important;
  }
  .ck-field select::-ms-expand { display: none; }
  /* País/Región y, si el país tiene lista de estados (EEUU), también Región:
     WooCommerce los reemplaza por defecto con Select2 (buscador + lista con
     scroll) — tiene sentido con 200 países, no con los 4 a los que se
     envía. simple-selects.js lo deshace apenas Woo lo aplica, así que acá
     solo hace falta el <select> nativo de siempre (ya cubierto arriba). */
  .ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus, .ck-coupon-form input:focus {
    outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
  }
  .ck-field.invalid input:not([id$="_direccion2"]), .ck-field.invalid select { border-color: var(--error-text) !important; }
  /* el resaltado azul de "autocompletar" de Chrome (campos como país,
     nombre, dirección) no se puede apagar con color/background normal —
     esta es la forma real de hacerlo. */
  .ck-field input:-webkit-autofill, .ck-field select:-webkit-autofill,
  .ck-field input:autofill, .ck-field select:autofill {
    -webkit-text-fill-color: var(--ink) !important;
    box-shadow: 0 0 0px 1000px var(--bg) inset !important;
    border-color: var(--line) !important;
    caret-color: var(--ink);
  }
  .ck-field input:-webkit-autofill:focus, .ck-field select:-webkit-autofill:focus {
    border-color: var(--gold) !important;
  }
  .ck-field input + input { margin-top: 2px; }
  .ck-phone-field { position: relative; }
  .ck-field .ck-phone-input { padding-left: 88px !important; font-family: 'IBM Plex Mono', monospace; letter-spacing: .02em; }
  .ck-phone-prefix {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 6px;
    padding: 0 11px 0 14px; border: none; background: none; cursor: pointer; color: inherit;
  }
  .ck-phone-prefix::after { content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
  .ck-phone-flag { display: flex; width: 20px; aspect-ratio: 28 / 20; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0; }
  .ck-phone-flag svg { width: 100%; height: 100%; display: block; }
  .ck-phone-prefix .ck-phone-code { font-family: 'IBM Plex Mono', monospace; font-size: .83rem; font-weight: 600; color: var(--ink); }
  .ck-phone-prefix svg:last-child { color: var(--muted); }
  .ck-phone-list {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; list-style: none; margin: 0; padding: 6px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .35);
    width: max-content; min-width: 190px;
  }
  .ck-phone-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .85rem; }
  .ck-phone-option:hover, .ck-phone-option:focus { background: var(--surface); }
  .ck-phone-option .ck-phone-name { flex: 1; min-width: 0; }
  .ck-phone-option .ck-phone-code { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--muted); }
  .ck-check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; cursor: pointer; }
  .ck-check input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
  .ck-ship-to-different-address { margin-top: 20px; }

  
  .ck-summary {
    position: sticky; top: calc(180px + env(safe-area-inset-top, 0px));
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  }
  .ck-summary > h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 14px; }
  /* WooCommerce le pone a ".shop_table" (clase que ya trae la tabla real,
     junto con "ck-tabla") un borde exterior con radio propio Y a CADA td
     (tbody y tfoot) un "border-top" — de ahí las líneas de más entre cada
     fila que no están en la referencia; ahí el único borde es el que pone
     ".ck-table" a mano en puntos específicos (debajo del encabezado, antes
     de Subtotal, antes de Total). */
  /* !important: WC encadena ".woocommerce table.shop_table" (y para las
     filas ".woocommerce table.shop_table tfoot td") — con el ".woocommerce"
     de más, esas reglas quedan con más especificidad que ".ck-table.shop_table"
     aun con las mismas 2 clases, así que sin !important seguían ganando
     ellas (el borde+radio exterior de la tabla, y la línea de encima de
     cada fila). Los bordes que SÍ queremos (debajo del encabezado, antes de
     Subtotal, antes de Total, más abajo) también llevan !important para
     poder pisar este reset donde corresponde. */
  .ck-table.shop_table { border: none !important; border-radius: 0 !important; margin: 0 !important; }
  .ck-table.shop_table td, .ck-table.shop_table th { border-top: none !important; }
  .ck-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
  .ck-table thead th {
    text-align: left; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700;
    padding-bottom: 10px; border-bottom: 1px solid var(--line);
  }
  .ck-table th:last-child, .ck-table td:last-child { text-align: right; }
  .ck-table tbody td { padding: 14px 0; vertical-align: middle; }
  .ck-product { display: flex; align-items: center; gap: 12px; }
  .ck-product-photo { position: relative; width: 54px; height: 54px; flex-shrink: 0; }
  .ck-product-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
  .ck-product-qty {
    position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
    background: var(--band); color: #f3ecdd; font-family: 'IBM Plex Mono', monospace; font-size: .66rem; display: grid; place-items: center;
  }
  .ck-product-name { font-weight: 600; line-height: 1.3; min-width: 0; }
  .ck-product-name small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; }
  /* variaciones de producto (talla/sabor) en "Gracias por tu compra":
     wc_display_item_meta() las imprime como <ul class="wc-item-meta">, no
     como el <small> que usan los demás — mismo tamaño/color para que no
     desentone ahí. */
  .ck-product-name .wc-item-meta { list-style: none; margin: 2px 0 0; padding: 0; font-weight: 400; color: var(--muted); font-size: .74rem; }
  .ck-product-name .wc-item-meta li { margin: 0; }
  .ck-price { font-family: 'IBM Plex Mono', monospace; font-weight: 600; white-space: nowrap; }
  .ck-table tfoot th { text-align: left; font-weight: 500; color: var(--muted); padding: 7px 0; }
  .ck-table tfoot td { padding: 7px 0; }
  .ck-table tfoot tr:first-child th, .ck-table tfoot tr:first-child td { border-top: 1px solid var(--line) !important; padding-top: 14px; }
  .ck-to-be-confirmed { font-size: .8rem; color: var(--muted); white-space: nowrap; }
  .ck-table tr.ck-total th, .ck-table tr.ck-total td { border-top: 1px solid var(--line) !important; padding-top: 14px; color: var(--ink); font-weight: 800; font-size: 1rem; }
  .ck-table tr.ck-total td .ck-price { font-size: 1.35rem; color: var(--gold-vivid); font-weight: 700; }
  .ck-table tr.ck-total td small { display: block; font-size: .7rem; color: var(--muted); font-weight: 500; }

  /* ".ck-payments/.ck-method" eran del prototipo; la lista real de pasarelas
     (Stripe y las que se activen a futuro) la pinta WooCommerce con sus
     propias clases (.wc_payment_methods/.wc_payment_method/.payment_box) y
     su propio JS para mostrar/ocultar los campos de cada una al elegirla —
     mismo look, pegado directo a esas clases. */
  /* WooCommerce le pone a #payment un fondo propio (un morado translúcido,
     con su radio) que en la referencia no existe — ahí los métodos de pago
     van sueltos dentro de su bloque (#ck-payment), no en un panel aparte. */
  #payment.woocommerce-checkout-payment { background: none !important; border-radius: 0 !important; }
  /* WC le pone a la propia lista ("#payment ul.payment_methods", con ID —
     le gana en especificidad a cualquier regla de clase, de ahí el
     !important) 1em de padding y un borde inferior que tampoco están en la
     referencia. */
  #payment ul.wc_payment_methods { padding: 0 !important; border-bottom: none !important; }
  .ck-payments, .wc_payment_methods { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .ck-method, .wc_payment_method { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .ck-method.active, .wc_payment_method:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
  .ck-method > label, .wc_payment_method > label { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: .9rem; cursor: pointer; }
  .ck-method > label input, .wc_payment_method > label input { accent-color: var(--gold); width: 17px; height: 17px; margin: 0; }
  .wc_payment_method > label img { margin-left: auto; height: 22px; }
  .ck-brand-icons { margin-left: auto; display: flex; gap: 4px; }
  .ck-method-box, .payment_box { padding: 0 16px 16px; font-size: .82rem; color: var(--muted); }
  .payment_box p { margin: 0 0 8px; }
  .payment_box p:last-child { margin-bottom: 0; }
  .ck-card { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ck-card .ck-field:first-child { grid-column: 1 / -1; }
  .ck-card input[readonly] { background: var(--surface); cursor: default; }
  /* caja genérica para lo que inyecte la pasarela (el Payment Element de
     Stripe, por ejemplo): se ajusta fino una vez conectada de verdad. */
  .payment_box .StripeElement, .payment_box iframe { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }

  .ck-privacy, .woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper {
    font-size: .76rem; color: var(--muted); margin: 18px 0 16px; line-height: 1.55;
  }
  .ck-privacy a, .woocommerce-privacy-policy-text a { color: var(--gold-vivid); }
  .ck-place-order, #place_order { width: 100%; justify-content: center; padding-block: 16px; font-size: .98rem; }
  /* bloqueado hasta elegir método de pago (ver checkout-steps.js) — gris
     plano en vez del degradé dorado, para que se note que todavía no se
     puede apretar. */
  #place_order:disabled {
    background: var(--line) !important; color: var(--muted) !important; cursor: not-allowed; opacity: .8;
  }
  .ck-secure, .ck-secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: .74rem; color: var(--muted); text-align: center; }

  .ck-thanks { max-width: 560px; margin: 36px auto 0; text-align: center; }

  /* sello de confirmación: doble anillo (borde sólido + aro punteado
     separado con outline-offset) en vez de un círculo relleno plano —
     leve rotación para que lea como un sello de verdad, no un ícono. */
  .ck-stamp {
    width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 28px;
    background: var(--bg); color: var(--gold-vivid); border: 2.5px solid var(--gold-vivid);
    outline: 1.5px dashed color-mix(in srgb, var(--gold-vivid) 50%, transparent); outline-offset: 5px;
    transform: rotate(-7deg);
    animation: ck-stamp-in .45s cubic-bezier(.22, 1, .36, 1);
  }
  .ck-stamp--error { color: var(--error-text); border-color: var(--error-text); outline-color: color-mix(in srgb, var(--error-text) 50%, transparent); }
  @keyframes ck-stamp-in { from { transform: rotate(-7deg) scale(.6); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .ck-stamp { animation: none; } }

  .ck-thanks h1 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; }
  .ck-thanks > p { color: var(--muted); margin: 10px auto 0; max-width: 400px; font-size: .95rem; line-height: 1.5; }
  .ck-thanks > p strong { color: var(--ink); font-weight: 700; }

  /* ───── ticket de recibo en 2 tonos: arriba la parte clara (cabecera +
     productos + subtotales), abajo el "talón" oscuro con el total — mismo
     color fijo que usa el resto del tema para sus bandas oscuras
     (var(--band): top-bar, nav, badges), así que siempre contrasta bien
     sin importar el tema claro/oscuro del sitio. Las 2 muescas redondas en
     la costura y el borde inferior dentado del talón imitan un boleto de
     verdad con su propio stub. */
  .ck-receipt { position: relative; margin: 36px 0 50px; text-align: left; font-family: 'IBM Plex Mono', monospace; }
  .ck-receipt-body {
    background: var(--surface); border: 1px solid var(--line); border-bottom: none;
    border-radius: 20px 20px 0 0; padding: 26px 26px 20px;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .45);
  }
  .ck-receipt-head {
    display: flex; justify-content: space-between; font-size: .76rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; padding-bottom: 16px; border-bottom: 1px dashed var(--line); margin-bottom: 14px;
  }
  /* líneas de producto: mini tarjeta con foto real y un filo dorado a la
     izquierda (inset, respeta las esquinas redondeadas) — no una fila de
     texto corrida. El nombre va en Hanken (lectura); precio y cantidad se
     quedan en mono. */
  .ck-receipt-items { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }
  .ck-receipt-item {
    display: flex; align-items: center; gap: 12px; background: var(--bg);
    border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
    box-shadow: inset 3px 0 0 var(--gold), 0 3px 10px -6px rgba(0, 0, 0, .25);
  }
  .ck-receipt-photo {
    width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    border: 1px solid var(--line); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3);
  }
  .ck-receipt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ck-receipt-info { flex: 1; min-width: 0; font-family: 'Hanken Grotesk', sans-serif; display: flex; flex-direction: column; gap: 2px; }
  .ck-receipt-item .ck-receipt-name { font-weight: 700; font-size: .92rem; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
  .ck-receipt-item .ck-receipt-price { font-size: .92rem; }
  .ck-receipt-qty { color: var(--muted); font-size: .72rem; font-family: 'IBM Plex Mono', monospace; }
  .ck-receipt-price { white-space: nowrap; font-weight: 600; }

  .ck-receipt-subtotals { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .ck-receipt-line { display: flex; align-items: baseline; gap: 6px; font-size: .86rem; color: var(--ink); padding: 6px 0; }
  .ck-receipt-subtotals .ck-receipt-name { color: var(--muted); min-width: 0; }
  .ck-receipt-leader { flex: 1; min-width: 10px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }

  /* costura perforada entre el cuerpo claro y el talón oscuro */
  .ck-receipt-seam { position: relative; height: 1px; background: var(--line); }
  .ck-receipt-seam .notch {
    position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--line); transform: translateY(-50%);
  }
  .ck-receipt-seam .notch-left { left: -10px; }
  .ck-receipt-seam .notch-right { right: -10px; }

  .ck-receipt-stub {
    position: relative; background: var(--band); color: #f3ecdd; padding: 22px 26px 32px;
  }
  .ck-receipt-stub::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 22px;
    background-color: var(--band);
    background-image: linear-gradient(-45deg, var(--bg) 11px, transparent 0), linear-gradient(45deg, var(--bg) 11px, transparent 0);
    background-size: 22px 22px; background-repeat: repeat-x; background-position: bottom left;
  }
  .ck-receipt-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .ck-receipt-total-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
  .ck-receipt-total-price { font-size: 2rem; font-weight: 800; color: var(--gold-light); white-space: nowrap; }
  .ck-receipt-meta { margin-top: 8px; font-size: .78rem; opacity: .72; }
  .ck-receipt-thanks {
    margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(243, 236, 221, .22);
    text-align: center; font-size: .78rem; font-style: italic; opacity: .85;
  }

  /* ───── "qué sigue": 3 paradas conectadas por una línea; la primera ya
     resuelta queda en dorado sólido, las siguientes en gris a la espera. */
  .ck-next-steps {
    list-style: none; margin: 0 0 34px; padding: 0; display: flex; position: relative; text-align: center;
  }
  .ck-next-steps::before {
    content: ""; position: absolute; top: 20px; left: 44px; right: 44px; height: 1px; background: var(--line); z-index: 0;
  }
  .ck-next-steps li { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .ck-step-dot {
    width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
    background: var(--bg); border: 1.5px solid var(--line); color: var(--muted);
  }
  .ck-step-dot svg { width: 18px; height: 18px; }
  .ck-next-steps li.is-done .ck-step-dot { background: var(--gold-vivid); border-color: var(--gold-vivid); color: var(--bg); }
  .ck-step-label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .ck-next-steps li.is-done .ck-step-label { color: var(--ink); }

  .ck-thanks .actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

  @media (max-width: 560px) {
    .ck-thanks { max-width: 100%; }
    .ck-receipt-body { padding: 22px 18px 18px; }
    .ck-receipt-stub { padding: 20px 18px 28px; }
    .ck-receipt-head { font-size: .68rem; }
    .ck-receipt-line { font-size: .8rem; }
    .ck-receipt-total-price { font-size: 1.7rem; }

    /* el nombre del producto y el precio ya no caben uno al lado del otro
       en una pantalla angosta (el precio empujaba al nombre a un hilo de
       texto tan estrecho que partía las palabras letra por letra) — el
       precio baja a su propia línea, a la derecha, bajo foto + nombre. */
    .ck-receipt-item { flex-wrap: wrap; row-gap: 4px; }
    .ck-receipt-item .ck-receipt-price { order: 1; flex: 1 0 100%; text-align: right; font-size: .88rem; }

    .ck-step-dot { width: 34px; height: 34px; }
    .ck-step-dot svg { width: 16px; height: 16px; }
    .ck-step-label { font-size: .62rem; }
    .ck-next-steps::before { left: 32px; right: 32px; top: 17px; }
  }

  /* "Continuar al pago" / "Volver a mis datos": el checkout en 2 pasos de
     abajo solo existe en móvil (acá ocultos) — en escritorio las 2
     columnas del .ck-grid ya se ven juntas, no hacen falta. */
  .ck-continue-to-payment, .ck-back-to-details { display: none; }

  @media (max-width: 900px) {
    .ck-grid { grid-template-columns: 1fr; }
    /* en 1 columna la ubicación por fila/columna de arriba no sirve (y con
       grid-column:2 explícito el navegador se inventa una 2.a columna
       fantasma) — se vuelve al orden normal del HTML: datos, pago, resumen. */
    .ck-details, #ck-payment, .ck-summary { grid-column: auto; grid-row: auto; min-width: 0; }
    .ck-summary { position: static; }

    .ck-continue-to-payment { display: flex; width: 100%; justify-content: center; margin-top: 24px; }
    .ck-back-to-details {
      display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--muted);
      margin-bottom: 16px;
    }
    .ck-back-to-details:hover { color: var(--gold-vivid); }
    /* paso 1: facturación + envío (.ck-details). paso 2: método de pago
       (#ck-payment) + resumen — se ocultan juntos hasta que validen y aprieten
       "Continuar al pago". */
    .ck-grid.ck-step-1 #ck-payment, .ck-grid.ck-step-1 .ck-summary { display: none; }
    .ck-grid.ck-step-2 .ck-details { display: none; }

    .ck-table { display: block; width: 100%; }
    .ck-table thead { display: none; }
    .ck-table tbody, .ck-table tfoot { display: block; width: 100%; }
    .ck-table tr { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
    .ck-table tbody td, .ck-table tfoot td, .ck-table tfoot th { display: block; }
    .ck-table tbody td.product-name { flex: 1 1 auto; min-width: 0; }
    .ck-table tbody td.product-total, .ck-table tfoot td, .ck-table tfoot th { flex: 0 0 auto; }
    .ck-table tfoot th { flex: 1 1 auto; min-width: 0; text-align: left; }
    .ck-table tfoot td { text-align: right; }
  }
  @media (max-width: 560px) {
    .ck-fields { grid-template-columns: 1fr; }
    .ck-block, .ck-summary { padding: 20px 18px; }
  }

  /* ───────── modal de país (primera visita) ───────── */
  .country-box h3 { font-size: 1.1rem; font-weight: 800; }
  .country-box .subtitle { font-size: .85rem; color: var(--muted); margin-top: 6px; }
  .modal-country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
  .modal-country-option {
    display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 10px; border: 1px solid var(--line);
    border-radius: 12px; font-size: .85rem; font-weight: 600; color: var(--ink); transition: border-color .15s, background .15s;
  }
  .modal-country-option:hover { border-color: var(--gold); background: var(--surface); }
  .modal-country-option .modal-flag { display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); transform: scale(1.5); margin-bottom: 6px; }
  .skip-country { display: block; text-align: center; margin-top: 18px; font-size: .8rem; color: var(--muted); text-decoration: underline; }
  .skip-country:hover { color: var(--ink); }

  /* ───────── modal de "Avísame cuando esté disponible" ───────── */
  .notice-box { position: relative; }
  .close-notice {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 999px;
    display: grid; place-items: center; color: var(--muted); transition: background .15s, color .15s;
  }
  .close-notice:hover { background: var(--surface); color: var(--ink); }
  .step-notice h3 { font-size: 1.1rem; font-weight: 800; padding-right: 26px; }
  .step-notice .subtitle { font-size: .85rem; color: var(--muted); margin-top: 6px; }
  .notice-field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; margin-top: 18px; }
  .notice-field input {
    width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: .9rem;
    background: var(--bg); color: var(--ink);
  }
  .notice-field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
  .notice-error { font-size: .8rem; color: var(--error-text); margin-top: 10px; }
  #notifyMeForm .btn { width: 100%; justify-content: center; margin-top: 16px; }
  .success-notice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 10px 0 4px; }
  .success-notice svg { color: var(--gold-vivid); }
  .success-notice p { font-size: .92rem; color: var(--ink); line-height: 1.5; }
  .success-notice .btn { margin-top: 6px; }

  /* ───────── widget flotante de WhatsApp ───────── */
  .whatsapp-widget {
    position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
    z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  }
  .btn-floating-whatsapp {
    width: 58px; height: 58px; border-radius: 999px; background: #25d366; color: #fff; display: grid; place-items: center;
    box-shadow: 0 14px 30px -10px rgba(37,211,102,.55); animation: float-whatsapp 2.6s ease-in-out infinite; flex-shrink: 0;
  }
  .btn-floating-whatsapp:hover, .btn-floating-whatsapp.active { animation-play-state: paused; }
  @keyframes float-whatsapp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .whatsapp-bubble {
    width: min(340px, calc(100vw - 40px)); background: var(--surface); border-radius: 10px;
    box-shadow: 0 30px 60px -16px rgba(0,0,0,.45); overflow: hidden; display: flex; flex-direction: column;
    max-height: min(560px, calc(100vh - 140px));
  }
  .whatsapp-bubble-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #075e54; color: #fff; flex-shrink: 0; }
  .whatsapp-bubble-back { color: #fff; width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0; opacity: .9; }
  .whatsapp-bubble-back:hover { opacity: 1; }
  .whatsapp-bubble-avatar-wrap { position: relative; flex-shrink: 0; }
  /* la imagen real del isotipo (sin el texto "MD GLOBAL LLC", que a este
     tamaño queda ilegible) sobre fondo oscuro, igual que en el header. */
  .whatsapp-bubble-avatar {
    width: 40px; height: 40px; border-radius: 999px; background: var(--band); padding: 6px;
    display: grid; place-items: center;
  }
  .whatsapp-bubble-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .dot-inline {
    position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 999px;
    background: #25d366; border: 2px solid #075e54;
  }
  .whatsapp-bubble-info { flex: 1; min-width: 0; }
  .whatsapp-bubble-name { font-size: .9rem; font-weight: 600; }
  .whatsapp-bubble-status { font-size: .72rem; opacity: .85; }

  
  .whatsapp-bubble-chat {
    flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 260px;
    background: var(--surface);
    display: flex; flex-direction: column; gap: 8px;
  }
  .chat-date-row { display: flex; justify-content: center; margin-bottom: 4px; }
  .chat-date-row span {
    background: #e1f2fb; color: #54656f; font-size: .68rem; font-weight: 600; letter-spacing: .03em;
    padding: 4px 10px; border-radius: 8px;
  }
  .bubble { max-width: 82%; padding: 7px 9px 9px; font-size: .86rem; line-height: 1.4; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
  .bubble p { white-space: pre-wrap; word-break: break-word; }
  .bubble-incoming { align-self: flex-start; background: #fff; color: #111b21; border-radius: 2px 8px 8px 8px; }
  .bubble-outgoing { align-self: flex-end; background: #dcf8c6; color: #111b21; border-radius: 8px 2px 8px 8px; }
  .bubble-time { display: block; text-align: right; font-size: .64rem; color: #667781; margin-top: 3px; }
  .bubble-time .read-check { color: #53bdeb; vertical-align: -2px; margin-left: 2px; }

  .whatsapp-bubble-composer {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: #f0f0f0; flex-shrink: 0;
  }
  .whatsapp-bubble-composer input {
    flex: 1; min-width: 0; background: #fff; border: none; border-radius: 999px; padding: 9px 14px;
    font-size: .86rem; color: #111b21;
  }
  .whatsapp-bubble-composer input::placeholder { color: #8696a0; }
  .whatsapp-bubble-composer input:focus { outline: none; }
  .btn-send-whatsapp {
    width: 36px; height: 36px; border-radius: 999px; background: #128c7e; display: grid; place-items: center; flex-shrink: 0;
    transition: background .15s, transform .1s;
  }
  .btn-send-whatsapp:active { transform: scale(.92); }
  @media (max-width: 480px) { .btn-floating-whatsapp { width: 52px; height: 52px; } .btn-floating-whatsapp svg { width: 25px; height: 25px; } }

  .flying-photo {
    position: fixed; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; z-index: 60; pointer-events: none;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); transition: transform .55s cubic-bezier(.3,.6,.3,1), opacity .55s ease .05s;
  }
  .flying-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .title-link { display: block; text-decoration: none; color: inherit; }
  .title-link:hover h3 { color: var(--gold-vivid); }

  /* ───────── migas de pan ───────── */
  .breadcrumb { display: flex; align-items: center; gap: 8px; padding-top: 22px; padding-bottom: 4px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
  .breadcrumb a { text-decoration: none; color: var(--muted); }
  .breadcrumb a:hover { color: var(--gold-vivid); }
  .breadcrumb .sep { color: var(--line); }
  .breadcrumb .current { color: var(--ink); font-weight: 600; }

  /* ───────── ficha de producto ───────── */
  .page-view { display: block; position: relative; }
  .page-watermark { position: absolute; top: 0; right: 0; width: 460px; height: 480px; overflow: hidden; pointer-events: none; }
  .page-watermark svg { position: absolute; top: -60px; right: -70px; width: 560px; height: 560px; color: var(--gold); opacity: .13; }
  /* en celular, el mismo tamaño de escritorio quedaba enorme para la
     pantalla (más ancho que el propio viewport) — se ve desproporcionado
     aunque esté recortado/detrás del contenido. Más chico en mobile, como
     un detalle de fondo en vez de dominar la pantalla. */
  @media (max-width: 760px) {
    .page-watermark { width: 220px; height: 230px; }
    .page-watermark svg { top: -30px; right: -35px; width: 280px; height: 280px; }
  }
  #productView > .breadcrumb, #productView > .product-detail { position: relative; z-index: 1; }
  #categoryView > .wrap { position: relative; z-index: 1; }

  /* la foto es cuadrada: su lado sale de la altura de pantalla para que entre completa en una laptop */
  .product-detail { padding-block: 24px 60px; display: grid; grid-template-columns: clamp(280px, calc(100vh - 280px), 460px) 1fr; gap: 54px; align-items: start; }
  .card-gallery { position: sticky; top: calc(140px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 14px; }
  .gallery-frame { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
  .gallery-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
  .gallery-frame:hover img { transform: scale(1.045); }
  .card-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .seal-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
  }
  .seal-badge svg { flex-shrink: 0; color: var(--gold-vivid); }

  .card-body { display: flex; flex-direction: column; }
  .card-body > .cat { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .card-body > .cat:hover { color: var(--gold-vivid); }
  .card-body .script { color: var(--gold); font-size: clamp(1.2rem, 2.2vw, 1.5rem); display: block; }
  .card-body h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.18; margin-top: 4px; }
  .card-body .tagline { margin-top: 10px; color: var(--muted); font-size: .98rem; max-width: 46ch; }
  .card-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
  .card-price-row .price { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.7rem; color: var(--gold-vivid); }
  .card-price-row .showcase { font-size: .8rem; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
  .card-coming-soon-note { margin-top: 20px; color: var(--muted); font-size: .9rem; border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; max-width: 46ch; }

  .card-purchase-row { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
  /* el formulario real de WooCommerce (form.cart) envuelve el selector de
     cantidad Y el botón de agregar — sin esto el <form> queda como bloque
     normal y el botón cae debajo de la cantidad en vez de ir al costado. */
  .card-purchase-row form.cart { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .quantity-selector { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
  .quantity-selector button { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 1rem; }
  .quantity-selector button:hover { background: var(--surface); }
  .quantity-selector span { min-width: 28px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .92rem; }

  
  .card-purchase-row .quantity {
    display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 4px;
  }
  .card-purchase-row .quantity input.qty {
    min-width: 28px; width: 28px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .92rem;
    border: none; background: transparent; color: var(--ink); padding: 0; -moz-appearance: textfield;
  }
  .card-purchase-row .quantity input.qty::-webkit-outer-spin-button,
  .card-purchase-row .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .card-trust-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; flex-wrap: wrap; }
  .card-trust-row .card-flags { display: flex; gap: 5px; }
  .card-trust-row .card-flags span { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }

  .card-accordion { margin-top: 38px; border-top: 1px solid var(--line); }
  .accordion-item { border-bottom: 1px solid var(--line); }
  .accordion-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px 2px; font-size: .92rem; font-weight: 700; text-align: left; color: var(--ink); transition: color .15s;
  }
  .accordion-head:hover { color: var(--gold-vivid); }
  .accordion-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s ease; }
  .accordion-item.open .accordion-head { color: var(--gold-vivid); }
  .accordion-item.open .accordion-chevron { transform: rotate(180deg); color: var(--gold-vivid); }
  .accordion-panel { display: none; padding: 0 2px 20px; font-size: .9rem; color: var(--muted); line-height: 1.7; }
  .accordion-item.open .accordion-panel { display: block; }

  .supplement-table { border: 1.5px solid var(--ink); border-radius: 4px; max-width: 420px; overflow: hidden; }
  .supplement-table .supplement-head { background: var(--ink); color: var(--bg); padding: 10px 14px; }
  .supplement-table .supplement-head strong { font-size: 1.05rem; display: block; font-family: 'Bitter', serif; }
  .supplement-table .supplement-head span { font-size: .76rem; opacity: .85; }
  .supplement-serving-row { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 6px solid var(--ink); font-size: .82rem; font-weight: 700; }
  .supplement-rows { padding: 4px 14px; }
  .supplement-fact-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; font-size: .78rem; }
  .supplement-fact-row:last-child { border-bottom: none; }
  .supplement-dv-note { padding: 8px 14px 12px; font-size: .68rem; color: var(--muted); }

  /* ───────── página de categoría ───────── */
  .category-row-head { padding-top: 22px; }
  .category-row-head .current { font-size: 1.35rem; font-weight: 800; font-family: 'Bitter', Georgia, serif; }

  .category-result-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding-bottom: 18px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
  }
  .category-count { font-size: .84rem; color: var(--muted); }
  .category-sort { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .category-sort select { background: var(--bg); border: 1px solid var(--line); color: var(--ink); padding: 7px 10px; border-radius: 8px; font: inherit; font-size: .82rem; }
  .category-sort select:focus { outline: none; border-color: var(--gold); }

  /* el padding inferior de la página (.generic-page-view, 70px) ya deja
     aire antes del footer — este de acá se sumaba encima (126px entre los
     dos), y en una categoría con pocos productos (a veces 1 solo) ese
     tramo vacío se nota de más. */
  .category-layout { display: grid; grid-template-columns: 1fr 250px; gap: 46px; align-items: start; padding-bottom: 16px; }
  .category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
  .category-grid .product-card { flex: none; }
  /* mismo lenguaje que ".cart-empty" (círculo + título + texto) — antes
     era una sola línea de texto plano, pegada a la izquierda, perdida en
     medio de toda la grilla vacía. */
  .empty-grid {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 60px 20px 50px; animation: appear-empty-grid .4s ease both;
  }
  .empty-grid-icon {
    width: 64px; height: 64px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--gold-vivid); margin-bottom: 4px;
  }
  .empty-grid h4 { font-family: 'Bitter', Georgia, serif; font-size: 1.1rem; font-weight: 800; margin: 0; }
  .empty-grid p { font-size: .88rem; color: var(--muted); max-width: 36ch; }
  .empty-grid .btn { margin-top: 10px; }
  @keyframes appear-empty-grid {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
  }

  .related-block { position: relative; padding: 60px 0 70px; overflow: hidden; }
  .related-block::before {
    content: ""; position: absolute; top: -20%; left: -8%; width: 520px; height: 520px; border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
    z-index: 0; pointer-events: none;
  }
  .related-block > .wrap { position: relative; z-index: 1; }

  .category-sidebar { display: flex; flex-direction: column; gap: 30px; position: sticky; top: calc(140px + env(safe-area-inset-top, 0px)); }
  /* la cabecera de "Filtros" + el botón que lo abre son solo del cajón de
     celular (ver @media más abajo) — en escritorio la barra lateral ya
     tiene su propio título "Categorías de producto", repetirlo acá sería
     de más. */
  .mobile-filters-head, .btn-mobile-filters { display: none; }
  .sidebar-title {
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--ink);
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gold);
  }
  .sidebar-category-list { display: flex; flex-direction: column; gap: 11px; }
  .sidebar-category-list a { font-size: .87rem; color: var(--muted); text-decoration: none; }
  .sidebar-category-list a:hover { color: var(--gold-vivid); }
  .sidebar-category-list a.active { color: var(--ink); font-weight: 700; }
  .price-filter-fields { display: flex; align-items: center; gap: 8px; }
  .price-input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .84rem; background: var(--bg); color: var(--ink); }
  .price-input:focus { outline: none; border-color: var(--gold); }
  .price-filter-fields span { color: var(--muted); font-size: .8rem; flex-shrink: 0; }
  .btn-filter { margin-top: 12px; width: 100%; justify-content: center; padding: 10px; font-size: .8rem; }
  .price-filter-note { font-size: .71rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
  .sidebar-shipping { display: flex; align-items: center; gap: 8px; }
  .sidebar-shipping span { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }

  .sidebar-help-block {
    padding: 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-top: -6px;
  }
  .sidebar-help-block .sidebar-title { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; font-size: .86rem; letter-spacing: 0; text-transform: none; font-family: 'Bitter', Georgia, serif; color: var(--ink); }
  .sidebar-help-text { font-size: .8rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
  .btn-sidebar-help { width: 100%; justify-content: center; font-size: .8rem; padding: 10px; }

  @media (max-width: 900px) {
    /* ".slide-grid" trae "padding-left: clamp(16px,7vw,90px)" sin su
       pareja a la derecha — en escritorio no se nota (el texto va alineado
       a la izquierda y la foto a la derecha, asimétrico a propósito), pero
       acá todo pasa a quedar centrado (texto y foto), y ese padding de un
       solo lado corría el "centro" disponible unos 13-27px hacia la
       derecha del centro real de la pantalla — la foto se veía descuadrada,
       más pegada al borde derecho que al izquierdo. Repitiendo el mismo
       padding-right queda parejo otra vez. */
    .slide-grid { text-align: center; padding-block: 40px; padding-right: clamp(16px, 7vw, 90px); }
    /* justify-items:center (en escritorio no hace falta, el grid de 2
       columnas ya no estira nada): sin esto ".slide-text" se
       estiraba al 100% del ancho de su celda — el <h2>/<p> se veían
       centrados igual porque heredan "text-align: center", pero el botón
       (".wp-block-buttons" es un flex aparte, alineado a la izquierda por
       defecto) quedaba pegado al borde izquierdo de esa caja estirada en
       vez de centrado de verdad. Con justify-items:center la celda se
       encoge al ancho real del contenido y centra esa caja entera. */
    .slide-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; justify-items: center; }
    /* mismo motivo que el comentario de arriba, pero a nivel de cada
       elemento: "max-width" (15ch en el h2, 38ch en el párrafo) encoge la
       CAJA, no el texto — y una caja más angosta que su contenedor, sin
       "margin-inline:auto", se queda pegada al borde izquierdo en vez de
       centrada (el texto adentro se ve centrado por "text-align", pero la
       caja en sí no). El botón es aparte: ".wp-block-buttons" sí ocupa
       todo el ancho, pero es un flex sin "justify-content", así que el
       <a> de adentro (su único hijo) se queda pegado a la izquierda de esa
       fila completa. */
    .slide-text h2, .slide-text p.lead { margin-inline: auto; }
    .slide-text .wp-block-buttons { justify-content: center; }
    
    .slide-art { display: none; }
    /* el degradé ".slide::before" es diagonal (100deg), pensado para
       el ancho de escritorio: oscurece fuerte solo el 15-50% izquierdo
       (donde va el texto) y deja ver la foto de fondo en el resto. En el
       ancho angosto de móvil ese mismo tramo diagonal cubre la diapositiva
       ENTERA — la foto de fondo quedaba ahí (cargada, visible en el DOM)
       pero tapada casi del todo por el degradé, se veía lisa y oscura.
       Un degradé vertical más parejo dejar ver la foto arriba y oscurece
       lo suficiente abajo (donde cae el texto) para que siga siendo
       legible. */
    .slide::before {
      background: linear-gradient(180deg, rgba(18,13,5,.45) 0%, rgba(18,13,5,.72) 55%, rgba(18,13,5,.92) 100%);
    }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    /* en una sola columna sobra ancho de sobra — el mismo tamaño de
       escritorio (pensado para 3 columnas apretadas) se quedaba chico ahí.
       Un empujón general: logo, texto y enlaces más grandes, más
       respiro entre cada bloque. */
    .footer-brand img { height: 74px; }
    .footer-brand p { font-size: .92rem; }
    .footer-brand .social-links { gap: 14px; margin-top: 18px; }
    .footer-brand .social-links svg { width: 19px; height: 19px; }
    .footer-col h5 { font-size: .8rem; margin-bottom: 16px; }
    .footer-col a { font-size: .96rem; margin-bottom: 13px; }
    .real-payment-badges svg { width: 46px; height: 30px; }
    .stripe-seguro { font-size: .82rem; }
    .footer-note { font-size: .84rem; margin-top: 40px; padding-top: 24px; }
    .product-detail { grid-template-columns: 1fr; gap: 30px; }
    .card-gallery { position: static; }
    .category-layout { grid-template-columns: 1fr; }
    /* en escritorio los filtros van al costado porque hay sitio de sobra;
       en celular pasan a un cajón que se desliza desde la izquierda —
       mismo patrón que el carrito (.cart-backdrop/.cart-panel), espejado
       al otro lado para no confundirlos. Antes probamos solo subirlos
       arriba de la grilla, pero seguía siendo mucho que bajar antes de ver
       productos; así quedan a un toque, sin ocupar sitio en la página. */
    .category-sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 85vw); background: var(--bg);
      z-index: 41; transform: translateX(-100%); transition: transform .3s cubic-bezier(.3,.7,.3,1);
      flex-direction: column; gap: 0; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px);
      box-shadow: 24px 0 60px -30px rgba(0,0,0,.5);
    }
    .category-sidebar.active { transform: translateX(0); }
    .category-sidebar .sidebar-block { padding: 20px 22px; border-bottom: 1px solid var(--line); }
    .category-sidebar .sidebar-help-block { border-bottom: none; background: none; margin-top: 0; border-radius: 0; }
    .mobile-filters-head {
      display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 18px;
      border-bottom: 1px solid var(--line); padding-top: calc(22px + env(safe-area-inset-top, 0px));
    }
    .mobile-filters-head h3 { font-size: 1.15rem; font-weight: 800; }
    .close-filters { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
    .close-filters:hover { background: var(--surface); }
    .filters-backdrop {
      position: fixed; inset: 0; background: rgba(23,17,8,.45); z-index: 40; opacity: 0; pointer-events: none;
      transition: opacity .25s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    .filters-backdrop.active { opacity: 1; pointer-events: auto; }
    .btn-mobile-filters {
      display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px;
      padding: 9px 15px; font-size: .82rem; font-weight: 600; color: var(--ink); flex-shrink: 0;
    }
    .btn-mobile-filters:hover { border-color: var(--gold); color: var(--gold-vivid); }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    a.btn-floating-add { display: flex !important; }
    .price-action-row .btn-add { display: none !important; }
  }
  @media (max-width: 760px) {
    .btn-hamburger { display: flex; }
    .nav-row { display: none; padding-block: 14px; }
    .nav-row.open { display: block; }
    .nav-row-content { flex-direction: column; align-items: center; gap: 4px; }
  }
  @media (max-width: 620px) {
    .new-badge img { height: 48px; }
    .top-bar .wrap { flex-wrap: wrap; gap: 8px; justify-content: center; padding-block: 10px; }
    .hero .carousel-arrow { width: 34px; height: 34px; }
    /* el carrusel de productos tenía la tarjeta a tamaño fijo de escritorio
       (250px) metida entre dos flechas también de escritorio (42px) — en un
       celular angosto eso no entraba: la tarjeta se salía por debajo de la
       flecha derecha en vez de quedar centrada con un respiro parejo a los
       dos lados. Flechas más chicas (como ya pasa en el hero) + tarjeta más
       angosta le dejan sitio de sobra, con un pedacito de la siguiente
       tarjeta asomando como pista de que se puede seguir deslizando. */
    .product-carousel-row .carousel-arrow { width: 34px; height: 34px; }
    .product-card { flex-basis: 210px; }
    .product-carousel { gap: 14px; }
    .review-card { flex-basis: 260px; }
    
    .category-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }

    
    .btn-cart { width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; }
    .btn-cart svg { width: 19px; height: 19px; }
    .cart-text { display: none; }
    .btn-cart .account { position: absolute; top: 1px; right: 1px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
  /* ───────── sobre nosotros ───────── */
  .about-band { position: relative; padding: 70px 0; }
  /* que el header fijo no tape el inicio de la sección al saltar desde el menú */
  #about { scroll-margin-top: 90px; }
  
  #trust { scroll-margin-top: 60px; }
  .about-band > .wp-block-group__inner-container > .wrap { position: relative; z-index: 1; }
  .about-band > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; width: 100%;
  }
  .about-art { position: relative; width: min(100%, 460px); justify-self: center; }
  .about-photo { aspect-ratio: 1; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(33,26,15,.45); }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .about-card {
    position: absolute; right: -26px; bottom: 30px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px;
    box-shadow: 0 22px 44px -26px rgba(0,0,0,.4);
  }
  /* nuestro, no del prototipo: .about-card y .location ahora son bloques
     Grupo (para que el texto sea editable desde wp-admin); el flex se mueve
     a su .wp-block-group__inner-container real, mismo patrón de siempre. */
  .about-card > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 6px; }
  .about-card .base-label, .about-card small { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0; }
  .about-card .location { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: .95rem; }
  .about-card .location > .wp-block-group__inner-container { display: flex; align-items: center; gap: 7px; }
  .about-card .location svg { color: var(--gold-vivid); flex-shrink: 0; }
  .about-flags { display: flex; gap: 5px; margin-top: 2px; }
  .about-flags span { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  .about-text .script { color: var(--gold); font-size: clamp(1.7rem, 3.4vw, 2.3rem); display: block; margin-bottom: 4px; }
  .about-text h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); font-weight: 800; }
  .about-text > .wp-block-group__inner-container > p { color: var(--muted); margin-top: 14px; max-width: 52ch; }
  .pillars { list-style: none; margin: 28px 0 0; padding: 0; }
  .pillars > .wp-block-group__inner-container { display: grid; gap: 16px; }
  .pillar { }
  .pillar > .wp-block-group__inner-container { display: flex; align-items: flex-start; gap: 14px; }
  .pillar .icon {
    width: 44px; height: 44px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--gold);
    display: grid; place-items: center; color: var(--gold-vivid); flex-shrink: 0;
  }
  .pillar h4 { margin: 0; font-size: .95rem; font-weight: 800; }
  .pillar p { margin-top: 2px; font-size: .85rem; color: var(--muted); }
  @media (max-width: 900px) {
    .about-band > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 44px; }
    .about-card { right: 12px; bottom: 12px; }
    
    .about-art { display: none; }
    
    .about-text { text-align: center; }
    .about-text > .wp-block-group__inner-container > p { margin-inline: auto; }
    .pillars { max-width: 360px; margin-inline: auto; text-align: left; }
  }

  
  @media (max-width: 900px) {
    section.block { padding: 48px 0; }
    .testimonial-block { padding: 50px 0; }
    .trust-band { padding: 52px 0; }
    .about-band { padding: 50px 0; }
  }
  @media (max-width: 600px) {
    section.block { padding: 32px 0; }
    .testimonial-block { padding: 34px 0; }
    .trust-band { padding: 36px 0; }
    .about-band { padding: 34px 0; }
  }

  /* ───────── 404 y producto no disponible ───────── */
  .error-view { padding-block: 56px 90px; }
  .error-404 { max-width: 640px; margin: 0 auto; text-align: center; }
  .error-404-number {
    font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: clamp(6rem, 18vw, 10rem); line-height: .9; letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-vivid)); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .error-404 .script, .unavailable-text .script { color: var(--gold); font-size: clamp(1.7rem, 3.4vw, 2.3rem); display: block; margin-top: 8px; }
  .error-404 h1, .unavailable-text h1 { font-size: clamp(1.45rem, 2.7vw, 1.95rem); font-weight: 800; margin-top: 2px; }
  .error-404 > p, .unavailable-text > p { color: var(--muted); margin-top: 12px; max-width: 48ch; }
  .error-404 > p { margin-inline: auto; }
  .error-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .error-404 .error-actions { justify-content: center; }
  .error-404 .gold-divider { margin: 44px auto 24px; }
  .shortcuts-title { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
  .category-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .category-shortcuts a {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
    font-size: .84rem; font-weight: 600; text-decoration: none; background: var(--bg); transition: border-color .15s, color .15s;
  }
  .category-shortcuts a:hover { border-color: var(--gold); color: var(--gold-vivid); }
  .category-shortcuts svg { color: var(--gold-vivid); }

  .unavailable { max-width: 960px; margin: 0 auto; }
  /* nuestro, no del prototipo: .unavailable es un bloque Grupo (para que
     el texto sea editable); el grid se mueve a su .wp-block-group__inner-
     container real, mismo patrón ya usado en el resto del sitio. */
  .unavailable > .wp-block-group__inner-container { display: grid; grid-template-columns: clamp(240px, 32vw, 380px) 1fr; gap: 54px; align-items: center; }
  .unavailable-photo { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .unavailable-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.6); opacity: .8; }
  .country-seal {
    position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px 7px 9px; font-size: .76rem; font-weight: 700;
  }
  .country-seal .seal-flag { display: flex; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  .unavailable-text .cat { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; text-decoration: none; }
  .unavailable-text .cat:hover { color: var(--gold-vivid); }
  .continue-link { display: inline-flex; margin-top: 18px; font-size: .86rem; color: var(--muted); }
  .continue-link:hover { color: var(--gold-vivid); }
  @media (max-width: 760px) {
    .unavailable > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .unavailable-photo { max-width: 300px; width: 100%; margin: 0 auto; }
    .unavailable-text > p { margin-inline: auto; }
    .unavailable-text .error-actions { justify-content: center; }
  }

  /* ───────── franjas a todo lo ancho (anulan el margen lateral del body) ───────── */
  /* catálogo, testimonios y confianza comparten un solo fondo: pasa de blanco a crema
     sin cortes, y las manchas doradas de cada sección cruzan los límites sin recortarse */
  .gold-divider {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
    width: min(380px, 70%); margin: 0 auto; color: var(--gold);
  }
  .gold-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light) 65%, var(--gold)); }
  .gold-divider span:last-child { transform: scaleX(-1); }
  .gold-divider svg { flex-shrink: 0; }
  .light-segment { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--bg) 0, var(--surface) 640px); }

/* ═══════════════════════════════════════════════════════════════════════
   WooCommerce (bloques de carrito/checkout + plantillas clásicas de
   catálogo/producto): esto NO viene del prototipo — es nuestro, escrito
   a propósito, para que los botones de Woo usen la marca en vez de
   depender del reset de arriba (que está acotado a .mdg y no los toca).
   ═══════════════════════════════════════════════════════════════════════ */
.woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; color: var(--ink); }
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wp-block-woocommerce-cart h1, .wp-block-woocommerce-cart h2, .wp-block-woocommerce-cart h3,
.wp-block-woocommerce-checkout h1, .wp-block-woocommerce-checkout h2, .wp-block-woocommerce-checkout h3 {
  font-family: 'Bitter', Georgia, serif;
}

/* el tema no traía la utilidad .screen-reader-text estándar de WordPress/
   WooCommerce: esa etiqueta ("Cantidad de productos", enlaces "Saltar al
   contenido", etc.) se veía como texto normal en vez de quedar oculta para
   lectores de pantalla — en la ficha de producto era justo lo que empujaba
   el selector de cantidad y lo hacía más ancho de lo debido. */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-weight: 700;
  height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px;
  width: auto; z-index: 100000;
}

.wp-element-button,
.wc-block-components-button,
button.wc-block-cart__submit-button,
a.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.single_add_to_cart_button,
.add_to_cart_button,
#place_order {
  /* #place_order: Woo lo flota a la derecha por defecto (para que quede
     junto al botón "Update totals" que solo aparece sin JS) — acá es el
     único botón del bloque y flotar lo sacaba del flujo, tapando la nota
     de "Pago cifrado..." que va justo debajo. */
  float: none !important; clear: both;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 999px; min-height: 0;
  font-size: .88rem; font-weight: 700; letter-spacing: .01em; text-decoration: none;
  border: 1px solid transparent;
  /* !important: el CSS propio de WooCommerce para ".button.alt" (morado, su
     color de acento por defecto) tiene más especificidad que esta regla y
     ganaba la cascada — pasó justo en el botón grande de la ficha de
     producto (.single_add_to_cart_button.button.alt). */
  background: linear-gradient(135deg, var(--gold-light), var(--gold)) !important; color: #fff !important;
  text-shadow: 0 1px 2px rgba(33,26,15,.25);
  transition: transform .15s, opacity .15s; cursor: pointer;
}
.wp-element-button:hover, .wc-block-components-button:hover,
.single_add_to_cart_button:hover, .add_to_cart_button:hover, #place_order:hover { opacity: .9; color: #fff !important; }
.wp-element-button:active, .wc-block-components-button:active { transform: scale(.98); }
.wp-element-button:disabled, .wc-block-components-button:disabled { opacity: .5; cursor: default; }

/* dentro del grid de productos, el botón se ve como .btn-add (más chico, contorno) */
.products .add_to_cart_button, .products .ajax_add_to_cart {
  background: none; color: var(--ink); border: 1px solid var(--line);
  padding: 9px 15px; font-size: .76rem; text-shadow: none;
}
.products .add_to_cart_button:hover { border-color: var(--gold); color: var(--gold-vivid); }
.products .added_to_cart { color: var(--gold-vivid); font-weight: 700; font-size: .76rem; }

/* paso +/- de cantidad: contorno, no dorado sólido */
.wc-block-components-quantity-selector__button,
.quantity .qty { border-color: var(--line); color: var(--ink); }
.wc-block-components-quantity-selector__button {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.wc-block-components-quantity-selector__button:hover { border-color: var(--gold); color: var(--gold-vivid); }

/* botón de cupón: contorno, como .btn-ghost, no dorado sólido */
.wc-block-components-totals-coupon__button {
  background: none; border: 1px solid var(--line); color: var(--ink);
  padding: 9px 15px; font-size: .82rem; text-shadow: none;
}
.wc-block-components-totals-coupon__button:hover { border-color: var(--gold); }

/* enlaces de texto (volver al carrito, "¿tienes un cupón?") con el dorado, sin look de botón */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-components-totals-coupon-link {
  color: var(--gold-vivid); font-weight: 600; text-decoration: underline;
}

a.added_to_cart { color: var(--gold-vivid); font-weight: 700; }

.categories-menu-wrap > summary { list-style: none; cursor: pointer; }
.categories-menu-wrap > summary::-webkit-details-marker { display: none; }
.categories-menu-wrap[open] > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.categories-menu-wrap[open] > summary.categories-trigger .chevron { transform: rotate(180deg); }

@media (max-width: 900px) { .btn-hamburger { display: flex; } }

/* ───────── menú móvil: hoja inferior (fondo + hoja, togglados por JS,
   mismo patrón que el carrito/buscador) ───────── */
.mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(23,17,8,.45); z-index: 42; opacity: 0; pointer-events: none;
  transition: opacity .25s; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.mobile-menu-backdrop.active { opacity: 1; pointer-events: auto; }
.mobile-menu-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 43; background: var(--bg);
  border-radius: 22px 22px 0 0; max-height: min(640px, 86vh); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.3,.7,.3,1);
  box-shadow: 0 -24px 60px -24px rgba(0,0,0,.45);
}
.mobile-menu-sheet.active { transform: translateY(0); }
.menu-sheet-handle { flex-shrink: 0; display: flex; justify-content: center; padding: 10px 0 6px; }
.menu-sheet-handle::before { content: ""; width: 38px; height: 4px; border-radius: 999px; background: var(--line); }
.menu-sheet-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 2px 20px 10px;
  font-family: 'Bitter', Georgia, serif; font-weight: 800; font-size: 1.15rem; color: var(--ink);
}
.close-menu-sheet {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--ink);
  transition: background .15s;
}
.close-menu-sheet:hover { background: var(--surface); }
.menu-sheet-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
.menu-sheet-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
}
.sheet-row-icon {
  width: 32px; height: 32px; border-radius: 999px; background: var(--surface); color: var(--gold-vivid);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sheet-flag-icon { overflow: hidden; }
.sheet-flag-icon svg { width: 20px; height: auto; display: block; }
.sheet-row-text { font-size: .94rem; font-weight: 600; flex: 1; }
.sheet-row-chevron { color: var(--line); flex-shrink: 0; }
.sheet-section-label {
  display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; padding: 16px 2px 6px;
}

.sheet-category-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 2px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
}
.sheet-category-row-icon {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}
.sheet-category-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sheet-category-row-name { font-size: .94rem; font-weight: 700; }
.sheet-category-row-kicker { font-size: .78rem; color: var(--muted); }

/* "Enviar a país" y categorías con subcategorías: desplegable propio
   (<details>, sin JS para abrir/cerrar — elegir un país sí usa JS, ver
   mobile-menu.js). El panel queda indentado bajo la fila, como una
   sub-lista. */
.sheet-expandable-row summary { list-style: none; cursor: pointer; }
.sheet-expandable-row summary::-webkit-details-marker { display: none; }

.expandable-chevron { transition: transform .15s; transform: rotate(90deg); }
.sheet-expandable-row[open] > summary .expandable-chevron { transform: rotate(270deg); }
.sheet-expandable-panel { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 10px 51px; }
/* un nivel más adentro (subcategoría de una subcategoría) no repite el
   mismo sangrado de 51px — se vería carísimo en una pantalla de 360px — */
.sheet-expandable-panel .sheet-expandable-panel { padding-left: 16px; }
.sheet-expandable-panel a, .sheet-country-option {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; color: var(--ink);
  text-decoration: none; font-size: .86rem; font-weight: 600; background: none; border: none; font: inherit;
  text-align: left; width: 100%; cursor: pointer;
}
.sheet-expandable-panel a:hover, .sheet-country-option:hover { background: var(--surface); }
/* fila de una subcategoría que a su vez tiene hijos (sub-subcategoría):
   mismo lenguaje visual que un link de la lista, pero con chevron propio. */
.sheet-category-subrow {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; color: var(--ink);
  cursor: pointer;
}
.sheet-category-subrow:hover { background: var(--surface); }
.sheet-category-subrow .sheet-category-row-name { font-size: .86rem; font-weight: 600; }
.sheet-category-subrow .sheet-row-chevron { margin-left: auto; }
.sheet-country-option.active { color: var(--gold-vivid); }
.sheet-country-option .sheet-flag-icon svg { width: 18px; }
.sheet-category-view-all { color: var(--gold-vivid) !important; font-weight: 700 !important; }

/* el selector de "Enviar a" del header queda informativo esta primera
   versión (Woo ya limita el checkout a los 4 países) — si más adelante se
   decide cambiar catálogo por país, esto se conecta a datos reales. */
.header-country-selector > button { cursor: default; }

/* oculto visualmente, visible para lectores de pantalla (el H1 real de SEO;
   el diseño usa su propio título de guion como protagonista visual) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* adaptador <details> para el acordeón de la ficha de producto (mismo
   look que .accordion-item.open, sin depender del JS que falta portar) */
details.accordion-item > summary.accordion-head { list-style: none; cursor: pointer; }
details.accordion-item > summary.accordion-head::-webkit-details-marker { display: none; }
details.accordion-item[open] > summary.accordion-head { color: var(--gold-vivid); }
details.accordion-item[open] > summary.accordion-head .accordion-chevron { transform: rotate(180deg); color: var(--gold-vivid); }
details.accordion-item > .accordion-panel { display: block; }

/* páginas genéricas (Carrito, Checkout, Mi cuenta, legales): el prototipo
   escopaba estos paddings a #categoryView/#productView; acá van sin
   ID porque ya no son "vistas" de una sola página sino templates reales. */
.generic-page-view { padding-bottom: 70px; position: relative; }
.generic-page-view .category-description { color: var(--muted); margin: 10px 0 22px; font-size: .92rem; max-width: 56ch; }
.generic-page-wrap .generic-page-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem); padding-top: 22px; margin-bottom: 26px;
}
/* nuestro, no del prototipo: páginas legales (Términos, Privacidad, Envíos
   y devoluciones) — el prototipo no las maquetó, solo dejó el contenedor
   genérico de arriba. Cada cláusula es un bloque "Sección legal" (patrón
   reutilizable), para que agregar una nueva sea insertar el patrón, no
   copiar/pegar HTML. */
/* el checkout necesita todo el ancho de .wrap para su grilla de 2 columnas
   (.ck-grid) — el máximo de 760px es solo para páginas de puro texto
   (legales, etc.). */
.generic-page-content { max-width: 760px; }
.woocommerce-checkout .generic-page-content { max-width: none; }
.legal-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-section h2 { font-size: 1.15rem; font-weight: 800; }
.legal-section > .wp-block-group__inner-container > p,
.legal-section > .wp-block-group__inner-container > ul,
.legal-section > .wp-block-group__inner-container > ol {
  color: var(--muted); line-height: 1.7; margin-top: 12px; font-size: .92rem;
}
.legal-section ul, .legal-section ol { padding-left: 22px; }
.legal-section li + li { margin-top: 5px; }
.legal-section a { color: var(--gold-vivid); text-decoration: underline; }
.legal-section strong { color: var(--ink); }
/* el bloque de Woo (carrito/checkout) no necesita el título repetido si la
   página ya se llama igual; queda discreto por si el tema de WP lo pide */
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { margin-top: 8px; }

/* nuestro, no del prototipo: una palabra larga en el nombre de categoría
   (p. ej. "ANTIENVEJECIMIENTO") podía forzar una columna más ancha que
   las otras dentro de .category-grid — minmax(0,1fr) ya lo evita
   arriba; esto corta el texto si de verdad no entra, en vez de desbordar. */
.category-grid .product-card, .category-grid .product-info, .category-grid .category-row { min-width: 0; }
.product-info .cat { overflow-wrap: break-word; }

/* ═══════════════════════════════════════════════════════════════════════
   El bloque Grupo de WordPress envuelve su contenido en un
   .wp-block-group__inner-container extra; sin esto, un .pillars{display:
   grid} (o cualquier otra clase nuestra) le pega a ese envoltorio en vez
   de a las tarjetas/columnas reales de adentro. display:contents lo saca
   de la caja sin sacarlo del DOM, así los bloques internos (Grupo "pilar",
   "tarjeta-review", "parada-ruta"...) quedan como hijos directos de
   verdad para efectos de CSS. */
/* ver abajo: cada sección mueve su display:flex/grid directo al
   .wp-block-group__inner-container real, en vez de usar display:contents
   (tenía fallas de cómputo de tamaños en porcentaje entre navegadores). */

/* ═══════════════════════════════════════════════════════════════════════
   Bloque nativo "Productos nuevos" de WooCommerce (catálogo del inicio):
   nuestro, no del prototipo — el bloque trae su propio marcado
   (wc-block-grid__*), así que se le pone el look de marca por fuera en
   vez de heredarlo de .product-card. Las insignias "Más vendido" /
   "Próximamente" no se pueden poner aquí sin JS propio (este bloque no
   pasa por el gancho de PHP que ya usa la categoría/tienda); se dejan
   pendientes a propósito, no se inventó nada para taparlo. */
.wc-block-grid__product-image {
  aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line);
}
.wc-block-grid__product-image img { width: 100%; height: 100%; object-fit: cover; }
.wc-block-grid__product-title {
  font-family: 'Bitter', Georgia, serif !important; font-size: 1.02rem !important; font-weight: 700 !important;
  color: var(--ink) !important; margin-top: 14px !important;
}
.wc-block-grid__product-price { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--ink); }
.wc-block-grid__product-add-to-cart .wp-element-button,
.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wc-block-components-product-button__button {
  background: none; color: var(--ink); border: 1px solid var(--line);
  padding: 9px 15px; font-size: .76rem; text-shadow: none;
}
.wc-block-grid__product-add-to-cart .wp-element-button:hover,
.wc-block-grid__product-add-to-cart .add_to_cart_button:hover { border-color: var(--gold); color: var(--gold-vivid); opacity: 1; }