/* ==========================================================================
   CHUDHARY PARFUMS (Chudhary Parfums Pakistan)
   MULTI-PALETTE ATELIER THEME SYSTEM
   4 Bespoke Haute Parfumerie Aesthetics with Instant Live Switching
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ==========================================================================
   PALETTE 1: WARM CASHMERE & BURNISHED AMBER (Default Flagship)
   Architectural Stone, Burnished Bronze & Tactile Cashmere (Le Labo / Aesop)
   ========================================================================== */

[data-palette="cashmere-amber"][data-theme="dark"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Primary Canvas */
  --bg-primary: #141311;
  --bg-secondary: #1D1A17;
  --bg-card: #23201C;
  --bg-input: #191714;
  --bg-elevated: #2C2823;
  --header-bg: rgba(20, 19, 17, 0.94);

  /* Eye-Catching Burnished Amber & Radiant Gold Accents */
  --brand-gold: #E5A93C;
  --brand-gold-hover: #F6BC56;
  --brand-gold-active: #C48720;
  --brand-gold-glow: rgba(229, 169, 60, 0.38);
  --accent-gold: var(--brand-gold);

  --brand-silver: #E2D7C8;
  --brand-platinum: #FAF6F0;
  --brand-emerald: #E5A93C;
  --brand-emerald-hover: #F6BC56;

  /* Buttons */
  --btn-primary-text: #141311;
  --btn-primary-bg: #E5A93C;
  --btn-primary-hover-bg: #F6BC56;

  /* Typography */
  --text-primary: #F5EFEB;
  --text-secondary: #B8ADA0;
  --text-muted: #7E7366;
  --text-disabled: #4F473E;

  /* Borders */
  --border-color: #332D26;
  --border-secondary: #423B32;
  --border-light: #221E19;
  --border-gold: rgba(229, 169, 60, 0.45);

  /* Hero */
  --hero-bg: radial-gradient(ellipse at top center, #26211C 0%, #141311 75%);
  --hero-halo: radial-gradient(circle, rgba(229, 169, 60, 0.20) 0%, rgba(20, 19, 17, 0) 70%);
  --hero-card-bg: rgba(35, 32, 28, 0.92);
  --gradient-gold-text: linear-gradient(135deg, #FFF8EB 0%, #F6BC56 45%, #E5A93C 100%);

  /* Radius & Status */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #4E9A70;
  --status-error: #D9534F;
  --status-warning: #D9822B;
  --status-info: #5B8FA8;

  /* Shadows & Gradients */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.80);
  --gradient-gold: linear-gradient(135deg, #FAD074 0%, #E5A93C 50%, #C48720 100%);
  --gradient-dark: linear-gradient(180deg, #141311 0%, #1E1B17 100%);
  --img-bg: radial-gradient(circle at center, #2C2620 0%, #1C1915 70%, #141311 100%);
}

[data-palette="cashmere-amber"][data-theme="light"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Primary Canvas */
  --bg-primary: #F9F6F0;
  --bg-secondary: #F0EAE1;
  --bg-card: #FFFFFF;
  --bg-input: #EDE6DC;
  --bg-elevated: #FFFFFF;
  --header-bg: rgba(249, 246, 240, 0.94);

  /* Accents */
  --brand-gold: #C27D28;
  --brand-gold-hover: #A86518;
  --brand-gold-active: #8A4E0D;
  --brand-gold-glow: rgba(194, 125, 40, 0.28);
  --accent-gold: var(--brand-gold);

  --brand-silver: #6E6459;
  --brand-platinum: #24201B;
  --brand-emerald: #C27D28;
  --brand-emerald-hover: #A86518;

  /* Buttons */
  --btn-primary-text: #FFFFFF;
  --btn-primary-bg: #C27D28;
  --btn-primary-hover-bg: #A86518;

  /* Typography */
  --text-primary: #24201B;
  --text-secondary: #635A4F;
  --text-muted: #968B7D;
  --text-disabled: #C2B8AC;

  /* Borders */
  --border-color: #E2D9CC;
  --border-secondary: #D4C9BA;
  --border-light: #ECE5DA;
  --border-gold: rgba(194, 125, 40, 0.45);

  /* Hero */
  --hero-bg: radial-gradient(ellipse at top center, #FFFFFF 0%, #F5EFE6 75%);
  --hero-halo: radial-gradient(circle, rgba(194, 125, 40, 0.12) 0%, rgba(249, 246, 240, 0) 70%);
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --gradient-gold-text: linear-gradient(135deg, #24201B 0%, #A86518 50%, #C27D28 100%);

  /* Radius & Status */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #2C784C;
  --status-error: #C23934;
  --status-warning: #B3681E;
  --status-info: #3D738F;

  /* Shadows & Gradients */
  --shadow-sm: 0 4px 14px rgba(36, 32, 27, 0.05);
  --shadow-md: 0 10px 30px rgba(36, 32, 27, 0.08);
  --shadow-lg: 0 20px 50px rgba(36, 32, 27, 0.12);
  --gradient-gold: linear-gradient(135deg, #E5A93C 0%, #C27D28 100%);
  --gradient-dark: linear-gradient(180deg, #F9F6F0 0%, #EFE9DF 100%);
  --img-bg: radial-gradient(circle at center, #FFFFFF 30%, #F0EAE1 100%);
}

/* ==========================================================================
   PALETTE 2: IMPERIAL EMERALD & ANTIQUE CHAMPAGNE GOLD
   Jewel-Toned Velvet & Antique Royal Gold (Roja Parfums / Baccarat)
   ========================================================================== */

[data-palette="emerald-gold"][data-theme="dark"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #061711;
  --bg-secondary: #0B221B;
  --bg-card: #102C23;
  --bg-input: #081B14;
  --bg-elevated: #16382D;
  --header-bg: rgba(6, 23, 17, 0.94);

  --brand-gold: #D4AF37;
  --brand-gold-hover: #E8C860;
  --brand-gold-active: #B59325;
  --brand-gold-glow: rgba(212, 175, 55, 0.25);
  --accent-gold: var(--brand-gold);

  --brand-silver: #A3B8B0;
  --brand-platinum: #F8F9F5;
  --brand-emerald: #D4AF37;
  --brand-emerald-hover: #E8C860;

  --btn-primary-text: #061711;
  --btn-primary-bg: #D4AF37;
  --btn-primary-hover-bg: #E8C860;

  --text-primary: #F8F9F5;
  --text-secondary: #A3B8B0;
  --text-muted: #6B857B;
  --text-disabled: #3A4E46;

  --border-color: #193D32;
  --border-secondary: #224C3F;
  --border-light: #0D261E;
  --border-gold: #D4AF37;

  --hero-bg: radial-gradient(ellipse at top center, #0F3227 0%, #061711 75%);
  --hero-halo: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(6, 23, 17, 0) 70%);
  --hero-card-bg: rgba(16, 44, 35, 0.92);
  --gradient-gold-text: linear-gradient(135deg, #FFF9E6 0%, #E8C860 50%, #D4AF37 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #34D399;
  --status-error: #F87171;
  --status-warning: #FBBF24;
  --status-info: #38BDF8;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.85);
  --gradient-gold: linear-gradient(135deg, #E8C860 0%, #D4AF37 50%, #B59325 100%);
  --gradient-dark: linear-gradient(180deg, #061711 0%, #0B221B 100%);
  --img-bg: radial-gradient(circle at center, #16382D 0%, #0B221B 70%, #061711 100%);
}

[data-palette="emerald-gold"][data-theme="light"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #F4F8F6;
  --bg-secondary: #E8F0EC;
  --bg-card: #FFFFFF;
  --bg-input: #E2ECE7;
  --bg-elevated: #FFFFFF;
  --header-bg: rgba(244, 248, 246, 0.94);

  --brand-gold: #8E701B;
  --brand-gold-hover: #6E5410;
  --brand-gold-active: #543E08;
  --brand-gold-glow: rgba(142, 112, 27, 0.18);
  --accent-gold: var(--brand-gold);

  --brand-silver: #486157;
  --brand-platinum: #0F261E;
  --brand-emerald: #8E701B;
  --brand-emerald-hover: #6E5410;

  --btn-primary-text: #FFFFFF;
  --btn-primary-bg: #8E701B;
  --btn-primary-hover-bg: #6E5410;

  --text-primary: #0F261E;
  --text-secondary: #486157;
  --text-muted: #79948A;
  --text-disabled: #A8BFB6;

  --border-color: #D2E2DB;
  --border-secondary: #C2D6CD;
  --border-light: #E0EDE7;
  --border-gold: #8E701B;

  --hero-bg: radial-gradient(ellipse at top center, #FFFFFF 0%, #ECF4F0 75%);
  --hero-halo: radial-gradient(circle, rgba(142, 112, 27, 0.10) 0%, rgba(244, 248, 246, 0) 70%);
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --gradient-gold-text: linear-gradient(135deg, #0F261E 0%, #6E5410 50%, #8E701B 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #15803D;
  --status-error: #DC2626;
  --status-warning: #B45309;
  --status-info: #0284C7;

  --shadow-sm: 0 4px 14px rgba(15, 38, 30, 0.05);
  --shadow-md: 0 10px 30px rgba(15, 38, 30, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 38, 30, 0.12);
  --gradient-gold: linear-gradient(135deg, #B59325 0%, #8E701B 100%);
  --gradient-dark: linear-gradient(180deg, #F4F8F6 0%, #E8F0EC 100%);
  --img-bg: radial-gradient(circle at center, #FFFFFF 30%, #E8F0EC 100%);
}

/* ==========================================================================
   PALETTE 3: MIDNIGHT BURGUNDY & SATIN ROSE GOLD
   Velvet Plum & Warm Satin Rose Gold (Tom Ford Private Blend)
   ========================================================================== */

[data-palette="midnight-burgundy"][data-theme="dark"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #120914;
  --bg-secondary: #1C101F;
  --bg-card: #251629;
  --bg-input: #170C1A;
  --bg-elevated: #2F1D33;
  --header-bg: rgba(18, 9, 20, 0.94);

  --brand-gold: #E5A89B;
  --brand-gold-hover: #F2C1B7;
  --brand-gold-active: #C88678;
  --brand-gold-glow: rgba(229, 168, 155, 0.25);
  --accent-gold: var(--brand-gold);

  --brand-silver: #BAA6B0;
  --brand-platinum: #FAF4F6;
  --brand-emerald: #E5A89B;
  --brand-emerald-hover: #F2C1B7;

  --btn-primary-text: #120914;
  --btn-primary-bg: #E5A89B;
  --btn-primary-hover-bg: #F2C1B7;

  --text-primary: #FAF4F6;
  --text-secondary: #BAA6B0;
  --text-muted: #826E78;
  --text-disabled: #4F3B46;

  --border-color: #38243C;
  --border-secondary: #48304C;
  --border-light: #221226;
  --border-gold: #C88678;

  --hero-bg: radial-gradient(ellipse at top center, #26122B 0%, #120914 75%);
  --hero-halo: radial-gradient(circle, rgba(229, 168, 155, 0.15) 0%, rgba(18, 9, 20, 0) 70%);
  --hero-card-bg: rgba(37, 22, 41, 0.92);
  --gradient-gold-text: linear-gradient(135deg, #FFF0F2 0%, #F2C1B7 50%, #E5A89B 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #34D399;
  --status-error: #FB7185;
  --status-warning: #FBBF24;
  --status-info: #A78BFA;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.85);
  --gradient-gold: linear-gradient(135deg, #F2C1B7 0%, #E5A89B 50%, #C88678 100%);
  --gradient-dark: linear-gradient(180deg, #120914 0%, #1C101F 100%);
  --img-bg: radial-gradient(circle at center, #2F1736 0%, #1C101F 70%, #120914 100%);
}

[data-palette="midnight-burgundy"][data-theme="light"] {
  --font-heading: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #FAF6F8;
  --bg-secondary: #F2E8EC;
  --bg-card: #FFFFFF;
  --bg-input: #EFE3E8;
  --bg-elevated: #FFFFFF;
  --header-bg: rgba(250, 246, 248, 0.94);

  --brand-gold: #A85A6B;
  --brand-gold-hover: #8C4353;
  --brand-gold-active: #6E2D3B;
  --brand-gold-glow: rgba(168, 90, 107, 0.18);
  --accent-gold: var(--brand-gold);

  --brand-silver: #634E5A;
  --brand-platinum: #24141E;
  --brand-emerald: #A85A6B;
  --brand-emerald-hover: #8C4353;

  --btn-primary-text: #FFFFFF;
  --btn-primary-bg: #A85A6B;
  --btn-primary-hover-bg: #8C4353;

  --text-primary: #24141E;
  --text-secondary: #634E5A;
  --text-muted: #96818C;
  --text-disabled: #C4B5BD;

  --border-color: #E6D8DF;
  --border-secondary: #D9C8D1;
  --border-light: #F0E3E8;
  --border-gold: #A85A6B;

  --hero-bg: radial-gradient(ellipse at top center, #FFFFFF 0%, #F5ECF0 75%);
  --hero-halo: radial-gradient(circle, rgba(168, 90, 107, 0.08) 0%, rgba(250, 246, 248, 0) 70%);
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --gradient-gold-text: linear-gradient(135deg, #24141E 0%, #8C4353 50%, #A85A6B 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #15803D;
  --status-error: #E11D48;
  --status-warning: #B45309;
  --status-info: #7C3AED;

  --shadow-sm: 0 4px 14px rgba(36, 20, 30, 0.05);
  --shadow-md: 0 10px 30px rgba(36, 20, 30, 0.08);
  --shadow-lg: 0 20px 50px rgba(36, 20, 30, 0.12);
  --gradient-gold: linear-gradient(135deg, #C88678 0%, #A85A6B 100%);
  --gradient-dark: linear-gradient(180deg, #FAF6F8 0%, #F2E8EC 100%);
  --img-bg: radial-gradient(circle at center, #FFFFFF 30%, #F2E8EC 100%);
}

/* ==========================================================================
   PALETTE 4: MODERN NOIR & LIQUID PLATINUM SILVER
   Obsidian Velvet & High-Luster Liquid Platinum (Byredo / Tom Ford Noir)
   ========================================================================== */

[data-palette="modern-noir"][data-theme="dark"],
:root:not([data-palette])[data-theme="dark"] {
  --font-heading: 'Cinzel', -apple-system, BlinkMacSystemFont, 'Segoe UI', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #0A0A0C;
  --bg-secondary: #121216;
  --bg-card: #18181D;
  --bg-input: #1E1E24;
  --bg-elevated: #24242C;
  --header-bg: rgba(10, 10, 12, 0.92);

  --brand-gold: #F1F5F9;
  --brand-gold-hover: #FFFFFF;
  --brand-gold-active: #CBD5E1;
  --brand-gold-glow: rgba(255, 255, 255, 0.20);
  --accent-gold: var(--brand-gold);

  --brand-silver: #E2E8F0;
  --brand-platinum: #FFFFFF;
  --brand-emerald: #F1F5F9;
  --brand-emerald-hover: #FFFFFF;

  --btn-primary-text: #0A0A0C;
  --btn-primary-bg: #F1F5F9;
  --btn-primary-hover-bg: #FFFFFF;

  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #475569;

  --border-color: #26262F;
  --border-secondary: #33333E;
  --border-light: #1A1A22;
  --border-gold: #F1F5F9;

  --hero-bg: radial-gradient(ellipse at top center, #191920 0%, #0A0A0C 75%);
  --hero-halo: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(10, 10, 12, 0) 70%);
  --hero-card-bg: rgba(24, 24, 29, 0.92);
  --gradient-gold-text: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 50%, #94A3B8 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #10B981;
  --status-error: #EF4444;
  --status-warning: #F59E0B;
  --status-info: #06B6D4;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.92);
  --gradient-gold: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 45%, #94A3B8 100%);
  --gradient-dark: linear-gradient(180deg, #0A0A0C 0%, #141418 100%);
  --img-bg: radial-gradient(circle at center, #24242C 0%, #141418 70%, #0A0A0C 100%);
}

:root,
[data-palette="modern-noir"][data-theme="light"],
:root:not([data-palette])[data-theme="light"],
:root:not([data-palette]):not([data-theme="dark"]) {
  --font-heading: 'Cinzel', -apple-system, BlinkMacSystemFont, 'Segoe UI', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-input: #F8FAFC;
  --bg-elevated: #FFFFFF;
  --header-bg: rgba(255, 255, 255, 0.94);

  --brand-gold: #09090B;
  --brand-gold-hover: #27272A;
  --brand-gold-active: #000000;
  --brand-gold-glow: rgba(9, 9, 11, 0.14);
  --accent-gold: var(--brand-gold);

  --brand-silver: #64748B;
  --brand-platinum: #09090B;
  --brand-emerald: #09090B;
  --brand-emerald-hover: #27272A;

  --btn-primary-text: #FFFFFF;
  --btn-primary-bg: #09090B;
  --btn-primary-hover-bg: #000000;

  --text-primary: #09090B;
  --text-secondary: #52525B;
  --text-muted: #94A3B8;
  --text-disabled: #CBD5E1;

  --border-color: #E4E4E7;
  --border-secondary: #D4D4D8;
  --border-light: #F4F4F5;
  --border-gold: rgba(9, 9, 11, 0.28);

  --hero-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F4F6 100%);
  --hero-halo: radial-gradient(circle, rgba(9, 9, 11, 0.04) 0%, rgba(255, 255, 255, 0) 70%);
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --gradient-gold-text: linear-gradient(135deg, #09090B 0%, #27272A 50%, #52525B 100%);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --status-success: #10B981;
  --status-error: #EF4444;
  --status-warning: #F59E0B;
  --status-info: #06B6D4;

  --shadow-sm: 0 4px 14px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 10px 30px rgba(9, 9, 11, 0.07);
  --shadow-lg: 0 20px 50px rgba(9, 9, 11, 0.12);
  --gradient-gold: linear-gradient(135deg, #09090B 0%, #27272A 100%);
  --gradient-dark: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --img-bg: radial-gradient(circle at center, #FFFFFF 30%, #F1F5F9 100%);
}

/* ==========================================================================
   ATELIER PALETTE DRAWER & POPUP MODAL STYLES
   ========================================================================== */

.palette-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.palette-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.palette-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 28px;
  z-index: 10002;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.palette-drawer.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.palette-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 12px;
}

.palette-card:hover {
  border-color: var(--brand-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--brand-gold-glow);
}

.palette-card.active {
  border-color: var(--brand-gold);
  background: var(--bg-elevated);
  box-shadow: 0 0 16px var(--brand-gold-glow);
}

.palette-swatches {
  display: flex;
  gap: 6px;
  align-items: center;
}

.palette-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}