/* Scrubs shop (scrubs.html) v2. Uses shared tokens from styles.css. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sc-ftc-foot{margin:10px auto 0;max-width:60ch;font-size:.76rem;color:var(--m)}

/* hero */
.sh-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 380px at 105% -20%,rgba(240,135,63,.38),transparent 60%),radial-gradient(700px 420px at -15% 130%,rgba(60,196,185,.35),transparent 60%),linear-gradient(160deg,#0b2a3c 0%,#0a4f5c 55%,#0d6e6e 100%)}
.sh-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 80%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.sh-in{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:28px 18px 26px;display:grid;gap:22px;align-items:center}
.sh-hero h1{font-size:clamp(2rem,8.4vw,3.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:14px 0 10px;max-width:14ch}
.sh-hero h1 span{background:linear-gradient(90deg,#ffd2ad,#ffb37a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-hero .lede{font-size:1.02rem;line-height:1.5;opacity:.9;margin:0 0 18px;max-width:44ch}
.sh-jump{display:flex;flex-wrap:wrap;gap:8px}
.sh-jump .jc{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);font-weight:650;font-size:.88rem;padding:8px 13px;border-radius:999px;text-decoration:none;transition:background .15s}
.sh-jump .jc:hover{background:rgba(255,255,255,.2)}
.sh-jump .jc:first-child{background:var(--accent);border-color:var(--accent);color:#1d0f04}
.sh-art{display:none}
@media(min-width:860px){
 .sh-in{grid-template-columns:1.1fr .9fr;padding:44px 20px 46px}
 .sh-art{display:block;position:relative;height:330px}
 .hc{position:absolute;margin:0;width:200px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:0 22px 44px -18px rgba(0,0,0,.6);border:3px solid rgba(255,255,255,.9)}
 .hc img{width:100%;height:100%;object-fit:cover;display:block}
 .hc.h1{left:4%;top:34px;transform:rotate(-5deg)}
 .hc.h2{left:34%;top:0;z-index:2;width:216px}
 .hc.h3{right:2%;top:46px;transform:rotate(5deg)}
}

/* page frame: wider than the default 860px column for a product grid */
main.shop{max-width:1160px;padding-top:0}
.shop-top{padding-top:14px}
.sh-ftc{display:flex;gap:7px;align-items:flex-start;margin:0 0 10px;font-size:.78rem;line-height:1.45;color:var(--m)}
.sh-ftc .i{width:14px;height:14px;flex:0 0 auto;margin-top:2px;opacity:.8}

/* sticky filter bar */
.sh-bar{position:sticky;top:var(--nav);z-index:12;display:flex;align-items:center;gap:10px;margin:0 -16px;padding:9px 16px;background:color-mix(in srgb,var(--bg) 97%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.sh-bar.stuck{border-bottom-color:var(--line)}
.sh-seg{display:inline-flex;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.sh-seg button{font:inherit;font-size:.85rem;font-weight:650;color:var(--m);background:none;border:0;padding:7px 13px;border-radius:999px;cursor:pointer;transition:all .15s}
.sh-seg button.on{background:var(--t);color:var(--surface)}
.sh-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.sh-chips::-webkit-scrollbar{display:none}
.sh-chips .jc{flex:0 0 auto;font-size:.84rem;font-weight:650;color:var(--t);text-decoration:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);transition:all .15s}
.sh-chips .jc:hover{border-color:var(--brand);color:var(--brand)}
.sh-chips .jc.on{border-color:var(--brand);background:var(--tint);color:var(--tint-ink)}
.sc-count{color:var(--m);font-size:.82rem;margin:8px 0 0}
.sc-empty{text-align:center;color:var(--m);padding:24px 0}
html:not(.js) .sh-seg,html:not(.js) .sc-count{display:none}
@media(max-width:600px){.sh-bar{flex-wrap:wrap}.sh-chips{flex-basis:100%;order:2}}

/* sections */
.ps{padding-top:26px;scroll-margin-top:calc(var(--nav) + 64px)}
.ps-h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.ps-h h3{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.ps-h p{margin:2px 0 0;color:var(--m);font-size:.9rem}
.ps-n{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--m);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.ps-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:var(--tint);color:var(--tint-ink)}
.ps-ic .i{width:20px;height:20px}
.ps-ic.s-top{background:#fff0e4;color:#b8561a}
@media (prefers-color-scheme:dark){.ps-ic.s-top{background:#4a2810;color:#ffb27a}}

/* product grid + cards */
.pg{display:grid;grid-template-columns:1fr;gap:12px}
.spc{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--sh-1);transition:box-shadow .2s,border-color .2s,transform .2s}
.spc[hidden]{display:none}
.pc-img{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;align-self:start}
.pc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pc-badge{position:absolute;left:8px;top:8px;background:var(--navy);color:#fff;font-size:.7rem;font-weight:750;letter-spacing:.01em;padding:4px 8px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.pc-big .pc-badge{background:var(--accent);color:#1d0f04}
.pc-body{display:flex;flex-direction:column;min-width:0}
.pc-brand{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 3px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.pc-g{font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:none;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--m)}
.pc-name{margin:0 0 6px;font-size:.97rem;font-weight:700;line-height:1.28;letter-spacing:-.01em;color:var(--t)}
.pc-price{display:flex;align-items:baseline;gap:6px;margin:0}
.pc-price b{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:var(--t)}
.pc-price b small{font-size:.74rem;font-weight:650;color:var(--m);margin-right:3px}
.pc-plab{font-size:.78rem;color:var(--m)}
.pc-split{margin:1px 0 0;font-size:.78rem;color:var(--m)}
.pc-feat{list-style:none;margin:8px 0 0;padding:0}
.pc-feat li+li{margin-top:3px}
.pc-body,.pc-foot{min-width:0}
.pc-feat li{position:relative;padding-left:16px;font-size:.84rem;line-height:1.38;color:var(--t)}
.pc-feat li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--brand);opacity:.85}
.pc-fit{margin:6px 0 0;font-size:.78rem;color:var(--m)}
.pc-cta{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pc-buy{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 14px;border-radius:12px;background:var(--accent);color:#1d0f04;font-weight:750;font-size:.92rem;text-decoration:none;box-shadow:0 6px 16px -8px rgba(240,135,63,.8);transition:transform .15s,box-shadow .15s,filter .15s}
.pc-buy:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(240,135,63,.9);filter:saturate(1.08)}
.pc-buy .i,.pc-alt .i{width:15px;height:15px}
.pc-alt{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-2);color:var(--t);font-weight:650;font-size:.86rem;text-decoration:none;transition:border-color .15s,color .15s}
.pc-alt:hover{border-color:var(--brand);color:var(--brand)}
.pc-note{margin:7px 0 0;font-size:.7rem;color:var(--m);line-height:1.35}
.spc{grid-template-areas:"img body" "foot foot"}
.pc-img{grid-area:img}.pc-body{grid-area:body}.pc-foot{grid-area:foot}
@media(hover:hover){.spc:hover{box-shadow:var(--sh-2);border-color:var(--line-2)}.spc:hover .pc-img img{transform:scale(1.03)}}

@media(min-width:620px){
 .pg{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(min-width:620px){
 .spc{display:flex;flex-direction:column;padding:0;overflow:hidden}
 .pc-img{border-radius:0;aspect-ratio:4/5}
 .pc-body{padding:14px 16px 0;flex:1}
 .pc-foot{padding:0 16px 14px}
 .pc-cta{margin-top:14px}
 .pc-feat{margin-bottom:2px}
 .pc-name{font-size:1rem}
}
@media(min-width:900px){.pg{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.pg{grid-template-columns:repeat(4,1fr);gap:18px}}
.pg-top .pc-big{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}

/* guide + sign-up keep the readable 860px column */
.shop-guide{max-width:860px;margin:30px auto 0}
.shop-guide h3.grp{margin-top:0}

/* shoes: tier groups inside the section */
.pt{margin:6px 0 22px}
.pt[hidden]{display:none}
.pt-h{display:flex;align-items:baseline;gap:8px;margin:4px 0 10px;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--t)}
.pt-h::before{content:"";width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--accent));align-self:center}
.pt-h span{font-size:.82rem;font-weight:600;color:var(--m)}
.ps-shoes-accessories{margin-top:18px;padding:22px 16px 6px;border-radius:22px;background:linear-gradient(180deg,var(--tint),transparent 420px);margin-left:-16px;margin-right:-16px}
@media(min-width:620px){.ps-shoes-accessories{margin-left:0;margin-right:0;padding:24px 20px 8px}}
.ps-ic.s-shoes-accessories{background:var(--accent);color:#1d0f04}
/* socks: smaller sub-section */
@media(min-width:900px){.pt-socks .pg,.pt-acc .pg{grid-template-columns:repeat(4,1fr)}}
.pt{scroll-margin-top:calc(var(--nav) + 64px)}

.sh-cta{margin-top:4px}
.sh-cta .btn{flex:1 1 160px;padding:12px 16px;font-size:.95rem}
@media(min-width:640px){.sh-cta .btn{flex:0 0 auto}}
@media(max-width:859px){.sh-in{padding:24px 18px 22px}.sh-hero .lede{margin-bottom:14px}}
.sh-in{grid-template-columns:minmax(0,1fr)}.sh-copy{min-width:0}@media(min-width:860px){.sh-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.sh-bar{margin-top:0}
@media(max-width:639px){.sh-cta .btn{flex:1 1 100%}}
@media(max-width:619px){.pc-badge{left:6px;top:6px;font-size:.62rem;padding:3px 7px;max-width:calc(100% - 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}