/* ============================================================
   styles.css — Estilos de Molles Tecnofix
   ------------------------------------------------------------
   Tema oscuro "navy & gold" (azul noche + dorado), aprobado como
   diseño definitivo del catálogo. Organizado por secciones que
   siguen el mismo orden que los bloques del index.html:

   1. Variables globales y reseteo
   2. Encabezado (header)
   3. Menú lateral de categorías
   4. Barra de banner (envíos)
   5. Contenedor principal y grilla
   6. Filas horizontales por categoría (vista "Recomendados")
   7. Barra de búsqueda y orden (toolbar)
   8. Tarjeta de producto (card)
   9. Carrusel de imágenes dentro de la tarjeta
   10. Pie de página (footer)
   11. Página de detalle de producto (producto.html)
   ============================================================ */

/* -------------------- 1. Variables y reseteo -------------------- */
:root{
  --bg:#0d1826; --panel:#132132; --panel2:#1a2c42; --line:#25384f;
  --ink:#eef3f8; --ink-dim:#9fb0c2; --gold:#d4af5a; --gold-dim:#8a733c;
  --wa:#25d366; --wa-dark:#1aa64f; --ink-soft:#c5d1dd;
  /* Escala de espaciado (grilla de 8px) */
  --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px;
  --radius:16px; --radius-sm:8px;
  /* --pad: gutter lateral (16 mobile / 24 desktop). --gutter alinea los
     bloques full-bleed (header, banner, menú) con el contenido de 1100px. */
  --pad:var(--s-2);
  --gutter:max(var(--pad), calc((100% - 1100px) / 2 + var(--pad)));
  --media-bg:#f8fafc; --wa-hi:#2fe073;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.5}
h1,h2,.brand{font-family:'Space Grotesk',sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.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}

/* -------------------- 2. Encabezado -------------------- */
header{padding:var(--s-2) var(--gutter);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,24,38,.94);backdrop-filter:blur(6px);z-index:10;
  display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.menu-btn{flex:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2}
.header-text{flex:1;min-width:140px}
.brand{font-size:22px;font-weight:700;letter-spacing:.2px;display:inline-block}
.brand span{color:var(--gold)}
.tag{color:var(--ink-dim);font-size:14px;margin-top:4px}

/* -------------------- 3. Menú de categorías -------------------- */
/* .cat-overlay es el fondo/backdrop: en mobile cubre toda la
   pantalla y ES el menú (a pantalla completa). En PC se achica
   a un backdrop semitransparente, y el menú visible real pasa a
   ser .cat-panel: un cuadro chico anclado abajo del botón, no
   toda la pantalla. Hacer click afuera del panel (sobre el
   backdrop) sigue cerrando el menú en ambos casos. */
.cat-overlay{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:60}
.cat-overlay.open{display:flex}
.cat-panel{display:flex;flex-direction:column;min-height:0;flex:1}
.cat-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line)}
.cat-head .brand{font-size:19px}
.cat-close{background:var(--panel);border:1px solid var(--line);color:var(--ink);width:40px;height:40px;
  border-radius:50%;font-size:16px;cursor:pointer;flex:none}
.cat-list{flex:1;overflow-y:auto;padding:var(--s-1) 0}
.cat-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);
  background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);
  padding:var(--s-2) var(--s-3);font-size:16px;text-align:left;cursor:pointer}
.cat-list button.active{color:var(--gold);font-weight:600}
.cat-list button svg{flex:none;width:16px;height:16px;stroke:var(--ink-dim);stroke-width:2}
.cat-list button.active svg{stroke:var(--gold)}
.cat-list .cat-all{color:var(--ink-dim);font-size:12px;text-transform:uppercase;letter-spacing:.6px;
  padding:var(--s-2) var(--s-3) var(--s-1);border-bottom:none;cursor:default}

/* En PC el menú se despliega como un panel chico bajo el botón
   de categorías, no a pantalla completa. */
@media (min-width:860px){
  .cat-overlay{
    background:rgba(6,12,20,.55);
    align-items:flex-start;
    justify-content:flex-start;
    padding:96px 0 0 var(--gutter); /* alto del header (~91px) + aire */
  }
  .cat-panel{
    flex:none;
    width:300px;
    max-height:min(70vh,480px);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,.45);
  }
  .cat-head{padding:var(--s-2)}
  .cat-head .brand{font-size:16px}
  .cat-list button{padding:12px var(--s-2);font-size:14px}
}

