/* ==========================================================================
   neervuna · storefront themes (customer-facing only)
   Scoped via html.storefront[data-store-theme="…"]
   ========================================================================== */

/* Semantic aliases — all themes inherit primitive tokens above */
html.storefront[data-store-theme] {
  --store-surface-1: var(--store-surface);
  --store-surface-2: var(--store-elevated);
  --store-ink-muted: var(--store-muted);
  --store-accent: var(--store-primary);
  --store-accent-hover: var(--store-primary-deep);
  --store-border-subtle: var(--store-border);
}

/* ── cream (default) ── */
html.storefront[data-store-theme="cream"] {
  --store-bg: #f7f3ef;
  --store-surface: #ffffff;
  --store-elevated: #fffdfa;
  --store-ink: #2e2a33;
  --store-primary: #e8836b;
  --store-primary-deep: #c45a42;
  --store-accent-soft: rgba(232, 131, 107, 0.1);
  --store-border: rgba(232, 131, 107, 0.14);
  --store-border-strong: rgba(232, 131, 107, 0.24);
  --store-muted: rgba(46, 42, 51, 0.72);
  --store-faint: rgba(46, 42, 51, 0.58);
  --store-shadow: 0 10px 30px rgba(46, 42, 51, 0.08), 0 2px 8px rgba(232, 131, 107, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(46, 42, 51, 0.12), 0 4px 12px rgba(232, 131, 107, 0.12);
  --store-hero-top: #fffdfa;
  --store-media-bg: linear-gradient(180deg, #fff 0%, #faf6f2 100%);
  --store-sticky-bg: rgba(247, 243, 239, 0.92);
  --store-buybar-bg: rgba(255, 255, 255, 0.96);
  --store-badge-bg: rgba(255, 255, 255, 0.92);
  --store-logo-ring: #fff;
  --store-mesh-a: rgba(232, 131, 107, 0.16);
  --store-mesh-b: rgba(18, 158, 134, 0.08);
  --store-btn-gradient: linear-gradient(145deg, #ed9a84, #e8836b);
  --store-btn-shadow: 0 8px 22px rgba(232, 131, 107, 0.35);
  --store-btn-shadow-hover: 0 14px 34px rgba(232, 131, 107, 0.46);
  --store-focus-border: rgba(232, 131, 107, 0.45);
  --store-focus-ring: rgba(232, 131, 107, 0.14);
  --store-success: #129e86;
  --store-success-soft: rgba(16, 185, 129, 0.08);
  --store-danger: #c84b31;
  --store-placeholder: rgba(232, 131, 107, 0.4);
  --store-btn-radius: 999px;
  --store-card-radius: 1.45rem;
  --store-logo-radius: 1.25rem;
  --store-input-radius: 1rem;
  --store-hero-bg: linear-gradient(180deg, var(--store-hero-top) 0%, var(--store-bg) 55%);
  --store-hero-ink: var(--store-ink);
  --store-hero-muted: var(--store-muted);
  --store-bg-pattern: radial-gradient(circle at 8% 12%, rgba(232, 131, 107, 0.07) 0%, transparent 32%), radial-gradient(circle at 92% 88%, rgba(18, 158, 134, 0.05) 0%, transparent 30%);
  --store-hero-mesh-extra: radial-gradient(ellipse at 50% 130%, rgba(232, 131, 107, 0.14), transparent 58%);
  --store-card-border-style: solid;
  --store-card-accent: none;
  --store-card-stripe: 0;
  --store-grid-gap: 1.15rem;
  --store-product-aspect: 4 / 5;
  --store-overlay: rgba(46, 42, 51, 0.42);
}

html.storefront.dark[data-store-theme="cream"] {
  --store-bg: #1a1714;
  --store-surface: #252019;
  --store-elevated: #2e261d;
  --store-ink: #ede8e3;
  --store-primary: #f0a090;
  --store-primary-deep: #f0a090;
  --store-accent-soft: rgba(240, 160, 144, 0.14);
  --store-border: rgba(232, 131, 107, 0.15);
  --store-border-strong: rgba(232, 131, 107, 0.28);
  --store-muted: rgba(237, 232, 227, 0.76);
  --store-faint: rgba(237, 232, 227, 0.62);
  --store-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.22);
  --store-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.28);
  --store-hero-top: #2e261d;
  --store-media-bg: linear-gradient(180deg, #2e261d 0%, #1e1916 100%);
  --store-sticky-bg: rgba(26, 23, 20, 0.92);
  --store-buybar-bg: rgba(37, 32, 25, 0.96);
  --store-badge-bg: rgba(37, 32, 25, 0.92);
  --store-logo-ring: #2e261d;
  --store-mesh-a: rgba(232, 131, 107, 0.14);
  --store-mesh-b: rgba(18, 158, 134, 0.1);
  --store-btn-gradient: linear-gradient(145deg, #f0a890, #e8836b);
  --store-btn-shadow: 0 8px 22px rgba(232, 131, 107, 0.28);
  --store-btn-shadow-hover: 0 14px 34px rgba(232, 131, 107, 0.38);
  --store-focus-border: rgba(240, 160, 144, 0.45);
  --store-focus-ring: rgba(240, 160, 144, 0.14);
  --store-success: #34d399;
  --store-success-soft: rgba(52, 211, 153, 0.12);
  --store-danger: #e07060;
  --store-placeholder: rgba(240, 160, 144, 0.35);
  --store-hero-bg: linear-gradient(180deg, var(--store-hero-top) 0%, var(--store-bg) 55%);
  --store-bg-pattern:
    radial-gradient(circle at 8% 12%, rgba(232, 131, 107, 0.1) 0%, transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(18, 158, 134, 0.06) 0%, transparent 30%);
  --store-card-bg: var(--store-surface);
}

/* ── midnight ── */
html.storefront[data-store-theme="midnight"] {
  --store-bg: #f5f2eb;
  --store-surface: #fffcf7;
  --store-elevated: #faf7f0;
  --store-ink: #1c1812;
  --store-primary: #b8860b;
  --store-primary-deep: #8b6914;
  --store-accent-soft: rgba(184, 134, 11, 0.12);
  --store-border: rgba(28, 24, 18, 0.1);
  --store-border-strong: rgba(184, 134, 11, 0.28);
  --store-muted: rgba(28, 24, 18, 0.72);
  --store-faint: rgba(28, 24, 18, 0.58);
  --store-shadow: 0 10px 30px rgba(28, 24, 18, 0.1), 0 2px 8px rgba(184, 134, 11, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(28, 24, 18, 0.14), 0 4px 12px rgba(184, 134, 11, 0.12);
  --store-hero-top: #faf7f0;
  --store-media-bg: linear-gradient(180deg, #fffcf7 0%, #f0ebe0 100%);
  --store-sticky-bg: rgba(245, 242, 235, 0.92);
  --store-buybar-bg: rgba(255, 252, 247, 0.96);
  --store-badge-bg: rgba(255, 252, 247, 0.92);
  --store-logo-ring: #fffcf7;
  --store-mesh-a: rgba(184, 134, 11, 0.14);
  --store-mesh-b: rgba(28, 24, 18, 0.06);
  --store-btn-gradient: linear-gradient(145deg, #d4a853, #b8860b);
  --store-btn-shadow: 0 8px 22px rgba(184, 134, 11, 0.32);
  --store-btn-shadow-hover: 0 14px 34px rgba(184, 134, 11, 0.42);
  --store-focus-border: rgba(184, 134, 11, 0.45);
  --store-focus-ring: rgba(184, 134, 11, 0.14);
  --store-success: #6b8f71;
  --store-success-soft: rgba(107, 143, 113, 0.1);
  --store-danger: #a0522d;
  --store-placeholder: rgba(184, 134, 11, 0.35);
  /* Editorial luxury — dark hero band, sharp geometry, gold trim */
  --store-btn-radius: 0.45rem;
  --store-card-radius: 0.75rem;
  --store-logo-radius: 0.45rem;
  --store-input-radius: 0.45rem;
  --store-chip-radius: 0.35rem;
  --store-heading-tracking: 0.04em;
  --store-hero-bg: linear-gradient(180deg, #14110e 0%, #221c14 38%, var(--store-bg) 78%);
  --store-hero-ink: #f5efe6;
  --store-hero-muted: rgba(245, 239, 230, 0.72);
  --store-bg-pattern:
    linear-gradient(135deg, rgba(184, 134, 11, 0.04) 25%, transparent 25%) -1rem 0 / 2rem 2rem,
    linear-gradient(225deg, rgba(184, 134, 11, 0.04) 25%, transparent 25%) -1rem 0 / 2rem 2rem;
  --store-hero-mesh-extra: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.18), transparent);
  --store-card-bg: linear-gradient(180deg, var(--store-surface) 0%, var(--store-elevated) 100%);
  --store-card-border-width: 1px;
  --store-card-accent: linear-gradient(135deg, rgba(184, 134, 11, 0.06), transparent 55%);
  --store-btn-text: #1c1812;
  --store-btn-border: rgba(184, 134, 11, 0.35);
  --store-product-hover-y: -2px;
  --store-grid-gap: 1rem;
  --store-product-aspect: 4 / 5;
  --store-overlay: rgba(28, 24, 18, 0.5);
}

html.storefront.dark[data-store-theme="midnight"] {
  --store-bg: #0f0e0c;
  --store-surface: #1a1814;
  --store-elevated: #242018;
  --store-ink: #f0ebe0;
  --store-primary: #d4a853;
  --store-primary-deep: #e8c068;
  --store-accent-soft: rgba(212, 168, 83, 0.14);
  --store-border: rgba(212, 168, 83, 0.14);
  --store-border-strong: rgba(212, 168, 83, 0.28);
  --store-muted: rgba(240, 235, 224, 0.76);
  --store-faint: rgba(240, 235, 224, 0.62);
  --store-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(212, 168, 83, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(212, 168, 83, 0.14);
  --store-hero-top: #242018;
  --store-media-bg: linear-gradient(180deg, #242018 0%, #0f0e0c 100%);
  --store-sticky-bg: rgba(15, 14, 12, 0.92);
  --store-buybar-bg: rgba(26, 24, 20, 0.96);
  --store-badge-bg: rgba(26, 24, 20, 0.92);
  --store-logo-ring: #242018;
  --store-mesh-a: rgba(212, 168, 83, 0.12);
  --store-mesh-b: rgba(240, 235, 224, 0.04);
  --store-btn-gradient: linear-gradient(145deg, #e8c068, #d4a853);
  --store-btn-shadow: 0 8px 22px rgba(212, 168, 83, 0.28);
  --store-btn-shadow-hover: 0 14px 34px rgba(212, 168, 83, 0.38);
  --store-focus-border: rgba(212, 168, 83, 0.45);
  --store-focus-ring: rgba(212, 168, 83, 0.14);
  --store-success: #8fbc8f;
  --store-success-soft: rgba(143, 188, 143, 0.12);
  --store-danger: #cd853f;
  --store-placeholder: rgba(212, 168, 83, 0.35);
  --store-hero-bg: linear-gradient(180deg, #0a0908 0%, #14110e 38%, var(--store-bg) 78%);
  --store-hero-ink: #f0ebe0;
  --store-hero-muted: rgba(240, 235, 224, 0.72);
  --store-bg-pattern:
    linear-gradient(135deg, rgba(212, 168, 83, 0.05) 25%, transparent 25%) -1rem 0 / 2rem 2rem,
    linear-gradient(225deg, rgba(212, 168, 83, 0.05) 25%, transparent 25%) -1rem 0 / 2rem 2rem;
  --store-card-bg: linear-gradient(180deg, var(--store-surface) 0%, var(--store-elevated) 100%);
  --store-btn-text: #1c1812;
}

/* ── garden ── */
html.storefront[data-store-theme="garden"] {
  --store-bg: #f2f6f0;
  --store-surface: #ffffff;
  --store-elevated: #f8fbf6;
  --store-ink: #1e2e22;
  --store-primary: #5a8f6a;
  --store-primary-deep: #3d6b4a;
  --store-accent-soft: rgba(90, 143, 106, 0.12);
  --store-border: rgba(90, 143, 106, 0.16);
  --store-border-strong: rgba(90, 143, 106, 0.28);
  --store-muted: rgba(30, 46, 34, 0.72);
  --store-faint: rgba(30, 46, 34, 0.58);
  --store-shadow: 0 10px 30px rgba(30, 46, 34, 0.08), 0 2px 8px rgba(90, 143, 106, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(30, 46, 34, 0.12), 0 4px 12px rgba(90, 143, 106, 0.12);
  --store-hero-top: #f8fbf6;
  --store-media-bg: linear-gradient(180deg, #fff 0%, #eef4ea 100%);
  --store-sticky-bg: rgba(242, 246, 240, 0.92);
  --store-buybar-bg: rgba(255, 255, 255, 0.96);
  --store-badge-bg: rgba(255, 255, 255, 0.92);
  --store-logo-ring: #fff;
  --store-mesh-a: rgba(90, 143, 106, 0.16);
  --store-mesh-b: rgba(180, 200, 120, 0.12);
  --store-btn-gradient: linear-gradient(145deg, #6fa87e, #5a8f6a);
  --store-btn-shadow: 0 8px 22px rgba(90, 143, 106, 0.32);
  --store-btn-shadow-hover: 0 14px 34px rgba(90, 143, 106, 0.42);
  --store-focus-border: rgba(90, 143, 106, 0.45);
  --store-focus-ring: rgba(90, 143, 106, 0.14);
  --store-success: #3d8b5a;
  --store-success-soft: rgba(61, 139, 90, 0.1);
  --store-danger: #b85c38;
  --store-placeholder: rgba(90, 143, 106, 0.35);
  /* Botanical — soft organic shapes, leafy atmosphere */
  --store-btn-radius: 1rem;
  --store-card-radius: 1.65rem;
  --store-logo-radius: 1.35rem;
  --store-input-radius: 1.1rem;
  --store-chip-radius: 1rem;
  --store-heading-tracking: -0.01em;
  --store-hero-bg: linear-gradient(165deg, #e8f2e4 0%, var(--store-bg) 52%, #eef6ea 100%);
  --store-hero-ink: #1a2e20;
  --store-hero-muted: rgba(26, 46, 32, 0.68);
  --store-bg-pattern:
    radial-gradient(circle at 10% 20%, rgba(90, 143, 106, 0.09) 0%, transparent 24%),
    radial-gradient(circle at 88% 75%, rgba(180, 200, 120, 0.11) 0%, transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(90, 143, 106, 0.03) 0%, transparent 50%);
  --store-hero-mesh-extra: radial-gradient(ellipse at 20% 0%, rgba(90, 143, 106, 0.22), transparent 48%);
  --store-card-bg: linear-gradient(180deg, #fff 0%, #f6fbf4 100%);
  --store-card-border-style: dashed;
  --store-card-accent: radial-gradient(circle at 100% 0%, rgba(90, 143, 106, 0.08), transparent 42%);
  --store-surface-blur: 18px;
  --store-product-hover-y: -4px;
  --store-product-image-scale: 1.06;
  --store-grid-gap: 1rem;
  --store-product-aspect: 4 / 5;
  --store-overlay: rgba(30, 46, 34, 0.45);
}

html.storefront.dark[data-store-theme="garden"] {
  --store-bg: #141a16;
  --store-surface: #1c2420;
  --store-elevated: #243028;
  --store-ink: #e8f0ea;
  --store-primary: #7cb88a;
  --store-primary-deep: #9fd4a8;
  --store-accent-soft: rgba(124, 184, 138, 0.14);
  --store-border: rgba(124, 184, 138, 0.15);
  --store-border-strong: rgba(124, 184, 138, 0.28);
  --store-muted: rgba(232, 240, 234, 0.76);
  --store-faint: rgba(232, 240, 234, 0.62);
  --store-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(124, 184, 138, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(124, 184, 138, 0.12);
  --store-hero-top: #243028;
  --store-media-bg: linear-gradient(180deg, #243028 0%, #141a16 100%);
  --store-sticky-bg: rgba(20, 26, 22, 0.92);
  --store-buybar-bg: rgba(28, 36, 32, 0.96);
  --store-badge-bg: rgba(28, 36, 32, 0.92);
  --store-logo-ring: #243028;
  --store-mesh-a: rgba(124, 184, 138, 0.14);
  --store-mesh-b: rgba(180, 200, 120, 0.08);
  --store-btn-gradient: linear-gradient(145deg, #9fd4a8, #7cb88a);
  --store-btn-shadow: 0 8px 22px rgba(124, 184, 138, 0.28);
  --store-btn-shadow-hover: 0 14px 34px rgba(124, 184, 138, 0.38);
  --store-focus-border: rgba(124, 184, 138, 0.45);
  --store-focus-ring: rgba(124, 184, 138, 0.14);
  --store-success: #6fd492;
  --store-success-soft: rgba(111, 212, 146, 0.12);
  --store-danger: #d4845c;
  --store-placeholder: rgba(124, 184, 138, 0.35);
  --store-hero-bg: linear-gradient(165deg, #1a2420 0%, var(--store-bg) 52%, #141a16 100%);
  --store-hero-ink: #e8f0ea;
  --store-hero-muted: rgba(232, 240, 234, 0.68);
  --store-bg-pattern:
    radial-gradient(circle at 10% 20%, rgba(124, 184, 138, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 88% 75%, rgba(180, 200, 120, 0.06) 0%, transparent 26%);
  --store-card-bg: linear-gradient(180deg, var(--store-surface) 0%, var(--store-elevated) 100%);
  --store-card-border-style: dashed;
}

/* ── lavender ── */
html.storefront[data-store-theme="lavender"] {
  --store-bg: #f8f4fa;
  --store-surface: #ffffff;
  --store-elevated: #fdf9ff;
  --store-ink: #2a2433;
  --store-primary: #9b7ec8;
  --store-primary-deep: #7a5fad;
  --store-accent-soft: rgba(155, 126, 200, 0.12);
  --store-border: rgba(155, 126, 200, 0.16);
  --store-border-strong: rgba(155, 126, 200, 0.28);
  --store-muted: rgba(42, 36, 51, 0.72);
  --store-faint: rgba(42, 36, 51, 0.58);
  --store-shadow: 0 10px 30px rgba(42, 36, 51, 0.08), 0 2px 8px rgba(155, 126, 200, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(42, 36, 51, 0.12), 0 4px 12px rgba(155, 126, 200, 0.12);
  --store-hero-top: #fdf9ff;
  --store-media-bg: linear-gradient(180deg, #fff 0%, #f5eef8 100%);
  --store-sticky-bg: rgba(248, 244, 250, 0.92);
  --store-buybar-bg: rgba(255, 255, 255, 0.96);
  --store-badge-bg: rgba(255, 255, 255, 0.92);
  --store-logo-ring: #fff;
  --store-mesh-a: rgba(155, 126, 200, 0.16);
  --store-mesh-b: rgba(230, 180, 200, 0.12);
  --store-btn-gradient: linear-gradient(145deg, #b498dc, #9b7ec8);
  --store-btn-shadow: 0 8px 22px rgba(155, 126, 200, 0.32);
  --store-btn-shadow-hover: 0 14px 34px rgba(155, 126, 200, 0.42);
  --store-focus-border: rgba(155, 126, 200, 0.45);
  --store-focus-ring: rgba(155, 126, 200, 0.14);
  --store-success: #7a9e8e;
  --store-success-soft: rgba(122, 158, 142, 0.1);
  --store-danger: #c46b7a;
  --store-placeholder: rgba(155, 126, 200, 0.35);
  /* Romantic — frosted glass, soft glow, dreamy gradients */
  --store-btn-radius: 999px;
  --store-card-radius: 1.85rem;
  --store-logo-radius: 999px;
  --store-input-radius: 1.25rem;
  --store-chip-radius: 999px;
  --store-heading-weight: 700;
  --store-heading-tracking: 0.01em;
  --store-hero-bg: linear-gradient(145deg, #fdf4ff 0%, #f8f0fa 40%, var(--store-bg) 100%);
  --store-hero-ink: #3d2f4d;
  --store-hero-muted: rgba(61, 47, 77, 0.68);
  --store-bg-pattern:
    radial-gradient(circle at 15% 25%, rgba(155, 126, 200, 0.12) 0%, transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(230, 180, 200, 0.14) 0%, transparent 30%);
  --store-hero-mesh-extra: radial-gradient(circle at 70% 20%, rgba(180, 152, 220, 0.2), transparent 45%), radial-gradient(circle at 20% 80%, rgba(230, 180, 200, 0.16), transparent 40%);
  --store-card-bg: rgba(255, 255, 255, 0.82);
  --store-sticky-bg: rgba(248, 244, 250, 0.78);
  --store-buybar-bg: rgba(255, 255, 255, 0.88);
  --store-surface-blur: 20px;
  --store-shadow: 0 16px 40px rgba(155, 126, 200, 0.12), 0 4px 14px rgba(230, 180, 200, 0.1);
  --store-shadow-hover: 0 24px 50px rgba(155, 126, 200, 0.18), 0 8px 20px rgba(230, 180, 200, 0.14);
  --store-card-accent: linear-gradient(135deg, rgba(155, 126, 200, 0.1), rgba(230, 180, 200, 0.06));
  --store-product-hover-y: -5px;
  --store-grid-gap: 1.1rem;
  --store-product-aspect: 4 / 5;
  --store-overlay: rgba(42, 36, 51, 0.48);
}

html.storefront.dark[data-store-theme="lavender"] {
  --store-bg: #18141f;
  --store-surface: #221c2a;
  --store-elevated: #2c2436;
  --store-ink: #f0eaf5;
  --store-primary: #b498dc;
  --store-primary-deep: #cdb8ea;
  --store-accent-soft: rgba(180, 152, 220, 0.14);
  --store-border: rgba(180, 152, 220, 0.15);
  --store-border-strong: rgba(180, 152, 220, 0.28);
  --store-muted: rgba(240, 234, 245, 0.76);
  --store-faint: rgba(240, 234, 245, 0.62);
  --store-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(180, 152, 220, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(180, 152, 220, 0.12);
  --store-hero-top: #2c2436;
  --store-media-bg: linear-gradient(180deg, #2c2436 0%, #18141f 100%);
  --store-sticky-bg: rgba(24, 20, 31, 0.92);
  --store-buybar-bg: rgba(34, 28, 42, 0.96);
  --store-badge-bg: rgba(34, 28, 42, 0.92);
  --store-logo-ring: #2c2436;
  --store-mesh-a: rgba(180, 152, 220, 0.14);
  --store-mesh-b: rgba(230, 180, 200, 0.08);
  --store-btn-gradient: linear-gradient(145deg, #cdb8ea, #b498dc);
  --store-btn-shadow: 0 8px 22px rgba(180, 152, 220, 0.28);
  --store-btn-shadow-hover: 0 14px 34px rgba(180, 152, 220, 0.38);
  --store-focus-border: rgba(180, 152, 220, 0.45);
  --store-focus-ring: rgba(180, 152, 220, 0.14);
  --store-success: #8fbfb0;
  --store-success-soft: rgba(143, 191, 176, 0.12);
  --store-danger: #e08898;
  --store-placeholder: rgba(180, 152, 220, 0.35);
  --store-hero-bg: linear-gradient(145deg, #22182a 0%, #18141f 40%, var(--store-bg) 100%);
  --store-hero-ink: #f0eaf5;
  --store-hero-muted: rgba(240, 234, 245, 0.68);
  --store-bg-pattern:
    radial-gradient(circle at 15% 25%, rgba(180, 152, 220, 0.1) 0%, transparent 28%),
    radial-gradient(circle at 85% 70%, rgba(230, 180, 200, 0.08) 0%, transparent 30%);
  --store-card-bg: rgba(34, 28, 42, 0.82);
  --store-sticky-bg: rgba(24, 20, 31, 0.78);
  --store-buybar-bg: rgba(34, 28, 42, 0.88);
  --store-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(180, 152, 220, 0.1);
  --store-shadow-hover: 0 24px 50px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(180, 152, 220, 0.14);
}

/* ── ocean ── */
html.storefront[data-store-theme="ocean"] {
  --store-bg: #f0f7fa;
  --store-surface: #ffffff;
  --store-elevated: #f5fbfd;
  --store-ink: #142830;
  --store-primary: #2a9d8f;
  --store-primary-deep: #1f7a6e;
  --store-accent-soft: rgba(42, 157, 143, 0.12);
  --store-border: rgba(42, 157, 143, 0.16);
  --store-border-strong: rgba(42, 157, 143, 0.28);
  --store-muted: rgba(20, 40, 48, 0.72);
  --store-faint: rgba(20, 40, 48, 0.58);
  --store-shadow: 0 10px 30px rgba(20, 40, 48, 0.08), 0 2px 8px rgba(42, 157, 143, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(20, 40, 48, 0.12), 0 4px 12px rgba(42, 157, 143, 0.12);
  --store-hero-top: #f5fbfd;
  --store-media-bg: linear-gradient(180deg, #fff 0%, #e8f4f8 100%);
  --store-sticky-bg: rgba(240, 247, 250, 0.92);
  --store-buybar-bg: rgba(255, 255, 255, 0.96);
  --store-badge-bg: rgba(255, 255, 255, 0.92);
  --store-logo-ring: #fff;
  --store-mesh-a: rgba(42, 157, 143, 0.16);
  --store-mesh-b: rgba(62, 127, 190, 0.12);
  --store-btn-gradient: linear-gradient(145deg, #3eb8a8, #2a9d8f);
  --store-btn-shadow: 0 8px 22px rgba(42, 157, 143, 0.32);
  --store-btn-shadow-hover: 0 14px 34px rgba(42, 157, 143, 0.42);
  --store-focus-border: rgba(42, 157, 143, 0.45);
  --store-focus-ring: rgba(42, 157, 143, 0.14);
  --store-success: #2a9d8f;
  --store-success-soft: rgba(42, 157, 143, 0.1);
  --store-danger: #c45a42;
  --store-placeholder: rgba(42, 157, 143, 0.35);
  /* Coastal — crisp glass, wave rhythm, teal accent stripe */
  --store-btn-radius: 0.65rem;
  --store-card-radius: 1.1rem;
  --store-logo-radius: 0.85rem;
  --store-input-radius: 0.75rem;
  --store-chip-radius: 0.5rem;
  --store-heading-tracking: -0.02em;
  --store-hero-bg: linear-gradient(180deg, #dceef5 0%, var(--store-bg) 45%, #e8f6fa 100%);
  --store-hero-ink: #0f2830;
  --store-hero-muted: rgba(15, 40, 48, 0.68);
  --store-bg-pattern:
    repeating-linear-gradient(-12deg, transparent, transparent 1.35rem, rgba(42, 157, 143, 0.035) 1.35rem, rgba(42, 157, 143, 0.035) 1.5rem);
  --store-bg-pattern-size: auto;
  --store-hero-mesh-extra: radial-gradient(ellipse at 50% 0%, rgba(62, 127, 190, 0.16), transparent 55%);
  --store-card-bg: var(--store-surface);
  --store-card-stripe: 4px;
  --store-card-accent: linear-gradient(90deg, rgba(42, 157, 143, 0.08), transparent 40%);
  --store-sticky-bg: rgba(240, 247, 250, 0.75);
  --store-buybar-bg: rgba(255, 255, 255, 0.9);
  --store-surface-blur: 16px;
  --store-product-hover-y: -2px;
  --store-grid-gap: 0.95rem;
  --store-product-aspect: 1 / 1;
  --store-overlay: rgba(20, 40, 48, 0.45);
}

html.storefront.dark[data-store-theme="ocean"] {
  --store-bg: #0e1a1f;
  --store-surface: #152428;
  --store-elevated: #1c2e34;
  --store-ink: #e8f4f8;
  --store-primary: #4ecdb8;
  --store-primary-deep: #6ee0cc;
  --store-accent-soft: rgba(78, 205, 184, 0.14);
  --store-border: rgba(78, 205, 184, 0.15);
  --store-border-strong: rgba(78, 205, 184, 0.28);
  --store-muted: rgba(232, 244, 248, 0.76);
  --store-faint: rgba(232, 244, 248, 0.62);
  --store-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(78, 205, 184, 0.08);
  --store-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(78, 205, 184, 0.12);
  --store-hero-top: #1c2e34;
  --store-media-bg: linear-gradient(180deg, #1c2e34 0%, #0e1a1f 100%);
  --store-sticky-bg: rgba(14, 26, 31, 0.92);
  --store-buybar-bg: rgba(21, 36, 40, 0.96);
  --store-badge-bg: rgba(21, 36, 40, 0.92);
  --store-logo-ring: #1c2e34;
  --store-mesh-a: rgba(78, 205, 184, 0.14);
  --store-mesh-b: rgba(62, 127, 190, 0.1);
  --store-btn-gradient: linear-gradient(145deg, #6ee0cc, #4ecdb8);
  --store-btn-shadow: 0 8px 22px rgba(78, 205, 184, 0.28);
  --store-btn-shadow-hover: 0 14px 34px rgba(78, 205, 184, 0.38);
  --store-focus-border: rgba(78, 205, 184, 0.45);
  --store-focus-ring: rgba(78, 205, 184, 0.14);
  --store-success: #6ee0cc;
  --store-success-soft: rgba(110, 224, 204, 0.12);
  --store-danger: #e07060;
  --store-placeholder: rgba(78, 205, 184, 0.35);
  --store-hero-bg: linear-gradient(180deg, #152428 0%, var(--store-bg) 45%, #0e1a1f 100%);
  --store-hero-ink: #e8f4f8;
  --store-hero-muted: rgba(232, 244, 248, 0.68);
  --store-bg-pattern:
    repeating-linear-gradient(-12deg, transparent, transparent 1.35rem, rgba(78, 205, 184, 0.04) 1.35rem, rgba(78, 205, 184, 0.04) 1.5rem);
  --store-card-stripe: 4px;
  --store-sticky-bg: rgba(14, 26, 31, 0.75);
  --store-buybar-bg: rgba(21, 36, 40, 0.9);
  --store-surface-blur: 16px;
}

/* clay cards + shared surfaces on storefront */
html.storefront .clay,
html.storefront .clay-sm,
html.storefront .clay-lg {
  background: var(--store-card-bg);
  border: var(--store-card-border-width) var(--store-card-border-style) var(--store-border);
  border-radius: var(--store-card-radius);
  box-shadow: var(--store-shadow);
}

html.storefront .order-flow__card {
  border-radius: var(--store-card-radius);
  background: var(--store-card-bg);
  border: var(--store-card-border-width) var(--store-card-border-style) var(--store-border);
  box-shadow: var(--store-shadow);
}

html.storefront[data-store-theme="lavender"] .clay,
html.storefront[data-store-theme="lavender"] .clay-lg,
html.storefront[data-store-theme="lavender"] .order-flow__card,
html.storefront[data-store-theme="lavender"] .store-pdp__buybox,
html.storefront[data-store-theme="lavender"] .store-search__input {
  backdrop-filter: blur(var(--store-surface-blur));
}

html.storefront[data-store-theme="ocean"] .store-search,
html.storefront[data-store-theme="ocean"] .store-pdp-nav {
  backdrop-filter: blur(var(--store-surface-blur));
}

/* ── Theme skins (shape + atmosphere beyond color tokens) ── */

html.storefront[data-store-theme="midnight"] .store-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--store-primary), transparent);
  opacity: 0.85;
}

html.storefront[data-store-theme="midnight"] .store-btn--primary {
  letter-spacing: 0.03em;
  text-transform: none;
}

html.storefront[data-store-theme="garden"] .store-empty {
  border-style: dashed;
  border-width: 2px;
}

html.storefront[data-store-theme="garden"] .store-product-card__media {
  border-end-start-radius: calc(var(--store-card-radius) * 1.4);
  border-end-end-radius: calc(var(--store-card-radius) * 0.6);
}

html.storefront[data-store-theme="lavender"] .store-hero__mesh {
  opacity: 0.95;
  filter: saturate(1.08);
}

html.storefront[data-store-theme="lavender"] .store-product-card:hover {
  box-shadow: var(--store-shadow-hover), 0 0 0 1px rgba(155, 126, 200, 0.12);
}

html.storefront[data-store-theme="ocean"] .store-hero {
  border-bottom-width: 2px;
  border-bottom-color: rgba(42, 157, 143, 0.2);
}

html.storefront[data-store-theme="ocean"] .store-btn--primary {
  font-weight: 800;
  letter-spacing: -0.01em;
}

html.storefront[data-store-theme="cream"] .store-product-card::after {
  content: "";
  position: absolute;
  inset-inline: 0.85rem;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--store-primary), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

html.storefront[data-store-theme="cream"] .store-product-card:hover::after {
  opacity: 0.55;
}