@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope/Manrope-VariableFont_wght.ttf") format("truetype");
}

/* Foundation design tokens live in styles.css; component layers consume them without redeclaring. */
:root {
  --pink: #ef2f88;
  --pink-dark: #d91f76;
  --pink-hover: #f52791;
  --pink-soft: #fff0f6;
  --ink: #111111;
  --paper: #ffffff;
  --wash: #faf7f5;
  --line: #dedede;
  --muted: #777777;
  --muted-cool: #667085;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --color-primary: #ef2f88;
  --color-primary-hover: #f52791;
  --color-primary-active: #d91f76;
  --color-primary-soft: #fff0f6;
  --color-text-main: #111111;
  --color-text-account: #101828;
  --color-text-muted: #667085;
  --color-white: #ffffff;
  --color-border: #dedede;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --star: #f42b8f;
  --success: #27764a;
  --shadow: 0 18px 48px rgba(17, 17, 17, 0.12);
  --page: 100%;
  --content: 100%;
  --hero-duration: 7000ms;
  --text-font: Manrope, Inter, "Noto Sans", "Segoe UI", Arial, sans-serif;
  --body-font: var(--text-font);
  --display-font: Manrope, Inter, "Noto Sans", "Segoe UI", Arial, sans-serif;
  --header-gradient: linear-gradient(115deg, #ef2f88 0%, #f52791 38%, #b62783 72%, #5a174c 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(239, 47, 136, 0.96) 0%, rgba(221, 41, 139, 0.95) 44%, rgba(113, 26, 92, 0.96) 100%);
  --theme-accent-rgb: 239, 47, 136;
  --theme-accent-glow-rgb: 255, 105, 171;
  --theme-deep-rgb: 90, 23, 76;
  --theme-header-background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.1) 0 6%, transparent 22%),
    radial-gradient(circle at 84% 34%, rgba(var(--theme-deep-rgb), 0.5) 0 10%, transparent 30%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, transparent 26%, rgba(var(--theme-accent-glow-rgb), 0.18) 56%, transparent 80%),
    linear-gradient(210deg, rgba(var(--theme-deep-rgb), 0.36) 0%, transparent 44%, rgba(var(--theme-accent-rgb), 0.18) 80%, transparent 100%),
    var(--header-gradient);
  --theme-footer-bg: #130a10;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.2) 0%, transparent 31%, rgba(255, 255, 255, 0.035) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.24) 100%),
    linear-gradient(135deg, #10080d 0%, #1a0c15 54%, #300d21 100%);
  --bodycare-header-mobile-height: 62px;
  --bodycare-header-desktop-height: 62px;
  --bodycare-site-header-height: var(--bodycare-header-desktop-height);
  --bodycare-top-strip-open-height: 36px;
  --bodycare-top-strip-height: 0px;
  --bodycare-chrome-height: calc(var(--bodycare-top-strip-height, 0px) + var(--bodycare-site-header-height, var(--bodycare-header-height-current, 62px)));
  --bodycare-category-menu-top-fallback: var(--bodycare-chrome-height);
  --bodycare-category-menu-top: var(--category-menu-top, var(--category-menu-offset, var(--bodycare-category-menu-top-fallback)));
  --bodycare-space-mobile-x: 14px;
  --bodycare-space-tablet-x: 24px;
  --bodycare-space-desktop-x: clamp(24px, 3vw, 58px);
  /* Approved 1920 product composition: 1500 / 1920, capped for ultra-wide screens. */
  --bodycare-wide-content-width: min(2000px, 78.125vw);
  --bodycare-container-desktop: min(1680px, calc(100vw - 64px));
  --bodycare-container-wide: min(2400px, calc(100vw - 96px));
  --bodycare-z-filter-backdrop: 210;
  --bodycare-z-filter: 230;
  --bodycare-z-top-strip: 170;
  --bodycare-z-header: 180;
  --bodycare-z-header-search: calc(var(--bodycare-z-header, 180) + 20);
  --bodycare-z-menu: 170;
  --bodycare-z-menu-open: 250;
  --bodycare-z-menu-backdrop: 75;
  --bodycare-z-sticky-search: 70;
  --bodycare-z-search-open: 990;
  --bodycare-z-search-results: 1200;
  --bodycare-z-page-backdrop: 100;
  --bodycare-z-toast: 7000;
  --bodycare-z-bottom-nav: 151;
  --bodycare-z-account-dropdown: 340;
  --bodycare-z-account-modal: 360;
  --bodycare-z-care-modal: 220;
  --bodycare-z-care-toast: 260;
  --bodycare-z-ai-launcher: var(--bodycare-z-menu, 170);
  --bodycare-z-ai-backdrop: calc(var(--bodycare-z-ai, 730) - 1);
  --bodycare-z-promo-popup: 760;
  --bodycare-z-cart: 960;
  --bodycare-z-ai: 730;
  --bodycare-z-stock-notify: 1200;
  --bodycare-z-account-card-modal: 1300;
  --bodycare-z-checkout-success: 5000;
  --bodycare-z-autocomplete: 100000;
  font-family: var(--text-font);
  color: var(--ink);
  background: var(--paper);
}

