/* =============================================
   EverydayBeautyProducts — External Stylesheet
   style.css
   1. CSS CUSTOM PROPERTIES
   ============================================= */
/* WebP <picture> wrapper ko layout mein invisible rakhta hai,
   taake existing img CSS rules (width/height/object-fit/flex etc.) bina kisi tabdeeli ke chalte rahein */
picture {
  display: contents;
}

/* Visually hides content while keeping it available to screen readers —
   used for form labels that don't need a visible on-screen label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --primary: #E91E63;
  --primary-light: #FF4081;
  --primary-dark: #C2185B;
  --secondary: #FF80AB;
  --accent: #FCE4EC;
  --accent-2: #F8BBD0;
  --bg: #FFFFFF;
  --bg-soft: #FFF8FA;
  --bg-card: #FFFFFF;
  --text: #1A1A2E;
  --text-muted: #6B6B8A;
  --text-light: #9999BB;
  --border: #F0E6EC;
  --shadow-sm: 0 2px 12px rgba(233,30,99,0.06);
  --shadow-md: 0 8px 32px rgba(233,30,99,0.10);
  --shadow-lg: 0 20px 60px rgba(233,30,99,0.14);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --header-height: 72px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gold: #F4A261;
  --pink: var(--primary);
  --pink-lt: var(--primary-light);
  --pink-dk: var(--primary-dark);
  --pink-pale: var(--accent);
  --text-2: var(--text-muted);
  --text-3: var(--text-light);
  --ff-display: var(--font-display);
  --ff-body: var(--font-body);
  --r-sm: 8px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .3s var(--ease);
  --nav-h: 72px;
}


[data-theme="dark"] {
  --bg: #0F0F1A;
  --bg-soft: #16162A;
  --bg-card: #1C1C2E;
  --text: #F0ECF8;
  --text-muted: #9999BB;
  --text-light: #6666AA;
  --border: #2A2A42;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --accent: #2A1020;
  --accent-2: #3A1530;
}

::selection {
  background: var(--primary-light);
  color: #fff;
}
::-moz-selection {
  background: var(--primary-light);
  color: #fff;
}

/* =============================================
   2. RESET & BASE
   ============================================= */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}
html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}
img { 
  display: block; 
  max-width: 100%; 
  height: auto; 
}
a { 
  text-decoration: none; 
  color: inherit; 
}
button { 
  border: none; 
  cursor: pointer; 
  font-family: var(--font-body); 
}
ul { 
  list-style: none; 
}
input, textarea { 
  font-family: var(--font-body); 
}

/* =============================================
   3. LOADER
   ============================================= */
#loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loader-circle {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-circle::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--secondary);
  animation: spin 1s linear infinite;
}
.loader-circle .loader-logo-icon {
  font-size: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brand logo image — replaces the old emoji icon everywhere.
   Sized with 1em so it automatically matches whatever font-size
   each container already had (no layout changes). */
.logo-icon img,
.loader-logo-icon img,
.popup-emoji img,
.form-success .icon img,
.hero-badge img,
.about-hero-badge img,
.bp-eyebrow img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================
   4. COOKIE BANNER
   ============================================= */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--accent);
  color: var(--text);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: 0.875rem;
  transform: translateY(100%);
  transition: transform var(--transition);
  flex-wrap: wrap;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { flex: 1; min-width: 200px; opacity: 0.9; }
.cookie-banner a { color: var(--text); text-decoration: underline; }
.cookie-btn {
  background: var(--primary);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background var(--transition);
}
.cookie-btn:hover { background: var(--primary-dark); }

/* =============================================
   5. NEWSLETTER POPUP
   ============================================= */
.popup-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
  padding: 20px;
}
.popup-overlay.show { opacity: 1; pointer-events: all; }
.popup-box {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  max-width: 480px; width: 100%;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: scale(0.9);
  transition: transform var(--transition);
}
.popup-overlay.show .popup-box { transform: scale(1); }
.popup-close {
  position: absolute; top: 16px; right: 20px;
  background: var(--accent);
  color: var(--primary);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  transition: background var(--transition);
}
.popup-close:hover { background: var(--primary); color: #fff; }
.popup-emoji { font-size: 3rem; margin-bottom: 12px; }
.popup-box .popup-title { font-family: var(--font-display); font-size: 1.75rem; color: var(--text); margin-bottom: 8px; }
.popup-box p { color: var(--text-muted); margin-bottom: 24px; font-size: 0.95rem; }
.popup-form { display: flex; gap: 8px; flex-wrap: wrap; }
.popup-form input {
  flex: 1; min-width: 180px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 0.9rem;
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.popup-form input:focus { border-color: var(--primary); }
.popup-form button {
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all var(--transition);
}
.popup-form button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.popup-disclaimer { font-size: 0.75rem; color: var(--text-light); margin-top: 12px; }

/* =============================================
   6. HEADER / NAVBAR
   ============================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-height);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: all var(--transition);
}
[data-theme="dark"] .header {
  background: rgba(15,15,26,0.92);
}
.header.scrolled {
  box-shadow: var(--shadow-md);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.logo-text {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  white-space: nowrap;
}
.logo-text span { margin: 0; padding: 0; }
.logo-text .highlight {
  color: var(--primary);
  font-weight: 700;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition);
  position: relative;
}
.nav a:hover, .nav a.active {
  color: var(--primary);
  background: var(--accent);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
}
.btn-icon:hover { background: var(--primary); color: #fff; transform: scale(1.05); }

/* =============================================
   7. HAMBURGER
   ============================================= */
.hamburger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition);
  color: inherit;
}
.hamburger:hover {
  background: var(--primary);
  transform: scale(1.05);
  color: #fff;
}
.hamburger span {
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  display: block;
  opacity: 1;
  transition: 0.3s ease;
}
.hamburger:hover span { background: #fff; }
.hamburger.active { background: var(--primary); color: #fff; }
.hamburger.active span { background: #fff !important; }
.hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =============================================
   8. MOBILE NAV
   ============================================= */
.mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
}
.mobile-nav {
  position: fixed; top: var(--header-height); left: 0; right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 20px;
  transform: translateY(-100%);
  opacity: 0;
  transition: all var(--transition);
  z-index: 999;
}
.mobile-nav.show { transform: translateY(0); opacity: 1; }
.mobile-nav a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
  font-size: 1rem;
}
.mobile-nav a:hover { background: var(--accent); color: var(--primary); }

/* =============================================
   9. SEARCH OVERLAY
   ============================================= */
.search-overlay {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.search-overlay.show { opacity: 1; pointer-events: all; }
.search-box {
  width: 100%; max-width: 640px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
  margin: 0 24px;
}
.search-box input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  color: var(--text);
  outline: none;
}
.search-box input::placeholder { color: var(--text-light); }
.search-btn {
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition);
}
.search-btn:hover { background: var(--primary-dark); }
.search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin-top: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
.search-results.show { display: block; }
.search-result-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  transition: background var(--transition);
}
.search-result-item:hover { background: var(--accent); }
.search-result-item .tag {
  font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--accent);
  color: var(--primary);
}

