/* ============================================================
   COLECCIÓN PAGE — Vency Atelier
   Ordering experience: browse, select format, pay & confirm
   ============================================================ */

/* === DECANT NAVIGATION LINK (replaces order button for 3-decant format) === */
.js-decant-link {
  display: none;
}
.js-decant-link.is-visible {
  display: inline-flex;
}
.js-order-btn.is-hidden {
  display: none;
}

/* === DELIVERY TOGGLE — inside order panels === */
.delivery-group {
  margin-bottom: var(--space-sm);
}
.delivery-group > .label {
  display: block;
  margin-bottom: 0.5rem;
}
.order-panel__methods.is-hidden,
.delivery-group.is-hidden {
  display: none;
}
.order-panel__pickup {
  display: none;
  padding: var(--space-sm) 0;
}
.order-panel__pickup.is-visible {
  display: block;
}

/* === PAGE HEADER === */
.col-header {
  padding: calc(var(--nav-h) + var(--space-xl)) var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.col-header__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.col-header__title {
  font-family: 'Bitter', serif;
  font-weight: 900;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.93;
  margin: 0.85rem 0 var(--space-md);
  letter-spacing: -0.01em;
}

.col-header__body {
  max-width: 58ch;
  font-size: var(--text-narrative);
  line-height: 1.7;
  opacity: 0.75;
}

/* Active nav state — current page */
.nav__link--active {
  color: var(--volcanic-ink);
  font-weight: 600;
}

/* ============================================================
   BOLDER PASS — Ordenar button wider padding site-wide
   ============================================================ */
.page-coleccion .btn--primary,
.page-coleccion .btn--inv {
  padding: 1.1rem 2.75rem;
  letter-spacing: 0.12em;
}

/* ============================================================
   SCROLL OFFSET — accounts for fixed nav height on anchors
   ============================================================ */
.col-header {
  scroll-margin-top: calc(var(--nav-h) + 0.5rem);
}

/* ============================================================
   DESKTOP — Two-column page header
   Label + title on left; body copy bottom-anchored on right.
   ============================================================ */
@media (min-width: 900px) {
  .col-header__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0 4rem;
  }

  .col-header__title {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
  }

  .col-header__body {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: none;
    padding-bottom: 0.5rem;
  }
}

@media (min-width: 1024px) {
  .col-header {
    padding: calc(var(--nav-h) + var(--space-lg)) var(--space-lg) var(--space-lg);
  }
}

/* ============================================================
   MOBILE POLISH — Collection page layout refinements
   ============================================================ */
@media (max-width: 767px) {
  .col-header {
    padding-top: calc(var(--nav-h) + var(--space-md));
    padding-bottom: var(--space-lg);
  }
}


/* === ENTRANCE — narrative entries reveal in waves (DESIGN.md: drying down in stages) ===
   Pre-state held only when motion is welcome; .is-in is added by the entry
   observer in coleccion.js as each entry enters the viewport. Image settles
   first, the copy follows ~120ms later. */
@media (prefers-reduced-motion: no-preference) {
  .catalog-entry__image,
  .catalog-entry__content {
    opacity: 0;
    transform: translateY(18px);
  }

  .catalog-entry.is-in .catalog-entry__image {
    opacity: 1;
    transform: none;
    transition:
      opacity   0.7s var(--ease-expo) var(--entry-delay, 0ms),
      transform 0.7s var(--ease-expo) var(--entry-delay, 0ms);
  }

  .catalog-entry.is-in .catalog-entry__content {
    opacity: 1;
    transform: none;
    transition:
      opacity   0.7s var(--ease-expo) calc(var(--entry-delay, 0ms) + 0.12s),
      transform 0.7s var(--ease-expo) calc(var(--entry-delay, 0ms) + 0.12s);
  }
}

/* ── Format selector modal ──────────────────────────────────────────
   Redesign: list-pattern (no boxed rows), restrained ochre accent on
   selection, intentional disabled state, deliberate spacing rhythm.
   Drops the previous "three identical card columns" anti-pattern in
   favor of a typographic hierarchy where the name proclaims and the
   options read as a quiet list of choices.
   ───────────────────────────────────────────────────────────────── */

.fmt-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: oklch(18% 0.01 60 / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-expo);
  padding: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fmt-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.fmt-overlay.is-open { opacity: 1; pointer-events: auto; }

@media (min-width: 700px) {
  .fmt-overlay { align-items: center; padding: var(--space-md); }
}

.fmt-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--botanical-parchment);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Asymmetric padding: more top air around the fragrance ID,
     less bottom around the action button. */
  padding: 2.25rem 1.75rem 1.25rem;
  transform: translateY(24px);
  transition: transform 0.4s var(--ease-expo);
  max-height: 92dvh;
  overflow-y: auto;
}
.fmt-overlay.is-open .fmt-modal { transform: translateY(0); }

@media (min-width: 700px) {
  .fmt-modal {
    border-radius: 2px;
    border-top: none;
    padding: 2.5rem 2rem 1.5rem;
    transform: translateY(0) scale(0.96);
  }
  .fmt-overlay.is-open .fmt-modal { transform: translateY(0) scale(1); }
}

/* Close button: bigger tap target, quieter chrome, sits inside the
   padding ring so it doesn't overlap the head. */
