/* ============ SAMARA IMPORT — design system ============ */

@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;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* SemiBold porque Montserrat sólo traía 400 y 700: con esos dos, un font-weight:600
     lo resolvía el navegador como 700 y no se veía ningún cambio. */
  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;
}
@font-face {
  font-family: 'Cardo';
  src: url('fonts/Cardo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cardo';
  src: url('fonts/Cardo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cardo';
  src: url('fonts/Cardo-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-head: 'Montserrat', Georgia, 'Times New Roman', serif;
  --font-body: 'Cardo', Georgia, 'Times New Roman', serif;

  --ink: #14121a;
  --cream: #fff8f0;
  --surface: #ffffff;
  --border: #ece4da;
  --muted: #6f6a76;

  --accent: #c06b73;
  --accent-2: #c8a165;
  /* Tono de apoyo del acento, para estados hover sólidos. El acento es un rosa
     apagado; oscurecerlo da la respuesta al hover sin recurrir a un degradado. */
  --accent-dark: #a8555d;

  /* Escala de interlineado. Antes no existía: todo heredaba `line-height: normal`
     (~1.2 en Cardo), que en un serif a 16px deja los renglones pegados. Es la
     diferencia más visible entre esto y una tienda de gama alta -- las referencias
     (Banak, Livan) van a 1.4-1.58 en el cuerpo de texto. */
  --leading-body: 1.6;
  --leading-tight: 1.35;
  --leading-head: 1.14;

  /* Radios y sombras contenidos. Los 22px anteriores leían como interfaz de app, no
     como retail; las referencias se mueven entre 2 y 10px. Las sombras iban a
     0.16/0.08 de opacidad con desenfoques de 60/24px: demasiada profundidad para un
     catálogo donde manda la foto del producto. */
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 5px;
  --shadow-lg: 0 16px 38px rgba(20, 12, 30, 0.10);
  --shadow-sm: 0 2px 10px rgba(20, 12, 30, 0.05);
}

* { box-sizing: border-box; }

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

/* El tracking global de 0.05em se ha quitado a propósito. Separar las letras de un
   serif en tamaños de lectura (Cardo a 16px) va justo en contra de cómo está dibujada
   la fuente y es lo que hacía que los párrafos largos se leyeran "flojos". Las dos
   referencias miradas (Banak, Livan) dejan el cuerpo en `normal` y reservan el tracking
   para las microetiquetas en mayúsculas, que es lo que se hace más abajo. */
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
  line-height: var(--leading-head);
  /* Montserrat en negrita abre mucho a tamaños de titular; un pelo de tracking
     negativo lo compacta y es lo que da el aire editorial. */
  letter-spacing: -0.015em;
}
h3, h4 { line-height: var(--leading-tight); letter-spacing: -0.005em; }

p { line-height: var(--leading-body); }

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; }

.btn[hidden] { display: none; }
/* `font: inherit` para la familia: <button> no hereda la fuente del documento por
   defecto, así que sin esto los botones salían en Arial mientras el resto del sitio
   iba en Montserrat/Cardo. Se veía en cualquier CTA de la página. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Los rellenos de los botones eran degradados de acento a dorado, con un halo de color
   (0 12px 30px rgba(255,61,104,.35)) cuyo rosa ni siquiera coincidía con --accent.
   Un plano sólido es lo que usan las referencias y lo que deja que mande la foto. */
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-dark); }

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

.btn--outline {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: 1px solid #000;
}

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

.announce-bar {
  position: relative;
  z-index: 101;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 48px;
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.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: var(--ink, #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: var(--ink, #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: var(--ink, #111);
  color: #fff;
  border-color: var(--ink, #111);
}

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

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

/* El emblema fuente es un óvalo, no un círculo -- lo recortamos con
   background-size:cover en vez de <img object-fit>, que en algunos motores
   de renderizado (incl. el navegador de test usado en este proyecto) no
   recorta de forma fiable y deja el óvalo completo sin recortar. */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url('images/samara-import-logo-round.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.logo img {
  height: 100px;
  width: 100px;
  display: block;
  opacity: 0;
}

.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);
}
.search__icon { color: var(--muted); 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;
}
.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: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 60;
  padding: 6px;
}
.search-results__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.search-results__item:hover { background: var(--cream); }
.search-results__thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid var(--border);
}
.search-results__info { min-width: 0; }
.search-results__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-results__price {
  font-size: 13px;
  color: var(--muted);
}
.search-results__empty {
  padding: 12px 8px;
  font-size: 14px;
  color: var(--muted);
}

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

