/* ============================================================
   CATÁLOGO PAGE — Vency Atelier
   Full fragrance index: designer · nicho · ultra nicho
   Layout: brand-grouped rows, not cards. Like a ledger.
   ============================================================ */

/* === PAGE HEADER (sticky — title + filter in one band) === */
.cat-header {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--botanical-parchment);
  margin-top: var(--nav-h);
  padding: var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

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

.cat-header__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
}

.cat-header__title {
  font-family: 'Bitter', serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.93;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0;
}

.cat-header__howto {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0.6rem 0 var(--space-sm);
  line-height: 1.6;
}

.cat-header__meta {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 0.25rem;
}

.cat-header__count {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* === FILTER ROW (inside header) === */
.cat-header__filter {
  border-top: 1px solid var(--border);
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
}

.cat-filters__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 0;
}

.cat-filters__search {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  transition: border-color 0.15s;
}

.cat-filters__search:focus {
  outline: none;
  border-bottom-color: var(--warm-ochre);
}

.cat-filters__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--volcanic-ink);
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  min-height: 44px;
}

.cat-filters__toggle:hover,
.cat-filters__toggle[aria-expanded="true"] {
  border-color: var(--warm-ochre);
  color: var(--warm-ochre);
}

.cat-filters__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.55rem;
  font-weight: 700;
  background: var(--warm-ochre);
  color: var(--botanical-parchment);
  border-radius: 50%;
}

.cat-filters__clear {
  font-family: 'Manrope', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0.55rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: color 0.15s;
}

.cat-filters__clear:hover {
  color: var(--volcanic-ink);
}

.cat-filter-panel {
  border-top: 1px solid var(--border);
  background: var(--botanical-parchment);
}

.cat-filter-panel[hidden] {
  display: none;
}

.cat-filter-panel__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-sm) 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cat-filter-group {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cat-filter-group__label {
  flex-shrink: 0;
  min-width: 88px;
  color: var(--ink-muted);
}

.cat-filter-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Set builder states on external entries — subtle tint, no heavy inset box */
.cat-entry.dblock--selected {
  box-shadow: none;
  background: color-mix(in oklch, var(--warm-ochre) 8%, transparent);
  transition: background 0.25s var(--ease-expo);
}

.cat-section--ultra-nicho .cat-entry.dblock--selected {
  background: color-mix(in oklch, var(--warm-ochre) 16%, transparent);
}

.cat-pill {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--volcanic-ink);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  min-height: 44px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.cat-pill:hover {
  color: var(--warm-ochre);
  border-color: var(--warm-ochre);
}

.cat-pill.is-active {
  color: var(--botanical-parchment);
  background: var(--warm-ochre);
  border-color: var(--warm-ochre);
}

.cat-pill:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: 2px;
}

/* === CATALOG SECTIONS === */
.cat-section {
  border-bottom: 1px solid var(--border);
  contain: layout style paint;
}

#cat-section-vency {
  scroll-margin-top: calc(var(--nav-h, 56px) + 90px);
}

/* All sections share the same parchment ground */

/* Section header — tight label, not a page-break headline */
.cat-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}


.cat-section__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.cat-section--ultra-nicho .cat-section__title {
  color: var(--ink-deep);
}


/* === BRAND GROUPS === */
.cat-brand {
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}


.cat-brand--hidden {
  display: none;
}

.cat-brand__name {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  padding: 1.1rem var(--space-md) 0.1rem;
  text-transform: uppercase;
}

.cat-section--ultra-nicho .cat-brand__name {
  color: var(--ink-deep);
}

.cat-brand__list {
  list-style: none;
}

/* === FRAGRANCE ROWS === */
.cat-entry {
  border-top: 1px solid var(--border);
  cursor: default;
  padding-bottom: 0.25rem;
  /* Removed content-visibility: auto (causes render delays on scroll)
     containment at .cat-section level is sufficient for performance */
}


