/* ============================================================
   ARENA — estilos compartidos (navbar + página de producto)
   Reutiliza las mismas variables, fuentes y navbar del main.html
   de la landing, para que todo el sitio se vea como una sola
   pieza.
   ============================================================ */

/* ============================================================
   Bloqueo de scroll durante las transiciones SPA — ver spa.js.
   En celular, si el usuario todavía tiene la página "deslizando"
   por inercia (soltó el dedo después de un scroll rápido) justo
   cuando toca un link o "Volver", ese deslizamiento seguía
   empujando el scroll incluso DESPUÉS de que nuestro código lo
   ponía en 0 — el navegador le ganaba la carrera a nuestro reset.
   Esta clase corta el scroll de raíz (overflow:hidden de verdad,
   no solo un scrollTo) mientras dura la transición, así no hay
   inercia que pueda seguir corriendo por encima.
   ============================================================ */
html.spa-scroll-lock,
html.spa-scroll-lock body{
  overflow:hidden !important;
  height:100% !important;
  overscroll-behavior:none;
}

/* ---- Fuentes locales Bolton (copia la carpeta /bolton al
   mismo nivel que este proyecto, igual que en la landing) ---- */
@font-face{
  font-family:"HelveticaNeue LightExt";
  src:url("../../helvetica-neue-55/HelveticaNeue-LightExt.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton Titling";
  src:url("../../bolton/BoltonTitling.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton Titling";
  src:url("../../bolton/BoltonTitlingBold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton";
  src:url("../../bolton/BoltonLight.ttf") format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton";
  src:url("../../bolton/Bolton.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton";
  src:url("../../bolton/BoltonBold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bolton Titling Elongated";
  src:url("../../bolton/BoltonTitlingElongated.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --cream:      #FFFFFF;
  --ink:        #16100D;
  --ink-soft:   #241B16;
  --line:       rgba(20,12,8,0.85);
  --white-warm: #FAF2E6;

  --pad-x: clamp(1.15rem, 2.4vw, 2rem);
  --header-h: 76px;

  --serif: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
[x-cloak]{ display:none !important; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
img, svg{ display:block; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ============ HEADER (idéntico al de la landing) ============ */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:stretch; height:var(--header-h);
  background:var(--cream); border-bottom:1px solid var(--line);
}
.header-cell{ display:flex; align-items:center; }
.logo-cell{ flex:0 0 auto; padding:0 var(--pad-x); }
.logo{
  font-family:var(--serif); font-weight:700; font-size:2.2rem; line-height:1;
  letter-spacing:0.02em; text-decoration:none; color:var(--ink); white-space:nowrap;
}
.nav-cell{ flex:1 1 auto; justify-content:flex-end; padding:0 var(--pad-x) 0 0; gap:2.5rem; min-width:0; }
.nav-link{
  font-size:0.795rem; font-weight:400; letter-spacing:0.055em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); display:inline-flex; align-items:center;
  gap:0.5rem; position:relative; padding:0.35rem 0; white-space:nowrap; transition:color .25s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0.1rem; width:0%; height:1px;
  background:currentColor; transition:width .3s ease;
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ width:100%; }
.nav-link .chev{ width:9px; height:9px; transition:transform .25s ease; }
.nav-link[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.dropdown-wrap{ position:relative; }
.dropdown-panel{
  position:absolute; top:calc(100% + 16px); left:-1.2rem; background:var(--cream);
  border:1px solid var(--line); min-width:220px; padding:0.5rem 0; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.dropdown-wrap.open .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a{
  display:block; padding:0.55rem 1.2rem; font-size:0.8rem; letter-spacing:0.02em;
  text-decoration:none; color:var(--ink-soft); transition:background .2s ease, color .2s ease;
}
.dropdown-panel a:hover{ background:rgba(20,12,8,0.06); color:var(--ink); }
.actions-cell{ flex:0 0 auto; gap:2.1rem; padding:0 1.9rem; border-left:1px solid var(--line); }
.icon-btn{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto; }
.icon-btn svg{ width:100%; height:100%; }
.cta-link{
  font-size:0.795rem; font-weight:400; letter-spacing:0.075em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); white-space:nowrap; position:relative;
}
.cta-link::after{ content:""; position:absolute; left:0; bottom:-5px; width:0%; height:1px; background:currentColor; transition:width .3s ease; }
.cta-link:hover::after{ width:100%; }
.cta-full{ display:inline; }
.menu-cell{ display:none; flex:0 0 auto; padding:0 2.5rem; border-left:1px solid var(--line); justify-content:center; }
.menu-btn{ font-size:0.795rem; font-weight:400; letter-spacing:0.075em; text-transform:uppercase; color:var(--ink); min-width:5ch; text-align:center; }

@media (max-width:960px){
  :root{ --header-h:62px; --pad-x:1.9rem; }
  .nav-cell{ display:none; }
  .logo-cell{ flex:1 1 auto; border-right:1px solid var(--line); padding:0 1.4rem 0 var(--pad-x); }
  .logo{ font-size:1.55rem; }
  .actions-cell{ border-left:none; gap:1.05rem; padding:0 1.35rem; justify-content:center; }
  .cta-full{ display:none; }
  .menu-cell{ display:flex; padding:0 1.6rem; }
  .cta-link, .menu-btn{ font-size:0.75rem; }
}

.mobile-menu{
  position:fixed; inset:0; top:var(--header-h); background:var(--cream); z-index:55;
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem;
  padding:2rem var(--pad-x) 3rem; transform:translateY(-100%); visibility:hidden;
}
.mobile-menu.open{ visibility:visible; transform:translateY(0); transition:transform .4s ease; }
.mobile-menu a{ font-family:var(--serif); font-weight:600; font-size:2.1rem; text-decoration:none; color:var(--ink); }
.mobile-menu .m-cta{
  margin-top:0.8rem; font-family:var(--sans); font-size:0.8rem; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:underline; text-underline-offset:5px; width:fit-content;
}

/* ============================================================
   PÁGINA DE PRODUCTO
   Layout de 2 columnas inspirado en la referencia (cocoonblanket):
   imagen fija a la izquierda, ficha en fondo claro a la derecha,
   bordes finos grises, tipografía grande, botón negro con precio.
   ============================================================ */
.pdp{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  min-height:calc(100svh - var(--header-h));
  background:#FFFFFF;
}

/* ---- Columna de imagen ---- */
.pdp-media{
  position:relative;
  background:#FFFFFF;
  border:1px solid rgba(20,12,8,0.08);
  overflow:hidden;
}
.pdp-media-sticky{
  position:sticky;
  top:var(--header-h);
  height:calc(100svh - var(--header-h));
  overflow:hidden;
}
.pdp-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%; object-fit:cover;
}
.pdp-thumbs{
  position:absolute;
  left:1.5rem; bottom:1.5rem;
  display:flex; gap:0.6rem;
  z-index:2;
}
.pdp-thumb{
  width:56px; height:72px;
  border:1px solid rgba(20,12,8,0.2);
  overflow:hidden;
  opacity:0.55;
  transition:opacity .25s ease, border-color .25s ease;
  cursor:pointer;
  background:#FFFFFF;
}
.pdp-thumb img{ opacity:1; transform:none; }
.pdp-thumb.is-active, .pdp-thumb:hover{ opacity:1; border-color:var(--ink); }

/* ---- Columna de info ---- */
.pdp-info{
  padding: clamp(2rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 4.25rem);
}

/* fila superior: breadcrumb a la izquierda, reseñas a la derecha
   (igual que "Collections — Bundle & Save" / "★★★★★ 129 Reviews") */
.pdp-back{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem;
  border:1px solid rgba(20,12,8,0.25);
  border-radius:50%;
  color:var(--ink);
  margin:0 0 1.6rem;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.pdp-back svg{ width:13px; height:10px; }
.pdp-back:hover{ background:var(--ink); color:var(--white-warm); border-color:var(--ink); }

.pdp-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1.9rem;
}
.pdp-breadcrumb{
  font-size:0.78rem;
  letter-spacing:0.02em;
  color:rgba(22,16,13,0.5);
  margin:0;
}
.pdp-breadcrumb a{ text-decoration:none; color:inherit; }
.pdp-breadcrumb a:hover{ color:var(--ink); }
.pdp-top-rating{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.78rem;
  color:rgba(22,16,13,0.6);
  text-decoration:none;
}
.pdp-top-rating .stars svg{ width:12px; height:12px; }

.pdp-title{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-0.01em;
  font-size:clamp(2.3rem, 3.6vw, 3.3rem);
  line-height:1.02;
  margin:0 0 1.15rem;
}

.pdp-desc{
  font-family:var(--serif);
  font-weight:500;
  font-size:0.95rem;
  line-height:1.65;
  color:rgba(22,16,13,0.62);
  max-width:32rem;
  margin:0 0 1.5rem;
}

.pdp-price-row{
  display:flex; align-items:baseline; gap:0.75rem;
  margin:0 0 1.9rem;
}
.pdp-price{ font-size:1.05rem; font-weight:400; }
.pdp-price-old{
  font-size:0.92rem;
  color:rgba(22,16,13,0.4);
  text-decoration:line-through;
}
.pdp-badge{
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--white-warm);
  padding:0.22rem 0.55rem;
  border-radius:999px;
}

.pdp-block{
  padding:1.3rem 0;
  border-top:1px solid rgba(20,12,8,0.1);
}
.pdp-block-label{
  font-size:0.78rem;
  color:rgba(22,16,13,0.75);
  margin:0 0 0.9rem;
}

.pdp-sizes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(3.4rem, 1fr));
  gap:0.55rem;
}
.pdp-size-btn{
  padding:0.75rem 0.6rem;
  border:1px solid rgba(20,12,8,0.28);
  font-size:0.85rem;
  letter-spacing:0.01em;
  background:transparent;
  color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pdp-size-btn.is-active{
  background:var(--ink);
  color:var(--white-warm);
  border-color:var(--ink);
}
.pdp-size-btn:hover:not(.is-active){ border-color:var(--ink); }

.pdp-spec-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
}
.pdp-spec-table td{
  padding:0.55rem 0;
  border-bottom:1px solid rgba(20,12,8,0.08);
}
.pdp-spec-table td:first-child{
  color:rgba(22,16,13,0.5);
  width:55%;
}
.pdp-spec-table tr:last-child td{ border-bottom:none; }

.pdp-qty-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:1.6rem;
}
.pdp-qty{
  display:flex; align-items:center;
  border:1px solid rgba(20,12,8,0.28);
  width:6.5rem;
  flex:0 0 auto;
  justify-content:space-between;
  padding:0 0.2rem;
}
.pdp-qty button{ width:2.2rem; height:3.1rem; font-size:1rem; }
.pdp-qty span{ font-size:0.9rem; }

.pdp-cta{
  flex:1;
  height:3.1rem;
  background:var(--ink);
  color:var(--white-warm);
  font-size:0.82rem;
  letter-spacing:0.03em;
  text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  gap:0.5rem;
  transition:opacity .25s ease;
  border:1px solid var(--ink);
}
.pdp-cta:hover{ opacity:0.85; }
.pdp-cta:disabled{ opacity:0.4; cursor:not-allowed; }
.pdp-cta-secondary{
  background:none;
  color:var(--ink);
  border-color:rgba(20,12,8,0.3);
}
.pdp-cta-secondary:hover{ opacity:1; border-color:var(--ink); }

.pdp-pay-error{
  margin-top:0.7rem;
  font-size:0.8rem;
  color:#8a2a1c;
}

.pdp-note{
  margin-top:0.9rem;
  font-size:0.78rem;
  color:rgba(22,16,13,0.45);
}

/* ---- entrada tipo Webflow (fade + slide) ---- */
.reveal{ opacity:0; transform:translateY(24px); }

/* ---- móvil: una sola columna, imagen arriba sin sticky ---- */
@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; }
  .pdp-media-sticky{ position:relative; top:0; height:70vh; }
  .pdp-info{ padding:2.25rem 1.35rem 3.5rem; }
  .pdp-sizes{ grid-template-columns:repeat(auto-fit, minmax(2.9rem, 1fr)); }
}
@media (max-width:600px){
  .pdp-media-sticky{ height:56vh; }
  .pdp-info{ padding:1.75rem 1.1rem 3rem; }
  .pdp-title{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .pdp-qty-row{ flex-wrap:wrap; }
  .pdp-qty{ width:100%; justify-content:center; }
  .pdp-cta{ width:100%; flex:1 1 100%; }
  .pdp-top-row{ gap:0.5rem; }
  .pdp-thumbs{ left:0.75rem; bottom:0.75rem; gap:0.4rem; }
  .pdp-thumb{ width:44px; height:58px; }
}

/* ============================================================
   TIENDA (listado de productos)
   ============================================================ */
.shop{ padding: clamp(2rem, 4vw, 3.5rem) var(--pad-x) 5rem; }

.shop-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(1.4rem, 2.6vw, 2.2rem);
}
.shop-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2rem, 4vw, 3rem); margin:0;
  letter-spacing:-0.01em;
}
.shop-count{
  margin:0;
  font-family:var(--sans);
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(22,16,13,0.5);
  white-space:nowrap;
}

