/* =============================================================================
   SFS Fastening Storefront — Design System
   Harvested from the live styleguide on 2026-09-21
   https://construction.cx2qhraa53-sfsgroups2-d1-public.model-t.cc.commerce.ondemand.com/DE/de/styleguide

   Standalone: link this file and the markup patterns from
   sfs-design-system-agent-reference.md render correctly with NO Angular,
   NO Spartacus and no portal access.

   Layers in this file:
     1. Reset / base
     2. Design tokens  (:root)  — base system
     3. Brand tokens   (:root)  — "fastening.css" theme layer (swap to re-brand)
     4. Typography & layout
     5. Links, buttons, icons, loader
     6. Form controls: label, input, textarea, form errors, radio, checkbox, select
     7. Composite components: accordion, tabs, modal, aside, dropdown, global message
     8. Storefront shell (header / footer) — optional, only if you rebuild the shell

   NOTE: three declarations were reconstructed from computed styles because the
   CSSOM serialised them as empty shorthands. They are marked  [reconstructed]
   and verified pixel-identical against the live page.
============================================================================= */


/* ---------------------------------------------------------------------------
   1. RESET / BASE
--------------------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }
:not(dialog) { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  html { interpolate-size: allow-keywords; }
}
body { line-height: 1.25; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
ul { list-style: none; padding: 0; margin: 0; }
li { margin: 0; padding: 0; }
button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
button:focus:not(:focus-visible) { outline: none; }


/* ---------------------------------------------------------------------------
   2. DESIGN TOKENS — base system
--------------------------------------------------------------------------- */
:root {
  /* base colors */
  --sfs-color-gray-1: #ffffff;   /* White  */
  --sfs-color-gray-2: #f2f2f2;   /* Gray 250 */
  --sfs-color-gray-3: #e3e3e3;   /* Gray 500 */
  --sfs-color-gray-4: #afafaf;   /* Gray 750 */
  --sfs-color-gray-12: #000000;  /* Black  */

  /* semantic colors */
  --color-success: #0f9696;
  --color-error: #bd2e10;
  --color-warning: #faa00f;
  --color-info: #004477;

  /* derived */
  --sfs-color-text: var(--sfs-color-gray-12);
  --sfs-color-canvas: var(--sfs-color-gray-1);
  --sfs-color-backdrop: rgba(0, 0, 0, .3);
  --sfs-box-shadow-1: 0 10px 30px rgba(0, 0, 0, .1);
  --sfs-outline-focus: 1px solid -webkit-focus-ring-color;
  --sfs-duration: .3s;

  /* spacing scale — 4px steps */
  --spacing-0-25: .25rem;  --spacing-0-5: .5rem;   --spacing-0-75: .75rem;
  --spacing-1: 1rem;       --spacing-1-25: 1.25rem; --spacing-1-5: 1.5rem;
  --spacing-1-75: 1.75rem; --spacing-2: 2rem;      --spacing-2-25: 2.25rem;
  --spacing-2-5: 2.5rem;   --spacing-2-75: 2.75rem; --spacing-3: 3rem;
  --spacing-3-25: 3.25rem; --spacing-3-5: 3.5rem;  --spacing-3-75: 3.75rem;
  --spacing-4: 4rem;       --spacing-4-25: 4.25rem; --spacing-4-5: 4.5rem;
  --spacing-4-75: 4.75rem; --spacing-5: 5rem;      --spacing-5-25: 5.25rem;
  --spacing-5-5: 5.5rem;   --spacing-5-75: 5.75rem; --spacing-6: 6rem;
  --spacing-6-25: 6.25rem;

  /* type scale */
  --font-size-36: 36px; --font-size-30: 30px; --font-size-24: 24px;
  --font-size-20: 20px; --font-size-18: 18px; --font-size-16: 16px;
  --font-size-14: 14px; --font-size-13: 13px; --font-size-12: 12px;
  --font-size-11: 11px; --font-size-10: 10px;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* page */
  --sfs-page-width: 1440px;
  --sfs-page-padding: max(
    calc((100vw - var(--sfs-page-width)) / 2),
    var(--sfs-page-margin, var(--spacing-1-5))
  );
}