.header-actions {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.header-actions__link { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Aquí va el nombre de sesión (session.name || session.email): sin tope se estira sin
   límite y empuja el resto de .header-actions (carrito, idioma, buscador) fuera de su
   columna del grid, desbordando la cabecera entera. */
#header-signin-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-switcher { position: relative; margin-left: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.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;
}
.lang-switcher__toggle:hover { color: var(--ink); }
.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 de 16px. */
.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(--bg, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  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, 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(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart__count { background: #e02424; }
.wishlist-toggle:hover, .cart:hover { color: var(--accent); }
.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; }

/* 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: 6px;
  left: 6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: none;
  border-radius: 13px;
  background: #e02424;
  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: 50%;
  border: none;
  background: rgba(192, 107, 115, 0.14);
  color: var(--accent);
  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;
  background: var(--surface);
  border: 1px solid var(--border);
}
.wishlist-star--pd svg { width: 24px; height: 24px; }

.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: var(--ink); }

.site-nav {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 6px 20px;
  border-top: none;
  border-bottom: none;
  /* En vez de saltar a la hamburguesa en cuanto la fila no cabe, el texto de las categorías
     se encoge. syncNavLayout() (script.js) mide y fija --nav-font-size al tamaño exacto que
     hace falta; el clamp es sólo la línea base para que la PRIMERA pintada ya salga
     aproximadamente bien -- los scripts van al final del body, y sin esto se vería un
     instante la fila desbordada antes de que el JS la ajuste.
     El suelo del clamp y el de syncNavLayout tienen que ser el mismo (15px): por debajo no
     se lee, y ahí sí se cae a la hamburguesa. */
  font-size: var(--nav-font-size, clamp(15px, 1vw, 23px));
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(255, 248, 240, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-nav > .logo { justify-self: start; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
}
.site-nav > .header-actions { justify-self: end; }
.site-nav__links a {
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
  /* Crea contexto de apilamiento propio para que el resaltado de ::before (z-index:-1)
     se quede detrás del texto de ESTE enlace y no se cuele detrás del fondo de la barra. */
  isolation: isolate;
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--ink);
  transition: width 0.25s ease;
}
.site-nav__links a:hover::after { width: 100%; }

/* La categoría activa iba en color de acento, lo que hacía que la barra pareciera tener
   un color por categoría. Ahora es un resaltado gris neutro: el texto se queda en --ink
   y el chip se pinta con ::before en posición absoluta, así NO ocupa espacio en la fila.
   Eso importa porque syncNavLayout() (script.js) mide el ancho de .site-nav__links para
   decidir el tamaño de letra; un padding real aquí le cambiaría la cuenta a cada enlace
   y podría empujar la barra a la hamburguesa antes de tiempo. */
.site-nav__links a.is-active { color: var(--ink); }
.site-nav__links a.is-active::before {
  content: "";
  position: absolute;
  inset: -5px -11px -1px;
  border-radius: 7px;
  background: rgba(20, 18, 26, 0.09);
  z-index: -1;
}
/* Con el chip gris el subrayado sobra: marcaría dos veces lo mismo. */
.site-nav__links a.is-active::after { display: none; }

/* Liquidaciones siempre en rojo, esté seleccionada o no. El subrayado necesita la
   especificidad de `.site-nav__links a...` (0,2,1); con `.site-nav__highlight::after`
   a secas (0,1,1) ganaba la regla genérica de arriba y salía en --ink. */
.site-nav__highlight,
.site-nav__links a.site-nav__highlight.is-active { color: #c0392b !important; }
.site-nav__links a.site-nav__highlight::after { background: #c0392b; }
.site-nav__links a.site-nav__highlight.is-active::before { background: rgba(192, 57, 43, 0.12); }

/* 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: fixed;
  top: 0; /* set precisely via JS to sit flush under the nav, viewport-relative */
  left: 0;
  right: 0;
  z-index: 150;
  overflow-x: hidden;
  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;
}
.mega-menu__inner {
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  max-width: 1600px;
  margin: 0 auto;
  padding: 44px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px 40px;
  text-align: left;
}
.mega-menu__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mega-menu__col a.mega-menu__heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 14px;
  white-space: normal;
  overflow-wrap: break-word;
}
.mega-menu__heading::after { display: none; }
.mega-menu__heading:hover { color: var(--accent); }
.mega-menu__col a:not(.mega-menu__heading) {
  font-size: 19px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
  margin-bottom: 10px;
}
.mega-menu__col a:not(.mega-menu__heading)::after { display: none; }
.mega-menu__col a:not(.mega-menu__heading):hover { color: var(--accent); }

/* ============ 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; }
.stars {
  color: #fff;
  background: var(--accent);
  letter-spacing: 2px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
}
.trust-bar__reviews { color: var(--muted); }
.trust-bar__reviews strong { color: var(--ink); }

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

.marquee {
  background: var(--ink);
  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 {
  position: relative;
  color: var(--ink);
  background-color: #0c0c0e;
  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; }
@keyframes heroExit {
  to { transform: perspective(1400px) rotateX(42deg) translateY(-46px) scale(0.93); 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; }
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease;
  transform: scale(1.1);
  transform-origin: center;
}
.hero__slide.is-active { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(58% 82% at 80% 38%, rgba(255,255,255,0.06), transparent 68%);
  pointer-events: none;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 116px 48px 42px;
  min-height: 640px;
  flex: 1 1 auto;
}

.hero__top {
  position: relative;
  z-index: 1;
}

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

.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin-bottom: 26px;
}
.hero__title {
  font-size: 62px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -1.2px;
  max-width: 760px;
  margin-bottom: 22px;
  color: var(--ink);
}
.hero__sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(0,0,0,0.72);
  max-width: 500px;
  margin-bottom: 36px;
  font-weight: 400;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero .btn--light { background: var(--ink); color: #fff; }
.hero .btn--light:hover { background: var(--accent); color: #fff; }
.hero .btn--ghost {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.35);
  color: var(--ink);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero .btn--ghost:hover { background: rgba(0,0,0,0.16); }

.hero__stats {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0,0,0,0.16);
  padding-top: 26px;
}
.hero__stat { position: relative; padding-right: 24px; }
.hero__stat + .hero__stat { padding-left: 34px; }
.hero__stat + .hero__stat::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 1px;
  background: rgba(0,0,0,0.14);
}
.hero__stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.hero__stat span {
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.3px;
}

.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);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.section-heading h2 { font-size: 40px; margin-bottom: 14px; }
.section-heading p { color: var(--muted); font-size: 16px; margin: 0; }

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

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  max-width: 1320px;
  margin: 0 auto;
}
@keyframes categories3D {
  0%   { transform: perspective(1400px) rotateX(-48deg) translateY(90px); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: perspective(1400px) rotateX(0deg) translateY(0); opacity: 1; }
}
.category-grid.reveal-3d {
  transform-origin: center top;
  animation: categories3D 1s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}
.category-card {
  position: relative;
  border-radius: 0;
  padding: 32px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  /* Nombre arriba y centrado (antes iba abajo a la izquierda). La flecha no estorba:
     va posicionada en absoluto arriba a la derecha, fuera del flujo. */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card--dark { color: #111; }
.category-card--dark .category-card__name { text-shadow: 0 1px 10px rgba(255,255,255,0.4); }
.category-card--dark .category-card__arrow { background: rgba(0,0,0,0.12); color: #111; }
.category-card--dark:hover .category-card__arrow { background: rgba(0,0,0,0.22); }
.category-card--dark::after { background: linear-gradient(125deg, rgba(0,0,0,0.14), rgba(0,0,0,0) 55%); }
.category-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px) scale(1.02);
}
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.category-card:hover::after { opacity: 1; }
.category-card__name { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-shadow: 0 1px 10px rgba(0,0,0,0.28); position: relative; z-index: 1; }
.category-card__arrow {
  position: absolute;
  /* Abajo a la derecha desde que el nombre pasó a estar arriba y centrado: en tarjetas
     estrechas (2 columnas en móvil) un nombre largo como "Baño, Cocina y Salón" llegaba
     hasta la flecha y se pisaban. Abajo ocupa el hueco que ha dejado el texto. */
  bottom: 24px;
  right: 24px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.category-card:hover .category-card__arrow {
  background: rgba(255,255,255,0.35);
  transform: rotate(45deg);
}

/* Portada (index.html): la cuadrícula de categorías sustituye al hero, así que
   ocupa toda la pantalla igual que éste hacía -- sin heading, sin padding de
   .section, alto = 100vh repartido en 2 filas. Sólo en .landing para no tocar
   el aspecto de categories.html, que usa las mismas clases .category-grid/card. */
.landing #categories { padding: 0; }
.landing .category-grid { max-width: none; min-height: calc(100vh - 150px); grid-template-rows: repeat(2, 1fr); }
.landing .category-card { min-height: 0; }
/* En la portada las tarjetas ocupan media pantalla de alto cada una, así que el nombre
   se queda pequeño para el tamaño de la foto que lo acompaña: aquí va un 50% más grande
   (20px -> 30px) que en categories.html, donde la retícula es más compacta. */
/* Negro y algo más fino que en categories.html: sobre fotos tan grandes el blanco en
   negrita quedaba pesado. El halo pasa a ser blanco (el de la base es oscuro, pensado
   para texto blanco) para que el negro siga leyéndose sobre las zonas oscuras. */
/* Posición absoluta y no de flujo: el padding del .category-card (32px) más el leading
   propio de la línea de texto no la dejaban a los ~20px del borde superior que se pedía --
   fijarla en top:20px con transform para centrar horizontalmente da un valor exacto y
   predecible en vez de depender de la caja de línea de la fuente. */
.landing .category-card__name {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(255,255,255,0.55);
}
@media (max-width: 760px) {
  .landing .category-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; min-height: auto; gap: 2px; }
  .landing .category-card { min-height: 200px; }
  /* Blanco en vez de negro en móvil: con 2 columnas las fotos son mucho más pequeñas y el
     negro se pierde contra las zonas oscuras. El halo vuelve a ser oscuro (pensado para
     texto blanco) y el tamaño baja porque nombres largos como "Baño, Cocina y Salón" no
     caben en negrita a 30px en una tarjeta de media anchura. */
  .landing .category-card__name {
    font-size: 19px;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  }
  /* Hostelerías stays black even on mobile -- its photo is light enough that
     white loses contrast, same reasoning as the desktop --dark variant. */
  .landing .category-card--dark .category-card__name {
    color: #000;
    text-shadow: 0 1px 10px rgba(255,255,255,0.4);
  }
}

/* categories.html: ya no tiene section-heading, quita el padding superior de
   .section para que la cuadrícula empiece justo debajo del header. */
.page-enter #categories { padding-top: 0; }

/* ============ 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 { box-shadow: var(--shadow-lg); border-color: #ddd2c4; }
.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 ============ */

.category-hero {
  background: rgba(255, 248, 240, 0.45);
  color: var(--ink);
  padding: 8px 48px 7px;
  border-top: 1px solid #d8d3cc;
  border-bottom: 1px solid #d8d3cc;
}
.category-hero--rainbow {
  background: linear-gradient(120deg, #ff3d68, #ffb400, #7b2cbf, #00b4d8);
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}
.breadcrumb { font-size: 13px; opacity: 0.85; margin-bottom: 3px; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.category-hero h1 { font-size: 28px; margin-bottom: 2px; }
/* :not(.breadcrumb) porque la miga de pan también es un <p> dentro de .category-hero, y
   este selector (0,1,1) le ganaba a .breadcrumb (0,1,0): heredaba el tamaño, la opacidad
   y el max-width de la descripción, y el margin:0 anulaba su margen inferior. */
.category-hero p:not(.breadcrumb) { max-width: 560px; font-size: 14px; opacity: 0.92; margin: 0; }

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

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 48px;
  max-width: 1760px;
  margin: 0 auto;
}
/* El recuento va en su propia línea encima de la barra (como en la referencia de Banak),
   dejando "Filtros" a la izquierda y el orden a la derecha. */
.toolbar__count { order: -1; width: 100%; color: var(--muted); font-size: 14px; font-weight: 600; }

/* Selector de vista del catálogo (2 por fila / 1 por fila). Sólo tiene sentido en móvil:
   en escritorio el grid ya son 6 columnas y bajar a 1 no aporta nada, así que aquí se
   oculta y se muestra en el bloque de 760px. */
.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 #d8d3cc;
  border-radius: 8px;
  background: #fff;
  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 -- ver
   ahí). Las pills son el único hijo que puede necesitar scroll horizontal (ver
   .toolbar__pills); Filtros/Ordenar no se encogen, así quedan siempre fijos a la derecha. */
.catalog-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 11px 48px 0;
}
.catalog-top-row .filters-toggle,
.catalog-top-row .sort-select {
  flex-shrink: 0;
}
/* Acceso rápido de un clic a cada subcategoría. buildCatalogFilters reubica este marcado
   (ya presente en las 32 páginas de catálogo) del toolbar a .catalog-top-row, así que aquí
   sólo hace falta el aspecto: la posición la decide el JS, no el orden en el HTML. flex:1 +
   min-width:0 es lo que permite que sólo esta parte de la fila haga scroll horizontal
   cuando no caben todas, dejando Filtros/Ordenar fijos (min-width:0 porque un hijo flex no
   se encoge por debajo de su contenido por defecto, lo que rompería el overflow-x). */
.toolbar__pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.toolbar__pills::-webkit-scrollbar { display: none; }
.toolbar__pills .pill { flex-shrink: 0; border-radius: 10px; }
/* .pill se sigue usando en las pestañas de la ficha de producto (Detalles/Envío). */
.pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pill:hover { border-color: var(--accent); }
.pill--active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sort-select {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

/* ============ Panel de filtros del catálogo ============ */
/* El botón "Filtros" ocupa el sitio de la antigua fila de pills, a la izquierda de la
   barra. El panel en sí ya no es un desplegable inline: 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. */

.filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.filters-toggle:hover { border-color: var(--accent); }
.filters-toggle.is-open { border-color: var(--ink); background: var(--ink); color: #fff; }
/* 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: #fff;
  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. grid-template-rows 0fr->1fr anima la
   altura sin tener que medir el contenido en JS. */
.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: inherit;
  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); }
.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); }
.filters__group-toggle.is-open .filters__group-chevron { transform: rotate(45deg); }
/* El plegado en reposo usa el atributo [hidden] nativo, no una animación de grid: es la
   única forma de garantizar que el contenido no se vea NUNCA mientras está cerrado en
   todos los navegadores (el truco de grid-template-rows: 0fr dejaba un resquicio visible
   en algunos, sobre todo Safari/iOS). La animación de abrir/cerrar la lleva aparte
   script.js, animando `height` en px con JS -- por eso la transición está aquí pero el
   valor de reposo (con [hidden]) no depende de ella para nada.  */