.shop-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:clamp(1.8rem, 3vw, 2.6rem);
  padding-bottom:clamp(1.2rem, 2vw, 1.6rem);
  border-bottom:1px solid rgba(20,12,8,0.1);
}
.shop-search{
  display:flex;
  align-items:center;
  gap:0.6rem;
  width:min(100%, 22rem);
  padding:0.7rem 1.1rem;
  border:1px solid rgba(20,12,8,0.18);
  border-radius:999px;
  color:rgba(22,16,13,0.55);
  transition:border-color .25s ease;
}
.shop-search:focus-within{ border-color:var(--ink); color:var(--ink); }
.shop-search svg{ width:17px; height:17px; flex:none; }
.shop-search input{
  border:none; outline:none; background:none;
  width:100%;
  font-family:var(--sans);
  font-size:0.88rem;
  color:var(--ink);
}
.shop-search input::placeholder{ color:rgba(22,16,13,0.4); }

.shop-pills{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.shop-pill{
  padding:0.6rem 1.35rem;
  border:1px solid rgba(20,12,8,0.28);
  border-radius:999px;
  font-family:var(--sans);
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.07em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.shop-pill:hover{ border-color:var(--ink); }
.shop-pill.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.shop-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem 1rem;
}
.shop-card{ text-decoration:none; color:var(--ink); }
.shop-card-media{
  aspect-ratio:400/520; overflow:hidden; background:#FFFFFF; border:1px solid rgba(20,12,8,0.08); margin-bottom:0.9rem;
  transition:border-color .3s ease;
}
.shop-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.shop-card:hover .shop-card-media{ border-color:rgba(20,12,8,0.22); }
.shop-card:hover .shop-card-media img{ transform:scale(1.045); }
.shop-card-title{ font-size:0.95rem; margin:0 0 0.25rem; }
.shop-card-price{ font-size:0.85rem; color:rgba(22,16,13,0.6); margin:0; }

.shop-empty{
  padding:3rem 1rem;
  text-align:center;
  font-family:var(--sans);
  font-size:0.95rem;
  color:rgba(22,16,13,0.55);
}

@media (max-width:900px){ .shop-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:620px){
  .shop-head{ flex-direction:column; align-items:flex-start; gap:0.35rem; }
  .shop-toolbar{ flex-direction:column; align-items:stretch; }
  .shop-search{ width:100%; }
}
@media (max-width:520px){
  .shop{ padding:1.5rem 1rem 3.5rem; }
  .shop-grid{ grid-template-columns:1fr; gap:1.5rem; }
}

/* ============================================================
   ACORDEÓN de detalles (debajo de la ficha, dentro de .pdp-info)
   ============================================================ */
.pdp-accordion{ margin-top:0.5rem; }
.pdp-accordion-item{ border-top:1px solid rgba(20,12,8,0.15); }
.pdp-accordion-item:last-child{ border-bottom:1px solid rgba(20,12,8,0.15); }
.pdp-accordion-btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0;
  font-size:0.88rem;
  letter-spacing:0.01em;
  text-align:left;
}
.pdp-accordion-btn svg{
  width:11px; height:11px;
  flex:0 0 auto;
  transition:transform .25s ease;
}
.pdp-accordion-item.is-open .pdp-accordion-btn svg{ transform:rotate(180deg); }
.pdp-accordion-body{
  overflow:hidden;
  font-size:0.86rem;
  line-height:1.65;
  color:var(--ink-soft);
}
.pdp-accordion-body-inner{ padding:0 0 1.25rem; }
.pdp-accordion-body p{ margin:0 0 0.6rem; }
.pdp-accordion-body p:last-child{ margin-bottom:0; }

