/* DES-04 components used by wholesale, scoped to body.sf.
   Existing handoff assets remain unchanged and load before this layer. */
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
body.sf { -webkit-text-size-adjust: 100%; }
body.sf { margin: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-font);
  font-size: var(--sf-fs-body); font-weight: var(--sf-w-body); line-height: var(--sf-lh); }
.sf img { max-width: 100%; height: auto; display: block; }
.sf h1, .sf h2, .sf h3 { font-weight: var(--sf-w-heading); line-height: var(--sf-lh-tight); margin: 0 0 var(--sf-s3); overflow-wrap: anywhere; }
.sf h1 { font-size: var(--sf-fs-h1-m); }
.sf h2 { font-size: 22px; }
.sf h3 { font-size: 18px; }
.sf p { margin: 0 0 var(--sf-s3); }
.sf a { color: var(--brand-link); text-underline-offset: 3px; overflow-wrap: anywhere; }
.sf a:hover { text-decoration-thickness: 2px; }
.sf .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf :focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sf-focus-gap); }
.sf :focus:not(:focus-visible) { outline: none; }
.sf .sf-footer { --sf-focus: #FFFFFF; --sf-focus-gap: #231F20; }
.sf .sf-skip { position: absolute; left: var(--sf-s3); top: -100px; z-index: 10; background: var(--sf-surface);
  color: var(--sf-ink); padding: var(--sf-s2) var(--sf-s3); border-radius: var(--sf-radius); font-weight: var(--sf-w-control); }
.sf .sf-skip:focus { top: var(--sf-s2); }
.sf .sf-container { width: 100%; max-width: calc(var(--sf-content) + 2 * var(--sf-gutter-m)); margin: 0 auto; padding: 0 var(--sf-gutter-m); }
.sf .sf-main { padding: var(--sf-s4) 0 var(--sf-s7); }
.sf .sf-section { margin: 0 0 var(--sf-s6); }
.sf .sf-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-s2) var(--sf-s3); margin-bottom: var(--sf-s3); }
.sf .sf-section-head h2 { margin: 0; }
.sf .sf-muted { color: var(--sf-ink-2); }
.sf .sf-meta { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); }
.sf .sf-eyebrow { font-size: var(--sf-fs-meta); font-weight: var(--sf-w-control); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-eyebrow); margin-bottom: var(--sf-s2); }
.sf .sf-header { background: var(--sf-surface); border-bottom: 1px solid var(--sf-divider); }
.sf .sf-header-inner { display: flex; align-items: center; gap: var(--sf-s3); min-height: var(--sf-header-m); flex-wrap: wrap; }
.sf .header-logo { flex: none; display: inline-flex; align-items: center; min-width: 0; max-width: none; height: auto; margin: 0; min-height: var(--sf-control-min); }
.sf .header-logo img { height: var(--brand-logo-h-m, 40px); width: auto; }
.sf :is(.sf-nav, .desktop-nav) { display: none; flex: none; }
.sf :is(.sf-nav, .desktop-nav) li { white-space: nowrap; }
.sf :is(.sf-nav, .desktop-nav) > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-s4); }
.sf :is(.sf-nav, .desktop-nav) a, .sf :is(.sf-nav, .desktop-nav) summary { color: var(--sf-ink); text-decoration: none; font-weight: var(--sf-w-body); display: inline-flex; align-items: center; min-height: var(--sf-control-min); cursor: pointer; }
.sf :is(.sf-nav, .desktop-nav) [aria-current="page"] { font-weight: var(--sf-w-control); text-decoration: underline; text-decoration-color: var(--sf-magenta); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.sf .sf-dropdown { position: relative; }
.sf .sf-dropdown > summary { list-style: none; gap: 6px; }
.sf .sf-dropdown > summary::-webkit-details-marker { display: none; }
.sf .sf-dropdown > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--sf-ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.sf .sf-dropdown[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.sf .sf-dropdown-panel { position: absolute; z-index: 5; top: 100%; left: 0; min-width: 260px; background: var(--sf-surface); border: 1px solid var(--sf-outline);
  border-radius: var(--sf-radius-card); box-shadow: var(--sf-shadow); padding: var(--sf-s2); }
.sf .sf-dropdown-panel ul { list-style: none; margin: 0; padding: 0; }
.sf .sf-dropdown-panel a { display: flex; width: 100%; padding: 0 var(--sf-s2); border-radius: var(--sf-radius); }
.sf .sf-dropdown-panel h3 { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); margin: var(--sf-s2) var(--sf-s2) var(--sf-s1); }
.sf .sf-search { flex: 1 1 100%; order: 3; display: flex; align-items: center; margin: 0 0 var(--sf-s2); min-width: 0; }
.sf .sf-search input { flex: 1 1 auto; min-width: 0; width: 0; height: var(--sf-control-min); border: 1px solid var(--sf-outline); border-right: 0; border-radius: var(--sf-radius-pill) 0 0 var(--sf-radius-pill);
  padding: 0 var(--sf-s3); font: inherit; font-size: 16px; color: var(--sf-ink); background: var(--sf-surface); }
.sf .sf-search button { height: var(--sf-control-min); min-width: var(--sf-control-min); border: 1px solid var(--sf-outline); border-radius: 0 var(--sf-radius-pill) var(--sf-radius-pill) 0;
  background: var(--sf-surface); color: var(--sf-ink); font: inherit; font-weight: var(--sf-w-control); padding: 0 var(--sf-s3); cursor: pointer; }
.sf .sf-brand-search { display: block; margin: 0 0 var(--sf-s4); text-align: left; }
.sf .sf-account { display: flex; align-items: center; gap: 0 var(--sf-s3); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.sf .sf-account a, .sf .sf-account button { white-space: nowrap; color: var(--sf-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--sf-control-min); background: none; border: 0; font: inherit; padding: 0; cursor: pointer; }
.sf .sf-account form { margin: 0; }
.sf .sf-icon { width: 22px; height: 22px; flex: none; }
.sf .sf-hide-m { display: none; }
.sf .sf-menu { order: -1; }
.sf .sf-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--sf-control-min); min-width: var(--sf-control-min); cursor: pointer; font-weight: var(--sf-w-control); }
.sf .sf-menu > summary::-webkit-details-marker { display: none; }
.sf .sf-menu-sheet { position: absolute; left: 0; right: 0; z-index: 6; background: var(--sf-surface); border-top: 1px solid var(--sf-divider); border-bottom: 1px solid var(--sf-divider); padding: var(--sf-s2) var(--sf-gutter-m) var(--sf-s4); }
.sf .sf-menu-sheet ul { list-style: none; margin: 0; padding: 0; }
.sf .sf-menu-sheet li > a, .sf .sf-menu-sheet summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--sf-control-min); color: var(--sf-ink); text-decoration: none; border-bottom: 1px solid var(--sf-divider); cursor: pointer; }
.sf .sf-menu-sheet summary { font-weight: var(--sf-w-control); list-style: none; }
.sf .sf-menu-sheet summary::-webkit-details-marker { display: none; }
.sf .sf-menu-sheet summary::after { content: ""; width: 7px; height: 7px; border: solid var(--sf-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sf .sf-menu-sheet details[open] > summary::after { transform: rotate(-135deg); }
.sf .sf-menu-sheet details ul { padding-left: var(--sf-s3); }
.sf .sf-menu-sheet h2 { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); text-transform: uppercase; letter-spacing: 0.08em; margin: var(--sf-s3) 0 0; }
.sf .sf-header { position: relative; }
.sf .sf-breadcrumb ol { list-style: none; margin: 0 0 var(--sf-s2); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sf-s2); font-size: var(--sf-fs-meta); }
.sf .sf-breadcrumb li { display: inline-flex; align-items: center; gap: var(--sf-s2); }
.sf .sf-breadcrumb li + li::before { content: ""; width: 6px; height: 6px; border: solid var(--sf-ink-2); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.sf .sf-breadcrumb a { color: var(--sf-ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--sf-control-min); }
.sf .sf-breadcrumb a:hover { text-decoration: underline; }
.sf .sf-breadcrumb [aria-current="page"] { color: var(--sf-ink); display: inline-flex; align-items: center; min-height: var(--sf-control-min); }
.sf .sf-btn, .sf #payment-handoff button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-s2); min-height: var(--sf-control); padding: 0 var(--sf-s4);
  border-radius: var(--sf-radius); border: 1.5px solid var(--sf-ink); background: var(--sf-surface); color: var(--sf-ink);
  font: inherit; font-weight: var(--sf-w-control); text-decoration: none; cursor: pointer; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.sf .sf-btn--primary, .sf #payment-handoff button { background: var(--sf-utility); color: var(--sf-on-dark); border-color: var(--sf-utility); }
.sf .sf-btn--block { width: 100%; }
.sf .sf-btn--small { min-height: var(--sf-control-min); padding: 0 var(--sf-s3); font-size: 15px; }
.sf .sf-btn[disabled] { opacity: 1; background: var(--sf-page); color: var(--sf-ink-2); border-color: var(--sf-outline); cursor: not-allowed; }
.sf .sf-btn .sf-chev, .sf .sf-arrow .sf-chev, .sf .sf-tile-label .sf-chev { width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); flex: none; }
.sf .sf-arrow { color: var(--brand-link); font-weight: var(--sf-w-control); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sf-s2); min-height: var(--sf-control-min); }
.sf .sf-arrow:hover { text-decoration: underline; }
.sf .sf-btn-row { display: flex; flex-wrap: wrap; gap: var(--sf-s3); }
.sf nav.sf-btn-row[aria-label="Brands A to Z"] { align-items: center; }
.sf nav.sf-btn-row[aria-label="Brands A to Z"] > span { display: inline-flex; align-items: center; min-height: var(--sf-control); }
.sf .sf-link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-link); text-decoration: underline; cursor: pointer; min-height: var(--sf-control-min); }
.sf .sf-hero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--brand-hero-bg); border-radius: var(--sf-radius-card); overflow: hidden; margin-bottom: var(--sf-s4); }
.sf .sf-hero-copy { padding: var(--sf-s4); }
.sf .sf-hero h1 { font-size: var(--sf-fs-hero-m); letter-spacing: -0.02em; }
.sf .sf-hero-lead { font-size: var(--sf-fs-lead); color: var(--sf-ink-2); max-width: 34em; }
.sf .sf-hero .sf-btn-row + .sf-meta { margin-top: var(--sf-s3); }
.sf .sf-hero-art { min-height: 155px; }
.sf .sf-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sf-s2); background: var(--sf-placeholder); color: var(--sf-ink-2);
  font-weight: var(--sf-w-control); text-align: center; padding: var(--sf-s3); min-height: 120px; border-radius: var(--sf-radius); }