.fmt-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--volcanic-ink);
  transition: color 0.18s var(--ease-expo), background 0.18s var(--ease-expo);
  -webkit-tap-highlight-color: transparent;
}
.fmt-modal__close:hover {
  color: var(--volcanic-ink);
  background: color-mix(in oklch, var(--volcanic-ink) 6%, transparent);
}
.fmt-modal__close:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: 2px;
}

/* Header: bottle portrait on top, identity below.
   Wrap shrinks to the image's natural width — no grey side bars. */
.fmt-modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 0;
  margin-bottom: 1.25rem;
}
.fmt-modal__img-wrap {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: clamp(200px, 48vw, 280px);
  overflow: hidden;
  background: color-mix(in oklch, var(--atelier-stone) 28%, var(--botanical-parchment));
  border-radius: 0;
  margin-bottom: 1rem;
}
.fmt-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.18s ease-out;
  mix-blend-mode: multiply;
}
.fmt-modal__img-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--warm-ochre);
  color: var(--botanical-parchment);
  font-family: 'Manrope', sans-serif;
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.22rem 0.2rem;
  border-radius: 0;
  display: block;
}
/* display:block above overrides UA [hidden]{display:none} — re-enforce it */
.fmt-modal__img-badge[hidden] { display: none; }
.fmt-modal__head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: stretch;
}
.fmt-modal__name {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  line-height: 1.2;
  color: var(--volcanic-ink);
  letter-spacing: -0.01em;
  margin: 0;
  text-align: left;
}

/* History link: quiet editorial footnote below the name. Only shows
   for fragrances that have a story page. Manrope label voice, ochre,
   no underline by default — it reads as metadata, not a CTA. */
.fmt-modal__history {
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-ochre);
  text-decoration: none;
  transition: color 0.18s var(--ease-expo);
  margin-top: -0.25rem;
  white-space: nowrap;
}
.fmt-modal__history:hover {
  color: var(--warm-ochre-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fmt-modal__history:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Sourcing note: where the inspiration lives. Left-aligned, muted,
   reads as provenance metadata rather than a headline. */
.fmt-modal__inspo {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ink-muted);
  text-align: left;
  margin: 0;
  line-height: 1.35;
}

/* Phrase: the mood in one line. Regular weight italic — atmosphere,
   not a proclamation. A thin rule above separates it from the identity. */
.fmt-modal__phrase {
  font-family: 'Bitter', serif;
  font-size: 0.82rem;
  font-weight: 400;
  font-style: italic;
  color: var(--volcanic-ink);
  text-align: left;
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  line-height: 1.45;
}
.fmt-modal__phrase:not([hidden]) + .fmt-modal__notes,
.fmt-modal__inspo:not([hidden]):last-child + .fmt-modal__notes {
  margin-top: 0.25rem;
}

/* Notes: ingredient ledger, ultra-small, muted. */
.fmt-modal__notes {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ink-muted);
  text-align: left;
  line-height: 1.5;
  margin: 0 0 0.6rem;
  padding: 0;
  max-width: 100%;
}

/* Options: a hairline-divided list, NOT boxed cards. */
.fmt-modal__options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.fmt-option {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.18s var(--ease-expo);
  -webkit-tap-highlight-color: transparent;
}
.fmt-option:hover {
  background: color-mix(in oklch, var(--warm-ochre) 4%, transparent);
}

/* Visually-hidden native input (keyboard semantics retained). */
.fmt-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Selection cue: a filled ochre dot at the leading slot. No side
   stripes (impeccable absolute ban), no chrome borders — the row
   itself just brightens. */
.fmt-option__indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklch, var(--ink-muted) 55%, transparent);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.18s, background 0.18s;
}
.fmt-option__indicator::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--warm-ochre);
  transform: scale(0);
  transition: transform 0.18s var(--ease-expo);
}
.fmt-option.is-selected .fmt-option__indicator {
  border-color: var(--warm-ochre);
}
.fmt-option.is-selected .fmt-option__indicator::after { transform: scale(1); }
.fmt-option.is-selected {
  background: color-mix(in oklch, var(--warm-ochre) 8%, transparent);
}

.fmt-option__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.fmt-option__label {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--volcanic-ink);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.fmt-option__desc {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.35;
}
.fmt-option__price {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--volcanic-ink);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Confirm: solid volcanic when ready, restrained ochre-tinted when
   waiting. The disabled state should read as "elegí un formato",
   not "this button is broken". */
.fmt-modal__confirm {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--botanical-parchment);
  background: var(--volcanic-ink);
  border: none;
  border-radius: 2px;
  padding: 1.1rem 1rem;
  cursor: pointer;
  transition: background 0.18s var(--ease-expo), color 0.18s var(--ease-expo);
  -webkit-tap-highlight-color: transparent;
}
.fmt-modal__confirm:hover { background: oklch(27% 0.036 150); }
.fmt-modal__confirm:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: 3px;
}
.fmt-modal__confirm:disabled {
  background: transparent;
  color: color-mix(in oklch, var(--ink-muted) 75%, transparent);
  border: 1px solid var(--border);
  cursor: default;
}
.fmt-modal__confirm:disabled:hover { background: transparent; }