/* ============================================================
   TAMBIÉN TE PUEDE GUSTAR (relacionados, debajo de la ficha)
   ============================================================ */
.pdp-related{
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) clamp(3rem, 5vw, 4.5rem);
  border-top:1px solid rgba(20,12,8,0.1);
  background:#FFFFFF;
}
.pdp-related-title{
  font-family:var(--sans);
  font-size:0.85rem;
  font-weight:400;
  letter-spacing:0.11em;
  text-transform:uppercase;
  margin:0 0 1.6rem;
}
.pdp-related-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem 1rem;
}
@media (max-width:900px){ .pdp-related-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .pdp-related-grid{ grid-template-columns:1fr; } }

/* ============================================================
   RESEÑAS
   ============================================================ */
.pdp-reviews{
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) clamp(3.5rem, 6vw, 5.5rem);
  max-width:52rem;
  border-top:1px solid rgba(20,12,8,0.1);
  background:#FFFFFF;
}
.pdp-reviews-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  margin-bottom:2.25rem;
}
.pdp-reviews-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.6rem, 2.4vw, 2.1rem);
  margin:0;
}
.pdp-reviews-summary{
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.stars{ display:inline-flex; gap:2px; color:var(--ink); }
.stars svg{ width:14px; height:14px; }
.stars .star-empty{ opacity:0.25; }

.pdp-review-toggle{
  border:1px solid rgba(20,12,8,0.55);
  padding:0.6rem 1.3rem;
  font-size:0.78rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.pdp-review-toggle:hover{ background:var(--ink); color:var(--white-warm); }

.pdp-review-form{
  border:1px solid rgba(20,12,8,0.18);
  padding:1.5rem;
  margin-bottom:2.25rem;
}
.pdp-review-form label{
  display:block;
  font-size:0.75rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(22,16,13,0.6);
  margin:0 0 0.4rem;
}
.pdp-review-form .field{ margin-bottom:1.1rem; }
.pdp-review-form input[type="text"],
.pdp-review-form textarea{
  width:100%;
  border:1px solid rgba(20,12,8,0.35);
  background:var(--white-warm);
  font-family:var(--sans);
  font-size:0.9rem;
  padding:0.65rem 0.75rem;
}
.pdp-review-form textarea{ min-height:6rem; resize:vertical; }
.star-input{ display:flex; gap:0.35rem; }
.star-input button{ font-size:1.4rem; line-height:1; color:rgba(20,12,8,0.3); }
.star-input button.is-active{ color:var(--ink); }
.pdp-review-form .submit-btn{
  background:var(--ink); color:var(--white-warm);
  padding:0.75rem 1.6rem;
  font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase;
}

.review-card{
  padding:1.4rem 0;
  border-top:1px solid rgba(20,12,8,0.12);
}
.review-card:first-of-type{ border-top:none; }
.review-card-head{
  display:flex; align-items:center; gap:0.75rem;
  margin-bottom:0.4rem;
}
.review-card-name{ font-size:0.9rem; font-weight:500; }
.review-card-date{ font-size:0.78rem; color:rgba(22,16,13,0.5); }
.review-card p{ margin:0.5rem 0 0; font-size:0.9rem; line-height:1.6; color:var(--ink-soft); }
.pdp-reviews-empty{ font-size:0.9rem; color:rgba(22,16,13,0.55); }

/* ============================================================
   CORTINA de transición entre páginas (ver assets/js/spa.js).
   Implementada con TRANSICIONES CSS puras (no GSAP): el navegador
   garantiza que terminan solas, sin depender de que ninguna
   promesa de JS se resuelva — es la forma más a prueba de fallos
   de animar esto. Un panel sube desde abajo, el logo aparece a la
   vez, y sigue de largo hacia arriba saliendo por completo.
   ============================================================ */
.page-curtain{
  position:fixed;
  inset:0;
  z-index:500;
  overflow:hidden;
  pointer-events:none;
}
.curtain-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:#FFFFFF;
  border-top:1px solid rgba(20,12,8,0.06);
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.curtain-panel.is-covering{ transform:translateY(0%); }
.curtain-panel.is-leaving{ transform:translateY(-100%); }
.curtain-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing:0.06em;
  color:var(--ink);
  opacity:0;
  transition:opacity .3s ease;
  white-space:nowrap;
  z-index:1;
}
.curtain-logo.is-visible{ opacity:1; }

/* ============ FOOTER ============ */
.site-footer{
  background:var(--cream);
  color:var(--ink);
  padding:0 var(--pad-x);
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:2.75rem clamp(2rem,6vw,5.5rem);
  padding:4.5rem 0 3rem;
}
.footer-col{
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  min-width:140px;
}
.footer-label{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.5;
  margin-bottom:0.15rem;
}
.footer-col a{
  font-family:var(--sans);
  font-size:0.82rem;
  letter-spacing:0.03em;
  color:var(--ink);
  text-decoration:none;
  opacity:0.88;
  transition:opacity .2s ease;
  width:fit-content;
}
.footer-col a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.footer-wordmark{
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:-0.01em;
  font-size:clamp(3.2rem, 11vw, 7.5rem);
  line-height:0.85;
  color:var(--ink);
  padding:0.5rem 0 2.75rem;
}
.footer-bottom{
  border-top:1px solid var(--line);
  padding:1.35rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:0.85rem 2rem;
  justify-content:space-between;
  align-items:center;
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.02em;
  color:rgba(22,16,13,0.68);
}
.footer-bottom-links{ display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; }
.footer-bottom a{ color:inherit; text-decoration:none; }
.footer-bottom a:hover{ text-decoration:underline; }
.footer-credit{ opacity:0.85; }

@media (max-width:720px){
  .footer-top{ justify-content:flex-start; }
  .footer-wordmark{ font-size:clamp(2.6rem, 20vw, 4.2rem); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}


/* ============ MODAL: datos del cliente antes de pagar ============ */
.pdp-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(22,16,13,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
}
.pdp-modal{
  background:#fff; border-radius:14px;
  width:100%; max-width:420px;
  max-height:90vh; overflow-y:auto;
  padding:2rem 1.8rem 1.8rem;
  position:relative;
}
.pdp-modal-close{
  position:absolute; top:1rem; right:1rem;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:none;
  font-size:0.85rem; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.pdp-modal-title{
  font-family:var(--serif); font-weight:700; font-size:1.3rem;
  margin:0 0 0.3rem;
}
.pdp-modal-sub{
  font-family:var(--sans); font-size:0.85rem;
  color:rgba(22,16,13,0.6); margin:0 0 1.3rem;
}
.pdp-modal-field{ display:flex; flex-direction:column; gap:0.35rem; margin-bottom:0.9rem; }
.pdp-modal-field label{ font-size:0.78rem; color:rgba(22,16,13,0.65); }
.pdp-modal-field input{
  padding:0.6rem 0.75rem; border:1px solid var(--line);
  border-radius:8px; font-family:var(--sans); font-size:0.9rem; color:var(--ink);
}
.pdp-modal-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.pdp-modal-row .pdp-modal-field{ margin-bottom:0.9rem; }
.pdp-modal-error{
  font-family:var(--sans); font-size:0.8rem; color:#b3261e;
  margin:0 0 0.8rem;
}
@media (max-width:480px){
  .pdp-modal-row{ grid-template-columns:1fr; }
}

/* ============ CARRITO: botón del header ============ */
.cart-cell{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 2rem;
}
.cart-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:none; border:none; color:var(--ink); cursor:pointer;
}
.cart-btn svg{ width:100%; height:100%; }
.cart-badge{
  position:absolute; top:-8px; right:-10px;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--ink); color:var(--cream, #fff);
  font-family:var(--sans); font-size:0.62rem; font-weight:700;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}
@media (max-width:960px){
  .cart-cell{ padding:0 1.6rem; order:2; border-left:1px solid var(--line); }
  .menu-cell{ order:3; }
  .logo-cell{ order:1; }
}

/* ============ CARRITO: drawer ============ */
.cart-overlay{
  position:fixed; inset:0; z-index:590;
  background:rgba(22,16,13,0.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:591;
  width:min(420px, 100vw);
  background:var(--cream, #fff);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:-8px 0 30px rgba(0,0,0,0.08);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 1.6rem 1.1rem;
  border-bottom:1px solid var(--line);
}
.cart-drawer-head h2{
  font-family:var(--serif); font-weight:700; font-size:1.25rem; margin:0;
}
.cart-drawer-close{
  background:none; border:none; font-size:1rem; color:var(--ink); cursor:pointer;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
}
.cart-drawer-body{
  flex:1; overflow-y:auto;
  padding:1rem 1.6rem;
}
.cart-empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0.8rem; color:rgba(22,16,13,0.55);
  font-family:var(--sans); font-size:0.9rem;
}
.cart-empty-link{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.cart-line{
  display:flex; gap:0.9rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.cart-line-img{
  width:68px; height:88px; object-fit:cover; flex-shrink:0;
  background:rgba(20,12,8,0.04);
}
.cart-line-info{ flex:1; min-width:0; }
.cart-line-title{
  font-family:var(--sans); font-size:0.85rem; font-weight:500; margin:0 0 0.2rem;
  line-height:1.3;
}
.cart-line-talla{ font-size:0.75rem; color:rgba(22,16,13,0.5); margin:0 0 0.5rem; }
.cart-line-qty{
  display:inline-flex; align-items:center; gap:0.7rem;
  border:1px solid var(--line); padding:0.2rem 0.6rem;
  font-family:var(--sans); font-size:0.8rem;
}
.cart-qty-btn{
  background:none; border:none; cursor:pointer; color:var(--ink);
  font-size:0.95rem; width:16px; line-height:1;
}
.cart-line-right{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
  flex-shrink:0;
}
.cart-line-price{ font-family:var(--sans); font-size:0.83rem; font-weight:600; white-space:nowrap; }
.cart-line-remove{
  background:none; border:none; color:rgba(22,16,13,0.4); cursor:pointer;
  font-size:0.75rem; padding:0.2rem;
}
.cart-line-remove:hover{ color:var(--ink); }
.cart-drawer-foot{
  padding:1.3rem 1.6rem 1.6rem;
  border-top:1px solid var(--line);
}
.cart-drawer-total{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--sans); margin-bottom:1rem;
}
.cart-drawer-total span:first-child{ font-size:0.85rem; color:rgba(22,16,13,0.6); }
.cart-drawer-total span:last-child{ font-family:var(--serif); font-weight:700; font-size:1.3rem; }
.cart-drawer-checkout{
  display:flex; align-items:center; justify-content:center;
  height:3rem; width:100%;
  background:var(--ink); color:var(--white-warm, #fff);
  font-family:var(--sans); font-size:0.82rem; letter-spacing:0.03em;
  text-decoration:none;
  transition:opacity .2s ease;
}
.cart-drawer-checkout:hover{ opacity:0.85; }
body.cart-lock-scroll{ overflow:hidden; }

/* ============ WHATSAPP FLOTANTE ============ */
.whatsapp-float{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:400;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,0.4);
  transition:transform .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.06); }
.whatsapp-float svg{ width:28px; height:28px; }
@media (max-width:600px){
  .whatsapp-float{ right:1rem; bottom:1rem; width:48px; height:48px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}

/* ============ TIENDA: botón de agregar rápido en la tarjeta ============ */
.shop-card-wrap{ position:relative; }
.shop-card-add{
  position:absolute; top:0.7rem; right:0.7rem; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.92); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
  opacity:0; transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.shop-card-add svg{ width:16px; height:16px; }
.shop-card-wrap:hover .shop-card-add{ opacity:1; transform:translateY(0); }
.shop-card-add:hover{ background:var(--ink); color:#fff; }
@media (max-width:900px){
  .shop-card-add{ opacity:1; transform:none; }
}

/* ============ PDP: nota de agregado ============ */
.pdp-cta-nota{
  font-family:var(--sans); font-size:0.8rem; color:#1f7a3f;
  margin:0.6rem 0 0;
}

/* ============ CHECKOUT ============ */
.checkout{
  max-width:1180px;
  margin:0 auto;
  padding:2.6rem var(--pad-x) 5rem;
}
.checkout-empty{
  text-align:center;
  padding:5rem 1rem;
}
.checkout-empty h1{ font-family:var(--serif); font-weight:700; font-size:1.8rem; margin:0 0 0.6rem; }
.checkout-empty p{ font-family:var(--sans); color:rgba(22,16,13,0.6); margin:0; }
.checkout-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:4rem;
  align-items:start;
}
.checkout-eyebrow{
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(22,16,13,0.45); margin:0 0 0.5rem;
}
.checkout-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem, 3vw, 2.1rem);
  margin:0 0 2rem;
}
.checkout-field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.2rem; }
.checkout-field label{ font-family:var(--sans); font-size:0.8rem; color:rgba(22,16,13,0.65); }
.checkout-opcional{ color:rgba(22,16,13,0.4); font-weight:400; }
.checkout-field input, .checkout-field select{
  height:2.9rem; padding:0 0.9rem;
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:0.9rem; color:var(--ink);
  background:#fff;
}
.checkout-field select{ cursor:pointer; }
.checkout-field input:disabled{ background:rgba(20,12,8,0.03); color:rgba(22,16,13,0.45); }
.checkout-field select:disabled{ background:rgba(20,12,8,0.03); color:rgba(22,16,13,0.35); cursor:not-allowed; }
.checkout-field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;
}
.checkout-error{
  font-family:var(--sans); font-size:0.83rem; color:#b3261e;
  margin:0 0 1.2rem;
}
.checkout-pagar-mobile{ display:none; width:100%; margin-top:0.5rem; }

