/* ---------- category page ---------- */
.cat-page{padding-top:calc(38px + 70px + 30px);padding-bottom:clamp(60px,8vw,110px)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:26px}
.cat-head h1{font-size:clamp(32px,3.6vw,54px);font-weight:300;letter-spacing:-.02em;line-height:1.05}
.cat-head p{font-size:15.5px;color:#4b4741;margin-top:10px;max-width:56ch}
.cat-quiz{flex:none;display:flex;align-items:center;gap:18px;padding:16px 20px;background:var(--ink);color:#fff;text-align:start;transition:background .3s}
.cat-quiz:hover{background:var(--bordo)}
.cat-quiz span{display:block;font-size:13px;color:rgba(255,255,255,.75)}
.cat-quiz b{display:block;font-weight:500;font-size:15.5px;color:#fff;margin-bottom:2px}
.cat-quiz svg{width:20px;height:20px;flex:none;transition:transform .4s var(--ease)}
.cat-quiz:hover svg{transform:translateX(-4px)}

.cat-types{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:28px}
.cat-types::-webkit-scrollbar{display:none}
.h-chip{flex:none;height:40px;padding-inline:18px;border:1px solid var(--line);border-radius:40px;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,border-color .3s}
.h-chip:hover{border-color:var(--ink)}
.h-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.h-chip span{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}

.cat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}

/* filters */
.cat-filters{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow-y:auto;scrollbar-width:none;padding-bottom:12px}
.cat-filters::-webkit-scrollbar{display:none}
.f-head{display:none}
.f-group{border:0;border-top:1px solid var(--line);padding:18px 0 20px;margin:0}
.f-group legend{float:right;width:100%;font-size:14px;font-weight:500;margin-bottom:12px}
.f-group > :not(legend){clear:both}
.f-radio,.f-check{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:6px 0;cursor:pointer}
.f-radio span{margin-inline-start:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.f-radio.empty{color:#b3aea5}
.f-radio input,.f-check input{accent-color:var(--ink);width:17px;height:17px;margin:0}
.f-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.f-size{height:40px;border:1px solid var(--line);font-size:13.5px;transition:background .25s,color .25s,border-color .25s}
.f-size:hover:not(:disabled){border-color:var(--ink)}
.f-size.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.f-size:disabled{color:#c2bdb4;cursor:not-allowed}
.f-help{margin-top:12px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.f-foot{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.f-apply{display:none}
.f-reset{font-size:13.5px;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.f-scrim{display:none}
.muted{color:var(--muted);font-size:13px}

/* results bar */
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cat-filter-btn{display:none;align-items:center;gap:8px;height:42px;padding-inline:16px;border:1px solid var(--ink);font-size:14px}
.cat-filter-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}
.cat-count{font-size:14px;color:var(--muted)}
.cat-sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.cat-sort select{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:1px solid var(--line);height:40px;padding-inline:12px 30px}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 4px}
.cat-chips:empty{padding:0}
.a-chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding-inline:12px;background:var(--stone);font-size:13px}
.a-chip span[aria-hidden]{font-size:15px;opacity:.6}
.a-clear{font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}

/* product grid */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px;padding-top:22px}
.pc{position:relative;animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}}
.pc-media{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--stone);overflow:hidden;padding:10%}
.pc-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 1s var(--ease)}
.pc:hover .pc-media img{transform:scale(1.05)}
.pc .badge{position:absolute;top:12px;inset-inline-start:12px;z-index:1}
.pc-cmp{position:absolute;top:12px;inset-inline-end:12px;z-index:1;display:flex;align-items:center;gap:6px;font-size:12.5px;background:rgba(246,244,240,.92);padding:5px 9px;cursor:pointer;opacity:0;transition:opacity .3s}
.pc:hover .pc-cmp,.pc-cmp:focus-within,.pc-cmp:has(input:checked){opacity:1}
.pc-cmp input{accent-color:var(--ink);width:15px;height:15px;margin:0}
.pc-cmp:has(input:disabled){display:none}
.pc-body{padding-top:14px}
.pc-body small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.pc-body h3{font-size:15.5px;font-weight:500;line-height:1.35}
.pc-body h3 a[dir="ltr"]{display:block;text-align:right}
.pc-price{display:flex;align-items:baseline;gap:10px;margin-top:8px;font-variant-numeric:tabular-nums}
.pc-price b{font-weight:500;font-size:16px}
.pc-price s{font-size:13px;color:var(--muted)}
.pc-price .call{font-size:14px;color:var(--muted)}
.pc-month{font-size:12.5px;color:var(--muted);margin-top:2px}
.pc-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:10px}
.pc-sizes span{min-width:26px;height:22px;padding-inline:5px;border:1px solid var(--line);display:inline-grid;place-items:center;color:var(--ink)}
.pc-sizes span.hit{background:var(--ink);color:#fff;border-color:var(--ink)}

.cat-empty{text-align:center;padding:60px 20px;background:var(--stone);margin-top:22px}
.cat-empty h2{font-size:24px;font-weight:400}
.cat-empty p{color:#4b4741;margin:10px auto 22px;max-width:44ch}
.cat-empty div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cat-page{padding-top:calc(38px + 68px + 16px)}
  .cat-head{flex-direction:column;align-items:stretch;gap:18px}
  .cat-quiz{justify-content:space-between}
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .cat-filter-btn{display:inline-flex}
  .cat-count{display:none}
  .cat-filters{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:95;width:min(380px,90vw);max-height:none;background:var(--paper);padding:0 20px 20px;transform:translateX(105%);transition:transform .5s var(--ease)}
  .cat-filters.open{transform:none}
  .f-head{display:flex;justify-content:space-between;align-items:center;height:68px;position:sticky;top:0;background:var(--paper);z-index:1}
  .f-head b{font-size:18px;font-weight:500}
  .f-close{width:40px;height:40px;display:grid;place-items:center}
  .f-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.4}
  .f-foot{position:sticky;bottom:-20px;background:var(--paper);padding-bottom:20px}
  .f-apply{display:flex;justify-content:center;height:50px}
  .f-reset{align-self:center}
  .f-scrim{display:block;position:fixed;inset:0;z-index:94;background:rgba(12,12,13,.45);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
  .f-scrim.on{opacity:1;visibility:visible}
}
@media (max-width:600px){
  .cat-grid{gap:26px 10px}
  .pc-media{padding:6%}
  .pc-cmp{opacity:1;top:8px;inset-inline-end:8px;font-size:11.5px;padding:4px 7px}
  .pc .badge{top:8px;inset-inline-start:8px;font-size:9.5px;padding:4px 7px}
  .pc-body h3{font-size:13.5px}
  .pc-price{flex-wrap:wrap;gap:4px 8px}
  .pc-price b{font-size:14.5px}
  .pc-month{font-size:11.5px}
  .cat-sort{font-size:0;gap:0}
  .cat-sort select{font-size:13.5px}
}