/* ============ ADP HOME — design system ============ */
/*
   El sistema visual sale del propio logotipo (images/ADPLOGONEW.png), no de una
   paleta inventada: "ADP" es una serif didona de altísimo contraste en negro y
   "home" es una firma manuscrita en bronce (#9d7c5d muestreado del PNG), sobre un
   marfil frío -- nada que ver con el crema cálido y el rosa empolvado de la otra
   tienda. Tres decisiones se derivan de ahí y recorren toda la hoja:

     1. Display en Bona Nova SC (versalitas) y cuerpo/UI en Montserrat. Es la
        inversión exacta del otro sitio (sans en titulares, serif en cuerpo), y por
        sí sola ya cambia por completo la voz tipográfica.
     2. Radio cero en todo. La profundidad no la dan sombras sino filetes de 1px:
        lenguaje de papel impreso / catálogo de galería, no de tarjeta de app.
     3. Bronce como único acento. Sin degradados de dos colores, sin rosa.

   Los nombres de variable heredados (--cream, --accent, --accent-2) se conservan
   como alias porque ~1.800 reglas más abajo los referencian; recolorearlos aquí
   propaga el cambio a las 35 páginas sin tocarlas una a una.
*/

@font-face {
  font-family: 'Ultra';
  src: url('fonts/Ultra-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bevan';
  src: url('fonts/Bevan-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Bona Nova SC ya estaba descargada en fonts/ pero nunca se llegó a enganchar.
   Es la que más se parece al trazo del logotipo: versalitas con remates finos y
   mucho contraste de asta. Pasa a ser la tipografía de titulares. */
@font-face {
  font-family: 'Bona Nova SC';
  src: url('fonts/BonaNovaSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bona Nova SC';
  src: url('fonts/BonaNovaSC-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bona Nova SC';
  src: url('fonts/BonaNovaSC-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Con sólo 400 y 700 el navegador resolvía cualquier font-weight:600 como 700 y
     no se apreciaba el escalón intermedio, que es justo el peso que usa la UI. */
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-head: 'Bona Nova SC', 'Times New Roman', Georgia, serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Bona Nova SC', 'Times New Roman', Georgia, serif;

  /* ============ FASE 4: vuelta a claro (sólo adphome.es) ============
     Pedido explícito: fondo #D9D9D6 para adphome.es. Sobre un fondo claro,
     --ink (texto) tenía que dejar de ser casi blanco (#f0f0ee, pensado para el
     gris antracita de FASE 3) o el texto se habría vuelto ilegible sobre el
     nuevo fondo. Se invierten los papeles de --ink/--cream y se recalibra todo
     lo que dependía de que --cream fuera el tono oscuro: --paper-deep y
     --surface pasan a ser variantes CLARAS (antes eran más claras que --cream
     porque hacían de "superficie elevada" sobre un fondo oscuro; aquí cumplen
     el mismo papel relativo, sólo que ahora "elevada" significa más blanca, no
     más oscura), --border/--muted se oscurecen para seguir leyéndose sobre
     claro, y --accent-2 recupera el bronce PROFUNDO que ya tenía antes de
     FASE 3 (el comentario de entonces decía literalmente "antes era el bronce
     profundo, para texto sobre marfil" -- este es ese mismo caso). El pie de
     página (.site-footer) se queda oscuro a propósito con colores fijos en vez
     de heredar --cream/--ink, porque su degradado estaba pensado para un
     --cream ya oscuro y estas tres webs hermanas conservan ese --cream oscuro;
     sólo adphome.es lo cambia. */
  --ink: #1e1f21;
  --ink-soft: #4a4c50;
  --cream: #E8EDEE; /* Pedido explícito: sólo en adphome.es -- las otras tres webs conservan su --cream de siempre. */
  --paper-deep: #cfcfca;
  --surface: #f4f4f2;
  --border: rgba(30, 31, 33, 0.14);
  --muted: #6d6f73;

  --accent: #9d7c5d;
  --accent-2: #6a5039;
  --accent-dark: #4a3626;
  --accent-tint: #e3cda3;

  /* Radio cero: el diferenciador estructural más fuerte frente a la otra tienda,
     que se movía en 10/8/5px. Aquí manda la esquina viva. */
  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  /* Sombra más profunda que antes: sobre fondo casi negro, una sombra tenue no se
     distingue del propio fondo. */
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-sm: none;

  --leading-body: 1.65;
  --leading-tight: 1.4;
  --leading-head: 1.08;
  /* Tracking de microetiqueta: mayúsculas pequeñas muy abiertas. Es el recurso que
     sustituye al peso en negrita para jerarquizar la UI. */
  --tracking-micro: 0.2em;

  --rule: 1px solid var(--border);
  --rule-ink: 1px solid var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

/* El tracking global de 0.05em se retira: separar las letras de Montserrat en
   tamaños de lectura sólo la hace más pálida. El tracking se reserva para las
   microetiquetas en mayúsculas (.u-micro y derivados). */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El overflow-x:hidden que llevaba este body (para los bloques "full-bleed",
     ver product-detail__extra) se ha quitado: html ya trae overflow-x:clip
     (ver arriba), que consigue lo mismo -- y ponerlo también aquí convertía
     a body en su propio contenedor de scroll (overflow computado como
     "hidden auto": fijar sólo un eje hace que el otro pase a auto en vez de
     quedarse en visible), lo que en móviles reales (sobre todo iOS Safari)
     rompe position:sticky para cualquier elemento dentro de body -- el
     toolbar del catálogo reportado no se quedaba fijo al hacer scroll. */
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  font-weight: 400;
  line-height: var(--leading-head);
  /* Bona Nova SC son versalitas: en titular necesita un pelo de aire entre letras
     para no leerse como un bloque macizo. */
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

.divider { color: var(--border); margin: 0 8px; }

/* Microetiqueta: mayúsculas pequeñas, muy abiertas, en Montserrat. Es la voz
   secundaria del sitio (eyebrows, etiquetas, enlaces de navegación). */
.u-micro {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

/* Filete con índice: el numerito bronce que encabeza cada sección, prestado del
   lenguaje de catálogo impreso. */
.u-rule-bronze {
  border-top: 1px solid var(--accent);
}

/* Botones: rectángulo vivo, mayúsculas espaciadas y relleno que entra desde abajo
   al pasar el ratón. Se elimina el translateY -- el botón no "flota", se rellena. */
.btn[hidden] { display: none; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}
/* Cortina que sube: sustituye al desplazamiento vertical como señal de hover. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.btn:hover::before { transform: scaleY(1); }

.btn--primary {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--primary::before { background: var(--accent); }
.btn--primary:hover { color: #fff; border-color: var(--accent); }

.btn--dark {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--dark::before { background: var(--accent); }
.btn--dark:hover { color: #fff; border-color: var(--accent); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn--outline::before { background: var(--ink); }
.btn--outline:hover { color: var(--cream); }

/* Etiqueta de producto: rectángulo bronce, sin píldora ni rojo de saldo. */
.badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  line-height: 1.4;
  background: #a8362c;
  color: #fbe8e7;
}

/* ============ Announcement bar ============ */

/* Barra en bronce, no en negro: es lo primero que se ve al cargar y fija el color
   de marca antes incluso que el logotipo. Va en el bronce profundo porque lleva
   texto blanco encima (el claro se queda en 3.37:1, por debajo de AA). */
.announce-bar {
  position: relative;
  z-index: 101;
  background: var(--accent-2);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 48px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
}
.announce-bar__links a:hover { text-decoration: underline; }
.announce-bar__links .divider { color: #555; }

.announce-bar__msg--marquee {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.announce-bar__track {
  display: inline-flex;
  width: max-content;
}
.announce-bar__item {
  padding-right: 140px;
  position: relative;
}
.announce-bar__dot {
  position: absolute;
  right: 62px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .announce-bar__track { animation: none !important; }
}

.announce-bar__edit-btn {
  flex: 0 0 auto;
  margin-left: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 12px;
  cursor: pointer;
}
.announce-bar__edit-btn:hover { background: rgba(255, 255, 255, 0.22); }

.announce-bar__editor {
  position: absolute;
  top: 100%;
  right: 48px;
  z-index: 50;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  color: #111;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 12px;
  font-weight: 400;
  letter-spacing: normal;
}
.announce-bar__editor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.announce-bar__editor-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.announce-bar__editor-input {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
}
.announce-bar__editor-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  color: #666;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
}
.announce-bar__editor-remove:hover { background: #f2f2f2; }
.announce-bar__editor-add {
  margin-top: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px dashed #ccc;
  background: #fff;
  color: #111;
}
.announce-bar__editor-add:hover { background: #f2f2f2; }
.announce-bar__editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.announce-bar__editor-msg {
  margin-right: auto;
  font-size: 12px;
  color: #666;
}
.announce-bar__editor-cancel,
.announce-bar__editor-save {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
}
.announce-bar__editor-save {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ============ Sticky header + nav ============ */

.header-group {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* El alto base (60px) se queda para el logotipo del pie; dentro de la barra
   (55px de alto fijo) se reduce a 42px, ver la regla .site-nav .logo img mas
   abajo -- el filtro de color de aquí abajo se sigue aplicando igual. */
.logo img {
  height: 60px;
  width: auto;
  display: block;
  /* El PNG del logotipo es tinta negra sólida sobre transparente (comprobado
     pixel a pixel: no hay bronce real en el archivo, sólo negro + AA). Sobre
     el fondo casi negro del sitio quedaba invisible -- mismo invert()+hue-
     rotate() que ya usaba el pie de página, ahora aplicado en la regla base
     para que cubra la cabecera (y cualquier otro sitio que use .logo) también. */
  filter: invert(1) hue-rotate(180deg) brightness(1.08);
}
.site-nav .logo img { height: 42px; }

.search {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 10px 2px;
  margin-left: 24px;
  cursor: pointer;
  transition: width 0.35s ease, padding 0.35s ease, background 0.2s ease, border-color 0.2s ease;
}
.search:hover,
.search:focus-within {
  width: 280px;
  padding: 10px 6px;
  cursor: text;
  border-bottom-color: var(--ink);
}
.site-nav .search:hover, .site-nav .search:focus-within { border-bottom-color: #fff; }
.site-nav .search__icon { color: #fff; flex-shrink: 0; }
.search input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-nav .search input { color: #fff; }
.search:hover input,
.search:focus-within input { opacity: 1; }
.search input::placeholder { color: #a29c9c; }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-height: 480px;
  overflow-y: auto;
  z-index: 60;
  padding: 10px;
}
.search-results__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}
.search-results__item:hover { background: var(--cream); }
.search-results__thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--border);
}
.search-results__info { min-width: 0; }
.search-results__name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-results__price {
  font-size: 14px;
  color: var(--muted);
}
.search-results__empty {
  padding: 16px 12px;
  font-size: 15px;
  color: var(--muted);
}
@media (min-width: 901px) {
  .search-results {
    left: auto;
    right: 0;
    min-width: 420px;
  }
}

.search-page__empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* 11px para igualar la fila de navegación: a 14px las acciones pesaban más que
   las propias categorías, que son el elemento principal de la barra. */
.header-actions {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}
.header-actions__link { display: flex; align-items: center; gap: 6px; }
.header-actions__link:hover { color: var(--accent-2); }
.site-nav .header-actions__link:hover { color: var(--accent-tint); }
.lang-switcher { position: relative; margin-left: 20px; font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-micro); }
.lang-switcher__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
}
.site-nav .lang-switcher__toggle { color: #fff; }
.lang-switcher__toggle:hover { color: var(--ink); }
.site-nav .lang-switcher__toggle:hover { color: rgba(255, 255, 255, 0.75); }
.lang-switcher__toggle svg { width: 10px; height: 10px; transition: transform 0.15s ease; }
.lang-switcher__flag { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
/* La bandera de Nepal es la única del mundo que no es rectangular (726x885): con
   el object-fit: cover de las demás se recortaba a una franja roja irreconocible.
   Se muestra entera y sin marco, encajada en el mismo ancho. */
.lang-switcher__flag--tall { object-fit: contain; box-shadow: none; border-radius: 0; background: transparent; }
.lang-switcher.is-open .lang-switcher__toggle svg { transform: rotate(180deg); }
.lang-switcher__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 120px;
  z-index: 50;
}
.lang-switcher.is-open .lang-switcher__menu { display: block; }
.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.lang-switcher__btn.is-active { color: var(--accent-2, var(--ink)); background: var(--surface-muted, rgba(0,0,0,0.04)); }
.lang-switcher__btn:hover { background: var(--surface-muted, rgba(0,0,0,0.06)); }
@media (max-width: 900px) {
  .lang-switcher { margin-left: 12px; }
}
.cart, .wishlist-toggle { margin-left: 24px; position: relative; display: flex; color: inherit; }
.cart svg, .wishlist-toggle svg { width: 24px; height: 24px; }
.cart__count, .wishlist__count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--ink);
  color: var(--cream);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 0;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wishlist-toggle:hover, .cart:hover { color: var(--accent-2); }
.mobile-search-toggle { display: none; }

/* ============ Wishlist star toggle (catalog cards & product page) ============ */

.wishlist-star {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  z-index: 2;
}
/* Sin el círculo blanco de fondo, el icono oscuro necesita su propio halo
   claro para leerse contra fotos oscuras -- mismo recurso que el texto de
   las category-card (text-shadow), aquí como drop-shadow por ser un SVG. */
.wishlist-star svg { width: 22px; height: 22px; transition: fill 0.2s ease; filter: drop-shadow(0 1px 4px rgba(255,255,255,0.85)); }
.wishlist-star:hover { transform: scale(1.08); }
.wishlist-star.is-active { color: var(--accent); }
.wishlist-star.is-active svg { fill: var(--accent); }

/* Catalog grid only: bookmark stays hidden until its card is hovered (or the
   product is already saved), so the grid isn't cluttered with an icon over
   every thumbnail. Carousels and the product-detail page keep it always on. */
.product-grid .wishlist-star { opacity: 0; }
.product-grid .product-card:hover .wishlist-star,
.product-grid .wishlist-star:focus-visible,
.product-grid .wishlist-star.is-active {
  opacity: 1;
}

.product-card { position: relative; }

/* Vista de catálogo: favoritos y compartir intercambian posición (compartir
   pasa a ser el más exterior, favoritos el interior) -- pedido explícito,
   SÓLO en la cuadrícula de catálogo; el carrusel de "vistos juntos" y demás
   usos de .product-card no cambian. Mayor especificidad que las reglas base
   de arriba/abajo (.wishlist-star / .share-btn.product-card__share) para
   ganarles sin depender del orden en la hoja. */
.product-grid .wishlist-star { right: 58px; }
.product-grid .share-btn.product-card__share { right: 12px; }

/* Share button in the catalog grid: reuses the same .share-btn markup/JS as
   the product-detail page (#pd-share), just repositioned to sit right next
   to the wishlist star instead of the title row. Compound selectors
   (.share-btn.product-card__share) so this beats the product-detail
   ".share-btn { position: relative }" rule regardless of stylesheet order. */
.share-btn.product-card__share {
  position: absolute;
  top: 12px;
  right: 58px;
  width: 42px;
  height: 42px;
  z-index: 2;
}
.product-card__share .share-btn__toggle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.product-card__share .share-btn__toggle svg { filter: drop-shadow(0 1px 4px rgba(255,255,255,0.85)); }
.product-card__share .share-btn__toggle:hover { transform: scale(1.08); }
.product-card__share .share-btn__menu { top: calc(100% + 8px); right: 0; }
/* Same reveal-on-hover behaviour as the wishlist star next to it. */
.product-grid .product-card__share { opacity: 0; }
.product-grid .product-card:hover .product-card__share,
.product-grid .product-card__share:focus-within,
.product-grid .product-card__share.is-open {
  opacity: 1;
}

/* Cart badge: total packs already added for this card, shown over the
   top-left corner of the image (opposite the wishlist star). */
.product-card__cart-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: none;
  border-radius: 13px;
  background: #e02424; /* Pedido explicito: mismo rojo que samaraimport.com (#e02424), en vez del acento propio de la web. */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
  z-index: 2;
}
.product-card__cart-badge:hover { transform: scale(1.08); }
.product-card__cart-badge[hidden] { display: none; }

/* Mobile-only quick-add: lets shoppers add a product (and pick its size,
   when it has more than one) straight from the catalog grid without
   opening the product page. Hidden on desktop, where picking color/size
   on the product page stays the norm. */
.product-card__quickadd {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.product-card__quickadd--sizes {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.product-card__size-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.product-card__size-row-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card__stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.product-card__qa-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 0;
  border: 1px solid var(--border);
  /* Quedaba escrito a pelo el rosa antiguo (#c06b73); pasa al bronce de marca. */
  background: rgba(157, 124, 93, 0.14);
  color: var(--accent-2);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease;
}
.product-card__qa-btn[hidden] { display: none; }
.product-card__qa-btn:active { transform: scale(0.9); }
.product-card__qa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.product-card__qa-qty { display: none; }

.product-detail__title-row { display: flex; align-items: flex-start; gap: 14px; }
.product-detail__title-row h1 { flex: 1; }
.wishlist-star--pd {
  position: static;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
}
.wishlist-star--pd svg { width: 24px; height: 24px; }

/* Product-detail share button: on mobile the JS calls the native share sheet
   directly (navigator.share), so the menu below is desktop-only fallback --
   see initProductShare() in script.js. */
.share-btn { position: relative; flex-shrink: 0; }
.share-btn__toggle svg { width: 22px; height: 22px; }
.share-btn__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 4px;
  min-width: 170px;
  z-index: 50;
}
.share-btn.is-open .share-btn__menu { display: block; }
.share-btn__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 10px;
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.share-btn__item:hover { background: var(--surface-muted, rgba(0,0,0,0.06)); }
.share-btn__item svg { flex-shrink: 0; }

/* WeChat has no web share URL, so its menu item opens this small modal with
   a scannable QR code instead (see openWechatShareModal() in script.js). */
.wechat-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wechat-modal.is-open { visibility: visible; pointer-events: auto; }
.wechat-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.wechat-modal__panel {
  position: relative;
  z-index: 1;
  width: min(300px, calc(100vw - 40px));
  background: #fff;
  border-radius: 10px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wechat-modal.is-open .wechat-modal__panel { transform: scale(1); opacity: 1; }
.wechat-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
}
.wechat-modal__qr { width: 200px; height: 200px; }
.wechat-modal__qr svg { width: 100%; height: 100%; }
.wechat-modal__hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted, #666);
  max-width: 230px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; }

/* Navegación en microetiqueta (11px, mayúsculas, muy abierta) en lugar de los 19px
   en negrita de antes. El fondo pasa a marfil sólido con filete inferior: la barra
   se apoya en una línea, no en un desenfoque translúcido. */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* 6px arriba/abajo + logo de la barra a 42px (ver .site-nav .logo img mas
     abajo) + 1px de borde = 55px de alto total, igual que las otras webs
     hermanas. Pedido explícito: fondo propio en vez de heredar --cream, para
     que pueda ser un color distinto del fondo general de la página. */
  padding: 6px 48px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  /* Pedido explicito: la barra lleva EXACTAMENTE el mismo fondo que el pie, para
     que la pagina abra y cierre con el mismo color (mismo cambio que en
     SamaraImport y PaulaHome). Es el literal de .site-footer repetido a
     proposito: si se cambia uno, hay que cambiar el otro. */
  background: linear-gradient(180deg, #1e1f21 0%, #1c1811 100%);
  color: #fff; /* --ink es oscuro (tema claro FASE 4) e ilegible sobre este fondo. */
}
.site-nav > .logo { justify-self: start; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: center;
}
.site-nav > .header-actions { justify-self: end; }
.site-nav__links a {
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}
/* Subrayado fino en bronce que crece desde el centro (antes: barra de 2px con
   degradado creciendo desde la izquierda). */
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after { transform: scaleX(1); }
.site-nav__links a.is-active { color: var(--accent-tint); } /* --accent-2 (bronce oscuro) tampoco se leia sobre el azul-pizarra nuevo; --accent-tint ya estaba pensado como el bronce claro para fondos oscuros. */
.site-nav__highlight { color: var(--accent-2) !important; }

/* Mega menu (hover) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item__toggle { display: none; } /* shown only in the mobile accordion, see max-width:760px */

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Panel angosto de una sola columna: sólo los encabezados de subcategoría se
   ven de entrada (como un desplegable normal). Las hojas de cada subcategoría
   viven en .mega-menu__flyout, un panel aparte que sólo aparece al pasar el
   cursor por su fila — ver .mega-menu__col--has-leafs más abajo. */
.mega-menu__inner {
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
/* El flyout se ancla al panel entero, no a su fila: con listas de hasta 16 hojas,
   anclarlo a la fila lo empujaba fuera de la pantalla en las subcategorías de más
   abajo. Alineado al panel, arranca siempre a la misma altura y el max-height de
   .mega-menu__flyout basta para que quepa. */
.mega-menu__col {
  position: static;
}
/* El desplegable hereda de .site-nav mayúsculas, tracking de 0.2em y 11px. Las
   reglas de antes sólo pisaban el font-size (22px/19px), así que las columnas
   salían en versales enormes y muy separadas. Aquí se fija todo explícitamente:
   encabezado en microetiqueta con filete, y enlaces en caja baja legible. */
.mega-menu__col a.mega-menu__heading {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
  padding: 13px 26px;
  white-space: nowrap;
  border-bottom: none;
}
.mega-menu__heading::after { display: none; }
.mega-menu__col--has-leafs > a.mega-menu__heading::after {
  display: inline-block;
  content: "\203A";
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}
.mega-menu__col:hover > a.mega-menu__heading,
.mega-menu__heading:hover {
  color: var(--ink);
  background: var(--accent-tint);
}
/* Flyout de hojas: nace pegado al canto derecho de su fila y sólo se muestra
   mientras el cursor está sobre esa fila (o sobre el propio flyout, para
   poder llegar hasta él sin que se cierre). */
.mega-menu__flyout {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  min-width: 260px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  padding: 18px 24px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.mega-menu__col--has-leafs:hover > .mega-menu__flyout,
.mega-menu__col--has-leafs.is-flyout-open > .mega-menu__flyout {
  display: block;
}
.mega-menu__flyout a {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.5;
  margin-bottom: 9px;
}
.mega-menu__flyout a:last-child { margin-bottom: 0; }
.mega-menu__flyout a::after { display: none; }
.mega-menu__flyout a:hover { color: var(--accent-2); }

/* ============ Trust bar ============ */

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 48px;
  font-size: 14px;
  background: var(--surface);
}
.trust-bar__label { font-weight: 700; }
/* Sin píldora ni degradado: bronce plano y esquina viva, como el resto. Bronce
   profundo porque lleva texto blanco encima. */
.stars {
  color: #fff;
  background: var(--accent-dark);
  letter-spacing: 2px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 0;
}
.trust-bar__reviews { color: var(--muted); }
.trust-bar__reviews strong { color: var(--ink); }

/* ============ Marquee strip ============ */

.marquee {
  background: var(--surface);
  color: #fff;
  overflow: hidden;
  padding: 12px 0;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 40px;
  animation: marquee 22s linear infinite;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.marquee__track span { color: var(--accent-2); margin-right: 40px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ Home hero (editorial) ============ */

/* Hero partido (editorial). El otro sitio usa una foto a sangre con el texto
   encima; aquí la foto ocupa sólo la columna derecha y la izquierda es un panel
   de marfil macizo que sostiene la tipografía. El resultado tiene una silueta
   distinta ya desde el primer scroll, que es el objetivo.
   La foto sigue viviendo en .hero__bg / .hero__slide para que el editor de
   imágenes del admin siga funcionando sin cambios. */
/* El panel va en negro, no en marfil, por dos razones que apuntan al mismo sitio:
   es exactamente el par negro+bronce del logotipo, y además es el único fondo con
   el que siguen siendo legibles los colores de texto que el admin ya tiene
   guardados en site_pages ('hero-text-colors' los fija en blanco, elegidos cuando
   el texto iba sobre foto oscura). Un panel claro habría obligado a migrar ese
   dato para que el titular no desapareciera. */
.hero {
  position: relative;
  color: var(--ink);
  background-color: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-top: calc(-1 * var(--sticky-nav-height, 0px));
}

/* Outgoing 3D transition when leaving the landing page */
.hero.is-exiting { overflow: hidden; }
.hero.is-exiting .hero__inner {
  transform-origin: center 30%;
  animation: heroExit 0.5s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}
.hero.is-exiting .hero__bg { animation: heroDim 0.5s ease forwards; }
/* Igual que arriba: la salida del hero volteaba 42deg en perspectiva. Se cambia
   por un desvanecido con una subida mínima. */
@keyframes heroExit {
  to { transform: translateY(-24px); opacity: 0; }
}
@keyframes heroDim {
  to { opacity: 0.3; }
}

/* Incoming page fade for the categories page */
.page-enter { animation: pageFade 0.4s ease both; }
@keyframes pageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Foto a sangre: ocupa el hero entero, de canto a canto. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Velo de legibilidad sobre la foto: sin él, el titular en claro desaparece
   contra fotos de producto luminosas. Vive en el propio ::after de .hero__bg
   para quedar siempre por debajo de .hero__inner sin pelear con el z-index. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 40%, rgba(0,0,0,0.08) 65%, transparent 82%);
  pointer-events: none;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  /* Deriva lenta: la foto respira en lugar de quedarse fija, pero sin el scale(1.1)
     agresivo de antes, que recortaba demasiado el encuadre. */
  transition: opacity 1.6s ease;
  transform: scale(1.04);
  transform-origin: center;
}
.hero__slide.is-active { opacity: 1; }
/* Filete vertical bronce en el canto izquierdo de la página: ya no marca la
   costura de un panel (no existe), pero sigue atando la composición al color
   de marca sobre la foto a sangre. */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  z-index: 2;
  background: var(--accent);
  pointer-events: none;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* El contenido vuelve a centrarse en un contenedor de 1320px sobre la foto a
   sangre; el titular y el subtítulo mantienen su propio max-width (12ch/40ch)
   así que siguen leyéndose como un bloque angosto, no como texto a lo ancho. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--sticky-nav-height, 64px) + 88px) 64px 44px 88px;
  min-height: 640px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.hero__top {
  position: relative;
  z-index: 1;
  max-width: 520px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Red de seguridad de legibilidad: el velo cubre el lado izquierdo, pero el
     texto puede acabar sobre una zona clara de la foto en pantallas estrechas. */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.hero.is-exiting .hero__top { display: none; }

/* Etiqueta superior con filete bronce delante, en lugar de texto suelto. */
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent-tint);
  margin-bottom: 30px;
}
.hero__eyebrow::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
/* Titular en versalitas Bona Nova. Se abandona el peso 600 con tracking negativo
   (gesto de sans geométrica) por un serif de contraste alto a tamaño grande. */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 70px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: 0.01em;
  max-width: 12ch;
  margin-bottom: 26px;
  color: var(--ink);
}
.hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.68);
  max-width: 40ch;
  margin-bottom: 40px;
  font-weight: 400;
}
.hero__ctas { display: flex; gap: 0; flex-wrap: wrap; }

/* Los dos CTA se pegan formando un único bloque partido por un filete, en vez de
   dos píldoras separadas. */
.hero .btn--light {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.hero .btn--light::before { background: var(--accent); }
.hero .btn--light:hover { color: #fff; border-color: var(--accent); }
.hero .btn--ghost {
  background: transparent;
  border: 1px solid rgba(243, 238, 227, 0.4);
  border-left: none;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero .btn--ghost::before { background: var(--ink); }
.hero .btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* Las cuatro cifras pasan de fila con separadores verticales a rejilla 2x2 dentro
   del panel, apoyada en un filete superior. */
.hero__stats {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: 460px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 32px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 28px;
  margin-top: auto;
  flex: none;
}
.hero__stat { position: relative; padding-right: 0; }
.hero__stat + .hero__stat { padding-left: 0; }
.hero__stat + .hero__stat::before { content: none; }
.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--accent-tint);
}
.hero__stat span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  line-height: 1.5;
  display: block;
}

/* Sello vertical en el canto izquierdo del panel: el detalle que firma el hero.
   Se apoya en el hueco de 88px del padding izquierdo. */
.hero__inner::before {
  content: "ADP HOME — TEXTIL DEL HOGAR";
  position: absolute;
  left: 30px;
  bottom: 132px;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: none;
}

.hero.is-editing-images .hero__inner { pointer-events: none; user-select: none; }
.hero.is-editing-images .hero__img-edit-btn,
.hero.is-editing-images .hero__img-editor { pointer-events: auto; }
.hero.is-editing-images { cursor: crosshair; }
.hero.is-editing-images .hero__bg { outline: 2px dashed rgba(255,255,255,0.6); outline-offset: -2px; }

.hero__img-edit-btn {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 16px);
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__img-edit-btn:hover { background: rgba(255,255,255,0.95); }

.hero__img-editor {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 58px);
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 260px;
}
.hero__img-editor-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hero__img-editor-thumb {
  width: 44px;
  height: 30px;
  border-radius: 5px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}
.hero__img-editor-thumb.is-active { border-color: var(--ink); }
.hero__img-editor-thumb-wrap { position: relative; }
.hero__img-editor-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__img-editor-thumb-remove:hover { background: #d33; border-color: #d33; color: #fff; }
.hero__img-editor-add {
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__img-editor-add:hover { border-color: var(--ink); }
.hero__img-editor-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__img-editor-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  width: 66px;
  flex-shrink: 0;
}
.hero__img-editor-row input[type="range"] { width: 100%; }
.hero__img-editor-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.hero__img-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.hero__img-editor-msg { font-size: 12px; color: var(--muted); margin-right: auto; }
.hero__img-editor-actions button {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.hero__img-editor-save { background: var(--ink) !important; color: var(--surface) !important; border-color: var(--ink) !important; }

.hero__color-edit-btn {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 16px);
  right: 58px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__color-edit-btn:hover { background: rgba(255,255,255,0.95); }

.hero__color-editor {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 58px);
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 260px;
}
.hero__color-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero__color-editor-input {
  width: 40px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.hero__text-edit-btn {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 16px);
  right: 100px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__text-edit-btn:hover { background: rgba(255,255,255,0.95); }

.hero__pos-edit-btn {
  position: absolute;
  top: calc(var(--sticky-nav-height, 64px) + 16px);
  right: 142px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.75);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__pos-edit-btn:hover { background: rgba(255,255,255,0.95); }
.hero__pos-editor { width: 260px; }
.hero.is-editing-text-pos { cursor: crosshair; }
.hero.is-editing-text-pos .hero__inner { pointer-events: none; user-select: none; }
.hero.is-editing-text-pos .hero__eyebrow,
.hero.is-editing-text-pos .hero__title,
.hero.is-editing-text-pos .hero__sub,
.hero.is-editing-text-pos .hero__ctas {
  pointer-events: auto;
  outline: 2px dashed rgba(0,0,0,0.45);
  outline-offset: 6px;
  cursor: grab;
}
.hero.is-editing-text-pos .hero__ctas a { pointer-events: none; }

.hero__text-editor {
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
}
.hero__text-editor-row {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.hero__text-editor-row label { width: auto; }
.hero__text-editor-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  resize: vertical;
}

/* ============ Section heading ============ */

.section {
  padding: 100px 48px;
}
.section--tight { padding: 70px 48px; }
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-heading__kicker {
  color: var(--accent-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.section-heading h2 { font-family: var(--font-display); font-size: 42px; font-weight: 400; margin-bottom: 16px; }
.section-heading p { color: var(--muted); font-size: 15px; margin: 0; }

/* ============ Category grid (home) ============ */

/* Los 2px de antes hacían un mosaico continuo; con las planchas nuevas cada una
   necesita aire para leerse como pieza suelta de catálogo. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}
/* Antes esto entraba con un volteo 3D de -48deg. Es un gesto de presentación que
   no encaja con el resto (nada más en la página se mueve en perspectiva) y además
   es idéntico al de la otra tienda. Se sustituye por una subida corta con
   desvanecido, que es el mismo lenguaje que .reveal. */
@keyframes categories3D {
  0%   { transform: translateY(26px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.category-grid.reveal-3d {
  transform-origin: center top;
  animation: categories3D 0.6s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
/* Mismo tratamiento que las planchas de la portada (.home-categories__card): la
   foto limpia y el rótulo en una banda de marfil abajo. Antes esta rejilla (la de
   categories.html) llevaba degradado en diagonal, sombra y un rebote al pasar el
   ratón; se queda sin ninguno de los tres. */
.category-card {
  position: relative;
  border-radius: 0;
  padding: 0;
  min-height: 300px;
  display: block;
  color: var(--ink);
  overflow: hidden;
  box-shadow: none;
  background-size: cover;
  background-position: center;
  transition: none;
}
.category-card--dark { color: var(--ink); }
.category-card--dark .category-card__name { text-shadow: none; }
.category-card--dark .category-card__arrow { background: transparent; color: var(--ink); }
.category-card--dark::after { background: linear-gradient(0deg, rgba(18,16,14,0.28), rgba(18,16,14,0.04) 60%); }
.category-card:hover {
  box-shadow: none;
  animation: none;
}
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18,16,14,0.30), rgba(18,16,14,0.04) 60%);
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .category-card:hover::after { opacity: 0.35; }
}
.category-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 16px 18px;
  background: var(--cream);
  border-top: 1px solid var(--accent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  text-shadow: none;
  transition: background 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .category-card:hover .category-card__name { background: var(--ink); color: var(--cream); }
}
/* La flecha circular sobra, igual que en la portada: el rótulo inferior ya indica
   que la plancha es un enlace. */
.category-card__arrow { display: none; }

/* ============ Testimonials ============ */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial-card .stars { margin-bottom: 16px; }
.testimonial-card p { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 20px; }
.testimonial-card__author { font-weight: 700; font-size: 14px; }
.testimonial-card__loc { color: var(--muted); font-size: 13px; }

/* ============ Reveal on scroll ============ */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============ Category page hero ============ */

/* Cabecera de categoría como cabecera de sección impresa, no como banda de color:
   marfil, texto en tinta y un filete bronce abajo. La banda con degradado era otro
   de los rasgos que ambas tiendas compartían tal cual. */
.category-hero {
  position: relative;
  background: var(--cream);
  /* Mismo espaciado vertical que SamaraImport (8/7 de relleno, miga de pan a 3px
     y h1 a 2px, toolbar a 14px): la cabecera ocupaba mas del doble y empujaba la
     rejilla de productos por debajo del pliegue. El bloque movil (max-width:760px,
     padding 7px 20px 6px) ya era igual en las cuatro webs, aqui solo cambia el
     escritorio. */
  color: var(--ink);
  padding: 8px 48px 7px;
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--cat-accent, transparent);
  overflow: hidden;
}
/* Acento propio por categoría (ver CATEGORY_HERO_ACCENTS en script.js): un resplandor
   suave en la esquina, no un bloque de color plano -- mantiene el tono editorial del
   resto del sitio en vez de leer como una etiqueta de folleto. */
.category-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 640px 280px at 12% -10%, color-mix(in srgb, var(--cat-accent, transparent) 22%, transparent), transparent 72%);
  pointer-events: none;
}
.category-hero > * { position: relative; }
/* "Liquidaciones" heredaba un degradado arcoíris animado que no pega con nada de
   lo demás; pasa a ser el negativo de la cabecera normal. */
.category-hero--rainbow {
  background: var(--ink);
  color: var(--cream);
  background-size: auto;
  animation: none;
  border-bottom-color: var(--cat-accent, var(--accent));
}
.category-hero--rainbow .breadcrumb { color: rgba(255,255,255,0.6); }
.category-hero--rainbow p { color: rgba(255,255,255,0.7); }
.category-hero .breadcrumb a:hover { color: var(--cat-accent, var(--accent-2)); }
.breadcrumb {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  margin-bottom: 3px;
}
.breadcrumb a:hover { color: var(--accent-2); text-decoration: none; }
.category-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  margin-bottom: 2px;
}
/* :not(.breadcrumb) porque la miga de pan también es un <p> dentro de la cabecera:
   sin excluirla, este selector (0,1,1) le ganaba a .breadcrumb (0,1,0) y le subía
   el cuerpo de 10 a 14px. */
/* margin:0 como en SamaraImport: sin el reset, el <p> se queda con el margen
   por defecto del navegador (1em arriba y abajo) y eso reintroducia buena parte
   del espacio que se acaba de quitar del relleno. */
.category-hero p:not(.breadcrumb) { max-width: 560px; font-size: 14px; color: var(--muted); opacity: 1; line-height: var(--leading-body); margin: 0; }

/* ============ Toolbar / pills ============ */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 48px;
  max-width: 1320px;
  margin: 0 auto;
}
.toolbar__count { color: var(--muted); font-size: 14px; font-weight: 600; }
/* flex-basis:100% fuerza a que la fila de pills siempre ocupe su propia línea
   completa dentro de .toolbar (en vez de compartir hueco con count/sort-select
   y arriesgarse a quedar apretada/cortada) -- así el wrap interno de las pills
   tiene siempre el ancho completo del toolbar para repartirse. */
/* Pedido explícito: el desplegable de categoría (antes sólo en móvil) pasa a
   verse también en escritorio -- las pills de chips sueltos se ocultan del
   todo, no sólo bajo los 760px. */
.toolbar__pills { display: none; }
/* Un <select> nativo con las mismas opciones que las pills, construido en JS
   (ver wireToolbarPillsMobileSelect en script.js) en vez de duplicar la
   lista de subcategorías a mano. Las pills siguen existiendo en el DOM
   (misma lógica de filtrado) pero se ocultan visualmente. */
.toolbar__pills-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  order: 2;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
}
.toolbar__pills-mobile svg { flex-shrink: 0; }
/* min-width:0 es lo que faltaba: un <select> sin él nunca encoge por debajo
   del ancho que pide su OPCIÓN más larga (min-width:auto es el valor por
   defecto en un hijo flex), así que en cuanto entraba en juego una
   categoría/subcategoría larga la caja -- y con ella el anillo de foco al
   cerrar el desplegable -- se plantaba en ese ancho en vez de encoger con
   flex:1 como cabría esperar. overflow/ellipsis trunca el texto visible en
   vez de dejar que la caja crezca para caber entero. Ya no va sólo dentro
   del media query de 760px porque el desplegable ahora también se ve en
   escritorio. */
.toolbar__pills-mobile select {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Filtros: rectángulos de contorno en microetiqueta. El activo se resuelve en
   negro macizo en vez de con el degradado rosa/oro. */
.pill {
  padding: 10px 18px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: #35373a;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pill:hover { border-color: var(--accent-2); color: var(--accent-2); }
.pill--active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.sort-select {
  padding: 10px 16px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  /* El <select> no hereda color ni familia del padre en ningún navegador: hay que
     fijarlos o se queda con el negro y la fuente del sistema. */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

/* ============ Panel de filtros del catálogo ============ */
/* Ver buildCatalogFilters en script.js. El botón "Filtros" ocupa el sitio de la antigua
   fila de pills, a la izquierda de la barra. El panel en sí es un drawer anclado al
   borde izquierdo de la ventana (mismo lenguaje visual que .cart-drawer/.wishlist-drawer,
   sólo que a la izquierda), así que se abre igual en PC que en móvil. */

.catalog-view-toggle { display: none; }
.catalog-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.catalog-view-toggle__btn.is-active {
  border-color: var(--ink);
  color: var(--ink);
}
/* Fila compartida por las pills de subcategoría, el botón Filtros y el selector Ordenar,
   justo debajo del título de categoría (buildCatalogFilters la crea y la rellena). Las
   pills son el único hijo que puede necesitar scroll horizontal; Filtros/Ordenar no se
   encogen, así quedan siempre fijos a la derecha. */
.catalog-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 11px 48px 0;
}
.catalog-top-row .filters-toggle,
.catalog-top-row .sort-select {
  flex-shrink: 0;
}
/* .toolbar__pills ya existía para OTRA fila (.toolbar, más arriba) con su propio
   diseño (envuelve en varias líneas, flex-basis:100%, order:2) -- ese CSS le sigue
   pegando a las pills aunque JS las traslade aquí a .catalog-top-row, y "envolver
   en varias líneas" con etiquetas de subcategoría tan largas es justo lo que dejaba
   sólo 1-2 pills por fila y un hueco enorme al lado de cada una (varios cientos de
   px de alto desperdiciados). Se sobreescribe aquí, en el sitio donde de verdad
   vive ahora, para que sea la tira de scroll horizontal de una sola línea que dice
   el comentario de arriba (y que ya usa samaraimport.com). */
.catalog-top-row .toolbar__pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 5px;
  flex: 1;
  flex-basis: auto;
  min-width: 0;
  order: 0;
}
.catalog-top-row .toolbar__pills::-webkit-scrollbar { display: none; }
.catalog-top-row .toolbar__pills .pill { flex-shrink: 0; }

.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.filters-toggle:hover { border-color: var(--accent-2); color: var(--accent-2); }
.filters-toggle.is-open { border-color: var(--ink); background: var(--ink); color: var(--cream); }
/* Icono de "controles" dibujado con gradientes: dos guías horizontales con su mando,
   para no depender de un SVG ni de una fuente de iconos. */
.filters-toggle__icon {
  width: 16px;
  height: 12px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 16px 1.5px, 4px 6px, 16px 1.5px, 4px 6px;
  background-position: 0 2px, 4px 0, 0 9px, 9px 6px;
  background-repeat: no-repeat;
}
.filters-toggle__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.filters-toggle.is-open .filters-toggle__badge { background: rgba(255, 255, 255, 0.28); }

/* Fondo oscurecido detrás del drawer, igual que el del carrito/wishlist. */
.filters-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 12, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 200;
}
.filters-backdrop.is-open { opacity: 1; visibility: visible; }

.filters-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(380px, 100vw);
  background: var(--surface);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 24px 0 70px rgba(0, 0, 0, 0.22);
}
.filters-panel.is-open { transform: translateX(0); }

