/* ===== CLEANED SOURCE RANGE 1-1912 ===== */
/* ==========================================================================
   SHAVI PERFUME - HAUTE PARFUMERIE STYLESHEET
   Color Theme extracted from:
   1. Midnight Royal Sapphire Blue & Amber Liquid ("ALPHA MALE")
   2. Sunlit Alabaster Cream, Champagne Sand & Warm Botanicals ("INFINITE")
   ========================================================================== */

:root {
  /* Midnight Royal Sapphire Palette (Alpha Male) */
  --bg-midnight: #050c1e;
  --bg-navy-deep: #091738;
  --bg-navy-card: rgba(11, 27, 62, 0.78);
  --bg-navy-glass: rgba(8, 20, 48, 0.88);
  --border-sapphire: rgba(56, 118, 222, 0.25);
  
  /* Sunlit Warm Alabaster & Champagne Sand Palette (Infinite) */
  --bg-sand-warm: #f6efe2;
  --bg-sand-card: #ede2cf;
  --bg-sand-glass: rgba(246, 239, 226, 0.92);
  --text-sand-dark: #221c14;
  --text-sand-muted: #6e6456;

  /* Crown Gold & Amber Accents */
  --gold-crown: #e5c178;
  --gold-primary: #d4af37;
  --gold-glow: rgba(229, 193, 120, 0.35);
  --amber-liquid: #d97706;
  --amber-warm: #f59e0b;
  --amber-dark: #92400e;

  /* Botanical Highlights */
  --botanical-lime: #84cc16;
  --botanical-mandarin: #f97316;
  --botanical-rose: #f472b6;
  --botanical-violet: #a855f7;
  --botanical-carnation: #dc2626;

  /* Core Active Theme Variables (Defaults to Midnight Sapphire) */
  --bg-primary: #050c1e;
  --bg-secondary: #0a183d;
  --bg-tertiary: #102352;
  --bg-card: rgba(11, 27, 62, 0.75);
  --bg-glass: rgba(7, 18, 44, 0.88);
  --border-glass: rgba(229, 193, 120, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.1);

  /* Typography Colors */
  --text-pure: #ffffff;
  --text-primary: #f8f6f0;
  --text-secondary: #a9b7d0;
  --text-muted: #6c7c9c;

  /* Fonts */
  --font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Shadows & Radius */
  --shadow-gold: 0 10px 30px -8px rgba(229, 193, 120, 0.35);
  --shadow-blue-glow: 0 15px 45px -10px rgba(18, 72, 168, 0.5);
  --shadow-card: 0 20px 45px -15px rgba(2, 6, 16, 0.85);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
}

/* Keep the rupee icon visually aligned with, and the same size as, its price. */
.price-currency {
  /* Font Awesome glyphs render taller than the display-font numerals. */
  display: inline-block;
  width: 0.82em;
  font-size: 0.84em;
  line-height: 1;
  vertical-align: 0.02em;
}

/* --- Theme 2: Sunlit Champagne Mode --- */
body[data-theme="sunlit"] {
  --bg-primary: #f6efe2;
  --bg-secondary: #ece1cc;
  --bg-tertiary: #e0d1b6;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-glass: rgba(246, 239, 226, 0.94);
  --border-glass: rgba(180, 140, 70, 0.25);
  --border-subtle: rgba(0, 0, 0, 0.08);

  --text-pure: #1c150c;
  --text-primary: #2d2417;
  --text-secondary: #635745;
  --text-muted: #8c7f6d;

  --shadow-card: 0 20px 45px -15px rgba(80, 60, 30, 0.15);
  --shadow-blue-glow: 0 15px 45px -10px rgba(217, 119, 6, 0.25);
}

/* --- Base & Reset --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.fa-solid::before,
.fa-regular::before {
  font-family: "Font Awesome 6 Free";
}

.fa-solid::before {
  font-weight: 900;
}

.fa-regular::before {
  font-weight: 400;
}

.fa-brands::before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  position: relative;
  background: radial-gradient(circle at 50% 0%, #0d2254 0%, #050c1e 65%, #02060f 100%);
  min-height: 100vh;
  transition: background 0.5s ease, color 0.5s ease;
}

body[data-theme="sunlit"] {
  background: radial-gradient(circle at 50% 0%, #fffbf2 0%, #f6efe2 70%, #eadfc8 100%);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  transition: var(--transition-smooth);
}

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

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Typography Helpers --- */
.gradient-gold {
  background: linear-gradient(135deg, #ffffff 10%, var(--gold-crown) 55%, var(--amber-warm) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body[data-theme="sunlit"] .gradient-gold {
  background: linear-gradient(135deg, #1c150c 10%, #aa7c11 60%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.italic {
  font-style: italic;
  font-family: var(--font-serif);
}

.text-center {
  text-align: center;
}

.section-header {
  margin-bottom: 50px;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.section-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-crown);
  font-weight: 700;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 600;
  color: var(--text-pure);
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.section-desc {
  color: var(--text-secondary);
  max-width: 620px;
  margin: 12px auto 0;
  font-size: 1rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-crown) 0%, #c4962c 100%);
  color: #071026;
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fae2a5 0%, var(--gold-crown) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(229, 193, 120, 0.45);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  color: var(--text-pure);
}

.btn-glass:hover {
  background: rgba(229, 193, 120, 0.15);
  border-color: var(--gold-crown);
  transform: translateY(-2px);
}

.btn-outline {
  border: 1px solid var(--gold-crown);
  color: var(--gold-crown);
  background: transparent;
}

.btn-outline:hover {
  background: var(--gold-crown);
  color: #071026;
}

.btn-full {
  width: 100%;
}

/* --- Top Announcement Bar --- */
.announcement-bar {
  background: linear-gradient(90deg, #030814 0%, #0c1e47 50%, #030814 100%);
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.8rem;
  padding: 9px 0;
  position: relative;
  z-index: 101;
}

body[data-theme="sunlit"] .announcement-bar {
  background: linear-gradient(90deg, #3d2c14 0%, #614620 50%, #3d2c14 100%);
}

.announcement-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.announcement-slider {
  display: flex;
  overflow: hidden;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.announcement-marquee {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 38px;
  padding-right: 38px;
  animation: tickerSlide 26s linear infinite;
}

.announcement-text {
  color: var(--gold-crown);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.announcement-slider:hover .announcement-marquee {
  animation-play-state: paused;
}

.announcement-close {
  position: absolute;
  right: 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* --- Header / Navigation --- */
.navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 12, 30, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
}

body[data-theme="sunlit"] .navbar-wrapper {
  background: rgba(246, 239, 226, 0.92);
}

.navbar-wrapper.scrolled {
  background: rgba(3, 8, 20, 0.96);
  border-bottom-color: var(--border-glass);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

body[data-theme="sunlit"] .navbar-wrapper.scrolled {
  background: rgba(240, 230, 212, 0.98);
}

.navbar {
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand Logo (Matching SHAVI typography) */
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.logo-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 7px;
  color: var(--text-pure);
  text-transform: uppercase;
}

.logo-sub {
  font-size: 0.55rem;
  letter-spacing: 4px;
  color: var(--gold-crown);
  font-weight: 600;
  margin-top: 1px;
}

/* Nav Links */
.nav-links {
  display: flex;
  list-style: none;
  gap: 32px;
  align-items: center;
}

.nav-link {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  font-weight: 600;
  position: relative;
  padding: 6px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold-crown);
  transition: var(--transition-smooth);
  transform: translateX(-50%);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-pure);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

/* Action Utilities */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.action-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.95rem;
  position: relative;
}

.action-btn:hover {
  background: rgba(229, 193, 120, 0.18);
  border-color: var(--gold-crown);
  color: var(--gold-crown);
  transform: translateY(-2px);
}

.action-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gold-crown);
  color: #071026;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
}

.mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-pure);
  border-radius: 2px;
}

/* --- Mobile Drawer Navigation --- */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-glass);
  z-index: 2000;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 15px 0 45px rgba(0, 0, 0, 0.9);
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.mobile-drawer.open {
  left: 0;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.close-drawer {
  font-size: 2rem;
  color: var(--text-secondary);
  line-height: 1;
}

.close-drawer:hover {
  color: var(--text-pure);
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 30px 0;
}

.mob-link {
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 600;
  display: block;
  padding: 6px 0;
  transition: var(--transition-fast);
}

.mob-link:hover {
  color: var(--gold-crown);
  padding-left: 6px;
}

.mobile-drawer-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.vip-badge {
  color: var(--gold-crown);
  font-weight: 700;
  margin-bottom: 6px;
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 16, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.mobile-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 769px) {
  .mobile-drawer, .mobile-drawer-overlay {
    display: none !important;
  }
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  min-height: calc(100vh - 85px);
  display: flex;
  align-items: center;
  padding: 60px 0 90px;
  overflow: hidden;
}

.hero-glow-sapphire {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(14, 58, 140, 0.3) 0%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
}

.hero-glow-amber {
  position: absolute;
  bottom: 10%;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.22) 0%, transparent 70%);
  filter: blur(120px);
  pointer-events: none;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 1;
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(229, 193, 120, 0.12);
  border: 1px solid var(--border-glass);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  color: var(--gold-crown);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-pure);
  margin-bottom: 24px;
}

.hero-motto {
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-crown);
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* Quick Notes Highlight Bar directly from user images */
.hero-notes-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 36px;
}

.hero-note-item {
  display: flex;
  flex-direction: column;
}

.hero-note-label {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-crown);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.hero-note-val {
  font-size: 0.85rem;
  color: var(--text-pure);
  font-weight: 500;
}

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.trust-item i {
  color: var(--gold-crown);
  font-size: 1.1rem;
}