.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); 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; gap: 12px; flex-wrap: wrap; }
.filters__price label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.filters__price input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s ease;
}
.filters__price input:focus { border-color: var(--accent); outline: none; }

.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: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.filters__clear:hover { color: var(--ink); }
.filters__done {
  flex: 1;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease;
}
.filters__done:hover { background: var(--accent-dark); }

.filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 1760px;
  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: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.filters-chip:hover { border-color: var(--accent); }
.filters-chip--clear { background: none; text-decoration: underline; color: var(--muted); }
.filters-empty {
  max-width: 1760px;
  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; }
}

/* ============ 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);
  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(6, 1fr);
  /* gap: <fila> <columna>. La separación horizontal queda a 1/4 del valor original
     (20px -> 5px); la vertical se mantiene a la mitad, como el resto del catálogo. */
  gap: 10px 5px;
  padding: 0 24px 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); } }
.product-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
/* Antes la tarjeta entera se levantaba (translateY(-6px) + sombra grande) al pasar por
   encima. Con una retícula de 6 columnas y scroll infinito eso hace que la fila
   "respire" bajo el cursor y cuesta seguir la lectura. Las referencias dejan la tarjeta
   quieta y mueven sólo la foto dentro de su marco, que es lo que se hace aquí: el
   recorte lo pone .product-card__link y el zoom lo hace el swatch. */
