/* Virts — The List. Life Is Good direction (design/lifeisgood-brief.md §1/§3):
   "a gallery wall, not a swiss grid" — white/pastel cards floating on cream,
   soft corners, per-tier play palettes:
     Core            → marigold (the buyable now)
     Deep List       → navy + slate teal (the editorial future)
     Desert Fathers  → mint/baby-pink/lilac washes (the wry wink: sunny
                       colors for severe asceticism — "SLEEPING ON A HARD
                       BED" on baby pink IS the joke landing)
   WCAG: charcoal ink is ≥9:1 on all washes used behind words; full lilac
   #A978B8 and slate teal-as-background fail small text and are never used
   behind body copy (teal/lilac tints and on-white text only). */

.virts-list {
  padding-block: 4rem 6rem;
  color: var(--virts-ink, #393D3C);
}

.virts-list-head {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.virts-list-title {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  line-height: 1;
  margin: 0 0 1.5rem;
  color: var(--virts-ink, #393D3C);
}

.virts-list-sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 72%, transparent);
  margin: 0 auto 3rem;
  max-width: 38rem;
}

/* Tier filter chips — pill toggles (LiG merchandising nav, not rules). */
.virts-chips {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.virts-chip {
  appearance: none;
  background: var(--virts-paper, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 16%, transparent);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 70%, transparent);
  cursor: pointer;
}

.virts-chip:hover { color: var(--virts-ink, #393D3C); }

.virts-chip.is-active {
  color: var(--virts-ink, #393D3C);
  background: var(--virts-marigold, #F59E0B); /* charcoal label = 5.1:1 */
  border-color: var(--virts-marigold, #F59E0B);
}

.virts-chip-n { font-variant-numeric: tabular-nums; opacity: 0.6; }

.virts-live { color: color-mix(in srgb, var(--virts-ink, #393D3C) 70%, transparent); }

/* The numbered gallery wall: gapped cards, not hairline rules. */
.virts-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

@media (max-width: 739px) {
  .virts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.virts-cell { margin: 0; }

.virts-cell[hidden] { display: none; }

.virts-cell-in {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  box-sizing: border-box;
  height: 100%;
  min-height: 168px;
  padding: 1.25rem 1rem 1.1rem;
  background: var(--virts-paper, #FFFFFF);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 8%, transparent);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.virts-cell-in:hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--virts-ink, #393D3C) 12%, transparent);
}

.virts-cell-in:focus-visible {
  outline: 2px solid var(--virts-ink, #393D3C);
  outline-offset: 2px;
}

.virts-num {
  align-self: flex-start;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

/* The word itself — set like it is printed on a chest. Max size is capped
   so the longest single token (ENCOURAGEMENT, 13 caps) never has to break:
   13 × ~0.68em ≈ 177px < the ~187px inner card width at 5 columns. */
.virts-word {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-size: clamp(1rem, 1.9vw, 1.1875rem);
  text-align: center;
  width: 100%;
  /* `anywhere` (not `break-word`) so long virtue words also collapse the
     cell's min-content width — otherwise a 14-char word overflows the
     2-column grid on 390px phones. Kept as the last-resort safety net
     under the size cap above. */
  overflow-wrap: anywhere;
  hyphens: none;
}

.virts-state {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Core: the buyable NOW. Marigold AVAILABLE tag. --- */
.virts-cell[data-tier="Core"][data-state="available"] .virts-state {
  background: var(--virts-marigold, #F59E0B);
  color: var(--virts-ink, #393D3C);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

/* --- Deep List: the editorial future. Navy/teal, words ghosted —
   present, not yet. (State color teal-on-white = 5.9:1.) --- */
.virts-cell[data-tier="Deep List"] .virts-num { color: var(--virts-teal, #526870); }

.virts-cell[data-tier="Deep List"][data-state="coming_soon"] .virts-cell-in {
  border-top: 3px solid var(--virts-navy, #2A3C67);
}

.virts-cell[data-tier="Deep List"] .virts-cell-in:hover {
  border-top-color: var(--virts-teal-soft, #758992);
}

.virts-cell[data-tier="Deep List"][data-state="coming_soon"] .virts-word {
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 42%, transparent);
}

.virts-cell[data-tier="Deep List"][data-state="coming_soon"] .virts-state {
  color: var(--virts-teal, #526870);
}

/* --- Desert Fathers: closed drops. Words keep their weight, the drop lost
   its future. Sunny pastel washes (charcoal on each ≥7.5:1), cycled. --- */
.virts-cell[data-tier="Desert Fathers"] .virts-state { color: var(--virts-ink, #393D3C); }

.virts-cell[data-tier="Desert Fathers"]:nth-child(3n + 1) .virts-cell-in {
  background: var(--virts-mint, #A0E781);
}

.virts-cell[data-tier="Desert Fathers"]:nth-child(3n + 2) .virts-cell-in {
  background: var(--virts-pink, #FFDEDE);
}

.virts-cell[data-tier="Desert Fathers"]:nth-child(3n) .virts-cell-in {
  background: var(--virts-lilac, #E6D6EC); /* tint, not full #A978B8 (3.2:1) */
}

.virts-cell[data-tier="Desert Fathers"] .virts-num::after { content: " · drop closed"; }

/* Legacy state hooks kept for any cell outside the tier rules above. */
.virts-cell[data-state="coming_soon"] .virts-word {
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 42%, transparent);
}

.virts-cell[data-state="coming_soon"] .virts-state { color: color-mix(in srgb, var(--virts-ink, #393D3C) 70%, transparent); }

.virts-cell[data-state="sold_out"] .virts-word { color: var(--virts-ink, #393D3C); }

/* Notify dialog — one question, plainly, on paper. */
.virts-notify {
  border: 0;
  border-radius: 16px;
  background: var(--virts-paper, #FFFFFF);
  color: var(--virts-ink, #393D3C);
  padding: 2.25rem 2rem 2rem;
  max-width: 26rem;
  width: calc(100vw - 3rem);
}

.virts-notify::backdrop { background: rgba(57, 61, 60, 0.55); }

.virts-notify-form { display: grid; gap: 1.25rem; }

.virts-notify-copy { margin: 0; line-height: 1.55; font-size: 1rem; }

.virts-notify-label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.virts-notify input[type="email"] {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 40%, transparent);
  border-radius: 8px;
  background: var(--virts-bg, #EFE9DB);
  color: inherit;
}

.virts-notify-actions { display: flex; gap: 0.75rem; }

.virts-notify-send {
  appearance: none;
  border: 1px solid var(--virts-marigold, #F59E0B);
  background: var(--virts-marigold, #F59E0B);
  color: var(--virts-ink, #393D3C);
  font: inherit;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.3rem;
  cursor: pointer;
  border-radius: 8px;
}

.virts-notify-close {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 35%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .virts-cell-in { transition: none; }
}

/* --- live try-on preview (task t_8fc13faf) -------------------------------- */
/* "Try it" pill: corner affordance on every catalog cell. ≥44px touch
   target on coarse pointers (PLP pattern, t_d146a9aa); unobtrusive
   34px pill on hover-capable desktop. */
.virts-try-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 22%, transparent);
  background: rgba(255, 255, 255, 0.88);
  color: var(--virts-ink, #393D3C);
  font: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.virts-cell { position: relative; }
.virts-cell:hover .virts-try-btn,
.virts-try-btn:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .virts-try-btn { opacity: 1; min-width: 44px; min-height: 44px; padding: 0.5rem 0.7rem; font-size: 0.6875rem; }
}
dialog.virts-try {
  border: 0;
  border-radius: 18px;
  padding: 0;
  width: min(430px, calc(100vw - 2rem));
  background: #fff;
  color: var(--virts-ink, #393D3C);
  box-shadow: 0 24px 64px rgba(30, 32, 30, 0.28);
}
dialog.virts-try::backdrop { background: rgba(41, 39, 44, 0.5); }
.virts-try-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(57, 61, 60, 0.1);
}
.virts-try-who {
  font-family: var(--font-heading-family, 'Libre Franklin', Arial, sans-serif);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  text-transform: uppercase;
}
.virts-try-x {
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.55rem;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: inherit;
  border-radius: 999px;
}
.virts-try-x:hover { background: rgba(57, 61, 60, 0.07); }
.virts-try-stage {
  aspect-ratio: 1;
  background: #faf9f6;
}
.virts-try-stage canvas { display: block; width: 100%; height: 100%; }
.virts-try-sws {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0.85rem 1.1rem 0.2rem;
}
.virts-try-sw {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) { .virts-try-sw { width: 44px; height: 44px; } }
.virts-try-sw[aria-pressed="true"] { border-color: var(--virts-ink, #393D3C); }
.virts-try-sw span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(57, 61, 60, 0.16); }
.virts-try-sw:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.virts-try-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem 1.1rem;
  margin: 0;
}
.virts-try-shop {
  display: inline-block;
  background: var(--virts-ink, #393D3C);
  color: #EFE9DB;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  text-decoration: none;
  min-height: 44px;
}
.virts-try-shop:hover { background: #282b2a; }
.virts-try-wait {
  border: 1px solid rgba(57, 61, 60, 0.3);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  min-height: 44px;
}
.virts-try-wait:hover { background: rgba(57, 61, 60, 0.06); }