.sf .sf-ph svg { width: 56px; height: 44px; }
.sf .sf-hero-art.sf-ph { border-radius: 0; }
.sf .sf-grid { display: grid; gap: var(--sf-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.sf .sf-tile { display: flex; flex-direction: column; background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); overflow: hidden; color: var(--sf-ink); text-decoration: none; height: 100%; box-shadow: var(--sf-shadow); }
.sf .sf-tile .sf-ph { border-radius: 0; min-height: 96px; }
.sf .sf-tile-label { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s2); padding: var(--sf-s3); font-weight: var(--sf-w-control); min-height: 56px; }
.sf .sf-tile ul { list-style: none; margin: 0; padding: 0 var(--sf-s3) var(--sf-s3); }
.sf .sf-tile ul a { display: inline-flex; min-height: var(--sf-control-min); align-items: center; color: var(--sf-ink); }
.sf .sf-brand-tile { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--sf-s3); background: var(--sf-surface); border: 1px solid var(--sf-divider);
  border-radius: var(--sf-radius-card); color: var(--sf-ink); font-size: 18px; font-weight: var(--sf-w-control); text-decoration: none; text-align: center; box-shadow: var(--sf-shadow); overflow-wrap: anywhere; }
/* Logo tiles hug the logo (Chris 2026-10-23); the logo's fixed CSS box still reserves its space before it decodes. */
.sf .sf-brand-tile--logo { flex-direction: column; gap: var(--sf-s1); padding: 10px 12px; }
.sf .sf-brand-tile--logo span { display: flex; align-items: center; }
.sf .sf-brand-logo { display: block; flex: none; width: 96px; height: 96px; object-fit: contain; background: var(--sf-surface); }
.sf .sf-listing-head .sf-brand-logo { margin-bottom: var(--sf-s3); }
.sf .sf-listing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sf-s3); margin-bottom: var(--sf-s4); }
.sf .sf-listing-head h1 { margin-bottom: var(--sf-s1); }
.sf .sf-count { color: var(--sf-ink-2); margin: 0; }
.sf .sf-listing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); }
.sf .sf-sort { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-s2); margin: 0; }
.sf .sf-sort .sf-field { margin: 0; }
.sf .sf-check { display: flex; align-items: center; gap: var(--sf-s2); min-height: var(--sf-control-min); }
.sf .sf-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sf-utility); flex: none; }
.sf .sf-cards { display: grid; gap: var(--sf-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.sf .sf-card { display: flex; flex-direction: column; height: 100%; background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s2); box-shadow: var(--sf-shadow); }
.sf .sf-card-img { display: block; text-decoration: none; color: inherit; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-placeholder); aspect-ratio: 1 / 1; }
.sf .sf-card-product-link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.sf .sf-card-product-link:hover .sf-card-title { text-decoration: underline; }
/* The square image box must not shrink inside the approved buyer's flex-column card link,
   and the link keeps its content height so the price foot never draws over the title. */