.product-card:hover { box-shadow: var(--shadow-lg); }
/* 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 (para arriba tan ligero como para abajo), sin tener que quitarlas
   del DOM a mano ni lidiar con saltos de scroll al hacerlo. contain-intrinsic-size
   reserva una altura aproximada mientras están "descargadas" para que no se colapsen a
   0 y muevan el scroll la primera vez que salen de la pantalla. */
.product-grid .product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
  border-radius: 0;
}
.product-grid .product-card__swatch {
  height: auto;
  aspect-ratio: 1 / 1;
}
/* Espaciado interior de la ficha, a la mitad que el general. Va acotado a .product-grid
   a propósito: el mismo .product-card se usa en los carruseles de destacados/relacionados,
   que conservan su holgura original. */
.product-grid .product-card__body { padding: 10px 11px 12px; gap: 5px; }
/* El enlace envuelve únicamente al swatch (ver cardHTML en script.js), así que es el
   marco natural donde recortar el zoom. El :has() lo distingue del otro
   .product-card__link, el que envuelve el <h3> del cuerpo. */
.product-card__link:has(.product-card__swatch) { overflow: hidden; }
.product-card__swatch {
  height: 200px;
  position: relative;
  background-color: var(--cream);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.24, 1);
}
@media (hover: hover) {
  .product-card:hover .product-card__swatch { transform: scale(1.045); }
}
.product-card__swatch .badge { position: absolute; top: 14px; left: 14px; }
.product-card__swatch-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .product-card__link:hover .product-card__swatch-hover { opacity: 1; }
}
.product-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* El nombre baja de 700 a 500. Con todo en negrita (nombre, precio, valoración) no
   había jerarquía dentro de la ficha; dejando el peso fuerte sólo al precio, la vista
   del catálogo se escanea mucho más rápido. */
.product-card__body h3 { font-size: 15px; font-weight: 500; line-height: var(--leading-tight); letter-spacing: 0; }
.product-card__link { display: block; color: inherit; text-decoration: none; }
.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: 12px; }
.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.product-card__rating-stars { color: #d99a2b; letter-spacing: 1px; }
.product-card__rating-count { color: var(--muted); }
.price { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-top: auto; }
.price .was { color: var(--muted); text-decoration: line-through; font-weight: 500; font-size: 14px; margin-left: 8px; }
.product-card__body .btn { margin-top: 8px; width: 100%; }

/* Precios ocultos para invitados (ver script.js, arriba del todo): body sin la clase
   price-unlocked es el estado por defecto, así que nunca llega a pintarse un precio real
   antes de saber si hay sesión. font-size:0 hace que el texto real (money(...) inyectado
   por JS) ocupe ~0 de ancho sin necesitar position:absolute -- así el aviso de "inicia
   sesión" del ::after fluye con su propio tamaño en vez de tener que encajar en la caja
   del precio original, que casi siempre es más corto. Sólo afecta a estos elementos
   porque cada uno es texto plano (sin hijos sin font-size propio); .price .was arriba SÍ
   fija su propio font-size, así que no hereda el 0 aunque estuviera dentro. */
body:not(.price-unlocked) .price,
body:not(.price-unlocked) .cart-item__unit,
body:not(.price-unlocked) .cart-item__line,
body:not(.price-unlocked) .cart-subtotal,
body:not(.price-unlocked) .checkout-item__price,
body:not(.price-unlocked) #checkout-base,
body:not(.price-unlocked) #checkout-iva,
body:not(.price-unlocked) #checkout-subtotal,
body:not(.price-unlocked) #checkout-total,
body:not(.price-unlocked) #checkout-shipping,
body:not(.price-unlocked) .product-detail__price-original,
body:not(.price-unlocked) .product-detail__price-final,
body:not(.price-unlocked) #pd-sizes-total-amount {
  font-size: 0;
}
/* El aviso de "Inicia sesión" sólo aparece en el checkout -- en cualquier otro
   sitio (tarjetas de producto, carrito, página de producto) el precio se queda
   simplemente oculto, sin texto encima, porque el invitado puede navegar y
   añadir al carrito sin necesidad de iniciar sesión; sólo se le pide al
   confirmar el pedido. */
