/* Products index, matching the approved grid-and-list artifact. Written for
   the current markup only: nothing survives from the previous design. Header
   and footer are the theme's (theme/core.css). */

.listing{width:100%}

/* ── Header band ────────────────────────────────────────────────────────── */
.listing__header{position:relative;overflow:hidden;border-radius:20px;
  background:var(--band);color:#fff;min-height:380px;display:flex;
  align-items:center;width:calc(100% - 44px);max-width:1136px;
  margin:22px auto;box-shadow:var(--lift-hi)}
.listing__header::after{content:"";position:absolute;inset:0;pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse 54% 58% at 90% 4%,color-mix(in srgb,var(--gold) 19%,transparent),transparent 56%),
             radial-gradient(ellipse 58% 56% at 2% 94%,color-mix(in srgb,var(--cyan) 15%,transparent),transparent 54%)}
.listing__header-inner{position:relative;z-index:2;width:100%}
.listing__header-body{width:54%;padding:44px 46px;text-align:left}
.listing__kick{display:block;font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.listing__title{font-family:var(--font-display);color:#fff;
  font-size:clamp(23px,3vw,33px);font-weight:800;line-height:1.16;
  letter-spacing:-.015em;text-wrap:balance;margin:0}
.listing__desc{margin:11px 0 0;font-size:14.5px;color:rgba(255,255,255,.8);max-width:42ch;
  text-wrap:balance}

/* One piece, cropped to its ink, flush in the card's bottom-right corner. */
.listing__scene{position:absolute;inset:0;z-index:1;pointer-events:none}
.listing__scene .illus{position:absolute;bottom:-15px;right:0;width:60%;
  max-width:680px;max-height:100%;height:auto;flex:initial}

/* ── Toolbar (dropdown + count + labelled view toggle) ──────────────────── */
/* Centred to the card width, in the page's flow: it scrolls away with the
   page, its dropdown above the cards below it. */
.ptools{position:relative;z-index:4;width:calc(100% - 44px);
  max-width:1136px;margin:0 auto}
.ptools__in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:none;padding:13px 0}
.ptools__clear{font-size:12px;font-weight:800;color:var(--blue);text-decoration:none}
.ptools__spacer{flex:1}
.ptools__count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.cat-dropdown{position:relative}
.cat-dropdown__toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--bg);color:var(--ink);font-size:12.5px;font-weight:800}
.cat-dropdown__toggle:hover{border-color:color-mix(in oklab,var(--blue) 40%,var(--border))}
.dd-icon{width:15px;height:15px;flex:none}
.dd-icon svg,.cat-dropdown__art svg{width:20px;height:20px;display:block}
.cat-dropdown__toggle .dd-icon:has(svg){width:20px;height:20px}
.cat-dropdown__art{width:20px;height:20px;flex:none}
.dd-chevron{width:10px;height:10px;opacity:.7;transition:transform .2s}
.cat-dropdown--open .dd-chevron{transform:rotate(180deg)}
.cat-dropdown__menu{display:none;position:absolute;top:calc(100% + 8px);left:0;
  min-width:240px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--lift-hi);padding:6px;z-index:9}
.cat-dropdown--open .cat-dropdown__menu{display:block}
.cat-dropdown__item{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:9px;color:var(--muted);font-size:13px;font-weight:700;
  text-decoration:none}
.cat-dropdown__item:hover{background:var(--surface);color:var(--ink)}
.cat-dropdown__item--active{background:color-mix(in oklab,var(--blue) 11%,transparent);
  color:var(--blue)}
.cat-dropdown__item svg{width:15px;height:15px;flex:none}
.cat-dropdown__item__count{margin-left:auto;font-size:11px;font-weight:800;
  color:var(--muted)}