/* Inverted surface (dark block on light page). This is NOT a dark theme. */
.invert {
  --sfs-color-gray-1: #000000;
  --sfs-color-gray-12: #ffffff;
  --sfs-color-text: var(--sfs-color-gray-12);
  --sfs-color-canvas: var(--sfs-color-gray-1);
  color: var(--sfs-color-text);
  background-color: var(--sfs-color-canvas);
}


/* ---------------------------------------------------------------------------
   3. BRAND TOKENS — theme layer ("fastening.css")
   Override just this block to re-brand the whole system.
--------------------------------------------------------------------------- */
:root {
  --font-family-primary: "Univers", sans-serif;
  --sfs-color-primary-9: #eb3c24;        /* SFS red — default state  */
  --sfs-color-primary-10: rgb(189, 46, 16); /* #bd2e10 — hover/pressed */
  --sfs-color-primary-12: #f38a7c;       /* light tint              */
}

/* Univers is a licensed font. Point these at your own copies, or delete the
   @font-face blocks and set --font-family-primary to a fallback stack. */
@font-face {
  font-family: Univers;
  font-weight: 400;
  src: url("./media/UniversLTPro-55Roman.woff2") format("woff2");
  font-display: swap;
  ascent-override: 92.5%;
}
@font-face {
  font-family: Univers;
  font-weight: 700;
  src: url("./media/UniversLTPro-65Bold.woff2") format("woff2");
  font-display: swap;
  ascent-override: 92.5%;
}


/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY & LAYOUT
--------------------------------------------------------------------------- */
body {
  font-family: var(--font-family-primary);
  font-size: 1rem;
  overflow-y: scroll;
  background-color: var(--sfs-color-canvas);
  color: var(--sfs-color-text);
}

h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; font-weight: var(--font-weight-bold); }
h1 { font-size: var(--font-size-36); margin-block: var(--spacing-1-5); }
h2 { font-size: var(--font-size-30); margin-block: 0 var(--spacing-1-25); }
h3 { font-size: var(--font-size-24); margin-block: 0 var(--spacing-1); }
h4 { font-size: var(--font-size-20); margin-block: 0 var(--spacing-0-75); }
p  { margin-block: 0 var(--spacing-1-5); }

/* Body scale (line-height is inherited 1.25 from body):
   XL 24px · L 20px · M 16px (default) · S 14px · XS 12px · XXS 10px */

main {
  width: 100%;
  max-width: calc(1440px + var(--spacing-1) * 2);
  margin: 0 auto;
  padding-inline: var(--spacing-1);
}


/* ---------------------------------------------------------------------------
   5. LINKS · BUTTONS · ICONS · LOADER
--------------------------------------------------------------------------- */

/* Links */
a {
  display: inline-flex;
  text-decoration: var(--sfs-link-decoration, none);
  color: var(--sfs-link-color);
  font-size: var(--sfs-link-font-size, var(--sfs-font-size));
  text-underline-offset: var(--sfs-link-underline-offset, .2em);
}
a:hover {
  text-decoration: var(--sfs-link-decoration, underline);
  color: var(--sfs-link-color-hover);
}
.primary a, a.primary       { color: var(--sfs-link-color, var(--sfs-color-primary-9)); }
.primary a:hover, a.primary:hover { color: var(--sfs-link-color-hover, var(--sfs-color-primary-10)); }
[inert] a, a[inert]         { text-decoration: none; color: currentcolor; }
/* a.secondary and a.subtle inherit black; `subtle` is the quietest treatment. */

/* Button — put class="sfs-button" on <button> or <a> */
.sfs-button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.sfs-button:focus:not(:focus-visible) { outline: none; }
.sfs-button {
  font-size: var(--font-size-14);
  --sfs-link-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  background-color: var(--background-color);
  border: var(--border);
  padding: var(--padding);
  color: var(--color);
  cursor: pointer;
  /* NOTE: no border-radius — SFS buttons are square. */
}
.sfs-button:hover, .sfs-button:focus {
  color: var(--color-hover);
  background-color: var(--background-color-hover, var(--background-color));
  border: var(--border-hover);
}
.sfs-button[disabled] {
  pointer-events: none;
  color: var(--color-disabled);
  background-color: var(--background-color-disabled);
  border: var(--border-disabled);
  cursor: default;
}
.sfs-button[width="full"]      { width: 100%; }
.sfs-button[aria-busy="true"]  { cursor: wait; color: transparent; }