/* -------------------- 4. Banner de envíos -------------------- */
.banner{display:flex;align-items:center;gap:var(--s-2);background:var(--panel);border-top:1px solid var(--line);
  padding:var(--s-2) var(--gutter)}
.banner svg{flex:none;width:30px;height:30px;stroke:var(--gold)}
.banner b{font-family:'Space Grotesk',sans-serif;display:block;font-size:14px}
.banner span{color:var(--ink-dim);font-size:13px}

/* -------------------- 5. Contenedor principal y grilla -------------------- */
@media (min-width:860px){ :root{--pad:var(--s-3)} }
main{max-width:1100px;margin:0 auto;padding:var(--s-3) var(--pad) var(--s-8)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s-2)}
@media (min-width:860px){ .grid{gap:var(--s-3)} }

/* -------------------- 6. Filas horizontales por categoría -------------------- */
/* Vista "Recomendados": cada categoría se muestra como una fila
   con scroll horizontal, en vez de una grilla plana. */
.row-section{margin-bottom:var(--s-4);position:relative}
.row-title{font-size:18px;line-height:24px;font-weight:700;margin-bottom:var(--s-1);padding:0 var(--s-05)}
/* padding-top 8px + margin negativo: overflow-x fuerza overflow-y,
   así el lift de hover (−4px) no recorta el borde superior. */
.row-scroll{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;padding:var(--s-1) var(--s-05) var(--s-2);margin:0 calc(var(--s-05) * -1);
  scrollbar-width:none;-ms-overflow-style:none}
.row-scroll::-webkit-scrollbar{display:none}
.row-scroll .card{flex:0 0 200px;scroll-snap-align:start}
.row-arrow{display:none;position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;
  background:rgba(13,24,38,.85);border:1px solid var(--line);color:var(--ink);
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.row-arrow:hover{background:var(--gold);color:#0d1826;border-color:var(--gold)}
.row-arrow.prev{left:-14px} .row-arrow.next{right:-14px}
.row-arrow.hidden{display:none !important}
/* Las flechas de las filas solo se muestran en pantallas grandes
   con mouse (en mobile se navega arrastrando con el dedo). */
@media (hover:hover) and (pointer:fine) and (min-width:860px){
  .row-arrow{display:flex}
}

/* -------------------- 7. Barra de orden -------------------- */
/* El buscador se movió al header (ver sección 2); acá solo queda
   el control de orden, con su etiqueta "Ordenar productos por:". */
/* Mismo max-width y gutter que <main>: el select alinea con la grilla. */
.toolbar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--s-1);padding:var(--s-2) var(--pad) 0;flex-wrap:wrap}
.sort-group{display:flex;align-items:center;gap:var(--s-1);min-width:0;max-width:100%}
.sort-label{color:var(--ink-dim);font-size:13px;white-space:nowrap}
.toolbar select{min-width:0;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:var(--s-1) 12px;font-size:16px; /* ≥16px: iOS no hace zoom al enfocar */
  min-height:40px}
/* En mobile el buscador ocupa todo el ancho y pasa a una segunda
   fila del header (gracias al flex-wrap de header); en PC vuelve
   a la misma fila con un ancho acotado. */
.search-wrap{position:relative;flex:1 1 100%;min-width:160px;order:3}
.search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--ink-dim);pointer-events:none}
#search{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:var(--s-1) 12px var(--s-1) 32px;font-size:16px;min-height:40px}
#search::placeholder{color:var(--ink-dim)}
@media (min-width:860px){
  .search-wrap{flex:0 1 300px;order:0}
  .toolbar select,#search{font-size:14px}
}

/* -------------------- 8. Tarjeta de producto -------------------- */
.card {
  position: relative; /* contiene el .sr-only del precio: sin esto escapa del overflow de .row-scroll y genera scroll horizontal */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-dim);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }
}

