@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../fonts/storefront/manrope-latin-ext-variable.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../fonts/storefront/manrope-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Storefront UI foundation. Opt in through layouts.storefront-page.
   The existing isolation boundary excludes legacy global shape/input overrides. */
.sf-ui {
  --sfui-font-system: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --sfui-font: "Manrope", "Segoe UI", sans-serif;
  --sfui-text: #eef2f5;
  --sfui-muted: #a1aab7;
  --sfui-background: #0e131b;
  --sfui-surface: #151a23;
  /* Shared artwork background option; content and uploaded image ownership stay separate. */
  --sfui-background-artwork: #111827;
  --sfui-background-artwork-mobile: radial-gradient(circle at 18% 8%,rgba(228,173,63,.42),transparent 30%),radial-gradient(circle at 80% 10%,rgba(86,111,255,.36),transparent 34%),linear-gradient(180deg,#2d2349,#201a38 42%,#0e1425);
  --sfui-background-artwork-radius: var(--sfui-space-4);
  --sfui-background-image-position: center 34%;
  --sfui-background-image-filter: saturate(1.08) contrast(1.02) brightness(1.06);
  --sfui-background-label-color: rgba(255,255,255,.055);
  --sfui-background-label-stroke: rgba(255,255,255,.1);
  --sfui-control: #121720;
  --sfui-border: rgba(221, 230, 242, .1);
  --sfui-primary: #48f95d;
  --sfui-accent-text: #48f95d;
  --sfui-primary-ink: #fff;
  --sfui-button-green: #22c55e;
  --sfui-button-background: var(--sfui-button-green);
  --sfui-button-vivid: #36e65a;
  --sfui-button-blue: #2563eb;
  --sfui-button-text-shadow: 0 1px 2px rgba(0,55,12,.4);
  --sfui-button-icon-filter: drop-shadow(0 1px 1px rgba(0,55,12,.4));
  --sfui-price-color: #fff;
  --sfui-account-balance: var(--sfui-accent-text);
  --sfui-social-background: rgba(72, 249, 93, .14);
  --sfui-social-border: rgba(72, 249, 93, .28);
  --sfui-soft: rgba(72, 249, 93, .08);
  --sfui-frame-accent: var(--rax-palette-crimson);
  --sfui-focus-border: color-mix(in srgb, var(--sfui-frame-accent) 42%, transparent);
  --sfui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sfui-frame-accent) 10%, transparent);
  --sfui-warning: var(--rax-palette-gold);
  --sfui-warning-soft: color-mix(in srgb, var(--rax-palette-gold) 10%, var(--sfui-surface));
  --sfui-warning-border: color-mix(in srgb, var(--rax-palette-gold) 35%, transparent);
  --sfui-danger: #ffb3be;
  --sfui-danger-soft: rgba(255, 107, 132, .08);
  /* Shared discount label: approved reference colour and dimensions. */
  --sfui-discount-background: #e53935;
  --sfui-discount-height: 2.35rem;
  --sfui-discount-padding: .3rem .7rem;
  --sfui-discount-size: .86rem;
  --sfui-discount-weight: 800;
  /* Shared product information viewport and common native scrollbar colour. */
  --sfui-content-scroll-height: 400px;
  --sfui-scrollbar-thumb: #24bc36;
  --sfui-scroll-list-height: 400px;
  /* Shape roles: components never choose their own corner values. */
  --sfui-radius: 16px;
  --sfui-button-radius: 8px;
  --sfui-tag-radius: 6px;
  --sfui-round-radius: 50%;
  --sfui-pill-radius: 999px;
  --sfui-support-green: #25d366;
  --sfui-bubble-shadow: 0 2px 3px rgba(0,0,0,.08);
  --sfui-border-width: 1px;
  /* Type scale: the approved sizes are retained, with one owner per role. */
  --sfui-size-tiny: 10px;
  --sfui-size-micro: 11px;
  --sfui-size-caption: 12px;
  --sfui-size-label: 13px;
  --sfui-size-copy: 14px;
  --sfui-size-body: 15px;
  --sfui-size-input-mobile: 16px;
  --sfui-size-subtitle: 18px;
  --sfui-size-title: 20px;
  --sfui-size-hero: clamp(26.4px,3.2vw,32px);
  --sfui-size-intro: clamp(14.72px,1.6vw,16.8px);
  --sfui-size-price: var(--sfui-size-title);
  --sfui-size-quantity: var(--sfui-size-subtitle);
  --sfui-size-quantity-action: var(--sfui-size-title);
  --sfui-weight-normal: 400;
  --sfui-weight-medium: 600;
  --sfui-weight-bold: 700;
  --sfui-line-symbol: 1;
  --sfui-line-hero: 1.15;
  --sfui-line-price: 1.2;
  --sfui-line-product: 1.3;
  --sfui-line-title: 1.4;
  --sfui-line-label: 1.5;
  --sfui-line-body: 1.6;
  --sfui-line-copy: 1.7;
  --sfui-line-prose: 1.8;
  --sfui-tracking-hero: -.01em;
  --sfui-tracking-title: -.015em;
  --sfui-tracking-overline: .03em;
  --sfui-tracking-label: .04em;
  /* Shared spacing scale; half steps preserve the existing visual rhythm. */
  --sfui-space-1: 1px;
  --sfui-space-2: 2px;
  --sfui-space-3: 3px;
  --sfui-space-4: 4px;
  --sfui-space-5: calc(var(--sfui-space-4) + var(--sfui-space-1));
  --sfui-space-6: 6px;
  --sfui-space-7: calc(var(--sfui-space-6) + var(--sfui-space-1));
  --sfui-space-8: 8px;
  --sfui-space-9: calc(var(--sfui-space-8) + var(--sfui-space-1));
  --sfui-space-10: 10px;
  --sfui-space-12: 12px;
  --sfui-space-14: 14px;
  --sfui-space-16: 16px;
  --sfui-space-18: 18px;
  --sfui-space-20: 20px;
  --sfui-space-24: 24px;
  --sfui-space-32: 32px;
  --sfui-space-48: 48px;
  --sfui-motion-duration: .16s;
  --sfui-disabled-opacity: .5;
  --sfui-busy-opacity: .6;
  --sfui-hover-filter: brightness(.94);
  --sfui-active-filter: brightness(.88);
  --sfui-focus-width: 2px;
  --sfui-focus-offset: var(--sfui-space-4);
  --sfui-control-radius: 12px;
  --sfui-control-height: 60px;
  --sfui-button-height: 44px;
  --sfui-account-name-width: 120px;
  --sfui-account-avatar-size: var(--sfui-space-32);
  /* Shared page width follows the site header; hero height follows the reference. */
  --sfui-hero-height: 247px;
  --sfui-hero-padding-top: 60px;
  --sfui-hero-padding-bottom: calc(var(--sfui-hero-overlap) + 50px);
  --sfui-hero-intro-gap: 14.4px;
  --sfui-hero-description-gap: 2.4px;
  --sfui-hero-ink: #f4f7fb;
  --sfui-hero-muted: #d8e0e8;
  --sfui-hero-background: radial-gradient(42% 100% at 0 35%, rgba(72,249,93,.16), transparent 70%), radial-gradient(42% 100% at 100% 35%, rgba(72,249,93,.14), transparent 70%), linear-gradient(168deg,#0a0e14,#10161e 52%,#080c12);
  --sfui-hero-overlap: 64px;
  --sfui-hero-image-height: 220px;
  --sfui-hero-image-max: 300px;
  --sfui-hero-image-inset: 128px;
  --sfui-search-max: 560px;
  --sfui-search-background: #19212c;
  --sfui-search-border: rgba(221, 230, 242, .26);
  --sfui-search-placeholder: #d2dae3;
  --sfui-category-columns: 6;
  --sfui-category-ratio: 16 / 21;
  --sfui-media-slide-ratio: 197 / 78;
  --sfui-media-portrait-ratio: 3 / 4;
  --sfui-media-poster-ratio: 2 / 3;
  --sfui-media-banner-ratio: 3 / 1;
  --sfui-media-cover-ratio: 1920 / 450;
  --sfui-media-article-ratio: 8 / 5;
  --sfui-media-stage-ratio: 157 / 39;
  --sfui-category-caption: rgba(14, 19, 27, .7);
  --sfui-category-ink: var(--sfui-primary-ink);
  --sfui-shell-gutter: var(--sf-desktop-shell-gap, 16px);
  --sfui-gap: var(--sfui-space-24);
  --sfui-card-padding: var(--sfui-space-24);
  --sfui-dialog-width: 780px;
  --sfui-dialog-backdrop: rgba(0,0,0,.65);
  /* Product rows: desktop reference + mobile catalog controls, shared by catalog pages. */
  --sfui-product-row-media: var(--sf-product-image-row-size, 72px);
  --sfui-product-row-min-height: 106px;
  --sfui-product-row-padding: var(--sfui-space-16);
  --sfui-product-row-gap: var(--sfui-space-16);
  --sfui-product-list-gap: var(--sfui-space-12);
  --sfui-purchase-price-width: 128px;
  --sfui-purchase-cart-width: 148px;
  --sfui-purchase-gap: var(--sfui-space-12);
  --sfui-purchase-price-line: 24px;
  --sfui-purchase-old-line: 18px;
  --sfui-quantity-height: 44px;
  --sfui-quantity-width: 124px;
  --sfui-quantity-button-width: 34px;
  --sfui-quantity-button-height: 34px;
  --sfui-quantity-padding: 4px 6px;
  --sfui-quantity-button-background: transparent;
  --sfui-quantity-button-border: transparent;
  --sfui-shell-max: var(--sf-desktop-shell-max, 1400px);
  color: var(--sfui-text);
  background: var(--sfui-background);
  font: var(--sfui-weight-normal) var(--sfui-size-body)/var(--sfui-line-body) var(--sfui-font);
  color-scheme: dark;
  padding-block: 0 48px;
}
/* Opt-in support palette: default storefront colours stay unchanged. */
.sf-ui.sf-ui--support {
  --sfui-text: #1e3a5f;
  --sfui-muted: #526579;
  --sfui-background: #edece9;
  --sfui-surface: var(--sfui-background);
  --sfui-control: #fff;
  --sfui-border: rgba(30,58,95,.12);
  --sfui-primary: var(--sfui-support-green);
  --sfui-accent-text: var(--sfui-support-green);
  --sfui-button-green: var(--sfui-support-green);
  --sfui-button-background: var(--sfui-support-green);
  --sfui-frame-accent: var(--sfui-support-green);
  --sfui-soft: color-mix(in srgb, var(--sfui-support-green) 14%, #fff);
  --sfui-danger: #a72d45;
  --sfui-button-text-shadow: none;
  --sfui-button-icon-filter: none;
  color-scheme: light;
}
/* Explicit dark surfaces retain the base palette, including on a light page. */
html[data-theme="light"] .sf-ui:not(.sf-ui--dark, .sf-ui--support) {
  --sfui-text: #263745;
  --sfui-price-color: #172b3a;
  --sfui-muted: #617280;
  --sfui-background: #f6f8fa;
  --sfui-surface: #fff;
  --sfui-control: #fcfdff;
  --sfui-search-background: #fff;
  --sfui-search-border: #bbc7d1;
  --sfui-search-placeholder: #465b6b;
  --sfui-border: #e3e8ed;
  --sfui-danger: #a72d45;
  --sfui-accent-text: #197a31;
  --sfui-social-background: #286837;
  --sfui-warning: color-mix(in srgb, var(--rax-palette-gold) 25%, var(--sfui-text));
  color-scheme: light;
}
.sf-ui, .sf-ui *, .sf-ui *::before, .sf-ui *::after { box-sizing: border-box; }
.sf-ui :where(h1,h2,h3,p,ul) { margin: 0; }
.sf-ui :where(a) { color: inherit; text-decoration: none; }
.sf-ui :where(button,input,textarea,select) { font-family: var(--sfui-font); }
.sf-ui :where(button,a,input,textarea,select,summary):focus-visible { outline: var(--sfui-focus-width) solid var(--sfui-frame-accent); outline-offset: var(--sfui-focus-offset); }
.sf-ui [hidden] { display: none; }
.sfui-shell { width: min(calc(100% - var(--sfui-shell-gutter) * 2), var(--sfui-shell-max)); margin-inline: auto; padding-inline: 0; min-width: 0; }
.sfui-background, .sfui-background--full-width { position: relative; isolation: isolate; }
.sfui-background { width: 100%; background: var(--sfui-backdrop, var(--sfui-background)); }
.sfui-background--brand { --sfui-backdrop: var(--sfui-hero-background); }
.sfui-background--plain { --sfui-backdrop: var(--sfui-background); }
.sfui-background--full-width::before { content: ''; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1; background: var(--sfui-backdrop, var(--sfui-background)); pointer-events: none; }
.sfui-background--artwork { --sfui-backdrop: var(--sfui-background-artwork); border-radius: var(--sfui-background-artwork-radius); }
.sfui-background__image { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; pointer-events: none; }
.sfui-background--artwork .sfui-background__image { inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); object-position: var(--sfui-background-image-position); filter: var(--sfui-background-image-filter); }
.sfui-background__label { display: none; position: absolute; top: var(--sfui-space-8); left: var(--sfui-space-10); font-family: var(--sfui-font-system); color: var(--sfui-background-label-color); font-size: clamp(54px,18vw,92px); font-weight: 900; line-height: .9; white-space: nowrap; pointer-events: none; -webkit-text-stroke: 1px var(--sfui-background-label-stroke); }
/* In-page sections own their outer spacing through the common responsive gap. */
.sf-ui.sf-ui--section { padding-block: var(--sfui-gap); }
/* Isolated components embedded in a legacy layout do not reserve a second page footer. */
.sf-ui.sf-ui--embedded { padding: 0; background: transparent; }
.sfui-stack { display: grid; gap: var(--sfui-gap); min-width: 0; align-content: start; }
.sfui-stack--compact { gap: var(--sfui-space-14); }
.sfui-columns { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: var(--sfui-gap); align-items: start; }
.sfui-sidebar-layout { display: grid; grid-template-columns: minmax(220px,280px) minmax(0,1fr); gap: var(--sfui-gap); align-items: start; }
/* Optional full content on phones/tablets; desktop keeps the standard sidebar. */
@media (max-width: 1199.98px) {
  .sfui-sidebar-layout--desktop-sidebar { grid-template-columns: minmax(0,1fr); }
  .sfui-sidebar-layout--desktop-sidebar > .sfui-sidebar-layout__aside { display: none; }
}
/* Optional artwork beside content, hidden with its column on phones and tablets. */
.sfui-sidebar-layout--illustrated { grid-template-columns: minmax(0,1fr); gap: var(--sfui-space-20); }
.sfui-sidebar-layout__visual { display: none; min-width: 0; }
@media (min-width: 1200px) {
  .sfui-sidebar-layout--illustrated { grid-template-columns: minmax(220px,23%) minmax(0,1fr); }
  .sfui-sidebar-layout__visual { display: block; }
}
.sfui-totals { display: grid; gap: var(--sfui-space-16); margin: 0; }
.sfui-totals__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sfui-space-8) var(--sfui-space-16); min-width: 0; }
.sfui-totals__row dt { color: var(--sfui-muted); }
.sfui-totals__row dd { margin: 0; font-weight: var(--sfui-weight-bold); overflow-wrap: anywhere; }
.sfui-totals__row--total { padding-top: var(--sfui-space-16); border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-content { position: relative; z-index: 1; }
/* Pages without a hero still reserve the common gap below the site header. */
.sfui-content:first-child { padding-block-start: var(--sfui-gap); }
.sfui-page-header + .sfui-content { margin-top: calc(-1 * var(--sfui-hero-overlap)); }
.sfui-page-header { width: 100%; color: var(--sfui-hero-ink); background: var(--sfui-hero-background); }
.sfui-page-header__inner { position: relative; min-height: var(--sfui-hero-height); padding-block: var(--sfui-hero-padding-top) var(--sfui-hero-padding-bottom); }
.sfui-page-header__intro { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--sfui-hero-intro-gap); min-width: 0; padding-inline-end: calc(var(--sfui-hero-image-max) + var(--sfui-hero-image-inset) + var(--sfui-gap)); }
.sfui-page-header__copy { min-width: 0; }
.sfui-page-header__meta { margin-top: var(--sfui-space-12); }
.sfui-page-header .sfui-page-header__meta .sfui-flow { justify-content: flex-start; }
.sfui-page-header__actions { position: relative; z-index: 1; max-width: var(--sfui-search-max); margin-top: var(--sfui-space-32); }
.sfui-page-header__title { color: inherit; font-size: var(--sfui-size-hero); line-height: var(--sfui-line-hero); font-weight: var(--sfui-weight-medium); letter-spacing: var(--sfui-tracking-hero); overflow-wrap: anywhere; }
.sfui-page-header__description { margin-top: var(--sfui-hero-description-gap); color: var(--sfui-hero-muted); font-size: var(--sfui-size-intro); line-height: var(--sfui-line-label); max-width: 52ch; overflow-wrap: anywhere; }
.sfui-page-header__visual { position: absolute; right: var(--sfui-hero-image-inset); bottom: 0; display: flex; justify-content: flex-end; min-width: 0; pointer-events: none; }
.sfui-page-header__image { display: block; width: auto; max-width: var(--sfui-hero-image-max); height: var(--sfui-hero-image-height); object-fit: contain; object-position: right bottom; }
.sfui-page-header--plain .sfui-page-header__intro { padding-inline-end: 0; }
.sfui-page-header--actions-end .sfui-page-header__actions { display: flex; justify-content: center; }
.sfui-page-header--actions-aside .sfui-page-header__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--sfui-gap); }
.sfui-page-header--actions-aside .sfui-page-header__actions { min-width: 0; margin: 0; }
.sfui-page-header--actions-aside .sfui-flow { justify-content: flex-end; }
@media (min-width: 992px) {
  .sfui-page-header--actions-end .sfui-page-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sfui-gap); }
  .sfui-page-header--actions-end .sfui-page-header__intro { flex: 1; }
  .sfui-page-header--actions-end .sfui-page-header__actions { flex: 0 0 auto; margin-top: 0; }
}
/* Optional overview: copy-aligned controls on desktop; centered summary before controls on mobile. */
.sfui-page-header__controls { margin-top: var(--sfui-space-20); min-width: 0; }
.sfui-page-header--with-controls:not(.sfui-page-header--overview) .sfui-page-header__intro { align-items: flex-start; }
.sfui-page-header--overview .sfui-page-header__inner { display: grid; grid-template-columns: calc(var(--sfui-badge-large) + 2 * var(--sfui-border-width)) minmax(0,1fr) auto; column-gap: var(--sfui-hero-intro-gap); row-gap: var(--sfui-space-20); align-items: center; }
.sfui-page-header--overview .sfui-page-header__intro { grid-column: 1 / 3; grid-row: 1; }
.sfui-page-header--overview .sfui-page-header__actions { grid-column: 3; grid-row: 1; min-width: 0; margin: 0; }
.sfui-page-header--overview .sfui-page-header__controls { grid-column: 2; grid-row: 2; margin-top: 0; }
.sfui-choice-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sfui-space-10); }
.sfui-button.sfui-button--choice { --sfui-icon-frame-active-border: var(--sfui-focus-border); width: auto; min-width: 0; max-width: 100%; padding: var(--sfui-space-8) var(--sfui-space-12); gap: var(--sfui-space-10); border-radius: var(--sfui-control-radius); text-align: start; }
.sfui-choice-tabs__label { min-width: 0; overflow-wrap: anywhere; }
.sfui-choice-tabs--tiles .sfui-choice-tabs__label { flex: 1; }
.sfui-button--choice[aria-selected="true"] { border-color: var(--sfui-focus-border); box-shadow: var(--sfui-focus-ring); }
.sfui-rating-summary { display: grid; justify-items: center; gap: var(--sfui-space-4); font-size: var(--sfui-size-copy); line-height: var(--sfui-line-label); text-align: center; }
.sfui-rating-summary > strong { font-size: var(--sfui-size-subtitle); }
.sfui-rating-summary__stars { display: inline-flex; align-items: center; gap: var(--sfui-space-4); padding: var(--sfui-space-6) var(--sfui-space-12); border-radius: var(--sfui-pill-radius); background: color-mix(in srgb,var(--sfui-rating-star) 24%,var(--sfui-primary-ink)); }
.sfui-rating-summary--compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sfui-space-6); padding: var(--sfui-space-4) var(--sfui-space-8) var(--sfui-space-4) var(--sfui-space-4); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-pill-radius); }
.sfui-rating-summary__mark { --sfui-icon-ink: var(--sfui-primary-ink); display: grid; place-items: center; width: var(--sfui-space-24); height: var(--sfui-space-24); border-radius: var(--sfui-round-radius); background: var(--sfui-button-green); }
.sfui-page-header--cover { position: relative; isolation: isolate; }
.sfui-page-header__cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: var(--sfui-disabled-opacity); }
.sfui-card { min-width: 0; padding: var(--sfui-card-padding); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-radius); background: var(--sfui-surface); }
.sfui-card--compact { padding: var(--sfui-space-16); }
.sfui-panel-heading { display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; }
.sfui-panel-heading__title { flex: 1; min-width: 0; }
.sfui-panel-heading__meta { flex-shrink: 0; }
.sfui-payment-bar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,224px); gap: var(--sfui-space-20); align-items: center; }
.sfui-payment-bar__amount { display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; }
.sfui-payment-bar__value { display: grid; gap: var(--sfui-space-3); min-width: 0; }
.sfui-payment-bar__value .sfui-price { text-align: start; font-size: var(--sfui-size-hero); }
.sfui-payment-bar__action { display: grid; min-width: 0; }
.sfui-card--control-radius { border-radius: var(--sfui-control-radius); }
/* Shared image cards: no page-owned palette, corners or image scaling. */
.sfui-media-card { position: relative; display: block; width: 100%; min-width: 0; overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-surface); }
.sfui-media-card--slide { aspect-ratio: var(--sfui-media-slide-ratio); }
.sfui-media-card--portrait { aspect-ratio: var(--sfui-media-portrait-ratio); }
.sfui-media-card--poster { aspect-ratio: var(--sfui-media-poster-ratio); border-radius: var(--sfui-radius); }
.sfui-media-card--banner { aspect-ratio: var(--sfui-media-banner-ratio); }
.sfui-media-card--cover { aspect-ratio: var(--sfui-media-cover-ratio); }
.sfui-media-card--article { aspect-ratio: var(--sfui-media-article-ratio); }
.sfui-media-card--symbol { aspect-ratio: var(--sfui-media-article-ratio); background: radial-gradient(ellipse at center,var(--sfui-media-surface-inner,var(--sfui-soft)),var(--sfui-media-surface,var(--sfui-surface))); }
.sfui-media-card--symbol .sfui-media-card__image { padding: var(--sfui-space-16); }
.sfui-media-card__picture, .sfui-media-card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sfui-media-card__image { object-fit: contain; }
.sfui-media-card--cover .sfui-media-card__image, .sfui-media-card--article .sfui-media-card__image { object-fit: cover; }
.sfui-media-card[href]:hover { border-color: var(--sfui-search-border); }
.sfui-media-card--desktop { display: none; }
@media (min-width: 1101px) {
  .sfui-media-card--stage-item { height: 100%; aspect-ratio: auto; }
  .sfui-media-card--desktop { display: block; }
}
.sfui-card__heading { display: grid; gap: var(--sfui-space-6); margin-bottom: var(--sfui-gap); }
.sfui-progress { display: block; appearance: none; width: 100%; height: var(--sfui-space-8); margin-block: var(--sfui-space-12); overflow: hidden; border: 0; border-radius: var(--sfui-pill-radius); background: var(--sfui-soft); color: var(--sfui-button-green); }
.sfui-progress::-webkit-progress-bar { background: var(--sfui-soft); border-radius: inherit; }
.sfui-progress::-webkit-progress-value { background: var(--sfui-button-green); border-radius: inherit; }
.sfui-progress::-moz-progress-bar { background: var(--sfui-button-green); border-radius: inherit; }
.sfui-card__title { font-size: var(--sfui-card-title-size, var(--sfui-size-title)); line-height: var(--sfui-line-title); font-weight: var(--sfui-weight-bold); letter-spacing: var(--sfui-tracking-title); color: var(--sfui-text); overflow-wrap: anywhere; }
.sfui-card__description, .sfui-muted { color: var(--sfui-muted); font-size: var(--sfui-size-copy); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-nav-link { display: inline-flex; align-items: center; gap: var(--sfui-nav-gap, var(--sfui-space-10)); min-height: var(--sfui-nav-height, var(--sfui-button-height)); padding: var(--sfui-nav-padding, var(--sfui-space-8) var(--sfui-space-12)); border: var(--sfui-border-width) solid transparent; border-radius: var(--sfui-control-radius); background: transparent; color: var(--sfui-text); font-size: var(--sfui-nav-font-size, var(--sfui-size-copy)); font-weight: var(--sfui-weight-medium); line-height: var(--sfui-line-label); text-decoration: none; cursor: pointer; }
.sfui-nav-link--small { min-height: var(--sfui-space-32); gap: var(--sfui-space-6); padding: var(--sfui-space-4) var(--sfui-space-8); font-size: var(--sfui-size-caption); }
/* Reusable account summary trigger: avatar, identity, balance, disclosure. */
.sfui-account-link { display: inline-flex; align-items: center; gap: var(--sfui-space-6); min-width: 0; max-width: 100%; min-height: var(--sfui-icon-button-size); padding: var(--sfui-space-2) var(--sfui-space-6); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-button-radius); background: var(--sfui-control); color: var(--sfui-text); text-align: left; font: inherit; cursor: pointer; }
.sfui-account-link__avatar { display: block; flex: 0 0 var(--sfui-account-avatar-size); width: var(--sfui-account-avatar-size); height: var(--sfui-account-avatar-size); border-radius: var(--sfui-button-radius); object-fit: cover; }
.sfui-account-link__copy { display: grid; flex: 1 1 auto; min-width: 0; max-width: var(--sfui-account-name-width); line-height: var(--sfui-line-product); }
.sfui-account-link__name,.sfui-account-link__balance { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--sfui-weight-bold); }
.sfui-account-link__name { font-size: var(--sfui-size-label); }
.sfui-account-link__balance { color: var(--sfui-account-balance); font-size: var(--sfui-size-caption); font-variant-numeric: tabular-nums; }
.sfui-account-link__arrow { --sfui-icon-ink: var(--sfui-muted); flex: 0 0 var(--sfui-icon-medium); margin-inline-start: auto; }
.sfui-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sfui-space-18); min-width: 0; }
.sfui-form-steps { display: flex; flex-wrap: wrap; gap: var(--sfui-space-8); list-style: none; padding: 0; margin: 0; }
.sfui-form-steps__item { display: flex; align-items: center; gap: var(--sfui-space-8); flex: 1 1 calc(var(--sfui-space-48) * 3); min-width: 0; padding: var(--sfui-space-12); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); color: var(--sfui-muted); font-size: var(--sfui-size-label); overflow-wrap: anywhere; }
.sfui-form-steps__item[aria-current="step"] { color: var(--sfui-accent-text); border-color: var(--sfui-accent-text); background: var(--sfui-soft); }
.sfui-form-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sfui-space-12); font-size: var(--sfui-size-label); }
.sfui-consents { display: grid; gap: var(--sfui-space-14); }
.sfui-link--accent { --sfui-link-color: var(--sfui-accent-text); font-weight: var(--sfui-weight-medium); }
.sfui-field { display: grid; align-content: start; gap: var(--sfui-space-7); min-width: 0; }
.sfui-field--full { grid-column: 1 / -1; }
.sfui-field__label { font-size: var(--sfui-size-label); font-weight: var(--sfui-weight-medium); color: var(--sfui-text); }
.sfui-field__frame { display: flex; min-width: 0; min-height: var(--sfui-control-height); border: var(--sfui-border-width) solid var(--sfui-field-border, var(--sfui-border)); border-radius: var(--sfui-control-radius); background: var(--sfui-field-background, var(--sfui-control)); transition: border-color var(--sfui-motion-duration) ease, box-shadow var(--sfui-motion-duration) ease; }
.sfui-field__frame:focus-within { border-color: var(--sfui-focus-border); box-shadow: var(--sfui-focus-ring); }
.sfui-field__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--sfui-field-icon-width, 48px); border-inline-end: var(--sfui-border-width) solid var(--sfui-field-divider, var(--sfui-border)); color: var(--sfui-muted); }
.sfui-field__input { display: block; width: 100%; min-width: 0; border: 0; border-radius: inherit; padding: var(--sfui-field-padding, 14px 16px); background: transparent; color: var(--sfui-text); font-size: var(--sfui-field-font-size, var(--sfui-size-body)); line-height: var(--sfui-line-body); box-shadow: none; }
.sfui-field__input:focus, .sfui-field__input:focus-visible { outline: none; }
.sfui-field__toggle { --sfui-icon-ink: var(--sfui-neutral-icon); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--sfui-button-height); align-self: center; min-height: var(--sfui-button-height); margin-inline-end: var(--sfui-space-6); padding: var(--sfui-space-8); border: 0; border-radius: var(--sfui-button-radius); background: transparent; color: var(--sfui-text); cursor: pointer; }
.sfui-field__country { display: flex; align-items: center; flex: 0 0 auto; padding-inline-start: 22px; }
.sfui-field__toggle[aria-pressed="true"] { background: var(--sfui-soft); }
.sfui-field__input::placeholder { color: var(--sfui-field-placeholder, var(--sfui-muted)); opacity: var(--sfui-field-placeholder-opacity, .8); }
textarea.sfui-field__input { min-height: var(--sfui-textarea-min-height, 164px); resize: vertical; }
.sfui-field--compact { --sfui-control-height: var(--sfui-button-height); --sfui-field-padding: var(--sfui-space-8) var(--sfui-space-12); --sfui-textarea-min-height: var(--sfui-button-height); }
.sfui-field--compact textarea.sfui-field__input { max-height: calc(var(--sfui-space-48) * 2); resize: none; }
.sfui-field__input[type="file"] { overflow: hidden; }
.sfui-field__input::file-selector-button { margin-inline-end: var(--sfui-space-12); padding: var(--sfui-space-8) var(--sfui-space-12); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-button-radius); background: var(--sfui-soft); color: var(--sfui-text); font: inherit; cursor: pointer; }
select.sfui-field__input { cursor: pointer; }
select.sfui-field__input option { background: var(--sfui-control); color: var(--sfui-text); }
.sfui-field__frame--error { border-color: var(--sfui-danger); }
.sfui-field__frame--error:focus-within { border-color: var(--sfui-danger); box-shadow: 0 0 0 3px var(--sfui-danger-soft); }
.sfui-field__frame--rich { display: grid; }
.sfui-rich-field__toolbar { padding: var(--sfui-space-8); gap: var(--sfui-space-6); border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-rich-field__toolbar [aria-pressed="true"] { background: var(--sfui-soft); color: var(--sfui-accent-text); }
.sfui-rich-field__content { min-height: var(--sfui-textarea-min-height, 164px); max-height: var(--sfui-scroll-list-height); overflow: auto; overflow-wrap: anywhere; }
.sfui-rich-field__content:empty::before { content: attr(data-placeholder); color: var(--sfui-muted); pointer-events: none; }
.sfui-field__error { color: var(--sfui-danger); font-size: var(--sfui-size-caption); overflow-wrap: anywhere; }
.sfui-field__help { color: var(--sfui-muted); font-size: var(--sfui-size-caption); overflow-wrap: anywhere; }
.sfui-check { display: flex; align-items: flex-start; gap: var(--sfui-space-10); font-size: var(--sfui-size-label); line-height: var(--sfui-line-copy); color: var(--sfui-muted); cursor: pointer; }
.sfui-check input { margin: var(--sfui-space-3) 0 0; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--sfui-primary); }
.sfui-link { text-decoration: var(--sfui-link-decoration, underline); text-underline-offset: 3px; color: var(--sfui-link-color, var(--sfui-text)); }
.sfui-link:hover { color: var(--sfui-accent-text); }
.sfui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sfui-space-12); }
.sfui-button { --sfui-icon-ink: var(--sfui-primary-ink); display: inline-flex; align-items: center; justify-content: center; gap: var(--sfui-space-9); min-height: var(--sfui-button-height); max-width: 100%; padding: var(--sfui-space-10) var(--sfui-space-24); border: var(--sfui-border-width) solid var(--sfui-button-border, var(--sfui-button-background)); border-radius: var(--sfui-button-radius); background: var(--sfui-button-fill, var(--sfui-button-background)); color: var(--sfui-primary-ink); font-size: var(--sfui-size-copy); font-weight: var(--sfui-weight-bold); line-height: var(--sfui-line-label); text-align: center; text-shadow: var(--sfui-button-text-shadow); cursor: pointer; transition: filter var(--sfui-motion-duration) ease, box-shadow var(--sfui-motion-duration) ease; }
.sfui-button--compact { --sfui-button-height: var(--sfui-icon-button-size); --sfui-button-text-shadow: 0 1px 1px rgba(0,55,12,.15); --sfui-button-icon-filter: none; padding-block: var(--sfui-space-6); }
.sfui-button--blue { --sfui-button-background: var(--sfui-button-blue); }
.sfui-button > .sfui-icon { filter: var(--sfui-button-icon-filter); }
.sfui-button:where(:hover):not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { filter: var(--sfui-hover-filter); }
.sfui-button:where(:active):not(:disabled,[aria-disabled="true"],[aria-busy="true"]) { filter: var(--sfui-active-filter); }
.sfui-button:is(:disabled,[aria-disabled="true"]) { opacity: var(--sfui-disabled-opacity); cursor: not-allowed; }
.sfui-button--secondary { --sfui-icon-ink: var(--sfui-neutral-icon); --sfui-button-text-shadow: none; --sfui-button-icon-filter: none; border-color: var(--sfui-border); background: var(--sfui-control); color: var(--sfui-text); }
.sfui-button--outline { --sfui-icon-ink: var(--sfui-button-background); --sfui-button-text-shadow: none; --sfui-button-icon-filter: none; background: var(--sfui-control); color: var(--sfui-button-background); font-weight: var(--sfui-weight-medium); }
.sfui-button--pill { border-radius: var(--sfui-pill-radius); }
.sfui-button--start { justify-content: flex-start; text-align: start; padding-inline: var(--sfui-space-14); overflow-wrap: anywhere; }
.sfui-button[aria-busy="true"] { opacity: var(--sfui-busy-opacity); cursor: wait; }
.sfui-notice { display: flex; align-items: flex-start; gap: var(--sfui-space-10); border: var(--sfui-border-width) solid var(--sfui-focus-border); border-radius: var(--sfui-control-radius); background: var(--sfui-soft); padding: var(--sfui-space-14) var(--sfui-space-16); font-size: var(--sfui-size-copy); overflow-wrap: anywhere; }
.sfui-notice .sfui-icon { margin-top: var(--sfui-space-2); }
.sfui-notice--error { border-color: var(--sfui-danger); background: var(--sfui-danger-soft); color: var(--sfui-danger); }
.sfui-notice--warning { border-color: var(--sfui-warning-border); background: var(--sfui-warning-soft); color: var(--sfui-warning); }
.sfui-notice__copy { min-width: 0; }
.sfui-notice__title { margin-bottom: var(--sfui-space-6); font-weight: var(--sfui-weight-bold); }
.sfui-channel-list { display: grid; gap: var(--sfui-space-20); }
.sfui-channel { display: flex; align-items: flex-start; gap: var(--sfui-space-14); min-width: 0; }
.sfui-channel + .sfui-channel { padding-top: var(--sfui-space-20); border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-channel__body { display: grid; gap: var(--sfui-space-5); min-width: 0; }
.sfui-channel__title { font-size: var(--sfui-size-copy); font-weight: var(--sfui-weight-bold); }
.sfui-channel__description { color: var(--sfui-muted); font-size: var(--sfui-size-label); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-channel__link { display: inline-flex; align-items: center; gap: var(--sfui-space-6); width: fit-content; max-width: 100%; min-height: 32px; color: var(--sfui-text); font-size: var(--sfui-size-label); font-weight: var(--sfui-weight-medium); overflow-wrap: anywhere; }
.sfui-channel__link:hover { color: var(--sfui-accent-text); }
.sfui-contact-list { display: grid; min-width: 0; }
.sfui-contact-row { display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; padding-block: var(--sfui-space-12); }
.sfui-contact-row:first-child { padding-top: 0; }
.sfui-contact-row + .sfui-contact-row { border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-contact-row__body { display: grid; gap: var(--sfui-space-3); min-width: 0; }
.sfui-contact-row__label { color: var(--sfui-muted); font-size: var(--sfui-size-micro); line-height: var(--sfui-line-label); font-weight: var(--sfui-weight-bold); letter-spacing: var(--sfui-tracking-label); text-transform: uppercase; }
.sfui-contact-row__value { font-size: var(--sfui-size-copy); line-height: var(--sfui-line-label); color: var(--sfui-text); overflow-wrap: anywhere; white-space: pre-line; }
.sfui-contact-row__value[href]:hover { text-decoration: underline; text-underline-offset: 3px; }
.sfui-contact-socials { display: grid; gap: var(--sfui-space-12); margin-top: var(--sfui-space-16); padding-top: var(--sfui-space-16); border-top: var(--sfui-border-width) solid var(--sfui-border); }
/* Shared horizontal contact option; the default contact page stays unchanged. */
.sfui-contact-list--strip { grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sfui-space-24); }
.sfui-contact-list--strip .sfui-contact-row { padding: 0; border: 0; }
.sfui-contact-list--strip .sfui-contact-row__label { font-size: var(--sfui-size-caption); letter-spacing: normal; text-transform: none; }
.sfui-contact-list--strip .sfui-contact-row__value { font-weight: var(--sfui-weight-bold); }
@media (max-width: 767.98px) {
  .sfui-page-header--actions-aside .sfui-page-header__inner { grid-template-columns: minmax(0,1fr); }
  .sfui-page-header--actions-aside .sfui-page-header__actions { max-width: none; }
  .sfui-page-header--actions-aside .sfui-flow { justify-content: space-between; }
  .sfui-page-header--actions-aside .sfui-flow > .sfui-button { flex-shrink: 0; width: auto; }
  .sfui-contact-list--strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sfui-space-20) var(--sfui-space-16); }
  .sfui-contact-list--strip .sfui-contact-row { flex-direction: column; gap: var(--sfui-space-8); text-align: center; }
  .sfui-contact-list--strip .sfui-contact-row__body { max-width: 100%; }
}
.sfui-socials { display: flex; flex-wrap: wrap; gap: var(--sfui-space-8); }
.sfui-social-link { display: inline-flex; border-radius: var(--sfui-control-radius); color: var(--sfui-icon-ink); }
.sfui-social-link:not(.sfui-icon-frame-control):hover { filter: brightness(1.1); }
/* Reusable section navigation, search and native question/answer disclosure. */
.sfui-section-nav { display: grid; gap: var(--sfui-gap); }
.sfui-navigation-content:focus { outline: none; }
.sfui-section-nav__group { display: grid; gap: var(--sfui-space-12); min-width: 0; }
.sfui-section-nav__heading { color: var(--sfui-muted); font-size: var(--sfui-size-caption); font-weight: var(--sfui-weight-bold); letter-spacing: var(--sfui-tracking-overline); }
.sfui-section-nav__links { display: grid; gap: var(--sfui-space-6); min-width: 0; }
.sfui-section-nav__link { display: flex; align-items: center; gap: var(--sfui-space-10); min-height: var(--sfui-button-height); padding: var(--sfui-space-10) var(--sfui-space-12); border: var(--sfui-border-width) solid transparent; border-radius: var(--sfui-control-radius); color: var(--sfui-muted); font-size: var(--sfui-size-copy); font-weight: var(--sfui-weight-medium); overflow-wrap: anywhere; }
.sfui-section-nav__link:hover { color: var(--sfui-text); background: var(--sfui-control); }
.sfui-section-nav__link[aria-current="page"] { color: var(--sfui-accent-text); }
.sfui-section-nav:not(.sfui-section-nav--quiet) .sfui-section-nav__link[aria-current="page"] { border-color: var(--sfui-focus-border); background: var(--sfui-soft); }
.sfui-search-form { --sfui-field-background: var(--sfui-search-background); --sfui-field-border: var(--sfui-search-border); --sfui-field-placeholder: var(--sfui-search-placeholder); --sfui-field-placeholder-opacity: 1; --sfui-field-font-size: var(--sfui-size-input-mobile); --sfui-button-background: var(--sfui-button-vivid); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sfui-space-12); align-items: stretch; }
/* Category cards opt in explicitly; existing home and product cards keep their own selectors. */
.sfui-category-grid { display: grid; grid-template-columns: repeat(var(--sfui-category-columns),minmax(0,1fr)); gap: var(--sfui-space-12); min-width: 0; }
.sfui-category-card { position: relative; min-width: 0; overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sfui-search-form--instant { grid-template-columns: minmax(0,1fr); }
/* Optional compact search uses the existing control, icon and spacing scales. */
.sfui-search-form--compact { --sfui-control-height: var(--sfui-button-height); --sfui-field-padding: var(--sfui-space-8) var(--sfui-space-10); --sfui-field-icon-width: var(--sfui-badge-small); }
.sfui-category-card:not(.sfui-category-card--menu) { display: block; aspect-ratio: var(--sfui-category-ratio); border-top-color: var(--sfui-focus-border); }
.sfui-category-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sfui-category-card__caption { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sfui-space-8); min-height: var(--sfui-control-height); padding: var(--sfui-space-8) var(--sfui-space-12); border-radius: var(--sfui-control-radius); color: var(--sfui-category-ink); background: var(--sfui-category-caption); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sfui-category-card__caption > strong { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--sfui-size-label); line-height: var(--sfui-line-label); font-weight: var(--sfui-weight-bold); }
.sfui-category-card__arrow { --sfui-icon-ink: var(--sfui-category-ink); display: grid; place-items: center; width: var(--sfui-badge-small); height: var(--sfui-badge-small); flex: 0 0 var(--sfui-badge-small); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-button-radius); background: rgba(255,255,255,.12); }
/* Opt-in menu presentation: the same card, typography and shape; separate media roles.
   Existing page cards keep their portrait overlay and decorative edge. */