.sf .sf-card-product-link { flex: 1 0 auto; }
.sf .sf-card-product-link > .sf-card-img { flex: none; width: 100%; }
.sf .sf-card-product-copy { padding-bottom: var(--sf-s1); }
.sf .sf-card-img img { width: 100%; height: 100%; object-fit: contain; background: var(--sf-surface); }
.sf .sf-card-img .sf-ph { height: 100%; min-height: 0; border-radius: 0; font-size: 13px; }
.sf .sf-card-body { display: flex; flex-direction: column; gap: 2px; padding: var(--sf-s2) var(--sf-s1) var(--sf-s1); flex: 1; min-width: 0; }
.sf .sf-card-brand { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); margin: 0; }
.sf .sf-card-title { font-size: 16px; font-weight: var(--sf-w-control); margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.sf .sf-card-title a { color: var(--sf-ink); text-decoration: none; }
.sf .sf-card-title a:hover { text-decoration: underline; }
.sf .sf-card-foot { margin-top: auto; padding-top: var(--sf-s2); display: flex; flex-direction: column; gap: var(--sf-s2); }
.sf .sf-price { font-size: 20px; font-weight: var(--sf-w-heading); margin: 0; }
.sf .sf-price-unit { font-size: var(--sf-fs-meta); font-weight: var(--sf-w-body); color: var(--sf-ink-2); }
.sf .sf-price-area { font-size: 15px; margin: 0; }
.sf .sf-price-area p { margin: 0 0 var(--sf-s2); }
.sf .sf-pagination ul { list-style: none; margin: var(--sf-s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-s2); }
.sf .sf-pagination a, .sf .sf-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--sf-control-min); min-height: var(--sf-control-min); padding: 0 var(--sf-s3);
  border: 1px solid var(--sf-outline); border-radius: var(--sf-radius); color: var(--sf-ink); text-decoration: none; background: var(--sf-surface); }
.sf .sf-pagination [aria-current="page"] { background: var(--sf-utility); color: var(--sf-on-dark); border-color: var(--sf-utility); }
.sf .sf-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); }
.sf .sf-gallery-main { background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); overflow: hidden; }
.sf .sf-gallery-main img { width: 100%; max-height: 520px; object-fit: contain; }
.sf .sf-thumbs { position: relative; display: flex; gap: var(--sf-s2); list-style: none; margin: var(--sf-s2) 0 0; padding: 0 0 var(--sf-s1); overflow-x: auto; }
.sf .sf-thumbs a { display: block; width: 72px; height: 72px; border: 1.5px solid var(--sf-divider); border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-surface); }
.sf .sf-thumbs a[aria-current="true"] { border-color: var(--sf-ink); border-width: 2px; }
.sf .sf-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.sf .sf-gallery-count { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); margin: var(--sf-s1) 0 0; }
.sf .sf-product h1 { margin-bottom: var(--sf-s2); }
.sf .sf-product-brand { color: var(--sf-ink-2); font-weight: var(--sf-w-control); margin: 0 0 var(--sf-s1); }
.sf .sf-variants { border: 0; margin: 0 0 var(--sf-s3); padding: 0; min-width: 0; }
.sf .sf-variants legend { font-weight: var(--sf-w-control); font-size: 18px; padding: 0; margin-bottom: var(--sf-s2); }
.sf .sf-variant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-s2); }
.sf .sf-variant-list.is-long { max-height: 30rem; overflow-y: auto; padding: 2px 4px 2px 2px; }
.sf .sf-variant { position: relative; background: var(--sf-surface); border: 1.5px solid var(--sf-outline); border-radius: var(--sf-radius-card); }
.sf .sf-variant > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf .sf-variant > label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-s1) var(--sf-s3); padding: var(--sf-s3); cursor: pointer; min-height: 56px; }
.sf .sf-variant-name { font-weight: var(--sf-w-control); overflow-wrap: anywhere; }
.sf .sf-variant-sub { grid-column: 1; font-size: var(--sf-fs-meta); color: var(--sf-ink-2); }
.sf .sf-variant-sub.is-reason { color: var(--sf-error); font-weight: var(--sf-w-control); }
.sf .sf-variant-price { font-weight: var(--sf-w-control); white-space: nowrap; }
.sf .sf-variant-mark { grid-column: 2; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sf-outline); background: var(--sf-surface); justify-self: end; }
.sf .sf-variant > input:checked + label .sf-variant-mark { background: var(--sf-green); border-color: var(--sf-green); }
.sf .sf-variant > input:checked + label .sf-variant-mark::after { content: ""; display: block; width: 6px; height: 11px; margin: 4px auto 0; border: solid var(--sf-on-dark); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sf .sf-variant:has(> input:checked) { background: var(--brand-selected-bg); border-color: var(--sf-green); border-width: 2px; }
/* Beat the handoff's important label outline and the legacy suppression below.
   The hidden radio transfers its visible ring and white gap to the whole row. */
.sf .sf-variant > input:focus-visible + label { outline: 2px solid var(--sf-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--sf-focus-gap); border-radius: var(--sf-radius-card); }
.sf .sf-variant:has(> input:disabled) { background: var(--sf-page); border-style: dashed; }
.sf .sf-variant > input:disabled + label { cursor: not-allowed; }
.sf .sf-variant-sku { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); font-variant-numeric: tabular-nums; }
.sf .sf-order { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-s3); margin: var(--sf-s3) 0; }
.sf .sf-order .sf-field { margin: 0; width: 120px; }
.sf .sf-order .sf-btn { flex: 1 1 200px; }
.sf .sf-order--product .sf-field { display: contents; }
.sf .sf-order--product .sf-label { flex: 1 1 100%; margin-bottom: calc(-1 * var(--sf-s2)); }
.sf .sf-order--product .sf-input { flex: 0 0 120px; width: 120px; }
.sf .sf-panel { background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s4); margin-bottom: var(--sf-s3); }
.sf .sf-panel h2 { font-size: var(--sf-fs-h3); }
.sf .sf-messages { list-style: none; margin: 0 0 var(--sf-s3); padding: 0; display: grid; gap: var(--sf-s1); }
.sf .sf-messages li { display: flex; gap: var(--sf-s2); align-items: baseline; }
.sf .sf-messages li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-ink); flex: none; transform: translateY(-2px); }
.sf .sf-warnings-slot:empty { display: none; }
.sf .sf-dl { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: var(--sf-s2) var(--sf-s3); margin: 0; }
.sf .sf-dl dt { color: var(--sf-ink-2); }
.sf .sf-dl dd { margin: 0; overflow-wrap: anywhere; }
.sf .sf-disclosure { border-top: 1px solid var(--sf-divider); }
.sf .sf-disclosure:last-child { border-bottom: 1px solid var(--sf-divider); }
.sf .sf-disclosure > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sf-s3); min-height: 56px; font-weight: var(--sf-w-control); cursor: pointer; }
.sf .sf-disclosure > summary::-webkit-details-marker { display: none; }
.sf .sf-disclosure > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--sf-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sf .sf-disclosure[open] > summary::after { transform: rotate(-135deg); }
.sf .sf-disclosure > div { padding: 0 0 var(--sf-s3); }
.sf .sf-disclosure li a { display: inline-flex; align-items: center; min-height: var(--sf-control-min); }
.sf .sf-table-wrap { overflow-x: auto; }
.sf .sf-table-wrap tr > :first-child a { white-space: nowrap; }
.sf .sf-table { width: 100%; border-collapse: collapse; background: var(--sf-surface); }
.sf .sf-table th, .sf .sf-table td { text-align: left; padding: var(--sf-s2) var(--sf-s3); border-bottom: 1px solid var(--sf-divider); vertical-align: top; }
.sf .sf-table th.is-num, .sf .sf-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf .sf-table thead th { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); font-weight: var(--sf-w-control); }
.sf .sf-table tbody th { font-weight: var(--sf-w-control); }
.sf .sf-table tr.is-today { background: var(--brand-selected-bg); }
.sf .sf-notice { display: flex; gap: var(--sf-s3); padding: var(--sf-s3); border-radius: var(--sf-radius); border: 1px solid var(--sf-outline); background: var(--sf-surface); margin-bottom: var(--sf-s3); }
.sf .sf-notice > div > :last-child { margin-bottom: 0; }
.sf .sf-notice strong { display: block; }
.sf .sf-notice--info { background: var(--sf-mint); border-color: var(--sf-green); }
.sf .sf-notice--warning { background: var(--sf-warning-bg); border-color: var(--sf-warning); color: var(--sf-warning); }
.sf .sf-notice--error { background: var(--sf-error-bg); border-color: var(--sf-error); color: var(--sf-error); }
.sf .sf-notice--success { background: var(--sf-mint); border-color: var(--sf-green); color: var(--sf-green); }
.sf .sf-notice--error a, .sf .sf-notice--warning a, .sf .sf-notice--success a { color: inherit; }
.sf .sf-tag { font-size: 12px; font-weight: var(--sf-w-control); letter-spacing: 0.06em; text-transform: uppercase; }
.sf .sf-form { max-width: 560px; }
.sf .sf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sf-s3); min-width: 0; }
.sf .sf-label { font-weight: var(--sf-w-control); }
.sf .sf-req { color: var(--sf-ink-2); font-weight: var(--sf-w-body); }
.sf .sf-help { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); margin: 0; }
.sf .sf-input, .sf .sf-select, .sf .sf-textarea { width: 100%; min-height: var(--sf-control); border: 1px solid var(--sf-outline); border-radius: var(--sf-radius); background: var(--sf-surface);
  color: var(--sf-ink); font: inherit; padding: 0 var(--sf-s3); }