.filters-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.filters-panel__head h3 { font-size: 20px; margin: 0; }
.filters-panel__close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.filters-panel__close:hover { color: var(--ink); transform: rotate(90deg); }

.filters-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
}

.filters__inner { display: flex; flex-direction: column; margin: 0 -26px; }

/* Cada grupo es una fila de acordeón: título + chevron colapsados por defecto, el
   contenido sólo se despliega al hacer clic. */
.filters__group { border-bottom: 1px solid var(--border); }
.filters__group:first-child { border-top: 1px solid var(--border); }
.filters__group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 26px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.filters__group-toggle:hover, .filters__group-toggle.is-open { color: var(--accent-2); }
.filters__group-title { font: inherit; color: inherit; }
.filters__group-chevron {
  width: 7px;
  height: 7px;
  flex: none;
  border-style: solid;
  border-color: var(--muted);
  border-width: 0 2px 2px 0;
  margin-right: 3px;
  transform: rotate(-45deg);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.filters__group-toggle:hover .filters__group-chevron,
.filters__group-toggle.is-open .filters__group-chevron { border-color: var(--accent-2); }
.filters__group-toggle.is-open .filters__group-chevron { transform: rotate(45deg); }
/* El plegado en reposo usa el atributo [hidden] nativo (display:none garantizado en
   todos los navegadores); la animación de abrir/cerrar la lleva script.js aparte,
   animando `height` en px -- así la transición nunca decide si algo se ve, sólo cómo. */
.filters__group-body { overflow: hidden; transition: height 0.25s ease; }
.filters__group-body-inner { padding: 0 26px 20px; }

/* Las listas largas (colores, tallas) no deben estirar el panel: se hacen scrollables. */
.filters__options { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin: 0 -8px; }
.filters__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.filters__option:hover { background: var(--cream); }
.filters__option input { width: 16px; height: 16px; accent-color: var(--accent-2); cursor: pointer; flex: none; }
.filters__option-label { flex: 1; }
.filters__option-count { color: var(--muted); font-size: 12px; }
.filters__option.is-empty { opacity: 0.4; cursor: default; }
.filters__option.is-empty:hover { background: none; }
.filters__option.is-empty input { cursor: default; }
.filters__price { display: flex; flex-direction: column; gap: 14px; }
.filters__price-values { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); }
/* Dos <input type="range"> apilados sobre la misma pista: sin pista propia (transparent) y
   sin poder capturar clics fuera del tirador (pointer-events: none), sólo el tirador en sí
   vuelve a aceptarlos -- es el único modo de simular un slider de rango doble sin dos
   elementos separados peleándose por el mismo eje. */
