/* ═══════════════════════════════════════════════════════════════════
   Products pages: /products/, the category pages and the product page.
   The inline <style> rules of the static products.html and
   product-detail.html, unchanged (the skeleton loader and the "not
   found" box are left out: WordPress prints the cards with the page and
   answers unknown products with the 404 page). Loaded on these views
   only (inc/products.php), after zali.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── products.html ─────────────────────────────────────────────────── */

/* Same 3-up / 2-up rhythm as the homepage range grid. */
.picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-gap)}
.picker>*{grid-column:span 2}
.picker>*:nth-child(1),.picker>*:nth-child(2){grid-column:span 3}
@media(max-width:900px){
  .picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .picker>*,.picker>*:nth-child(1),.picker>*:nth-child(2){grid-column:span 1}
  .picker>*:first-child{grid-column:1/-1;aspect-ratio:16/10}
}

.catview{display:none}
.catview.active{display:block}
.picker-wrap.hidden{display:none}

.backlink{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line-l);background:var(--paper);
  font-size:14px;font-weight:600;letter-spacing:0;
  color:var(--t-body);transition:border-color .2s,color .2s,gap .28s var(--e-out);
}
.backlink:hover{border-color:var(--ink);color:var(--t-strong);gap:13px}

.cathead{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;
  padding-bottom:15px;margin:16px 0 18px;border-bottom:1px solid var(--line-l);
}
@media(max-width:640px){.cathead{grid-template-columns:1fr;gap:12px}}
.catcount{text-align:right}
@media(max-width:640px){.catcount{text-align:left}}
.catcount dt{font-size:13px;font-weight:500;letter-spacing:0;color:var(--t-mute)}
.catcount dd{font-family:var(--disp);font-size:clamp(26px,3vw,40px);font-weight:900;line-height:.85;color:var(--t-strong);margin-top:5px}

.catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-gap)}
@media(max-width:1180px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.grouphead{
  grid-column:1/-1;display:flex;align-items:center;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-l);
  font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);font-weight:800;
  text-transform:uppercase;color:var(--t-strong);
}
.grouphead:first-child{margin-top:0;padding-top:0;border-top:0}
.catgrid>[hidden]{display:none}   /* filtered-out group headings (display:flex above beats [hidden]) */
.grouphead::after{content:'';flex:1;height:1px;background:var(--line-l)}

.empty{grid-column:1/-1;padding:48px 24px;text-align:center;background:var(--concrete);border-radius:var(--r-md)}
.empty p{font-size:var(--fs-sm);color:var(--t-mute);max-width:44ch;margin:8px auto 0}

/* ── product-detail.html ───────────────────────────────────────────── */

.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start}
@media(max-width:940px){.pdp{grid-template-columns:1fr;gap:22px}}

.gal{position:sticky;top:calc(var(--nav-vis) + 8px);transition:top .5s var(--e-out)}
@media(max-width:940px){.gal{position:static}}
.gal-main{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--concrete);margin-bottom:8px;border-radius:var(--r-lg);isolation:isolate}
.gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal-badge{
  position:absolute;top:12px;left:12px;z-index:3;background:rgba(10,10,10,.82);color:#fff;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;
}
.gal-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media(max-width:540px){.gal-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.thumb{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--concrete);border-radius:var(--r-sm);
  border:2px solid transparent;cursor:pointer;padding:0;transition:border-color .2s;
}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb[aria-current='true']{border-color:var(--ink)}
.thumb:hover{border-color:var(--blaze)}

.pdp-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-l);border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;margin:16px 0}
@media(max-width:480px){.pdp-spec{grid-template-columns:1fr}}
.pdp-spec > div{background:var(--paper);padding:12px 14px}
.pdp-spec dt{font-size:13px;font-weight:500;letter-spacing:0;color:var(--t-mute);margin-bottom:4px}
.pdp-spec dd{font-size:14.5px;font-weight:600;color:var(--t-strong);line-height:1.35}
/* Five specs: the last runs across both columns, so no cell sits empty. */
.pdp-spec > div:last-child:nth-child(odd){grid-column:1/-1}
.pdp-link{display:inline-block;padding-block:11px;margin-block:-11px;text-decoration:underline;text-decoration-color:var(--line-l);text-underline-offset:3px;transition:color .2s}
.pdp-link:hover{color:var(--accent-text)}

.quote{background:var(--ink);color:var(--d-body);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);margin:18px 0 0}
.quote .d3{color:#fff;margin-bottom:9px}
.quote p{font-size:var(--fs-sm);line-height:1.55;color:var(--d-mute);margin-bottom:14px;max-width:52ch}
.quote-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0;margin-bottom:14px;border-block:1px solid var(--line-d)}
@media(max-width:480px){.quote-meta{grid-template-columns:1fr 1fr}}
.quote-meta dt{font-size:13px;font-weight:500;letter-spacing:0;color:var(--d-mute);margin-bottom:3px}
.quote-meta dd{font-size:14.5px;font-weight:600;color:#fff}
.quote-cta{display:flex;gap:9px;flex-wrap:wrap}

.pdp-sec{margin-top:var(--sp-sec);padding-top:var(--sp-sec-tight);border-top:1px solid var(--line-l)}
.pdp-sec > .kick{margin-bottom:12px}
.pdp-sec p{font-size:var(--fs-sm);line-height:1.65;color:var(--t-body);max-width:74ch;margin-bottom:10px}

/* WordPress: arriving from a product card (zali-ui.js photo carry). The
   head snippet marks <html> with pdp-carry before the first paint; from
   then the gallery is the static "carried" gallery: it takes the card
   photo's name and skips its entrance. products.js moves the name onto
   the element and drops the class once the page has loaded. */
.pdp-carry .pdp .gal-main{view-transition-name:pdp-photo}
.js.pdp-carry .pdp .gal.in{animation:none}

/* About this category: the short intro under the product grid. */
.cat-about{padding-top:0}
.cat-about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,3.4vw,52px);align-items:start;padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--line-l)}
@media(max-width:900px){.cat-about-grid{grid-template-columns:minmax(0,1fr)}}
.cat-about-copy p{font-size:var(--fs-body);line-height:1.7;color:var(--t-body);max-width:64ch}
.cat-about-copy p+p{margin-top:12px}
.cat-about-copy a{color:var(--t-strong);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-l);text-underline-offset:3px;transition:text-decoration-color .2s}
.cat-about-copy a:hover{text-decoration-color:currentColor}