/* ── Resumen tipo carrito, a la derecha, pegado (sticky) ── */
.checkout-summary-col{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.checkout-summary{
  border:1px solid var(--line);
  padding:1.8rem;
}
.checkout-summary h2{
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
  margin:0 0 1.3rem;
}
.checkout-summary-items{
  max-height:360px; overflow-y:auto;
  margin-bottom:1.3rem;
}
.checkout-summary-line{
  display:flex; gap:0.85rem; align-items:flex-start;
  padding:0.85rem 0;
  border-bottom:1px solid var(--line);
}
.checkout-summary-line:first-child{ padding-top:0; }
.checkout-summary-line img{
  width:56px; height:72px; object-fit:cover; flex-shrink:0;
  background:rgba(20,12,8,0.04);
}
.checkout-summary-info{ flex:1; min-width:0; }
.checkout-summary-title{
  font-family:var(--sans); font-size:0.83rem; font-weight:500;
  margin:0 0 0.25rem; line-height:1.3;
}
.checkout-summary-meta{ font-family:var(--sans); font-size:0.75rem; color:rgba(22,16,13,0.5); margin:0; }
.checkout-summary-price{ font-family:var(--sans); font-size:0.82rem; font-weight:600; white-space:nowrap; }
.checkout-summary-totals{
  padding-top:0.3rem;
  margin-bottom:1.4rem;
}
.checkout-summary-row{
  display:flex; justify-content:space-between;
  font-family:var(--sans); font-size:0.85rem; color:rgba(22,16,13,0.65);
  padding:0.4rem 0;
}
.checkout-summary-total{
  border-top:1px solid var(--ink);
  margin-top:0.4rem; padding-top:0.8rem;
  color:var(--ink); font-weight:600;
}
.checkout-summary-total span:last-child{ font-family:var(--serif); font-size:1.15rem; font-weight:700; }
.checkout-pagar-desktop{ width:100%; }

@media (max-width:900px){
  .checkout{ padding:1.8rem 1.3rem 4rem; }
  .checkout-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .checkout-field-row{ grid-template-columns:1fr; gap:0; }
  .checkout-summary-col{ position:static; order:-1; }
  .checkout-summary-items{ max-height:none; }
  .checkout-pagar-desktop{ display:none; }
  .checkout-pagar-mobile{ display:flex; }
}