/* ============================================================
   VIÑALES — Sistema de diseño (Dirección A · Cava Editorial)
   Vanilla CSS · WordPress/Woo-aware · tokens + componentes
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Marca */
  --wine:#2A2320;
  --wine-700:#221C19;
  --wine-800:#1A1512;
  --wine-900:#14100E;
  --cream:#F7F1E7;
  --cream-2:#F0E7D7;     /* quiebre tonal sutil entre secciones */
  --cream-50:#FCF8F1;
  --white:#FFFFFF;
  --ink:#2A2422;
  --muted:#6B5F54;
  --gold:#B08D4F;
  --gold-ink:#8A6A2F;     /* oro legible (texto sobre crema) */
  --gold-soft:#D9B871;    /* oro sobre fondos oscuros */
  --green:#2F4A3A;
  --success:#2F6B43;
  --error:#9B2C2C;
  --sale:#6E1F2B;        /* borgoña: badges de descuento (pop cálido) */
  --event:#234B38;       /* verde botella: eventos tipo Cyber */
  --stock-out:#4A423C;   /* neutral: agotado */

  /* Líneas / superficies */
  --line:rgba(42,36,34,.12);
  --line-2:rgba(42,36,34,.18);
  --line-dark:rgba(247,241,231,.16);
  --shadow-sm:0 2px 8px rgba(20,16,14,.06);
  --shadow-md:0 14px 38px rgba(20,16,14,.12);
  --shadow-lg:0 26px 70px rgba(20,10,12,.45);

  /* Tipografía */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Escala */
  --fs-hero:clamp(2.6rem, 1.5rem + 4.4vw, 4.5rem);
  --fs-h1:clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h2:clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-h3:1.35rem;
  --fs-lg:1.125rem;
  --fs-base:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  /* Espaciado (base 8) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  /* Radios */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;

  /* Layout */
  --container:1360px;
  --gutter:24px;
  --header-h:84px;
  --topbar-h:38px;

  /* z-index */
  --z-header:50; --z-overlay:60; --z-drawer:70; --z-modal:80; --z-toast:90;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
ul{list-style:none}
input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--ink)}
strong{font-weight:600}

/* ---------- 3. UTILIDADES ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);
}
.eyebrow--light{color:var(--gold-soft)}
.section{padding-block:var(--s9)}
/* Ritmo vertical uniforme: secciones consecutivas no duplican el aire */
.section + .section{padding-top:0}
/* Quiebre tonal sutil: bandas full-bleed con su propio aire */
.section--tint{background:var(--cream-2);box-shadow:0 0 0 100vmax var(--cream-2);clip-path:inset(0 -100vmax)}
.section.section--tint{padding-block:var(--s9)}
.section + .section--tint,.section--tint + .section{padding-top:var(--s9)}
.section--tight{padding-block:var(--s8)}
.section__head{margin-bottom:var(--s6)}
.section__head h2{font-size:var(--fs-h2);margin-top:var(--s2)}
.section__head p{color:var(--muted);max-width:56ch;margin-top:var(--s2)}
.lead{font-size:var(--fs-lg);color:var(--muted)}
.center{text-align:center}
.center .section__head p,.section__head.center p{margin-inline:auto}
.muted{color:var(--muted)}
.serif-i{font-style:italic;font-weight:500}

.link-more{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);
  letter-spacing:.04em;color:var(--wine);border-bottom:1px solid var(--gold);padding-bottom:2px;
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);
}
.link-more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.link-more:hover{color:var(--wine-900)}
.link-more:hover svg{transform:translateX(3px)}
/* Variante clara (sobre fondos oscuros, p. ej. el destacado del mega). Se usa
   por clase y NO inline para no disparar la regla global de WP core
   `:where([style*="border-color"]){border-style:solid}` que pintaba 4 bordes. */
.link-more--light{color:var(--gold-soft);border-bottom-color:var(--gold-soft)}
.link-more--light:hover{color:#fff}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.03em;
  padding:.85rem 1.6rem;border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--wine);color:var(--cream)}
.btn--primary:hover{background:var(--wine-900)}
.btn--gold{background:var(--gold);color:#241A10}
.btn--gold:hover{background:#9c7b41}
.btn--light{background:var(--cream);color:var(--wine)}
.btn--light:hover{background:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--wine);color:var(--wine)}
.btn--ghost-light{background:transparent;color:var(--cream);border:1px solid var(--line-dark)}
.btn--ghost-light:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn--block{width:100%}
.btn--pill{border-radius:var(--r-pill);gap:.5rem}
.btn--sm{padding:.6rem 1.1rem;font-size:var(--fs-xs)}

/* Accesibilidad */
/* El aro dorado de foco solo aparece cuando se navega con teclado (clase .kbd
   en <html>). Al tocar/click, o cuando el foco vuelve por código al cerrar un
   drawer, NO se dibuja — así se elimina el "marco" que salía en móvil. */
:focus-visible{outline:none}
.kbd :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
/* El panel/drawer recibe el foco al abrir (a11y), pero no debe mostrar el aro dorado. */
.drawer:focus,.drawer:focus-visible,.filters:focus,.filters:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--wine);color:var(--cream);
  padding:.7rem 1.2rem;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

/* ---------- 4. TOPBAR ---------- */
.topbar{
  background:var(--wine-900);color:var(--cream);
  height:var(--topbar-h);display:flex;align-items:center;overflow:hidden;
}
.topbar .container{display:flex;align-items:center;justify-content:center;gap:var(--s6);width:100%}
.topbar__item{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);
  letter-spacing:.08em;white-space:nowrap}
.topbar__item svg{width:15px;height:15px;color:var(--gold-soft)}
.topbar__sep{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6}

/* ---------- 5. HEADER ---------- */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(252,248,241,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur) var(--ease);
}
.header.is-stuck{box-shadow:var(--shadow-sm)}
.header__top{display:flex;align-items:center;gap:var(--s5);min-height:68px;padding-block:var(--s3)}
.header__logo{flex:none;display:inline-flex;align-items:center}
.header__logo img{height:27px;width:auto;display:block} /* display:block elimina el hueco de baseline que descuadraba el centrado vertical */
.header__search{flex:1;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:.6rem;position:relative;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.62rem 1.1rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.header__search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,79,.16)}
.header__search svg{width:19px;height:19px;color:var(--muted);flex:none}
.header__search input{flex:1;min-width:0;border:none;background:none;font-size:var(--fs-sm);color:var(--ink)}
.header__search input:focus-visible{outline:none}
.header__search input::placeholder{color:var(--muted)}
.header__search input::-webkit-search-cancel-button{cursor:pointer}
.header__navwrap{border-top:1px solid var(--line)}
.header__nav{display:flex;align-items:center;justify-content:center;gap:clamp(1.1rem,1.8vw,2.1rem);height:56px}
.header__nav > li > a{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.03em;padding:.4rem 0;
  position:relative;color:var(--ink);
}
.header__nav > li > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--gold);
  transition:right var(--dur) var(--ease);
}
.header__nav > li > a:hover{color:var(--wine)}
.header__nav > li:hover > a::after,.header__nav > li > a:focus-visible::after{right:0}
.header__nav .chev{width:13px;height:13px;opacity:.6}
/* Pill destacado "Ofertas" */
.nav-ofertas{margin-left:.5rem}
.header__nav .nav-ofertas > a{display:inline-flex;align-items:center;gap:.5rem;background:var(--wine);
  color:var(--cream)!important;padding:.55rem 1.4rem;border-radius:var(--r-pill);font-weight:600;
  font-size:var(--fs-sm);line-height:1;box-shadow:0 4px 14px rgba(20,16,14,.28);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.header__nav .nav-ofertas > a::after{display:none!important}
.header__nav .nav-ofertas > a:hover{background:var(--wine-900);transform:translateY(-1px)}
.nav-ofertas svg{width:14px;height:14px;color:var(--gold-soft)}
.nav-ofertas__emoji{font-size:1em;line-height:1}

.header__actions{flex:none;display:flex;align-items:center;gap:var(--s3)}
/* Acciones con etiqueta (PRO) */
.header__action{display:inline-flex;align-items:center;gap:.7rem;padding:.4rem .55rem;border-radius:var(--r-sm);
  color:var(--ink);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.header__action:hover{background:rgba(20,16,14,.07);color:var(--wine)}
.header__action > svg{width:23px;height:23px;flex:none}
.header__action__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.header__action__txt small{font-size:10px;letter-spacing:.04em;color:var(--muted)}
.header__action__txt b{font-size:var(--fs-sm);font-weight:600}
/* Bloque de cuenta en dos líneas (saludo + comuna con pin) — escritorio y móvil. */
.header__acct-m{display:inline-flex;flex-direction:column;justify-content:center;text-align:left;line-height:1.15;min-width:0;max-width:150px}
.header__acct-hi{font-size:var(--fs-sm);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header__acct-loc{font-size:10px;font-weight:400;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.header__acct-loc.is-comuna{color:#6b5f54}   /* comuna guardada (taupe) */
.header__acct-pin{width:10px;height:10px;flex:none;vertical-align:-1px;margin-right:2px}
.header__action--acct .header__action__txt{display:none} /* la cuenta usa el bloque saludo+comuna, no la etiqueta genérica */
.header__cart-ic{position:relative;display:inline-flex;align-items:center;margin-right:.15rem}
.header__cart-ic > svg{width:23px;height:23px}
.header__cart-ic .cart-count{position:absolute;top:-7px;right:-8px;border:2px solid var(--cream-50)}
/* Tiritón del ícono al agregar al carrito (feedback de UX). */
@keyframes vinales-cart-bump{
  0%,100%{transform:translateY(0) rotate(0)}
  15%{transform:translateY(-3px) rotate(-11deg)}
  30%{transform:translateY(0) rotate(9deg)}
  45%{transform:rotate(-7deg)}
  60%{transform:rotate(5deg)}
  78%{transform:rotate(-2deg)}
}
.header__cart-ic.is-bump{animation:vinales-cart-bump .7s var(--ease)}
@media (prefers-reduced-motion:reduce){ .header__cart-ic.is-bump{animation:none} }
.icon-btn{
  width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);position:relative;
}
.icon-btn:hover{background:rgba(20,16,14,.08);color:var(--wine)}
.icon-btn svg{width:21px;height:21px}
.cart-count{
  position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;
  background:var(--wine);color:var(--cream);font-size:10px;font-weight:700;font-family:var(--sans);
  border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;line-height:1;
}
.burger{display:none}

/* Mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--cream-50);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:5;
}
.has-mega{position:static}
/* El mega se ancla a .header (sticky = bloque contenedor) para desplegar a todo el ancho */
.has-mega:hover .mega,.has-mega:focus-within .mega,.mega:hover,.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega__inner{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:var(--s6);padding:var(--s7) 0}
.mega__col h4{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:var(--s3)}
.mega__col li a{display:block;padding:.3rem 0;font-size:var(--fs-sm);color:var(--muted);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.mega__col li a:hover{color:var(--wine)}
.mega__feature{background:var(--wine-900);color:var(--cream);border-radius:var(--r);padding:var(--s5);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;
  background-size:cover;background-position:center}
.mega__feature .eyebrow{margin-bottom:.4rem}
.mega__feature h4{font-family:var(--serif);font-size:1.3rem;color:var(--cream);margin-bottom:.6rem}
/* ---- Mega menú curado (Viñas/Vinos/Licores/Regalos, sin panel destacado) ---- */
.mega__inner--4{grid-template-columns:repeat(4,1fr);gap:0}
.mega__inner--4f{grid-template-columns:repeat(4,1fr) 1.1fr;gap:0}       /* + banner */
.mega__inner--vinas{grid-template-columns:repeat(5,1fr);gap:0}
.mega__inner--vinasf{grid-template-columns:repeat(4,1fr) 1.1fr;gap:0}   /* viñas + banner */
.mega__inner--regf{grid-template-columns:minmax(0,1.6fr) 1.1fr;gap:0}   /* regalos + banner */
/* Divisores verticales finos entre columnas + espaciado interno parejo (más apretado) */
.mega__inner--4 .mega__col,.mega__inner--4f .mega__col,.mega__inner--vinas .mega__col,.mega__inner--vinasf .mega__col{padding:0 clamp(15px,1.5vw,26px)}
.mega__inner--4 .mega__col:first-child,.mega__inner--4f .mega__col:first-child,.mega__inner--vinas .mega__col:first-child,.mega__inner--vinasf .mega__col:first-child{padding-left:0}
.mega__inner--4 .mega__col+.mega__col,.mega__inner--4f .mega__col+.mega__col,.mega__inner--vinas .mega__col+.mega__col,.mega__inner--vinasf .mega__col+.mega__col{border-left:1px solid var(--line)}
.mega__inner--4f .mega__feature,.mega__inner--vinasf .mega__feature,.mega__inner--regf .mega__feature{margin-left:clamp(16px,1.6vw,28px)}
/* Mega COMPACTO (Regalos): caja fit-content alineada al BORDE DEL CONTENIDO
   (no full-width, no flotando bajo el ítem). El .mega ocupa el ancho pero es
   transparente; la caja visual vive en .mega__inner y arranca en el contenedor. */
/* Caja fit-content CENTRADA bajo el enlace (Regalos). La caja ES el propio .mega
   (mantiene fondo/sombra), pero: se reposiciona centrada + fit-content, y se le
   da BORDE COMPLETO (la barra base solo tenía borde arriba/abajo → ese era el bug).
   El centrado y la animación de apertura (slide-down) se combinan en el transform. */
.header__nav li.has-mega--compact{position:relative}
.mega--compact{left:50%;right:auto;top:calc(100% + 8px);width:max-content;max-width:92vw;
  transform:translateX(-50%) translateY(6px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md)}
.mega--compact::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px} /* puente invisible: no se corta el hover en el espacio */
.has-mega--compact:hover .mega--compact,.has-mega--compact:focus-within .mega--compact,.mega--compact:hover{transform:translateX(-50%)}
.mega--compact .container{width:auto;max-width:none;margin:0;padding:22px 30px}
.mega--compact .mega__inner{padding:0}

/* ---------- Página 404 ---------- */
.err404{text-align:center;padding-top:var(--s7);padding-bottom:var(--s5)}
.err404__title{font-family:var(--serif);font-size:clamp(2rem,1.4rem+2.4vw,3rem);margin:.4rem 0 .7rem;color:var(--ink)}
.err404__sub{color:var(--muted);max-width:56ch;margin:0 auto var(--s5);font-size:var(--fs-lg);line-height:1.6}
.err404__search{display:flex;align-items:center;gap:.5rem;max-width:560px;margin:0 auto var(--s5);background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:.35rem .35rem .35rem 1.1rem}
.err404__search input[type=search]{flex:1;min-width:0;border:0;background:0;font:inherit;color:var(--ink);outline:0}
.err404__search svg{width:20px;height:20px;color:var(--muted);flex:none}
.err404__search .btn{flex:none;border-radius:var(--r-pill);padding:.62rem 1.4rem;background:var(--event);border-color:var(--event);color:#fff}
.err404__search .btn:hover{background:#1c3c2d;border-color:#1c3c2d;color:#fff}
.err404__links{gap:.5rem}
.err404__links .tab{text-decoration:none}
/* Banner: se ajusta al alto de las columnas de su mega (nunca deja hueco).
   Licores (columnas cortas) → banner corto/horizontal; Vinos → más alto. */
.mega__inner--4f .mega__feature,.mega__inner--vinasf .mega__feature{align-self:stretch;height:auto;min-height:180px}
.mega__inner--reg{grid-template-columns:auto}
.mega__inner--reg h4{margin-bottom:var(--s3)}
.mega__inner--reg ul{display:flex;flex-wrap:wrap;gap:.4rem 26px}
/* Licores: 2 banners AL LADO (mismo porte, 15px) + columnas más angostas/juntas */
.mega__inner--liq{grid-template-columns:repeat(4,minmax(0,.82fr)) 1.7fr;gap:0}
.mega__inner--liq .mega__col{padding:0 clamp(12px,1.1vw,20px)}
.mega__inner--liq .mega__col:first-child{padding-left:0}
.mega__inner--liq .mega__col+.mega__col{border-left:1px solid var(--line)}
.mega__feat-stack{display:flex;flex-direction:row;gap:15px;align-self:stretch;margin-left:clamp(16px,1.6vw,28px)}
.mega__feat-stack .mega__feature{margin:0;min-height:0;height:auto;flex:1}
/* El mega no supera el 80% del alto: scroll interno elegante (barra fina dorada) */
.header__nav .mega{max-height:80vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent}
.header__nav .mega::-webkit-scrollbar{width:8px}
.header__nav .mega::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:8px;border:2px solid var(--cream-50)}
.header__nav .mega::-webkit-scrollbar-track{background:transparent}
.mega__col h4 .colh{color:var(--gold-ink);text-decoration:none}
.mega__col h4 .colh:hover{color:var(--wine)}
.mega__foot{padding:var(--s3) 0 var(--s5);border-top:1px solid var(--line);margin-top:var(--s2)}
.mega__foot .link-more{color:var(--gold-ink);font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.mega__foot .link-more:hover{color:var(--wine)}
/* «Mostrar más»: revela de 5 en 5; discreto, dentro de la lista */
.mega__col ul .showmore,.mnav__sub .showmore{margin-top:7px;background:0;border:0;color:var(--muted);font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.02em;cursor:pointer;padding:3px 0;opacity:.9;display:block}
.mega__col ul .showmore::before,.mnav__sub .showmore::before{content:'+ ';color:var(--gold-ink)}
.mega__col ul .showmore:hover,.mnav__sub .showmore:hover{color:var(--wine);opacity:1}
/* Encabezados de grupo en el menú móvil (Tintos, Blancos…) */
.mnav__grouph{display:block;font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);padding:.75rem 0 .15rem}
.mnav__grouph a{color:inherit;text-decoration:none}
/* Sub-grupos del menú móvil (Tintos, Blancos…): enlaces en columna vertical */
.mnav__sub .mnav__group{display:flex;flex-direction:column;border-bottom:0}

/* ---------- 6. SEARCH OVERLAY ---------- */
.overlay-backdrop{
  position:fixed;inset:0;background:rgba(20,10,12,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);z-index:var(--z-overlay);
}
.overlay-backdrop.is-open{opacity:1;visibility:visible}
/* Panel overlay de búsqueda del header. Se renombró de `.search` a
   `.search-overlay` porque WordPress añade la clase `search` al <body> en las
   páginas de resultados, y `.search{position:fixed;transform:translateY(-100%)}`
   ocultaba TODO el body (página en blanco). El JS usa el id #search, no la clase. */
.search-overlay{
  position:fixed;left:0;right:0;top:0;background:var(--cream-50);z-index:var(--z-overlay);
  transform:translateY(-100%);transition:transform .35s var(--ease);padding:var(--s7) 0;
  box-shadow:var(--shadow-md);
}
.search-overlay.is-open{transform:none}
.search__form{display:flex;align-items:center;gap:var(--s3);border-bottom:2px solid var(--wine);padding-bottom:var(--s3)}
.search__form svg{width:24px;height:24px;color:var(--wine);flex:none}
.search__form input{flex:1;border:none;background:none;font-family:var(--serif);font-size:clamp(1.3rem,3vw,2rem);
  color:var(--ink)}
.search__form input::placeholder{color:rgba(42,36,34,.35)}
.search__close{flex:none}
.search__suggest{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.search__suggest span{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.chip{display:inline-block;padding:.4rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--muted);transition:all var(--dur) var(--ease)}
.chip:hover{border-color:var(--wine);color:var(--wine);background:var(--white)}

/* ---------- 7. CART DRAWER ---------- */
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--cream-50);
  z-index:var(--z-drawer);transform:translateX(100%);
  /* visibility:hidden saca el contenido del orden de foco/lectores cuando está cerrado;
     el delay deja terminar la animación de salida antes de ocultarlo. */
  visibility:hidden;transition:transform .35s var(--ease),visibility 0s linear .35s;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
/* Menú móvil (izquierda) — clase, no estilo inline, para que is-open funcione */
.drawer--menu{left:0;right:auto;transform:translateX(-100%);width:min(370px,87vw)}
.drawer--menu.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s5);
  border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:1.25rem}
.drawer__head .count{color:var(--muted);font-family:var(--sans);font-size:var(--fs-sm)}
.drawer__body{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s3);align-items:center}
.cart-item__img{width:64px;height:80px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  object-fit:contain;padding:6px}
.cart-item__name{font-size:var(--fs-sm);font-weight:500;line-height:1.35}
.cart-item__meta{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.cart-item__price{font-weight:600;font-size:var(--fs-sm)}
.cart-item__remove{font-size:var(--fs-xs);color:var(--muted);text-decoration:underline;margin-top:4px}
.drawer__foot{border-top:1px solid var(--line);padding:var(--s5);background:var(--white)}
.drawer__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s2)}
.drawer__row--total{font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin-bottom:var(--s4)}
.drawer__note{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:var(--s3)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.qty button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--wine);font-size:1.1rem}
.qty button:hover{background:rgba(42,35,32,.055)}
.qty input{width:34px;text-align:center;border:none;background:none;font-size:var(--fs-sm);font-weight:600;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- 8. AGE MODAL ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,10,12,.75);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.modal-backdrop.is-open{opacity:1;visibility:visible}
.modal{background:var(--cream-50);border-radius:var(--r-lg);max-width:440px;width:100%;
  text-align:center;padding:var(--s8) var(--s6);box-shadow:var(--shadow-lg);
  border-top:4px solid var(--gold);transform:translateY(12px);transition:transform var(--dur) var(--ease)}
