/* ══════════════════════════════════════════════════════════════════════════
   TEMA: JOYERÍA  ·  verticales `mlm_nice_mx` y `retail_jewelry`

   ## La decisión

   **La página calla para que hablen las piezas.** El color existe, pero se
   reparte en tres sitios y ninguno compite con la joya: las fotos, el acento de
   marca del negocio (píldora activa, botón flotante, cintillos) y el verde de
   WhatsApp, reservado a la única acción que cierra la venta.

   Estas piezas son plata y baño de oro rosa, fotografiadas por la marca sobre
   fondo blanco: una interfaz saturada —y sobre todo el morado de RoIAL— apaga el
   metal. Pero la primera versión se pasó de frenada y quedó **en blanco y
   negro**; el acento vuelve a poner color, y encima es el suyo, no el nuestro.

   El papel es un gris levemente cálido, ni clínico ni crema: la crema amarillea
   la plata, y el gris puro dejaba la página sin temperatura. Es el gris del
   fondo de estudio sobre el que ya están tomadas las fotos, así que la foto
   blanca se apoya encima como una lámina en vez de flotar sin borde.

   ## De dónde sale el color

   El vertical decide la FORMA; el negocio decide el COLOR. Los seis tokens de
   acento los sobrescribe el servidor con la paleta derivada del
   `preferredThemeId` del negocio — ver `catalog-palette.ts`. Lo que hay aquí es
   el respaldo: bronce rosado, que es el baño de oro rosa que la marca vende.

   ## La firma: el código de la pieza

   Estas distribuidoras y sus clientas **hablan en números**: "la 726", "la
   familia 425". El código no es metadato aquí, es el vocabulario. Por eso se
   compone como número de lote de casa de subastas —mono, versalitas, tracking
   ancho, encima del nombre— y no escondido en una esquina.

   ## Tipografía

   Bodoni Moda para los titulares: es un didone de contraste alto, la letra que
   se graba en placas y estuches de joyería. Inter para la interfaz, que tiene
   que desaparecer. IBM Plex Mono para los códigos y las cifras, que es lo que
   convierte un SKU en una referencia de catálogo.

   ⚠️ Bodoni se usa **sólo en tamaños grandes**: sus remates finos desaparecen
   por debajo de ~15 px en una pantalla de gama media.

   🔁 Al tocar este archivo sube `PUBLIC_CATALOG_ASSET_VERSION`.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-catalog-theme='jewelry'] {
  /* Papel de estudio con una pizca de calidez.
     Ni el gris clínico de la primera versión —que dejaba la página en blanco y
     negro— ni una crema, que amarillea la plata. Es el gris cálido del fondo de
     estudio: la foto blanca se apoya encima como una lámina.
     ⚠️ Este valor está declarado también en `catalog-theme.registry.ts`
     (`surface`), porque la paleta del negocio se deriva contra él. Van juntos. */
  --surface: #f1eeec;
  --surface-raised: #ffffff;
  --surface-sunken: #f7f4f2;

  --ink: #15171b;
  --ink-soft: #575b62;
  /* Más oscuro que el gris "decorativo" que pedía el ojo: sobre este papel,
     un #8E9299 daba 2.6:1 y el código de la pieza —que es la información con la
     que la clienta pide— no puede ser el texto menos legible de la página. */
  --ink-faint: #767b83;
  --line: rgba(21, 23, 27, 0.13);

  /* ── Acento ─────────────────────────────────────────────────────────────
     Bronce rosado: es el baño de oro rosa que la marca realmente vende, así
     que el color sale de la mercancía y no de una decisión de interfaz. Con la
     tinta pura de la primera versión la página quedaba en blanco y negro.

     🔁 **El servidor SOBRESCRIBE estos seis valores** con la paleta del negocio
     (`preferredThemeId` → `catalog-palette.ts`), que llega en un `<style>`
     posterior con la misma especificidad. Lo de aquí es el respaldo para una
     vitrina sin preferencia y para previsualizar la hoja fuera de la app. */
  --accent: #a8705f;
  --accent-strong: #8a5748;
  --accent-contrast: #ffffff;
  --accent-ink: #8a5748;
  --accent-glow: rgba(168, 112, 95, 0.28);
  --accent-tint: #eee2dc;

  /* El precio en tinta, no en verde: verde lee "descuento de e-commerce". */
  --price: #15171b;
  --action: #128c4a;
  --action-strong: #0e7038;
  --action-contrast: #ffffff;

  /* Papel liso. Los degradados de color eran justo lo que ensuciaba el metal. */
  --page-wash: var(--surface);

  --font-display: 'Bodoni Moda', 'Times New Roman', Times, serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* El nombre de la pieza en serif, peso normal. Un nombre en 600 grita tanto
     como el precio y la foto: en una vitrina sólo puede gritar la foto. */
  --name-size: 15px;
  --name-weight: 400;
  --name-tracking: 0.005em;
  --name-transform: none;

  /* Bodoni a 36 px y en 600: a 21 px en 400 sus remates se perdían y el
     nombre del negocio era lo que peor se leía de la página (2026-10-07).
     El peso no basta solo: ver el corte óptico fijo en `body`, abajo. */
  --shop-name-size: 36px;
  --shop-name-weight: 600;
  --shop-name-tracking: 0.01em;
  --shop-logo-size: 76px;

  /* Sin tarjeta. La foto se apoya en el papel; el cromo (sombra + borde +
     radio + botón relleno) era lo que hacía que cada pieza pareciera un widget
     y no una joya. */
  --card-bg: transparent;
  --card-radius: 0;
  --card-border: none;
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-lift: 0;
  --card-body-padding: 12px 8px 0;

  /* Vertical: la joyería se fotografía y se mira de arriba abajo. */
  --media-aspect: 4 / 5;
  --media-bg: #ffffff;
  /* Láminas sin esquinas: pegadas una a otra, cualquier radio deja picos de
     papel entre fotos y la rejilla se lee como mosaico de widgets. */
  --media-radius: 0;

  /* La firma: el código como número de lote. Va en tinta media, no en el gris
     más claro — es el nombre con el que la clienta pide la pieza. */
  --code-size: 10px;
  --code-tracking: 0.22em;
  --code-color: var(--ink-soft);

  /* Blanco, vía token y NO con una regla que pise `.pill`.
     🔴 Una regla general `[data-catalog-theme] .pill { background: #fff }` tiene
     la misma especificidad que `.pill.is-active` de la base y se carga después,
     así que ganaba: la píldora marcada salía blanca sobre blanco, ilegible. Los
     tokens no compiten entre selectores — por eso el tema vive en tokens. */
  --control-bg: var(--surface-raised);
  --control-radius: 999px;
  --control-shadow: none;
  --btn-radius: 999px;
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: 1px solid var(--ink);
  --btn-shadow: none;
  --panel-radius: 4px;

  /* Las fotos casi se tocan de lado (3 px) y respiran hacia abajo, donde va
     el pie de cada pieza. Con 20 px por lado las fotos eran estampas chicas
     sobre mucho papel; así ocupan el ancho y la joya se ve del tamaño de la
     pantalla (2026-10-07). Fila · columna. */
  --grid-gap: 26px 3px;
  --grid-gap-wide: 40px 6px;

  --page-max: 1240px;
}