.filters__price-slider { position: relative; height: 22px; }
.filters__price-track,
.filters__price-fill {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  transform: translateY(-50%);
}
.filters__price-track { background: var(--border); }
.filters__price-fill { background: var(--accent-2); left: 0; right: 0; }
.filters__price-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.filters__price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  margin-top: 0;
}
.filters__price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.filters__price-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.filters__price-slider input[type="range"]::-moz-range-track { background: transparent; }
.filters__price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.filters__price-slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.filters-panel__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 26px 22px;
  border-top: 1px solid var(--border);
}
.filters__clear {
  border: none;
  background: none;
  padding: 10px 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.filters__clear:hover { color: var(--ink); }
/* Estandarizado con PaulaHome/ColorsHome2000/SamaraImport: usaba
   var(--accent-2), la única botonera del sitio que no seguía el mismo
   lenguaje de color que el resto de CTAs primarios (--accent-dark de base,
   --ink al pasar el ratón). */
.filters__done {
  flex: 1;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--accent-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.filters__done:hover { background: var(--ink); }

.filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 2px 48px 0;
}
.filters-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.filters-chip:hover { border-color: var(--accent-2); }
.filters-chip--clear { background: none; text-decoration: underline; color: var(--muted); }
.filters-empty {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 48px 60px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 480px) {
  .filters-panel { width: 100%; }
}
@media (max-width: 760px) {
  .filters-chips { padding: 4px 20px 0; }
  .filters-empty { padding: 32px 20px 48px; }
  /* Vista de 1 producto por fila (botón de .catalog-view-toggle). */
  .product-grid.is-single-col { grid-template-columns: 1fr; }
  /* Fila única en móvil (pedido explícito -- antes se partía en dos: "Todos"
     arriba, Filtros/Ordenar debajo) y fija al hacer scroll, justo debajo del
     header sticky. --sticky-nav-height ya la mantiene actualizada un
     ResizeObserver sobre .header-group (ver script.js) para el resto de
     elementos sticky de la página, así que se reutiliza aquí en vez de fijar
     un valor a mano. El view-toggle se traslada aquí desde .toolbar por JS
     (buildCatalogFilters) para que los cuatro controles quepan en la misma
     fila; overflow-x de reserva por si en algún idioma el texto no encaja en
     una pantalla muy estrecha, en vez de romper el layout envolviendo. El
     orden lo fija `order` y no el HTML, porque todos son hermanos en la
     misma fila. */
  .catalog-top-row {
    padding: 8px 20px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: var(--sticky-nav-height, 49px);
    z-index: 90;
    background: var(--cream);
  }
  /* Orden pedido explícito: selector de categoría, ordenar, vista 2 productos,
     vista 1 producto, filtros -- filtros pasa de ir primero a ir el último,
     empujado al borde derecho con margin-left:auto (antes lo llevaba el
     view-toggle, que ahora va en medio). */
  .catalog-top-row .toolbar__pills-mobile { order: -1; flex: 0 1 auto; flex-basis: auto; min-width: 0; }
  .catalog-top-row .sort-select { order: 0; }
  .catalog-top-row .catalog-view-toggle { order: 1; flex: 0 0 auto; display: flex; gap: 4px; }
  .catalog-top-row .filters-toggle { order: 2; flex: 0 0 auto; margin-left: auto; }
  /* Ordenar pasa de texto ("Ordenar: Destacados"/etc, la opción activa) a sólo
     un icono de flechas arriba/abajo -- pedido explícito. El <select> nativo
     sigue siendo el control real (accesible, abre el mismo desplegable de
     opciones) pero su texto se colapsa y el icono se pinta como mask sobre
     background-color, así seguimos usando var(--ink) en vez de repetir un hex
     por sitio. color:transparent solo no basta -- Chromium pinta el valor
     seleccionado de un <select> con appearance:none por una vía interna que
     no siempre hereda el color del propio elemento; font-size:0 sí colapsa el
     texto de forma fiable. Se restaura en las <option> del desplegable, que
     si no se abrirían con las filas también a tamaño 0. */
  .catalog-top-row .sort-select {
    -webkit-appearance: none;
    appearance: none;
    font-size: 0;
    color: transparent;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--ink);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }
  .catalog-top-row .sort-select option { font-size: 14px; color: var(--ink); }
  /* .toolbar ya sólo contenía el recuento (oculto para usuarios normales, ver
     .toolbar__count[hidden] en script.js) una vez el view-toggle se traslada
     arriba -- se oculta entera para no dejar una franja vacía. */
  .toolbar { display: none; }
}

/* ============ Search results (Algolia Experience) ============ */

.search-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px 20px;
  align-items: start;
}
.search-layout .toolbar { padding: 0 0 20px; max-width: none; }
.search-layout .product-grid { padding: 0 0 90px; max-width: none; }
.search-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky;
  top: 24px;
}
.search-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.search-filters__head h3 {
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
}
.search-filters__clear {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.search-filters__group { padding: 16px 0; border-top: 1px solid var(--border); }
.search-filters__group:first-of-type { border-top: none; padding-top: 0; }
.search-filters__group h4 {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.search-filters__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.search-filters__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.search-filters__option input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.search-filters__option span { flex: 1; }
.search-filters__option-count { color: var(--muted); font-size: 12px; }
.search-filters__option--empty { opacity: 0.45; }
@media (max-width: 860px) {
  .search-layout { grid-template-columns: 1fr; }
  .search-filters { position: static; }
}

/* ============ Product grid ============ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Igual que samaraimport.com: sin max-width/margin auto para que llegue de
     borde a borde. Pedido explícito: sin margen lateral en absoluto -- los
     24px de antes se quitan del todo, y el único hueco que queda entre
     productos es el gap (8px, igual en horizontal y vertical) de la propia
     grid, nunca margin en las fichas. */
  gap: 6px;
  padding: 0 0 45px;
}
/* Reemplaza a la antigua barra de páginas numeradas: un sentinel invisible justo debajo
   del grid que, al entrar en el viewport (ver refreshCatalogPagination en script.js),
   carga el siguiente lote. Se solapa con el padding-bottom del grid igual que hacía
   .pagination antes, para no duplicar espacio en blanco. */
.catalog-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: -30px;
  padding: 0 24px 30px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.catalog-sentinel[hidden] { display: none; }
.catalog-sentinel::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: catalogSentinelSpin 0.7s linear infinite;
}
@keyframes catalogSentinelSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .catalog-sentinel { padding: 0 20px; margin-top: -40px; }
}
/* Ficha de producto sin "tarjeta": ni fondo blanco, ni esquinas, ni sombra, ni
   elevación al pasar el ratón. La foto se apoya directamente sobre el marfil y el
   texto va debajo, alineado a la izquierda -- disposición de catálogo. Todo el
   movimiento se concentra en la propia imagen, que hace un zoom lento. */
.product-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: none;
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: none; box-shadow: none; }
/* El scroll infinito puede dejar cientos de cards cargadas en el DOM a la vez (ver
   refreshCatalogPagination en script.js); content-visibility:auto es lo que de verdad
   evita el lag, saltándose layout/paint de las que estén lejos del viewport EN
   CUALQUIER DIRECCIÓN, sin tener que quitarlas del DOM a mano. contain-intrinsic-size
   reserva una altura aproximada mientras están "descargadas" para que no colapsen a 0. */
.product-grid .product-card {
  content-visibility: auto;
  contain-intrinsic-height: auto 380px;
}
.product-grid .product-card__swatch {
  height: auto;
  aspect-ratio: 1 / 1;
}
/* Espaciado interior de la ficha, a la mitad que el general, igual que
   samaraimport.com. Va acotado a .product-grid: el mismo .product-card se usa
   en los carruseles de destacados/relacionados, que conservan su holgura. */
.product-grid .product-card__body { padding: 10px 11px 12px; gap: 5px; }
.product-card__swatch {
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: var(--paper-deep);
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.24, 1);
}
@media (hover: hover) {
  .product-card:hover .product-card__swatch { transform: scale(1.03); }
}
.product-card__swatch .badge { position: absolute; top: 0; left: 0; z-index: 2; }
.product-card__swatch-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (hover: hover) {
  .product-card__link:hover .product-card__swatch-hover { opacity: 1; }
}
/* Filete bronce que barre bajo la foto al pasar el ratón: sustituye a la sombra
   como señal de "esto es interactivo". */
.product-card__body {
  padding: 18px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  position: relative;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}
.product-card__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.24, 1);
}
@media (hover: hover) {
  .product-card:hover .product-card__body::before { transform: scaleX(1); }
}
.product-card__body h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
}
.product-card__link { display: block; color: inherit; text-decoration: none; position: relative; }
.product-card__meta { display: flex; align-items: center; gap: 8px; }
.product-card__meta .stars { padding: 2px 6px; font-size: 10px; }
.product-card__meta span { color: var(--muted); font-size: 11px; }
.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.product-card__rating-stars { color: var(--accent-2); letter-spacing: 1px; }
.product-card__rating-count { color: var(--muted); }
/* El precio en la serif de display: es el dato que se quiere que destaque, y el
   cambio de familia lo separa del resto sin recurrir a la negrita. */
.price {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-top: auto;
  color: var(--ink);
}
.price .was { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 15px; margin-left: 10px; }
.product-card__body .btn { margin-top: 8px; width: 100%; }
/* Rejilla de swatches a sangre (pedido explícito, revierte el flex:1 de la
   pasada anterior): esa versión estiraba el ANCHO de cada swatch para
   ocupar el hueco sobrante, así que en una última línea con pocos elementos
   salían rectángulos alargados en vez de cuadrados. Con grid + auto-fill,
   las columnas son 1fr (reparten el ancho de la ficha a partes iguales)
   pero TODAS las líneas comparten el mismo número de columnas -- fijado por
   la que más swatches tenga, normalmente la primera -- así que el ancho de
   columna (y con aspect-ratio:1 en el swatch, su alto) es idéntico en
   cualquier línea: cuadrados 1x1 de verdad, no rectángulos. Una última línea
   incompleta deja hueco vacío al final en vez de estirar sus swatches, que
   es lo correcto para que sigan siendo cuadrados. El "+N"
   (.product-card__colour-more) es una celda más de la rejilla. */
