.page-products svg.ln{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter}
.page-products svg.ln *{vector-effect:non-scaling-stroke}
.page-products {
--bg:#f3eee5; --bg-2:#ece5d9; --card:#f7f3ec;
--ink:#15160f; --ink-2:#3a3a31; --muted:#6a665b;
--line:rgba(21,22,15,.14); --line-2:rgba(21,22,15,.28);
--copper:#9a5334; --oxid:#33443a; --ok:#3d7a55;
--head:linear-gradient(180deg, rgba(150,146,132,.94), rgba(118,114,101,.94)); --head-ink:#f4efe6;
--disp:'Space Grotesk', system-ui, sans-serif;
--mono:'IBM Plex Mono', ui-monospace, monospace;
--ease:cubic-bezier(.2,.8,.2,1);
color-scheme:light;
.cat-head{padding:170px 0 40px; overflow-x:clip}
.head-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.kicker{display:inline-block; font:500 14px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
h1{margin:16px 0 0; font-weight:500; font-size:clamp(46px,6vw,84px); line-height:.98; letter-spacing:-.02em}
h1 .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
h1 .w span{display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease)}
.ready h1 .w span{transform:none}
.ready h1 .w:nth-child(2) span{transition-delay:.07s} .ready h1 .w:nth-child(3) span{transition-delay:.14s}
.lead{max-width:48ch; margin:20px 0 0; font-size:19px; color:var(--ink-2)}
.readout{margin:30px 0 0; max-width:520px; border:1px solid var(--line-2); padding:6px 22px; font:500 13.5px var(--mono); letter-spacing:.1em}
.readout div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line)}
.readout div:last-child{border-bottom:0}
.readout dt{color:var(--muted)} .readout dd{margin:0; text-align:right}

/* ---------- 3D index deck ---------- */
.deck{position:relative; height:430px; perspective:1700px}
.stack{position:absolute; left:62%; top:62%; width:0; height:0; transform-style:preserve-3d; transform:rotateX(var(--rx,16deg)) rotateY(var(--ry,-26deg)); transition:transform 1.2s var(--ease)}
.idx{position:absolute; left:-170px; top:-118px; width:340px; height:236px; display:flex; flex-direction:column; justify-content:space-between; padding:16px 18px; border:1px solid var(--line-2); background:var(--card); cursor:pointer; text-align:left;
  transform:translate3d(calc(var(--d) * -64px), calc(var(--d) * -40px), calc(var(--d) * -46px)); opacity:calc(1 - var(--d) * .13);
  transition:transform .9s var(--ease), opacity .6s, border-color .3s, box-shadow .4s; box-shadow:0 18px 30px -24px rgba(0,0,0,.35)}
.idx[data-hide]{opacity:0; pointer-events:none}
.idx.front{border-color:var(--ink); box-shadow:0 30px 50px -28px rgba(0,0,0,.45)}
.idx:hover{border-color:var(--ink)}
.idx-top, .idx-bot{display:flex; justify-content:space-between; align-items:baseline; font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.idx-bot{gap:12px; color:var(--ink); font-size:12.5px; line-height:1.4} .idx .go{flex:none}
.idx > svg{display:block; width:170px; height:110px; margin:0 auto; color:var(--ink)}
.idx .go svg{width:14px; height:14px}
.idx .go{display:inline-flex; align-items:center; gap:6px; color:var(--copper)}
.idx:not(.front) .go{visibility:hidden}
.ready .idx{animation:deal .9s var(--ease) backwards; animation-delay:calc(.3s + var(--n) * 50ms)}
@keyframes deal{from{opacity:0; transform:translate3d(0,-120px,140px) rotateX(30deg)}}
.deck-ctrl{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; gap:16px; font:500 12.5px var(--mono); letter-spacing:.14em; color:var(--muted)}
.deck-ctrl button{width:38px; height:38px; border:1px solid var(--line-2); background:none; cursor:pointer; display:grid; place-items:center; color:var(--ink)}
.deck-ctrl button:hover{border-color:var(--ink)}

/* ---------- Filter bar ---------- */
.filter-sec{position:relative; padding:0 0 10px}
.filter-bar{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:22px 0}
.chips{position:relative; display:flex; flex-wrap:wrap; gap:8px}
.f-chip{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 20px; border:1px solid var(--line-2); background:transparent; cursor:pointer; white-space:nowrap;
  font:500 14px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); transition:color .35s, border-color .3s}