.modal-backdrop.is-open .modal{transform:none}
.modal__logo{height:24px;width:auto;margin:0 auto var(--s3)}
.modal h2{font-size:1.6rem;margin-bottom:var(--s2)}
.modal p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s5)}
.modal__actions{display:flex;gap:var(--s3);justify-content:center}
.modal__fine{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s4)}
.modal__x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.modal__x:hover{background:rgba(20,16,14,.08);color:var(--wine)}
.modal__x svg{width:20px;height:20px}
/* Modal Avísame (back-in-stock) */
.modal--notify{position:relative;max-width:420px}
.modal__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:transparent;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.modal__close:hover{background:rgba(20,16,14,.08);color:var(--wine)}
.modal__close svg{width:20px;height:20px}
.modal__ic{width:60px;height:60px;margin:0 auto var(--s4);border-radius:50%;background:rgba(198,160,90,.18);color:var(--wine);display:flex;align-items:center;justify-content:center}
.modal__ic svg{width:28px;height:28px}
.modal--notify h2{font-size:1.4rem}
.modal__sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:0}
.modal__sub b{color:var(--ink)}
.notify-form{display:flex;flex-direction:column;gap:.6rem;margin-top:var(--s4)}
.notify-form input[type=email]{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;background:#fff}
/* Al tocar/click: solo cambio de borde (sin halo). El halo (anillo de foco) solo
   con teclado, vía :focus-visible → no aparece el «marco» al tocar en móvil. */
.notify-form input[type=email]:focus{outline:none;border-color:var(--wine)}
.notify-form input[type=email]:focus-visible{box-shadow:0 0 0 3px rgba(110,31,43,.12)}
/* Modal de cuenta */
.modal--account{position:relative;max-width:420px;text-align:left;padding:var(--s5) var(--s6) var(--s5)}
.modal--account h2{text-align:center}
.modal--account > p{text-align:center}
.acc-tabs{display:flex;gap:.4rem;background:rgba(42,36,34,.06);border-radius:var(--r-pill);padding:4px;margin-bottom:var(--s4)}
.acc-tab{flex:1;padding:.6rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.acc-tab.is-active{background:var(--white);color:var(--wine);box-shadow:var(--shadow-sm)}
.acc-form{display:flex;flex-direction:column;gap:var(--s3)}
/* Alternar login / registro (dos formularios reales de Woo) */
.modal--account .acc-form--register{display:none}
.modal--account.is-register .acc-form--login{display:none}
.modal--account.is-register .acc-form--register{display:flex}
.modal--account .acc-notices{margin-bottom:var(--s3)}
.modal--account .acc-notices .woocommerce-error{list-style:none;margin:0;padding:.7rem .9rem;background:rgba(155,44,44,.1);border:1px solid rgba(155,44,44,.28);border-left-width:3px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:#8a2a2a}
.modal--account .acc-notices .woocommerce-error a{color:inherit}
.acc-field{display:flex;flex-direction:column;gap:.35rem}
.acc-field label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:var(--ink)}
.acc-field input{padding:.6rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);
  font-size:var(--fs-sm);color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.acc-field input:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,79,.16)}
.acc-forgot{align-self:flex-end;font-size:var(--fs-xs);color:var(--gold-ink);font-weight:600;text-decoration:underline}
.acc-reg{display:none}
.modal--account.is-register .acc-login{display:none}
.modal--account.is-register .acc-reg{display:flex}

/* Login/registro en la página de Mi cuenta (deslogueado): misma tarjeta con
   pestañas del popup, pero centrada en la página. */
.acct-auth{max-width:440px;margin:var(--s6) auto var(--s8);background:var(--cream-50);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s7) var(--s6) var(--s6)}
.acct-auth__head{text-align:center;margin-bottom:var(--s5)}
.acct-auth__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:rgba(122,29,42,.08);color:var(--wine);margin-bottom:var(--s3)}
.acct-auth__icon svg{width:24px;height:24px}
.acct-auth__head h1{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.2;margin:0}
.acct-auth__head p{color:var(--muted);font-size:var(--fs-sm);margin:.4rem 0 0}
/* Anular la tarjeta interna que el bloque viejo (.woocommerce-account form.login)
   le mete al formulario → evita caja-en-caja. Con .woocommerce-account gana en
   especificidad (0,3,1) a la regla vieja (0,2,1). */
.woocommerce-account .acct-auth form.login,
.woocommerce-account .acct-auth form.register{max-width:none;margin:0;background:transparent;border:0;border-radius:0;padding:0}
.acct-auth .acc-form--register{display:none}
.acct-auth.is-register .acc-form--login{display:none}
.acct-auth.is-register .acc-form--register{display:flex}
.acct-auth .acc-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.acct-auth .acc-remember{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
.acct-auth .acc-remember input{width:auto;accent-color:var(--wine)}
.acct-auth .acc-forgot{align-self:auto}
.acct-auth .acc-hint{font-size:var(--fs-sm);color:var(--muted);margin:0}
.acct-auth__fine{text-align:center;font-size:var(--fs-xs);color:var(--muted);margin:var(--s4) 0 0}

/* ---------- 9. TOAST ---------- */
.toast-stack{position:fixed;right:var(--s5);bottom:var(--s5);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--s2);max-width:340px}
.toast{display:flex;gap:.7rem;align-items:flex-start;background:var(--wine-900);color:var(--cream);
  padding:.9rem 1.1rem;border-radius:var(--r);box-shadow:var(--shadow-lg);border-left:3px solid var(--gold);
  transform:translateX(120%);transition:transform .4s var(--ease);font-size:var(--fs-sm)}
.toast.is-open{transform:none}
.toast svg{width:18px;height:18px;color:var(--gold-soft);flex:none;margin-top:2px}
/* Variantes de error / info (mismo estilo, acento distinto). */
.toast--err{border-left-color:#e0736f}
.toast--err svg{color:#f0a6a2}
.toast--info{border-left-color:var(--gold)}
.toast--info svg{color:var(--gold-soft)}

/* ---------- 10. HERO (slider único de banners) ---------- */
.hero{padding:var(--s6) 0 0}
.hero-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:2077/757;background:var(--wine-900);isolation:isolate}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease);
  display:flex;align-items:center}
.hero-slide.is-active{opacity:1;visibility:visible}
.hero-slide__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Slide de banner diseñado: imagen completa, sin texto encima */
.hero-slide--img{align-items:stretch}
.hero-slide--img::after{display:none}
.hero-slide--img .hero-slide__inner{display:none}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(20,16,14,.96) 0%,rgba(20,16,14,.82) 32%,rgba(20,16,14,.45) 62%,rgba(20,16,14,.08) 100%)}
.hero-slide__inner{position:relative;z-index:1;max-width:600px;padding:var(--s7) var(--s8);color:var(--cream)}
.hero-slide__inner .eyebrow{margin-bottom:var(--s3)}
.hero-slide__title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,1.3rem+2.6vw,3.4rem);
  color:var(--cream);line-height:1.06;margin-bottom:var(--s3)}
.hero-slide__title em{color:var(--gold-soft);font-style:italic}
.hero-slide__inner p{color:rgba(247,241,231,.86);font-size:var(--fs-lg);margin-bottom:var(--s5);max-width:44ch}
.hero-slide__cta{display:flex;gap:var(--s3);flex-wrap:wrap}

/* entrada del contenido (1 animación clave) */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-slide.is-active .hero-slide__inner{animation:riseIn .6s .06s both}

/* flechas (laterales) */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(247,241,231,.35);background:rgba(20,10,12,.32);backdrop-filter:blur(6px);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hero-arrow:hover{background:var(--gold);color:#241A10;border-color:var(--gold)}
.hero-arrow svg{width:22px;height:22px}
.hero-arrow--prev{left:var(--s5)}
.hero-arrow--next{right:var(--s5)}

/* dots */
.hero-dots{position:absolute;bottom:var(--s5);left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:5}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(247,241,231,.4);
  transition:all var(--dur) var(--ease);cursor:pointer}
.hero-dots button.is-active{background:var(--gold-soft);width:26px;border-radius:var(--r-pill)}

@media (max-width:680px){
  /* En móvil usa la proporción de tu banner vertical (--hero-ratio-m, calculado
     en front-page.php desde la imagen móvil). Si no hay imagen móvil, cae al ancho de escritorio. */
  .hero-slider{aspect-ratio:var(--hero-ratio-m,2077/757);min-height:0}
  .hero-slide__inner{padding:var(--s6) var(--s5)}
  .hero-slide::after{background:linear-gradient(90deg,rgba(20,16,14,.94),rgba(20,16,14,.78) 58%,rgba(20,16,14,.45))}
  .hero-arrow{display:none}
  .hero-dots{bottom:var(--s4)}
}

/* ---------- 11. CATEGORÍAS (carrusel free-mode arrastrable) ---------- */
.cats{display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden;padding-bottom:var(--s3);
  scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cats.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.cats.is-dragging a{pointer-events:none}
.cat{flex:0 0 clamp(208px,21vw,256px);scroll-snap-align:start;position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:270px;border-radius:var(--r);padding:var(--s5);overflow:hidden;color:var(--cream);
  background:var(--wine-800);isolation:isolate;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,14,.12) 0%,rgba(20,16,14,.82) 100%)}
.cat__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat:hover .cat__bg{transform:scale(1.06)}
.cat h3{color:var(--cream);font-size:1.3rem}
.cat span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem}
.cat span svg{transition:transform var(--dur) var(--ease)}
.cat:hover span svg{transform:translateX(3px)}

