/* =====================================================================
   sf-pages.css — styles of the FUNCTIONAL storefront pages that keep their
   own structure (cart, checkout, account, product detail, order, info and
   page content, quick order / buy now, phone + address pickers, coupons).
   Pure token consumers: they take their look from storefront.css.
   Round 2 / Round 3 of the storefront design replace these page by page.
   ===================================================================== */

/* =====================================================================
   storefront.css — the PUBLIC STOREFRONT stylesheet (everything under
   .sf-scope / .sf-body). Split out of theme.css, which is now panel-only.
   Loaded by sections/start-page.html and the Designer preview heads
   (via es_storefront_css_links in functions/builder/storefront.php).
   ===================================================================== */

/* =====================================================================
   STOREFRONT SLOT BASE LAYER (ES Platform — variant system, VB.2)
   ---------------------------------------------------------------------
   The structural / baseline styling for the storefront component slots.
   It is the LITERAL translation of the inline `style="..."` attributes the
   four preset-visible partials carried before VB.2 — moving them here is
   what makes the variant model work at all: a `{type}-{n}` CSS chunk
   (specificity .sf-scope .hero.hero-5 .hero-heading = 0,4,0) can now
   override this base (.sf-scope .hero-heading = 0,2,0) WITHOUT !important,
   which inline styles made impossible.

   Contract:
     * every selector starts at `.sf-scope` so nothing leaks into the panel;
     * colours / radii come from Theme tokens only (css_root variables);
     * the BAND (outer background / border) is styled on the block wrapper
       `.sf-scope .{type}` that es_storefront_render_part() already emits
       (`<div class="sf-part hero hero-1">`), so the partial roots stay
       class-less and a variant band is simply `.sf-scope .hero.hero-4`
       — the ARCHITECTURE §6 `class="hero hero-12"` model exactly;
     * the `{type}-1` variants keep EMPTY css, so this layer alone IS the
       current look — the storefront renders exactly as it did before.
   Optional slots (announce / actions / eyebrow / cta-2 / badge / sale /
   action / brand / newsletter / social) only exist in the DOM when the
   block supplies the matching prop, so these rules are inert by default.
   ===================================================================== */

/* ---- structural reset: the storefront loads Bootstrap (css_table.html),
   whose Reboot can shrink-wrap block sections (the announce band rendered at
   content width instead of full-bleed). Force the storefront's own structural
   elements back to full-width blocks with border-box sizing. Scoped to
   .sf-scope so the panel is untouched. ---- */

.sf-scope, .sf-scope .sf-part { display: block; width: 100%; }

.sf-scope .sf-part > header,
.sf-scope .sf-part > section,
.sf-scope .sf-part > footer { display: block; width: 100%; margin: 0; }

/* ---- navbar ---- */

.sf-scope .navbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

.sf-scope .header-announce { display: block; width: 100%; }

.sf-scope .header-announce { padding: 7px 16px; background: var(--color-primary); color: var(--color-surface); font-size: 12px; font-weight: 560; text-align: center; }

.sf-scope .header-announce-link { color: inherit; text-decoration: none; }

.sf-scope .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 14px 24px; }

.sf-scope .header-brand { font-size: 17px; font-weight: 640; letter-spacing: -0.01em; color: var(--color-text); }

.sf-scope .header-nav { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; }

.sf-scope .header-nav-link { font-size: 14px; font-weight: 560; color: var(--color-text); text-decoration: none; }

.sf-scope .header-actions { display: flex; align-items: center; gap: 14px; }

.sf-scope .header-action { font-size: 13px; font-weight: 540; color: var(--color-text); text-decoration: none; white-space: nowrap; }

.sf-scope .header-action-cart { display: inline-flex; align-items: center; gap: 6px; }

/* ---- header nav sub-menus (CSS-only hover / focus dropdowns) ----
   Shared by every header variant: a parent nav item wraps its link in
   .sf-nav-drop and its children in a .sf-nav-panel that shows on hover or
   keyboard focus. Themed via tokens so it reads correctly in light + dark and
   RTL (inset-inline-start). No <style> block needed in the templates. */

.sf-scope .sf-nav-drop { position: relative; display: inline-flex; align-items: center; }

.sf-scope .sf-nav-caret { margin-inline-start: 4px; font-size: 0.72em; line-height: 1; opacity: 0.65; }

.sf-scope .sf-nav-panel {
    position: absolute; inset-inline-start: 0; top: 100%; z-index: 60;
    display: none; flex-direction: column; gap: 2px; min-width: 190px;
    margin-top: 8px; padding: 8px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--color-text) 16%, transparent);
}

.sf-scope .sf-nav-drop:hover > .sf-nav-panel,
.sf-scope .sf-nav-drop:focus-within > .sf-nav-panel { display: flex; }

.sf-scope .sf-nav-panel a,
.sf-scope .sf-nav-panel span {
    display: block; padding: 7px 12px; border-radius: var(--radius-md);
    font-size: 13px; font-weight: 500; line-height: 1.3;
    color: var(--color-text); text-decoration: none; white-space: nowrap;
    text-transform: none; letter-spacing: normal;
}

.sf-scope .sf-nav-panel a:hover { background: var(--color-bg); color: var(--color-primary); }

.sf-scope .sf-nav-panel .sf-nav-panel-head {
    padding: 6px 12px 2px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted);
}

.sf-scope .header-cart-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-pill);
    background: var(--color-primary); color: var(--color-surface);
    font-size: 10.5px; font-weight: 640; line-height: 1;
}

/* ---- hero ---- */

.sf-scope .hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

.sf-scope .hero-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; max-width: 1080px; margin: 0 auto; padding: 64px 24px; }

.sf-scope .hero-body { flex: 1 1 320px; min-width: 0; }

.sf-scope .hero-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }

.sf-scope .hero-heading { margin: 0 0 12px; font-size: 34px; font-weight: 660; letter-spacing: -0.02em; color: var(--color-text); }

.sf-scope .hero-text { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--color-muted); }

.sf-scope .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.sf-scope .hero-cta { display: inline-block; padding: 11px 26px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface); font-size: 14.5px; font-weight: 600; text-decoration: none; }

.sf-scope .hero-cta-2 { display: inline-block; padding: 11px 26px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); font-size: 14.5px; font-weight: 600; text-decoration: none; }

.sf-scope .hero-media { flex: 1 1 280px; min-width: 0; }

.sf-scope .hero-image { display: block; max-width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-xl); }

/* ---- product_grid + its cards ---- */

.sf-scope .product_grid { background: var(--color-bg); }

.sf-scope .product-card { display: block; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); text-decoration: none; }

.sf-scope .product-card-media { position: relative; aspect-ratio: 1 / 1; background-color: var(--color-sand); background-position: center; background-size: cover; background-repeat: no-repeat; }

.sf-scope .product-card-media.has-image { background-color: var(--color-bg); }

.sf-scope .product-card-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface); font-size: 11px; font-weight: 620; }

.sf-scope .product-card-body { padding: 12px 14px; }

.sf-scope .product-card-title { margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 580; }

.sf-scope .product-card-price { font-size: 14px; font-weight: 640; color: var(--color-primary); }

.sf-scope .product-card-currency { font-size: 11.5px; font-weight: 500; color: var(--color-muted); }

.sf-scope .product-card-price-sale { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--color-muted); text-decoration: line-through; }

/* ---- footer ---- */

