/* ===== Reset + base typography + layout ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:15.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;
  line-height:1.12;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0}

/* section heading used across storefront */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:30px 0 14px}
.sec-head h2{font-size:21px;font-weight:700;letter-spacing:-.02em}
.sec-head .link{color:var(--link);font-weight:500;font-size:13.5px}
.sec-head .link:hover{color:var(--link-hover);text-decoration:underline}

@media (max-width:960px){
  :root{--gutter:14px}
  .sec-head{margin:24px 0 12px}
  .sec-head h2{font-size:18px}
}

/* ===== accessibility ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--topbar);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;font-size:13px;transition:top .15s}
.skip:focus{top:0}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}