/* ---------- Reset & tokens ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; border: 0; background: transparent; outline: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* ---------- Tokens ---------- */
:root {
  --ink: #0E1525;
  --ink-soft: #37495C;
  --muted: #8294A6;
  --bg: #FFFFFF;
  --bg-card: #FAF8F4;
  --line: #E8E8E8;
  --line-strong: #C8CFD6;
  --accent: #FF4F6E;
  --accent-soft: #FFE4E8;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Smooth decel for premium slides/reveals + spring for tactile pops */
  --ease-decel: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-lg: 0 12px 24px -8px rgba(14, 21, 37, 0.12);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 21, 37, 0.45);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.modal-card {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 288px;
  margin: 0 auto;
  background: #FFF;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.96);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 180ms var(--ease), transform 300ms var(--ease-spring);
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.modal-options li { transition: background-color 160ms var(--ease), transform 140ms var(--ease); }
.modal-options li:active:not(.modal-title) { transform: scale(0.98); }
.modal-card .modal-title {
  color: #37495C;
  font-size: 15px;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}
.modal-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-options li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 15px;
  color: #37495C;
  cursor: pointer;
  transition: background-color 160ms var(--ease);
  font-variant-numeric: tabular-nums;
}
.modal-options li:hover { background: rgba(14, 21, 37, 0.04); }
.modal-options li.is-active {
  background: #37495C;
  color: #fff;
}
.modal-options li.is-active span:last-child { color: rgba(255, 255, 255, 0.7); }

