/* CATALOG styles: every class is .cat-* ; colours/shape/depth only from shared tokens */
.cat-root{color:var(--ink);font-family:var(--font-body);overflow-x:clip}
.cat-root *,.cat-root *::before,.cat-root *::after{box-sizing:border-box}
.cat-root [hidden]{display:none!important}
.cat-wrap{max-width:var(--wrap);margin:0 auto;padding:var(--s6) var(--gutter) var(--s8)}
.cat-sec{margin-top:var(--s7)}
.cat-sec:first-child{margin-top:0}
.cat-h2{font-family:var(--font-head);font-size:var(--fs-xl);margin:0 0 var(--s5);letter-spacing:-.01em}

/* ---------- hero ---------- */
.cat-hero{position:relative;background:var(--grad-hero);color:var(--accent-ink);overflow:hidden;isolation:isolate}
.cat-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent-ink) 5%,transparent) 0 1px,transparent 1px 72px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--accent-ink) 5%,transparent) 0 1px,transparent 1px 72px);
  mask-image:linear-gradient(180deg,black,transparent 90%)}
.cat-hero-in{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--gutter) var(--s7);display:grid;gap:var(--s6);align-items:center}
.cat-hero-txt{min-width:0}
.cat-crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-sm);color:color-mix(in srgb,var(--accent-ink) 70%,transparent);margin-bottom:var(--s4)}
.cat-crumbs a{color:inherit;text-decoration:none;padding:var(--s2) 0;min-height:44px;display:inline-flex;align-items:center}
.cat-crumbs a:hover{color:var(--accent-2)}
.cat-crumbs i{font-style:normal;opacity:.5}
.cat-crumbs span{color:var(--accent-ink);overflow-wrap:anywhere}
.cat-kicker{display:inline-block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent-2) 55%,transparent);padding:var(--s1) var(--s3);border-radius:99px}
.cat-h1{font-family:var(--font-head);font-size:var(--fs-hero);line-height:1.04;margin:var(--s4) 0 var(--s3);letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:balance}
.cat-lead{font-size:var(--fs-lg);margin:0;color:color-mix(in srgb,var(--accent-ink) 80%,transparent)}
.cat-desc{margin-top:var(--s5);padding:var(--s4) var(--s5);border-radius:var(--r-lg);background:color-mix(in srgb,var(--accent-ink) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent-ink) 18%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-size:var(--fs-md);line-height:1.65;color:color-mix(in srgb,var(--accent-ink) 90%,transparent);max-width:68ch}
.cat-desc.is-clamp{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(black 70%,transparent);mask-image:linear-gradient(black 70%,transparent)}
.cat-desc h1,.cat-desc h2,.cat-desc h3,.cat-desc h4{font-family:var(--font-head);font-size:var(--fs-lg);margin:0 0 var(--s2);color:var(--accent-ink)}
.cat-desc p{margin:0 0 var(--s3)}
.cat-desc ul,.cat-desc ol{padding-left:1.2em}
.cat-desc a{color:var(--accent-2)}
.cat-desc img{max-width:100%;height:auto}
.cat-desc table{display:block;max-width:100%;overflow-x:auto}
.cat-desc-toggle{margin-top:var(--s3);min-height:44px;padding:0 var(--s5);border-radius:99px;border:1px solid color-mix(in srgb,var(--accent-ink) 40%,transparent);background:transparent;color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}
.cat-desc-toggle:hover{background:color-mix(in srgb,var(--accent-ink) 12%,transparent)}
.cat-hero-art{--rx:0deg;--ry:0deg;position:relative;justify-self:center;width:min(72%,360px);aspect-ratio:1;perspective:var(--persp);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s var(--ease)}
.cat-hero-art.is-tilt{transition:transform .06s linear}
.cat-hero-plate{position:absolute;inset:6%;border-radius:var(--r-xl);background:color-mix(in srgb,var(--accent-ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-ink) 30%,transparent);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-3);transform:translateZ(0)}
.cat-hero-glow{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 45%,transparent),transparent);filter:blur(14px);transform:translateZ(-40px)}
.cat-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:14%;transform:translateZ(70px) scale(1.06);filter:drop-shadow(0 28px 22px color-mix(in srgb,black 45%,transparent))}

