/* ============================================================
   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:"HN Black";
  src:url("../../helvetica-neue-55/HelveticaNeue-Black.otf") format("opentype");
  font-weight:900; font-style:normal; font-display:swap;
}
@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:"HN Black", "Helvetica Neue", "Arial Black", Arial, sans-serif; font-weight:900; font-size:2.2rem; line-height:1;
  letter-spacing:-0.01em; 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; }
}

/* Menú móvil: se anima SOLO con transiciones CSS (clase .open). Antes lo
   movía GSAP y, al leer el translateY(-100%) del CSS como píxeles, lo
   dejaba corrido ~800px hacia arriba: "abría" pero no se veía. El
   header (z-index 60) queda por encima; el menú (55) cubre la página. */
.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;
  transition:transform .45s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s;
}
.mobile-menu.open{
  visibility:visible; transform:translateY(0);
  transition:transform .45s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.mobile-menu a{
  font-family:var(--serif); font-weight:600; font-size:2.1rem; text-decoration:none; color:var(--ink);
  opacity:0; transform:translateY(18px);
  transition:opacity .4s ease, transform .4s ease;
}
.mobile-menu.open a{ opacity:1; transform:none; }
.mobile-menu.open a:nth-child(1){ transition-delay:.12s; }
.mobile-menu.open a:nth-child(2){ transition-delay:.18s; }
.mobile-menu.open a:nth-child(3){ transition-delay:.24s; }
.mobile-menu.open a:nth-child(4){ transition-delay:.30s; }
.mobile-menu.open a:nth-child(5){ transition-delay:.36s; }
html.menu-open, html.menu-open body{ overflow:hidden; }
html.menu-open .whatsapp-float{ display:none; }
/* Botón de cerrar bien visible mientras el menú móvil está abierto */
html.menu-open .site-header{ z-index:700; }
html.menu-open .menu-btn{ font-weight:700; color:var(--ink); }
.menu-btn .menu-x{ font-size:0.95em; margin-right:0.3em; }
.mobile-close{
  position:absolute; top:1rem; right:1.2rem; width:3rem; height:3rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:var(--cream);
}
.mobile-close svg{ width:18px; height:18px; }
@media (min-width:961px){ .mobile-menu{ display:none; } }
.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(100vh - var(--header-h));   /* respaldo para navegadores sin svh */
  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(100vh - var(--header-h));       /* respaldo para navegadores sin svh */
  height:calc(100svh - var(--header-h));
  overflow:hidden;
}
.pdp-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%; object-fit:contain;   /* la foto se ve COMPLETA, sin recortes */
}
/* zoom: suave, y sin menú de "guardar imagen" al mantener el dedo */
.pdp-media-sticky{ background:#FFFFFF; cursor:zoom-in; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:pan-y; }
.pdp-media-sticky > img{ transition:transform .25s ease; will-change:transform; -webkit-touch-callout:none; }
/* zoom: el punto de zoom (--zx / --zy) lo actualiza pdp.js; la foto NUNCA se recorta en reposo (contain) */
.pdp-media-sticky > img.pdp-slide{ transform-origin:var(--zx, 50%) var(--zy, 50%); }
.pdp-media-sticky.is-zoom > img.pdp-slide.is-active{ transform:scale(2.2); }
/* slides: todas apiladas, solo la activa es visible (sin depender de display:none) */
.pdp-media-sticky > img.pdp-slide{ opacity:0; visibility:hidden; z-index:0; pointer-events:none; transition:opacity .4s ease, visibility 0s linear .4s, transform .25s ease; }
.pdp-media-sticky > img.pdp-slide.is-active{ opacity:1; visibility:visible; z-index:1; transition:opacity .4s ease, visibility 0s, transform .25s ease; }
.pdp-media{ display:flex; }                 /* miniaturas | foto principal */
.pdp-media-sticky{ flex:1 1 auto; min-width:0; position:sticky; }
/* miniaturas AFUERA de la foto: columna al lado en computador */
.pdp-thumbs{
  flex:0 0 auto;
  display:flex; flex-direction:column; gap:0.6rem;
  padding:0.85rem;
  background:#FFFFFF;
  border-right:1px solid rgba(20,12,8,0.08);
  overflow-y:auto;
  max-height:calc(100svh - var(--header-h));
}
.pdp-thumb{
  position:relative;              /* para que la foto se quede dentro de su cuadrito */
  width:60px; height:80px;
  flex:0 0 auto;
  border:1px solid rgba(20,12,8,0.15);
  overflow:hidden;
  opacity:0.6;
  transition:opacity .25s ease, box-shadow .25s ease;
  cursor:pointer;
  background:#FFFFFF;
}
.pdp-thumb img{ opacity:1; transform:none; object-fit:contain; }   /* miniaturas completas, sin recorte */
.pdp-thumb.is-active, .pdp-thumb:hover{
  opacity:1;
  border-color:#FFFFFF;
  box-shadow:0 0 0 1px var(--ink);
}

/* flechas para pasar de foto */
.pdp-arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(20,12,8,0.15);
  background:rgba(255,255,255,0.85);
  color:var(--ink);
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.pdp-arrow{ cursor:pointer; touch-action:manipulation; }
.pdp-arrow:hover{ background:#FFFFFF; }
.pdp-arrow svg{ width:10px; height:16px; }
.pdp-arrow-prev{ left:1rem; }
.pdp-arrow-next{ right:1rem; }

/* ---- 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:"HN Black", "Helvetica Neue", "Arial Black", Arial, sans-serif;
  font-weight:900; font-synthesis:none;
  letter-spacing:-0.02em;
  font-size:clamp(2rem, 3.2vw, 2.9rem);
  line-height:1.05;
  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); }
.pdp .reveal, .pdp-related.reveal, .pdp-reviews.reveal{ transform:none; }

/* ---- móvil: una sola columna, imagen arriba sin sticky ---- */
@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; }
  .pdp-media{ flex-direction:column; }
  .pdp-media-sticky{ position:relative; top:0; height:70vh; flex:none; order:1; }
  .pdp-thumbs{ order:2; flex-direction:row; flex-wrap:wrap; justify-content:center; max-height:none; overflow:visible; border-right:0; border-top:1px solid rgba(20,12,8,0.08); padding:0.75rem; }
  .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.7rem, 7vw, 2.3rem); }
  .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{ gap:0.4rem; padding:0.6rem; }
  .pdp-thumb{ width:46px; height:62px; }
  .pdp-arrow{ width:36px; height:36px; }
  .pdp-arrow-prev{ left:0.6rem; }
  .pdp-arrow-next{ right:0.6rem; }
}

