/* Hero */
.page-hero .crumbs{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:24px}
.page-hero .crumbs a{color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
.page-hero .crumbs a:hover{color:var(--gold-2)}
.page-hero .crumbs .sep{opacity:.35;margin:0 8px}
.page-hero .crumbs span:not(.sep){color:#fff}
.hero-stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.hero-stats .stat .num{font-family:var(--serif);font-size:34px;font-weight:400;color:#fff;line-height:1;font-feature-settings:'tnum' 1}
.hero-stats .stat .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:8px}

/* Toolbar */
.toolbar-band{background:var(--bg-2);padding:18px 0}

.cab-toolbar{
  width:calc(100% - clamp(40px,7vw,96px));
  max-width:var(--container);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border:1px solid rgba(10,13,18,.08);
  border-radius:14px;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.18);
  padding:12px 18px;
}
.cab-toolbar .container{padding:0;max-width:none}
.cab-toolbar .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.cab-toolbar .left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cab-toolbar .pill{
  padding:9px 16px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s var(--ease);
}
.cab-toolbar .pill:hover{border-color:var(--ink);color:var(--ink)}
.cab-toolbar .pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.cab-toolbar .pill .count{font-size:10px;background:rgba(255,255,255,.18);padding:2px 7px;border-radius:7px;font-weight:700}
.cab-toolbar .pill:not(.active) .count{background:#fff;color:var(--muted);border:1px solid var(--line)}
.cab-toolbar .search{position:relative}
.cab-toolbar .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cab-toolbar input{
  padding:11px 16px 11px 40px;border:1px solid var(--line);border-radius:12px;
  font-size:13px;width:260px;background:#fff;transition:all .2s var(--ease);
}
.cab-toolbar input:focus{outline:none;border-color:var(--gold);width:320px}
@media(max-width:780px){
  .cab-toolbar input,.cab-toolbar input:focus{width:100%}
  .cab-toolbar .row{flex-direction:column;align-items:stretch;gap:12px}
}

/* Catalog */
.cab-catalog{padding:clamp(40px,5vw,60px) 0 clamp(60px,8vw,100px);background:var(--bg-2)}
.cab-group{margin-bottom:60px}
.cab-group:last-child{margin-bottom:0}
.cab-group .gr-head{
  margin-bottom:26px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.cab-group .gr-head .num{font-family:var(--serif);font-size:60px;font-weight:300;color:var(--gold);line-height:.85;font-feature-settings:'tnum' 1}
.cab-group .gr-head h2{font-family:var(--serif);font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1.05;margin:0}
.cab-group .gr-head h2 em{font-style:italic;color:var(--gold)}
.cab-group .gr-head .gr-count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
@media(max-width:680px){.cab-group .gr-head{grid-template-columns:1fr;gap:8px}.cab-group .gr-head .num{font-size:40px}}

.cab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1180px){.cab-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.cab-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cab-grid{grid-template-columns:1fr}}

.cab-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:all .25s var(--ease);position:relative;
}
.cab-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,0,0,.12)}
.cab-card .ph{aspect-ratio:1/1;background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line);display:grid;place-items:center}
.cab-card .ph img{width:100%;height:100%;object-fit:contain;padding:10%;transition:transform .5s var(--ease)}
.cab-card:hover .ph img{transform:scale(1.05)}
.cab-card .ph .noimg{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,#f6f6f7 0%,#ececee 100%);
  color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.cab-card .sizes-chip{
  position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;
  padding:4px 10px;border-radius:99px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.cab-card .td-chip{
  position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--ink);
  padding:4px 10px;border-radius:99px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(0,0,0,.08);display:inline-flex;align-items:center;gap:5px;
}
.cab-card .td-chip svg{flex-shrink:0}
.cab-card .body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.cab-card h3{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.25;margin:0 0 6px}
.cab-card .codes{font-size:11.5px;color:var(--muted);line-height:1.5;flex:1}
.cab-card .foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.cab-card .foot svg{transition:transform .2s var(--ease)}
.cab-card:hover .foot svg{transform:translateX(3px)}
.cab-empty{padding:80px 20px;text-align:center;color:var(--muted);display:none}
.cab-catalog.is-empty .cab-group{display:none}
.cab-catalog.is-empty .cab-empty{display:block}

/* Code explainer band */
.code-band{background:var(--ink);color:#fff;padding:clamp(50px,7vw,80px) 0}
.code-band h2{color:#fff;font-size:clamp(26px,3.4vw,40px);margin-bottom:8px}
.code-band h2 em{font-style:italic;color:var(--gold-2)}
.code-band .sub{color:rgba(255,255,255,.65);font-size:14px;max-width:60ch;margin-bottom:34px}
.code-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.code-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:22px}
.code-card .code{font-family:var(--serif);font-size:30px;letter-spacing:.04em}
.code-card .code b{color:var(--gold-2);font-weight:500}
.code-card p{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.6;margin-top:8px}
.std-dims{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.std-dims .it{padding:14px 18px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.std-dims .it .k{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.std-dims .it .v{font-family:var(--serif);font-size:19px;margin-top:4px}
@media(max-width:980px){.code-cards{grid-template-columns:1fr}.std-dims{grid-template-columns:repeat(2,1fr)}}