/* =============================================
   10. CATEGORY BAR
   ============================================= */
.cat-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-height);
  z-index: 100;
  overflow-x: auto;
  scrollbar-width: none;      /* Firefox: hide scrollbar */
  -ms-overflow-style: none;   /* old Edge/IE: hide scrollbar */
}
.cat-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide scrollbar */
.cat-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  /* "safe center": centers the pills when they all fit, but automatically
     behaves like flex-start (no clipping) when they overflow and need to
     scroll — best of both without a media query. */
  justify-content: safe center;
  white-space: nowrap;
  min-height: 56px;
  -webkit-overflow-scrolling: touch;
}
/* Browsers clip the trailing (right) padding of a horizontally-scrolling
   flex container — only the leading padding is respected once you scroll
   to the end. A real flex item doesn't get clipped like padding does, so
   this invisible spacer reserves the same space the left padding gets,
   keeping the last pill off the edge when fully scrolled. */
.cat-bar-inner::after {
  content: "";
  flex: 0 0 16px; /* 16px + the 8px flex gap = 24px, matching the left padding */
  height: 1px;
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.cat-pill:hover, .cat-pill.active {
  background: var(--accent);
  color: var(--primary);
}
.cat-pill .icon { font-size: 1rem; }

/* =============================================
   11. HERO SECTION
   ============================================= */
.hero {
  margin-top: var(--header-height);
  min-height: 90vh;
  display: flex; align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #FFF0F5 0%, #FCE4EC 40%, #F8BBD0 80%, #FFF 100%);
  z-index: 0;
}
[data-theme="dark"] .hero-bg {
  background: linear-gradient(135deg, #1A0A12 0%, #2A1020 40%, #1C1028 80%, #0F0F1A 100%);
}
.hero-shapes {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
}
.hero-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: float 8s ease-in-out infinite;
}
.hero-shape:nth-child(1) {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--primary), transparent);
  top: -100px; right: -100px;
  animation-delay: 0s;
}
.hero-shape:nth-child(2) {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--secondary), transparent);
  bottom: -50px; left: 10%;
  animation-delay: -3s;
}
.hero-shape:nth-child(3) {
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--gold), transparent);
  top: 30%; left: 60%;
  animation-delay: -6s;
}
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(233,30,99,0.1);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(233,30,99,0.2);
}
.hero-badge span { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
}
.hero-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 480px;
  line-height: 1.7;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 32px; margin-top: 48px;
  flex-wrap: wrap;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.hero-stat .label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}