.sf .sf-textarea { padding: var(--sf-s2) var(--sf-s3); min-height: 140px; resize: vertical; }
.sf .sf-select { appearance: auto; }
.sf .sf-input[aria-invalid="true"] { border: 2px solid var(--sf-error); }
.sf .sf-error-text { color: var(--sf-error); font-size: var(--sf-fs-meta); font-weight: var(--sf-w-control); margin: 0; }
.sf .sf-choice-group { border: 0; margin: 0 0 var(--sf-s3); padding: 0; min-width: 0; }
.sf .sf-choice-group legend { font-weight: var(--sf-w-control); padding: 0; margin-bottom: var(--sf-s2); }
.sf .sf-choice { display: flex; align-items: flex-start; gap: var(--sf-s2); padding: var(--sf-s3); border: 1.5px solid var(--sf-outline); border-radius: var(--sf-radius-card); background: var(--sf-surface); margin-bottom: var(--sf-s2); cursor: pointer; }
.sf .sf-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sf-utility); flex: none; }
.sf .sf-choice:has(input:checked) { border-color: var(--sf-green); border-width: 2px; background: var(--brand-selected-bg); }
.sf .sf-choice:has(input:disabled) { background: var(--sf-page); border-style: dashed; cursor: not-allowed; }
.sf .sf-choice small { display: block; color: var(--sf-ink-2); font-size: var(--sf-fs-meta); }
.sf .sf-form-key { font-size: var(--sf-fs-meta); color: var(--sf-ink-2); }
.sf .sf-auth { max-width: 480px; margin: 0 auto; background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s4); box-shadow: var(--sf-shadow); }
.sf .sf-cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); align-items: start; }
.sf .sf-cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-s3); }
.sf .sf-cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sf-s3); background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s3); }
.sf .sf-cart-line .sf-card-img { width: 72px; height: 72px; aspect-ratio: auto; }
.sf .sf-cart-line h2 { font-size: 17px; margin: 0 0 2px; }
.sf .sf-line-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-s2) var(--sf-s3); }
.sf .sf-line-controls .sf-field { margin: 0; width: 96px; }
.sf .sf-line-total { margin-left: auto; font-weight: var(--sf-w-heading); align-self: center; }
.sf .sf-summary { background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s4); }
.sf .sf-summary h2 { font-size: var(--sf-fs-h3); }
.sf .sf-summary dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sf-s2) var(--sf-s3); margin: 0 0 var(--sf-s3); }
.sf dl.sf-summary { display: grid; grid-template-columns: 1fr auto; gap: var(--sf-s2) 0; margin: 0; }
.sf dl.sf-summary .sf-certificate-label, .sf dl.sf-summary .sf-certificate-value { grid-column: 1 / -1; text-align: left; }
.sf dl.sf-summary .sf-certificate-value { overflow-wrap: anywhere; }
.sf dl.sf-summary > dd:not(.shipping-message) { padding-left: var(--sf-s3); }
.sf dl.sf-summary > dd.sf-certificate-value { padding-left: 0; }
.sf .sf-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sf .sf-summary .shipping-message { grid-column: 1 / -1; text-align: left; }
.sf .sf-summary .sf-total,
.sf dl.sf-summary .sf-certificate-label { border-top: 1px solid var(--sf-divider); padding-top: var(--sf-s2); }
.sf .sf-summary .sf-total { font-weight: var(--sf-w-heading); font-size: 18px; }
.sf .sf-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); align-items: start; }
.sf .sf-checkout > .sf-summary { order: -1; }
.sf .sf-checkout > .sf-checkout-steps { order: 0; }
.sf .sf-step { background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s4); margin-bottom: var(--sf-s3); }
.sf .sf-step > h2 { font-size: var(--sf-fs-h3); display: flex; gap: var(--sf-s2); align-items: baseline; }
.sf .sf-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-utility); color: var(--sf-on-dark); font-size: 14px; flex: none; }
.sf .sf-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sf-s3); }
.sf .sf-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); }
.sf .sf-toc { background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s3); align-self: start; }
.sf .sf-toc h2 { font-size: 16px; }
.sf .sf-toc ol { margin: 0; padding-left: 1.25em; }
.sf .sf-toc a { display: inline-flex; align-items: center; min-height: var(--sf-control-min); }
.sf .sf-prose { max-width: 70ch; }
.sf .sf-prose h2 { font-size: var(--sf-fs-h3); margin-top: var(--sf-s4); scroll-margin-top: var(--sf-s3); }
.sf .sf-footer { background: var(--sf-utility); color: var(--sf-on-dark); padding: var(--sf-s6) 0 var(--sf-s4); }
.sf .sf-footer a { color: var(--sf-on-dark); display: inline-flex; align-items: center; min-height: var(--sf-control-min); }
.sf .sf-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); }
.sf .sf-footer h2 { font-size: var(--sf-fs-meta); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sf-s2); }
.sf .sf-footer ul { list-style: none; margin: 0; padding: 0; }
.sf .sf-footer address { font-style: normal; }
.sf .sf-footer-brand { font-weight: var(--sf-w-heading); letter-spacing: 0.04em; }
.sf .sf-footer .sf-logo img { filter: invert(1); }
.sf .sf-disclaimer { border-top: 1px solid rgba(255, 255, 255, 0.3); margin-top: var(--sf-s4); padding-top: var(--sf-s3); font-size: 13px; }
.sf .sf-empty { text-align: center; max-width: 640px; margin: 0 auto; background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: var(--sf-radius-card); padding: var(--sf-s5) var(--sf-s4); }
.sf .sf-empty .sf-btn-row { justify-content: center; }
@media (min-width: 768px) {
.sf .sf-brand-logo { width: 128px; height: 128px; }
.sf .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf .sf-grid--brands { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf .sf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Hero hugs its copy (Chris 2026-10-23: less space above and below). */
.sf .sf-hero { grid-template-columns: 55% 45%; }
.sf .sf-hero-copy { padding: var(--sf-s4) var(--sf-s6); align-self: center; }
.sf .sf-hero h1 { font-size: 44px; }
.sf .sf-two { grid-template-columns: 1fr 1fr; }
.sf .sf-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
.sf .sf-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-s6); }
}
@media (min-width: 1024px) {
.sf h1 { font-size: var(--sf-fs-h1); }
.sf h2 { font-size: var(--sf-fs-h2); }
.sf .sf-container { padding: 0 var(--sf-s6); max-width: calc(var(--sf-content) + 2 * var(--sf-s6)); }
.sf .sf-header-inner { min-height: var(--sf-header); flex-wrap: nowrap; gap: var(--sf-s4); }
.sf .header-logo img { height: var(--brand-logo-h, 48px); }
.sf .sf-menu { display: none; }
.sf .sf-hide-m { display: inline-flex; }
.sf :is(.sf-nav, .desktop-nav) { display: block; }
.sf .sf-search { flex: 1 1 280px; order: 0; margin: 0; max-width: 420px; }
.sf .sf-account { margin-left: 0; flex-wrap: nowrap; }
.sf .sf-hero h1 { font-size: var(--sf-fs-hero); }
.sf .sf-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf .sf-cart { grid-template-columns: minmax(0, 1fr) 380px; }
.sf .sf-checkout { grid-template-columns: minmax(0, 1fr) 400px; }
.sf .sf-checkout > .sf-summary { order: 1; position: sticky; top: var(--sf-s4); }
.sf .sf-checkout > .sf-checkout-steps { order: 0; }
.sf .sf-cart-line { grid-template-columns: 96px minmax(0, 1fr) auto; }
.sf .sf-cart-line .sf-card-img { width: 96px; height: 96px; }
.sf .sf-line-controls { grid-column: auto; align-self: center; }
.sf .sf-content { grid-template-columns: 280px minmax(0, 1fr); }
.sf .sf-toc { position: sticky; top: var(--sf-s3); }
}
@media (max-width: 359px) {
.sf .sf-cards, .sf .sf-grid { grid-template-columns: minmax(0, 1fr); }
.sf .sf-dl { grid-template-columns: minmax(0, 1fr); }
.sf .sf-btn { padding: 0 var(--sf-s3); }
}
@media (forced-colors: active) {
.sf :focus-visible { outline: 2px solid CanvasText; }
.sf .sf-variant:has(input:checked), .sf .sf-choice:has(input:checked) { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
.sf * { scroll-behavior: auto; transition: none; }
}

/* Compatibility with the pinned handoff sheets and the shared Django markup.
   Keep the existing root wrappers so staff responses retain their exact bytes. */
.sf .body { margin: 0; padding: var(--sf-s4) 0 var(--sf-s7); min-height: 55vh; }
.sf .container { width: 100%; max-width: calc(var(--sf-content) + 2 * var(--sf-gutter-m)); padding: 0 var(--sf-gutter-m); margin: 0 auto; }
.sf b, .sf strong { font-weight: var(--sf-w-heading); }
.sf dl dt { font-weight: var(--sf-w-control); margin-bottom: 0; }
.sf button, .sf input, .sf select, .sf textarea { font-family: var(--sf-font); }
/* The handoff uses important outlines; only focus rules need that precedence. */
.sf :focus-visible, .sf .form-input:focus-visible, .sf .form-select:focus-visible {
  outline: 2px solid var(--sf-focus) !important; outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--sf-focus-gap);
}
/* Remove the handoff's duplicate blue ring on legacy adjacent labels.
   The more specific variant focus-visible rule keeps its row-level ring. */