.vtoggle{display:flex;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:9px;padding:3px}
[data-theme="dark"] .vtoggle{background:rgba(75,120,210,.12)}
.vtoggle button{border:0;background:transparent;padding:5px 9px;border-radius:7px;
  display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;
  font-size:12px;font-family:var(--font-body);cursor:pointer}
.vtoggle button[aria-pressed="true"]{background:var(--card);color:var(--ink);
  box-shadow:var(--lift)}
.vtoggle svg{width:14px;height:14px}

/* All content rows share the hero card's exact edges. */
.prow-wrap{width:calc(100% - 44px);max-width:1136px;margin:0 auto}

/* ── Type strip ─────────────────────────────────────────────────────────── */
.ptypes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px 0 4px}
.ptype{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:15px;
  background:var(--card);border:1px solid var(--border);text-decoration:none;
  color:inherit;box-shadow:var(--lift);
  transition:transform .35s,box-shadow .35s,border-color .35s}
.ptype:hover{transform:translateY(-2px);box-shadow:var(--lift-hi);
  border-color:color-mix(in oklab,var(--blue) 34%,var(--border))}
.ptype--active{border-color:color-mix(in oklab,var(--blue) 46%,var(--border));
  background:color-mix(in oklab,var(--blue) 7%,var(--card))}
.ptype__ic{width:44px;height:44px;flex:none}
.ptype__ic svg{width:100%;height:100%;display:block}
.ptype b{display:block;font-family:var(--font-display);font-size:13.5px;
  font-weight:700;color:var(--ink)}
.ptype span span{font-size:11.5px;color:var(--muted)}

/* ── Section head ───────────────────────────────────────────────────────── */
.psect{padding:24px 0 34px}
.psect__title{font-family:var(--font-display);font-size:19px;font-weight:800;
  color:var(--ink);margin:0 0 3px}
.psect__title--sub{margin-top:30px}
/* A category heading links to its own page; it still reads as a heading. */
.psect__title a{color:inherit;text-decoration:none}
.psect__title a:hover{text-decoration:underline;text-underline-offset:3px}
.psect__lede{font-size:13.5px;color:var(--muted);margin:0 0 18px}

/* ── Grid view ──────────────────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:var(--lift);text-decoration:none;color:inherit;position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--lift-hi);
  border-color:color-mix(in oklab,var(--blue) 34%,var(--border))}
.pcard--feat{border-color:color-mix(in oklab,var(--gold) 52%,var(--border))}
.pcard__top{position:relative;padding:22px 20px 0;display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px}
.pcard__ic{width:78px;height:78px;flex:none}
.pcard__ic svg,.pcard__ic img{width:100%;height:100%;display:block;object-fit:contain;border-radius:12px}
.pcard__flag{font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:var(--gold-grad);color:var(--on-gold);white-space:nowrap}
.pcard__flag--soft{background:color-mix(in oklab,var(--blue) 12%,transparent);
  color:var(--blue)}
[data-theme="dark"] .pcard__flag--soft{background:color-mix(in srgb,var(--blue) 28%,transparent);color:color-mix(in oklab,var(--blue) 30%,#fff)}
.pcard__bd{padding:14px 20px 18px;flex:1}
.ptier{display:block;font-family:var(--font-display);font-size:10.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
[data-theme="dark"] .ptier{color:color-mix(in oklab,var(--blue) 45%,#fff)}
.pcard h3,.plrow h3{font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--ink);margin:3px 0 0;line-height:1.2}
.pcard__desc{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.pcard__save{margin-top:10px;font-size:10.5px;font-weight:800;color:var(--ok)}
.pcard__save s{color:var(--muted);font-weight:600;margin-left:4px}
.pcard__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--border)}
.pprice{font-family:var(--font-display);color:var(--ink);font-weight:700;
  font-size:25px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.pprice__c{font-size:14px}
.pprice small{display:block;font-family:var(--font-body);font-size:10.5px;
  font-weight:700;color:var(--muted);margin-top:4px}
.pprice small s{font-weight:600}
.pprice__from{display:block;font-family:var(--font-body);font-size:9.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:3px}
.pcta{display:inline-flex;align-items:center;gap:6px;padding:9px 17px;
  border-radius:9px;font-family:var(--font-body);font-size:12.5px;font-weight:800;
  text-decoration:none;white-space:nowrap;background:var(--blue);color:#fff;
  transition:transform .3s}
.pcta--gold{background:var(--gold-grad);color:var(--on-gold)}
.pcta--off{background:color-mix(in oklab,var(--muted) 18%,transparent);color:var(--muted);cursor:default}
.pcard:hover .pcta--off,.plrow:hover .pcta--off{transform:none}
.pcard:hover .pcta,.plrow:hover .pcta{transform:translateX(2px)}
.pcard__link{color:inherit;text-decoration:none}
.pcard__link::after{content:"";position:absolute;inset:0;z-index:1}
a.pcta{position:relative;z-index:2}
.pcta-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  justify-content:flex-end}
.pcta--ghost{background:color-mix(in oklab,var(--blue) 10%,transparent);
  color:var(--blue)}
[data-theme="dark"] .pcta--ghost{background:color-mix(in srgb,var(--blue) 24%,transparent);color:color-mix(in oklab,var(--blue) 30%,#fff)}
.pcta-row .pcta{padding:9px 13px}

/* ── List view: a different density, not a squashed card ────────────────── */
.plist{display:flex;flex-direction:column;gap:10px}
.plrow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;
  gap:18px;align-items:center;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px 18px;text-decoration:none;color:inherit;
  box-shadow:var(--lift);position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s}