.hero-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.hero-cards-stack {
  position: relative;
  width: 340px; height: 420px;
}
.hero-card-float {
  position: absolute;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.6s ease;
}
.hero-card-float:nth-child(1) {
  width: 200px; top: 0px; left: -50px;
  transform: rotate(-6deg);
  z-index: 1;
  animation: float-card-1 6s ease-in-out infinite;
}
.hero-card-float:nth-child(2) {
  width: 220px; top: 60px; right: 0;
  transform: rotate(4deg);
  z-index: 3;
  animation: float-card-2 7s ease-in-out infinite;
}
.hero-card-float:nth-child(3) {
  width: 190px; bottom: 0; left: 30px;
  transform: rotate(-2deg);
  z-index: 2;
  animation: float-card-3 8s ease-in-out infinite;
}
@keyframes float-card-1 { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-6deg) translateY(-12px)} }
@keyframes float-card-2 { 0%,100%{transform:rotate(4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-16px)} }
@keyframes float-card-3 { 0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(-2deg) translateY(-8px)} }
.hero-card-float img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover;
}
.hero-card-info { padding: 12px; }
.hero-card-info .title { font-size: 0.8rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.hero-card-info .price { font-size: 0.9rem; font-weight: 700; color: var(--primary); margin-top: 4px; }

/* =============================================
   12. SECTION TITLES
   ============================================= */
.section { padding: 80px 24px; }
.section-inner { max-width: 1400px; margin: 0 auto; }
.section-inner-sm {
  max-width: 840px;
  margin: 0 auto;
}
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.section-title em {
  font-style: normal;
  color: var(--primary);
}
.see-all {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 20px;
  border: 2px solid var(--primary);
  border-radius: 50px;
  transition: all var(--transition);
  white-space: nowrap;
}
.see-all:hover { background: var(--primary); color: #fff; }

/* =============================================
   13. BUTTONS
   ============================================= */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(233,30,99,0.3);
  transition: all var(--transition);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(233,30,99,0.4); }
.btn-secondary {
  background: #fff;
  color: var(--primary);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(233,30,99,0.3);
  transition: all var(--transition);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(233,30,99,0.4);
}
.btn-amazon {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, #FF9900, #FFB347);
  color: #232F3E;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.8rem;
  transition: all var(--transition);
  margin-top: auto;
  width: 100%;
}
.btn-amazon:hover {
  background: linear-gradient(135deg, #FFB347, #FF9900);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,153,0,0.3);
}
.btn-amazon svg { flex-shrink: 0; }
.dark-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
}
.dark-toggle:hover { background: var(--primary); color: #fff; }
.back-to-top {
  position: fixed; bottom: 16px; right: 16px; z-index: 500;
  width: 44px; height: 44px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(233,30,99,0.3);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: all var(--transition);
}
.back-to-top.show { opacity: 1; pointer-events: all; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* =============================================
   14. PRODUCT GRID & CARDS
   ============================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
/* List view */
.product-grid.list-view {
  grid-template-columns: 1fr;
}
.product-grid.list-view .product-card {
  flex-direction: row;
}
.product-grid.list-view .product-card-img-wrap {
  width: 180px;
  flex-shrink: 0;
  aspect-ratio: 1;
}
@media (max-width: 560px) {
  .product-grid.list-view .product-card {
    flex-direction: column;
  }
  .product-grid.list-view .product-card-img-wrap {
    width: 100%;
  }
}
.product-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all var(--transition);
  display: flex; flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.product-card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-soft);
}
.product-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-card-img-wrap img { transform: scale(1.08); }
.cat-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid var(--border);
}
[data-theme="dark"] .cat-badge { background: rgba(28,28,46,0.9); }
.prime-badge {
  position: absolute; top: 10px; right: 10px;
  background: #232F3E;
  color: #FF9900;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.discount-badge {
  position: absolute; bottom: 10px; right: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
}
.wishlist-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  transition: all var(--transition);
  opacity: 0;
  cursor: pointer;
}
.product-card:hover .wishlist-btn { opacity: 1; }
.wishlist-btn:hover { background: var(--primary); color: #fff; }
.wishlist-btn.active { background: var(--primary); color: #fff; opacity: 1; }
.product-card-body {
  padding: 14px;
  flex: 1;
  display: flex; flex-direction: column;
}
.product-brand {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.product-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-rating {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.stars { display: flex; gap: 1px; }
.star { font-size: 0.75rem; color: #ddd; }
.star.filled { color: var(--gold); }
.star.half { color: var(--gold); }
.review-count { font-size: 0.72rem; color: var(--text-muted); }
.product-excerpt {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.product-price-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.product-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.product-old-price {
  font-size: 0.8rem;
  color: var(--text-light);
  text-decoration: line-through;
}

/* =============================================
   15. FILTER BAR & DROPDOWN
   ============================================= */
.filter-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.filter-bar label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.filter-select {
  padding: 8px 36px 8px 16px;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E91E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color var(--transition);
}
.filter-select:focus,
.filter-tag:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.25);
}
.filter-select:focus-visible,
.filter-tag:focus-visible {
  outline: none;
}
.filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tag {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-tag:active {
  transform: scale(0.97);
  box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2);
}
.filter-tag:hover, .filter-tag.active {
  border-color: var(--primary);
  background: var(--accent);
  color: var(--primary);
}
.custom-dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 150px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 100%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
}
.custom-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(5px);
}
.dropdown-item {
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: 0.2s;
}
.dropdown-item:hover {
  background: var(--accent);
  color: var(--primary);
}
.dropdown-item.active {
  background: rgba(233, 30, 99, 0.12);
  color: var(--primary);
  font-weight: 700;
  position: relative;
}

/* =============================================
   16. CATEGORY SHOWCASE
   ============================================= */
.cat-showcase {
  background: var(--bg-soft);
  padding: 80px 24px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.cat-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: block;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  background: var(--accent);
}
.cat-card:hover .cat-icon-wrap i { color: #fff; }
.cat-icon-wrap {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin: 0 auto 16px;
  transition: all var(--transition);
}
.cat-card:hover .cat-icon-wrap { background: var(--primary); }
.cat-card-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cat-card-count { font-size: 0.78rem; color: var(--text-muted); }

/* =============================================
   17. BLOG SECTION
   ============================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.blog-card-body { padding: 20px; }
.blog-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.author-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}
.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-read-more {
  display: inline-flex; 
  align-items: center; 
  gap: 6px;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  transition: gap var(--transition);
}
.blog-card:hover .blog-read-more { gap: 10px; }

/* =============================================
   18. NEWSLETTER SECTION
   ============================================= */
.newsletter-section {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.newsletter-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.newsletter-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.newsletter-section p { color: rgba(255,255,255,0.8); margin-bottom: 32px; font-size: 1rem; }
.newsletter-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.newsletter-form p { font-size:.83rem; color:var(--text-2); margin-bottom:14px }
.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 50px;
  border: none;
  font-size: 0.9rem;
  background: var(--accent);
  color: var(--text);
  outline: none;
}
.newsletter-form button {
  background: var(--text);
  color: var(--accent);
  padding: 14px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all var(--transition);
}
.newsletter-form button:hover { background: var(--accent); color: var(--text); }

/* =============================================
   19. TRUST BAR
   ============================================= */
.trust-bar { padding: 30px; }
.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.trust-item {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: 0.2s ease;
}
.trust-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.trust-icon {
  color: var(--primary);
  font-size: 16px;
  min-width: 20px;
}

/* ===== Trusted Brands Marquee ===== */
.brand-marquee-section {
  padding: 36px 0;
  background: var(--accent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.brand-marquee-heading {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.brand-marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.brand-marquee-wrap::before,
.brand-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.brand-marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-soft), transparent); }
.brand-marquee-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg-soft), transparent); }

.brand-marquee-track {
  display: flex;
  width: max-content;
  animation: brandMarqueeScroll 60s linear infinite;
}
.brand-marquee-track:hover { animation-play-state: paused; }