.sf-scope .footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }

.sf-scope .footer-inner { max-width: 1080px; margin: 0 auto; padding: 28px 24px; text-align: center; font-size: 13px; color: var(--color-muted); }

.sf-scope .footer-brand { margin-bottom: 10px; font-size: 16px; font-weight: 620; color: var(--color-text); }

.sf-scope .footer-brand-text { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: var(--color-muted); }

.sf-scope .footer-cols { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }

.sf-scope .footer-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.sf-scope .footer-link { color: var(--color-text); text-decoration: none; }

.sf-scope .footer-sublink { color: var(--color-muted); text-decoration: none; }

.sf-scope .footer-newsletter { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }

.sf-scope .footer-newsletter-title { font-size: 14px; font-weight: 620; color: var(--color-text); }

.sf-scope .footer-newsletter-text { margin: 0; }

.sf-scope .footer-newsletter-cta { display: inline-block; padding: 9px 20px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-surface); font-size: 13px; font-weight: 600; text-decoration: none; }

.sf-scope .footer-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }

.sf-scope .footer-social-link { color: var(--color-text); text-decoration: none; }

.sf-scope .footer-legal { color: var(--color-muted); }

/* ---- v3 containers (section band + heading + children slot) ---- */

.sf-scope .sf-container { display: block; width: 100%; background: var(--color-bg); }

.sf-scope .sf-container-inner { max-width: 1080px; margin: 0 auto; padding: 48px 24px; }

.sf-scope .sf-container-title { margin: 0 0 20px; font-size: 24px; font-weight: 640; letter-spacing: -0.01em; color: var(--color-text); }

.sf-scope .sf-container-body { display: block; }

/* Band for a v3 'header' component (the 'navbar' component keeps .sf-scope .navbar). */

.sf-scope .header:not(:has(> .sf-header)) { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }

.sf-scope .sf-container-inner { max-width: min(1360px, 94vw); padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 26px); }

/* Cards per row from the block's --sf-cols-* vars (default 4 / 3 / 2), responsive. */

/* Slider arrows overlap the slide text on phones — swipe + dots take over. */

@media (max-width: 600px) { .sf-scope .sf-bs-prev, .sf-scope .sf-bs-next { display: none !important; } }


@media (max-width: 700px) {
    /* Mobile: hide the inline nav + actions, show the hamburger (opens drawer). */
    
    
    
    
}

.sf-scope,
.sf-scope .sf-part { display: block; width: 100%; }

.sf-scope .sf-part > header,
.sf-scope .sf-part > section,
.sf-scope .sf-part > footer { display: block; width: 100%; margin: 0; }

.sf-scope .sf-btn[disabled],
.sf-scope .sf-btn.is-disabled {
    background: var(--surface-3); color: var(--color-muted); border-color: transparent;
    cursor: not-allowed; box-shadow: none;
}

.sf-scope .sf-btn.is-loading { color: transparent; position: relative; pointer-events: none; }

.sf-scope .sf-btn.is-loading::after {
    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in oklab, var(--on-primary) 40%, transparent);
    border-top-color: var(--on-primary);
    animation: sf-spin .7s linear infinite;
}

@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ---- Colour-option swatches (product detail) ---- */

.sf-scope .sf-pd__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sf-scope .sf-pd__swatch {
    position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: 6px 14px 6px 6px;
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill);
    cursor: pointer; transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.sf-scope .sf-pd__swatch:hover { background: var(--color-primary-soft); }

.sf-scope .sf-pd__swatch:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sf-scope .sf-pd__swatch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.sf-scope .sf-pd__swatch:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }

.sf-scope .sf-pd__swatch-dot { flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); }

.sf-scope .sf-pd__swatch-name { font-size: var(--font-size-sm); font-weight: 600; }

.sf-scope .sf-field.is-invalid .sf-input,
.sf-scope .sf-field.is-invalid .sf-select,
.sf-scope .sf-field.is-invalid .sf-textarea { border: 2px solid var(--color-danger); background: var(--danger-soft); }

@keyframes sf-shimmer { to { background-position: -200% 0; } }

.sf-scope .sf-pagination .is-current { background: var(--color-primary); color: var(--on-primary); border-color: var(--color-primary); }

/* =====================================================================
   BLOCK BASE LAYER — one base per ComponentType. Per-variant files add
   their own scoped CSS on top (ComponentVariant_css).
   ===================================================================== */

/* ---- Header ---- */


.sf-scope .sf-swatch.is-unavailable { color: var(--color-muted); background: var(--surface-3); cursor: not-allowed; text-decoration: line-through; }

/* ---- Cart line + summary ---- */

.sf-scope .sf-cartline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-top: var(--border-width) solid var(--hairline); }

.sf-scope .sf-cartline__img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: var(--media-radius); }

.sf-scope .sf-cartline__body { flex: 1; min-width: 0; }

.sf-scope .sf-cartline__title { margin: 0; font-size: var(--font-size-sm); font-weight: 600; }

.sf-scope .sf-cartline__opts { margin: 2px 0 0; font-size: 9px; color: var(--color-muted); }

.sf-scope .sf-cartline__total { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.sf-scope .sf-summary { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--pad-card); border: var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); }

.sf-scope .sf-summary__row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm); }

.sf-scope .sf-summary__row > :last-child { margin-inline-start: auto; font-variant-numeric: tabular-nums; text-align: end; }

.sf-scope .sf-summary__row--total { padding-top: var(--space-2); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-md); font-weight: 700; }

/* A block rendered inside the platform's own .sf-container-inner is already
   centred and padded — its inner .sf-wrap must not add a second gutter, or the
   content ends up 1160 inside 1160 (visible as dead space either side). */

.sf-scope .sf-container-inner .sf-wrap { max-width: none; padding-inline: 0; }

/* The platform's own block container, aligned to the canvas grid: one 1160px
   column, canvas section rhythm, and the product grid on the canvas's 215px
   track so a row fills the width instead of leaving dead space. */

.sf-scope .sf-container-inner { max-width: var(--container); padding: var(--pad-section) var(--gutter); }

.sf-scope .sf-container-title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display); font-size: var(--font-size-2xl); line-height: var(--line-tight);
    font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform);
    color: var(--color-text);
}

/* ---- rich prose (v2) — shared body style for admin-authored HTML ---- */

.sf-scope .sf-prose {
    max-inline-size: 72ch;
    font-size: var(--font-size-md);
    line-height: 1.75;
    color: var(--color-text);
    text-wrap: pretty;
}

.sf-scope .sf-prose > :first-child { margin-block-start: 0; }

.sf-scope .sf-prose > :last-child { margin-block-end: 0; }

.sf-scope .sf-prose p { margin-block: 0 var(--space-4); }

.sf-scope .sf-prose h2,
.sf-scope .sf-prose h3,
.sf-scope .sf-prose h4 {
    margin-block: var(--space-6) var(--space-3);
    font-family: var(--font-display);
    line-height: var(--line-tight);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
}

.sf-scope .sf-prose h2 { font-size: var(--font-size-xl); }

.sf-scope .sf-prose h3 { font-size: var(--font-size-lg); }

.sf-scope .sf-prose h4 { font-size: var(--font-size-md); }

.sf-scope .sf-prose ul,
.sf-scope .sf-prose ol { margin-block: 0 var(--space-4); padding-inline-start: var(--space-6); }

.sf-scope .sf-prose li { margin-block-end: var(--space-2); }