/* Hero Showcase Double-Flacon Card */
.hero-showcase {
  position: relative;
  display: flex;
  justify-content: center;
}

.showcase-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-blue-glow);
  transition: transform 0.5s ease;
}

.showcase-switcher-tabs {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}

.flacon-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.flacon-tab-btn.active {
  background: var(--gold-crown);
  color: #071026;
}

.showcase-img-wrap {
  position: relative;
  height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.showcase-img-wrap img,
.showcase-img-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-md);
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.showcase-card:hover .showcase-img-wrap img,
.showcase-card:hover .showcase-img-wrap video {
  transform: scale(1.03);
}

.showcase-badge-floating {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(7, 16, 38, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  color: var(--gold-crown);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.showcase-bottom-bar {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.showcase-price-tag {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-pure);
}

/* --- TICKER STRIP --- */
.ticker-section {
  background: #040916;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  overflow: hidden;
  padding: 14px 0;
}

body[data-theme="sunlit"] .ticker-section {
  background: #ecdcc3;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerSlide 26s linear infinite;
}

.ticker-content {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  font-size: 0.8rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--gold-crown);
}

.ticker-content span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- BOTANICAL ALCHEMY & INGREDIENT MAP (From Image 2) --- */
.botanical-section {
  padding: 100px 0;
  position: relative;
}

.botanical-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.botanical-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  position: relative;
  transition: var(--transition-smooth);
}

.botanical-card:hover {
  border-color: var(--gold-crown);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.botanical-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.botanical-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.icon-citrus { background: rgba(132, 204, 22, 0.15); color: var(--botanical-lime); }
.icon-mandarin { background: rgba(249, 115, 22, 0.15); color: var(--botanical-mandarin); }
.icon-floral { background: rgba(244, 114, 182, 0.15); color: var(--botanical-rose); }
.icon-violet { background: rgba(168, 85, 247, 0.15); color: var(--botanical-violet); }
.icon-carnation { background: rgba(220, 38, 38, 0.15); color: var(--botanical-carnation); }
.icon-wood { background: rgba(217, 119, 6, 0.15); color: var(--amber-warm); }

.botanical-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-pure);
}

.botanical-tier-tag {
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-crown);
  font-weight: 700;
}

.botanical-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- BEST SELLERS CATALOG --- */
.bestsellers-section {
  padding: 100px 0;
  background: radial-gradient(circle at 50% 50%, #0d1e47 0%, #050c1e 75%);
}

body[data-theme="sunlit"] .bestsellers-section {
  background: radial-gradient(circle at 50% 50%, #f3ebd9 0%, #f6efe2 80%);
}

.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  transition: var(--transition-smooth);
}

.filter-btn:hover, .filter-btn.active {
  background: var(--gold-crown);
  color: #071026;
  border-color: var(--gold-crown);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
}

.product-card:hover {
  border-color: var(--border-glass);
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(229, 193, 120, 0.18);
  border: 1px solid var(--border-glass);
  color: var(--gold-crown);
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  z-index: 2;
}

.card-actions-top {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.btn-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(7, 16, 38, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.btn-icon-circle:hover {
  background: var(--gold-crown);
  color: #071026;
  border-color: var(--gold-crown);
}

.btn-icon-circle.favorited {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.product-img-wrap {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.05);
}

.product-notes-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.note-tag {
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--gold-crown);
}

.product-family {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-pure);
  margin: 4px 0 8px;
  font-weight: 600;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--gold-crown);
  margin-bottom: 16px;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.product-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-pure);
}

.btn-add-cart {
  background: rgba(229, 193, 120, 0.15);
  border: 1px solid var(--border-glass);
  color: var(--gold-crown);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-add-cart:hover {
  background: var(--gold-crown);
  color: #071026;
}

/* --- SCENT FINDER QUIZ --- */
.scent-finder-section {
  padding: 100px 0;
}

.finder-wrapper {
  background: linear-gradient(145deg, #0a183d 0%, #050c1e 100%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  box-shadow: var(--shadow-card);
}

body[data-theme="sunlit"] .finder-wrapper {
  background: linear-gradient(145deg, #fff 0%, #f6efe2 100%);
}

.finder-badge {
  background: rgba(229, 193, 120, 0.15);
  border: 1px solid var(--border-glass);
  color: var(--gold-crown);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 12px;
}

.finder-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--text-pure);
  margin-bottom: 12px;
}

.quiz-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.step-dot {
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
}

.step-dot.active {
  color: var(--gold-crown);
  border-color: var(--gold-crown);
  background: rgba(229, 193, 120, 0.15);
}

.step-connector {
  width: 30px;
  height: 1px;
  background: var(--border-subtle);
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.quiz-question {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-align: center;
  color: var(--text-pure);
  margin-bottom: 30px;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.quiz-opt {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-opt:hover {
  background: rgba(229, 193, 120, 0.1);
  border-color: var(--gold-crown);
  transform: translateY(-4px);
}

.quiz-opt i {
  font-size: 1.5rem;
  color: var(--gold-crown);
}

.opt-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-pure);
}

.opt-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Quiz Result Box */
.quiz-result {
  text-align: center;
  animation: fadeIn 0.5s ease;
}

.result-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: left;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.result-img-box {
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.result-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- NOTE PYRAMID MATRIX --- */
.pyramid-section {
  padding: 100px 0;
  background: #040916;
}

body[data-theme="sunlit"] .pyramid-section {
  background: #eae0cc;
}

.pyramid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.pyramid-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pyramid-tier {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pyramid-tier:hover, .pyramid-tier.active {
  border-color: var(--gold-crown);
  background: rgba(229, 193, 120, 0.12);
  transform: translateX(10px);
}

.tier-top { width: 75%; margin: 0 auto; }
.tier-heart { width: 90%; margin: 0 auto; }
.tier-base { width: 100%; }

.tier-tag {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--gold-crown);
  font-weight: 700;
  margin-bottom: 6px;
}

.tier-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-pure);
  margin-bottom: 10px;
}

.tier-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tier-badges span {
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-pure);
}

.pyramid-info-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.panel-phase-badge {
  background: rgba(229, 193, 120, 0.15);
  color: var(--gold-crown);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: 12px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-pure);
  margin-bottom: 16px;
}

.panel-text {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.pyramid-metrics-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

.perf-metric .metric-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-crown), var(--amber-warm));
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* --- FOOTER --- */
.footer {
  background: #02060f;
  border-top: 1px solid var(--border-glass);
  padding: 80px 0 30px;
}

.footer-brand-logo {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 15px;
}

/* =========================================================
   FOOTER LOGO SIZE (DESKTOP, TABLET & MOBILE)
   ========================================================= */

/* Desktop view */
.footer .footer-brand-logo img,
.footer-brand-logo img {
  height: 85px !important;
  max-width: 240px !important;
  width: auto !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Tablet view (<= 1024px & 768px) */
@media (max-width: 1024px) {
  .footer .footer-brand-logo img,
  .footer-brand-logo img {
    height: 75px !important;
    max-width: 220px !important;
  }
}

/* Mobile view (<= 480px) */
@media (max-width: 480px) {
  .footer .footer-brand-logo img,
  .footer-brand-logo img {
    height: 65px !important;
    max-width: 190px !important;
  }
}

body[data-theme="sunlit"] .footer {
  background: #20170d;
  color: #f6efe2;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-about {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 18px 0 24px;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-pure);
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.footer-links, .boutiques-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--gold-crown);
  padding-left: 4px;
}

.boutiques-list li strong {
  color: var(--gold-crown);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 30px;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 20px;
}

.payment-methods {
  display: flex;
  gap: 16px;
  font-size: 1.6rem;
  color: var(--text-secondary);
}

/* --- DRAWERS & MODALS --- */
.cart-drawer-overlay, .wishlist-drawer-overlay, .modal-overlay, .search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 16, 0.82);
  backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.cart-drawer-overlay.active, .wishlist-drawer-overlay.active, .modal-overlay.active, .search-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer, .wishlist-drawer {
  position: fixed;
  top: 0;
  right: -480px;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-glass);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85);
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.open, .wishlist-drawer.open {
  right: 0;
}

.cart-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-title-wrap h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-pure);
}

.cart-badge-count {
  font-size: 0.75rem;
  color: var(--gold-crown);
  font-weight: 700;
}

.close-btn {
  font-size: 1.8rem;
  color: var(--text-secondary);
}

.shipping-progress-box {
  background: rgba(229, 193, 120, 0.1);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 24px;
}

.shipping-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--gold-crown);
  font-weight: 600;
  margin-bottom: 6px;
}

.shipping-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.shipping-bar-fill {
  height: 100%;
  background: var(--gold-crown);
  transition: width 0.4s ease;
}

.cart-items, .wishlist-items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.cart-empty i {
  font-size: 3rem;
  color: var(--gold-crown);
  margin-bottom: 16px;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  align-items: center;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.cart-item-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-pure);
}

.cart-item-size {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.cart-item-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold-crown);
  margin-top: 4px;
}

.cart-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.cart-remove-btn {
  color: var(--text-muted);
  font-size: 1.1rem;
}

.cart-footer {
  padding: 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}

.promo-box {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.promo-box input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-pure);
  outline: none;
}

.btn-apply-promo {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
}

.btn-apply-promo:hover {
  background: var(--gold-crown);
  color: #071026;
}

.coupon-message {
  min-height: 1.2em;
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: .74rem;
  line-height: 1.35;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}

.total-row {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-pure);
}

.total-price {
  font-family: var(--font-display);
  color: var(--gold-crown) !important;
}

/* Modals */
.modal-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  max-width: 850px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 2rem;
  color: var(--text-secondary);
  z-index: 10;
}

.modal-body {
  padding: 40px;
}

.quickview-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
}