/* Miniatura: marco 1:1 inset (8px) con radio concéntrico
   (16 − 8 = 8px). Fondo neutro claro + multiply funde el blanco
   de las fotos del CMS con el marco. Una sola regla cubre la
   imagen simple y las del carrusel. */
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: var(--s-1) var(--s-1) 0;
  border-radius: var(--radius-sm);
  background: var(--media-bg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.thumb > svg {
  width: 56px;
  height: 56px;
  stroke: var(--gold-dim);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-2);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  transition: transform .3s ease;
}

@media (hover: hover) {
  .card:hover .thumb img { transform: scale(1.03); }
}

/* Cuerpo de la tarjeta. Cada bloque de texto reserva su alto
   (min-height = n líneas × line-height), así título y descripción
   ocupan siempre el mismo espacio y el CTA queda alineado abajo en
   todas las tarjetas de la grilla/fila, sin importar el contenido. */
.card-body {
  --title-lh: 1.35;
  --desc-lh: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
  padding: var(--s-2);
}

.card-cat {
  font-size: 12px;
  line-height: 16px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title,
.card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.card-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: var(--title-lh);
  min-height: calc(2em * var(--title-lh));
  color: var(--ink);
}

/* El título es un link real (accesible por teclado); el resto de la
   tarjeta también navega vía JS (wireCards en ui.js). */
.card-title a:focus-visible { outline-offset: 2px; border-radius: 2px; }
.card:has(.card-title a:focus-visible) { border-color: var(--gold-dim); }

.card-desc {
  font-size: 13px;
  line-height: var(--desc-lh);
  min-height: calc(2em * var(--desc-lh));
  color: var(--ink-dim);
}

/* Precio y entrega apilados: siempre 2 líneas, nunca se desborda
   en tarjetas angostas (filas de 190px en mobile). */
.card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--s-05) 0 var(--s-1); /* el CTA usa margin-top:auto para anclarse al fondo */
}

.price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #fff;
}

.original {
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: line-through;
}

.eta {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--wa);
  color: #08321a;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;   /* una sola línea: misma altura en todas las tarjetas */
  text-decoration: none;
  padding: 10px var(--s-1);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, transform 0.15s ease;
}

.cta:hover { background: var(--wa-hi); }
.cta:active { background: var(--wa-dark); }

/* -------------------- 9. Carrusel de imágenes -------------------- */
.track {
  display: flex;
  width: 100%;
  height: 100%;
}
.track img { flex: 0 0 100%; }

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(13, 24, 38, 0.75);
  backdrop-filter: blur(4px);
  color: var(--ink);
  border: 1px solid var(--line);
  /* FIX (auditoría): 30px quedaba bajo el mínimo táctil recomendado
     (~44px). Se agranda el botón real y además se suma un área
     invisible extra con ::before para que el "dedo" tenga más
     margen de error sin agrandar tanto el círculo visualmente. */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav::before {
  content: "";
  position: absolute;
  inset: -6px; /* agranda el área clickeable a 48x48px sin cambiar el look */
}

.nav:hover {
  background: var(--gold);
  color: #0d1826;
}

.nav.prev { left: 8px; }
.nav.next { right: 8px; }

.dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--s-1);
  z-index: 2;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
  /* FIX (auditoría): el punto visual queda chico a propósito (7px,
     es solo un indicador), pero se agranda el área clickeable real
     con position relative + ::before a ~28px para que sea usable
     con el dedo sin agrandar el indicador visualmente. */
  position: relative;
}

.dot::before {
  content: "";
  position: absolute;
  inset: -10px -4px; /* sin solaparse con el punto vecino */
}

.dot.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.2);
}

/* -------------------- 10. Pie de página -------------------- */
footer{padding:var(--s-3) var(--s-2);text-align:center;color:var(--ink-dim);font-size:13px;line-height:20px;border-top:1px solid var(--line)}

/* -------------------- 11. Página de detalle de producto -------------------- */
/* Mobile first: una columna en orden de DOM (imagen → info → specs
   → CTA). Desde 768px pasa a 2 columnas con la galería sticky. */
.product-page {
  --pd-sticky-top: 96px; /* header de producto (~66px) + 32px */
  max-width: 1100px;
  min-height: 70vh;       /* evita que el footer "salte" mientras carga */
  margin: 0 auto;
  padding: var(--s-3) var(--pad) var(--s-8);
}

.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

/* ---- Columna izquierda: galería ---- */
.pd-media {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.pd-stage {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--media-bg);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  touch-action: pan-y;
  user-select: none;
}