/* Menu cards keep the original detached, centred caption on desktop.
   Their mobile form is a tinted row; the base category page card is unchanged. */
.sfui-category-card--menu { display: flex; flex-direction: column; align-self: start; gap: var(--sfui-space-8); border-color: transparent; background: transparent; }
.sfui-category-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sfui-category-card__media > .sfui-category-card__image[hidden] { display: none; }
.sfui-category-card--menu > .sfui-category-card__caption { position: static; justify-content: center; min-height: var(--sfui-space-32); padding: var(--sfui-space-4); color: var(--sfui-text); background: transparent; text-align: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sfui-category-card__mobile-icon { display: none; }
@media (max-width: 991.98px) {
  .sfui-category-card--menu { flex-direction: row; align-items: center; gap: var(--sfui-space-10); padding: var(--sfui-space-10); border-color: var(--sfui-border); background: var(--sfui-tinted-background, var(--sfui-control)); }
  .sfui-category-card--menu > .sfui-category-card__media { display: none; }
  .sfui-category-card--menu > .sfui-category-card__mobile-icon { display: flex; flex: 0 0 auto; }
  .sfui-category-card--menu > .sfui-category-card__caption { justify-content: flex-start; min-width: 0; min-height: 0; padding: 0; text-align: start; }
  .sfui-category-card--menu > .sfui-category-card__caption > strong { display: block; overflow: visible; }
}
.sfui-category-card:hover, .sfui-category-card[aria-current="page"] { border-color: var(--sfui-focus-border); }
.sfui-category-card:hover .sfui-category-card__arrow { background: var(--sfui-button-background); }
.sfui-accordion-list { display: grid; gap: var(--sfui-space-14); min-width: 0; }
.sfui-accordion { min-width: 0; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-radius); background: var(--sfui-surface); }
.sfui-accordion[open]:where(:not(.sfui-accordion--responsive)) { border-color: var(--sfui-focus-border); }
.sfui-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sfui-space-16); padding: var(--sfui-space-20) var(--sfui-card-padding); border-radius: var(--sfui-radius); color: var(--sfui-text); font-size: var(--sfui-size-body); line-height: var(--sfui-line-body); font-weight: var(--sfui-weight-medium); list-style: none; cursor: pointer; }
.sfui-accordion__summary::-webkit-details-marker { display: none; }
.sfui-accordion__summary > span { min-width: 0; overflow-wrap: anywhere; }
.sfui-accordion__summary:hover { color: var(--sfui-accent-text); }
.sfui-accordion__summary > .sfui-icon { color: var(--sfui-icon-ink); transition: transform var(--sfui-motion-duration) ease; }
.sfui-accordion[open] > .sfui-accordion__summary > .sfui-icon { transform: rotate(180deg); }
.sfui-accordion__body { margin-inline: var(--sfui-card-padding); padding-block: var(--sfui-space-18) var(--sfui-card-padding); border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-accordion--responsive > .sfui-accordion__summary[role="heading"] { cursor: default; }
.sfui-accordion--responsive > .sfui-accordion__summary[role="heading"]:hover { color: var(--sfui-text); }
.sfui-accordion--responsive > .sfui-accordion__summary[role="heading"] > .sfui-icon { display: none; }
/* Navigation uses the existing accordion with an unboxed, responsive option. */
.sfui-navigation-groups { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sfui-space-24); min-width: 0; }
.sfui-accordion--action > .sfui-accordion__summary { padding: var(--sfui-space-16); }
.sfui-accordion__label { display: flex; align-items: center; gap: var(--sfui-space-12); min-width: 0; }
.sfui-button.sfui-accordion__action { flex-shrink: 0; width: auto; }
.sfui-accordion__action > .sfui-icon { transition: transform var(--sfui-motion-duration) ease; }
.sfui-accordion[open] > .sfui-accordion__summary > .sfui-accordion__action > .sfui-icon { transform: rotate(180deg); }
.sfui-field-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sfui-space-12); align-items: end; max-width: var(--sfui-search-max); }
.sfui-accordion--navigation { border: 0; border-radius: 0; background: transparent; }
.sfui-accordion--navigation > .sfui-accordion__summary { justify-content: flex-start; gap: var(--sfui-space-8); padding: 0 0 var(--sfui-space-8); border-radius: 0; font-weight: var(--sfui-weight-bold); }
.sfui-navigation-title { display: flex; align-items: center; gap: var(--sfui-space-10); text-transform: uppercase; }
.sfui-navigation-links { display: grid; gap: var(--sfui-space-2); padding: 0; list-style: none; }
.sfui-navigation-links a { display: flex; align-items: baseline; gap: var(--sfui-space-10); padding-block: var(--sfui-space-2); color: var(--sfui-muted); font-size: var(--sfui-size-copy); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-navigation-links a::before { content: ''; flex: 0 0 var(--sfui-space-7); width: var(--sfui-space-7); height: var(--sfui-space-7); border-radius: var(--sfui-tag-radius); background: var(--sfui-button-green); }
.sfui-navigation-links a:hover { color: var(--sfui-text); }
.sfui-divider-top { border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-fine-print { font-size: var(--sfui-size-caption); line-height: var(--sfui-line-copy); color: var(--sfui-muted); overflow-wrap: anywhere; }
.sfui-media-badges { --sfui-media-badge-height: var(--sfui-space-24); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sfui-space-12); min-width: 0; }
.sfui-media-badges--certificate { --sfui-media-badge-height: var(--sfui-space-48); }
.sfui-media-badge { display: inline-flex; align-items: center; max-width: 100%; color: var(--sfui-muted); font-size: var(--sfui-size-caption); font-weight: var(--sfui-weight-bold); }
.sfui-media-badge img { display: block; width: auto; min-width: var(--sfui-media-badge-height); height: var(--sfui-media-badge-height); max-width: min(100%,calc(var(--sfui-space-48) * 3)); object-fit: contain; }
@media (min-width: 768px) {
  .sfui-accordion--navigation > .sfui-accordion__summary[role="heading"] { cursor: default; }
  .sfui-accordion--navigation > .sfui-accordion__summary[role="heading"]:hover { color: var(--sfui-text); }
  .sfui-accordion--navigation > .sfui-accordion__summary > .sfui-icon { display: none; }
}
@media (max-width: 767.98px) {
  .sfui-navigation-groups { grid-template-columns: minmax(0,1fr); gap: 0; }
  .sfui-accordion--navigation { border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
  .sfui-accordion--navigation > .sfui-accordion__summary { justify-content: space-between; padding-block: var(--sfui-space-10); }
  .sfui-navigation-links { padding-bottom: var(--sfui-space-12); }
}
.sfui-prose { min-width: 0; color: var(--sfui-muted); font-size: var(--sfui-size-body); line-height: var(--sfui-line-prose); overflow-wrap: anywhere; }
.sfui-prose > * + *, .sfui-prose section > * + * { margin-top: var(--sfui-space-16); }
.sfui-prose p { white-space: pre-line; }
.sfui-preformatted { min-width: 0; margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.sfui-prose h3 { color: var(--sfui-text); font-size: var(--sfui-size-subtitle); font-weight: var(--sfui-weight-medium); line-height: var(--sfui-line-label); }
.sf-ui .sfui-rich-content { color: var(--sfui-text); font-family: var(--sfui-font); }
.sf-ui .sfui-rich-content a { color: var(--sfui-accent-text); }
/* Shared catalog controls and product rows. Page-specific data stays in views/controllers. */
.sfui-filter-form { display: flex; align-items: stretch; gap: var(--sfui-space-12); min-width: 0; }
.sfui-filter-form > .sfui-field { flex: 1; }
.sfui-filter-form--actions { flex-wrap: wrap; }
.sfui-filter-form--actions > .sfui-field { flex: 1 1 220px; }
.sfui-filter-form__action { display: flex; }
.sfui-filter-form__action > .sfui-button { width: 100%; }
.sfui-filter-form__group { display: flex; align-items: stretch; gap: var(--sfui-space-12); min-width: 0; }
.sfui-choice-links { display: flex; flex-wrap: wrap; gap: var(--sfui-space-10); min-width: 0; }
.sfui-choice-links.sfui-choice-links--scroll-list { display: flex; flex-direction: column; flex-wrap: nowrap; max-height: var(--sfui-scroll-list-height); overflow-y: auto; overscroll-behavior-y: contain; padding: var(--sfui-space-4); }
.sfui-choice-links--scroll-list > .sfui-choice { flex: 0 0 auto; }
.sfui-choice { display: flex; align-items: center; gap: var(--sfui-choice-gap, var(--sfui-space-10)); min-width: 0; padding: var(--sfui-choice-padding, var(--sfui-space-10) var(--sfui-space-14)); border: var(--sfui-border-width) solid var(--sfui-choice-border, var(--sfui-border)); border-radius: var(--sfui-control-radius); background: var(--sfui-choice-background, var(--sfui-control)); color: var(--sfui-text); font-size: var(--sfui-size-copy); font-weight: var(--sfui-weight-medium); }
.sfui-choice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sfui-choice:disabled { opacity: var(--sfui-disabled-opacity); cursor: not-allowed; }
/* Quiet choices retain keyboard focus, without the optional pointer/selection fill. */
.sfui-choice:where(:not(.sfui-choice--quiet)):is(:hover,[aria-current="page"],[aria-current="location"],[aria-pressed="true"]) { border-color: var(--sfui-choice-active-border, var(--sfui-focus-border)); background: var(--sfui-choice-active-background, var(--sfui-soft)); }
.sfui-choice:where(:not(.sfui-choice--quiet)):is([aria-current="page"],[aria-current="location"],[aria-pressed="true"]) { box-shadow: var(--sfui-choice-active-shadow, var(--sfui-focus-ring)); }
.sfui-choice--compact { --sfui-choice-padding: var(--sfui-space-4) var(--sfui-space-2); --sfui-choice-gap: var(--sfui-space-4); }
.sfui-choice--outline { --sfui-choice-active-background: var(--sfui-choice-background, var(--sfui-control)); }
.sfui-choice--navigation { text-align: start; }
@media (max-width: 991.98px) {
  .sfui-choice.sfui-choice--navigation { --sfui-choice-border: transparent; --sfui-choice-background: transparent; flex-direction: column; justify-content: center; text-align: center; padding: var(--sfui-choice-padding, var(--sfui-space-8) var(--sfui-space-4)); gap: var(--sfui-choice-gap, var(--sfui-space-6)); font-size: var(--sfui-size-caption); line-height: var(--sfui-line-label); }
}
.sfui-product-list { display: grid; gap: var(--sfui-product-list-gap); min-width: 0; }
.sfui-product-row { display: grid; grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr) auto; gap: var(--sfui-product-row-gap); align-items: center; padding: var(--sfui-product-row-padding); min-height: var(--sfui-product-row-min-height); }
.sfui-product-row__media.sf-product-media { --sf-product-image-small-ratio: 1; margin: 0; min-width: 0; border-radius: var(--sfui-control-radius); border: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-product-row__copy { min-width: 0; }
.sfui-product-row__title { font-size: var(--sfui-size-body); line-height: var(--sfui-line-product); font-weight: var(--sfui-weight-bold); overflow-wrap: anywhere; }
.sfui-product-row__description { margin-top: var(--sfui-space-6); font-size: var(--sfui-size-label); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-product-row__title a:hover { color: var(--sfui-accent-text); }
.sfui-purchase-controls { display: grid; grid-template-columns: var(--sfui-purchase-columns, var(--sfui-purchase-price-width) auto); gap: var(--sfui-space-16); min-width: 0; align-items: center; }
.sfui-purchase__prices { display: grid; grid-template-columns: var(--sfui-purchase-prices-columns, var(--sfui-purchase-price-width)); gap: var(--sfui-purchase-gap); align-items: start; min-width: 0; }
.sfui-purchase__price-values { display: grid; grid-template-rows: minmax(var(--sfui-purchase-price-line),auto) var(--sfui-purchase-old-line); justify-items: end; align-content: start; gap: var(--sfui-space-3); min-width: 0; }
.sfui-purchase__price-values > .sfui-muted { font-size: var(--sfui-size-caption); line-height: var(--sfui-purchase-old-line); overflow-wrap: anywhere; }
.sfui-price { color: var(--sfui-price-color); font-size: var(--sfui-size-price); line-height: var(--sfui-line-price); font-weight: var(--sfui-weight-bold); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.sfui-tag { display: inline-flex; max-width: 100%; padding: var(--sfui-space-4) var(--sfui-space-8); border: var(--sfui-border-width) solid var(--sfui-focus-border); border-radius: var(--sfui-tag-radius); background: var(--sfui-soft); color: var(--sfui-accent-text); font-size: var(--sfui-size-caption); font-weight: var(--sfui-weight-medium); overflow-wrap: anywhere; }
.sfui-tag--neutral { border-color: var(--sfui-border); background: var(--sfui-control); color: var(--sfui-muted); }
.sfui-star-badge { align-items: center; gap: var(--sfui-space-6); }
.sfui-purchase__actions { display: grid; grid-template-columns: var(--sfui-purchase-actions-columns, var(--sfui-quantity-width) var(--sfui-purchase-cart-width)); align-items: center; gap: var(--sfui-purchase-gap); min-width: 0; }
.sfui-quantity { display: grid; grid-template-columns: minmax(0,var(--sfui-quantity-button-width)) minmax(20px,1fr) minmax(0,var(--sfui-quantity-button-width)); align-items: center; width: 100%; max-width: var(--sfui-quantity-width); height: var(--sfui-quantity-height); padding: var(--sfui-quantity-padding); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sfui-quantity button { display: grid; place-items: center; width: 100%; min-width: 0; height: var(--sfui-quantity-button-height); padding: 0; border: var(--sfui-border-width) solid var(--sfui-quantity-button-border); border-radius: var(--sfui-button-radius); background: var(--sfui-quantity-button-background); color: var(--sfui-text); font-size: var(--sfui-size-quantity-action); line-height: var(--sfui-line-symbol); font-weight: var(--sfui-weight-bold); cursor: pointer; }
.sfui-quantity button:not(:disabled):hover { border-color: var(--sfui-focus-border); background: var(--sfui-soft); }
.sfui-quantity button:disabled { opacity: .35; cursor: not-allowed; }
.sfui-quantity [data-qty-value] { display: grid; place-items: center; min-width: 0; color: var(--sfui-text); font-size: var(--sfui-size-quantity); line-height: var(--sfui-line-symbol); font-weight: var(--sfui-weight-bold); font-variant-numeric: tabular-nums; }
.sfui-button--cart { width: 100%; height: var(--sfui-quantity-height); min-width: 0; padding: 0 var(--sfui-space-12); white-space: nowrap; }
/* Inline row option uses the same media, quantity, button and palette owners. */
.sfui-product-row--inline { --sfui-price-color: var(--sfui-button-green); }
.sfui-product-row__management { min-width: 0; }
.sfui-product-row__details { min-width: 0; grid-column: 1 / -1; }
.sfui-product-row--cart { grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr) auto auto; }
.sfui-product-row__copy--stacked { display: grid; gap: var(--sfui-space-6); }
.sfui-purchase-controls--line { --sfui-purchase-prices-columns: minmax(0,1fr); display: flex; justify-content: space-between; inline-size: calc(var(--sfui-purchase-price-width) + var(--sfui-space-16) + var(--sfui-quantity-width)); max-inline-size: 100%; }
.sfui-purchase-controls--line > .sfui-purchase__prices { flex: 1 1 var(--sfui-purchase-price-width); padding-inline-start: var(--sfui-space-16); border-inline-start: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-purchase-controls--line > .sfui-quantity { flex: 0 0 var(--sfui-quantity-width); }
.sfui-purchase-controls--inline { --sfui-purchase-columns: auto auto; --sfui-purchase-prices-columns: minmax(0,1fr); }
.sfui-purchase-controls--inline .sfui-purchase__prices { gap: var(--sfui-space-4); }
.sfui-purchase-controls--inline .sfui-purchase__price-values { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--sfui-space-2); }
.sfui-purchase__amount { grid-column: 1 / -1; }
/* Opt-in detail composition. Default row/card measurements stay with their existing roles. */
.sfui-product-detail { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sfui-gap); align-items: start; }
.sfui-product-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sfui-gap); align-items: start; }
.sfui-product-detail__summary--clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 1200px) {
  .sfui-product-layout { grid-template-columns: minmax(0,1fr) minmax(0,320px); }
}
.sfui-purchase-controls--detail { --sfui-purchase-columns: minmax(0,1fr); --sfui-purchase-actions-columns: var(--sfui-quantity-width) minmax(0,1fr) auto; }
.sfui-purchase-controls--detail .sfui-purchase__prices { display: flex; align-items: center; gap: var(--sfui-space-16); }
.sfui-purchase-controls--detail .sfui-purchase__price-values { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.sfui-purchase-controls--detail .sfui-price { font-size: var(--sfui-size-hero); text-align: start; }
.sfui-purchase-controls--detail .sfui-purchase__amount { grid-row: 2; }
.sfui-tag--discount { align-items: center; justify-content: center; min-height: var(--sfui-discount-height); padding: var(--sfui-discount-padding); border: 0; border-radius: var(--sfui-button-radius); background: var(--sfui-discount-background); color: var(--sfui-primary-ink); font-size: var(--sfui-discount-size); font-weight: var(--sfui-discount-weight); line-height: var(--sfui-line-label); white-space: nowrap; }
@media (min-width: 768px) {
  .sfui-product-detail { grid-template-columns: minmax(0,min(40%,var(--sf-product-image-large-current-max))) minmax(0,1fr); }
}
@media (max-width: 479.98px) {
  .sfui-purchase-controls--detail .sfui-purchase__actions { grid-template-columns: minmax(0,1fr) auto; }
  .sfui-purchase-controls--detail .sfui-quantity { grid-column: 1 / -1; }
}
/* Shared vertical catalog card; opt-in only, existing product rows stay unchanged. */
.sfui-product-card { --sfui-product-card-padding: var(--sfui-space-12); --sfui-product-card-gap: var(--sfui-space-10); transition: border-color var(--sfui-motion-duration) ease, box-shadow var(--sfui-motion-duration) ease; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius); background: var(--sfui-surface); }
@media (hover: hover) and (pointer: fine) {
  .sfui-product-card:hover { border-color: var(--sfui-focus-border); box-shadow: var(--sfui-focus-ring); }
}
@media (max-width: 767.98px) {
  .sfui-card--compact-mobile { --sfui-card-title-size: var(--sfui-size-subtitle); --sfui-nav-height: var(--sfui-space-32); --sfui-nav-gap: var(--sfui-space-6); --sfui-nav-padding: var(--sfui-space-4) var(--sfui-space-8); --sfui-nav-font-size: var(--sfui-size-caption); }
  .sfui-product-card { --sfui-product-card-padding: var(--sfui-space-10); --sfui-product-card-gap: var(--sfui-space-8); }
  .sfui-purchase-controls--card { --sfui-size-quantity: var(--sfui-size-copy); --sfui-size-quantity-action: var(--sfui-size-subtitle); --sfui-quantity-height: var(--sfui-button-height); --sfui-quantity-width: 100%; --sfui-quantity-button-width: var(--sfui-space-24); --sfui-quantity-button-height: var(--sfui-space-32); --sfui-quantity-padding: var(--sfui-space-4) var(--sfui-space-2); --sfui-quantity-button-background: transparent; --sfui-quantity-button-border: transparent; }
}
.sfui-product-card__media.sf-product-media { --sf-product-image-small-ratio: 1; --sf-product-image-small-max: 100%; flex: 0 0 auto; border-radius: var(--sfui-control-radius) var(--sfui-control-radius) 0 0; }
.sfui-product-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sfui-product-card-gap); padding: var(--sfui-product-card-padding); min-width: 0; }
.sfui-product-card__title { min-height: calc(2em * var(--sfui-line-product)); font-size: var(--sfui-size-label); line-height: var(--sfui-line-product); font-weight: var(--sfui-weight-bold); overflow-wrap: anywhere; }
.sfui-product-card__title > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sfui-product-card__title > a:hover { color: var(--sfui-accent-text); }
.sfui-purchase-controls--card { --sfui-purchase-columns: minmax(0,1fr); --sfui-purchase-prices-columns: minmax(0,1fr); --sfui-purchase-actions-columns: minmax(0,1fr) var(--sfui-button-height); --sfui-purchase-gap: var(--sfui-space-8); --sfui-size-price: var(--sfui-size-body); margin-top: auto; gap: var(--sfui-space-10); }
.sfui-purchase-controls--card .sfui-purchase__prices { align-content: end; gap: var(--sfui-space-4); }
.sfui-purchase-controls--card .sfui-purchase__price-values { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: var(--sfui-space-4) var(--sfui-space-8); min-height: var(--sfui-space-24); }
.sfui-purchase-controls--card .sfui-button--cart { padding: var(--sfui-space-8); }
.sfui-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sfui-space-8); }
.sfui-page-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sfui-button-height); min-width: 44px; padding: var(--sfui-space-8) var(--sfui-space-12); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-button-radius); background: var(--sfui-surface); color: var(--sfui-text); font-size: var(--sfui-size-copy); }
.sfui-page-link[aria-current="page"], .sfui-page-link[href]:hover { border-color: var(--sfui-focus-border); background: var(--sfui-soft); }
.sfui-page-link[aria-disabled="true"] { opacity: .4; }
/* Description, reviews and FAQ share one reusable tabbed content surface. */
.sfui-tabs { display: flex; flex-wrap: wrap; gap: var(--sfui-space-12); margin-bottom: 0; }
.sfui-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--sfui-space-12); min-height: 48px; padding: var(--sfui-space-12) var(--sfui-space-20); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-control-radius) var(--sfui-control-radius) 0 0; background: var(--sfui-control); color: var(--sfui-text); font-size: var(--sfui-size-copy); font-weight: var(--sfui-weight-medium); line-height: var(--sfui-line-label); cursor: pointer; }
.sfui-tab[aria-selected="true"] { --sfui-icon-ink: var(--sfui-primary-ink); background: var(--sfui-button-background); color: var(--sfui-primary-ink); border-color: var(--sfui-button-background); text-shadow: var(--sfui-button-text-shadow); }
.sfui-tab[aria-selected="true"] > .sfui-icon { filter: var(--sfui-button-icon-filter); }
.sfui-tab-panel { padding: var(--sfui-card-padding); border: var(--sfui-border-width) solid var(--sfui-border); border-radius: 0 var(--sfui-radius) var(--sfui-radius); min-width: 0; }
.sfui-prose--scroll { max-height: var(--sfui-scroll-list-height); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.sfui-tab-panel--scroll { block-size: calc(var(--sfui-content-scroll-height) + 2 * var(--sfui-card-padding) + 2 * var(--sfui-border-width)); overflow: auto; scrollbar-gutter: stable; }
/* Shared native scrollbar appearance; each scroll container owns its dimensions. */
.sfui-scrollbar { scrollbar-width: thin; scrollbar-color: var(--sfui-scrollbar-thumb) transparent; }
.sfui-scrollbar::-webkit-scrollbar { width: var(--sfui-space-4); height: var(--sfui-space-4); }
.sfui-scrollbar::-webkit-scrollbar-thumb { background: var(--sfui-scrollbar-thumb); border-radius: var(--sfui-pill-radius); }
.sfui-scrollbar::-webkit-scrollbar-track { background: transparent; }
.sfui-tab-panel > .sfui-card__title { margin-bottom: var(--sfui-space-16); }
.sfui-detail-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: var(--sfui-gap); align-items: start; }
.sfui-detail-aside { display: grid; gap: var(--sfui-space-14); min-width: 0; padding-inline-start: var(--sfui-gap); border-inline-start: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-detail-aside .sfui-card__title { font-size: var(--sfui-size-subtitle); }
.sfui-accordion-list--compact { gap: var(--sfui-space-10); }
.sfui-accordion-list--compact .sfui-accordion { border-radius: var(--sfui-control-radius); background: var(--sfui-control); }
.sfui-accordion-list--compact .sfui-accordion__summary { padding: var(--sfui-space-12) var(--sfui-space-14); font-size: var(--sfui-size-label); border-radius: var(--sfui-control-radius); }
.sfui-accordion-list--compact .sfui-accordion__body { margin-inline: var(--sfui-space-14); padding-block: var(--sfui-space-12); font-size: var(--sfui-size-label); }
.sfui-prose--green-headings { --editor-heading-color: var(--sfui-button-green); }
.sfui-prose--green-headings :is(h1,h2,h3,h4,h5,h6) { color: var(--sfui-button-green); }
.sfui-prose ol { margin-bottom: 0; padding-inline-start: 1.5em; }
.sfui-prose li + li { margin-top: var(--sfui-space-8); }
/* Native dialog provides focus containment and Escape support without a second modal library. */
html.sfui-dialog-open, html.sfui-dialog-open body { overflow: hidden; overscroll-behavior: none; }
.sfui-dialog { width: min(var(--sfui-dialog-width),calc(100% - var(--sfui-space-32))); max-width: none; max-height: calc(100dvh - var(--sfui-space-32)); margin: auto; padding: 0; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-radius); background: var(--sfui-surface); color: var(--sfui-text); font: inherit; overflow-y: auto; overscroll-behavior: contain; }
.sfui-dialog--purchase { --sfui-dialog-width: 600px; --sfui-card-padding: var(--sfui-space-16); --sfui-gap: var(--sfui-space-12); --sfui-control-height: 48px; --sfui-field-padding: var(--sfui-space-10) var(--sfui-space-12); --sf-product-image-row-size: 48px; --sfui-button-background: var(--sfui-button-green); }
.sfui-dialog::backdrop { background: var(--sfui-dialog-backdrop); }
.sfui-dialog__viewport { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sfui-dialog__viewport > .sfui-dialog__heading { flex: none; }
@media (max-width: 767.98px) {
  .sfui-dialog--mobile-fullscreen {
    position: fixed; inset: 0;
    width: 100%; height: 100lvh; max-height: none;
    margin: 0; padding: 0; border: 0; border-radius: 0;
  }
  .sfui-dialog--mobile-fullscreen > .sfui-dialog__viewport {
    position: relative; top: var(--sfui-viewport-top, 0px);
    flex: none; height: var(--sfui-viewport-height, 100dvh);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .sfui-dialog--mobile-fullscreen > .sfui-dialog__viewport > .sfui-dialog__heading {
    padding-top: calc(var(--sfui-card-padding) + env(safe-area-inset-top, 0px));
  }
}
.sfui-dialog__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sfui-space-16); padding: var(--sfui-card-padding); border-bottom: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-dialog__identity { display: flex; align-items: center; gap: var(--sfui-space-14); min-width: 0; }
.sfui-dialog__copy { min-width: 0; overflow-wrap: anywhere; }
/* Static initial focus target; interactive controls retain the shared keyboard focus ring. */
.sfui-dialog__title:focus { outline: none; }
.sfui-dialog__heading--brand { --sfui-icon-ink: var(--sfui-primary-ink); --sfui-muted: var(--sfui-primary-ink); --sfui-border: rgba(255,255,255,.4); background: var(--sfui-button-background); color: var(--sfui-primary-ink); border-bottom: 0; }
.sfui-dialog__title--compact { font-size: var(--sfui-size-input-mobile); font-weight: var(--sfui-weight-bold); line-height: var(--sfui-line-title); }
.sfui-presence { display: flex; align-items: center; gap: var(--sfui-space-4); font-size: var(--sfui-size-label); line-height: var(--sfui-line-label); }
.sfui-presence__dot { display: inline-block; flex: none; width: var(--sfui-space-8); height: var(--sfui-space-8); border-radius: var(--sfui-round-radius); background: color-mix(in srgb, var(--sfui-button-green) 70%, #fff); }
.sfui-dialog__body { padding: var(--sfui-card-padding); }
.sfui-dialog__text { white-space: pre-line; overflow-wrap: anywhere; }
.sfui-dialog__note { text-align: center; font-size: var(--sfui-size-copy); overflow-wrap: anywhere; }
.sfui-dialog__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sfui-space-12); font-size: var(--sfui-size-copy); }
.sfui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sfui-space-12); padding: var(--sfui-card-padding); border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-dialog__actions .sfui-button { min-width: min(220px,100%); min-height: var(--sfui-control-height); }
.sfui-upgrade { --sfui-upgrade-green: var(--sfui-button-green); --sfui-upgrade-soft: color-mix(in srgb, var(--sfui-upgrade-green) 12%, transparent); min-width: 0; border: var(--sfui-border-width) solid var(--sfui-border); border-radius: var(--sfui-radius); background: var(--sfui-control); overflow: hidden; }
.sfui-upgrade__comparison { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.sfui-upgrade__item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sfui-space-8); min-width: 0; padding: var(--sfui-card-padding); }
.sfui-upgrade__item > div { display: grid; flex: 1 1 100px; min-width: 0; gap: var(--sfui-space-4); overflow-wrap: anywhere; font-size: var(--sfui-size-copy); }
.sfui-upgrade__item strong { font-size: var(--sfui-size-subtitle); line-height: var(--sfui-line-product); }
.sfui-upgrade__item--suggested { border-inline-start: var(--sfui-border-width) dashed var(--sfui-border); background: var(--sfui-upgrade-soft); }
.sfui-upgrade__item > .sf-product-image { width: var(--sf-product-image-row-size); height: var(--sf-product-image-row-size); border-radius: var(--sfui-control-radius); }
.sfui-upgrade__arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: var(--sfui-space-32); height: var(--sfui-space-32); border-radius: var(--sfui-button-radius); border: var(--sfui-border-width) solid var(--sfui-border); background: var(--sfui-surface); }
.sfui-upgrade__toggle { display: flex; align-items: center; justify-content: center; gap: var(--sfui-space-8); width: 100%; min-height: var(--sfui-control-height); padding: var(--sfui-space-12); border: 0; border-top: var(--sfui-border-width) solid var(--sfui-border); background: transparent; color: var(--sfui-text); font-size: var(--sfui-size-body); font-weight: var(--sfui-weight-bold); cursor: pointer; }
.sfui-upgrade__toggle:focus-visible { outline-color: var(--sfui-upgrade-green); outline-offset: calc(-1 * var(--sfui-focus-offset)); }
.sfui-upgrade__toggle:hover { background: var(--sfui-upgrade-soft); }
.sfui-upgrade.is-accepted { border-color: var(--sfui-upgrade-green); }
.sfui-upgrade.is-accepted .sfui-upgrade__toggle { background: var(--sfui-upgrade-soft); }
.sfui-upgrade.is-accepted .sfui-upgrade__arrow { --sfui-icon-ink: var(--sfui-primary-ink); background: var(--sfui-upgrade-green); }
.sf-ui .sfui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1199.98px) {
  .sf-ui { --sfui-shell-gutter: 10px; --sfui-category-columns: 4; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) { grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) > .sfui-purchase-controls { grid-column: 1 / -1; justify-content: end; }
}
@media (max-width: 991.98px) {
  .sf-ui { --sfui-hero-overlap: 32px; --sfui-hero-padding-top: 46px; --sfui-hero-padding-bottom: 66px; }
  .sfui-stack--compact { gap: var(--sfui-space-14); }
.sfui-columns { grid-template-columns: minmax(0,1fr); }
  .sfui-sidebar-layout { grid-template-columns: minmax(0,1fr); }
  .sfui-section-nav__links { display: flex; gap: var(--sfui-space-8); overflow-x: auto; padding: var(--sfui-space-6); margin: -6px; scrollbar-width: thin; }
  .sfui-section-nav__link { flex: 0 0 auto; max-width: 100%; }
  .sfui-page-header__intro { flex-direction: column; text-align: center; gap: var(--sfui-space-12); padding-inline-end: 0; }
  .sfui-page-header__description { max-width: 32ch; margin-inline: auto; }
  .sfui-page-header__visual { display: none; }
  .sfui-page-header__actions { margin-inline: auto; }
  .sfui-page-header--actions-aside .sfui-page-header__intro { flex-direction: row; text-align: start; }
  .sfui-page-header--actions-aside .sfui-page-header__actions { margin: 0; }
  .sfui-page-header--actions-aside .sfui-page-header__description { margin-inline: 0; }
  .sfui-page-header--overview .sfui-page-header__inner { grid-template-columns: minmax(0,1fr); }
  .sfui-page-header--overview .sfui-page-header__intro { grid-column: 1; grid-row: auto; }
  .sfui-page-header--overview .sfui-page-header__actions { grid-column: 1; grid-row: auto; justify-self: center; }
  .sfui-page-header--overview .sfui-page-header__controls { grid-column: 1; grid-row: auto; margin-top: var(--sfui-space-24); }
  .sfui-choice-tabs--tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sfui-detail-layout { grid-template-columns: minmax(0,1fr); }
  .sfui-detail-aside { padding-inline-start: 0; padding-top: var(--sfui-gap); border-inline-start: 0; border-top: var(--sfui-border-width) solid var(--sfui-border); }
}
@media (max-width: 767.98px) {
  .sfui-background--artwork { --sfui-backdrop: var(--sfui-background-artwork-mobile); }
  .sfui-background--artwork .sfui-background__image { display: none; }
  .sfui-background--artwork .sfui-background__label { display: block; }
  .sfui-account-link__arrow { display: none; }
  .sfui-category-grid { --sfui-category-columns: 2; }
  .sf-ui { --sfui-shell-gutter: 12px; --sfui-product-row-padding: var(--sfui-space-12); --sfui-product-row-gap: var(--sfui-space-7) var(--sfui-space-12); --sfui-product-list-gap: var(--sfui-space-14); --sfui-button-background: var(--sfui-button-vivid); --sfui-size-price: var(--sfui-size-subtitle); --sfui-quantity-height: 58px; --sfui-quantity-width: 132px; --sfui-quantity-button-width: 40px; --sfui-quantity-button-height: 42px; --sfui-quantity-padding: 7px 10px; --sfui-quantity-button-background: var(--sfui-surface); --sfui-quantity-button-border: var(--sfui-border); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) { grid-template-columns: repeat(12,minmax(0,1fr)); align-items: start; }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) .sfui-product-row__media.sf-product-media { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; aspect-ratio: var(--sf-product-image-row-mobile-ratio); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) .sfui-product-row__copy { grid-column: 5 / -1; grid-row: 1; }
  .sfui-purchase-controls { grid-template-columns: var(--sfui-purchase-columns, minmax(0,1fr)); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) > .sfui-purchase-controls { display: contents; }
  .sfui-purchase__prices { grid-template-columns: var(--sfui-purchase-prices-columns, minmax(0,1fr)); gap: var(--sfui-space-8); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) .sfui-purchase__prices { grid-column: 5 / -1; grid-row: 2; align-self: end; }
  .sfui-purchase__actions { grid-template-columns: var(--sfui-purchase-actions-columns, minmax(0,5fr) minmax(0,7fr)); }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) .sfui-purchase__actions { grid-column: 1 / -1; grid-row: 3; padding-top: var(--sfui-space-12); border-top: var(--sfui-border-width) solid var(--sfui-border); }
  .sfui-purchase__actions .sfui-quantity { max-width: none; }
}
@media (max-width: 600px) {
  .sf-ui { --sfui-card-padding: var(--sfui-space-20); --sfui-gap: var(--sfui-space-20); padding-bottom: var(--sfui-space-32); }
  .sfui-form-grid { grid-template-columns: minmax(0,1fr); gap: var(--sfui-space-16); }
  .sfui-field__input { font-size: var(--sfui-field-font-size, var(--sfui-size-input-mobile)); }
  .sfui-button { width: 100%; }
  .sfui-search-form { grid-template-columns: minmax(0,1fr); }
  .sfui-filter-form { flex-wrap: wrap; }
  .sfui-filter-form > .sfui-field { flex-basis: 100%; }
  .sfui-filter-form > .sfui-button, .sfui-filter-form > .sfui-filter-form__action { flex: 1; width: auto; }
  .sfui-filter-form--actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sfui-filter-form--actions > .sfui-field, .sfui-filter-form--actions > .sfui-field + .sfui-button { grid-column: 1 / -1; }
  .sfui-filter-form--actions > .sfui-filter-form__group { grid-column: 1 / -1; }
  .sfui-filter-form__group > .sfui-button, .sfui-filter-form__group > .sfui-filter-form__action { flex: 1; width: auto; }
  .sfui-choice-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sfui-choice { padding: var(--sfui-choice-padding, var(--sfui-space-10)); gap: var(--sfui-choice-gap, var(--sfui-space-8)); }
  .sfui-tabs { gap: var(--sfui-space-8); }
  .sfui-tab { flex: 1 1 auto; padding: var(--sfui-space-10); gap: var(--sfui-space-8); border-radius: var(--sfui-control-radius); font-size: var(--sfui-size-caption); }
  .sfui-tab-panel { margin-top: var(--sfui-space-12); padding: var(--sfui-space-16); border-radius: var(--sfui-control-radius); }
}
@media (max-width: 390px) {
  .sf-ui { --sfui-shell-gutter: 10px; }
}
@media (max-width: 374.98px) {
  .sf-ui { --sfui-size-price: var(--sfui-size-input-mobile); --sfui-size-quantity-action: 19px; --sfui-size-quantity: 17px; --sfui-quantity-height: 54px; --sfui-quantity-button-width: 37px; --sfui-quantity-button-height: 40px; --sfui-quantity-padding: 6px; }
  .sfui-product-row:not(.sfui-product-row--inline):not(.sfui-product-row--cart):not(.sfui-product-row--management) .sfui-purchase__actions { padding-top: var(--sfui-space-10); }
}
@media (max-width: 350px) {
  .sf-ui { --sfui-shell-gutter: 8px; }
}
@media (max-width: 1023.98px) {
  .sfui-product-row--inline { grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr); }
  .sfui-product-row--inline > .sfui-product-row__media { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 1; align-self: center; }
  .sfui-product-row--inline > .sfui-product-row__copy { grid-column: 2; grid-row: 1; }
  .sfui-product-row--inline > .sfui-purchase-controls { grid-column: 2; grid-row: 2; }
}
@media (max-width: 767.98px) {
  .sfui-product-row--inline { --sfui-product-row-media: clamp(var(--sfui-space-48),18vw,var(--sf-product-image-row-size)); --sfui-product-row-gap: var(--sfui-space-8); --sfui-size-price: var(--sfui-size-input-mobile); --sfui-purchase-gap: var(--sfui-space-6); --sfui-quantity-height: var(--sfui-button-height); --sfui-quantity-width: calc(var(--sfui-space-32) * 3); --sfui-quantity-button-width: var(--sfui-space-32); --sfui-quantity-button-height: var(--sfui-space-32); --sfui-quantity-padding: var(--sfui-space-4) var(--sfui-space-2); --sfui-quantity-button-background: transparent; --sfui-quantity-button-border: transparent; --sfui-size-quantity: var(--sfui-size-input-mobile); --sfui-size-quantity-action: var(--sfui-size-subtitle); }
  .sfui-product-row--inline .sfui-product-row__title { font-size: var(--sfui-size-copy); }
  .sfui-product-row--inline .sfui-product-row__description { display: none; }
  .sfui-purchase-controls--inline { --sfui-purchase-columns: minmax(0,1fr) auto; --sfui-purchase-actions-columns: var(--sfui-quantity-width) var(--sfui-button-height); gap: var(--sfui-space-8); }
  .sfui-purchase-controls--inline .sfui-purchase__price-values { align-items: flex-start; }
  .sfui-purchase-controls--inline .sfui-price { text-align: start; }
  .sfui-purchase-controls--inline .sfui-button--cart { padding: var(--sfui-space-8); }
  .sfui-purchase__cart-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}