.qv-img-box {
  height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.qv-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Search Modal */
.search-container {
  max-width: 650px;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.search-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.search-input-box i {
  color: var(--gold-crown);
  font-size: 1.2rem;
}

.search-input-box input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--text-pure);
  outline: none;
}

.search-results {
  max-height: 380px;
  overflow-y: auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.search-item:hover {
  background: rgba(229, 193, 120, 0.12);
}

.search-item img {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  object-fit: cover;
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: rgba(7, 16, 38, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-left: 4px solid var(--gold-crown);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  color: #ffffff;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  animation: slideToast 0.3s ease;
}

@keyframes slideToast {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-notes-bar, .hero-actions, .hero-trust-row {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .botanical-grid, .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pyramid-layout {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }
  .botanical-grid, .products-grid { grid-template-columns: 1fr; }
  .hero-notes-bar { grid-template-columns: 1fr; }
  .quickview-grid, .result-card { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

/* Product catalogue filters and responsive four-up grid. */
.products-catalog-section {
  padding: 36px 0 90px;
}

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.products-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--shavi-line, #e4dcec);
  border-radius: 7px;
  background: var(--shavi-ivory, #fffdfb);
  color: var(--shavi-rose-deep, #795ea6);
}

.products-search-box input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--shavi-charcoal, #292633) !important;
  font: inherit;
}

.products-search-box input::placeholder {
  color: var(--shavi-muted, #777184);
}

.products-search-box button {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--shavi-muted, #777184);
  font-size: 1.1rem;
}

.products-search-box button:hover {
  background: var(--shavi-blush-100, #f2eef9);
  color: var(--shavi-charcoal, #292633);
}

.products-result-count {
  color: var(--shavi-muted, #777184);
  font-size: 0.84rem;
}

.catalog-filter-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 28px;
}

.catalog-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.catalog-control {
  display: grid;
  gap: 5px;
  color: var(--shavi-muted, #777184);
  font-size: 0.75rem;
  font-weight: 600;
}

.catalog-control input,
.catalog-control select {
  width: 142px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--shavi-line, #e4dcec);
  border-radius: 6px;
  background: var(--shavi-ivory, #fffdfb);
  color: var(--shavi-charcoal, #292633);
}

.catalog-section-title {
  margin: 0 0 22px;
  color: var(--shavi-charcoal, #292633);
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.suggested-products-section {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--shavi-line, #e4dcec);
}

.products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.catalog-product-card {
  min-width: 0;
}

.product-card[data-detail-url] {
  cursor: pointer;
}

.catalog-product-card .product-img-wrap {
  display: block;
}

.catalog-product-card .product-card-body {
  flex: 1;
}

.catalog-product-card .product-description {
  min-height: 2.8em;
}

.catalog-product-card .btn-add-cart:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 60px;
}

.catalog-pagination .pagination-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--shavi-line, #e4dcec);
  border-radius: 6px;
  background: var(--shavi-ivory, #fffdfb);
  color: var(--shavi-charcoal, #292633);
}

.catalog-pagination .pagination-btn.active {
  background: var(--shavi-charcoal, #292633);
  border-color: var(--shavi-charcoal, #292633);
  color: #fff;
}

.catalog-pagination .pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 1000px) {
  .products-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .products-search-box {
    width: 100%;
  }

  .catalog-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .catalog-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-control input,
  .catalog-control select {
    width: 100%;
  }

  .catalog-control:last-child {
    grid-column: 1 / -1;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== SHAVI EXPERIENCE SECTION ===== */
/* SHAVI EXPERIENCE SECTION
  Premium Cream Luxury Theme
  ============================================================ */

.shavi-experience-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(185, 154, 104, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(185, 154, 104, 0.07),
            transparent 32%
        ),
        var(--bg-primary);

    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}


/* Luxury background glow */
.shavi-experience-section::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    left: -180px;

    border-radius: 50%;

    background: rgba(185, 154, 104, 0.08);

    filter: blur(90px);

    pointer-events: none;
}

.shavi-experience-section::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background: rgba(185, 154, 104, 0.06);

    filter: blur(90px);

    pointer-events: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.shavi-experience-section .section-header {
    position: relative;
    z-index: 2;

    max-width: 780px;

    margin: 0 auto 55px;

    text-align: center;
}

.shavi-experience-section .section-subtitle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--gold-crown);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.shavi-experience-section .section-subtitle i {
    font-size: 0.75rem;
}

.shavi-experience-section .section-title {
    color: var(--text-pure);

    margin-bottom: 15px;
}

.shavi-experience-section .section-desc {
    color: var(--text-secondary);

    max-width: 650px;

    margin: 0 auto;

    line-height: 1.7;
}


/* ============================================================
   EXPERIENCE GRID
   ============================================================ */

.experience-grid {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* ============================================================
   EXPERIENCE CARD
   ============================================================ */

.experience-card {
    position: relative;

    min-height: 320px;

    padding: 32px 26px;

    display: flex;

    flex-direction: column;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid var(--border-subtle);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-card);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


/* Top gold line */
.experience-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 25px;
    right: 25px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-crown),
        transparent
    );

    opacity: 0.55;
}


/* Soft inner glow */
.experience-card::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background: rgba(185, 154, 104, 0.07);

    filter: blur(30px);

    transition: 0.35s ease;

    pointer-events: none;
}


/* Hover */
.experience-card:hover {
    transform: translateY(-7px);

    border-color: rgba(185, 154, 104, 0.50);

    background: #fffdf9;

    box-shadow:
        0 20px 45px rgba(74, 52, 38, 0.14),
        0 0 0 1px rgba(185, 154, 104, 0.05);
}

.experience-card:hover::after {
    background: rgba(185, 154, 104, 0.13);
}


/* ============================================================
   NUMBER
   ============================================================ */

.experience-number {
    position: absolute;

    top: 15px;
    right: 20px;

    font-size: 3.5rem;

    line-height: 1;

    font-weight: 700;

    color: rgba(185, 154, 104, 0.10);

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   ICON
   ============================================================ */

.experience-icon {
    position: relative;
    z-index: 2;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border-radius: 50%;

    color: var(--gold-crown);

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 104, 0.16),
            rgba(185, 154, 104, 0.04)
        );

    border: 1px solid rgba(185, 154, 104, 0.30);

    font-size: 1.1rem;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

.experience-card:hover .experience-icon {
    transform: scale(1.08);

    border-color: var(--gold-crown);

    background:
        radial-gradient(
            circle,
            rgba(185, 154, 104, 0.22),
            rgba(185, 154, 104, 0.06)
        );
}


/* ============================================================
   TITLE
   ============================================================ */

.experience-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 13px;

    color: var(--text-pure);

    font-family: var(--font-display);

    font-size: 1.12rem;

    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.experience-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.88rem;

    line-height: 1.75;
}


/* ============================================================
   BOTTOM CTA
   ============================================================ */

.experience-bottom {
    position: relative;
    z-index: 2;

    max-width: 1180px;

    margin: 50px auto 0;

    padding: 28px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid var(--border-glass);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-card);
}


/* CTA label */
.experience-bottom-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 7px;

    color: var(--gold-crown);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.experience-bottom-label i {
    font-size: 0.7rem;
}


/* CTA heading */
.experience-bottom h3 {
    margin: 0;

    color: var(--text-pure);

    font-family: var(--font-display);

    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.4;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {

    .shavi-experience-section {
        padding: 85px 0;
    }

    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .experience-card {
        min-height: 290px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .shavi-experience-section {
        padding: 70px 0;
    }

    .shavi-experience-section .section-header {
        margin-bottom: 40px;
    }

    .experience-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .experience-card {
        min-height: auto;

        padding: 28px 23px;
    }

    .experience-bottom {
        margin-top: 30px;

        padding: 24px 22px;

        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }

    .experience-bottom .btn {
        width: 100%;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .shavi-experience-section {
        padding: 60px 0;
    }

    .experience-card {
        padding: 25px 20px;

        border-radius: 14px;
    }

    .experience-icon {
        width: 52px;
        height: 52px;
    }

    .experience-card h3 {
        font-size: 1.05rem;
    }

    .experience-card p {
        font-size: 0.84rem;
    }

    .experience-number {
        font-size: 3rem;
    }

    .experience-bottom {
        border-radius: 14px;
    }

    .experience-bottom h3 {
        font-size: 1.08rem;
    }
}

/* ===== SHAVI PRODUCT PAGE ===== */
/* SHAVI PRODUCT PAGE - FINAL CREAM LUXURY OVERRIDES
  Add this at the VERY END of style.css
  ========================================================= */

.products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* PRODUCT CARD */
.product-card {
    background: #fffdf9;
    border: 1px solid #e4d6c7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(56, 43, 38, 0.06);
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #c9a66b;
    box-shadow: 0 16px 35px rgba(56, 43, 38, 0.12);
}

/* PRODUCT IMAGE */
.product-img-wrap {
    background: #f5ede3;
    border-bottom: 1px solid #eaded2;
}

.product-img-wrap img {
    transition: transform 0.45s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.04);
}

/* PRODUCT TEXT */
.product-family {
    color: #a88758;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
}

.product-title {
    color: #352a25;
    font-family: var(--font-display);
    font-weight: 600;
}

/* DESCRIPTION */
.product-description {
    color: #75675f;
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* PRICE */
.product-price {
    color: #352a25;
    font-family: var(--font-display);
    font-weight: 700;
}

/* FILTER BUTTONS */
.filter-btn {
    background: #fffdf9;
    color: #5d4c43;
    border: 1px solid #dfd0c2;
}

.filter-btn:hover,
.filter-btn.active {
    background: #b89a6a;
    color: #fffdf9;
    border-color: #b89a6a;
}

/* PAGINATION */
.pagination button {
    background: #fffdf9;
    color: #4d3d35;
    border: 1px solid #dfd0c2;
}

.pagination button:hover,
.pagination button.active {
    background: #b89a6a;
    color: #fffdf9;
    border-color: #b89a6a;
}

/* PRODUCT DETAIL */
.product-detail {
    background: #fffdf9;
    border: 1px solid #e4d6c7;
}

/* PRODUCT DETAIL HEADINGS */
.product-detail h1,
.product-detail h2,
.product-detail h3 {
    color: #352a25;
}

/* PRODUCT DETAIL TEXT */
.product-detail p {
    color: #75675f;
}

/* PRODUCT DETAIL PRICE */
.product-detail .product-price {
    color: #352a25;
}

/* WISHLIST / ICON BUTTON */
.btn-icon-circle {
    background: #fffdf9;
    border: 1px solid #dfd0c2;
    color: #5a463b;
}

.btn-icon-circle:hover {
    background: #b89a6a;
    border-color: #b89a6a;
    color: #fffdf9;
}

.btn-icon-circle.favorited {
    background: #9f625c;
    border-color: #9f625c;
    color: #fffdf9;
}

/* MOBILE */
@media (max-width: 1100px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   SHAVI PRODUCT CARD + VIP SECTION
   ============================================================ */
/* SHAVI PRODUCT CARD LAYOUT & GRID POLISH FIX
  ========================================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fffdf9;
    border: 1px solid #e4d6c7;
    border-radius: 18px;
    overflow: hidden;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(56, 43, 38, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #c9a66b;
    box-shadow: 0 16px 35px rgba(56, 43, 38, 0.12);
}

.product-card[style*="display: none"] {
    display: none !important;
}

.product-img-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    background: #f5ede3;
    border-radius: 12px;
    margin-bottom: 16px;
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.04);
}

.product-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.product-title {
    font-size: 1.15rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: #352a25;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}

.product-desc-short {
    font-size: 0.85rem;
    color: #75675f;
    line-height: 1.55;
    max-height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 16px;
}

.product-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eaded2;
    padding-top: 14px;
    margin-top: auto;
}

.product-price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: #352a25;
}

@media (max-width: 1100px) {
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 520px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   FIX: Product Card Image Overflow & Quick View Button
   ========================================================= */

.product-card {
    position: relative;
    overflow: hidden; /* Ensures nothing spills outside the card boundary */
}

.product-img-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden; /* Hides overflowing zoomed images or buttons */
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix Quick View Overlay alignment so it stays nicely inside the image box */
.product-card .product-actions-overlay {
    position: absolute;
    inset: 0;
    background: rgba(53, 42, 37, 0.4);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Saved-item control for PHP-rendered product cards. */
.product-img-wrap > .wishlist-btn-item {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
}

/* Keep the hero price as text only—without a colored label behind it. */
.showcase-price-tag {
    background: transparent !important;
    box-shadow: none !important;
    color: #352a25 !important;
}

.showcase-price-tag .price-currency {
    color: #352a25 !important;
}

/* The olfactory metric area should blend into its card. */
.pyramid-metrics-box {
    background: transparent !important;
}

.product-card:hover .product-actions-overlay {
    opacity: 1;
}

/* Ensure category tag stays neatly in the top-left corner */
.product-cat-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 253, 249, 0.9);
    color: var(--shavi-brown, #352a25);
    padding: 3px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    z-index: 2;
}

/* =========================================================
   VIP PRIVÉ CLUB — newsletter form layout
   ========================================================= */
.vip-section {
    padding: 70px 0;
    background: var(--shavi-cream, #f8f2e9);
}

.vip-card {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 54px 48px;
    overflow: hidden;
    background: #fffdf9;
    border: 1px solid #e4d6c7;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(53, 42, 37, 0.08);
}

.vip-content {
    position: relative;
    z-index: 1;
}

.vip-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a88758;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.vip-title {
    margin: 10px 0 8px;
    color: #352a25;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.2;
}

.vip-desc {
    max-width: 700px;
    margin: 0 auto 24px;
    color: #75675f;
    line-height: 1.65;
}

.vip-form {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    max-width: 570px;
    margin: 0 auto 17px;
}

.vip-form .input-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #dfd0c2;
    border-radius: var(--radius-full);
}

.vip-form .input-wrapper i {
    color: #a88758;
}

.vip-form input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #352a25;
    outline: none;
}

.vip-form input:focus {
    box-shadow: none;
}

.vip-form .input-wrapper:focus-within {
    border-color: #b89a6a;
    box-shadow: 0 0 0 3px rgba(184, 154, 106, 0.12);
}

.vip-form .btn {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 23px;
}

.vip-disclaimer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #75675f;
    font-size: 0.82rem;
}

@media (max-width: 600px) {
    .vip-section { padding: 45px 0; }
    .vip-card { padding: 38px 22px; }
    .vip-form { flex-direction: column; }
    .vip-form .btn { width: 100%; }
}

/* ===== SHAVI BLUSH LUXE FINAL BRAND THEME ===== */
/* SHAVI BLUSH LUXE — FINAL BRAND THEME
   Inspired by the supplied SHAVI soft blush / ivory reference.
   This layer intentionally sits at the end of the stylesheet so legacy theme
   rules remain intact but the live storefront has one consistent visual system.
   ============================================================================ */
:root {
  --shavi-blush-50: #fbf9ff;
  --shavi-blush-100: #f2eef9;
  --shavi-blush-200: #e7e0f2;
  --shavi-blush-300: #d8cdec;
  --shavi-ivory: #fffdfb;
  --shavi-ivory-warm: #f8f5fb;
  --shavi-charcoal: #292633;
  --shavi-charcoal-soft: #524d60;
  --shavi-muted: #777184;
  --shavi-rose: #a993cc;
  --shavi-rose-deep: #795ea6;
  --shavi-champagne: #9580be;
  --shavi-line: #e4dcec;
  --shavi-shadow: 0 18px 45px rgba(56, 45, 78, .09);
  --shavi-shadow-soft: 0 10px 30px rgba(56, 45, 78, .07);

  --bg-primary: var(--shavi-blush-100);
  --bg-secondary: var(--shavi-ivory);
  --bg-tertiary: var(--shavi-blush-200);
  --bg-card: rgba(255, 253, 251, .96);
  --bg-glass: rgba(255, 253, 251, .88);
  --border-glass: var(--shavi-line);
  --border-subtle: var(--shavi-line);
  --text-pure: var(--shavi-charcoal);
  --text-primary: var(--shavi-charcoal);
  --text-secondary: var(--shavi-charcoal-soft);
  --text-muted: var(--shavi-muted);
  --gold-crown: var(--shavi-champagne);
  --gold-primary: var(--shavi-champagne);
  --gold-glow: rgba(181, 154, 118, .18);
  --amber-liquid: var(--shavi-rose);
  --amber-warm: var(--shavi-champagne);
  --amber-dark: var(--shavi-rose-deep);
  --shadow-gold: 0 12px 28px rgba(181, 154, 118, .16);
  --shadow-card: var(--shavi-shadow);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

html,
body,
body[data-theme],
body[data-theme="sapphire"],
body[data-theme="sunlit"],
body[data-theme="plum-light"],
body[data-theme="deep-plum"] {
  color: var(--shavi-charcoal) !important;
}

body {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.72) 0%, transparent 32%),
    linear-gradient(180deg, var(--shavi-blush-50) 0%, var(--shavi-blush-100) 52%, var(--shavi-ivory-warm) 100%) !important;
}

/* Keep typography editorial and understated. */
.section-title,
.hero-title,
.page-title,
.product-detail h1,
.product-detail h2,
.product-detail h3,
.vip-title {
  color: var(--shavi-charcoal) !important;
}

.section-subtitle,
.section-eyebrow,
.eyebrow,
.accent-text,
.vip-tag {
  color: var(--shavi-rose-deep) !important;
}

.section-desc,
.hero-desc,
.product-description,
.product-desc-short,
.vip-desc {
  color: var(--shavi-muted) !important;
}

.gradient-gold,
body[data-theme] .gradient-gold {
  background: linear-gradient(135deg, var(--shavi-charcoal) 15%, var(--shavi-rose-deep) 72%, var(--shavi-champagne) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Announcement */
.announcement-bar {
  background: var(--shavi-charcoal) !important;
  color: var(--shavi-ivory) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.announcement-text,
.announcement-close {
  color: rgba(255,253,251,.92) !important;
}

.announcement-text i {
  color: var(--shavi-champagne) !important;
}

/* Header / navigation */
.navbar-wrapper,
.navbar-wrapper.scrolled {
  background: rgba(255,253,251,.94) !important;
  border-bottom: 1px solid var(--shavi-line) !important;
  box-shadow: 0 8px 24px rgba(76,51,58,.045) !important;
  backdrop-filter: blur(16px);
}

.navbar {
  background: transparent !important;
}

.logo-title {
  color: var(--shavi-charcoal) !important;
  background: none !important;
  -webkit-text-fill-color: var(--shavi-charcoal) !important;
}

.logo-sub {
  color: var(--shavi-rose-deep) !important;
}

.nav-link {
  color: var(--shavi-charcoal-soft) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--shavi-rose-deep) !important;
}

.nav-link::after {
  background: var(--shavi-rose) !important;
}

.action-btn,
.mobile-toggle {
  color: var(--shavi-charcoal-soft) !important;
  border-color: var(--shavi-line) !important;
  background: rgba(255,253,251,.72) !important;
}

.action-btn:hover,
.mobile-toggle:hover {
  color: var(--shavi-charcoal) !important;
  background: var(--shavi-blush-100) !important;
  border-color: var(--shavi-rose) !important;
}

.action-btn .badge,
.badge {
  background: var(--shavi-rose-deep) !important;
  color: #fff !important;
}

/* One permanent brand theme: the old visual theme switcher is no longer needed. */
#themeToggleBtn {
  display: none !important;
}

#soundToggle {
  display: none !important;
}

/* Buttons */
.btn-primary,
.add-to-cart,
.buy-now,
.cta-button,
.btn-filled,
.checkout-btn {
  background: linear-gradient(135deg, var(--shavi-charcoal) 0%, #403639 100%) !important;
  color: #fff !important;
  border: 1px solid var(--shavi-charcoal) !important;
  box-shadow: 0 12px 26px rgba(41,36,39,.14) !important;
}

.btn-primary:hover,
.add-to-cart:hover,
.buy-now:hover,
.cta-button:hover,
.btn-filled:hover,
.checkout-btn:hover {
  background: linear-gradient(135deg, var(--shavi-rose-deep) 0%, #a87b85 100%) !important;
  border-color: var(--shavi-rose-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(158,115,125,.22) !important;
}

.btn-outline,
.btn-glass {
  background: rgba(255,253,251,.55) !important;
  border: 1px solid var(--shavi-rose) !important;
  color: var(--shavi-charcoal) !important;
}

.btn-outline:hover,
.btn-glass:hover {
  background: var(--shavi-charcoal) !important;
  border-color: var(--shavi-charcoal) !important;
  color: #fff !important;
}

/* Generic cards / surfaces */
.product-card,
.review-card,
.note-card,
.feature-card,
.service-card,
.collection-card,
.quiz-card,
.contact-card,
.experience-card,
.vip-card {
  background: rgba(255,253,251,.96) !important;
  border-color: var(--shavi-line) !important;
  box-shadow: var(--shavi-shadow-soft) !important;
}

.product-card:hover,
.review-card:hover,
.note-card:hover,
.feature-card:hover,
.service-card:hover,
.collection-card:hover,
.experience-card:hover {
  border-color: var(--shavi-rose) !important;
  box-shadow: var(--shavi-shadow) !important;
  transform: translateY(-4px);
}

.product-card .product-family,
.product-family,
.product-cat-tag {
  color: var(--shavi-rose-deep) !important;
}

.product-cat-tag {
  background: rgba(253,248,249,.94) !important;
  border: 1px solid var(--shavi-line);
}

.product-title,
.product-card .product-title,
.product-detail .product-title {
  color: var(--shavi-charcoal) !important;
}

.product-price,
.product-detail .product-price,
.showcase-price-tag,
.showcase-price-tag .price-currency {
  color: var(--shavi-charcoal) !important;
}

.product-footer-row,
.product-card .product-footer-row {
  border-top-color: var(--shavi-line) !important;
}

.filter-btn {
  background: var(--shavi-ivory) !important;
  border-color: var(--shavi-line) !important;
  color: var(--shavi-charcoal-soft) !important;
}

.filter-btn:hover,
.filter-btn.active,
.pagination button:hover,
.pagination button.active {
  background: var(--shavi-charcoal) !important;
  border-color: var(--shavi-charcoal) !important;
  color: #fff !important;
}

/* Section backgrounds: remove old blue/purple theme blocks. */
.hero,
.section-light,
.light-section,
.section-soft,
.soft-section,
.shavi-experience-section,
.vip-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.86) 0%, transparent 38%),
    linear-gradient(135deg, var(--shavi-blush-50) 0%, var(--shavi-blush-100) 58%, var(--shavi-ivory-warm) 100%) !important;
}

.section-white,
.white-section,
.products-section,
.product-section {
  background: linear-gradient(180deg, var(--shavi-ivory) 0%, var(--shavi-ivory-warm) 100%) !important;
}

[class*="purple-bg"],
[class*="plum-bg"],
[class*="blue-bg"],
[class*="navy-bg"],
[class*="sapphire-bg"] {
  background: linear-gradient(135deg, var(--shavi-blush-100) 0%, var(--shavi-ivory-warm) 100%) !important;
}

.botanical-section,
.scent-finder-section {
  background: linear-gradient(180deg, var(--shavi-ivory-warm) 0%, var(--shavi-blush-50) 100%) !important;
}

.bestsellers-section,
.pyramid-section {
  background:
    radial-gradient(circle at 85% 15%, rgba(184,143,152,.14) 0%, transparent 34%),
    linear-gradient(145deg, var(--shavi-blush-200) 0%, var(--shavi-blush-100) 48%, var(--shavi-ivory) 100%) !important;
}

.vip-section {
  background: linear-gradient(120deg, var(--shavi-blush-100) 0%, var(--shavi-ivory-warm) 48%, var(--shavi-blush-200) 100%) !important;
}

.section-divider {
  background: var(--shavi-line) !important;
}

/* Hero image overlays should stay warm and soft, never blue. */
.hero::before,
.hero::after,
.hero-overlay,
.banner-overlay {
  background-color: rgba(41,36,39,.08) !important;
}

/* Inputs / forms */
input,
textarea,
select,
.form-control,
.input-wrapper {
  background: rgba(255,253,251,.92) !important;
  color: var(--shavi-charcoal) !important;
  border-color: var(--shavi-line) !important;
}

input::placeholder,
textarea::placeholder {
  color: #9a8d90 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.input-wrapper:focus-within {
  border-color: var(--shavi-rose) !important;
  box-shadow: 0 0 0 3px rgba(184,143,152,.12) !important;
  outline: none !important;
}

/* Mobile drawer */
.mobile-drawer {
  background: var(--shavi-ivory) !important;
  color: var(--shavi-charcoal) !important;
}

.mobile-nav-links .mob-link {
  color: var(--shavi-charcoal-soft) !important;
}

.mobile-nav-links .mob-link:hover {
  color: var(--shavi-rose-deep) !important;
  background: var(--shavi-blush-100) !important;
}

/* Newsletter / Privé */
.vip-card {
  background: linear-gradient(135deg, #fffdfb 0%, #f8eef1 100%) !important;
  border-color: var(--shavi-line) !important;
}

.vip-tag i,
.vip-form .input-wrapper i {
  color: var(--shavi-rose-deep) !important;
}

.vip-form .input-wrapper {
  background: rgba(255,253,251,.86) !important;
  border-color: var(--shavi-line) !important;
}

.vip-disclaimer {
  color: var(--shavi-muted) !important;
}

/* Footer */
.footer,
footer {
  background: var(--shavi-charcoal) !important;
  color: rgba(255,253,251,.9) !important;
}

.footer-heading {
  color: #fff !important;
}

.footer-about,
.boutiques-list,
.footer-links a,
.footer-bottom,
.footer-bottom a {
  color: rgba(255,253,251,.68) !important;
}

.footer-links a:hover,
.footer-bottom a:hover,
.footer a:hover {
  color: #e8d2d8 !important;
}

/* Footer Social Icons - Sized & Styled */
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 251, 0.25) !important;
  color: rgba(255, 253, 251, 0.88) !important;
  font-size: 1.35rem; /* Increased Instagram icon size */
  transition: all 0.3s ease;
}

.social-links a:hover {
  background: var(--shavi-rose-deep) !important;
  border-color: var(--shavi-rose-deep) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Drawers / modals / search */
.cart-drawer,
.wishlist-drawer,
.modal-container,
.search-container {
  background: var(--shavi-ivory) !important;
  color: var(--shavi-charcoal) !important;
  border-color: var(--shavi-line) !important;
}

.cart-header,
.cart-footer,
.shipping-progress-box,
.summary-row {
  border-color: var(--shavi-line) !important;
}

.shipping-bar-track {
  background: var(--shavi-blush-200) !important;
}

.shipping-bar-fill {
  background: var(--shavi-rose-deep) !important;
}

/* Responsive polish */
@media (max-width: 768px) {
  .navbar-wrapper,
  .navbar-wrapper.scrolled {
    background: rgba(255,253,251,.98) !important;
  }

  .section-header {
    margin-bottom: 34px;
  }

  .btn {
    padding: 13px 22px;
  }
}


/* =========================================================
   SHAVI — FINAL BLUSH REFERENCE COLOR SAFETY
   Permanent visual palette based on the supplied reference image.
   Layout, content and JavaScript behavior are untouched.
   ========================================================= */
:root {
  --shavi-reference-bg: #f2eef9;
  --shavi-reference-bg-light: #fbf9ff;
  --shavi-reference-bg-soft: #e7e0f2;
  --shavi-reference-ivory: #fffdfb;
  --shavi-reference-text: #292633;
  --shavi-reference-muted: #777184;
  --shavi-reference-rose: #a993cc;
  --shavi-reference-rose-deep: #795ea6;
  --shavi-reference-line: #e4dcec;
}

html, body {
  background-color: var(--shavi-reference-bg) !important;
  color: var(--shavi-reference-text) !important;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.86) 0%, transparent 34%),
    radial-gradient(circle at 88% 42%, rgba(215,200,234,.3) 0%, transparent 36%),
    repeating-linear-gradient(135deg, rgba(169,147,204,.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #fbf9ff 0%, #f2eef9 48%, #fffdfb 100%) !important;
}

.checkout-section {
  padding: 38px 0 88px;
}

.checkout-heading {
  margin-bottom: 28px;
}

.checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--shavi-charcoal-soft);
  font-size: 0.88rem;
}

.checkout-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--shavi-rose-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.checkout-heading h1,
.checkout-success h1 {
  margin: 0 0 8px;
  color: var(--shavi-charcoal);
  font-size: 2rem;
}

.checkout-heading p,
.checkout-success p {
  color: var(--shavi-muted);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.8fr);
  align-items: start;
  gap: 24px;
}

.checkout-form,
.checkout-summary,
.checkout-success {
  padding: 28px;
  border: 1px solid var(--shavi-line);
  border-radius: 10px;
  background: var(--shavi-ivory);
  box-shadow: var(--shavi-shadow-soft);
}

.checkout-success-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(31, 24, 36, .68);
  backdrop-filter: blur(5px);
}

.checkout-success {
  width: min(100%, 560px);
  text-align: center;
}

.checkout-success > .fa-circle-check {
  margin-bottom: 14px;
  color: #43865d;
  font-size: 2.2rem;
}

.checkout-success-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.checkout-continue {
  display: inline-block;
  margin-top: 18px;
  color: var(--shavi-rose-deep);
  font-size: .86rem;
}

.checkout-fieldset {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.checkout-fieldset legend,
.checkout-summary h2 {
  margin-bottom: 16px;
  color: var(--shavi-charcoal);
  font-size: 1.08rem;
  font-weight: 700;
}

.checkout-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.checkout-field {
  display: grid;
  gap: 6px;
  color: var(--shavi-charcoal-soft);
  font-size: 0.82rem;
  font-weight: 600;
}

.checkout-field-wide {
  grid-column: 1 / -1;
}

.checkout-field input,
.checkout-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  background: #fff;
  color: var(--shavi-charcoal);
  font: inherit;
  resize: vertical;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
  outline: 2px solid var(--shavi-rose);
  outline-offset: 1px;
}

.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  color: var(--shavi-charcoal);
}

.payment-option input {
  margin-top: 4px;
  accent-color: var(--shavi-rose-deep);
}

.payment-option span,
.payment-option small {
  display: block;
}

.payment-option small {
  margin-top: 3px;
  color: var(--shavi-muted);
}

.checkout-submit {
  width: 100%;
  min-height: 50px;
}

.checkout-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkout-terms {
  margin-top: 12px;
  color: var(--shavi-muted);
  font-size: 0.78rem;
}

.checkout-terms a {
  color: var(--shavi-rose-deep);
  text-decoration: underline;
}

.checkout-error,
.checkout-cart-error {
  margin-bottom: 18px;
  color: #a42337;
  font-size: 0.88rem;
}

.checkout-items {
  display: grid;
  gap: 14px;
}

.checkout-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--shavi-line);
  color: var(--shavi-charcoal);
  font-size: 0.82rem;
}

.checkout-item img {
  width: 54px;
  height: 62px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--shavi-blush-100);
}

.checkout-item-copy {
  display: grid;
  gap: 4px;
}

.checkout-item-copy span {
  color: var(--shavi-muted);
  font-size: 0.75rem;
}

.checkout-promo {
  margin: 18px 0;
}

#checkoutAppliedCoupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  background: var(--shavi-blush-100);
}

