.catalog-hub{max-width:var(--max);margin:auto}
.hub-hero{min-height:520px;padding:clamp(56px,7vw,104px) var(--side) 58px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr);gap:clamp(48px,8vw,140px);align-items:end;border-bottom:1px solid var(--ink)}
.hub-hero h1{max-width:12ch;margin:16px 0 0;font-family:var(--display);font-size:clamp(52px,6.2vw,96px);line-height:.98;overflow-wrap:normal;text-wrap:balance}
.hub-hero-copy{display:grid;gap:28px;align-content:end}.hub-hero-copy>p{max-width:49ch;margin:0;color:var(--ink-2);font-size:18px;line-height:1.6}
.hub-search{display:grid;gap:8px}.hub-search span,.hub-result-toolbar label>span{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:850}.hub-search input{width:100%;height:58px;border:1px solid var(--ink);border-radius:8px;background:color-mix(in oklch,var(--surface) 91%,transparent);padding:0 18px;font-size:17px;box-shadow:6px 6px 0 var(--accent)}.hub-search input:focus{outline:3px solid color-mix(in oklch,var(--accent-dark) 32%,transparent);outline-offset:2px}
.hub-color-band{padding:24px var(--side);display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:center;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--surface) 74%,transparent);backdrop-filter:blur(14px)}.hub-color-band h2{margin:3px 0 0;font-family:var(--display);font-size:22px}.hub-colors{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:11px}.hub-all-colors{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);font-size:12px;font-weight:800;cursor:pointer}.hub-all-colors.is-active{background:var(--ink);border-color:var(--ink);color:var(--surface)}.hub-color{position:relative;width:34px;height:34px;border:1px solid color-mix(in oklch,var(--ink) 25%,transparent);border-radius:50%;background:var(--swatch);cursor:pointer;transition:transform .16s,box-shadow .16s}.hub-color:hover{transform:translateY(-2px)}.hub-color[aria-pressed="true"]{box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--ink)}.hub-color>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.hub-layout{padding:34px var(--side) 104px;display:grid;grid-template-columns:286px minmax(0,1fr);gap:34px;align-items:start}.hub-taxonomy{position:sticky;top:94px;max-height:calc(100dvh - 116px);overflow:auto;padding-right:8px;scrollbar-width:thin}.hub-taxonomy-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 0 14px;border-bottom:1px solid var(--ink);background:var(--canvas)}.hub-taxonomy-head strong{font-family:var(--display);font-size:19px}.hub-taxonomy-head button{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.hub-taxonomy details{border-bottom:1px solid var(--line)}.hub-taxonomy summary{min-height:52px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;list-style:none;cursor:pointer;font-size:14px;font-weight:800}.hub-taxonomy summary::-webkit-details-marker{display:none}.hub-taxonomy summary::before{content:"+";grid-column:2;grid-row:1;font-size:18px;font-weight:450}.hub-taxonomy details[open] summary::before{content:"−"}.hub-taxonomy summary small{grid-column:2;grid-row:1;margin-right:25px;color:var(--muted);font-size:10px}.hub-taxon-links{display:grid;padding:0 0 14px 12px}.hub-taxon-links button,.hub-taxon-main a{min-height:34px;border:0;border-radius:6px;background:transparent;color:var(--ink-2);font-size:12px;cursor:pointer}.hub-taxon-links>button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;text-align:left}.hub-taxon-links button small{color:var(--muted);font-size:9px}.hub-taxon-links button:hover,.hub-taxon-links button.is-active,.hub-taxon-main a:hover{background:color-mix(in oklch,var(--accent) 28%,var(--surface));color:var(--ink)}.hub-taxon-main{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px;margin-bottom:3px}.hub-taxon-main button{padding:0 8px;text-align:left;font-weight:800}.hub-taxon-main a{display:grid;place-items:center;border:1px solid var(--line);font-size:15px}.hub-mobile-tools{display:none}
.hub-results{min-width:0}.hub-result-toolbar{min-height:58px;display:flex;justify-content:space-between;gap:24px;align-items:start;margin-bottom:18px}.hub-result-toolbar>div{display:grid;gap:5px}.hub-result-toolbar p{margin:0;font-size:16px;font-weight:850}.hub-result-toolbar>div span{max-width:64ch;color:var(--muted);font-size:12px;line-height:1.4}.hub-result-toolbar label{display:grid;gap:5px}.hub-result-toolbar select{height:40px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:0 34px 0 11px}.hub-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hub-product-card .card-image{display:grid}.hub-product-card .card-title{font-size:16px}.hub-product-card .mini-swatch.is-active{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--ink)}.hub-product-card .card-footer{align-items:start}.hub-product-card .stock-status{max-width:9ch}
.hub-service-note{margin:0 var(--side) 70px;padding:clamp(42px,6vw,80px);display:grid;grid-template-columns:.7fr minmax(0,1.3fr) minmax(280px,.65fr);gap:clamp(36px,6vw,90px);align-items:start;border:1px solid var(--ink);border-radius:12px;background:linear-gradient(125deg,color-mix(in oklch,var(--accent) 20%,var(--surface)),color-mix(in oklch,var(--cyan) 22%,var(--surface)) 58%,color-mix(in oklch,var(--pink) 19%,var(--surface)))}.hub-service-note h2{max-width:17ch;margin:0;font-family:var(--display);font-size:clamp(30px,3.5vw,54px);line-height:1.05}.hub-service-note>div{display:grid;gap:22px}.hub-service-note>div p{margin:0;color:var(--ink-2);line-height:1.65}.hub-service-note .button-primary{justify-self:start}
@media(max-width:1240px){.hub-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-layout{grid-template-columns:250px minmax(0,1fr)}.hub-service-note{grid-template-columns:.55fr 1fr}.hub-service-note>div{grid-column:2}}
@media(max-width:900px){.hub-hero{min-height:0;grid-template-columns:1fr;gap:34px;padding-top:56px}.hub-hero h1{font-size:54px}.hub-hero-copy{max-width:720px}.hub-color-band{grid-template-columns:1fr;gap:16px}.hub-colors{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:none}.hub-colors::-webkit-scrollbar{display:none}.hub-all-colors,.hub-color{flex:0 0 auto}.hub-mobile-tools{display:flex;position:sticky;top:68px;z-index:24;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--canvas) 94%,transparent);backdrop-filter:blur(14px)}.hub-mobile-tools button{height:38px;border:1px solid var(--ink);border-radius:6px;background:var(--surface);padding:0 14px;font-weight:800}.hub-mobile-tools span{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.hub-layout{grid-template-columns:1fr;padding-top:22px}.hub-taxonomy{display:none;position:fixed;inset:68px 0 0 0;z-index:45;max-height:none;padding:20px 18px 50px;background:var(--canvas);overflow:auto}.hub-taxonomy.is-open{display:block}.hub-taxonomy-head{top:-20px;padding-top:20px}.hub-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-service-note{grid-template-columns:1fr}.hub-service-note>div{grid-column:1}.hub-service-note>.eyebrow{margin:0}.hub-result-toolbar{min-height:48px}}
@media(max-width:560px){.hub-hero{padding:44px 14px 42px}.hub-hero h1{font-size:41px;max-width:11ch}.hub-hero-copy>p{font-size:15px}.hub-search input{height:52px;font-size:15px;box-shadow:4px 4px 0 var(--accent)}.hub-color-band{padding:20px 14px}.hub-color-band h2{font-size:18px}.hub-layout{padding:20px 14px 74px}.hub-result-toolbar{align-items:end}.hub-result-toolbar>div span{max-width:25ch}.hub-result-toolbar label>span{display:none}.hub-result-toolbar select{max-width:150px}.hub-product-grid{gap:8px}.hub-product-card .card-title{font-size:14px}.hub-product-card .card-colors{margin:7px 0}.hub-product-card .card-footer{display:grid}.hub-product-card .stock-status{max-width:none;text-align:left}.hub-service-note{margin:0 14px 36px;padding:30px 20px}.hub-service-note h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.hub-color{transition:none}}