.cat-entry--hidden {
  display: none;
}

/* Provenance label — below the name as quiet metadata */
.cat-entry__provenance {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: oklch(48% 0.04 70);
  margin-top: 0.3rem;
  margin-bottom: 0;
  order: 1;
}

/* Entry name — proclamatory Bitter, hits first */
.cat-entry__name {
  display: block;
  font-family: 'Bitter', serif;
  font-weight: 900;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  color: var(--volcanic-ink);
  line-height: 1.06;
  margin: 0;
  order: -1;
  transition: color 0.15s;
}
.cat-entry:hover .cat-entry__name { color: oklch(32% 0.025 75); }


/* Agotado badge — kept for sold-out marking inline in name */
.cat-badge--sold-out {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--ink-muted);
  color: var(--ink-muted);
  opacity: 0.7;
  margin-left: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

/* Gender dot — kept sr-only, color removed from display */
.cat-entry__gender-dot { display: none; }

/* Info wrapper — flex column so name renders first via order */
.cat-entry__info {
  display: flex;
  flex-direction: column;
  padding: 1.2rem var(--space-md) 1rem;
}

/* Notes — ingredient-ledger voice */
.cat-entry__notes {
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subdued);
  line-height: 1.65;
  margin-top: 0.55rem;
}

/* Inspiration attribution — italic, below notes */
.cat-entry__inspo {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

/* Footer row — historia + VER */
.cat-entry__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.cat-entry__historia {
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-ochre);
  text-decoration: none;
}
.cat-entry__historia:hover { text-decoration: underline; }

.cat-entry__foot .cat-entry__see { margin-left: auto; }

/* === EMPTY STATE === */
.cat-empty {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  display: none;
}

.cat-empty.is-visible {
  display: block;
}

.cat-empty__msg {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.cat-empty__hint {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* === VENCY COLLECTIONS — collapsible disclosure === */
.vency-collections {
  border-top: 1px solid var(--border);
  border-bottom: 3px solid var(--volcanic-ink);
}

/* Reset browser details/summary chrome */
.vency-collections summary {
  list-style: none;
}
.vency-collections summary::-webkit-details-marker {
  display: none;
}

.vency-collections__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.75rem var(--space-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.vency-collections__toggle:hover {
  background: oklch(92% 0.007 80);
}

.vency-collections__toggle:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: -2px;
}

.vency-collections__chevron {
  font-size: 0.7rem;
  color: var(--ink-muted);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.vency-collections[open] .vency-collections__chevron {
  transform: rotate(180deg);
}

.vency-collections__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-sm);
  border-top: 1px solid var(--border);
}

.vency-collections__panels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.vency-coll-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  text-decoration: none;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
}

.vency-coll-panel + .vency-coll-panel {
  padding-left: var(--space-md);
}

.vency-coll-panel:last-child {
  border-right: none;
}

.vency-coll-panel__tag {
  color: var(--warm-ochre);
}

.vency-coll-panel__desc {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.5;
}

.vency-coll-panel__arrow {
  font-size: 0.75rem;
  color: var(--volcanic-ink);
  opacity: 0;
  transition: opacity 0.15s;
  margin-top: auto;
}

a.vency-coll-panel:hover .vency-coll-panel__arrow {
  opacity: 1;
}

.vency-coll-panel--soon .vency-coll-panel__tag,
.vency-coll-panel--soon .vency-coll-panel__desc,
.vency-coll-panel--soon .vency-coll-panel__coming {
  opacity: 0.55;
}

.vency-coll-panel__coming {
  color: var(--ink-muted);
}

.vency-coll-panel__notify {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--warm-ochre);
  text-decoration: none;
  margin-top: 0.25rem;
}
.vency-coll-panel__notify:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .vency-collections__panels {
    grid-template-columns: 1fr;
  }

  .vency-coll-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
  }

  .vency-coll-panel + .vency-coll-panel {
    padding-left: 0;
  }

  .vency-coll-panel:last-child {
    border-bottom: none;
  }
}