#checkoutAppliedCoupon[hidden] {
  display: none;
}

#checkoutAppliedCoupon span {
  color: var(--shavi-muted);
  font-size: .78rem;
  font-weight: 600;
}

#checkoutAppliedCouponCode {
  color: var(--shavi-rose-deep);
  font-size: .82rem;
  letter-spacing: .06em;
}

.checkout-promo label {
  display: block;
  margin-bottom: 6px;
  color: var(--shavi-charcoal-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.checkout-promo-row {
  display: flex;
  gap: 8px;
}

.checkout-promo-row input {
  min-width: 0;
  flex: 1;
  padding: 10px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  background: #fff;
  color: var(--shavi-charcoal);
}

.checkout-promo-row button {
  padding: 0 14px;
  border: 1px solid var(--shavi-charcoal);
  border-radius: 6px;
  background: var(--shavi-charcoal);
  color: #fff;
}

#checkoutPromoMessage,
.checkout-cart-message {
  margin-top: 7px;
  color: var(--shavi-muted);
  font-size: 0.78rem;
}

.checkout-totals {
  display: grid;
  gap: 11px;
  color: var(--shavi-charcoal-soft);
  font-size: 0.86rem;
}

.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checkout-totals dd {
  margin: 0;
}

.checkout-total {
  padding-top: 12px;
  border-top: 1px solid var(--shavi-line);
  color: var(--shavi-charcoal);
  font-size: 1rem;
  font-weight: 700;
}

.checkout-success {
  max-width: 680px;
  margin: 20px auto;
  padding: 48px;
  text-align: center;
}

.checkout-success > i {
  display: block;
  margin-bottom: 16px;
  color: var(--shavi-rose-deep);
  font-size: 2.4rem;
}

.checkout-success .btn {
  margin-top: 24px;
}

.product-detail-page {
  color: var(--shavi-charcoal);
}

.product-detail-section {
  padding: 34px 0 88px;
}

.back-to-products {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  color: var(--shavi-charcoal-soft);
  font-size: 0.88rem;
}

.back-to-products:hover {
  color: var(--shavi-rose-deep);
}

/* 1. Grid layout: Give the image column a clean, compact width (360px) */
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3.5vw, 42px);
}