/* ============================================================
   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:"ARENA Titulos", var(--serif); font-weight:400; font-synthesis:none;
  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-back{
  display:inline-flex; align-items:center; gap:0.55rem;
  margin:0 0 1.4rem;
  font-family:var(--sans); font-size:0.75rem; letter-spacing:0.07em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  position:relative; padding-bottom:2px;
}
.shop-back svg{ width:16px; height:10px; transition:transform .25s ease; }
.shop-back:hover svg{ transform:translateX(-4px); }
.shop-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; }
.shop-select{
  appearance:none; -webkit-appearance:none;
  padding:0.6rem 2.1rem 0.6rem 1.15rem;
  border:1px solid rgba(20,12,8,0.28); border-radius:999px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316100D' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.95rem center;
  font-family:var(--sans); font-size:0.75rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink);
  cursor:pointer; transition:border-color .25s ease;
}
.shop-select:hover, .shop-select:focus{ border-color:var(--ink); outline:none; }
.shop-clear{
  padding:0.6rem 1rem; font-family:var(--sans); font-size:0.72rem; letter-spacing:0.07em;
  text-transform:uppercase; color:rgba(22,16,13,0.6); text-decoration:underline; text-underline-offset:4px;
}
.shop-clear:hover{ color:var(--ink); }
.shop-pills{ display:flex; flex-wrap:wrap; gap:0.6rem; }
button.shop-pill{ background:none; cursor:pointer; }
.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); }
/* Títulos de producto: Helvetica Neue Black (la misma de los títulos grandes). */
.shop-card-title{
  font-family:"HN Black", "Helvetica Neue", "Arial Black", Arial, sans-serif;
  font-weight:900; font-synthesis:none;
  letter-spacing:-0.005em; line-height:1.25;
  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%; }
  .shop-filters{ gap:0.5rem; }
  .shop-select{ flex:1 1 9rem; }
}
@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; }
/* Logo de imagen (reemplaza el texto "ARENA") */
.logo{ display:flex; align-items:center; }
.logo img{ display:block; height:1.8rem; width:auto; }
.curtain-logo img{ display:block; width:clamp(9.5rem, 24vw, 16rem); height:auto; }
.footer-wordmark img{ display:block; width:clamp(15rem, 40vw, 32rem); height:auto; }
@media (max-width:900px){ .logo img{ height:1.4rem; } }