/* ---------- Fondos de marca cuando el bloque no trae imagen (contenido vía ACF) ---------- */
.cat--plain{background:linear-gradient(150deg,#2f5a44 0%,var(--wine-800) 55%,#3a2530 100%)}
.bnr--plain{background:linear-gradient(150deg,#234B38 0%,#2A2422 60%,#3a2530 100%)}
.joya{background:linear-gradient(150deg,var(--wine-800),#2A2422)}
.hero-slide--plain{background:linear-gradient(135deg,#234B38 0%,#2A2422 55%,#3a2530 100%)}
.feature-post__media,.post-card__media,.post__media{background:linear-gradient(150deg,#234B38,#2A2422)}
.cats-hint{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--s3);font-size:var(--fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cats-hint svg{width:16px;height:16px;color:var(--gold-ink)}
@media (max-width:680px){
  .cat{flex:0 0 76%;min-height:230px}
}

/* ---------- 11b. MARQUEE DE MARCAS ---------- */
.brands{border-block:1px solid var(--line);background:var(--cream-50);padding:var(--s6) 0;overflow:hidden}
.brands__label{text-align:center;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s5)}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:var(--s8);width:max-content;will-change:transform}
.marquee__item{font-family:var(--serif);font-size:clamp(1.2rem,1rem+1vw,1.7rem);letter-spacing:.03em;
  color:var(--ink);opacity:.5;white-space:nowrap;
  transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
.marquee__item:hover{opacity:1;color:var(--wine)}
.marquee__logo{height:58px;width:auto;object-fit:contain;flex:none;mix-blend-mode:multiply;
  filter:grayscale(1);opacity:.6;transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}
.marquee__logo:hover{opacity:1;filter:grayscale(0)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:var(--s5) var(--s7)}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- 12. PRODUCT CARD ---------- */
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin-bottom:var(--s6)}
.tab{padding:.6rem 1.3rem;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  color:var(--muted);border:1px solid var(--line-2);transition:all var(--dur) var(--ease)}
.tab:hover{color:var(--wine);border-color:var(--wine)}
.tab.is-active{background:var(--wine);color:var(--cream);border-color:var(--wine)}

.tabpanel{display:none}
.tabpanel.is-active{display:block;animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}

/* Carrusel horizontal de productos (Recomendados) */
.prodscroll{display:flex;gap:var(--s4);overflow-x:auto;overflow-y:hidden;padding-bottom:var(--s3);
  scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.prodscroll::-webkit-scrollbar{display:none}
.prodscroll.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.prodscroll.is-dragging a{pointer-events:none}
.prodscroll > .card{flex:0 0 clamp(220px,23vw,262px);scroll-snap-align:start}
@media (max-width:680px){ .prodscroll > .card{flex:0 0 64%} }

/* Carrusel con flechas elegantes */
.carousel{position:relative}
.carousel__arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;
  background:rgba(252,248,241,.96);border:1px solid var(--line-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.carousel__arrow:hover{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.carousel__arrow svg{width:18px;height:18px}
.carousel__arrow--prev{left:-12px}
.carousel__arrow--next{right:-12px}
.carousel__arrow[disabled]{opacity:.35;pointer-events:none}
@media (max-width:680px){ .carousel__arrow{display:none} }

/* Card horizontal (rieles por atributo: foto a la izquierda) */
.prodscroll--row > .card{flex-basis:clamp(290px,33vw,340px);flex-direction:row;align-items:stretch}
.prodscroll--row .card__media{width:112px;flex:none;aspect-ratio:auto;border-right:1px solid var(--line);padding:var(--s3)}
/* padding simétrico + sin margin-top:auto en el precio: en la card vertical ese auto
   empuja precio/botón al fondo (correcto ahí), pero en la horizontal rompe el centrado
   y deja un hueco. Aquí el contenido va como bloque centrado (arriba = abajo). */
.prodscroll--row .card__body{flex:1;justify-content:center;gap:.3rem;padding:var(--s4)}
.prodscroll--row .card__price{margin-top:0}
.prodscroll--row .card__name{min-height:0}
@media (max-width:680px){ .prodscroll--row > .card{flex-basis:80%} }

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;position:relative;transition:transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
/* En la ficha, las cards horizontales (rieles) NO se levantan al hover. */
.single-product .prodscroll--row .card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card__media{position:relative;aspect-ratio:1/1.05;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:var(--s4) var(--s4) var(--s2);overflow:hidden}
.card__media img{max-height:100%;width:auto;object-fit:contain;
  transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
/* Feedback del botón «Agregar» (AJAX) */
.woocommerce a.added_to_cart,.card a.added_to_cart{display:none!important} /* «Ver carrito» que agrega Woo: innecesario */
.add_to_cart_button.loading{color:transparent!important;pointer-events:none;position:relative}
.add_to_cart_button.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:vinales-spin .6s linear infinite;opacity:1;background:none}
@keyframes vinales-spin{to{transform:rotate(360deg)}}
.btn.is-added{background:#2e7d55!important;border-color:#2e7d55!important;color:#fff!important}
/* Sistema de badges apilables (stack vertical, nunca se solapan) */
.card__badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;max-width:calc(100% - 20px)}
.card__badges .card__badge{position:static}
.card__badge{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:.3rem;
  background:var(--sale);color:var(--cream);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  padding:.3rem .55rem;border-radius:var(--r-sm);line-height:1;white-space:nowrap}
.card__badge svg{width:13px;height:13px}
.card__badge--event{background:var(--event)}
.card__badge--stock{background:var(--stock-out)}
.card__badge--gold{background:var(--gold);color:#241A10}
.card__badge--wine{background:var(--wine)}
.card__badge--green{background:#2e7d55}
.card__fav{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(252,248,241,.85);
  display:flex;align-items:center;justify-content:center;color:var(--wine);opacity:0;transform:translateY(-4px);
  transition:all var(--dur) var(--ease)}
.card:hover .card__fav{opacity:1;transform:none}
.card__fav svg{width:18px;height:18px}
.card__body{padding:var(--s4);display:flex;flex-direction:column;gap:.4rem;flex:1}
.card__viña{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;
  cursor:pointer;align-self:flex-start;transition:color var(--dur) var(--ease)}
.card__viña:hover{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.card__name{font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card__name:hover{color:var(--wine)}
.card__rate{display:flex;align-items:center;gap:.3rem;font-size:var(--fs-xs);color:var(--muted);min-height:1.05rem}
.card__rate svg{width:13px;height:13px;color:var(--gold)}
.card__rate--none{font-style:italic;opacity:.75}
/* Estado agotado: atenúa la imagen, sin deformar el layout */
.card.is-out .card__media img{filter:grayscale(.55) brightness(.94);opacity:.5}
.card.is-out .card__name,.card.is-out .card__price .new{color:var(--muted)}
.card.is-out .card__price .old{opacity:.7}
.card__price{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;flex-wrap:wrap}
.card__price .new{font-size:1.15rem;font-weight:700;color:var(--ink)}
.card__price .old{font-size:var(--fs-sm);text-decoration:line-through;color:var(--muted)}
.card__add{margin-top:var(--s2)}
/* Oculta texto secundario en pantallas chicas (ej. «cuando llegue» del botón Avísame). */
@media (max-width:480px){ .hide-xs{display:none} }
.stock-chip{font-size:var(--fs-xs);font-weight:600;color:var(--error);display:inline-flex;align-items:center;gap:.35rem}
.stock-chip svg{width:13px;height:13px}


/* ---------- 13b. ZONA DE BANNERS (CSS grid) ---------- */
.bgrid{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(2,1fr);gap:var(--s4);min-height:480px}
.bnr{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:var(--cream);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s6);min-height:228px;
  background:var(--wine-900);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.bnr:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bnr__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bnr:hover .bnr__bg{transform:scale(1.05)}
.bnr::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,14,.15) 30%,rgba(20,16,14,.88) 100%)}
.bnr--lg{grid-row:span 2}
.bnr .eyebrow{margin-bottom:.45rem}
.bnr h3{font-family:var(--serif);color:var(--cream);font-size:clamp(1.4rem,1.1rem+1.1vw,2rem);line-height:1.08;
  margin-bottom:.5rem}
.bnr p{color:rgba(247,241,231,.84);font-size:var(--fs-sm);margin-bottom:var(--s4);max-width:36ch}
.bnr .btn{align-self:flex-start}
.bnr__go{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.04em;color:var(--gold-soft)}
.bnr__go svg{transition:transform var(--dur) var(--ease)}
.bnr:hover .bnr__go svg{transform:translateX(3px)}
.btn--wa{background:#25D366;color:#0a2a22}
.btn--wa:hover{background:#1fb457}

/* Banda Canal de WhatsApp (pre-footer) */
.wachannel{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  background:linear-gradient(120deg,#0c4434 0%,#0a2a22 58%,#14100e 100%);color:var(--cream);
  border-radius:var(--r-lg);padding:var(--s6) var(--s7);position:relative;overflow:hidden}
.wachannel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(40% 80% at 90% 20%,rgba(37,211,102,.18),transparent 60%);pointer-events:none}
.wachannel__left{display:flex;align-items:center;gap:var(--s4);position:relative}
.wachannel__icon{width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.wachannel__icon svg{width:30px;height:30px}
.wachannel h2{color:var(--cream);font-size:clamp(1.35rem,1.1rem+1vw,1.9rem);margin-bottom:.25rem;line-height:1.1}
.wachannel p{color:rgba(247,241,231,.8);font-size:var(--fs-sm);max-width:52ch}
.wachannel .btn{flex:none;position:relative}
@media (max-width:560px){
  .wachannel{padding:var(--s6) var(--s5)}
  .wachannel .btn{width:100%}
}

/* ---------- 14. ÍCONOS / JOYAS (cards-imagen) ---------- */
.joyas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.joya{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;aspect-ratio:4/5;
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s5);color:var(--cream);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.joya:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.joya__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.joya:hover .joya__bg{transform:scale(1.05)}
.joya::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,10,12,.05) 45%,rgba(20,10,12,.88) 100%)}
.joya__viña{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.joya h3{font-family:var(--serif);color:var(--cream);font-size:1.3rem;margin:.25rem 0 .35rem;line-height:1.1}
.joya .price{font-weight:700;color:var(--cream)}
@media (max-width:860px){
  .bgrid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .bnr--lg{grid-row:auto;min-height:300px}
}
@media (max-width:768px){
  .joyas{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .joyas{grid-template-columns:1fr}
  .joya{aspect-ratio:4/5} /* mantiene el porte vertical del escritorio */
}

/* ---------- 14b. NUESTRA TIENDA (split + mosaico) ---------- */
.store{display:grid;grid-template-columns:340px 1fr;gap:var(--s6);align-items:start}
.store__info h2{font-size:var(--fs-h2);margin:var(--s2) 0 var(--s3)}
.store__info > p{color:var(--muted);margin-bottom:var(--s4)}
.store__meta{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s4)}
.store__meta li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink)}
.store__meta svg{width:20px;height:20px;color:var(--gold-ink);flex:none;margin-top:2px}
.store__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s5)}
.store__chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:600;
  color:var(--muted);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.4rem .8rem}
.store__chip svg{width:15px;height:15px;color:var(--gold-ink)}
.store__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:122px;gap:10px;grid-auto-flow:dense}
.store__cell{position:relative;overflow:hidden;border-radius:10px;background:var(--wine-900);display:block}
.store__cell img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.store__cell:hover img{transform:scale(1.06)}
.store__cell--tall{grid-row:span 2}
.store__cell--wide{grid-column:span 2}
@media (max-width:980px){
  .store{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:560px){
  .store__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .store__cell--wide{grid-column:span 2}
}

/* ---------- PRODUCTO (PDP) ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s5)}
.breadcrumb a{transition:color var(--dur) var(--ease)}
.breadcrumb a:hover{color:var(--wine)}
.breadcrumb svg{width:13px;height:13px;opacity:.5}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}

.pdp{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s7);align-items:start}

/* Galería */
.gallery{display:grid;grid-template-columns:74px 1fr;gap:var(--s3);align-items:start}
.gallery__thumbs{display:flex;flex-direction:column;gap:var(--s2)}
.gallery__thumb{width:74px;height:90px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:#fff;cursor:pointer;padding:6px;transition:border-color var(--dur) var(--ease)}
.gallery__thumb img{width:100%;height:100%;object-fit:contain}
.gallery__thumb.is-active{border-color:var(--wine)}
.gallery__main{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:var(--s6);overflow:hidden}
.gallery__main img{max-width:100%;max-height:100%;object-fit:contain}
.gallery__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(252,248,241,.94);border:1px solid var(--line-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.gallery__arrow:hover{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.gallery__arrow svg{width:18px;height:18px}
.gallery__arrow--prev{left:10px}
.gallery__arrow--next{right:10px}

/* Info */
.pdp__info{padding-top:var(--s2)}
.pdp__viña{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.pdp__title{font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem);line-height:1.1;margin:.4rem 0 .7rem}
.pdp__price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 .3rem}
.pdp__price .new{font-size:2rem;font-weight:800;color:var(--ink);line-height:1}
.pdp__price .old{font-size:1.1rem;text-decoration:line-through;color:var(--muted)}
.pdp__price .off{background:var(--sale);color:var(--cream);font-size:var(--fs-xs);font-weight:700;
  padding:.3rem .55rem;border-radius:var(--r-sm)}
.pdp__save{color:var(--gold-ink);font-weight:600;font-size:var(--fs-sm)}
.pdp__cuotas{font-size:var(--fs-sm);color:var(--muted);margin-top:.35rem}
.pdp__stock{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:600;margin:var(--s4) 0 0}
.pdp__stock--ok{color:var(--success)}
.pdp__stock--low{color:var(--error)}
.pdp__stock svg{width:16px;height:16px}
.pdp__short-wrap{margin:var(--s4) 0;max-width:52ch}
.pdp__short{color:var(--muted);line-height:1.7}
/* Sin margen en el <p> de wpautop: si no, infla la altura medida y «Leer más»
   aparecería aunque el texto quepa en 4 líneas. */
.pdp__short p{margin:0}
.pdp__short p + p{margin-top:.7em}
/* Recorte a 4 líneas; si sobra texto, el JS muestra «Leer más» y abre el modal. */
.pdp__short--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
/* «Leer más»: misma tipografía y color que la descripción corta; solo subrayado. */
.pdp__short-more{display:inline-block;margin-top:.4rem;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pdp__short-more:hover{color:var(--ink)}
/* Modal genérico de la ficha (descripción corta completa). */
.pdp-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--gutter)}
.pdp-modal[hidden]{display:none}
.pdp-modal__overlay{position:absolute;inset:0;background:rgba(20,16,14,.5);backdrop-filter:blur(2px)}
.pdp-modal__box{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  max-width:560px;width:100%;max-height:80vh;overflow-y:auto;padding:var(--s6);box-shadow:var(--shadow-lg)}
.pdp-modal__box .prose{color:var(--muted);line-height:1.7}
.pdp-modal__box .prose p{margin:0}
.pdp-modal__box .prose p + p{margin-top:.7em}
.pdp-modal__close{position:absolute;top:.5rem;right:.5rem;width:38px;height:38px;border:0;background:none;cursor:pointer;
  color:var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.pdp-modal__close:hover{background:rgba(20,16,14,.08)}
.pdp-modal__close svg{width:20px;height:20px}
.pdp__buy{display:flex;gap:var(--s3);align-items:stretch;margin:var(--s5) 0;flex-wrap:wrap}
.qty--lg{height:50px}
/* Botones llenan el alto interno del pill (48px) y centran el glifo, así el hover
   cubre toda la celda. `.qty.qty--lg button` (0,2,1) le gana al `.qty button`
   duplicado del carrito que aparece más abajo con menor especificidad. */
.qty.qty--lg button{width:46px;height:48px;font-size:1.2rem;line-height:1}
.qty--lg [data-step="1"].is-max{opacity:.4;cursor:not-allowed}
.qty--lg input{width:46px;font-size:1rem}
/* Form de «Agregar» de la ficha: flex a lo ancho completo para que qty + botones
   queden en una fila y los botones crezcan (como el prototipo). Sin el padding
   que arrastraba la clase `.cart` de Woo. */
.pdp__cart{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch;width:100%;padding:0}
.pdp__buy .btn{flex:1;min-width:200px;height:50px}
.pdp__meta{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s4);
  display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--s4);font-size:var(--fs-sm)}
.pdp__meta dt{color:var(--muted)}
.pdp__meta dd{font-weight:500}
.pdp__trust{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.pdp__trust div{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--muted)}
.pdp__trust svg{width:20px;height:20px;color:var(--gold-ink);flex:none}

/* Tabs PDP (reusa .tabs/.tabpanel) */
.pdp-tabs{margin-top:var(--s9)}
.pdp-tabs .tabs{justify-content:flex-start;border-bottom:1px solid var(--line);padding-bottom:0;gap:var(--s5);margin-bottom:var(--s5)}
.pdp-tabs .tab{border:0;border-radius:0;padding:.6rem 0;border-bottom:2px solid transparent;background:none}
.pdp-tabs .tab.is-active{background:none;color:var(--wine);border-bottom-color:var(--wine)}
.prose{max-width:70ch;color:var(--ink);line-height:1.8}
.prose p{margin-bottom:var(--s4)}
.prose h3{font-size:1.2rem;margin:var(--s4) 0 var(--s2)}
.specs{width:100%;max-width:620px;border-collapse:collapse}
.specs tr{border-bottom:1px solid var(--line)}
.specs th{text-align:left;padding:.8rem 1rem .8rem 0;color:var(--muted);font-weight:500;width:180px;vertical-align:top}
.specs td{padding:.8rem 0;font-weight:500}
.reviews-empty{text-align:center;padding:var(--s7) 0;color:var(--muted)}
.reviews-empty svg{width:38px;height:38px;color:var(--gold);margin-bottom:var(--s3)}

@media (max-width:980px){
  .pdp{grid-template-columns:1fr;gap:var(--s6)}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .gallery__thumbs{flex-direction:row;order:2;overflow-x:auto}
  .pdp__buy .btn{min-width:0}
  /* Móvil: [qty][Agregar] en una fila y «Comprar ahora» completo abajo. */
  .pdp__buy form.cart,.pdp__buy .pdp__cart{flex-wrap:wrap}
  .pdp__buy .qty,.pdp__buy .qty--lg{order:1;flex:none}
  .pdp__buy .btn--primary,.pdp__buy .single_add_to_cart_button{order:2;flex:1}
  .pdp__buy .btn--green{order:3;flex:1 1 100%}
}

/* PDP — secciones editoriales (reemplazan los tabs) */
.pdp-block{margin-top:var(--s8);padding-top:var(--s8);border-top:1px solid var(--line)}
/* Aire antes del footer en la ficha (el wrapper .wc-main no tenía padding inferior
   y el último riel quedaba pegado al footer). El prototipo deja ~s9. */
.single-product .wc-main{padding-bottom:var(--s9)}
/* Banda tonal sutil (quiebre entre secciones del PDP) */
.pdp-block--tint{background:var(--cream-2);box-shadow:0 0 0 100vmax var(--cream-2);clip-path:inset(0 -100vmax);
  border-top:0;padding-bottom:var(--s8)}
.pdp-block__head .eyebrow{display:block;margin-bottom:var(--s2)}
.pdp-block__head h2{font-size:var(--fs-h2);margin-bottom:var(--s6)}
.pdp-about{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s8);align-items:start}
.pdp-about .eyebrow{display:block;margin-bottom:var(--s2)}
.pdp-about h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:var(--s3);line-height:1.2}
.pdp-about .prose{max-width:60ch}
.maridaje{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s4)}
.maridaje span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  background:var(--cream-50);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.45rem .85rem}
.maridaje svg{width:15px;height:15px;color:var(--gold-ink)}

.pdp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch;margin-top:var(--s6)}
.panel{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.panel > .eyebrow{display:block;margin-bottom:var(--s4)}
.spec-dl{display:grid;grid-template-columns:auto 1fr;gap:.85rem var(--s4);font-size:var(--fs-sm)}
.spec-dl dt{color:var(--muted)}
.spec-dl dd{font-weight:600;text-align:right}
.taste-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s5)}
.taste-chips span{font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink);background:rgba(176,141,79,.13);
  border-radius:var(--r-pill);padding:.42rem .8rem}
.profile{display:flex;flex-direction:column;gap:var(--s3)}
.profile__row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:var(--s3);font-size:var(--fs-sm)}
.profile__row span{color:var(--muted)}
.profile__bar{height:7px;border-radius:99px;background:rgba(42,36,34,.1);overflow:hidden}
.profile__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--wine))}

.reviews{display:grid;grid-template-columns:250px 1fr;gap:var(--s7);align-items:start}
.reviews__score{text-align:center;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.reviews__num{font-family:var(--serif);font-size:3.4rem;line-height:1;font-weight:700;color:var(--ink)}
.reviews__stars{color:var(--gold);display:flex;justify-content:center;gap:2px;margin:var(--s2) 0}
.reviews__stars svg{width:18px;height:18px}
.reviews__count{font-size:var(--fs-sm);color:var(--muted)}
.review{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.review:first-child{padding-top:0}
.review__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:.45rem}
.review__who{font-weight:600;font-size:var(--fs-sm)}
.review__rs{color:var(--gold);display:flex;gap:1px}
.review__rs svg{width:14px;height:14px}
.review p{color:var(--ink);font-size:var(--fs-sm);margin-bottom:.35rem}
.review__date{font-size:var(--fs-xs);color:var(--muted)}

@media (max-width:780px){
  .pdp-about{grid-template-columns:1fr;gap:var(--s6)}
  .pdp-grid2{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr;gap:var(--s5)}
}

/* PDP detalle: tabs (Descripción/Recomendaciones) + ficha técnica al lado */
.pdp-detail{display:grid;grid-template-columns:1fr 320px;gap:var(--s8);align-items:start}
.pdp-detail--noaside{grid-template-columns:1fr}
/* Defensa: si el producto no tiene miniaturas, la imagen grande ocupa todo el ancho */
.gallery__main:only-child{grid-column:1 / -1}
.pdp-detail__main .tabs{justify-content:flex-start;gap:var(--s5);border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);padding-bottom:0;flex-wrap:wrap}
.pdp-detail__main .tab{background:none;border:0;border-radius:0;padding:.3rem 0 .9rem;color:var(--muted);
  border-bottom:2px solid transparent;font-size:1rem}
.pdp-detail__main .tab:hover{color:var(--wine)}
.pdp-detail__main .tab.is-active{background:none;color:var(--wine);border-bottom-color:var(--wine)}
.pdp-detail__aside{border-left:1px solid var(--line);padding-left:var(--s8)}
.pdp-detail__aside > .eyebrow{display:block;margin-bottom:var(--s4)}
@media (max-width:780px){
  .pdp-detail{grid-template-columns:1fr;gap:var(--s6)}
  .pdp-detail__aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s5)}
}

/* Botón verde botella (Comprar ahora) */
.btn--green{background:var(--event);color:var(--cream)}
.btn--green:hover{background:#19402e}

/* WhatsApp sutil en PDP */
.pdp__wa{display:flex;align-items:center;gap:.75rem;margin-top:var(--s4);padding:var(--s3) var(--s4);
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-sm);line-height:1.4}
.pdp__wa-ic{width:36px;height:36px;border-radius:50%;background:#25D366;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center}
.pdp__wa-ic svg{width:20px;height:20px}
.pdp__wa b{font-weight:600}
.pdp__wa a{color:var(--gold-ink);font-weight:600;text-decoration:underline}

/* Form de reseña (compatible con Woo) */
.review-form{margin-top:var(--s5);padding:var(--s5);background:var(--cream-50);border:1px solid var(--line);
  border-radius:var(--r-lg);max-width:620px}
.review-form h3{font-size:1.15rem;margin-bottom:var(--s4)}
.rf-stars{display:inline-flex;gap:.25rem;margin-bottom:var(--s4)}
.rf-stars button{color:rgba(42,36,34,.22);transition:color .15s var(--ease)}
.rf-stars button svg{width:26px;height:26px;display:block}
.rf-stars button.on{color:var(--gold)}
.rf-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:var(--s3)}
.rf-field label{font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.rf-field input,.rf-field textarea{padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:var(--fs-sm);color:var(--ink);resize:vertical}
.rf-field input:focus-visible,.rf-field textarea:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,79,.16)}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:560px){.rf-row{grid-template-columns:1fr}}