.plrow:hover{transform:translateY(-1px);box-shadow:var(--lift-hi);
  border-color:color-mix(in oklab,var(--blue) 34%,var(--border))}
.plrow::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold-grad);opacity:0;
  transition:opacity .35s}
.plrow--feat::before,.plrow:hover::before{opacity:1}
.plrow__ic{width:60px;height:60px;flex:none}
.plrow__ic svg,.plrow__ic img{width:100%;height:100%;display:block;object-fit:contain}
.plrow h3{font-size:16px}
.plrow__desc{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plrow__buy{display:flex;align-items:center;gap:16px;justify-content:flex-end}
.plrow .pprice{font-size:21px;text-align:right}

/* ── Category cards: the product card, with the kinds where the price goes ── */
.pmix{font-family:var(--font-display);color:var(--ink);font-weight:700;
  font-size:17px;line-height:1;white-space:nowrap}
.pmix small{display:block;font-family:var(--font-body);font-size:10.5px;
  font-weight:700;color:var(--muted);margin-top:5px;white-space:normal}
.plrow .pmix{text-align:right}

.hide{display:none !important}

/* ── Misc ───────────────────────────────────────────────────────────────── */
.empty{max-width:1180px;margin:0 auto;padding:40px 22px;text-align:center;
  color:var(--muted);font-size:14px}

@media (max-width:1000px){
  .ptypes{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .listing__header{min-height:0}
  .listing__header-body{width:100%;padding:30px 26px 180px}
  .listing__scene .illus{width:82%;max-width:none}
}
@media (max-width:760px){
  .plrow{grid-template-columns:52px minmax(0,1fr);row-gap:12px}
  .plrow__buy{grid-column:1/-1}
  .plrow__buy{justify-content:space-between}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .ptypes{grid-template-columns:1fr}
  .ptools{top:96px}
}
@media (prefers-reduced-motion:reduce){
  .ptype,.pcard,.plrow,.pcta{transition:none}
  .ptype:hover,.pcard:hover,.plrow:hover{transform:none}
  .pcard:hover .pcta,.plrow:hover .pcta{transform:none}
}

/* On a phone the catalogue's band keeps the original storefront hero's room, as every band does. */
@media (max-width:560px){.listing__header-body{padding:26px 20px 168px}}