.product-card__colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 6px; margin-top: 8px; }
.product-card__colour-swatch {
  width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 4px; padding: 0; border: 1px solid var(--border, #e2e2e2);
  overflow: hidden; cursor: pointer; background: none;
}
.product-card__colour-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__colour-swatch.is-active { border: 2px solid var(--ink); }
.product-card__colour-more { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16.5px; font-weight: 700; color: var(--muted); }
/* Tope de 3 chips en móvil (pedido explícito): el resto se ocultan por
   posición y el "+N" de escritorio (cuenta contra CATALOG_SWATCH_VISIBLE) se
   sustituye por el "+N" móvil (cuenta contra CATALOG_SWATCH_VISIBLE_MOBILE,
   ver script.js), que si no se queda oculto por defecto. */
.product-card__colour-more--mobile { display: none; }
/* Igual que la linea de arriba para --mobile: por defecto oculto hasta que
   layoutSingleColSwatches (script.js) decida mostrarlo -- fijado por CSS y no
   solo por el atributo `hidden` del HTML, porque una clase de autor con la
   misma especificidad que el `[hidden]` del user-agent (aqui,
   .product-card__colour-more con su propio "display: flex") le gana a ese
   `[hidden]` aunque empaten en especificidad, y el "+0" se quedaba visible
   colandose ademas como celda de la rejilla en la vista de 2. */
.product-card__colour-more--singlecol { display: none; }
@media (max-width: 760px) {
  .product-card__colour-swatch:nth-child(n+7) { display: none; }
  .product-card__colour-more--desktop { display: none; }
  .product-card__colour-more--mobile { display: inline; }
  /* La fila de la vista de 2 pasa de rejilla a flex de UNA sola linea.
     Antes era una rejilla de 7 columnas iguales (~19px cada una) y el "+N"
     ocupaba UNA celda, cuando su texto ("+14" a 16.5px) mide ~30px: se salia
     por el borde de la ficha. El apaño de entonces era esconder tambien el 6o
     swatch (regla :has(...):nth-child(n+6), ya retirada) para dejar una
     columna vacia detras que absorbiera ese desbordamiento -- pero eso dejaba
     5 swatches a la vista mientras el "+N" seguia contando contra 6
     (CATALOG_SWATCH_VISIBLE_MOBILE en script.js), asi que faltaba siempre un
     color: 5 + (total - 6) = total - 1.
     En flex el "+N" se dimensiona por su propio texto (flex: 0 0 auto, sin el
     aspect-ratio cuadrado de la clase base) y los 6 swatches se reparten el
     resto encogiendo lo que haga falta (flex: 1 1 0; siguen cuadrados por su
     aspect-ratio). Entran los 6 + el "+N" entero en una linea y la cuenta
     cuadra: 6 + (total - 6) = total. El tope sigue siendo el nth-child(n+7)
     de arriba, que es el que fija ese 6 y tiene que seguir cuadrando con
     CATALOG_SWATCH_VISIBLE_MOBILE. */
  .product-grid:not(.is-single-col) .product-card__colours {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .product-grid:not(.is-single-col) .product-card__colour-swatch {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .product-grid:not(.is-single-col) .product-card__colour-more--mobile {
    flex: 0 0 auto;
    aspect-ratio: auto;
    white-space: nowrap;
    padding-left: 2px;
  }

  /* Vista de 1 producto por fila: abandona el tope fijo de arriba (pensado
     para la ficha estrecha de la vista de 2) -- aqui la fila ocupa todo el
     ancho y layoutSingleColSwatches (script.js) decide en tiempo real cuantos
     swatches caben, poniendo su propio "+N" con la cuenta real. El "+N" de la
     vista de 2 se oculta para que no salgan dos "+N" distintos en la misma
     fila; los swatches que layoutSingleColSwatches deja visibles ganan al
     nth-child de arriba porque su display se fija inline (mayor especificidad
     que una clase, con o sin :has). */
  .product-grid.is-single-col .product-card__colour-more--mobile { display: none; }
  .product-grid.is-single-col .product-card__colours {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }
  .product-grid.is-single-col .product-card__colour-swatch,
  .product-grid.is-single-col .product-card__colour-more--singlecol {
    flex: 0 0 26px;
    width: 26px;
  }
}

/* Card "+N" que cierra la fila de variantes de un producto en la rejilla (ver
   catalogCardVariants/overflowCardHTML en script.js): ocupa el mismo hueco de
   card que sus hermanos, con un enlace a la ficha del producto en vez de una
   variante concreta. */
.product-card--more { display: flex; }
.product-card__link--more {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 300px;
  background: var(--cream);
  transition: background 0.25s ease;
  text-align: center;
}
.product-grid .product-card__link--more { height: auto; aspect-ratio: 1 / 1; }
.product-card__link--more:hover { background: var(--accent-tint); }
.product-card__more-count { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); }
.product-card__more-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }

/* ============ Bestsellers (horizontal carousel) ============ */
.bestsellers { padding: 76px 0 92px; }
/* Cabecera de sección con filete: el título va a la izquierda y una línea de 1px
   se come todo el ancho restante. Recurso de revista impresa; sustituye al título
   suelto en negrita que usa la otra tienda. */
.bestsellers__head {
  /* Sin max-width ya: antes 1320px centraba el título dejando hueco muerto a
     los lados en pantallas anchas. El padding lateral se mantiene (alinea
     con el resto del contenido de la página); lo que va de lado a lado sin
     ningún margen es la fila de fichas de abajo (.bestsellers__wrap). */
  max-width: 100%;
  margin: 0 0 34px;
  padding: 0 48px;
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.bestsellers__head h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  flex: none;
}
.bestsellers__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.bestsellers__wrap {
  /* Pedido explícito: la fila de fichas va de lado a lado del viewport, sin
     margen sobrante -- antes max-width:1320px + padding:0 48px dejaba hueco
     muerto en pantallas anchas y cortaba la última ficha visible antes de
     llegar al borde. */
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.bestsellers__track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.bestsellers__track::-webkit-scrollbar { display: none; }
.bestsellers__track .product-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}
#bestsellers-section .product-card { border-radius: 0; }
#bestsellers-section .bestsellers__track .product-card {
  flex-basis: 340px;
}
#bestsellers-section .product-card__swatch { height: 380px; }
/* Flechas cuadradas de contorno, ancladas arriba a la derecha junto al título en
   vez de flotando sobre las fichas en círculos con sombra. */
.bestsellers__arrow {
  position: absolute;
  top: -62px;
  transform: none;
  width: 42px;
  height: 42px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.2s ease;
}
.bestsellers__arrow:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* Pegadas al borde derecho del contenedor y contiguas (comparten filete). */
.bestsellers__arrow--left { right: 89px; left: auto; }
.bestsellers__arrow--right { right: 48px; border-left: none; }
.bestsellers__arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
@media (max-width: 720px) {
  .bestsellers__head { padding: 0 20px; }
  .bestsellers__track .product-card { flex-basis: 210px; }
  #bestsellers-section .bestsellers__track .product-card { flex-basis: 240px; }
  #bestsellers-section .product-card__swatch { height: 280px; }
  .bestsellers__arrow { display: none; }
}

/* swatch patterns */
.swatch-1 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.swatch-2 {
  background-color: var(--accent-2);
  background-image: radial-gradient(circle, rgba(255,255,255,0.55) 3px, transparent 3px);
  background-size: 20px 20px;
}
.swatch-3 {
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 14px, var(--accent-2) 14px, var(--accent-2) 28px);
}
.swatch-4 {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 26px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 6px, transparent 6px 26px),
    linear-gradient(135deg, var(--accent), var(--accent-2));
}
.swatch-5 {
  background: conic-gradient(from 45deg, var(--accent), var(--accent-2), var(--accent));
}

/* ============ CTA band ============ */

.cta-band {
  background: var(--surface);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 60px 48px;
  text-align: center;
  max-width: 1320px;
  margin: 0 auto 100px;
}
.cta-band h2 { font-size: 32px; margin-bottom: 24px; }

/* ============ Footer ============ */

/* Pie invertido a negro macizo. La otra tienda lo deja en crema translúcido con
   desenfoque; aquí el cierre de página es un bloque oscuro que hace de contrapeso
   al marfil de todo lo anterior. El acabado se lleva más lejos que un simple
   bloque plano: degradado sutil para dar profundidad, y el fleurón "❦" (el
   adorno clásico de imprenta) como divisor en vez de una simple raya -- sigue el
   mismo "lenguaje de papel impreso / catálogo de galería" que ya describe el
   resto de esta hoja, no es un elemento nuevo de estilo. */
.site-footer {
  /* Fijo, no ligado a --ink/--cream: el pie se queda oscuro a propósito con o
     sin el fondo claro nuevo de FASE 4 (sólo adphome.es la usa; las otras tres
     webs siguen teniendo --cream oscuro y este degradado ya encajaba solo). */
  background: linear-gradient(180deg, #1e1f21 0%, #1c1811 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #f0f0ee;
  border-top: 2px solid var(--accent-2);
}
.footer-newsletter {
  position: relative;
  text-align: center;
  padding: 78px 48px 62px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
/* El fleurón se posa sobre la propia raya divisoria, como en una cabecera de
   capítulo impresa -- fondo del color del pie para "cortar" la línea debajo. */
.footer-newsletter::after {
  content: '❦';
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  background: #1c1811;
  color: var(--accent-tint);
  padding: 0 18px;
  font-size: 16px;
  line-height: 1;
}
.footer-newsletter h3 { font-family: var(--font-display); font-style: italic; font-size: 34px; font-weight: 400; margin-bottom: 14px; }
.footer-newsletter p { color: rgba(255,255,255,0.62); margin-bottom: 30px; font-size: 14px; }
.newsletter-form {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  gap: 0;
}
.newsletter-form input {
  flex: 1;
  padding: 15px 18px;
  border-radius: 0;
  border: 1px solid rgba(203,182,156,0.38);
  border-right: none;
  background: transparent;
  color: #f0f0ee; /* Texto tecleado sobre el pie, que se queda oscuro a propósito -- no puede depender de --ink. */
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.newsletter-form input:focus { outline: none; border-color: var(--accent-tint); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.42); }
.newsletter-form button {
  white-space: nowrap;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.newsletter-form button::before { background: var(--cream); }
.newsletter-form button:hover { color: var(--ink); border-color: var(--cream); }

.footer-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 68px 48px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-grid h4 {
  position: relative;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 14px;
  color: var(--accent-tint);
}
/* Filete corto en vez de la raya a todo lo ancho de antes -- lee más a marca
   editorial de lujo (Vogue, catálogos de sastrería) que a separador de UI. */
.footer-grid h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: var(--accent);
}
.footer-grid a {
  position: relative;
  display: block;
  width: fit-content;
  color: rgba(255,255,255,0.66);
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
/* El subrayado nace desde la izquierda al pasar el ratón, en vez de un simple
   cambio de color -- el mismo gesto que ya usan los enlaces del cuerpo del
   sitio, llevado al pie. */
.footer-grid a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent-tint);
  transition: width 0.3s ease;
}
.footer-grid a:hover { color: var(--accent-tint); }
.footer-grid a:hover::after { width: 100%; }
/* El logotipo es negro + bronce sobre transparente. invert(1) a secas volvía el
   bronce de "home" en un gris azulado (el negativo matemático de #9d7c5d);
   sumar hue-rotate(180deg) devuelve el tono al bronce en vez de dejarlo virado,
   que es justo lo que pedía que el pie "encajase con el logo". */
.footer-brand .logo img { height: 78px; filter: invert(1) hue-rotate(180deg) brightness(1.08); }
.footer-brand p {
  font-family: var(--font-head);
  font-style: italic;
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  margin-top: 20px;
  max-width: 280px;
  line-height: var(--leading-body);
}
.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 0;
  border: 1px solid rgba(203,182,156,0.4);
  background: transparent;
  color: var(--accent-tint);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

.footer-bottom {
  position: relative;
  text-align: center;
  padding: 26px 48px 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.footer-bottom::before {
  content: '❦';
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  background: #1c1811;
  color: var(--accent-tint);
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* ============ Home categories (vertical cards) ============ */

.home-categories { padding: 8px 0 92px; }
.home-categories__head {
  max-width: 1320px;
  margin: 0 auto 34px;
  padding: 0 48px;
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.home-categories__head h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  flex: none;
}
.home-categories__head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  /* Contador para el índice impreso (01, 02, 03...) de cada plancha. */
  counter-reset: adp-cat;
}
/* La categoría deja de ser una foto oscurecida con el nombre encima. Ahora la
   imagen es una plancha limpia y el rótulo vive DEBAJO, sobre el marfil: se lee
   mucho mejor y elimina de un golpe el degradado negro que ambas tiendas
   compartían. El nombre se coloca con ::after tomando el texto del propio
   .home-categories__name, que pasa a hacer de dato en vez de rótulo. */
.home-categories__card {
  counter-increment: adp-cat;
  position: relative;
  border-radius: 0;
  padding: 0;
  aspect-ratio: 3 / 4.2;
  display: block;
  color: var(--ink);
  overflow: hidden;
  box-shadow: none;
  background-size: cover;
  background-position: center;
  transition: none;
}
/* Velo bronce muy leve que se retira al pasar el ratón: la foto "se enciende". */
.home-categories__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18,16,14,0.30), rgba(18,16,14,0.04) 60%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.home-categories__card:hover { box-shadow: none; transform: none; }
@media (hover: hover) {
  .home-categories__card:hover::after { opacity: 0.35; }
}
/* Índice en bronce arriba a la izquierda, sobre la foto. */
.home-categories__card::before {
  content: counter(adp-cat, decimal-leading-zero);
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
  color: #fff;
  mix-blend-mode: difference;
}
.home-categories__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  background: var(--cream);
  border-top: 1px solid var(--accent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
  text-shadow: none;
  transition: background 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .home-categories__card:hover .home-categories__name { background: var(--ink); color: var(--cream); }
}
/* La flecha circular flotante desaparece: sobra teniendo el rótulo inferior. */
.home-categories__arrow { display: none; }
.home-categories__rebajas-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 1;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .home-categories__card:hover .home-categories__rebajas-tag { color: var(--accent-tint); }
}
.home-categories--rebajas .home-categories__grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px;
}
.home-categories--rebajas .home-categories__card {
  aspect-ratio: 3 / 3.6;
  padding: 0;
}
.home-categories--rebajas .home-categories__name { font-size: 10px; }

/* ============ Lifestyle banner ============ */

.lifestyle-banner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto 88px;
  padding: 0 48px;
  gap: 0;
}
.lifestyle-banner__media { overflow: hidden; }
.lifestyle-banner__media img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  display: block;
}
/* El panel de texto se superpone a la foto y sube 56px: la composición deja de
   ser dos rectángulos a tope y pasa a tener un escalón, que es lo que la separa
   del banner simétrico de la otra tienda. */
.lifestyle-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  margin: 56px 0 -56px -80px;
  position: relative;
  z-index: 1;
  align-self: center;
}
.lifestyle-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 20px;
}
.lifestyle-banner__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.lifestyle-banner__content h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  line-height: var(--leading-head);
  margin-bottom: 18px;
}
.lifestyle-banner__content p {
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--ink-soft);
  opacity: 1;
  margin-bottom: 28px;
  max-width: 44ch;
}
/* El enlace pasa de subrayado permanente a microetiqueta con filete que se
   extiende al pasar el ratón. */
.lifestyle-banner__link {
  align-self: flex-start;
  position: relative;
  padding-bottom: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.lifestyle-banner__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.lifestyle-banner__link:hover::after { transform: scaleX(1); }

/* ============ Promo banner (full-bleed static) ============ */

/* Banner a sangre. Se reduce de 92vh a 78vh (a pantalla completa obligaba a hacer
   scroll a ciegas dos veces seguidas) y el texto se ancla abajo a la izquierda en
   lugar de centrado, con un marco de filete fino por dentro del sangrado -- gesto
   de portada de catálogo. */
.promo-banner {
  position: relative;
  min-height: 78vh;
  margin: 0 0 92px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
/* El texto va a la izquierda, así que el velo carga ahí: 0.70 asegura que el
   párrafo de 14px se lea también sobre una foto clara (playa, sábana blanca),
   que es lo que hay en estas dos secciones. */
.promo-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,16,14,0.70), rgba(18,16,14,0.20) 58%, rgba(18,16,14,0.32));
}
/* Marco interior. */
.promo-banner::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255,255,255,0.30);
  pointer-events: none;
  z-index: 1;
}
.promo-banner__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: left;
  color: #fff;
  padding: 0 0 92px 92px;
}
.promo-banner__content h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: var(--leading-head);
  margin-bottom: 20px;
}
.promo-banner__content p {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  line-height: var(--leading-body);
  text-transform: none;
  opacity: 0.92;
  margin-bottom: 34px;
  max-width: 42ch;
}
.promo-banner__btn {
  position: relative;
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 0;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.promo-banner__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.promo-banner__btn:hover { color: var(--ink); border-color: var(--cream); }
.promo-banner__btn:hover::before { transform: scaleY(1); }

/* ============ Responsive ============ */

@media (max-width: 1100px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .home-categories__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero__title { font-size: 44px; }
  .hero__inner { padding-left: 68px; padding-right: 44px; }
  /* El escalón del banner necesita ancho; por debajo de esto se alinea a tope. */
  .lifestyle-banner__content { margin-left: -48px; }
}

/* La foto a sangre se mantiene también en móvil; sólo se reduce el alto
   mínimo y el padding, y se retira el sello rotado (no cabe bien a este ancho). */
@media (max-width: 900px) {
  .hero { min-height: 88vh; }
  .hero__inner { width: 100%; min-height: 480px; padding: calc(var(--sticky-nav-height, 64px) + 56px) 28px 32px 28px; }
  .hero__inner::before { content: none; }
  .hero__title { max-width: 16ch; }
}

/* Nav collapses to the hamburger/dropdown layout well above the general
   mobile breakpoint: the full category row (7 links + mega-menus) is wider
   than the viewport on common laptop widths (e.g. 1366px), which otherwise
   squeezes the logo/header-actions grid columns down to 0 width. */
@media (max-width: 1850px) {
  .site-nav { display: flex; position: relative; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 14px; }
  .header-actions { margin-left: auto; }
  .search { display: none; }
  .search.is-mobile-open {
    display: flex;
    position: relative;
    width: 170px;
    margin: 0 4px 0 12px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--ink);
  }
  .search.is-mobile-open input { opacity: 1; }
  /* El logo cede su sitio mientras la búsqueda está abierta -- en una fila ya
     apretada (logo + iconos + hamburguesa), la caja de búsqueda expandida
     necesita ese espacio más que el logotipo. */
  .site-nav:has(.search.is-mobile-open) > .logo { display: none; }
  .mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    order: -1;
  }
  .nav-toggle { display: flex; order: -1; }
  .site-nav__links { display: none; }
}

/* Cyrillic category labels run noticeably wider than the other 7 languages
   (more characters + wider glyphs at the same font-size), so the row of 7
   links no longer fits under the general 1850px breakpoint above — it was
   overflowing the header-actions (cart/login/lang-switcher) off-screen at
   viewports up to ~2200px. Same hamburger collapse as above, just scoped to
   Russian and triggered earlier. */
@media (max-width: 2250px) {
  html[lang="ru"] .site-nav { display: flex; position: relative; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 14px; }
  html[lang="ru"] .header-actions { margin-left: auto; }
  html[lang="ru"] .search { display: none; }
  html[lang="ru"] .search.is-mobile-open {
    display: flex;
    position: relative;
    width: 170px;
    margin: 0 4px 0 12px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--ink);
  }
  html[lang="ru"] .search.is-mobile-open input { opacity: 1; }
  html[lang="ru"] .site-nav:has(.search.is-mobile-open) > .logo { display: none; }
  html[lang="ru"] .mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    order: -1;
  }
  html[lang="ru"] .nav-toggle { display: flex; order: -1; }
  html[lang="ru"] .site-nav__links { display: none; }
}

/* Mobile side-drawer menu (built by initADP() in script.js from the same
   nav-item/mega-menu markup as the desktop hover nav): un panel deslizante
   de dos columnas persistentes — carril de categorías a la izquierda, y a la
   derecha las subcategorías de la categoría activa, cada una desplegable in
   situ para revelar sus hojas, en vez del drill-down de pantalla completa
   de antes. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
/* Pedido explícito: el panel ocupa toda la pantalla (antes era un cajón de
   ~380px con fondo semitransparente detrás) -- el backdrop ya no hace falta
   como capa oscura separada, pero se deja en el DOM (position/inset:0 debajo
   del panel) por si algún día vuelve a haber margen visible alrededor. */
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
}
.mobile-drawer__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-drawer__back,
.mobile-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  flex-shrink: 0;
}
/* visibility (no display:none) para que el título de en medio no salte de
   sitio al entrar/salir de la vista raíz, donde no hay flecha "atrás". */
.mobile-drawer__back[hidden] { visibility: hidden; display: flex; }
.mobile-drawer__header-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mobile-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 24px; }
/* Pedido explícito: mismo peso de fuente para "Ver todo", categorías,
   subcategorías y hojas -- antes el título tenía 700, "todo en X" 600 y las
   hojas heredaban un gris más flojo, dando una jerarquía desigual. Un único
   .mobile-drawer__item (para categoría/subcategoría/hoja) y
   .mobile-drawer__all-link (para "Ver todo") comparten font-weight. */