@media (max-width: 767.98px) {
  .sfui-product-row--cart { grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr) auto; }
  .sfui-product-row--cart > .sfui-purchase-controls { grid-column: 1 / -1; grid-row: 2; }
  .sfui-product-row--cart > .sfui-icon-button { grid-column: 3; grid-row: 1; align-self: start; }
  .sfui-purchase-controls--line { inline-size: auto; }
  .sfui-purchase-controls--line > .sfui-purchase__prices { border: 0; padding: 0; }
  .sfui-purchase-controls--line .sfui-price { text-align: start; }
  .sfui-payment-bar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sfui-space-12); }
  .sfui-payment-bar__amount > .sfui-icon { display: none; }
  .sfui-payment-bar__value .sfui-price { font-size: var(--sfui-size-title); }
}
@media (max-width: 479.98px) {
  .sfui-accordion--action > .sfui-accordion__summary { gap: var(--sfui-space-12); }
  .sfui-button.sfui-accordion__action { flex-shrink: 1; margin-inline-start: auto; padding-inline: var(--sfui-space-12); font-size: var(--sfui-size-caption); }
}
@media (prefers-reduced-motion: reduce) {
  .sfui-field__frame, .sfui-button, .sfui-product-card, .sfui-accordion__summary > .sfui-icon { transition: none; }
}

@media (max-width: 1199.98px) {
  .sfui-product-row--management { grid-template-columns: var(--sfui-product-row-media) minmax(0,1fr); }
  .sfui-product-row--management > .sfui-product-row__management { grid-column: 1 / -1; }
}