body:not(.price-unlocked) .checkout-item__price::after,
body:not(.price-unlocked) #checkout-base::after,
body:not(.price-unlocked) #checkout-iva::after,
body:not(.price-unlocked) #checkout-subtotal::after,
body:not(.price-unlocked) #checkout-total::after,
body:not(.price-unlocked) #checkout-shipping::after {
  content: var(--price-locked-label, "Inicia sesión");
  font-size: 13px;
}
body:not(.price-unlocked) .price::after,
body:not(.price-unlocked) .cart-item__unit::after,
body:not(.price-unlocked) .cart-item__line::after,
body:not(.price-unlocked) .cart-subtotal::after,
body:not(.price-unlocked) .product-detail__price-original::after,
body:not(.price-unlocked) .product-detail__price-final::after,
body:not(.price-unlocked) #pd-sizes-total-amount::after {
  content: none;
}

/* ============ Bestsellers (horizontal carousel) ============ */
.bestsellers { padding: 64px 0 88px; }
/* Menos hueco entre "Novedades" y "Los más vendidos" (antes 88px + 64px = 152px de por
   medio): se recorta sólo el margen que las separa entre sí, no el que tienen con las
   secciones de arriba/abajo. */
#novedades-section.bestsellers { padding-bottom: 24px; }
#bestsellers-section.bestsellers { padding-top: 24px; }
.bestsellers__head {
  margin: 0 0 28px;
  padding: 0 24px;
}
.bestsellers__head h2 { font-size: 32px; font-weight: 700; }
.bestsellers__wrap {
  position: relative;
  padding: 0 24px;
}
.bestsellers__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.bestsellers__track::-webkit-scrollbar { display: none; }
/* Seis tarjetas a la vista sin desbordar, restando los 5 huecos entre ellas del ancho
   disponible (que ahora llega borde a borde, ver .bestsellers__wrap de arriba). */
.bestsellers__track .product-card {
  flex: 0 0 calc((100% - 5 * 20px) / 6);
  scroll-snap-align: start;
}
/* "Los más vendidos" enseña 4 tarjetas en vez de 6, con exactamente la misma retícula que
   .category-grid de arriba: mismo ancho a sangre (el .section de categorías va sin padding
   en .landing, ver más arriba), 4 columnas y hueco de 2px. Así las fichas salen del mismo
   tamaño que las tarjetas de categoría y alineadas con ellas.
   El alto no se puede igualar en CSS estático: las tarjetas de categoría miden
   calc(100vh - 150px)/2, o sea que dependen del alto de la ventana. */
#bestsellers-section .bestsellers__head,
#bestsellers-section .bestsellers__wrap {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#bestsellers-section .bestsellers__track { gap: 2px; }
#bestsellers-section .bestsellers__track .product-card {
  flex-basis: calc((100% - 3 * 2px) / 4);
  /* Tarjeta cuadrada: el ancho lo fija flex-basis (el mismo que una tarjeta de categoría)
     y aspect-ratio deriva el alto de ese ancho. */
  aspect-ratio: 1 / 1;
}
#bestsellers-section .product-card { border-radius: 0; }
/* La foto ocupa todo lo que sobra dentro del cuadrado, por debajo del nombre y el precio.
   min-height:0 porque un hijo flex no baja de su altura de contenido por defecto, y sin
   eso la imagen empujaría la tarjeta por encima del cuadrado. */
/* La foto no cuelga directamente de .product-card: va dentro de .product-card__link, así
   que el enlace también tiene que estirarse, o el flex:1 del swatch se reparte dentro de
   una caja de altura 0 y la imagen desaparece. */
#bestsellers-section .product-card__link {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#bestsellers-section .product-card__swatch { height: auto; flex: 1; min-height: 0; }
/* El body trae flex:1 de la regla general; aquí tiene que medir lo que ocupe su contenido
   para que el reparto del cuadrado lo gane la foto y no el texto (si no, ambos compiten
   por el espacio y la imagen se queda en 0). */
#bestsellers-section .product-card__body { flex: 0 0 auto; }

/* "Novedades" con esquinas rectas, igual que "Los más vendidos" y que el catálogo. */
#novedades-section .product-card { border-radius: 0; }
/* Mismo hueco horizontal que el catálogo: .product-grid usa `gap: 10px 5px`, y como aquí
   sólo hay una fila lo que aplica es el de columna (5px), no los 20px del carrusel base.
   Al cambiar el hueco hay que rehacer la base de flex con el valor nuevo, o las 6 tarjetas
   dejan de cuadrar justo en el ancho disponible. */
#novedades-section .bestsellers__track { gap: 5px; }
#novedades-section .bestsellers__track .product-card { flex-basis: calc((100% - 5 * 5px) / 6); }
.bestsellers__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  color: var(--ink);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.bestsellers__arrow:hover { background: var(--cream); }
.bestsellers__arrow--left { left: 8px; }
.bestsellers__arrow--right { right: 8px; }
.bestsellers__arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
@media (max-width: 720px) {
  .bestsellers__head, .bestsellers__wrap { padding: 0 20px; }
  .bestsellers__track .product-card { flex-basis: 200px; }
  #bestsellers-section .bestsellers__track .product-card { flex-basis: 240px; }
  /* En móvil el catálogo baja el hueco de columna a 3,5px. La base de flex hay que
     repetirla con selector de ID: la regla de escritorio de #novedades-section pesa más
     (1,1,0) que el `.bestsellers__track .product-card` de aquí arriba (0,2,0), así que sin
     esto seguiría mandando el calc de 6 columnas y las tarjetas salían de ~52px. */
  #novedades-section .bestsellers__track { gap: 3.5px; }
  #novedades-section .bestsellers__track .product-card { flex-basis: 200px; }
  .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(--ink);
  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 ============ */

.site-footer {
  background: rgba(255, 248, 240, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer-newsletter {
  text-align: center;
  padding: 70px 48px 50px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.footer-newsletter h3 { font-size: 30px; margin-bottom: 12px; }
.footer-newsletter p { color: rgba(0,0,0,0.7); margin-bottom: 28px; }
.newsletter-form {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  gap: 10px;
}
.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.05);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.newsletter-form input::placeholder { color: rgba(0,0,0,0.5); }
.newsletter-form button {
  white-space: nowrap;
}

.footer-grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-grid h4 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; color: var(--accent-2); }
.footer-grid a { display: block; color: rgba(0,0,0,0.75); font-size: 14px; margin-bottom: 12px; }
.footer-grid a:hover { color: var(--ink); }
.footer-brand .logo { width: 82px; height: 82px; }
.footer-brand .logo img { height: 82px; width: 82px; }
.footer-brand p { color: rgba(0,0,0,0.6); font-size: 14px; margin-top: 14px; max-width: 280px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
}
.footer-social a:hover { background: var(--accent); }

.footer-bottom {
  text-align: center;
  padding: 20px 48px;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 13px;
  color: rgba(0,0,0,0.55);
}

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

.home-categories { padding: 8px 0 88px; }
.home-categories__head {
  margin: 0 0 28px;
  padding: 0 24px;
}
.home-categories__head h2 { font-size: 32px; font-weight: 700; }
.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0 24px;
}
.home-categories__card {
  position: relative;
  border-radius: 0;
  padding: 28px 22px;
  aspect-ratio: 3 / 4.6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-categories__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.home-categories__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px) scale(1.02);
}
.home-categories__name {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(0,0,0,0.28);
  position: relative;
  z-index: 1;
}
.home-categories__arrow {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}
.home-categories__card:hover .home-categories__arrow { background: rgba(255,255,255,0.35); }
.home-categories__rebajas-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.home-categories--rebajas .home-categories__grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
}
.home-categories--rebajas .home-categories__card {
  aspect-ratio: 1 / 1;
  padding: 18px;
}
.home-categories--rebajas .home-categories__name { font-size: 18px; }