/* 2. Gallery wrapper: locks to 360px */
.detail-gallery {
  min-width: 0;
  width: 100%;
  max-width: 360px;
}

/* 3. Main image frame: removes horizontal blank space */
.detail-main-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  height: 440px; /* Portrait height that matches the perfume bottle & box */
  overflow: hidden;
  border: 1px solid var(--shavi-line);
  border-radius: 12px;
  background: #ffffff; /* Clean white background matching the image */
  padding: 0; /* Remove padding that created extra white borders */
}

/* 4. Product Image: fits edge-to-edge horizontally */
.detail-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Zooms to touch left and right borders completely */
  object-position: center 60%; /* Keeps the bottle and box perfectly centered */
  display: block;
}

/* 5. Thumbnail strip aligned with the 360px width */
.detail-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  max-width: 360px;
  overflow-x: auto;
}

.detail-thumb {
  flex: 0 0 72px;
  width: 72px;
  aspect-ratio: 1;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  background: var(--shavi-ivory);
}

.detail-thumb.active,
.detail-thumb:hover {
  border-color: var(--shavi-rose-deep);
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
}

.detail-info {
  padding: 10px 0;
}

.detail-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--shavi-rose-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-info h1 {
  margin: 13px 0 10px;
  color: var(--shavi-charcoal);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
}

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  color: var(--shavi-charcoal);
  font-size: 1.55rem;
  font-weight: 700;
}