.sfs-button:not([variant]),
.sfs-button[variant="primary"] {
  --border: 1px solid transparent;
  --border-hover: var(--border);
  --border-disabled: var(--border);
  --background-color: var(--sfs-color-primary-9);
  --background-color-hover: var(--sfs-color-primary-10);
  --background-color-disabled: var(--sfs-color-gray-4);
  --color: var(--sfs-color-gray-1);
  --color-hover: var(--color);
  --color-disabled: var(--color);
}
.sfs-button[variant="secondary"] {
  --border: 1px solid var(--sfs-color-gray-12);
  --border-hover: 1px solid var(--sfs-color-primary-9);
  --border-disabled: 1px solid var(--sfs-color-gray-4);
  --background-color: var(--sfs-color-gray-1);
  --background-color-disabled: var(--sfs-color-gray-1);
  --color: var(--sfs-color-gray-12);
  --color-hover: var(--sfs-color-primary-10);
  --color-disabled: var(--sfs-color-gray-4);
}
.sfs-button[variant="ghost"] {
  --border: 1px solid transparent;
  --border-hover: var(--border);
  --border-disabled: var(--border);
  --background-color: transparent;
  --background-color-hover: var(--sfs-color-gray-3);
  --background-color-disabled: transparent;
  --color: var(--sfs-color-gray-12);
  --color-hover: var(--color);
  --color-disabled: var(--sfs-color-gray-4);
}
.sfs-button[size="xs"] { --padding: var(--spacing-0-25) var(--spacing-2); }
.sfs-button[size="sm"] { --padding: var(--spacing-0-5) var(--spacing-2); }
.sfs-button[size="md"] { --padding: var(--spacing-1) var(--spacing-2); }

.sfs-button sfs-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  cursor: wait;
  color: var(--color);
}

/* Loader / spinner */
sfs-loader { display: block; }
sfs-loader .loader {
  display: block;
  border: 2px solid;
  border-color: currentcolor transparent transparent currentcolor;
  border-radius: 50%;
  animation: spinner .6s linear infinite;
}
@keyframes spinner { 100% { transform: rotate(360deg); } }

/* Icons — <cx-icon class="sfs:check"><svg><use href="#sfs:check"/></svg></cx-icon> */
cx-icon[size="sm"] { --sfs-icon-width: var(--spacing-0-75); }  /* 12px */
cx-icon[size="md"] { --sfs-icon-width: var(--spacing-1-25); }  /* 20px — default */
cx-icon[size="lg"] { --sfs-icon-width: var(--spacing-1-5); }   /* 24px */
cx-icon[size="xl"] { --sfs-icon-width: var(--spacing-2); }     /* 32px */
cx-icon svg {
  width: var(--sfs-icon-width, var(--spacing-1-25));
  height: var(--sfs-icon-height, auto);
  aspect-ratio: var(--sfs-icon-aspect-ratio, 1);
  fill: var(--sfs-icon-color, currentColor);
  max-width: initial;
}


/* ---------------------------------------------------------------------------
   6. FORM CONTROLS
--------------------------------------------------------------------------- */

/* Label */
sfs-label { display: block; }
sfs-label .text { display: block; margin-bottom: var(--spacing-0-25); }
/* required marker: <span class="asterisk" aria-hidden="true">*</span> */

/* Input */
sfs-input .input-container { display: grid; grid-template-areas: "input"; }
sfs-input input {
  grid-area: input;
  --border: 1px solid var(--sfs-color-gray-12);
  --background: var(--sfs-color-gray-1);
  --color: var(--sfs-color-gray-12);
  font-size: var(--font-size-14);
  padding: var(--spacing-0-5) var(--spacing-1);
  border-radius: 0;
  border: var(--border);
  background-color: var(--background);
  color: var(--color);
  width: 100%;
}
sfs-input input:focus, sfs-input input:hover { outline: 1px solid var(--sfs-color-gray-12); }
sfs-input input::placeholder { color: var(--sfs-color-gray-4); }
sfs-input input[disabled] {
  pointer-events: none;
  --border: 1px solid var(--sfs-color-gray-4);
  --background: var(--sfs-color-gray-2);
}
sfs-input .slot {
  grid-area: input;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sfs-color-gray-12);
}
sfs-input .slot.start { justify-self: start; padding-inline-start: var(--spacing-0-75); }
sfs-input .slot.end   { justify-self: end;   padding-inline-end: var(--spacing-0-75); }
sfs-input .password-toggle { padding: 0; border: none; background-color: transparent; cursor: pointer; }
sfs-input .password-toggle:focus:not(:focus-visible) { outline: none; }
sfs-input:has([start-icon]) .field { padding-left: var(--spacing-2-25); }
sfs-input:has([end-icon]) .field,
sfs-input .field[type="password"] { padding-right: var(--spacing-2-25); }