.brand-marquee-item {
  flex-shrink: 0;
  width: 140px;
  margin: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.brand-marquee-item img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.brand-marquee-item img:hover { filter: grayscale(0%); opacity: 1; }

@keyframes brandMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .brand-marquee-item { width: 110px; margin: 0 18px; }
  .brand-marquee-item img { max-height: 32px; }
}

/* =============================================
   20. FEATURED BANNER
   ============================================= */
.featured-banner {
  margin-bottom: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #FFF0F5 50%, var(--accent-2) 100%);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--border);
}
[data-theme="dark"] .featured-banner {
  background: linear-gradient(135deg, var(--accent) 0%, #2A1020 50%, var(--accent) 100%);
}
.featured-banner-eyebrow {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 12px;
}
.featured-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.featured-banner p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 24px; }
.featured-banner-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-soft);
}
.featured-banner-img img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   21. RECENTLY VIEWED
   ============================================= */
.recently-viewed { display: none; }
.recently-viewed.has-items { display: block; }

/* =============================================
   22. FOOTER
   ============================================= */
.footer {
  background: var(--text);
  color: rgba(255,255,255,0.75);
  padding: 60px 24px 0;
}
[data-theme="dark"] .footer { background: #080812; }
.footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.footer-logo .logo-icon {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.beauty-text {
  color: var(--primary);
  font-size: 1.4rem !important;
  font-weight: 700;
}
.footer-desc { font-size: 0.875rem; line-height: 1.7; margin-bottom: 24px; max-width: 280px; }
.social-links { display: flex; gap: 10px; }
.social-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transition);
  color: #fff;
  text-decoration: none;
}
.social-link:hover { background: var(--primary); }
.footer-col h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  transition: color var(--transition);
  text-decoration: none;
}
.footer-col a:hover { color: var(--secondary); }
.footer-newsletter input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.875rem;
  margin-bottom: 8px;
  outline: none;
  transition: border-color var(--transition);
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.4); }
.footer-newsletter input:focus { border-color: var(--secondary); }
.footer-newsletter button {
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background var(--transition);
}
.footer-newsletter button:hover { background: var(--primary-dark); }
.footer-bottom {
  max-width: 1400px; margin: 40px auto 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-bottom-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom-links a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: var(--secondary); }
.amazon-disclosure {
  max-width: 1150px; margin: 0 auto;
  padding: 16px 0 24px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.6;
  text-align: center;
}

/* Short affiliate disclosure shown at the TOP of blog & shop pages,
   in addition to the full disclosure already in the footer — so
   readers see it before they scroll past any affiliate links. */
.top-disclosure {
  margin-top: var(--header-height);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 10px 16px;
  line-height: 1.5;
}
.top-disclosure a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}
/* The hero sections that normally sit right under the fixed header already
   push themselves down with their own margin-top: var(--header-height).
   When top-disclosure is the element right before them, it has already
   done that job — so cancel the hero's margin-top here to avoid a double gap. */
.top-disclosure + .shop-hero,
.top-disclosure + .bp-hero,
.top-disclosure + .post-hero,
.top-disclosure + .page-hero {
  margin-top: 0;
}

/* =============================================
   23. BREADCRUMB
   ============================================= */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 16px 0;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { opacity: 0.4; }

/* =============================================
   24. ANIMATIONS & UTILITIES
   ============================================= */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-soft) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-soft) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =============================================
   25. RESPONSIVE MEDIA QUERIES
   ============================================= */

