/* Shared overlays own paired surface/ink colors instead of inheriting page ink. */
body .sf-cart-drawer[role="dialog"] {
    --cart-surface: var(--advanced-panel, #ffffff);
    --cart-ink: var(--advanced-ink, #17211e);
    --cart-muted: color-mix(in srgb, var(--cart-ink) 80%, var(--cart-surface));
    --cart-line: color-mix(in srgb, var(--cart-ink) 28%, var(--cart-surface));
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: min(100%, 28rem);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--cart-surface);
    color: var(--cart-ink);
    color-scheme: light;
    isolation: isolate;
    overflow: hidden;
    box-shadow: 0 0 60px #0004;
}
.dark body .sf-cart-drawer[role="dialog"] {
    --cart-surface: var(--advanced-panel, #17211e);
    --cart-ink: var(--advanced-ink, #f5f7f6);
    color-scheme: dark;
}
body .sf-cart-backdrop { position: fixed; inset: 0; z-index: 40; background: #0008; }
body .sf-cart-drawer[role="dialog"] > header,
body .sf-cart-drawer[role="dialog"] > footer { flex: 0 0 auto; border-color: var(--cart-line); }
body .sf-cart-drawer[role="dialog"] > div { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
body .sf-cart-drawer[role="dialog"] :is(h2, p, span, a, button) { color: inherit; }
body .sf-cart-drawer[role="dialog"] :is(.text-ink-400, .text-ink-500, .text-ink-600) { color: var(--cart-muted); }
body .sf-cart-drawer[role="dialog"] :is(.text-ink-900, .dark\:text-white) { color: var(--cart-ink); }
body .sf-cart-drawer[role="dialog"] :is([class*="border-ink-"], [class*="ring-ink-"]) { border-color: var(--cart-line); }
body .sf-cart-drawer[role="dialog"] button { cursor: pointer; }
body .sf-cart-drawer[role="dialog"] :is(button, a):focus-visible { outline: 3px solid var(--cart-ink); outline-offset: 3px; }
body .sf-cart-drawer[role="dialog"] button:hover { background: color-mix(in srgb, var(--cart-ink) 12%, var(--cart-surface)); color: var(--cart-ink); }
body .sf-cart-drawer[role="dialog"] .sf-cart-quantity { width: 44px; height: 44px; flex: 0 0 44px; }
body .sf-cart-drawer[role="dialog"] .sf-cart-remove { min-height: 44px; padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; }
body .sf-cart-drawer[role="dialog"] button:disabled { cursor: default; opacity: .6; }
body .sf-cart-drawer[role="dialog"] .sf-cart-checkout {
    background: var(--cart-ink);
    color: var(--cart-surface);
    min-height: 48px;
}
body .sf-cart-drawer[role="dialog"] .sf-cart-checkout:hover { background: var(--cart-ink); color: var(--cart-surface); text-decoration: underline; }
body .sf-cart-drawer[role="dialog"] footer { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
    .sf-cart-drawer, .sf-cart-backdrop { transition-duration: 0ms !important; }
}

/* Product status labels stay readable over imagery and every authored palette. */
body .sf-product-badge.sf-product-badge--sold { background: #a51d3d; color: #fff; }
body .sf-product-badge.sf-product-badge--new { background: #18566b; color: #fff; }
body .sf-product-badge.sf-product-badge--featured { background: #d7b84c; color: #17211e; }
body .sf-product-badge.sf-product-badge--discount { background: #17211e; color: #fff; }

body.ds-v2 .sf-stock-label { color: var(--theme-text); }
body .sf-compare-price { opacity: .85; }
body.ds-v2 .ds-sample-product p { opacity: .85; }

/* Authored Advanced palettes also govern native commerce and review surfaces. */
body.advanced-storefront[data-advanced] { --advanced-muted: color-mix(in srgb, var(--advanced-ink) 85%, var(--advanced-bg)); }
body.advanced-storefront[data-advanced=still] { --still-muted: color-mix(in srgb, var(--still-ink) 85%, var(--still-bg)); }
body.advanced-storefront[data-advanced] .advanced-card-price del { opacity: 1; color: var(--advanced-muted); }
body.advanced-storefront[data-advanced] .advanced-commerce .sf-commerce-primary { background: var(--advanced-button); color: var(--advanced-button-ink); }
body.advanced-storefront[data-advanced] .advanced-commerce .sf-commerce-primary :is(span, svg) { color: inherit; }
body.advanced-storefront[data-advanced] .sf-product-badge.sf-product-badge--sold { background: #a51d3d; color: #fff; }
body.advanced-storefront[data-advanced] .sf-product-badge.sf-product-badge--new { background: #18566b; color: #fff; }
body.advanced-storefront[data-advanced] .sf-product-badge.sf-product-badge--featured { background: #d7b84c; color: #17211e; }
body.advanced-storefront[data-advanced] .sf-product-badge.sf-product-badge--discount { background: #17211e; color: #fff; }
body.advanced-storefront[data-advanced] .advanced-reviews { color: var(--advanced-ink); }
body.advanced-storefront[data-advanced] .advanced-reviews :is(.bg-white, .bg-ink-50, .dark\:bg-ink-900) { background: var(--advanced-panel); }
body.advanced-storefront[data-advanced] .advanced-reviews :is(.text-ink-400, .text-ink-500, .text-ink-600) { color: var(--advanced-muted); }
body.advanced-storefront[data-advanced] .advanced-reviews :is(.text-gold-700, .text-ink-900, .dark\:text-white) { color: var(--advanced-ink); }
body.advanced-storefront[data-advanced] .advanced-commerce .text-gold-700 { color: var(--advanced-ink); }
body.advanced-storefront[data-advanced] .advanced-reviews :is(input, textarea, select) { background: var(--advanced-bg); color: var(--advanced-ink); border-color: var(--advanced-line); }

body .sf-stock-alert[class], body.advanced-storefront[data-advanced] .advanced-purchase .sf-stock-alert { background: #e4b83f; color: #17211e; }
body.advanced-storefront[data-advanced] .advanced-commerce .text-ink-400 { color: var(--advanced-muted); }
body.advanced-storefront[data-advanced=bloom] .bloom-step-number,
body.advanced-storefront[data-advanced=scent] .scent-pyramid button > span { opacity: 1; }
body.ds-v2 :is(.ds-roast-ribbon, .ds-ritual-steps) span { opacity: 1; }

/* Header search overlay: the component draws its own clear button, so the
   browser's native one would make two side by side. */
.sf-search-input::-webkit-search-cancel-button,
.sf-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sf-search-input::-webkit-search-cancel-button { display: none; }