/* ============ 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: 420px;
  object-fit: cover;
  display: block;
}
.lifestyle-banner__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 64px;
  background: var(--cream, #f7f2ea);
}
.lifestyle-banner__eyebrow {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 18px;
}
.lifestyle-banner__content h2 {
  font-family: var(--font-head);
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.lifestyle-banner__content p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.8;
  margin-bottom: 24px;
  max-width: 46ch;
}
.lifestyle-banner__link {
  align-self: flex-start;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.promo-banner {
  position: relative;
  min-height: 92vh;
  margin: 0 0 88px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.12) 40%, rgba(0,0,0,0.32));
}
.promo-banner__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}
.promo-banner__content h2 {
  font-family: var(--font-head);
  font-size: 40px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.promo-banner__content p {
  font-size: 15px;
  letter-spacing: 0.5px;
  line-height: 1.8;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 32px;
}
.promo-banner__btn {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: background 0.3s ease, color 0.3s ease;
}
.promo-banner__btn:hover { background: #fff; color: var(--ink); }

/* ============ 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: 48px; }
}

/* 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, which otherwise squeezes the
   logo/header-actions grid columns down to 0 width and empuja el carrito /
   selector de idioma / "Cerrar sesión" fuera de la pantalla.

   En pantallas de ordenador ya NO se colapsa por desbordar: primero se encoge el texto de
   las categorías (ver --nav-font-size arriba y syncNavLayout en script.js). Este umbral
   marca el punto en el que ni al tamaño mínimo legible cabe la fila -- para el español
   hacen falta ~1580px con la letra al mínimo -- así que por debajo de él la hamburguesa es
   la única salida y se aplica directamente desde CSS, sin parpadeo.
   Por encima manda syncNavLayout(): encoge, y sólo si aun así no cabe (idiomas anchos como
   el ruso) añade .is-compact. */
@media (max-width: 1600px) {
  .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; }
  .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; }
  .site-nav__links { display: none; }
}

/* Mismo colapso, pero forzado por JS cuando la fila no cabe por encima del
   media query de arriba (p. ej. ruso en un monitor de 2560px). */
.site-nav.is-compact { display: flex; position: relative; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 14px; }
.site-nav.is-compact .header-actions { margin-left: auto; }
.site-nav.is-compact .search { display: none; }
.site-nav.is-compact .search.is-mobile-open {
  display: flex;
  position: relative;
  width: 170px;
  margin: 0 4px 0 12px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--ink);
}
.site-nav.is-compact .search.is-mobile-open input { opacity: 1; }
.site-nav.is-compact .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;
}
.site-nav.is-compact .nav-toggle { display: flex; }
.site-nav.is-compact .site-nav__links { display: none; }

/* (El bloque específico de html[lang="ru"] que había aquí se ha eliminado: era el
   mismo colapso con un umbral distinto, y ahora lo cubren el media query unificado
   de 2250px y la medición real de syncNavLayout().) */

