/* Commerce Hub Store — canonical foundation layer
   Scope: design tokens, theme, reset, typography, accessibility and global controls.
   Route-specific and shell-specific presentation does not belong here. */

/* Presentation V3 canonical design tokens.
   Temporary route-specific visual tokens do not belong in this layer. */

:root {
  --store-control-size:48px;
  --store-control-size-compact:44px;
  --store-content-gap:clamp(16px,2.2vw,32px);
  --store-content-max:1440px;
  --store-fluid-gutter:clamp(16px,3vw,40px);
  --store-keyboard-offset:0px;
  --store-motion-fast:160ms cubic-bezier(.2,.7,.2,1);
  --store-motion-medium:260ms cubic-bezier(.2,.7,.2,1);
  --store-purchase-dock-rendered-h:0px;
  --store-readable:72ch;
  --store-section-gap:clamp(48px,5vw,64px);
  --store-section-space:clamp(64px,7vw,96px);
  --store-visual-height:100dvh;
}

:root{--store-container:1440px;
  --store-page-gutter:clamp(16px,2.5vw,40px);
  --store-header-h:68px;
  --store-mobile-nav-h:64px;
  --store-mobile-nav-rendered-h:var(--store-mobile-nav-h);
  --store-purchase-dock-h:64px;
  --store-viewport-bottom-offset:0px;
  --store-mobile-edge-gap:8px;

  --store-ink:#111315;
  --store-text:#111315;
  --store-muted:#5f646b;
  --store-subtle:#7b8086;
  --store-canvas:#ffffff;
  --store-surface:#ffffff;
  --store-surface-2:#f7f7f5;
  --store-surface-3:#f1f2ef;
  --store-line:#e3e5e2;
  --store-line-strong:#cdd1cc;

  /* Product photography is authored on white. Keep its media stage theme-stable. */
  --store-product-media:#ffffff;
  --store-product-media-ink:#111315;
  --store-product-media-line:#dfe2df;

  --store-accent:#164b8a;
  --store-accent-hover:#123e73;
  --store-accent-ink:#ffffff;
  --store-accent-soft:color-mix(in srgb,var(--store-accent) 12%,var(--store-surface));

  --store-danger:#b42318;
  --store-danger-soft:color-mix(in srgb,var(--store-danger) 12%,var(--store-surface));
  --store-sale:#c31e2a;
  --store-sale-ink:#ffffff;
  --store-success:#177245;
  --store-success-soft:color-mix(in srgb,var(--store-success) 12%,var(--store-surface));

  --store-radius-sm:6px;
  --store-radius:10px;
  --store-radius-lg:14px;
  --store-shadow-sm:0 1px 2px rgba(17,19,21,.05),0 6px 18px rgba(17,19,21,.05);
  --store-shadow:0 16px 40px rgba(17,19,21,.10);

  --store-font-body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --store-font-display:var(--store-font-body);

}
html[data-theme="dark"],html[data-store-theme="dark"]{--store-ink:#f8f9f7;
  --store-text:#f8f9f7;
  --store-muted:#c5c9ce;
  --store-subtle:#aab0b7;
  --store-canvas:#171a1f;
  --store-surface:#1d2127;
  --store-surface-2:#242930;
  --store-surface-3:#2c323a;
  --store-line:#383f48;
  --store-line-strong:#4a535e;
  --store-accent:#6ea8e8;
  --store-accent-hover:#8abcf0;
  --store-accent-ink:#08111c;
  --store-accent-soft:color-mix(in srgb,var(--store-accent) 20%,var(--store-surface));
  --store-danger:#ff7a70;
  --store-danger-soft:color-mix(in srgb,var(--store-danger) 18%,var(--store-surface));
  --store-sale:#ff6f78;
  --store-sale-ink:#1a0709;
  --store-success:#55c78a;
  --store-success-soft:color-mix(in srgb,var(--store-success) 18%,var(--store-surface));
  --store-shadow-sm:0 1px 2px rgba(0,0,0,.24),0 6px 18px rgba(0,0,0,.20);
  --store-shadow:0 16px 40px rgba(0,0,0,.34);}
/* ── Motion accessibility contract ─────────────── */
html[data-motion="full"]{scroll-behavior:smooth}
html[data-motion="reduced"]{scroll-behavior:auto}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after{
  scroll-behavior:auto!important;
  animation-duration:.001ms!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  transition-delay:0s!important;
}