.sf input:focus + label { outline: none !important; outline-offset: 0 !important; }
.sf .skip-link { top: -100px; left: var(--sf-s3); padding: var(--sf-s2) var(--sf-s3); border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); font-weight: var(--sf-w-control); }
.sf .skip-link:focus { top: var(--sf-s2); }
.sf .sf-header-inner { min-width: 0; }
.sf .header-logo { margin-right: auto; }
.sf .sf-search { height: var(--sf-control-min); overflow: visible; }
.sf .sf-search input { margin: 0; box-shadow: none; }
.sf .sf-search button { display: inline-flex; align-items: center; justify-content: center; }
.sf .sf-account-desktop { display: none; }
.sf .sf-cart-link { order: 2; min-width: var(--sf-control-min); min-height: var(--sf-control-min); display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--sf-ink); text-decoration: none; font-weight: var(--sf-w-control); }
.sf .sf-cart-link .sf-icon { width: 22px; height: 22px; flex: none; }
.sf .sf-cart-badge { min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
.sf .mobile-menu { display: block; position: static; order: -1; margin: 0; }
.sf .mobile-menu > summary { display: inline-flex; align-items: center; min-height: var(--sf-control-min); min-width: var(--sf-control-min); font-weight: var(--sf-w-control); cursor: pointer; list-style: none; }
.sf .mobile-menu > summary::-webkit-details-marker { display: none; }
.sf .mobile-menu > .sf-menu-sheet { position: absolute; top: 100%; left: 0; right: 0; width: auto; max-width: 100%; padding: var(--sf-s2) var(--sf-gutter-m) var(--sf-s4); background: var(--sf-surface); border: 1px solid var(--sf-divider); box-shadow: var(--sf-shadow); }
.sf a.sf-account-link, .sf .sf-account-form button { display: inline-flex; align-items: center; min-height: var(--sf-control-min); color: var(--sf-ink); font-size: var(--sf-fs-body); }
.sf .sf-account-form { margin: 0; }
.sf .sf-menu-sheet > .sf-account-link, .sf .sf-menu-sheet > .sf-account-form { display: flex; width: 100%; }
/* Owners with several stores pick which store they are ordering for (identity.StoreLink). */
.sf .sf-store-switch { position: relative; }
.sf .sf-store-switch > summary { display: inline-flex; align-items: center; min-height: var(--sf-control-min); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-weight: var(--sf-w-control); }
.sf .sf-store-switch__menu { position: absolute; z-index: 40; right: 0; top: 100%; display: grid; min-width: 14rem; padding: var(--sf-s2) 0; background: var(--sf-surface); border: 1px solid var(--sf-divider); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.sf .sf-store-switch__label { margin: 0; padding: 4px 14px; font-size: .8125rem; color: var(--sf-ink-2); }
.sf .sf-store-switch__menu button { min-height: 40px; padding: 0 14px; text-align: left; background: none; border: 0; font: inherit; color: var(--sf-ink); cursor: pointer; }
.sf .sf-store-switch__menu button:hover:not([disabled]) { background: var(--sf-page); }
.sf .sf-store-switch__menu button[aria-current] { font-weight: var(--sf-w-control); cursor: default; }
.sf .sf-store-switch > summary { list-style: none; gap: 6px; }
.sf .sf-store-switch > summary::-webkit-details-marker { display: none; }
.sf .sf-store-switch > summary::after, .sf .mobile-menu nav > details.sf-store-switch[open] > summary::after { content: none; }
.sf .sf-store-switch__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf .sf-store-switch__chev { flex: none; width: 12px; height: 12px; margin-left: auto; }
.sf .sf-store-switch[open] .sf-store-switch__chev { transform: scaleY(-1); }
.sf .sf-menu-sheet > .sf-store-switch { position: static; width: 100%; }
.sf .sf-menu-sheet > .sf-store-switch > summary { display: flex; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; gap: 0; font-size: var(--sf-fs-body); }
.sf .sf-menu-sheet > .sf-store-switch .sf-store-switch__menu { position: static; box-shadow: none; }
.sf .sf-account-form .sf-link-button { text-decoration: none; }
.sf .sf-breadcrumb { padding: 0; }
.sf .sf-breadcrumb .breadcrumb { padding: 0; float: none; }
.sf .sf-breadcrumb .breadcrumb::after { content: none; }
.sf .sf-breadcrumb .breadcrumb + .breadcrumb::before { content: ""; display: block; margin: 0; }
.sf .sf-pagination { margin-top: var(--sf-s5); }
.sf .sf-pagination li { margin: 0; }
.sf .sf-pagination .pagination-current { display: inline-flex; align-items: center; min-height: var(--sf-control-min); padding: 0 var(--sf-s3); border: 1px solid var(--sf-utility); border-radius: var(--sf-radius); color: var(--sf-on-dark); }
.sf .sf-pagination .pagination-link { margin: 0; }
.sf .sf-footer { border-top: 0; margin-top: 0; }
.sf .sf-footer .sf-footer-grid { max-width: calc(var(--sf-content) + 2 * var(--sf-gutter-m)); padding: 0 var(--sf-gutter-m); grid-template-columns: minmax(0, 1fr); gap: var(--sf-s4); }
.sf .sf-footer-grid > * { min-width: 0; }
.sf .sf-footer p, .sf .sf-footer address { color: inherit; font-size: var(--sf-fs-meta); overflow-wrap: anywhere; }
.sf .sf-footer .sf-footer-brand { font-size: var(--sf-fs-h3); letter-spacing: 0.04em; font-weight: var(--sf-w-heading); }
.sf .sf-footer nav { align-items: flex-start; gap: 0; }
.sf .sf-footer nav a { font-size: var(--sf-fs-meta); }
.sf .sf-footer .sf-disclaimer { grid-column: 1 / -1; margin-top: 0; }
.sf .sf-footer .sf-disclaimer p { font-size: var(--sf-fs-meta); margin-bottom: 0; }

/* Shared staff/storefront form components keep their original markup. */
.sf .form-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sf-s2); margin: 0 0 var(--sf-s3); min-width: 0; }
.sf .form-field label { display: block; width: 100%; font-size: var(--sf-fs-body); font-weight: var(--sf-w-control); margin: 0; color: var(--sf-ink); }
.sf .form-field input:not([type="checkbox"]):not([type="radio"]), .sf .form-field select, .sf .form-field textarea { width: 100%; max-width: 100%; min-height: var(--sf-control); height: auto; border: 1px solid var(--sf-outline); border-radius: var(--sf-radius); padding: var(--sf-s2) var(--sf-s3); background-color: var(--sf-surface); color: var(--sf-ink); font: inherit; margin: 0; }
.sf .form-field textarea { min-height: 140px; resize: vertical; }
.sf .form-field input[type="checkbox"], .sf .form-field input[type="radio"] { position: static; opacity: 1; width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--sf-utility); }
.sf .form-field input[type="checkbox"] + label, .sf .form-field input[type="radio"] + label { flex: 1; width: auto; min-height: var(--sf-control-min); display: inline-flex; align-items: center; padding: 0; }
.sf .form-field input[type="checkbox"] + label::before, .sf .form-field input[type="checkbox"] + label::after, .sf .form-field input[type="radio"] + label::before, .sf .form-field input[type="radio"] + label::after { display: none; }
.sf .form-field [aria-invalid="true"] { border: 2px solid var(--sf-error); }
.sf .field-help { flex-basis: 100%; font-size: var(--sf-fs-meta); color: var(--sf-ink-2); margin: 0; }
.sf .field-errors { flex-basis: 100%; color: var(--sf-error); font-size: var(--sf-fs-meta); font-weight: var(--sf-w-control); padding-left: var(--sf-s4); margin: 0; }
.sf .error-summary { border: 2px solid var(--sf-error); border-radius: var(--sf-radius); background: var(--sf-error-bg); color: var(--sf-error); padding: var(--sf-s3); margin-bottom: var(--sf-s4); }
.sf .error-summary h2 { font-size: var(--sf-fs-h3); color: inherit; }
.sf .error-summary a { color: inherit; }
.sf .message { padding: var(--sf-s3); margin-bottom: var(--sf-s3); border: 1px solid var(--sf-green); border-radius: var(--sf-radius); background: var(--sf-mint); color: var(--sf-ink); }
.sf .message.error { background: var(--sf-error-bg); border-color: var(--sf-error); color: var(--sf-error); }
.sf .message.warning { background: var(--sf-warning-bg); border-color: var(--sf-warning); color: var(--sf-warning); }
.sf .message.success { color: var(--sf-green); }
@media (min-width: 768px) {
  .sf .sf-footer .sf-footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .sf .container, .sf .sf-footer .sf-footer-grid { padding: 0 var(--sf-s6); max-width: calc(var(--sf-content) + 2 * var(--sf-s6)); }
  .sf .sf-header-inner { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 0 var(--sf-s4); padding-top: var(--sf-s3); padding-bottom: var(--sf-s2); }
  .sf .header-logo { grid-column: 1; grid-row: 1; }
  .sf .sf-search { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; }
  .sf .sf-account-desktop { display: flex; grid-column: 3; grid-row: 1; margin: 0; gap: var(--sf-s3); flex-wrap: wrap; }
  .sf .sf-cart-link { display: none; }
  /* SF-13 replaces the catalog menu; its existing contents keep their rules. */
  .sf :is(.sf-nav, .desktop-nav) { display: flex; grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--sf-s4); }
  .sf .mobile-menu { display: none; }
}
@media (forced-colors: active) {
  .sf :focus-visible, .sf .form-input:focus-visible, .sf .form-select:focus-visible { outline: 2px solid CanvasText !important; }
}