/* ---------- 15. NEWSLETTER ---------- */
.news{background:linear-gradient(rgba(20,16,14,.5),rgba(20,16,14,.62)),url('../img/backnewsletter.webp');
  background-size:cover;background-position:center;color:var(--cream);
  border-radius:var(--r-lg);padding:var(--s8) var(--s7);text-align:center;position:relative;overflow:hidden}
.news > *{position:relative}
.news h2{color:var(--cream);font-size:var(--fs-h2);margin:var(--s2) 0}
.news p{color:rgba(247,241,231,.8);max-width:48ch;margin:0 auto var(--s5)}
.news__form{display:flex;gap:var(--s2);max-width:480px;margin:0 auto}
.news__form input{flex:1;padding:.9rem 1.2rem;border-radius:var(--r-sm);border:1px solid var(--line-dark);
  background:rgba(247,241,231,.1);color:var(--cream)}
.news__form input::placeholder{color:rgba(247,241,231,.55)}
.news__form input:focus-visible{background:rgba(247,241,231,.16)}

/* ---------- 16. TRUST STRIP ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  border-block:1px solid var(--line)}
.trust__item{display:flex;gap:var(--s3);align-items:center;padding-block:var(--s2)}
.trust__item svg{width:30px;height:30px;color:var(--wine);flex:none}
.trust__item b{display:block;font-family:var(--sans);font-weight:600;font-size:var(--fs-sm)}
.trust__item span{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 17. BLOG TEASER ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.post{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--cream-50);
  border:1px solid var(--line);transition:all var(--dur) var(--ease)}
.post:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.post__media{aspect-ratio:16/10;overflow:hidden;background:var(--wine-800)}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .post__media img{transform:scale(1.05)}
.post__body{padding:var(--s5);display:flex;flex-direction:column;gap:.5rem;flex:1}
.post__cat{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.post__title{font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.post__title:hover{color:var(--wine)}
.post__meta{margin-top:auto;font-size:var(--fs-xs);color:var(--muted);display:flex;gap:.6rem;align-items:center;
  padding-top:var(--s2)}

/* ---------- 18. FOOTER ---------- */
.footer{background:var(--wine-900);color:rgba(247,241,231,.75);padding-top:var(--s8)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s6);padding-bottom:var(--s7);
  border-bottom:1px solid var(--line-dark)}
.footer__logo{height:24px;width:auto;margin-bottom:var(--s4);filter:brightness(0) invert(1);opacity:.95}
.footer__brand p{font-size:var(--fs-sm);max-width:34ch;margin-bottom:var(--s4)}
.footer__social{display:flex;gap:var(--s2)}
.footer__social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;color:var(--cream);transition:all var(--dur) var(--ease)}
.footer__social a:hover{background:var(--gold);color:#241A10;border-color:var(--gold)}
.footer__social svg{width:18px;height:18px}
.footer__col h4{font-family:var(--sans);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:var(--s4)}
.footer__col li{margin-bottom:.6rem}
.footer__col a{font-size:var(--fs-sm);transition:color var(--dur) var(--ease)}
.footer__col a:hover{color:var(--cream)}
.footer__contact li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm);margin-bottom:var(--s3)}
.footer__contact svg{width:17px;height:17px;color:var(--gold-soft);flex:none;margin-top:3px}
/* Fila de confianza: SSL + medios de pago */
.footer__trust{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding-block:var(--s5);border-bottom:1px solid var(--line-dark)}
.footer__secure{display:flex;align-items:center;gap:.8rem}
.footer__secure svg{width:34px;height:34px;color:var(--gold-soft);flex:none}
.footer__secure b{display:block;font-family:var(--sans);font-weight:600;color:var(--cream);font-size:var(--fs-sm)}
.footer__secure span{font-size:var(--fs-xs);color:rgba(247,241,231,.6)}
.footer__pays{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.paychip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;
  height:34px;padding:0 9px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.paychip img{height:21px;width:auto;display:block}

.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s5);font-size:var(--fs-xs);flex-wrap:wrap}
.footer__pay{display:flex;gap:.5rem;align-items:center}
.footer__pay span{font-size:var(--fs-xs);letter-spacing:.05em}

/* WhatsApp float */
.wa{position:fixed;right:var(--s5);bottom:var(--s5);z-index:var(--z-overlay);width:54px;height:54px;
  border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);transition:transform var(--dur) var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .cats .cat:nth-child(4),.cats .cat:nth-child(5){grid-column:span 1}
  .grid-products{grid-template-columns:repeat(3,1fr)}
  .mega__inner{grid-template-columns:repeat(3,1fr)}
  .mega__feature{display:none}
}
@media (max-width:860px){
  .header__navwrap{display:none}
  .burger{display:inline-flex;order:0;margin-left:-8px} /* hamburguesa a la izquierda, más pegada */
  .header__top{flex-wrap:wrap;column-gap:.5rem;row-gap:0}
  .header__logo{order:1}
  .header__logo img{height:25px;transform:translateY(-2px)}  /* logo móvil 25px + nudge óptico -2px (centro visual del wordmark) */
  .header__actions{order:2;margin-left:auto;margin-right:-4px;gap:.15rem;min-width:0} /* leve tiro a la derecha; sin pegarse al borde */
  /* Buscador a todo el ancho de la pantalla, separado del header por una línea. */
  .header__search{order:3;flex-basis:100%;max-width:none;
    margin:9px calc(var(--gutter)*-1) calc(var(--s3)*-1);
    border:0;border-top:1px solid var(--line);border-bottom:1px solid transparent;border-radius:0;
    background:var(--cream-50);padding:9px var(--gutter)}
  /* Al enfocar se marca arriba y abajo (simétrico); el panel de sugerencias continúa la caja. */
  .header__search:focus-within{box-shadow:none;border-top-color:var(--gold);border-bottom-color:var(--gold)}
  .header__search input{font-size:15px}
  .header__search input::placeholder{font-size:14px;letter-spacing:.01em}
  /* El panel de resultados flota como tarjeta con 10px parejo arriba y a los
     lados; su override real va junto a la definición base de .search-pop (más
     abajo en el archivo) para que gane en la cascada. */
  .header__action__txt{display:none}
  /* Íconos del header móvil: carrito y menú redondos e iguales */
  .header__action{padding:0;width:42px;height:42px;border-radius:50%;justify-content:center}
  .header__action > svg,.header__cart-ic > svg{width:25px;height:25px}
  .header__cart-ic{margin-right:0}
  .icon-btn.burger svg{width:31px;height:31px}   /* a la par del logo (25px) en altura visual */
  /* Cuenta: icono + texto en UNA sola línea; se trunca antes de deformarse o partirse. */
  .header__action--acct{width:auto;min-width:0;flex:0 1 auto;padding:.3rem .5rem;border-radius:var(--r-pill);gap:.4rem}
  .header__action--acct > svg{width:22px;height:22px}
  /* Ajustes de tamaño del bloque de cuenta en móvil (el resto va en la base). */
  .header__acct-m{max-width:130px;line-height:1.12}
  .header__acct-hi{font-size:13px}
  .header__acct-loc{font-size:10.5px}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  :root{--gutter:16px;--header-h:62px}
  .topbar .container{gap:var(--s3);justify-content:space-between}
  .topbar__item:nth-child(3),.topbar__sep{display:none}
  .cats{grid-template-columns:repeat(2,1fr)}
  .grid-products{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .trust{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
  .posts{grid-template-columns:1fr}
  .section{padding-block:var(--s8)}
  /* Cards más compactas en móvil: menos aire entre foto y título */
  .card__media{padding:var(--s2) var(--s2) 0}
  .card__body{padding:var(--s2) var(--s3) var(--s4);gap:.28rem}
  .news__form{flex-direction:column}
  .news{padding:var(--s7) var(--s5)}
}
@media (max-width:400px){
  .cats{grid-template-columns:1fr}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero__bottle{animation:none}
}

/* ============================================================
   SHOP / CATEGORÍA
   ============================================================ */
.shop-hero{padding:var(--s7) 0 var(--s5)}
.shop-hero h1{font-size:clamp(1.8rem,1.3rem+1.8vw,2.8rem);margin:.3rem 0 .5rem}
.shop-hero p{color:var(--muted);max-width:70ch;line-height:1.7}

/* ── Bloque SEO editorial al FINAL de la categoría (descripción larga) ── */
/* Escritorio: título a la izquierda, texto a la derecha (aprovecha el ancho). */
.catseo{margin:var(--s6) 0 var(--s9);padding-top:var(--s7);border-top:1px solid var(--line);
  display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:901px){
  .catseo{grid-template-columns:minmax(190px,240px) minmax(0,1fr);gap:var(--s7);align-items:start}
}
.catseo__eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .6rem}
.catseo__h{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.7rem);color:var(--ink);margin:0;letter-spacing:-.01em}
.catseo__prose{max-width:72ch;color:var(--muted);font-size:1rem;line-height:1.72;position:relative}
.catseo__prose > p:first-child{color:var(--ink)}
.catseo__prose p{margin:0 0 1.05em}
.catseo__prose h2{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.3rem;line-height:1.2;margin:2em 0 .5em;letter-spacing:-.005em}
.catseo__prose h2::before{content:"";display:block;width:34px;height:2px;background:var(--gold);border-radius:2px;margin-bottom:.7em;opacity:.85}
.catseo__prose h3{font-family:var(--serif);font-weight:600;color:var(--wine);font-size:1.08rem;line-height:1.25;margin:1.5em 0 .5em}
.catseo__prose a{color:var(--wine);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:1px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.catseo__prose a:hover{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.catseo__prose strong,.catseo__prose b{color:var(--ink);font-weight:600}
.catseo__prose ul{list-style:none;margin:.2em 0 1.2em;padding:0}
.catseo__prose li{position:relative;padding-left:1.25em;margin:.5em 0}
.catseo__prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.85}
.catseo__prose.is-clamped{max-height:210px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.catseo__more{margin-top:1rem}
.catseo__more[hidden]{display:none}
.catseo .morebtn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.02em;color:var(--wine);padding:0}
.catseo .morebtn span{border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.catseo .morebtn:hover span{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.catseo .morebtn svg{width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.catseo .morebtn[aria-expanded="true"] svg{transform:rotate(180deg)}

.shop{display:grid;grid-template-columns:1fr 4fr;gap:var(--s6);align-items:start;padding-bottom:var(--s9)}
.shop__main{min-width:0}

/* Toolbar */
.shop__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.shop__count{font-size:var(--fs-sm);color:var(--muted)}
.shop__count b{color:var(--ink)}
.shop__tools{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.sort{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--muted)}
.sort select{font:inherit;font-size:var(--fs-sm);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.55rem 2rem .55rem .8rem;background:#fff;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5F54' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}
/* Foco discreto del select (solo borde): evita el outline dorado global al tocarlo. */
.sort select:focus,.sort select:focus-visible{outline:none;border-color:var(--wine)}
/* Móvil: Filtros + «Ordenar: X ▾» en una línea; el conteo debajo, a la izquierda.
   El select se vuelve texto en negrita (sin caja), conservando solo la flecha. */
@media (max-width:600px){
  .shop__toolbar{gap:var(--s2) var(--s3)}
  .filters-toggle{order:1}
  .shop__tools{order:2;margin-left:auto}      /* Ordenar a la derecha, junto a Filtros */
  .shop__count{order:3;flex-basis:100%}       /* conteo salta a la 2ª línea (izquierda) */
  .sort{gap:.3rem}
  /* Especificidad extra (.shop__toolbar …) para ganarle a «.shop__tools select»
     que se define más abajo y volvía a pintar la caja blanca. */
  .shop__toolbar .sort select{background-color:transparent;border-color:transparent;color:var(--ink);
    font-family:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1.2;
    padding:.15rem 1.3rem .15rem .2rem;background-position:right .3rem center}
  .shop__toolbar .sort select:focus,.shop__toolbar .sort select:focus-visible{border-color:transparent}
}
.filters-toggle{display:none;align-items:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem 1rem;color:var(--ink)}
.filters-toggle svg{width:17px;height:17px}

/* Sidebar de filtros */
.filters{align-self:start}
.filters__head{display:none}
.filters__group{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.filters__group:first-child{padding-top:0}
.filters__group h4{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s3)}
.facet{display:flex;flex-direction:column;gap:.55rem}
.facet label{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;
  transition:color var(--dur) var(--ease)}
.facet label:hover{color:var(--wine)}
.facet input{width:16px;height:16px;accent-color:var(--wine);flex:none;cursor:pointer}
.facet .count{margin-left:auto;font-size:var(--fs-xs);color:var(--muted)}
.facet label.facet__item--hidden{display:none}
.facet__more{margin-top:.6rem;font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink);
  display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start}
.facet__more svg{width:13px;height:13px}
.facet__search{width:100%;margin-bottom:.7rem;padding:.5rem .7rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);background:#fff}
/* Precio */
.price-inputs{display:flex;align-items:center;gap:.5rem}
.price-inputs input{width:100%;padding:.55rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-sm);background:#fff}
.price-inputs span{color:var(--muted)}
.price-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.price-quick button{font-size:var(--fs-xs);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:.35rem .7rem;color:var(--muted);transition:all var(--dur) var(--ease)}
.price-quick button:hover,.price-quick button.on{border-color:var(--wine);color:var(--wine);background:var(--cream-50)}
.filters__clear{margin-top:var(--s4);font-size:var(--fs-sm);font-weight:600;color:var(--wine);text-decoration:underline}
.filters__foot{display:none} /* solo visible cuando los filtros son drawer (móvil) */

/* Chips activos */
.active-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s4)}
.active-chips:empty{display:none}
.chip-active{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:600;
  background:var(--cream-50);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.35rem .35rem .35rem .75rem}
.chip-active button{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted)}
.chip-active button:hover{background:rgba(110,31,43,.12);color:var(--wine)}
.chip-active svg{width:12px;height:12px}

/* Grilla de productos */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.shop-grid .card[hidden]{display:none}
/* Estado «cargando» durante el fetch de filtros (percepción de velocidad) */
.shop-grid.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s var(--ease)}
.shop-banner{grid-column:1 / -1;position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:170px;
  display:flex;align-items:center;color:var(--cream);isolation:isolate;margin:var(--s2) 0}
.shop-banner__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.shop-banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(20,16,14,.9),rgba(20,16,14,.45) 60%,rgba(20,16,14,.15))}
.shop-banner__in{padding:var(--s5) var(--s6)}
.shop-banner h3{font-family:var(--serif);color:var(--cream);font-size:clamp(1.3rem,1rem+1vw,1.9rem);margin-bottom:.3rem}
.shop-banner p{color:rgba(247,241,231,.85);font-size:var(--fs-sm);margin-bottom:var(--s3);max-width:38ch}

/* Sin resultados */
.shop-empty{text-align:center;padding:var(--s9) 0;display:none}
.shop-empty.is-on{display:block}
.shop-empty svg{width:44px;height:44px;color:var(--gold);margin-bottom:var(--s3)}
.shop-empty h3{font-size:1.3rem;margin-bottom:.4rem}
.shop-empty p{color:var(--muted)}

/* Paginación */
.pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:var(--s7)}
.pagination a,.pagination span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  transition:all var(--dur) var(--ease)}
.pagination a:hover{border-color:var(--wine);color:var(--wine)}
.pagination .is-current{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.pagination svg{width:16px;height:16px}

@media (max-width:1024px){
  .shop{grid-template-columns:1fr}
  .filters-toggle{display:inline-flex}
  /* Filtros como drawer */
  .filters{position:fixed;top:0;left:0;height:100%;width:min(360px,88vw);z-index:var(--z-drawer);
    background:var(--cream-50);transform:translateX(-100%);transition:transform .35s var(--ease);
    overflow-y:auto;padding:var(--s5);box-shadow:var(--shadow-lg);grid-row:auto}
  .filters.is-open{transform:none}
  .filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);
    padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
  .filters__head h3{font-size:1.2rem}
  /* Barra sticky «Ver N resultados» al fondo del canvas: se ve el conteo en vivo
     y al tocarla se cierra el drawer para ver la grilla filtrada. */
  .filters{padding-bottom:0}
  .filters__foot{display:block;position:sticky;bottom:0;margin:var(--s4) calc(-1 * var(--s5)) 0;
    padding:var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom,0px));
    background:var(--cream-50);border-top:1px solid var(--line);box-shadow:0 -8px 18px -12px rgba(42,35,32,.35)}
}
@media (max-width:880px){ .shop-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .shop-grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)} }

/* ============================================================
   CARRITO + CHECKOUT
   ============================================================ */
.page-head{padding:var(--s6) 0 var(--s2)}
/* Checkout sin título visible: los pasos no necesitan el margin-top extra. */
.page-head--noheading .steps{margin-top:0}
.page-head h1{font-size:clamp(1.7rem,1.3rem+1.6vw,2.5rem)}
.page-head .muted{color:var(--muted);margin-top:.3rem}

/* Layout de la PÁGINA de carrito. Se scopea a .woocommerce-cart porque Woo pone
   la clase `cart` también al form de «Agregar» de la ficha, y el padding s9 se
   filtraba ahí creando ~96px de alto fantasma bajo los botones. */
.woocommerce-cart .cart{display:grid;grid-template-columns:1fr 380px;gap:var(--s6);align-items:start;padding:var(--s5) 0 var(--s9)}
.cart__main{min-width:0}
.woocommerce-cart .cart.is-loading{opacity:.6;pointer-events:none;position:relative;transition:opacity .15s var(--ease)}
.woocommerce-cart .cart.is-loading::after{content:"";position:absolute;top:80px;left:50%;width:32px;height:32px;margin-left:-16px;
  border:3px solid rgba(42,35,32,.15);border-top-color:var(--wine);border-radius:50%;animation:vinales-spin .7s linear infinite;z-index:2}

/* Barra de envío gratis (incentivo) */
.ship-bar{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin-bottom:var(--s4)}
.ship-bar__txt{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);margin-bottom:.7rem}
.ship-bar__txt svg{width:18px;height:18px;color:var(--gold-ink);flex:none}
.ship-bar__txt b{color:var(--wine)}
.ship-bar__track{height:7px;border-radius:var(--r-pill);background:var(--cream-2);overflow:hidden}
.ship-bar__fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));border-radius:var(--r-pill);
  width:0;transition:width .5s var(--ease)}