/* CSS-level fallback: reduced motion remains safe even if bootstrap JS fails. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html *,
  html *::before,
  html *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
  }
}

/* ── Reset / base ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;background:var(--store-canvas);color-scheme:light;overflow-x:clip;overscroll-behavior-x:none;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:calc(var(--store-header-h) + 20px)}
html[data-theme="dark"],html[data-store-theme="dark"]{color-scheme:dark}
body.store-page{min-width:320px;min-height:100vh;min-height:100dvh;margin:0;display:flex;flex-direction:column;overflow-x:clip;overscroll-behavior:none;background:var(--store-canvas);color:var(--store-text);font-family:var(--store-font-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(body.store-page) *{min-width:0}
:where(body.store-page) img,:where(body.store-page) video{display:block;max-width:100%}
:where(body.store-page) button,:where(body.store-page) input,:where(body.store-page) select,:where(body.store-page) textarea{font:inherit;color:inherit}
:where(body.store-page) a{color:inherit;text-decoration:none}
:where(body.store-page) h1,:where(body.store-page) h2,:where(body.store-page) h3{font-family:var(--store-font-display)}
:where(body.store-page) h1,:where(body.store-page) h2,:where(body.store-page) h3,:where(body.store-page) p{overflow-wrap:anywhere}
:where(body.store-page) :focus-visible{outline:3px solid color-mix(in srgb,var(--store-accent) 55%,transparent);outline-offset:2px}
.store-container{width:min(var(--store-container),calc(100% - (var(--store-page-gutter) * 2)));margin-inline:auto}
#store-main{flex:1 0 auto;min-height:0;width:100%}
.sr-only,.store-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;top:-90px;left:16px;z-index:1000;padding:10px 14px;border-radius:var(--store-radius-sm);background:var(--store-ink);color:var(--store-surface);box-shadow:var(--store-shadow-sm)}
.skip-link:focus{top:16px}
.text-justify,.text-center{text-align:left!important}
/* ── Canonical semantic token API ───────────────── */
:root {
  --ch-color-canvas: var(--store-canvas);
  --ch-color-surface: var(--store-surface);
  --ch-color-surface-2: var(--store-surface-2);
  --ch-color-surface-3: var(--store-surface-3);
  --ch-color-text: var(--store-text);
  --ch-color-muted: var(--store-muted);
  --ch-color-subtle: var(--store-subtle);
  --ch-color-line: var(--store-line);
  --ch-color-line-strong: var(--store-line-strong);
  --ch-color-accent: var(--store-accent);
  --ch-color-accent-hover: var(--store-accent-hover);
  --ch-color-accent-ink: var(--store-accent-ink);
  --ch-color-danger: var(--store-danger);
  --ch-color-success: var(--store-success);
  --ch-container-max: var(--store-container);
  --ch-page-gutter: var(--store-page-gutter);
  --ch-header-height: var(--store-header-h);
  --ch-mobile-nav-height: var(--store-mobile-nav-h);
  --ch-control-height: var(--store-control-size);
  --ch-control-height-compact: var(--store-control-size-compact);
  --ch-radius-sm: var(--store-radius-sm);
  --ch-radius-md: var(--store-radius);
  --ch-radius-lg: var(--store-radius-lg);
  --ch-radius-xl: 18px;
  --ch-font-body: var(--store-font-body);
  --ch-font-display: var(--store-font-display);
  --ch-motion-fast: var(--store-motion-fast);
  --ch-motion-base: var(--store-motion-medium);
  --ch-shadow-sm: var(--store-shadow-sm);
  --ch-shadow-md: var(--store-shadow);
}

/* ── Global element refinements ─────────────────── */
:where(body.store-page) :where(h1,h2,h3,h4,h5,h6) {
  color: var(--ch-color-text);
  font-family: var(--ch-font-display);
  font-weight: 650;
  letter-spacing: -.032em;
  text-wrap: balance;
}
:where(body.store-page) :where(p,small,.muted,[class*="muted"]) { text-wrap: pretty; }
:where(body.store-page) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  color: var(--ch-color-text);
  background: var(--ch-color-surface);
  border-color: var(--ch-color-line);
  border-radius: var(--ch-radius-md);
  box-shadow: none;
}
:where(body.store-page) :where(input:not([type="checkbox"]):not([type="radio"]),select) { min-height: var(--ch-control-height); }
:where(body.store-page) textarea { min-height: 112px; }
:where(body.store-page) :where(input,select,textarea)::placeholder { color: var(--ch-color-muted); opacity: 1; }
:where(body.store-page) :where(button,a,input,select,textarea) {
  transition:
    color var(--ch-motion-fast),
    background-color var(--ch-motion-fast),
    border-color var(--ch-motion-fast),
    box-shadow var(--ch-motion-fast),
    opacity var(--ch-motion-fast);
}
@media (max-width:767px) {
  :root { --ch-radius-lg: 12px; --ch-radius-xl: 14px; }
  :where(body.store-page) h1 { letter-spacing: -.045em; }
}