/* Preview theme system: one semantic token layer for every customer surface. */
:root{
  color-scheme:light;
  --background:#fff;--surface:#fff;--surface-secondary:#f5f5f5;--text-primary:#111;--text-secondary:#5e5e5e;--text-muted:#767676;--text-price:#111;--text-link:#1a4f84;--border:#e2e2e2;--border-strong:#aaa;--input-background:#fff;--input-placeholder:#777;--button-background:#111;--button-text:#fff;--button-hover:#303030;--button-disabled:#e7e7e7;--button-disabled-text:#5e5e5e;--card-background:#fff;--card-hover:#f5f5f5;--badge-background:#f5f5f5;--badge-text:#222;--badge-border:#a8a8a8;--success:#34783c;--warning:#a65d00;--error:#b53c39;--focus-ring:#216bc2;--overlay:rgba(0,0,0,.48);--shadow:0 20px 60px rgba(0,0,0,.14);
  /* Source aliases stay semantic: the original light layout remains white,
     while dark mode gets its colours only from the token set below. */
  --sf-ink:var(--text-primary);--sf-paper:var(--surface);--sf-white:var(--surface);--sf-layer:var(--surface-secondary);--sf-soft:var(--surface-secondary);--sf-cream:var(--surface);--sf-night:var(--background);--sf-night-2:var(--surface);--sf-night-3:var(--surface);--sf-line:var(--border);--sf-muted:var(--text-secondary);--sf-graphite:var(--surface);--sf-graphite-2:var(--surface-secondary);--sf-silver:var(--text-muted);--sf-silver-soft:rgba(118,118,118,.32);--sf-fog:var(--surface-secondary);--sf-fog-2:var(--surface-secondary);--sf-red:#e63a2e;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --background:#0b0d10;--surface:#15181c;--surface-secondary:#1d2126;--text-primary:#f7f8fa;--text-secondary:#c7cbd1;--text-muted:#a2a8b1;--text-price:#fff;--text-link:#9ac7ff;--border:#4b525c;--border-strong:#77818d;--input-background:#111419;--input-placeholder:#aeb4bd;--button-background:#fff;--button-text:#111;--button-hover:#e7e7e7;--button-disabled:#343941;--button-disabled-text:#b8bec7;--card-background:#181c21;--card-hover:#242a31;--badge-background:#252a31;--badge-text:#f7f8fa;--badge-border:#606a76;--success:#8fe873;--warning:#f2c94c;--error:#ffaaa6;--focus-ring:#82b9ff;--overlay:rgba(0,0,0,.76);--shadow:0 22px 70px rgba(0,0,0,.52);
  /* Map the storefront's original light design variables to the same semantic
     roles.  This preserves every component's layout and hierarchy; dark mode
     changes contrast values only. */
  --sf-ink:var(--text-primary);--sf-paper:var(--surface);--sf-white:var(--surface);--sf-layer:var(--surface-secondary);--sf-soft:var(--surface-secondary);--sf-cream:var(--surface);--sf-night:var(--background);--sf-night-2:#111419;--sf-night-3:var(--surface);--sf-line:var(--border);--sf-muted:var(--text-secondary);--sf-graphite:var(--surface);--sf-graphite-2:var(--surface-secondary);--sf-silver:#aeb4bd;--sf-silver-soft:rgba(174,180,189,.32);--sf-fog:var(--surface-secondary);--sf-fog-2:#242a31;--sf-red:#ff756c;
}
html,body{background:var(--background)!important;color:var(--text-primary)}
body.storefront-ready,.sf-site,.sf-main{background-color:var(--background)!important}
/* Brand header stays photographic in either mode; all interactive states use tokens. */
.sf-icon-button:focus-visible,.sf-theme-toggle:focus-visible,.sf-theme-choices button:focus-visible,.sf-theme-mobile-choices button:focus-visible{outline:2px solid #78aefe;outline-offset:3px}
.sf-theme-control{position:relative;display:inline-flex}.sf-theme-toggle{font:22px/1 Arial,sans-serif}.sf-theme-popover{position:absolute;right:0;top:calc(100% + 10px);z-index:260;width:190px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-5px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s}.sf-theme-popover.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.sf-theme-popover p,.sf-theme-mobile p{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:3px 5px 8px;font:700 11px/1.4 'DM Mono',monospace;letter-spacing:.08em}.sf-theme-popover p small,.sf-theme-mobile p small{color:var(--text-secondary);font:inherit;letter-spacing:0}.sf-theme-choices,.sf-theme-mobile-choices{display:grid;gap:3px}.sf-theme-choices button,.sf-theme-mobile-choices button{width:100%;min-height:36px;border:0;border-radius:8px;background:transparent;color:var(--text-primary);display:grid;grid-template-columns:21px 1fr auto;align-items:center;gap:8px;padding:0 8px;text-align:left;font:800 13px/1 'PingFang TC','Noto Sans TC',sans-serif;cursor:pointer}.sf-theme-choices button:hover,.sf-theme-mobile-choices button:hover{background:var(--surface-secondary)}.sf-theme-choices button>span,.sf-theme-mobile-choices button>span{font:18px/1 Arial,sans-serif}.sf-theme-choices button b,.sf-theme-mobile-choices button b{visibility:hidden;color:var(--success);font-size:13px}.sf-theme-choices button.is-active b,.sf-theme-mobile-choices button.is-active b{visibility:visible}
.sf-theme-mobile{display:none}
/* Global storefront / catalogue / cart / product modal surfaces. */
html[data-theme="light"] .sf-site{background:var(--background)}
html[data-theme="light"] .sf-main{background:linear-gradient(180deg,rgba(109,101,89,.07),rgba(245,243,238,0) 150px),var(--background)}
html[data-theme="light"] .sf-section-title,html[data-theme="light"] .sf-home-head,html[data-theme="light"] .sf-brand-statement,html[data-theme="light"] .sf-brand-link,html[data-theme="light"] .sf-pit-product-row .sf-card{color:var(--text-primary)}
html[data-theme="light"] .sf-home-head p,html[data-theme="light"] .sf-brand-link small{color:var(--text-secondary)}
html[data-theme="light"] .sf-brand-rail{background:var(--surface);border-color:var(--border);box-shadow:0 20px 54px rgba(33,29,23,.08)}
html[data-theme="light"] .sf-brand-statement,html[data-theme="light"] .sf-brand-link{border-color:var(--border)}
html[data-theme="light"] .sf-pit-product-row .sf-card,html[data-theme="light"] .sf-card{background:var(--surface);border-color:var(--border);color:var(--text-primary);box-shadow:none}
html[data-theme="light"] .sf-media{background:var(--surface-secondary)}
html[data-theme="light"] .sf-card-body{background:var(--surface);color:var(--text-primary)}
html[data-theme="light"] .sf-home-category,html[data-theme="light"] .sf-home-products{background:var(--surface);color:var(--text-primary);border-color:var(--border)}
html[data-theme="light"] .sf-home-products h3{color:var(--text-primary)}
html[data-theme="light"] .sf-modal-card,html[data-theme="light"] .sf-cart-drawer{background:var(--surface);color:var(--text-primary)}
html[data-theme="light"] .sf-modal-media{background:var(--surface-secondary)}
html[data-theme="light"] .sf-modal-close,html[data-theme="light"] .sf-modal-share,html[data-theme="light"] .sf-cart-close,html[data-theme="light"] .sf-cart-footer{background:var(--surface);color:var(--text-primary);border-color:var(--border)}
html[data-theme="light"] .sf-cart-headline,html[data-theme="light"] .sf-cart-footer{border-color:var(--border)}
html[data-theme="light"] .sf-cart-checkout{background:var(--button-background);color:var(--button-text)}
html[data-theme="light"] .sf-footer{background:#171716;border-color:#171716}
/* Checkout uses the same tokens, including the otherwise light-native formal layout. */
.checkout-app.active,.checkout-app .body,.checkout-app .hero,.checkout-app .catalog-launch-wrap,.checkout-app .mode-tabs,.checkout-app .prog-wrap{background:var(--background)!important;color:var(--text-primary)}
.checkout-app.active{color:var(--text-primary)!important}.checkout-app .hero{border-color:var(--border)!important}.checkout-app .hero-title,.checkout-app .custom-guide-title{color:var(--text-primary)!important}.checkout-app .hero-sub,.checkout-app .field>label,.checkout-app .success-sub,.checkout-app .success-detail span{color:var(--text-secondary)!important}.checkout-app .card,.checkout-app .cart-box,.checkout-app .sf-checkout-summary,.checkout-app .success-detail{background:var(--surface)!important;color:var(--text-primary)!important;border-color:var(--border)!important}.checkout-app .inp,.checkout-app .sel-wrap select,.checkout-app .custom-guide,.checkout-app #pricePreview,.checkout-app .bank-box,.checkout-app #couponField{background:var(--input-background)!important;color:var(--text-primary)!important;border-color:var(--border)!important}.checkout-app .btn-next,.checkout-app .btn-full,.checkout-app .catalog-preview-buy{background:var(--button-background)!important;color:var(--button-text)!important;border-color:var(--button-background)!important}.checkout-app .btn-back,.checkout-app .btn-add,.checkout-app .catalog-launch,.checkout-app #couponField button{background:var(--surface)!important;color:var(--text-primary)!important;border-color:var(--border)!important}.checkout-app .mode-tab.active,.checkout-app .prog-dot.done,.checkout-app .prog-dot.active,.checkout-app .pay-opt.selected{background:var(--button-background)!important;border-color:var(--button-background)!important;color:var(--button-text)!important}.checkout-app .pay-opt{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-primary)!important}.checkout-app .pay-opt:hover{background:var(--surface-secondary)!important}.checkout-app .prog-dot.pending{background:var(--surface)!important;color:var(--text-secondary)!important}.checkout-app .prog-line{background:var(--border)!important}.checkout-app .prog-line.done{background:var(--button-background)!important}
@media(min-width:980px){html[data-theme="dark"] body:has(.checkout-app.active),html[data-theme="dark"] .checkout-app.active{background:linear-gradient(90deg,var(--background) 0,var(--background) 58%,#111 58%,#111 100%)!important}html[data-theme="dark"] .checkout-app .sf-checkout-summary{background:#111!important;border-left-color:var(--border)!important}html[data-theme="light"] body:has(.checkout-app.active),html[data-theme="light"] .checkout-app.active{background:linear-gradient(90deg,var(--background) 0,var(--background) 58%,var(--surface-secondary) 58%,var(--surface-secondary) 100%)!important}html[data-theme="light"] .checkout-app .sf-checkout-summary{background:var(--surface-secondary)!important}}
html[data-theme="dark"] .sf-card-body{background:#1c1c1b;color:var(--text-primary)}html[data-theme="dark"] .sf-home-category,html[data-theme="dark"] .sf-home-products{background:#171717;color:var(--text-primary)}html[data-theme="dark"] .sf-home-products h3{color:var(--text-primary)}html[data-theme="dark"] .sf-footer{background:#050505;border-color:#2f2f2d}
.sf-theme-choices button.is-active::after,.sf-theme-mobile-choices button.is-active::after{content:'✓';color:var(--success);font-size:14px;font-weight:900}.sf-theme-choices button.is-active b,.sf-theme-mobile-choices button.is-active b{display:none}
@media(max-width:719px){.sf-theme-control{display:none}.sf-theme-mobile{display:grid;gap:5px;margin:14px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.16)}.sf-theme-mobile p{color:#fff;margin:0 4px 5px}.sf-theme-mobile p small{color:rgba(255,255,255,.62)}.sf-theme-mobile-choices button{min-height:43px;color:#fff;border:1px solid transparent}.sf-theme-mobile-choices button.is-active{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.1)}.sf-theme-mobile-choices button:hover{background:rgba(255,255,255,.12)}html[data-theme="light"] .sf-mobile-menu-panel{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-primary)!important;box-shadow:24px 0 60px rgba(30,28,24,.2)!important}html[data-theme="light"] .sf-mobile-menu-head{border-color:var(--border)!important}html[data-theme="light"] .sf-mobile-menu-head span,html[data-theme="light"] .sf-mobile-nav-link,html[data-theme="light"] .sf-mobile-nav-group summary,html[data-theme="light"] .sf-theme-mobile p{color:var(--text-primary)!important}html[data-theme="light"] .sf-mobile-menu-close{background:var(--surface-secondary)!important;border-color:var(--border)!important;color:var(--text-primary)!important}html[data-theme="light"] .sf-mobile-nav-link,html[data-theme="light"] .sf-mobile-nav-group,html[data-theme="light"] .sf-theme-mobile{border-color:var(--border)!important}html[data-theme="light"] .sf-mobile-nav-link b,html[data-theme="light"] .sf-theme-mobile p small{color:var(--text-secondary)!important}html[data-theme="light"] .sf-theme-mobile-choices button{color:var(--text-primary)!important}html[data-theme="light"] .sf-theme-mobile-choices button.is-active{border-color:var(--border)!important;background:var(--surface-secondary)!important}html[data-theme="light"] .sf-theme-mobile-choices button:hover{background:var(--surface-secondary)!important}}

/*
 * Semantic component bindings
 * ---------------------------
 * Components below consume only the role tokens defined above.  Keeping this
 * layer separate from the storefront's original visual CSS prevents a new
 * screen from inheriting a hard-coded light colour in dark mode.
 */
html[data-theme] .sf-main,
html[data-theme] .sf-lookup-page{color:var(--text-primary)!important}

/* Text hierarchy: primary copy, supporting copy, prices and links. */
html[data-theme] :is(.sf-section-title,.sf-title,.sf-home-head,.sf-home-head h3,.sf-home-products h3,.sf-category-section-head,.sf-directory-head,.sf-directory-tile,.sf-category-tile,.sf-brand-statement,.sf-brand-link,.sf-inquiry-name,.sf-inquiry-title,.sf-lookup-title,.sf-cart-title,.sf-modal-title){color:var(--text-primary)!important}
html[data-theme] :is(.sf-count,.sf-home-kicker,.sf-home-head p,.sf-hero-copy,.sf-card-category,.sf-category-empty,.sf-directory-note,.sf-inquiry-copy,.sf-state span,.sf-no-image){color:var(--text-secondary)!important}
html[data-theme] :is(.sf-price,.sf-cart-price,.sf-modal-price,.sf-summary-total,.sf-total-price){color:var(--text-price)!important}
html[data-theme] :is(.sf-home-more,.sf-brand-link a,.sf-lookup-page a,.sf-cart-drawer a,.sf-modal-card a){color:var(--text-link)!important;border-color:currentColor!important}

/* Product catalogue and card surfaces. Images deliberately retain their own pixels. */
html[data-theme] :is(.sf-home-category,.sf-home-products,.sf-state){background:var(--background)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
html[data-theme] .sf-home-products .sf-card,
html[data-theme] .sf-home-products .sf-card-body{background:transparent!important;color:var(--text-primary)!important}
html[data-theme] .sf-home-products .sf-card-name,
html[data-theme] .sf-home-products .sf-price{color:var(--text-primary)!important}
html[data-theme] .sf-home-products .sf-price{color:var(--text-price)!important}
html[data-theme] :is(.sf-card,.sf-feature-products .sf-card,.sf-editorial-product .sf-card){background:var(--card-background)!important;border-color:var(--border)!important;color:var(--text-primary)!important;box-shadow:none!important}
html[data-theme] :is(.sf-card-body,.sf-feature-products .sf-card-body){background:var(--card-background)!important;color:var(--text-primary)!important}
html[data-theme] :is(.sf-card-name,.sf-pit-product-row .sf-card-name){color:var(--text-primary)!important}
html[data-theme] :is(.sf-price,.sf-pit-product-row .sf-price){color:var(--text-price)!important}
html[data-theme] :is(.sf-card,.sf-category-tile,.sf-directory-tile,.sf-inquiry-row):hover{background:var(--card-hover)!important;border-color:var(--border-strong)!important}
html[data-theme] .sf-card:hover .sf-media{filter:brightness(1.035) saturate(1.02)!important}
html[data-theme] :is(.sf-media,.sf-pit-product-row .sf-media,.sf-feature-products .sf-media){background:var(--surface-secondary)!important}
html[data-theme] .sf-media-portrait{background:#fff!important}

/* Product availability badges have their own contrast-safe surface. */
html[data-theme] .sf-badge{background:var(--badge-background)!important;color:var(--badge-text)!important;border-color:var(--badge-border)!important;box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16)!important}
html[data-theme] .sf-badge::after{border-color:color-mix(in srgb,var(--badge-text) 26%,transparent)!important}
html[data-theme] .sf-badge::before{background:var(--warning)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 22%,transparent),0 0 16px color-mix(in srgb,var(--warning) 58%,transparent)!important}
html[data-theme] .sf-badge.stock{background:color-mix(in srgb,var(--success) 22%,var(--card-background))!important;border-color:color-mix(in srgb,var(--success) 65%,var(--border))!important;color:var(--text-primary)!important}
html[data-theme] .sf-badge.stock::before{background:var(--success)!important}
html[data-theme] .sf-sold-out-mark{background:var(--button-disabled)!important;color:var(--button-disabled-text)!important}

/* Form, button, focus, hover and disabled states. */
html[data-theme] :is(input,select,textarea){background:var(--input-background)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
html[data-theme] :is(input,textarea)::placeholder{color:var(--input-placeholder)!important;opacity:1}
html[data-theme] :is(input,select,textarea):focus{border-color:var(--focus-ring)!important;outline:2px solid color-mix(in srgb,var(--focus-ring) 38%,transparent)!important;outline-offset:1px}
html[data-theme] :is(.sf-cart-checkout,.sf-inquiry-button,.sf-inquiry-action,.sf-state-retry,.sf-buy,.sf-modal-buy,.sf-modal-add,.sf-checkout-button){background:var(--button-background)!important;border-color:var(--button-background)!important;color:var(--button-text)!important}
html[data-theme] :is(.sf-cart-checkout,.sf-inquiry-button,.sf-inquiry-action,.sf-state-retry,.sf-buy,.sf-modal-buy,.sf-modal-add,.sf-checkout-button):hover{background:var(--button-hover)!important;border-color:var(--button-hover)!important}
html[data-theme] :is(button,input,select,textarea):disabled,
html[data-theme] :is(button,input,select,textarea)[aria-disabled="true"]{background:var(--button-disabled)!important;border-color:var(--button-disabled)!important;color:var(--button-disabled-text)!important;opacity:1!important;cursor:not-allowed}
/* A checkout request is disabled only to prevent duplicate submission: it remains
   the primary action and keeps its spinner centred and visible in both themes. */
html[data-theme] :is(.sf-buy,.sf-cart-checkout)[aria-busy="true"]{display:flex!important;align-items:center!important;justify-content:center!important;background:var(--button-background)!important;border-color:var(--button-background)!important;color:var(--button-text)!important;cursor:wait!important}
html[data-theme] :is(.sf-buy,.sf-cart-checkout)[aria-busy="true"] .sf-buy-spinner{flex:0 0 auto!important;margin:0!important;border-color:color-mix(in srgb,currentColor 34%,transparent)!important;border-top-color:currentColor!important}
html[data-theme] :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:3px}

/* Navigation, modals, cart, empty states and non-product cards. */
html[data-theme] :is(.sf-nav-dropdown,.sf-cart-drawer,.sf-modal-card,.sf-lookup-card,.sf-inquiry,.sf-feature-panel,.sf-editorial-copy,.sf-wide-banner-copy){background:var(--surface)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
html[data-theme] :is(.sf-nav-dropdown button,.sf-modal-close,.sf-modal-share,.sf-cart-close,.sf-cart-line,.sf-cart-footer,.sf-site-pill){color:var(--text-primary)!important;border-color:var(--border)!important}
html[data-theme] .sf-cart-footer{background:var(--surface)!important}
html[data-theme] :is(.sf-modal-close,.sf-modal-share,.sf-cart-close){background:var(--surface-secondary)!important;color:var(--text-primary)!important}
html[data-theme] :is(.sf-nav-dropdown button,.sf-modal-close,.sf-modal-share,.sf-cart-close):hover{background:var(--surface-secondary)!important;color:var(--text-primary)!important}
html[data-theme] :is(.sf-cart-headline,.sf-cart-footer,.sf-cart-line,.sf-modal-head,.sf-modal-footer,.sf-section-head){border-color:var(--border)!important}
html[data-theme] :is(.sf-inquiry-row,.sf-site-pill){background:var(--surface)!important;color:var(--text-primary)!important;border-color:var(--border)!important}
html[data-theme] .sf-spinner{border-color:var(--border)!important;border-top-color:var(--text-primary)!important}
html[data-theme] .sf-state strong{color:var(--text-primary)!important}
html[data-theme] :is(.sf-catalog-skeleton-media,.sf-catalog-skeleton-line){background:var(--surface-secondary)!important}

/* Checkout semantic roles. */

/* Checkout's early loading/error shell renders before the regular checkout cards. */
html[data-theme].sf-fast-pending .checkout-app.active{background:var(--background)!important;color:var(--text-primary)!important}
html[data-theme].sf-fast-pending .checkout-app.active>.sf-fast-loading{background:var(--surface)!important;color:var(--text-secondary)!important}
html[data-theme].sf-fast-pending .sf-fast-loading strong{color:var(--text-primary)!important}
html[data-theme].sf-fast-pending .sf-fast-loading #sfFastLoadingRetry{background:var(--button-background)!important;border-color:var(--button-background)!important;color:var(--button-text)!important}
html[data-theme].sf-fast-pending .sf-fast-loading #sfFastLoadingRetry:hover{background:var(--button-hover)!important;border-color:var(--button-hover)!important}

/* Checkout uses source markup and some inline styles.  Bind every text and
   calculation tier to the same role tokens so the two-column desktop layout
   and one-column mobile layout keep their original structure in both themes. */
html[data-theme] .checkout-app :is(.card-title,.sf-checkout-summary-title,.sf-checkout-summary-name,.sf-checkout-summary-price,.sf-checkout-totals div,.sf-checkout-totals strong,.sf-checkout-totals .total span,.sf-checkout-totals .total strong,.prog-lbl.active){color:var(--text-primary)!important}
html[data-theme] .checkout-app :is(.sf-checkout-summary-meta,.sf-checkout-summary-price small,.sf-checkout-totals span,.prog-lbl,#couponField label,#couponMsg){color:var(--text-secondary)!important}
html[data-theme] .checkout-app :is(.sf-checkout-summary-item,.sf-checkout-totals,.sf-summary-coupon){border-color:var(--border)!important}
html[data-theme] .checkout-app #paymentNotice{background:color-mix(in srgb,var(--error) 14%,var(--surface))!important;border-color:color-mix(in srgb,var(--error) 62%,var(--border))!important;color:var(--text-primary)!important}
html[data-theme] .checkout-app #paymentNotice *{color:inherit!important}
/* The confirmation review is rendered by the formal checkout runtime.  Its
   source stylesheet is light-first, so bind the entire review surface to the
   same semantic palette when the shopper chooses night mode. */
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .checkout-review{background:var(--surface)!important;border-color:var(--border)!important;box-shadow:0 18px 50px rgba(0,0,0,.32)!important}
/* The legacy fast-checkout rule makes the review card itself white. The
   review owns its dark surface, so leave its parent transparent in night
   mode instead of leaving a light rectangular halo around it. */
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app #s4 .card{background:transparent!important}
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-section+.review-section,
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-row,
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-section:last-child .review-row:last-child{border-color:var(--border)!important}
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-section h3{color:var(--accent)!important}
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-row span{color:var(--text-muted)!important}
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-row strong,
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-section:last-child .review-row:last-child span,
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app .review-section:last-child .review-row:last-child strong{color:var(--text-primary)!important}
html[data-theme] .checkout-app :is(.pay-opt .pay-label,.pay-opt.selected .pay-label){color:var(--text-primary)!important}
html[data-theme] .checkout-app :is(.pay-opt .pay-sub,.pay-opt.selected .pay-sub){color:var(--text-secondary)!important}
html[data-theme] .checkout-app .pay-opt.selected :is(.pay-label,.pay-sub){color:var(--button-text)!important}
/* The checkout asset is a black mark on a white bitmap.  Invert only the
   image, then screen it over the dark surface so the bitmap white disappears
   and the Raven mark remains clearly visible. */
html[data-theme="dark"] .checkout-app .brand-logo-box{mix-blend-mode:screen!important}
html[data-theme="dark"] .checkout-app .brand-logo{filter:invert(1)!important}
html[data-theme] .checkout-app :is(#ctContactNotice,#stockReservationError,#payErr,.show-err){background:color-mix(in srgb,var(--warning) 14%,var(--surface))!important;border-color:color-mix(in srgb,var(--warning) 62%,var(--border))!important;color:var(--text-primary)!important}
html[data-theme] .checkout-app :is(#ctContactNotice,#stockReservationError,#payErr,.show-err) *{color:inherit!important}
html[data-theme="dark"] body.storefront-fast-checkout,
html[data-theme="dark"] body.storefront-fast-checkout:has(.checkout-app.active),
html[data-theme="dark"] body.storefront-fast-checkout .checkout-app.active{background:var(--background)!important}
html[data-theme="dark"] .checkout-app :is(.mode-tabs,.prog-wrap,.sf-checkout-progress,.body){background:var(--background)!important;border-color:var(--border)!important}
html[data-theme="dark"] .checkout-app .sf-checkout-summary{background:var(--surface)!important;border-color:var(--border)!important}
html[data-theme="dark"] .checkout-app .sf-checkout-step :is(span,strong,small){color:var(--text-secondary)!important}
html[data-theme="dark"] .checkout-app .sf-checkout-step.is-active :is(span,strong,small),
html[data-theme="dark"] .checkout-app .sf-checkout-step.is-done :is(span,strong,small){color:var(--text-primary)!important}
html[data-theme="dark"] .checkout-app .sf-checkout-step.is-active span,
html[data-theme="dark"] .checkout-app .sf-checkout-step.is-done span{background:var(--button-background)!important;border-color:var(--button-background)!important;color:var(--button-text)!important}

/* The recipient form is a page section, not a second card.  Keep the input
   surfaces and their borders, but remove the large tinted panel behind them. */
html[data-theme] .checkout-app #s3>.card{background:transparent!important;border-color:transparent!important;box-shadow:none!important}

/* Payment choices, coupon and navigation already own their individual
   surfaces.  Keep the stage wrapper transparent so night mode does not draw
   a second, oversized rectangle behind the actual controls. */
html[data-theme] body.storefront-fast-checkout .checkout-app #s2>.card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Search keeps its icon and text on the same semantic foreground token.
   The original hero rule made the icon white even after the light search
   surface opened, which left it invisible against the white field. */
html[data-theme] .sf-search{color:var(--text-primary)!important}
html[data-theme] .sf-search svg{color:currentColor!important;stroke:currentColor!important}
html[data-theme] .sf-search input{color:var(--text-primary)!important}
html[data-theme] .sf-search input::placeholder{color:var(--input-placeholder)!important;opacity:1!important}
html[data-theme="dark"] .sf-hero-search:not(:focus-within){color:var(--text-primary)!important}

/* Cart empty state is rendered after the drawer mounts, so it must not inherit
   the storefront's fixed ink values.  Keep the message and supporting copy in
   the same two text tiers as the rest of the drawer. */
html[data-theme] .sf-cart-empty{color:var(--text-secondary)!important}
html[data-theme] .sf-cart-empty strong{color:var(--text-primary)!important}
html[data-theme] .sf-cart-empty span{color:var(--text-secondary)!important}

/* In dark mode, every inverted primary action uses the exact same pure white
   as the light storefront -- never a warm white or tinted grey. */
html[data-theme="dark"] :is(.sf-cart-checkout,.sf-buy,.sf-modal-buy,.sf-modal-add,.sf-checkout-button){background:#fff!important;border-color:#fff!important;color:#111!important}

/* Product detail: the light mode remains Raven's original clean white
   treatment.  In dark mode, the media frame and information panel share the
   same deep surface, and bitmap controls are inverted for reliable contrast. */
html[data-theme="light"] :is(.sf-modal-card,.sf-modal-media,.sf-modal-info){background:#fff!important}
html[data-theme="dark"] .sf-modal-media{background:var(--surface)!important}
html[data-theme="dark"] .sf-modal-info{background:var(--surface)!important;color:var(--text-primary)!important}
html[data-theme="dark"] :is(.sf-modal-share,.sf-modal-close,.sf-cart-add){background:var(--surface-secondary)!important;border-color:var(--border)!important;color:var(--text-primary)!important}
html[data-theme="dark"] :is(.sf-modal-share img,.sf-cart-add img){filter:brightness(0) invert(1)!important}
html[data-theme="dark"] .sf-option select{background-color:var(--input-background)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23f7f8fa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;background-size:18px 18px!important}
html[data-theme="light"] .sf-option select{background-color:var(--input-background)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 13px center!important;background-size:18px 18px!important}

/* Cart quantity controls are inserted dynamically, so bind their inline
   legacy markup back to the shared component tokens in both themes. */
html[data-theme] #sfCartList [data-cart-qty]{display:inline-grid!important;place-items:center!important;width:32px!important;height:32px!important;padding:0!important;border:1px solid var(--border)!important;border-radius:6px!important;background:var(--surface-secondary)!important;color:var(--text-primary)!important;font-size:20px!important;font-weight:800!important;line-height:1!important}
html[data-theme] #sfCartList [data-cart-qty]:hover{background:var(--card-hover)!important;border-color:var(--border-strong)!important}
html[data-theme] #sfCartList [data-cart-qty] + strong{color:var(--text-primary)!important}
html[data-theme="dark"] .sf-cart-count{background:#fff!important;color:#111!important;border-color:var(--surface)!important}

/* Mobile navigation must use the same roles instead of fixed white-on-black values. */
@media(max-width:900px){
  html[data-theme] .sf-mobile-menu-panel{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-primary)!important}
  html[data-theme] :is(.sf-mobile-menu-head span,.sf-mobile-nav-link,.sf-mobile-nav-group summary,.sf-theme-mobile p,.sf-theme-mobile-choices button){color:var(--text-primary)!important}
  html[data-theme] :is(.sf-mobile-nav-link,.sf-mobile-nav-group,.sf-theme-mobile){border-color:var(--border)!important}
  html[data-theme] :is(.sf-mobile-menu-close,.sf-theme-mobile-choices button.is-active){background:var(--surface-secondary)!important;border-color:var(--border)!important;color:var(--text-primary)!important}
  html[data-theme] .sf-theme-mobile p small{color:var(--text-secondary)!important}
  html[data-theme] :is(.sf-mobile-nav-group summary b,.sf-mobile-nav-link b){color:var(--text-secondary)!important}
  html[data-theme] .sf-mobile-nav-section-title{color:var(--text-primary)!important;border-top-color:var(--border)!important}
}

/* A three-step payment progress row must stay legible at phone widths.  The
   number becomes its own line and the labels can wrap instead of being
   squeezed behind absolutely positioned dots. */
@media(max-width:719px){
  html[data-theme] body.storefront-fast-checkout .sf-checkout-step{min-height:66px;padding:6px 4px 9px!important;text-align:center!important}
  html[data-theme] body.storefront-fast-checkout .sf-checkout-step span{position:static!important;margin:0 auto 5px!important}
  html[data-theme] body.storefront-fast-checkout .sf-checkout-step strong{font-size:11px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  html[data-theme] body.storefront-fast-checkout .sf-checkout-summary-name{overflow-wrap:anywhere!important;word-break:normal!important}
}

/* The light setting preserves Raven Select's established white storefront.
   Header artwork remains owned by the storefront; page and component surfaces
   use the same semantic roles as dark mode. */
html[data-theme="light"],html[data-theme="light"] body{background:var(--bg-page)!important}
html[data-theme="light"] :is(.sf-site,.sf-main){background:var(--bg-page)!important;color:var(--text-primary)!important}
html[data-theme="light"] :is(.sf-home-category,.sf-home-products){background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
html[data-theme="light"] .sf-home-products .sf-card{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text-primary)!important}
html[data-theme="light"] .sf-home-products .sf-card-body{background:transparent!important;color:var(--text-primary)!important}
html[data-theme="light"] .sf-home-products :is(.sf-card-name,.sf-price){color:var(--text-primary)!important}
html[data-theme="light"] .sf-home-products .sf-price{color:var(--text-price)!important}
html[data-theme="light"] .sf-home-products .sf-card:hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
html[data-theme="light"] :is(.sf-card,.sf-feature-products .sf-card){background:var(--card-background)!important;border-color:var(--border-default)!important;color:var(--text-primary)!important;box-shadow:none!important}
html[data-theme="light"] :is(.sf-card-body,.sf-feature-products .sf-card-body){background:var(--card-background)!important;color:var(--text-primary)!important}
html[data-theme="light"] :is(.sf-modal-card,.sf-cart-drawer,.sf-cart-footer){background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
html[data-theme="light"] .checkout-app :is(.body,.hero,.card,.cart-box,.sf-checkout-summary,.success-detail){background:var(--bg-surface)!important;color:var(--text-primary)!important}
@media(max-width:719px){.sf-theme-control{display:inline-flex!important}.sf-theme-mobile{display:none!important}}

/*
 * Canonical design tokens
 * -----------------------
 * This is the single public colour contract for the Preview.  Older storefront
 * variables below it are aliases only; components must bind to semantic roles,
 * never to a literal light or dark colour.  The explicit roles make the light
 * version retain Raven's white storefront while giving dark mode equal visual
 * hierarchy instead of merely replacing the page background.
 */
:root{
  --bg-page:#ffffff;
  --bg-surface:#ffffff;
  --bg-elevated:#f5f5f5;
  --text-primary:#111111;
  --text-secondary:#5e5e5e;
  --text-muted:#767676;
  --text-inverse:#ffffff;
  --border-default:#e2e2e2;
  --border-strong:#aaaaaa;
  --accent:#e63a2e;
  --success:#34783c;
  --info:#2463a5;
  --warning:#a65d00;
  --danger:#b53c39;
  --button-primary-bg:#111111;
  --button-primary-text:#ffffff;
  --button-secondary-bg:#ffffff;
  --button-secondary-text:#111111;
  --input-bg:#ffffff;
  --input-text:#111111;
  --input-placeholder:#767676;
  --option-selected-bg:#f5f5f5;
  --option-selected-text:#111111;
  --background:var(--bg-page);
  --surface:var(--bg-surface);
  --surface-secondary:var(--bg-elevated);
  --text-price:var(--text-primary);
  --text-link:var(--accent);
  --border:var(--border-default);
  --input-background:var(--input-bg);
  --button-background:var(--button-primary-bg);
  --button-text:var(--button-primary-text);
  --button-hover:color-mix(in srgb,var(--button-primary-bg) 82%,var(--button-primary-text));
  --button-disabled:var(--bg-elevated);
  --button-disabled-text:var(--text-muted);
  --card-background:var(--bg-surface);
  --card-hover:var(--bg-elevated);
  --badge-background:var(--bg-elevated);
  --badge-text:var(--text-primary);
  --badge-border:var(--border-strong);
  --error:var(--danger);
  --focus-ring:var(--accent);
  --sf-ink:var(--text-primary);
  --sf-paper:var(--bg-surface);
  --sf-white:var(--bg-surface);
  --sf-layer:var(--bg-elevated);
  --sf-soft:var(--bg-elevated);
  --sf-cream:var(--bg-surface);
  --sf-night:var(--bg-page);
  --sf-night-2:var(--bg-surface);
  --sf-night-3:var(--bg-surface);
  --sf-line:var(--border-default);
  --sf-muted:var(--text-secondary);
  --sf-graphite:var(--bg-surface);
  --sf-graphite-2:var(--bg-elevated);
  --sf-silver:var(--text-muted);
  --sf-fog:var(--bg-elevated);
  --sf-fog-2:var(--bg-elevated);
  --sf-red:var(--accent);
}

html[data-theme="dark"]{
  --bg-page:#0b0d10;
  --bg-surface:#15181c;
  --bg-elevated:#1d2126;
  --text-primary:#f7f8fa;
  --text-secondary:#c7cbd1;
  --text-muted:#aeb4bd;
  --text-inverse:#111111;
  --border-default:#4b525c;
  --border-strong:#77818d;
  --accent:#ff756c;
  --success:#8fe873;
  --info:#9ac7ff;
  --warning:#f2c94c;
  --danger:#ffaaa6;
  --button-primary-bg:#ffffff;
  --button-primary-text:#111111;
  --button-secondary-bg:#1d2126;
  --button-secondary-text:#f7f8fa;
  --input-bg:#111419;
  --input-text:#f7f8fa;
  --input-placeholder:#aeb4bd;
  --option-selected-bg:#1d2126;
  --option-selected-text:#f7f8fa;
  --background:var(--bg-page);
  --surface:var(--bg-surface);
  --surface-secondary:var(--bg-elevated);
  --text-price:var(--text-primary);
  --text-link:var(--accent);
  --border:var(--border-default);
  --input-background:var(--input-bg);
  --button-background:var(--button-primary-bg);
  --button-text:var(--button-primary-text);
  --button-hover:color-mix(in srgb,var(--button-primary-bg) 88%,var(--button-primary-text));
  --button-disabled:var(--bg-elevated);
  --button-disabled-text:var(--text-muted);
  --card-background:var(--bg-surface);
  --card-hover:var(--bg-elevated);
  --badge-background:var(--bg-elevated);
  --badge-text:var(--text-primary);
  --badge-border:var(--border-strong);
  --error:var(--danger);
  --focus-ring:var(--accent);
  --sf-ink:var(--text-primary);
  --sf-paper:var(--bg-surface);
  --sf-white:var(--bg-surface);
  --sf-layer:var(--bg-elevated);
  --sf-soft:var(--bg-elevated);
  --sf-cream:var(--bg-surface);
  --sf-night:var(--bg-page);
  --sf-night-2:var(--input-bg);
  --sf-night-3:var(--bg-surface);
  --sf-line:var(--border-default);
  --sf-muted:var(--text-secondary);
  --sf-graphite:var(--bg-surface);
  --sf-graphite-2:var(--bg-elevated);
  --sf-silver:var(--text-muted);
  --sf-fog:var(--bg-elevated);
  --sf-fog-2:var(--bg-elevated);
  --sf-red:var(--accent);
}

/* Payment options and bank-account panels use a selected-state role, not the
   primary-action role.  This avoids black primary-button text being inherited
   by a dark selected card. */
html[data-theme] .checkout-app .pay-opt{
  background:var(--bg-surface)!important;
  border-color:var(--border-default)!important;
  color:var(--text-primary)!important;
}
html[data-theme] .checkout-app .pay-opt:hover{
  background:var(--bg-elevated)!important;
  border-color:var(--border-strong)!important;
}
html[data-theme] .checkout-app .pay-opt.selected{
  background:var(--option-selected-bg)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 1px var(--accent)!important;
  color:var(--option-selected-text)!important;
}
html[data-theme] .checkout-app .pay-opt :is(.pay-label,.pay-sub),
html[data-theme] .checkout-app .pay-opt.selected :is(.pay-label,.pay-sub){color:var(--text-primary)!important}
html[data-theme] .checkout-app .pay-opt :is(.pay-sub,.pay-opt.selected .pay-sub){color:var(--text-secondary)!important}
html[data-theme] .checkout-app .pay-opt::after{
  background:var(--bg-surface)!important;
  border-color:var(--border-strong)!important;
}
html[data-theme] .checkout-app .pay-opt.selected::after{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  box-shadow:inset 0 0 0 4px var(--option-selected-bg)!important;
}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) .bank-box{
  background:var(--bg-elevated)!important;
  border:1px solid var(--border-default)!important;
  color:var(--text-primary)!important;
}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) .bank-name{color:var(--accent)!important}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) :is(.bank-num,#wireAmountText,#ctAmountText,#codAmountText,#codInfoTitle){color:var(--text-primary)!important}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) :is(#wireAmount,#ctAmount,#codAmount){border-color:var(--border-default)!important}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) :is(#wireAmount,#ctAmount,#codAmount) :is(div[style*="color:#aaa"],div[style*="color: #aaa"]),
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) .bank-note{color:var(--text-secondary)!important}
html[data-theme] .checkout-app :is(#wireInfo,#ctInfo,#codInfo) .copy-hint{
  display:inline-flex!important;
  align-items:center!important;
  background:var(--button-secondary-bg)!important;
  border-color:var(--border-default)!important;
  color:var(--button-secondary-text)!important;
}
html[data-theme] .checkout-app .copy-toast{
  background:var(--bg-elevated)!important;
  border-color:var(--border-strong)!important;
  color:var(--text-primary)!important;
}

/* The compact checkout summary becomes its own row on phones.  The original
   mobile stylesheet painted that row white, which made its dark-theme price
   disappear.  Keep the same layout but bind the row to the elevated surface. */
html[data-theme] .checkout-app .sf-checkout-summary-price{
  background:transparent!important;
  color:var(--text-price)!important;
}
@media(max-width:719px){
  html[data-theme] .checkout-app .sf-checkout-summary-price{
    background:var(--bg-elevated)!important;
    border:1px solid var(--border-default)!important;
  }
  html[data-theme] .checkout-app .sf-checkout-summary-price :is(span,strong){color:var(--text-price)!important}
}

/* One form contract for checkout and private-account surfaces, including fields that
   are rendered dynamically after an API response. */

/* Final checkout/account polish: keep the total visually important without
   dominating the whole summary, and keep the verification state readable on
   the original white light surface. */
html[data-theme] .checkout-app .sf-checkout-totals .total strong{
  font-size:20px!important;
  line-height:1.2!important;
}
@media (max-width:719px){
  html[data-theme] body.storefront-fast-checkout .checkout-app .sf-checkout-totals .total strong{font-size:19px!important}
}

/* Night view keeps the search control as restrained black glass. */
html[data-theme="dark"] .preview-hero .preview-hero-search{
  background:rgba(7,9,11,.37)!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
}
html[data-theme="dark"] .preview-hero .preview-hero-search:focus-within{
  background:rgba(8,10,12,.42)!important;
  border-color:rgba(255,255,255,.6)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}
html[data-theme="dark"] .preview-hero .preview-hero-search input,
html[data-theme="dark"] .preview-hero .preview-hero-search input:focus{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  color:#fff!important;
}
html[data-theme="dark"] .preview-hero .preview-hero-search input::placeholder{
  color:rgba(255,255,255,.56)!important;
  opacity:1!important;
}

/* Day view remains photographic, but gets its own brighter image treatment
   and one continuous light-glass search control — never a white input set
   inside separate dark end caps. */
html[data-theme="light"] .preview-hero-base{filter:brightness(1.88) contrast(.97)!important;}
html[data-theme="light"] .preview-hero-bright{filter:brightness(1.74) contrast(.98)!important;}
html[data-theme="light"] .preview-hero-media::after{background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 36%,rgba(0,0,0,.07) 66%,rgba(0,0,0,.26))!important;}
html[data-theme="light"] .preview-hero::after{background:radial-gradient(ellipse at center,transparent 47%,rgba(0,0,0,.11) 100%)!important;}
html[data-theme="light"] .preview-hero .preview-hero-search{
  background:#fff!important;
  border-color:#fff!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18),inset 0 1px 0 #fff!important;
}
html[data-theme="light"] .preview-hero .preview-hero-search:focus-within{
  background:#fff!important;
  border-color:rgba(215,255,67,.88)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 0 3px rgba(215,255,67,.2),inset 0 1px 0 #fff!important;
}
html[data-theme="light"] .preview-hero .preview-hero-search,
html[data-theme="light"] .preview-hero .preview-hero-search input,
html[data-theme="light"] .preview-hero .preview-hero-search input:focus,
html[data-theme="light"] .preview-hero .preview-hero-search-icon{
  color:#17191b!important;
}
html[data-theme="light"] .preview-hero .preview-hero-search input,
html[data-theme="light"] .preview-hero .preview-hero-search input:focus{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-theme="light"] .preview-hero .preview-hero-search input::placeholder{color:#62676c!important;opacity:1!important;}
html[data-theme="light"] .preview-hero .preview-hero-search-submit{background:rgba(14,16,18,.9)!important;color:#fff!important;}
html[data-theme="light"] .preview-hero .preview-hero-search-submit:hover{background:#050607!important;color:#fff!important;}

/* Pure-white rule: the former warm grey / off-white surface is not a Raven
   surface in either mode.  Light mode uses white for every neutral panel;
   dark mode keeps the dark panels but uses true white for primary copy. */
html[data-theme="light"]{
  --background:#fff;
  --surface:#fff;
  --surface-secondary:#fff;
  --card-background:#fff;
  --card-hover:#fff;
  --badge-background:#fff;
  --button-disabled:#fff;
  --rv-paper:#fff;
  --rv-theme-surface:#fff;
  --rv-theme-elevated:#fff;
  --sf-paper:#fff;
  --sf-white:#fff;
  --sf-layer:#fff;
  --sf-soft:#fff;
  --sf-cream:#fff;
  --sf-fog:#fff;
  --sf-fog-2:#fff;
}
html[data-theme="dark"]{
  --text-primary:#fff;
  --text-price:#fff;
  --rv-paper:#fff;
  --rv-theme-text:#fff;
}
html[data-theme="light"] :is(.sf-main,.sf-home-category,.sf-home-products,.sf-home-products .sf-media,.sf-media-portrait){background:#fff!important;}

/* Availability is information, not a disabled control.  Keep the sold-out
   label readable against the night catalogue rather than inheriting the
   low-contrast disabled-button palette. */
html[data-theme="dark"] .sf-home-products .sf-sold-out-mark{
  background:#343a40!important;
  border-color:#6f7983!important;
  color:#fff!important;
}

/* Product cards always use the same square image frame as the storefront.
   Portrait source files are cropped into that frame rather than being
   preserved with empty side gutters. */
.sf-home-products .sf-media,
.sf-home-products .sf-media-portrait,
.sf-pit-product-row .sf-media,
.sf-pit-product-row .sf-media-portrait,
.sf-feature-products .sf-media,
.sf-feature-products .sf-media-portrait{
  width:100%!important;
  aspect-ratio:1 / 1!important;
  margin-inline:0!important;
  overflow:hidden!important;
}
.sf-home-products .sf-media img,
.sf-home-products .sf-media-portrait img,
.sf-pit-product-row .sf-media img,
.sf-pit-product-row .sf-media-portrait img,
.sf-feature-products .sf-media img,
.sf-feature-products .sf-media-portrait img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Mobile menu controls use one geometry in both themes.  Day view needs an
   explicit dark outline because the inherited white outline disappears on
   its white drawer surface. */
@media (max-width:719px){
  .sf-mobile-menu-theme{
    box-sizing:border-box!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    border-radius:50%!important;
  }
  html[data-theme="light"] .sf-mobile-menu-theme{
    background:#fff!important;
    border-color:#7d838a!important;
    color:#17191b!important;
    box-shadow:inset 0 0 0 1px rgba(23,25,27,.05)!important;
  }
  html[data-theme="light"] .sf-mobile-menu-theme:hover{
    background:#fff!important;
    border-color:#17191b!important;
  }
  html[data-theme="light"] .sf-mobile-menu-theme:focus-visible{
    outline-color:#17191b!important;
  }
  /* The light-mode sun must be centred by the button itself, not by the
     drawer heading's generic span metrics. */
  html[data-theme="light"] .sf-mobile-menu-theme[aria-pressed="false"]{
    position:relative!important;
  }
  html[data-theme="light"] .sf-mobile-menu-theme[aria-pressed="false"] .sf-theme-glyph{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    transform:translate(calc(-50% + 1px),calc(-50% + 1px))!important;
    line-height:1!important;
  }
  .sf-mobile-menu-theme[aria-pressed="true"] .sf-theme-glyph{
    transform:translateY(1px)!important;
  }
  .sf-mobile-menu-nav .sf-mobile-nav-link[data-nav-sale="true"],
  .sf-mobile-menu-nav .sf-mobile-nav-link[data-nav-sale="true"] span{
    color:var(--sf-red,#e63a2e)!important;
  }

  /* Keep mobile rails calm: titles get two readable lines, then an ellipsis.
     The price always owns the following row, so long English names cannot
     collide with it or make neighbouring cards appear uneven. */
  .sf-home-products .sf-card-body{
    grid-template-rows:34px auto!important;
    min-height:62px!important;
    padding-top:10px!important;
  }
  .sf-home-products .sf-card-name{
    display:-webkit-box!important;
    min-height:34px!important;
    max-height:34px!important;
    height:34px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    font-size:12px!important;
    line-height:1.42!important;
  }
  .sf-home-products .sf-card-name:is(.is-name-long,.is-name-compact,.is-name-ultra){
    font-size:12px!important;
    line-height:1.42!important;
  }
  .sf-home-products .sf-card-foot{
    min-height:18px!important;
    margin-top:7px!important;
    transform:none!important;
  }
}

/* A modal's right column can become narrow well before the viewport reaches
   a phone breakpoint.  The payment rows therefore reflow by available space,
   not by a hard-coded screen width. */
.sf-deposit{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:9px 16px;
}
.sf-deposit strong,
.sf-deposit span{
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}
.sf-deposit span{
  justify-self:start;
  text-align:start;
}

/* The checkout success mark is an icon with an intentionally inverted
   foreground.  In dark mode --sf-ink becomes white, so the circle correctly
   becomes white but the inline white SVG used to disappear into it.  Keep the
   inversion local to this one confirmation icon; no shared SVG or card rule
   is allowed to affect the rest of the storefront. */
html[data-theme="light"] .checkout-app .success-icon{
  background:#111!important;
}
html[data-theme="light"] .checkout-app .success-icon svg{
  stroke:#fff!important;
}
html[data-theme="dark"] .checkout-app .success-icon{
  background:#fff!important;
}
html[data-theme="dark"] .checkout-app .success-icon svg{
  stroke:#111!important;
}