.ship-bar.is-free .ship-bar__fill{background:linear-gradient(90deg,var(--event),#2f6048)}
.ship-bar.is-free .ship-bar__txt b{color:var(--event)}

/* Lista de items */
.cart-list{display:flex;flex-direction:column}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.cart-item:first-child{padding-top:0}
.cart-item__media{width:88px;height:88px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:.5rem}
.cart-item__media img{max-width:100%;max-height:100%;object-fit:contain}
.cart-item__info{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.cart-item__viña{font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.cart-item__name{font-weight:600;font-size:var(--fs-sm);line-height:1.35;color:var(--ink)}
.cart-item__name:hover{color:var(--wine)}
.cart-item__unit{font-size:var(--fs-xs);color:var(--muted)}
.cart-item__ctrl{display:flex;align-items:center;gap:1rem;margin-top:auto}
.cart-item__rm{font-size:var(--fs-xs);color:var(--muted);display:inline-flex;align-items:center;gap:.3rem}
.cart-item__rm:hover{color:var(--sale)}
.cart-item__rm svg{width:14px;height:14px}
.cart-item__end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right}
.cart-item__total{font-family:var(--sans);font-weight:800;font-size:1.1rem}
.cart-item__old{font-size:var(--fs-xs);color:var(--muted);text-decoration:line-through}

/* Stepper compacto */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden}
.qty button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-size:1.1rem;transition:background var(--dur) var(--ease)}
.qty button:hover{background:var(--cream-50)}
.qty input{width:34px;text-align:center;border:0;font:inherit;font-weight:600;font-size:var(--fs-sm);background:transparent;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* «+» atenuado al llegar al tope de stock (carrito) — paridad con el sidecart. */
.qty.is-max [data-step="1"]{opacity:.4;cursor:not-allowed}

/* Cross-sell */
.cart-cross{margin-top:var(--s7)}
.cart-cross h3{font-size:1.25rem;font-family:var(--serif);margin-bottom:var(--s4)}
/* «Completa tu pedido»: reutiliza la card de tienda (.card) en 3 columnas. */
.cart-cross__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:640px){.cart-cross__grid{grid-template-columns:1fr 1fr}}

/* Resumen (sticky) — compartido cart + checkout */
.summary{position:sticky;top:96px;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.summary h2,.summary h3{font-size:1.15rem;margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.summary__row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);margin-bottom:.7rem}
.summary__row .muted{color:var(--muted)}
.summary__row--free span:last-child{color:var(--event);font-weight:600}
.summary__row--disc span:last-child{color:var(--sale);font-weight:600}
.summary__total{display:flex;justify-content:space-between;align-items:baseline;margin:var(--s3) 0 var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.summary__total b{font-family:var(--sans);font-weight:800;font-size:1.3rem}
.summary__total small{font-size:var(--fs-xs);color:var(--muted)}
.summary .btn--block{margin-top:var(--s3)}
.summary__cuotas{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:.6rem}
.coupon{display:flex;gap:.5rem;margin:var(--s3) 0}
.coupon input{flex:1;padding:.6rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);background:#fff}
.coupon button{padding:.6rem 1rem;border:1px solid var(--wine);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--wine)}
.coupon button:hover{background:var(--wine);color:var(--cream)}
.summary__trust{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.summary__trust div{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--muted)}
.summary__trust svg{width:15px;height:15px;color:var(--event);flex:none}
.summary__pays{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:var(--s3)}
.summary__pays img{height:22px}

/* Items compactos dentro del resumen (checkout) */
.mini-items{display:flex;flex-direction:column;gap:.85rem;margin-bottom:var(--s4);max-height:212px;overflow-y:auto;
  padding:9px 6px 2px 2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.mini-items::-webkit-scrollbar{width:6px}
.mini-items::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.mini-item{display:flex;gap:.7rem;align-items:center}
.mini-item__media{position:relative;width:48px;height:48px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;padding:.25rem}
.mini-item__media img{max-width:100%;max-height:100%;object-fit:contain}
.mini-item__q{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;border-radius:50%;background:var(--wine);color:var(--cream);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.mini-item__n{flex:1;min-width:0;font-size:var(--fs-xs);line-height:1.3;font-weight:500}
.mini-item__p{font-size:var(--fs-sm);font-weight:700;white-space:nowrap}

/* Item del mini-carrito (drawer) — compacto */
#cartBody{gap:0}
.drawer__body{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.drawer__body::-webkit-scrollbar{width:6px}
.drawer__body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.drawer__body::-webkit-scrollbar-track{background:transparent}
.dcart-item{display:flex;gap:.85rem;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.dcart-item:first-child{padding-top:0}
.dcart-item:last-child{border-bottom:0}
.dcart-item__media{width:66px;height:66px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;display:flex;align-items:center;justify-content:center;padding:.4rem;overflow:hidden}
.dcart-item__media a{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;min-width:0}
.dcart-item__media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.dcart-item__main{flex:1;min-width:0;position:relative;padding-right:2rem}
.dcart-item__rm{position:absolute;top:-2px;right:0;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all var(--dur) var(--ease)}
.dcart-item__rm:hover{background:rgba(110,31,43,.1);color:var(--sale)}
.dcart-item__rm svg{width:16px;height:16px}
/* Estado «eliminando»: atenúa el ítem y muestra un spinner mientras Woo procesa el remove. */
.dcart-item.is-removing{opacity:.5;pointer-events:none;position:relative}
.dcart-item.is-removing::after{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border:3px solid rgba(42,35,32,.15);border-top-color:var(--wine);border-radius:50%;animation:vinales-spin .7s linear infinite}
.dcart-item__name{font-size:var(--fs-sm);font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcart-item__viña{display:block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:.1rem}
.dcart-item__unit{font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}
.dcart-item__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.55rem}
.dcart-item__total{font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap}
/* Ítem con problema de stock (agotado / sobre stock) */
.dcart-item--err{background:rgba(139,26,26,.04);border-radius:var(--r-sm)}
.dcart-item__warn{font-size:var(--fs-xs);color:var(--sale);font-weight:600;margin:.35rem 0 0;display:flex;gap:.3rem;align-items:center}
/* Carrito (página): bloqueo por stock — mismo criterio que el mini-cart. */
.cart-item--err{background:rgba(139,26,26,.04);border-radius:var(--r-sm)}
.cart-item__warn{font-size:var(--fs-xs);color:var(--sale);font-weight:600;margin:.35rem 0 0}
.cart-item__hint{font-size:var(--fs-xs);color:var(--muted);margin:.3rem 0 0}
.cart-alert{display:flex;align-items:center;gap:.5rem;background:rgba(139,26,26,.06);color:var(--sale);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s3)}
.cart-alert svg{width:20px;height:20px;flex:none}
.btn.is-disabled{opacity:.55;pointer-events:none}
/* «+» atenuado en el tope de stock + input de cantidad editable */
.dcart-item .qty.is-max button[data-q="inc"]{opacity:.4;cursor:not-allowed}
/* Ancho fijo (si no, un <input type=text> toma ~140px y en «mi cuenta» el CSS de
   WooCommerce lo estira). !important para ganarle a woocommerce.css en esa página. */
.dcart-item .qty input{width:2.4rem!important;min-width:0;text-align:center;cursor:text;font-variant-numeric:tabular-nums}
.dcart-item .qty input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--wine);border-radius:4px}
/* Hint fijo (siempre visible, sirve en móvil) con el stock máximo */
.dcart-item__hint{font-size:var(--fs-xs);color:var(--muted);margin:.35rem 0 0}
/* Cantidad fija (ítems de un pack o de venta individual): no editable */
.qty--locked{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;height:2.4rem;padding:0 .6rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-soft,#f6f4ef);color:var(--muted);font-size:var(--fs-sm);font-weight:600}

/* ── Hijos de un pack: indentados y más chicos, «colgando» del producto padre ── */
/* Drawer (sidecart) */
.dcart-item--child{padding-left:1.5rem;position:relative}
.dcart-item--child::before{content:"";position:absolute;left:.5rem;top:1rem;bottom:1rem;width:2px;background:var(--line);border-radius:2px}
.dcart-item--child .dcart-item__media,.dcart-item--child .dcart-item__media a,.dcart-item--child .dcart-item__media img{width:44px}
.dcart-item--child .dcart-item__name{font-size:var(--fs-xs);font-weight:500}
/* El precio del hijo no se muestra: su valor está en el precio del pack (padre). */
.dcart-item--child .dcart-item__unit,.dcart-item--child .dcart-item__total{display:none}
/* Página del carrito */
.cart-item--child{grid-template-columns:44px 1fr auto;gap:var(--s3);padding:var(--s3) 0 var(--s3) 1.5rem;position:relative}
.cart-item--child::before{content:"";position:absolute;left:.45rem;top:.9rem;bottom:.9rem;width:2px;background:var(--line);border-radius:2px}
.cart-item--child .cart-item__info{gap:.15rem}
.cart-item--child .cart-item__media{width:44px;height:44px;flex:none}
.cart-item--child .cart-item__media img{width:100%;height:100%;max-width:100%;object-fit:contain}
.cart-item--child .cart-item__viña{font-size:9px;letter-spacing:.04em}
.cart-item--child .cart-item__name{font-size:var(--fs-xs);font-weight:500;line-height:1.3}
.cart-item--child .cart-item__ctrl{margin-top:.1rem}
/* El valor del hijo está en el precio del pack (padre): no repetimos precio. */
.cart-item--child .cart-item__unit,.cart-item--child .cart-item__end{display:none}
/* «N unidad(es)» discreto en los hijos. */
.cart-item__units{font-size:var(--fs-xs);color:var(--muted);font-weight:500}

/* Aviso global de carrito con agotados */
.dcart-alert{display:flex;gap:.5rem;align-items:flex-start;margin-top:var(--s4);padding:.7rem .85rem;
  background:rgba(139,26,26,.07);border:1px solid rgba(139,26,26,.2);border-radius:var(--r-sm);
  font-size:var(--fs-xs);color:var(--sale);font-weight:600;line-height:1.4}
.dcart-alert svg{width:16px;height:16px;flex:none;margin-top:.05rem}
/* Loading del drawer mientras se actualiza la cantidad */
#cartBody.is-loading{position:relative;pointer-events:none;opacity:.55;transition:opacity .15s var(--ease)}
#cartBody.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;
  border:3px solid rgba(42,35,32,.15);border-top-color:var(--wine);border-radius:50%;animation:vinales-spin .7s linear infinite}
@keyframes vinales-spin{to{transform:rotate(360deg)}}
/* Botón de checkout bloqueado por agotados */
.drawer__foot .btn--primary.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:auto}

/* ---------- MENÚ MÓVIL PRO ---------- */
.drawer--menu .drawer__body{padding:0;gap:0;display:block}
.mnav__quick{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:var(--s4) var(--s5)}
.mnav__quickbtn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  transition:all var(--dur) var(--ease)}
.mnav__quickbtn:hover{border-color:var(--wine);color:var(--wine);background:#fff}
.mnav__quickbtn svg{width:18px;height:18px}
.mnav__list{padding:0 var(--s5);border-top:1px solid var(--line)}
.mnav__group{border-bottom:1px solid var(--line)}
.mnav__toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 0;
  font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink)}
.mnav__toggle .chev{width:18px;height:18px;color:var(--muted);transition:transform .28s var(--ease)}
.mnav__toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mnav__toggle[aria-expanded="true"]{color:var(--wine);border-bottom-color:transparent} /* abierto: sin línea entre el título y sus ítems */
.mnav__toggle{border-bottom:1px solid var(--line)} /* misma línea que los enlaces directos */
/* Buscador / filtro del menú móvil (efecto máquina de escribir + filtrado en vivo) */
.mnav__search{display:flex;align-items:center;gap:.55rem;margin:.2rem var(--s5) .7rem;padding:.7rem .95rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);transition:border-color .2s var(--ease)} /* inset --s5 = alineado con los enlaces del menú */
.mnav__search:focus-within{border-color:var(--gold)}
.mnav__search svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto}
.mnav__search input{flex:1;min-width:0;border:0;background:transparent;font-size:1rem;color:var(--ink);outline:none;font-family:inherit;-webkit-appearance:none;appearance:none}
.mnav__search input::placeholder{color:var(--muted)}
.mnav__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sm-hidden{display:none} /* «Mostrar más»: oculta por clase para convivir con el filtro */
.mnav__list.no-results::after{content:"Sin resultados en el menú";display:block;padding:1.3rem 0;color:var(--muted);font-size:.92rem;text-align:center}
.mnav__sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.mnav__sub-in{display:flex;flex-direction:column;padding-bottom:.6rem}
.mnav__sub a{padding:.55rem 0 .55rem 1rem;color:var(--muted);font-size:var(--fs-sm);font-weight:500;
  border-left:2px solid var(--line);transition:all var(--dur) var(--ease)}
.mnav__sub a:hover{color:var(--wine);border-left-color:var(--gold)}
.mnav__link{display:flex;align-items:center;gap:.5rem;padding:1rem 0;font-family:var(--serif);font-size:1.15rem;
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav__link:hover{color:var(--wine)}
.mnav__link svg{width:17px;height:17px}
.mnav__link--sale{color:var(--sale)}
.mnav__link--sale svg{color:var(--sale)}
.mnav__foot{padding:var(--s5)}
.mnav__foot .btn{margin-bottom:var(--s4)}
.mnav__social{display:flex;gap:.6rem;justify-content:center;margin-bottom:var(--s3)}
.mnav__social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:flex;
  align-items:center;justify-content:center;color:var(--muted);transition:all var(--dur) var(--ease)}
.mnav__social a:hover{border-color:var(--wine);color:var(--wine)}
.mnav__social svg{width:18px;height:18px}
.mnav__contact{text-align:center;font-size:var(--fs-xs);color:var(--muted);line-height:1.6}

/* ---------- BUSCADOR PRO (autocompletado) ---------- */
.search-pop{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 18px 50px -12px rgba(20,16,14,.28);z-index:60;overflow:hidden;
  max-height:min(72vh,560px);overflow-y:auto;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.search-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.search-pop::-webkit-scrollbar{width:6px}
.search-pop::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.search-sec__t{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;
  padding:var(--s4) var(--s4) .35rem}
.search-row{display:flex;align-items:center;gap:.75rem;padding:.5rem var(--s4);text-decoration:none;color:var(--ink)}
.search-row:hover,.search-row.is-active{background:var(--cream-50)}
.search-row__img{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;padding:3px}
.search-row__img img{max-width:100%;max-height:100%;object-fit:contain}
.search-row__b{flex:1;min-width:0}
.search-row__n{display:block;font-size:var(--fs-sm);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-pop mark{background:transparent;color:var(--wine);font-weight:700;padding:0}
.search-row__v{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:1px}
.search-row__p{font-weight:700;font-size:var(--fs-sm);white-space:nowrap}
.search-row__p .old{display:block;font-size:10px;color:var(--muted);text-decoration:line-through;font-weight:400;text-align:right}
.search-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.2rem var(--s4) var(--s4)}
.search-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-xs);font-weight:600;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.42rem .8rem;color:var(--muted);text-decoration:none;
  transition:all var(--dur) var(--ease)}
.search-chip:hover,.search-chip.is-active{border-color:var(--wine);color:var(--wine);background:var(--cream-50)}
.search-chip svg{width:13px;height:13px}
.search-recent{display:flex;align-items:center;justify-content:space-between;padding:.5rem var(--s4);color:var(--ink);
  font-size:var(--fs-sm);text-decoration:none;cursor:pointer}
.search-recent:hover,.search-recent.is-active{background:var(--cream-50)}
.search-recent .ic{display:flex;align-items:center;gap:.6rem;color:var(--muted)}
.search-recent .ic svg{width:16px;height:16px}
.search-foot{border-top:1px solid var(--line);background:var(--cream-50);position:sticky;bottom:0}
.search-foot a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem var(--s4);
  font-weight:600;font-size:var(--fs-sm);color:var(--wine);text-decoration:none}
.search-foot a:hover,.search-foot a.is-active{background:var(--cream-2)}
.search-foot svg{width:17px;height:17px}
.search-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:var(--s6) var(--s4);color:var(--muted);font-size:var(--fs-sm)}
.search-loading__spin{width:20px;height:20px;flex:none;border:2px solid rgba(42,35,32,.15);border-top-color:var(--wine);border-radius:50%;animation:vinales-spin .7s linear infinite}
.search-empty{padding:var(--s5) var(--s4);text-align:center}
.search-empty svg{width:38px;height:38px;color:var(--gold);margin-bottom:.6rem}
.search-empty p{color:var(--muted);font-size:var(--fs-sm)}
.search-empty b{color:var(--ink)}
@media (max-width:1024px){ .search-pop{max-height:min(64vh,460px)} }
/* En móvil el buscador es de borde a borde; la tarjeta de resultados flota con
   10px parejo arriba y a los lados (esta regla va después de la base para ganar). */
@media (max-width:860px){ .search-pop{left:10px;right:10px;top:calc(100% + 10px)} }

/* Anti-zoom iOS: en móvil los inputs deben tener >=16px para que el navegador
   NO haga zoom al enfocarlos (no afecta el tamaño visual en desktop). */
@media (max-width:820px){
  input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
  input[type="number"],input[type="password"],input[type="date"],select,textarea{font-size:16px!important}
}

/* ============================================================
   MI CUENTA (mapea a endpoints de WooCommerce)
   ============================================================ */
