/* =====================================================================
   The Field Catalogue — /products shop archive
   Rides on cinematic-experience's --dcx-* tokens (Fraunces + JetBrains +
   brand palette), force-enqueued on the shop by inc/enqueue.php. Scoped to
   body.is-field-catalogue so it never touches the homepage "meet the lineup".
   ===================================================================== */

.is-field-catalogue{
  --cat-ink: var(--dcx-ink, #2a2a36);
  --cat-bone: var(--dcx-bone, #faf6ee);
  --cat-cream: var(--dcx-cream, #fdfaf3);
  --cat-ivory: var(--dcx-ivory, #f8f0e3);
  --cat-lime: var(--dcx-lime, #aac527);
  --cat-rust: var(--dcx-rust, #8e5a2f);
  --cat-mute: var(--dcx-ink-mute, #8a8794);
  --cat-mono: var(--dcx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --cat-display: var(--dcx-font-display, 'Fraunces', Georgia, serif);
  --cat-soft: #55525e;
  --cat-lime-deep: var(--dcx-sage-dark, #95ab22);
  --cat-lime-ink: #3a4410;
  --cat-terracotta: var(--dcx-terracotta, #b87b4a);
  --cat-turmeric: var(--dcx-turmeric, #d4a83a);
  --cat-on-dark: #faf3e6;
  --cat-ink-deep: var(--dcx-moss, #20202a);
  --cat-photo-tile: radial-gradient(120% 120% at 50% 0, var(--cat-cream), var(--cat-ivory));
  --cat-ease: cubic-bezier(.22, 1, .36, 1);
  --cat-snap: cubic-bezier(.5, 1.4, .5, 1);
  --cat-rail-w: 264px;
  --cat-gap: clamp(20px, 3vw, 44px);
}

/* The native WC result count is replaced by the live #cat-tally. */
.is-field-catalogue .woocommerce-result-count{ display:none !important; }

/* ---- Layout: sticky rail + main ---- */
.is-field-catalogue .catalogue{
  display:grid;
  grid-template-columns: var(--cat-rail-w) minmax(0, 1fr);
  gap: var(--cat-gap);
  align-items:start;
  max-width:1280px;
  margin:0 auto;
  padding: clamp(8px, 2vw, 28px) clamp(16px, 4vw, 40px) 80px;
}
.is-field-catalogue .cat-main{ min-width:0; }

/* ---- Toolbar: tally + sort ---- */
.is-field-catalogue .cat-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 1.5px solid var(--cat-ink);
}
.is-field-catalogue .cat-tally{ display:flex; align-items:baseline; gap:14px; line-height:1; }
.is-field-catalogue .cat-tally__n{
  font-family: var(--cat-display); font-weight:800;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); color:var(--cat-ink); line-height:.85;
}
.is-field-catalogue .cat-tally__meta{ display:flex; flex-direction:column; gap:3px; }
.is-field-catalogue .cat-tally__label{
  font-family: var(--cat-mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cat-ink);
}
.is-field-catalogue .cat-tally__sub{
  font-family: var(--cat-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cat-mute);
}
/* WC ordering select, restyled to the field look */
.is-field-catalogue .woocommerce-ordering select,
.is-field-catalogue .cat-toolbar select{
  font-family: var(--cat-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--cat-ink); background:var(--cat-cream);
  border:1.5px solid var(--cat-ink); border-radius:999px; padding:9px 16px; cursor:pointer;
  box-shadow:3px 3px 0 var(--cat-ink);
}

/* ---- Index rail ---- */
.is-field-catalogue .cat-rail{ position:sticky; top: 92px; align-self:start; }
.is-field-catalogue .cat-rail__close{ display:none; }
.is-field-catalogue .cat-rail__label{ display:none; } /* mobile-only heading for the inline filter bar */
.is-field-catalogue .cat-group{ border-top:1.5px solid var(--cat-ink); padding:14px 0; }
.is-field-catalogue .cat-group:first-of-type{ border-top:0; }
.is-field-catalogue .cat-group__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:none; border:0; cursor:pointer; padding:2px 0;
  font-family: var(--cat-mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cat-ink);
}
.is-field-catalogue .cat-group__count{
  font-family:var(--cat-mono); font-size:10px; font-weight:700; color:var(--cat-lime);
  background:var(--cat-ink); border-radius:999px; padding:2px 7px; margin-left:auto;
}
.is-field-catalogue .cat-group__count[data-n="0"]{ display:none; }
.is-field-catalogue .cat-group__list{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.is-field-catalogue .cat-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left; text-decoration:none;
  padding:7px 8px; border-radius:8px;
  font-family: var(--cat-display); font-size:15px; color:var(--cat-ink);
  transition: background .15s ease, opacity .15s ease;
}
.is-field-catalogue .cat-opt:hover{ background:var(--cat-ivory); }
.is-field-catalogue .cat-opt__box{
  flex:0 0 auto; width:15px; height:15px; border:1.5px solid var(--cat-ink); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--cat-cream);
}
.is-field-catalogue .cat-opt__n{
  margin-left:auto; font-family:var(--cat-mono); font-size:11px; font-weight:600; color:var(--cat-mute);
}
.is-field-catalogue .cat-opt[aria-pressed="true"]{ background: color-mix(in srgb, var(--cat-lime) 22%, transparent); }
.is-field-catalogue .cat-opt[aria-pressed="true"] .cat-opt__box{ background:var(--cat-lime); box-shadow:1.5px 1.5px 0 var(--cat-ink); }
.is-field-catalogue .cat-opt[aria-pressed="true"] .cat-opt__n{ color:var(--cat-ink); font-weight:700; }
.is-field-catalogue .cat-opt[disabled],
.is-field-catalogue .cat-opt.is-disabled{ opacity:.36; cursor:not-allowed; pointer-events:none; }
.is-field-catalogue .cat-opt[disabled] .cat-opt__n,
.is-field-catalogue .cat-opt.is-disabled .cat-opt__n{ color:var(--cat-rust); }
.is-field-catalogue .cat-clear{
  margin-top:16px; display:none; width:100%;
  font-family:var(--cat-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cat-bone); background:var(--cat-ink); border:1.5px solid var(--cat-ink); border-radius:999px;
  padding:10px; cursor:pointer;
}
.is-field-catalogue .cat-clear.is-on{ display:block; }
.is-field-catalogue .cat-clear:hover{ background:var(--cat-rust); }

/* ---- The specimen grid ---- */
.is-field-catalogue .shop-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  list-style:none; margin:0; padding:0;
}
@media (min-width: 720px){ .is-field-catalogue .shop-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px){ .is-field-catalogue .catalogue{ --cat-rail-w: 264px; } }

/* ---- The specimen card (.pcard) ---- */
.is-field-catalogue .pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--cat-cream); border:1.5px solid var(--cat-ink); border-radius:14px;
  box-shadow:6px 6px 0 var(--cat-ink); overflow:hidden;
  transition:transform .34s var(--cat-ease), box-shadow .34s var(--cat-ease);
}
.is-field-catalogue .pcard:hover{ transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--cat-ink); z-index:2; }
.is-field-catalogue .pcard.is-hidden{ display:none !important; }

.is-field-catalogue .pcard__plate{
  position:relative; margin:12px 12px 0; border:1px solid var(--cat-ink); border-radius:9px;
  overflow:hidden; background:var(--cat-photo-tile);
}
.is-field-catalogue .pcard__art{ aspect-ratio:1/1; position:relative; display:block; }
.is-field-catalogue .pcard__artlink{ display:block; width:100%; height:100%; }
.is-field-catalogue .pcard__art img{
  width:100%; height:100%; object-fit:cover; display:block;
  mix-blend-mode:multiply; transition:transform .6s var(--cat-ease);
}
.is-field-catalogue .pcard:hover .pcard__art img{ transform:scale(1.045); }
.is-field-catalogue .pcard__art::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cat-ink), transparent 88%);
  background:radial-gradient(120% 90% at 50% 0%, transparent 60%, color-mix(in srgb, var(--cat-ink), transparent 94%) 100%);
}
.is-field-catalogue .pcard__cross{
  position:absolute; font-family:var(--cat-mono); font-size:12px; color:rgba(42,42,54,.5);
  z-index:2; line-height:1; pointer-events:none;
  transition:color .34s ease, transform .34s var(--cat-snap);
}
.is-field-catalogue .pcard__cross.tl{ top:6px; left:8px; }
.is-field-catalogue .pcard__cross.br{ bottom:6px; right:8px; }
.is-field-catalogue .pcard:hover .pcard__cross{ color:var(--cat-lime-deep); }
.is-field-catalogue .pcard:hover .pcard__cross.tl{ transform:translate(-1px,-1px) scale(1.25); }
.is-field-catalogue .pcard:hover .pcard__cross.br{ transform:translate(1px,1px) scale(1.25); }
.is-field-catalogue .pcard__no{
  position:absolute; top:.5rem; left:.5rem; z-index:3; font-family:var(--cat-mono);
  font-size:.62rem; font-weight:700; letter-spacing:.12em; color:var(--cat-ink);
  background:var(--cat-bone); border:1.5px solid var(--cat-ink); border-radius:999px; padding:.18em .55em;
}
.is-field-catalogue .pcard__tag{
  position:absolute; top:.5rem; right:.5rem; z-index:3; font-family:var(--cat-mono);
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.22em .5em; border-radius:4px; transform:rotate(2deg);
  color:var(--cat-rust); border:1.5px solid var(--cat-rust);
  background:color-mix(in srgb, var(--cat-terracotta), var(--cat-bone) 80%);
}
.is-field-catalogue .pcard__tag--sale{
  color:#fff; border-color:var(--cat-rust); background:var(--cat-rust); transform:rotate(-2deg);
}

.is-field-catalogue .pcard__body{
  padding:14px 14px 16px; display:flex; flex-direction:column; gap:.5rem; flex:1;
}
.is-field-catalogue .pcard__specline{
  margin:0; font-family:var(--cat-mono); font-size:.66rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cat-soft); line-height:1.45;
  display:flex; flex-wrap:wrap; gap:.35em .5em; min-height:1.1em;
}
.is-field-catalogue .pcard__specline span{ display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
.is-field-catalogue .pcard__specline span + span::before{
  content:""; width:4px; height:4px; border-radius:50%; background:var(--cat-lime-deep);
}
.is-field-catalogue .pcard__specline b{ color:var(--cat-ink); font-weight:700; }
.is-field-catalogue .pcard__name{
  margin:0; font-family:var(--cat-display); font-size:clamp(1.1rem, 1rem + .65vw, 1.34rem);
  font-weight:560; line-height:1.06; letter-spacing:-.01em; color:var(--cat-ink);
}
.is-field-catalogue .pcard__name a{ color:inherit; text-decoration:none; }
.is-field-catalogue .pcard__name a::after{ content:""; position:absolute; inset:0; z-index:1; } /* whole-card click */
.is-field-catalogue .pcard__note{
  margin:0; font-family:inherit; font-size:.82rem; color:var(--cat-soft); line-height:1.4;
}
.is-field-catalogue .pcard__foot{
  margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:.6rem;
  padding-top:.7rem; border-top:1px solid color-mix(in srgb, var(--cat-ink), transparent 88%);
}
.is-field-catalogue .pcard__price{
  font-family:var(--cat-mono); font-weight:700; font-size:1.02rem; color:var(--cat-ink);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:.45em; flex-wrap:wrap; line-height:1.1;
}
.is-field-catalogue .pcard__price del{ font-size:.74rem; font-weight:500; color:var(--cat-mute); }
.is-field-catalogue .pcard__price ins{ text-decoration:none; }
.is-field-catalogue .pcard__add{
  position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--cat-mono); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.62em .95em; border-radius:999px; border:1.5px solid var(--cat-ink);
  background:var(--cat-lime); color:var(--cat-lime-ink); box-shadow:3px 3px 0 var(--cat-ink);
  text-decoration:none; white-space:nowrap; min-width:3.4em; flex:none; cursor:pointer;
  transition:transform .16s var(--cat-snap), box-shadow .16s var(--cat-snap);
}
.is-field-catalogue .pcard__add:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--cat-ink); }
.is-field-catalogue .pcard__add:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--cat-ink); }
.is-field-catalogue .pcard__add.added{ background:var(--cat-ink-deep); color:var(--cat-on-dark); }
.is-field-catalogue .pcard__add + .added_to_cart{ display:none; }
@media (max-width:560px){
  .is-field-catalogue .pcard__add{ font-size:.7rem; padding:.55em .8em; }
  .is-field-catalogue .pcard__price{ font-size:.92rem; }
}