.sf-scope .sf-prose a { text-decoration: underline; }

.sf-scope .sf-prose img { margin-block: var(--space-4); border-radius: var(--media-radius); }

.sf-scope .sf-prose hr { height: 1px; border: 0; margin-block: var(--space-5); background: var(--color-border); }

.sf-scope .sf-prose blockquote {
    margin: 0 0 var(--space-4);
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--color-border);
    color: var(--color-muted);
}

.sf-scope .sf-prose table {
    width: 100%;
    margin-block: 0 var(--space-4);
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.sf-scope .sf-prose th,
.sf-scope .sf-prose td {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    text-align: start;
}

.sf-scope .sf-prose th { background: var(--surface-2); font-weight: var(--weight-semibold); }

/* ---- text block (v2) ---- */

.sf-scope .sf-textblock { padding-block: var(--pad-section); }

.sf-scope .sf-textblock__inner { max-inline-size: var(--container-narrow); margin-inline: auto; }

.sf-scope .sf-textblock--center { text-align: center; }

.sf-scope .sf-textblock__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    line-height: var(--line-tight);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-transform);
    text-wrap: balance;
}

.sf-scope .sf-textblock__body { font-size: var(--font-size-md); line-height: 1.75; color: var(--color-text); text-wrap: pretty; }

/* ---- pagecontent (v2) ---- */

.sf-scope .sf-pagebody { padding-block: var(--pad-section); }

.sf-scope .sf-pagebody__inner { max-inline-size: var(--container-narrow); margin-inline: auto; }

.sf-scope .sf-pagebody--center { text-align: center; }

.sf-scope .sf-pagebody--center .sf-prose { margin-inline: auto; }

.sf-scope .sf-pagebody__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: var(--line-tight);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-wrap: balance;
}

/* ---- info page (v2) ---- */

.sf-scope .sf-infopage { padding-block: var(--pad-section); }

.sf-scope .sf-infopage__head { margin-block-end: var(--space-5); }

.sf-scope .sf-infopage__bar {
    display: block;
    width: 44px;
    height: 4px;
    margin-block-end: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.sf-scope .sf-infopage__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: var(--line-tight);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-wrap: balance;
}

.sf-scope .sf-infopage__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
}

.sf-scope .sf-infopage__row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }

.sf-scope .sf-infopage__row svg { flex: none; color: var(--color-primary); }

.sf-scope .sf-infopage__label {
    min-inline-size: 88px;
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-muted);
}

.sf-scope .sf-infopage__row a { font-weight: var(--weight-semibold); }

.sf-scope .sf-infopage__row a:hover { text-decoration: underline; }

.sf-scope .sf-infopage__socials { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }

.sf-scope .sf-infopage__socials a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
    transition: border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.sf-scope .sf-infopage__socials a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .sf-scope .sf-infopage__socials a:hover { transform: none; }
}

/* ---- contact form (v2) ---- */

.sf-scope .sf-formblock { padding-block: var(--pad-section); }

.sf-scope .sf-formblock__inner { max-inline-size: 560px; margin-inline: auto; }

.sf-scope .sf-formblock__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    line-height: var(--line-tight);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-transform);
}

.sf-scope .sf-formblock__intro { margin: 0 0 var(--space-5); font-size: var(--font-size-sm); line-height: var(--line-base); color: var(--color-muted); text-wrap: pretty; }

.sf-scope .sf-formblock__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }

/* ---- account (v2) ----
   Customer auth + account blocks: component/account/login_v2, register_v2,
   forgot_v2, reset_v2, profile_v2. Everything is scoped under
   `.sf-scope .sf-account` (each block root carries .sf-account) so nothing
   here leaks into the rest of the storefront or into the panel. Tokens only —
   no raw colours — and logical properties throughout, so RTL flips for free.

   The response box is ONE element that sf-account.js flips between states by
   toggling .is-error / .is-ok on .sf-form-message. The markup carries
   .sf-alert, and the two state rules below reproduce .sf-alert--danger /
   .sf-alert--success for those JS-owned class names; the JS contract cannot be
   renamed without breaking every account form. */

/* Field rhythm: the forms are .sf-stack, so the primitive bottom margin would
   double the gap. */

.sf-scope .sf-account .sf-field { margin-bottom: 0; }

/* Inline validation. The forms stay novalidate (submission is JS-owned), but
   :user-invalid still matches once the customer has interacted, so the error
   line and the danger border appear with no extra script. .sf-field.is-invalid
   is the explicit hook for a server-driven per-field error. */

.sf-scope .sf-account .sf-field__error { display: none; }

.sf-scope .sf-account .sf-field.is-invalid .sf-field__error,
.sf-scope .sf-account .sf-field:has(.sf-input:user-invalid) .sf-field__error,
.sf-scope .sf-account .sf-field:has(.sf-select:user-invalid) .sf-field__error { display: block; }

.sf-scope .sf-account .sf-input:user-invalid,
.sf-scope .sf-account .sf-select:user-invalid { border-color: var(--color-danger); }

/* Help and error occupy the same line: the error replaces the hint. */

.sf-scope .sf-account .sf-field.is-invalid .sf-field__help,
.sf-scope .sf-account .sf-field:has(.sf-input:user-invalid) .sf-field__help { display: none; }

.sf-scope .sf-account .sf-field__req { margin-inline-start: 2px; }

/* Password reveal button, pinned inside the input box. */

.sf-scope .sf-account .sf-field__control { position: relative; display: block; }

.sf-scope .sf-account .sf-field--pw .sf-input { padding-inline-end: 76px; }

.sf-scope .sf-account .sf-field__reveal {
    position: absolute;
    inset-inline-end: var(--space-1);
    inset-block: var(--space-1);
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: color var(--duration-base) var(--ease);
}

.sf-scope .sf-account .sf-field__reveal:hover { color: var(--color-primary); }

/* Progressive disclosure (register: choose-my-own-username). */

.sf-scope .sf-account .sf-account__reveal { display: none; }

.sf-scope .sf-account .sf-account__reveal.is-open { display: block; }

.sf-scope .sf-account .sf-account__check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.sf-scope .sf-account .sf-account__check input {
    width: 17px;
    height: 17px;
    flex: none;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Two-up rows (dial code + mobile, new + confirm password). */

.sf-scope .sf-account .sf-account__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.sf-scope .sf-account .sf-account__row > .sf-field { flex: 1 1 150px; min-width: 0; }

.sf-scope .sf-account .sf-account__cell--code { flex: 0 0 clamp(130px, 34%, 170px); }

.sf-scope .sf-account .sf-account__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Submitting state — sf-account.js sets button.disabled and swaps the label
   for data-loading. .sf-btn[disabled] already carries the muted fill; only the
   cursor differs (in flight, not refused). */

.sf-scope .sf-account .sf-btn[disabled] { cursor: progress; }

/* Server response box — hidden until the JS adds a state class. */

.sf-scope .sf-account .sf-form-message { display: none; }

.sf-scope .sf-account .sf-form-message.is-error,
.sf-scope .sf-account .sf-form-message.is-ok { display: flex; }

.sf-scope .sf-account .sf-form-message.is-error { color: var(--color-danger); background: var(--danger-soft); }

.sf-scope .sf-account .sf-form-message.is-ok { color: var(--color-success); background: var(--success-soft); }

/* ---- auth screens (login / register / forgot / reset) ---- */

.sf-scope .sf-auth { padding-block: var(--pad-section); }

.sf-scope .sf-auth__card {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: var(--space-6);
}

.sf-scope .sf-auth--wide .sf-auth__card { max-width: 520px; }

.sf-scope .sf-auth .sf-heading { margin-bottom: var(--space-5); }

.sf-scope .sf-auth__aside { margin: 0; font-size: var(--font-size-xs); text-align: end; }

.sf-scope .sf-auth__aside a { color: var(--color-muted); }

.sf-scope .sf-auth__aside a:hover { color: var(--color-primary); text-decoration: underline; }

.sf-scope .sf-auth__trust {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-base);
    color: var(--color-muted);
    text-align: center;
    text-wrap: pretty;
}