.account{display:grid;grid-template-columns:262px 1fr;gap:var(--s6);align-items:start;padding:var(--s5) 0 var(--s9)}
.acct-nav{position:sticky;top:96px;width:100%;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);display:flex;flex-direction:column;gap:.2rem}
.acct-nav__user{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem var(--s3);margin-bottom:.3rem;border-bottom:1px solid var(--line)}
.acct-nav__avform{display:contents}
.acct-nav__av{width:46px;height:46px;border-radius:50%;background:var(--wine);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;flex:none;position:relative;cursor:pointer;border:0;background-size:cover;background-position:center;transition:transform var(--dur) var(--ease)}
.acct-nav__av:hover{transform:scale(1.04)}
.acct-nav__av.has-photo .avtxt{opacity:0}
.acct-nav__cam{position:absolute;bottom:-3px;right:-3px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#241A10;display:flex;align-items:center;justify-content:center;border:2px solid var(--cream-50)}
.acct-nav__cam svg{width:11px;height:11px}
.acct-nav__user b{font-size:var(--fs-sm);display:block;line-height:1.2}
.acct-nav__user span{font-size:var(--fs-xs);color:var(--muted)}
.acct-nav__item{display:flex;align-items:center;gap:.7rem;padding:.72rem .9rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);cursor:pointer;width:100%;text-align:left;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.acct-nav__item svg{width:18px;height:18px;color:var(--muted);flex:none}
.acct-nav__item:hover{background:#fff}
.acct-nav__item.is-active{background:var(--wine);color:var(--cream)}
.acct-nav__item.is-active svg{color:var(--gold-soft)}
.acct-nav__item--logout{color:var(--sale);margin-top:.4rem;border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);padding-top:var(--s3)}
.acct-nav__item--logout:hover{background:rgba(110,31,43,.07)}
.acct-nav__item--logout svg{color:var(--sale)}

.acct-main{min-width:0}
.acct-panel{display:none}
.acct-panel.is-active{display:block;animation:acctIn .3s var(--ease)}
@keyframes acctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.acct-panel__h{font-size:1.4rem;margin-bottom:var(--s2)}
.acct-panel__sub{color:var(--muted);margin-bottom:var(--s5)}

.acct-hello{background:linear-gradient(rgba(20,16,14,.5),rgba(20,16,14,.62)),url('../img/backnewsletter.webp');
  background-size:cover;background-position:center;color:var(--cream);border-radius:var(--r-lg);
  padding:var(--s6);margin-bottom:var(--s5);position:relative;overflow:hidden}
.acct-hello h2{color:var(--cream);font-size:clamp(1.4rem,1.1rem+1vw,1.9rem);margin-bottom:.3rem}
.acct-hello p{color:rgba(247,241,231,.8);max-width:48ch}
.acct-hello__ic{position:absolute;right:-10px;bottom:-20px;width:130px;height:130px;opacity:.12;color:var(--gold-soft)}

.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:flex;gap:.9rem;align-items:center}
.stat-card--link{text-decoration:none;color:inherit;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.stat-card--link:hover{border-color:var(--wine);box-shadow:0 6px 18px rgba(42,35,32,.08)}
.stat-card__ic{width:42px;height:42px;border-radius:var(--r-sm);background:var(--cream-2);display:flex;align-items:center;justify-content:center;color:var(--wine);flex:none}
.stat-card__ic svg{width:21px;height:21px}
.stat-card .n{font-family:var(--serif);font-size:1.6rem;line-height:1}
.stat-card .l{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:.2rem}

.acct-sec__h{display:flex;align-items:center;justify-content:space-between;margin:var(--s5) 0 var(--s3)}
.acct-sec__h h3{font-size:1.15rem}
.acct-sec__h a{font-size:var(--fs-sm);font-weight:600;color:var(--gold-ink)}

/* Pedidos (Mi Cuenta) — clase propia para no chocar con la tarjeta de Gracias */
.acct-order{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s3)}
.acct-order__id b{font-size:var(--fs-sm)}
.acct-order__id span{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:.15rem}
.acct-order__mid{display:flex;align-items:center;gap:.8rem;min-width:0}
.order-thumbs{display:flex}
.order-thumbs img{width:40px;height:40px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:3px;margin-left:-8px}
.order-thumbs img:first-child{margin-left:0}
.acct-order__items{font-size:var(--fs-xs);color:var(--muted)}
.acct-order__end{display:flex;align-items:center;gap:var(--s4)}
.acct-order__total{font-weight:700;white-space:nowrap}
.ostatus{font-size:var(--fs-xs);font-weight:700;padding:.32rem .7rem;border-radius:var(--r-pill);white-space:nowrap}
.ostatus--done{background:rgba(35,75,56,.12);color:var(--event)}
.ostatus--proc{background:rgba(176,141,79,.18);color:var(--gold-ink)}
.ostatus--ship{background:rgba(42,35,32,.1);color:var(--wine)}
.ostatus--cancel{background:rgba(110,31,43,.1);color:var(--sale)}

/* Direcciones / pago */
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.addr-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.addr-card__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.addr-card__h h4{font-size:1rem}
.addr-card__h a{font-size:var(--fs-xs);font-weight:600;color:var(--gold-ink)}
.addr-card p{color:var(--muted);line-height:1.7;font-size:var(--fs-sm)}
.pay-method{display:flex;align-items:center;gap:var(--s4);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s3)}
.pay-method img{height:24px}
.pay-method b{font-size:var(--fs-sm)}
.pay-method span{font-size:var(--fs-xs);color:var(--muted)}
.pay-method .rm{margin-left:auto;color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.pay-method .rm:hover{color:var(--sale)}

/* Nav móvil = tabs scrollables */
@media (max-width:860px){
  .account{grid-template-columns:1fr}
  .acct-nav{position:static;flex-direction:row;overflow-x:auto;gap:.4rem;padding:.5rem;scrollbar-width:none}
  .acct-nav::-webkit-scrollbar{display:none}
  .acct-nav__user{display:none}
  .acct-nav__item{width:auto;white-space:nowrap;padding:.6rem .9rem}
  .acct-nav__item--logout{border-top:0;margin-top:0;padding-top:.6rem;border-radius:var(--r-sm)}
  .acct-stats{grid-template-columns:1fr}
  .addr-grid{grid-template-columns:1fr}
  .acct-order{grid-template-columns:1fr;gap:var(--s3)}
  .acct-order__end{justify-content:space-between}
}

/* Empty */
.cart-empty{text-align:center;padding:var(--s9) 0;grid-column:1 / -1}
.cart-empty svg{width:54px;height:54px;color:var(--gold);margin-bottom:var(--s3)}
.cart-empty h2{font-size:1.5rem;margin-bottom:.5rem}
.cart-empty p{color:var(--muted);margin-bottom:var(--s4)}

/* ---------- CHECKOUT ---------- */
/* Checkout: fondo crema (como el resto del sitio). Las tarjetas blancas resaltan
   solas sobre el crema; sin cajas ni bordes de color extra. */
.checkout{display:grid;grid-template-columns:1fr 400px;gap:var(--s6);align-items:start;padding:var(--s7) 0 var(--s6)}
.checkout__main{min-width:0}

/* Libreta de direcciones guardadas (tarjetas directas, sin toggle). */
.addr-picker-wrap{margin:0 0 var(--s4)}
.addr-picker__label{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.addr-picker__label svg{width:15px;height:15px}
.addr-picker-panel{display:flex;flex-direction:column;gap:.5rem;max-width:420px}
.addr-pick.is-selected{border-color:var(--event);background:#fff;box-shadow:0 0 0 2px rgba(35,75,56,.14)}
/* Chip con contorno (transparente sobre el crema de la página): se distingue de
   las tarjetas de método, que son blancas. La marca «Principal» indica la principal. */
.addr-pick{text-align:left;background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.6rem .8rem;cursor:pointer;display:flex;align-items:center;gap:.7rem;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.addr-pick:hover{border-color:var(--event);background:#fff}
.addr-pick.is-default{border-color:var(--line)}
.addr-pick__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.addr-pick b{font-size:var(--fs-sm);color:var(--ink)}
.addr-pick__head{display:flex;align-items:center;gap:.5rem}
.addr-pick .addr-pick__badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:var(--event);border:1px solid var(--event);border-radius:var(--r-pill);padding:.08rem .5rem}
.addr-pick .addr-pick__sub{font-size:var(--fs-xs);color:var(--muted)}
/* Check redondo (radio): indica cuál dirección se está usando. */
.addr-pick__check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
  display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}
.addr-pick__check svg{width:12px;height:12px;color:#fff;opacity:0}
.addr-pick.is-selected .addr-pick__check{background:var(--event);border-color:var(--event)}
.addr-pick.is-selected .addr-pick__check svg{opacity:1}
.addr-pick__manage{align-self:flex-start;font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-decoration:underline;margin-top:.1rem}
/* Calugas de dirección en el checkout (logueado): wrap + botones + formulario. */
.addr-cards{display:flex;flex-direction:column;gap:.5rem;margin:0 0 var(--s3);max-width:420px}
.addr-cards[hidden]{display:none}
.addr-addnew{align-self:flex-start;margin-top:.2rem}
.addr-usesaved{margin-bottom:var(--s3)}
.addr-addnew[hidden],.addr-usesaved[hidden]{display:none!important}   /* respeta el atributo hidden (btn fija display) */
.addr-addnew svg,.addr-usesaved svg{width:16px;height:16px}
.addr-form-fields[hidden]{display:none}
/* Popup «¿le pones nombre a esta dirección?» (auto-guardadas). */
.addr-name-modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:var(--gutter)}
.addr-name-modal__overlay{position:absolute;inset:0;background:rgba(20,16,14,.5);backdrop-filter:blur(2px)}
.addr-name-modal__box{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);
  max-width:400px;width:100%;padding:var(--s6);box-shadow:var(--shadow-lg)}
.addr-name-modal__box h3{font-size:1.1rem;line-height:1.2;margin:0 0 .35rem}
.addr-name-modal__box p{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;margin:0 0 var(--s4)}
.addr-name-modal__input{width:100%;padding:.7rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.addr-name-modal__input:focus{outline:none;border-color:var(--wine)}
.addr-name-modal__foot{display:flex;justify-content:flex-end;gap:.6rem;margin-top:var(--s4)}
.steps{display:flex;align-items:center;list-style:none;margin:var(--s6) auto 0;max-width:75%}
.steps__item{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;font-weight:600;color:var(--muted);white-space:nowrap}
.steps__item:not(:last-child){flex:1}
.steps__item:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--line);margin:0 1.1rem;border-radius:2px;transition:background .3s var(--ease)}
.steps__dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;background:#fff;border:1.5px solid var(--line-2);color:var(--muted);flex:none}
.steps__item.is-done{color:var(--event)}
.steps__item.is-done .steps__dot{background:var(--event);border-color:var(--event);color:#fff}
.steps__item.is-done::after{background:var(--event)}
.steps__item.is-active{color:var(--wine)}
.steps__item.is-active .steps__dot{background:var(--wine);border-color:var(--wine);color:var(--cream);box-shadow:0 0 0 4px rgba(42,35,32,.1)}
@media (max-width:560px){
  /* Mobile: 3 dots de borde a borde (1º pegado a la izq, 3º a la der) con
     label bajo cada uno. Los conectores se posicionan respecto a .steps
     (no al item) de centro-de-dot a centro-de-dot → siempre alineados. */
  .steps{max-width:none;gap:0;margin-top:var(--s4);position:relative;align-items:flex-start}
  .steps__item{flex:1;flex-direction:column;gap:.4rem;
    font-size:11px;line-height:1.25;white-space:normal;
    align-items:flex-start;text-align:left}         /* paso 1: dot+label a la izquierda */
  .steps__item:nth-child(2){align-items:center;text-align:center} /* paso 2: centrado */
  .steps__item:last-child{align-items:flex-end;text-align:right}  /* paso 3: a la derecha */
  .steps__dot{position:relative;z-index:1}
  .steps__item .steps__label{display:block;max-width:12ch}
  .steps__item.is-active .steps__label{color:var(--wine)}
  .steps__item.is-done .steps__label{color:var(--event)}
  /* Conectores: centros de dot en 14px, 50% y (100%-14px). */
  .steps__item:not(:last-child)::after{position:absolute;top:13px;height:2px;margin:0;width:auto;flex:none}
  .steps__item:first-child::after{left:14px;right:50%}
  .steps__item:nth-child(2)::after{left:50%;right:14px}
}
.co-section{margin-bottom:var(--s5)}
/* Wizard de checkout: pasos + navegación. */
.co-step[hidden]{display:none}
/* El encabezado recibe foco solo como destino para lectores de pantalla: sin anillo visible. */
.co-section__h:focus{outline:none}
.co-section__h:focus-visible{outline:none}
.co-nav{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.co-nav .co-next{margin-left:auto}
/* Botón «Continuar» en verde botella (le da vida al checkout) + flecha de avance. */
.co-next{background:var(--event);border-color:var(--event);color:var(--cream)}
.co-next:hover{background:#19402e;border-color:#19402e}
.co-next__arrow{width:17px;height:17px;flex:none;transition:transform var(--dur) var(--ease)}
.co-next:hover .co-next__arrow{transform:translateX(3px)}
.co-bill{margin:var(--s5) 0;padding-top:var(--s5);border-top:1px solid var(--line)}
.co-err{color:var(--error);font-size:var(--fs-sm);font-weight:600;margin:var(--s3) 0 0}
.co-field.is-invalid input,.co-field.is-invalid select,.co-field.is-invalid textarea{border-color:var(--error);box-shadow:0 0 0 3px rgba(155,44,44,.14)}
#coSteps .steps__item.is-done,#coSteps .steps__item.is-active{cursor:pointer}
#coSteps .steps__item:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:6px}
/* El botón «Pagar» (en el resumen) solo se muestra en el último paso. */
form.checkout:not(.co-at-last) #place_order{display:none}
/* Checkout: menos aire entre el contenido y el footer (contenedor de page.php). */
body.woocommerce-checkout #main > .container{padding-bottom:var(--s4)!important}
/* Subtítulos y bajadas del checkout. */
.co-subh{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 var(--s3)}
.co-bill .co-subh{margin-top:0}
.co-section__sub{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;margin:-.2rem 0 var(--s4)}
.co-loginhint{display:flex;align-items:center;gap:.6rem;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .9rem;font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--s4)}
.co-loginhint svg{width:20px;height:20px;color:var(--wine);flex:none}
.linklike{background:none;border:0;padding:0;color:var(--wine);font-weight:600;cursor:pointer;text-decoration:underline;font:inherit}
/* Teléfono con prefijo +56 fijo (look de addon con divisoria). */
.phone-inwrap{position:relative;display:block}
.phone-inwrap .field-prefix{position:absolute;left:1px;top:1px;bottom:1px;display:flex;align-items:center;padding:0 .8rem;font:inherit;font-size:var(--fs-sm);font-weight:400;color:var(--muted);pointer-events:none;border-right:1px solid var(--line-2)}
.phone-inwrap input{padding-left:4.1rem!important}
/* Tarjetas boleta/factura: menos alto que las de envío (sin descripción). */
.doc-cards{margin-top:.2rem}
.doc-cards .opt-card{padding:var(--s3) var(--s4)}
/* Tarjetas compactas (~190px c/u), no a todo el ancho. En celular, 50% c/u. */
.co-bill .doc-cards{grid-template-columns:190px 190px;justify-content:start}
@media (max-width:640px){ .co-bill .doc-cards{grid-template-columns:1fr 1fr} }
/* El campo tipo-documento ya se muestra como tarjetas: ocultamos su etiqueta
   propia (evita el doble título «¿Boleta o factura?»). */
.co-field--doc > label{display:none}
/* Autocompletado de dirección (Google Places): dropdown propio, look Viñales. */
.gplaces-wrap{position:relative}
.gplaces-dd{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:0 14px 34px -12px rgba(42,35,32,.34);overflow:hidden;max-height:288px;overflow-y:auto}
.gplaces-opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;border:0;padding:.6rem .8rem;font:inherit;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;line-height:1.35}
.gplaces-opt svg{width:16px;height:16px;color:var(--muted);flex:none}
.gplaces-opt span{flex:1;min-width:0}
.gplaces-opt:hover,.gplaces-opt.is-active{background:var(--cream-50)}
/* Atribución obligatoria "Powered by Google" (predicciones sin mapa). */
.gplaces-attr{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;padding:.4rem .8rem;font-size:11px;color:var(--muted);border-top:1px solid var(--line);background:#fff;position:sticky;bottom:0}
.gplaces-attr .gg{font-weight:500;letter-spacing:.2px}
.gplaces-attr .gg b{font-weight:500}
/* Botón «Continuar con Google» (popup de cuenta + tarjeta de login). */
.acc-google{margin:0 0 var(--s4)}
.g-signin{display:flex;justify-content:center;min-height:40px}
.acc-or{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:var(--fs-xs);margin:var(--s4) 0 0;text-transform:uppercase;letter-spacing:.05em}
.acc-or::before,.acc-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* Confirmación inline de comuna (detección dudosa de Google Places). */
.co-field--confirm select{border-color:var(--gold-ink);box-shadow:0 0 0 3px rgba(138,106,47,.15)}
.comuna-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.4rem;font-size:var(--fs-xs);color:var(--gold-ink);line-height:1.4}
.comuna-confirm__ok{background:var(--wine);color:var(--cream);border:0;border-radius:999px;padding:.28rem .75rem;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;white-space:nowrap}
.comuna-confirm__ok:hover{background:var(--ink)}
.co-section__h{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s3)}
.co-section__h .n{width:26px;height:26px;border-radius:50%;background:var(--wine);color:var(--cream);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.co-section__h h2,.co-section__h h3{font-size:1.15rem}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:.05rem .7rem;align-items:start}
.co-field{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.55rem}

/* ---- Estado de error del checkout: elegante y SIN deformar el layout ---- */
/* align-items:start (arriba) evita que un campo con error estire a su vecino. */
body.woocommerce-checkout .woocommerce-invalid .input-text,
body.woocommerce-checkout .woocommerce-invalid select,
body.woocommerce-checkout .woocommerce-invalid .select2-selection{border-color:var(--sale)!important;box-shadow:0 0 0 3px rgba(176,58,58,.10)}
/* La etiqueta se mantiene calmada (el borde + mensaje ya comunican el error). */
body.woocommerce-checkout .woocommerce-invalid label,
body.woocommerce-checkout .woocommerce-invalid .required_field{color:var(--ink)}
/* Mensaje inline bajo el campo: chico, discreto, no rompe la grilla. */
.checkout-inline-error-message{margin:.3rem 0 0;padding:0;font-size:var(--fs-xs);line-height:1.35;font-weight:500;color:var(--sale)}
/* Aviso superior: banner suave en vez del bloque plano de Woo. */
/* El checkout es un grid (main + summary). El aviso debe ocupar TODO el ancho,
   si no, se inserta como celda y empuja el formulario a la columna angosta. */
.woocommerce-checkout > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-error,
form.checkout > .woocommerce-message,
form.checkout > .woocommerce-info{grid-column:1 / -1}
.woocommerce-checkout .woocommerce-NoticeGroup{margin:0 0 var(--s5)}
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error{list-style:none;margin:0;padding:var(--s4) var(--s5);background:#FBF1F1;border:1px solid rgba(176,58,58,.22);border-radius:var(--r);color:#8a2b2b;font-size:var(--fs-sm)}
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li{margin:.1rem 0;padding:0;list-style:none}
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li::before{content:none}
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error a{color:#8a2b2b;text-decoration:none}
.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error a:hover{text-decoration:underline}
.co-field.col-2{grid-column:span 2}
.co-field label{font-size:var(--fs-xs);font-weight:600;color:var(--ink);line-height:1.2}
.co-field label .opt{color:var(--muted);font-weight:400}
.co-field input,.co-field select,.co-field textarea{padding:.7rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:var(--fs-sm);line-height:1.4;background:#fff;color:var(--ink);transition:border-color var(--dur) var(--ease)}
.co-field input:focus,.co-field select:focus,.co-field textarea:focus{outline:none;border-color:var(--wine)}
.co-field input:focus-visible,.co-field select:focus-visible,.co-field textarea:focus-visible{box-shadow:0 0 0 3px rgba(42,35,32,.08)}
.co-field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5F54' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2rem}

/* Opciones entrega / pago (radio cards) */
.opt-cards{display:grid;gap:.7rem}
.opt-cards--2{grid-template-columns:1fr 1fr}
.opt-card{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:var(--s3) var(--s4);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  display:flex;gap:.8rem;align-items:flex-start}
.opt-card:hover{border-color:var(--gold-soft);background:var(--cream-50)}
.opt-card input{position:absolute;opacity:0;pointer-events:none}
.opt-card__ic{width:38px;height:38px;border-radius:var(--r-sm);background:var(--cream-2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--wine)}
.opt-card__ic svg{width:20px;height:20px}
.opt-card__b{flex:1;min-width:0}
.opt-card__t{font-weight:600;font-size:var(--fs-sm);line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.opt-card__t .tag{font-size:11px;font-weight:700;color:var(--event);background:rgba(35,75,56,.12);
  padding:.12rem .5rem;border-radius:var(--r-pill);letter-spacing:.02em}
.opt-card__d{font-size:var(--fs-xs);color:var(--muted);margin-top:.05rem;line-height:1.25}
.opt-card__check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;transition:all var(--dur) var(--ease);display:flex;align-items:center;justify-content:center}
.opt-card__check svg{width:12px;height:12px;color:#fff;opacity:0}
.opt-card__logos{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;flex-wrap:wrap}
.opt-card__logos img{height:18px;width:auto;border-radius:3px}
.opt-card.is-on{border-color:var(--wine);background:#fff;box-shadow:0 0 0 2px rgba(42,35,32,.08)}
.opt-card.is-on .opt-card__check{background:var(--event);border-color:var(--event)}
.opt-card.is-on .opt-card__check svg{opacity:1}
.opt-card.is-on .opt-card__ic{background:var(--event);color:var(--cream)}

/* ---- Regalo (checkout) ---- */
/* Bloque de regalo: se separa del método de entrega con su propio tratamiento. */
.gift-block{margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r);background:var(--cream-50);overflow:hidden}
.gift-switch{display:flex;align-items:center;gap:1rem;padding:var(--s4);cursor:pointer;margin:0}
.gift-switch__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.gift-switch__t{font-weight:700;font-size:var(--fs-sm);color:var(--ink)}
.gift-switch__d{font-size:var(--fs-xs);color:var(--muted)}
.gift-fields{padding:0 var(--s4) var(--s4)}
.gift-fields[hidden]{display:none}
.gift-pack{margin:var(--s4) 0 var(--s5)}   /* aire arriba (input) y abajo (mensaje de la tarjeta) */
/* Título «Empaque de regalo» = mismo porte que los labels de los inputs, con aire antes de las calugas. */
.gift-pack .co-subh{display:block;font-size:var(--fs-xs);font-weight:600;margin-bottom:5px}
/* Los campos del regalo heredan el gap label-input de la base .co-field (idéntico al paso 1). */
.gift-fields .co-field > label{line-height:1.2;margin:0}
.gift-fields .co-field > input,.gift-fields .co-field > textarea{margin-top:0}
/* Empaque: en escritorio las calugas se ajustan a su contenido (fit-content) y
   fluyen en fila con aire; así no quedan estiradas a 1/3 con hueco vacío. */
.gift-pack__opts{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.gift-pack__card{align-items:center;flex:0 0 auto;padding-left:var(--s5);padding-right:var(--s5)}
/* El radio/check va arriba a la derecha (como el resto de las tarjetas), no centrado. */
.gift-pack__card .opt-card__check{align-self:flex-start}
@media (max-width:640px){ .gift-pack__opts{flex-direction:column} .gift-pack__card{width:100%} }
/* Precio del empaque: mismo tamaño/tinta del resumen, pero SIN negrita. */
.gift-pack__card .opt-card__d{font-size:var(--fs-sm);font-weight:400;color:var(--ink)}
/* Toggle tipo switch (accesible: el input real está oculto pero operable). */
.switch{position:relative;display:inline-flex;flex:none;width:46px;height:26px}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch__slider{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:background var(--dur) var(--ease)}
.switch__slider::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(20,16,14,.3);transition:transform var(--dur) var(--ease)}
.switch input:checked + .switch__slider{background:var(--wine)}
.switch input:checked + .switch__slider::before{transform:translateX(20px)}
.switch input:focus-visible + .switch__slider{box-shadow:0 0 0 3px rgba(42,35,32,.18)}

/* Dirección de entrega: solo campos (sin caja ni bordes), diferenciada del método
   por ser un formulario y no tarjetas clickeables. */
.co-addr-panel{margin-top:var(--s5)}
.co-addr-panel .co-subh{margin-bottom:var(--s3)}
.co-addr-manual{margin:.5rem 0 0}
.co-addr-manual .linklike{font-size:var(--fs-xs)}

/* Nota de envío (aparece al elegir comuna) */
.ship-note{display:none;margin-top:var(--s3);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:var(--fs-sm);
  background:var(--cream-50);border:1px solid var(--line);align-items:flex-start;gap:.6rem}
.ship-note.is-on{display:flex}
.ship-note svg{width:18px;height:18px;flex:none;margin-top:.1rem}
.ship-note b{font-weight:700}
.ship-note--free{background:linear-gradient(180deg,rgba(35,75,56,.12),rgba(35,75,56,.07));border-color:rgba(35,75,56,.4);box-shadow:0 2px 10px rgba(35,75,56,.1)}
.ship-note--free svg,.ship-note--free b{color:var(--event)}
.ship-note--free b{font-size:.97rem}
.ship-note--paid svg{color:var(--gold-ink)}
.ship-note .eta{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.15rem}

.co-collapse summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--wine);list-style:none;display:flex;align-items:center;gap:.4rem;padding:.3rem 0}
.co-collapse summary::-webkit-details-marker{display:none}
.co-collapse summary svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.co-collapse[open] summary svg{transform:rotate(180deg)}

.co-secure{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s4)}
.co-secure svg{width:15px;height:15px;color:var(--event)}

@media (max-width:980px){
  /* .woocommerce-cart .cart (0,2,0) le ganaba al colapso → especificamos igual.
     minmax(0,1fr): sin esto, 1fr = minmax(auto,1fr) y el contenido (summary/
     ship-bar) fuerza min-width > viewport y desborda horizontalmente. */
  .woocommerce-cart .cart,.checkout{grid-template-columns:minmax(0,1fr)}
  .summary{position:static;order:0} /* carrito: primero los productos, luego el resumen */
  .checkout .summary{order:0;position:static;top:auto}
  .checkout{padding-bottom:var(--s5)} /* menos aire hasta el footer en mobile */
  /* «Volver» movido bajo el resumen: solo visible en el último paso (co-at-last). */
  .co-nav--moved{display:none;margin-top:var(--s4)}
  form.checkout.co-at-last .co-nav--moved{display:flex}
}
@media (max-width:520px){
  .co-grid,.opt-cards--2{grid-template-columns:1fr}
  .co-field.col-2{grid-column:span 1}
  .cart-item{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"media info" "media end";row-gap:0}
  .cart-item__media{grid-area:media;width:72px;height:72px}
  .cart-item__info{grid-area:info}
  /* Total pegado al quantity: sin row-gap y con margen mínimo. */
  .cart-item__end{grid-area:end;flex-direction:row;gap:.8rem;align-items:center;text-align:left;margin-top:.15rem}
}

/* Header / footer del checkout (minimal, sin distracciones = más conversión) */
.header--checkout{position:sticky}
.header--checkout .header__top{justify-content:space-between;flex-wrap:nowrap}
.header--checkout .header__logo{order:0}
/* Enlace «Volver al carrito» del header del checkout: SOLO el <a>, no el botón
   .btn.co-back del wizard (que conserva su estilo .btn--ghost con texto visible). */
a.co-back{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
a.co-back:hover{color:var(--wine)}
a.co-back svg{width:18px;height:18px}
.co-secure-top{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:600;color:var(--event)}
.co-secure-top svg{width:17px;height:17px}
.footer--mini{margin-top:var(--s7)}
.footer--mini .footer__trust{border-top:0}
@media (max-width:600px){ a.co-back span,.co-secure-top{display:none} a.co-back{font-size:0} a.co-back svg{width:22px;height:22px} }

/* ---------- GRACIAS / ORDER RECEIVED ---------- */
.thanks{max-width:720px;margin:0 auto;padding:var(--s8) 0 var(--s9);text-align:center}
.thanks__check{width:88px;height:88px;border-radius:50%;background:rgba(35,75,56,.12);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);animation:pop .5s var(--ease) both}
.thanks__check svg{width:44px;height:44px;color:var(--event)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.thanks h1{font-size:clamp(1.8rem,1.4rem+1.6vw,2.6rem);margin-bottom:.5rem}
.thanks__sub{color:var(--muted);max-width:52ch;margin:0 auto var(--s6);line-height:1.7}
.thanks__sub b{color:var(--ink)}
.thanks .order-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);text-align:left;margin-bottom:var(--s5)}
.thanks .order-card__top{display:flex;flex-wrap:wrap;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.order-meta{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:130px}
.order-meta span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.order-meta b{font-size:var(--fs-sm);color:var(--ink);font-weight:600}
.order-meta b.ok{color:var(--event)}
.thanks .order-card .mini-items{max-height:none;overflow:visible;padding:9px 2px 0;margin:0 0 var(--s4)}
.thanks .order-card__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:var(--s4);border-top:1px solid var(--line)}
.thanks .order-card__total b{font-family:var(--serif);font-size:1.4rem}
.track{display:flex;margin:0 0 var(--s6)}
.track__step{flex:1;text-align:center;position:relative;font-size:var(--fs-xs);color:var(--muted)}
.track__step::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line);z-index:0}
.track__step:first-child::before{display:none}
.track__dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--line-2);margin:0 auto .5rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.track__dot svg{width:14px;height:14px}
.track__step.done .track__dot{background:var(--event);border-color:var(--event);color:#fff}
.track__step.done::before{background:var(--event)}
.track__step.done{color:var(--ink);font-weight:600}
.thanks__cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.thanks__wa{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted);display:inline-flex;align-items:center;gap:.5rem}
.thanks__wa svg{width:18px;height:18px;color:#25D366}
@media(max-width:520px){ .thanks__cta{flex-direction:column} .thanks__cta .btn{width:100%} .track__step{font-size:10px} }

/* ============================================================
   BLOG (lista + artículo)
   ============================================================ */
.blog-hero{text-align:center;max-width:760px;margin:0 auto;padding:var(--s8) 0 var(--s5)}
.blog-hero h1{font-size:clamp(2rem,1.5rem+2vw,3rem);line-height:1.12;margin:.4rem 0 .6rem}
.blog-hero p{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:58ch;margin:0 auto}
.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:var(--s5)}
.blog-filters a{font-size:var(--fs-sm);font-weight:600;color:var(--muted);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:.5rem 1.1rem;transition:all var(--dur) var(--ease)}
.blog-filters a:hover{border-color:var(--wine);color:var(--wine)}
.blog-filters a.is-active{background:var(--wine);color:var(--cream);border-color:var(--wine)}