/* ---- Mobile filter button ---- */
.is-field-catalogue .cat-fab{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60;
  display:none; align-items:center; gap:8px;
  font-family:var(--cat-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cat-bone); background:var(--cat-ink); border:1.5px solid var(--cat-ink); border-radius:999px;
  padding:13px 22px; cursor:pointer; box-shadow:0 8px 24px rgba(42,42,54,.3);
}
.is-field-catalogue .cat-fab__count{ background:var(--cat-lime); color:var(--cat-ink); border-radius:999px; padding:1px 7px; }

/* ---- Responsive: inline, always-visible filter bar (no drawer, no FAB) ----
   v0.7.38: mobile used to hide the filters in an off-screen drawer behind a
   FAB that JS un-hid — under LiteSpeed JS-delay that left mobile with no
   visible filters at all. Now the rail is a static bar above the grid: one
   horizontal-scrolling chip row per axis. The groups are server-rendered, so
   they show with zero JS. */
@media (max-width: 900px){
  .is-field-catalogue .catalogue{ grid-template-columns: 1fr; gap:14px; }

  .is-field-catalogue .cat-rail{
    position:static; width:auto; height:auto; top:auto; align-self:auto;
    transform:none; background:transparent; border:0; box-shadow:none;
    padding:0; margin:0 0 2px; overflow:visible;
  }
  .is-field-catalogue .cat-rail__close,
  .is-field-catalogue .cat-fab,
  .is-field-catalogue .cat-scrim{ display:none !important; }
  .is-field-catalogue .cat-rail__label{
    display:block; font-family:var(--cat-mono); font-size:10px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--cat-mute); margin:0 0 8px;
  }

  /* One axis = one row: a fixed label + a horizontal-scrolling chip strip. */
  .is-field-catalogue .cat-group{
    border-top:0; padding:6px 0; display:flex; align-items:center; gap:10px; position:relative;
  }
  .is-field-catalogue .cat-group:first-of-type{ border-top:0; }
  /* Right-edge fade = a "there's more — scroll →" cue so the strip doesn't read
     as a static row of tags. (Pure CSS; harmless when a group doesn't overflow.) */
  .is-field-catalogue .cat-group::after{
    content:''; position:absolute; right:0; top:0; bottom:5px; width:34px; pointer-events:none;
    background:linear-gradient(to right, rgba(250,246,238,0), var(--cat-bone));
  }
  .is-field-catalogue .cat-group__head{
    flex:0 0 auto; width:auto; padding:0; pointer-events:none; /* no collapse on mobile */
    font-size:9.5px; letter-spacing:.12em; color:var(--cat-mute); white-space:nowrap;
  }
  .is-field-catalogue .cat-group__count{ display:none; }
  .is-field-catalogue .cat-group__list{
    flex:1 1 auto; min-width:0; flex-direction:row; gap:8px; margin-top:0;
    overflow-x:auto; overflow-y:hidden; padding-bottom:4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .is-field-catalogue .cat-group__list::-webkit-scrollbar{ display:none; }

  .is-field-catalogue .cat-opt{
    flex:0 0 auto; width:auto; gap:5px; padding:9px 15px; border-radius:999px;
    border:1.5px solid var(--cat-ink); background:var(--cat-cream); white-space:nowrap;
    font-weight:600; box-shadow:2px 2px 0 rgba(42,42,54,.12);
  }
  /* Leading +/✓ so every chip reads as a tappable TOGGLE, not a passive tag. */
  .is-field-catalogue .cat-opt::before{
    content:'+'; font-weight:800; font-size:13px; line-height:1; color:var(--cat-lime-deep); margin-right:1px;
  }
  .is-field-catalogue .cat-opt:hover{ background:var(--cat-cream); }
  .is-field-catalogue .cat-opt__box{ display:none; }
  .is-field-catalogue .cat-opt[aria-pressed="true"]{
    background:var(--cat-lime); color:var(--cat-lime-ink); box-shadow:2px 2px 0 var(--cat-ink);
  }
  .is-field-catalogue .cat-opt[aria-pressed="true"]::before{ content:'\2713'; color:var(--cat-lime-ink); }
  .is-field-catalogue .cat-opt__n{ margin-left:2px; font-size:10px; opacity:.65; }

  .is-field-catalogue .cat-clear{ display:none; margin-top:8px; width:auto; padding:8px 16px; }
  .is-field-catalogue .cat-clear.is-on{ display:inline-block; }
}

@media (prefers-reduced-motion: reduce){
  .is-field-catalogue .cat-rail{ transition:none; }
}

/* ---------------------------------------------------------------------------
   v0.7.51 — Mobile overflow fix.
   On phones the index rail collapses into horizontal filter strips, but it's a
   GRID ITEM and lacked min-width:0 — so its min-content forced the single grid
   column (and therefore the whole page + the product grid) to desktop width,
   giving the "grid feels like desktop on mobile / too big" overflow. Clamp the
   column to the viewport and let the rail / groups / chip-strips shrink so the
   strips scroll internally (overflow-x:auto) instead of stretching the layout.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .is-field-catalogue .catalogue{ grid-template-columns:minmax(0,1fr); }
  .is-field-catalogue .cat-rail,
  .is-field-catalogue .cat-main,
  .is-field-catalogue .cat-group,
  .is-field-catalogue .cat-group__list{ min-width:0; max-width:100%; }
}