.mobile-drawer__all-link {
  display: block;
  width: 100%;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-drawer__item {
  display: block;
  width: 100%;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-drawer__item:hover,
.mobile-drawer__all-link:hover { color: var(--accent-2); }

@media (max-width: 760px) {
  .container, .trust-bar, .announce-bar, .section, .toolbar,
  .footer-grid, .checkout-page, .account-section, .account-session { padding-left: 20px; padding-right: 20px; }
  /* Pedido explícito: catálogo a sangre en móvil (sin margen lateral, salvo el
     gap entre fichas) -- .product-grid ya trae padding:0 lateral en la regla
     base de escritorio (más arriba), así que basta con NO meterlo en el grupo
     de arriba (que se lo pisaría con 20px) para que herede ese 0. */
  .site-nav { padding-left: 20px; padding-right: 20px; }
  /* Pedido explícito: en móvil el hamburguesa va al extremo derecho de la
     barra (en tablet/laptop, arriba, el bloque de 1850px lo manda a la
     izquierda con order:-1) -- order:2 lo coloca detrás de header-actions,
     que ya tiene margin-left:auto y empuja todo el grupo al borde derecho.
     Repetido con html[lang="ru"] para igualar su especificidad y ganarle
     al order:-1 de esa variante en el bloque de 2250px de arriba. */
  .nav-toggle { order: 2; }
  html[lang="ru"] .nav-toggle { order: 2; }
  .lifestyle-banner { grid-template-columns: 1fr; padding: 0 20px; margin-bottom: 56px; }
  .lifestyle-banner__media img { min-height: 260px; }
  /* Sin dos columnas no hay escalón que dar: el panel vuelve a apilarse limpio. */
  .lifestyle-banner__content { padding: 32px 28px; margin: 0; border-left-width: 3px; }
  .lifestyle-banner__content h2 { font-size: 28px; }
  .promo-banner { min-height: 68vh; margin-bottom: 56px; }
  .promo-banner::after { inset: 14px; }
  .promo-banner__content { padding: 0 28px 56px; }
  .promo-banner__content h2 { font-size: 28px; letter-spacing: 0.02em; }
  .promo-banner__content p { font-size: 13px; }
  .category-grid { grid-template-columns: 1fr; }
  .home-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 20px; }
  .home-categories__head { padding: 0 20px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .product-card__swatch { height: 150px; }
  /* Smaller favoritos star on mobile — 42px was eating a big chunk of the
     (already narrow, 2-per-row) catalog product image. Escrito sin ".product-grid"
     delante, esto también le pegaba al #pd-wishlist de la ficha de producto (misma
     clase .wishlist-star): en la ficha ganaba por orden de aparición a
     .wishlist-star--pd (46px, ver más arriba), dejando el favorito a 30px contra un
     botón de compartir que se quedaba en 46px -- pedido explícito: mismo tamaño para
     los dos en móvil. Al acotarlo aquí a .product-grid, la ficha de producto ya no
     se ve afectada y el favorito vuelve a los 46px de .wishlist-star--pd. */
  .product-grid .wishlist-star { width: 30px; height: 30px; top: 8px; right: 8px; }
  /* Share button has no mobile-specific sizing of its own, so it was still
     sitting at the desktop geometry (top:12/right:62, 42px) built around the
     old 42px star -- once the star shrank to 30px @ right:8 above, that left
     the share icon floating disconnected above-right of it instead of right
     next to it. Mirror the star's new size/position here, offset just far
     enough left to clear it (8px star-right + 30px star-width + 8px gap). */
  .share-btn.product-card__share { width: 30px; height: 30px; top: 8px; right: 42px; }
  .product-card__share .share-btn__toggle svg { width: 15px; height: 15px; }
  .product-grid .product-card__share { opacity: 1; }
  .wishlist-star svg { width: 15px; height: 15px; }
  /* Touch has no hover state, so the hover-to-reveal behavior above would
     make the bookmark unreachable on mobile catalog -- keep it always visible. */
  .product-grid .wishlist-star { opacity: 1; }
  /* Mismo intercambio que en escritorio (ver más arriba), con la geometría
     móvil (30px, right:8/42 en vez de 12/58). */
  .product-grid .wishlist-star { right: 42px; }
  .product-grid .share-btn.product-card__share { right: 8px; }
  .product-card__body { padding: 12px 0 16px; gap: 6px; margin-top: 12px; }
  .product-card__body h3 { font-size: 11px; }
  .price { font-size: 17px; }
  /* Pedido explícito: la cuadrícula de tallas con botón "+" directamente en la
     tarjeta del catálogo (móvil) es ahora exclusiva de samaraimport.com --
     display:none (el valor base, sin override) la oculta aquí, así que en
     móvil este sitio vuelve a no tener ningún control de añadir-al-carrito en
     la propia tarjeta -- hay que entrar a la ficha del producto, como antes
     de que existiera esta función. El JS que la construye (quickAddHTML,
     wireQuickAdd) sigue siendo compartido/sin tocar; sólo se ocultó por CSS. */
  /* .product-card__quickadd { display: flex; } */
  .hero__inner { padding: 44px 20px 36px; min-height: auto; }
  .hero__title { font-size: 34px; max-width: none; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 22px 20px; margin-top: 40px; }
  .hero__stat { padding-right: 0; }
  .hero__stat + .hero__stat { padding-left: 0; }
  .hero__stat:nth-child(3)::before { display: none; }
  .hero__stat strong { font-size: 23px; }
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .checkout-page, .account-section, .account-session { padding-top: 40px; padding-bottom: 70px; }
  .checkout-page__title, .account-section > h1 { font-size: 30px; margin-bottom: 24px; }
  .section { padding: 60px 20px; }
  .section--tight { padding: 44px 20px; }
  .section-heading { margin-bottom: 36px; }
  .section-heading h2 { font-size: 28px; }
  /* Pedido explícito: quitar el hueco vacío de arriba y abajo de la cabecera de
     categoría en móvil -- mismo valor ya usado en samaraimport.com. */
  .category-hero { padding: 7px 20px 6px; }
  .category-hero h1 { font-size: 32px; }
  .footer-brand .logo img { height: 60px; }
  .product-detail__info h1 { font-size: 26px; }
  .product-detail__extra-head,
  .product-detail__viewed-head,
  .product-detail__reviews-head,
  .bestsellers__head,
  .toolbar { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .header-actions { gap: 0; }
  .cart, .wishlist-toggle { margin-left: 14px; }
  #header-signin-label,
  .header-actions > .divider,
  #header-register-link { display: none; }
  .checkout-item {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "photo name" "photo qty" "photo price" "photo remove";
    row-gap: 4px;
  }
  .checkout-item__photo { grid-area: photo; width: 56px; height: 56px; }
  .checkout-item__name { grid-area: name; }
  .checkout-item__qty { grid-area: qty; }
  .checkout-item__price { grid-area: price; }
  .checkout-item__remove { grid-area: remove; justify-self: start; }
}

/* ============ Shopping cart drawer ============ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 12, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 200;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--surface);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.22);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer__head h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.cart-drawer__close {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.cart-drawer__close:hover { color: var(--ink); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 26px;
}

.cart-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
.cart-empty p { margin-bottom: 22px; font-size: 15px; }

.cart-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item__name { font-weight: 700; font-size: 15px; margin-bottom: 4px; line-height: 1.3; }
.cart-item__unit { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.cart-item__unit-label { font-size: 12px; color: var(--muted, #666); white-space: nowrap; }
.cart-item__unit-note { font-size: 12px; color: var(--muted, #666); margin-top: 4px; }

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.qty-btn:hover { border-color: var(--accent); background: var(--cream); }
.qty-input {
  width: 46px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.cart-item__line { font-weight: 700; font-size: 15px; }
.cart-item__remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  letter-spacing: 0.02em;
}
.cart-item__remove:hover { color: var(--accent-2); }

.cart-drawer__foot {
  border-top: 1px solid var(--border);
  padding: 22px 26px 26px;
}
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  margin-bottom: 4px;
}
.cart-drawer__subtotal strong { font-size: 22px; font-family: var(--font-head); }
.cart-drawer__note { color: var(--muted); font-size: 12px; margin: 0 0 16px; }
.cart-drawer__checkout { width: 100%; }

@media (max-width: 480px) {
  .cart-drawer { width: 100%; }
}

/* ============ Wishlist drawer ============ */

.wishlist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 12, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 200;
}
.wishlist-overlay.is-open { opacity: 1; visibility: visible; }

.wishlist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  background: var(--surface);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.22);
}
.wishlist-drawer.is-open { transform: translateX(0); }

.wishlist-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 26px;
}

.wishlist-item .cart-item__main { flex: 1; }
.wishlist-item__add { margin-top: 10px; }

@media (max-width: 480px) {
  .wishlist-drawer { width: 100%; }
}

/* ============ Finalizar Compra (checkout) ============ */

.checkout-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 48px 110px;
}
.checkout-page__title { font-size: 42px; margin-bottom: 36px; }

/* Recorrido de un solo tirón, de arriba abajo, en vez del clásico "resumen fijo al lado"
   de un checkout B2B: el resumen es un desplegable que abre el paso, no una columna aparte
   que compite en pantalla con el formulario mientras se rellena. */
.checkout-stepper {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 0;
}
.checkout-stepper[hidden] { display: none; }
.checkout-stepper__item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.checkout-stepper__item:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
}
.checkout-stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.checkout-stepper__label { white-space: nowrap; }
@media (max-width: 640px) { .checkout-stepper__label { display: none; } }
.checkout-stepper__item.is-active,
.checkout-stepper__item.is-done { color: var(--ink); }
.checkout-stepper__item.is-active .checkout-stepper__dot,
.checkout-stepper__item.is-done .checkout-stepper__dot {
  background: var(--accent-2, var(--ink));
  border-color: var(--accent-2, var(--ink));
  color: #fff;
}

.checkout-page__layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
  margin: 0 auto;
}
.checkout-page__layout[hidden] { display: none; }

.checkout-summary-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.checkout-summary-toggle__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.checkout-summary-toggle__head::-webkit-details-marker { display: none; }
/* Flecha propia en vez del marcador nativo del navegador, para que combine con el resto
   de chevrons del sitio (ver .filters__group-chevron) en lugar del triángulo del sistema. */