/* Textarea */
sfs-textarea .textarea-container { display: block; }
sfs-textarea textarea {
  --border: 1px solid var(--sfs-color-gray-12);
  --background: var(--sfs-color-gray-1);
  --color: var(--sfs-color-gray-12);
  font-size: var(--font-size-14);
  padding: var(--spacing-0-5) var(--spacing-1);
  border-radius: 0;
  border: var(--border);
  background-color: var(--background);
  color: var(--color);
  width: 100%;
  resize: vertical;
  display: block;
}
sfs-textarea textarea:focus, sfs-textarea textarea:hover { outline: 1px solid var(--sfs-color-gray-12); }
sfs-textarea textarea::placeholder { color: var(--sfs-color-gray-4); }
sfs-textarea textarea[disabled] {
  pointer-events: none;
  --border: 1px solid var(--sfs-color-gray-4);
  --background: var(--sfs-color-gray-2);
}

/* Validation — errors only show inside a form.show-errors */
form.show-errors input.has-error,
form.show-errors textarea.has-error {
  --border: 1px solid var(--color-error);
  --background: color-mix(in srgb, var(--color-error) 20%, transparent);
}
form.show-errors input.has-error:focus,   form.show-errors input.has-error:hover,
form.show-errors textarea.has-error:focus, form.show-errors textarea.has-error:hover {
  outline: 1px solid var(--color-error);
}
sfs-form-errors { display: none; margin-top: var(--spacing-0-25); }
sfs-form-errors .message { font-size: var(--font-size-12); color: var(--color-error); margin: 0; }
form.show-errors sfs-form-errors:not(:empty) { display: block; }

/* Radio */
sfs-radio { line-height: 1; }
sfs-radio .radio { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
sfs-radio .radio .input {
  appearance: none; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; opacity: 0;
}
sfs-radio .radio .indicator {
  --size: 1.25rem;
  --border-color: var(--sfs-color-gray-12);
  --bg-color: var(--sfs-color-gray-1);
  --inner-color: var(--sfs-color-gray-12);
  display: flex; align-items: center; justify-content: center;
  width: var(--size); height: var(--size);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background-color: var(--bg-color);
  flex-shrink: 0;
}
sfs-radio .radio .indicator::after {
  content: "";
  transform: scale(0);
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 2);
  border-radius: 50%;
  background-color: var(--inner-color);
  transition: transform .2s ease-in-out;
}
sfs-radio .radio .label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  margin-inline-start: var(--spacing-1);
  color: var(--sfs-color-gray-12);
}
sfs-radio .radio .input:checked + .indicator {
  --border-color: var(--sfs-color-primary-9);
  --inner-color: var(--sfs-color-primary-9);
}
sfs-radio .radio .input:checked + .indicator::after { transform: scale(1); }
sfs-radio .radio:hover .indicator {
  --border-color: var(--sfs-color-primary-10);
  --inner-color: var(--sfs-color-primary-10);
}
sfs-radio .radio.is-disabled { pointer-events: none; opacity: .5; }
sfs-radio .radio.is-disabled .indicator {
  --border-color: var(--sfs-color-gray-3);
  --bg-color: var(--sfs-color-gray-2);
  --inner-color: var(--sfs-color-gray-3);
}
sfs-radio .radio.is-disabled .label { color: var(--sfs-color-gray-3); }
sfs-radio-group .radio-group { display: flex; flex-direction: column; gap: var(--spacing-0-5); }

