/* =====================================================================
   3x0t1k -- tienda y ficha del coral.
   Solo tokens de app.css. Sin blur(): la profundidad se hace con
   radial-gradient para no congelar iPhones.
   ===================================================================== */

/* ------------------------------------------------------------ cabecera */
/* El arranque (--sp-5) es el mismo que el de toda pagina con migas: la tienda
   abria 11px mas abajo que el contenido y el salto se notaba al navegar. */
.shop-hero { padding-block: var(--sp-5) clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }
.shop-h1 { color: var(--ink); }
.shop-h1::after {
  content: ''; display: block; width: 72px; height: 3px; margin-top: .55rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent, var(--cyan)), transparent);
}

/* ------------------------------------------------------------ rejilla */
.shop-layout { display: block; padding-bottom: clamp(3rem, 8vw, 6rem); }
.shop-main { min-width: 0; }

/* ------------------------------------------------------------ barra */
.shop-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft);
}
.shop-filter-btn { gap: .5em; }
.shop-sort { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.shop-sort .label { margin-bottom: 0; white-space: nowrap; }
.shop-sort .select { width: auto; min-width: 11.5rem; padding-block: .55em; }

/* ------------------------------------------------------------ resultados */
.shop-summary { margin-bottom: var(--sp-3); }
.shop-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--sp-2); }
.shop-chips .chip { text-decoration: none; }
.shop-chip-clear { background: transparent; color: var(--ink-3); border-style: dashed; }
/* Solo el comportamiento. Lo visual de la espera lo declara motion.css en un
   unico sitio: aqui vivia un segundo apagado (.45) que decia lo mismo con
   otro numero y resucitaba si se quitaba la capa de movimiento. */
.shop-results[aria-busy="true"] { pointer-events: none; }

/* ------------------------------------------------------------ filtros
   Movil: hoja que sube desde abajo, con el mismo backdrop del cajon.
   Escritorio: columna lateral pegajosa. */
.shop-filters {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 121;
  display: flex; flex-direction: column;
  max-height: 86dvh;
  background: var(--abyss);
  border-top: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-3);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.shop-filters.is-open { transform: none; }
.sf-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none;
}
.sf-head::before {
  content: ''; position: absolute; top: .5rem; left: 50%; translate: -50% 0;
  width: 42px; height: 4px; border-radius: 2px; background: var(--surface-3);
}
.sf-body { overflow-y: auto; padding: 1.25rem; flex: 1; }
.sf-foot {
  display: flex; gap: .6rem; align-items: center;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface); flex: none;
}

.sf-group { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.sf-group .label { margin-bottom: .6em; }
.sf-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-chips .chip { text-decoration: none; }

.sf-search { position: relative; display: flex; align-items: center; }
.sf-search svg { position: absolute; left: .85rem; color: var(--ink-3); pointer-events: none; }
.sf-search .input { padding-left: 2.5rem; }

.sf-checks { display: flex; flex-direction: column; gap: .1rem; }
.sf-check {
  display: flex; align-items: center; gap: .65em;
  padding: .5em .55em; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sf-check:hover { background: rgba(255,255,255,.03); color: var(--ink); }
.sf-check input {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex: none; margin: 0;
  border: 1px solid var(--line); border-radius: 5px; background: var(--void);
  display: grid; place-content: center; cursor: pointer;
  transition: all .2s var(--ease);
}
.sf-check input::after {
  content: ''; width: 9px; height: 9px; border-radius: 2px; transform: scale(0);
  background: var(--void); transition: transform .18s var(--ease);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.sf-check input:checked { background: var(--cyan); border-color: var(--cyan); }
.sf-check input:checked::after { transform: scale(1); }
.sf-check input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sf-check:has(input:checked) { color: var(--ink); }

.sf-switch { margin-top: calc(var(--sp-2) * -1); padding-left: .55em; }

.sf-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.sf-price .input { padding-inline: .8em; }

@media (min-width: 900px) {
  .shop-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
  .shop-filters {
    /* OJO CON EL ORDEN: `inset: auto` iba DESPUES de `top` y le borraba el
       valor. Con top:auto un sticky no se pega nunca: la columna de filtros
       se iba con el scroll y acababa cortada por debajo de la cabecera.
       Medido: getComputedStyle(.shop-filters).top devolvia "auto". */
    inset: auto;
    position: sticky; top: calc(var(--stack-h) + 1rem);
    max-height: calc(100dvh - var(--stack-h) - 2rem);
    transform: none; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); box-shadow: none;
  }
  .sf-head::before { display: none; }
  .sf-x, .shop-filter-btn { display: none; }
  #filterBackdrop { display: none; }
}

/* =====================================================================
   Ficha del coral
   ===================================================================== */
.coral-wrap { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 6rem); }
.coral-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 940px) {
  .coral-layout { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); }
  .coral-buy-col { position: sticky; top: calc(var(--stack-h) + 1rem); }
}