/* ---------- toolbar ---------- */
.cat-bar{display:grid;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-2)}
.cat-field{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.cat-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.cat-q,.cat-sel,.cat-sort{width:100%;min-height:44px;padding:0 var(--s4);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-md);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent)}
.cat-q:focus-visible,.cat-sel:focus-visible,.cat-sort:focus-visible,.cat-chip:focus-visible,.cat-more:focus-visible,.cat-card-a:focus-visible,.cat-tile:focus-visible,.cat-desc-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cat-chips{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s4) 2px var(--s2);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cat-chip{flex:none;min-height:44px;padding:0 var(--s4);border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;box-shadow:var(--sh-1);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cat-chip small{color:var(--muted);font-weight:500;margin-left:var(--s1)}
.cat-chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.cat-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cat-chip.on small{color:inherit;opacity:.75}
.cat-status{margin:var(--s4) 0 var(--s4);color:var(--muted);font-size:var(--fs-sm)}

/* ---------- tiles (sub-categories) ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s5);perspective:var(--persp)}
.cat-tile{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:flex;align-items:center;gap:var(--s4);min-height:96px;padding:var(--s4);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);background:var(--grad-metal);border:1px solid var(--glass-edge);box-shadow:var(--sh-2);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);overflow:visible;min-width:0}
.cat-tile.is-tilt{transition:transform .06s linear,box-shadow var(--dur) var(--ease)}
.cat-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(180px 140px at var(--mx) var(--my),color-mix(in srgb,var(--accent-ink) 55%,transparent),transparent 70%);opacity:0;transition:opacity var(--dur)}
.cat-tile.is-tilt::after{opacity:.7}
.cat-tile:hover{box-shadow:var(--sh-3)}
.cat-tile-plate{position:absolute;left:var(--s4);top:50%;width:68px;height:68px;margin-top:-34px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);transform:translateZ(10px)}
.cat-tile-img{position:relative;flex:none;width:68px;height:68px;object-fit:contain;border-radius:var(--r-md);transform:translateZ(36px);filter:drop-shadow(0 10px 8px color-mix(in srgb,var(--ink) 30%,transparent))}
.cat-tile-body{display:flex;flex-direction:column;gap:var(--s1);min-width:0;transform:translateZ(22px)}
.cat-tile-name{font-family:var(--font-head);font-weight:600;font-size:var(--fs-md);line-height:1.25;overflow-wrap:anywhere}
.cat-tile-count{font-size:var(--fs-sm);color:var(--accent);font-weight:600}
.cat-tile-img+.cat-tile-body{}
.cat-tile:not(:has(.cat-tile-img)) .cat-tile-plate{display:none}

/* ---------- product grid + cards ---------- */
.cat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);perspective:var(--persp)}
.cat-card{min-width:0;display:block}
.cat-card-a{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;height:100%;min-height:280px;border-radius:var(--r-lg);text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);will-change:transform}
.cat-card-a.is-tilt{transition:transform .06s linear,box-shadow var(--dur) var(--ease)}
.cat-card-a:hover,.cat-card-a:focus-visible{box-shadow:var(--sh-3)}
.cat-card-stage{position:relative;display:block;aspect-ratio:1;margin:var(--s3) var(--s3) 0;border-radius:var(--r-md);background:var(--grad-metal);transform-style:preserve-3d}
.cat-card-plate{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 -12px 24px color-mix(in srgb,var(--ink) 8%,transparent)}
.cat-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;transform:translateZ(0);transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease);filter:drop-shadow(0 6px 6px color-mix(in srgb,var(--ink) 18%,transparent))}
.cat-card-noimg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--s4);font-family:var(--font-head);font-weight:600;color:var(--steel-2);overflow-wrap:anywhere}
.cat-card-meta{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) var(--s4) var(--s4);min-width:0}
.cat-card-cat{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);overflow-wrap:anywhere}
.cat-card-name{font-family:var(--font-head);font-weight:600;font-size:var(--fs-sm);line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-card-price{font-weight:700;color:var(--ink)}
.cat-card-glass{position:absolute;left:var(--s2);right:var(--s2);bottom:var(--s2);display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--sh-2);transform:translateZ(30px) translateY(calc(100% + var(--s4)));opacity:0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);pointer-events:none}
.cat-card-sum{font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.cat-card-sum:empty{display:none}
.cat-card-go{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
.cat-card-a:hover .cat-card-glass,.cat-card-a:focus-visible .cat-card-glass{transform:translateZ(30px) translateY(0);opacity:1}
.cat-card-a:hover .cat-card-img,.cat-card-a:focus-visible .cat-card-img{transform:translateZ(70px) scale(1.1) translateY(-6px);filter:drop-shadow(0 26px 18px color-mix(in srgb,var(--ink) 38%,transparent))}
@media (hover:none){
  /* touch: no hover, so the glass layer is a slim permanent footer */
  .cat-card-glass{position:static;transform:none;opacity:1;margin:0 var(--s2) var(--s2);padding:var(--s2) var(--s3);box-shadow:none;pointer-events:auto;margin-top:auto}
  .cat-card-sum{display:none}
}
.cat-empty{text-align:center;padding:var(--s7) var(--s4);border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-edge);color:var(--muted);margin:0}
.cat-morewrap{text-align:center;margin:var(--s6) 0 0}
.cat-more{min-height:48px;padding:0 var(--s6);border-radius:99px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;cursor:pointer;box-shadow:var(--sh-glow);transition:transform var(--dur) var(--ease)}
.cat-more:hover{transform:translateY(-3px)}

/* ---------- breakpoints (mobile-first) ---------- */
@media (min-width:600px){
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
  .cat-bar{grid-template-columns:2fr 1.4fr 1fr;align-items:end}
  .cat-card-name{font-size:var(--fs-md)}
}
@media (min-width:900px){
  .cat-hero-in{grid-template-columns:1.25fr .75fr;padding:var(--s8) var(--gutter)}
  .cat-hero-all .cat-hero-in{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1200px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cat-wrap,.cat-hero-in{padding-left:var(--s5);padding-right:var(--s5)}}
@media (max-width:599px){.cat-bar{grid-template-columns:1fr 1fr}.cat-field-q{grid-column:1/-1}.cat-bar:not(:has(.cat-sel)) .cat-field:last-child{grid-column:1/-1}.cat-card-a{min-height:0}}
@media (prefers-reduced-motion:reduce){
  .cat-card-a,.cat-tile,.cat-hero-art,.cat-card-img,.cat-card-glass{transition:none}
  .cat-card-a:hover .cat-card-img{transform:none}
}