.pd-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
  transition: transform .3s ease;
}
@media (hover: hover) {
  .pd-stage:hover .pd-main-img { transform: scale(1.03); }
}

.pd-stage--icon svg { width: 25%; height: auto; stroke: var(--gold-dim); }

.pd-thumbs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px; /* deja ver el outline de foco */
}
.pd-thumbs::-webkit-scrollbar { display: none; }

.pd-thumb {
  flex: 0 0 64px;
  height: 64px;
  padding: var(--s-05);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--media-bg);
  isolation: isolate;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-thumb:hover { opacity: .9; }
.pd-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* ---- Columna derecha: info y conversión ---- */
.pd-info { min-width: 0; display: flex; flex-direction: column; }

.pd-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pd-crumbs a { transition: color .2s var(--ease); }
.pd-crumbs a:hover { color: var(--ink); }
.pd-crumbs [aria-current] { color: var(--gold); }
.pd-crumbs span[aria-hidden] { opacity: .5; }

.pd-title {
  margin-top: var(--s-1);
  font-size: clamp(24px, 1.6vw + 16px, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.pd-price { margin-top: var(--s-3); }
.pd-price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-05) var(--s-2); }
.pd-price-now {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pd-price-was { font-size: 16px; color: var(--ink-dim); text-decoration: line-through; }
.pd-badge {
  align-self: center;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  padding: var(--s-05) var(--s-1);
  border-radius: 999px;
  background: rgba(212, 175, 90, .14);
  color: var(--gold);
}
.pd-eta { margin-top: var(--s-1); font-size: 13px; line-height: 20px; color: var(--ink-dim); }

.pd-desc {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.7;          /* leading-relaxed */
  color: var(--ink-soft);
  white-space: pre-line;     /* respeta los saltos de línea del CMS */
  overflow-wrap: anywhere;
  max-width: 65ch;
}

.pd-specs { margin-top: var(--s-4); }
.pd-section-title {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.pd-spec-list { list-style: none; border-top: 1px solid var(--line); }

/* Fila clave/valor ("Material: ABS") como tabla minimalista;
   fila sin clave como ítem con viñeta que ocupa todo el ancho. */
.pd-spec {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}
.pd-spec-k { color: var(--ink-dim); }
.pd-spec-v { color: var(--ink); overflow-wrap: anywhere; }

.pd-spec--plain { grid-template-columns: 1fr; position: relative; padding-left: var(--s-2); }
.pd-spec--plain::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(12px + .75em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 479px) {
  .pd-spec { grid-template-columns: 1fr; gap: 2px; }
}

/* CTA principal */
.pd-cta {
  margin-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border-radius: 12px;
  background: var(--wa);
  color: #06301a;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 4px 12px rgba(37, 211, 102, .18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.pd-cta svg { width: 20px; height: 20px; flex: none; transition: transform .2s var(--ease); }
.pd-cta:hover {
  background: var(--wa-hi);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 28px rgba(37, 211, 102, .32);
}
.pd-cta:hover svg { transform: rotate(-8deg) scale(1.08); }
.pd-cta:active { transform: translateY(0); background: var(--wa-dark); }
.pd-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Estado vacío / error */
.pd-empty {
  grid-column: 1 / -1; /* también se usa dentro de .grid (sin resultados / error) */
  max-width: 480px;
  margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--s-3);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-dim);
}
.pd-empty-link { display: inline-block; margin-top: var(--s-2); color: var(--gold); font-weight: 600; }
.pd-empty-link:hover { text-decoration: underline; }

/* ---- Desktop: 2 columnas, galería sticky ---- */
@media (min-width: 768px) {
  .product-page { padding-top: var(--s-5); }
  .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .pd-media { position: sticky; top: var(--pd-sticky-top); }
  /* Si la pantalla es baja, la imagen se achica para que la galería
     completa (imagen + miniaturas) siempre entre en el viewport. */
  .pd-stage { max-height: calc(100vh - var(--pd-sticky-top) - 112px); }
}
@media (min-width: 1024px) {
  .pd { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .card:hover .thumb img, .pd-stage:hover .pd-main-img, .pd-cta:hover, .pd-cta:hover svg { transform: none; }
}