.detail-stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #28724b;
  font-size: 0.82rem;
  font-weight: 600;
}

.detail-stock > i {
  font-size: 0.52rem;
}

.detail-stock.out-of-stock {
  color: #a42337;
}

.detail-stock span {
  color: var(--shavi-muted);
  font-weight: 400;
}

.detail-divider {
  height: 1px;
  margin: 20px 0;
  background: var(--shavi-line);
}

.detail-description {
  color: var(--shavi-charcoal-soft);
  font-size: 0.96rem;
  line-height: 1.75;
  white-space: normal;
}

.detail-size-control {
  display: grid;
  grid-template-columns: 90px minmax(0, 180px);
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--shavi-charcoal);
  font-size: 0.86rem;
  font-weight: 600;
}

.detail-size-control select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  background: var(--shavi-ivory);
  color: var(--shavi-charcoal);
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin: 20px 0 28px;
}

.detail-wishlist-btn {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--shavi-line);
  border-radius: 6px;
  color: var(--shavi-charcoal);
  font-size: 1.05rem;
}

.detail-wishlist-btn:hover,
.detail-wishlist-btn.active {
  border-color: var(--shavi-rose-deep);
  color: var(--shavi-rose-deep);
}

.detail-add-btn {
  flex: 1;
  min-height: 52px;
  max-width: 340px;
}

.detail-add-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.detail-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--shavi-line);
  border-left: 1px solid var(--shavi-line);
}

.detail-service-grid > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-content: center;
  gap: 2px 9px;
  min-height: 76px;
  padding: 12px;
  border-right: 1px solid var(--shavi-line);
  border-bottom: 1px solid var(--shavi-line);
}

.detail-service-grid > div > i {
  grid-row: span 2;
  padding-top: 3px;
  color: var(--shavi-rose-deep);
}

.detail-service-grid strong {
  color: var(--shavi-charcoal);
  font-size: 0.78rem;
}

.detail-service-grid span {
  color: var(--shavi-muted);
  font-size: 0.72rem;
}

.detail-description-panel {
  max-width: 860px;
  margin: 64px auto 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--shavi-line);
}

.detail-description-panel h2 {
  margin: 4px 0 12px;
  color: var(--shavi-charcoal);
  font-size: 1.5rem;
  line-height: 1.25;
}

.detail-description-panel p {
  color: var(--shavi-charcoal-soft);
  line-height: 1.75;
}

@media (max-width: 800px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .detail-gallery {
    max-width: 420px;
    margin: 0 auto;
  }

  .detail-main-image {
    height: min(calc(100vw - 48px), 420px);
    max-width: 420px;
    padding: 10px;
    margin: 0 auto;
  }

  .detail-info {
    padding-top: 0;
  }
}

@media (max-width: 520px) {
  .checkout-section {
    padding: 24px 0 60px;
  }

  .checkout-form,
  .checkout-summary {
    padding: 20px 16px;
  }

  .checkout-fields {
    grid-template-columns: 1fr;
  }

  .product-detail-section {
    padding: 24px 0 60px;
  }

  .detail-service-grid > div {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px 6px;
    padding: 10px 8px;
  }

  .detail-service-grid strong {
    font-size: 0.72rem;
  }

  .checkout-field-wide {
    grid-column: auto;
  }

  .checkout-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .checkout-item img {
    width: 44px;
    height: 54px;
  }
}

/* =========================================================
   PUBLIC SITE RESPONSIVE LAYOUT — TABLET & MOBILE
   ========================================================= */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