/* ── Corte óptico fijo de Bodoni ─────────────────────────────────────────
   Bodoni Moda es variable en tamaño óptico (opsz 6–96) y el navegador lo
   ajusta solo al tamaño de la letra: a 36 px escoge el corte de "display",
   donde los trazos finos son hilos. En el nombre del negocio la N se reducía
   a su diagonal —los dos palos verticales desaparecían— (reporte del dueño,
   2026-10-07). Fijamos el corte de texto (opsz 11) en toda la página: trazos
   finos con cuerpo, sigue siendo un didone. Las demás familias (Inter, Plex
   Mono) no tienen eje opsz y lo ignoran. */
[data-catalog-theme='jewelry'] body {
  font-variation-settings: 'opsz' 11;
}

/* ── Franja de plataforma ───────────────────────────────────────────────────
   Se mantiene visible y clicable (RULES L15), pero en tinta: un degradado
   morado sobre una página acromática es lo primero que ve el ojo, y lo primero
   tiene que ser la joyería de la vendedora. */
[data-catalog-theme='jewelry'] .platform-strip {
  background: var(--ink);
}
[data-catalog-theme='jewelry'] .platform-strip span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Portada ────────────────────────────────────────────────────────────────
   La firma de la casa: el logo como un SELLO —doble aro, el de fuera en el
   color de la marca— sobre el nombre en Bodoni grande. Una regla corta sobre
   "Catálogo" separa la casa de la mercancía, como en una tarjeta grabada.
   Debajo, las redes en versalitas: a un toque, sin logos ajenos. */