/* ============ 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:"HN Black", "Helvetica Neue", "Arial Black", Arial, sans-serif; /* igual al logo del nav */
  font-weight:900;
  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; }
}

/* Tipografía: la original de ARENA — Helvetica Neue Black en títulos y
   nombres de producto, DM Sans en el resto. */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.shop-card-price, .pdp-price, .pdp-price-old, .cart-line-price, .checkout-summary-price{ font-variant-numeric:tabular-nums; }

/* ---------- Catálogo ---------- */
.shop-count{ font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(22,16,13,0.45); }
.shop-card-media{ border:0; background:#F6F4F1; margin-bottom:1rem; }
.shop-card:hover .shop-card-media{ border-color:transparent; }
.shop-card-title{ margin:0 0 0.35rem; }
.shop-card-price{ font-size:0.82rem; font-weight:500; letter-spacing:0.02em; color:rgba(22,16,13,0.55); }

/* ---------- Ficha de producto ---------- */
.pdp-media, .pdp-media-sticky, .pdp-thumbs{ background:#F6F4F1; }
.pdp-media{ border:0; }
.pdp-thumbs{ border-right:0; gap:0.5rem; }
.pdp-thumb{ border:0; opacity:0.5; background:#FFFFFF; }
.pdp-thumb.is-active, .pdp-thumb:hover{ opacity:1; box-shadow:0 0 0 1px var(--ink); }
.pdp-info{ padding:clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 5rem); max-width:46rem; }
.pdp-back{ width:2.4rem; height:2.4rem; margin-bottom:1.4rem; border-color:rgba(20,12,8,0.18); }
.pdp-top-row{ margin-bottom:1.6rem; }
.pdp-breadcrumb{ font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(22,16,13,0.45); }
.pdp-top-rating{ font-size:0.72rem; letter-spacing:0.02em; }
.pdp-title{ margin:0 0 1rem; }
.pdp-desc{ font-family:var(--sans); font-weight:400; font-size:0.95rem; line-height:1.7; color:rgba(22,16,13,0.6); max-width:30rem; margin:0 0 1.75rem; }
.pdp-price-row{ margin:0 0 2rem; padding-bottom:2rem; border-bottom:1px solid rgba(20,12,8,0.1); align-items:center; }
.pdp-price{ font-size:1.4rem; font-weight:500; letter-spacing:-0.01em; }
.pdp-price-old{ font-size:0.95rem; }
.pdp-badge{ font-size:0.62rem; letter-spacing:0.14em; padding:0.28rem 0.7rem; }
.pdp-block{ padding:0 0 1.75rem; border-top:0; }
.pdp-block-label{ font-size:0.68rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(22,16,13,0.55); margin:0 0 0.9rem; }
.pdp-block-label span{ color:var(--ink); }
.pdp-sizes{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.pdp-size-btn{ min-width:3.5rem; height:3rem; padding:0 1rem; border:1px solid rgba(20,12,8,0.2); font-size:0.85rem; font-weight:500; }
.pdp-qty-row{ margin-top:0; gap:0.6rem; }
.pdp-qty{ width:7rem; height:3.4rem; border-color:rgba(20,12,8,0.2); }
.pdp-qty button{ height:3.4rem; }
.pdp-cta{ flex:1 1 0; min-width:0; height:3.4rem; font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; }
.pdp-cta-secondary{ flex:1 1 100%; height:3.1rem; border-color:rgba(20,12,8,0.2); }
.pdp-note{ font-size:0.74rem; line-height:1.6; margin-top:1.1rem; }
.pdp-accordion{ margin-top:1.75rem; }
.pdp-accordion-item{ border-top-color:rgba(20,12,8,0.1); }
.pdp-accordion-item:last-child{ border-bottom-color:rgba(20,12,8,0.1); }
.pdp-accordion-btn{ padding:1.2rem 0; font-size:0.7rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; }
@media (max-width:900px){
  .pdp-media, .pdp-media-sticky, .pdp-thumbs{ background:#F6F4F1; }
  .pdp-info{ max-width:none; }
}
@media (max-width:520px){
  .pdp-cta{ font-size:0.66rem; letter-spacing:0.08em; padding:0 0.5rem; text-align:center; }
}

/* Todos los títulos con la misma fuente: Helvetica Neue Black */
.shop-title{
  font-family:"HN Black", "Helvetica Neue", "Arial Black", Arial, sans-serif;
  font-weight:900; font-synthesis:none; letter-spacing:-0.02em; line-height:1.05;
}


/* ============ STOCK: tallas agotadas, aviso de escasez y carrito ============ */
.pdp-size-btn.is-soldout,
.pdp-size-btn:disabled{
  color:rgba(22,16,13,0.35);
  border-color:rgba(20,12,8,0.12);
  background:linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(20,12,8,0.28) 50%, transparent calc(50% + 0.5px));
  cursor:not-allowed;
}
.pdp-size-btn.is-soldout:hover,
.pdp-size-btn:disabled:hover{ border-color:rgba(20,12,8,0.12); }
.pdp-stock-note{
  font-family:var(--sans); font-size:0.78rem; letter-spacing:0.02em;
  color:#9a3412; margin:0.8rem 0 0;
}
.pdp-qty button:disabled{ opacity:0.3; cursor:not-allowed; }

.shop-card-media{ position:relative; }
.shop-card-media.is-agotado img{ filter:grayscale(1); opacity:0.55; }
.shop-card-agotado{
  position:absolute; left:0.7rem; bottom:0.7rem;
  background:var(--ink); color:#fff;
  font-family:var(--sans); font-size:0.62rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  padding:0.35rem 0.7rem;
}

.cart-aviso{
  position:relative; margin:0 0 1rem; padding:0.8rem 2.2rem 0.8rem 0.9rem;
  background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  font-family:var(--sans); font-size:0.78rem; line-height:1.5;
}
.cart-aviso p{ margin:0 0 0.35rem; }
.cart-aviso p:last-of-type{ margin-bottom:0; }
.cart-aviso-x{
  position:absolute; top:0.45rem; right:0.55rem; border:0; background:none;
  color:inherit; cursor:pointer; font-size:0.85rem; line-height:1;
}
.cart-qty-btn:disabled{ opacity:0.3; cursor:not-allowed; }

.checkout-avisos{
  margin:0 0 1rem; padding:0.85rem 1rem;
  background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12;
  font-family:var(--sans); font-size:0.82rem; line-height:1.5;
}
.checkout-avisos p{ margin:0 0 0.3rem; }
.checkout-avisos p:last-child{ margin-bottom:0; }