/* Interpretation link — inline after notes, same style as vency-compact__story */
.cat-section--ultra-nicho .cat-entry__notes .vency-compact__story {
  color: var(--warm-ochre-light);
}

/* Panel breaks out of cat-entry padding — rail stays contained inline */
.cat-entry .fmt-panel {
  margin-left: calc(-1 * var(--space-md));
  margin-right: calc(-1 * var(--space-md));
}

/* === SEARCH INPUT === */
.cat-filters__search {
  width: 100%;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.cat-search-input {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--volcanic-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  width: 100%;
  padding: 0;
  appearance: none;
  transition: border-color 0.15s;
}

.cat-search-input:focus {
  border-bottom-color: var(--warm-ochre);
}

.cat-search-input::placeholder {
  color: var(--ink-muted);
}


/* === MULTIPLE SETS NOTE === */
.order-panel__multi {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

.order-panel__multi a {
  color: var(--warm-ochre);
  text-decoration: none;
}

.order-panel__multi a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cat-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* === DECANT SET INTRO BANNER === */
.dc-set-banner {
  background: var(--volcanic-ink);
  padding: clamp(2rem, 7vw, 3.5rem) var(--space-md);
}

.dc-set-banner__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.dc-set-banner__copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dc-set-banner__headline {
  font-family: 'Bitter', serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 5rem);
  line-height: 0.9;
  color: var(--botanical-parchment);
  margin: 0;
  letter-spacing: -0.015em;
}

.dc-set-banner__meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.dc-set-banner__tag {
  color: oklch(60% 0.07 66);
  letter-spacing: 0.14em;
  font-size: 0.6rem;
}

.dc-set-banner__price {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: oklch(70% 0.11 58);
  letter-spacing: -0.01em;
}

.dc-set-banner__body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: oklch(70% 0.012 90);
  max-width: 48ch;
  line-height: 1.65;
  margin: 0;
}

.dc-set-banner__body strong {
  font-weight: 600;
  color: oklch(86% 0.008 90);
}

.dc-set-banner__slots {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex-shrink: 0;
  counter-reset: dcslot;
}

.dc-set-banner__slot {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  counter-increment: dcslot;
  transition: opacity 0.3s;
}

.dc-set-banner__slot::before {
  content: '0' counter(dcslot);
  font-family: 'Manrope', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: oklch(60% 0.07 66);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.35s var(--ease-expo);
}

.dc-set-banner__slot::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(45% 0.04 66 / 0.28);
  transition: background 0.35s var(--ease-expo);
}

.dc-set-banner__slot--filled::before {
  color: var(--warm-ochre-light);
}

.dc-set-banner__slot--filled::after {
  background: var(--warm-ochre);
}

@media (max-width: 560px) {
  .dc-set-banner__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .dc-set-banner__slots {
    flex-direction: row;
    gap: 1.1rem;
  }

  .dc-set-banner__slot {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.25rem 0;
  }

  .dc-set-banner__slot::after {
    width: 100%;
    flex: none;
  }

  .dc-set-banner__body { max-width: 100%; }
}

/* === SECTION DESCRIPTOR (desktop only) === */
.cat-section__desc {
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.4;
  margin: 0;
  display: none;
}

.cat-section--ultra-nicho .cat-section__desc {
  color: oklch(50% 0.015 150);
}

/* === CATALOG LISTING BODY === */

.col-catalog-body {
  border-top: 1px solid var(--border);
}

/* === MOBILE === */
@media (max-width: 600px) {
  .cat-header {
    padding: var(--space-sm) var(--space-sm) 0;
    margin-top: var(--nav-h);
  }

  .cat-header__title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .cat-header__filter {
    margin: 0 calc(-1 * var(--space-sm));
    padding: 0 var(--space-sm);
  }

  .cat-filters__inner {
    gap: 0.5rem;
  }

  .cat-brand__name {
    padding: 0.75rem var(--space-sm) 0;
  }

  .cat-entry__info {
    padding: 0.6rem var(--space-sm) 0.2rem;
  }

  .cat-entry .fmt-rail,
  .cat-entry .fmt-panel {
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
  }

  .cat-section__header {
    padding: var(--space-sm) var(--space-sm);
  }
}