/* Mobile side-drawer menu (built by initADP() in script.js from the same
   nav-item/mega-menu markup as the desktop hover nav): a left-anchored
   slide-in panel that drills down category -> subcategory -> leaf as
   separate screens instead of an inline accordion. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer.is-open { visibility: visible; pointer-events: auto; }
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-drawer.is-open .mobile-drawer__backdrop { opacity: 1; }
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-lg);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  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: inherit;
  padding: 4px;
  flex-shrink: 0;
}
.mobile-drawer__close { margin-left: auto; }
.mobile-drawer__title {
  flex: 1 1 auto;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mobile-drawer__viewall {
  flex-shrink: 0;
  font-size: 13px;
  text-decoration: underline;
  color: inherit;
}
.mobile-drawer__list { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }
.mobile-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  border: none;
  background: none;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-drawer__row:hover { background: rgba(0, 0, 0, 0.03); }
.mobile-drawer__chevron { flex-shrink: 0; color: var(--muted); }

@media (max-width: 760px) {
  .newsletter-teaser { display: none; }
  .container, .trust-bar, .announce-bar, .section, .toolbar,
  .product-grid, .footer-grid, .checkout-page, .account-section, .account-session { padding-left: 20px; padding-right: 20px; }
  .site-nav { padding-left: 20px; padding-right: 20px; }
  .logo { width: 48px; height: 48px; }
  .logo img { height: 48px; width: 48px; }
  .lifestyle-banner { grid-template-columns: 1fr; padding: 0 20px; margin-bottom: 56px; }
  .lifestyle-banner__media img { min-height: 260px; }
  .lifestyle-banner__content { padding: 32px 28px; }
  .lifestyle-banner__content h2 { font-size: 28px; }
  .promo-banner { min-height: 80vh; margin-bottom: 56px; }
  .promo-banner__content h2 { font-size: 26px; letter-spacing: 2px; }
  .promo-banner__content p { font-size: 13px; }
  .category-grid { grid-template-columns: 1fr; }
  .home-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 20px; }
  .home-categories__head { padding: 0 20px; }
  /* Igual que en escritorio: horizontal a 1/4 del original (14px -> 3.5px). */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 7px 3.5px; }
  /* Vista de 1 producto por fila (botón de .catalog-view-toggle). */
  .product-grid.is-single-col { grid-template-columns: 1fr; }
  .catalog-view-toggle { display: flex; gap: 4px; margin-left: auto; }
  .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. */
  .wishlist-star { width: 30px; height: 30px; top: 8px; right: 8px; }
  .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; }
  .product-card__body { padding: 14px 14px 16px; gap: 6px; }
  /* Igual que en escritorio: sólo las fichas del catálogo, no las de los carruseles. */
  .product-grid .product-card__body { padding: 7px 7px 8px; gap: 3px; }
  .product-card__body h3 { font-size: 13px; }
  .price { font-size: 14px; }
  .product-card__quickadd { display: flex; }
  /* ...except the index.html carousels (Novedades / Los más vendidos) — the
     per-size stepper table doesn't fit their smaller carousel cards, so it
     stays catalog-grid-only. */
  .bestsellers__track .product-card__quickadd { display: none; }
  .hero__inner { padding: 80px 20px 32px; min-height: auto; }
  .hero__title { font-size: 34px; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 26px 0; margin-top: 44px; }
  .hero__stat { padding-right: 16px; }
  .hero__stat + .hero__stat { padding-left: 20px; }
  .hero__stat:nth-child(3)::before { display: none; }
  .hero__stat strong { font-size: 24px; }
  .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; }
  .category-hero { padding: 7px 20px 6px; }
  .category-hero h1 { font-size: 24px; }
  /* En una pantalla de móvil los tres controles (Filtros + pills + Ordenar) no caben en
     una línea, y el scroll horizontal de las pills quedaba en una franja de pocos píxeles:
     imposible de usar y encima esconde subcategorías sin ninguna pista visual. Aquí la
     fila se parte en dos: Filtros y Ordenar arriba, y las pills debajo ocupando el ancho
     completo y bajando de línea las que no quepan, de modo que se ven todas a la vez.
     El orden lo fija `order` y no el HTML, porque los tres son hermanos en la misma fila. */
  .catalog-top-row { padding: 8px 20px 0; gap: 5px; flex-wrap: wrap; }
  .catalog-top-row .filters-toggle { order: 0; }
  /* El max-width es lo que mantiene "Ordenar" en la misma línea que "Filtros" en pantallas
     de 320px: con flex-wrap activo un hijo demasiado ancho salta de línea en vez de
     encogerse, así que no basta con flex-shrink -- hay que limitarle el ancho. */
  .catalog-top-row .sort-select { order: 1; margin-left: auto; flex-shrink: 1; min-width: 0; max-width: 55%; }
  .toolbar__pills {
    order: 2;
    flex: 1 0 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
  }
  /* Algo más compactas que en escritorio para que 7-8 subcategorías ocupen 2-3 líneas
     en vez de 4. */
  .toolbar__pills .pill { padding: 7px 12px; font-size: 12px; }
  .footer-brand .logo { width: 60px; height: 60px; }
  .footer-brand .logo img { height: 60px; width: 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-size: 22px; }
.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: 50%;
  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: 8px;
  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); }

.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; }
.checkout-page__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
}
.checkout-page__layout[hidden] { display: none; }
.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); }
.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, 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(--ink);
  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; }
.checkout-page__login-required {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fdf1ec;
  color: #8a4a2a;
  font-size: 14px;
}
.checkout-page__login-required[hidden] { display: none; }
.checkout-page__login-required a { color: inherit; font-weight: 600; text-decoration: underline; margin-left: 6px; }
.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); }

@media (max-width: 860px) {
  .checkout-page__layout { grid-template-columns: 1fr; }
  .checkout-page__summary { position: static; }
}

/* ============ 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: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
}
.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); text-decoration: underline; }
.auth-forgot {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 0;
}
.auth-forgot a { color: var(--accent); font-weight: 700; }
.form-message {
  display: none;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 10px;
}
.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);
  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: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  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(--ink);
  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; }

.newsletter-teaser {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right bottom;
  border: none;
  border-radius: 6px 6px 0 0;
  background: var(--accent, var(--ink));
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  z-index: 900;
  transition: padding 0.15s ease;
}
.newsletter-teaser:hover { padding: 10px 26px; }

.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: 760px;
  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__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: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.stock-badge.is-in { background: #e6f3ea; color: #1f7a3f; }
.stock-badge.is-out { background: #fff; color: #000; border: 1px solid #000; }
.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: pattern groups (each holding one or more colour rows) inside the
   catalog form */
.admin-variants { display: flex; flex-direction: column; gap: 14px; }
.admin-pattern-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,0.015);
}
.admin-pattern-group__top { display: flex; align-items: center; gap: 10px; }
.admin-variant-pattern { flex: 1 1 0; min-width: 0; font-weight: 600; }
.admin-pattern-colours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.admin-colour-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.admin-colour-row__top { display: flex; align-items: center; gap: 8px; }
.admin-colour-row__top .admin-variant-color { flex: 1 1 0; min-width: 0; }
.admin-variant-pattern,
.admin-variant-color {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--cream);
}
.admin-pattern-remove,
.admin-colour-remove {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.admin-pattern-remove:hover,
.admin-colour-remove:hover { color: #a8362c; }
.admin-pattern-add-colour {
  align-self: flex-start;
  margin-left: 14px;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.admin-pattern-add-colour:hover { border-color: var(--accent); color: var(--accent); }
.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;
  flex-shrink: 0;
  white-space: nowrap;
  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"
    "short short short short"
    "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-filter-label { grid-area: short; }
.admin-size-row .admin-size-guide { grid-area: guide; }
.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-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"
      "short short"
      "guide guide"
      "price units"
      "pack  code"
      "stock remove"
      "qty   qty";
  }
}

/* ============ Página de producto ============ */
.product-detail__breadcrumb {
  max-width: 100%;
  margin: 24px auto 0;
  padding: 0 48px;
}
.product-detail {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 48px 100px;
  display: grid;
  grid-template-columns: minmax(0, calc(52.38% + 200px)) minmax(0, calc(47.62% - 200px));
  gap: 56px;
}
.product-detail[hidden] { display: none; }
.product-detail__gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 2900px;
}
.product-detail__main-image {
  position: relative;
  display: block;
  width: 60%;
  /* Caja de altura fija. Antes la imagen era height:auto, o sea que el alto del marco lo
     ponía la proporción de cada foto: las del catálogo van de 1.03 a 1.41 de ratio, así que
     el marco pegaba saltos de hasta un 37% al cambiar de imagen. Y como las miniaturas van
     debajo en la misma columna flex, saltaban con él: la miniatura se escapaba de debajo del
     cursor y el mouseenter caía en la de al lado, encadenando cambios. Con la proporción
     fija el alto ya no depende de la foto y la tira de miniaturas no se mueve nunca.
     1/1 porque la mayoría de fotos son casi cuadradas (4000x3894) y así se ven al máximo,
     va a juego con las miniaturas cuadradas, y object-fit:contain no recorta nada: las
     pocas apaisadas sólo dejan franja arriba y abajo, del color del fondo. */
  aspect-ratio: 1 / 1;
  max-height: 80vh;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  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: 60%;
  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: 0;
  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); }