/* Checkbox */
sfs-checkbox { line-height: 1; }
sfs-checkbox .checkbox { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
sfs-checkbox .checkbox .input {
  appearance: none; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; opacity: 0;
}
sfs-checkbox .checkbox .indicator {
  --size: 1.25rem;
  --border-color: var(--sfs-color-gray-12);
  --bg-color: var(--sfs-color-gray-1);
  --inner-color: var(--sfs-color-gray-1);
  display: flex; align-items: center; justify-content: center;
  width: var(--size); height: var(--size);
  border: 2px solid var(--border-color);
  background-color: var(--bg-color);
  flex-shrink: 0;
  /* square — no border-radius */
}
sfs-checkbox .checkbox .indicator::after {   /* [reconstructed] the tick */
  content: "";
  transform: translateY(-10%) rotate(45deg) scale(0);
  width: calc(var(--size) / 4);
  height: calc(var(--size) / 2);
  border-style: solid;
  border-color: var(--inner-color);
  border-width: 0 2px 2px 0;
  transition: transform .2s ease-in-out;
}
sfs-checkbox .checkbox .label {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  margin-inline-start: var(--spacing-1);
  color: var(--sfs-color-gray-12);
}
sfs-checkbox .checkbox .input:checked + .indicator {
  --border-color: var(--sfs-color-primary-9);
  --bg-color: var(--sfs-color-primary-9);
}
sfs-checkbox .checkbox .input:checked + .indicator::after {
  transform: translateY(-10%) rotate(45deg) scale(1);
}
sfs-checkbox .checkbox:hover .indicator { --border-color: var(--sfs-color-primary-10); }
sfs-checkbox .checkbox:hover .input:checked + .indicator { --bg-color: var(--sfs-color-primary-10); }
sfs-checkbox .checkbox.is-disabled { pointer-events: none; opacity: .5; }
sfs-checkbox .checkbox.is-disabled .indicator {
  --border-color: var(--sfs-color-gray-3);
  --bg-color: var(--sfs-color-gray-2);
  --inner-color: var(--sfs-color-gray-3);
}
sfs-checkbox .checkbox.is-disabled .label { color: var(--sfs-color-gray-3); }
sfs-checkbox-group { display: flex; flex-direction: column; gap: var(--spacing-0-5); }

/* Select */
sfs-select { --sfs-icon-width: var(--spacing-1-25); display: block; }
sfs-select .wrapper { display: grid; grid-template-areas: "select"; }
sfs-select select {
  --border: 1px solid var(--sfs-color-gray-12);
  --background: var(--sfs-color-gray-1);
  --color: var(--sfs-color-gray-12);
  font-size: var(--font-size-14);
  grid-area: select;
  /* [reconstructed] = computed 8px 48px 8px 16px */
  padding: var(--spacing-0-5) var(--spacing-3) var(--spacing-0-5) var(--spacing-1);
  border-radius: 0;
  border: var(--border);
  background-color: var(--background);
  color: var(--color);
  width: 100%;
  appearance: none;
  cursor: pointer;
}
sfs-select select:focus, sfs-select select:hover { outline: 1px solid var(--sfs-color-gray-12); }
sfs-select select[disabled] {
  pointer-events: none;
  --border: 1px solid var(--sfs-color-gray-4);
  --background: var(--sfs-color-gray-2);
  cursor: default;
}
sfs-select .icon {
  grid-area: select;
  place-self: center end;
  padding-inline-end: var(--spacing-0-5);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  color: var(--sfs-color-gray-12);
}
sfs-select .field[disabled] + .icon { color: var(--sfs-color-gray-4); }


/* ---------------------------------------------------------------------------
   7. COMPOSITE COMPONENTS
--------------------------------------------------------------------------- */

/* Accordion — wraps native <details> */
sfs-accordion { --sfs-icon-width: var(--spacing-1-5); }
sfs-accordion details { border-top: 1px solid var(--sfs-color-gray-12); }
sfs-accordion details:last-child { border-bottom: 1px solid var(--sfs-color-gray-12); }
sfs-accordion summary {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  display: flex;
  justify-content: space-between;
  padding-block: var(--spacing-1);
  cursor: pointer;
}
sfs-accordion summary::marker { content: ""; }
sfs-accordion details[open] summary cx-icon {
  color: var(--sfs-color-primary-9);
  transform: rotate(180deg);
}

/* Tabs — radio-driven, panel must follow its label */
sfs-tabs {
  display: flex;
  flex-wrap: wrap;
  isolation: isolate;
  column-gap: var(--spacing-0-5);
}
sfs-tabs::before {
  content: "";
  width: 100%;
  height: 2px;
  margin-block: -2px var(--spacing-2);
  background-color: var(--sfs-color-gray-3);
  z-index: -1;
}
sfs-tabs [role="tabpanel"] { display: none; flex: 1 1 100%; width: 100%; }
sfs-tabs label:has(input:checked) + [role="tabpanel"] { display: block; }
sfs-tabs label {
  order: -1;
  padding: var(--spacing-0-75) var(--spacing-1-5);
  color: var(--sfs-color-gray-12);
  cursor: pointer;
}
sfs-tabs label input { appearance: none; }
sfs-tabs label:has(input:checked) {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: var(--sfs-color-primary-9);
  border-bottom: 2px solid var(--sfs-color-primary-9);
}

/* Modal — native <dialog> */
sfs-modal dialog {
  padding: 0;
  border: none;
  background-color: var(--sfs-color-gray-1);
  color: var(--sfs-color-gray-12);
  max-width: min(90vw, 600px);
  max-height: 90vh;
  box-shadow: var(--sfs-box-shadow-1);
  opacity: 0;
  scale: .9;
  transition:
    opacity var(--sfs-duration) ease,
    scale var(--sfs-duration) ease,
    display var(--sfs-duration) allow-discrete,
    overlay var(--sfs-duration) allow-discrete;
}
sfs-modal dialog[open] { opacity: 1; scale: 1; }
@starting-style { sfs-modal dialog[open] { opacity: 0; scale: .9; } }
sfs-modal dialog::backdrop {
  background-color: transparent;
  transition:
    background-color var(--sfs-duration) ease,
    display var(--sfs-duration) allow-discrete,
    overlay var(--sfs-duration) allow-discrete;
}
sfs-modal dialog[open]::backdrop { background-color: var(--sfs-color-backdrop); }
@starting-style { sfs-modal dialog[open]::backdrop { background-color: transparent; } }
sfs-modal header {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-1-5);
  border-bottom: 1px solid var(--sfs-color-gray-3);
  position: sticky; top: 0;
  background-color: var(--sfs-color-gray-1);
}
sfs-modal h3 { margin: 0; }
sfs-modal .content { padding: var(--spacing-1-5); overflow-y: auto; }
sfs-modal .close { padding: 0; border: none; background-color: transparent; cursor: pointer; margin-left: auto; }
sfs-modal .close:focus:not(:focus-visible) { outline: none; }
sfs-modal footer {
  padding: var(--spacing-1) var(--spacing-1-5);
  border-top: 1px solid var(--sfs-color-gray-3);
  position: sticky; bottom: 0;
  background-color: var(--sfs-color-gray-1);
}
sfs-modal footer:empty { display: none; }