/* === DESKTOP — HORIZONTAL COMPACT ENTRY LAYOUT (≥900px) ===
   Compact rows flip to: [info text · left] [chip rail · right]
   fmt-panel always expands full-width across both columns.
   =========================================================== */
@media (min-width: 900px) {

  /* Catalog entries — Vency, Diseñador, Nicho, Ultra Nicho (one template) */
  .cat-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .cat-entry .cat-entry__info {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .cat-entry .fmt-rail {
    grid-column: 2;
    grid-row: 1;
    border-top: none !important;
    border-left: 1px solid var(--border);
    padding: 0.55rem 1.5rem;
    flex-wrap: nowrap;
    align-items: center;
    align-self: stretch;
  }

  .cat-entry .fmt-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
    margin-right: 0;
  }

  /* Typography — entries hold the wide column */
  .cat-entry__name {
    font-size: clamp(1.7rem, 2.2vw, 2.4rem);
  }

  .cat-entry__notes {
    font-size: 0.6rem;
  }

  /* Brand names become chapter headings */
  .cat-brand__name {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--volcanic-ink);
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 1.25rem var(--space-md) 0.5rem;
  }

  /* Section headers: column layout with descriptor line */
  .cat-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1.25rem var(--space-md);
  }

  .cat-section__title {
    font-size: 0.72rem;
  }

  .cat-section__desc {
    display: block;
  }
}

/* === LEGEND (gender dots) === */
.cat-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cat-legend__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cat-legend__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-legend__dot--mujer  { background: oklch(62% 0.10 350); }
.cat-legend__dot--hombre { background: oklch(48% 0.10 230); }
.cat-legend__dot--unisex { background: var(--warm-ochre); }

/* === ENTRANCE — catalog rows reveal in waves (DESIGN.md: like a fragrance drying down) ===
   Pre-state held only when motion is welcome; .is-in is added by the row observer
   in catalogo.js as each row enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .cat-entry {
    opacity: 0;
    transform: translateY(12px);
  }
  .cat-entry.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity   0.65s var(--ease-expo) var(--entry-delay, 0ms),
      transform 0.65s var(--ease-expo) var(--entry-delay, 0ms);
  }
}

/* === BANNER SAVINGS LINE === */
.dc-set-banner__pricing {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dc-set-banner__saving {
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(58% 0.09 68);
}

/* === HOW TO ORDER — 3-step strip === */
.order-how {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: oklch(93% 0.006 80);
}

.order-how__step {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem var(--space-md);
  border-right: 1px solid var(--border);
}

.order-how__step:last-child { border-right: none; }

.order-how__num {
  font-family: 'Bitter', serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--warm-ochre);
  line-height: 1;
  flex-shrink: 0;
}

.order-how__text {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--volcanic-ink);
  margin: 0;
  padding-top: 0.2rem;
}

.order-how__text strong { font-weight: 700; }

@media (max-width: 560px) {
  .order-how { flex-direction: column; }
  .order-how__step {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem var(--space-md);
  }
  .order-how__step:last-child { border-bottom: none; }
}

/* ── Fragrance detail panel ── */
body.fp-open { overflow: hidden; }/* "Agregar a la orden" — primary CTA at bottom of panel *//* Separator *//* Bottle control: "Agregar" toggle ↔ stepper *//* Hide/show states *//* Panel image *//* Card "Ver" trigger */
.cat-entry__see {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 1rem;
  min-height: 44px;
  border: 1.5px solid var(--warm-ochre);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-ochre);
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.cat-entry__see:hover,
.cat-entry__see:active {
  background: var(--warm-ochre);
  color: var(--botanical-parchment);
}