.post-cat{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink)}
.post-meta{font-size:var(--fs-xs);color:var(--muted)}

/* Featured */
.feature-post{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s6);align-items:center;margin-bottom:var(--s8);
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feature-post__media{aspect-ratio:4/3;overflow:hidden;height:100%}
.feature-post__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.feature-post:hover .feature-post__media img{transform:scale(1.04)}
.feature-post__body{padding:var(--s7) var(--s7) var(--s7) 0}
.feature-post__tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:.6rem}
.feature-post__body h2{font-size:clamp(1.5rem,1.1rem+1.6vw,2.2rem);line-height:1.18;margin:0 0 .7rem}
.feature-post__body h2 a{color:var(--ink)}
.feature-post__body h2 a:hover{color:var(--wine)}
.feature-post__body p{color:var(--muted);line-height:1.7;margin-bottom:var(--s4)}
.feature-post__foot{display:flex;align-items:center;gap:.8rem;margin-bottom:var(--s4)}

/* Grid de posts */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s5)}
.post-card{display:flex;flex-direction:column;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding-bottom:var(--s4);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-card__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;margin-bottom:var(--s3)}
.post-card > .post-meta{padding:0 var(--s4)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-cat--float{position:absolute;top:.7rem;left:.7rem;z-index:2;color:var(--cream);background:rgba(35,75,56,.85);
  padding:.32rem .7rem;border-radius:var(--r-pill);backdrop-filter:blur(4px);letter-spacing:.06em}
.post-card__title{font-family:var(--serif);font-size:1.22rem;font-weight:600;line-height:1.3;color:var(--ink);
  display:block;margin:.45rem 0 .45rem;padding-inline:var(--s4)}
.post-card__title:hover{color:var(--wine)}
.post-card__excerpt{color:var(--muted);font-size:var(--fs-sm);line-height:1.65;margin-bottom:.9rem;padding:0 var(--s4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card__foot{margin-top:auto}
/* CTA «Leer artículo» al pie de cada card (alineado entre columnas). */
.post-card__more{margin-top:auto;align-self:flex-start;margin-left:var(--s4);margin-right:var(--s4)}
/* Tarjetas de producto embebidas dentro de un artículo (shortcode). */
.blog-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);
  margin:var(--s5) 0;max-width:640px}
.blog-products:has(> :only-child){max-width:280px}

/* Newsletter band del blog */
.blog-news{margin:var(--s9) 0;background:var(--wine);color:var(--cream);border-radius:var(--r-lg);
  padding:var(--s7);text-align:center;position:relative;overflow:hidden}
.blog-news h3{font-size:clamp(1.4rem,1.1rem+1.2vw,2rem);color:var(--cream);margin-bottom:.5rem}
.blog-news p{color:rgba(247,241,231,.78);max-width:46ch;margin:0 auto var(--s4)}
.blog-news form{display:flex;gap:.6rem;max-width:440px;margin:0 auto;flex-wrap:wrap}
.blog-news input{flex:1;min-width:200px;padding:.85rem 1rem;border:1px solid var(--line-dark);border-radius:var(--r-sm);font:inherit;background:rgba(247,241,231,.1);color:var(--cream)}
.blog-news input::placeholder{color:rgba(247,241,231,.55)}
.blog-news input:focus-visible{background:rgba(247,241,231,.16)}

/* ---------- ARTÍCULO (single) ---------- */
.article{padding-bottom:var(--s9)}
.article__head{max-width:740px;margin:0 auto;text-align:center;padding:var(--s5) 0 var(--s4)}
.article__head h1{font-size:clamp(1.9rem,1.4rem+2.2vw,3rem);line-height:1.14;margin:.7rem 0 0}
.article__meta{display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s4)}
.article__meta .avatar{width:36px;height:36px;border-radius:50%;background:var(--wine);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.article__meta b{color:var(--ink);font-weight:600}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.article__hero{max-width:1040px;margin:var(--s5) auto var(--s7);aspect-ratio:16/8;border-radius:var(--r-lg);overflow:hidden}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__body{max-width:68ch;margin:0 auto;font-size:1.08rem;line-height:1.8;color:#39312B}
.article__body p{margin-bottom:var(--s4)}
.article__body .lead{font-size:1.28rem;line-height:1.55;color:var(--ink);font-weight:400}
.article__body h2{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem+1vw,1.8rem);line-height:1.25;color:var(--ink);margin:var(--s7) 0 var(--s3)}
.article__body h3{font-size:1.25rem;color:var(--ink);margin:var(--s5) 0 var(--s2)}
.article__body ul,.article__body ol{margin:0 0 var(--s4) 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.article__body li{padding-left:.2rem}
.article__body a:not(.btn){color:var(--wine);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-soft)}
/* Las cards de producto embebidas (shortcode) conservan SUS estilos, no los del
   contenido del artículo (sin subrayado, y con sus colores propios de la card). */
.article__body .blog-products a{text-decoration:none}
.article__body .blog-products .card__viña{color:var(--gold-ink)}
.article__body .blog-products .card__viña:hover{color:var(--wine)}
.article__body .blog-products .card__name{color:var(--ink)}
.article__body .blog-products .card__name:hover{color:var(--wine)}
.article__body strong{color:var(--ink);font-weight:600}
.article__body blockquote{border-left:3px solid var(--gold);padding:.2rem 0 .2rem var(--s5);margin:var(--s6) 0;
  font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.45;color:var(--wine)}
.article__body figure{margin:var(--s6) 0}
.article__body figure img{width:100%;border-radius:var(--r)}
.article__body figcaption{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin-top:.6rem}
.article__cta{max-width:68ch;margin:var(--s6) auto 0;background:var(--cream-50);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.article__cta img{width:64px;height:80px;object-fit:contain;flex:none}
.article__cta .b{flex:1;min-width:180px}
.article__cta h4{font-size:1.05rem;margin-bottom:.2rem}
.article__cta p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.article__share{max-width:68ch;margin:var(--s6) auto 0;display:flex;align-items:center;gap:.6rem;
  padding-top:var(--s4);border-top:1px solid var(--line)}
.article__share span{font-size:var(--fs-sm);color:var(--muted);margin-right:auto}
.share-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all var(--dur) var(--ease)}
.share-btn:hover{border-color:var(--wine);color:var(--wine)}
.share-btn svg{width:17px;height:17px}
.author-bio{max-width:68ch;margin:var(--s6) auto 0;display:flex;gap:var(--s4);align-items:center;
  background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.author-bio__av{width:64px;height:64px;border-radius:50%;background:var(--wine);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;flex:none}
.author-bio h4{font-size:1.05rem}
.author-bio span{font-size:var(--fs-xs);color:var(--gold-ink);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.author-bio p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:.3rem}
.related{margin-top:var(--s9)}
.related h2{text-align:center;font-size:1.6rem;margin-bottom:var(--s6)}

@media (max-width:900px){
  .feature-post{grid-template-columns:1fr}
  .feature-post__media{aspect-ratio:16/9}
  .feature-post__body{padding:var(--s5)}
  .post-grid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s4)}
}
@media (max-width:560px){
  .post-grid{grid-template-columns:1fr}
  .article__hero{aspect-ratio:4/3}
  .author-bio{flex-direction:column;text-align:center}
}