/* ------------------------------------------------------------ galeria */
.gal { min-width: 0; }
.gal-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 50% 0%, var(--surface), var(--void) 70%);
}
.gal-slide { position: absolute; inset: 0; display: none; }
.gal-slide.is-active { display: block; }
.gal-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .45s var(--ease), transform .35s var(--ease);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
}
.gal-slide img[data-light="daylight"] { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .gal-stage.is-zooming img { transform: scale(2.1); transition: opacity .45s var(--ease); }
  .gal-zoom { position: absolute; right: .7rem; bottom: .7rem; z-index: 3; pointer-events: none; }
}
.gal-zoom {
  display: none; align-items: center; gap: .4em;
  padding: .4em .8em; border-radius: var(--r-full);
  background: rgba(4,7,12,.82); border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2);
}
@media (hover: hover) and (pointer: fine) { .gal-zoom { display: inline-flex; } }

.gal-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.gal-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.gal-thumbs button {
  flex: none; width: 68px; height: 68px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--void);
  cursor: pointer; transition: border-color .25s var(--ease), opacity .25s var(--ease);
  opacity: .62;
}
.gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumbs button:hover { opacity: .9; }
.gal-thumbs button[aria-current="true"] { border-color: var(--cyan); opacity: 1; }

/* ------------------------------------------------------------ identidad */
.coral-id .eyebrow { color: var(--ink-3); background: none; -webkit-text-fill-color: currentColor; animation: none; }
.coral-name { color: var(--ink); }
.coral-sci { font-style: italic; color: var(--ink-2); font-size: var(--fs-lg); }
.coral-meta { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-top: .9rem; }
.coral-facts { display: grid; gap: .55rem; margin-top: 1.1rem; font-size: var(--fs-sm); }
.coral-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .6rem; }
.coral-facts dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.coral-facts dd { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------ caja de compra */
.buy-box { padding: clamp(1.15rem, 2.6vw, 1.6rem); }
.buy-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.buy-price .price { font-size: var(--fs-3xl); }
.buy-note { display: flex; gap: .7em; align-items: flex-start; margin-top: 1rem; }
.buy-note svg { flex: none; margin-top: .15em; }
.buy-status { margin-top: 1rem; }

.wysiwyg-note {
  margin-top: 1rem; padding: .95rem 1.05rem;
  border: 1px solid rgba(74,140,255,.30); border-radius: var(--r-md);
  background: radial-gradient(120% 140% at 0% 0%, rgba(74,140,255,.10), transparent 70%);
}
.wysiwyg-note h3 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.wysiwyg-note p { margin-top: .5em; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ------------------------------------------------------------ cuidados */
.care-block { margin-top: clamp(2rem, 5vw, 3.5rem); }
.care-item .m-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: .35em; }

/* ------------------------------------------------------------ envio */
.ship-dates { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.ship-date {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .55em .9em; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--abyss);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2);
  white-space: nowrap;
}
.ship-date.is-next { border-color: var(--lime); color: var(--lime); }

/* ------------------------------------------------------------ relacionados */
.rel-block { margin-top: clamp(2.5rem, 7vw, 5rem); }

/* seguridad a 390px: un nombre de trade larguisimo no rompe la pagina */
.shop-h1, .coral-name, .coral-sci, .coral-facts dd { overflow-wrap: anywhere; }
/* ...pero el corte solo es el ultimo recurso. A 390px "JF Homewrecker Acropora"
   se partia a mitad de palabra ("Homewrecke / r Acropora"): bajando el cuerpo
   la palabra entra entera y el corte no llega a dispararse. */
@media (max-width: 560px) {
  .coral-name { font-size: clamp(1.5rem, 6.6vw, 2rem); }
}

/* enlaces dentro de texto corrido: se tienen que ver como enlaces */
.buy-note a, .coral-facts a, .wysiwyg-note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.buy-note a:hover, .coral-facts a:hover { color: var(--ink); }