:root[data-store-theme="bodycare-pink"] {
  --pink: #ef2f88;
  --pink-dark: #d91f76;
  --pink-hover: #f52791;
  --pink-soft: #fff0f6;
  --color-primary: #ef2f88;
  --color-primary-hover: #f52791;
  --color-primary-active: #d91f76;
  --color-primary-soft: #fff0f6;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
}

:root[data-store-theme="rose-wine"] {
  --pink: #c93672;
  --pink-dark: #9f2458;
  --pink-hover: #dd4b87;
  --pink-soft: #fff1f6;
  --wash: #fbf4f7;
  --line: #ead6df;
  --muted: #75616c;
  --color-primary: #c93672;
  --color-primary-hover: #dd4b87;
  --color-primary-active: #9f2458;
  --color-primary-soft: #fff1f6;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --theme-accent-rgb: 201, 54, 114;
  --theme-accent-glow-rgb: 231, 102, 149;
  --theme-deep-rgb: 75, 16, 45;
  --header-gradient: linear-gradient(115deg, #c93672 0%, #dd4b87 34%, #8f275b 72%, #3a0d28 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(201, 54, 114, 0.96) 0%, rgba(150, 38, 91, 0.95) 48%, rgba(66, 14, 43, 0.96) 100%);
  --theme-footer-bg: #160910;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.22) 0%, transparent 31%, rgba(255, 255, 255, 0.035) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.13) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.3) 100%),
    linear-gradient(135deg, #12060d 0%, #210b18 54%, #3a1028 100%);
}

:root[data-store-theme="clean-pearl"] {
  --pink: #d45f92;
  --pink-dark: #a93f70;
  --pink-hover: #e875a5;
  --pink-soft: #fff6fa;
  --paper: #fffefe;
  --wash: #fbf8fa;
  --line: #eadde4;
  --muted: #746873;
  --color-primary: #d45f92;
  --color-primary-hover: #e875a5;
  --color-primary-active: #a93f70;
  --color-primary-soft: #fff6fa;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.18);
  --theme-accent-rgb: 212, 95, 146;
  --theme-accent-glow-rgb: 243, 155, 190;
  --theme-deep-rgb: 76, 38, 56;
  --header-gradient: linear-gradient(115deg, #d45f92 0%, #e875a5 38%, #b85d83 72%, #4c2638 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(212, 95, 146, 0.96) 0%, rgba(184, 93, 131, 0.95) 48%, rgba(76, 38, 56, 0.96) 100%);
  --theme-footer-bg: #191217;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.16) 0%, transparent 31%, rgba(255, 255, 255, 0.05) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.24) 100%),
    linear-gradient(135deg, #151014 0%, #21171d 54%, #422638 100%);
}

:root[data-store-theme="graphite-blush"] {
  --pink: #7d6473;
  --pink-dark: #574752;
  --pink-hover: #927586;
  --pink-soft: #f5f1f4;
  --wash: #f7f6f7;
  --line: #ddd8dc;
  --muted: #6b6268;
  --color-primary: #7d6473;
  --color-primary-hover: #927586;
  --color-primary-active: #574752;
  --color-primary-soft: #f5f1f4;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.18);
  --theme-accent-rgb: 125, 100, 115;
  --theme-accent-glow-rgb: 178, 151, 166;
  --theme-deep-rgb: 36, 32, 39;
  --header-gradient: linear-gradient(115deg, #7d6473 0%, #6a5b65 36%, #3b343d 72%, #17151a 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(125, 100, 115, 0.96) 0%, rgba(74, 65, 73, 0.96) 46%, rgba(24, 22, 27, 0.97) 100%);
  --theme-footer-bg: #111014;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.3) 100%),
    linear-gradient(135deg, #0f0e12 0%, #18161b 54%, #28222a 100%);
}

:root[data-store-theme="soft-lavender"] {
  --pink: #8d63c7;
  --pink-dark: #6845a4;
  --pink-hover: #a37add;
  --pink-soft: #f6f1ff;
  --wash: #f8f5ff;
  --line: #ded4ef;
  --muted: #6e6479;
  --color-primary: #8d63c7;
  --color-primary-hover: #a37add;
  --color-primary-active: #6845a4;
  --color-primary-soft: #f6f1ff;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --theme-accent-rgb: 141, 99, 199;
  --theme-accent-glow-rgb: 190, 155, 238;
  --theme-deep-rgb: 53, 34, 83;
  --header-gradient: linear-gradient(115deg, #8d63c7 0%, #a37add 38%, #6845a4 72%, #2d1e4c 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(141, 99, 199, 0.96) 0%, rgba(104, 69, 164, 0.95) 48%, rgba(45, 30, 76, 0.96) 100%);
  --theme-footer-bg: #130f1b;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.2) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.28) 100%),
    linear-gradient(135deg, #100b18 0%, #1c1429 54%, #362253 100%);
}

:root[data-store-theme="emerald-clinic"] {
  --pink: #2f8f73;
  --pink-dark: #236c58;
  --pink-hover: #3fa486;
  --pink-soft: #eefaf6;
  --wash: #f4faf7;
  --line: #d4e7df;
  --muted: #5e7069;
  --color-primary: #2f8f73;
  --color-primary-hover: #3fa486;
  --color-primary-active: #236c58;
  --color-primary-soft: #eefaf6;
  --success: #236c58;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.18);
  --theme-accent-rgb: 47, 143, 115;
  --theme-accent-glow-rgb: 105, 191, 164;
  --theme-deep-rgb: 20, 60, 53;
  --header-gradient: linear-gradient(115deg, #2f8f73 0%, #3fa486 38%, #236c58 72%, #12372f 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(47, 143, 115, 0.96) 0%, rgba(35, 108, 88, 0.95) 48%, rgba(18, 55, 47, 0.96) 100%);
  --theme-footer-bg: #0d1714;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.32) 100%),
    linear-gradient(135deg, #0a1411 0%, #10221d 54%, #173b34 100%);
}

:root[data-store-theme="blue-spa"] {
  --pink: #3f7fb7;
  --pink-dark: #2d5f91;
  --pink-hover: #5293cb;
  --pink-soft: #eff7ff;
  --wash: #f5f9fd;
  --line: #d6e4ef;
  --muted: #61717d;
  --color-primary: #3f7fb7;
  --color-primary-hover: #5293cb;
  --color-primary-active: #2d5f91;
  --color-primary-soft: #eff7ff;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.18);
  --theme-accent-rgb: 63, 127, 183;
  --theme-accent-glow-rgb: 120, 177, 223;
  --theme-deep-rgb: 23, 56, 82;
  --header-gradient: linear-gradient(115deg, #3f7fb7 0%, #5293cb 38%, #2d5f91 72%, #173852 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(63, 127, 183, 0.96) 0%, rgba(45, 95, 145, 0.95) 48%, rgba(23, 56, 82, 0.96) 100%);
  --theme-footer-bg: #0d131a;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #091018 0%, #101b27 54%, #183852 100%);
}

:root[data-store-theme="nude-cocoa"] {
  --pink: #b06d55;
  --pink-dark: #8a503e;
  --pink-hover: #c37f66;
  --pink-soft: #fff5f0;
  --wash: #fbf6f2;
  --line: #eadbd3;
  --muted: #756962;
  --color-primary: #b06d55;
  --color-primary-hover: #c37f66;
  --color-primary-active: #8a503e;
  --color-primary-soft: #fff5f0;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.18);
  --theme-accent-rgb: 176, 109, 85;
  --theme-accent-glow-rgb: 221, 155, 130;
  --theme-deep-rgb: 63, 37, 30;
  --header-gradient: linear-gradient(115deg, #b06d55 0%, #c37f66 38%, #8a503e 72%, #3f251e 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(176, 109, 85, 0.96) 0%, rgba(138, 80, 62, 0.95) 48%, rgba(63, 37, 30, 0.96) 100%);
  --theme-footer-bg: #150d0a;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #110906 0%, #20120d 54%, #3f251e 100%);
}

:root[data-store-theme="noir-gold"] {
  --pink: #b99a56;
  --pink-dark: #7d6432;
  --pink-hover: #d1b06a;
  --pink-soft: #f7f4ed;
  --wash: #f6f4ef;
  --line: #ded8cc;
  --muted: #706a60;
  --color-primary: #b99a56;
  --color-primary-hover: #d1b06a;
  --color-primary-active: #7d6432;
  --color-primary-soft: #f7f4ed;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.22);
  --theme-accent-rgb: 185, 154, 86;
  --theme-accent-glow-rgb: 229, 199, 128;
  --theme-deep-rgb: 5, 5, 6;
  --header-gradient: linear-gradient(115deg, #050506 0%, #171717 36%, #4f4227 72%, #b99a56 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(5, 5, 6, 0.97) 0%, rgba(38, 35, 28, 0.96) 48%, rgba(125, 100, 50, 0.96) 100%);
  --theme-footer-bg: #050506;
  --theme-footer-background:
    radial-gradient(circle at 18% 12%, rgba(var(--theme-accent-rgb), 0.18), transparent 24%),
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.15) 0%, transparent 32%, rgba(255, 255, 255, 0.035) 54%, transparent 72%),
    linear-gradient(135deg, #030303 0%, #0d0d0f 54%, #1f1a11 100%);
}

:root[data-store-theme="platinum-mono"] {
  --pink: #68707a;
  --pink-dark: #3f454d;
  --pink-hover: #7f8791;
  --pink-soft: #f4f6f8;
  --wash: #f7f8f9;
  --line: #dfe3e8;
  --muted: #66707b;
  --color-primary: #68707a;
  --color-primary-hover: #7f8791;
  --color-primary-active: #3f454d;
  --color-primary-soft: #f4f6f8;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.16);
  --theme-accent-rgb: 104, 112, 122;
  --theme-accent-glow-rgb: 180, 187, 196;
  --theme-deep-rgb: 17, 19, 21;
  --header-gradient: linear-gradient(115deg, #111315 0%, #30353b 38%, #68707a 74%, #b9c0c8 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(17, 19, 21, 0.97) 0%, rgba(63, 69, 77, 0.96) 48%, rgba(104, 112, 122, 0.95) 100%);
  --theme-footer-bg: #0f1113;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.05) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.3) 100%),
    linear-gradient(135deg, #0b0d0f 0%, #15181b 54%, #262b31 100%);
}

:root[data-store-theme="frost-glass"] {
  --pink: #5f91b7;
  --pink-dark: #426d91;
  --pink-hover: #78a9cc;
  --pink-soft: #f1f8fd;
  --paper: #ffffff;
  --wash: #f7fbfe;
  --line: #d8e6f0;
  --muted: #61717e;
  --color-primary: #5f91b7;
  --color-primary-hover: #78a9cc;
  --color-primary-active: #426d91;
  --color-primary-soft: #f1f8fd;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.16);
  --theme-accent-rgb: 95, 145, 183;
  --theme-accent-glow-rgb: 176, 216, 238;
  --theme-deep-rgb: 23, 45, 61;
  --header-gradient: linear-gradient(115deg, #dcecf7 0%, #9dc1da 36%, #5f91b7 72%, #172d3d 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(95, 145, 183, 0.96) 0%, rgba(66, 109, 145, 0.95) 48%, rgba(23, 45, 61, 0.96) 100%);
  --theme-footer-bg: #0d151c;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.05) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #091018 0%, #122433 54%, #173449 100%);
}

:root[data-store-theme="clinical-azure"] {
  --pink: #2874c8;
  --pink-dark: #1c5594;
  --pink-hover: #3d8dde;
  --pink-soft: #eef7ff;
  --wash: #f5faff;
  --line: #d6e7f6;
  --muted: #5f7182;
  --color-primary: #2874c8;
  --color-primary-hover: #3d8dde;
  --color-primary-active: #1c5594;
  --color-primary-soft: #eef7ff;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.19);
  --theme-accent-rgb: 40, 116, 200;
  --theme-accent-glow-rgb: 108, 181, 238;
  --theme-deep-rgb: 15, 42, 72;
  --header-gradient: linear-gradient(115deg, #2874c8 0%, #3d8dde 38%, #1c5594 72%, #0f2a48 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(40, 116, 200, 0.96) 0%, rgba(28, 85, 148, 0.95) 48%, rgba(15, 42, 72, 0.96) 100%);
  --theme-footer-bg: #0a121d;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.2) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #07101a 0%, #10233a 54%, #0f2a48 100%);
}

:root[data-store-theme="royal-navy"] {
  --pink: #24477f;
  --pink-dark: #172f59;
  --pink-hover: #345d9e;
  --pink-soft: #eef3ff;
  --wash: #f5f7fd;
  --line: #d7deef;
  --muted: #626c7d;
  --color-primary: #24477f;
  --color-primary-hover: #345d9e;
  --color-primary-active: #172f59;
  --color-primary-soft: #eef3ff;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --theme-accent-rgb: 36, 71, 127;
  --theme-accent-glow-rgb: 91, 127, 194;
  --theme-deep-rgb: 7, 18, 37;
  --header-gradient: linear-gradient(115deg, #071225 0%, #172f59 34%, #24477f 68%, #5877b6 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(7, 18, 37, 0.98) 0%, rgba(23, 47, 89, 0.96) 48%, rgba(36, 71, 127, 0.96) 100%);
  --theme-footer-bg: #070d18;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.2) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.36) 100%),
    linear-gradient(135deg, #050b14 0%, #0f1b30 54%, #122447 100%);
}

:root[data-store-theme="electric-cyan"] {
  --pink: #008db8;
  --pink-dark: #00627f;
  --pink-hover: #00a9d8;
  --pink-soft: #e9faff;
  --wash: #f3fbfe;
  --line: #cfe8f1;
  --muted: #5d727b;
  --color-primary: #008db8;
  --color-primary-hover: #00a9d8;
  --color-primary-active: #00627f;
  --color-primary-soft: #e9faff;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --theme-accent-rgb: 0, 141, 184;
  --theme-accent-glow-rgb: 68, 214, 244;
  --theme-deep-rgb: 6, 43, 58;
  --header-gradient: linear-gradient(115deg, #062b3a 0%, #00627f 34%, #008db8 68%, #00c2ec 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(6, 43, 58, 0.98) 0%, rgba(0, 98, 127, 0.96) 48%, rgba(0, 141, 184, 0.96) 100%);
  --theme-footer-bg: #06131a;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.22) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.12) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #041016 0%, #082333 54%, #062b3a 100%);
}

:root[data-store-theme="stone-taupe"] {
  --pink: #786f67;
  --pink-dark: #514b46;
  --pink-hover: #91867d;
  --pink-soft: #f6f4f2;
  --wash: #f7f5f3;
  --line: #ded8d2;
  --muted: #6f6761;
  --color-primary: #786f67;
  --color-primary-hover: #91867d;
  --color-primary-active: #514b46;
  --color-primary-soft: #f6f4f2;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.16);
  --theme-accent-rgb: 120, 111, 103;
  --theme-accent-glow-rgb: 189, 179, 170;
  --theme-deep-rgb: 36, 33, 31;
  --header-gradient: linear-gradient(115deg, #24211f 0%, #514b46 38%, #786f67 72%, #b7aea5 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(36, 33, 31, 0.97) 0%, rgba(81, 75, 70, 0.96) 48%, rgba(120, 111, 103, 0.95) 100%);
  --theme-footer-bg: #11100f;
  --theme-footer-background:
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.18) 0%, transparent 31%, rgba(255, 255, 255, 0.04) 50%, transparent 68%),
    linear-gradient(212deg, rgba(var(--theme-accent-glow-rgb), 0.1) 0%, transparent 44%, rgba(var(--theme-deep-rgb), 0.34) 100%),
    linear-gradient(135deg, #0d0c0b 0%, #181614 54%, #24211f 100%);
}

:root[data-store-theme="carbon-lime"] {
  --pink: #7ea12b;
  --pink-dark: #58731e;
  --pink-hover: #9bc43b;
  --pink-soft: #f5faeb;
  --wash: #f8faf2;
  --line: #dfe8c8;
  --muted: #69705c;
  --color-primary: #7ea12b;
  --color-primary-hover: #9bc43b;
  --color-primary-active: #58731e;
  --color-primary-soft: #f5faeb;
  --shadow-primary-hover: 0 10px 22px rgba(var(--theme-accent-rgb), 0.2);
  --theme-accent-rgb: 126, 161, 43;
  --theme-accent-glow-rgb: 187, 221, 86;
  --theme-deep-rgb: 17, 23, 8;
  --header-gradient: linear-gradient(115deg, #060805 0%, #111708 34%, #58731e 70%, #9bc43b 100%);
  --header-nav-gradient: linear-gradient(115deg, rgba(6, 8, 5, 0.98) 0%, rgba(17, 23, 8, 0.97) 48%, rgba(88, 115, 30, 0.96) 100%);
  --theme-footer-bg: #070a04;
  --theme-footer-background:
    radial-gradient(circle at 18% 12%, rgba(var(--theme-accent-rgb), 0.16), transparent 24%),
    linear-gradient(128deg, rgba(var(--theme-accent-rgb), 0.16) 0%, transparent 31%, rgba(255, 255, 255, 0.035) 50%, transparent 68%),
    linear-gradient(135deg, #050704 0%, #0d1206 54%, #17210a 100%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text-font);
  letter-spacing: 0;
}

body.is-locked {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (min-width: 1024px) {
  main {
    padding-top: 0;
  }
}

@media (max-width: 699px) {
  html,
body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

@media (min-width: 1900px) {
  :root {
    --layout-x: var(--bodycare-content-edge);
    --layout-width: calc(100% - (var(--layout-x) * 2));
  }
}
html.is-locked {
  overflow: hidden;
}