[data-catalog-theme='jewelry'] .shop-header {
  padding: 30px 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

[data-catalog-theme='jewelry'] .shop-header__inner {
  gap: 14px;
}

[data-catalog-theme='jewelry'] .shop-header__logo {
  border-radius: 50%;
  border: none;
  background: var(--surface-raised);
  box-shadow:
    0 0 0 1px var(--line),
    0 0 0 5px var(--surface),
    0 0 0 6px var(--accent);
}

[data-catalog-theme='jewelry'] .shop-header__logo--fallback {
  background: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
}

[data-catalog-theme='jewelry'] .shop-header__kicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
}
[data-catalog-theme='jewelry'] .shop-header__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

[data-catalog-theme='jewelry'] .shop-header__social {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 768px) {
  [data-catalog-theme='jewelry'] .shop-header {
    padding: 44px 24px 32px;
  }
  :root[data-catalog-theme='jewelry'] {
    --shop-name-size: 46px;
    --shop-logo-size: 88px;
  }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

[data-catalog-theme='jewelry'] .sidebar__title,
[data-catalog-theme='jewelry'] .filters__group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-catalog-theme='jewelry'] .sidebar__title {
  color: var(--ink);
}

[data-catalog-theme='jewelry'] .filters__clear {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Controles ──────────────────────────────────────────────────────────── */

[data-catalog-theme='jewelry'] .filters__toggle,
[data-catalog-theme='jewelry'] .sort__select,
[data-catalog-theme='jewelry'] .pill {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-catalog-theme='jewelry'] .filters__panel {
  border: 1px solid var(--line);
  box-shadow: none;
}

[data-catalog-theme='jewelry'] .pill.is-active {
  box-shadow: none;
}

[data-catalog-theme='jewelry'] .filters__badge {
  border-radius: 2px;
}

/* ── Pieza ──────────────────────────────────────────────────────────────── */

/* Sin sombra ni levantamiento: la foto se acerca un punto y nada más. Es el
   único movimiento de la retícula y sólo existe donde hay puntero. */
[data-catalog-theme='jewelry'] .card__media img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  [data-catalog-theme='jewelry'] .card:hover .card__media img {
    transform: scale(1.035);
  }
}

/* La firma: número de lote. */
[data-catalog-theme='jewelry'] .card__code {
  text-transform: uppercase;
}

/* La rejilla a sangre en teléfono: las fotos llegan al borde de la pantalla.
   El resto de la página conserva su margen; sólo la rejilla lo rompe. */
@media (max-width: 559px) {
  [data-catalog-theme='jewelry'] .grid {
    margin-inline: -16px;
  }
}

/* El pie de la pieza, centrado bajo la lámina: el número de lote arriba
   ("Nº 726", mono) y el precio debajo en Bodoni. Apilado y no "726 · $389" en
   una línea: centrado bajo una foto ancha se lee como la cartela de una pieza
   en exhibición, que es lo que es. */