@media (max-width: 1100px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .navbar { height: 76px; }
  .nav-links { gap: 20px; }
  .nav-link { font-size: 0.76rem; letter-spacing: 1px; }
  .nav-actions { gap: 8px; }
  .action-btn { width: 38px; height: 38px; }
  .hero { min-height: auto; padding: 70px 0; }
  .hero-container { gap: 38px; }
  .showcase-img-wrap { height: min(52vw, 420px); }
  .story-grid { gap: 32px; }
  .footer-top { gap: 32px; }
  [style*="grid-template-columns"] { gap: min(30px, 4vw) !important; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .announcement-bar { padding: 7px 0; }
  .announcement-slider { padding: 0 28px; }
  .announcement-marquee { gap: 26px; padding-right: 26px; animation-duration: 20s; }
  .announcement-text { font-size: 0.68rem; line-height: 1.35; text-align: center; }
  .announcement-close { right: 8px; }
  .navbar { height: 68px; gap: 10px; }
  .brand-logo img { height: 38px !important; max-width: 150px; }
  .nav-actions { margin-left: auto; gap: 6px; flex: 0 0 auto; }
  .nav-actions #themeToggleBtn, .nav-actions #soundToggle, .nav-actions #searchBtn { display: none; }
  .action-btn { width: 36px; height: 36px; flex: 0 0 36px; font-size: 0.82rem; }
  .nav-actions .account-btn { display: flex !important; visibility: visible !important; }
  .action-btn .badge { min-width: 16px; height: 16px; font-size: 0.62rem; }
  .mobile-drawer { width: min(320px, 88vw); padding: 24px 20px; }
  .hero, .botanical-section, .bestsellers-section, .scent-finder-section,
  .pyramid-section, .shavi-experience-section { padding: 56px 0 !important; }
  .hero-title { font-size: clamp(2.15rem, 10vw, 3rem); }
  .hero-desc, .section-desc { font-size: 0.94rem; }
  .hero-actions { width: 100%; gap: 10px; margin-bottom: 28px; }
  .hero-actions .btn { flex: 1 1 180px; }
  .hero-notes-bar { width: 100%; padding: 13px; margin-bottom: 26px; }
  .hero-trust-row { width: 100%; gap: 14px; flex-wrap: wrap; padding-top: 18px; }
  .trust-item { font-size: 0.78rem; }
  .showcase-card { padding: 14px; }
  .showcase-img-wrap { height: min(96vw, 400px); }
  .showcase-bottom-bar { gap: 12px; }
  .showcase-bottom-bar .btn { padding: 10px 14px; }
  .section-header, .section-header-row { margin-bottom: 30px; }
  .section-header-row { align-items: flex-start; }
  .section-title { font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .filter-tabs { width: 100%; padding: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .filter-btn { flex: 0 0 auto; padding: 9px 15px; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .product-card { padding: 13px; border-radius: 14px; }
  .product-img-wrap { height: 190px; margin-bottom: 12px; }
  .product-title { font-size: 1rem; }
  .product-desc-short, .product-description { font-size: 0.78rem; }
  .product-footer, .product-footer-row { gap: 8px; padding-top: 11px; }
  .product-price { font-size: 1.05rem; }
  .btn-add-cart { padding: 7px 10px; font-size: 0.7rem; }
  .btn-add-cart i { display: none; }
  .botanical-grid, .experience-grid { grid-template-columns: 1fr !important; }
  .botanical-card, .experience-card { padding: 22px 18px; min-height: auto; }
  .story-grid, .pyramid-layout { grid-template-columns: 1fr; gap: 26px; }
  .story-image-box img { height: 330px !important; }
  .pyramid-info-panel, .finder-wrapper { padding: 26px 20px; }
  .tier-top, .tier-heart, .tier-base { width: 100%; }
  .pyramid-tier:hover, .pyramid-tier.active { transform: translateY(-3px); }
  .result-card, .quickview-grid { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .result-img-box, .qv-img-box { height: 260px; }
  .footer { padding: 52px 0 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 38px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-top: 22px; }
  .cart-drawer, .wishlist-drawer { max-width: 100%; width: min(420px, 100%); }
  .cart-header, .cart-footer, .cart-items, .wishlist-items { padding-left: 16px; padding-right: 16px; }
  .modal-container, .search-container { width: calc(100% - 24px); max-height: calc(100vh - 24px); overflow-y: auto; padding: 18px; }
  .modal-body { padding: 20px 0 0; }
  .toast-container { right: 12px; left: 12px; bottom: 12px; }
  .toast { width: 100%; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [style*="padding: 40px"], [style*="padding: 50px"] { padding: 24px 20px !important; }
}

@media (max-width: 480px) {
  .navbar { height: 62px; }
  .brand-logo { min-width: 0; }
  .brand-logo img { height: 33px !important; max-width: 92px; }
  .mobile-toggle { width: 25px; }
  .nav-actions { gap: 4px; }
  .action-btn { width: 34px; height: 34px; flex-basis: 34px; }
  .hero, .botanical-section, .bestsellers-section, .scent-finder-section,
  .pyramid-section, .shavi-experience-section { padding: 42px 0 !important; }
  .hero-tag-pill, .finder-badge { font-size: 0.66rem; letter-spacing: 1.3px; padding: 7px 12px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn {
    flex: 0 0 auto;
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
  }
  .experience-bottom .btn { width: 100%; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .product-card { padding: 11px; }
  .product-img-wrap { height: min(42vw, 190px); }
  .product-title { font-size: 0.94rem; }
  .product-desc-short, .product-description { font-size: 0.72rem; }
  .product-price { font-size: 0.98rem; }
  .btn-add-cart { padding: 7px 9px; font-size: 0.66rem; }
  .product-footer, .product-footer-row { align-items: center; }
  .btn-add-cart { padding: 8px 13px; }
  .showcase-img-wrap { height: min(105vw, 350px); }
  .showcase-bottom-bar { flex-wrap: wrap; }
  .showcase-bottom-bar .btn { flex: 1 1 160px; }
  .cart-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
  .cart-item-img { width: 64px; height: 64px; }
  .detail-actions { flex-wrap: wrap; }
  .detail-add-btn { max-width: none; }
  .detail-size-control, .detail-service-grid { grid-template-columns: 1fr; }
  .detail-service-grid > div { min-height: auto; }
}

/* Product-card purchase row: keep currency, price, and cart label intact. */
.product-card .product-footer,
.product-card .product-footer-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.product-card .product-price {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  line-height: 1.15;
}

.product-card .product-price .price-currency {
  width: auto;
  margin-right: 0.18em;
  flex: 0 0 auto;
}

.product-card .btn-add-cart,
.product-card .add-to-cart-btn {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 0.74rem;
  line-height: 1;
  white-space: nowrap;
}

/* Catalog purchase actions retain the same black treatment in every state. */
.product-card .btn-add-cart,
.product-card .add-to-cart-btn,
.product-card .btn-add-cart:disabled,
.product-card .add-to-cart-btn:disabled,
.product-card .sold-out-btn {
  background: #352a25 !important;
  border-color: #352a25 !important;
  color: #fff !important;
}

.product-card .btn-add-cart:disabled,
.product-card .add-to-cart-btn:disabled,
.product-card .sold-out-btn {
  cursor: not-allowed;
  opacity: 0.72;
}

#showcaseAddBtn:disabled,
#showcaseAddBtn.sold-out-btn {
  background: #352a25 !important;
  border-color: #352a25 !important;
  color: #fff !important;
  cursor: not-allowed;
  opacity: 0.72;
}

@media (max-width: 768px) {
  .product-card .product-footer,
  .product-card .product-footer-row { gap: 7px; }

  .product-card .btn-add-cart,
  .product-card .add-to-cart-btn {
    padding: 8px 9px;
    font-size: 0.64rem;
  }

  .product-card .btn-add-cart i,
  .product-card .add-to-cart-btn i { display: none; }
}

@media (max-width: 480px) {
  .product-card .product-price { font-size: 0.92rem; }
  .product-card .btn-add-cart,
  .product-card .add-to-cart-btn {
    padding: 8px 6px;
    font-size: 0.59rem;
    letter-spacing: 0.25px;
  }
}

/* Hero note values must align with their headings on narrow screens. */
@media (max-width: 768px) {
  .hero-notes-bar,
  .hero-note-item,
  .hero-note-label,
  .hero-note-val {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero-note-val {
    width: 100%;
  }
}

@media (max-width: 768px) {
  body.mobile-menu-open { overflow: hidden; }

  .mobile-drawer {
    height: 100dvh;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  .mobile-drawer-header,
  .mobile-drawer-footer {
    flex: 0 0 auto;
  }

  .mobile-nav-links {
    flex: 1 1 auto;
    min-height: 0;
    margin: 18px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-footer {
    padding-top: 14px;
    padding-bottom: 2px;
  }

  .mobile-drawer-footer p {
    margin-bottom: 8px;
  }

  .mobile-drawer-footer .btn {
    min-height: 46px;
  }

  .mobile-drawer-logo {
    display: flex;
    align-items: center;
    max-width: 160px;
  }

  .mobile-drawer-logo img {
    display: block;
    width: auto;
    max-width: 160px;
    height: 44px;
    object-fit: contain;
  }
}

/* Consistent catalogue-card content on every public page. */
.product-card { justify-content: flex-start; }

.product-card .product-info,
.product-card .product-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.product-card .product-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 9px 0 7px;
}

.product-card .product-title-link { min-width: 0; }
.product-card .product-card-title-row .product-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

/* Keep the product price on the right of its name. */
.product-card .product-price {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  min-width: max-content;
  margin: 0;
  white-space: nowrap;
}

.product-card .product-footer,
.product-card .product-footer-row {
  display: block;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
}

.product-card .btn-add-cart,
.product-card .add-to-cart-btn {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  margin-top: 0;
  padding: 12px 18px;
}

@media (max-width: 768px) {
  .product-card .btn-add-cart,
  .product-card .add-to-cart-btn {
    min-height: 48px;
    padding: 11px 14px;
    font-size: .72rem;
  }
}

/* Persistent WhatsApp support link (Positioned on the Right) */
.floating-whatsapp {
  position: fixed;
  z-index: 1900;
  bottom: 24px;
  right: 24px;
  left: auto;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 24px rgba(21, 120, 63, .34);
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-whatsapp img {
  width: 100%;
  height: 100%;
  padding: 7px;
  object-fit: contain;
}

.floating-whatsapp:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 28px rgba(21, 120, 63, .42);
}

@media (max-width: 768px) {
  .floating-whatsapp {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: 16px;
    left: auto;
    width: 50px;
    height: 50px;
  }
}
/* =========================================================
   CHECKOUT VERIFICATION
   ========================================================= */
.email-verify-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.email-verify-row .btn {
  min-height: 44px;
  white-space: nowrap;
  padding-inline: 16px;
}

.checkout-field-message {
  min-height: 18px;
  margin: 2px 0 0;
  color: var(--shavi-charcoal-soft);
  font-size: 0.76rem;
  font-weight: 500;
}

@media (max-width: 520px) {
  .email-verify-row {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   SHAVI CHECKOUT - FINAL RESPONSIVE FIX
   ============================================================ */

/* Checkout fields - stable 2 column layout */
.checkout-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

/* Every field must stay inside its grid column */
.checkout-field {
    min-width: 0;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Street address full width */
.checkout-field-wide {
    grid-column: 1 / -1;
}


/* ============================================================
   EMAIL VERIFY
   ============================================================ */

.email-verify-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.email-verify-row input {
    min-width: 0;
}

.email-verify-row .btn {
    min-height: 44px;
    white-space: nowrap;
    padding: 10px 18px;
}


/* OTP message */
.checkout-field-message {
    min-height: 18px;
    margin: 4px 0 0;
    color: var(--shavi-charcoal-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 800px) {

    .checkout-layout {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 520px) {

    .checkout-section {
        padding: 24px 0 60px;
    }

    .checkout-form,
    .checkout-summary {
        padding: 20px 16px;
    }

    /* All checkout fields one below another */
    .checkout-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .checkout-field-wide {
        grid-column: auto;
    }

    .checkout-field {
        width: 100%;
        min-width: 0;
    }

    .checkout-field input,
    .checkout-field textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Email input + Verify button
     * Mobile par button input ke neeche
     */
    .email-verify-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .email-verify-row input {
        width: 100%;
    }

    .email-verify-row .btn {
        width: 100%;
        min-height: 44px;
    }

    /* OTP box bhi properly stack hoga */
    #emailOtpBox .email-verify-row {
        grid-template-columns: 1fr;
    }

    /* PIN and Country vertically stacked */
    #customerPostalCode,
    #customerCountry {
        width: 100%;
    }

    /* Order items mobile */
    .checkout-item {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .checkout-item img {
        width: 44px;
        height: 54px;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .checkout-form,
    .checkout-summary {
        padding: 18px 12px;
    }

    .checkout-heading h1 {
        font-size: 1.6rem;
    }

    .checkout-field input,
    .checkout-field textarea {
        font-size: 0.88rem;
    }

}
/* ============================================================
   CHECKOUT PIN + COUNTRY ALIGNMENT FIX
   ============================================================ */

.checkout-fields {
    align-items: start;
}

.checkout-field {
    align-self: start;
    align-content: start;
}

/* Make every label start at exactly the same position */
.checkout-field > label {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

/* Inputs should have identical spacing from their label */
.checkout-field > input,
.checkout-field > textarea,
.checkout-field > label + input {
    margin-top: 0;
}

/* PIN verification message should NOT push the input down */
#pincodeMessage {
    margin: 0;
    min-height: 0;
    line-height: 1.35;
}

/* Keep PIN and Country inputs same height */
#customerPostalCode,
#customerCountry {
    min-height: 44px;
    height: 44px;
    box-sizing: border-box;
}

/* Desktop: PIN + Country aligned */
@media (min-width: 521px) {
    #customerPostalCode,
    #customerCountry {
        align-self: start;
    }
}

/* Mobile */
@media (max-width: 520px) {
    #customerPostalCode,
    #customerCountry {
        width: 100%;
    }
}
.product-size {
    margin: 5px 0 8px;
    color: var(--shavi-rose-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
/* =========================================================
   SHAVI PRODUCT SIZE STYLES
   ========================================================= */

/* Product listing card size */
.product-size {
    display: inline-block;
    margin: 2px 0 10px;
    padding: 4px 10px;
    background: rgba(229, 193, 120, 0.10);
    border: 1px solid rgba(229, 193, 120, 0.25);
    border-radius: 6px;
    color: var(--gold-crown);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Product detail page size */
.detail-size-control {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 20px 0 24px;
}

.detail-size-control label {
    margin-bottom: 0 !important; /* Removes the bottom spacing */
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap; /* Prevents text from breaking */
}

select.product-detail-size {
    flex: 1; /* Makes the dropdown take the remaining space neatly */
    max-width: 220px;
}

.product-detail-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: 9px 16px;
    background: rgba(229, 193, 120, 0.10);
    border: 1px solid var(--gold-crown);
    border-radius: 8px;
    color: var(--gold-crown);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Mobile */
@media (max-width: 480px) {
    .product-size {
        font-size: 0.65rem;
        padding: 3px 8px;
        margin-bottom: 8px;
    }

    .product-detail-size {
        min-width: 80px;
        padding: 8px 13px;
        font-size: 0.8rem;
    }

    .detail-size-control {
        margin: 16px 0 20px;
    }
}

select.product-detail-size {
    appearance: auto;
    cursor: pointer;
    min-width: 180px;
    padding: 10px 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--gold-crown, #9875bd);
    border-radius: 8px;
    color: var(--gold-crown, #9875bd);
    font: inherit;
    font-weight: 600;
}

select.product-detail-size option {
    background: #fff;
    color: #29232d;
}
/* =========================================================
   CO-CREATIONS GALLERY AUTO-SLIDER
   ========================================================= */
.co-gallery-section {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
  background: var(--shavi-blush-100, #f2eef9);
  border-top: 1px solid var(--shavi-line, #e4dcec);
  border-bottom: 1px solid var(--shavi-line, #e4dcec);
}

.co-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0 20px;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.co-slider-track {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: coSlideAnimation 34s linear infinite;
  will-change: transform;
}

.co-slider-wrapper:hover .co-slider-track {
  animation-play-state: paused;
}

@keyframes coSlideAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.co-slide-card {
  flex: 0 0 290px;
  width: 290px;
  border-radius: var(--radius-md, 14px);
  background: var(--shavi-ivory, #fffdfb);
  border: 1px solid var(--shavi-line, #e4dcec);
  overflow: hidden;
  box-shadow: var(--shavi-shadow-soft, 0 8px 25px rgba(56, 43, 38, 0.06));
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.co-slide-card:hover {
  transform: translateY(-6px);
  border-color: var(--shavi-rose, #a993cc);
  box-shadow: var(--shavi-shadow, 0 16px 35px rgba(56, 43, 38, 0.12));
}

.co-slide-img-box {
  position: relative;
  width: 100%;
  height: 380px;
  background: #f5ede3;
  overflow: hidden;
}

.co-slide-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.co-slide-card:hover .co-slide-img-box img {
  transform: scale(1.06);
}

.co-slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 14, 25, 0.78) 100%);
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.co-slide-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-crown, #e5c178);
  margin-bottom: 4px;
}

.co-slide-name {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .co-gallery-section {
    padding: 50px 0 40px;
  }
  .co-slide-card {
    flex: 0 0 220px;
    width: 220px;
  }
  .co-slide-img-box {
    height: 290px;
  }
  .co-slide-name {
    font-size: 1rem;
  }
  .co-slider-track {
    animation-duration: 24s;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .co-slide-card {
    flex: 0 0 190px;
    width: 190px;
  }
  .co-slide-img-box {
    height: 250px;
  }
}
/* Product Detail Image Swipe & Smooth Transition */
.detail-main-image {
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}

.detail-main-image img {
  pointer-events: none; /* Prevents ghost dragging on desktop */
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* =====================================
   SHAVI PERFUME - CHECKOUT QUANTITY
   PLUS / MINUS BUTTONS
===================================== */

.checkout-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--shavi-line);
}

.checkout-item-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.checkout-item-copy strong {
    color: var(--shavi-charcoal);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.checkout-item-copy > span {
    color: var(--shavi-muted);
    font-size: 0.78rem;
}


/* SHAVI CHECKOUT QUANTITY CONTROLS */

.checkout-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 4px 7px;
    background: #fffaf5;
    border: 1px solid var(--shavi-line);
    border-radius: 30px;
}

.checkout-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--shavi-line);
    border-radius: 50%;
    background: #ffffff;
    color: var(--shavi-charcoal);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-qty-btn:hover:not(:disabled) {
    background: var(--shavi-rose-deep);
    color: #ffffff;
    border-color: var(--shavi-rose-deep);
}

.checkout-qty-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.checkout-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.checkout-qty-value {
    min-width: 18px;
    text-align: center;
    color: var(--shavi-charcoal);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.checkout-item-price {
    white-space: nowrap;
    color: var(--shavi-charcoal);
    font-size: 0.85rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .checkout-qty-control {
        gap: 7px;
        padding: 4px 5px;
    }

    .checkout-qty-btn {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .checkout-item {
        gap: 9px;
    }

    .checkout-item-price {
        font-size: 0.76rem;
    }
}