/* Keep invoice columns inside narrow screens without changing print layout. */
@media screen {
  .sf .invoice table { table-layout: fixed; width: 100%; }
  .sf .invoice :is(th, td) { overflow-wrap: anywhere; }
}

/* Preserve the invoice's existing US Letter print layout. The screen footer
   grid must not constrain its full-width disclaimer in paged media. */
@media print {
  .sf .sf-skip, .sf .skip-link, .sf .sf-header, .sf .sf-no-print { display: none !important; }
  body.sf { background: var(--sf-surface); }
  .sf .sf-main { padding: 0; }
  .sf .sf-panel { border: 0; padding: 0; }
  .sf .sf-footer .sf-footer-grid { display: block; }
  .sf .sf-footer .sf-disclaimer p { font-size: 8pt; line-height: 1.5; }
}

/* Existing storefront templates keep .button until their page ports land.
   Give them the shared control treatment, including readable text on dark fill. */
.sf .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sf-control); max-width: 100%; padding: 0 var(--sf-s4); border: 1.5px solid var(--sf-ink); border-radius: var(--sf-radius); background: var(--sf-surface); color: var(--sf-ink); font-size: 15px; font-weight: var(--sf-w-control); line-height: 1.5; text-align: center; text-decoration: none; }
.sf .button--primary, .sf .button:hover { background: var(--sf-utility); color: var(--sf-on-dark); border-color: var(--sf-utility); }
.sf .mobile-menu > summary { padding: 0; border: 0; background: transparent; color: var(--sf-ink); }
/* Baseline controls stay usable before individual page templates adopt sf-*. */
.sf main a { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; }
.sf button, .sf input[type="submit"], .sf select, .sf textarea, .sf input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) { min-height: var(--sf-control-min); }
.sf .sf-footer h2 { color: inherit; }
/* The captured theme names an undelivered heading font. Use the shared font. */
.sf h1, .sf h2, .sf h3, .sf h4, .sf h5, .sf h6, .sf .form-field label, .sf .button { font-family: var(--sf-font); }