[data-catalog-theme='jewelry'] .card__body {
  align-items: center;
  text-align: center;
}
[data-catalog-theme='jewelry'] .card__meta {
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  max-width: 100%;
}
[data-catalog-theme='jewelry'] .card__meta > * + *::before {
  content: none;
}
[data-catalog-theme='jewelry'] .card__meta .card__code {
  max-width: 100%;
  font-size: 10.5px;
}
[data-catalog-theme='jewelry'] .card__meta .card__code::before {
  content: 'Nº\00a0';
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

/* El precio en Bodoni a 17 px: es el tamaño mínimo en que sus remates finos
   aguantan, y es la línea que la clienta lee después de la foto. */
[data-catalog-theme='jewelry'] .card__price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

[data-catalog-theme='jewelry'] .card__price--empty {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Pieza en el pedido: el momento "fancy" (2026-10-01) ────────────────────
   Feedback del dueño: a las distribuidoras de NICE les gusta lo fancy. La
   página sigue callada —la joya manda—, pero el momento en que una pieza entra
   al pedido es de la clienta y puede brillar: foto con esquinas suaves, aro en
   oro rosa, contador como una gema y botones de cristal. */
[data-catalog-theme='jewelry'] .card__media {
  transition: box-shadow 0.3s ease;
}
[data-catalog-theme='jewelry'] .card.is-in-cart .card__media {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 14px 30px -12px var(--accent-glow);
}

/* El contador: una gema de oro rosa con un reflejo arriba. */
[data-catalog-theme='jewelry'] .card__qty {
  min-width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-contrast);
  background:
    radial-gradient(120% 80% at 30% 15%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(140deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow:
    0 6px 16px var(--accent-glow),
    inset 0 -1px 2px rgba(0, 0, 0, 0.18);
}

/* Los botones se quedan sólidos (rojo y tinta, borde blanco) también aquí:
   el cristal translúcido de la primera versión no se leía como botón sobre la
   foto (2026-10-01). Solo la "i" toma la serif de la casa. */
[data-catalog-theme='jewelry'] .card__ctl--info {
  font-size: 19px;
  font-weight: 500;
}

/* El destello un poco más cálido: luz sobre oro rosa, no blanco de pantalla. */
[data-catalog-theme='jewelry'] .card__media::after {
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 244, 236, 0.85) 47%,
    rgba(255, 255, 255, 0.95) 50%,
    transparent 68%
  );
}

[data-catalog-theme='jewelry'] .grid-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

[data-catalog-theme='jewelry'] .btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 14px;
}
/* Sólo el botón de contorno se rellena al pasar por encima.
   🔴 Las exclusiones no son cosméticas: un selector con atributo sube a 0-3-0 y
   le gana a `.btn--whatsapp:hover` (0-2-0) de la base, así que sin ellas el
   botón de "Enviar pedido" se ponía NEGRO al pasar el ratón — el único botón
   que nunca debe cambiar de color, porque su verde ES la señal de WhatsApp. */
[data-catalog-theme='jewelry']
  .btn:hover:not(.btn--whatsapp):not(.btn--ghost):not(.is-done) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

[data-catalog-theme='jewelry'] .btn--whatsapp {
  border-color: transparent;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  padding: 15px 16px;
}

[data-catalog-theme='jewelry'] .btn--ghost {
  border-color: transparent;
}
[data-catalog-theme='jewelry'] .btn--ghost:hover {
  background: transparent;
}

/* ── Carrito ────────────────────────────────────────────────────────────── */

[data-catalog-theme='jewelry'] .cart-fab {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 10px 28px var(--accent-glow);
}

[data-catalog-theme='jewelry'] .cart-fab__count {
  background: var(--action);
  border-radius: 999px;
}

[data-catalog-theme='jewelry'] .drawer,
[data-catalog-theme='jewelry'] .modal {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

[data-catalog-theme='jewelry'] .cart-line {
  border-radius: 2px;
  background: var(--surface-sunken);
}

[data-catalog-theme='jewelry'] .qty-btn {
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--surface-raised);
}

[data-catalog-theme='jewelry'] .cart-total__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Ficha ──────────────────────────────────────────────────────────────── */

[data-catalog-theme='jewelry'] .modal__name {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.18;
}

/* El código, otra vez como número de lote — aquí con una regla debajo, que es
   lo que lo convierte en encabezado de ficha y no en un dato suelto. */
[data-catalog-theme='jewelry'] .modal__code {
  display: inline-block;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent-ink);
  letter-spacing: 0.28em;
  color: var(--accent-ink);
}

[data-catalog-theme='jewelry'] .modal__price {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 12px;
}

[data-catalog-theme='jewelry'] .qty-stepper {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
}

[data-catalog-theme='jewelry'] .gallery__nav,
[data-catalog-theme='jewelry'] .gallery__close {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-catalog-theme='jewelry'] .gallery__nav:hover {
  background: #fff;
}

[data-catalog-theme='jewelry'] .gallery__dots span {
  width: 5px;
  height: 5px;
  background: rgba(21, 23, 27, 0.22);
}
[data-catalog-theme='jewelry'] .gallery__dots span.is-active {
  background: var(--ink);
}

/* ── Estados ────────────────────────────────────────────────────────────── */

[data-catalog-theme='jewelry'] .state__title {
  font-size: 22px;
  font-weight: 400;
}

[data-catalog-theme='jewelry'] .spinner {
  border-color: var(--line);
  border-top-color: var(--ink);
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

/* El pie es de RoIAL y conserva su morado a propósito: separa "la tienda" de
   "la plataforma", y es la mitad inferior del bucle de crecimiento. */
[data-catalog-theme='jewelry'] .shop-footer {
  background: none;
  border-top: 1px solid var(--line);
}

[data-catalog-theme='jewelry'] .shop-footer__mascot {
  box-shadow: none;
}