/* Tablet & below (max 900px) */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-sub { margin: 0 auto 36px; }
  .hero-ctas { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .nav { display: none; }
  .hamburger { display: flex; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Medium screens (max 1200px) */
@media (max-width: 1200px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* Small tablets (max 1100px) */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}

/* Mobile landscape / large phones (max 768px) */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-banner p {
    width: 100%;
    margin-bottom: 10px;
  }
  .cookie-btn {
    width: 100%;
    text-align: center;
  }
  .popup-box {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .popup-emoji {
    font-size: 2.2rem;
    margin-bottom: 10px;
  }
  .popup-box .popup-title {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  .popup-box p {
    font-size: 0.85rem;
    margin-bottom: 18px;
  }
  .popup-form {
    flex-direction: column;
    gap: 10px;
  }
  .popup-form input {
    width: 100%;
    min-width: unset;
    text-align: center;
  }
  .popup-form button {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
  }
  .popup-disclaimer {
    font-size: 0.7rem;
    margin-top: 10px;
  }
  /* Compact search button on mobile */
  .search-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
  }
  .search-btn::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    color: #fff;
  }
  .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .search-box > i { display: none; }
  /* Abbreviate logo text on mobile */
  .header .logo-text {
    font-size: 0;
  }
  .header .logo-text::after {
    content: "EBP";
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
  }
}

/* Mobile portrait (max 640px) */
@media (max-width: 640px) {
  .section { padding: 60px 16px; }
  .cat-showcase { padding: 60px 16px; }
  .footer-inner { gap: 24px; grid-template-columns: 1fr 1fr; }
  .newsletter-form { flex-direction: column; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-banner { grid-template-columns: 1fr; }
  .cat-bar {
    scroll-snap-type: x mandatory;
    /* Without this, snap-align:start on the pills snaps the first pill
       flush against the very edge of the bar, ignoring the 12px padding
       on .cat-bar-inner — this is what was making "All Products" look
       glued to the left edge with no space. */
    scroll-padding-left: 12px;
  }
  .cat-bar-inner {
    justify-content: flex-start;
    margin: 0;
    padding: 0 12px;
    /* NOTE: overflow-x removed here on purpose — .cat-bar (the parent)
       already scrolls. Having both create a nested scroll container whose
       inner scrollbar wasn't hidden, which is the bar users were seeing
       under the pills, and it was also eating the left padding.
       margin reset to 0 here too: "margin: 0 auto" on content wider than
       its container makes the browser auto-scroll to center it, which was
       also silently eating the left padding/first pill. */
  }
  .cat-bar-inner::after {
    flex-basis: 4px; /* 4px + the 8px flex gap = 12px, matching the left padding */
  }
  .cat-bar-inner a,
  .cat-bar-inner button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .trust-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { flex-direction: column; text-align: center; justify-content: center; }
  .trust-icon { margin-bottom: 6px; font-size: 22px; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* Very small phones (max 420px) */
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; }
}


/* ==================================================
   Shop Page
================================================== */

/* Shop Hero Banner */
.shop-hero {
  margin-top: var(--header-height);
  background: linear-gradient(135deg, #FFF0F5, #FCE4EC, #F8BBD0);
  padding: 40px 24px;
}
[data-theme="dark"] .shop-hero {
  background: linear-gradient(135deg, #1A0A12, #2A1020, #1A0A12);
}
.shop-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 10px;
}
.breadcrumb a {
  color: var(--text-muted);
}
.breadcrumb a:hover {
  color: var(--primary);
}
.shop-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.shop-hero h1 em {
  font-style: normal;
  color: var(--primary);
}
.shop-hero p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 6px;
  line-height: 1.7;
  max-width: 560px;
}
/* SEARCH BAR (INLINE) */
.search-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search-inline input {
  padding: 11px 18px;
  border: 2px solid var(--accent-2);
  border-radius: 50px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  width: 280px;
  transition: border-color var(--transition);
}
.search-inline input:focus {
  border-color: var(--primary);
}
.search-inline button {
  background: var(--primary);
  color: #fff;
  padding: 11px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background var(--transition);
}
.search-inline button:hover {
  background: var(--primary-dark);
}
/* Main Layout */
.shop-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
}
/* Sidebar */
.sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    z-index: 9999;
    overflow-y: auto;
    transition: left 0.3s ease;
    border-radius: 0;
  }
  .sidebar.show {
    left: 0;
  }
}
.close-sidebar {
  position: absolute;
  top: 15px;
  right: 25px;
  background: var(--accent);
  font-size: 15px;
  cursor: pointer;
  color: var(--text);
  padding: 5px 10px;
  border-radius: 5px;
}
@media (min-width: 961px) {
  .close-sidebar {
    display: none;
  }
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}
.sidebar-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
  margin-top: 24px;
}
.sidebar-title:first-child {
  margin-top: 0;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--text-muted);
  transition: all var(--transition);
}
.filter-option:hover {
  background: var(--accent);
  color: var(--primary);
}
.filter-option.active {
  background: var(--accent);
  color: var(--primary);
  font-weight: 600;
}
.filter-option input[type="checkbox"] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.price-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  text-align: center;
}
.price-input:focus {
  border-color: var(--primary);
}
.apply-btn {
  width: 100%;
  background: var(--primary);
  color: #fff;
  padding: 9px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 10px;
  transition: background var(--transition);
}
.apply-btn:hover {
  background: var(--primary-dark);
}
.clear-filters {
  width: 100%;
  background: transparent;
  color: var(--text-muted);
  padding: 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.82rem;
  margin-top: 6px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.clear-filters:hover {
  border-color: var(--primary);
  color: var(--primary);
}
/* Products Area */
.products-area {
}
/* Toolbar */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* Mobile screens (max-width 768px) */
@media (max-width: 768px) {
  .shop-toolbar {
    justify-content: flex-end;  /* saari cheezein right side */
  }
}
.results-count {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}
.results-count strong {
  color: var(--text);
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 420px) {
  .toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
}
.sort-select {
  padding: 9px 32px 9px 14px;
  border: 2px solid var(--border);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E91E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--transition);
}
.sort-select:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  color: var(--text);
}
.view-toggle {
  display: flex;
  gap: 4px;
}
.view-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transition);
  cursor: pointer;
}
.view-btn.active,
.view-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--accent);
}
/* Active Filter Tags */
.active-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-tag-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(233, 30, 99, 0.2);
}
.filter-tag-active button {
  background: none;
  color: var(--primary);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-weight: 700;
}
/* No results */
.no-results {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-muted);
}
.no-results .icon {
  font-size: 3rem;
  margin-bottom: 16px;
}
.no-results h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 8px;
}
/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
  padding-bottom: 48px;
}
.page-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
}
.page-btn:hover,
.page-btn.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.page-btn.prev,
.page-btn.next {
  width: auto;
  padding: 0 16px;
  font-size: 0.82rem;
}
/* Mobile Filter Btn */
.mobile-filter-btn {
  display: none;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
  gap: 6px;
  align-items: center;
}
@media (max-width: 960px) {
  .mobile-filter-btn {
    display: flex;
  }
}

/* ============================================
   CONTACT Page
   ============================================ */
.page-hero {
  margin-top: var(--header-height);
  background: linear-gradient(135deg, #FFF0F5, #FCE4EC, #F8BBD0);
  padding: 60px 24px;
  text-align: center;
}
[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, #1A0A12, #2A1020, #1A0A12);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--primary);
}
.page-hero p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto;
}
/* ============================================
   CONTACT LAYOUT (2-column: info + form)
   ============================================ */