.f-chip:hover{border-color:var(--ink)}
.f-chip .n{color:var(--muted); transition:color .35s}
.f-chip[aria-pressed="true"]{color:var(--bg); border-color:var(--ink)}
.f-chip[aria-pressed="true"] .n{color:color-mix(in srgb, var(--bg) 70%, transparent)}
.chip-ind{position:absolute; z-index:0; left:0; top:0; background:var(--ink); transition:transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease); pointer-events:none}
.tools{display:grid; grid-template-columns:minmax(220px,1.3fr) minmax(250px,1fr) auto auto 1fr; gap:10px; align-items:stretch; margin-top:14px}
.box{display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; border:1px solid var(--line-2); background:transparent; transition:border-color .25s}
.box:focus-within, .box:hover{border-color:var(--ink)}
.box input, .box select{width:100%; min-width:0; height:100%; border:0; outline:0; background:none; font:500 14px var(--mono); letter-spacing:.12em; text-transform:uppercase}
.box input::placeholder{color:var(--muted)}
.box .lbl{flex:none; font:500 12px var(--mono); letter-spacing:.14em; color:var(--muted)}
.box select{appearance:none; cursor:pointer; padding-right:22px; background:linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 6px) 50% / 6px 6px no-repeat, linear-gradient(135deg, var(--ink) 50%, transparent 50%) 100% 50% / 6px 6px no-repeat}
.box select option{text-transform:none}
.range input{width:72px; text-align:center}
.range .dash{color:var(--muted)}
.check{cursor:pointer; user-select:none; font:500 14px var(--mono); letter-spacing:.12em; text-transform:uppercase}
.check{position:relative} .check input{position:absolute; opacity:0; width:1px; height:1px; left:0; top:0}
.check .sq{position:relative; flex:none; width:18px; height:18px; border:1.5px solid var(--ink)}
.check .sq::after{content:""; position:absolute; inset:3px; background:var(--ink); transform:scale(0); transition:transform .25s var(--ease)}
.check input:checked + .sq::after{transform:scale(1)}
.check input:focus-visible + .sq{outline:2px solid var(--copper); outline-offset:2px}
.count{justify-self:end; align-self:center; font:500 13.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.count b{color:var(--ink); font-weight:600}
.active{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px}
.active:empty{display:none}
.tag{display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 10px 0 14px; border:1px solid var(--line-2); background:var(--card); cursor:pointer; font:500 12.5px var(--mono); letter-spacing:.12em; text-transform:uppercase}
.tag:hover{border-color:var(--ink)}
.reset{border:0; background:none; cursor:pointer; padding:0 6px; font:500 12.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; color:var(--ink-2)}

/* ---------- Product grid (site card style) ---------- */
.grid-sec{padding:34px 0 90px}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:38px 34px}
.p-card{position:relative; display:flex; flex-direction:column; perspective:900px}
.p-media{position:relative; display:block; aspect-ratio:4/3; border:1px solid var(--line-2); background:var(--card); overflow:hidden; transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)); transition:transform .5s var(--ease), border-color .3s}
.p-card:hover .p-media{border-color:var(--ink)}
.p-media svg.ln{position:absolute; left:6%; top:4%; width:88%; height:82%; color:var(--ink); transition:transform .6s var(--ease)}
.p-media .floor{position:absolute; left:28%; right:28%; bottom:14%; height:6%; border-radius:50%; background:var(--ink); opacity:.1; transition:transform .6s var(--ease), opacity .6s}
.p-card:hover .p-media svg.ln{transform:translateY(-8px)}
.p-card:hover .floor{transform:scale(.8); opacity:.06}
.p-badges{position:absolute; left:14px; top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; z-index:2}
.chip{display:inline-block; padding:7px 12px; font:500 12.5px var(--mono); letter-spacing:.14em; text-transform:uppercase}
.chip-solid{background:var(--ink); color:var(--bg)}
.chip-copper{border:1px solid var(--line-2); color:var(--copper); background:var(--card)}
.p-quick{position:absolute; left:14px; right:14px; bottom:14px; z-index:2; transform:translateY(calc(100% + 20px)); transition:transform .5s var(--ease)}
.p-card:hover .p-quick, .p-card:focus-within .p-quick{transform:none}
@media (hover:none){ .p-quick{transform:none} }
.btn-ink{display:flex; align-items:center; justify-content:center; gap:10px; height:46px; background:var(--ink); color:var(--bg); font:500 13.5px var(--mono); letter-spacing:.18em; text-transform:uppercase}
.btn-ink svg{transition:transform .35s var(--ease)}
.btn-ink:hover svg{transform:translateX(4px)}
.p-body{padding-top:18px}
.p-cat{display:block; font:500 13px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1.6}
.p-name{display:block; margin-top:8px; font-size:20px; line-height:1.3; min-height:2.6em}
.p-name:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.p-price{display:flex; align-items:baseline; gap:12px; margin-top:14px; font:600 21px var(--mono); letter-spacing:.04em}
.p-old{font-weight:500; font-size:15px; color:var(--muted); text-decoration:line-through}
.p-stock{display:block; margin-top:12px; font:500 13px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ok)}
.empty{grid-column:1/-1; padding:60px 20px; border:1px dashed var(--line-2); text-align:center}
.empty h3{margin:0; font-weight:500; font-size:24px}
.empty p{margin:10px auto 22px; max-width:46ch; color:var(--ink-2)}
.more{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:60px}
.more p{margin:0; font:500 13px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.bar{width:220px; height:2px; background:var(--line)} .bar i{display:block; height:100%; background:var(--ink); transition:width .6s var(--ease)}
.btn-line{display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border:1px solid var(--ink); background:none; cursor:pointer; font:500 14px var(--mono); letter-spacing:.16em; text-transform:uppercase}
.btn-line:hover{background:var(--ink); color:var(--bg)}

footer{border-top:1px solid var(--line-2); padding:26px 0 40px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font:500 12.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.foot button{border:0; background:none; padding:0; cursor:pointer; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-decoration:underline; text-underline-offset:4px}

.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}

@media (max-width:1180px){ .product-grid{grid-template-columns:repeat(3,1fr)} .tools{grid-template-columns:1fr 1fr; } .count{justify-self:start; grid-column:1/-1} }
@media (max-width:900px){
  .head-grid{grid-template-columns:1fr}
  .deck{height:360px}
  .product-grid{grid-template-columns:repeat(2,1fr); gap:28px 16px}
}
@media (max-width:600px){
  .container{padding:0 16px}
  .cat-head{padding-top:130px}
  .chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; margin-right:-16px}
  .f-chip{height:42px; padding:0 14px; font-size:12.5px}
  .tools{grid-template-columns:1fr}
  .deck{height:300px}
  .stack{scale:.6; left:60%; top:58%}
  .p-name{font-size:16px}
  .p-price{font-size:17px}
  .p-cat, .p-stock{font-size:11px}
  .chip{font-size:11px; padding:5px 8px}
}
html.still *{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none} h1 .w span{transform:none}
}

}

html[data-theme="dark"] .page-products {
--bg:#15160f; --bg-2:#1b1c15; --card:#1d1e17;
--ink:#f2ece1; --ink-2:#d6cfc2; --muted:#a39c8e;
--line:rgba(242,236,225,.12); --line-2:rgba(242,236,225,.26);
--copper:#d1825c; --ok:#7cc497;
--head:linear-gradient(180deg, rgba(40,41,33,.94), rgba(29,30,23,.94)); --head-ink:#f2ece1;
color-scheme:dark;
}