@font-face {
  font-family: "Avenir Next";
  src: url("assets/AvenirNextCyr-Regular.woff2") format("woff2"),
       url("assets/AvenirNextCyr-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("assets/AvenirNextCyr-Medium.woff2") format("woff2"),
       url("assets/AvenirNextCyr-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
h1 {
  leading-trim: both;
  text-edge: cap;
  font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
h2 {
  leading-trim: both;
  text-edge: cap;
  font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
h3 {
  leading-trim: both;
  text-edge: cap;
  font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
h4 {
  leading-trim: both;
  text-edge: cap;
  font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: #37495C;
  background: #f0f0f0;
  width: auto;
  height: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top:40px;
}

/* ---------- Screen (320×568 artboard) ---------- */
.screen {
  background: #fff;
  width: 100%;
  max-width: 320px;
  height: 568px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: 12px;
}
.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 0;
  background: none;
  border: 0;
}
.search-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.cart {
  height: 32px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  background: #F0F2F5;
  border-radius: 16px;
}

/* ---------- Product (stage + info) ---------- */
.product {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 34px;
  align-self: stretch;
}

/* ---------- Stage (product image) ---------- */
.stage {
  align-self: stretch;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image {
  width: 100%;
  height: auto;
  max-height: 248px;
  object-fit: contain;
}

/* ---------- Info (meta + actions) ---------- */
.info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
  align-self: stretch;
}
.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.brand {
  color: #8294A6;
}

/* ---------- Action buttons (favorite / share) ---------- */
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.favorite {
  display: flex;
  height: 32px;
  padding: 8px 16px;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  background: linear-gradient(0deg, rgba(233, 62, 82, 0.08) 0%, rgba(233, 62, 82, 0.08) 100%), #FFF;
  flex: 0 0 auto;
  color: #E93E52;
  cursor: pointer;
  transition: transform 220ms var(--ease-press), background-color 200ms var(--ease);
}
.favorite:hover { transform: translateY(-2px); }
.favorite:active { transform: translateY(0) scale(0.96); transition: transform 120ms var(--ease); }
.favorite svg {
  transform-origin: center;
  transform-box: fill-box;
}
.favorite svg path {
  fill: none;
  stroke: #E93E52;
  stroke-width: 1;
  transition: fill 200ms var(--ease), stroke 200ms var(--ease);
}
.favorite[aria-pressed="true"] svg path {
  fill: #E93E52;
  stroke: none;
}
.share {
  display: flex;
  height: 32px;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: #F5F7FA;
  color: var(--ink-soft);
  flex: 0 0 auto;
  transition: transform 220ms var(--ease-press), background-color 200ms var(--ease);
}
.share:hover { transform: translateY(-2px); background: #EEF1F5; }
.share:active { transform: translateY(0) scale(0.96); transition: transform 120ms var(--ease); }
.cart { transition: transform 220ms var(--ease-press), background-color 200ms var(--ease); }
.cart:hover { background: #E6E9EE; }
.cart:active { transform: scale(0.96); transition: transform 120ms var(--ease); }
.back:active { transform: scale(0.92); transition: transform 120ms var(--ease); }

/* ---------- Buying (weight + add) ---------- */
.buying {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  margin-top: auto;
}
.weight-trigger {
  display: flex;
  flex: 1;
  height: 48px;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #FFF;
  color: #37495C;
  cursor: pointer;
}
.weight-trigger {
  transition: transform 220ms var(--ease-press), border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.weight-trigger:hover { border-color: var(--line-strong); }
.weight-trigger:active { transform: scale(0.97); transition: transform 120ms var(--ease); }
.weight-trigger svg { transition: transform 320ms var(--ease-spring); }
.weight-trigger.is-open svg { transform: rotate(180deg); }
.add {
  display: flex;
  height: 48px;
  padding: 0 16px;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  border-radius: 8px;
  background: #37495C;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: background-color 200ms var(--ease), transform 220ms var(--ease-press);
}
.add:hover { background: #2a3744; transform: translateY(-2px); }
.add:active { transform: translateY(0) scale(0.97); transition: transform 120ms var(--ease); }
/* Confirming "Add" — a quick spring pulse rewards the tap */
@keyframes add-pulse {
  0%   { transform: scale(1); }
  38%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.add.is-pulse { animation: add-pulse 360ms var(--ease-spring); }
@media (prefers-reduced-motion: reduce) {
  .add.is-pulse { animation: none !important; }
}

/* ═════════════════  CASCADE ENTRY  ═════════════════ */
@keyframes cascade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cascade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cascade-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cascade-scale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cascade-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Topbar */
.search       { animation: cascade-down 0.55s var(--ease-out) 0.05s both; }
.cart         { animation: cascade-down 0.55s var(--ease-out) 0.13s both; }

/* Product — image is the visual hero, gets a gentle spring */
.stage        { animation: cascade-scale 0.85s var(--ease-spring) 0.25s both; }

/* Info — brand is secondary (fade), title rises */
.brand        { animation: cascade-fade 0.45s var(--ease-out) 0.50s both; }
.meta h1      { animation: cascade-up    0.55s var(--ease-out) 0.60s both; }

/* Actions — paired rise */
.favorite     { animation: cascade-up    0.50s var(--ease-out) 0.78s both; }
.share        { animation: cascade-up    0.50s var(--ease-out) 0.86s both; }

/* Buying — CTA gets the final emphasis */
.weight-trigger { animation: cascade-rise 0.60s var(--ease-out)    1.05s both; }
.add            { animation: cascade-rise 0.65s var(--ease-spring) 1.15s both; }

@media (prefers-reduced-motion: reduce) {
  .search, .cart, .stage, .brand, .meta h1,
  .favorite, .share, .weight-trigger, .add {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═════════════════  NUMBER POP-IN  ═════════════════ */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* `.screen { display:flex }` (above) outranks the UA `[hidden]` rule, so
   without this an inactive screen would stay rendered. Make hidden win. */
.screen[hidden] { display: none !important; }

/* ═════════════════  CATALOG SCREEN (strain grid)  ═════════════════
   Pantalla previa: un grid minimal de los tres tipos de cepa. Mismo
   lenguaje que el detalle (Avenir, navy, radios), tarjetas grandes
   con un motivo de chevrons que anticipa la dirección del fondo. */
/* El catálogo es la pantalla que SCROLLEA; su cabecera queda STICKY arriba y
   el grid pasa por DETRÁS de ella (translúcida + blur). Sin padding propio: el
   grid es full-bleed y la cabecera lleva su propio padding. */
.screen--catalog {
  gap: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.cat-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: stretch;
  padding: 13px 16px;
  /* Fondo 80% translúcido + backdrop-blur: el contenido se ve pasar por detrás
     al hacer scroll y la cabecera queda bien integrada. */
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.cat-head__brand { display: flex; align-items: center; min-width: 0; }
.cat-head__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* El buscador en la cabecera es solo el icono (sin el placeholder "Search..."). */
.cat-head__actions .search-icon {
  width: 32px; height: 32px; border-radius: 16px; background: #F0F2F5;
  transition: transform 220ms var(--ease-press), background-color 200ms var(--ease);
}
.cat-head__actions .search-icon:hover { background: #E6E9EE; }
.cat-head__actions .search-icon:active { transform: scale(0.94); transition: transform 120ms var(--ease); }

/* Grid de fichas con FOTO de la flor; scroll si no cabe en el artboard. */
.strain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 132px;  /* alto fijo de fila: con 17 cepas el grid supera el
                             alto del artboard y SCROLLEA bajo la cabecera */
  gap: 0;                 /* sin huecos: las hairlines hacen de rejilla */
  width: 100%;
  margin: 0;
  /* el grid pasa por detrás de la cabecera sticky al hacer scroll */
}
/* Rejilla divisoria: hairlines entre celdas (no tarjetas). */
.strain-grid li { display: flex; border-bottom: 1px solid var(--line); }
.strain-grid li:nth-child(odd) { border-right: 1px solid var(--line); }
.strain-grid li:nth-last-child(-n+2) { border-bottom: 0; }

/* Ficha LIMPIA: sin forma de tarjeta ni fondo; solo el grid divisorio
   (hairlines) la separa de las vecinas. */
.strain {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 10px 14px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: transform 220ms var(--ease-press), opacity 200ms var(--ease);
}
.strain:hover { opacity: 0.82; transform: translateY(-2px); }
.strain:active {
  opacity: 1;
  transform: translateY(0) scale(0.96);
  transition: transform 120ms var(--ease), opacity 120ms var(--ease);
}
/* Photo gives a touch of lift/zoom on hover for a tactile, premium feel */
.strain__photo img { transition: transform 320ms var(--ease-decel); }
.strain:hover .strain__photo img { transform: scale(1.05); }
.strain:active .strain__photo img { transform: scale(0.98); transition: transform 120ms var(--ease); }

/* Foto de la flor SIN doble fondo crema: directa sobre la página. */
.strain__photo {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; border-radius: 0; overflow: visible;
  background: transparent;
}
.strain__photo img { width: 84%; height: 84%; object-fit: contain; }
/* Foto en color real (sin hue-rotate): la variedad la da un wash suave por
   tipo detrás del bud, además del tag de color y el chevron ↑→↓. */
.strain[data-strain="sativa"] .strain__photo { background: radial-gradient(circle at 50% 44%, #FFF3DC 0%, rgba(255,243,220,0) 68%); }
.strain[data-strain="hybrid"] .strain__photo { background: radial-gradient(circle at 50% 44%, #E8F3E8 0%, rgba(232,243,232,0) 68%); }
.strain[data-strain="indica"] .strain__photo { background: radial-gradient(circle at 50% 44%, #F1EAF9 0%, rgba(241,234,249,0) 68%); }

/* Chevron de dirección — badge pequeño en la esquina de la foto. */
.strain__dir {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 20px; height: 20px; display: grid; place-items: center;
  background: rgba(255,255,255,0.82); border-radius: 6px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.strain__dir svg { width: 13px; height: 13px; overflow: visible; }

.strain__meta { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
/* Tipo de cepa (Sativa/Hybrid/Indica) sobre el nombre: rótulo pequeño,
   en mayúsculas y discreto, mismo vocabulario que .strain__stat-k. */
.strain__type { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.strain__name { font-size: 13.5px; font-weight: 500; line-height: 1.15; color: var(--ink-soft); }
.strain__vibe { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.strain__tag { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 999px; letter-spacing: 0.02em; }
.strain__tag--sativa { background: #FFF0D6; color: #9A6B00; }
.strain__tag--hybrid { background: #E2F0E2; color: #1D6128; }
.strain__tag--indica { background: #ECE4F6; color: #5B3E91; }

/* THC / CBD en la tarjeta: misma fila, número arriba y etiqueta debajo,
   bien separados por el grid de dos columnas. Orden THC → CBD. */
.strain__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.strain__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.strain__stat + .strain__stat { border-left: 1px solid var(--line); padding-left: 8px; }
.strain__stat-v { font-size: 13px; font-weight: 500; color: var(--ink-soft); line-height: 1.1; font-variant-numeric: tabular-nums; }
.strain__stat-k { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Logo de marca REAL (Rive · assets/briteside/logo.riv). */
.brand-rive { display: block; width: 132px; height: 30px; }
/* Fallback de texto si Rive no carga. */
.brand-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); }
.brand-logo[hidden] { display: none; }
.brand-logo__star { color: #1D6128; font-size: 14px; }
.brand-logo__leaf { display: block; flex: none; }

/* ═════════════════  DETAIL · about + info (THC / CBD)  ════════════ */
.about { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Potencia: THC y CBD en la MISMA FILA, bien separados por el grid. Cada uno
   es un stat con el porcentaje (más grande) arriba y la etiqueta debajo.
   El orden del DOM ya es THC → CBD. */
.specs {
  align-self: stretch; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* divide la fila limpiamente en dos */
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.spec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.spec + .spec { border-left: 1px solid var(--line); padding-left: 14px; }
/* THC/CBD con el MISMO estilo, tamaño y gris que el texto descriptivo (.about):
   no destacan en grande/oscuro, leen como una línea más de info. */
.spec__v { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.45; font-variant-numeric: tabular-nums; }
.spec__k { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }
.spec { flex-direction: row; align-items: baseline; gap: 6px; }

/* Detalle más compacto para encajar THC/CBD + descripción en el artboard */
#detail .product { gap: 16px; }
#detail .product-image { max-height: 150px; }
#detail .info { gap: 14px; }
.about { animation: cascade-fade 0.5s var(--ease-out) 0.66s both; }
.specs { animation: cascade-up 0.5s var(--ease-out) 0.74s both; }
@media (prefers-reduced-motion: reduce) {
  .specs, .about { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Catalog entry cascade (mirrors the detail's choreography) */
.screen--catalog .brand   { animation: cascade-fade 0.45s var(--ease-out) 0.04s both; }
.screen--catalog .cat-head h1 { animation: cascade-up 0.55s var(--ease-out) 0.10s both; }
.strain-grid li:nth-child(1) .strain { animation: cascade-up 0.55s var(--ease-out) 0.20s both; }
.strain-grid li:nth-child(2) .strain { animation: cascade-up 0.55s var(--ease-out) 0.27s both; }
.strain-grid li:nth-child(3) .strain { animation: cascade-up 0.55s var(--ease-out) 0.34s both; }
.strain-grid li:nth-child(4) .strain { animation: cascade-up 0.55s var(--ease-out) 0.41s both; }
.strain-grid li:nth-child(5) .strain { animation: cascade-up 0.55s var(--ease-out) 0.48s both; }
.strain-grid li:nth-child(6) .strain { animation: cascade-up 0.55s var(--ease-out) 0.55s both; }

/* ═════════════════  DETAIL como MODAL (~2/3 sobre el catálogo)  ═════════════
   El catálogo (fondo blanco + cabecera) permanece DETRÁS; el detalle aparece
   como una tarjeta centrada a ~2/3 del tamaño, con velo y muelle de entrada. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 18px;
}
.sheet[hidden] { display: none !important; }
.sheet__backdrop {
  position: absolute;
  inset: 0;
  /* Velo CLARO: mantiene el fondo/UI blanco del catálogo visible (no lo oscurece);
     solo lo escarcha sutilmente para enfocar el modal, que resalta por su sombra. */
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  backdrop-filter: blur(3px) saturate(1.05);
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__card {
  position: relative;
  z-index: 1;
  width: min(80%, 244px);     /* ~2/3 del ancho del artboard (320) */
  max-height: 80%;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 26px 64px -14px rgba(14, 21, 37, 0.45);
  padding: 12px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transform-origin: 50% 50%;
  transition: opacity 200ms var(--ease), transform 380ms var(--ease-spring);
}
.sheet__card::-webkit-scrollbar { display: none; }
.sheet.is-open .sheet__card { opacity: 1; transform: translateY(0) scale(1); }
.sheet__top { display: flex; justify-content: flex-end; align-self: stretch; }
/* En el modal el detalle ya no necesita el margin-top:auto del .buying. */
.sheet .buying { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .sheet__backdrop, .sheet__card { transition: none !important; }
  .sheet__card { opacity: 1; transform: none; }
}

/* ═════════════════  BACK BUTTON (detail topbar)  ═════════════════ */
.back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #F0F2F5;
  color: var(--ink-soft);
  transition: background-color 160ms var(--ease);
  animation: cascade-down 0.55s var(--ease-out) 0.02s both;
}
.back:hover { background: #E6E9EE; }
.back svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .screen--catalog .brand,
  .screen--catalog .cat-head h1,
  .strain-grid .strain,
  .back {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}