*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text-strong);font-weight:var(--fw-bold);margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:var(--motion-hover)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
img{max-width:100%;display:block}
::selection{background:var(--red-100);color:var(--ink-900)}

/* Site header responsive nav — breakpoint documented as --bp-nav (860px); hardcoded
   below since media queries can't consume custom properties. Used by SiteHeader.jsx
   (website) and the equivalent hand-built header in ui_kits/shop/index.html. */
.ds-header__toggle{display:none}
.ds-header__nav{display:flex;align-items:center;gap:var(--sp-7)}
@media (max-width:860px){
  .ds-header__toggle{display:inline-flex}
  .ds-header__nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:29;
    flex-direction:column;align-items:stretch;gap:var(--sp-1);background:var(--white);
    border-bottom:1px solid var(--border-hairline);box-shadow:var(--shadow-3);
    padding:var(--sp-4) var(--sp-6) var(--sp-6)}
  .ds-header__nav.is-open{display:flex}
  .ds-header__nav button{width:100%;text-align:left;padding:var(--sp-3) 0!important}
  .ds-header__nav a{padding:var(--sp-3) 0}
  .ds-header__cta{margin-top:var(--sp-2);width:100%}
}