.contact-section {
  padding: 60px 24px;
}
.contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
/* Responsive: switch to single column below 800px */
@media (max-width: 800px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* Left side: contact info & cards */
.contact-info h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.contact-info>p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 32px;
}
/* Individual contact method cards */
.info-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 12px;
  transition: all var(--transition);
}
.info-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  background: var(--accent);
}
.info-icon {
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.info-card-body h4 {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.info-card-body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.info-card-body a {
  color: var(--primary);
}
/* Social buttons row */
.social-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.social-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid var(--border);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all var(--transition);
  background: transparent;
  cursor: pointer;
}
.social-contact-btn:hover {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--primary);
}
/* Right side: contact form card */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Mobile: form fields stack */
@media (max-width: 500px) {
  .form-row {
    grid-template-columns: 1fr;
    margin-bottom: 0;           /* remove the row's bottom margin */
    gap: 0;
  }
  .form-row .form-group:last-child {
    margin-bottom: 16px;        /* keep bottom margin for the last field in the row */
  }
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font-body);
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
}
.form-group textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
/* Custom dropdown arrow */
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E91E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
/* Checkbox / consent line */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  cursor: pointer;
}
.form-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
}
.form-check a {
  color: var(--primary);
}
/* Honeypot spam-trap field: kept in the DOM and tab-order-excluded,
   but moved off-screen so only bots (which don't render CSS) fill it in. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile {
  margin: 8px 0 16px;
}
/* Submit button with gradient */
.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 14px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(233, 30, 99, 0.3);
}
/* Success message after form submission (initially hidden) */
.form-success {
  display: none;
  text-align: center;
  padding: 32px;
  background: var(--accent);
  border-radius: var(--radius-lg);
}
.form-success .icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.form-success h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.form-success p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ============================================
   BUYING GUIDE SECTION — FIXED + IMPROVED
   ============================================ */

.buying-guide {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* prevent any child from bleeding out */
}
 
/* ── Headings ── */
.buying-guide h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  word-break: break-word;
}
 
.buying-guide h3 {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  font-weight: 700;
  color: var(--text);
  margin: 22px 0 8px;
  word-break: break-word;
}
 
.buying-guide h4 {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
 
.buying-guide p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 14px;
  font-size: 0.93rem;
  word-break: break-word;
}
 
/* ── Lists ── */
.buying-guide ul,
.buying-guide ol {
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
  list-style: revert;
}
 
.buying-guide ul li,
.buying-guide ol li {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  padding-left: 0.2rem;
}
 
.buying-guide ul li::marker {
  color: var(--primary);
}
 
.buying-guide ol li::marker {
  color: var(--primary);
  font-weight: 600;
}
 
/* ============================================
   GUIDE GRID (skin type / layer cards)
   ============================================ */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}
 
.guide-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 18px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  min-width: 0; /* critical — prevents grid blowout */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
 
.guide-card .icon {
  font-size: 1.7rem;
  margin-bottom: 8px;
  line-height: 1;
}
 
.guide-card h4 {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
 
.guide-card p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}
 
/* ============================================
   INFO BOX  (Pro Tip / Bottom Line)
   ============================================ */
.info-box {
  background: var(--accent);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text);
  margin: 1.5rem 0;
  box-sizing: border-box;
  width: 100%;
}
 
[data-theme="dark"] .info-box {
  background: var(--accent);
  border-left-color: var(--primary-light);
}
 
.info-box strong {
  color: var(--primary-dark);
}
 
[data-theme="dark"] .info-box strong {
  color: var(--secondary);
}
 
/* ============================================
   ROUTINE GRID  (Morning / Night)
   ============================================ */
.routine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
 
.routine-card {
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--accent) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-sizing: border-box;
  min-width: 0;
}
 
.routine-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 0.75rem;
}
 
[data-theme="dark"] .routine-card h4 {
  color: var(--secondary);
}
 
.routine-card ol {
  padding-left: 1.3rem;
  list-style: decimal;
  margin-bottom: 0;
}
 
.routine-card ol li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 0.25rem;
}
 
.routine-card ol li::marker {
  color: var(--primary);
  font-weight: 600;
}
 
/* ============================================
   STEP BOX  (Routine steps)
   ============================================ */
.step-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
 
.step-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  border-radius: 4px 0 0 4px;
}
 
.step-box h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.6rem;
}
 
.step-box p {
  font-size: 0.93rem;
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
 
.step-box p:last-child {
  margin-bottom: 0;
}
 
.step-box ul,
.step-box ol {
  padding-left: 1.3rem;
  margin-bottom: 0;
  list-style: revert;
}
 
.step-box ul li,
.step-box ol li {
  font-size: 0.91rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
 
.step-box ul li::marker {
  color: var(--primary);
}
 
/* ============================================
   TIP BOX  (nested inside step-box)
   ============================================ */
.tip-box {
  background: var(--accent-2);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text);
  margin-top: 0.75rem;
  box-sizing: border-box;
}
 
[data-theme="dark"] .tip-box {
  background: rgba(255, 128, 171, 0.1);
  border: 1px solid rgba(255, 128, 171, 0.2);
}
 
.tip-box strong {
  color: var(--primary-dark);
}
 
[data-theme="dark"] .tip-box strong {
  color: var(--secondary);
}
 
/* ============================================
   TABLES
   ============================================ */
.buying-guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1.25rem 0 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  table-layout: fixed; /* prevents table expanding beyond parent */
}
 
.buying-guide table thead {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
}
 
.buying-guide table thead th {
  padding: 0.8rem 0.9rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  word-break: break-word;
}
 
.buying-guide table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
 
.buying-guide table tbody tr:last-child {
  border-bottom: none;
}
 
.buying-guide table tbody tr:nth-child(even) {
  background: var(--bg-soft);
}
 
.buying-guide table tbody tr:hover {
  background: var(--accent);
}
 
.buying-guide table tbody td {
  padding: 0.7rem 0.9rem;
  color: var(--text);
  vertical-align: top;
  line-height: 1.55;
  word-break: break-word;
}
 
.buying-guide table tbody td:first-child {
  font-weight: 600;
  color: var(--primary-dark);
}
 
[data-theme="dark"] .buying-guide table tbody td:first-child {
  color: var(--secondary);
}
 
/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
 