/* Aside — native popover, slides in from an edge */
sfs-aside {
  padding: 0;
  background-color: var(--sfs-color-gray-1);
  color: var(--sfs-color-gray-12);
}
sfs-aside[popover] {
  border: none;
  opacity: 0;
  translate: var(--_translate, 0 0);
  transition:
    translate var(--sfs-duration) ease,
    opacity var(--sfs-duration) ease,
    display var(--sfs-duration) allow-discrete,
    overlay var(--sfs-duration) allow-discrete;
}
sfs-aside[popover]:popover-open { opacity: 1; translate: 0; }
@starting-style {
  sfs-aside[popover]:popover-open { opacity: 0; translate: var(--_translate, 0 0); }
}
sfs-aside::backdrop {
  background-color: transparent;
  transition:
    background-color var(--sfs-duration) ease,
    display var(--sfs-duration) allow-discrete,
    overlay var(--sfs-duration) allow-discrete;
}
sfs-aside:popover-open::backdrop { background-color: var(--sfs-color-backdrop); }
@starting-style { sfs-aside:popover-open::backdrop { background-color: transparent; } }

@media (min-width: 780px) {
  sfs-aside:not([position]), sfs-aside[position*="horizontal"] { height: 100%; }
  sfs-aside:not([position])[position*="start"],
  sfs-aside[position*="horizontal"][position*="start"] { --_translate: -100% 0; place-self: start; }
  sfs-aside:not([position]):not([position]),
  sfs-aside:not([position])[position*="end"],
  sfs-aside[position*="horizontal"]:not([position]),
  sfs-aside[position*="horizontal"][position*="end"] { --_translate: 100% 0; place-self: end; }
  sfs-aside[position*="vertical"] { width: 100%; height: auto; }
  sfs-aside[position*="vertical"][position*="start"] { --_translate: 0 -100%; place-self: start; }
  sfs-aside[position*="vertical"]:not([position]),
  sfs-aside[position*="vertical"][position*="end"] { --_translate: 0 100%; place-self: end; }
}
@media (max-width: 779px) {
  sfs-aside { min-width: 100vw; min-height: 100vh; }
  sfs-aside[position-sm*="horizontal"] { height: 100%; }
  sfs-aside[position-sm*="horizontal"][position-sm*="start"] { --_translate: -100% 0; place-self: start; }
  sfs-aside[position-sm*="horizontal"]:not([position-sm]),
  sfs-aside[position-sm*="horizontal"][position-sm*="end"] { --_translate: 100% 0; place-self: end; }
  sfs-aside:not([position-sm]), sfs-aside[position-sm*="vertical"] { width: 100%; height: auto; }
  sfs-aside:not([position-sm])[position-sm*="start"],
  sfs-aside[position-sm*="vertical"][position-sm*="start"] { --_translate: 0 -100%; place-self: start; }
  sfs-aside:not([position-sm]):not([position-sm]),
  sfs-aside:not([position-sm])[position-sm*="end"],
  sfs-aside[position-sm*="vertical"]:not([position-sm]),
  sfs-aside[position-sm*="vertical"][position-sm*="end"] { --_translate: 0 100%; place-self: end; }
}