/* Prototype components shared by the storefront page ports. */
.sf .sf-variant-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-s1) var(--sf-s3); padding: var(--sf-s3); min-height: calc(var(--sf-control) + var(--sf-s2)); }
.sf .sf-tile > img { display: block; width: 100%; height: calc(3 * var(--sf-s6) + var(--sf-s4)); object-fit: contain; background: var(--sf-surface); padding: var(--sf-s2); }
.sf .sf-letter { margin-top: var(--sf-s5); }
.sf .sf-letter > h2 { font-size: var(--sf-fs-h3); margin-bottom: var(--sf-s2); }
.sf .sf-gallery-nav { display: flex; flex-wrap: wrap; gap: var(--sf-s2); margin-top: var(--sf-s2); }
.sf .sf-gallery-nav a, .sf .sf-gallery-nav button { min-width: var(--sf-control-min); min-height: var(--sf-control-min); }
.sf .sf-account-nav { margin-bottom: var(--sf-s4); }
.sf .sf-account-nav [aria-current="page"] { background: var(--sf-utility); color: var(--sf-on-dark); border-color: var(--sf-utility); }
.sf .sf-invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sf-s3); margin-bottom: var(--sf-s4); }

/* Neutralise legacy home components that still load before the storefront. */
.sf .axis-tile { border: 0; padding: 0; min-height: 0; }
.sf .axis-tile li { border-top: 0; }
.sf .axis-tile li a { font-size: var(--sf-fs-body); }
/* Home "Shop by category" cards: compact lists (Chris 2026-10-23); links keep a 26px target (WCAG 2.5.8 minimum is 24px). */
.sf .axis-tile .sf-tile-label { min-height: 0; padding: 12px var(--sf-s3) var(--sf-s1); }
.sf .axis-tile .sf-tile ul { padding-bottom: 12px; }
.sf .axis-tile .sf-tile ul a { min-height: 26px; padding: 2px 0; line-height: 1.3; }
.sf .brand-row { display: block; gap: 0; flex-wrap: nowrap; }
.sf .brand-row a { border: 0; padding: 0; text-decoration: none; font-weight: var(--sf-w-control); }
/* The home strip's legacy reset above must not strip the logo tile's padding. */
.sf .brand-row .sf-brand-tile--logo { padding: 10px 12px; }

/* Submit-once feedback stays focusable and keeps the clicked name/value. */
.sf .uk-busy { opacity: .65; cursor: progress; }
.sf .sf-cart-toolbar { margin-bottom: 1rem; }
/* WC-19: application progress on the account status page. */
.sf .sf-steps { margin: 0 0 var(--sf-s3); padding-left: var(--sf-s5); display: grid; gap: var(--sf-s2); }
.sf .sf-steps li { color: var(--sf-ink-2); }
.sf .sf-steps li.is-done { color: var(--sf-ink); }
.sf .sf-steps li[aria-current="step"] { color: var(--sf-ink); font-weight: var(--sf-w-control); }
/* WC-24: hide the shipping address fields while "same as business" is ticked.
   Hidden inputs still submit and the server still overwrites them from the
   business address, so this is presentation only. Without :has() support the
   fields stay visible, exactly as before. */