.sf-scope .sf-auth__trust a { color: var(--color-muted); text-decoration: underline; }

.sf-scope .sf-auth__trust a:hover { color: var(--color-primary); }

.sf-scope .sf-auth__alt {
    margin: var(--space-5) 0 0;
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    text-align: center;
}

.sf-scope .sf-auth__alt a { font-weight: var(--weight-semibold); }

.sf-scope .sf-auth__alt a:hover { text-decoration: underline; }

/* ---- account page (profile) ---- */

.sf-scope .sf-account-page { padding-block: var(--pad-section); }

.sf-scope .sf-account__col { width: 100%; max-width: 640px; margin-inline: auto; }

.sf-scope .sf-account__panel-title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.sf-scope .sf-account__id { display: flex; align-items: center; gap: var(--space-4); }

.sf-scope .sf-account__avatar {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--color-primary);
}

.sf-scope .sf-account__who { min-width: 0; display: flex; flex-direction: column; }

.sf-scope .sf-account__name {
    font-size: var(--font-size-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-scope .sf-account__meta {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Order / address list rows. */

.sf-scope .sf-account__list { display: flex; flex-direction: column; }

.sf-scope .sf-account__order,
.sf-scope .sf-account__address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-block-end: var(--border-width) solid var(--hairline);
    border-radius: var(--media-radius);
    color: var(--color-text);
    transition: background var(--duration-base) var(--ease);
}

.sf-scope .sf-account__order:last-child,
.sf-scope .sf-account__address:last-child { border-block-end: 0; }

.sf-scope .sf-account__order:hover { background: var(--surface-2); color: var(--color-text); }

.sf-scope .sf-account__order-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sf-scope .sf-account__order-code {
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-scope .sf-account__order-date { font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-account__order-side { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.sf-scope .sf-account__order-total { font-size: var(--font-size-sm); }

/* Order status badges, mapped onto the existing sf-badge tones. */

.sf-scope .sf-account__ostat { color: var(--color-info); background: var(--info-soft); }

.sf-scope .sf-account__signout { margin: 0; text-align: center; }

.sf-scope .sf-account__signout .sf-btn { color: var(--color-muted); }

.sf-scope .sf-account__signout .sf-btn:hover { color: var(--color-danger); background: var(--danger-soft); }

@media (max-width: 480px) {
    .sf-scope .sf-account .sf-account__row > .sf-field { flex-basis: 100%; }
    .sf-scope .sf-account .sf-account__cell--code { flex-basis: 100%; }
    .sf-scope .sf-account__order,
    .sf-scope .sf-account__address { align-items: flex-start; flex-wrap: wrap; }
}

.sf-scope .sf-cartline__media {
    flex: none; width: 64px; height: 64px; display: block; overflow: hidden;
    border-radius: var(--media-radius); background: var(--surface-2);
}

.sf-scope .sf-cartline__img { width: 100%; height: 100%; }

.sf-scope .sf-cartline__img--empty { display: grid; place-items: center; color: var(--color-muted); }

.sf-scope .sf-cartline__link { display: block; color: var(--color-text); }

.sf-scope .sf-cartline__link:hover { color: var(--color-primary); }

.sf-scope .sf-cartline__optval { color: var(--color-text); font-weight: var(--weight-semibold); }

.sf-scope .sf-cartline__unit { margin: 3px 0 0; font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-cartline__body .sf-badge { margin-block-start: var(--space-2); margin-inline-end: var(--space-2); }

.sf-scope .sf-cartline__qty { flex: none; }

.sf-scope .sf-cartline__remove {
    flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center;
    border: 0; border-radius: var(--btn-radius);
    background: transparent; color: var(--color-muted); cursor: pointer;
    transition: color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.sf-scope .sf-cartline__remove:hover { background: var(--surface-2); color: var(--color-danger); }

.sf-scope .sf-cartline__remove[disabled] { opacity: .55; cursor: progress; }

.sf-scope .sf-summary__row--credit { color: var(--color-success); }

.sf-scope .sf-summary__row--credit strong { color: var(--color-success); }

/* -- the two JS message boxes: hidden until the script adds .is-error -- */

.sf-scope .sf-cart__msg.sf-alert,
.sf-scope .sf-co__msg.sf-alert { display: none; margin-block-end: var(--space-4); }

.sf-scope .sf-cart__msg.sf-alert.is-error,
.sf-scope .sf-co__msg.sf-alert.is-error { display: flex; }

/* -- cart page -- */

.sf-scope .sf-cartpage { display: block; width: 100%; }

.sf-scope .sf-cartpage__grid { display: grid; gap: var(--gutter); align-items: start; grid-template-columns: minmax(0, 1fr); }

.sf-scope .sf-cartpage__lines { padding-block: 0; }

.sf-scope .sf-cartpage__lines .sf-cartline:first-child { border-top: 0; }

.sf-scope .sf-cartpage__aside { min-width: 0; }

.sf-scope .sf-cartpage__issues { margin: var(--space-3) 0 0; }

.sf-scope .sf-cartpage__cta { margin-block-start: var(--space-3); }

.sf-scope .sf-coupon { margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-top: var(--border-width) solid var(--hairline); }

.sf-scope .sf-coupon__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.sf-scope .sf-coupon__input { flex: 1 1 140px; min-width: 0; }

.sf-scope .sf-coupon__btn { flex: none; }

/* Stage 6A: the discount-code box (partial/coupon_box.html) — a quiet link,
   the field, or the applied code as a tag; plus summary extras. */

.sf-scope .sf-coupon__toggle { padding: 0; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; min-height: 36px; }

.sf-scope .sf-coupon__toggle:hover { text-decoration: underline; }

.sf-scope .sf-coupon__form { margin-block-start: var(--space-2); }

.sf-scope .sf-coupon__form .sf-field__label { display: block; margin-block-end: 6px; }

.sf-scope .sf-coupon__input { text-transform: uppercase; letter-spacing: 0.03em; }

.sf-scope .sf-coupon__input::placeholder { text-transform: none; letter-spacing: 0; }

.sf-scope .sf-coupon__input.is-invalid { border-color: var(--color-danger, #b42318); }

.sf-scope .sf-coupon__error,
.sf-scope .sf-coupon__warn { margin: 6px 0 0; font-size: var(--font-size-sm); color: var(--color-danger, #b42318); }

.sf-scope .sf-coupon__applied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 8px 12px; border-radius: var(--radius-md, 10px); background: color-mix(in oklab, var(--color-success, #15803d) 10%, var(--color-surface)); }

.sf-scope .sf-coupon__tag { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text); }

.sf-scope .sf-coupon__tag svg { flex: none; color: var(--color-success, #15803d); }

.sf-scope .sf-coupon__code { letter-spacing: 0.03em; }

.sf-scope .sf-coupon__label { color: var(--color-muted); }

.sf-scope .sf-coupon__remove { flex: none; padding: 0 4px; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; min-height: 36px; }

.sf-scope .sf-coupon.is-busy { opacity: 0.7; }

.sf-scope .sf-summary__code { display: inline-block; margin-inline-start: 4px; padding: 1px 6px; border-radius: 6px; background: color-mix(in oklab, var(--color-success, #15803d) 12%, var(--color-surface)); font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em; }

.sf-scope .sf-summary__was { margin-inline-end: 6px; color: var(--color-muted); font-weight: 400; }

.sf-scope .sf-summary__row--note { margin-top: calc(var(--space-1, 4px) * -1); font-size: 12.5px; color: var(--color-muted); }

@media (min-width: 900px) {
    .sf-scope .sf-cartpage__grid { grid-template-columns: minmax(0, 1fr) 340px; }
    .sf-scope .sf-cartpage__aside { position: sticky; inset-block-start: var(--space-5); }
}

/* -- checkout -- */

.sf-scope .sf-checkout { display: grid; gap: var(--gutter); align-items: start; grid-template-columns: minmax(0, 1fr); }

.sf-scope .sf-checkout__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.sf-scope .sf-checkout__aside { min-width: 0; }

.sf-scope .sf-checkout__step { min-width: 0; }

.sf-scope .sf-checkout__title {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-family: var(--font-display); font-size: var(--font-size-md);
    font-weight: var(--weight-bold); color: var(--color-text);
}

.sf-scope .sf-checkout__stepnum {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: var(--primary-soft); color: var(--color-primary);
    font-size: var(--font-size-xs); font-weight: var(--weight-bold);
}

.sf-scope .sf-checkout__steperr { margin: 0 0 var(--space-4); }

.sf-scope .sf-checkout__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.sf-scope .sf-checkout__grid--spaced { margin-block-end: var(--space-4); }

.sf-scope .sf-checkout__grid .sf-field { margin-block-end: 0; min-width: 0; }

.sf-scope .sf-checkout__err { display: none; }

.sf-scope .sf-input.is-invalid,
.sf-scope .sf-textarea.is-invalid { border-color: var(--color-danger); background: var(--danger-soft); }

.sf-scope .sf-input.is-invalid ~ .sf-checkout__err,
.sf-scope .sf-textarea.is-invalid ~ .sf-checkout__err { display: block; }

.sf-scope .sf-checkout__choices { display: flex; flex-direction: column; gap: var(--space-2); }

.sf-scope .sf-checkout__choice {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--input-radius);
    background: var(--color-surface); cursor: pointer;
    transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.sf-scope .sf-checkout__choice:hover { border-color: var(--color-primary); }

.sf-scope .sf-checkout__choice:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.sf-scope .sf-checkout__choice:has(input:checked) { border-color: var(--color-primary); background: var(--primary-soft); }

.sf-scope .sf-checkout__choice input { flex: none; width: 17px; height: 17px; accent-color: var(--color-primary); cursor: pointer; }

.sf-scope .sf-checkout__choice-name { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }

.sf-scope .sf-checkout__choice-meta { flex: none; font-size: var(--font-size-sm); color: var(--color-muted); }

.sf-scope .sf-checkout__choice-icon { flex: none; display: inline-grid; place-items: center; color: var(--color-muted); }

.sf-scope .sf-checkout__choice-logo { flex: none; height: 20px; width: auto; max-width: 48px; object-fit: contain; }

/* Stage 6B: delivery choices carry a time, a pickup address / hours / map
   link, or a minimum-order note; plus the "Where should we deliver?" list. */

.sf-scope .sf-checkout__choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.sf-scope .sf-checkout__choice-body .sf-checkout__choice-name { flex: none; }

.sf-scope .sf-checkout__choice-sub { font-size: 12.5px; color: var(--color-muted); line-height: 1.45; }

.sf-scope .sf-checkout__choice-sub--warn { color: var(--color-warning, #b45309); }

.sf-scope .sf-checkout__choice-kind { display: inline-block; margin-inline-end: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--color-primary); font-size: 11px; font-weight: 650; vertical-align: 1px; }

.sf-scope .sf-checkout__choice-link { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--color-primary); }

.sf-scope .sf-checkout__choice--method:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }

.sf-scope .sf-checkout__dest { margin-block-end: var(--space-3); max-width: 420px; }

.sf-scope .sf-checkout__dest.is-invalid .sf-checkout__err { display: block; }

/* Buy now ON THE PRODUCT PAGE (partial/quick_inline.html): one calm card
   under the price — details, delivery, payment, one button. */

/* Buy now on the product page — compact: a slim bar that opens in place. */

.sf-scope .sf-pdq { margin-block-start: var(--space-4); padding: 12px 14px; border: var(--card-border); border-radius: var(--card-radius); background: var(--color-surface); }

.sf-scope .sf-pdq__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sf-scope .sf-pdq__bar-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }

.sf-scope .sf-pdq__title { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: 700; }

.sf-scope .sf-pdq__title svg { color: var(--color-primary); flex: none; }

.sf-scope .sf-pdq__ways { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sf-scope .sf-pdq__way { font-size: 12px; color: var(--color-muted); padding: 2px 8px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px; }

.sf-scope .sf-pdq__way-logo { height: 20px; width: auto; max-width: 48px; object-fit: contain; }

.sf-scope .sf-pdq__open { flex: 0 0 auto; min-height: 44px; padding-inline: 22px; }

.sf-scope .sf-pdq.is-open .sf-pdq__ways { display: none; }

.sf-scope .sf-pdq__body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border, #e5e7eb); }

.sf-scope .sf-pdq__body[hidden] { display: none; }

.sf-scope .sf-pdq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }

.sf-scope .sf-pdq__grid[hidden] { display: none; }

.sf-scope .sf-pdq__grid .sf-field--wide { grid-column: 1 / -1; }

.sf-scope .sf-pdq__grid .sf-field:has(.sf-phone) { grid-column: 1 / -1; }

.sf-scope .sf-pdq .sf-field { margin: 0; }

.sf-scope .sf-pdq .sf-field__label { font-size: 13px; margin-bottom: 4px; }

.sf-scope .sf-pdq__methods { display: flex; flex-direction: column; gap: 6px; }

.sf-scope .sf-pdq__method { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; cursor: pointer; font-size: var(--font-size-sm); }

.sf-scope .sf-pdq__method:has(input:checked) { border-color: var(--color-primary); }

.sf-scope .sf-pdq__method[hidden] { display: none; }

.sf-scope .sf-pdq__method[data-single] { padding: 0; border: 0; cursor: default; color: var(--color-muted); }

.sf-scope .sf-pdq__method[data-single] input { position: absolute; opacity: 0; pointer-events: none; }

.sf-scope .sf-pdq__method[data-single][data-free] .sf-pdq__method-fee { display: none; }

.sf-scope .sf-pdq__method-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.sf-scope .sf-pdq__method-name small { font-size: 12px; color: var(--color-muted); }

.sf-scope .sf-pdq__method-fee { margin-inline-start: auto; font-weight: 600; color: var(--color-text, inherit); }

.sf-scope .sf-pdq__warn { color: var(--color-danger, #b42318); }

.sf-scope .sf-pdq__more-fields > summary { cursor: pointer; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-primary); list-style: none; }

.sf-scope .sf-pdq__more-fields > summary::-webkit-details-marker { display: none; }

.sf-scope .sf-pdq__more-fields[open] > summary { margin-bottom: 10px; }

.sf-scope .sf-pdq__pays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.sf-scope .sf-pdq__pay-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; }

.sf-scope .sf-pdq__pay-opt[hidden] { display: none; }

.sf-scope .sf-pdq__pay-opt input { position: absolute; opacity: 0; pointer-events: none; }

.sf-scope .sf-pdq__pay-opt:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }

.sf-scope .sf-pdq__pay-opt:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sf-scope .sf-pdq__pay-name { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: anywhere; }

.sf-scope .sf-pdq__pay-logo { height: 18px; width: auto; max-width: 44px; object-fit: contain; flex: none; }

.sf-scope .sf-pdq__terms { margin: 0; font-size: 13px; }

.sf-scope .sf-pdq__pay { min-height: 50px; font-size: var(--font-size-md); }

.sf-scope .sf-pdq__note { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--color-muted); }

@media (max-width: 480px) {
    .sf-scope .sf-pdq__grid { grid-template-columns: 1fr; }
    .sf-scope .sf-pdq__open { flex: 1 1 100%; }
}

.sf-scope .sf-checkout__terms.is-invalid { color: var(--color-danger, #b42318); }

.sf-scope .sf-checkout__dest-note { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-warning, #b45309); }

/* A gateway shows every card brand it takes, plus its currency. On a phone
   the logo row drops under the name instead of squeezing it. */

@media (max-width: 480px) {
    .sf-scope .sf-checkout__choice { flex-wrap: wrap; }
    .sf-scope .sf-checkout__choice-logos { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 29px; margin-inline-start: 0; }
}

.sf-scope .sf-checkout__choice-logos { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-inline-start: auto; }

.sf-scope .sf-checkout__choice-cur { flex: none; padding: 2px 7px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--color-muted); }

.sf-scope .sf-checkout__summary { min-width: 0; }

.sf-scope .sf-checkout__lines { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-4); }

.sf-scope .sf-checkout__line { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm); }

.sf-scope .sf-checkout__line-name { flex: 1; min-width: 0; }

.sf-scope .sf-checkout__line-opts { display: block; font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-checkout__line-total { flex: none; margin-inline-start: auto; font-weight: var(--weight-semibold); }

.sf-scope .sf-checkout__totals,
.sf-scope .sf-order__totals { padding: 0; border: 0; border-radius: 0; background: transparent; }

.sf-scope .sf-checkout__terms {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin-block-start: var(--space-4);
    font-size: var(--font-size-sm); line-height: var(--line-base); cursor: pointer;
}

.sf-scope .sf-checkout__terms input { flex: none; width: 17px; height: 17px; margin-block-start: 2px; accent-color: var(--color-primary); cursor: pointer; }

.sf-scope .sf-checkout__termslink { font-weight: var(--weight-semibold); }

.sf-scope .sf-checkout__submit { margin-block-start: var(--space-4); }

.sf-scope .sf-checkout__secure {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin: var(--space-3) 0 0; font-size: var(--font-size-xs); color: var(--color-muted);
}

@media (min-width: 900px) {
    .sf-scope .sf-checkout { grid-template-columns: minmax(0, 1fr) 380px; }
    .sf-scope .sf-checkout__aside { position: sticky; inset-block-start: var(--space-5); }
}

/* -- order tracking -- */

.sf-scope .sf-order { display: flex; flex-direction: column; gap: var(--space-4); }

.sf-scope .sf-order__banner { margin: 0; }

.sf-scope .sf-order__card { min-width: 0; }

.sf-scope .sf-order__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.sf-scope .sf-order__ident { flex: 1; min-width: 0; }

.sf-scope .sf-order__code { margin: 0; font-size: var(--font-size-lg); font-weight: var(--weight-bold); color: var(--color-text); }

.sf-scope .sf-order__date { margin: 3px 0 0; font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-order__steps { display: flex; gap: var(--space-1); margin-block-start: var(--space-4); }

.sf-scope .sf-order__stepbar { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); }

.sf-scope .sf-order__stepbar.is-done { background: var(--color-primary); }

.sf-scope .sf-order__steplabels {
    display: flex; justify-content: space-between; gap: var(--space-2);
    margin-block-start: var(--space-2); font-size: var(--font-size-xs); color: var(--color-muted);
}

.sf-scope .sf-order__lines { display: block; margin-block-end: var(--space-4); }

.sf-scope .sf-order__line:first-child { border-top: 0; }

.sf-scope .sf-order__line .sf-cartline__opts { display: block; }

.sf-scope .sf-order__line-qty { flex: none; font-size: var(--font-size-sm); color: var(--color-muted); }

.sf-scope .sf-order__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.sf-scope .sf-order__metaitem { min-width: 0; }

.sf-scope .sf-order__metalabel { display: block; font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-order__metavalue { display: block; font-size: var(--font-size-sm); color: var(--color-text); }

/* ---- product detail (v2) ---- */

.sf-scope .sf-pd-sec { padding-block: var(--pad-section); }

.sf-scope .sf-pd {
    display: grid; align-items: start; gap: var(--space-7);
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.sf-scope .sf-pd__gallery { min-width: 0; }

.sf-scope .sf-pd-main {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border: var(--card-border); border-radius: var(--card-radius); background: var(--surface-2);
}

.sf-scope .sf-pd-main--contain { object-fit: contain; }

.sf-scope .sf-pd-main--empty { background: linear-gradient(145deg, var(--primary-soft), var(--surface-2)); }

.sf-scope .sf-pd__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.sf-scope .sf-pd-thumb {
    width: 66px; height: 66px; padding: 0; overflow: hidden; cursor: pointer;
    border: var(--border-width) solid var(--color-border); border-radius: var(--media-radius);
    background: var(--color-surface);
    transition: border-color var(--duration-base) var(--ease);
}

.sf-scope .sf-pd-thumb:hover,
.sf-scope .sf-pd-thumb.is-active { border-color: var(--color-primary); }

.sf-scope .sf-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sf-scope .sf-pd__buycol { min-width: 0; }

.sf-scope .sf-pd__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display); font-size: var(--font-size-2xl); line-height: var(--line-tight);
    font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
}

.sf-scope .sf-pd__meta { margin: 0 0 var(--space-3); font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-pd__lead { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); line-height: 1.6; }

.sf-scope .sf-pd__pricing { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }

.sf-scope .sf-pd-price { font-size: var(--font-size-xl); font-weight: var(--price-weight); font-variant-numeric: tabular-nums; }

.sf-scope .sf-pd__was { font-size: var(--font-size-sm); color: var(--color-muted); text-decoration: line-through; }

.sf-scope .sf-pd__desc { margin-bottom: var(--space-5); font-size: var(--font-size-sm); line-height: 1.7; }

.sf-scope .sf-pd__features { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.sf-scope .sf-pd__features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }

.sf-scope .sf-pd__features svg { flex: none; color: var(--color-success); }

.sf-scope .sf-pd__specs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); font-size: var(--font-size-sm); }

.sf-scope .sf-pd__specs dt { color: var(--color-muted); }

.sf-scope .sf-pd__specs dd { margin: 0; font-weight: var(--weight-medium); }

.sf-scope .sf-pd__warranty { margin: 0 0 var(--space-5); font-size: var(--font-size-xs); color: var(--color-muted); }

.sf-scope .sf-pd__options { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }

.sf-scope .sf-pd__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.sf-scope .sf-pd__qtywrap { display: inline-flex; align-items: center; gap: var(--space-3); }

.sf-scope .sf-pd__qty-label { font-size: var(--font-size-xs); color: var(--color-muted); }

/* Quick Payment: the buyer types the amount (ItemSetting_open_amount). */
.sf-scope .sf-pd__amount { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 100%; max-width: 360px; }
.sf-scope .sf-pd-amount { min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 10px); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 20px; font-weight: 700; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.sf-scope .sf-pd-amount:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; }
.sf-scope .sf-pd-amount.is-invalid { border-color: var(--color-danger); }
.sf-scope .sf-pd__amount-hint { font-size: var(--font-size-xs); color: var(--color-muted); }
.sf-scope .sf-pd__amount-msg { margin: 0; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-danger); }
.sf-scope .sf-pd-price--open { font-size: var(--font-size-lg, 20px); }

.sf-scope .sf-pd-qty {
    width: 58px; min-height: 40px; text-align: center; border: 0; background: transparent;
    font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.sf-scope .sf-pd-qty::-webkit-outer-spin-button,
.sf-scope .sf-pd-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sf-scope .sf-pd-qty:focus { outline: none; }

.sf-scope .sf-pd__enquiry-note { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: 600; }

/* ---- header chrome, canvas-matched (v2.1) ----------------------------------
   Rebuilt against the "Storefront Pages" canvas: announce strip carrying the
   language line, brand + wordmark tagline, a full-width pill search, 44px
   icon buttons and a filled cart pill, then the category row under a hairline
   with the offers link at the end. */


/* Level-2 items indent on the reading-start side in both directions. */

/* Section headings pick up the canvas display size too. */

.sf-scope .sf-container-title,
.sf-scope .sf-heading__title { font-size: var(--font-size-2xl); }

/* Quantity stepper: a bordered, overflow-hidden group whose buttons butt
   against the value — 44x48 on the product page, 40x40 in a cart line.
   (Was a padded pill with 28px round chips, which is why it read wrong.) */

.sf-scope .sf-qty,
.sf-scope .sf-pd__qty {
    display: inline-flex; align-items: center; gap: 0; padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--btn-radius);
    background: var(--color-surface);
    overflow: hidden;
}

.sf-scope .sf-pd__qty .sf-qty__btn { width: 44px; height: 48px; font-size: var(--font-size-lg); }

.sf-scope .sf-pd-qty { width: 48px; min-width: 48px; min-height: 48px; }

/* Storefront: search suggestions, category picker, breadcrumbs, load more (catalog Stage 5) */

.sf-picker { position: relative; }

.sf-picker__control { position: relative; display: flex; align-items: center; }

.sf-picker__control .sf-filter__input { flex: 1 1 auto; padding-inline-end: 30px; }

.sf-picker__clear { position: absolute; inset-inline-end: 6px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted, #777); font-size: 18px; line-height: 1; cursor: pointer; }

.sf-picker__clear:hover { background: var(--color-paper, #f5f5f5); color: var(--color-text, #111); }

.sf-picker__results { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 140; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-lg, 0 12px 32px rgb(0 0 0 / .12)); }

.sf-picker__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--color-text, #111); }

.sf-picker__option:hover, .sf-picker__option.is-active { background: var(--color-paper, #f5f5f5); }

.sf-picker__count { flex: none; font-size: 12px; color: var(--color-muted, #777); }

.sf-picker__empty { padding: 8px 10px; font-size: 13px; color: var(--color-muted, #777); }

.sf-crumbs { font-size: 13px; color: var(--color-muted, #777); }

.sf-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }

.sf-crumbs__item { display: inline-flex; align-items: center; }

.sf-crumbs__item + .sf-crumbs__item::before { content: "\203A"; margin: 0 8px; color: var(--color-border-strong, #bbb); }

[dir="rtl"] .sf-crumbs__item + .sf-crumbs__item::before { content: "\2039"; }

.sf-crumbs__link { color: inherit; text-decoration: none; }

.sf-crumbs__link:hover { color: var(--color-text, #111); text-decoration: underline; }

.sf-crumbs__current { color: var(--color-text, #111); font-weight: 600; }

.sf-pd-sec .sf-crumbs { margin-bottom: 18px; }

.sf-scope .sf-order__pay { flex-wrap: wrap; align-items: center; }

.sf-scope .sf-order__pay-btn { flex: none; }

.sf-scope .sf-order__pay-msg { margin-block-start: var(--space-2); font-weight: 600; }

.sf-scope .sf-order__pay-msg[hidden] { display: none; }

/* =====================================================================
   2. Language pill (partial/lang_pill.html) — every header + drawer.
   ===================================================================== */

/* =====================================================================
   4. Storefront forms (contact + newsletter, assets/sf-forms.js).
   ===================================================================== */

.sf-scope .sf-hp { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sf-scope .sf-contactform .sf-input { min-height: 44px; }

.sf-scope .sf-contactform__row { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.sf-scope .sf-form-status {
    margin: 0 0 var(--space-3); padding: 10px 14px;
    border-radius: var(--input-radius); background: var(--danger-soft);
    color: var(--color-danger); font-size: var(--font-size-sm); font-weight: 600;
}

.sf-scope .sf-form-success { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

.sf-scope .sf-form-success:focus { outline: none; }

.sf-scope .sf-form-success__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    background: var(--primary-soft); color: var(--color-success);
}

.sf-scope .sf-form-success__title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); }

.sf-scope .sf-form-success__text { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); color: var(--color-muted); }

.sf-scope .sf-form-success--inline .sf-form-success__icon { width: 36px; height: 36px; }

.sf-scope .sf-form-success--inline .sf-form-success__text { margin: 0; font-weight: 600; color: var(--color-text); }

.sf-scope .sf-infopage__form { margin-block-start: var(--space-6); max-inline-size: 640px; }

.sf-scope .sf-infopage__formtitle { margin: 0 0 var(--space-1); font-size: var(--font-size-xl); font-weight: 600; }

.sf-scope .sf-infopage__formintro { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-muted); }

/* Stage 4 lead: a slide's optional phone picture replaces the wide one on phones. */

@media (max-width: 640px) {
    .sf-bs-slide.sf-has-mobile,
    .au-hero__art.sf-has-mobile { background-image: var(--sf-slide-mobile) !important; }
}

/* Stage 4 lead: feature icons picked in the Designer draw at tile size. */

.sf-feature-svg { display: inline-flex; line-height: 0; }

.sf-feature-svg svg { width: 1.2em; height: 1.2em; }

/* Stage 5 M phone — storefront phone input: country dial-code picker + number
   (boxs/component/storefront/partial/phone_input.html + assets/sf-phone.js).
   The code button reuses .sf-select (or the legacy input class) so every
   component theme (Souq / Atelier / Kiosk) re-skins it; the row stays LTR. */

.sf-phone { position: relative; min-width: 0; }

.sf-phone__control { position: relative; }

.sf-phone__row { display: flex; align-items: stretch; gap: var(--space-2, 8px); }

.sf-phone .sf-phone__code {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
    width: auto; min-width: 104px; min-height: 44px; padding-inline: 12px;
    font: inherit; font-weight: var(--weight-semibold, 600); font-variant-numeric: tabular-nums;
    white-space: nowrap; color: var(--color-text); cursor: pointer; text-align: start;
}

.sf-phone .sf-phone__code[hidden] { display: none; }

.sf-phone .sf-phone__code:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sf-phone .sf-phone__code[aria-expanded="true"] { border-color: var(--color-primary); }

.sf-phone__chev { flex: none; color: var(--color-muted); }

.sf-phone .sf-phone__number { flex: 1 1 auto; min-width: 0; min-height: 44px; text-align: left; }

.sf-phone .sf-phone__number:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--primary-soft, transparent); }

.sf-phone__pop {
    position: absolute; z-index: 60; inset-inline-start: 0; top: calc(100% + 4px);
    width: min(360px, 100%); min-width: min(280px, calc(100vw - 32px)); padding: var(--space-2, 8px);
    background: var(--color-surface); color: var(--color-text);
    border: var(--border-width, 1px) solid var(--color-border); border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg);
}

.sf-phone__pop[hidden] { display: none; }

.sf-phone .sf-phone__search { min-height: 44px; }

.sf-phone__list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }

.sf-phone__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 6px 10px; border-radius: var(--input-radius, 8px);
    font-size: var(--font-size-sm, 14px); cursor: pointer;
}

.sf-phone__opt[hidden] { display: none; }

.sf-phone__opt.is-active,
.sf-phone__opt:hover { background: var(--primary-soft, var(--color-primary-soft)); }

.sf-phone__opt[aria-selected="true"] .sf-phone__opt-name { font-weight: var(--weight-semibold, 600); }

.sf-phone__opt-dial { flex: none; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sf-phone__none { margin: 8px 4px 2px; font-size: var(--font-size-sm, 14px); color: var(--color-muted); }

/* Checkout / form errors land on the visible number (the value posts from a
   hidden input); the step's error line follows the phone wrapper. */

.sf-phone.is-invalid .sf-phone__number,
.sf-field.is-invalid .sf-phone .sf-phone__number { border-color: var(--color-danger); background: var(--danger-soft); }

.sf-scope .sf-phone.is-invalid ~ .sf-checkout__err { display: block; }

@media (max-width: 480px) {
    .sf-phone .sf-phone__code { min-width: 92px; padding-inline: 10px; }
    .sf-phone__pop { width: 100%; }
}

/* Stage 5 P quick payment — Buy now on the product page (product_detail_v2 +
   the legacy product_detail), its hint / "why not yet" line, the missing-
   option highlight, and the panel's "Quick order" badge on an order. The
   quick-order modal itself styles itself (assets/sf-quickorder.js), so it
   only costs bytes on pages that show Buy now. */

.sf-scope .sf-pd__buy--quick {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3, 12px);
}

.sf-scope .sf-pd__buy--quick .sf-pd-add { width: 100%; min-height: 48px; justify-content: center; }

.sf-scope .sf-pd__buy--quick .sf-pd-buynow {
    grid-column: 1 / -1;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 52px;
    font-size: var(--font-size-md, 15px); font-weight: 700;
}

.sf-scope .sf-pd__buy--quick .sf-pd-buynow:not(.sf-btn) {
    border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--on-primary, #fff);
}

.sf-scope .sf-pd-buynow svg { flex: none; }

.sf-scope .sf-pd-buynow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.sf-scope .sf-pd-buynow.is-unavailable,
.sf-scope .sf-pd-buynow.is-unavailable:hover {
    background: var(--surface-3, var(--color-border)); color: var(--color-muted); border-color: transparent;
    box-shadow: none; cursor: not-allowed;
}

.sf-scope .sf-pd-buynow.is-busy { cursor: progress; opacity: .75; }

.sf-scope .sf-pd__buynow-hint {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--font-size-xs, 12.5px); line-height: 1.45; color: var(--color-muted);
    text-align: center;
}

.sf-scope .sf-pd__buynow-reason {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--font-size-sm, 13.5px); font-weight: 600; line-height: 1.45; color: var(--color-text);
    text-align: center;
}

.sf-scope .sf-pd__buynow-reason.is-flash { color: var(--color-danger); animation: sf-qp-nudge .32s ease; }

@keyframes sf-qp-nudge {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-4px); }
    70% { transform: translateX(4px); }
}

.sf-scope .sf-pd__field.is-missing .sf-select,
.sf-scope .sf-pd__field.is-missing select,
.sf-scope .sf-pd__field.is-missing .sf-pd__swatches {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 18%, transparent);
}

.sf-scope .sf-pd__field.is-missing .sf-pd__swatches { border: 1px solid var(--color-danger); border-radius: var(--btn-radius, 8px); padding: 4px; }

@media (max-width: 480px) {
    .sf-scope .sf-pd__buy--quick { grid-template-columns: 1fr; }
    .sf-scope .sf-pd__buy--quick .sf-pd__qtywrap { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .sf-scope .sf-pd__buynow-reason.is-flash { animation: none; }
}

/* Stage 5 O3 wizard end */

/* =====================================================================
   Stage 6G: address book — storefront account (sf-addr*), checkout chooser
   (sf-saved-addr*), panel customer page (client-addresses*).
   ===================================================================== */

.sf-scope .sf-addr-list { display: flex; flex-direction: column; gap: 10px; }

.sf-scope .sf-addr { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }

.sf-scope .sf-addr__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sf-scope .sf-addr__title { font-weight: 700; }

.sf-scope .sf-addr__line { margin: 0; font-size: var(--font-size-sm); color: var(--color-muted); }

.sf-scope .sf-addr__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }

.sf-scope .sf-addr__edit { order: -1; }

.sf-scope .sf-addr__edit[open] { order: 0; flex-basis: 100%; }

.sf-scope .sf-addr__mini { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

.sf-scope .sf-addr__mini .sf-form-message:empty { display: none; }

.sf-scope .sf-addr__remove { color: var(--color-danger); }

.sf-scope .sf-addr__edit > summary, .sf-scope .sf-addr__add > summary { list-style: none; cursor: pointer; display: inline-flex; }

.sf-scope .sf-addr__edit > summary::-webkit-details-marker, .sf-scope .sf-addr__add > summary::-webkit-details-marker { display: none; }

.sf-scope .sf-addr__edit[open] > summary { margin-bottom: 10px; }

.sf-scope .sf-addr__add { margin-top: 12px; }

.sf-scope .sf-addr__add[open] > summary { margin-bottom: 12px; }

.sf-scope .sf-addr__empty { margin: 0 0 4px; }

.sf-scope .sf-addr-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.sf-scope .sf-addr-form__grid .sf-field--wide { grid-column: 1 / -1; }

.sf-scope .sf-saved-addr { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }

.sf-scope .sf-saved-addr__opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }

.sf-scope .sf-saved-addr__opt:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }

.sf-scope .sf-saved-addr__opt input { margin-top: 3px; }

.sf-scope .sf-saved-addr__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sf-scope .sf-saved-addr__title { font-weight: 650; }

.sf-scope .sf-saved-addr__line { font-size: var(--font-size-sm); color: var(--color-muted); }

.sf-scope .sf-saved-addr__save { margin-top: 12px; }

.sf-scope .sf-saved-addr__save[hidden] { display: none; }

@media (max-width: 560px) {
    .sf-scope .sf-addr-form__grid { grid-template-columns: minmax(0, 1fr); }
}