@media (max-width: 640px) {
  .product-detail__thumb { flex-basis: 64px; }
  /* En móvil la foto principal va a sangre (borde a borde) en vez de quedar
     como un cuadrado flotando con margen a los lados -- .product-detail trae
     24px de padding lateral (ver regla @860px más abajo), así que el margen
     negativo aquí lo compensa exactamente. Las miniaturas se quedan con su
     propio margen, no hace falta que lleguen también al borde. */
  .product-detail__gallery { margin: 0 -24px; gap: 10px; }
  .product-detail__main-image { width: 100%; max-height: none; }
  .product-detail__thumbs { width: calc(100% - 48px); }
}

/* 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 { min-width: 0; }
.product-detail__info-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 12px;
  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); }
.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__vat-note { margin: 2px 0 0; font-size: 12px; color: var(--muted, #666); }
.product-detail__colour { display: flex; flex-direction: column; gap: 10px; }
.product-detail__colour-label { font-size: 16px; font-weight: 700; }
.product-detail__colour-label strong { font-weight: 700; color: var(--accent); }
/* Para que "Unidades" y "Cajas" caigan exactamente sobre su sumador hacen falta
   tres cosas: que los sumadores se anclen a la derecha (antes iban pegados al
   precio, que mide distinto en cada fila -- "4,95 €" contra "10,95 €" -- así que
   la columna bailaba), que cada grupo tenga ancho fijo, y que la cabecera comparta
   el padding lateral de las filas. Los 20px valen igual en escritorio (fila: 20px)
   que en móvil (hoja: 20px + fila: 20px, y la cabecera hereda los 20px de la hoja). */
.product-detail__sizes-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; padding: 0 20px; }
.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: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Guía de tallas: barra propia bajo la cabecera (ver product.html), alineada a la
   derecha para quedar pegada a los sumadores sin tocar la alineación Pack/Cajas. */
.product-detail__size-guide-bar { display: flex; justify-content: flex-end; padding: 0 20px; }
.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);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-detail__size-guide-toggle:hover { border-bottom-color: var(--accent); }
.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); }
/* Panel lateral derecho, mismo patrón que la hoja "Seleccionar 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);
  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, #efe4da);
}
.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, #efe4da);
  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: 10px;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--cream);
  cursor: pointer;
  overflow: hidden;
}
.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: none;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #666);
}
.product-detail__pack-notice[hidden] { display: none; }
.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; justify-content: center; gap: 4px; flex-shrink: 0; width: 84px; }
/* Hueco reservado: una talla sin caja tiene que ocupar el mismo sitio, o su
   sumador de unidades se correría hacia la derecha y saldría de su columna. */
.product-detail__step-group--empty { visibility: hidden; }
.product-detail__step-group .product-detail__pack-notice { margin: 0; white-space: nowrap; font-size: 11px; }
/* Con pack mixto (ver script.js), la talla lleva además su propio aviso ("Unidades" o
   "×N") bajo el sumador -- a 84/120px de ancho no cabe al lado, así que esta variante
   apila en vertical en vez del layout en fila que usa el resto de step-groups. */
.product-detail__step-group .product-detail__pack-notice { color: var(--muted); text-align: center; }
.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__sizes-cols { gap: 20px; }
  .product-detail__sizes-col { width: 120px; }
  .product-detail__step-group { gap: 6px; width: 120px; }
  .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: 16px 20px;
  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); 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: #000; }

@media (max-width: 480px) {
  /* La cabecera tiene que seguir al mismo padding lateral que las filas o las
     columnas dejan de caer sobre sus sumadores (aquí bajan de 20px a 10px). */
  .product-detail__sizes-head { padding: 0 10px; }
  .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); }
@media (max-width: 480px) {
  /* Right-aligned (flex-end) puts the total flush against the same edge as
     the fixed support-chat button (right: 24px), which covers/splits it on
     narrow screens. Left-align here so it never sits under the button. */
  .product-detail__sizes-total { justify-content: flex-start; }
}
.product-detail__go-checkout {
  display: block;
  width: 100%;
  margin-top: 10px;
}

/* En escritorio la lista de tallas va siempre inline; el botón/backdrop/cierre son
   cosas de móvil y se quedan ocultos hasta que entra 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;
  }
  /* El aviso por fila ("×2"/"Unidades") sólo hace falta en móvil: ahí la fila
     va muy apretada y la cabecera "Uds/pack" queda lejos, así que cada fila
     repite su propio dato. En escritorio la cabecera ya es suficiente y el
     aviso repetido en cada fila sólo añadía ruido. */
  .product-detail__pack-notice { display: inline-block; }
  .product-detail__step-group:has(.product-detail__pack-notice) { flex-direction: column; gap: 2px; }
}
.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 {
  max-width: 100%;
  margin: 0 auto 80px;
  padding: 48px 48px 0;
  border-top: 1px solid var(--border);
}
.product-detail__extra[hidden] { display: none; }

.product-detail__viewed {
  max-width: 100%;
  margin: 0 auto 80px;
  padding: 48px 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: 28px;
  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) {
  .product-detail__viewed { padding: 40px 24px 0; }
  .product-detail__viewed-head { padding: 0; }
}

.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: 14px;
}
.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: 28px;
}
.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 {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: none;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.support-chat-escalate button: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) {
  .product-detail { grid-template-columns: 1fr; gap: 32px; padding: 16px 24px 70px; }
  .product-detail__breadcrumb { padding: 0 24px; }
  .product-detail__info-inner { position: static; top: auto; }
}

/* ============ Cookie consent ============ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--ink);
  color: #fff;
  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: #fff; color: var(--ink); }
.cookie-consent .btn--dark:hover { background: var(--accent); 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; }
}