/* ── Format journey filter (set via ?fmt= URL param) ──────── */

/* Back link — only shown when a fmt filter is active */
.fmt-back {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.fmt-back:hover { color: var(--volcanic-ink); }

body.fmt--decant .fmt-back,
body.fmt--30ml  .fmt-back,
body.fmt--100ml .fmt-back {
  display: flex;
}

/* Decant journey: hide the two bottle buy-buttons and the "o frasco completo" label */
body.fmt--decant .fmt-rail__buy { display: none; }

/* 30ml journey: hide the decant set trigger + 100ml button */
body.fmt--30ml .fmt-rail__set      { display: none; }
body.fmt--30ml [data-fmt="100ml"]  { display: none; }
body.fmt--30ml .fmt-rail__buy-label { display: none; }

/* 100ml journey: hide the decant set trigger + 30ml button */
body.fmt--100ml .fmt-rail__set     { display: none; }
body.fmt--100ml [data-fmt="30ml"]  { display: none; }
body.fmt--100ml .fmt-rail__buy-label { display: none; }

/* On bottle journeys hide only the decant slots, keep the order button */
body.fmt--30ml  .dc-tray__slots,
body.fmt--100ml .dc-tray__slots { display: none !important; }/* 30ml / 100ml journeys: hide decant row + nudge, hide the other bottle *//* Hide "Frasco completo" label when only one size shows *//* ── DESKTOP: compact catalog header ── */
@media (min-width: 1024px) {
  .cat-header {
    padding: var(--space-sm) var(--space-lg) 0;
  }
  .cat-header__title-row {
    padding-bottom: 0.25rem;
  }
  .cat-header__title {
    font-size: clamp(2rem, 3vw, 2.8rem);
  }
  .cat-header__howto {
    font-size: 0.65rem;
    margin: 0.3rem 0 0.4rem;
  }
  .cat-header__filter {
    margin: 0 calc(-1 * var(--space-lg));
    padding: 0 var(--space-lg);
  }
  .cat-filters__inner {
    padding: 0.35rem 0;
  }
}


/* ============================================================
   CARD GRID — public catalog rendered as image-led cards
   (matches the admin Vender section composition).
   Cards are the entry to the detail modal; the whole card is a button.
   ============================================================ */

.cat-brand__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  padding: 0 var(--space-md) var(--space-lg);
  margin: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .cat-brand__list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 0 var(--space-lg) var(--space-lg);
  }
}

.cat-entry {
  border-top: none;
  padding: 0;
  background: transparent;
  list-style: none;
}

.cat-entry__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--botanical-parchment);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  overflow: hidden;
  transition: border-color 0.2s var(--ease-expo);
  -webkit-tap-highlight-color: transparent;
}

.cat-entry__card:hover { border-color: var(--warm-ochre); }
.cat-entry__card:focus-visible {
  outline: 2px solid var(--warm-ochre);
  outline-offset: 2px;
}

.cat-entry__img-wrap {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--atelier-stone);
}

.cat-entry__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-expo);
  mix-blend-mode: multiply;
}

.cat-entry__card:hover .cat-entry__img { transform: scale(1.04); }

.cat-entry__sold-out {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--botanical-parchment);
  background: oklch(15% 0.01 60 / 0.78);
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
}

.cat-entry__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: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.28rem 0.2rem;
}

.cat-entry__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem 0.95rem;
}

.cat-entry__provenance {
  font-family: 'Manrope', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-ochre);
}

.cat-entry__name {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.15;
  color: var(--volcanic-ink);
  letter-spacing: -0.005em;
}

.cat-entry__inspo {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--ink-muted);
  line-height: 1.3;
  margin-top: 0.15rem;
}

/* Hide legacy row-only elements that are no longer rendered into the card.
   The detail panel now holds notes / story / buy controls. */