/* Tablet */
@media (max-width: 768px) {
  .buying-guide {
    padding: 28px 22px;
    border-radius: var(--radius-md);
  }
 
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* Mobile */
@media (max-width: 600px) {
  .buying-guide {
    padding: 20px 16px;
    border-radius: var(--radius-sm);
  }
 
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
 
  .routine-grid {
    grid-template-columns: 1fr;
  }
 
  .step-box {
    padding: 1rem 1rem 1rem 1.1rem;
  }
 
  /* Scrollable tables on small screens */
  .buying-guide table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    table-layout: auto; /* auto for scrollable mode */
    font-size: 0.82rem;
  }
 
  .buying-guide table thead th,
  .buying-guide table tbody td {
    min-width: 100px; /* keeps columns readable */
    white-space: normal;
  }
}
 
/* Very small phones */
@media (max-width: 380px) {
  .buying-guide {
    padding: 16px 12px;
  }
 
  .guide-card {
    padding: 14px;
  }
}

/* ============================================
   FAQ SECTION (collapsible accordion)
   ============================================ */
.faq-section {
  padding: 60px 24px;
  background: var(--bg-soft);
}
.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.section-title-faq {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 32px;
}
.section-title-faq em {
  font-style: normal;
  color: var(--primary);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--text);
  background: var(--bg-card);
  transition: background var(--transition);
}
.faq-q:hover {
  background: var(--accent);
}
.faq-q .arrow {
  font-size: 0.8rem;
  transition: transform var(--transition);
}
/* Rotate arrow when question is open */
.faq-item.open .faq-q .arrow {
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  background: var(--bg-card);
}
.faq-item.open .faq-a {
  max-height: 200px;
  padding: 18px;
}
.faq-section-cat {
  padding: 60px 0px;
}
.faqs-section-cat {
  padding: 60px 0px 0px 0px;
}
.faq-inner-cat {
  margin: 0 auto;
}
.section-title-faq-cat {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 32px;
}
.section-title-faq-cat em {
  font-style: normal;
  color: var(--primary);
}
.section-eyebrow-cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.section-eyebrow-cat::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.disinfo-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: clamp(0.86rem, 1.8vw, 0.92rem);
  color: var(--text-muted);
  margin: 1rem 0;
  line-height: 1.75;
}
.disinfo-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700;
  color: var(--text);
  padding-bottom: 8px;
}
/* Fix contact page mobile layout */
@media (max-width: 600px) {
  .contact-section {
    overflow-x: hidden;
  }
  .contact-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .form-card {
    padding: 28px 20px !important;  /* reduce padding on small screens */
  }
  .contact-info,
  .form-card {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* ensure all inputs stay inside */
  .form-group input,
  .form-group select,
  .form-group textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  .info-card {
    flex-wrap: wrap;           /* allows icon and text to stack if needed */
    gap: 12px;
    padding: 16px;             /* slightly reduce padding for more space */
  }
  .info-card-body {
    flex: 1;
    min-width: 0;              /* allows flex child to shrink below content size */
    word-break: break-word;    /* break long words/emails */
    overflow-wrap: break-word; /* modern equivalent */
  }
  .info-card-body p,
  .info-card-body a {
    word-break: break-all;     /* specifically for email addresses and long links */
    display: inline-block;     /* ensures breaking works */
    max-width: 100%;
  }
  .social-row {
    justify-content: center;     /* center the buttons */
    gap: 8px;                    /* reduce gap for tighter fit */
  }
  .social-contact-btn {
    padding: 8px 14px;           /* smaller padding on mobile */
    font-size: 0.75rem;          /* slightly smaller text */
    gap: 6px;
    flex: 0 1 auto;              /* allow buttons to shrink if needed */
  }
}
/* Custom Dropdown Styles */
.custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color var(--transition);
}
.select-trigger:hover,
.custom-select.open .select-trigger {
  border-color: var(--primary);
}
.select-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-trigger i {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform var(--transition);
}
.custom-select.open .select-trigger i {
  transform: rotate(180deg);
}
.select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  box-shadow: var(--shadow-md);
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
/* Custom scrollbar for dropdown options */
.select-options::-webkit-scrollbar {
  width: 3px;
}
.select-options::-webkit-scrollbar-track {
  background: transparent);
  border-radius: 10px;
}
.select-options::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}
.select-options::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}
.custom-select.open .select-options {
  display: block;
}
.select-option {
  padding: 10px 16px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.select-option:hover {
  background: var(--accent);
  color: var(--primary);
}
.select-option.selected {
  background: var(--accent);
  color: var(--primary);
  font-weight: 600;
}
/* Ensure hidden select doesn't affect layout */
.custom-select select {
  display: none;
}

/* ==================================================
   About Page
================================================== */
.about-hero {
  margin-top: var(--header-height);
  background: linear-gradient(135deg, #FFF0F5 0%, #FCE4EC 40%, #F8BBD0 80%, #FFF 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .about-hero {
  background: linear-gradient(135deg, #1A0A12, #2A1020, #1A0A12);
}
.about-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(233, 30, 99, 0.1);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
  border: 1px solid rgba(233, 30, 99, 0.2);
}
.about-hero-badge span { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 16px;
}
.about-hero h1 em {
  font-style: normal;
  color: var(--primary);
}
.about-hero p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 500px;
}
.about-hero-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.about-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- 7. STATS BAR ---------- */
/* Statistics section with numbers and labels */
.stats-bar {
  background: var(--primary);
  padding: 40px 24px;
}
.stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item .num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stat-item .label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6px;
  font-weight: 500;
}
.section-desc {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 620px;
}
/* ---------- 9. MISSION & VALUES GRID ---------- */
/* Two column layout with mission image and values list */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.mission-img {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.mission-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.value-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.value-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.value-icon {
  width: 44px;
  height: 44px;
  background: var(--accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: background var(--transition);
}
.value-item:hover .value-icon {
  background: var(--primary);
}
.value-body h4 {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.value-body p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}
/* ---------- 10. PROCESS SECTION ---------- */
/* How we work - step by step cards */
.process-section {
  background: var(--bg-soft);
  padding: 80px 24px;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.process-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: all var(--transition);
}
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.process-number {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.process-icon {
  font-size: 2.2rem;
  margin: 12px 0 14px;
}
.process-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 8px;
}
.process-card p {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}
/* ---------- 11. TEAM SECTION ---------- */
/* Team member cards with avatar, name, role and bio */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: all var(--transition);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.team-avatar {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-body {
  padding: 20px;
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.team-role {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.team-bio {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}
/* ---------- 12. CALL TO ACTION SECTION ---------- */
/* Prominent CTA banner with buttons */
.about-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  padding: 80px 24px;
  text-align: center;
}
.about-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.about-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* White button variant */
.btn-white {
  background: #fff;
  color: var(--primary);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* Outline white button variant */
.btn-outline-white {
  background: transparent;
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-white:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
/* =========================
   RESPONSIVE STYLES
========================= */

/* Tablets & Small Laptops */
@media (max-width: 992px) {
  /* Hero Section */
  .about-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .about-hero p {
    margin-inline: auto;
  }
  /* Grids */
  .mission-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Large Mobile Devices */
@media (max-width: 768px) {
  /* Mission Section */
  .mission-grid {
    grid-template-columns: 1fr;
  }

  /* Stats */
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
/* Mobile Devices */
@media (max-width: 576px) {
  /* Single Column Layouts */
  .process-grid,
  .team-grid,
  .stats-inner {
    grid-template-columns: 1fr;
  }
  /* Hero Text */
  .about-hero h1 {
    font-size: 2rem;
    line-height: 1.2;
  }
  .about-hero p {
    font-size: 1rem;
  }
  /* Cards */
  .mission-card,
  .process-card,
  .team-card {
    padding: 1.25rem;
  }
}
/* Extra Small Devices */
@media (max-width: 400px) {
  .about-hero h1 {
    font-size: 1.7rem;
  }
  .about-hero p {
    font-size: 0.95rem;
  }
  .stats-inner {
    gap: 0.75rem;
  }
}

/* ==================================================
   Disclosure Page
================================================== */
.legal-section {
  padding: 60px 24px;
}
.legal-inner {
  max-width: 840px;
  margin: 0 auto;
}
.legal-toc {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 40px;
}
.legal-toc h3 {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 12px;
}
.legal-toc ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: decimal;
}
.legal-toc ol li a {
  font-size: 0.85rem;
  color: var(--primary);
}
.updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 32px;
}
.legal-body h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.legal-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal-body p {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 14px;
}
.legal-body ul {
  margin: 0 0 16px 20px;
  list-style: disc;
}
.legal-body ul li {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 6px;
}
.legal-body a {
  color: var(--primary);
  text-decoration: underline;
}
.legal-body strong {
  color: var(--text);
}
.callout {
  background: var(--accent);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.92rem;
  color: var(--text);
}
.disclosure-box {
  background: linear-gradient(135deg, var(--accent), #FFF0F5);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 32px 0;
  text-align: center;
}
[data-theme="dark"] .disclosure-box {
  background: linear-gradient(135deg, var(--accent), #2A1020);
}
.disclosure-box .icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.disclosure-box h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.disclosure-box p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}
.qa-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.qa-item h4 {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qa-item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* =============================================
   404 ERROR PAGE
   ============================================= */
.error-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: calc(var(--header-height) + 24px);
  background: linear-gradient(135deg, #FFF0F5 0%, #FCE4EC 50%, #FFF 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}
[data-theme="dark"] .error-page {
  background: linear-gradient(135deg, #1A0A12, #2A1020, #0F0F1A);
}
.error-bg-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
}
.error-bg-shape:nth-child(1) {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary), transparent);
  top: -200px;
  right: -150px;
}
.error-bg-shape:nth-child(2) {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--secondary), transparent);
  bottom: -100px;
  left: -100px;
}
.error-inner {
  text-align: center;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.error-404 {
  font-family: var(--font-display);
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.15;
  user-select: none;
}
.error-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.error-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* BLUEPRINT CTA SECTION */
.blueprint-cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), #FFF0F5);
  padding: 80px 24px;
  text-align: center;
}
[data-theme="dark"] .blueprint-cta-section {
  background: linear-gradient(135deg, var(--accent), #2A1020);
}
.blueprint-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(233,30,99,0.28) 0%, transparent 65%);
  pointer-events: none;
}
.blueprint-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 5vh;
}
.blueprint-cta-badge {
  display: inline-block;
  background: var(--primary);
  border: 1px solid rgba(233,30,99,0.45);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 22px;
}
.blueprint-cta-section h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 14px;
  font-family: var(--font-display);
}
.blueprint-cta-section p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.blueprint-cta-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.blueprint-cta-stat {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid var(--border);
}
.blueprint-cta-stat:last-child { border-right: none; }
.blueprint-cta-stat strong {
  display: block;
  font-size: 1.6rem;
  color: var(--primary-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.blueprint-cta-stat span {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.blueprint-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.blueprint-btn-read,
.blueprint-btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none !important;
  white-space: nowrap;
}
.blueprint-btn-read {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(233,30,99,0.3);
  transition: all var(--transition);
}
.blueprint-btn-read:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(233,30,99,0.4); }
.blueprint-btn-download {
  background: #fff;
  color: var(--primary);
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(233,30,99,0.3);
  transition: all var(--transition);
}
.blueprint-btn-download:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(233,30,99,0.4);
}
@media (max-width: 640px) {
  .blueprint-cta-section { padding: 100px 20px; }
  .blueprint-cta-stats { flex-wrap: wrap; }
  .blueprint-cta-stat { flex: 0 0 45%; border-right: none; margin-bottom: 16px; }
  .blueprint-cta-buttons { flex-direction: column; align-items: stretch; }
  .blueprint-btn-read,
  .blueprint-btn-download { width: 100%; }
}