/* Virts — Shop All PLP (virts-facets.liquid). Life Is Good direction:
   white cards floating on cream, per-collection play palettes (same tier
   language as The List), pill controls, no hairline grids.
   WCAG: charcoal ink >=9:1 on all surfaces used behind words; marigold is
   large-text/pill-accent only; sold-out options dim to 35% but keep a
   strikethrough so the state is not color-only; every interactive control
   carries a visible :focus-visible ring; sheet respects reduced motion. */

.virts-plp {
  padding-block: 3rem 5rem;
  color: var(--virts-ink, #393D3C);
}

.virts-plp .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---- head ------------------------------------------------------------- */

.virts-plp-head { max-width: 46rem; margin-bottom: 2rem; }

.virts-plp-title {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: lowercase;
  margin: 0 0 0.75rem;
}

.virts-plp-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 72%, transparent);
  margin: 0;
}

/* ---- toolbar ---------------------------------------------------------- */

.virts-plp-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-block: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 14%, transparent);
}

.virts-plp-count { margin: 0; font-size: 0.875rem; font-weight: 600; flex: 1 1 auto; }

.virts-plp-open {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--virts-ink, #393D3C);
  background: var(--virts-paper, #FFFFFF);
  border: 1px solid var(--virts-ink, #393D3C);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}

.virts-plp-badge:not(:empty) {
  background: var(--virts-marigold, #F59E0B);
  color: var(--virts-ink, #393D3C);
  border-radius: 999px;
  min-width: 1.4em;
  padding: 0.05em 0.4em;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.virts-plp-sortwrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-inline-start: auto;
}

.virts-plp-sort {
  font: inherit;
  font-size: 0.875rem;
  color: var(--virts-ink, #393D3C);
  background: var(--virts-paper, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 35%, transparent);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}

/* ---- applied-facet pills ---------------------------------------------- */

.virts-plp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0.9rem 0;
}

.virts-plp-pills:empty { display: none; }

.virts-plp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--virts-ink, #393D3C);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 0.3rem 0.55rem 0.3rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.virts-plp-pill-x {
  display: inline-grid;
  place-items: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.virts-plp-pill-x:hover { background: rgba(255, 255, 255, 0.32); }

.virts-plp-pills .virts-plp-clear-inline {
  background: none;
  border: 0;
  color: var(--virts-teal, #526870);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.3rem 0.25rem;
}

/* ---- layout: rail + grid ---------------------------------------------- */

.virts-plp-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.75rem;
}

/* ---- facet controls: static rail (desktop <aside>) + native <dialog>
   slide-over sheet (mobile only, JS showModal() => browser focus trap,
   top layer, inert background, Esc). One #virts-plp-groups node moves
   between the two hosts at the breakpoint. No custom [open] styling on
   any dialog: Chrome headless has a paint bug where a top-level dialog
   with an authored [open]{position:static;display:block} rule blanks the
   whole page in --screenshot mode even with scripting off. -------------- */

.virts-plp-rail {
  position: sticky;
  top: 1rem;
}

.virts-plp-sheet {
  /* bottom sheet geometry lives on the BASE rule (closed = invisible by UA
     default; never opened at desktop widths), so this file contains no
     dialog [open] selectors at all — see the headless-paint-bug note above */
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-height: 82vh;
  overflow: hidden auto;
  animation: virts-sheet-up 0.22s ease-out;
  border: 0;
  border-radius: 16px 16px 0 0;
  padding: 1.25rem 1.25rem 2rem;
  background: var(--virts-bg, #EFE9DB);
  color: var(--virts-ink, #393D3C);
  box-shadow: 0 -8px 30px rgba(57, 61, 60, 0.25);
}

.virts-plp-sheet::backdrop { background: rgba(57, 61, 60, 0.45); }

.virts-plp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.virts-plp-panel-title {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0;
}

.virts-plp-panel-close {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--virts-ink, #393D3C);
  background: var(--virts-paper, #FFFFFF);
  border: 1px solid var(--virts-ink, #393D3C);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

.virts-plp-group {
  border: 0;
  padding: 0 0 1.4rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 12%, transparent);
}

.virts-plp-group legend {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  padding: 0;
  margin-bottom: 0.65rem;
}

.virts-plp-group-note {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 65%, transparent);
  margin: -0.25rem 0 0.6rem;
}

.virts-plp-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 6px;
}

.virts-plp-opt input {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--virts-ink, #393D3C);
  margin: 0;
  flex: none;
}

.virts-plp-optname { flex: 1 1 auto; }

.virts-plp-optn {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

.virts-plp-opt.is-muted .virts-plp-optname,
.virts-plp-opt.is-muted .virts-plp-sw { opacity: 0.35; }
.virts-plp-opt.is-muted .virts-plp-optname { text-decoration: line-through; }

/* when a size/color option is sold out everywhere the checkbox is disabled
   as well, so pointer users can't select a guaranteed-empty facet */
.virts-plp-opt input:disabled { cursor: not-allowed; }

.virts-plp-clear {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--virts-teal, #526870);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* swatch chips inside the rail and inside cards */
.virts-plp-sw {
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 45%, transparent);
  background: #FFFFFF;
  flex: none;
  display: inline-block;
}

.virts-plp-sw[data-color="Sand/Heather"] { background: #D8CDB8; }
.virts-plp-sw[data-color="Navy"] { background: #14274D; border-color: #14274D; }
.virts-plp-sw[data-color="Cream"] { background: #ECE5D7; }
.virts-plp-sw[data-color="White"] { background: #F7F6F6; }
.virts-plp-sw[data-color="Black"] { background: #29272C; border-color: #29272C; }
.virts-plp-sw[data-color="Sage"] { background: #7A8571; border-color: #7A8571; }
.virts-plp-sw[data-color="Brick"] { background: #C5615F; border-color: #C5615F; }
.virts-plp-sw[data-color="Slate"] { background: #5F6E7F; border-color: #5F6E7F; }
.virts-plp-sw[data-color="Mauve"] { background: #816481; border-color: #816481; }

.virts-plp-sw.is-out {
  opacity: 0.35;
  position: relative;
}

.virts-plp-sw.is-out::after {
  content: "";
  position: absolute;
  inset: 50% -2px auto -2px;
  height: 2px;
  background: var(--virts-ink, #393D3C);
  transform: rotate(-45deg);
}

/* ---- card grid --------------------------------------------------------- */

.virts-plp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.virts-plp-card { display: block; }

/* author display:block would otherwise override the UA [hidden] rule —
   filtered-out cards must actually disappear */
.virts-plp-card[hidden] { display: none; }

.virts-plp-card-in {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--virts-paper, #FFFFFF);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 1.25rem;
  min-height: 12.5rem;
  text-decoration: none;
  color: var(--virts-ink, #393D3C);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--virts-ink, #393D3C) 7%, transparent);
}

.virts-plp-card[data-collection="Desert Fathers"] .virts-plp-card-in { background: var(--virts-mint, #A0E781); }
.virts-plp-card[data-collection="Deep List"] .virts-plp-card-in { background: #EDF0EE; }
.virts-plp-card[data-collection="Packs"] .virts-plp-card-in { background: var(--virts-lilac, #E6D6EC); }

/* photoreal card image (t_2aedbbda) — 400px derivatives, shown whenever the
   photo_dir setting points at staged imagery; typography cards are unchanged
   when the img is absent. Swatch hover previews that colorway (JS swaps src). */
.virts-plp-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.virts-plp-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

.virts-plp-word {
  font-family: var(--font-heading-family, 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.virts-plp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.virts-plp-price { font-size: 0.9375rem; font-weight: 700; }

.virts-plp-cmp {
  font-weight: 400;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 55%, transparent);
  margin-left: 0.3rem;
}

.virts-plp-state {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.virts-plp-state.is-available { background: var(--virts-marigold, #F59E0B); color: var(--virts-ink, #393D3C); }
.virts-plp-state.is-coming_soon { background: color-mix(in srgb, var(--virts-ink, #393D3C) 8%, transparent); color: color-mix(in srgb, var(--virts-ink, #393D3C) 70%, transparent); }
.virts-plp-state.is-sold_out { background: color-mix(in srgb, var(--virts-ink, #393D3C) 85%, transparent); color: #FFFFFF; }

.virts-plp-swatches { display: flex; gap: 0.35rem; }

.virts-plp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.virts-plp-size {
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--virts-ink, #393D3C) 30%, transparent);
  border-radius: 5px;
  padding: 0.08rem 0.38rem;
}

.virts-plp-size.is-out {
  opacity: 0.35;
  text-decoration: line-through;
}

/* ---- empty state ------------------------------------------------------- */

.virts-plp-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: color-mix(in srgb, var(--virts-ink, #393D3C) 70%, transparent);
}

/* ---- progressive enhancement gating ------------------------------------
   Until JS flags the root, the interactive chrome stays display:none and
   the full grid renders. No-JS users get every product, no dead controls.
   The sheet <dialog> needs no gating (UA hides closed dialogs). */
.virts-plp-rail,
.virts-plp-open,
.virts-plp-pills,
.virts-plp-sortwrap { display: none; }

.virts-plp.is-js .virts-plp-rail { display: block; }
.virts-plp.is-js .virts-plp-pills,
.virts-plp.is-js .virts-plp-sortwrap { display: flex; }
/* .virts-plp-open stays hidden until the mobile media query turns it on —
   on desktop the rail is always visible so an open button would be dead */

.virts-plp.is-js .virts-plp-layout {
  /* rail only reserves a column when JS is driving it */
  grid-template-columns: 250px minmax(0, 1fr);
}

.virts-plp:not(.is-js) .virts-plp-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---- focus rings (WCAG 2.4.7) ------------------------------------------ */

.virts-plp :focus-visible {
  outline: 3px solid var(--virts-navy, #2A3C67);
  outline-offset: 2px;
  border-radius: 4px;
}

.virts-plp .virts-plp-card-in:focus-visible { outline-offset: 4px; }

/* ---- mobile: rail hides, Filters opens the modal sheet ------------------ */

@media (max-width: 989.98px) {
  .virts-plp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .virts-plp.is-js .virts-plp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .virts-plp.is-js .virts-plp-open { display: inline-flex; }

  /* groups live inside the sheet on mobile; the empty rail must not take
     a sticky slot. Without <dialog> support (.no-sheet) the rail stays
     mounted and visible as a static block — controls remain usable. */
  .virts-plp.is-js .virts-plp-rail { display: none; }
  .virts-plp.is-js.no-sheet .virts-plp-rail { display: block; }

  .virts-plp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .virts-plp-sheet { animation: none; }
}

@keyframes virts-sheet-up {
  from { transform: translateY(12%); }
  to { transform: translateY(0); }
}