/* Dropdown — native popover + CSS anchor positioning */
sfs-dropdown { anchor-scope: --dropdown-anchor; }
sfs-dropdown .anchor {
  anchor-name: --dropdown-anchor;
  display: inline-flex;
  gap: var(--spacing-0-25);
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
sfs-dropdown .anchor:focus:not(:focus-visible) { outline: none; }
sfs-dropdown .anchor:focus-visible { outline: var(--sfs-outline-focus); outline-offset: 4px; }
sfs-dropdown .content {
  position: fixed;
  inset: auto;
  position-anchor: --dropdown-anchor;
  position-area: end span-end;
  position-try-fallbacks: flip-block, flip-inline;
  padding-block: var(--sfs-dropdown-margin, var(--spacing-1));
  border: none;
  background: none;
  opacity: 0;
  transition:
    opacity var(--sfs-duration) ease,
    display var(--sfs-duration) allow-discrete,
    overlay var(--sfs-duration) allow-discrete;
}
sfs-dropdown .content:not(:popover-open) { pointer-events: none; }
sfs-dropdown .content:popover-open { opacity: 1; }
@starting-style { sfs-dropdown .content:popover-open { opacity: 0; } }
sfs-dropdown .content .inner {
  background-color: var(--sfs-color-gray-1);
  border-radius: var(--spacing-0-5);
  display: grid;
  gap: var(--spacing-0-5);
  padding: var(--spacing-0-5) var(--spacing-1-5);
  box-shadow: var(--sfs-box-shadow-1);
}
sfs-dropdown .content .inner li a { padding-block: var(--spacing-0-5); }

/* Global messages (toasts) */
sfs-global-message { display: grid; gap: var(--spacing-0-5); }
sfs-global-message .alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--spacing-0-5);
  padding: var(--spacing-1);
  border-bottom: .25rem solid var(--message-type-color);
  background-color: var(--sfs-color-gray-1);
  box-shadow: rgba(48, 64, 77, .1) 0 0 .25rem, rgba(48, 64, 77, .25) 0 1rem 1.5rem;
}
sfs-global-message .alert.success { --message-type-color: var(--color-success); }
sfs-global-message .alert.info    { --message-type-color: var(--color-info); }
sfs-global-message .alert.warning { --message-type-color: var(--color-warning); }
sfs-global-message .alert.error   { --message-type-color: var(--color-error); }
sfs-global-message .icon { color: var(--message-type-color); transform: translateY(.155em); }
sfs-global-message .close-button { padding: var(--spacing-0-25); border: none; background-color: transparent; cursor: pointer; }
sfs-global-message .close-button:focus:not(:focus-visible) { outline: none; }
sfs-global-message .assistive-msg {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
}