/* ============================================================
   WP · Ficha técnica + Avísame (single product)
   ============================================================ */
.pdp-detail__aside .ficha{display:flex;flex-direction:column;gap:0}
.ficha__row{display:grid;grid-template-columns:40% 1fr;gap:.5rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.ficha__row:last-child{border-bottom:0}
.ficha__row dt{color:var(--muted);font-weight:600;margin:0}
.ficha__row dd{margin:0;color:var(--ink)}
.ficha__row dd a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}

.pdp-notify{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.pdp-notify__lead{font-size:var(--fs-sm);color:var(--muted);margin-bottom:.7rem}
.pdp-notify__form{display:flex;gap:.6rem;flex-wrap:wrap}
.pdp-notify__form input{flex:1;min-width:180px;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;background:#fff}
.pdp-notify__form .btn{flex:none}

/* Precio de Woo (del/ins) mapeado a nuestro estilo — SOLO para el card de la
   tienda (usa get_price_html). La ficha usa .new/.old/.off del prototipo, así
   que NO se toca .pdp__price aquí (antes le metía serif/1.7rem y rompía la tipografía). */
/* Todo precio ACTIVO en bold vino (tenga o no oferta). El precio tachado (del) va muted. */
.card__price .woocommerce-Price-amount{color:var(--wine);font-weight:800}
.card__price ins{text-decoration:none}
.card__price del,.card__price del .woocommerce-Price-amount{color:var(--muted);text-decoration:line-through;font-size:.85em;font-weight:400;margin-left:.4rem;order:2}
.card__price{display:flex;align-items:baseline;gap:.1rem;flex-wrap:wrap}

/* Bundle/variable: la zona de compra usa el markup de WC, pero script.js le pone las
   clases .qty.qty--lg y .btn.btn--primary (+ícono) para que sea IDÉNTICA a la simple.
   Aquí solo cuidamos el layout del form y ocultamos ruido nativo. */
.pdp__buy form.cart{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch;margin:0;flex:1 1 100%;width:100%}
.pdp__buy form.cart > .woosb-ids,.pdp__buy form.cart .woosb-wrap{flex:1 1 100%;width:100%}
/* La disponibilidad nativa del pack (hijo directo de .pdp__buy o dentro del form) se
   oculta: ya mostramos el stock con .pdp__stock arriba. El «>» evita tocar la
   disponibilidad de cada hijo, que vive dentro de .woosb-wrap. */
.pdp__buy > .stock,.pdp__buy > .woosb-availability,
.pdp__buy form.cart .stock,.pdp__buy form.cart .woosb-total{display:none}
/* WooCommerce pinta .button.alt en morado con más especificidad que .btn--primary,
   así que forzamos el look de la ficha simple (mismo botón .btn.btn--primary). */
.pdp__buy form.cart .single_add_to_cart_button{background:var(--wine)!important;color:var(--cream)!important;border:0!important;border-radius:var(--r-sm)!important;padding:.85rem 1.6rem!important;height:50px;flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);letter-spacing:.03em;text-transform:none}
.pdp__buy form.cart .single_add_to_cart_button:hover{background:var(--wine-900)!important}

/* ====== Bundle (WPC Product Bundles) en la ficha — al look&feel Viñales ====== */
/* Miniatura de cada hijo con el marco suave del resto del sitio */
.woosb-wrap .woosb-thumb img{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;object-fit:contain}
.woosb-wrap .woosb-thumb-new{display:none}   /* WPC pinta 2 thumbs (ori/new); dejamos 1 */
/* Nombre del hijo con la tipografía del sitio */
.woosb-wrap .woosb-name a{font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;color:var(--ink);text-decoration:none;line-height:1.35}
.woosb-wrap .woosb-name a:hover{color:var(--wine)}
/* Disponibilidad: del verde puro a un tono discreto del sitio (tamaño chico) */
.woosb-wrap .woosb-availability,
.woosb-wrap .woosb-availability .stock,
.woosb-wrap .woosb-availability p{color:var(--muted)!important;font-size:var(--fs-xs)!important;font-weight:500!important;margin:.1rem 0 0!important}
/* Precio del hijo = misma tipografía/tamaño que el título; tachado más chico.
   Se targetea el .woocommerce-Price-amount interno, que trae su propio tamaño. */
.woosb-wrap .woosb-price,.woosb-wrap .woosb-price *{font-family:var(--sans)}
/* Tachado + oferta juntitos (sin tanto aire), centrados a la derecha. */
.woosb-wrap .woosb-price{display:inline-flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.05rem;line-height:1.2;text-align:right}
.woosb-wrap .woosb-price-new,.woosb-wrap .woosb-price ins,
.woosb-wrap .woosb-price-new .woocommerce-Price-amount,
.woosb-wrap .woosb-price ins .woocommerce-Price-amount{font-weight:600!important;color:var(--ink)!important;text-decoration:none!important;font-size:var(--fs-sm)!important;line-height:1.3}
.woosb-wrap .woosb-price-ori,.woosb-wrap .woosb-price del,
.woosb-wrap .woosb-price-ori .woocommerce-Price-amount,
.woosb-wrap .woosb-price del .woocommerce-Price-amount{color:var(--muted)!important;text-decoration:line-through!important;font-size:var(--fs-xs)!important;opacity:.9;font-weight:400!important}
/* Texto/encabezado del bloque de productos del pack */
.woosb-wrap .woosb-text,.woosb-wrap .woosb-title-inner{font-family:var(--sans);color:var(--muted);font-size:var(--fs-xs)}


/* ============================================================
   WP · Checkout (mapea el markup de Woo al diseño Viñales)
   ============================================================ */
.checkout .col2-set,.checkout .col-1,.checkout .col-2{width:100%;float:none}
.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,#ship-to-different-address{font-size:1.05rem;margin:var(--s4) 0 var(--s3)}
/* Los campos se ordenan por el orden de render (co-grid + co-field); ya no se
   fuerza por ID. Base de fila + inputs: */
.woocommerce-checkout .form-row{display:flex;flex-direction:column;gap:.15rem;margin:0 0 .6rem;width:100%}
.woocommerce-checkout .form-row label{font-size:var(--fs-xs);font-weight:600;color:var(--ink);line-height:1.2}
/* Labels limpios como el prototipo: sin asteriscos ni «(opcional)» en el checkout. */
.checkout .co-field .required,.checkout .co-field .optional{display:none}
/* Woo carga su woocommerce.css, cuya regla `.woocommerce form .form-row .input-text`
   (0,3,1) le ganaba a la nuestra y pintaba el borde oscuro por defecto + input bajo.
   1) Sobrescribimos sus variables. 2) Subimos especificidad con `body.` (0,3,2) para
   el borde claro, y un input un poco más alto (padding .7rem) como el prototipo. */
.woocommerce-checkout{--wc-form-border-color:var(--line-2);--wc-form-border-width:1px}
body.woocommerce-checkout .form-row .input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection,
body.woocommerce-checkout .form-row textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-sm);line-height:1.4;background:#fff;color:var(--ink);transition:border-color var(--dur) var(--ease)}
body.woocommerce-checkout .select2-container .select2-selection{height:auto;min-height:calc(1.4em + 1.4rem + 2px);display:flex;align-items:center}
body.woocommerce-checkout .form-row .input-text:focus,body.woocommerce-checkout .form-row select:focus{outline:none;border-color:var(--wine)}
body.woocommerce-checkout .form-row .input-text:focus-visible,body.woocommerce-checkout .form-row select:focus-visible{box-shadow:0 0 0 3px rgba(42,35,32,.08)}

/* Avisos de WooCommerce (error/éxito/info) con el look de Viñales, no el gris plano de Woo */
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 var(--s5);padding:var(--s4) var(--s5);
  border-radius:var(--r);font-size:var(--fs-sm);line-height:1.45;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border:1px solid var(--line);border-left:3px solid var(--muted);background:#fff;color:var(--ink);
  box-shadow:0 6px 20px -16px rgba(42,35,32,.4)}
/* Ícono a la izquierda según el tipo (círculo con el color semántico). */
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{content:"";flex:none;width:18px;height:18px;
  border-radius:50%;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;display:inline-block}
.woocommerce-message{border-left-color:#2d5a3d;color:#2d5a3d}
.woocommerce-message::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.woocommerce-info{border-left-color:var(--gold);color:#8a6a1f}
.woocommerce-error{border-left-color:#b03a3a;color:#8a2b2b}
.woocommerce-error::before,.woocommerce-info::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v5M12 16h.01M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8v5M12 16h.01M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none;margin:0}
.woocommerce-error::before,.woocommerce-message::before,.woocommerce-info::before{display:none}
.woocommerce-error .button,.woocommerce-message .button,.woocommerce-info .button{margin-left:auto;background:var(--ink);
  color:var(--cream);border:0;border-radius:var(--r-pill);padding:.45rem 1rem;font-weight:600;font-size:var(--fs-xs);
  white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease)}
.woocommerce-error .button:hover,.woocommerce-message .button:hover{background:var(--wine-900)}
/* En móvil TODOS los campos del checkout a 16px (anti-zoom iOS y para que paso 1
   y paso 2, más Región/Comuna en Select2, tengan la misma tipografía). Se incluyen
   los selectores .form-row (mayor especificidad) y .co-field para que ninguno pierda. */
@media (max-width:600px){
  body.woocommerce-checkout .form-row .input-text,
  body.woocommerce-checkout .form-row select,
  body.woocommerce-checkout .form-row textarea,
  body.woocommerce-checkout .co-field input,
  body.woocommerce-checkout .co-field select,
  body.woocommerce-checkout .co-field textarea,
  body.woocommerce-checkout .select2-container .select2-selection,
  body.woocommerce-checkout .select2-container .select2-selection__rendered,
  body.woocommerce-checkout .select2-search__field{font-size:16px}
}
/* Ocultamos el <h3> por defecto de Woo (usamos las cabeceras de sección) y los campos que el diseño no muestra */
.woocommerce-billing-fields > h3{display:none}
.woocommerce-checkout .form-row.vinales-hide{display:none!important}
/* Pago en la columna principal (las tarjetas usan .opt-card, ver bloque «Pago») */
.woocommerce-checkout #payment .place-order{padding:0;margin-top:var(--s3)}
.select2-container--default .select2-selection--single{height:auto!important}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4;padding:0;color:var(--ink);font-family:var(--sans);font-size:var(--fs-sm)}

/* Resumen / order review */
#order_review{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s3)}
.woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-bottom:var(--s3)}
.woocommerce-checkout-review-order-table th,.woocommerce-checkout-review-order-table td{padding:.5rem 0;text-align:left;border:0;vertical-align:top}
.woocommerce-checkout-review-order-table td:last-child,.woocommerce-checkout-review-order-table th:last-child{text-align:right;white-space:nowrap}
.woocommerce-checkout-review-order-table tfoot th{font-weight:600;color:var(--muted)}
.woocommerce-checkout-review-order-table tfoot tr:last-child th,.woocommerce-checkout-review-order-table .order-total td{border-top:1px solid var(--line);padding-top:var(--s3)}
.woocommerce-checkout-review-order-table .order-total .amount{font-family:var(--sans);font-weight:800;font-size:1.2rem;color:var(--ink)}
.woocommerce-checkout-review-order-table .cart_item td{border-bottom:1px solid var(--line)}
.woocommerce-checkout-review-order-table .product-name{font-weight:500}
.woocommerce-checkout-review-order-table .product-quantity{color:var(--muted)}

/* Métodos de envío (despacho / retiro) */
#shipping_method{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
#shipping_method li{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.7rem .9rem}
#shipping_method li input{accent-color:var(--wine)}
#shipping_method label{font-size:var(--fs-sm)}

/* Pago — tarjetas .opt-card (idénticas a las de despacho, con fila de logos) */
.woocommerce-checkout #payment{background:transparent;border:0;border-radius:0;padding:0}
.woocommerce-checkout #payment ul.payment_methods{list-style:none;border:0;padding:0;margin:0;display:grid;gap:.7rem}
/* El <li> es el marco; el layout flex (ícono·cuerpo·check) va en .opt-card__head */
.woocommerce-checkout #payment ul.payment_methods li.opt-card{display:block;padding:0;margin:0;overflow:hidden}
.woocommerce-checkout #payment ul.payment_methods li.opt-card .opt-card__head{display:flex;gap:.8rem;align-items:flex-start;padding:var(--s4);margin:0;cursor:pointer;font-weight:400}
.woocommerce-checkout #payment ul.payment_methods li.opt-card .opt-card__logos img{height:18px!important;width:auto!important;max-width:none;margin:0!important;padding:0;float:none!important;border-radius:3px;box-shadow:none;border:0}
.woocommerce-checkout #payment div.payment_box{background:var(--cream-50);border-radius:0;margin:0;padding:0 var(--s4) var(--s4);font-size:var(--fs-sm);color:var(--muted)}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #place_order{width:100%;background:var(--event)!important;color:var(--cream)!important;border:0;border-radius:var(--r-sm);font-weight:600;font-size:1rem;padding:1rem;margin-top:var(--s3);cursor:pointer}
.woocommerce-checkout #place_order:hover{background:#19402e!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{font-size:var(--fs-xs);margin:var(--s3) 0}
@media (max-width:980px){ #order_review{position:static} }

/* ============================================================
   WP · Ajustes tienda (4 columnas + select de orden)
   ============================================================ */
.shop__main .grid-products{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .shop__main .grid-products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .shop__main .grid-products{grid-template-columns:repeat(2,1fr)} }

/* Select de orden (woocommerce_catalog_ordering) → estilo Viñales */
.woocommerce-ordering{margin:0}
.woocommerce-ordering select,.shop__tools select{font:inherit;font-size:var(--fs-sm);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.55rem 2rem .55rem .8rem;background:#fff;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5F54' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}
.woocommerce-ordering select:focus,.woocommerce-ordering select:focus-visible{outline:none;border-color:var(--wine)}

/* ============================================================
   FIXES RESPONSIVE (auditoría móvil) — mapean clases reales de
   WordPress/WooCommerce que el CSS del prototipo no cubría.
   ============================================================ */

/* Reseñas del producto (Woo #reviews) — evitar desbordamiento horizontal.
   (Se quitó `#reviews .comment-form{display:block}` porque pisaba el atributo
   [hidden] del formulario a medida y lo dejaba siempre visible.) */
#reviews input[type=text],#reviews input[type=email],#reviews input[type=url],#reviews textarea{width:100%;max-width:100%;box-sizing:border-box}
@media (max-width:768px){ #reviews .commentlist{padding-left:0} }

/* Menú móvil (#mobileMenu): estilar los <a> reales del wp_nav_menu */
.mnav__list ul{list-style:none;margin:0;padding:0}
.mnav__list li a,.mnav__list a.mnav__link{display:flex;align-items:center;gap:.5rem;padding:1rem 0;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);text-decoration:none}
.mnav__list li a:hover,.mnav__list a.mnav__link:hover{color:var(--wine)}

/* Checkout — Nombre/Apellido a 1 columna en móvil (clases reales de Woo) */
@media (max-width:768px){
  .woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{width:100%;float:none}
}

/* Mi Cuenta — formularios de Woo (editar cuenta/dirección) a 1 columna en móvil */
@media (max-width:768px){
  .woocommerce-EditAccountForm .form-row-first,.woocommerce-EditAccountForm .form-row-last,
  .woocommerce-account .col2-set .col-1,.woocommerce-account .col2-set .col-2,
  .woocommerce-account .woocommerce-Address{float:none;width:100%}
}
.woocommerce-account .woocommerce-Input.input-text,
.woocommerce-EditAccountForm input.input-text{width:100%;box-sizing:border-box}

/* Mi Cuenta — login / registro / edición estilizados a la marca Viñales
   (Woo por defecto es plano/gris; aquí lo alineamos con el diseño). */
.woocommerce-account form.login,
.woocommerce-account form.register{max-width:460px;margin:var(--s4) auto var(--s7);background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.woocommerce-account form.login label,
.woocommerce-account form.register label,
.woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-form-row label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--ink);margin-bottom:.3rem}
.woocommerce-account input[type=text],
.woocommerce-account input[type=email],
.woocommerce-account input[type=password],
.woocommerce-account input.input-text{width:100%;box-sizing:border-box;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:var(--r-sm);font:inherit;font-size:16px;background:#fff;color:var(--ink);margin-bottom:.2rem}
.woocommerce-account input[type=text]:focus,
.woocommerce-account input[type=email]:focus,
.woocommerce-account input[type=password]:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(42,35,32,.08)}
/* Fix: la regla de arriba (.woocommerce-account input[type=text]) se filtra al
   quantity del sidecart en páginas de cuenta. Lo restauramos a su look normal. */
.woocommerce-account .qty input[type=text]{padding:0;border:0;background:transparent;height:auto;box-shadow:none}
.woocommerce-account button.button,
.woocommerce-account button[name=login],
.woocommerce-account button[name=register],
.woocommerce-account .woocommerce-Button{background:var(--ink);color:var(--cream);border:0;border-radius:var(--r-pill);padding:.75rem 1.6rem;font-weight:600;cursor:pointer;font:inherit;transition:background var(--dur) var(--ease)}
.woocommerce-account button.button:hover,
.woocommerce-account button[name=login]:hover,
.woocommerce-account button[name=register]:hover{background:var(--wine-900)}
.woocommerce-account .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);margin-left:.6rem}
.woocommerce-account .lost_password{margin-top:var(--s3);font-size:var(--fs-sm)}
.woocommerce-account .lost_password a{color:var(--wine)}

/* Paginación — clase real de WordPress (.page-numbers.current) + layout flex */
.pagination .page-numbers.current{background:var(--wine);color:var(--cream);border-color:var(--wine)}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem}

/* Utilidad accesible estándar (WP la usa en varios sitios) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Galería de la ficha: apilar antes (≤768px) para no dejar hueco entre 561–768 */
@media (max-width:768px){
  .pdp .gallery{grid-template-columns:1fr}
  .pdp .gallery__thumbs{flex-direction:row;order:2;overflow-x:auto}
}

/* Contenido del artículo: no desbordar en móvil */
.article__body{overflow-wrap:break-word}
.article__body :is(pre,table){display:block;max-width:100%;overflow-x:auto}
.article__body :is(iframe,video,embed,img){max-width:100%}

/* Quitar spinner nativo del selector de cantidad (Firefox/Android) */
.qty input[type=text],.qty input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* Resumen del checkout en móvil: sin caja doble */
@media (max-width:980px){ .co-summary #order_review{background:transparent;border:0;padding:0} }