.checkout-summary-toggle__head::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 12px;
}
.checkout-summary-toggle[open] .checkout-summary-toggle__head::after { transform: rotate(-135deg); }
.checkout-summary-toggle__total { margin-left: auto; margin-right: 12px; }
.checkout-summary-toggle .checkout-page__summary {
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 20px 24px 24px;
  position: static;
}
.checkout-page__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.checkout-page__items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@keyframes stepUnfold {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
.checkout-page__step,
.checkout-page__address,
.checkout-page__summary,
.address-continue,
.checkout-page__payment {
  animation: stepUnfold 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.checkout-page__address {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.checkout-page__address h3 { font-size: 18px; margin-bottom: 16px; }
.checkout-page__address .address-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-page__address .address-form[hidden] { display: none; }
.address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.address-list[hidden] { display: none; }
.address-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 14px 16px;
  cursor: pointer;
}
.address-card--selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.address-card__radio { margin-top: 3px; }
.address-card__body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.address-card__name { font-weight: 700; font-size: 14px; }
.address-card__default {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.address-card__actions { display: flex; gap: 16px; margin-top: 8px; }
.address-card__delete,
.address-card__default-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.address-card__delete:hover,
.address-card__default-btn:hover { color: var(--ink); }
.address-form__actions { display: flex; gap: 12px; }
.address-form__actions[hidden] { display: none; }
.address-add-btn { align-self: flex-start; }
.address-continue { margin-top: 20px; }
.address-continue[hidden] { display: none; }
.address-continue .btn { width: 100%; }
.checkout-item {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.checkout-item__photo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md, 8px);
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
}
.checkout-item__photo--empty { background-color: var(--border); }
.checkout-item__name { font-weight: 700; }
.checkout-item__qty { display: flex; align-items: center; gap: 6px; }
.checkout-item__unit-label { font-size: 12px; color: var(--muted, #666); white-space: nowrap; }
.checkout-item__unit-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted, #666); }
.checkout-item__price { font-weight: 700; }
.checkout-item__remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.checkout-item__remove:hover { color: var(--accent-2); }
.checkout-page__done {
  background: #e6f3ea;
  color: #1f7a3f;
  border-radius: var(--radius-lg);
  padding: 22px;
  font-weight: 600;
}
.checkout-page__summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: 24px;
  min-width: 0;
}
.checkout-page__summary h3 { font-size: 18px; margin-bottom: 18px; }
.checkout-page__shipping-progress {
  margin: -8px 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(86, 97, 73, 0.12);
  color: var(--accent-2, var(--ink));
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.checkout-page__colors {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.checkout-page__colors h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.checkout-page__color-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
}
.checkout-page__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  color: var(--muted);
}
.checkout-page__row--total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.checkout-page__payment {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.checkout-page__payment[hidden] { display: none; }
.checkout-page__step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.checkout-page__step[hidden] { display: none; }
.checkout-page__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.checkout-page__step-title { font-size: 18px; }
.checkout-page__confirm { margin: 20px 0 32px; }
.checkout-page__confirm[hidden] { display: none; }
.pay-method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pay-method[hidden] { display: none; }
.pay-method__option {
  display: flex;
  flex-direction: column;
  /* El radio va arriba a la izquierda: sin align-items se estira al ancho de la tarjeta
     y el circulo queda centrado, que parece un adorno en vez de un control. */
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.pay-method__option input[type='radio'] {
  margin: 0 0 6px;
}
.pay-method__option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.pay-method__label { font-size: 14px; font-weight: 600; }
.pay-method__hint { font-size: 12px; color: var(--muted); }
.transfer-info {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.transfer-info[hidden] { display: none; }
.transfer-info p { margin: 0 0 8px; }
.transfer-info p:last-child { margin-bottom: 0; }
.transfer-data {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.transfer-data dt { font-weight: 600; color: var(--muted); }
.transfer-data dd { margin: 0; word-break: break-all; }
@media (max-width: 560px) {
  .pay-method { grid-template-columns: 1fr; }
}
.checkout-page__payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.checkout-page__note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.checkout-page__pay-btn { width: 100%; }
.checkout-page__empty {
  text-align: center;
  padding: 60px 0;
}
.checkout-page__empty p { margin-bottom: 20px; color: var(--muted); }

/* ============ Mi Cuenta (login / registro) ============ */

.account-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 48px 110px;
}
.account-section > h1 {
  font-size: 42px;
  margin-bottom: 36px;
}
.account-grid[hidden] { display: none; }
.account-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}
.auth-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.auth-card__head {
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
}
.auth-card__head h2 {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-body);
}
.auth-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#register-step-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Honeypot: kept visually present (not display:none) so bots that skip
   hidden fields still fill it, but positioned off-screen for real users. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.form-field label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.form-field input:not([type="checkbox"]):not([type="file"]) {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
}
/* El foco se marca con el bronce en vez del anillo azul del navegador. */
.form-field input:not([type="checkbox"]):not([type="file"]):focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}
.form-check input { margin-top: 3px; flex-shrink: 0; }
.form-check a { color: var(--accent-2); text-decoration: underline; }
.auth-forgot {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 0;
}
.auth-forgot a { color: var(--accent-2); font-weight: 700; }
/* Los avisos pasan de rectángulo redondeado con relleno de color a filete lateral
   grueso sobre fondo tenue: mismo recurso que el panel del banner lifestyle. */
.form-message {
  display: none;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 0;
  border-left: 3px solid currentColor;
}
.form-message.is-error { display: block; background: #fbe8e7; color: #a8362c; }
.form-message.is-success { display: block; background: #e6f3ea; color: #1f7a3f; }
.form-section-title {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  margin: 0;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}
.form-section-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.form-row--vat { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.form-field--vat-action .btn { white-space: nowrap; padding: 13px 18px; }
.auth-card__body .btn { width: 100%; }

.social-auth {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 28px 0;
}
.social-auth__google { min-height: 44px; display: flex; }
.social-auth__google > div { width: 100% !important; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px 0;
  color: var(--muted);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.account-session {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 48px 110px;
  text-align: center;
}
.account-session h1 { font-size: 36px; margin-bottom: 14px; }
.account-session p { color: var(--muted); margin-bottom: 28px; }

.account-page__subtitle { color: var(--muted); margin: -24px 0 36px; }
.account-grid__main,
.account-grid__aside { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.account-field-row { display: flex; align-items: center; gap: 12px; }
.account-field-row[hidden] { display: none; }
.account-field-row p { margin: 0; }
.account-field-row__edit {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.account-field-edit { display: flex; flex-direction: column; gap: 12px; }
.account-field-edit[hidden] { display: none; }
.account-field-edit input { width: 100%; }
.account-field-edit__actions { display: flex; gap: 12px; }
.account-business-info { display: flex; flex-direction: column; gap: 12px; }
.account-business-info div { display: flex; flex-direction: column; gap: 2px; }
.account-business-info dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.account-business-info dd { margin: 0; font-size: 14px; }

@media (max-width: 860px) {
  .account-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ============ Páginas de contenido (Sobre Nosotros, Contacto, etc.) ============ */

.info-page { max-width: 780px; }
.info-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.info-page__head h1 { font-size: 42px; margin: 0; }
.info-page__body p { margin: 0 0 18px; line-height: 1.7; color: var(--ink); }
.info-page__body p:last-child { margin-bottom: 0; }
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  resize: vertical;
}
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.info-page__edit-actions {
  display: flex;
  gap: 12px;
}
.info-page__edit-actions .btn { width: auto; flex: 1; }

/* ============================================================
   Panel de administración de catálogo (acceso especial)
   ============================================================ */
.admin-fab {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  z-index: 900;
  transition: transform 0.15s ease;
}
.admin-fab:hover { transform: scale(1.06); }
/* El de pedidos se apila encima del de catálogo para no taparse entre ellos. */
.admin-fab--orders { bottom: 92px; }

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orders-message { color: var(--muted); font-size: 13px; margin: 8px 0; }
.orders-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.orders-card--pending_payment { border-left: 3px solid #c9a227; }
.orders-card--paid { border-left: 3px solid #2e7d32; }
.orders-card--expired,
.orders-card--cancelled { border-left: 3px solid var(--muted); opacity: 0.7; }
.orders-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.orders-card__status {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.orders-card__total { margin-left: auto; }
.orders-card__meta { margin: 2px 0; color: var(--muted); word-break: break-word; }
.orders-card__meta code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.orders-card__items { margin: 8px 0 0; padding-left: 18px; }
.orders-card__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
}
.admin-modal.is-open { display: block; }
.admin-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 26, 0.55);
}
.admin-modal__panel {
  position: relative;
  max-width: 640px;
  margin: 40px auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 32px 36px;
}
.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.admin-modal__head h3 { font-size: 20px; margin: 0; }
.admin-modal__close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.admin-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.admin-form select {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
}
.admin-form select:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.form-field--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink); }
.admin-form__hint { margin: 4px 0 0; font-size: 12px; font-weight: 400; color: #777; }
.admin-size-baseline { width: 100%; }
.admin-form__preview {
  margin-top: 8px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.admin-form__message { font-size: 13px; font-weight: 600; padding: 0; }
.admin-form__message.is-error { padding: 11px 16px; border-radius: 10px; background: #fbe8e7; color: #a8362c; }
.admin-form__message.is-success { padding: 11px 16px; border-radius: 10px; background: #e6f3ea; color: #1f7a3f; }
.admin-form__actions { display: flex; gap: 12px; }
.admin-form__actions .btn { flex: 1; }

.admin-list { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }
.admin-list__loading { color: var(--muted); font-size: 14px; text-align: center; }
.admin-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.admin-row__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--cream);
  overflow: hidden;
}
.admin-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-row__info { flex: 1; min-width: 0; }
.admin-row__name { font-weight: 700; font-size: 14px; }
.admin-row__tags { font-size: 12px; color: var(--muted); }
.admin-row__price { font-size: 13px; margin-top: 2px; }
.stock-badge { font-size: 9px; font-weight: 600; letter-spacing: var(--tracking-micro); text-transform: uppercase; padding: 5px 10px; border-radius: 0; white-space: nowrap; }
.stock-badge.is-in { background: #e6f3ea; color: #1f7a3f; }
.stock-badge.is-out { background: #fbe8e7; color: #a8362c; }
.admin-row__actions { display: flex; gap: 8px; }
.admin-row__actions .btn { padding: 8px 12px; font-size: 12px; }

@media (max-width: 640px) {
  .admin-modal__panel { margin: 0; max-height: 100vh; border-radius: 0; }
  .admin-row { flex-wrap: wrap; }
}

/* Admin: color-variant rows inside the catalog form */
.admin-variants { display: flex; flex-direction: column; gap: 10px; }
.admin-variant-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.admin-variant-row__top { display: flex; align-items: center; gap: 10px; }
.admin-variant-row .admin-variant-color {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--cream);
}
.admin-variant-remove {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-variant-remove:hover { color: #a8362c; }
.admin-variant-images { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-variant-image {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-variant-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-variant-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-variant-image-remove:hover { background: #a8362c; }
.admin-variant-add-image {
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.admin-variant-add-image:hover { border-color: var(--accent); color: var(--accent); }

.admin-sizes { display: flex; flex-direction: column; gap: 10px; }
.admin-size-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-areas:
    "name  price units pack"
    "meas  meas  meas  meas"
    "guide guide guide guide"
    "code  code  stock remove"
    "qty   qty   qty   qty";
  align-items: center;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.admin-size-row input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--cream);
}
.admin-size-row .admin-size-name { grid-area: name; }
.admin-size-row .admin-size-price { grid-area: price; }
.admin-size-row .admin-size-units-per-box { grid-area: units; }
.admin-size-row .admin-size-pack-size { grid-area: pack; }
.admin-size-row .admin-size-factusol-code { grid-area: code; }
.admin-size-row .admin-size-measurement { grid-area: meas; }
.admin-size-row .admin-size-guide { grid-area: guide; }
.admin-size-stock-quantity {
  grid-area: qty;
  font-size: 12px;
  color: var(--muted);
}
.admin-size-stock-toggle {
  grid-area: stock;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.admin-size-remove {
  grid-area: remove;
  justify-self: end;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.admin-size-remove:hover { color: #a8362c; }
@media (max-width: 480px) {
  .admin-size-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name  name"
      "meas  meas"
      "guide guide"
      "price units"
      "pack  code"
      "stock remove"
      "qty   qty";
  }
}

/* ============ Página de producto ============ */
.product-detail__breadcrumb {
  max-width: 100%;
  margin: 12px auto 0;
  padding: 0 48px;
}
.product-detail {
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 40px 48px;
  display: grid;
  grid-template-columns: minmax(0, calc(52.38% + 200px)) minmax(0, calc(47.62% - 200px));
  gap: 32px;
}
.product-detail[hidden] { display: none; }

/* Product detail image lightbox */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 16, 14, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 60px 20px 30px;
}
.pd-lightbox.is-open { display: flex; }
.pd-lightbox__image {
  width: min(80vw, 820px);
  height: min(65vh, 820px);
  background: center / contain no-repeat;
  border-radius: 8px;
}
.pd-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.pd-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.pd-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.pd-lightbox__nav--prev { left: 24px; }
.pd-lightbox__nav--next { right: 24px; }
.pd-lightbox__nav[hidden] { display: none; }
.pd-lightbox__thumbs {
  display: flex;
  gap: 10px;
  max-width: 90vw;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pd-lightbox__thumbs[hidden] { display: none; }
.pd-lightbox__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
}
.pd-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-lightbox__thumb.is-active { border-color: #fff; }
.product-detail__info { grid-column: 2; grid-row: 1; min-width: 0; }
.product-detail__info-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  position: sticky;
  top: 188px;
}
.product-detail__info h1 { font-size: 34px; line-height: 1.15; }
.product-detail__pack-summary { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--accent-2); }
.product-detail__pack-summary[hidden] { display: none; }
.product-detail__tags { font-size: 13px; color: var(--muted); }
.product-detail__price { font-size: 24px; margin: 0; display: flex; align-items: baseline; gap: 10px; }
.product-detail__price[hidden] { display: none; }
.product-detail__price-original { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 18px; }
.product-detail__price-final { font-weight: 700; }
.product-detail__price:has(.product-detail__price-original:not([hidden])) .product-detail__price-final,
.product-detail__size-price:has(.product-detail__price-original:not([hidden])) .product-detail__price-final {
  color: #d32f2f;
}
.product-detail__colour { display: flex; flex-direction: column; gap: 10px; }
.product-detail__colour-label { font-size: 13px; font-weight: 700; }
.product-detail__colour-label strong { font-weight: 700; color: var(--accent-2); }
.product-detail__sizes-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Cabeceras "Unidades"/"Pack"/"Uds/pack" + "Cajas" de los sumadores -- pedido
   explícito, portado de samaraimport.com. Ancho fijo alineado con el ancho de
   cada .product-detail__step-group de abajo (22+32+22+2*4 = 84px en móvil,
   32+44+32+2*6 = 120px en escritorio, ver @media(min-width:1024px) de
   .product-detail__steppers un poco más abajo) para que quede centrado sobre
   su columna de stepper correspondiente. */
.product-detail__sizes-cols { margin-left: auto; display: flex; gap: 14px; flex: none; }
.product-detail__sizes-cols[hidden] { display: none; }
.product-detail__sizes-col {
  width: 84px;
  flex: none;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 1024px) {
  .product-detail__sizes-cols { gap: 20px; }
  .product-detail__sizes-col { width: 120px; }
}
/* La guía de tallas ahora va en su propia barra, antes de la cabecera "Tallas:",
   en vez de anclada a su derecha -- por eso ya no lleva margin-left:auto. */
.product-detail__size-guide-bar { display: flex; justify-content: flex-start; }
.product-detail__size-guide-bar:has(.product-detail__size-guide-toggle[hidden]) { display: none; }
.product-detail__size-guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  border-bottom: 1px solid var(--accent-tint);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-detail__size-guide-toggle:hover { color: var(--accent-dark); border-bottom-color: var(--accent-2); }
.product-detail__size-guide-toggle[hidden] { display: none; }
.product-detail__size-guide-toggle svg { transition: transform 0.2s ease; }
.product-detail__size-guide-toggle.is-open svg { transform: scaleY(-1); }
/* "Seleccionar tallas" (portado de samaraimport.com, pedido explícito):
   mismo sheet flotante que allí, reutilizando las clases .product-detail__sizes-*
   que este sitio ya tiene para su propia ficha de producto -- sólo hacían
   falta las clases del contenedor (.qa-sheet/.qa-sheet-backdrop), que no
   existían aquí. Fixed + oculto vía transform/visibility incondicionalmente
   (no atado a ningún media query): a diferencia de samaraimport.com, aquí lo
   abre la barra de "Añadir a la cesta" de escritorio, así que tiene que
   funcionar en cualquier ancho de pantalla. */
.qa-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.qa-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
.qa-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.28s ease, visibility 0.28s;
}
.qa-sheet.is-open { transform: translateY(0); visibility: visible; }
.qa-sheet .product-detail__sizes-close {
  display: block;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 0 4px;
}
.qa-sheet .product-detail__pack-notice { display: inline-block; }
.qa-sheet .product-detail__step-group:has(.product-detail__pack-notice) { flex-direction: column; gap: 2px; }
.stock-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 980;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  text-align: center;
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(0,0,0,0.16));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.stock-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Panel lateral derecho, mismo patrón que la hoja de tallas de móvil pero anclado a
   la derecha en vez de abajo. No se usa [hidden]/display:none porque hay que animar
   la entrada: se queda fuera de pantalla con translateX y se saca del foco y del
   árbol de accesibilidad con visibility, que sí es animable de forma discreta. */
.size-guide__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.size-guide__backdrop.is-open { opacity: 1; visibility: visible; }
.size-guide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1201;
  width: min(380px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}
.size-guide.is-open { transform: translateX(0); visibility: visible; }
.size-guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.size-guide__head h3 { font-family: var(--font-head); font-size: 19px; margin: 0; }
.size-guide__close {
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  padding: 0 4px;
}
.size-guide__list {
  margin: 0;
  padding: 16px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-detail__size-guide-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.4;
}
.product-detail__size-guide-row:last-child { border-bottom: 0; }
.product-detail__size-guide-row dt { font-weight: 700; margin: 0; flex: 0 0 auto; }
.product-detail__size-guide-row dt::after { content: ':'; }
.product-detail__size-guide-row dd { margin: 0; color: var(--muted, #666); text-align: right; font-weight: 700; }
/* La nota de la columna "GUIA DE TALLA" va detrás de la medida, en la misma línea,
   pero un punto más apagada: la medida es el dato y esto es la referencia. */
.product-detail__size-guide-note { opacity: 0.8; }
.product-detail__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.product-detail__swatch {
  width: 56px;
  height: 56px;
  border-radius: 0;
  border: 1px solid var(--border);
  padding: 2px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.product-detail__swatch:hover { border-color: var(--accent); }
.product-detail__swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.product-detail__swatch.is-active { border-color: var(--accent); }
.product-detail__qty { display: inline-flex; align-items: center; gap: 10px; }
.product-detail__qty[hidden] { display: none; }
.product-detail__qty input {
  width: 56px;
  height: 38px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  -moz-appearance: textfield;
}
.product-detail__qty input::-webkit-outer-spin-button,
.product-detail__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.product-detail__add { width: 100%; max-width: 320px; }
.product-detail__add-row { display: flex; flex-wrap: wrap; gap: 10px; }
.product-detail__add-row .product-detail__add { flex: 1 1 auto; }
.product-detail__add-box { flex: 1 1 auto; max-width: 320px; white-space: nowrap; }
.product-detail__add-box--row { flex-basis: 100%; margin-top: 4px; }
.product-detail__pack-notice {
  display: inline-block;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #666);
}
.product-detail__pack-notice[hidden] { display: none; }
/* Pedido explícito: en la ficha de producto, el stepper de cada talla va pegado
   al borde derecho de la fila en vez de justo después del precio -- sólo en los
   sitios B2C (aquí, adphome.es y paulahome.es). samaraimport.com es B2B y se
   deja tal cual. */
.product-detail__steppers {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.product-detail__step-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.product-detail__step-group .product-detail__pack-notice { margin: 0; white-space: nowrap; font-size: 11px; }
.product-detail__steppers .qty-btn { width: 22px; height: 22px; font-size: 13px; flex-shrink: 0; }
.product-detail__steppers .product-detail__qty { gap: 4px; }
.product-detail__steppers .product-detail__qty input {
  width: 32px;
  height: 26px;
  font-size: 12px;
  padding: 0;
}
@media (min-width: 1024px) {
  .product-detail__steppers { gap: 20px; }
  .product-detail__step-group { gap: 6px; }
  .product-detail__steppers .qty-btn { width: 32px; height: 32px; font-size: 17px; }
  .product-detail__steppers .product-detail__qty { gap: 6px; }
  .product-detail__steppers .product-detail__qty input {
    width: 44px;
    height: 36px;
    font-size: 15px;
  }
}

.product-detail__sizes { display: flex; flex-direction: column; gap: 10px; }
.product-detail__sizes-list { display: flex; flex-direction: column; }
.product-detail__size-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 16px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.75s;
  overflow-x: auto;
}
.product-detail__size-row:nth-child(even) { background: var(--surface); }
.product-detail__size-row.is-selected {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1.5px #6fbf73;
}
.product-detail__size-name { flex: 0 0 auto; min-width: 70px; font-weight: 600; }
.product-detail__size-price { flex-shrink: 0; font-family: var(--font-head); font-weight: 700; color: var(--accent-2); font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.product-detail__size-price .product-detail__price-original { font-size: 14px; }
.product-detail__size-price .product-detail__price-final { font-family: var(--font-head); }
.product-detail__size-stock { flex-shrink: 0; font-size: 13px; color: #1f7a3f; width: auto; min-width: 60px; white-space: nowrap; }
.product-detail__size-stock.is-out { color: #a8362c; }

@media (max-width: 480px) {
  .product-detail__size-row {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 12px 10px;
  }
  .product-detail__size-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .product-detail__size-price { flex-shrink: 0; font-size: 14px; }
  .product-detail__size-stock {
    flex-shrink: 1;
    min-width: 0;
    width: auto;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-detail__qty { flex-shrink: 0; gap: 4px; }
  .product-detail__qty .qty-btn { width: 24px; height: 24px; font-size: 13px; }
  .product-detail__qty input {
    width: 32px;
    height: 24px;
    font-size: 12px;
  }
}
.product-detail__sizes-total {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: baseline;
  padding: 8px 4px 0;
  font-weight: 700;
}
.product-detail__sizes-total span { color: var(--ink); }
.product-detail__sizes-total strong { font-family: var(--font-head); font-size: 20px; color: var(--accent-2); }
/* Pedido explícito: el total va pegado del todo a la derecha también en
   móvil (antes se forzaba a la izquierda por debajo de 480px para no
   solaparse con el botón flotante de chat de soporte -- se acepta ese
   riesgo de solape a cambio de que quede alineado a la derecha). */
.product-detail__go-checkout {
  display: block;
  width: 100%;
  margin-top: 10px;
}

/* Hoja movil de tallas, portada de samaraimport.com. En escritorio la lista
   sigue siempre en linea (igual que hasta ahora); el boton/backdrop/cierre de
   aqui son cosas de movil y se quedan ocultos hasta el media query de abajo. */
.product-detail__sizes-mobile-trigger,
.product-detail__sizes-backdrop,
.product-detail__sizes-close { display: none; }

@media (max-width: 760px) {
  .product-detail__sizes-mobile-trigger[hidden] { display: none; }
  .product-detail__sizes-mobile-trigger {
    display: block;
    width: 100%;
    margin-top: 10px;
  }
  .product-detail__sizes-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 999;
  }
  .product-detail__sizes-backdrop[hidden] { display: none; }
  .product-detail__sizes-backdrop.is-open { display: block; }
  #pd-sizes-block {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--surface, #fff);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.18);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  #pd-sizes-block.is-open { transform: translateY(0); }
  .product-detail__sizes-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    padding: 0 4px;
  }
}
.product-detail__empty {
  max-width: 600px;
  margin: 80px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.product-detail__empty[hidden] { display: none; }

.product-detail__extra {
  /* Vive dentro de la columna angosta de info (product-detail__info-inner),
     pero debe ocupar el ancho completo de la página. Esa columna no está
     centrada en el viewport (es la mitad derecha de una grid asimétrica), así
     que el truco CSS de 100vw + calc(50% - 50vw) no sirve -- el ancho y el
     margen izquierdo real los calcula script.js (syncExtraFullBleed) a partir
     de la posición medida en pantalla. Aquí sólo el resto del aspecto visual. */
  max-width: none;
  box-sizing: border-box;
  margin: 12px 0 20px;
  padding: 24px 48px 0;
  border-top: 1px solid var(--border);
}
.product-detail__extra[hidden] { display: none; }

/* Pedido explícito: fotos de producto "no descargables". No es infalible (con
   devtools/ver código fuente siempre se puede sacar la URL), pero cubre el
   camino normal de clic derecho > Guardar imagen como y arrastrar-a-escritorio
   -- el draggable="false"/oncontextmenu="return false" en el HTML (ver
   renderCollage/renderMainGallery en script.js) cubre el resto de navegadores. */
.product-detail__gallery img,
.product-detail__collage img,
.pd-lightbox__image,
.pd-lightbox__thumb img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Galería de escritorio: foto grande + tira de miniaturas, igual que en
   samaraimport.com (pedido explícito: mismo aspecto en vista de escritorio,
   NO en móvil). En móvil se sigue usando el collage de una foto a pantalla
   completa de más abajo -- las dos vistas comparten galleryImages/galleryIndex
   y el mismo lightbox (ver renderGallery/renderMainGallery en script.js), y
   el CSS de aquí decide cuál se ve según el ancho de la ventana. */
.product-detail__gallery {
  /* .product-detail sólo declara 2 columnas explícitas, pero ahora tiene 3
     hijos directos (galería + collage + info) porque galería y collage
     ocupan la MISMA celda -- sólo se ve uno de los dos según el ancho de la
     ventana (ver #pd-collage{display:none} más abajo y el @media de la
     galería). Sin esto el auto-placement de grid metería el collage en la
     columna derecha (encima de .product-detail__info) en vez de apilarlo
     debajo de la galería en la izquierda. */
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 2900px;
}
.product-detail__main-image {
  position: relative;
  display: block;
  width: 100%;
  /* Alto fijo (no depende de la proporción de cada foto) para que la tira de
     miniaturas de debajo no salte de sitio al cambiar de imagen -- mismo
     razonamiento que en samaraimport.com. */
  aspect-ratio: 1 / 1;
  max-height: 80vh;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--cream);
  overflow: hidden;
  cursor: zoom-in;
}
.product-detail__main-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (hover: hover) {
  .product-detail__main-image img { transition: transform 0.12s ease-out; }
  .product-detail__main-image.is-zoomed img { transform: scale(2.2); }
}
.product-detail__thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
.product-detail__thumbs[hidden] { display: none; }
.product-detail__thumb {
  flex: 0 0 84px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--cream);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease;
}
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail__thumb.is-active { border-color: var(--accent); }

/* Collage: cuadrícula de 2 columnas con todas las fotos de la variante activa.
   Ahora es SÓLO la vista de móvil (ver @media max-width:860px más abajo, que
   la reduce a una columna con scroll-snap) -- en escritorio queda oculta por
   completo (#pd-collage { display: none } justo debajo) a favor de la
   galería de foto-grande-más-miniaturas de arriba. Cuando hay un número
   impar de imágenes, JS marca la última con --full para que ocupe las dos
   columnas y no deje un hueco suelto (ver renderCollage en script.js); con
   una sola imagen también ocupa las dos columnas -- irrelevante ya en
   escritorio, pero sigue siendo el valor de partida antes de que el móvil lo
   reduzca a una columna. */
#pd-collage { display: none; grid-column: 1; grid-row: 1; }
.product-detail__collage { min-width: 0; }
.product-detail__collage[hidden] { display: none; }
.product-detail__collage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.product-detail__collage-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream);
  cursor: zoom-in;
}
.product-detail__collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-detail__collage-item--full { grid-column: span 2; aspect-ratio: 2 / 1; }
@media (max-width: 760px) {
  .product-detail__collage-grid { gap: 8px; }
}

.product-detail__viewed {
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 24px 48px 0;
  border-top: 1px solid var(--border);
}
.product-detail__viewed[hidden] { display: none; }
.product-detail__viewed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 48px;
}
.product-detail__viewed-head h2 { font-family: var(--font-head); font-size: 24px; margin: 0; }
.product-detail__viewed-more { font-size: 14px; font-weight: 600; color: inherit; text-decoration: underline; }
@media (min-width: 1024px) {
  .product-detail__viewed .product-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  /* Pedido explícito: sin margen lateral en las fotos de "vistos juntos" en
     móvil (igual que en la cuadrícula principal del catálogo) -- el título
     de la sección sí conserva su propio hueco lateral (más legible pegado al
     borde), así que el padding se quita del contenedor y se vuelve a poner
     sólo en la cabecera. */
  .product-detail__viewed { padding: 40px 0 0; }
  .product-detail__viewed-head { padding: 0 24px; }
}

.product-detail__reviews {
  max-width: 1320px;
  margin: 0 auto 80px;
  padding: 48px 48px 0;
  border-top: 1px solid var(--border);
}
.product-detail__reviews[hidden] { display: none; }
.product-detail__reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.product-detail__reviews-head h2 { font-family: var(--font-head); font-size: 24px; margin: 0; }
.product-detail__reviews-summary { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.product-detail__reviews-summary .product-detail__reviews-average { font-size: 20px; font-weight: 700; color: var(--ink); }
.product-detail__reviews-summary .product-detail__reviews-star-row { color: #d99a2b; letter-spacing: 2px; }

.product-detail__reviews-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.product-detail__reviews-empty { color: var(--muted); font-size: 14px; }
.product-detail__reviews-item { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.product-detail__reviews-item:last-child { border-bottom: none; padding-bottom: 0; }
.product-detail__reviews-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.product-detail__reviews-item-name { font-weight: 700; font-size: 14px; }
.product-detail__reviews-item-date { font-size: 12px; color: var(--muted); }
.product-detail__reviews-item-stars { color: #d99a2b; letter-spacing: 2px; font-size: 14px; }
.product-detail__reviews-item-comment { font-size: 14px; line-height: 1.5; margin: 0; }

.product-detail__reviews-panel { max-width: 520px; }
.product-detail__reviews-form-title { font-weight: 700; margin: 0 0 10px; }
.product-detail__reviews-stars { display: flex; gap: 4px; margin-bottom: 12px; }
.product-detail__reviews-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--border);
  padding: 0;
  transition: color 0.15s ease;
}
.product-detail__reviews-star.is-filled { color: #d99a2b; }
.product-detail__reviews-form textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 12px;
}
.product-detail__reviews-form-actions { display: flex; align-items: center; gap: 16px; }
.product-detail__reviews-message { margin: 0; font-size: 13px; }
.product-detail__reviews-message.is-error { color: #a8362c; }
.product-detail__reviews-message.is-success { color: #1f7a3f; }
.product-detail__reviews-gate { font-size: 14px; color: var(--muted); }
.product-detail__reviews-gate[hidden] { display: none; }
.product-detail__reviews-gate a { color: inherit; text-decoration: underline; }
@media (max-width: 860px) {
  .product-detail__reviews { padding: 40px 24px 0; }
}

.product-detail__related {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.product-detail__related[hidden] { display: none; }
.product-detail__related h2 {
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.product-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.product-detail__related-grid .product-card__swatch { height: 140px; }
.product-detail__related-grid .product-card__body { padding: 14px 14px 16px; gap: 6px; }
.product-detail__related-grid .product-card__body h3 { font-size: 13px; }
.product-detail__related-grid .product-card__rating { font-size: 11px; }
.product-detail__related-grid .price { font-size: 14px; }
@media (max-width: 520px) {
  .product-detail__related-grid { grid-template-columns: repeat(2, 1fr); }
}
.product-detail__extra-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.product-detail__extra-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.product-detail__extra-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 760px;
}
.product-detail__extra-body[hidden] { display: none; }
.product-detail__extra-main h3 { font-family: var(--font-head); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px; }
.product-detail__extra-side { display: flex; flex-direction: column; }
.product-detail__extra-block { padding: 18px 0; border-top: 1px solid var(--border); }
.product-detail__extra-side .product-detail__extra-block:last-child { border-bottom: 1px solid var(--border); }
.product-detail__extra-block summary {
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-detail__extra-block summary::-webkit-details-marker { display: none; }
.product-detail__extra-block summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.product-detail__extra-block[open] summary::after { content: "\2212"; }
.product-detail__extra-block:not([open]) > .product-detail__extra-text { display: block; }
.product-detail__extra-block .product-detail__extra-text {
  margin-top: 14px;
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.25s ease, margin-top 0.25s ease;
}

/* Support chat */
.support-chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 900;
  transition: transform 0.2s ease, background 0.2s ease;
}
.support-chat-toggle:hover { transform: translateY(-2px); background: #1ebe57; }
.support-chat-toggle.is-active { background: #1ebe57; }

.support-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 440px;
  max-height: calc(100vh - 140px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 900;
}
.support-chat-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.support-chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.support-chat-panel__close {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.support-chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream);
}
.support-chat-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.support-chat-msg--bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}
.support-chat-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--cream);
}
.support-chat-msg--human {
  align-self: flex-start;
  background: var(--ink);
  color: var(--cream);
}
.support-chat-msg--system {
  align-self: center;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.support-chat-escalate {
  align-self: flex-start;
  display: flex;
}
.support-chat-escalate button,
.support-chat-escalate a {
  border: 1px solid var(--accent);
  color: var(--accent-2);
  background: none;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}
.support-chat-escalate button:hover,
.support-chat-escalate a:hover { background: var(--accent); color: var(--cream); }
.support-chat-panel__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.support-chat-panel__form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
}
.support-chat-panel__form input:focus { outline: none; border-color: var(--accent); }
.support-chat-panel__form button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.support-chat-panel__form button:hover { background: var(--accent); }
@media (max-width: 640px) {
  .support-chat-toggle { right: 16px; bottom: 16px; }
  .support-chat-panel {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 84px;
  }
}
.product-detail__extra-block:not([open]) .product-detail__extra-text { max-height: 0; margin-top: 0; }
.product-detail__extra-text { color: var(--muted); line-height: 1.7; white-space: pre-line; margin: 0; }
.product-detail__extra-text:empty::before { content: "—"; }
.product-detail__extra-form { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.product-detail__extra-form[hidden] { display: none; }
.product-detail__extra-message { margin: 0; font-size: 14px; color: #a8362c; }
.product-detail__extra-message:empty { display: none; }
.product-detail__extra-actions { display: flex; gap: 12px; }
@media (max-width: 860px) {
  .product-detail__extra { padding: 40px 24px 0; }
}

@media (max-width: 860px) {
  /* Pedido explícito: al probarlo, la hoja que se desplegaba al arrastrar (ver
     historial de este bloque) tapaba la foto en vez de dejar que la página
     entera se desplazara -- se ha quitado esa mecánica por completo. En su
     lugar: página normal, un único scroll de arriba a abajo. El collage
     (a toda anchura, una foto por fila, sin recortar) es contenido normal de
     la página, y justo debajo el panel de información se solapa un poco por
     encima con una esquina redondeada (initProductSheet ya no existe en
     script.js -- nada de JS gestiona esto, es sólo disposición en flujo). */
  .product-detail {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 0;
  }
  .product-detail__breadcrumb { padding: 0 24px; }
  .product-detail__collage-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Pedido explícito: sólo se ve una foto de golpe (a su proporción real,
     sin recortar ni forzar una relación de aspecto -- así no aparecen
     franjas en blanco ni se pierden los lados) y el resto queda tapado por
     el panel de info justo debajo -- para ver las demás fotos se hace
     scroll dentro del propio collage (scroll-snap: cada foto alinea su
     borde superior al hacer scroll). Sin JS: al llegar al final del collage
     el gesto de scroll sigue de forma nativa hacia la página (el panel de
     info debajo), y viceversa hacia arriba. */
  .product-detail__collage-item {
    aspect-ratio: auto;
    border-radius: 0;
    scroll-snap-align: start;
  }
  .product-detail__collage-item img { height: auto; width: 100%; display: block; }
  /* La variante --full pedía grid-column: span 2 en escritorio (dos columnas) --
     aquí sólo hay una columna explícita, así que sin resetear esto el motor de
     grid crea una columna implícita fantasma para encajar el span, partiendo
     el ancho de TODAS las fotos por la mitad (0px / 375px alternando). */
  .product-detail__collage-item--full { aspect-ratio: auto; grid-column: auto; }
  .product-detail__info {
    position: relative;
    /* Se solapa bastante con la foto en vez de quedar pegado justo debajo --
       efecto puramente visual (margen negativo), no hay overlay ni scroll
       propio detrás. Pedido explícito: que la ficha cubra la mayor parte de
       la primera foto nada más entrar (ver también la altura reducida de
       #pd-collage, arriba). */
    margin-top: -90px;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 30px rgba(20, 12, 10, 0.16);
  }
  .product-detail__info-inner { position: static; top: auto; padding: 18px 24px 60px; }
  /* Pedido explícito: sin margen lateral en las fotos de "también te puede
     interesar" en móvil -- vive dentro del padding lateral (24px) de
     .product-detail__info-inner de aquí arriba, así que un margen negativo lo
     cancela para esta cuadrícula en concreto. El título de la sección
     conserva su propio hueco (hereda el padding del contenedor, no se toca). */
  .product-detail__related-grid { margin: 0 -24px; }
  /* Pedido explícito: nada más abrir la ficha no debe verse el título/etiquetas
     (lo que salía "en el círculo" de la captura) -- se reordenan por flexbox
     detrás de color y tallas, que son lo primero que se ve en la hoja según la
     captura de referencia. Siguen en el DOM (SEO, lectores de pantalla) y
     aparecen igual si se despliega/se hace scroll del todo hacia abajo. */
  .product-detail__colour { order: 1; }
  .product-detail__sizes-mobile-trigger,
  #pd-sizes-block { order: 2; }
  .product-detail__title-row,
  #pd-tags,
  #pd-pack-summary,
  #pd-stock,
  #pd-price { order: 3; }
  #pd-qty-block,
  #pd-pack-notice,
  .product-detail__add-row { order: 4; }
  /* Favoritos/compartir se sacan de la fila de título (que ya no se ve al
     abrir, ver arriba) y se mueven de sitio en el DOM (ver
     relocateProductIcons en script.js) para caer dentro de #pd-collage,
     ancladas ahí con position:absolute -- así suben y bajan junto con las
     fotos al desplazar la página en vez de quedarse flotando en el mismo
     punto de la pantalla una vez pasada la primera foto (lo que pasaba con
     position:fixed). El h1 se queda donde estaba, en flujo normal (order:3),
     y sigue siendo texto legible/indexable. */
  /* #pd-wishlist (id), no la clase .wishlist-star--pd: esa clase también la
     lleva el botón de #pd-share-toggle (mismo aspecto de icono, reutilizado),
     así que seleccionar por clase fijaba también ese botón interior por su
     cuenta y dejaba a .share-btn (su envoltorio, ver justo debajo) sin
     contenido en flujo -- colapsado a 0x0 y con el icono de compartir
     invisible. */
  .product-detail__title-row { position: static; }
  /* Vista de escritorio (foto grande + miniaturas) oculta en móvil; el collage
     de una foto a pantalla completa (justo debajo) es la única vista aquí --
     #pd-collage con id porque el "display: none" de escritorio (ver más
     arriba, fuera de esta media query) usa ese mismo selector y hay que
     igualar su especificidad para ganarle por orden de aparición. */
  .product-detail__gallery { display: none; }
  #pd-collage {
    display: block;
    position: relative;
    height: 60vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .product-detail__collage #pd-wishlist,
  .product-detail__collage .share-btn {
    position: absolute;
    top: 16px;
    z-index: 1;
  }
  .product-detail__collage .share-btn { right: 16px; }
  .product-detail__collage #pd-wishlist { right: 60px; }
}

/* ============ Cookie consent ============ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--ink);
  box-shadow: 0 -12px 40px rgba(20, 12, 30, 0.28);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.cookie-consent.is-visible { transform: translateY(0); }
.cookie-consent__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-consent__text { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.85); }
.cookie-consent__text a { text-decoration: underline; color: #fff; }
.cookie-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-consent .btn { padding: 12px 20px; font-size: 13px; white-space: nowrap; }
.cookie-consent .btn--outline { border-color: rgba(255,255,255,0.5); color: #fff; }
.cookie-consent .btn--outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cookie-consent .btn--dark { background: var(--accent); color: var(--cream); }
.cookie-consent .btn--dark:hover { background: var(--accent-dark); color: #fff; }

.cookie-modal[hidden] { display: none; }
.cookie-modal { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 30, 0.55); }
.cookie-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 36px;
}
.cookie-modal__panel h3 { font-size: 20px; margin: 0 0 12px; }
.cookie-modal__panel > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 0 24px; }
.cookie-modal__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.cookie-modal__row strong { font-size: 14px; letter-spacing: 0.03em; }
.cookie-modal__row p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.cookie-modal__actions .btn { flex: 1 1 auto; padding: 12px 18px; font-size: 13px; }

.login-prompt-modal { position: fixed; inset: 0; z-index: 970; display: none; align-items: center; justify-content: center; padding: 24px; }
.login-prompt-modal.is-open { display: flex; }
.login-prompt-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 12, 30, 0.55); }
.login-prompt-modal__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  text-align: center;
}
.login-prompt-modal__panel h3 { font-size: 19px; margin: 0 0 8px; }
.login-prompt-modal__panel > p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.login-prompt-modal__panel .social-auth { display: flex; justify-content: center; }
.login-prompt-modal__panel .auth-divider { margin: 14px 0; }
.login-prompt-modal__panel .auth-card__body { text-align: left; }
.login-prompt-modal__panel .form-field { margin-bottom: 12px; }
.login-prompt-modal__panel button[type="submit"] { width: 100%; }
.login-prompt-modal__register { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.login-prompt-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}

.cookie-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle__slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.cookie-toggle__slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(20,12,30,0.25);
  transition: transform 0.2s ease;
}
.cookie-toggle input:checked + .cookie-toggle__slider { background: var(--accent); }
.cookie-toggle input:checked + .cookie-toggle__slider::before { transform: translateX(18px); }
.cookie-toggle--disabled { cursor: not-allowed; opacity: 0.6; }
.cookie-toggle--disabled .cookie-toggle__slider { cursor: not-allowed; }

.footer-cookie-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.8;
}
.footer-cookie-link:hover { opacity: 1; }

@media (max-width: 640px) {
  .cookie-consent__inner { padding: 20px 24px; }
  .cookie-consent__actions { width: 100%; }
  .cookie-consent__actions .btn { flex: 1 1 auto; }
  .cookie-modal__panel { padding: 26px; }
}

/* ============================================================
   Barra de compra fija (sólo móvil)
   ============================================================
   La ficha de producto en móvil mide varias pantallas: galería,
   colores, tabla de tallas, descripción y opiniones. Esta barra
   mantiene precio y botón siempre a mano, como en Zara o IKEA.
   Sólo aparece cuando el botón real ya ha salido de pantalla; el
   JS la oculta mientras siga siendo alcanzable.

   Se pinta con los tokens del sitio (--surface, --ink, --border),
   así que hereda el tema de cada web sin escribir dos versiones.
   ============================================================ */
.pd-sticky-buy { display: none; }

@media (max-width: 900px) {
  .pd-sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima del contenido, por debajo de los cajones y modales (900+),
       para que el velo del carrito la tape como debe. */
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    /* En iPhone la barra de gestos se come los últimos píxeles. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
  }

  /* Va después de la regla de display:flex, si no el atributo hidden
     no tendría ningún efecto. */
  .pd-sticky-buy[hidden] { display: none; }

  .pd-sticky-buy__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .pd-sticky-buy__name {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    /* El nombre de producto puede ser largo; una sola línea recortada. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pd-sticky-buy__price {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
  }

  .pd-sticky-buy__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 20px;
    font-size: 13px;
  }

  /* La ficha necesita hueco al final para que la barra no tape ni el
     último bloque de contenido ni el pie. */
  body:has(.pd-sticky-buy:not([hidden])) {
    padding-bottom: 76px;
  }
}

/* La franja negra "Anadir a la cesta" (.product-card__quickview) que subia
   sobre la foto al pasar el raton se retiro a peticion expresa (captura):
   ya no se pinta desde script.js, asi que sus reglas se van con ella. La
   unica via de compra desde la rejilla pasa a ser .product-card__quickadd-fab
   (el circulo verde), que ahora anade directo al carrito. */

/* Quick-view / added-to-cart dialogs. Both live in one host element that is
   emptied on close, so only one can ever be on screen and nothing accumulates
   across repeated opens. */
.qv-host { display: none; }
.qv-host.is-open { display: block; }
body.qv-locked { overflow: hidden; }
.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, 0.55);
  z-index: 1200;
}
.qv-modal {
  position: fixed;
  z-index: 1201;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- step 1: size picker --- */
.qv-modal--picker {
  width: min(760px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 0;
}
.qv-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.qv-modal__media {
  background: #fff;
  border-right: 1px solid var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.qv-modal__media img { width: 100%; height: 100%; object-fit: contain; }
.qv-modal__info { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.qv-modal__title { font-size: 19px; font-weight: 700; line-height: 1.3; padding-right: 28px; }
.qv-modal__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.qv-modal__sizes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.qv-size {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.qv-size:last-child { border-bottom: none; }
.qv-size__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qv-size__name { font-size: 14px; font-weight: 700; }
.qv-size__pack, .qv-size__out { font-size: 11px; color: var(--muted); }
.qv-size__out { color: var(--accent-dark); font-weight: 700; }
.qv-size__price { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.qv-size__stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qv-size__btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qv-size__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qv-size__qty { min-width: 20px; text-align: center; font-weight: 700; font-size: 14px; }
.qv-modal__error { font-size: 12px; font-weight: 700; color: var(--accent-dark); }
.qv-modal__error[hidden] { display: none; }
.qv-modal__add { width: 100%; margin-top: 4px; }

/* --- step 2: added-to-cart summary --- */
.qv-modal--added { width: min(900px, calc(100vw - 32px)); overflow: hidden; }
.qv-added__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--accent-2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.qv-added__tick { font-size: 15px; }
.qv-added__close {
  margin-left: auto;
  border: none;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.qv-added__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 24px 24px;
}
.qv-added__left { display: flex; flex-direction: column; gap: 16px; }
.qv-added__product { display: flex; gap: 14px; }
.qv-added__thumb {
  width: 96px;
  height: 110px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
}
.qv-added__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-added__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qv-added__meta h4 { font-size: 14px; font-weight: 700; line-height: 1.35; }
.qv-added__price { font-size: 16px; font-weight: 700; }
.qv-added__attr { font-size: 12px; color: var(--muted); }
.qv-added__right { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--border); padding-left: 24px; }
.qv-added__count { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.qv-added__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.qv-added__row--total {
  background: var(--bg, rgba(0, 0, 0, 0.03));
  padding: 8px 10px;
  margin: 4px -10px 0;
  font-weight: 700;
}
.qv-added__actions { display: flex; gap: 10px; margin-top: 16px; }
.qv-added__actions .btn { flex: 1; justify-content: center; }

@media (max-width: 760px) {
  .qv-modal--picker { grid-template-columns: 1fr; }
  .qv-modal__media { min-height: 180px; border-right: none; border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .qv-added__body { grid-template-columns: 1fr; gap: 18px; }
  .qv-added__right { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 16px; }
  .qv-added__actions { flex-direction: column; }
}


/* ============ Quick Add: "+" verde sobre la foto ============ */
/* Portado de .product-card__sizes-trigger de samaraimport.com (verde #25D366,
   pedido explicito alli). Se ancla a .product-card__link, que ya es
   position:relative en las tres webs, asi que bottom/right caen sobre la caja
   de la imagen y no sobre la del card entero -- el swatch usa aspect-ratio,
   o sea alto variable segun columnas y viewport, y un offset fijo desde
   arriba se habria desalineado. z-index 3 para quedar por encima de la franja
   "Anadir a la cesta" (z-index 2), que en escritorio sube justo por debajo. */
.product-card__quickadd-fab {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: #fff;
  /* El glifo ya no es texto ("+"): un carrito en SVG dentro (ver
     quickAddFabHTML en script.js), centrado igual que antes por el flex de
     aqui debajo. */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, background 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.product-card__quickadd-fab:hover { background: #1EBE5B; transform: scale(1.08); }
.product-card__quickadd-fab:active { transform: scale(0.92); }
.product-card__quickadd-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Ya no hay franja de hover debajo del circulo, asi que tampoco hace falta
   que salte hacia arriba al pasar el raton (var --qa-fab-lift, retirada):
   se queda donde esta y solo crece un poco con el :hover de aqui arriba. */

/* ---- Caja de compra B2C: color y total ---- */
.qv-modal__field { display: flex; flex-direction: column; gap: 8px; }
.qv-modal__field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.qv-modal__field-label strong { margin-left: 6px; text-transform: none; letter-spacing: 0; opacity: 1; }
.qv-modal__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-modal__swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qv-modal__swatch:hover { transform: scale(1.12); }
.qv-modal__swatch.is-active { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px currentColor; }
.qv-modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  font-size: 14px;
}
.qv-modal__total strong { font-size: 18px; }


/* ---- Caja de compra B2C: alta automatica y paso a "Finalizar Compra" ---- */
/* Sustituye a .qv-modal__add: el boton ya no confirma un alta (cada +/- la hace
   sola), sino que lleva al pago. */
.qv-modal__checkout { width: 100%; margin-top: 4px; }
/* "/ud" pegado al precio: las filas con pack ensenan el precio de UNA pieza y
   sin esta marca se leia como el precio del pack entero. */
.qv-size__unit { font-size: 11px; font-weight: 600; opacity: 0.6; margin-left: 1px; }
/* Como el alta es automatica y no hay boton de confirmacion, la fila que ya
   esta en la cesta necesita verse a simple vista. */
.qv-size.is-selected { background: rgba(127, 127, 127, 0.10); border-radius: 6px; }
.qv-size.is-selected .qv-size__qty { font-weight: 700; }

/* Pedido explicito con captura: el badge rojo del carrito y el circulo verde,
   un 50% mas grandes en escritorio y portatil; en movil, igual que siempre.
   761px es el complemento exacto del max-width:760px que esta hoja ya usa como
   "movil". El <svg> de dentro se escala aqui tambien: sus width/height son 16
   en el propio HTML (ver script.js), asi que sin esta regla el carrito se
   quedaria del mismo tamano dentro de un circulo mas grande. */
@media (min-width: 761px) {
  .product-card__cart-badge {
    min-width: 39px;   /* 26 x 1.5 */
    height: 39px;
    border-radius: 19.5px;
    padding: 0 9px;
    font-size: 18px;   /* 12 x 1.5 */
  }
  .product-card__quickadd-fab {
    width: 51px;       /* 34 x 1.5 */
    height: 51px;
  }
  .product-card__quickadd-fab svg {
    width: 24px;       /* 16 x 1.5 */
    height: 24px;
  }
}

/* ---------------------------------------------------------------------------
   Modal de compra rapida abierto desde el boton verde de la rejilla
   (openSizeSheet en script.js). Sobre la hoja que ya existia se anaden dos
   piezas: quien es el producto -- abierto desde el catalogo no se sabe, a
   diferencia de cuando se abria desde la ficha -- y el selector de color.
   --------------------------------------------------------------------------- */
.qa-sheet__ident {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
  /* hueco para el aspa, que va en position:absolute arriba a la derecha */
  padding-right: 38px;
}
.qa-sheet__ident-name {
  font-family: var(--font-display, inherit);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.qa-sheet__ident-colour { font-size: 13px; opacity: 0.68; }

/* Fila de colores: se envuelve en varias lineas a proposito (a diferencia de
   la del card, que va a una sola con su "+N"), porque aqui SI hay sitio y el
   objetivo es poder saltar a cualquier color sin cerrar el modal. */
.qa-sheet__colours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.qa-sheet__colour {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qa-sheet__colour:hover { transform: scale(1.12); }
/* Doble halo (fondo + tinta) en vez de un borde: el swatch lleva su color de
   fondo en linea, asi que un borde de color se confundiria con colores claros
   como el blanco o el crudo. */
.qa-sheet__colour.is-active {
  box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--ink, #1c1a18);
}

/* En escritorio/portatil la hoja inferior se convierte en dialogo centrado:
   el mismo markup y las mismas filas, anclado al centro en vez de al borde de
   abajo -- una hoja a todo lo ancho de un monitor no es usable. 761px es el
   complemento del max-width:760px que estas hojas usan como "movil". */
@media (min-width: 761px) {
  .qa-sheet {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(640px, calc(100vw - 48px));
    max-height: min(84vh, 780px);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    padding: 26px 26px 22px;
    /* Reposo 16px mas abajo para que entre subiendo, igual que la hoja movil
       entra desde abajo; el translate(-50%,-50%) del centrado tiene que ir en
       las dos reglas o el modal se iria a la esquina al abrirse. */
    transform: translate(-50%, calc(-50% + 16px));
  }
  .qa-sheet.is-open { transform: translate(-50%, -50%); }
}

/* ---------------------------------------------------------------------------
   Barra de catalogo en escritorio (pedido explicito): Filtros a la izquierda,
   subcategorias en linea en el centro empezando por "Todos", Ordenar a la
   derecha, en UNA fila de borde a borde. Movil queda exactamente igual: todo lo
   de abajo va dentro de min-width:761px (complemento del max-width:760px que esta
   hoja usa como "movil"), y fuera de el el envoltorio nuevo es display:contents
   (no genera caja) y las flechas display:none.
   Hasta ahora las pills estaban ocultas en todos los tamanos y en escritorio se
   veia en su lugar el <select> de .toolbar__pills-mobile: aqui se invierte eso.
   Las subcategorias largas no caben todas ni a 1440px, asi que la tira central
   hace scroll horizontal con flechas y difuminado (ver buildCatalogFilters).
   --------------------------------------------------------------------------- */
.catalog-pills-nav { display: contents; }
.catalog-pills-nav__arrow { display: none; }
@media (min-width: 761px) {
  .catalog-top-row {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .catalog-top-row .filters-toggle { order: 0; margin-left: 0; flex: 0 0 auto; }
  .catalog-top-row .sort-select { order: 2; flex: 0 0 auto; margin-left: 0; }
  .catalog-top-row .toolbar__pills-mobile { display: none; }
  .catalog-top-row .catalog-pills-nav {
    display: flex;
    order: 1;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
  }
  .catalog-top-row .toolbar__pills {
    display: flex;
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
    order: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Centrado mientras caben; "safe" hace que, si desbordan, arranquen por la
       izquierda en vez de quedar recortadas por los dos lados (con center a secas
       la primera pill, "Todos", quedaria fuera de alcance del scroll). */
    justify-content: flex-start;
    justify-content: safe center;
  }
  .catalog-top-row .toolbar__pills::-webkit-scrollbar { display: none; }
  .catalog-top-row .toolbar__pills .pill { flex-shrink: 0; white-space: nowrap; }
  /* Difuminado en el borde por el que sigue habiendo pills: deja claro que la tira
     continua aunque la flecha quede pequena. */
  .catalog-pills-nav.has-prev .toolbar__pills {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
    mask-image: linear-gradient(to right, transparent 0, #000 56px);
  }
  .catalog-pills-nav.has-next .toolbar__pills {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px);
    mask-image: linear-gradient(to left, transparent 0, #000 56px);
  }
  .catalog-pills-nav.has-prev.has-next .toolbar__pills {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
  .catalog-pills-nav__arrow:not([hidden]) {
    display: flex;
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface, #fff);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .catalog-pills-nav__arrow--prev { left: 0; }
  .catalog-pills-nav__arrow--next { right: 0; }
  /* adphome: la .pill base trae background:#35373a con color:var(--ink) (#1e1f21),
     ~1.3:1 de contraste, que no se veia porque las pills estaban ocultas. En esta
     tira la inactiva va sin relleno, igual que Ordenar y Filtros a sus lados. */
  .catalog-top-row .toolbar__pills .pill:not(.pill--active) { background: transparent; }
}

/* ---------------------------------------------------------------------------
   Barra de catalogo en escritorio igual que samaraimport.com (pedido explicito:
   "solo se aplico bien en samaraimport"). Dos diferencias heredadas la dejaban
   distinta aqui, medidas a 1920px:
   1. Ancho: fila, toolbar, chips y aviso de "sin resultados" capados a 1320px
      (samaraimport: 1760px). La barra empezaba ~290px a la derecha del borde
      del grid y terminaba ~290px antes: Filtros y Ordenar apelotonados hacia el
      centro en vez de en los extremos.
   2. Controles: pills en microtipo de 10px, mayusculas y 2px de espaciado --
      seguian desbordando ~500px a 1920px (con flechas), cuando en samaraimport
      las 7 subcategorias caben enteras. Mismas medidas que alli: 13px, negrita,
      sin mayusculas, padding 9px 18px, esquina 10px.
   Los colores son los de esta web (tokens y color de la pill activa); solo se
   iguala la composicion. Movil no cambia: todo va dentro de min-width:761px.
   --------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .catalog-top-row,
  .toolbar,
  .filters-chips,
  .filters-empty {
    max-width: 1760px;
  }
  .catalog-top-row .filters-toggle,
  .catalog-top-row .toolbar__pills .pill,
  .catalog-top-row .sort-select {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
  }
  .catalog-top-row .filters-toggle { padding: 9px 18px; gap: 10px; }
  .catalog-top-row .filters-toggle__label {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .catalog-top-row .toolbar__pills .pill { padding: 9px 18px; }
  .catalog-top-row .sort-select { padding: 9px 16px; }
  /* Relleno de superficie en los inactivos, como samaraimport; la pill activa y
     Filtros abierto conservan el color propio de esta web (reglas de .pill--active
     y .filters-toggle.is-open, que no se tocan). */
  .catalog-top-row .filters-toggle:not(.is-open),
  .catalog-top-row .toolbar__pills .pill:not(.pill--active),
  .catalog-top-row .sort-select {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
  }
}

/* Desplegable de tipos al pasar el raton por una pill de subcategoria (ver
   buildCatalogFilters en script.js). Lleva tambien .mega-menu__flyout, asi que
   fuente, colores, borde de acento y sombra son los del flyout del menu
   principal de esta web; aqui solo se sobreescribe la colocacion (el flyout del
   menu va pegado a la derecha de su columna, este va debajo de la pill) y se le
   da la misma entrada/salida suave. visibility con retardo en el cierre para que
   el fundido se vea antes de dejar de ser alcanzable. */
.pill-dropdown.mega-menu__flyout {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  display: block;
  margin-top: 6px;
  max-height: min(60vh, 460px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.pill-dropdown.mega-menu__flyout.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
/* La pill cuyo desplegable esta abierto se queda marcada mientras el cursor
   baja al desplegable, igual que el enlace del menu principal. */
.catalog-top-row .toolbar__pills .pill.is-dropdown-open:not(.pill--active) {
  border-color: var(--ink);
}

/* Modal de compra rapida arrastrable (ver ensureSizeSheet en script.js), solo
   escritorio/portatil. El arrastre suma --qa-drag-x/-y al translate del centrado;
   los 16px de reposo del fundido se conservan, asi que abre y cierra desde donde
   este. Movil no cambia: estas reglas no existen por debajo de 761px. */
@media (min-width: 761px) {
  .qa-sheet {
    transform: translate(calc(-50% + var(--qa-drag-x, 0px)), calc(-50% + 16px + var(--qa-drag-y, 0px)));
  }
  .qa-sheet.is-open {
    transform: translate(calc(-50% + var(--qa-drag-x, 0px)), calc(-50% + var(--qa-drag-y, 0px)));
  }
}
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .qa-sheet.is-open { cursor: move; }
  .qa-sheet.is-open :is(button, a, label, .qa-sheet__colour) { cursor: pointer; }
  .qa-sheet.is-open :is(input, textarea) { cursor: text; }
  /* Sin transicion mientras se arrastra: el modal va pegado al cursor. */
  .qa-sheet.is-dragging { transition: none; user-select: none; }
}

/* ---------------------------------------------------------------------------
   Contador del carrito de la cabecera: pastilla roja que admite hasta "9999"
   (pedido explicito). Antes era un 17x17 fijo -- "288" no cabia. min-width +
   padding + radio de la mitad del alto: con 1 cifra sigue siendo un circulo y
   con mas se alarga sin deformarse. Centrado sobre la esquina del icono
   (translateX(-50%)) para crecer hacia los dos lados en vez de tapar el icono.
   --------------------------------------------------------------------------- */
.cart .cart__count {
  top: -9px;
  right: auto;
  left: calc(100% - 2px);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e02424;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .cart .cart__count { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 8.5px; font-size: 9.5px; }
}

/* Badge de unidades en carrito del color visto, sobre la foto de la ficha (ver
   refreshPdCartBadge en script.js). Mismo rojo que el badge de los cards. No
   intercepta clics: la foto sigue abriendo el lightbox. */
.pd-cart-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  box-sizing: border-box;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 15px;
  background: #e02424;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
/* Marco de la foto principal: mide lo mismo que la foto pintada, no que la caja
   (que con object-fit:contain deja bandas de fondo a los lados o arriba/abajo).
   Es el ancla del badge -- asi nunca cae fuera de la foto. La cuenta es la de
   object-fit:contain: el boton es container y --pd-img-ratio (ancho/alto
   natural) lo pone script.js al cargar cada foto. */
.pd-main-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.pd-main-frame > img { width: 100%; height: 100%; object-fit: contain; display: block; }
@supports (container-type: size) {
  .product-detail__main-image {
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pd-main-frame {
    flex: none;
    width: min(100cqw, calc(100cqh * var(--pd-img-ratio, 1)));
    height: min(100cqh, calc(100cqw / var(--pd-img-ratio, 1)));
  }
}
/* Escritorio/portatil: esquina superior DERECHA de la foto, hacia dentro. */
@media (min-width: 861px) {
  .pd-main-frame .pd-cart-badge {
    top: clamp(8px, 3%, 18px);
    right: clamp(8px, 2.4%, 18px);
    left: auto;
    min-width: 39px;
    height: 39px;
    max-width: calc(100% - 16px);
    padding: 0 11px;
    border-radius: 19.5px;
    font-size: 18px;
  }
}
/* Nunca visible si llega a quedar marcado hidden: display:flex de arriba le ganaria
   al display:none del user-agent. (El JS ya lo retira del DOM con cantidad 0.) */
.pd-cart-badge[hidden] { display: none !important; }
/* Escritorio/portatil: el badge de la foto abre el cajon del carrito al pulsarlo
   (ver pdMainFrame en script.js). En movil sigue sin recibir clics. */
@media (min-width: 861px) {
  .pd-main-frame .pd-cart-badge {
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .pd-main-frame .pd-cart-badge:hover { transform: scale(1.08); }
}
/* Movil: la esquina derecha del collage es de favorito/compartir. */
@media (max-width: 860px) {
  .product-detail__collage .pd-cart-badge { top: 16px; left: 16px; right: auto; }
}

/* Hueco para el contador ancho (data-count-len lo pone renderCart): la pastilla
   sobresale media anchura por la derecha del icono y en las cabeceras compactas
   el vecino (idioma) esta a 8px. */
.cart[data-count-len="3"] { margin-right: 6px; }
.cart[data-count-len="4"] { margin-right: 12px; }
.cart[data-count-len="5"] { margin-right: 16px; }

/* ---------------------------------------------------------------------------
   Fotos/videos de producto (ver initProductMediaProtection en script.js): sin
   menu nativo de "Guardar imagen" en iOS, sin seleccion ni arrastre; la descarga
   va por /api/media/download (solo con compra pagada). No afecta al scroll ni a
   los clics (zoom, lightbox, compartir).
   --------------------------------------------------------------------------- */
.product-card__swatch,
.product-card img,
.product-card video,
.product-detail__gallery img,
.product-detail__collage img,
.product-detail video,
.pd-lightbox img,
.pd-lightbox video,
.pd-lightbox__image {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Disuasion de captura: al perder el foco, ocultar la pestana o pulsar ImprPant. */
html.media-shield .product-card__swatch,
html.media-shield .product-card img,
html.media-shield .product-card video,
html.media-shield .product-detail__gallery img,
html.media-shield .product-detail__collage img,
html.media-shield .product-detail video,
html.media-shield .pd-lightbox img,
html.media-shield .pd-lightbox video,
html.media-shield .pd-lightbox__image {
  filter: blur(24px) !important;
}
@media print {
  img,
  video,
  .product-card__swatch,
  .product-card__swatch-hover,
  .pd-lightbox__image {
    visibility: hidden !important;
  }
}
.media-toast { max-width: min(92vw, 460px); text-align: center; }

/* Pedido explicito: en la reticula del catalogo, linea negra entre la foto y la descripcion,
   y la descripcion (nombre, precio, colores) sobre el fondo principal de la web (--cream, el
   mismo que body) para que se funda con la pagina. Va al final de la hoja para ganar a las
   reglas .product-grid anteriores (escritorio y movil). Solo la reticula: los carruseles de
   destacados/relacionados no cambian. */
.product-grid .product-card__body {
  margin-top: 0;
  border-top: 1px solid #000;
  background: var(--cream);
  padding: 12px 12px 14px;
}
@media (max-width: 760px) {
  .product-grid .product-card__body { padding: 9px 9px 10px; }
}

/* Botón "ojo" de los campos de contraseña (lo monta initPasswordToggles en script.js).
   El input se envuelve en .password-field y deja hueco a la derecha para el botón. */
.password-field { position: relative; }
.form-field .password-field input:not([type="checkbox"]):not([type="file"]) { padding-right: 50px; }
/* Edge trae su propio ojo nativo: sin esto saldrían dos. */
.password-field input::-ms-reveal,
.password-field input::-ms-clear { display: none; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.password-toggle:hover { color: var(--ink); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; color: var(--ink); }
.password-toggle svg { width: 20px; height: 20px; pointer-events: none; }