/* ---------------------------------------------------------------------------
   8. STOREFRONT SHELL (optional — only if you rebuild header/footer)
--------------------------------------------------------------------------- */
sfs-storefront { display: flex; flex-wrap: wrap; align-items: start; min-height: 100vh; }
sfs-storefront > * { flex: 1 1 100%; }
sfs-storefront footer { place-self: end; }
sfs-storefront .global-messages {
  z-index: 10;
  position: fixed;
  inset: var(--spacing-2) var(--spacing-2) auto auto;
  width: 25rem;
}

header { box-shadow: rgb(0, 0, 0) 0 0 6px; }
header sfs-site-context-trigger { margin-inline-start: auto; }
[position="HeaderNorth"], [position="HeaderCenter"], [position="HeaderSouth"] {
  display: flex; align-items: center; padding-inline: var(--sfs-page-padding);
}
[position="HeaderNorth"]:not(:empty) { font-size: var(--font-size-14); gap: var(--spacing-1); justify-content: end; }
[position="HeaderNorth"]:not(:empty) a { padding: var(--spacing-0-5); }
[position="HeaderSouth"] { font-size: var(--font-size-11); padding-block: var(--spacing-0-5); }
sfs-site-context-trigger button, sfs-login a, cx-mini-cart a {
  --sfs-link-decoration: none;
  display: grid; justify-items: center;
  padding: var(--spacing-0-25) var(--spacing-0-75);
}
sfs-site-context-trigger button:hover, sfs-login a:hover, cx-mini-cart a:hover {
  background-color: var(--sfs-color-gray-2);
}

sfs-storefront > footer {
  background: var(--sfs-color-gray-1);
  padding-inline: var(--sfs-page-padding);
  padding-block-start: var(--spacing-3);
  border-block-start: 1px solid var(--sfs-color-gray-3);
}
[section="footer"] { display: grid; gap: var(--spacing-1-5); }
sfs-footer-navigation nav ul { display: grid; margin-block-end: var(--spacing-1-5); }
sfs-footer-navigation nav ul h3 {
  font-size: var(--font-size-14); font-weight: var(--font-weight-bold); display: block;
}
[position="FooterNorth"] { display: grid; gap: var(--spacing-1-5); }
[position="FooterNorth"] ul { gap: var(--spacing-0-5); }
[position="FooterNorth"] h3 {
  font-size: var(--font-size-20); font-weight: var(--font-weight-bold); margin-block: 0 var(--spacing-1);
}
@media (min-width: 1140px) { [position="FooterNorth"] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 780px) and (max-width: 1139px) { [position="FooterNorth"] { grid-template-columns: repeat(2, 1fr); } }

[position="FooterSouth"] {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--spacing-1);
  color: var(--sfs-color-gray-4);
  font-size: var(--font-size-12);
  margin-inline: calc(var(--sfs-page-padding) * -1);
  padding-inline: var(--sfs-page-padding);
  padding-block: var(--spacing-1-5);
}
[position="FooterSouth"] sfs-paragraph { margin: 0; }
@media (min-width: 780px) { [position="FooterSouth"] sfs-paragraph { margin-inline-start: auto; } }
@media (min-width: 360px) and (max-width: 1139px) {
  [position="FooterSouth"] { justify-content: center; }
  [position="FooterSouth"] sfs-paragraph { flex: 1 1 100%; text-align: center; }
}

cx-media img {
  object-fit: var(--sfs-cx-media-object-fit, initial);
  width: var(--sfs-cx-media-width, initial);
  height: var(--sfs-cx-media-height, initial);
  aspect-ratio: var(--sfs-cx-media-aspect-ratio, initial);
}

/* =============================================================================
   BROWSER SUPPORT NOTE
   This system leans on modern CSS: @starting-style, allow-discrete transitions,
   CSS anchor positioning (position-anchor / position-area), :has(), popover,
   and interpolate-size. Chromium 125+ is the effective baseline; Firefox and
   Safari degrade (dropdowns fall back to static position, transitions snap).
============================================================================= */