.cat-entry__notes,
.cat-entry__foot,
.cat-entry__historia { display: none; }

/* Sold-out gets the overlay badge on the image; suppress the bottom rail. */
.cat-entry .fmt-rail--sold-out { display: none; }


/* ============================================================
   HIGH-DENSITY GRID — bottles only, no card chrome.
   Brand grouping handles the metadata; the card is just the
   image + the fragrance name. Many per row, less scroll.
   ============================================================ */

/* Fixed 4-column grid (drops to 2 on phones so bottles don't get tiny). */
.cat-brand__list {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.75rem;
  padding: 0 var(--space-md) var(--space-md);
}

@media (min-width: 640px) {
  .cat-brand__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem 1rem;
  }
}

@media (min-width: 1024px) {
  .cat-brand__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.25rem;
    padding: 0 var(--space-lg) var(--space-lg);
  }
}

/* Card chrome: a hairline border in the brand's stone tone with a soft
   parchment ground. Lifts to warm ochre on hover. Square (1:1) crop,
   contain the bottle so its silhouette is preserved. */
.cat-entry__card {
  border: 1px solid color-mix(in oklch, var(--border) 75%, transparent);
  background: color-mix(in oklch, var(--botanical-parchment) 92%, var(--atelier-stone) 8%);
  border-radius: 3px;
  padding: 0;
  text-align: center;
  /* Every card the same outer size regardless of image format or text
     length: stretch to the full grid-cell height, let the info area
     absorb the extra space below the (1:1) image. */
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.25s var(--ease-expo),
    background-color 0.25s var(--ease-expo);
}

.cat-entry__card:hover {
  border-color: var(--warm-ochre);
  background: var(--botanical-parchment);
}

.cat-entry__img-wrap {
  aspect-ratio: 1 / 1;
  background: transparent;
}

.cat-entry__img {
  object-fit: contain;
  padding: 0.55rem;
}

.cat-entry__card:hover .cat-entry__img { transform: scale(1.06); }

/* Info row beneath the image — name only, centered, smaller.
   Fixed min-height + 2-line clamp so cards with longer names don't
   stretch their row taller than the rest. */
.cat-entry__info {
  flex: 1;
  min-height: 3.4rem;
  padding: 0.35rem 0.5rem 0.65rem;
  text-align: center;
  gap: 0.1rem;
  justify-content: flex-start;
}

/* Hide per-card metadata; brand groupings + the detail panel handle it. */
.cat-entry__provenance,
.cat-entry__inspo { display: none; }

/* Vency entries keep a subtle distinction so the originals don't read as
   another generic bottle in the wider list. */
.cat-entry--vency .cat-entry__provenance {
  display: block;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.1rem;
}

.cat-entry__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: clamp(0.72rem, 1.2vw, 0.82rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--volcanic-ink);
  text-transform: none;
  /* Cap at two lines so "Acqua di Giò Profondo" doesn't make its card
     taller than "Pure XS". Longer names ellipsize. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vency originals keep the serif name to match the brand voice. */
.cat-entry--vency .cat-entry__name {
  font-family: 'Bitter', serif;
  font-weight: 700;
}

/* Sold-out badge gets smaller too. */
.cat-entry__sold-out {
  top: 0.35rem;
  right: 0.35rem;
  font-size: 0.5rem;
  padding: 0.22rem 0.45rem;
}

/* === Decant intro popup (shown once on first "Añadir al set" click) === */
.decant-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.decant-popup[hidden] {
  display: none;
}
.decant-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.decant-popup__card {
  position: relative;
  background: var(--botanical-parchment);
  max-width: 420px;
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
  z-index: 1;
}
.decant-popup__headline {
  font-family: 'Bitter', serif;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--volcanic-ink);
  margin: 0 0 1rem;
}
.decant-popup__body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 1.75rem;
}
.decant-popup__body strong {
  font-weight: 600;
  color: var(--ink);
}
.decant-popup__cta {
  min-width: 160px;
}