.sf .sf-choice-group:has(#id_ship_same_as_business:checked) .sf-ship-fields { display: none; }
.sf .sf-choice-group:has(input[name$="-ship_same_as_business"]:checked) .sf-ship-fields { display: none; }
/* The category row fits on one line on a normal desktop (Chris 2026-10-23). */
@media (min-width: 1024px) {
  .sf :is(.sf-nav, .desktop-nav) > ul { gap: 0 var(--sf-s3); }
  .sf :is(.sf-nav, .desktop-nav) > ul > li > :is(a, details > summary) { font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  .sf :is(.sf-nav, .desktop-nav) > ul { gap: 0 12px; }
  .sf :is(.sf-nav, .desktop-nav) > ul > li > :is(a, details > summary) { font-size: 14px; }
}
/* Customer mobile audit (2026-10-23). One stacked-row table pattern for customer
   tables: a .sf-stack wrapper is the container, and the table inside it
   turns into labelled rows (data-label before each value) when the box is too
   narrow for the columns, on phones and in narrow desktop columns alike. The
   .is-title cell leads each row and an .is-sub cell (SKU) sits under it. */
.sf .sf-stack { container: sf-stack / inline-size; }
.sf .sf-stack--wide { container-name: sf-stack-wide; }
@container sf-stack (max-width: 559px) {
  .sf .sf-stack table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sf .sf-stack table, .sf .sf-stack table tbody { display: block; width: 100%; min-width: 0; }
  .sf .sf-stack table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sf-s1) var(--sf-s3); padding: var(--sf-s3) 0; border-bottom: 1px solid var(--sf-divider); }
  .sf .sf-stack table :is(th, td) { display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-size: var(--sf-fs-meta); }
  .sf .sf-stack table [data-label]::before { content: attr(data-label); display: block; color: var(--sf-ink-2); font-weight: var(--sf-w-body); }
  .sf .sf-stack table .is-title { flex: 1 1 100%; order: -2; font-size: var(--sf-fs-body); font-weight: var(--sf-w-control); }
  .sf .sf-stack table .is-sub { flex: 1 1 100%; order: -1; margin-top: calc(-1 * var(--sf-s1)); color: var(--sf-ink-2); }
  .sf .sf-stack table :is(th, td).is-num { text-align: left; }
  .sf .sf-stack table :is(th, td).is-end { margin-left: auto; text-align: right; }
  .sf .sf-stack table :is(th, td):empty { display: none; }
}
@container sf-stack-wide (max-width: 659px) {
  .sf .sf-stack table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sf .sf-stack table, .sf .sf-stack table tbody { display: block; width: 100%; min-width: 0; }
  .sf .sf-stack table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sf-s1) var(--sf-s3); padding: var(--sf-s3) 0; border-bottom: 1px solid var(--sf-divider); }
  .sf .sf-stack table :is(th, td) { display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-size: var(--sf-fs-meta); }
  .sf .sf-stack table [data-label]::before { content: attr(data-label); display: block; color: var(--sf-ink-2); font-weight: var(--sf-w-body); }
  .sf .sf-stack table .is-title { flex: 1 1 100%; order: -2; font-size: var(--sf-fs-body); font-weight: var(--sf-w-control); }
  .sf .sf-stack table .is-sub { flex: 1 1 100%; order: -1; margin-top: calc(-1 * var(--sf-s1)); color: var(--sf-ink-2); }
  .sf .sf-stack table :is(th, td).is-num { text-align: left; }
  .sf .sf-stack table :is(th, td).is-end { margin-left: auto; text-align: right; }
  .sf .sf-stack table :is(th, td):empty { display: none; }
  /* Order history rows keep their labels in two fixed columns, so Payment and Total line up row to row. */
  .sf .sf-stack table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf .sf-stack table .is-title { grid-column: 1 / -1; }
}
/* M1: the six account pages fit a two-column grid on phones. */
@media (max-width: 599px) {
  .sf .sf-account-nav > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-s2); margin-bottom: 0; }
  .sf .sf-account-nav .sf-btn { min-height: var(--sf-control-min); padding: 0 var(--sf-s2); font-size: var(--sf-fs-meta); line-height: 1.2; }
}
/* M2: the menu sheet fills the screen below the header and keeps its own scroll. */
@media (max-width: 1023px) {
  .sf .mobile-menu > .sf-menu-sheet { max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
}
/* M4: the radio stays beside its text; the text column takes the rest of the row.
   The pickup panel is hidden (by checkout-pickup.js) while Ship is chosen. */
.sf #pickup-details[hidden] { display: none; }
.sf .sf-choice { flex-wrap: nowrap; }
.sf .sf-choice > span { flex: 1 1 0; min-width: 0; }
/* M5: phone-sized category links on touch screens; desktop keeps the compact list. */
@media (pointer: coarse) {
  .sf .axis-tile .sf-tile ul a { min-height: var(--sf-control-min); }
}
/* M7: the option count stays with its brackets; narrow cards give the label more room. */
.sf .sf-card .sf-btn .sf-meta { white-space: nowrap; }
@media (max-width: 399px) {
  .sf .sf-card .sf-btn { padding: 0 var(--sf-s2); }
}
/* L1: a three-line order note keeps Place order close. */
.sf .sf-checkout textarea[name="note"] { min-height: 0; height: calc(3lh + 2 * var(--sf-s2) + 2px); }
/* L2: on phones the product name is already the page heading. */
@media (max-width: 767px) {
  .sf .sf-breadcrumb li:last-child:not(:first-child) { display: none; }
}
.sf .sf-breadcrumb ol, .sf .sf-breadcrumb .breadcrumb-list { font-size: var(--sf-fs-meta); }
/* L3: application section titles read as headings, not as field labels. */
.sf .account-form .sf-choice-group > legend { font-size: var(--sf-fs-h3); font-weight: var(--sf-w-heading); margin: var(--sf-s3) 0 var(--sf-s3); }
/* L4: quick-order SKU fields take the free row width. */
.sf .sf-quick-row .sf-field.sf-quick-sku { flex: 1 1 180px; width: auto; }
/* L5: later section headings keep clear of the rows above them. */
.sf .sf-panel > h2:not(:first-child), .sf .sf-account-nav ~ h2 { margin-top: var(--sf-s5); }
/* L6: letters without brands look unavailable, not like loose text. */
.sf nav.sf-btn-row[aria-label="Brands A to Z"] > span.sf-btn { border-style: dashed; border-color: var(--sf-outline); color: var(--sf-ink-2); background: transparent; cursor: default; }
/* L7: a hero without art uses the whole row on tablets. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf .sf-hero:not(:has(.sf-hero-art)) { grid-template-columns: minmax(0, 1fr); }
}
/* L10: the page count and links are readable. */
.sf .sf-pagination :is(a, span, li) { font-size: 15px; }
/* L11: the category row stays on one line from 1024px up (measured: the row
   needs 918px at 12px/7px, 998px at 13px/8px, 1056px at 14px/8px). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sf :is(.sf-nav, .desktop-nav) > ul { gap: 0 8px; }
  .sf :is(.sf-nav, .desktop-nav) > ul > li > :is(a, details > summary), .sf :is(.sf-nav, .desktop-nav) > ul > li > details > summary { font-size: 14px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .sf :is(.sf-nav, .desktop-nav) > ul > li > :is(a, details > summary), .sf :is(.sf-nav, .desktop-nav) > ul > li > details > summary { font-size: 13px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .sf :is(.sf-nav, .desktop-nav) > ul { gap: 0 7px; }
  .sf :is(.sf-nav, .desktop-nav) > ul > li > :is(a, details > summary), .sf :is(.sf-nav, .desktop-nav) > ul > li > details > summary { font-size: 12px; }
}
/* L12: the hero eyebrow is at least 12px. */
.sf .sf-eyebrow .eyebrow { font-size: 12px; }
.sf .sf-cart-toolbar--end { margin: var(--sf-s3) 0 0; }