/* World of Seasoning — Main Stylesheet */
/* Color palette: Deep Crimson, Bright Red, Gold, Cream — matched to site logo */

/* Logo palette: Deep Crimson #6B0000, Bright Red #C41E3A, Gold #D4A017, Cream #F5EDE0 */
:root {
  /* === WOS BRAND PALETTE — BRIGHT & WARM === */
  --crimson: #B22222;          /* firebrick red — primary brand */
  --crimson-light: #C0392B;    /* bright crimson for hovers */
  --red-bright: #E74C3C;       /* vivid red accent */
  --red-vivid: #FF4500;        /* orange-red energy */
  --gold: #E8A020;             /* warm amber gold */
  --gold-light: #F5B732;       /* bright gold hover */
  --cream: #FFF8F0;            /* warm white */
  --cream-dark: #FFF0E0;       /* soft peach cream */

  /* === NEUTRALS === */
  --charcoal: #2C1810;         /* warm dark brown (not pure black) */
  --charcoal-light: #3D2010;
  --black: #1A0800;
  --white: #FFFFFF;
  --green-herb: #27AE60;       /* bright herb green */

  /* === SEMANTIC ALIASES === */
  --warm-brown: var(--crimson);
  --warm-brown-light: var(--crimson-light);
  --beige: var(--cream);
  --beige-dark: var(--cream-dark);
  --red-spice: var(--red-bright);
  --text-primary: #2C1810;
  --text-secondary: #6B3A2A;
  --text-muted: #9B6A4A;
  --border: #F0D8C0;

  --shadow: 0 4px 20px rgba(178,34,34,0.10);
  --shadow-hover: 0 8px 32px rgba(178,34,34,0.20);
  --radius: 8px;
  --radius-lg: 16px;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --transition: all 0.25s ease;
  --section-v:    72px;
  --section-v-sm: 48px;
  --section-v-xs: 40px;
  --deep-red:          #B22222;
  --card-radius:       14px;
  --card-shadow:       0 4px 24px rgba(178,34,34,0.10);
  --card-shadow-hover: 0 12px 40px rgba(178,34,34,0.20);
  --section-bg-cream:  #FFF8F0;
  --section-bg-warm:   #FFF3E6;
  --section-bg-spice:  #FEF0E0;
  --section-bg-dark:   #2C1810;
  --gold-gradient:     linear-gradient(135deg,#E8A020 0%,#F5B732 100%);
  --nav-bg:            #2C1810;
  --footer-bg:         #1A0800;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--white);
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition); border: none; letter-spacing: 0.3px; }
.btn-primary { background: var(--warm-brown); color: var(--white); }
.btn-primary:hover { background: var(--warm-brown-light); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--warm-brown); border: 2px solid var(--warm-brown); }
.btn-outline:hover { background: var(--warm-brown); color: var(--white); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: var(--black); }
.btn-sm { padding: 8px 18px; font-size: 0.82rem; }
.btn-lg { padding: 16px 40px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

/* TOP BAR */
.top-bar {
  background: var(--crimson);
  color: var(--beige);
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}

/* NAVBAR */
.navbar {
  background: #1C1208;
  border-bottom: 1px solid rgba(212,160,23,.18);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 4px 24px rgba(0,0,0,.28);
  padding: 0 24px;
  min-height: 68px;
}
.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 80px;
}
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}
.logo-main { font-family: var(--font-serif); font-size: 1rem; color: var(--charcoal); }
.logo-accent { font-family: var(--font-serif); font-size: 1.3rem; color: var(--warm-brown); font-weight: 700; }

/* LOGO IMAGE */
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img {
  height: 87px;
  width: 87px;
  object-fit: contain;
  border-radius: 50%;
  transition: var(--transition);
  filter: drop-shadow(0 2px 6px rgba(107,0,0,0.25));
}
.nav-logo-img:hover { transform: scale(1.05); filter: drop-shadow(0 4px 12px rgba(107,0,0,0.4)); }

/* FOOTER LOGO */
.footer-logo-img {
  height: 108px;
  width: 108px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 14px;
  filter: brightness(1.1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;       /* Don't grow — let right side stay visible */
  overflow: visible;    /* Keep dropdowns accessible */
  min-width: 0;
}
.nav-links > li {
  position: relative;
}
.nav-links > li > a {
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.nav-links > li > a:hover { background: var(--beige); color: var(--warm-brown); }
/* Desktop-only dropdown hover animation (visibility:hidden should NOT affect mobile) */
@media (min-width: 901px) {
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #3D2010;
  border: 1px solid rgba(212,160,23,.14);
  border-radius: 10px;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.42), 0 1px 0 rgba(212,160,23,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 200;
  padding: 10px 0;
}
.nav-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
} /* end @media min-width:901px */
.dropdown li a {
  display: block;
  padding: 9px 20px;
  font-size: 0.84rem;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
  font-weight: 400;
  letter-spacing: .01em;
}
.dropdown li a:hover { background: rgba(212,160,23,.08); color: var(--gold); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.nav-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 1rem;
  position: relative;
}
.nav-icon:hover { background: var(--beige); color: var(--warm-brown); }
.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--red-spice);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-nav-login {
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--charcoal);
  border: 1px solid var(--border);
}
.btn-nav-login:hover { background: var(--beige); }
.btn-nav-register {
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--warm-brown);
  color: var(--white);
}
.btn-nav-register:hover { background: var(--warm-brown-light); }
.btn-nav-account {
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--beige);
  color: var(--warm-brown);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: var(--transition);
}

/* HERO */
.hero {
  background: linear-gradient(135deg, var(--crimson) 0%, #3A0000 55%, var(--red-bright) 100%);
  color: var(--white);
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/hero-spices.png') center/cover no-repeat;
  opacity: 0.35;
}
.hero-content {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  padding: 100px 24px 80px;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-block;
  background: transparent;
  color: rgba(255,255,255,.55);
  padding: 5px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  line-height: 1.72;
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* SECTION */
.section { padding: 72px 24px; }
.section-sm { padding: 48px 24px; }
.container { max-width: 1280px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 52px; }
.section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--charcoal);
  margin-bottom: 12px;
}
.section-header p { color: var(--text-secondary); font-size: 1rem; max-width: 560px; margin: 0 auto; }
.section-eyebrow {
  display: inline-block;
  color: var(--warm-brown);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bg-beige { background: var(--beige); }
.bg-charcoal { background: var(--charcoal); color: var(--white); }
.bg-charcoal .section-header h2 { color: var(--white); }
.bg-charcoal .section-header p { color: rgba(255,255,255,0.7); }

/* PRODUCT GRID */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.product-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-dark);
  width: 100%;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red-spice);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.product-badge.caribbean { background: var(--gold); }
.product-badge.featured { background: var(--green-herb); }
.product-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.product-category { font-size: 0.75rem; color: var(--warm-brown); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.product-card-body h3 { font-family: var(--font-serif); font-size: 1.05rem; color: var(--text-primary); margin-bottom: 8px; }
.product-card-body p { font-size: 0.85rem; color: var(--text-secondary); flex: 1; margin-bottom: 14px; }
.product-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.product-price { font-size: 1.1rem; font-weight: 700; color: var(--warm-brown); }
.product-price .original { font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; margin-right: 6px; font-weight: 400; }
.add-to-cart-btn {
  background: var(--charcoal);
  color: var(--white);
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.add-to-cart-btn:hover { background: var(--warm-brown); }

/* CATEGORY GRID */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.category-card {
  background: transparent;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  display: block;
  text-decoration: none;
}
.category-card:hover { border-color: var(--warm-brown); transform: translateY(-3px); }
.category-card .icon { font-size: 2rem; margin-bottom: 10px; }
.category-card h4 {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  padding: 0 12px;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  z-index: 2;
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
  margin: 0;
}

/* SUBSCRIPTION PLANS */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.plan-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow);
  border: 2px solid var(--border);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-card.featured {
  border-color: var(--warm-brown);
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warm-brown);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.plan-card h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 8px; }
.plan-price { font-size: 2.4rem; font-weight: 800; color: var(--warm-brown); line-height: 1; margin: 16px 0 4px; }
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.plan-features { list-style: none; margin: 20px 0 28px; flex: 1; }
.plan-features li { padding: 8px 0; font-size: 0.9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--beige-dark); }
.plan-features li i { color: var(--green-herb); width: 16px; }

/* FORMS */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--white);
  transition: var(--transition);
}
.form-control:focus { outline: none; border-color: var(--warm-brown); box-shadow: 0 0 0 3px rgba(123,79,46,0.1); }
.form-control::placeholder { color: var(--text-muted); }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5A5A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ALERTS */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* NEWSLETTER */
.newsletter-form { display: flex; gap: 8px; margin-top: 12px; }
.newsletter-form input { flex: 1; padding: 10px 14px; border-radius: var(--radius); border: 1.5px solid var(--border); font-size: 0.88rem; }
.newsletter-form button { background: var(--warm-brown); color: white; border: none; padding: 10px 18px; border-radius: var(--radius); font-weight: 600; cursor: pointer; font-size: 0.86rem; white-space: nowrap; }
.newsletter-form button:hover { background: var(--warm-brown-light); }

/* FOOTER */
.footer { background: var(--charcoal); color: rgba(255,255,255,0.8); }
.footer-top { padding: 72px 24px 48px; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.8fr; gap: 40px; }
.footer-logo { font-family: var(--font-serif); font-size: 1.6rem; color: var(--white); margin-bottom: 14px; }
.footer-logo span { color: var(--gold); }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; color: rgba(255,248,240,.72); max-width: 280px; }
.social-links { display: flex; gap: 12px; margin-top: 20px; }
.social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 0.9rem;
  transition: var(--transition);
}
.social-links a:hover { background: var(--warm-brown); }
.footer-col h4 { font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.86rem; color: rgba(255,248,240,.68); }
.footer-col ul li a:hover { color: var(--gold); }
.footer-newsletter h4 { color: var(--white); font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.footer-newsletter p { font-size: 0.86rem; color: rgba(255,248,240,.72); margin-bottom: 4px; }
.footer-newsletter .newsletter-form input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; }
.footer-newsletter .newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-consent { color: rgba(255,255,255,0.4) !important; margin-top: 8px; }
.newsletter-consent a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-disclaimer a { color: rgba(255,255,255,0.45); margin: 0 4px; }
.footer-disclaimer a:hover { color: var(--gold); }

/* DASHBOARD LAYOUT */
.dashboard-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(180deg, #4A1010 0%, #2C1810 100%);
  padding: 32px 0;
  position: sticky;
  top: 96px;
  height: calc(100vh - 96px);
  overflow-y: auto;
}
.sidebar-logo { padding: 0 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo span { font-family: var(--font-serif); font-size: 1.1rem; color: var(--white); }
.sidebar-logo small { display: block; font-size: 0.72rem; color: rgba(212,160,23,0.65); margin-top: 2px; letter-spacing: 0.8px; text-transform: uppercase; }
.sidebar-nav { padding: 16px 0; }
.sidebar-section { padding: 20px 20px 8px; font-size: 0.68rem; font-weight: 700; color: rgba(212,160,23,0.45); letter-spacing: 1.5px; text-transform: uppercase; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
}
.sidebar-link:hover, .sidebar-link.active {
  background: rgba(212,160,23,0.15);
  color: var(--gold);
}
.sidebar-link i { width: 18px; opacity: 0.8; }
.sidebar-link.active { border-left: 3px solid var(--gold); }
.sidebar-link.active i { opacity: 1; color: var(--gold); }
.dashboard-main { background: #FAF6F0; padding: 36px; }
.page-header { margin-bottom: 32px; }
.page-header h1 { font-family: var(--font-serif); font-size: 1.9rem; color: var(--charcoal); margin-bottom: 4px; }
.page-header p { color: var(--text-secondary); font-size: 0.9rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 32px; }
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--beige);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--warm-brown);
  flex-shrink: 0;
}
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--charcoal); line-height: 1; }
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3 { font-family: var(--font-serif); font-size: 1.1rem; color: var(--charcoal); }
.card-body { padding: 24px; }
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--beige);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--beige); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-success { background: #d4edda; color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }
.badge-info { background: #d1ecf1; color: #0c5460; }
.badge-secondary { background: var(--beige-dark); color: var(--text-secondary); }

/* AUTH PAGES */
.auth-page {
  min-height: calc(100vh - 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--beige);
}
.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-hover);
}
.auth-card h2 { font-family: var(--font-serif); font-size: 1.8rem; margin-bottom: 6px; }
.auth-card .auth-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 32px; }
.auth-divider { text-align: center; color: var(--text-muted); font-size: 0.82rem; margin: 20px 0; position: relative; }
.auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.auth-divider span { background: white; padding: 0 12px; position: relative; }
.auth-footer { text-align: center; margin-top: 24px; font-size: 0.88rem; color: var(--text-secondary); }
.auth-footer a { color: var(--warm-brown); font-weight: 600; }

/* BREADCRUMB */
.breadcrumb { padding: 14px 24px; background: var(--beige); border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.breadcrumb a { color: var(--warm-brown); }
.breadcrumb span { color: var(--text-muted); margin: 0 8px; }

/* PAGE HERO (sub-pages) */
.page-hero {
  background: linear-gradient(135deg, var(--charcoal), var(--warm-brown));
  color: var(--white);
  padding: 64px 24px;
  text-align: center;
}
.page-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.page-hero p { font-size: 1rem; opacity: 0.8; max-width: 560px; margin: 0 auto; }

/* TOAST */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--charcoal);
  color: var(--white);
  padding: 14px 20px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  box-shadow: var(--shadow-hover);
  animation: toastIn 0.3s ease;
  max-width: 320px;
}
.toast.success { border-left: 4px solid var(--green-herb); }
.toast.error { border-left: 4px solid var(--red-spice); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .dashboard-layout { grid-template-columns: 200px 1fr; }
}

@media (max-width: 768px) {
  /* nav-toggle + nav-links: handled by WOS NAV v8 in header.php */
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: -240px; top: 70px; height: calc(100vh - 70px); z-index: 500; transition: left 0.3s ease; }
  .sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  /* Sidebar overlay — atmospheric dark veil behind open sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,4,0,0.62);
    z-index: 499;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: opacity 0.3s ease;
    opacity: 0;
  }
  .sidebar-overlay.active { display: block; opacity: 1; }
  /* Close button inside sidebar on mobile */
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 20px 0;
    margin-bottom: -8px;
  }
  .sidebar-close-btn button {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.2s;
  }
  .sidebar-close-btn button:hover { color: rgba(212,160,23,0.9); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-newsletter { grid-column: 1 / -1; }
  .auth-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .dashboard-main { padding: 20px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card.featured { transform: none; }
}

.footer-logo-link { display: inline-block; }
.footer-logo-link:hover .footer-logo-img { transform: scale(1.05); transition: var(--transition); }

/* CATEGORY CARD WITH IMAGE */
.category-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
  background: linear-gradient(135deg, #2d0f00 0%, #6B0000 60%, #1a0a00 100%);
  display: block;
}
.category-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.category-card:hover .category-card-img img { transform: scale(1.08); }

/* PAGE HERO with real background */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }

/* Scotch bonnet / pepper icon image overrides */
.icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

/* =============================
   SITE HEADER — logo above navbar
   ============================= */
.site-header {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px 10px;
  border-bottom: 1px solid var(--border);
}

.site-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo-img {
  height: 120px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.site-logo-img:hover {
  opacity: 0.85;
}

/* Navbar — no logo inside, just links + actions */
/* .navbar second definition removed — consolidated in first rule above */

/* Dark navbar — all links must be light colored */
.navbar .nav-links > li > a {
  color: rgba(255,255,255,0.88);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.navbar .nav-links > li > a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--gold);
}
.navbar .nav-icon {
  color: rgba(255,255,255,0.82);
}
.navbar .nav-icon:hover {
  background: rgba(255,255,255,0.1);
  color: var(--gold);
}
.navbar .btn-nav-login {
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.3);
}
.navbar .btn-nav-login:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.navbar .btn-nav-account {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.navbar .btn-nav-account:hover {
  background: rgba(255,255,255,0.18);
  color: var(--gold);
}
.navbar .nav-toggle span {
  background: white;
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Footer tagline style */
.footer-tagline {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin: 8px 0 6px;
  line-height: 1.4;
}



/* ═══════════════════════════════════════════════════
   COOK BY MEAL MEGA MENU
═══════════════════════════════════════════════════ */
.nav-highlight { color: var(--warm-brown) !important; font-weight: 700 !important; }
.nav-sub-link  { font-weight: 600 !important; }

.has-mega { position: relative; }
.mega-menu {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 760px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  z-index: 9999;
  overflow: hidden;
  animation: megaFadeIn .18s ease;
}
@keyframes megaFadeIn { from{opacity:0;transform:translateX(-50%) translateY(-8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.has-mega:hover .mega-menu { display: block; }
.mega-open .mega-menu { display: block; }
.mega-sub { min-width: 680px; }

.mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 0;
}
.mega-col {
  padding: 24px 20px;
  border-right: 1px solid var(--border);
}
.mega-col:last-child { border-right: none; }
.mega-col-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--charcoal);
  transition: background .15s;
  margin-bottom: 2px;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(107,0,0,0.1);
}
.mega-link * { pointer-events: none; }
.mega-link:hover { background: var(--beige); color: var(--warm-brown); }
.mega-link .mega-icon { font-size: 1.4rem; flex-shrink: 0; }
.mega-link strong { display: block; font-size: 0.88rem; font-weight: 600; }
.mega-link small { font-size: 0.76rem; color: var(--text-muted); }

.mega-cta-col { background: #fdf8f0; border-right: none; }
.mega-cta-card {
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg, var(--warm-brown), var(--crimson));
  color: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  min-height: 52px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.15);
  transition: transform .15s, box-shadow .15s;
}
/* Ensure inner elements never block the parent <a> click */
.mega-cta-card * { pointer-events: none; }
.mega-cta-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.mega-cta-card strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.mega-cta-card p { font-size: 0.8rem; opacity: 0.88; margin: 0 0 12px; }
.mega-cta-btn {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
}
.mega-recipe-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--warm-brown);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
}
.mega-recipe-link:hover { background: var(--beige); }

/* Subscribe mega-menu plan cards */
.mega-sub .mega-inner { padding: 20px; gap: 12px; }
.sub-plan-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  text-decoration: none;
  color: var(--charcoal);
  transition: border-color .2s, transform .15s;
  position: relative;
  background: white;
}
.sub-plan-card:hover { border-color: var(--warm-brown); transform: translateY(-2px); }
.sub-plan-card.sub-plan-popular { border-color: var(--warm-brown); }
.sub-popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--warm-brown);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.sub-plan-card strong { font-size: 0.95rem; font-weight: 700; }
.sub-plan-price { font-size: 1.2rem; font-weight: 800; color: var(--warm-brown); }
.sub-plan-card small { font-size: 0.76rem; color: var(--text-muted); }
.sub-plan-cta {
  margin-top: 10px;
  background: var(--warm-brown);
  color: white;
  text-align: center;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   COOK BY MEAL — SHOP PAGE SECTION
═══════════════════════════════════════════════════ */
.meal-nav-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 28px;
  list-style: none;
}
.meal-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 30px;
  border: 2px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  transition: all .18s;
}
.meal-chip:hover, .meal-chip.active {
  border-color: var(--warm-brown);
  background: var(--warm-brown);
  color: white;
}

/* ═══════════════════════════════════════════════════
   SUBSCRIPTION JOURNEY SECTION
═══════════════════════════════════════════════════ */
.sub-journey {
  background: linear-gradient(135deg, #1a0800, #3d1a00);
  color: white;
  padding: 80px 24px;
}
.sub-journey-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  position: relative;
  margin: 40px 0;
}
.sub-journey-step {
  text-align: center;
  padding: 0 24px;
  position: relative;
}
.sub-journey-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 28px;
  font-size: 1.4rem;
  opacity: 0.4;
}
.sub-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.5rem;
}
.sub-journey-step h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: white; }
.sub-journey-step p { font-size: 0.78rem; opacity: 0.65; line-height: 1.5; margin: 0; }

/* ═══════════════════════════════════════════════════
   CUSTOMER JOURNEY FLOW (Home page)
═══════════════════════════════════════════════════ */
.journey-flow {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 32px 0;
  scrollbar-width: none;
}
.journey-flow::-webkit-scrollbar { display: none; }
.journey-node {
  flex-shrink: 0;
  text-align: center;
  padding: 0 28px;
}
.journey-node-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--beige);
  border: 3px solid var(--warm-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.6rem;
  transition: transform .2s;
}
.journey-node:hover .journey-node-icon { transform: scale(1.1); }
.journey-node a { text-decoration: none; color: var(--charcoal); }
.journey-node h5 { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; }
.journey-node p { font-size: 0.76rem; color: var(--text-muted); max-width: 110px; margin: 0 auto; }
.journey-arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--warm-brown);
  opacity: 0.5;
}

/* Mobile */
@media (max-width: 900px) {
  .mega-menu { min-width: 95vw; left: 50%; transform: translateX(-50%); position: fixed; top: auto; }
  .mega-inner { grid-template-columns: 1fr; }
  .mega-col { border-right: none; border-bottom: 1px solid var(--border); }
  .mega-cta-col { display: none; }
  .sub-journey-steps { grid-template-columns: 1fr 1fr; }
  .sub-journey-step:not(:last-child)::after { display: none; }
}

/* ── ADMIN TABLE STYLES ────────────────────────────────────── */
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:0.88rem}
.admin-table th{background:var(--beige);padding:10px 14px;text-align:left;font-weight:700;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);border-bottom:2px solid var(--border)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:hover td{background:rgba(0,0,0,0.02)}
.admin-card{background:white;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);margin-bottom:0}
.dash-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.dash-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;margin:0}
/* Badge variants */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.badge-success{background:#d1fae5;color:#065f46}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-info{background:#dbeafe;color:#1e40af}
.badge-purple{background:#ede9fe;color:#5b21b6}
.badge-teal{background:#ccfbf1;color:#134e4a}
.badge-secondary{background:#f3f4f6;color:#374151}
.badge-dark{background:#1f2937;color:white}
/* Alert */
.alert{padding:14px 18px;border-radius:var(--radius-lg);margin-bottom:20px;font-weight:500}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}
.alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
/* Form */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:0.85rem;font-weight:600;margin-bottom:6px;color:var(--charcoal)}
.form-control{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:0.9rem;font-family:inherit;color:var(--charcoal);background:white;transition:border-color .2s;box-sizing:border-box}
.form-control:focus{outline:none;border-color:var(--warm-brown)}
.btn-full{width:100%}
.btn-sm{padding:6px 14px;font-size:0.82rem}
.btn-dark{background:var(--charcoal);color:white;border:none}
.btn-dark:hover{background:#111}
/* Star rating */
.star-rating{display:flex;flex-direction:row-reverse;gap:0}
.star-rating input{display:none}
.star-rating label{font-size:2rem;cursor:pointer;color:var(--border);padding:0 2px;transition:color .15s}
.star-rating input:checked~label,.star-rating label:hover,.star-rating label:hover~label{color:var(--gold)}
/* Prose */
.prose h2{font-family:var(--font-serif);font-size:1.6rem;color:var(--charcoal);margin:0 0 20px}
.prose h3{font-family:var(--font-serif);font-size:1.1rem;color:var(--warm-brown);margin:24px 0 8px}
.prose p{margin-bottom:14px;line-height:1.8}
.prose ul,.prose ol{margin-bottom:14px;padding-left:22px;line-height:1.8}
.prose li{margin-bottom:6px}
.prose a{color:var(--warm-brown);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIXES — patch v1.1
   Fixes: cart layout, checkout layout, homepage inline grids,
          mega menu touch, member sidebar missing pages
   ═══════════════════════════════════════════════════════════════ */

/* FIX 1 + 2: Cart & Checkout two-column layouts → stack on mobile */
.checkout-layout,
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .checkout-layout,
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Swap order so summary shows below items on mobile */
  .checkout-summary,
  .cart-summary {
    order: 2;
  }
  .checkout-form,
  .cart-items {
    order: 1;
  }
}

/* FIX 4: Homepage inline 2-col grids → stack on mobile */
@media (max-width: 768px) {
  /* Mission/Promise block, Caribbean spotlight, sub CTA, kit/recipe 2-col combos */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Caribbean spotlight text + image */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:60px"],
  [style*="grid-template-columns: 1fr 1fr"][style*="gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Hero actions already wraps — reinforce */
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  /* Section padding tighter on mobile */
  /* removed: section L1252 */
  .page-hero { padding: 48px 16px; }
  /* Caribbean spotlight stack — ensure image doesn't overflow */
  [style*="background:linear-gradient"] img,
  .section img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  /* Very small screens — checkout address form 1fr 1fr → 1fr */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }
  /* removed: hero-h1 L1261 */
  /* removed: hero-p L1262 */
}

/* FIX 3: Mega menu — touch/mobile toggle via JS class .mega-open */
@media (max-width: 900px) {
  .has-mega > .mega-menu { display: none; }
  .has-mega.mega-open > .mega-menu { display: block; }
  /* Dropdown submenus on mobile */
  li.has-dropdown > .dropdown { display: none; }
  li.has-dropdown.open > .dropdown { display: block; }
  /* Sub-nav items get chevron to indicate expandable */
  .has-mega > a::after,
  li.has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.7rem;
    opacity: 0.6;
  }
}

/* FIX 5: Missing member pages — 404 guard styling (shown by PHP fallback) */
.member-coming-soon {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-secondary);
}
.member-coming-soon h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.member-coming-soon p { font-size: 0.95rem; margin-bottom: 24px; }

/* General mobile polish */
@media (max-width: 768px) {
  /* Top bar readable on small screens */
  .top-bar { font-size: 0.75rem; padding: 8px 12px; text-align: center; }
  /* Nav actions stay visible on mobile */
  .nav-actions { gap: 8px; }
  .nav-icon { width: 34px; height: 34px; font-size: 0.9rem; }
  /* Product cards full width feel */
  .product-card { border-radius: var(--radius); }
  /* Cart badge always visible */
  .cart-badge { font-size: 0.6rem; width: 14px; height: 14px; }
  /* Admin tables scroll horizontally */
  .admin-table-wrap { -webkit-overflow-scrolling: touch; }
  /* Footer social links centered */
  .social-links { justify-content: center; }
  /* Plans grid forced single col */
  .plans-grid { grid-template-columns: 1fr !important; }
  /* Spice kit cards full width */
  .kit-grid { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE CRITICAL FIXES — May 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── NAV: mobile sidebar slide-in ────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    padding: 80px 20px 32px;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    overflow-y: auto;
    transition: left .3s cubic-bezier(.4,0,.2,1);
    gap: 0;
  }
  .nav-links.open { left: 0 !important; display: flex !important; }
  .nav-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 998; backdrop-filter: none;
  }
  .nav-overlay.show { display: block; }
  .nav-links > li { width: 100%; border-bottom: 1px solid var(--border); }
  .nav-links > li > a { display: block; padding: 14px 16px; font-size: 1rem; font-weight: 600; }
  .dropdown, .mega-menu, .mega-sub { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; background: var(--beige) !important; display: none; border-radius: 0 !important; }
  .nav-links > li.open > .dropdown,
  .nav-links > li.open > .mega-menu,
  .nav-links > li.open > .mega-sub { display: block; }
  .mega-menu { display: none !important; padding: 8px 16px !important; }
  .nav-links > li.open > .mega-menu { display: block !important; }
  .mega-menu .mega-col { margin-bottom: 12px; }
  .nav-toggle { cursor: pointer; z-index: 1001; }

  /* ── CART PAGE ─────────────────────────────────────────── */
  .cart-layout { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  .cart-item  { flex-direction: row; gap: 12px; flex-wrap: wrap; }
  .cart-item img { width: 70px !important; height: 70px !important; }
  .cart-summary { width: 100% !important; position: static !important; }
  .cart-table { display: block; overflow-x: auto; }

  /* ── CHECKOUT PAGE ─────────────────────────────────────── */
  .checkout-layout { display: flex !important; flex-direction: column-reverse !important; gap: 20px !important; }
  .checkout-form-col { width: 100% !important; }
  .checkout-summary-col { width: 100% !important; }
  .checkout-section { padding: 20px !important; }
  #payment-element { min-height: 200px; }
  .form-row-2 { grid-template-columns: 1fr !important; }

  /* ── SHOP GRID ──────────────────────────────────────────── */
  .shop-layout { display: flex !important; flex-direction: column !important; }
  .shop-filters { width: 100% !important; position: static !important; margin-bottom: 20px; }
  .product-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .product-card { padding: 12px !important; }
  /* product-card img height — controlled by aspect-ratio on .product-img-wrap */

  /* ── HERO ──────────────────────────────────────────────── */
  /* removed: hero L1379 auto */
  /* removed: hero-h1 L1380 */
  .hero-actions { flex-direction: column !important; gap: 12px !important; }
  .hero-actions .btn { width: 100%; text-align: center; }

  /* ── SECTIONS ──────────────────────────────────────────── */
  /* removed: section L1388 */
  .container { padding: 0 16px !important; }
  .section-header h2 { font-size: 1.6rem !important; }

  /* ── FLAVOR FINDER ─────────────────────────────────────── */
  .ff-grid { grid-template-columns: 1fr !important; }
  .ff-heat-grid { grid-template-columns: 1fr 1fr !important; }
  .ff-product-grid { grid-template-columns: 1fr !important; }
  .ff-recipe-grid { grid-template-columns: 1fr !important; }
  .ff-box-grid { grid-template-columns: 1fr 1fr !important; }
  .ff-nav { flex-direction: row; }

  /* ── HOMEPAGE PERSONALIZED BANNER ──────────────────────── */
  .rfy-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .rfy-grid { grid-template-columns: 1fr !important; }
  .ff-heat-grid { grid-template-columns: 1fr 1fr !important; }
  /* removed: hero-h1 L1405 */
  .nav-links { width: 90% !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND VOICE — EDGY / AGGRESSIVE / DOMINANT
   ═══════════════════════════════════════════════════════════════ */

/* Bold call-to-action bars */
.dominate-bar {
  background: linear-gradient(135deg, #1a0500, #3d0000);
  color: white;
  padding: 20px 24px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: .3px;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.dominate-bar strong { color: var(--gold); }

/* Aggressive product badge */
.badge-fire {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
}
.badge-heat-4 { background: linear-gradient(135deg,#7b0000,#c0392b); }

/* Pulsing "ADD" button on product cards */
.btn-add-pulse {
  animation: addPulse 2.5s ease-in-out infinite;
}
@keyframes addPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,0,0,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(139,0,0,0); }
}

/* "Cook This Tonight" conversion bridge */
.cook-tonight-bar {
  background: var(--charcoal);
  color: white;
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.cook-tonight-bar .ctn-text { font-family: var(--font-serif); font-size: 1.1rem; }
.cook-tonight-bar .ctn-sub  { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: 3px; }
.cook-tonight-bar .ctn-btns { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* Subscription default nudge */
.sub-nudge {
  background: linear-gradient(90deg,rgba(139,69,19,.12),rgba(139,0,0,.08));
  border: 1.5px solid var(--warm-brown);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: .88rem;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-nudge .sub-nudge-icon { font-size: 1.4rem; flex-shrink: 0; }

/* Recommended for You grid */
.rfy-section { background: var(--cream); }
.rfy-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width:900px){ .rfy-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .rfy-grid{ grid-template-columns:1fr 1fr; } }

/* Post-purchase coaching bar */
.use-now-bar {
  background: linear-gradient(135deg,#0a3d00,#145a00);
  color: white;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.use-now-bar .una-icon { font-size: 2rem; flex-shrink: 0; }
.use-now-bar h4 { margin: 0 0 4px; font-family: var(--font-serif); color: white; font-size: 1rem; }
.use-now-bar p  { margin: 0; font-size: .83rem; color: rgba(255,255,255,.8); }


/* ═══════════════════════════════════════════════════════════════
   COMMAND 9 — FINAL POLISH (appended, never overwrites above)
   Typography · Spacing · Badges · Empty states · Mobile · UX
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY REFINEMENTS ──────────────────────────────── */
/* Tighter letter-spacing on uppercase eyebrow labels */
.section-eyebrow, .hero-eyebrow, .mega-col-title, .product-category {
  letter-spacing: 1.5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
/* Product card title — crisper serif weight */
.product-name a {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--charcoal);
  text-decoration: none;
  line-height: 1.3;
  display: block;
}
.product-name a:hover { color: var(--warm-brown); }

/* Breadcrumb polish */
.breadcrumb {
  padding: 10px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.breadcrumb .container { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--warm-brown); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--text-muted); font-size: 0.7rem; }

/* ── 2. BUTTON IMPROVEMENTS ─────────────────────────────────── */
/* Primary CTA — more prominent, tactile feel */
.btn-primary {
  background: var(--crimson-light);
  color: white;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(107,0,0,0.25);
  border: none;
}
.btn-primary:hover {
  background: var(--red-bright);
  box-shadow: 0 4px 16px rgba(107,0,0,0.35);
  transform: translateY(-1px);
}
/* Gold CTA — sharper */
.btn-gold {
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(212,160,23,0.3);
}
.btn-gold:hover {
  box-shadow: 0 4px 16px rgba(212,160,23,0.4);
  transform: translateY(-1px);
}
/* Add-to-cart button — clear purpose */
.btn-add-cart {
  background: var(--crimson-light);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: var(--transition);
  min-width: 72px;
  justify-content: center;
}
.btn-add-cart:hover { background: var(--red-bright); transform: translateY(-1px); }
.btn-add-cart:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Nav login/register buttons — cleaner pair */
.btn-nav-login {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
  border: 1.5px solid var(--border);
  background: white;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-nav-login:hover { border-color: var(--warm-brown); color: var(--warm-brown); }
.btn-nav-register {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--crimson-light);
  color: white;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-nav-register:hover { background: var(--red-bright); }

/* ── 3. PRODUCT CARD POLISH ─────────────────────────────────── */
.product-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(107,0,0,0.14);
  border-color: rgba(139,0,0,0.2);
}

/* Product badges — stronger, cleaner */
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--crimson-light);
  color: white;
  pointer-events: none;
  line-height: 1;
}
.product-badge.sale    { background: #C62828; }
.product-badge.featured { background: var(--green-herb); }
.product-badge.caribbean { background: var(--gold); color: #1a1a1a; }
.product-badge.new     { background: var(--crimson); color: white; }

/* Heat level indicator dots */
.heat-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: 4px;
}
.heat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block;
}
.heat-dot.on { background: var(--red-vivid); }

/* ── 4. NAVIGATION POLISH ───────────────────────────────────── */
/* Sticky nav shadow when scrolled */
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}
/* Mobile nav close button */
.nav-close-btn {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--charcoal);
  z-index: 1002;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--beige);
}
@media (max-width: 768px) {
  .nav-close-btn { display: flex; }
}
/* Hamburger → X animation */
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-toggle span { transition: transform 0.25s ease, opacity 0.2s ease; }

/* Active nav link indicator */
.nav-links > li > a.active {
  color: var(--warm-brown) !important;
  font-weight: 700 !important;
}
.nav-links > li > a.active::before {
  content: '';
  position: absolute;
  bottom: -2px; left: 12px; right: 12px;
  height: 2px;
  background: var(--warm-brown);
  border-radius: 2px;
}

/* ── 5. MOBILE NAV — TOP BAR FIX ────────────────────────────── */
@media (max-width: 480px) {
  .top-bar {
    font-size: 0.7rem;
    padding: 7px 12px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide the | separator on very small screens to prevent overflow */
  .top-bar .top-bar-sep { display: none; }
}

/* ── 6. ANNOUNCEMENT BAR POLISH ─────────────────────────────── */
.announcement-bar {
  background: var(--crimson);
  color: white;
  text-align: center;
  padding: 10px 48px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}
.announcement-bar a { color: var(--gold); text-decoration: underline; font-weight: 700; }
/* Dismiss button */
.announcement-dismiss {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: rgba(255,255,255,0.6); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 4px 8px;
}
.announcement-dismiss:hover { color: white; }
@media (max-width: 480px) {
  .announcement-bar { padding: 8px 40px 8px 12px; font-size: 0.72rem; }
}

/* ── 7. EMPTY STATE STYLES ──────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
}
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.7;
  display: block;
}
.empty-state h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.empty-state p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 400px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.empty-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 8. ERROR / FORM FEEDBACK IMPROVEMENTS ──────────────────── */
.field-error {
  font-size: 0.78rem;
  color: #C62828;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-error::before { content: '⚠ '; }
.field-success {
  font-size: 0.78rem;
  color: var(--green-herb);
  margin-top: 4px;
}
.form-control.error {
  border-color: #C62828;
  background: #fff5f5;
}
.form-control.success {
  border-color: var(--green-herb);
}
/* Toast notification */
.wos-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--charcoal);
  color: white;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 340px;
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.wos-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.wos-toast.success { border-left: 4px solid #4CAF50; }
.wos-toast.error   { border-left: 4px solid #C62828; }
.wos-toast.info    { border-left: 4px solid var(--gold); }
@media (max-width: 480px) {
  .wos-toast { bottom: 16px; right: 12px; left: 12px; max-width: none; min-width: 0; }
}

/* ── 9. CHECKOUT CONFIDENCE SIGNALS ─────────────────────────── */
.checkout-trust-strip {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.checkout-trust-strip span {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.checkout-trust-strip i {
  color: var(--green-herb);
  font-size: 0.88rem;
}
/* Sticky place order button on mobile */
@media (max-width: 768px) {
  .checkout-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    padding: 14px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 100;
    border-top: 1px solid var(--border);
  }
  .checkout-sticky-cta .btn { width: 100%; font-size: 1rem; padding: 14px; }
  /* Add padding to checkout body so content doesn't hide behind sticky button */
  .checkout-has-sticky { padding-bottom: 80px; }
}

/* ── 10. HOMEPAGE POLISH ────────────────────────────────────── */
/* Brand promise strip items */
.promise-item {
  text-align: center;
  padding: 8px 12px;
}
.promise-item .promise-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
  display: block;
}
.promise-item .promise-title {
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 3px;
  display: block;
}
.promise-item .promise-sub {
  color: rgba(255,255,255,0.62);
  font-size: 0.72rem;
  line-height: 1.4;
}
/* Section title underline accent */
.section-title-accent {
  position: relative;
  display: inline-block;
}
.section-title-accent::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 2px;
}

/* ── 11. PRODUCT PAGE POLISH ────────────────────────────────── */
/* Quantity selector */
.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.qty-control button {
  width: 36px; height: 36px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--charcoal);
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.qty-control button:hover { background: var(--beige); }
.qty-control input {
  width: 44px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  padding: 6px 0;
  background: white;
  outline: none;
  font-family: inherit;
}
/* "In stock" / "Low stock" pill */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
}
.stock-pill.in-stock  { background: #d1fae5; color: #065f46; }
.stock-pill.low-stock { background: #fef3c7; color: #92400e; }
.stock-pill.out-stock { background: #fee2e2; color: #991b1b; }
.stock-pill::before   { content: '●'; font-size: 0.55rem; }

/* ── 12. FOOTER POLISH ──────────────────────────────────────── */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 32px 0 24px;
}
/* Social icons */
.social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.social-link:hover {
  background: var(--gold);
  color: white;
}

/* ── 13. IMAGE LOADING SHIMMER ──────────────────────────────── */
.img-shimmer {
  background: linear-gradient(90deg, var(--cream) 25%, var(--beige) 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Apply shimmer to product images before load */
.product-card-img, .product-img-wrap {
  background: var(--cream);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  width: 100%;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

/* ── 14. MOBILE PRODUCT GRID REFINEMENT ─────────────────────── */
@media (max-width: 768px) {
  .product-card-body, .product-info {
    padding: 12px !important;
  }
  .purchase-mode-tabs { font-size: 0.68rem !important; }
  .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .btn-add-cart {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
  /* Subscription default tab — smaller on mobile */
  .pmt-btn { font-size: 0.66rem !important; padding: 5px 3px !important; }
  /* Product image — consistent height mobile */
  .product-img-wrap img, .product-card-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* ── 15. SHOP SIDEBAR MOBILE FILTER BUTTON ───────────────────── */
.shop-filter-toggle {
  display: none;
  width: 100%;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
@media (max-width: 900px) {
  .shop-filter-toggle { display: flex; }
}
.shop-filter-count {
  background: var(--crimson-light);
  color: white;
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 800;
}

/* ── 16. SCROLL-TO-TOP BUTTON ───────────────────────────────── */
#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px; height: 44px;
  background: var(--crimson-light);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  z-index: 190;
  box-shadow: 0 4px 16px rgba(107,0,0,0.3);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  /* Ensure button never blocks link clicks outside itself */
  pointer-events: auto;
}
#scrollTopBtn.visible { display: flex; }
#scrollTopBtn:hover { background: var(--red-bright); transform: translateY(-2px); }
@media (max-width: 768px) {
  #scrollTopBtn { bottom: 80px; right: 16px; width: 44px; height: 44px; }
}

/* ── 17. PREMIUM SECTION DIVIDERS ───────────────────────────── */
.wos-divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--crimson-light) 70%, transparent);
  border: none;
  margin: 0;
}

/* ── 18. FOCUS / ACCESSIBILITY ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--warm-brown);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 19. PRINT STYLES ───────────────────────────────────────── */
@media print {
  .navbar, .top-bar, .site-header, .announcement-bar,
  .nav-overlay, #scrollTopBtn, .wos-toast { display: none !important; }
  body { font-size: 12pt; }
  .section { page-break-inside: avoid; }
}

/* END COMMAND 9 POLISH */

/* ══════════════════════════════════════════════════════════════
   16. PRODUCT DETAIL PAGE — MOBILE FIXES  (max-width: 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Main product image — full width, square ── */
  #mainImg {
    width: 100% !important;
    height: auto !important;
    max-height: 320px;
    object-fit: cover;
    display: block;
  }

  /* ── 2. Main image container — full width ── */
  #mainImg + div,          /* thumbnail row sibling */
  [style*="aspect-ratio:1"][style*="margin-bottom:16px"] {
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  /* ── 2b. Thumbnail row — horizontal scroll strip ── */
  [style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] img[style*="width:70px"],
  div[style*="gap:10px"] > img[style*="width:70px"] {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0;
  }

  /* ── 3. Product title — readable size, no overflow ── */
  .section h1[style*="font-size:2.2rem"],
  h1[style*="2.2rem"] {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }

  /* ── 4. Price display — tighter on narrow screens ── */
  [style*="font-size:2rem"][style*="font-weight:800"] {
    font-size: 1.6rem !important;
  }
  #pdp-price-sub span[style*="font-size:2rem"],
  #pdp-price-one span[style*="font-size:2rem"] {
    font-size: 1.6rem !important;
  }

  /* ── 4b. Subscribe/One-Time tab — full width, no squish ── */
  #pdp-tab-sub, #pdp-tab-one {
    padding: 12px 8px !important;
    font-size: 0.8rem !important;
  }
  #pdp-tab-sub span:last-child,
  #pdp-tab-one span:last-child {
    font-size: 0.68rem !important;
  }

  /* ── 4c. Sub perks row — wrap cleanly ── */
  #pdp-sub-perks {
    font-size: 0.73rem !important;
    gap: 6px !important;
  }

  /* ── 5. Size selector labels — full width on small screens ── */
  div[style*="display:flex"][style*="flex-wrap:wrap"] > label[style*="border:2px"] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
  }

  /* ── 6. Qty + ATC row — stack on very small screens ── */
  div[style*="display:flex"][style*="gap:12px"][style*="align-items:center"][style*="margin-bottom:14px"] {
    flex-wrap: wrap;
  }
  .qty-control {
    flex-shrink: 0;
  }
  /* ATC button — full remaining width, 48px tall minimum ── */
  #pdp-atc-btn {
    flex: 1 1 auto !important;
    min-width: 160px;
    min-height: 48px !important;
    font-size: 0.9rem !important;
  }
  /* Buy Now — already has btn-full but reinforce height ── */
  a.btn-full.btn-lg,
  button.btn-full.btn-lg {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── 7. qty-control buttons — 44px tap target ── */
  .qty-control button {
    width: 44px !important;
    height: 44px !important;
  }
  .qty-control input {
    height: 44px !important;
    line-height: 44px;
  }

  /* ── 8. Meta / ingredients section — no text squeeze ── */
  div[style*="border-top:1px solid var(--border)"][style*="padding-top:20px"] p,
  div[style*="border-top: 1px solid var(--border)"][style*="padding-top: 20px"] p {
    font-size: 0.84rem !important;
    line-height: 1.65 !important;
    word-break: break-word;
  }

  /* ── 9. Recommendation widget — 2-col grid ── */
  #ffWidget_69fbff7232412 {
    display: block !important;
  }
  #ffWidget_69fbff7232412 > div[style*="display:grid"],
  #ffWidget_69fbff7232412 > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    display: grid !important;
  }
  #ffWidget_69fbff7232412 .ff-card img {
    height: 110px !important;
  }

  /* ── 10. Review section — no overflow ── */
  div[style*="margin-top:28px"][style*="background:white"][style*="border-radius"] {
    padding: 16px !important;
  }

  /* ── 11. Section padding — breathe on mobile ── */
  /* removed: section L2267 */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── 12. Footer — already 1-col at 480px; reinforce at 768px ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-top { padding: 40px 16px 32px !important; }
  .footer-bottom { padding: 16px !important; flex-direction: column !important; gap: 8px !important; text-align: center; }
}

/* XS: 420px — recommendation widget drops to 1 column */
@media (max-width: 420px) {
  #ffWidget_69fbff7232412 > div[style*="display:grid"],
  #ffWidget_69fbff7232412 > div {
    grid-template-columns: 1fr !important;
  }
  /* Thumbnail strip — smaller */
  div[style*="gap:10px"] > img[style*="width:70px"] {
    width: 48px !important;
    height: 48px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   WOS VISUAL PATCH — 2026-05-07
   1. Product / featured card images  — 1:1 ratio, object-fit:cover
   2. Product grid columns            — 4 → 2-3 → 1-2 responsive
   3. Navbar                          — dark header, readable contrast
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. NAVBAR — dark premium header, high-contrast links ─────────── */

/* Force dark background across all viewports */
/* .navbar third definition removed — consolidated in first rule */

/* Desktop nav links — white, legible */
.nav-links > li > a {
  color: rgba(255,255,255,0.90) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 8px 13px !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s !important;
}

/* Hover: gold highlight */
.nav-links > li > a:hover {
  background: rgba(212,160,23,0.15) !important;
  color: var(--gold, #D4A017) !important;
}

/* Active page link */
.nav-links > li > a.active {
  color: var(--gold, #D4A017) !important;
  font-weight: 700 !important;
  background: rgba(212,160,23,0.12) !important;
}
.nav-links > li > a.active::before {
  background: var(--gold, #D4A017) !important;
}

/* Logo text colors on dark bg */
.logo-main   { color: rgba(255,255,255,0.75) !important; }
.logo-accent { color: var(--gold, #D4A017) !important; }

/* Nav utility icons (cart, user) */
.nav-icon-btn {
  color: rgba(255,255,255,0.85) !important;
}
.nav-icon-btn:hover {
  color: var(--gold, #D4A017) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Cart badge */
.cart-badge {
  background: var(--crimson, #6B0000) !important;
  color: white !important;
}

/* Mobile slide-out nav stays white bg for readability */
@media (max-width: 768px) {
  .nav-links {
    background: #1a1a1a !important;
  }
  .nav-links > li > a {
    color: rgba(255,255,255,0.90) !important;
    font-weight: 600 !important;
  }
  .nav-links > li > a:hover,
  .navbar .nav-links > li > a:hover {
    background: rgba(212,160,23,0.15) !important;
    color: var(--gold, #D4A017) !important;
  }
  .nav-links > li {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  /* Mobile nav toggle button — visible on dark bg */
  .nav-toggle {
    color: rgba(255,255,255,0.90) !important;
  }
}

/* Mobile overlay for nav drawer */
.nav-overlay {
  background: rgba(0,0,0,0.55) !important;
}

/* ── 2. PRODUCT / FEATURED CARD IMAGES — 1:1 square, object-fit:cover */

/* Grid: 4 columns desktop, auto-fill floors at 220px per card */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

/* Card base — no padding inflate, clean column layout */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--white) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
  border: 1px solid var(--border, #e8e0d5) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: 100% !important;
}
.product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(107,0,0,0.13) !important;
}

/* Image wrapper — strict 1:1 square, no exceptions */
.product-card-img,
.product-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: var(--cream, #F5EDE0) !important;
  flex-shrink: 0 !important;
}

/* All images inside cards — fill and crop */
.product-card-img img,
.product-img-wrap img,
.product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.35s ease !important;
}
.product-card:hover .product-card-img img,
.product-card:hover .product-img-wrap img {
  transform: scale(1.05) !important;
}

/* Card body — consistent padding, no overflow */
.product-card-body,
.product-info {
  padding: 14px 16px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.product-card-body h3,
.product-info h3,
.product-name {
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.product-card-body p,
.product-info p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
  flex: 1 !important;
  margin-bottom: 10px !important;
  /* clamp to 2 lines max — no card height blowout */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-card-footer,
.product-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px 14px !important;
  margin-top: auto !important;
  gap: 8px !important;
}

/* ── 3. RESPONSIVE GRID BREAKPOINTS ─────────────────────────────── */

/* Large tablet / small desktop (≤1024px) → 3 columns */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

/* Tablet (≤768px) → 2 columns */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  /* Slightly smaller body padding on tablet */
  .product-card-body,
  .product-info {
    padding: 12px 13px !important;
  }
  .product-card-footer,
  .product-footer {
    padding: 0 13px 12px !important;
  }
}

/* Mobile (≤480px) → 2 columns, tighter */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card-body,
  .product-info {
    padding: 10px !important;
  }
  .product-card-footer,
  .product-footer {
    padding: 0 10px 10px !important;
  }
  .product-card-body h3,
  .product-name {
    font-size: 0.82rem !important;
  }
  /* Touch-friendly add-to-cart button */
  .product-card-footer .btn,
  .product-footer .btn,
  .btn-add-cart {
    min-height: 40px !important;
    font-size: 0.78rem !important;
    padding: 8px 10px !important;
  }
  /* Price text stays readable */
  .product-price {
    font-size: 0.9rem !important;
  }
}

/* Very narrow (≤360px) → drop to 1 column */
@media (max-width: 360px) {
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 4. SHOP PAGE — consistent with homepage grid ─────────────── */
/* Shop uses same .product-grid + .product-card classes — all rules above apply */
/* Ensure shop layout sidebar doesn't crush cards */
.shop-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr !important;
  }
  /* On mobile shop, filters go above the grid */
  .shop-filters {
    display: none; /* hidden by default, toggled by filter button */
  }
  .shop-filters.open {
    display: block !important;
  }
}

/* ── 5. PREVENT IMAGE BANNER BLOWOUT ─────────────────────────────
   Any standalone <img> inside a product card that lacks a wrapper
   should never exceed its container */
.product-card > img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── END WOS VISUAL PATCH 2026-05-07 ─────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   WOS MOBILE PATCH — 2026-05-07
   Scope: max-width 600px ONLY — desktop/tablet unchanged
   Fixes:
     1. Featured product grid → 1 column, full-width cards
     2. Category card images → fallback colour + consistent square
     3. Hero eyebrow → visible pill with text, not empty shape
     4. Spacing — compact cards, 44px min touch targets
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

  /* ── 1. FEATURED / PRODUCT GRID — 1 column, full width ────────── */

  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Card: full width, horizontal layout on mobile for better scan-ability */
  .product-card {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    grid-template-rows: auto auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    min-height: unset !important;
    height: auto !important;
    align-items: start !important;
  }

  /* Image: square thumbnail on the left */
  .product-card-img,
  .product-img-wrap {
    width: 120px !important;
    height: 120px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    border-radius: 0 !important;
  }

  .product-card-img img,
  .product-img-wrap img,
  .product-card > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Body: sits to the right of the image */
  .product-card-body,
  .product-info {
    padding: 10px 12px 4px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .product-card-body h3,
  .product-info h3,
  .product-name {
    font-size: 0.85rem !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
  }

  .product-card-body p,
  .product-info p {
    font-size: 0.75rem !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 6px !important;
  }

  /* Footer: sits below body, spans right column only */
  .product-card-footer,
  .product-footer {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 4px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  /* Price — stays visible above button */
  .product-price {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  /* Add to Cart — full width, min 44px tall */
  .add-to-cart-btn,
  .product-card-footer .btn,
  .product-footer .btn,
  .btn-add-cart {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.82rem !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Badge — keep in top-left of image */
  .product-badge {
    font-size: 0.65rem !important;
    padding: 2px 7px !important;
  }

  /* ── 2. CATEGORY CARDS — consistent square, fallback bg ───────── */

  /* Grid: 2 columns compact */
  /* removed: category-grid L2724 */

  /* Card: no extra padding, contained */
  /* removed: category-card L2710 */

  /* Image wrapper: square aspect, with fallback bg colour
     If image fails to load → warm-spice bg instead of blank space */
  /* removed: category-card-img L2714 */

  /* If image fails: hide broken icon, fallback bg stays visible */
  .category-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* onerror placeholder — shown if JS hides broken img */
  .category-card-img img[data-broken="true"] {
    display: none !important;
  }

  /* Label below image */
  /* removed: category-card-h4 L2734 */

  /* ── 3. HERO SECTION — fix eyebrow pill, stack CTAs ───────────── */

  /* removed: hero L2759 75vh */

  /* removed: hero-content L2757 wrong override */

  /* Hero eyebrow — gold pill, visible text, no empty shape */
  /* removed: hero-eyebrow L2767 */

  /* H1 — scale down to fit */
  /* removed: hero-h1 L2770 */

  /* Subtext */
  /* removed: hero-p L2773 */

  /* CTA buttons — stack vertically, full width */
  .hero .btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 13px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Button row — column stack, full width */
  .hero [style*="display:flex"],
  .hero [style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Fine print below buttons */
  .hero > div > p:last-child,
  .hero-content > p:last-child {
    font-size: 0.72rem !important;
    margin-top: 12px !important;
  }

  /* ── 4. SPACING — compact cards, breathable sections ──────────── */

  /* Section padding — tighter on small screens */
  /* removed: section L2809 */

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Section headings — smaller but still prominent */
  .section-title,
  .section h2 {
    font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
    margin-bottom: 6px !important;
  }

  .section-sub,
  .section-eyebrow {
    font-size: 0.75rem !important;
    margin-bottom: 12px !important;
  }

  /* Generic buttons — 44px touch target */
  .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}

/* ── IMAGE FALLBACK — inline JS (injected below, no PHP change needed) ── */
/* Category card images with broken src get a warm gradient bg via onerror  */
/* Applied via inline onerror attr in index.php if needed, CSS fallback bg  */
/* already handles visual case via background: linear-gradient on wrapper   */

/* ── END WOS MOBILE PATCH 2026-05-07 ────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   VENDOR BADGE STYLES — 2026-05-07
   Featured Creator & Community Flavor badges for product cards
   ═══════════════════════════════════════════════════════════════ */

.badge-featured-creator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #D4A017, #b8860b);
  color: #1a0a00;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

.badge-community-flavor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #C41E3A, #6B0000);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

.badge-regional-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2d5a1b, #1a3a0a);
  color: #d4edda;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Product card vendor accent line */
.product-card.vendor-product {
  border-top: 3px solid var(--gold) !important;
}

/* Submit page — section responsive */
@media (max-width: 768px) {
  .vendor-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .vendor-hero-cta a {
    text-align: center !important;
  }
  .vendor-two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ── Vendor shop grid badge ─────────────────────────────── */
.product-badge.vendor-badge {
  background: linear-gradient(135deg, #D4A017, #b8860b) !important;
  color: #1a0a00 !important;
  font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════════════
   FLAVOR FINDER LINK FIXES — May 2026
   Ensures all Flavor Finder links are consistently tappable/clickable
   across desktop, mobile, top-bar, footer, and mega-menu contexts.
═══════════════════════════════════════════════════════════════ */

/* ── Top-bar Flavor Finder link — larger tap target ──────────── */
.top-bar a {
  padding: 4px 6px;
  margin: -4px -6px;
  display: inline-block;
  -webkit-tap-highlight-color: rgba(255,255,255,0.2);
}

/* ── Footer Flavor Finder link — ensure full-width row tap ────── */
.footer-links li a {
  display: block;
  padding: 6px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* ── Mobile nav: Flavor Finder direct li item ─────────────────── */
@media (max-width: 768px) {
  .nav-links > li > a {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    width: 100%;
  }
  /* Mega-menu open state — ensure child links are tappable */
  .nav-links > li.open > .mega-menu a,
  .nav-links > li.open > .mega-menu .mega-cta-card {
    pointer-events: auto !important;
  }
  /* Restore pointer events on mega-cta-card and mega-link children on mobile */
  .nav-links > li.open > .mega-menu .mega-cta-card * { pointer-events: none !important; }
  .nav-links > li.open > .mega-menu .mega-link * { pointer-events: none !important; }
  /* Flavor Finder direct link in mobile nav — gold highlight */
  .nav-links > li > a[href="/flavor-finder/"] {
    color: var(--gold) !important;
    font-weight: 700 !important;
  }
}

/* ── Keyboard / focus accessibility ──────────────────────────── */
.mega-cta-card:focus,
.mega-link:focus,
a[href="/flavor-finder/"]:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── Ensure scrollTopBtn never captures clicks in bottom corners ─ */
/* Already handled by display:none when not .visible — extra safety: */
#scrollTopBtn:not(.visible) {
  pointer-events: none !important;
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ISSUE 1 — NAVBAR SIGN-IN BUTTON CONTRAST FIX
   Dark navbar (#1A1A1A) — white text was washing out at low opacity.
   Version: 2026-05-07b
   ══════════════════════════════════════════════════════════════ */

/* Sign In button — dark navbar context — high specificity override */
.navbar .btn-nav-login,
nav .btn-nav-login {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.18s, border-color 0.18s !important;
  white-space: nowrap !important;
}
.navbar .btn-nav-login:hover,
nav .btn-nav-login:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.75) !important;
  color: #FFFFFF !important;
}

/* Account button — logged-in state */
.navbar .btn-nav-account,
nav .btn-nav-account {
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1.5px solid rgba(255,255,255,0.20) !important;
}
.navbar .btn-nav-account:hover,
nav .btn-nav-account:hover {
  background: rgba(212,160,23,0.18) !important;
  color: var(--gold, #D4A017) !important;
  border-color: rgba(212,160,23,0.4) !important;
}

/* Mobile nav — sign-in link in slide-out menu */
@media (max-width: 768px) {
  .nav-links .btn-nav-login,
  .nav-links .btn-nav-register {
    display: inline-block;
    margin: 4px 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   ISSUE 2 — SHOP GRID CALIBRATION
   Correct the over-compression from the previous density fix.
   Target: 3–4 cards desktop, 2–3 tablet, 1–2 mobile.
   Premium medium-sized cards — not miniature, not giant.
   Version: 2026-05-07b
   ══════════════════════════════════════════════════════════════ */

/* ── SHOP GRID (class="products-grid") ── */
/* Desktop: sidebar 260px + gap 28px = 288px. Container 1280-48=1232px.
   Content area: 1232-288 = 944px.
   3 cols @ 300px min = 900px → 3 columns. Perfect. */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ── SEARCH / CATEGORY (class="product-grid") — no sidebar ── */
/* Full container width ~1232px → 4 cols @ 280px = 1120px → 4 cards */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
}

/* ── IMAGE — square, max-height prevents balloon on wide columns ── */
.products-grid .product-img-wrap,
.products-grid .product-card-img,
.product-grid .product-img-wrap,
.product-grid .product-card-img {
  aspect-ratio: 1 / 1 !important;
  max-height: 300px !important;
  overflow: hidden !important;
  width: 100% !important;
  background: var(--cream, #F5EDE0) !important;
  flex-shrink: 0 !important;
}

.products-grid .product-img-wrap img,
.products-grid .product-card-img img,
.products-grid .product-card img,
.product-grid .product-img-wrap img,
.product-grid .product-card-img img,
.product-grid .product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── CARD BODY — readable, comfortable spacing ── */
.products-grid .product-info,
.products-grid .product-card-body,
.product-grid .product-info,
.product-grid .product-card-body {
  padding: 14px 16px 12px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── CATEGORY LABEL ── */
.products-grid .product-category,
.product-grid .product-category {
  font-size: 0.68rem !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 5px !important;
}

/* ── PRODUCT NAME ── */
.products-grid .product-name,
.products-grid .product-name a,
.products-grid .product-card-body h3,
.products-grid .product-info h3,
.product-grid .product-name,
.product-grid .product-name a,
.product-grid .product-card-body h3,
.product-grid .product-info h3 {
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
  margin-bottom: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: var(--font-serif) !important;
  color: var(--charcoal) !important;
  display: block !important;
}

/* ── DESCRIPTION — 2 lines max ── */
.products-grid .product-desc,
.products-grid .product-card-body p,
.products-grid .product-info p,
.product-grid .product-desc,
.product-grid .product-card-body p,
.product-grid .product-info p {
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary, #5A5A5A) !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* ── PURCHASE MODE TABS ── */
.products-grid .purchase-mode-tabs,
.product-grid .purchase-mode-tabs {
  margin-bottom: 8px !important;
  font-size: 0.70rem !important;
}

.products-grid .pmt-btn,
.product-grid .pmt-btn {
  padding: 6px 4px !important;
  font-size: 0.70rem !important;
}

/* ── FOOTER: price + button ── */
.products-grid .product-footer,
.products-grid .product-card-footer,
.product-grid .product-footer,
.product-grid .product-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;
}

/* ── PRICE ── */
.products-grid .product-price,
.product-grid .product-price {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--warm-brown) !important;
  white-space: nowrap !important;
}

/* ── ADD-TO-CART BUTTON — comfortable size ── */
.products-grid .btn-add-cart,
.products-grid .add-to-cart-btn,
.product-grid .btn-add-cart,
.product-grid .add-to-cart-btn {
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  min-height: 38px !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── SUB SAVE LINE ── */
.products-grid .sub-save-line,
.product-grid .sub-save-line {
  font-size: 0.65rem !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   TABLET — 768–1024px
   Content area ≈ 700px (with sidebar collapsed/hidden)
   → auto-fill 280px = 2 cards. Good.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
  }
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
  }
  .products-grid .product-img-wrap,
  .products-grid .product-card-img,
  .product-grid .product-img-wrap,
  .product-grid .product-card-img {
    max-height: 260px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — ≤768px: 2-column grid, legible cards
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .products-grid .product-img-wrap,
  .products-grid .product-card-img,
  .product-grid .product-img-wrap,
  .product-grid .product-card-img {
    max-height: 200px !important;
  }
  .products-grid .product-info,
  .products-grid .product-card-body,
  .product-grid .product-info,
  .product-grid .product-card-body {
    padding: 10px 11px 9px !important;
  }
  .products-grid .product-name,
  .products-grid .product-name a,
  .products-grid .product-card-body h3,
  .product-grid .product-name,
  .product-grid .product-name a,
  .product-grid .product-card-body h3 {
    font-size: 0.85rem !important;
  }
  .products-grid .product-desc,
  .products-grid .product-card-body p,
  .product-grid .product-desc,
  .product-grid .product-card-body p {
    font-size: 0.72rem !important;
  }
  .products-grid .product-price,
  .product-grid .product-price {
    font-size: 0.88rem !important;
  }
  .products-grid .btn-add-cart,
  .products-grid .add-to-cart-btn,
  .product-grid .btn-add-cart,
  .product-grid .add-to-cart-btn {
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
    min-height: 36px !important;
  }
  /* sub-save-line: keep visible on mobile — less cramped now */
  .products-grid .sub-save-line,
  .product-grid .sub-save-line {
    font-size: 0.60rem !important;
    display: block !important;
  }
  .products-grid .purchase-mode-tabs,
  .product-grid .purchase-mode-tabs {
    font-size: 0.64rem !important;
    margin-bottom: 6px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   NARROW MOBILE — ≤480px: 1 column for very small screens
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .products-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .products-grid .product-img-wrap,
  .products-grid .product-card-img,
  .product-grid .product-img-wrap,
  .product-grid .product-card-img {
    max-height: 240px !important;
  }
}



/* ================================================================
   PREMIUM CONVERSION POLISH — World of Seasoning — May 2026
   Sections: Product Cards, Flavor Box, Trust, Membership,
             Mobile, Product Pages, Emails
   ================================================================ */

/* ── CSS Custom Properties (extend existing) ─────────────────── */
:root {
  --card-radius: 16px;
  --img-ratio: 1 / 1;
  --premium-shadow: 0 4px 20px rgba(0,0,0,0.09);
  --premium-shadow-hover: 0 12px 36px rgba(0,0,0,0.15);
  --trust-green: #2d7a2d;
  --trust-bg: #f0f9f0;
  --gold-star: #C9954C;
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   SECTION 1 — PRODUCT CARD VISUAL CONSISTENCY
   ================================================================ */

/* Force consistent card layout — overrides all previous rules */
.product-card {
  background: #fff !important;
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  border: 1px solid #ede6dc !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  transition: var(--transition-smooth) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100% !important;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--premium-shadow-hover) !important;
  border-color: #c8a97a !important;
}

/* Consistent 1:1 square image every time */
.product-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f7f2eb !important;
  flex-shrink: 0 !important;
}

.product-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

/* Consistent product info spacing */
.product-info {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 4px !important;
}

.product-category {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--warm-brown, #8B4513) !important;
  margin-bottom: 2px !important;
}

.product-name {
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 6px !important;
  color: #2c1a0a !important;
}

.product-name a {
  color: inherit !important;
  text-decoration: none !important;
}

.product-price {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--warm-brown, #8B4513) !important;
  margin: auto 0 0 !important;
  padding-top: 8px !important;
}

/* Grid forces equal heights */
.products-grid,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* ================================================================
   SECTION 2 — FLAVOR BOX EXPERIENCE UPGRADE
   ================================================================ */

/* Tier Selector Buttons */
.ff-tier-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ff-tier-btn {
  flex: 1;
  min-width: 140px;
  border: 2px solid #ede6dc;
  border-radius: 14px;
  padding: 14px 10px 12px;
  cursor: pointer;
  background: #fff;
  transition: var(--transition-smooth);
  text-align: center;
  position: relative;
}

.ff-tier-btn:hover {
  border-color: var(--warm-brown, #8B4513);
  background: #fdf6ed;
  transform: translateY(-2px);
}

.ff-tier-btn.active {
  border-color: var(--warm-brown, #8B4513);
  background: linear-gradient(135deg, #fdf0dc, #fff8f0);
  box-shadow: 0 4px 16px rgba(139,69,19,0.15);
}

.ff-tier-btn .tier-icon { font-size: 1.6rem; margin-bottom: 4px; }
.ff-tier-btn .tier-name { font-size: 0.85rem; font-weight: 800; color: #2c1a0a; }
.ff-tier-btn .tier-count { font-size: 0.72rem; color: var(--warm-brown,#8B4513); font-weight: 700; margin: 2px 0; }
.ff-tier-btn .tier-save { font-size: 0.68rem; color: var(--trust-green); font-weight: 700; }
.ff-tier-btn .tier-desc { font-size: 0.67rem; color: #7a6a5a; margin-top: 3px; line-height: 1.3; }
.ff-tier-btn .tier-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--warm-brown,#8B4513); color: white;
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}

/* Selectable product cards in flavor box */
.ff-product-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 2px solid #ede6dc;
  border-radius: 14px;
  cursor: pointer;
  transition: var(--transition-smooth);
  background: #fff;
  user-select: none;
}

.ff-product-item:hover {
  border-color: var(--warm-brown, #8B4513);
  background: #fdf6ed;
}

.ff-product-item.selected {
  border-color: var(--warm-brown, #8B4513);
  background: linear-gradient(135deg, #fdf0dc, #fffbf5);
  box-shadow: 0 4px 14px rgba(139,69,19,0.12);
}

.ff-product-item .ff-item-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f7f2eb;
}

.ff-product-item .ff-item-info { flex: 1; min-width: 0; }
.ff-product-item .ff-item-name { font-weight: 700; font-size: 0.88rem; color: #2c1a0a; margin: 0 0 2px; }
.ff-product-item .ff-item-cat { font-size: 0.70rem; color: var(--warm-brown,#8B4513); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ff-product-item .ff-item-heat { font-size: 0.68rem; color: #888; margin-top: 2px; }
.ff-product-item .ff-item-price { font-weight: 800; font-size: 0.97rem; color: var(--warm-brown,#8B4513); flex-shrink: 0; }

.ff-item-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #d0c5b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
  transition: var(--transition-smooth);
  background: #fff;
}

.ff-product-item.selected .ff-item-check {
  background: var(--warm-brown,#8B4513);
  border-color: var(--warm-brown,#8B4513);
  color: white;
}

/* Your Flavor Box Summary Tray */
.ff-box-tray {
  background: linear-gradient(135deg, #2c1a0a, #4a2800);
  border-radius: 16px;
  padding: 20px 22px;
  color: white;
  margin-top: 16px;
}

.ff-box-tray-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold, #C9954C);
  margin-bottom: 12px;
}

.ff-box-tray-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 36px;
}

.ff-tray-chip {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  display: flex; align-items: center; gap: 6px;
  transition: var(--transition-smooth);
  animation: chipIn 0.25s ease;
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

.ff-tray-chip .chip-remove {
  cursor: pointer; opacity: 0.65; font-size: 0.8rem;
  line-height: 1;
}
.ff-tray-chip .chip-remove:hover { opacity: 1; }

.ff-tray-empty {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
  font-style: italic;
}

.ff-box-tray-pricing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  flex-wrap: wrap;
  gap: 8px;
}

.ff-tray-price-label { font-size: 0.72rem; color: rgba(255,255,255,0.65); }
.ff-tray-price-value { font-size: 1.4rem; font-weight: 900; color: white; }
.ff-tray-discount { font-size: 0.72rem; color: #7bed9f; font-weight: 700; }

/* ================================================================
   SECTION 3 — TRUST & SOCIAL PROOF
   ================================================================ */

/* removed: trust-bar L3590 (plain) */

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a3728;
  white-space: nowrap;
}

.trust-item-icon { font-size: 1.1rem; }

/* Product micro-badges */
.product-micro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff8f0;
  border: 1px solid #ede6dc;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.67rem;
  font-weight: 700;
  color: #6b3d1e;
  letter-spacing: 0.3px;
}

/* Star rating display */
.star-rating-display {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.star-rating-display .star { color: var(--gold-star); font-size: 0.85rem; }
.star-rating-display .star.empty { color: #e0d5c8; }

/* Testimonial card premium */
.testimonial-card-premium {
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px;
  border: 1px solid #ede6dc;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: var(--transition-smooth);
}

.testimonial-card-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.testimonial-quote {
  font-size: 0.92rem;
  color: #4a3728;
  line-height: 1.72;
  font-style: italic;
  position: relative;
}

.testimonial-quote::before {
  content: '"';
  font-size: 3.5rem;
  color: #ede6dc;
  font-family: Georgia, serif;
  line-height: 0;
  position: absolute;
  top: 12px;
  left: -8px;
  opacity: 0.8;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.testimonial-author-name { font-weight: 700; font-size: 0.88rem; }
.testimonial-author-loc  { font-size: 0.73rem; color: #999; }
.testimonial-product-tag {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--warm-brown,#8B4513);
  background: #fdf0dc;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Verified badge */
.verified-badge {
  font-size: 0.65rem;
  color: var(--trust-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

/* ================================================================
   SECTION 4 — SUBSCRIPTION CLARITY
   ================================================================ */

/* Journey framing — above plan cards */
.sub-journey-banner {
  text-align: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #2c1a0a, #4a2800);
  border-radius: 18px;
  color: white;
  margin-bottom: 28px;
}

.sub-journey-banner h3 {
  font-family: var(--font-serif, Georgia);
  font-size: 1.5rem;
  color: white;
  margin: 0 0 8px;
}

.sub-journey-banner p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 480px;
  margin: 0 auto;
}

/* Plan card "best for" tag */
.plan-best-for {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warm-brown,#8B4513);
  background: #fdf0dc;
  border-radius: 20px;
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 12px;
}

.plan-best-for.popular { background: var(--warm-brown,#8B4513); color: white; }

/* Sample box preview strip */
.plan-sample-box {
  background: #f9f5ef;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0 16px;
  font-size: 0.78rem;
}

.plan-sample-box-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  margin-bottom: 6px;
}

.plan-sample-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-sample-item {
  background: white;
  border: 1px solid #ede6dc;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #4a3728;
}

/* Cancel anytime callout */
.cancel-anytime {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--trust-green);
  font-weight: 600;
  justify-content: center;
  margin-top: 8px;
}

/* Savings pill */
.savings-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8f5e9;
  color: var(--trust-green);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* ================================================================
   SECTION 5 — MOBILE PREMIUM PASS
   ================================================================ */

@media (max-width: 767px) {
  /* Product grid — 2 cols on small */
  .products-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .product-name { font-size: 0.82rem !important; }
  .product-price { font-size: 1rem !important; }
  .product-info { padding: 12px !important; }

  /* Flavor tier buttons stack gracefully */
  .ff-tier-btns { flex-direction: column; gap: 8px; }
  .ff-tier-btn { flex: none; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .ff-tier-btn .tier-icon { margin-bottom: 0; font-size: 1.4rem; }

  /* Subscription plan cards */
  .plan-card-v2 { padding: 24px 18px; }
  .plan-amount { font-size: 2rem !important; }

  /* Trust bar wraps cleanly */
  .trust-bar-inner { gap: 16px; }
  .trust-item { font-size: 0.72rem; }

  /* Product page mobile */
  .product-detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Hero CTAs */
  .hero-actions .btn { width: 100% !important; padding: 16px !important; font-size: 1rem !important; }

  /* Testimonials single col */
  .testimonials-grid { grid-template-columns: 1fr !important; }

  /* Trust tray */
  .ff-box-tray { padding: 16px; }
  .ff-tray-price-value { font-size: 1.2rem; }

  /* Sticky mobile CTA for product page */
  .mobile-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    padding: 12px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #ede6dc;
  }

  .mobile-sticky-cta .sticky-price {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--warm-brown,#8B4513);
  }

  .mobile-sticky-cta .btn { flex: 1; padding: 14px 12px !important; font-size: 0.95rem !important; }
}

@media (max-width: 479px) {
  .products-grid,
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .product-info { padding: 10px !important; }
  .product-name { font-size: 0.78rem !important; line-height: 1.3 !important; }
}

/* ================================================================
   SECTION 6 — PRODUCT PAGE TRUST ENHANCEMENTS
   ================================================================ */

/* Flavor story block */
.flavor-story {
  background: linear-gradient(135deg, #fdf8f2, #fff);
  border: 1px solid #ede6dc;
  border-left: 4px solid var(--warm-brown, #8B4513);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 16px 0;
}

.flavor-story-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--warm-brown, #8B4513);
  margin-bottom: 6px;
}

.flavor-story-text {
  font-size: 0.87rem;
  color: #4a3728;
  line-height: 1.65;
  margin: 0;
}

/* Best with / Great for tags */
.product-use-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.use-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid;
}

.use-tag.best-with    { background: #fff8f0; border-color: #f0d9bb; color: #7a4010; }
.use-tag.great-for    { background: #f0f9f0; border-color: #b8d8b8; color: #2d5a2d; }
.use-tag.ff-pick      { background: #fdf0dc; border-color: #e8c98a; color: #6b3d1e; }
.use-tag.heat-level   { background: #fff3f0; border-color: #f0c0b0; color: #c04020; }

/* Flavor profile visual */
.flavor-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.flavor-attr {
  background: #f9f5ef;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}

.flavor-attr-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  margin-bottom: 4px;
}

.flavor-attr-value {
  font-size: 0.85rem;
  font-weight: 800;
  color: #2c1a0a;
}

/* Recommended badge on product card */
.recommended-by-ff {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: linear-gradient(135deg, var(--warm-brown,#8B4513), #c06020);
  color: white;
  font-size: 0.60rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 3;
  white-space: nowrap;
}

/* ================================================================
   SECTION 7 — EMAIL TEMPLATE STYLES (inline reference)
   ================================================================ */
/* These tokens are referenced in email_engine.php */
/* .email-body: max-width 620px, font Georgia/sans, */
/* .email-header: warm-brown bg, white text logo */
/* .email-cta-btn: amber gradient, pill shape */

/* ================================================================
   SECTION 8 — MICRO-INTERACTIONS & POLISH
   ================================================================ */

/* Smooth scroll */
/* Button press feel */
.btn:active { transform: scale(0.97) !important; }

/* Focus rings for accessibility */
.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--warm-brown, #8B4513);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Image lazy-load fade in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded { opacity: 1; }

/* Skeleton loading state for product cards */
.product-card.loading .product-img-wrap {
  background: linear-gradient(90deg, #f0e8dc 25%, #e8ddd0 50%, #f0e8dc 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* shimmer animation deduplicated -- see line 2073 */

/* Add-to-cart pulse */
@keyframes cartPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.cart-added { animation: cartPulse 0.4s ease; }

/* Toast notification */
.wos-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2c1a0a;
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 320px;
}

.wos-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.wos-toast .toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.wos-toast .toast-close {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.65;
  font-size: 1.1rem;
}

@media (max-width: 767px) {
  .wos-toast {
    bottom: 80px;
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ================================================================
   GLOBAL LAZY-LOAD INIT (JS-triggered via IntersectionObserver)
   ================================================================ */


/* ================================================================
   
/* ================================================================
   LUXURY VISUAL REFINEMENT — World of Seasoning — May 2026
   Sections: Typography, Rhythm, Photography, Storytelling,
             Footer, Testimonials, Mobile, Micro-interactions
   ================================================================ */

/* ── SECTION 1: GOOGLE FONTS UPGRADE (Cormorant Garamond for luxury display) ─── */
/* Loaded via @import so we can use the luxury display font inline */

/* ── SECTION 1: LUXURY TYPOGRAPHY SYSTEM ─────────────────────── */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  /* Refined type scale */
  --text-xs:   0.72rem;   /* 11.5px — legal/micro only */
  --text-sm:   0.82rem;   /* 13px   — labels, badges */
  --text-base: 0.95rem;   /* 15px   — body */
  --text-md:   1.05rem;   /* 16.8px — large body */
  --text-lg:   1.2rem;    /* 19.2px — lead/intro */
  --text-xl:   1.5rem;    /* 24px   — h3 level */
  --text-2xl:  2rem;      /* 32px   — h2 level */
  --text-3xl:  2.8rem;    /* 44.8px — h1 level */
  --text-hero: clamp(2.8rem, 6vw, 5rem);

  /* Spacing rhythm */
  --space-xs:  6px;
  --space-sm:  12px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  /* Luxury shadow system */
  --lux-shadow-card:  0 2px 12px rgba(0,0,0,0.06), 0 8px 32px rgba(107,0,0,0.07);
  --lux-shadow-hover: 0 8px 24px rgba(0,0,0,0.10), 0 20px 48px rgba(107,0,0,0.12);
  --lux-shadow-float: 0 24px 64px rgba(0,0,0,0.14);

  /* Refined borders */
  --border-light: rgba(224,208,192,0.6);
  --border-gold:  rgba(212,160,23,0.35);

  /* Warm type colors */
  --ink:       #1A1508;   /* warmer black for headings */
  --ink-soft:  #3D3526;   /* rich warm brown for subheads */
  --body-copy: #4A4235;   /* warm, readable body */
  --muted:     #8A7E72;   /* refined muted */

  /* Transitions */
  --ease-out:  cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-both: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.15s var(--ease-both);
  --t-med:   0.28s var(--ease-both);
  --t-slow:  0.45s var(--ease-both);
}

/* ── Base body refinement ─── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--body-copy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Global heading rhythm ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1 {
  font-size: var(--text-hero) !important;
  font-weight: 700;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 20px !important;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
  font-weight: 700;
  line-height: 1.22 !important;
  letter-spacing: -0.015em;
  margin-bottom: 14px !important;
  color: var(--ink) !important;
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 600;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  margin-bottom: 10px !important;
  color: var(--ink) !important;
  /* Remove any truncation on general h3 */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

h4 {
  font-size: var(--text-md) !important;
  font-weight: 600;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}

p {
  line-height: 1.78;
  color: var(--body-copy);
}

/* Section eyebrow (overline label above headings) */
.section-eyebrow,
.ff-section-tag,
[class*="eyebrow"],
[class*="overline"] {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--warm-brown) !important;
  margin-bottom: 10px !important;
  display: block;
}

/* ── SECTION 2: HOMEPAGE VISUAL RHYTHM ───────────────────────── */

/* Announcement bar — refined height & type */
.announcement-bar,
[class*="announce"] {
  font-size: var(--text-sm) !important;
  letter-spacing: 0.5px;
  padding: 10px 16px !important;
  line-height: 1.5 !important;
}

/* Navbar — more breathing room */
/* .navbar padding/height removed — merged into base rule */
.nav-links > li > a {
  font-size: var(--text-sm) !important;
  letter-spacing: 0.2px;
  padding: 10px 16px !important;
  font-weight: 500 !important;
}
.nav-logo img, .logo-img {
  height: 48px !important;
}

/* Hero — more spacious, editorial */
/* removed: hero L4292 130px */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
/* removed: hero-content L4256 merged into base */
/* removed: hero-eyebrow L4301 */
/* Hero h1 already handled above — add white override */
/* removed: hero-h1 L4287 */
.hero p, .hero-desc {
  font-size: var(--text-lg) !important;
  line-height: 1.68 !important;
  color: rgba(255,255,255,0.88) !important;
  max-width: 640px;
  margin: 0 auto 36px !important;
  font-weight: 300;
  letter-spacing: 0.1px;
}
.hero-actions {
  margin-top: 36px !important;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn {
  padding: 15px 36px !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}

/* Section rhythm — generous vertical padding */
.section,
[class*="section-wrap"],
[class*="-section"]:not([class*="footer"]):not([class*="hero"]):not([class*="section-tag"]):not([class*="section-eyebrow"]):not([class*="section-title-accent"]) {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}

/* Explicit section blocks */
.products-section,
.featured-section,
.testimonials-section,
.trust-section,
.subscription-section,
.cta-section,
.flavor-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Section label above each content block */
.section-label-wrap {
  text-align: center;
  margin-bottom: 44px;
}
.section-label-wrap h2 {
  margin-bottom: 12px !important;
}
.section-label-wrap p {
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.72;
}

/* Visual separator between sections */
.section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border-gold) 50%, var(--border) 70%, transparent);
  margin: 0;
}

/* ── SECTION 3: PRODUCT PHOTOGRAPHY PRESENTATION ─────────────── */

.product-card {
  border-radius: 18px !important;
  box-shadow: var(--lux-shadow-card) !important;
  border: 1px solid var(--border-light) !important;
  transition: transform var(--t-med), box-shadow var(--t-med) !important;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.005) !important;
  box-shadow: var(--lux-shadow-hover) !important;
}
.product-card-img {
  position: relative;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: linear-gradient(145deg, #f7f0e8 0%, #ede4d6 100%) !important;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) !important;
  display: block;
}
.product-card:hover .product-card-img img {
  transform: scale(1.06) !important;
}
/* Subtle vignette on hover for depth */
.product-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.06) 100%);
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.product-card:hover .product-card-img::after {
  opacity: 1;
}

/* Card body padding */
.product-card-body,
.product-card > div:not(.product-card-img):not(.product-card-footer) {
  padding: 18px 20px 14px !important;
}
.product-card-footer {
  padding: 0 20px 18px !important;
}

/* Product name */
.product-card h3,
.product-card-name {
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: unset !important;
}

/* Product description */
.product-card p {
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
  margin-bottom: 12px !important;
}

/* Product price */
.product-price,
.price-main {
  font-family: var(--font-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--warm-brown) !important;
  letter-spacing: -0.01em;
}

/* ── SECTION 4: STORYTELLING & EMOTIONAL LAYER ────────────────── */

/* World Origin strip — between hero and products */
.world-origin-strip {
  background: linear-gradient(135deg, #1a0a00 0%, #2e1206 50%, #1a0a00 100%);
  padding: 56px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.world-origin-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/world-map-dots.png') center/cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.world-origin-strip h2 {
  font-family: var(--font-serif) !important;
  color: #fff !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  margin-bottom: 14px !important;
  position: relative;
}
.world-origin-strip p {
  color: rgba(255,255,255,0.72) !important;
  font-size: var(--text-md) !important;
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.76;
  position: relative;
}
.origin-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  position: relative;
  margin-top: 36px;
}
.origin-stat-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.origin-stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* Counter shelf — "on your counter" section */
.counter-shelf-section {
  background: var(--cream);
  padding: 72px 24px;
}
.counter-shelf-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink);
  text-align: center;
  margin-bottom: 12px;
}
.counter-shelf-sub {
  text-align: center;
  font-size: var(--text-md);
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 48px;
  line-height: 1.72;
}

/* Flavor story enhancement */
.flavor-story {
  background: linear-gradient(135deg, #fff9f2 0%, #fdf3e7 100%) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 28px 32px !important;
  margin: 32px 0 !important;
  position: relative;
}
.flavor-story::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: var(--font-serif);
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
}
.flavor-story h4 {
  font-family: var(--font-serif) !important;
  font-size: 1.1rem !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em;
}
.flavor-story p {
  font-size: var(--text-base) !important;
  line-height: 1.76 !important;
  color: var(--body-copy) !important;
}

/* Membership intro messaging */
.membership-hero-copy,
.sub-journey-banner p {
  font-size: var(--text-md) !important;
  line-height: 1.76 !important;
  color: var(--body-copy) !important;
}
.sub-journey-banner h2 {
  color: var(--ink) !important;
}

/* Flavor Finder intro copy */
.ff-intro,
.ff-hero p {
  font-size: var(--text-md) !important;
  line-height: 1.76 !important;
  max-width: 560px;
  margin: 0 auto;
}

/* ── SECTION 5: FOOTER REFINEMENT ────────────────────────────── */

.footer {
  background: linear-gradient(180deg, #111008 0%, #0d0b06 100%) !important;
}
.footer-top {
  padding: 88px 32px 64px !important;
}
.footer-grid {
  max-width: 1300px !important;
  margin: 0 auto;
  gap: 52px !important;
}
.footer-tagline {
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  color: var(--gold) !important;
  line-height: 1.5 !important;
  margin: 10px 0 8px !important;
  font-weight: 600 !important;
}
.footer-brand p {
  font-size: var(--text-sm) !important;
  line-height: 1.78 !important;
  color: rgba(255,248,240,.72) !important;
  max-width: 270px;
}
.footer-col h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(212,160,23,0.2) !important;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 2px !important;
}
.footer-col ul li {
  margin-bottom: 0 !important;
}
.footer-col ul li a {
  font-size: var(--text-sm) !important;
  color: rgba(255,248,240,.68) !important;
  line-height: 1 !important;
  padding: 7px 0 !important;
  display: block;
  transition: color var(--t-fast), padding-left var(--t-fast) !important;
}
.footer-col ul li a:hover {
  color: var(--gold) !important;
  padding-left: 5px !important;
}
.footer-newsletter h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(212,160,23,0.2) !important;
}
.footer-newsletter p {
  font-size: var(--text-sm) !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 16px !important;
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px !important;
}
.newsletter-form input {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: white !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: var(--text-sm) !important;
  transition: border-color var(--t-fast);
}
.newsletter-form input:focus {
  border-color: rgba(212,160,23,0.5) !important;
  outline: none;
  background: rgba(255,255,255,0.1) !important;
}
.newsletter-form button {
  background: var(--gold) !important;
  color: #1a0a00 !important;
  font-weight: 700 !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.5px;
  padding: 12px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) !important;
}
.newsletter-form button:hover {
  background: var(--gold-light) !important;
  transform: translateY(-1px);
}
.newsletter-consent small {
  font-size: var(--text-xs) !important;
  color: rgba(255,255,255,0.3) !important;
  line-height: 1.6 !important;
}
.newsletter-consent a {
  color: rgba(212,160,23,0.6) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 24px 32px !important;
  font-size: var(--text-xs) !important;
  color: rgba(255,255,255,0.35) !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}
.footer-bottom strong {
  color: rgba(255,255,255,0.55);
}
.footer-disclaimer a {
  color: rgba(255,255,255,0.35) !important;
  transition: color var(--t-fast) !important;
}
.footer-disclaimer a:hover {
  color: var(--gold) !important;
}
.social-links {
  display: flex;
  gap: 12px !important;
  margin-top: 20px !important;
}
.social-links a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.88rem;
  transition: all var(--t-fast) !important;
}
.social-links a:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #1a0a00 !important;
  transform: translateY(-2px) !important;
}

/* ── SECTION 6: TESTIMONIAL & TRUST POLISH ───────────────────── */

.testimonials-grid {
  gap: 28px !important;
}
.testimonial-card-premium {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 34px 30px 28px !important;
  border: 1px solid rgba(224,208,192,0.7) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 8px 28px rgba(107,0,0,0.06) !important;
  display: flex;
  flex-direction: column;
  gap: 18px !important;
  transition: transform var(--t-med), box-shadow var(--t-med) !important;
  position: relative;
  overflow: hidden;
}
.testimonial-card-premium::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.09;
  pointer-events: none;
}
.testimonial-card-premium:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 20px 48px rgba(107,0,0,0.10) !important;
}
.testimonial-quote {
  font-size: var(--text-base) !important;
  line-height: 1.82 !important;
  color: var(--body-copy) !important;
  font-style: italic;
  position: relative;
}
.testimonial-quote::before {
  content: none !important; /* handled by card ::before */
}
.testimonial-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(224,208,192,0.5) !important;
  flex-wrap: wrap;
  gap: 8px;
}
.verified-badge {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.5px;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}

/* Star rating */
.star-rating-display {
  font-size: 0.85rem !important;
}

/* Trust bar */
.trust-bar {
  background: linear-gradient(90deg, #faf5ee 0%, #f5ede0 50%, #faf5ee 100%) !important;
  border-top: 1px solid rgba(224,208,192,0.5) !important;
  border-bottom: 1px solid rgba(224,208,192,0.5) !important;
  padding: 16px 0 !important;
}
.trust-item {
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  color: var(--ink-soft) !important;
  gap: 10px !important;
}
.trust-item i {
  color: var(--warm-brown);
  font-size: 0.95rem;
}

/* ── SECTION 7: MOBILE LUXURY PASS ───────────────────────────── */

@media (max-width: 768px) {
  /* Generous mobile type scaling */
  body { font-size: 0.96rem !important; }

  h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h3 { font-size: clamp(1.05rem, 4vw, 1.25rem) !important; }
  p  { font-size: 0.94rem !important; line-height: 1.72 !important; }

  /* Hero spacious on mobile */
  /* removed: hero L4866 90px */
  /* removed: hero-h1 L4836 */
  .hero p, .hero-desc {
    font-size: 1rem !important;
    margin-bottom: 28px !important;
  }
  .hero-actions .btn {
    padding: 14px 28px !important;
    font-size: 0.94rem !important;
    width: 100%;
    max-width: 320px;
  }

  /* Products — 2 columns, cleaner */
  .products-grid,
  [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .product-card-body,
  .product-card > div:not(.product-card-img):not(.product-card-footer) {
    padding: 14px 14px 10px !important;
  }
  .product-card h3, .product-card-name {
    font-size: 0.88rem !important;
  }
  .product-price { font-size: 1rem !important; }

  /* Section padding — breathable */
  .products-section,
  .featured-section,
  .testimonials-section,
  .trust-section,
  .subscription-section,
  .cta-section,
  .flavor-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Testimonials — single column */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .testimonial-card-premium {
    padding: 24px 22px 20px !important;
  }
  .testimonial-quote {
    font-size: 0.9rem !important;
    line-height: 1.72 !important;
  }

  /* Footer mobile */
  .footer-top { padding: 52px 20px 40px !important; }
  .footer-col h4 { font-size: var(--text-xs) !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 20px 16px !important;
  }

  /* Trust bar — wrap with spacing */
  .trust-bar-inner { gap: 16px !important; padding: 0 16px; }
  .trust-item { font-size: 0.7rem !important; }

  /* Flavor story */
  .flavor-story { padding: 22px 20px !important; margin: 24px 0 !important; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.8rem, 9vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.35rem, 6.5vw, 1.7rem) !important; }

  .products-grid,
  [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card-body,
  .product-card > div:not(.product-card-img):not(.product-card-footer) {
    padding: 10px 10px 8px !important;
  }
  .product-card h3, .product-card-name {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }
  .product-price { font-size: 0.92rem !important; }
}

/* ── SECTION 8: MICRO-INTERACTIONS ───────────────────────────── */

/* Button hover depth */
.btn {
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(107,0,0,0.25) !important;
}
.btn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--crimson) !important;
  box-shadow: 0 6px 24px rgba(107,0,0,0.35) !important;
}

/* Section reveal fade — applied via JS intersection observer */
.lux-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.lux-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.lux-reveal.delay-1 { transition-delay: 0.08s; }
.lux-reveal.delay-2 { transition-delay: 0.16s; }
.lux-reveal.delay-3 { transition-delay: 0.24s; }
.lux-reveal.delay-4 { transition-delay: 0.32s; }

/* Nav link underline slide */
.nav-links > li > a {
  position: relative !important;
}
.nav-links > li > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px; right: 16px;
  height: 1.5px;
  background: var(--warm-brown);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) !important;
  border-radius: 1px;
}
.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  transform: scaleX(1) !important;
}
.nav-links > li > a:hover {
  background: none !important;
  color: var(--warm-brown) !important;
}

/* Product badge pop */
.product-badge,
.badge,
.use-tag {
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
}
.product-card:hover .product-badge,
.product-card:hover .badge {
  transform: scale(1.05) !important;
}

/* Gold accent rule for section headings */
.gold-rule {
  display: block;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 1px;
  margin: 16px auto 0;
}

/* Smooth image loading */
img {
  transition: opacity var(--t-med) !important;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded,
img:not([loading]) {
  opacity: 1;
}

/* Flavor Finder tier cards — premium lift */
.ff-tier-btn {
  transition: all var(--t-med) !important;
  border-radius: 14px !important;
}
.ff-tier-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(107,0,0,0.18) !important;
}
.ff-tier-btn.active {
  box-shadow: 0 4px 18px rgba(107,0,0,0.22) !important;
}

/* Tray chip entrance */
.ff-tray-chip {
  animation: chipIn 0.22s var(--ease-out) both;
}
@keyframes chipIn {
  from { opacity: 0; transform: scale(0.85) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Membership plan card hover */
.plan-card,
.sub-plan-card,
[class*="plan-card"] {
  transition: transform var(--t-med), box-shadow var(--t-med) !important;
}
.plan-card:hover,
.sub-plan-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--lux-shadow-hover) !important;
}

/* Cart empty-state illustration glow */
.cart-empty,
[class*="empty-state"] {
  animation: gentleFloat 6s ease-in-out infinite;
  will-change: transform;
  contain: layout style;
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── LUXURY SCROLL REVEAL JS — injected via inline <script> ──── */
/* (Added to footer.php) */

/* ── MISCELLANEOUS REFINEMENTS ────────────────────────────────── */

/* Breadcrumb */
.breadcrumb {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.3px;
  color: var(--muted) !important;
}
.breadcrumb a { color: var(--muted) !important; }
.breadcrumb a:hover { color: var(--warm-brown) !important; }

/* Tag / category pill */
.tag-pill,
.category-tag {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.5px;
  border-radius: 20px !important;
  padding: 3px 12px !important;
}

/* Heat indicator dots */
.heat-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  transition: transform var(--t-fast) !important;
}
.product-card:hover .heat-dot {
  transform: scale(1.15) !important;
}

/* "Add to Cart" button on product cards */
.btn-add-cart,
.btn-cart {
  font-size: var(--text-sm) !important;
  padding: 10px 18px !important;
  letter-spacing: 0.3px;
}

/* Shop filter bar */
.shop-filter-row,
.filter-bar {
  padding: 14px 0 !important;
  gap: 10px !important;
}
.filter-btn,
.shop-filter-btn {
  font-size: var(--text-xs) !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  letter-spacing: 0.3px;
  transition: all var(--t-fast) !important;
}

/* Cart line items */
.cart-item-name {
  font-family: var(--font-serif) !important;
  font-size: var(--text-md) !important;
  color: var(--ink) !important;
}
.cart-item-price {
  font-size: var(--text-md) !important;
  font-weight: 700 !important;
  color: var(--warm-brown) !important;
}

/* Order summary block */
.order-summary h3,
.cart-summary h3 {
  font-size: 1.2rem !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* Promo/coupon code field */
.coupon-input,
.promo-field {
  font-size: var(--text-sm) !important;
}

/* ── Tablet breakpoint (769–1024) ────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero { padding: 110px 32px 90px !important; }
  /* removed: hero-h1 L5153 */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 36px !important; }
  .footer-brand { grid-column: 1 / -1; }
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Remove any leftover crowding from older passes ──────────── */
/* Ensure no double-padding stacking */
.section.products-section { padding-top: var(--space-xl) !important; }


/* ================================================================
   LUXURY MICRO-PATCH — Typography + Promise + Section Headers
   ================================================================ */

/* Promise strip refinement */
.promise-item { padding: 10px 16px !important; }
.promise-item .promise-icon { font-size: 1.6rem !important; margin-bottom: 6px !important; }
.promise-item .promise-title { font-size: var(--text-xs) !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-weight: 700 !important; }
.promise-item .promise-sub { font-size: var(--text-xs) !important; color: rgba(255,255,255,0.55) !important; letter-spacing: 0.2px; }

/* Section header block */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px !important;
}
.section-header h2 { margin-bottom: 12px !important; }
.section-header p {
  font-size: var(--text-md) !important;
  color: var(--muted) !important;
  line-height: 1.74 !important;
  max-width: 480px;
  margin: 0 auto;
}

/* Gold rule after section-header h2 */
.section-header .gold-rule {
  margin: 14px auto 16px !important;
}

/* Sub journey step refinement */
.sub-journey-step h4 {
  font-family: var(--font-serif) !important;
  font-size: var(--text-md) !important;
  color: white !important;
  margin-bottom: 6px !important;
}
.sub-journey-step p {
  font-size: var(--text-sm) !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.6 !important;
}
.sub-step-num {
  font-size: 1.6rem !important;
  margin-bottom: 12px !important;
  display: block;
}

/* Category card refinement */
/* removed: category-card-h4 L5182 */
/* removed: category-card L5203 */
.category-card:hover {
  transform: translateY(-4px) !important;
}
/* removed: category-card-img L5202 */
.category-card-img img {
  transition: transform var(--t-slow) !important;
}
.category-card:hover .category-card-img img {
  transform: scale(1.07) !important;
}

/* Flavor Finder section tags (steps) */
.ff-section-tag {
  font-size: var(--text-xs) !important;
  letter-spacing: 2px !important;
  color: var(--warm-brown) !important;
}
.ff-section-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
  line-height: 1.25 !important;
}

/* Tier card inner text polish */
.tier-name {
  font-family: var(--font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}
.tier-count {
  font-size: var(--text-xs) !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.tier-save {
  font-size: var(--text-xs) !important;
  color: var(--warm-brown) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  margin-top: 3px;
}
.tier-desc {
  font-size: var(--text-xs) !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  margin-top: 5px;
  font-style: italic;
}

/* Membership plan card inner text */
.plan-best-for {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.5px;
  font-style: italic;
  color: var(--muted) !important;
}

/* Verified badge */
.verified-badge {
  font-size: 0.7rem !important;
  letter-spacing: 0.3px !important;
  padding: 3px 10px !important;
}

/* Wos-divider */
.wos-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border-gold, rgba(212,160,23,0.25)) 50%, var(--border) 70%, transparent);
  margin: 0;
}

/* Announcement bar refined */
#announcementBar, .announcement-bar {
  font-size: 0.78rem !important;
  letter-spacing: 0.4px !important;
  line-height: 1.5 !important;
}

/* Membership hero eyebrow */
.mem-eyebrow, .membership-eyebrow {
  font-size: var(--text-xs) !important;
  letter-spacing: 2px !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Product page breadcrumb */
.breadcrumb, nav[aria-label="breadcrumb"] {
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
}

/* Cart totals */
.cart-total-label { font-size: var(--text-sm) !important; color: var(--muted) !important; }
.cart-total-value { font-family: var(--font-serif) !important; font-size: 1.3rem !important; font-weight: 700 !important; color: var(--ink) !important; }

/* Mobile nav links */
@media (max-width: 768px) {
  .mobile-menu a {
    font-size: 1.05rem !important;
    padding: 14px 20px !important;
    line-height: 1 !important;
  }
  .promise-item .promise-title { font-size: 0.68rem !important; }
  .section-header { margin-bottom: 32px !important; }
  .section-header h2 { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
  /* removed: category-grid L5306 */
  .ff-tier-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
}


/* ================================================================
   /* ================================================================
   MOBILE STABILITY & RESPONSIVE REPAIR — World of Seasoning
   May 2026
   ── Fixes: hamburger drawer, overlaps, trust language refs in CSS,
      hero sizing, product cards, footer columns, touch targets
   ================================================================ */

/* ── 1. HAMBURGER DRAWER — DEFINITIVE FIX ───────────────────────
   ROOT CAUSE: luxury pass set .nav-links{background:#1a1a1a} globally
   which clashed with the white drawer. Also two conflicting drawer
   position rules (absolute top:70px vs fixed). Consolidate here.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Hamburger icon — always visible, always white (navbar is dark) */
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border: none;
    background: transparent;
    z-index: 1002;
    order: -1;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff !important;
    border-radius: 2px;
    transition: all 0.25s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* DRAWER — single authoritative rule */
  .nav-links {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 82% !important;
    max-width: 340px !important;
    height: 100vh !important;
    flex-direction: column !important;
    padding: 72px 0 40px !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    gap: 0 !important;
    /* LIGHT drawer — premium warm cream */
    background: #FAF5EE !important;
    box-shadow: 6px 0 32px rgba(0,0,0,0.22) !important;
  }

  .nav-links.open {
    left: 0 !important;
  }

  /* Drawer list items */
  .nav-links > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(107,0,0,0.08) !important;
    position: relative;
  }

  /* Drawer links — dark text on cream background — READABLE */
  .nav-links > li > a,
  .navbar .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 15px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1A1508 !important;
    background: transparent !important;
    text-decoration: none !important;
    min-height: 52px !important;
    letter-spacing: 0.01em;
    white-space: normal !important;
    line-height: 1.3;
    /* Remove underline micro-interaction on mobile drawer */
  }
  .nav-links > li > a:hover,
  .navbar .nav-links > li > a:hover {
    background: rgba(107,0,0,0.06) !important;
    color: var(--crimson, #6B0000) !important;
  }
  /* Flavor Finder highlight link */
  .nav-links > li > a[href="/flavor-finder/"],
  .nav-links > li > a.nav-highlight {
    color: var(--crimson, #6B0000) !important;
    font-weight: 700 !important;
  }

  /* Remove desktop underline animation on mobile */
  .nav-links > li > a::after {
    display: none !important;
  }

  /* Login / account buttons inside drawer */
  .nav-links .btn-nav-login,
  .nav-links .btn-nav-account,
  .nav-links .btn-nav-register {
    display: block !important;
    margin: 6px 20px !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1A1508 !important;
    border: 1.5px solid rgba(107,0,0,0.25) !important;
    background: white !important;
  }

  /* Drawer close button */
  #navCloseBtn,
  .nav-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 20px !important;
    right: 18px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(107,0,0,0.08) !important;
    color: #1A1508 !important;
    font-size: 1rem !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1003 !important;
  }

  /* Drawer logo / brand header inside */
  .nav-drawer-brand {
    position: absolute;
    top: 18px;
    left: 20px;
    font-family: var(--font-serif, Georgia);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--crimson, #6B0000);
  }

  /* Dropdown / mega-menu inside drawer — collapsible */
  .nav-links .dropdown,
  .nav-links .mega-menu,
  .nav-links .mega-sub {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(107,0,0,0.04) !important;
    border-radius: 0 !important;
    display: none;
    padding: 0 0 8px 20px !important;
  }
  .nav-links > li.open > .dropdown,
  .nav-links > li.open > .mega-menu,
  .nav-links > li.open > .mega-sub {
    display: block !important;
  }
  .nav-links .mega-inner { grid-template-columns: 1fr !important; gap: 0 !important; }
  .nav-links .mega-col { padding: 4px 0 !important; }
  .nav-links .mega-col-title { font-size: 0.7rem !important; padding: 8px 16px 4px !important; }
  .nav-links .mega-link {
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    gap: 10px;
  }
  .nav-links .mega-link small,
  .nav-links .mega-link .mega-icon { display: none !important; }
  .nav-links .mega-cta-card { display: none !important; }

  /* Overlay */
  .nav-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index: 998 !important;
    backdrop-filter: none !important;
  }
  .nav-overlay.active { display: block !important; }

  /* Body scroll lock when drawer open */
  body.nav-open {
    overflow: hidden !important;
  }

  /* Nav container mobile */
  .nav-container {
    padding: 0 16px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  /* Nav icons (cart, search, account) — stay visible */
  .nav-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .nav-icon {
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Logo stays visible */
  .nav-logo, .logo-img {
    max-height: 38px !important;
    width: auto !important;
    flex-shrink: 0;
  }
}

/* ── 2. HORIZONTAL SCROLL KILL ─────────────────────────────────── */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
* { box-sizing: border-box; }

/* ── 3. HERO — MOBILE SIZING FIX ───────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: 80px 20px 64px !important;
    min-height: 80vh !important;
  }
  /* removed: hero-h1 L5606 */
  .hero p, .hero-desc {
    font-size: 0.96rem !important;
    line-height: 1.68 !important;
    margin-bottom: 24px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .hero-actions .btn,
  .hero-actions a {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }
  /* removed: hero-eyebrow L5653 */
  .hero-content {
    padding: 72px 20px 56px !important;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 64px 16px 52px !important;
    min-height: 75vh !important;
  }
  /* removed: hero-h1 L5637 */
  .hero-content {
    padding: 60px 16px 48px !important;
  }
}

/* ── 4. PRODUCT CARDS — MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  .product-grid,
  .products-grid,
  [class*="product-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card {
    border-radius: 12px !important;
  }
  .product-card-body,
  .product-card > div:not(.product-card-img):not(.product-card-footer) {
    padding: 12px 12px 8px !important;
  }
  .product-card-footer {
    padding: 0 12px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .product-card h3,
  .product-card-name {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
  }
  .product-price { font-size: 0.95rem !important; }
  /* Touch-friendly cart button */
  .btn-add-cart,
  .add-to-cart-btn,
  .btn-cart {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    width: 100% !important;
  }
  /* Heat dots stay small */
  .heat-dot { width: 8px !important; height: 8px !important; }
}

@media (max-width: 400px) {
  .product-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── 5. SECTION PADDING — MOBILE ────────────────────────────────── */
@media (max-width: 768px) {
  .section,
  .products-section,
  .featured-section,
  .testimonials-section,
  .subscription-section,
  .cta-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section-header {
    margin-bottom: 28px !important;
  }
  .section-header h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
  }
  .section-header p {
    font-size: 0.9rem !important;
  }
}

/* ── 6. PROMISE / TRUST BAR — MOBILE ────────────────────────────── */
@media (max-width: 768px) {
  .trust-bar-inner {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding: 0 16px !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
  }
  .trust-bar-inner::-webkit-scrollbar { display: none; }
  .trust-item {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    flex-shrink: 0;
  }
  /* Brand promise strip */
  [class*="promise"] > div,
  .promise-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .promise-item .promise-icon { font-size: 1.4rem !important; }
  .promise-item .promise-title { font-size: 0.65rem !important; }
  .promise-item .promise-sub { font-size: 0.6rem !important; }
}

/* ── 7. TESTIMONIALS — MOBILE ───────────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-grid,
  [class*="testimonials-grid"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .testimonial-card-premium {
    padding: 22px 20px 18px !important;
  }
  .testimonial-quote {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
  }
}

/* ── 8. MEMBERSHIP / SUBSCRIPTION — MOBILE ──────────────────────── */
@media (max-width: 768px) {
  .sub-journey-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .sub-journey-step {
    padding: 16px 14px !important;
  }
  .sub-journey-step h4 {
    font-size: 0.88rem !important;
  }
  .sub-journey-step p {
    font-size: 0.75rem !important;
  }
  /* Membership plan cards */
  .plan-cards-grid,
  [class*="plan-card"] ~ [class*="plan-card"] {
    grid-template-columns: 1fr !important;
  }
  /* Membership hero */
  .membership-hero,
  .mem-hero {
    padding: 60px 16px 48px !important;
  }
}

@media (max-width: 480px) {
  .sub-journey-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. FLAVOR FINDER — MOBILE ──────────────────────────────────── */
@media (max-width: 768px) {
  .ff-shell { padding: 20px 16px 60px !important; }
  .ff-q-title { font-size: 1.3rem !important; line-height: 1.28 !important; }
  .ff-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ff-heat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .ff-choice { padding: 14px 12px !important; }
  .ff-label { font-size: 0.85rem !important; }
  .ff-desc  { font-size: 0.7rem !important; }
  .ff-product-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ff-recipe-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ff-box-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  /* Flavor Box tray */
  .ff-box-tray,
  #ffBoxTray { 
    max-height: 140px !important;
    overflow-y: auto !important;
  }
  /* Tier cards */
  .ff-tier-btns { flex-direction: column !important; gap: 8px !important; }
  .ff-tier-btn { width: 100% !important; }
  /* Nav in FF */
  .ff-nav { flex-direction: column-reverse !important; gap: 8px !important; }
  .ff-nav .ff-next,
  .ff-nav .ff-back { width: 100% !important; padding: 13px 20px !important; }
}

@media (max-width: 480px) {
  .ff-grid { grid-template-columns: 1fr !important; }
  .ff-q-title { font-size: 1.15rem !important; }
  .ff-recipe-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. SOURCING STORY — MOBILE (grid col fix) ─────────────────── */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Sourcing stats grid */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 11. FOOTER MOBILE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-brand {
    text-align: center !important;
  }
  .footer-brand p { max-width: 100% !important; }
  .social-links { justify-content: center !important; }
  .footer-col h4 { margin-bottom: 12px !important; }
  .footer-top { padding: 48px 20px 36px !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 20px 16px !important;
    font-size: 0.7rem !important;
  }
  .footer-col ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .footer-col ul li a { padding: 6px 0 !important; font-size: 0.82rem !important; }
  .newsletter-form { flex-direction: column; }
  .footer-newsletter { margin-top: 4px; }
}

/* ── 12. CART + CHECKOUT — MOBILE ───────────────────────────────── */
@media (max-width: 768px) {
  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr !important;
  }
  .cart-summary,
  .order-summary {
    position: static !important;
  }
}

/* ── 13. TOUCH TARGETS — ALL INTERACTIVE ELEMENTS ───────────────── */
@media (max-width: 768px) {
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  select {
    min-height: 44px !important;
    touch-action: manipulation;
  }
  /* Smaller items that should stay compact */
  .btn-sm { min-height: 36px !important; }
  /* Category cards */
  /* removed: category-card L5866 */
  /* Filter buttons */
  .filter-btn, .shop-filter-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
}

/* ── 14. WHITE-SPACE NOWRAP KILL ON MOBILE ──────────────────────── */
@media (max-width: 768px) {
  /* Only keep nowrap on nav items on desktop, kill on mobile */
  .nav-links > li > a { white-space: normal !important; }
  h1, h2, h3, h4 { white-space: normal !important; overflow-wrap: break-word; word-break: break-word; }
  p { overflow-wrap: break-word; }
}

/* ── 15. CATEGORY GRID — MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {
  /* removed: category-grid L5864 */
  /* removed: category-card-h4 L5867 */
  /* removed: category-card-img L5882 */
}

/* ── 16. HOMEPAGE SPECIFIC STACKING FIXES ───────────────────────── */
@media (max-width: 768px) {
  /* Packaging section — stack image above text */
  .packaging-section > .container > div,
  [style*="grid-template-columns:1fr 1fr"][style*="gap:60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Subscription preview mini-plans */
  [style*="grid-template-columns:repeat(auto-fit,minmax(220px"] {
    grid-template-columns: 1fr !important;
  }
  /* Sub journey steps */
  .sub-journey { padding: 60px 16px !important; }
  .sub-journey h2 { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
  .sub-journey > .container > div:first-child { margin-bottom: 24px !important; }
}

/* ── 17. ANNOUNCEMENT BAR — MOBILE ──────────────────────────────── */
@media (max-width: 768px) {
  #announcementBar,
  .announcement-bar {
    font-size: 0.72rem !important;
    padding: 8px 36px 8px 12px !important;
    text-align: left !important;
    line-height: 1.5 !important;
  }
}

/* ── 18. SEARCH BAR — MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .search-bar,
  .search-wrap,
  [class*="search-form"] {
    width: 100% !important;
  }
  .search-input {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* ── 19. SCROLL SMOOTHNESS ───────────────────────────────────────── */
html {  -webkit-text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: rgba(107,0,0,0.12); }

/* ── 20. Z-INDEX AUDIT FIX ───────────────────────────────────────── */
/* Ensure no mobile overlaps with sticky nav */
/* .navbar z-index removed — already in base */
.nav-overlay { z-index: 1000 !important; }
.nav-links { z-index: 1001 !important; }
#navCloseBtn, .nav-close-btn { z-index: 1003 !important; }
.nav-toggle { z-index: 1002 !important; }
.wos-toast,
.toast { z-index: 9999 !important; }
/* Make sure mega-menu doesn't bleed into mobile */
@media (max-width: 768px) {
  .mega-menu, .dropdown { z-index: auto !important; }
}


/* ================================================================
   HAMBURGER MENU CLARITY FIX — May 2026
   Ensures overlay blurs ONLY page behind drawer, never the drawer.
   Drawer is fully solid, sharp, high-contrast.
   ================================================================ */

/* Overlay — behind everything, no blur, just dark tint */
.nav-overlay,
#navOverlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 998 !important;
}

/* Drawer panel — fully solid, fully sharp, above overlay */
#navLinks,
.nav-links {
  background: #FDFAF5 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1001 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Drawer links — maximum readability */
#navLinks > li > a,
.nav-links > li > a {
  color: #1A1A1A !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1.3 !important;
  display: flex !important;
  align-items: center !important;
  padding: 16px 24px !important;
  min-height: 54px !important;
  width: 100% !important;
}

/* Drawer link hover */
#navLinks > li > a:hover,
.nav-links > li > a:hover {
  background: rgba(107,0,0,0.07) !important;
  color: #6B0000 !important;
}

/* Flavor Finder highlight */
.nav-links > li > a[href="/flavor-finder/"],
.nav-links > li > a.nav-highlight {
  color: #6B0000 !important;
  font-weight: 700 !important;
}

/* Close button — above all panel content */
#navCloseBtn,
.nav-close-btn {
  z-index: 1003 !important;
  opacity: 1 !important;
  filter: none !important;
  background: rgba(0,0,0,0.06) !important;
  color: #1A1A1A !important;
  border: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 18px !important;
  right: 16px !important;
}

/* Hamburger toggle — always sharp white on dark navbar */
.nav-toggle,
#navToggle {
  z-index: 1002 !important;
  opacity: 1 !important;
  filter: none !important;
}
.nav-toggle span,
#navToggle span {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* Final z-index hierarchy (clean) */
/* 998 = overlay (dark page tint, no blur)  */
/* 999 = navbar (sticky top bar)            */
/* 1000 = reserved                          */
/* 1001 = nav-links drawer                  */
/* 1002 = nav-toggle (hamburger)            */
/* 1003 = close button                      */
/* 9999 = toast notifications               */


/* ================================================================
   DARK SECTION TEXT CONTRAST — Mobile Readability Fix
   May 2026
   Targets: hero, sub-journey, charcoal CTA sections, business section.
   Desktop untouched. Only contrast/opacity values adjusted.
   ================================================================ */

/* ── HERO ─────────────────────────────────────────────────────── */
/* Hero has image overlay — h1 and p need shadow for depth */
/* removed: hero-h1 L6102 */
.hero p,
.hero .hero-desc {
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
/* Hero fine print / shipping note */
.hero small,
.hero [style*="0.5)"],
.hero [style*="0.45)"] {
  color: rgba(255,255,255,0.72) !important;
}
/* Eyebrow pill — already gold, keep it */
/* removed: hero-eyebrow L6147 */

@media (max-width: 768px) {
  /* removed: hero-h1 L6122 */
  .hero p, .hero .hero-desc {
    color: rgba(255,255,255,0.90) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;
  }
}

/* ── SUB-JOURNEY (dark brown gradient) ───────────────────────── */
.sub-journey h2,
.sub-journey h3 {
  color: #F8F4EE !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}
.sub-journey p {
  color: rgba(255,255,255,0.86) !important;
}
/* Step labels */
.sub-journey-step h4 {
  color: #F8F4EE !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.sub-journey-step p {
  color: rgba(255,255,255,0.72) !important;  /* was 0.55 — unreadable */
}
/* Journey banner heading/body */
.sub-journey-banner h2,
.sub-journey-banner h3 {
  color: #F8F4EE !important;
}
.sub-journey-banner p {
  color: rgba(255,255,255,0.84) !important;  /* was var(--body-copy) override — wrong on dark bg */
}
/* Arrow connectors — subtle, not invisible */
.sub-journey-step:not(:last-child)::after {
  color: rgba(255,255,255,0.5) !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .sub-journey-step p {
    color: rgba(255,255,255,0.78) !important;
  }
  .sub-journey h2 {
    text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
  }
}

/* ── CHARCOAL / DARK-BG INLINE SECTIONS ─────────────────────── */
/* Flavor Finder CTA, Packaging section, Final CTA               */
/* These use inline styles — we target by parent section context */

/* Any section with charcoal or dark gradient background */
/* Class-free sections targeted by their known child patterns    */

/* Flavor Finder dark CTA (charcoal to #2C1010) */
/* Identified: "Your Kitchen. Your Flavors." section */
.section [style*="rgba(255,255,255,0.45)"],
.section [style*="rgba(255,255,255,.45)"] {
  color: rgba(255,255,255,0.72) !important;
}
.section [style*="rgba(255,255,255,0.35)"],
.section [style*="rgba(255,255,255,.35)"] {
  color: rgba(255,255,255,0.65) !important;
}

/* Final CTA — "Your Kitchen Deserves Better." */
/* rgba(255,255,255,0.75) → lift to 0.88 */
/* rgba(255,255,255,0.35) fine print → lift to 0.65 */

/* Generic: any h1-h4 inside a dark-gradient section */
@media (max-width: 768px) {
  /* Catch-all for inline-styled dark sections on mobile */
  section[style*="charcoal"] h1,
  section[style*="charcoal"] h2,
  section[style*="charcoal"] h3,
  section[style*="#1a"] h1,
  section[style*="#1a"] h2,
  section[style*="#2C"] h1,
  section[style*="#2C"] h2,
  section[style*="gradient"] h1,
  section[style*="gradient"] h2 {
    color: #F8F4EE !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
  }
  section[style*="charcoal"] p,
  section[style*="#1a"] p,
  section[style*="#2C"] p,
  section[style*="gradient"] p {
    color: rgba(255,255,255,0.86) !important;
  }
  /* Fine print / small helper text on dark */
  section[style*="charcoal"] small,
  section[style*="gradient"] small,
  section[style*="charcoal"] [style*="0.45"],
  section[style*="gradient"] [style*="0.45"],
  section[style*="charcoal"] [style*="0.35"],
  section[style*="gradient"] [style*="0.35"] {
    color: rgba(255,255,255,0.68) !important;
  }
}

/* ── BUSINESS / VENDOR SECTION (charcoal bg) ────────────────── */
section[style*="charcoal"] .section-eyebrow,
section[style*="charcoal"] [style*="eyebrow"] {
  color: #D4A017 !important; /* gold — keep branded */
}
section[style*="charcoal"] h2,
section[style*="charcoal"] h3 {
  color: #F8F4EE !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
}
section[style*="charcoal"] p {
  color: rgba(255,255,255,0.84) !important;
}

@media (max-width: 768px) {
  section[style*="charcoal"] h2 {
    color: #F8F4EE !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
  }
  section[style*="charcoal"] p {
    color: rgba(255,255,255,0.88) !important;
  }
}

/* ── CRIMSON BANNER STRIP ────────────────────────────────────── */
/* The small crimson strip (shipping/promise bar) */
section[style*="var(--crimson)"] p,
section[style*="var(--crimson)"] span,
section[style*="var(--crimson)"] a {
  color: rgba(255,255,255,0.95) !important;
}

/* ── SUBSCRIPTION PLAN CARDS ON DARK BG ──────────────────────── */
/* Mini plan previews inside dark section */
.sub-plan-preview,
[style*="rgba(255,255,255,0.05)"] {
  color: rgba(255,255,255,0.92) !important;
}
[style*="rgba(255,255,255,0.06)"] h3,
[style*="rgba(255,255,255,0.06)"] h4,
[style*="rgba(255,255,255,0.13)"] h3,
[style*="rgba(255,255,255,0.13)"] h4 {
  color: #F8F4EE !important;
}
[style*="rgba(255,255,255,0.06)"] p,
[style*="rgba(255,255,255,0.13)"] p {
  color: rgba(255,255,255,0.82) !important;
}

/* ── LIGHT SECTIONS — PROTECTION RULE ───────────────────────── */
/* Ensure we do NOT accidentally affect white/cream sections      */
.section[style*="var(--white)"] h1,
.section[style*="var(--white)"] h2,
.section[style*="var(--white)"] p,
section[style*="var(--white)"] h1,
section[style*="var(--white)"] h2,
section[style*="var(--white)"] p,
.section[style*="var(--cream)"] h1,
.section[style*="var(--cream)"] h2,
.section[style*="var(--cream)"] p {
  color: initial;
  text-shadow: none !important;
}

/* ================================================================
   WORLD OF SEASONING — QUALITY GRADE SYSTEM
   W1 Everyday Essential | W2 Premium Select | W3 Signature Reserve
   May 2026
   ================================================================ */

/* ── Badge base ─────────────────────────────────────────────────── */
.wos-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  cursor: default;
  user-select: none;
  vertical-align: middle;
}

/* ── W1 — Everyday Essential ──────────────────────────────────── */
.wos-grade-badge.grade-w1 {
  background: #F0EDE8;
  color: #5A4A3A;
  border: 1px solid #D4C9BC;
}
.wos-grade-badge.grade-w1::before {
  content: '●';
  color: #8B7355;
  font-size: 0.5rem;
}

/* ── W2 — Premium Select ──────────────────────────────────────── */
.wos-grade-badge.grade-w2 {
  background: #1A1A1A;
  color: #D4A017;
  border: 1px solid #8B6914;
}
.wos-grade-badge.grade-w2::before {
  content: '◆';
  color: #D4A017;
  font-size: 0.5rem;
}

/* ── W3 — Signature Reserve ───────────────────────────────────── */
.wos-grade-badge.grade-w3 {
  background: linear-gradient(135deg, #4a1000 0%, #6B0000 100%);
  color: #F8F4EE;
  border: 1px solid #8B0000;
  box-shadow: 0 1px 4px rgba(107,0,0,0.25);
}
.wos-grade-badge.grade-w3::before {
  content: '★';
  color: #D4A017;
  font-size: 0.62rem;
}

/* ── Tooltip container ─────────────────────────────────────────── */
.wos-grade-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wos-grade-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #888;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s;
}
.wos-grade-info-btn:hover { background: rgba(0,0,0,0.16); color: #444; }

/* Tooltip popup */
.wos-grade-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 240px;
  background: #1A1A1A;
  color: #F8F4EE;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.72rem;
  line-height: 1.6;
  z-index: 2000;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  pointer-events: none;
}
.wos-grade-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 18px;
  border: 6px solid transparent;
  border-top-color: #1A1A1A;
}
.wos-grade-tooltip .tt-title {
  font-weight: 700;
  font-size: 0.78rem;
  color: #D4A017;
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wos-grade-tooltip .tt-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.84);
}
.wos-grade-tooltip .tt-row .tt-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D4A017;
  flex-shrink: 0;
  margin-top: 5px;
}
.wos-grade-tooltip .tt-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem;
  font-style: italic;
}
/* Show tooltip on hover of wrap and on info-btn focus */
.wos-grade-wrap:hover .wos-grade-tooltip,
.wos-grade-info-btn:focus + .wos-grade-tooltip {
  display: block;
}
/* Mobile — tap to toggle via JS class */
.wos-grade-tooltip.active { display: block; }

/* ── "Why this rating?" expandable section ────────────────────── */
.grade-why-section {
  margin-top: 20px;
  border: 1px solid var(--border, #E8E0D5);
  border-radius: 10px;
  overflow: hidden;
}
.grade-why-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #FDFAF5;
  border: none;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--charcoal, #1A1A1A);
  text-align: left;
  transition: background 0.15s;
}
.grade-why-toggle:hover { background: #F5EFE6; }
.grade-why-toggle .gw-arrow {
  font-size: 0.7rem;
  color: #888;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.grade-why-toggle.open .gw-arrow { transform: rotate(180deg); }
.grade-why-body {
  display: none;
  padding: 16px 18px 18px;
  background: white;
  font-size: 0.84rem;
  line-height: 1.74;
  color: var(--text-secondary, #5A4A3A);
  border-top: 1px solid var(--border, #E8E0D5);
}
.grade-why-body.open { display: block; }
.grade-why-body p { margin: 0 0 8px; }
.grade-why-body p:last-child { margin-bottom: 0; }

/* ── On product cards: badge positioned below product name ─────── */
.product-card .wos-grade-wrap {
  margin-top: 5px;
  margin-bottom: 4px;
}
/* Card tooltip — flip to avoid clipping */
.product-card .wos-grade-tooltip {
  left: 0;
  right: auto;
  width: 220px;
}

/* ── Admin grade selector ─────────────────────────────────────── */
.grade-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grade-select-wrap select {
  border: 1px solid #D4C9BC;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  background: white;
  color: #1A1A1A;
  cursor: pointer;
}
.grade-select-wrap select:focus { outline: 2px solid #D4A017; outline-offset: 1px; }
/* Grade preview pill next to select */
.grade-preview {
  display: none;
  margin-top: 4px;
}
.grade-select-wrap .grade-help {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.5;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wos-grade-tooltip {
    width: 220px;
    font-size: 0.7rem;
  }
  .grade-why-toggle { font-size: 0.82rem; padding: 13px 16px; }
  .grade-why-body   { font-size: 0.82rem; padding: 14px 16px 16px; }
}

/* ================================================================
   WORLD OF SEASONING — CULTURAL FLAVOR JOURNEY LAYER
   Additive only. Commerce untouched. May 2026.
   ================================================================ */

/* ── Culture chip (small inline tag) ────────────────────────────── */
.culture-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #FDFAF5;
  color: var(--charcoal, #1A1A1A);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  cursor: pointer;
}
.culture-chip:hover {
  background: #1A1A1A;
  color: #F8F4EE;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.culture-chip-emoji { font-size: 0.88rem; line-height: 1; }
.culture-chip-name  { line-height: 1; }

/* ── Culture strip (row of chips) ───────────────────────────────── */
.culture-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.culture-strip--horizontal { flex-direction: row; }
.culture-strip--vertical   { flex-direction: column; align-items: flex-start; }

/* Culture strip section wrapper */
.culture-explore-section {
  padding: 20px 0 8px;
  border-top: 1px solid var(--border, #E8E0D5);
  margin-top: 20px;
}
.culture-explore-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #888);
  margin-bottom: 10px;
}

/* ── Secondary CTA button on product page ───────────────────────── */
.btn-culture-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius, 8px);
  border: 1.5px solid var(--border, #E8E0D5);
  background: transparent;
  color: var(--charcoal, #1A1A1A);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all 0.18s ease;
  margin-top: 10px;
  width: 100%;
}
.btn-culture-explore:hover {
  background: #1A1A1A;
  color: #F8F4EE;
  border-color: #1A1A1A;
}

/* ── Culture CTA chip (product card micro-link) ─────────────────── */
.culture-cta-link  { text-decoration: none; display: inline-block; margin-top: 4px; }
.culture-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--warm-brown, #8B4513);
  border-bottom: 1px dashed var(--warm-brown, #8B4513);
  padding-bottom: 1px;
  letter-spacing: 0.02em;
  transition: color 0.12s;
}
.culture-cta-chip:hover { color: var(--crimson, #8B0000); }

/* ── Culture Journey banner (homepage / shop strip) ─────────────── */
.culture-journey-banner {
  background: #1A1A1A;
  border-radius: var(--radius-lg, 16px);
  padding: 28px 32px;
  color: #F8F4EE;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.culture-journey-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.culture-journey-banner .cjb-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #D4A017;
  margin-bottom: 8px;
}
.culture-journey-banner h3 {
  font-family: var(--font-serif, Georgia);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #F8F4EE;
  margin: 0 0 6px;
  line-height: 1.2;
}
.culture-journey-banner p {
  color: rgba(255,255,255,0.72);
  font-size: 0.84rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.culture-journey-banner .cjb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.culture-journey-banner .cjb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  background: rgba(255,255,255,0.06);
}
.culture-journey-banner .cjb-chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  color: white;
}

/* ── Culture sidebar block (shop sidebar) ───────────────────────── */
.culture-sidebar-block {
  border: 1px solid var(--border, #E8E0D5);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  margin-top: 24px;
  background: #FDFAF5;
}
.culture-sidebar-block .csb-header {
  background: #1A1A1A;
  color: #F8F4EE;
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.culture-sidebar-block .csb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--charcoal, #1A1A1A);
  font-size: 0.82rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border, #E8E0D5);
  transition: background 0.12s;
}
.culture-sidebar-block .csb-item:last-child { border-bottom: none; }
.culture-sidebar-block .csb-item:hover { background: #F5EFE6; }
.culture-sidebar-block .csb-item .csb-emoji { font-size: 1rem; flex-shrink: 0; }
.culture-sidebar-block .csb-item .csb-text  { line-height: 1.3; }
.culture-sidebar-block .csb-item .csb-sub   { font-size: 0.68rem; color: var(--text-muted, #888); }

/* ── Flavor Finder — culture journey result block ───────────────── */
.ff-culture-block {
  background: #1A1A1A;
  border-radius: 16px;
  padding: 24px;
  color: #F8F4EE;
  margin-top: 20px;
}
.ff-culture-block .fcb-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #D4A017;
  margin-bottom: 8px;
}
.ff-culture-block h4 {
  font-family: var(--font-serif, Georgia);
  font-size: 1.15rem;
  color: #F8F4EE;
  margin: 0 0 8px;
}
.ff-culture-block p {
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  line-height: 1.65;
  margin: 0 0 14px;
}
.ff-culture-block .fcb-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ff-culture-block .fcb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
}
.ff-culture-block .fcb-btn-primary {
  background: var(--crimson, #8B0000);
  color: white;
}
.ff-culture-block .fcb-btn-primary:hover { opacity: 0.88; }
.ff-culture-block .fcb-btn-outline {
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.88);
  background: transparent;
}
.ff-culture-block .fcb-btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.45);
}

/* ── Membership — culture subscription teaser ───────────────────── */
.culture-sub-tease {
  background: linear-gradient(135deg, #1A0A00, #3A1A00);
  border-radius: 14px;
  padding: 22px 24px;
  color: white;
  margin-top: 24px;
}
.culture-sub-tease .cst-label {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #D4A017;
  margin-bottom: 8px;
}
.culture-sub-tease h4 {
  font-family: var(--font-serif, Georgia);
  font-size: 1.1rem;
  color: #F8F4EE;
  margin: 0 0 6px;
}
.culture-sub-tease p {
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0 0 14px;
}
.culture-sub-tease .cst-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.culture-sub-tease .cst-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .culture-journey-banner { padding: 22px 18px; }
  .culture-journey-banner h3 { font-size: 1.15rem; }
  .culture-sidebar-block { margin-top: 18px; }
  .ff-culture-block { padding: 18px; }
  .ff-culture-block .fcb-actions { flex-direction: column; }
  .culture-sub-tease { padding: 18px; }
  .btn-culture-explore { font-size: 0.84rem; padding: 10px 16px; }
}

/* ── Explore page placeholder ────────────────────────────────────── */
.culture-hero-banner {
  background: var(--bg-dark, #1A1A1A);
  padding: 48px 24px;
  text-align: center;
  color: white;
  border-radius: var(--radius-lg, 16px);
  margin-bottom: 32px;
}

/* ── FF results sections — tighter mobile spacing ── */
.ff-result-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.ff-step#ffResults .ff-result-section + .ff-result-section {
  margin-top: 18px !important;
}
@media (max-width: 768px) {
  .ff-step#ffResults .ff-result-section + .ff-result-section {
    margin-top: 14px !important;
  }
  .ff-result-section[style*="background:linear-gradient"] {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
}

/* ── MOBILE FOOTER COMPRESSION ── */
@media (max-width: 768px) {
  .footer-top {
    padding: 32px 18px 24px !important;
  }
  .footer-bottom {
    padding: 14px 16px !important;
    gap: 5px !important;
    font-size: 0.68rem !important;
  }
  .footer-grid {
    gap: 20px !important;
  }
  .footer-col h4 {
    margin-bottom: 8px !important;
    font-size: 0.78rem !important;
  }
  .footer-col ul li a {
    padding: 4px 0 !important;
    font-size: 0.78rem !important;
  }
  .footer-logo-img {
    height: 72px !important;
    width: 72px !important;
    margin-bottom: 8px !important;
  }
  .footer-brand p {
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════
   FF PROFILE CARD — forced contrast override
   Beats all global h2 / !important rules via ID specificity
   ══════════════════════════════════════════════════════ */
#ffProfileName,
#ffResultsContent #ffProfileName,
.ff-result-section #ffProfileName {
  color: #F8F4EE !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65) !important;
  font-size: 2rem !important;
  line-height: 1.15 !important;
}

/* Profile summary paragraph */
#ffProfileSummary,
#ffResultsContent #ffProfileSummary,
.ff-result-section #ffProfileSummary {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: none !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Profile tags */
#ffProfileTags span {
  color: rgba(255,255,255,0.92) !important;
}

/* Hero card dark section — catch any p inside it */
.ff-result-section[style*="2a0e00"] p,
.ff-result-section[style*="2a0e00"] h2,
.ff-result-section[style*="gradient"] h2 {
  color: #F8F4EE !important;
}

@media (max-width: 768px) {
  #ffProfileName,
  #ffResultsContent #ffProfileName {
    color: #F8F4EE !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.70) !important;
    font-size: 1.75rem !important;
  }
  #ffProfileSummary {
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.88rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   NEW SELECTORS — Navbar pills · Account dropdown · Card overlays
   These have no equivalent in the base CSS above.
   Applied: 2026-05-08
   ══════════════════════════════════════════════════════════════ */

/* ── Navbar Pills ── */
.nav-pill-ff {
  color: #E8640A;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(232,100,10,.32);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  position: relative;
}
.navbar .nav-links > li > a.nav-pill-ff:hover {
  background: rgba(232,100,10,.1);
  border-color: rgba(232,100,10,.6);
  color: #E8640A;
}
.navbar .nav-links > li > a.nav-pill-ff:hover {
  background: linear-gradient(135deg, #a83c00 0%, #CC5500 100%) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(200,75,0,.45) !important;
}
.navbar .nav-links > li > a.nav-pill-ff.active::before { display: none; }
.navbar .nav-links > li > a.nav-pill-ff.active::before { display: none; }
.nav-pill-member {
  color: rgba(255,255,255,.88);
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(212,160,23,.28);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.navbar .nav-links > li > a.nav-pill-member:hover {
  background: rgba(212,160,23,.08);
  border-color: rgba(212,160,23,.5);
  color: var(--gold);
}
.navbar .nav-links > li > a.nav-pill-member:hover {
  background: linear-gradient(135deg, #550000 0%, #8B0000 100%) !important;
  color: #FFD24D !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(107,0,0,.5) !important;
  border-color: rgba(212,160,23,.65) !important;
}
.navbar .nav-links > li > a.nav-pill-member.active::before { display: none; }
.navbar .nav-links > li > a.nav-pill-member.active::before { display: none; }

/* ── Navbar Buttons ── */
.navbar .btn-nav-register:hover {
  background: var(--red-bright) !important;
}
.navbar .btn-nav-register:hover {
  background: var(--red-bright) !important;
}
.navbar .btn-nav-login:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}
.navbar .btn-nav-login:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* ── Account Dropdown ── */
.nav-account-wrap { position: relative; }
.btn-nav-account:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(212,160,23,.5);
  color: var(--gold);
}
.btn-nav-account:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(212,160,23,.5);
  color: var(--gold);
}
.account-dropdown.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.account-dropdown.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
.account-dropdown a .fa { width: 14px; opacity: .6; }
.account-dropdown a:hover {
  background: #fff5eb;
  color: var(--crimson-light);
}
.account-dropdown a .fa { width: 14px; opacity: .6; }
.acct-drop-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 5px 0;
  list-style: none;
}

/* ── Navbar Scrolled + Misc ── */
.navbar.scrolled {
  background: #160E06 !important;
  box-shadow: 0 2px 32px rgba(0,0,0,.42), 0 0 0 1px rgba(212,160,23,.1) !important;
}
.nav-close-btn:hover { color: #fff !important; background: rgba(255,255,255,.15) !important; }
.has-dropdown:hover .dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

/* ── Category Card Overlays ── */
.category-card::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-top: 8px;
  opacity: 0;
  transition: opacity .3s;
  border-radius: 1px;
}
.category-card:hover::after {
  opacity: .7;
}
.category-card-img::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, transparent 35%, rgba(14,5,0,.72) 100%) !important;
  border-radius: 12px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.category-card:hover h4 {
  color: var(--gold) !important;
}

/* ── Hero Overlays ── */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.15) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.28) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.hero-content > p[style*="0.78rem"] {
  color: rgba(255,255,255,.38) !important;
  font-size: .72rem !important;
  letter-spacing: .02em !important;
}

/* ── Mobile-Only Visibility ── */
.mob-section-label {
    display: block;
    padding: 10px 18px 4px;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
  }

/* ── Mobile-Only Visibility ── */
.mob-only, .mob-only-section { display: none !important; }
@media (min-width: 769px) {
  .mob-only, .mob-only-section { display: none !important; }
}

/* ── Mobile nav drawer dark + pill layout ── */
@media (max-width: 768px) {
  .hero {
    min-height: 80vh !important;
  }
  .hero-content {
    padding: 72px 20px 56px !important;
  }
  .hero h1 {
    font-size: clamp(1.85rem, 7vw, 2.6rem) !important;
    margin-bottom: 16px !important;
  }
  .hero p {
    font-size: .97rem !important;
    margin-bottom: 28px !important;
  }
  .section {
    padding: var(--section-v-sm) 16px !important;
  }
  .section-header {
    margin-bottom: 28px !important;
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .category-card-img {
    aspect-ratio: 4 / 5 !important;
  }
  .sub-journey {
    padding: var(--section-v-sm) 16px !important;
  }
  .sub-journey-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 0 !important;
  }
  .sub-journey-step:not(:last-child)::after {
    display: none !important;
  }
  /* Nav drawer dark */
  .nav-links {
    background: #1C1208 !important;
    border-right: 1px solid rgba(212,160,23,.12) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.5) !important;
  }
  .nav-links > li {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  .navbar .nav-links > li > a {
    color: rgba(255,255,255,.88) !important;
    font-size: 1rem !important;
    padding: 14px 18px !important;
  }
  .navbar .nav-links > li > a.nav-pill-ff {
  color: #E8640A;
  border: 1px solid rgba(232,100,10,.32);
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .02em;
}
  .navbar .nav-links > li > a.nav-pill-member {
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(212,160,23,.28);
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 600;
  letter-spacing: .02em;
}
}


/* ── Refined dropdown variants (new nav structure) ── */

/* Dark refined base — all dropdowns get this when .dropdown-refined applied */
.dropdown.dropdown-refined {
  background: #1C1208;
  border: 1px solid rgba(212,160,23,.12);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 1px 0 rgba(212,160,23,.06) inset;
  min-width: 240px;
  padding: 12px 0;
}

/* Group label inside dropdown */
.dropdown-group-label {
  display: block;
  padding: 6px 20px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(212,160,23,.55);
  pointer-events: none;
  user-select: none;
}

/* CTA-style final link in dropdown */
.dropdown-cta-link {
  color: var(--gold) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: .02em;
  padding: 8px 20px !important;
}
.dropdown-cta-link:hover {
  color: #fff !important;
  background: rgba(212,160,23,.12) !important;
}

/* Subscribe dropdown specific spacing */
.dropdown-subscribe {
  min-width: 260px;
}
.dropdown-subscribe > li > a {
  padding: 9px 20px;
}

/* Subdropdown (Business Sign Up children) */
.has-subdropdown {
  position: relative;
}
/* Desktop-only subdropdown hover — visibility:hidden must NOT affect mobile */
@media (min-width: 901px) {
.subdropdown {
  position: absolute;
  left: 100%;
  top: 0;
  background: #1C1208;
  border: 1px solid rgba(212,160,23,.12);
  border-radius: 10px;
  min-width: 240px;
  padding: 10px 0;
  box-shadow: 8px 8px 32px rgba(0,0,0,.48);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 300;
}
.has-subdropdown:hover .subdropdown,
.has-subdropdown.open .subdropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
} /* end desktop-only subdropdown */
.subdropdown li a {
  display: block;
  padding: 9px 20px;
  font-size: 0.83rem;
  color: rgba(255,255,255,.72);
  transition: color .15s ease, background .15s ease;
}
.subdropdown li a:hover {
  color: var(--gold);
  background: rgba(212,160,23,.08);
}
.subdrop-arrow {
  float: right;
  font-size: 1rem;
  opacity: .55;
  line-height: 1;
}

/* Nav link base hover — gold underline treatment */
.nav-links > li > a:not(.nav-pill-ff):not(.nav-pill-member) {
  position: relative;
}
.nav-links > li > a:not(.nav-pill-ff):not(.nav-pill-member)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: left .22s ease, right .22s ease, opacity .22s ease;
}
.nav-links > li > a:not(.nav-pill-ff):not(.nav-pill-member):hover::after,
.nav-links > li > a:not(.nav-pill-ff):not(.nav-pill-member).active::after {
  left: 0;
  right: 0;
  opacity: .45;
}

/* Mobile: subdropdown becomes indented block */
@media (max-width: 899px) {
  .subdropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid rgba(212,160,23,.2);
    border-radius: 0;
    padding: 0 0 0 16px;
    background: transparent;
    display: none;
  }
  .has-subdropdown.open .subdropdown,
  .has-subdropdown.mob-open .subdropdown {
    display: block !important;
  }
  .subdrop-arrow { float: right; }
  .dropdown.dropdown-refined {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: none;
    border-left: 2px solid rgba(212,160,23,.2);
    padding: 0 0 0 12px;
    display: none;
    min-width: 0;
  }
  .has-dropdown.open .dropdown,
  .has-dropdown.mob-open .dropdown,
  .has-mega.open .mega-menu,
  .has-mega.mob-open .mega-menu {
    display: block !important;
  }
  .dropdown.dropdown-refined li a,
  .subdropdown li a {
    display: block !important;
    color: rgba(255,255,255,.85) !important;
    font-size: 0.9rem;
    padding: 12px 16px !important;
    border-bottom: none;
    min-height: 44px !important;
    line-height: 1.4;
    text-decoration: none !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.08);
    touch-action: manipulation;
    cursor: pointer;
    box-sizing: border-box;
  }
  .dropdown-group-label {
    padding: 8px 12px 2px;
    color: rgba(212,160,23,.45);
  }
  .dropdown-cta-link {
    color: var(--gold) !important;
    padding: 10px 12px !important;
  }
}

/* END NEW SELECTORS */


/* ══════════════════════════════════════════════════════
   MEMBER LOUNGE — Intimate Premium Extension
   Extends the main site visual system into a warmer,
   more personal private space. No new paradigms.
   ══════════════════════════════════════════════════════ */

/* ── Welcome Hero ── */
.member-welcome-hero {
  background: linear-gradient(135deg, #2A0A00 0%, #3d1600 55%, #1a0800 100%);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.member-welcome-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(212,160,23,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.member-welcome-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; left: 10%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(180,60,20,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.member-welcome-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(212,160,23,0.75);
  margin-bottom: 10px;
}
.member-welcome-name {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: white;
  margin: 0 0 10px;
  line-height: 1.15;
}
.member-welcome-sub {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 520px;
}
.member-welcome-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Lounge Cards (replaces cold admin-card feel in member area) ── */
.lounge-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 2px 16px rgba(58,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid rgba(139,69,19,0.08);
  margin-bottom: 0;
  transition: box-shadow 0.2s ease;
}
.lounge-card:hover {
  box-shadow: 0 4px 24px rgba(58,0,0,0.11), 0 1px 6px rgba(0,0,0,0.05);
}
.lounge-card-warm {
  background: linear-gradient(135deg, #fff9f2, #fdf4e8);
  border: 1.5px solid rgba(139,69,19,0.15);
}

/* ── Stat Moments (replace blunt admin stat grid) ── */
.member-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.member-stat {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  border: 1px solid rgba(139,69,19,0.09);
  box-shadow: 0 2px 12px rgba(58,0,0,0.06);
  border-top: 3px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.member-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(58,0,0,0.1); }
.member-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.member-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--charcoal);
  font-family: var(--font-serif);
  line-height: 1;
  margin-bottom: 4px;
}
.member-stat-cta {
  font-size: 0.75rem;
  color: var(--warm-brown);
  font-weight: 600;
  text-decoration: none;
}
.member-stat-cta:hover { color: var(--gold); }

/* ── Lounge Section Labels ── */
.lounge-section-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--warm-brown);
  margin-bottom: 4px;
}

/* ── Orders — cinematic empty state ── */
.member-empty-state {
  text-align: center;
  padding: 72px 24px;
  background: linear-gradient(135deg, #fff9f2, #fdf4e8);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(139,69,19,0.1);
}
.member-empty-icon {
  font-size: 3.2rem;
  margin-bottom: 16px;
  opacity: 0.75;
}
.member-empty-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.member-empty-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

/* ── Order Row Card ── */
.order-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 14px;
  border: 1px solid rgba(139,69,19,0.09);
  box-shadow: 0 2px 10px rgba(58,0,0,0.05);
  transition: box-shadow 0.18s ease;
}
.order-card:hover { box-shadow: 0 4px 20px rgba(58,0,0,0.09); }

/* ── Page Context Banner (subtle page header inside member area) ── */
.member-page-header {
  margin-bottom: 28px;
}
.member-page-header h1 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  color: var(--charcoal);
  margin: 0 0 6px;
  line-height: 1.2;
}
.member-page-header p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ── Sidebar warmth: private lounge label ── */
.sidebar-lounge-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(212,160,23,0.12);
  border: 1px solid rgba(212,160,23,0.22);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(212,160,23,0.85);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Member Nav Breadcrumb ── */
.member-breadcrumb {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.member-breadcrumb a { color: var(--warm-brown); text-decoration: none; font-weight: 500; }
.member-breadcrumb a:hover { color: var(--gold); }
.member-breadcrumb span { opacity: 0.5; }

/* ── Mobile Member Lounge ── */
@media (max-width: 899px) {
  .member-welcome-hero { padding: 28px 24px; }
  .member-welcome-name { font-size: 1.45rem; }
  .member-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .member-stat { padding: 16px 18px; }
  .member-stat-value { font-size: 1.5rem; }
  .member-empty-state { padding: 52px 20px; }
  .member-page-header h1 { font-size: 1.4rem; }
  .order-card { padding: 18px 20px; }
}
@media (max-width: 480px) {
  .member-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .member-welcome-hero { padding: 24px 20px; }
  .member-welcome-actions { gap: 8px; }
  .member-welcome-actions .btn { font-size: 0.82rem; padding: 9px 16px; }
}
/* ── Member page heading icons — normalized size, not h1-scale ── */
.dash-topbar h1 i.fa,
.dash-topbar h1 i.fas,
.dash-topbar h1 i.far {
  font-size: 1.05rem;
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.72;
}


/* ════════════════════════════════════════════════════════════════
   VISUAL CONTRAST & EMOTIONAL LIGHTING REFINEMENT
   World of Seasoning — May 2026
   
   Strategy: Warm-ivory typography hierarchy on all dark surfaces.
   Headline: #F8F4EE (warm ivory, not pure white)
   Body:     rgba(255,248,240,.88)
   Secondary:rgba(255,248,240,.68)
   Labels:   #D4A017 (gold amber)
   
   No layout changes. No spacing changes. No new selectors
   where existing ones can be updated. Surgical overrides only.
   ════════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES: warm-dark typography system ─────────────────
   Add to all dark-surface contexts via cascade, not duplication   */
:root {
  --dark-text-headline:  #F8F4EE;
  --dark-text-body:      rgba(255,248,240,.88);
  --dark-text-secondary: rgba(255,248,240,.68);
  --dark-text-label:     #D4A017;
  --dark-chip-bg:        rgba(255,248,240,.08);
  --dark-chip-border:    rgba(255,248,240,.20);
  --dark-chip-text:      rgba(255,248,240,.90);
}

/* ════════════════════════════════════════════════════════════════
   1. HERO — main homepage dark gradient panel
   ════════════════════════════════════════════════════════════════ */

/* Hero eyebrow — lift from 55% to warmer, more legible amber */
.hero-eyebrow {
  color: rgba(212,160,23,.82) !important;
  border-color: rgba(212,160,23,.28) !important;
}

/* Hero body copy — lift from 78% cool-white to warm 88% */
.hero p,
.hero .hero-desc {
  color: var(--dark-text-body) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.32) !important;
}

/* Hero h1 — ensure warm ivory, not pure white */
.hero h1 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.40) !important;
}

/* ════════════════════════════════════════════════════════════════
   2. PAGE HERO (sub-page dark headers — contact, about, etc.)
   ════════════════════════════════════════════════════════════════ */

.page-hero h1 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.38) !important;
}
.page-hero p {
  opacity: 1 !important;
  color: var(--dark-text-body) !important;
}

/* ════════════════════════════════════════════════════════════════
   3. BG-CHARCOAL UTILITY CLASS (dark CTA sections, promo bands)
   ════════════════════════════════════════════════════════════════ */

.bg-charcoal .section-header h2 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.30) !important;
}
.bg-charcoal .section-header p {
  color: var(--dark-text-body) !important;
}
.bg-charcoal p,
.bg-charcoal li,
.bg-charcoal span:not(.badge):not([class*="btn"]) {
  color: var(--dark-text-body);
}
.bg-charcoal h3,
.bg-charcoal h4 {
  color: var(--dark-text-headline);
}

/* ════════════════════════════════════════════════════════════════
   4. CULTURAL JOURNEY BANNER (homepage / shop strip)
   ════════════════════════════════════════════════════════════════ */

/* Lift background from flat #1A1A1A to warm cinematic dark */
.culture-journey-banner {
  background: linear-gradient(145deg, #140B02 0%, #1E0E04 55%, #160900 100%) !important;
  box-shadow: inset 0 0 80px rgba(212,130,0,.06), 0 4px 32px rgba(0,0,0,.22) !important;
}

/* Eyebrow — already gold, bump opacity */
.culture-journey-banner .cjb-eyebrow {
  color: #D4A017 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}

/* Headline — warm ivory with subtle depth shadow */
.culture-journey-banner h3 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.42) !important;
}

/* Body copy — lift from 72% to warm 88% */
.culture-journey-banner p {
  color: var(--dark-text-body) !important;
}

/* Chips — warmer surface + cleaner border */
.culture-journey-banner .cjb-chip {
  background: var(--dark-chip-bg) !important;
  border-color: var(--dark-chip-border) !important;
  color: var(--dark-chip-text) !important;
}
.culture-journey-banner .cjb-chip:hover {
  background: rgba(255,248,240,.14) !important;
  border-color: rgba(212,160,23,.42) !important;
  color: #F8F4EE !important;
}

/* ════════════════════════════════════════════════════════════════
   5. FLAVOR FINDER — culture journey result block
   ════════════════════════════════════════════════════════════════ */

/* Block background — warm dark instead of flat black */
.ff-culture-block {
  background: linear-gradient(145deg, #130900 0%, #1C0D04 100%) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.28) !important;
}

/* Label — already gold, confirm */
.ff-culture-block .fcb-label {
  color: var(--dark-text-label) !important;
}

/* Headline */
.ff-culture-block h4 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35) !important;
}

/* Body copy — lift from 78% to 88% warm */
.ff-culture-block p {
  color: var(--dark-text-body) !important;
}

/* Outline button on dark — warmer border */
.ff-culture-block .fcb-btn-outline {
  border-color: rgba(255,248,240,.30) !important;
  color: var(--dark-text-headline) !important;
}
.ff-culture-block .fcb-btn-outline:hover {
  background: rgba(255,248,240,.10) !important;
  border-color: rgba(212,160,23,.48) !important;
}

/* ════════════════════════════════════════════════════════════════
   6. CULTURE SIDEBAR BLOCK (shop sidebar dark header)
   ════════════════════════════════════════════════════════════════ */

.culture-sidebar-block .csb-header {
  background: linear-gradient(135deg, #140800, #1E0D04) !important;
  color: var(--dark-text-headline) !important;
  letter-spacing: 0.10em !important;
}

/* ════════════════════════════════════════════════════════════════
   7. MEMBERSHIP — culture subscription teaser
   ════════════════════════════════════════════════════════════════ */

/* Warm the gradient base */
.culture-sub-tease {
  background: linear-gradient(145deg, #140800 0%, #2C1200 60%, #1A0A00 100%) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.22) !important;
}

.culture-sub-tease .cst-label {
  color: var(--dark-text-label) !important;
}
.culture-sub-tease h4 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
}
/* Body copy — lift from 75% to warm 88% */
.culture-sub-tease p {
  color: var(--dark-text-body) !important;
}
/* Tags — warmer surface */
.culture-sub-tease .cst-tag {
  color: var(--dark-chip-text) !important;
  border-color: var(--dark-chip-border) !important;
  background: var(--dark-chip-bg) !important;
}

/* ════════════════════════════════════════════════════════════════
   8. FLAVOR FINDER — box tray (dark gradient panel)
   ════════════════════════════════════════════════════════════════ */

.ff-box-tray {
  background: linear-gradient(145deg, #1E0D04 0%, #331500 55%, #200E02 100%) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.28) !important;
}

/* Tray chip tags */
.ff-tray-chip {
  background: var(--dark-chip-bg) !important;
  border-color: var(--dark-chip-border) !important;
  color: var(--dark-chip-text) !important;
}

/* Tray pricing area */
.ff-tray-price-label {
  color: rgba(255,248,240,.68) !important;
}
.ff-tray-price-value {
  color: var(--dark-text-headline) !important;
}

/* ════════════════════════════════════════════════════════════════
   9. FLAVOR FINDER RESULT CARD — profile hero panel
   ════════════════════════════════════════════════════════════════ */

/* Already has ID-specificity overrides — reinforce warm tones */
.ff-result-section[style*="2a0e00"] p,
.ff-result-section[style*="gradient"] p {
  color: var(--dark-text-body) !important;
}
.ff-result-section[style*="2a0e00"] h2,
.ff-result-section[style*="gradient"] h2 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
}

/* ════════════════════════════════════════════════════════════════
   10. MEMBER WELCOME HERO (lounge dark panel)
   ════════════════════════════════════════════════════════════════ */

/* Eyebrow — lift gold opacity */
.member-welcome-eyebrow {
  color: rgba(212,160,23,.90) !important;
}

/* Name — warm ivory, not pure white */
.member-welcome-name {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.32) !important;
}

/* Sub-copy — lift from 65% to warm 82% */
.member-welcome-sub {
  color: rgba(255,248,240,.82) !important;
}

/* ════════════════════════════════════════════════════════════════
   11. FOOTER (dark section)
   ════════════════════════════════════════════════════════════════ */

/* Footer warm typography — values consolidated into existing Section 5 footer block above */

/* ════════════════════════════════════════════════════════════════
   12. ANNOUNCEMENT BAR (dark promotional band)
   ════════════════════════════════════════════════════════════════ */

.announcement-bar {
  color: var(--dark-text-headline) !important;
}

/* ════════════════════════════════════════════════════════════════
   13. DARK INLINE CTAs (inline dark panels, e.g. sub upsell)
       Targets dark panels written with inline background styles
       using charcoal/dark-brown gradients
   ════════════════════════════════════════════════════════════════ */

/* The "Join the Inner Circle" dark panel in dashboard */
[style*="background:linear-gradient(135deg,#3d1a00"] h4,
[style*="background:linear-gradient(135deg, #3d1a00"] h4 {
  color: var(--dark-text-headline) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.30) !important;
}
[style*="background:linear-gradient(135deg,#3d1a00"] p,
[style*="background:linear-gradient(135deg, #3d1a00"] p {
  color: rgba(255,248,240,.78) !important;
}

/* ════════════════════════════════════════════════════════════════
   14. DARK NAV DROPDOWN PANELS (mega menu dark areas)
   ════════════════════════════════════════════════════════════════ */

.mega-col-dark h4,
.mega-col-dark .mega-col-title {
  color: var(--dark-text-headline) !important;
}
.mega-col-dark p,
.mega-col-dark li a {
  color: var(--dark-text-body) !important;
}

/* ════════════════════════════════════════════════════════════════
   15. CULTURE CHIP (product card / shop surface — light bg)
       On DARK hover state only
   ════════════════════════════════════════════════════════════════ */

.culture-chip:hover {
  background: #1A1A1A !important;
  color: var(--dark-text-headline) !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — preserve all warm-dark refinements at small breakpoints
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .culture-journey-banner h3 {
    text-shadow: 0 2px 6px rgba(0,0,0,.40) !important;
  }
  .hero h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,.38) !important;
  }
  .member-welcome-name {
    text-shadow: 0 1px 8px rgba(0,0,0,.30) !important;
  }
  .ff-culture-block h4 {
    text-shadow: 0 1px 5px rgba(0,0,0,.32) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE REFINEMENTS — v20260509
   Invisible technical maturity. Smooth. Stable. Intentional.
   ═══════════════════════════════════════════════════════════════ */

/* ── Content Visibility — paint below-fold sections only when needed ── */
.testimonials-section,
.business-section,
.footer,
.recipes-section,
[class*="section-"]:not(.hero):not(.trust-bar):not(.featured-section) {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ── CLS Prevention: Category card images — intrinsic size reservation ── */
.category-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-dark);
}
.category-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Footer logo — stable render ── */
.footer-logo-img {
  width: 140px;
  height: auto;
  aspect-ratio: auto;
}

/* ── Nav cart icon — reserve space to prevent CLS when badge appears ── */
.cart-icon {
  position: relative;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile scroll — hardware-accelerated touch ── */
@media (max-width: 768px) {
  .nav-links,
  .dropdown,
  .wos-mob-discover-row,
  .ff-tier-grid,
  .shop-grid,
  .product-grid {
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent layout jitter on hero — fix min-height on mobile */
  .hero {
    min-height: 480px;
    contain: layout;
  }

  /* Category grid: stable 2-col on small screens */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Prevent text-size-adjust flash */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Smooth scrolling for horizontal strips */
  .wos-mob-discover-row {
    scroll-snap-type: x mandatory;
  }
  .wos-mob-discover-chip {
    scroll-snap-align: start;
  }
}

/* ── Image loading states — prevent pop-in jitter ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.35s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"].is-loaded {
  opacity: 1;
}
/* Immediately visible images — no opacity flash */
img:not([loading="lazy"]) {
  opacity: 1;
}

/* ── Transition smoothing — cap at 300ms for perceived responsiveness ── */
.btn,
.nav-icon,
.product-card,
.plan-card,
.category-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Reduce animation on reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lux-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .gentleFloat,
  .cart-empty,
  [class*="empty-state"] {
    animation: none !important;
  }
}

/* ── Announcement bar — stable height to prevent layout shift ── */
.announcement-bar {
  min-height: 40px;
  box-sizing: border-box;
}

/* ── Hero overlay CLS — ensure overlay doesn't cause reflow ── */
.hero-overlay {
  pointer-events: none;
}

/* ── Flavor Finder mobile — prevent horizontal overflow ── */
@media (max-width: 640px) {
  .ff-tier-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ff-tray-chips {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Mobile typography — prevent FOUT layout shift ── */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
}

/* ── Sticky nav — prevent repaint on scroll ── */
.navbar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ── Lux reveal — refined timing for mobile ── */
@media (max-width: 768px) {
  .lux-reveal {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .lux-reveal.delay-1 { transition-delay: 0.04s; }
  .lux-reveal.delay-2 { transition-delay: 0.08s; }
  .lux-reveal.delay-3 { transition-delay: 0.12s; }
  .lux-reveal.delay-4 { transition-delay: 0.16s; }
}

/* ─────────────────────────────────────────────────────────────────────
   Accessibility: Respect prefers-reduced-motion globally
   Users who prefer reduced motion get instant transitions
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .parallax, [data-aos], [data-scroll] {
    transform: none !important;
    opacity: 1 !important;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHASE 5-6 ECOSYSTEM IMMERSION — May 2026
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Product card image — consistent aspect ratio, never stretches */
.product-card .product-img-wrap,
.product-card .card-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card .product-img-wrap img,
.product-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.product-card:hover .product-img-wrap img,
.product-card:hover .card-img-wrap img {
  transform: scale(1.04);
}

/* Cultural context block in recipes */
.culture-context-block {
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 28px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(212,160,23,.15);
}

/* Journey continue chips */
.journey-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}
.journey-chip:hover { opacity: .88; transform: translateY(-1px); }

/* Trust strip below cart button */
.pd-trust-strip {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pd-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: var(--text-secondary);
}

/* Supplier cards in admin — artisan badge highlight */
.supplier-artisan-badge {
  background: linear-gradient(90deg, #1a237e, #3949ab);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.supplier-blackowned-badge {
  background: linear-gradient(90deg, #1b5e20, #2e7d32);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Mobile: search input full-width */
@media (max-width: 640px) {
  .search-hero form {
    flex-direction: column;
  }
  .search-hero form input[type="text"] {
    width: 100%;
    box-sizing: border-box;
  }
  .search-hero form button {
    width: 100%;
  }
  /* Product image zoom overlay — full screen on mobile */
  #wosZoomOverlay img {
    max-width: 96vw;
    max-height: 80vh;
  }
  /* Recipe hero — shorter on small screens */
  .recipe-hero-wrap {
    height: 280px !important;
  }
  /* About page sourcing grid */
  .sourcing-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Ingredient checklist UX */
.ing-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  margin-top: 1px;
  display: inline-block;
}
.ing-check.checked {
  background: var(--green-herb);
  border-color: var(--green-herb);
}
li.struck-through { opacity: .45; text-decoration: line-through; }

/* Image placeholder styling */
.wos-img-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream), var(--beige));
  gap: 6px;
}

/* Vendor apply form */
.vendor-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 580px) {
  .vendor-apply-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ONBOARDING STRIP MOBILE ───────────────────────────────── */
@media (max-width:600px) {
  #homepageNewsletterForm { flex-direction:column; align-items:stretch; }
  #homepageNewsletterForm input[type=email] { width:100%; box-sizing:border-box; }
  #homepageNewsletterForm button { width:100%; }
  .onboarding-path-grid { grid-template-columns:1fr 1fr!important; }
}
@media (max-width:400px) {
  .onboarding-path-grid { grid-template-columns:1fr!important; }
}

/* ── FLAVOR FINDER MOBILE REFINEMENTS ──────────────────────── */
@media (max-width:640px) {
  .ff-shell { padding:20px 14px 60px; }
  .ff-progress { margin-bottom:24px; }
  .ff-progress-bar { height:5px; }
  .ff-progress-labels { font-size:.68rem; }
  .ff-step h2 { font-size:clamp(1.2rem,5vw,1.6rem); }
  .ff-step p { font-size:.88rem; line-height:1.6; }
  /* Tier cards stack on mobile */
  .tier-card, [class*="tier-card"] { min-width:unset!important; width:100%!important; }
  /* Visual tray chips wrap cleanly */
  .flavor-tray, [class*="flavor-tray"] { flex-wrap:wrap; gap:6px; }
  /* Navigation buttons */
  .ff-nav-btn, .ff-btn-next, .ff-btn-prev { 
    width:100%; box-sizing:border-box; padding:14px!important;
    font-size:.95rem!important; min-height:48px;
  }
  /* Result cards: single column on very small */
}
@media (max-width:420px) {
  .ff-shell { padding:16px 12px 60px; }
}
/* Chef tip mobile */
@media (max-width:640px) {
  .chef-tip-block { padding:14px 16px!important; }
}
/* Cart recipe strip mobile */
@media (max-width:560px) {
  .cart-recipe-strip { grid-template-columns:1fr!important; }
}

/* ── PHASE 7 — BETA LAUNCH MOBILE ADDITIONS ─────────────────────────────── */

/* Feedback widget */
#wos-feedback-btn {
  bottom: 16px !important;
  right: 12px !important;
}
#wos-feedback-modal > div {
  max-height: 90vh;
  overflow-y: auto;
}

/* Recipe print/share bar */
@media (max-width: 480px) {
  .container[style*="max-width:900px"] > div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Print recipe */
@media print {
  #wos-feedback-btn,
  #wos-feedback-modal,
  #wos-beta-ribbon,
  nav, header, footer,
  .btn, .cart-widget,
  .product-strip,
  .cook-next-sidebar { display: none !important; }
  body { background: white !important; color: #000 !important; font-size: 12pt; }
  .container { max-width: 100% !important; padding: 0 !important; }
  img { max-width: 300px; }
  h1, h2, h3 { page-break-after: avoid; }
  section { page-break-inside: avoid; }
}

/* Explore page mobile */
@media (max-width: 600px) {
  .explore-page .container [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .explore-page [style*="grid-template-columns:repeat(auto-fill,minmax(180px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Order confirmed journey card */
@media (max-width: 600px) {
  #wos-journey-card-btns { flex-direction: column; }
}

/* Beta ribbon readable on small screens */
#wos-beta-ribbon {
  font-size: .72rem;
  padding: 8px 12px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  #wos-beta-ribbon strong { display: block; }
}
/* ── END PHASE 7 MOBILE ─────────────────────────────────────────────────── */

/* ── SHOP SIDEBAR MOBILE (mob-open) ─────────────────────────── */
/* Shop sidebar positioning — controlled by shop/index.php inline style */
.shop-sidebar {
  position: relative;
  width: 260px;
  max-width: 260px;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* ── END SHOP SIDEBAR MOBILE ─────────────────────────────────────────────


/* ═══════════════════════════════════════════════════════════════════
   CANONICAL NAV OVERHAUL — Final authority block. All prior nav
   mobile rules are superseded by this block. May 2026.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Nav Close Button (sibling to UL, not inside it) ─────────────── */
.nav-close-btn,
#navCloseBtn {
  display: none !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(107,0,0,0.08) !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 1004 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  color: #1A1508 !important;
  line-height: 1 !important;
}

/* ── Mobile NAV: canonical slide drawer ─────────────────────────── */
@media (max-width: 900px) {
  /* Hamburger visible */
  #navToggle,
  .nav-toggle {
    display: flex !important;
  }

  /* Drawer: always fixed slide-in, hidden by default */
  #navLinks,
  .nav-links {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: -105% !important;
    right: auto !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 340px !important;
    height: 100vh !important;
    flex-direction: column !important;
    padding: 70px 0 32px !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 1001 !important;
    background: #FDFAF5 !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.22) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    will-change: left !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Drawer OPEN state */
  #navLinks.open,
  .nav-links.open {
    left: 0 !important;
  }

  /* Close button visible when drawer is mounted */
  .nav-close-btn,
  #navCloseBtn {
    display: flex !important;
  }

  /* Nav items: full width, generous tap targets */
  #navLinks > li,
  .nav-links > li {
    width: 100% !important;
    border-bottom: 1px solid rgba(107,0,0,0.07) !important;
    list-style: none !important;
    position: relative !important;
  }

  #navLinks > li > a,
  .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 15px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1A1508 !important;
    background: transparent !important;
    text-decoration: none !important;
    min-height: 52px !important;
    width: 100% !important;
    /* Kill all ::after underline animations on mobile */
  }

  #navLinks > li > a::after,
  .nav-links > li > a::after {
    display: none !important;
    content: none !important;
  }

  /* Sub-menu expand chevron ONLY on items with children */
  #navLinks > li.has-dropdown > a::after,
  .nav-links > li.has-dropdown > a::after,
  #navLinks > li.has-mega > a::after,
  .nav-links > li.has-mega > a::after {
    display: inline-block !important;
    content: '›' !important;
    margin-left: auto !important;
    margin-right: 4px !important;
    font-size: 1.1rem !important;
    opacity: 0.4 !important;
    transform: rotate(0deg) !important;
    transition: transform 0.2s !important;
  }

  #navLinks > li.open.has-dropdown > a::after,
  .nav-links > li.open.has-dropdown > a::after,
  #navLinks > li.open.has-mega > a::after,
  .nav-links > li.open.has-mega > a::after,
  #navLinks > li.mob-open.has-dropdown > a::after,
  .nav-links > li.mob-open.has-dropdown > a::after,
  #navLinks > li.mob-open.has-mega > a::after,
  .nav-links > li.mob-open.has-mega > a::after {
    transform: rotate(90deg) !important;
    opacity: 0.7 !important;
  }

  #navLinks > li > a:hover,
  .nav-links > li > a:hover {
    background: rgba(107,0,0,0.05) !important;
    color: #6B0000 !important;
  }

  /* Highlight Flavor Finder link */
  #navLinks > li > a[href="/flavor-finder/"],
  .nav-links > li > a[href="/flavor-finder/"] {
    color: #6B0000 !important;
    font-weight: 700 !important;
  }

  /* Dropdown / mega-menu: static inside drawer */
  #navLinks .dropdown,
  #navLinks .mega-menu,
  #navLinks .mega-sub,
  .nav-links .dropdown,
  .nav-links .mega-menu,
  .nav-links .mega-sub {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(107,0,0,0.03) !important;
    border-radius: 0 !important;
    padding: 4px 0 8px !important;
  }

  #navLinks > li.open > .dropdown,
  #navLinks > li.open > .mega-menu,
  #navLinks > li.open > .mega-sub,
  .nav-links > li.open > .dropdown,
  .nav-links > li.open > .mega-menu,
  .nav-links > li.open > .mega-sub,
  #navLinks > li.mob-open > .dropdown,
  #navLinks > li.mob-open > .mega-menu,
  #navLinks > li.mob-open > .mega-sub,
  .nav-links > li.mob-open > .dropdown,
  .nav-links > li.mob-open > .mega-menu,
  .nav-links > li.mob-open > .mega-sub {
    display: block !important;
  }

  /* Dropdown links inside mobile drawer */
  #navLinks .dropdown li a,
  .nav-links .dropdown li a {
    font-size: 0.88rem !important;
    padding: 10px 32px !important;
    color: #4a3020 !important;
    display: block !important;
  }

  /* Hide mega CTA cards and icons on mobile */
  .nav-links .mega-cta-card { display: none !important; }
  .nav-links .mega-link small,
  .nav-links .mega-icon { display: none !important; }
  .nav-links .mega-inner { grid-template-columns: 1fr !important; }

  /* Auth buttons inside drawer */
  .nav-links .btn-nav-login,
  .nav-links .btn-nav-register,
  .nav-links .btn-nav-account {
    display: block !important;
    margin: 8px 20px !important;
    text-align: center !important;
    padding: 13px 20px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
  }

  /* WAC button in nav on mobile */
  .wac-nav-btn {
    display: none !important;
  }
}

/* ── Overlay: single canonical rule ─────────────────────────────── */
#navOverlay,
.nav-overlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 1000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
}

#navOverlay.active,
.nav-overlay.active,
#navOverlay.show,
.nav-overlay.show {
  display: block !important;
}

/* ── Body scroll lock ─────────────────────────────────────────────── */
body.nav-open {
  overflow: hidden !important;
  position: relative !important;
}

/* ── WAC (What Are You Cooking?) Nav Button — desktop only ─────── */
.wac-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #8B1a00, #c94a00);
  color: white !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s;
  letter-spacing: 0.2px;
}
.wac-nav-btn:hover {
  background: linear-gradient(135deg, #6B0000, #a83c00);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139,0,0,0.3);
  color: white !important;
}
.wac-nav-label {
  font-size: 0.76rem;
}
@media (max-width: 1100px) {
  .wac-nav-label { display: none; }
  .wac-nav-btn { padding: 6px 10px; border-radius: 50%; }
}

/* ── Touch target minimum: 44px ─────────────────────────────────── */
@media (max-width: 900px) {
  .nav-icon,
  .nav-toggle,
  #navToggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END CANONICAL NAV BLOCK
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV — FINAL AUTHORITATIVE OVERRIDE v3
   This block wins over all previous nav CSS. Do not append more nav CSS below this.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────────── */
.nav-overlay,
#navOverlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 1090 !important;
  cursor: pointer !important;
}
.nav-overlay.active,
.nav-overlay.show,
#navOverlay.active,
#navOverlay.show {
  display: block !important;
}

/* ── Body scroll lock ─────────────────────────────────────────────── */
body.nav-open {
  overflow: hidden !important;
}



/* ══════════════════════════════════════════════════════
   MOBILE NAV v7 — SINGLE AUTHORITATIVE BLOCK
   All prior nav overrides above are superseded by this.
   ══════════════════════════════════════════════════════ */

/* ── Desktop: hamburger hidden, nav inline ── */
@media (min-width: 901px) {
  .nav-toggle, #navToggle   { display: none !important; }
  .nav-close-btn,#navCloseBtn { display: none !important; }
  .nav-overlay,  #navOverlay  { display: none !important; }
  .nav-close-row              { display: none !important; }

  .nav-links, #navLinks {
    display: flex !important;
    flex-direction: row !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    left: auto !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* ── Mobile ── */
@media (max-width: 900px) {

  /* Hamburger button */
  .nav-toggle, #navToggle {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             5px !important;
    width:           44px !important;
    height:          44px !important;
    padding:         8px !important;
    background:      none !important;
    border:          none !important;
    cursor:          pointer !important;
    z-index:         10100 !important;
    position:        relative !important;
    flex-shrink:     0 !important;
  }
  .nav-toggle span, #navToggle span {
    display:       block !important;
    width:         22px !important;
    height:        2px !important;
    background:    #fff !important;
    border-radius: 2px !important;
    transition:    transform 0.25s, opacity 0.2s !important;
    pointer-events: none !important;
  }
  .nav-toggle.open span:nth-child(1),
  #navToggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .nav-toggle.open span:nth-child(2),
  #navToggle.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .nav-toggle.open span:nth-child(3),
  #navToggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* Overlay — blocks clicks behind drawer */
  .nav-overlay, #navOverlay {
    display:    none !important;
    position:   fixed !important;
    inset:      0 !important;
    background: rgba(0,0,0,0.55) !important;
    z-index:    9900 !important;
  }
  .nav-overlay.active, #navOverlay.active { display: block !important; }

  /* Scroll lock */
  body.nav-open { overflow: hidden !important; }

  /* ── Drawer ── */
  .nav-links, #navLinks {
    display:        flex !important;
    flex-direction: column !important;
    position:       fixed !important;
    top:            0 !important;
    left:           -100% !important;
    right:          auto !important;
    bottom:         0 !important;
    width:          82% !important;
    max-width:      340px !important;
    height:         100dvh !important;
    background:     #1a1a1a !important;
    overflow-y:     auto !important;
    overflow-x:     hidden !important;
    z-index:        10000 !important;
    padding:        0 !important;
    gap:            0 !important;
    flex-wrap:      nowrap !important;
    align-items:    stretch !important;
    box-shadow:     4px 0 24px rgba(0,0,0,0.6) !important;
    transition:     left 0.28s ease !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nav-links.open, #navLinks.open { left: 0 !important; }

  /* Close row inside drawer */
  .nav-close-row {
    display:         flex !important;
    justify-content: flex-end !important;
    padding:         12px 16px !important;
    border-bottom:   1px solid rgba(255,255,255,0.08) !important;
    list-style:      none !important;
    flex-shrink:     0 !important;
  }
  .nav-close-btn, #navCloseBtn {
    display:         flex !important;
    align-items:     center !important;
    gap:             6px !important;
    background:      none !important;
    border:          none !important;
    color:           rgba(255,255,255,0.7) !important;
    font-size:       0.85rem !important;
    cursor:          pointer !important;
    padding:         8px 12px !important;
    min-height:      44px !important;
    min-width:       44px !important;
    z-index:         10001 !important;
    pointer-events:  auto !important;
  }
  .nav-close-btn:hover, #navCloseBtn:hover { color: #fff !important; }

  /* ── Top-level list items ── */
  .nav-links > li, #navLinks > li {
    display:       block !important;
    width:         100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    list-style:    none !important;
    flex-shrink:   0 !important;
  }
  /* Top-level links */
  .nav-links > li > a, #navLinks > li > a {
    display:         flex !important;
    align-items:     center !important;
    padding:         15px 20px !important;
    font-size:       1rem !important;
    font-weight:     600 !important;
    color:           rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    min-height:      50px !important;
    cursor:          pointer !important;
    pointer-events:  auto !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
  }
  .nav-links > li > a:hover,
  #navLinks > li > a:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }

  /* Hide desktop hover arrow */
  .nav-links > li > a::after, #navLinks > li > a::after { display: none !important; }

  /* ── Sub-menus: hidden by default ── */
  .nav-links .dropdown,
  .nav-links .dropdown-refined,
  .nav-links .mega-menu,
  .nav-links .mega-sub,
  .nav-links .subdropdown,
  #navLinks .dropdown,
  #navLinks .dropdown-refined,
  #navLinks .mega-menu,
  #navLinks .mega-sub,
  #navLinks .subdropdown {
    display:    none !important;
    position:   static !important;
    width:      100% !important;
    background: rgba(255,255,255,0.04) !important;
    padding:    4px 0 8px !important;
    box-shadow: none !important;
    transform:  none !important;
    opacity:    1 !important;
    visibility: visible !important;
  }

  /* Show sub-menu when parent has .mob-open */
  .nav-links > li.mob-open > .dropdown,
  .nav-links > li.mob-open > .dropdown-refined,
  .nav-links > li.mob-open > .mega-menu,
  .nav-links > li.mob-open > .mega-sub,
  #navLinks  > li.mob-open > .dropdown,
  #navLinks  > li.mob-open > .dropdown-refined,
  #navLinks  > li.mob-open > .mega-menu,
  #navLinks  > li.mob-open > .mega-sub { display: block !important; }

  /* Nested subdropdown */
  .nav-links li.mob-open > .subdropdown,
  #navLinks  li.mob-open > .subdropdown { display: block !important; }

  /* ── Dropdown <li> items ── */
  .nav-links .dropdown li,
  .nav-links .dropdown-refined li,
  #navLinks  .dropdown li,
  #navLinks  .dropdown-refined li {
    display:    block !important;
    width:      100% !important;
    list-style: none !important;
  }

  /* ── Dropdown links — must be tappable ── */
  .nav-links .dropdown a,
  .nav-links .dropdown-refined a,
  .nav-links .mega-menu a,
  .nav-links .subdropdown a,
  #navLinks  .dropdown a,
  #navLinks  .dropdown-refined a,
  #navLinks  .mega-menu a,
  #navLinks  .subdropdown a {
    display:          block !important;
    padding:          13px 20px 13px 32px !important;
    font-size:        0.9rem !important;
    color:            rgba(255,255,255,0.78) !important;
    text-decoration:  none !important;
    pointer-events:   auto !important;
    cursor:           pointer !important;
    min-height:       44px !important;
    line-height:      1.4 !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.08) !important;
  }
  .nav-links .dropdown a:hover,
  .nav-links .dropdown-refined a:hover,
  #navLinks  .dropdown a:hover,
  #navLinks  .dropdown-refined a:hover {
    color:      #fff !important;
    background: rgba(255,255,255,0.05) !important;
  }

  /* Dividers and labels */
  .nav-links .dropdown-divider, #navLinks .dropdown-divider {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin:     4px 20px !important;
  }
  .nav-links .dropdown-group-label, #navLinks .dropdown-group-label {
    display:         block !important;
    padding:         8px 20px 3px !important;
    font-size:       0.68rem !important;
    font-weight:     700 !important;
    letter-spacing:  .09em !important;
    text-transform:  uppercase !important;
    color:           rgba(255,255,255,0.35) !important;
    pointer-events:  none !important;
  }

  /* Mobile-only sections */
  .mob-only-section {
    display:       block !important;
    padding:       10px 20px 4px !important;
    border-bottom: none !important;
  }
  .mob-section-label {
    font-size:      0.68rem !important;
    font-weight:    700 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,0.35) !important;
  }

  /* Auth buttons in drawer */
  .nav-links .btn-nav-login,
  .nav-links .btn-nav-register,
  #navLinks  .btn-nav-login,
  #navLinks  .btn-nav-register {
    display:      block !important;
    margin:       8px 16px !important;
    text-align:   center !important;
    padding:      12px 20px !important;
    min-height:   44px !important;
  }

  /* nav-actions (search, cart icons) — hide inside drawer on mobile */
  .nav-container > .nav-actions {
    /* stays outside the drawer — always visible */
  }
}

@media (max-width: 480px) {
  .nav-links, #navLinks {
    width:     90% !important;
    max-width: none !important;
  }
}
/* ══════════════════════════════════════════════════════
   END MOBILE NAV v7
   ══════════════════════════════════════════════════════ */


/* ── Shop Sidebar Tool Cards ─────────────────────────────────── */
.sidebar-tool-card{border-radius:12px;padding:16px;margin-top:16px;color:#fff}
.sidebar-ff-card{background:linear-gradient(135deg,#2a1500,#4a2800)}
.sidebar-sa-card{background:linear-gradient(135deg,#0d2a2a,#1a4040)}
.stc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.stc-icon{font-size:1.1rem;line-height:1}
.stc-label{font-weight:700;font-size:.88rem;color:#fff;letter-spacing:.02em}
.stc-desc{font-size:.74rem;color:rgba(255,255,255,.68);margin:0 0 10px;line-height:1.5}
.stc-btn-gold{display:block;background:var(--gold);color:#1a0a00;font-weight:700;font-size:.77rem;padding:9px 12px;border-radius:8px;text-align:center;text-decoration:none;transition:opacity .18s;min-height:36px;line-height:1.4}
.stc-btn-gold:hover{opacity:.88;color:#1a0a00}
.stc-input-wrap{display:flex;gap:5px;margin-bottom:6px}
.stc-input{flex:1;min-width:0;padding:8px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:.78rem}
.stc-input::placeholder{color:rgba(255,255,255,.35)}
.stc-btn-spice{flex-shrink:0;padding:8px 11px;background:#1a8a6a;border:none;border-radius:7px;color:#fff;font-weight:700;font-size:.75rem;cursor:pointer;min-height:36px;white-space:nowrap}
.stc-btn-spice:hover{background:#17755a}
.sa-sidebar-result{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.82);padding:10px;background:rgba(255,255,255,.07);border-radius:8px;margin-top:4px}
.sa-prod-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border-radius:6px;padding:5px 9px;margin:2px 2px;font-size:.71rem;color:#fff;text-decoration:none}
.sa-prod-chip:hover{background:rgba(255,255,255,.18);color:#fff}

/* Mobile: sidebar stacks below products */
@media(max-width:768px){
  .shop-sidebar .sidebar-tool-card{ margin-top:12px; }
  .stc-input-wrap{ flex-wrap:nowrap; }
}


/* ══════════════════════════════════════════════════════════════
   NAVBAR LINK VISIBILITY FIX — FINAL AUTHORITY (appended last)
   Navbar background: #1C1208 (dark). Links must be light.
   Kills the #1A1A1A dark-text-on-dark-bg bug at pos 172448.
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop: links are white/light on dark navbar ── */
@media (min-width: 901px) {
  .navbar .nav-links > li > a,
  .nav-links > li > a,
  #navLinks > li > a {
    color: rgba(255,255,255,0.90) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .navbar .nav-links > li > a:hover,
  .nav-links > li > a:hover,
  #navLinks > li > a:hover {
    color: #D4A017 !important;
    background: rgba(212,160,23,0.1) !important;
  }
  .nav-links > li > a.active,
  #navLinks > li > a.active {
    color: #D4A017 !important;
    font-weight: 700 !important;
  }
  /* Flavor Finder pill */
  .nav-links > li > a.nav-pill-ff,
  #navLinks > li > a.nav-pill-ff {
    color: #E8640A !important;
    border: 1px solid rgba(232,100,10,0.4) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    font-weight: 700 !important;
  }
  /* Subscribe pill */
  .nav-links > li > a.nav-pill-member,
  #navLinks > li > a.nav-pill-member {
    color: #D4A017 !important;
    border: 1px solid rgba(212,160,23,0.35) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
  }
}

/* ── Mobile: links white inside dark drawer ── */
@media (max-width: 900px) {
  .nav-links > li > a,
  #navLinks > li > a {
    color: rgba(255,255,255,0.90) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .nav-links .dropdown a,
  .nav-links .dropdown-refined a,
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a {
    color: rgba(255,255,255,0.80) !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   END NAVBAR LINK VISIBILITY FIX
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MOBILE TOUCH RELIABILITY — pointer-events + 44px targets
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Ensure all nav links are tappable — no overlay blocking */
  #navLinks > li > a,
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a,
  #navLinks .subdropdown a,
  .nav-links > li > a,
  .nav-links .dropdown a,
  .nav-links .subdropdown a {
    pointer-events: all !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(212,160,23,0.15) !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Dropdown container must not block taps */
  #navLinks .dropdown,
  #navLinks .dropdown-refined,
  #navLinks .subdropdown,
  .nav-links .dropdown,
  .nav-links .subdropdown {
    pointer-events: all !important;
    z-index: 9998 !important;
    position: relative !important;
  }

  /* When dropdown is open, make sure it renders above everything */
  #navLinks li.mob-open > .dropdown,
  #navLinks li.mob-open > .dropdown-refined,
  .nav-links li.mob-open > .dropdown {
    display: block !important;
    pointer-events: all !important;
    z-index: 9999 !important;
  }

  /* Top-level parent li — open accordion state */
  #navLinks li.has-dropdown.mob-open > a,
  #navLinks li.has-mega.mob-open > a,
  .nav-links li.has-dropdown.mob-open > a {
    color: var(--gold, #D4A017) !important;
    background: rgba(212,160,23,0.08) !important;
  }

  /* Hamburger button — large tap target */
  #navToggle {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    pointer-events: all !important;
    z-index: 10001 !important;
  }

  /* Nav overlay must not swallow link taps inside drawer */
  .nav-overlay {
    z-index: 999 !important;
  }
  #navLinks {
    z-index: 1000 !important;
  }

  /* Intent path cards — touch targets */
  .intent-path-card {
    min-height: 44px !important;
    touch-action: manipulation !important;
    pointer-events: all !important;
    -webkit-tap-highlight-color: rgba(212,160,23,0.10) !important;
  }
}
/* ══ END MOBILE TOUCH RELIABILITY ═══════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV DROPDOWN LINKS — DEFINITIVE FIX
   JS toggles .mob-open on <li>. CSS MUST respond to .mob-open.
   Links inside open dropdowns must be fully tappable.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* 1. Show dropdown when parent has .mob-open OR .open */
  #navLinks > li.mob-open > .dropdown,
  #navLinks > li.mob-open > .dropdown-refined,
  #navLinks > li.mob-open > .mega-menu,
  .nav-links > li.mob-open > .dropdown,
  .nav-links > li.mob-open > .dropdown-refined,
  .nav-links > li.mob-open > .mega-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    z-index: auto !important;
  }

  /* 2. Subdropdown with mob-open */
  #navLinks li.mob-open > .subdropdown,
  .nav-links li.mob-open > .subdropdown {
    display: block !important;
    position: static !important;
    pointer-events: all !important;
  }

  /* 3. Every link inside any open dropdown is fully tappable */
  #navLinks li.mob-open .dropdown a,
  #navLinks li.mob-open .dropdown-refined a,
  #navLinks li.mob-open .subdropdown a,
  #navLinks li.open .dropdown a,
  #navLinks li.open .dropdown-refined a,
  .nav-links li.mob-open .dropdown a,
  .nav-links li.mob-open .dropdown-refined a,
  .nav-links li.mob-open .subdropdown a,
  .nav-links li.open .dropdown a,
  .nav-links li.open .dropdown-refined a {
    display: block !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(107,0,0,0.12) !important;
    min-height: 44px !important;
    padding: 12px 32px !important;
    color: #4a3020 !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
  }

  /* 4. No overlay blocking the drawer links */
  #navLinks, .nav-links,
  #navLinks *, .nav-links * {
    -webkit-overflow-scrolling: touch;
  }
  
  /* 5. Chevron rotates on mob-open */
  #navLinks > li.mob-open.has-dropdown > a::after,
  .nav-links > li.mob-open.has-dropdown > a::after {
    transform: rotate(90deg) !important;
    opacity: 0.8 !important;
  }

  /* 6. Dropdown-refined items in drawer — force block + color */
  .dropdown-refined li,
  .dropdown li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
  }

  .dropdown-refined li a,
  .dropdown li a {
    display: block !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding: 0 32px !important;
    color: #3a2010 !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: rgba(107,0,0,0.12) !important;
  }

  .dropdown-refined li a:active,
  .dropdown li a:active {
    background: rgba(107,0,0,0.08) !important;
  }
}
/* END MOBILE NAV DROPDOWN LINKS DEFINITIVE FIX */


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV — MASTER Z-INDEX + LINK FIX  (FINAL, DO NOT OVERRIDE)
   Overlay must be BELOW drawer. Drawer must be BELOW toggle.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Z-index stack — drawer above overlay, toggle above all */
  .nav-overlay, #navOverlay {
    z-index: 9800 !important;
    pointer-events: auto !important;
  }
  .nav-links, #navLinks {
    z-index: 9850 !important;
    pointer-events: auto !important;
  }
  .nav-toggle, #navToggle {
    z-index: 9900 !important;
  }

  /* Every link inside the drawer is tappable, no exceptions */
  #navLinks a,
  .nav-links a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
    -webkit-tap-highlight-color: rgba(107,0,0,0.15) !important;
  }

  /* Dropdown containers shown on mob-open or open */
  #navLinks > li.mob-open > .dropdown,
  #navLinks > li.mob-open > .dropdown-refined,
  #navLinks > li.open     > .dropdown,
  #navLinks > li.open     > .dropdown-refined,
  .nav-links > li.mob-open > .dropdown,
  .nav-links > li.mob-open > .dropdown-refined,
  .nav-links > li.open     > .dropdown,
  .nav-links > li.open     > .dropdown-refined {
    display:        block !important;
    position:       static !important;
    opacity:        1 !important;
    visibility:     visible !important;
    pointer-events: all !important;
    z-index:        1 !important;
  }

  /* Dropdown link tap targets — 44px min, full width */
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a,
  #navLinks .subdropdown a,
  .nav-links .dropdown a,
  .nav-links .dropdown-refined a,
  .nav-links .subdropdown a {
    display:          block !important;
    min-height:       44px !important;
    line-height:      44px !important;
    padding:          0 32px !important;
    color:            #3a2010 !important;
    font-size:        0.9rem !important;
    font-weight:      500 !important;
    text-decoration:  none !important;
    pointer-events:   auto !important;
    touch-action:     manipulation !important;
    cursor:           pointer !important;
    position:         relative !important;
    z-index:          2 !important;
    -webkit-tap-highlight-color: rgba(107,0,0,0.15) !important;
  }

  #navLinks .dropdown a:active,
  #navLinks .dropdown-refined a:active,
  .nav-links .dropdown a:active,
  .nav-links .dropdown-refined a:active {
    background: rgba(107,0,0,0.08) !important;
    color: #6B0000 !important;
  }

  /* Subdropdown (nested) with mob-open */
  #navLinks li.mob-open > .subdropdown,
  .nav-links li.mob-open > .subdropdown {
    display:        block !important;
    position:       static !important;
    pointer-events: all !important;
  }
}
/* END MASTER Z-INDEX + LINK FIX */


/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV — FORCE VISIBILITY:VISIBLE ON ALL DROPDOWN LINKS
   Overrides any visibility:hidden from parent desktop nav rules.
   ═══════════════════════════════════════════════════════════════════ */
#navLinks .dropdown,
#navLinks .dropdown-refined,
#navLinks .subdropdown,
.nav-links .dropdown,
.nav-links .dropdown-refined,
.nav-links .subdropdown {
  visibility: visible !important;
}

#navLinks .dropdown a,
#navLinks .dropdown-refined a,
#navLinks .subdropdown a,
.nav-links .dropdown a,
.nav-links .dropdown-refined a,
.nav-links .subdropdown a,
#navLinks .dropdown li,
#navLinks .dropdown-refined li,
.nav-links .dropdown li,
.nav-links .dropdown-refined li {
  visibility: visible !important;
  opacity: 1 !important;
}
/* END VISIBILITY FIX */


/* ═══════════════════════════════════════════════════════════════════
   ABSOLUTE FINAL MOBILE NAV FIX — DO NOT ADD CSS AFTER THIS BLOCK
   Forces visibility:visible on every element inside the nav drawer.
   Fixes desktop hover animation (visibility:hidden) leaking to mobile.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* The drawer and everything inside it must be visible */
  #navLinks,
  #navLinks *,
  .nav-links,
  .nav-links * {
    visibility: visible !important;
  }

  /* Dropdowns hidden by default on mobile (use display:none, not visibility) */
  #navLinks .dropdown,
  #navLinks .dropdown-refined,
  #navLinks .subdropdown,
  .nav-links .dropdown,
  .nav-links .dropdown-refined,
  .nav-links .subdropdown {
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    box-shadow: none !important;
  }

  /* Show dropdown when parent has mob-open OR open */
  #navLinks > li.mob-open > .dropdown,
  #navLinks > li.mob-open > .dropdown-refined,
  #navLinks > li.open > .dropdown,
  #navLinks > li.open > .dropdown-refined,
  .nav-links > li.mob-open > .dropdown,
  .nav-links > li.mob-open > .dropdown-refined,
  .nav-links > li.open > .dropdown,
  .nav-links > li.open > .dropdown-refined {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* Show nested subdropdown */
  #navLinks li.mob-open > .subdropdown,
  #navLinks li.open > .subdropdown,
  .nav-links li.mob-open > .subdropdown,
  .nav-links li.open > .subdropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* All links inside drawer fully tappable */
  #navLinks a,
  .nav-links a {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    display: block !important;
    min-height: 44px !important;
    -webkit-tap-highlight-color: rgba(107,0,0,0.15) !important;
  }

  /* Top-level nav links */
  #navLinks > li > a,
  .nav-links > li > a {
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1A1508 !important;
    line-height: 1.4 !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Dropdown child links */
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a,
  #navLinks .subdropdown a,
  .nav-links .dropdown a,
  .nav-links .dropdown-refined a,
  .nav-links .subdropdown a {
    padding: 0 32px !important;
    line-height: 44px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #3a2010 !important;
    display: block !important;
    min-height: 44px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   END ABSOLUTE FINAL MOBILE NAV FIX
   ═══════════════════════════════════════════════════════════════════ */


/* =================================================================
   WOS GLOBAL DESIGN SYSTEM v2 — appended Phase 2
   ================================================================= */

.wos-section { padding: var(--section-v) 0; }
.wos-section-sm { padding: var(--section-v-sm) 0; }
.wos-section-dark { background: var(--section-bg-dark); color:#fff; }
.wos-section-cream { background: var(--section-bg-cream); }

.wos-eyebrow { display:block; font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.wos-section-title { font-family:var(--font-serif); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; line-height:1.22; color:var(--charcoal); margin:0 0 10px; }
.wos-section-title-light { color:#fff; }
.wos-section-subtitle { font-size:1rem; color:var(--text-secondary); line-height:1.65; margin:0 0 36px; max-width:540px; }
.wos-section-header-centered { text-align:center; margin:0 auto 40px; max-width:600px; }

.wos-card { background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; transition:box-shadow 0.25s ease, transform 0.25s ease; border:1px solid rgba(212,160,23,0.10); }
.wos-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-3px); }

.wos-product-card { background:#fff; border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; transition:box-shadow 0.25s,transform 0.22s; border:1px solid rgba(224,208,192,0.6); display:flex; flex-direction:column; }
.wos-product-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-4px); }
.wos-product-card-img { aspect-ratio:1/1; object-fit:cover; width:100%; background:#F5EDE0; display:block; }
.wos-product-card-body { padding:16px 18px 20px; flex:1; display:flex; flex-direction:column; }
.wos-product-card-name { font-family:var(--font-serif); font-size:1rem; font-weight:600; color:var(--charcoal); margin:0 0 3px; line-height:1.3; }
.wos-product-card-tagline { font-size:0.78rem; color:var(--text-secondary); margin:0 0 10px; }
.wos-product-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; }
.wos-product-card-price { font-family:var(--font-serif); font-size:1.05rem; font-weight:700; color:var(--charcoal); }
.wos-add-btn { width:36px; height:36px; border-radius:50%; background:var(--crimson-light); border:none; color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s,transform 0.15s; text-decoration:none; }
.wos-add-btn:hover { background:var(--crimson); transform:scale(1.1); }

.wos-collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
.wos-collection-card { border-radius:16px; overflow:hidden; position:relative; aspect-ratio:4/3; display:block; text-decoration:none; }
.wos-collection-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.wos-collection-card:hover img { transform:scale(1.04); }
.wos-collection-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.1) 55%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.wos-collection-card-title { font-family:var(--font-serif); font-size:1.15rem; font-weight:700; color:#fff; margin:0 0 4px; }
.wos-collection-card-cta { font-size:0.75rem; font-weight:700; color:var(--gold); letter-spacing:0.05em; }

.wos-recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px; }
.wos-recipe-card { border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 2px 16px rgba(0,0,0,0.08); transition:box-shadow 0.25s,transform 0.22s; text-decoration:none; display:block; }
.wos-recipe-card:hover { box-shadow:0 8px 32px rgba(107,0,0,0.14); transform:translateY(-3px); }
.wos-recipe-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.wos-recipe-card-body { padding:16px 18px 20px; }
.wos-recipe-card-tag { font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:6px; display:block; }
.wos-recipe-card-title { font-family:var(--font-serif); font-size:1rem; font-weight:600; color:var(--charcoal); margin:0 0 6px; line-height:1.3; }

.wos-discovery-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:40px 0; }
.wos-discovery-tile { border-radius:16px; overflow:hidden; position:relative; min-height:220px; display:flex; align-items:flex-end; padding:28px; text-decoration:none; transition:transform 0.25s; }
.wos-discovery-tile:hover { transform:scale(1.015); }
.wos-discovery-tile-content { position:relative; z-index:2; }
.wos-discovery-tile-eyebrow { font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; margin-bottom:6px; display:block; }
.wos-discovery-tile-title { font-family:var(--font-serif); font-size:1.25rem; font-weight:700; margin:0 0 8px; line-height:1.25; color:#fff; }
.wos-discovery-tile-desc { font-size:0.82rem; line-height:1.55; opacity:0.85; margin-bottom:16px; color:#fff; }
.wos-discovery-tile-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:0.82rem; font-weight:700; cursor:pointer; text-decoration:none; }
.wos-tile-sa { background:linear-gradient(135deg,#2a0800 0%,#4a1500 100%); }
.wos-tile-sa .wos-discovery-tile-btn { background:var(--gold); color:#1a0a00; }
.wos-tile-ff { background:linear-gradient(135deg,#0e1a08 0%,#1e3810 100%); }
.wos-tile-ff .wos-discovery-tile-btn { background:#fff; color:#1a0a00; }

.wos-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; }
.wos-badge-bestseller { background:var(--gold); color:#1a0a00; }
.wos-badge-new { background:#2E7D52; color:#fff; }
.wos-badge-spicy { background:#C41E3A; color:#fff; }

.wos-stars { color:var(--gold); font-size:0.82rem; letter-spacing:1px; }
.wos-stars-count { font-size:0.75rem; color:var(--text-muted); margin-left:4px; }

.btn-wos-primary { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:var(--crimson-light); color:#fff; font-weight:700; font-size:0.9rem; border-radius:8px; text-decoration:none; border:none; cursor:pointer; transition:background 0.2s,transform 0.15s,box-shadow 0.2s; }
.btn-wos-primary:hover { background:var(--crimson); transform:translateY(-1px); box-shadow:0 6px 20px rgba(107,0,0,0.3); color:#fff; }
.btn-wos-gold { background:var(--gold); color:#1a0a00; }
.btn-wos-gold:hover { background:var(--gold-light); color:#1a0a00; }

@media(max-width:768px) {
  .wos-section { padding:var(--section-v-sm) 0; }
  .wos-discovery-row { grid-template-columns:1fr; }
  .wos-collection-grid { grid-template-columns:1fr 1fr; }
  .wos-recipe-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px) {
  .wos-collection-grid { grid-template-columns:1fr; }
  .wos-recipe-grid { grid-template-columns:1fr; }
  .wos-discovery-tile { min-height:160px; padding:20px; }
}
/* === END WOS GLOBAL DESIGN SYSTEM v2 === */


/* ── SB-FEATURED TILE — sidebar fit (all pages) ── */
.sb-featured-tile {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.sb-featured-img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
  max-width: 100% !important;
}
.sb-featured-body {
  padding: 6px 10px 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.sb-featured-badge {
  font-size: .55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--warm-brown);
  margin-bottom: 2px;
}
.sb-featured-name {
  font-size: .75rem !important;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 3px;
  line-height: 1.25;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: hidden;
}
.sb-featured-note {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .69rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 5px;
}
.sb-featured-link {
  font-size: .72rem;
  font-weight: 700;
  color: var(--warm-brown);
  text-decoration: none;
}
.sb-featured-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .sb-featured-tile { display: none !important; }
}
/* ── END SB-FEATURED TILE FIX ── */


/* ══ MOBILE DROPDOWN LINKS — DEFINITIVE FIX (2026-05-xx) ══════════
   Ensures every link inside an open mobile dropdown accordion is
   fully tappable with a 44px touch target. Applied after ALL other rules.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Accordion dropdown: show when parent has mob-open ── */
  .has-dropdown.mob-open > .dropdown,
  .has-dropdown.mob-open > .dropdown-refined,
  .has-mega.mob-open > .mega-menu,
  li.mob-open > ul.dropdown,
  li.mob-open > ul.dropdown-refined {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    max-height: 1000px !important;
    overflow: visible !important;
  }

  /* ── ALL dropdown <a> links — fully tappable ── */
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a,
  #navLinks .mega-menu a,
  #navLinks ul.dropdown li a,
  #navLinks ul li ul li a,
  .nav-links .dropdown li a,
  .nav-links .has-dropdown ul li a {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.06) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    background: transparent !important;
  }

  #navLinks .dropdown a:hover,
  #navLinks .dropdown-refined a:hover,
  .nav-links .has-dropdown ul li a:hover,
  #navLinks ul li ul li a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }

  /* ── Parent <a> tags (Shop, Explore etc) — tap to open accordion ── */
  #navLinks > li.has-dropdown > a,
  .nav-links > li.has-dropdown > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  /* ── Top-level direct links (no dropdown) — fully tappable ── */
  #navLinks > li:not(.has-dropdown):not(.has-mega) > a,
  .nav-links > li:not(.has-dropdown):not(.has-mega) > a {
    display: block !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    line-height: 24px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    color: #fff !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Nav CTA buttons (Flavor Finder, Subscribe etc) ── */
  .nav-links .nav-cta-pill,
  #navLinks .nav-cta-pill {
    display: inline-block !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

}
/* ══ END MOBILE DROPDOWN LINKS FIX ══ */


/* ══════════════════════════════════════════════════════════════════════════
   WOS MASTER UX COMPACTION — Phase 1–5 Global Override
   Compact · Premium · Breathable · Guided · Consistent
   Applied: 2026-05-12
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PHASE 2: GLOBAL SIZE REDUCTION ──────────────────────────────────────── */

/* Tighten all section vertical padding sitewide */
section {
  padding-top:    44px !important;
  padding-bottom: 44px !important;
}
@media (max-width: 900px) {
  section {
    padding-top:    28px !important;
    padding-bottom: 28px !important;
  }
}

/* Hero band — tighter on non-homepage (product/shop/etc) */
.page-hero,
.shop-hero {
  padding: 32px 24px !important;
  min-height: unset !important;
}
@media (max-width: 900px) {
  .page-hero,
  .shop-hero {
    padding: 22px 16px !important;
  }
}

/* ── PHASE 3 & 4: CONSISTENT CARD SYSTEM ─────────────────────────────────── */

/* Unified product/recipe/collection card */
.wos-card,
.product-card,
.spice-card,
.recipe-card,
.collection-card {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(107,0,0,0.08) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  background: var(--white, #fff) !important;
}
.wos-card:hover,
.product-card:hover,
.spice-card:hover,
.recipe-card:hover,
.collection-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 24px rgba(107,0,0,0.15) !important;
}

/* Unified image aspect ratio — all product/recipe tiles */
.wos-card img,
.product-card img,
.spice-card img,
.recipe-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Unified card body padding */
.wos-card .card-body,
.product-card .card-body,
.spice-card .card-body,
.recipe-card .card-body {
  padding: 12px 14px 14px !important;
}

/* ── PHASE 4: UNIFIED GRID SYSTEM ─────────────────────────────────────────── */

/* Homepage best sellers — 5 columns desktop, 2 mobile */
.hp-bestsellers-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1024px) {
  .hp-bestsellers-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 768px) {
  .hp-bestsellers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* Shop product grid — 4 columns desktop, 2 mobile */
.shop-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  .shop-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 400px) {
  .shop-product-grid { grid-template-columns: 1fr !important; }
}

/* Recipe grid — 3 columns desktop, 1 mobile */
.recipe-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 768px) {
  .recipe-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* Collection grid — 4 columns desktop, 2 mobile */
.collection-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* Category pill grid */
.category-pill-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* ── PHASE 4: UNIFIED TYPOGRAPHY SCALE ───────────────────────────────────── */

.wos-section-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold, #D4A017) !important;
  margin-bottom: 6px !important;
}

.wos-section-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important;
  font-weight: 700 !important;
  color: var(--charcoal, #1A1A1A) !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

.wos-section-title.light {
  color: var(--white, #fff) !important;
}

.wos-section-subtitle {
  font-size: 0.88rem !important;
  color: var(--text-secondary, #5A5A5A) !important;
  margin: 0 0 24px !important;
  line-height: 1.6 !important;
}

/* ── PHASE 4: UNIFIED BUTTON SYSTEM ──────────────────────────────────────── */

.wos-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 22px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.wos-btn-primary {
  background: var(--crimson, #6B0000) !important;
  color: #fff !important;
}
.wos-btn-primary:hover {
  background: var(--crimson-light, #8B0000) !important;
  transform: translateY(-1px) !important;
}
.wos-btn-gold {
  background: var(--gold, #D4A017) !important;
  color: #1a0800 !important;
}
.wos-btn-gold:hover {
  background: var(--gold-light, #E8B830) !important;
  transform: translateY(-1px) !important;
}
.wos-btn-outline {
  background: transparent !important;
  color: var(--crimson, #6B0000) !important;
  border: 1.5px solid var(--crimson, #6B0000) !important;
}
.wos-btn-outline:hover {
  background: var(--crimson, #6B0000) !important;
  color: #fff !important;
}

/* ── PHASE 5: RESPONSIVE OVERLAP FIXES ───────────────────────────────────── */

/* Global overflow guard */
*, *::before, *::after {
  box-sizing: border-box !important;
}
body {
  overflow-x: clip;
}
img {
  max-width: 100% !important;
}

/* Container max-width consistency */
.wos-container,
.container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .wos-container,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Sidebar + product grid layout */
.shop-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* Sidebar sticky */
.shop-sidebar {
  position: sticky !important;
  top: 70px !important;
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
}
@media (max-width: 900px) {
  .shop-sidebar {
    position: static !important;
    max-height: none !important;
  }
}

/* ── PHASE 5: MOBILE COMPACT FIXES ───────────────────────────────────────── */

@media (max-width: 768px) {
  /* Compact mobile heroes */
  .wos-hero,
  #wosHeroBand {
    min-height: 140px !important;
  }

  /* Stack 2-col layouts */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Compact section titles on mobile */
  h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.15rem, 4.5vw, 1.6rem) !important; }
  h3 { font-size: clamp(1rem, 3.5vw, 1.3rem) !important; }

  /* Touch safe buttons */
  a, button {
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  /* Tightest mobile */
  section {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  .wos-hero,
  #wosHeroBand {
    min-height: 120px !important;
  }
}

/* ── SECTION-SPECIFIC COMPACTION ─────────────────────────────────────────── */

/* Homepage: tighten confidence hook */
#confidence-hook,
section[style*="background:#fff"][style*="padding:60px"] {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* Homepage: paths section */
section[style*="background:#1a0800"][style*="padding:56px"] {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Homepage: understand flavor strip */
section[style*="background:#FAF6F0"][style*="padding:56px"] {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* Homepage: Flavor Finder CTA — keep it impactful but not giant */
section[style*="background:linear-gradient"][style*="padding:72px"] {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

/* Shop: category browse section */
section[style*="padding:44px 24px"][style*="border-bottom"] {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Shop: dual AI tile */
section[style*="padding:0"] + section,
.wos-dual-tile {
  /* Keep as-is — it's already 0 padding */
}

/* Shop: full product grid section */
section[style*="background:#FAF6F0"][style*="padding:36px 0"] {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Reduce excessive gap in recipe sections */
section[style*="padding:48px 24px"],
section[style*="padding:52px 24px"] {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* ── INLINE PRODUCT CARD COMPACTION (shop grid) ───────────────────────────── */

/* Product cards in shop grid */
div[style*="minmax(185px"] > a,
div[style*="minmax(175px"] > a,
div[style*="minmax(260px"] > a {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Product image wrappers — enforce 1:1 */
div[style*="aspect-ratio:1"] {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* Product name text */
div[style*="font-weight:600"][style*="font-size:.82rem"],
div[style*="font-weight:600"][style*="font-size:.85rem"],
div[style*="font-weight:700"][style*="font-size:.82rem"] {
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
}

/* ── SHOP SIDEBAR COMPACTION ──────────────────────────────────────────────── */

#shopSidebar {
  font-size: 0.82rem !important;
}
#shopSidebar h3,
#shopSidebar .sidebar-label {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--crimson, #6B0000) !important;
  margin-bottom: 8px !important;
}
#shopSidebar a {
  font-size: 0.80rem !important;
  padding: 4px 0 !important;
  line-height: 1.5 !important;
  display: block !important;
  color: var(--charcoal, #1A1A1A) !important;
  text-decoration: none !important;
}
#shopSidebar a:hover {
  color: var(--crimson, #6B0000) !important;
}

/* ── PRODUCT PAGE COMPACTION ──────────────────────────────────────────────── */

.pd-hero {
  padding: 32px 0 40px !important;
}
.pd-section {
  padding: 36px 0 !important;
  border-top: 1px solid var(--border, #E0D0C0) !important;
}
.pd-section-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  font-family: var(--font-serif) !important;
}

/* ── MEMBERSHIP PAGE COMPACTION ───────────────────────────────────────────── */
.sub-journey {
  padding: 44px 24px !important;
}
@media (max-width: 768px) {
  .sub-journey {
    padding: 28px 16px !important;
  }
}

/* ── Z-INDEX HIERARCHY (prevents overlaps) ────────────────────────────────── */
:root {
  --z-base:     1;
  --z-card:     2;
  --z-dropdown: 500;
  --z-overlay:  9900;
  --z-close:    10001;
  --z-nav:      9000;
  --z-hamburger:10100;
  --z-toast:    10200;
}

/* ── ANNOUNCEMENT BAR COMPACTION ─────────────────────────────────────────── */
#announcement-bar,
.announcement-bar {
  padding: 8px 16px !important;
  font-size: 0.75rem !important;
}

/* ── HERO BAND COMPACTION (logged-in / non-homepage pages) ───────────────── */
#wosHeroBand {
  min-height: 160px !important;
}
@media (max-width: 768px) {
  #wosHeroBand {
    min-height: 110px !important;
    padding: 16px !important;
  }
  #wosHeroBand h1 {
    font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
  }
}

/* ── FOOTER COMPACTION ───────────────────────────────────────────────────── */
.wos-footer,
footer {
  padding-top: 44px !important;
  padding-bottom: 28px !important;
}
@media (max-width: 768px) {
  .wos-footer,
  footer {
    padding-top: 32px !important;
  }
}

/* ── TRUST BAR COMPACTION ─────────────────────────────────────────────────── */
.trust-bar,
section[style*="border-top:1px solid"][style*="border-bottom:1px solid"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* ── RECIPE CARD COMPACT ──────────────────────────────────────────────────── */
a[style*="minmax(300px"],
a[style*="minmax(240px"] {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ── MEMBERSHIP PLAN CARDS ────────────────────────────────────────────────── */
.plan-card,
div[style*="border-radius:12px"][style*="border:1px solid"] {
  border-radius: 10px !important;
}

/* ── NEWSLETTER SECTION COMPACTION ───────────────────────────────────────── */
section[style*="padding:60px 24px;text-align:center"] {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* ── PAGE ROLE ENFORCEMENT: no shop grid on product/item pages ────────────── */
.product-detail-page section[style*="minmax"] {
  display: none !important;
}

/* ── END WOS MASTER UX COMPACTION ───────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE QA PASS — Phase 1–5 Responsive + UX Fixes
   Applied: 2026-05-12
   ══════════════════════════════════════════════════════════════════ */

/* ── PHASE 1: GLOBAL MOBILE SAFETY ─────────────────────────────── */
html, body {
  overflow-x: clip;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}
img, video, iframe, embed {
  max-width: 100% !important;
  height: auto !important;
}
/* WOS NAV v5 — logo img override (must override global img rule) */
.wos-nav-logo img {
  height: 52px !important;
  width: auto !important;
  max-width: 160px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.wos-nav-logo img[src*="sitelogo"] {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 160px !important;
}

/* ── PHASE 2: IMAGE + CARD CONSISTENCY ─────────────────────────── */

/* Product cards — uniform image ratio everywhere */
.wos-card img,
.product-card img,
.spice-card img,
.ff-pc-img,
.ff-pc-img img,
[class*="product"] img,
[class*="spice"] img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Recipe card images */
.ff-recipe-card img,
.recipe-card img,
[class*="recipe"] img {
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  display: block !important;
}

/* No stretched hero images */
#wosHeroBand img,
.page-hero img,
.shop-hero img {
  object-fit: cover !important;
  max-height: 100% !important;
}

/* ── LOGIN / AUTH BRANDING ──────────────────────────────────────── */

/* Add logo to auth pages */
.auth-page::before {
  content: '';
  display: block;
}
.auth-card {
  text-align: center !important;
}
.auth-logo {
  display: block !important;
  margin: 0 auto 20px !important;
  max-width: 160px !important;
  height: auto !important;
}
.auth-card h2 {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif) !important;
  font-size: 1.6rem !important;
  margin-bottom: 4px !important;
}
.auth-card .auth-sub {
  font-size: 0.88rem !important;
  margin-bottom: 24px !important;
}
/* Spinner/loading state logo */
.wos-loading-logo {
  display: block !important;
  margin: 0 auto 16px !important;
  max-width: 120px !important;
  height: auto !important;
}
.wos-loading-msg {
  font-size: 0.88rem !important;
  color: var(--text-muted, #9A9A9A) !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* ── FLAVOR FINDER MOBILE FIXES ─────────────────────────────────── */

/* Result hero — compact on mobile */
.ff-result-hero {
  padding: 20px !important;
  border-radius: 14px !important;
}
.ffrh-name {
  font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
}
.ffrh-summary {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}
.ffrh-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.ffrh-tag {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}
.ffrh-answers {
  margin-top: 14px !important;
}
.ffrha-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}
.ffrha-item {
  font-size: 0.78rem !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}
.ffrh-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.ffrh-btn-outline,
.ffrh-btn-save {
  flex: 1 !important;
  min-width: 120px !important;
  padding: 10px 14px !important;
  font-size: 0.82rem !important;
  text-align: center !important;
}

/* FF product grid — 2 col mobile */
.ff-product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
.ff-pc-card {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.ff-pc-img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.ff-pc-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ff-pc-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.ff-pc-why {
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
}
.ff-pc-price {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}
.ff-pc-add {
  width: 100% !important;
  font-size: 0.75rem !important;
  padding: 8px 10px !important;
}

/* FF recipe grid — single col on mobile */
.ff-recipe-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.ff-recipe-card {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  padding: 10px !important;
}
.ff-recipe-card img {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* FF box tray — stack on mobile */
.ff-box-tray {
  padding: 14px !important;
}
.ff-box-tray-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.ff-tier-btns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
.ff-tier-btn {
  padding: 10px 8px !important;
  font-size: 0.75rem !important;
  border-radius: 10px !important;
  text-align: center !important;
}
.tier-name {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}
.tier-count,
.tier-save {
  font-size: 0.65rem !important;
}

/* Subscription section in FF — stack on mobile */
#ffSubSection > div[style*="flex"] {
  flex-direction: column !important;
  gap: 14px !important;
}

/* Result sections — consistent spacing */
.ff-result-section {
  margin-bottom: 20px !important;
  padding: 16px !important;
  border-radius: 12px !important;
}
.ff-section-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
.ff-section-tag {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* Refinement panel mobile */
.ff-refine-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ff-refine-input {
  width: 100% !important;
  font-size: 0.88rem !important;
}
.ff-refine-btn {
  width: 100% !important;
  padding: 12px !important;
  font-size: 0.88rem !important;
}
.ff-refine-products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

/* FF quiz steps — mobile */
.ff-shell {
  padding: 0 4px !important;
}
.ff-step {
  padding: 16px !important;
}
.ff-options {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.ff-option {
  padding: 10px 8px !important;
  font-size: 0.82rem !important;
  border-radius: 8px !important;
  text-align: center !important;
}

/* ── SHOP MOBILE FIXES ───────────────────────────────────────────── */

/* Sidebar hidden on mobile (drawer instead) */
@media (max-width: 900px) {
  #shopSidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 300px !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 9800 !important;
    background: var(--white, #fff) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.3) !important;
    transition: left 0.28s ease !important;
    padding: 20px !important;
    border-radius: 0 !important;
  }
  #shopSidebar.open,
  #shopSidebar.mob-open {
    left: 0 !important;
  }
  .shop-layout,
  div[style*="grid-template-columns:220px"],
  div[style*="grid-template-columns: 220px"],
  div[style*="grid-template-columns:230px"],
  div[style*="grid-template-columns: 230px"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* Product grid on mobile — 2 col */
@media (max-width: 768px) {
  div[style*="minmax(190px,1fr)"],
  div[style*="minmax(185px,1fr)"],
  div[style*="minmax(175px,1fr)"],
  div[style*="minmax(165px,1fr)"],
  div[style*="minmax(160px,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Recipe grids — single col */
  div[style*="minmax(260px,1fr)"],
  div[style*="minmax(240px,1fr)"],
  div[style*="minmax(220px,1fr)"],
  div[style*="minmax(300px,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Collection grid — 2 col */
  div[style*="minmax(200px,1fr)"],
  div[style*="minmax(210px,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ── CHECKOUT + CART MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Cart layout */
  div[style*="grid-template-columns:2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Checkout multi-col */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── PHASE 3: PRODUCT DENSITY ────────────────────────────────────── */

/* Limit visible products in preview sections */
.hp-bestsellers-grid a:nth-child(n+7),
.ff-product-grid .ff-pc-card:nth-child(n+7) {
  display: none !important;
}
@media (max-width: 768px) {
  /* On mobile: max 6 in bestsellers, 4 in FF */
  .hp-bestsellers-grid a:nth-child(n+7),
  .ff-product-grid .ff-pc-card:nth-child(n+7) {
    display: none !important;
  }
}

/* ── SPECIFIC BREAKPOINTS ────────────────────────────────────────── */

@media (max-width: 430px) {
  /* Tightest phones */
  section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .wos-container,
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ff-tier-btns {
    grid-template-columns: 1fr !important;
  }
  .ff-tier-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: left !important;
  }
  .ffrh-actions {
    flex-direction: column !important;
  }
  .ffrh-btn-outline,
  .ffrh-btn-save {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  /* iPhone 14 Pro and similar */
  .ff-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ffrha-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  h1 { font-size: clamp(1.3rem, 7vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
}

@media (max-width: 360px) {
  /* Smallest supported devices */
  .ff-product-grid {
    grid-template-columns: 1fr !important;
  }
  .ff-options {
    grid-template-columns: 1fr !important;
  }
  div[style*="minmax(190px,1fr)"],
  div[style*="minmax(185px,1fr)"],
  div[style*="minmax(175px,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Z-INDEX HIERARCHY FIX ───────────────────────────────────────── */
/* Prevent nav / sidebar / toast overlaps */
#siteNav     { z-index: 9000 !important; }
#navLinks    { z-index: 10000 !important; }
#navToggle   { z-index: 10100 !important; }
#shopSidebar { z-index: 9800 !important; }
.wos-nav-overlay,
#wosNavOverlay { z-index: 9900 !important; }

/* Sticky add-to-cart bars — don't cover nav */
.pd-sticky-cta,
.sticky-cart-bar {
  z-index: 8500 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: fixed !important;
}

/* ── MEMBERSHIP / SUBSCRIPTION CARDS MOBILE ─────────────────────── */
@media (max-width: 768px) {
  .plan-card,
  div[style*="border-radius:12px"][style*="border:2px solid"],
  div[style*="border-radius:12px"][style*="border:1.5px solid"] {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
  .plans-grid,
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── HORIZONTAL SCROLL PREVENTION ───────────────────────────────── */
main, article, section, .container, .wos-container,
header, footer, nav, aside {
  max-width: 100% !important;
  overflow-x: visible !important;
}
/* Only clip the body-level overflow */
body { overflow-x: clip; }

/* ── FF SELECTABLE PRODUCTS (build-your-box) ─────────────────────── */
#ffSelectableProducts {
  max-height: 400px !important;
  overflow-y: auto !important;
}
@media (max-width: 768px) {
  #ffSelectableProducts {
    max-height: 320px !important;
  }
}

/* ── CART MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cart-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .cart-item img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
}

/* ── ANNOUNCEMENT BAR — no overflow ─────────────────────────────── */
#announcement-bar, .announcement-bar {
  white-space: normal !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* ── END WOS MOBILE QA PASS ─────────────────────────────────────── */

/* ── AUTH CARD MOBILE — tighter padding, centered logo ─── */
@media (max-width: 600px) {
  .auth-card {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }
  .auth-logo {
    max-width: 130px !important;
    margin-bottom: 16px !important;
  }
  .auth-page {
    padding: 20px 16px !important;
    align-items: flex-start !important;
    padding-top: 40px !important;
  }
}
/* ── FF LOADING STATE MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
  #ffLoading {
    padding: 36px 16px !important;
  }
  .wos-loading-logo {
    max-width: 100px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   CART + CHECKOUT MOBILE — Phase 10
   ══════════════════════════════════════════════════════════════ */

/* Cart: collapse 2-column to 1 column on mobile */
@media (max-width: 900px) {
  /* Main cart layout */
  div[style*="grid-template-columns:1fr 360px"],
  div[style*="grid-template-columns: 1fr 360px"],
  div[style*="grid-template-columns:1fr 380px"],
  div[style*="grid-template-columns: 1fr 380px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cart items: wrap row */
  .cart-item,
  div[style*="cart-item"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Cart item image */
  .cart-item img,
  div[style*="cart-item"] img {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
  }

  /* Cart item qty controls */
  .qty-control,
  div[style*="qty"] {
    flex-wrap: wrap !important;
  }

  /* Cart order summary — full width */
  .order-summary,
  div[style*="360px"],
  div[style*="380px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Checkout: collapse form grid */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Checkout sticky button bar */
  .checkout-sticky,
  div[style*="position:sticky"][style*="bottom"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8500 !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border-top: 1px solid var(--border, #eee) !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,.08) !important;
  }
}

/* Cart empty state — centered */
.cart-empty,
div[id*="emptyCart"] {
  text-align: center !important;
  padding: 48px 20px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   WOS GLOBAL RESPONSIVE FIX — v2026.05.13
   Covers: product images, grids, nav, shop, product page, creator forms
   Breakpoints: 1200px (large), 900px (tablet), 768px (small tablet), 480px (phone)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global box model safety ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
body { overflow-x: clip; }

/* ── Product image containers — always square, never distort ── */
.product-card-img,
.wos-product-thumb,
.pd-hero-img,
[style*="aspect-ratio:1/1"] {
  position: relative;
  overflow: hidden;
}
.product-card-img img,
.wos-product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Product grid — responsive columns ── */
.product-grid,
.wos-grid,
[class*="product-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

/* ── Shop card consistent height ── */
.wos-product-card,
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ═══════════════ TABLET (≤ 1024px) ═══════════════ */
@media (max-width: 1024px) {
  .product-grid,
  .wos-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
  .wos-container,
  .container,
  [class*="-inner"],
  [class*="-wrap"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ═══════════════ TABLET PORTRAIT (≤ 900px) ═══════════════ */
@media (max-width: 900px) {
  /* Nav */
  .wos-nav-desktop { display: none !important; }
  .wos-hamburger  { display: flex !important; }

  /* Grids → 2 cols */
  .product-grid,
  .wos-grid,
  .wos-values-grid,
  .cre-values-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stats strip → 2 cols */
  .cre-stats,
  .cd-stats        { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hide progress labels on creator form */
  .cre-progress-labels { display: none; }

  /* Creator form row → single col */
  .cre-row,
  .cd-form-row     { grid-template-columns: 1fr !important; }

  /* Creator sidebar → stacked */
  .cd-layout       { flex-direction: column !important; }
  .cd-sidebar      { width: 100% !important; height: auto !important; position: static !important; }
  .cd-main         { padding: 20px 16px 80px !important; }

  /* Shop filter sidebar → collapse */
  .wos-shop-sidebar { display: none; }
  .wos-shop-main    { width: 100% !important; max-width: 100% !important; }

  /* Product page two-col → stack */
  .pd-layout,
  .pd-two-col      { flex-direction: column !important; }
  .pd-sidebar      { width: 100% !important; max-width: 100% !important; }
}

/* ═══════════════ MOBILE (≤ 768px) ═══════════════ */
@media (max-width: 768px) {
  /* Global spacing */
  section, .wos-section { padding: 40px 16px !important; }

  /* Product grid → 2 cols on phone */
  .product-grid,
  .wos-grid        { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Creator voices → 1 col */
  .cre-voices-grid { grid-template-columns: 1fr !important; }

  /* Stat blocks */
  .adm-stats       { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tables → horizontal scroll */
  .adm-table-wrap,
  .cd-panel-body table { overflow-x: auto; display: block; width: 100%; }

  /* Hero text sizing */
  h1 { font-size: clamp(1.4rem, 5vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.2rem, 4vw, 1.8rem) !important; }

  /* Product page hero */
  .pd-hero { padding: 20px 0 24px !important; }
  .pd-hero-name { font-size: 1.3rem !important; }

  /* Sticky bar */
  .pd-sticky-bar { padding: 10px 14px !important; gap: 8px !important; }
  .pd-sticky-bar .pd-sticky-name { display: none; }

  /* Image gallery */
  .pd-gallery-main { height: 260px !important; }
  .pd-gallery-thumbs img { width: 56px !important; height: 56px !important; }

  /* Flavor finder steps */
  .wos-ff-option-grid { grid-template-columns: 1fr 1fr !important; }

  /* Cart */
  .wos-cart-item  { flex-direction: column !important; gap: 12px !important; }
  .wos-cart-img   { width: 80px !important; height: 80px !important; }

  /* Membership tiers */
  .wos-tier-grid  { grid-template-columns: 1fr !important; }

  /* Footer columns → single */
  .wos-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════ SMALL PHONE (≤ 480px) ═══════════════ */
@media (max-width: 480px) {
  body { font-size: 14px; }

  /* Single column everything */
  .product-grid,
  .wos-grid        { grid-template-columns: 1fr 1fr !important; }

  /* Full-width buttons */
  .wos-btn-primary,
  .cre-hero-cta,
  .cd-btn-primary  { width: 100% !important; justify-content: center !important; }

  /* Creator app nav */
  .cre-form-nav    { flex-wrap: wrap !important; gap: 10px !important; }
  .cre-btn-back,
  .cre-btn-next    { flex: 1 !important; justify-content: center !important; }

  /* Admin table — minimum columns */
  .adm-table th:nth-child(n+5),
  .adm-table td:nth-child(n+5) { display: none !important; }

  /* Remove horizontal padding on very small screens */
  .wos-container,
  .container       { padding-left: 12px !important; padding-right: 12px !important; }

  /* Footer → 1 col */
  .wos-footer-grid { grid-template-columns: 1fr !important; }
}

/* ── Prevent horizontal overflow globally ── */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* ── Ensure all images load properly ── */
img[src=""], img:not([src]) {
  background: linear-gradient(135deg, #2d0f00, #5a2a00);
  min-height: 40px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   WOS MOBILE REFINEMENT — Phase 2 v2026.05.13
   Premium mobile UX pass: calmer, sleeker, more app-like
   All rules scoped to @media (max-width:900px) or smaller
   Zero desktop impact
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL SECTION SPACING REDUCTION ──────────────────────────────────
   Reduce vertical fatigue 25–30% on mobile without cramping content */
@media (max-width: 900px) {
  section,
  .wos-section,
  [class*="wos-section"],
  [class*="-section"] {
    padding-top: clamp(28px, 5vw, 44px) !important;
    padding-bottom: clamp(28px, 5vw, 44px) !important;
  }

  /* Tighten hero sections specifically */
  .wos-hero,
  [class*="-hero"],
  [class*="hero-"] {
    padding-top: clamp(32px, 6vw, 52px) !important;
    padding-bottom: clamp(24px, 4vw, 40px) !important;
  }

  /* Reduce excessive gap between stacked cards */
  .wos-grid,
  .product-grid,
  [class*="-grid"] {
    gap: 12px !important;
  }

  /* Tighten h1/h2 top margins on mobile */
  h1, h2 {
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
  }

  /* Reduce paragraph spacing */
  p + p { margin-top: 10px !important; }

  /* Constrain containers */
  .wos-container,
  .container,
  [style*="max-width:1280px"],
  [style*="max-width: 1280px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── 2. HAMBURGER REFINEMENT ───────────────────────────────────────────────
   Cleaner, more intentional hamburger icon */
@media (max-width: 900px) {
  #navToggle,
  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background .2s ease !important;
  }
  #navToggle:hover,
  .nav-toggle:hover {
    background: rgba(255,255,255,.07) !important;
  }
  #navToggle .ham-bar,
  .nav-toggle span:not(.sr-only) {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, width .2s ease !important;
    transform-origin: center !important;
  }

  /* X animation — middle bar shortens before fading */
  #navToggle.open .ham-bar:nth-child(1),
  .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  #navToggle.open .ham-bar:nth-child(2),
  .nav-toggle.open span:nth-child(2) {
    opacity: 0 !important;
    width: 0 !important;
  }
  #navToggle.open .ham-bar:nth-child(3),
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

/* ── 3. MOBILE DRAWER REFINEMENT ──────────────────────────────────────────
   Premium slide-in feel, cleaner typography, better spacing */
@media (max-width: 900px) {

  /* Drawer: visual refinements only — slide behavior handled by header.php */
  /* Background elevated to near-black premium dark */
  #navLinks,
  .nav-links {
    background: #0f0600 !important;
    border-right: 1px solid rgba(212,160,23,.1) !important;
  }

  #navLinks.open,
  .nav-links.open {
    box-shadow: 6px 0 40px rgba(0,0,0,.6) !important;
  }

  /* Nav items — clean, app-like */
  #navLinks > li > a,
  .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 22px !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none !important;
    letter-spacing: .02em !important;
    border: none !important;
    transition: background .15s ease, color .15s ease !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
  }

  #navLinks > li > a:hover,
  .nav-links > li > a:hover,
  #navLinks > li > a:active,
  .nav-links > li > a:active {
    background: rgba(212,160,23,.07) !important;
    color: #D4A017 !important;
  }

  /* Active state */
  #navLinks > li > a[aria-current="page"],
  #navLinks > li.active > a {
    color: #D4A017 !important;
    background: rgba(212,160,23,.06) !important;
  }

  /* Subdropdown items — indented */
  #navLinks .dropdown a,
  #navLinks .dropdown-refined a,
  .nav-links .dropdown a {
    padding: 11px 22px 11px 44px !important;
    font-size: .82rem !important;
    color: rgba(255,255,255,.55) !important;
    border-bottom: 1px solid rgba(255,255,255,.03) !important;
  }

  #navLinks .dropdown a:hover,
  .nav-links .dropdown a:hover {
    color: rgba(212,160,23,.85) !important;
    background: rgba(212,160,23,.04) !important;
  }

  /* Touch target minimum */
  #navLinks a,
  .nav-links a {
    min-height: 44px !important;
  }

  /* Drawer overlay */
  #navOverlay,
  .nav-overlay {
    background: rgba(0,0,0,.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: opacity .28s ease !important;
  }
}

/* ── 4. BOTTOM NAV REFINEMENT ──────────────────────────────────────────────
   Cleaner, sharper bottom bar */
@media (max-width: 900px) {
  #wos-mob-bottom-nav {
    background: rgba(10,3,0,.97) !important;
    border-top: 1px solid rgba(212,160,23,.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 0 !important;
    height: 58px !important;
  }

  .wos-mob-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    color: rgba(255,255,255,.42) !important;
    text-decoration: none !important;
    font-size: .6rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    transition: color .15s ease !important;
    position: relative !important;
  }

  .wos-mob-nav-item i,
  .wos-mob-nav-item svg {
    font-size: 1.1rem !important;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
  }

  .wos-mob-nav-item:hover,
  .wos-mob-nav-item.active {
    color: rgba(255,255,255,.9) !important;
  }

  .wos-mob-nav-item:hover i,
  .wos-mob-nav-item.active i {
    transform: translateY(-2px) !important;
  }

  /* Gold accent for Flavor Finder */
  .wos-mob-gold,
  .wos-mob-nav-item.wos-mob-gold {
    color: #D4A017 !important;
  }

  .wos-mob-gold i {
    filter: drop-shadow(0 0 4px rgba(212,160,23,.5)) !important;
  }

  /* Active indicator dot */
  .wos-mob-nav-item.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #D4A017 !important;
    border-radius: 50% !important;
  }
}

/* ── 5. PRODUCT CARDS — MOBILE CONSTRAINT ─────────────────────────────────
   Faster scanning, cleaner interaction */
@media (max-width: 900px) {
  .product-card,
  .wos-product-card {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* Card image — constrained, no distortion */
  .product-card .product-card-img,
  .wos-product-card [style*="aspect-ratio:1"],
  .product-card img:first-child {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }

  /* Card body padding */
  .product-card .card-body,
  .wos-product-card > div:last-child {
    padding: 10px 10px 12px !important;
  }

  /* Card title */
  .product-card .card-title,
  .wos-product-card h3 {
    font-size: .82rem !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }

  /* Price — prominent */
  .product-card .price,
  .wos-product-card [class*="price"] {
    font-size: .88rem !important;
    font-weight: 700 !important;
  }
}

/* ── 6. FOOTER ACCORDION REFINEMENT ──────────────────────────────────────
   Tighter, cleaner, more scannable */
@media (max-width: 900px) {
  /* Accordion group */
  .wos-acc-group {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Trigger button */
  .wos-acc-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,.75) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: color .15s ease !important;
  }

  .wos-acc-trigger:hover {
    color: rgba(255,255,255,.95) !important;
  }

  .wos-acc-arrow {
    font-size: .75rem !important;
    transition: transform .2s cubic-bezier(.4,0,.2,1) !important;
    display: inline-block !important;
  }

  .wos-acc-trigger[aria-expanded="true"] .wos-acc-arrow {
    transform: rotate(180deg) !important;
  }

  /* Accordion body */
  .wos-acc-body {
    max-height: 0 !important;
    overflow-x: clip; overflow-y: visible!important;
    transition: max-height .25s cubic-bezier(.4,0,.2,1) !important;
    padding: 0 !important;
  }

  .wos-acc-body.open {
    max-height: 320px !important;
  }

  .wos-acc-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 12px !important;
  }

  .wos-acc-body li a {
    display: block !important;
    padding: 9px 20px !important;
    font-size: .8rem !important;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none !important;
    transition: color .12s ease !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }

  .wos-acc-body li a:hover {
    color: rgba(212,160,23,.9) !important;
  }
}

/* ── 7. PERCEIVED PERFORMANCE ──────────────────────────────────────────────
   Smooth transitions, reduce jank */
@media (max-width: 900px) {
  /* Faster image load feel */
  img {
    transition: opacity .2s ease !important;
  }

  /* Buttons — crisp tap response */
  button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(212,160,23,.1) !important;
    touch-action: manipulation !important;
  }

  /* Reduce animation complexity */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
    }
  }

  /* Section transitions — subtle vertical reveal */
  .wos-section,
  section {
    transition: opacity .3s ease !important;
  }
}

/* ── 8. MOBILE READABILITY ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Body text */
  body {
    font-size: 15px !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* Constrain wide text blocks */
  p, li {
    max-width: 66ch !important;
  }

  /* Section labels */
  [class*="section-label"],
  [class*="eyebrow"],
  [style*="letter-spacing:.2"] {
    font-size: .68rem !important;
  }

  /* CTA buttons — full width on small screens */
  .btn-primary,
  .wos-btn-primary,
  [class*="-cta"]:not(a[class*="-cta-secondary"]) {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── 9. SHOP PAGE MOBILE REFINEMENT ────────────────────────────────────────
   Cleaner browse experience */
@media (max-width: 900px) {
  /* Filter pills — horizontal scroll, no wrap */
  .wos-filter-pills,
  [class*="filter-pill"] {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .wos-filter-pills::-webkit-scrollbar { display: none !important; }

  /* Pathway banner — compact on mobile */
  .wos-pathway-banner,
  [class*="pathway-banner"] {
    padding: 14px 16px !important;
  }
}

/* ── 10. FORMS ON MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 44px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   WOS MEMBER AREA MOBILE — premium app-like dashboard experience
   Appended 2026-05-13. Prefix: wos-mem-  |  max-width: 768px
   Fixes: alignment, spacing, card stacking, sidebar collapse,
          forms, stat cards, tables→cards, horizontal drift.
══════════════════════════════════════════════════════════════════════ */

/* ── SHARED MOBILE LAYOUT SHELL ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Page container — single column, no horizontal overflow */
  .dashboard-layout,
  .member-layout,
  .account-layout {
    display:    block !important;
    width:      100% !important;
    max-width:  100vw !important;
    overflow-x: hidden !important;
    padding:    0 !important;
  }

  /* Main content area */
  .dashboard-main,
  .member-main,
  .account-main {
    padding:    16px 16px 80px !important; /* 80px = bottom nav clearance */
    max-width:  100% !important;
    box-sizing: border-box !important;
  }

  /* Page header — tighter on mobile */
  .page-header {
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
  }
  .page-header h1 {
    font-size:     1.45rem !important;
    line-height:   1.2 !important;
    margin-bottom: 4px !important;
  }
  .page-header p {
    font-size: 0.85rem !important;
  }

  /* ── SIDEBAR ─────────────────────────────────────────────────────────
     Fixed off-screen drawer — overlays content when open.
     Matches existing main.css sidebar open/close pattern.
  ─────────────────────────────────────────────────────────────────── */
  .sidebar {
    position:   fixed !important;
    left:       -260px !important;
    top:        0 !important;
    bottom:     0 !important;
    width:      240px !important;
    height:     100dvh !important;
    z-index:    8000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    padding-top: 0 !important;
    background: linear-gradient(180deg,#3A0000 0%,#1A0000 100%) !important;
    box-shadow: none !important;
  }
  .sidebar.open {
    left:       0 !important;
    box-shadow: 6px 0 32px rgba(0,0,0,0.6) !important;
  }

  /* Sidebar close button — visible on mobile */
  .sidebar-close-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: flex-end !important;
    padding:         14px 16px 8px !important;
  }
  .sidebar-close-btn button {
    min-width:  44px !important;
    min-height: 44px !important;
    font-size:  1.2rem !important;
    display:    flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sidebar links — bigger tap targets */
  .sidebar-link {
    padding:    13px 20px !important;
    font-size:  0.92rem !important;
    min-height: 48px !important;
  }
  .sidebar-section {
    padding:    18px 20px 6px !important;
    font-size:  0.65rem !important;
  }

  /* ── SIDEBAR TOGGLE BUTTON ───────────────────────────────────────── */
  #sidebarToggle {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    margin-bottom:   16px !important;
    background:      #3A0000 !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   8px !important;
    padding:         10px 16px !important;
    font-size:       0.88rem !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    min-height:      44px !important;
  }

  /* ── STAT CARDS ──────────────────────────────────────────────────── */
  .stats-grid,
  .member-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap:                   12px !important;
    margin-bottom:         20px !important;
  }
  .stat-card,
  .member-stat {
    padding:    16px 14px !important;
    gap:        10px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .stat-icon {
    width:     40px !important;
    height:    40px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }
  .stat-value,
  .member-stat-value {
    font-size: 1.4rem !important;
    line-height: 1 !important;
  }
  .stat-label,
  .member-stat-label {
    font-size: 0.72rem !important;
  }

  /* Single-column on very small screens */
}
@media (max-width: 400px) {
  .stats-grid,
  .member-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CARDS ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow:      hidden !important;
  }
  .card-header {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .card-header h3 {
    font-size: 1rem !important;
  }
  .card-body {
    padding: 14px 16px !important;
  }

  /* ── TABLES → card-style rows ────────────────────────────────────── */
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 0 !important;
  }
  table.data-table {
    font-size: 0.82rem !important;
    min-width: 480px !important; /* allow horizontal scroll if needed */
  }
  .data-table th,
  .data-table td {
    padding: 10px 12px !important;
    white-space: nowrap !important;
  }

  /* ── FORMS ────────────────────────────────────────────────────────── */
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap:                   12px !important;
  }
  .form-group input,
  .form-group select,
  .form-group textarea,
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size:  16px !important; /* prevents iOS zoom */
    width:      100% !important;
    box-sizing: border-box !important;
    max-width:  100% !important;
  }
  .btn, button[type="submit"] {
    min-height: 44px !important;
  }

  /* ── ACCOUNT NAV TABS ─────────────────────────────────────────────── */
  .account-tabs,
  .member-tabs {
    display:              flex !important;
    overflow-x:           auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap:                  4px !important;
    padding-bottom:       4px !important;
    margin-bottom:        20px !important;
    scrollbar-width:      none !important;
  }
  .account-tabs::-webkit-scrollbar,
  .member-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .account-tab,
  .member-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding:     8px 14px !important;
    font-size:   0.82rem !important;
    min-height:  40px !important;
  }

  /* ── GRID LAYOUTS → single column ─────────────────────────────────── */
  [style*="grid-template-columns"] {
    /* Can't target inline styles generically — member pages use inline grids */
    /* Handled per-page below */
  }

  /* ── NO HORIZONTAL OVERFLOW ────────────────────────────────────────── */
  .member-section,
  .account-section,
  .dashboard-section {
    max-width:  100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── MEMBER ORDER CARDS ─────────────────────────────────────────────── */
  .order-card,
  .order-row {
    padding:    14px 16px !important;
    font-size:  0.88rem !important;
  }

  /* ── PRODUCT GRID inside member ──────────────────────────────────────── */
  .product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap:                   12px !important;
  }
}
@media (max-width: 380px) {
  .product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CREATOR DASHBOARD (cd-*) MOBILE ─────────────────────────────── */
@media (max-width: 900px) {
  .cd-layout {
    flex-direction: column !important;
  }
  .cd-sidebar {
    width:     100% !important;
    height:    auto !important;
    position:  static !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    display:   none !important;
    padding:   16px 0 !important;
  }
  .cd-sidebar.open {
    display: block !important;
  }
  .cd-main {
    padding:   16px 16px 80px !important;
    max-width: 100% !important;
  }
  .cd-stats {
    grid-template-columns: 1fr 1fr !important;
    gap:                   12px !important;
  }
  .cd-form-row {
    grid-template-columns: 1fr !important;
    gap:                   12px !important;
  }
  #cdSidebarToggle {
    display:     flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width:       100% !important;
    padding:     14px 16px !important;
    background:  #2a0d00 !important;
    border:      none !important;
    color:       #fff !important;
    font-size:   0.9rem !important;
    font-weight: 600 !important;
    cursor:      pointer !important;
    min-height:  48px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
}
@media (max-width: 480px) {
  .cd-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ── BOTTOM NAV CLEARANCE — member pages ────────────────────────────── */
@media (max-width: 768px) {
  /* Ensure member page content doesn't hide behind fixed bottom nav */
  .dashboard-main,
  .member-main,
  .cd-main,
  .account-main {
    padding-bottom: max(80px, env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
}

/* ── GLOBAL MOBILE SAFETY ───────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: clip;
    max-width:  100vw !important;
  }
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Exception: don't constrain images that need overflow */
  img { max-width: 100% !important; height: auto !important; }

  /* Prevent any fixed-width inline elements from causing drift */
  [style*="width:"] { max-width: 100% !important; }
}

/* END WOS MEMBER AREA MOBILE */


/* WOS recipe mobile fixes + safe header offset — 2026-05-13 */
@media (max-width: 899px) {

  /* Recipe containers — prevent horizontal overflow */
  .recipe-grid, .wos-recipe-grid, .ff-recipe-grid,
  .recipe-list, .recipe-strip, .recipe-results, .recipe-section,
  [class*="recipe-grid"], [class*="recipe-list"] {
    max-width:      100% !important;
    overflow-x:     hidden !important;
    box-sizing:     border-box !important;
  }

  /* Recipe grids — single column on mobile */
  .recipe-grid, .wos-recipe-grid {
    grid-template-columns: 1fr !important;
    gap:            16px !important;
    padding:        0 !important;
  }

  /* Recipe cards — full width, no overflow */
  .recipe-card, .wos-recipe-card, .ff-recipe-card {
    max-width:      100% !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    overflow:       hidden !important;
  }

  /* Recipe card images — responsive */
  .recipe-card img, .wos-recipe-card img {
    width:          100% !important;
    max-width:      100% !important;
    height:         auto !important;
    aspect-ratio:   3 / 2 !important;
    object-fit:     cover !important;
    display:        block !important;
    box-sizing:     border-box !important;
  }

  /* FF recipe card thumbnail — keep small fixed size */
  .ff-recipe-card img {
    width:          76px !important;
    min-width:      76px !important;
    height:         76px !important;
    aspect-ratio:   1 / 1 !important;
    object-fit:     cover !important;
    flex-shrink:    0 !important;
  }

  /* Recipe hero — constrain tall desktop height */
  .recipe-hero-wrap {
    height:         240px !important;
    max-height:     55vw !important;
    overflow:       hidden !important;
    position:       relative !important;
  }

  /* Recipe hero image fill */
  .recipe-hero-wrap img {
    width:          100% !important;
    height:         100% !important;
    max-width:      100% !important;
    object-fit:     cover !important;
    object-position:center top !important;
    display:        block !important;
  }

  /* Recipe strips — single column */
  .cart-recipe-strip, [class*="recipe-strip"] {
    grid-template-columns: 1fr !important;
    gap:            12px !important;
    overflow-x:     hidden !important;
  }

  /* Discovery/cook-next tiles — single column */
  .wos-discovery-row {
    grid-template-columns: 1fr !important;
    gap:            14px !important;
  }

  /* Mega recipe link images */
  .mega-recipe-link img {
    max-width:      100% !important;
    height:         auto !important;
    object-fit:     cover !important;
  }

  /* Recipe index uses product-card — ensure box-sizing */
  .product-card { box-sizing: border-box !important; }

  /* Page-level overflow guard */
  .recipes-section, main#main-content {
    overflow-x:     hidden !important;
    max-width:      100vw !important;
  }

}


/* WOS Stability + Readability Fix — 2026-05-14 */

/* ── ISSUE 1: Header top offset (mobile) ───────────────────── */
@media (max-width: 899px) {

  .page-hero:first-of-type,
  .shop-hero:first-of-type {
    padding-top: max(32px, 16px) !important;
    scroll-margin-top: 72px;
  }

  .hero {
    padding-top: max(clamp(32px, 6vw, 52px), 36px) !important;
  }

  body > section:first-of-type,
  body > div > section:first-of-type {
    padding-top: max(28px, 28px) !important;
  }

  .section:first-child {
    padding-top: 24px !important;
  }

  [style*="border-bottom:1px solid var(--border)"][style*="padding:10px 0"],
  [style*="border-bottom: 1px solid var(--border)"][style*="padding: 10px 0"] {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

}

/* ── ISSUE 2: Hero/culture card title readability ───────────── */

.hero h1,
.hero .hero-title,
[class*="-hero"] h1,
[class*="-hero"] h2,
.page-hero h1,
.page-hero h2 {
  text-shadow:
    0 2px 8px  rgba(0,0,0,0.55),
    0 1px 3px  rgba(0,0,0,0.40) !important;
}

.hero p,
.hero .hero-desc,
.hero-desc,
[class*="-hero"] p,
.page-hero p {
  text-shadow:
    0 1px 6px  rgba(0,0,0,0.45),
    0 1px 2px  rgba(0,0,0,0.30) !important;
}

.culture-card .culture-card-content,
.culture-card .culture-card-title,
[class*="culture-card"] h3,
[class*="culture-card"] h4,
[class*="culture-card"] p {
  text-shadow:
    0 2px 12px rgba(0,0,0,0.70),
    0 1px 3px  rgba(0,0,0,0.50) !important;
}

.culture-cta-link,
[class*="culture"] a {
  text-shadow: 0 1px 4px rgba(0,0,0,0.40) !important;
}

@media (max-width: 899px) {
  .hero h1,
  .page-hero h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.8rem) !important;
    line-height: 1.2 !important;
  }

  .hero p,
  .page-hero p {
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
    line-height: 1.65 !important;
  }
}

/* ── ISSUE 3: Product ratings visibility ────────────────────── */

.product-card,
.product-card a,
[style*="flex-direction:column"][style*="background:#fff"][style*="border-radius:13px"] {
  overflow: visible !important;
}

.product-card-img,
.product-card img,
[style*="aspect-ratio:1/1"][style*="background:linear-gradient"] {
  overflow: hidden !important;
}

[style*="color:#D4A017"],
[class*="wos-stars"],
.star-rating-display {
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.star-rating-display {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

.star-rating-display .star {
  color: var(--gold, #D4A017) !important;
  font-size: 0.82rem !important;
}

.star-rating-display .star.empty {
  color: #e0d5c8 !important;
}

.wos-stars {
  color: var(--gold, #D4A017) !important;
  font-size: 0.82rem !important;
  letter-spacing: 1px !important;
}

.wos-stars-count {
  font-size: 0.72rem !important;
  color: var(--text-muted, #9B6A2F) !important;
  margin-left: 3px !important;
}

@media (max-width: 899px) {
  [style*="padding:12px 13px"][style*="flex:1"][style*="flex-direction:column"],
  [style*="padding:12px"][style*="flex:1"],
  .product-card-body {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  [style*="font-size:.62rem"][style*="color:#D4A017"],
  [style*="font-size:.7rem"][style*="color:#D4A017"] {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
  }
}

/* ── ISSUE 4: Recipe view sidebar mobile collapse ───────────── */
@media (max-width: 899px) {

  .wos-recipe-layout {
    display:               grid !important;
    grid-template-columns: 1fr !important;
    gap:                   28px !important;
  }

  .wos-recipe-sidebar {
    position:   static !important;
    top:        auto !important;
    width:      100% !important;
    max-width:  100% !important;
    overflow-x: hidden !important;
  }

  .wos-recipe-sidebar .card {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .wos-recipe-sidebar img {
    max-width: 54px !important;
    max-height: 54px !important;
    flex-shrink: 0 !important;
  }

  [style*="grid-template-columns:repeat(auto-fill,minmax(240px,1fr))"][style*="gap:20px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Shop sidebar mobile containment ────────────────────────── */
@media (max-width: 899px) {
  #shopSidebar {
    max-width: 85vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #shopSidebar.mob-open {
    overflow-y: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   WOS DESKTOP HEADER FIX — 2026-05-14
   Scope: desktop/tablet (min-width: 900px) ONLY
   Mobile header (wosSafeMobileHeader): UNTOUCHED
   Mobile hamburger / drawer: UNTOUCHED
   Checkout / Stripe / products / recipes: UNTOUCHED
════════════════════════════════════════════════════════════════════ */

/* ── 1. FIXED DESKTOP NAV BAR ────────────────────────────────────────
   #siteNav inline style changed to position:fixed via PHP.
   These rules reinforce and refine it for desktop.
   Hidden on mobile via the wos-safe-nav-css block (already in place).
────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* Sticky navbar — stays at top once hero scrolls away */
  #siteNav {
    position:   sticky !important;
    top:        0 !important;
    left:       0 !important;
    right:      0 !important;
    width:      100% !important;
    z-index:    9000 !important;
    /* Nav bar height — tight, functional, premium */
    min-height: 56px !important;
    box-sizing: border-box !important;
  }

  /* Nav inner container — ensure logo can be absolutely centered */
  #siteNav > div {
    position: relative !important;
    min-height: 56px !important;
  }

  /* ── 2. DESKTOP CENTERED LOGO ─────────────────────────────────────
     The logo is absolutely centered in the nav.
     clamp(52px, 6vw, 76px) = ~52px on 900px, ~76px on 1260px+
     The logo protrudes above/below the 56px nav bar for premium feel.
  ────────────────────────────────────────────────────────────────── */
  #wos-desktop-logo {
    display:        flex !important;
    align-items:    center !important;
    justify-content:center !important;
    position:       absolute !important;
    left:           50% !important;
    top:            50% !important;
    transform:      translate(-50%, -50%) !important;
    z-index:        2 !important;
    pointer-events: auto !important;
  }

  #wos-desktop-logo-img {
    height:       clamp(60px, 6vw, 80px) !important;
    width:        clamp(60px, 6vw, 80px) !important;
    border-radius:50% !important;
    object-fit:   cover !important;
    display:      block !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.15),
      0 2px 8px rgba(0,0,0,0.35) !important;
    background:   #6B0000 !important;
    transition:   box-shadow 0.2s ease !important;
  }

  #wos-desktop-logo-img:hover {
    box-shadow:
      0 0 0 2px rgba(212,160,23,0.4),
      0 6px 20px rgba(0,0,0,0.50) !important;
  }

  /* Ensure logo does NOT show on mobile (mobile uses wosSafeMobileHeader) */

  /* ── 3. NAV LINKS — ensure they don't collide with centered logo ──
     navLinks sits at the left. The logo is absolute-centered.
     We give navLinks a max-width cap so they don't bleed into center.
  ────────────────────────────────────────────────────────────────── */
  #navLinks {
    /* navLinks is a flex row — give it a max-width to avoid logo overlap */
    max-width: calc(50% - clamp(30px, 4vw, 44px)) !important;
    flex-wrap: nowrap !important;
    overflow:  visible !important;
  }

  /* Nav item links — keep white text on dark nav */
  .nav-item-link {
    color:       rgba(255,255,255,0.88) !important;
    font-size:   0.82rem !important;
    font-weight: 600 !important;
    padding:     8px 11px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display:     flex !important;
    align-items: center !important;
    gap:         5px !important;
    text-decoration: none !important;
    transition:  background 0.15s ease !important;
  }

  .nav-item-link:hover,
  .nav-item-link:focus {
    background: rgba(255,255,255,0.10) !important;
    color:      var(--gold, #D4A017) !important;
  }

  .nav-item-link.nav-gold {
    color: var(--gold, #D4A017) !important;
  }

  /* ── 4. PAGE CONTENT OFFSET ────────────────────────────────────────
     With fixed nav at 56px, page content needs top offset.
     We target the first element types that appear directly after header.
     Use a universal body offset that works for all pages.
  ────────────────────────────────────────────────────────────────── */

  /* Body offset: 0 — hero scrolls naturally, sticky nav handles itself */
  body {
    padding-top: 0 !important;
  }

  /* Hero sections that ARE the first content element — keep their own padding */
  /* but ensure they don't start under the nav */
  .hero,
  #wosHeroBand,
  .page-hero,
  .shop-hero {
    /* already have their own padding — let body offset handle the gap */
    margin-top: 0 !important;
  }

  /* Remove any top-margin on the first direct child of body if it already has one */
  body > nav + * {
    margin-top: 0 !important;
  }

  /* ── 5. OLD NAV-LOGO-IMG OVERRIDE ──────────────────────────────────
     .nav-logo-img was 87px — used in the old nav structure.
     The new desktop logo is #wos-desktop-logo-img.
     Ensure .nav-logo-img doesn't create a giant element if it
     somehow appears elsewhere.
  ────────────────────────────────────────────────────────────────── */
  .nav-logo-img {
    height: clamp(40px, 5vw, 56px) !important;
    width:  clamp(40px, 5vw, 56px) !important;
  }

  /* Hide mobile logo on desktop */
  #wos-mob-logo {
    display: none !important;
  }
}

/* ── DESKTOP LOGO: hidden on mobile (belt-and-suspenders) ── */
@media (max-width: 899px) {
  #wos-desktop-logo {
    display: none !important;
  }
  /* body padding-top reset — mobile uses wosSafeMobileHeader, no body offset needed */
  body {
    padding-top: 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   WOS STICKY NAV FIX — 2026-05-14
   Root cause: body { overflow-x: clip } breaks position:sticky
   on ALL descendants. Fix: override body to overflow-x:visible,
   keep overflow-x:hidden on html only (prevents horiz scroll).
   This rule MUST stay at the end of the cascade to win.
════════════════════════════════════════════════════════════════ */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: clip;  /* WOS v2 — html:hidden allows sticky to work */
}

/* ════════════════════════════════════════════════════════════════
   WOS READABILITY PASS — 2026-05-14
   Pure-white text on dark tiles & hero. Logo white ring.
   Scope: desktop only for hero; global for tile text.
   Do NOT remove — fixes blending on dark-bg sections.
════════════════════════════════════════════════════════════════ */

/* ── 1. HERO TEXT — pure white headline, full-opacity gold eyebrow ── */
#wos-hero-headline {
  color:       #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.85),
               0 1px 6px  rgba(0,0,0,0.65),
               0 0  40px  rgba(0,0,0,0.35) !important;
}
#wos-hero-eyebrow {
  color:       #D4A017 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.70) !important;
}

/* ── 2. DESKTOP LOGO — white border ring so it reads on crimson bar ── */
@media (min-width: 900px) {
  #wos-desktop-logo-img {
    border:      3px solid #ffffff !important;
    box-shadow:  0 0 0 1px rgba(255,255,255,0.25),
                 0 3px 14px rgba(0,0,0,0.50) !important;
  }
}

/* ── 3. DARK-TILE TEXT — boost muted whites to full white ── */
/* Any h2/h3/p/span on a dark-background section that uses rgba white with opacity */

/* Sections with explicit dark bg */
[style*="background:#1a0800"] h2,
[style*="background:#1a0800"] h3,
[style*="background:#1a0800"] p,
[style*="background:#1a0800"] span,
[style*="background:#2d1a00"] h2,
[style*="background:#2d1a00"] h3,
[style*="background:#2d1a00"] p,
[style*="background:#0d1a0d"] h2,
[style*="background:#0d1a0d"] h3,
[style*="background:#0d1a0d"] p,
[style*="background:#1a0d00"] h2,
[style*="background:#1a0d00"] h3,
[style*="background:#1a0d00"] p,
[style*="background:#1a001a"] h2,
[style*="background:#1a001a"] h3,
[style*="background:#1a001a"] p,
[style*="background:#0a1a00"] h2,
[style*="background:#0a1a00"] h3,
[style*="background:#0a1a00"] p,
[style*="background:linear-gradient(135deg,#2d0f00"] h2,
[style*="background:linear-gradient(135deg,#2d0f00"] h3,
[style*="background:linear-gradient(135deg,#2d0f00"] p,
[style*="background:linear-gradient(135deg,#0a1a00"] h2,
[style*="background:linear-gradient(135deg,#0a1a00"] h3,
[style*="background:linear-gradient(135deg,#0a1a00"] p,
[style*="background:linear-gradient(135deg,#1a001a"] h2,
[style*="background:linear-gradient(135deg,#1a001a"] h3,
[style*="background:linear-gradient(135deg,#1a001a"] p {
  color: #ffffff !important;
}

/* Three-path cards — headings and body text */
[style*="background:#2d1a00"] h3,
[style*="background:#0d1a0d"] h3,
[style*="background:#1a0d00"] h3 {
  color: #ffffff !important;
}

/* Muted rgba white subtext on dark sections → full white */
section[style*="background:#1a0800"] p[style*="rgba(255,255,255"],
section[style*="background:#1a0800"] span[style*="rgba(255,255,255"] {
  color: rgba(255,255,255,0.90) !important;
}

/* Creator/vendor tiles — bio text and labels */
[style*="background:linear-gradient(135deg"] p[style*="rgba(255,255,255,.6)"],
[style*="background:linear-gradient(135deg"] p[style*="rgba(255,255,255, .6)"] {
  color: rgba(255,255,255,0.92) !important;
}

/* Membership / newsletter — any .5 opacity white → .92 */
section[style*="background:#"] h2[style*="rgba(255,255,255,.5"],
section[style*="background:#"] h3[style*="rgba(255,255,255,.5"],
section[style*="background:#"] p[style*="rgba(255,255,255,.5"] {
  color: rgba(255,255,255,0.92) !important;
}


/* ═══════════════════════════════════════════════════════════════
   WOS BRIGHT PALETTE OVERRIDES — v2 2026-05-14
   Replaces all muddy dark-brown section backgrounds with a
   warm, bright, consistent spice-market color system.
   Color Logic:
     Section Light  → #FFF8F0  (warm white cream)
     Section Alt    → #FFF3E6  (soft peach)
     Section Accent → crimson/gold gradients (NOT mud brown)
     Section Dark   → #2C1810  (warm espresso, NOT pure black)
     Cards on dark  → white with warm borders
     Text on light  → #2C1810 (warm dark)
     Text on dark   → #FFFFFF / rgba(255,255,255,.85)
   ═══════════════════════════════════════════════════════════════ */

/* ── Navbar: warm espresso (not mud black) ── */
.navbar { background: #2C1810 !important; }
.navbar .navbar-inner { background: #2C1810 !important; }
.dropdown { background: #3D2010 !important; border-top: 2px solid #E8A020 !important; }
.dropdown a:hover { background: rgba(232,160,32,0.12) !important; }

/* ── Hero cinematic band: richer, not dead black ── */
.hero { background: linear-gradient(135deg, #9B2020 0%, #6B0E0E 55%, #2C1810 100%) !important; }
.hero-band, .site-hero { background: linear-gradient(160deg, #8B1A1A 0%, #5C0E0E 60%, #2C1810 100%) !important; }

/* ── Light sections: warm cream, not grey ── */
.section-cream, .bg-cream, .page-section-light { background: #FFF8F0 !important; }

/* ── Dark sections: warm espresso, not dead black ── */
.bg-dark, .section-dark, .bg-charcoal { background: #2C1810 !important; }

/* ── Product & recipe card image placeholder ── */
.product-card-img, .recipe-card-img, .recipe-img-wrap {
  background: linear-gradient(135deg, #FFF0D8 0%, #FFE4B5 100%) !important;
}

/* ── Product card: clean white with warm shadow ── */
.product-card {
  background: #FFFFFF !important;
  border: 1px solid #F0D8C0 !important;
  box-shadow: 0 2px 16px rgba(178,34,34,0.08) !important;
}
.product-card:hover {
  box-shadow: 0 8px 32px rgba(178,34,34,0.18) !important;
  border-color: #E8A020 !important;
}

/* ── Recipe cards ── */
.recipe-card {
  background: #FFFFFF !important;
  border: 1px solid #F0D8C0 !important;
  box-shadow: 0 2px 12px rgba(178,34,34,0.07) !important;
}
.recipe-card:hover {
  box-shadow: 0 6px 24px rgba(178,34,34,0.15) !important;
}

/* ── Cuisine tiles: use actual distinct bright colors ── */
.cuisine-tile, .cuisine-card { border-radius: 14px !important; }

/* ── "Every Cook Has a Path" section cards now white — fix text ── */
[style*="background:#FFFFFF"] h3,
[style*="background:#FFFFFF"] .path-title { color: #2C1810 !important; }
[style*="background:#FFFFFF"] p { color: #5A3A2A !important; }

/* ── Cook path section header on crimson bg ── */
[style*="background:linear-gradient(135deg,#C0392B"] h2 { color: #FFFFFF !important; }
[style*="background:linear-gradient(135deg,#C0392B"] p { color: rgba(255,255,255,0.88) !important; }

/* ── Flavor Finder CTA section: white text on crimson ── */
[style*="background:linear-gradient(135deg,#C0392B 0%,#A93226"] h2,
[style*="background:linear-gradient(135deg,#C0392B 0%,#A93226"] p { color: #FFFFFF !important; }

/* ── Membership dark section: legible text ── */
[style*="background:#2C1810"] h2 { color: #FFFFFF !important; }
[style*="background:#2C1810"] p  { color: rgba(255,255,255,0.82) !important; }

/* ── Creator/newsletter sections on crimson bg ── */
[style*="background:linear-gradient(135deg,#B22222"] h2,
[style*="background:linear-gradient(135deg,#B22222"] h3,
[style*="background:linear-gradient(135deg,#B22222"] p { color: #FFFFFF !important; }

/* ── Feature/education cards (flavor intelligence) ── */
.feature-card, .edu-card, .info-card {
  background: #FFFFFF !important;
  border: 1px solid #F0D8C0 !important;
  border-radius: 12px !important;
}
.feature-card:hover { border-color: #E8A020 !important; }

/* ── Spice Assistant box ── */
.spice-assistant-box, .assistant-wrap, #spiceAssistantBox {
  background: #FFFFFF !important;
  border: 2px solid #F0D8C0 !important;
  border-radius: 16px !important;
}

/* ── Section labels (eyebrow text) ── */
.section-label, .eyebrow-label, [style*="letter-spacing:.2em;color:#D4A017"] {
  color: #E8A020 !important;
}

/* ── Stars: gold, not amber ── */
.star-rating, .rating-stars { color: #F5B732 !important; }

/* ── Tags / badges ── */
.badge, .tag-pill {
  background: #FFF3E6 !important;
  color: #B22222 !important;
  border: 1px solid #F0C0A0 !important;
}

/* ── Buttons: consistent warm palette ── */
.btn-primary, .btn-crimson {
  background: #B22222 !important;
  color: #FFFFFF !important;
  border: none !important;
}
.btn-primary:hover, .btn-crimson:hover {
  background: #922B21 !important;
}
.btn-gold {
  background: linear-gradient(135deg,#E8A020 0%,#F5B732 100%) !important;
  color: #2C1810 !important;
}
.btn-gold:hover {
  background: linear-gradient(135deg,#D4901A 0%,#E8A020 100%) !important;
}
.btn-outline {
  background: transparent !important;
  border: 2px solid #B22222 !important;
  color: #B22222 !important;
}
.btn-outline:hover {
  background: #B22222 !important;
  color: #FFFFFF !important;
}

/* ── Add-to-Cart buttons ── */
.add-to-cart, .btn-cart, .btn-add {
  background: #B22222 !important;
  color: #FFFFFF !important;
}
.add-to-cart:hover, .btn-cart:hover { background: #922B21 !important; }

/* ── Footer: warm espresso ── */
.footer { background: #1A0800 !important; }
.footer a { color: rgba(255,248,240,0.72) !important; }
.footer a:hover { color: #E8A020 !important; }

/* ── Section dividers ── */
.impact-banner, .trust-bar {
  background: #FFF8F0 !important;
  border-top: 1px solid #F0D8C0 !important;
  border-bottom: 1px solid #F0D8C0 !important;
}

/* ── Mobile safe header: keep white ── */
#wosSafeMobileHeader {
  background: #FDFAF6 !important;
  border-bottom: 1px solid #E8D0B0 !important;
}

/* ── Membership/plan cards ── */
.plan-card, .membership-card {
  background: #FFFFFF !important;
  border: 1px solid #F0D8C0 !important;
}
.plan-card.featured, .plan-card.highlighted {
  border-color: #E8A020 !important;
  box-shadow: 0 0 0 2px rgba(232,160,32,0.25) !important;
}

/* ── Global body & text ── */
body { background: #FFFFFF !important; color: #2C1810 !important; }
h1,h2,h3,h4 { color: #2C1810; }
p, li, span:not([class*="badge"]):not([class*="tag"]) { color: inherit; }

/* END WOS BRIGHT PALETTE OVERRIDES */


/* ═══════════════════════════════════════════════════════════════
   WOS CONTAINMENT SYSTEM v2  |  appended 2026-05-14
   Scope: layout containment, overflow, responsive grids, images
   Does NOT touch: header, footer, nav, checkout logic, colors
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ROOT OVERFLOW LOCK ── */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body {
  overflow-x: clip;
  max-width: 100% !important;
}

/* ── 2. UNIVERSAL BOX MODEL ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── 3. SHARED CONTAINER TOKEN ── */
/* Use .wos-wrap on any section inner div for consistent centering */
.wos-wrap {
  width: 100%;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* Tighter wrap for text-heavy pages */
.wos-wrap-narrow {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* ── 4. INLINE max-width GUARD — cap all large fixed inner containers ── */
/* Any div that uses max-width:1100px–1280px inline stays within viewport */
[style*="max-width:1100px"],
[style*="max-width:1200px"],
[style*="max-width:1220px"],
[style*="max-width:1260px"],
[style*="max-width:1280px"] {
  width: 100% !important;
  padding-left: clamp(16px, 3vw, 48px) !important;
  padding-right: clamp(16px, 3vw, 48px) !important;
}

/* ── 5. IMAGE CONTAINMENT ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Images inside cards — cover without distortion */
.wos-product-card img,
.wos-recipe-card img,
.wos-card img,
.product-card img,
.recipe-card img,
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 6. SECTION INNER CONTAINER GUARDS ── */
/* Prevent any section from punching past the viewport */
section > div,
.section > div {
  max-width: 100%;
}

/* ── 7. RESPONSIVE PRODUCT GRID ── */
/* Desktop: 4 col | Tablet: 2-3 col | Mobile: 1-2 col */
.product-grid,
.wos-product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 45vw), 1fr)) !important;
  gap: clamp(12px, 2vw, 24px) !important;
  width: 100% !important;
}

/* ── 8. RESPONSIVE RECIPE GRID ── */
.recipe-grid,
.wos-recipe-grid,
.recipes-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 45vw), 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  width: 100% !important;
}

/* ── 9. RESPONSIVE CARD GRID (generic) ── */
.wos-grid,
.card-grid,
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 45vw), 1fr)) !important;
  gap: clamp(12px, 2vw, 24px) !important;
  width: 100% !important;
}

/* ── 10. FORM CONTAINMENT ── */
form,
.form-wrap,
.form-container,
.checkout-form,
.vendor-form {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

input, textarea, select, button {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 11. TABLE SAFE SCROLL ── */
table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap,
.admin-table-wrap,
.order-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 12. DASHBOARD LAYOUT GUARD ── */
.dashboard-layout {
  grid-template-columns: 240px 1fr;
}

/* ── 13. SECTION SPACING NORMALISATION ── */
/* Sections use section-specific padding, not global override */
/* Only fix giant gaps */
.section-gap-xl { padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(40px, 6vw, 80px) !important; }
.section-gap-lg { padding-top: clamp(32px, 5vw, 64px) !important; padding-bottom: clamp(32px, 5vw, 64px) !important; }

/* ── 14. HORIZONTAL SCROLL DEBUG GUARD ── */
/* Catches any child wider than viewport */
body > * {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ═══════════ TABLET BREAKPOINT — max-width: 1024px ═══════════ */
@media (max-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: 200px 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 24px !important;
  }

  [style*="max-width:1100px"],
  [style*="max-width:1200px"],
  [style*="max-width:1220px"],
  [style*="max-width:1260px"],
  [style*="max-width:1280px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ═══════════ MOBILE BREAKPOINT — max-width: 768px ═══════════ */
@media (max-width: 768px) {

  /* ── Dashboard: collapse sidebar ── */
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }
  /* member sidebar — already handled as fixed slide-in via .sidebar{left:-240px}
     No display:none needed — the existing system controls its visibility */

  /* ── Grids: force 1 column on mobile ── */
  .product-grid,
  .wos-product-grid,
  .recipe-grid,
  .wos-recipe-grid,
  .wos-grid,
  .card-grid,
  .feature-grid,
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── Very small product cards: 1 column ── */
  @media (max-width: 480px) {
    .product-grid,
    .wos-product-grid {
      grid-template-columns: 1fr !important;
    }
  }

  /* ── Inline max-width containers: full bleed with safe padding ── */
  [style*="max-width:1100px"],
  [style*="max-width:1200px"],
  [style*="max-width:1220px"],
  [style*="max-width:1260px"],
  [style*="max-width:1280px"],
  [style*="max-width:1000px"],
  [style*="max-width:900px"],
  [style*="max-width:820px"],
  [style*="max-width:800px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ── Two-column inline grids → single column ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Three-column inline grids → single column ── */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Checkout / cart two-column ── */
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Section section inner padding ── */
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section > div,
  section > .wos-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Cards: full width on mobile ── */
  .wos-card,
  .wos-product-card,
  .wos-recipe-card,
  .plan-card,
  .stat-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── Tables: safe horizontal scroll ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }

  /* ── Forms: full width ── */
  .checkout-form .form-row,
  .vendor-form .form-row {
    grid-template-columns: 1fr !important;
  }

  /* ── Images: always constrained ── */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Membership/plans grid → stack ── */
  .plans-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Footer grid → 2 columns on mobile ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ═══════════ SMALL MOBILE — max-width: 480px ═══════════ */
@media (max-width: 480px) {

  .product-grid,
  .wos-product-grid {
    grid-template-columns: 1fr !important;
  }

  .wos-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Testimonial cards: single column */
  .testimonial-grid,
  .review-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Prevent text overflow */
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; }

  /* Section padding tighter */
  section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* END WOS CONTAINMENT SYSTEM v2 */


/* ═══════════════════════════════════════════════════════
   WOS CONTAINMENT PATCH v2.1  |  2026-05-14
   Targeted fixes for specific components
   ═══════════════════════════════════════════════════════ */

/* ── Checkout 2-column layout → stack on mobile ── */
.checkout-layout {
  width: 100%;
}

@media (max-width: 768px) {
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Cart table → safe scroll */
  .cart-table-wrap,
  .cart-items {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Form two-column rows → stack */
  .form-row,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Inline minmax grids that don't use min() — safe fallback ── */
/* minmax(200px,1fr) on a 375px screen = ~1 col due to auto-fill — OK */
/* minmax(145px,1fr) on a 375px screen = ~2 cols — OK */
/* No override needed; auto-fill handles collapse naturally */

/* ── Global img safe defaults (lowest specificity, no !important) ── */
img:not([style*="width"]):not([style*="height"]) {
  max-width: 100%;
}

/* ── Section containers: ensure padding on all viewports ── */
.section-inner,
.page-content,
.page-wrap {
  width: 100%;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* ── Testimonial cards: even height on desktop ── */
@media (min-width: 769px) {
  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
  .testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

/* ── Stats cards: min-width guard ── */
.stat-card,
.stats-card {
  min-width: 0;
  overflow: hidden;
}

/* ── Vendor apply / creator form ── */
.vendor-form,
.creator-form {
  width: 100%;
  max-width: 100%;
}

/* END WOS CONTAINMENT PATCH v2.1 */


/* ═══════════════════════════════════════════════════════════════
   WOS STICKY FIX v1 — appended 2026-05
   ROOT CAUSE: body{overflow-x: clip} breaks position:sticky.
   FIX: Move overflow-x:hidden to html only, restore body to visible.
   This block must remain at the BOTTOM of main.css to win specificity.
   ═══════════════════════════════════════════════════════════════ */

/* Step 1: html takes the overflow guard (horizontal scroll prevention) */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Step 2: body must NOT have overflow-x:hidden — restores sticky behavior */
body {
  overflow-x: clip !important;       /* no horizontal scroll — clip is safe for sticky */
  overflow-y: visible !important;    /* MUST be visible — auto/hidden kills sticky nav */
  max-width: 100vw !important;
  position: static !important;       /* never relative/absolute on body */
}

/* Step 3: #siteNav reinforced sticky — max specificity */
html body nav#siteNav {
  position:   sticky !important;
  top:        0 !important;
  z-index:    9000 !important;
  width:      100% !important;
  background: #6B0000 !important;
}

/* Step 4: Prevent any child from creating a new scroll context that kills sticky */
#wos-hero-band {
  overflow: hidden !important;      /* image crop — ok, not a scroll container */
  position: relative !important;    /* normal flow */
}

/* Step 5: On mobile, #siteNav is hidden by wos-safe-nav-css — preserve that */
@media (max-width: 899px) {
  html body nav#siteNav {
    display: none !important;
  }
}


/* WOS STICKY-CLIP OVERRIDE v1 */
/* ═══════════════════════════════════════════════════════════════
   STICKY-AFTER-HERO FIX — appended bottom of main.css
   ───────────────────────────────────────────────────────────────
   Overrides all earlier body/html overflow:hidden rules.
   overflow-x:clip = prevents horizontal scroll but does NOT
   create a scroll container, keeping position:sticky alive.
   This must stay at the bottom to win cascade.
   ═══════════════════════════════════════════════════════════════ */

/* Force clip (not hidden) — max specificity, last-in-cascade */
html,
html body {
  overflow-x: clip !important;
  max-width:  100vw !important;
}

/* Body must not be a positioned scroll container */
html body {
  overflow-y:  visible  !important;  /* MUST be visible — auto/hidden kills sticky nav */
  position:    static   !important;  /* never relative/absolute */
  padding-top: 0        !important;  /* no offset — hero at top */
}

/* #siteNav sticky — final reinforcement */
html body nav#siteNav {
  position:  sticky !important;
  top:       0      !important;
  z-index:   9000   !important;
}

/* Mobile: safe nav handles itself — desktop nav hidden */
@media (max-width: 899px) {
  html body nav#siteNav {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   WOS FIXED NAV — FINAL DEFINITIVE FIX v2
   ───────────────────────────────────────────────────────────────
   position:sticky is broken by any ancestor overflow:hidden/auto.
   position:fixed is immune to ALL ancestor overflow rules.
   The hero band gets padding-top equal to nav height so content
   starts below the nav. Hero image still fills from page top.
   ═══════════════════════════════════════════════════════════════ */

/* Fixed nav — always at top of viewport, desktop only */
@media (min-width: 900px) {
  html body nav#siteNav {
    position: fixed   !important;
    top:      0       !important;
    left:     0       !important;
    right:    0       !important;
    width:    100%    !important;
    z-index:  9500    !important;
  }

  /* Push hero down by nav height so it starts below nav */
  #wos-hero-band {
    padding-top: 56px !important;
    box-sizing:  border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   WOS SEARCH BOX SIZING — scoped to search components only
   Appended 2026-05-17. DO NOT apply globally.
   ══════════════════════════════════════════════════════════════ */

/* ── Shared base: all named search inputs ──────────────────── */
#wacInput,
#fsaInput,
#ffFastInput,
.fsa-input,
.wos-search-field {
  box-sizing: border-box !important;
  max-width:  100%       !important;
  min-width:  0          !important;
}

/* ── Fix invisible text in homepage WAC input ──────────────── */
#wacInput {
  color: #3a1a00 !important;
}
#wacInput::placeholder {
  color: #9a6a50 !important;
  font-size: .82rem !important;
  opacity: 1 !important;
}

/* ── Shop search wrapper ────────────────────────────────────── */
.wos-shop-search-wrap {
  max-width:  560px      !important;
  width:      100%       !important;
  box-sizing: border-box !important;
  flex:       1          !important;
  min-width:  0          !important;
}
.wos-shop-search-wrap input[type="text"] {
  width:      100%       !important;
  box-sizing: border-box !important;
}

/* ── Recipes search form ───────────────────────────────────── */
.wos-recipes-search {
  max-width:  460px      !important;
  width:      100%       !important;
  margin:     0 auto     !important;
  box-sizing: border-box !important;
}
.wos-recipes-search input {
  width:      100%       !important;
  box-sizing: border-box !important;
}

/* ── Flavor Finder fast-search ─────────────────────────────── */
#ffFastInput {
  flex:       1          !important;
  min-width:  0          !important;
  box-sizing: border-box !important;
}

/* ── Spice Assistant row (Flavor Finder page) ──────────────── */
.fsa-input-row {
  max-width:  540px      !important;
  width:      100%       !important;
  margin:     0 auto     !important;
  box-sizing: border-box !important;
  display:    flex       !important;
}
.fsa-input {
  flex:       1          !important;
  min-width:  0          !important;
  box-sizing: border-box !important;
}

/* ── Mobile: all search inputs stay inside viewport ────────── */
@media (max-width: 900px) {
  #wacInput,
  #fsaInput,
  #ffFastInput,
  .fsa-input,
  .wos-search-field,
  .wos-shop-search-wrap,
  .wos-recipes-search {
    width:      100%                 !important;
    max-width:  calc(100vw - 32px)   !important;
    box-sizing: border-box           !important;
  }
  /* WAC container stays clipped */
  #wacSection,
  #wacSection > div {
    max-width:  100%   !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Shop search doesn't squeeze the sort dropdown */
  .wos-shop-search-wrap {
    flex:      1       !important;
    min-width: 120px   !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   WOS BRAND + GLOBAL + VISIBILITY PATCH — 2026-05-17
   PARTS 1-4: AI→WOS language, mobile sticky, contrast, global brand
   Appended additively — zero rules removed from above.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PART 2: Mobile sticky nav CONFIRMATION ─────────────────────────
   #wosSafeMobileHeader is already sticky per wos-safe-nav-css block.
   Desktop #siteNav is fixed via the WOS FIXED NAV block.
   This block simply reinforces the correct behavior explicitly.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Mobile header stays pinned — no content overlap */
  #wosSafeMobileHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 90000 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Prevent body top padding from creating a gap above sticky header */
  body {
    padding-top: 0 !important;
  }
  /* First content element after header should not hide behind it */
  body > *:not(#wosSafeMobileHeader):first-of-type {
    margin-top: 0;
  }
}
@media (min-width: 900px) {
  /* Desktop: preserve existing fixed nav — do not change */
  #wosSafeMobileHeader {
    display: none !important;
  }
}

/* ── PART 3: GLOBAL TEXT CONTRAST FIXES ─────────────────────────────
   Scoped to specific component classes. No global resets.
   ──────────────────────────────────────────────────────────────── */

/* Light-background sections → dark text */
.section,
.section-light,
.wos-section-white,
section[style*="background:#fff"],
section[style*="background: #fff"],
section[style*="background:white"],
section[style*="background: white"],
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:white"],
div[style*="background: white"],
.wos-recipe-card-body,
.wos-recipe-card-title,
.wos-recipe-card-flavor,
.wos-recipe-card-cuisine,
.wos-ing-item,
.edu-card,
.edu-spice-name,
.edu-spice-role,
.wos-step-action,
.cust-item,
.product-card-body,
.product-card-body h3,
.product-card-body p,
.product-card-body .price,
.product-category,
.card-body,
.card-title {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Cream/beige section headings */
.section h1,
.section h2,
.section h3,
.section h4,
.section p {
  color: var(--charcoal, #2c1a0e);
}

/* Star ratings — always visible warm gold */
.rating-stars,
.star-rating,
.stars,
.wos-stars,
[class*="rating"] span,
[class*="stars"] span {
  color: #D4A017 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.rating-count,
.review-count,
.rating-text {
  color: var(--text-muted, #6b4e2e) !important;
  opacity: 1 !important;
}

/* Dark-background sections → light text */
.wos-flavor-intro,
.wos-ai-hero-content,
.recipe-hero-content,
div[style*="background:linear-gradient(135deg,#2c1a0e"],
div[style*="background:linear-gradient(135deg,#1a0800"],
div[style*="background: linear-gradient(135deg, #2c1a0e"],
div[style*="background: linear-gradient(135deg, #1a0800"],
.wos-ai-hero-overlay,
.hero-dark,
.section-dark {
  color: #fff !important;
}
.wos-flavor-intro *,
.section-dark *,
.hero-dark * {
  color: rgba(255,255,255,.88) !important;
}

/* Product page — ensure description, meta, tabs readable */
.product-description,
.product-meta,
.tab-content,
.product-ingredients,
.product-details {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Badges on dark overlays — keep white */
.product-badge,
.recipe-badge,
span.badge {
  color: #fff !important;
}
.product-badge.featured,
span[style*="background:var(--gold)"],
span[style*="background: var(--gold)"] {
  color: #1a0800 !important;
}

/* Card hover states don't lose text */
.product-card:hover .product-card-body,
.wos-recipe-card:hover .wos-recipe-card-body {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Mobile nav drawer items — always dark on white bg */
.wos-safe-nav-link {
  color: #2c1a0e !important;
}
.wos-safe-nav-link.wos-safe-gold {
  color: #8B4513 !important;
}

/* Footer — always light text on dark bg */
footer,
.wos-footer,
#wos-footer,
.site-footer {
  color: rgba(255,255,255,.82) !important;
}
footer a,
.wos-footer a {
  color: rgba(255,255,255,.7) !important;
}
footer a:hover,
.wos-footer a:hover {
  color: #D4A017 !important;
}

/* Announcement bar — always legible */
.announcement-bar,
#announcementBar {
  color: #fff !important;
}

/* Flavor Finder quiz cards on cream */
.ff-option-card,
.ff-chip,
.quiz-option {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Member dashboard — stats/cards on white */
.stat-card,
.dash-card,
.member-card {
  color: var(--charcoal, #2c1a0e) !important;
}
.stat-card .stat-number,
.stat-card .stat-label {
  color: var(--charcoal, #2c1a0e) !important;
}

/* AI result zone (recipe system) — light bg text */
.wos-ai-body,
.wos-ai-main,
.ai-recipe-card .ai-recipe-body {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Spice sidebar cards — always readable */
.wos-spice-product,
.spice-card {
  color: var(--charcoal, #2c1a0e) !important;
}

/* Input placeholder contrast */
input::placeholder,
textarea::placeholder {
  opacity: 0.65 !important;
}

/* ── PART 4: GLOBAL BRAND — "AI" → "WOS" VISUAL LABELS ──────────────
   We can't rename JS variables, but we can override the visible
   badge text that says "AI" using CSS content replacement for
   the specific badge element rendered in recipes/index.php JS.
   ──────────────────────────────────────────────────────────────── */

/* The AI-Crafted badge span rendered by JS in ai-recipe-zone uses
   inline text. CSS can't change JS-rendered text, so we rely on
   the PHP/JS changes below. This block styles the WOS badge. */
.wos-guided-badge {
  display: inline-block;
  background: var(--gold, #D4A017);
  color: #1a0800 !important;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ── PART 4: GLOBAL IDENTITY — Discovery section widths mobile ───── */
@media (max-width: 899px) {
  .wos-discovery-row {
    gap: 7px !important;
  }
  .wos-discovery-btn {
    font-size: .75rem !important;
    padding: 7px 12px !important;
  }
  /* Recipe hero headline fits mobile */
  .wos-recipe-hero h1 {
    font-size: 1.55rem !important;
  }
  .wos-recipe-hero p {
    font-size: .88rem !important;
  }
  /* AI result body stacks on mobile */
  .wos-ai-body {
    grid-template-columns: 1fr !important;
  }
  .wos-ai-sidebar {
    position: static !important;
  }
  /* Step layout tighter on mobile */
  .wos-step,
  .step-row {
    gap: 12px !important;
  }
  /* Custom grid single column on mobile */
  .wos-custom-grid,
  .cust-grid {
    grid-template-columns: 1fr !important;
  }
}

/* END WOS BRAND + GLOBAL + VISIBILITY PATCH — 2026-05-17 */


/* ═══════════════════════════════════════════════════════════════════════
   WOS MOBILE HEADER — DEFINITIVE FIXED NAV v1 — 2026-05-17
   ═══════════════════════════════════════════════════════════════════════
   ROOT CAUSE: position:sticky is broken by overflow:hidden on any ancestor.
   FIX: Switch #wosSafeMobileHeader to position:fixed on mobile only.
        Add a 60px body padding-top offset to compensate for fixed header.
   SCOPE: max-width 899px only. Desktop (#siteNav) completely untouched.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {

  /* 1. FORCE FIXED — immune to all overflow ancestors */
  html body #wosSafeMobileHeader {
    position:   fixed  !important;
    top:        0      !important;
    left:       0      !important;
    right:      0      !important;
    width:      100%   !important;
    height:     60px   !important;
    z-index:    90000  !important;

    /* Premium white bar */
    background: #ffffff !important;
    border-bottom: 1px solid rgba(107,0,0,0.10) !important;
    box-shadow: 0 1px 0 rgba(107,0,0,0.06), 0 2px 12px rgba(0,0,0,0.08) !important;

    /* Three-column flex: hamburger | logo | actions */
    display:         flex   !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         0 14px !important;
    box-sizing:      border-box !important;
    overflow:        visible !important;

    /* Crisp text */
    -webkit-font-smoothing: antialiased !important;
  }

  /* 2. BODY OFFSET — pushes ALL page content below the fixed header */
  html body {
    padding-top: 60px !important;
  }

  /* 3. SCROLL-LOCK FIX — when drawer open, body position:fixed breaks padding */
  html body.wos-safe-nav-open {
    overflow:    hidden   !important;
    position:    fixed    !important;
    width:       100%     !important;
    top:         0        !important;
    padding-top: 0        !important;  /* remove padding when locked */
  }

  /* 4. HAMBURGER — left side, 48px tap target */
  html body #wosSafeMenuButton {
    display:          flex          !important;
    flex-direction:   column        !important;
    justify-content:  center        !important;
    align-items:      center        !important;
    gap:              5px           !important;
    width:            48px          !important;
    height:           48px          !important;
    min-width:        48px          !important;
    background:       none          !important;
    border:           none          !important;
    cursor:           pointer       !important;
    padding:          12px 10px     !important;
    flex-shrink:      0             !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html body .wos-safe-bar {
    display:      block       !important;
    width:        22px        !important;
    height:       2px         !important;
    background:   #6B0000     !important;
    border-radius:2px         !important;
    transition:   transform 0.25s ease, opacity 0.2s ease !important;
  }

  /* 5. LOGO — centered, circular, premium */
  html body #wosSafeLogoLink {
    display:         flex    !important;
    align-items:     center  !important;
    justify-content: center  !important;
    flex:            1       !important;
    min-width:       0       !important;
    text-decoration: none    !important;
    padding:         0 8px   !important;
    overflow:        visible !important;
  }
  html body #wosSafeLogoImg {
    display:         block        !important;
    width:           54px         !important;
    height:          54px         !important;
    border-radius:   50%          !important;
    object-fit:      cover        !important;
    background:      #ffffff      !important;
    padding:         3px          !important;
    box-sizing:      border-box   !important;
    box-shadow:
      0 0  0 1.5px rgba(107,0,0,0.12),
      0 4px 14px   rgba(0,0,0,0.14) !important;
    image-rendering: -webkit-optimize-contrast !important;
    /* Protrudes slightly below the 60px bar for premium feel */
    margin-top:      4px          !important;
  }

  /* 6. RIGHT ACTIONS */
  html body .wos-safe-actions {
    display:     flex  !important;
    align-items: center!important;
    gap:         4px   !important;
    flex-shrink: 0     !important;
  }
  html body .wos-safe-action-btn {
    display:         flex    !important;
    align-items:     center  !important;
    justify-content: center  !important;
    width:           44px    !important;
    height:          44px    !important;
    min-width:       44px    !important;
    text-decoration: none    !important;
    color:           #6B0000 !important;
    font-size:       1.15rem !important;
    border-radius:   8px     !important;
    position:        relative!important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html body .wos-safe-cart-badge {
    position:    absolute !important;
    top:         6px      !important;
    right:       6px      !important;
    background:  #D4A017  !important;
    color:       #1a0800  !important;
    font-size:   0.55rem  !important;
    font-weight: 800      !important;
    border-radius:50%     !important;
    width:       15px     !important;
    height:      15px     !important;
    display:     flex     !important;
    align-items: center   !important;
    justify-content:center!important;
  }

  /* 7. FIRST PAGE CONTENT after header — no double gap from hero */
  /* The homepage confidence section, shop grid, recipes hero, etc */
  /* Use targeted page-specific resets where needed */
  .wos-page-content-start {
    padding-top: 0 !important;
    margin-top:  0 !important;
  }

  /* 8. HERO sections on sub-pages — no gap above */
  .wos-recipe-hero,
  .wos-shop-hero,
  .wos-flavor-hero,
  .page-hero,
  .hero-section {
    margin-top: 0 !important;
  }

  /* 9. BOTTOM NAV already at 60px height — keep body padding bottom */
  html body {
    padding-bottom: 64px !important;
  }

  /* 10. DRAWER stays fixed, full height */
  html body #wosSafeMobileDrawer {
    top: 0 !important;
  }

  /* 11. OVERLAY covers everything inc header */
  html body #wosSafeMobileOverlay {
    top: 0 !important;
  }

}

/* ── MOBILE BOTTOM NAV UPGRADE — match reference image ──────────────── */
@media (max-width: 899px) {

  #wos-mob-bottom-nav {
    display:          flex         !important;
    position:         fixed        !important;
    bottom:           0            !important;
    left:             0            !important;
    right:            0            !important;
    z-index:          9500         !important;
    background:       #ffffff      !important;
    border-top:       1px solid rgba(107,0,0,0.10) !important;
    box-shadow:       0 -2px 12px rgba(0,0,0,0.08) !important;
    height:           60px         !important;
    padding:          0            !important;
    /* iOS safe area */
    padding-bottom:   env(safe-area-inset-bottom, 0) !important;
  }

  .wos-mob-nav-item {
    flex:            1             !important;
    display:         flex          !important;
    flex-direction:  column        !important;
    align-items:     center        !important;
    justify-content: center        !important;
    gap:             3px           !important;
    text-decoration: none          !important;
    color:           rgba(107,0,0,0.45) !important;
    font-size:       0.56rem       !important;
    font-weight:     600           !important;
    text-transform:  uppercase     !important;
    letter-spacing:  0.06em        !important;
    padding:         6px 4px       !important;
    transition:      color .15s, background .15s !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .wos-mob-nav-item i {
    font-size: 1.15rem !important;
    line-height: 1     !important;
  }
  .wos-mob-nav-item.wos-mob-gold {
    color:  #D4A017  !important;
  }
  .wos-mob-nav-item.active,
  .wos-mob-nav-item:focus {
    color:  #6B0000  !important;
  }
  .wos-mob-nav-item.active i {
    color:  #6B0000  !important;
  }

  /* Gold center Finder item pill */
  .wos-mob-nav-item.wos-mob-gold i {
    color: #D4A017 !important;
  }
}

/* ── DESKTOP: never show mobile header, never show bottom nav ── */
@media (min-width: 900px) {
  #wosSafeMobileHeader { display: none !important; }
  #wosSafeMobileOverlay{ display: none !important; }
  #wosSafeMobileDrawer  { display: none !important; }
  #wos-mob-bottom-nav  { display: none !important; }
  html body { padding-top: 0 !important; }
}

/* END WOS MOBILE HEADER DEFINITIVE FIXED NAV v1 — 2026-05-17 */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE FINAL AUTHORITY — v2 — 2026-05-18
   THIS BLOCK IS LAST IN THE FILE. It overrides ALL previous mobile
   header patches. DO NOT add any mobile header CSS below this block.
   ══════════════════════════════════════════════════════════════════ */

/* ── Desktop: hide all mobile-only elements ── */
@media (min-width: 900px) {
  #wosSafeMobileHeader  { display: none !important; }
  #wosSafeMobileOverlay { display: none !important; }
  #wosSafeMobileDrawer  { display: none !important; }
  #wos-mob-bottom-nav   { display: none !important; }
  html body { padding-top: 0 !important; }
}

/* ── Mobile: DEFINITIVE sticky header ── */
@media (max-width: 899px) {

  /* 1. No horizontal overflow — period */
  html, body {
    overflow-x: clip;
    max-width: 100vw !important;
  }

  /* 2. Fixed header — immune to overflow:hidden ancestors */
  html body #wosSafeMobileHeader {
    position:    fixed !important;
    top:         0     !important;
    left:        0     !important;
    right:       0     !important;
    width:       100%  !important;
    height:      60px  !important;
    z-index:     90000 !important;
    background:  #ffffff !important;
    border-bottom: 1px solid rgba(107,0,0,.10) !important;
    box-shadow:  0 2px 10px rgba(0,0,0,.09) !important;
    display:     flex  !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding:     0 12px !important;
    box-sizing:  border-box !important;
    overflow:    visible !important;
    transform:   none !important;   /* prevent GPU layer issues */
    will-change: auto !important;   /* prevent will-change breaking stacking */
  }

  /* 3. Body offset */
  html body { padding-top: 60px !important; }

  /* 4. Body scroll-lock state (drawer open) */
  html body.wos-safe-nav-open {
    overflow:    hidden   !important;
    position:    fixed    !important;
    width:       100%     !important;
    top:         0        !important;
    padding-top: 0        !important;
  }

  /* 5. Bottom padding for fixed bottom nav */
  html body { padding-bottom: 62px !important; }

  /* 6. Hero band: hidden on mobile (we use wos-mob-hero instead) */
  #wos-hero-band { display: none !important; }

  /* 7. Desktop siteNav: hidden on mobile */
  #siteNav { display: none !important; }

  /* 8. Every section/div: no overflow-x */
  section, div, article, aside, main {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* END WOS MOBILE FINAL AUTHORITY v2 — 2026-05-18 */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE PRECISION FIX v3 — 2026-05-18
   Fixes: hero content overflow, subtitle size, region circles,
          feature card height, even spacing throughout
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* ── HERO: fix content overflow ── */
  .wos-mob-hero {
    min-height: 200px !important;
    max-height: 230px !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  .wos-mob-hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: 58% !important;
    flex-shrink: 0 !important;
    padding: 12px 0 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;   /* center vertically */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .wos-mob-hero-tag {
    font-size: .5rem !important;
    padding: 2px 7px !important;
    margin-bottom: 5px !important;
    display: inline-block !important;
    width: fit-content !important;
    max-width: 140px !important;
  }
  .wos-mob-hero-h1 {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
    margin: 0 0 5px !important;
  }
  .wos-mob-hero-sub {
    font-size: .65rem !important;
    line-height: 1.4 !important;
    margin: 0 0 10px !important;
    max-width: 150px !important;
    width: 150px !important;         /* force width — max-width wasn't applying */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .wos-mob-hero-ctas {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  .wos-mob-hero-cta-gold,
  .wos-mob-hero-cta-ghost {
    padding: 7px 10px !important;
    font-size: .62rem !important;
    border-radius: 18px !important;
    white-space: nowrap !important;
  }

  /* ── HERO RIGHT IMAGE ── */
  .wos-mob-hero-img-wrap {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 48% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .wos-mob-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .wos-mob-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,
      rgba(26,8,0,1) 0%,
      rgba(26,8,0,.88) 38%,
      rgba(26,8,0,.5) 58%,
      rgba(26,8,0,0) 100%
    ) !important;
  }

  /* ── SEARCH BAR ── */
  .wos-mob-search-bar {
    padding: 8px 12px !important;
  }
  .wos-mob-search-inner {
    height: 38px !important;
    border-radius: 20px !important;
  }

  /* ── DISCOVER SECTION ── */
  .wos-mob-discover {
    padding: 12px 0 4px !important;
  }
  .wos-mob-section-head {
    padding: 0 12px 6px !important;
  }
  .wos-mob-region-scroll {
    padding: 0 12px 8px !important;
    gap: 0 !important;
    justify-content: space-between !important;
    /* prevent overflow */
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
  }
  .wos-mob-region-item {
    width: calc(100% / 7) !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
  }
  .wos-mob-region-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.12) !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .wos-mob-region-circle img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .wos-mob-region-label {
    font-size: .52rem !important;
    text-align: center !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  /* ── WELCOME BANNER ── */
  .wos-mob-welcome {
    margin: 6px 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .wos-mob-welcome-emoji { font-size: 1.6rem !important; }
  .wos-mob-welcome-text h3 { font-size: .8rem !important; margin-bottom: 2px !important; }
  .wos-mob-welcome-text p  { font-size: .64rem !important; }

  /* ── FEATURE CARDS: 3 equal columns, tight ── */
  .wos-mob-features {
    padding: 8px 12px 4px !important;
  }
  .wos-mob-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wos-mob-feat-card {
    padding: 10px 8px 8px !important;
    border-radius: 10px !important;
    min-height: 120px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .wos-mob-feat-icon  { font-size: 1.15rem !important; }
  .wos-mob-feat-title { font-size: .68rem !important; }
  .wos-mob-feat-desc  { font-size: .56rem !important; -webkit-line-clamp: 3 !important; }
  .wos-mob-feat-cta   { font-size: .56rem !important; }

  /* ── PRODUCT STRIP ── */
  .wos-mob-products {
    padding: 10px 0 6px !important;
    margin-top: 2px !important;
  }
  .wos-mob-product-scroll {
    gap: 8px !important;
    padding: 2px 12px 6px !important;
  }
  .wos-mob-prod-card {
    width: 95px !important;
  }
  .wos-mob-prod-img-wrap {
    height: 82px !important;
  }
  .wos-mob-prod-body  { padding: 6px 6px 7px !important; }
  .wos-mob-prod-name  { font-size: .58rem !important; }
  .wos-mob-prod-price { font-size: .65rem !important; }
  .wos-mob-prod-add   { width: 18px !important; height: 18px !important; font-size: .75rem !important; }

  /* ── SUB BANNER ── */
  .wos-mob-sub-banner {
    margin: 6px 12px 0 !important;
    padding: 16px 12px !important;
    border-radius: 12px !important;
  }
  .wos-mob-sub-banner-text h3 { font-size: .85rem !important; }
  .wos-mob-sub-banner-text p  { font-size: .65rem !important; margin-bottom: 10px !important; }
  .wos-mob-sub-banner-cta     { padding: 8px 16px !important; font-size: .7rem !important; }
  .wos-mob-sub-logo {
    position: absolute !important;
    right: 12px !important; bottom: 12px !important;
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important; object-fit: cover !important;
    opacity: .85 !important;
  }

  .wos-mob-spacer { height: 8px !important; }

}
/* END WOS MOBILE PRECISION FIX v3 */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE ATOMIC FIX v4 — 2026-05-18
   Fixes: section-head giant height, hero CTAs cut off,
          p/div inherited padding bloating containers
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* ── NUCLEAR RESET on all mobile-block paragraphs/divs ──
     Inherited global p{margin/padding} is blowing up the section heads */
  .wos-mobile-only p,
  .wos-mobile-only div,
  .wos-mobile-only span,
  .wos-mobile-only a {
    box-sizing: border-box !important;
  }
  /* Reset paragraph margins inside section head */
  .wos-mob-section-head p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
  }
  /* Fix section head: row, center-aligned, max natural height */
  .wos-mob-section-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;   /* center align — NOT flex-start */
    justify-content: space-between !important;
    padding: 0 12px 6px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 50px !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Inner title div — no stretch */
  .wos-mob-section-head > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    flex: 1 !important;
    height: auto !important;
    max-height: 40px !important;
    overflow: hidden !important;
  }
  .wos-mob-section-title {
    font-size: .88rem !important;
    font-weight: 700 !important;
    color: #2c1a0e !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wos-mob-section-sub {
    font-size: .62rem !important;
    color: #9b6a2f !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wos-mob-view-all {
    font-size: .68rem !important;
    font-weight: 700 !important;
    color: #D4A017 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding-left: 8px !important;
    line-height: 1 !important;
    align-self: center !important;
  }

  /* ── HERO: taller to fit all content ── */
  .wos-mob-hero {
    min-height: 240px !important;
    max-height: 270px !important;
  }
  .wos-mob-hero-content {
    justify-content: flex-end !important;  /* push to bottom */
    padding-bottom: 14px !important;
    padding-top: 14px !important;
  }
  /* Clamp subtitle tighter */
  .wos-mob-hero-sub {
    width: 148px !important;
    max-width: 148px !important;
    -webkit-line-clamp: 2 !important;
    font-size: .62rem !important;
    margin-bottom: 8px !important;
  }
  .wos-mob-hero-ctas {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .wos-mob-hero-cta-gold,
  .wos-mob-hero-cta-ghost {
    padding: 7px 11px !important;
    font-size: .6rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── REGION CIRCLES: ensure visible ── */
  .wos-mob-region-scroll {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 4px 12px 8px !important;
    overflow-x: hidden !important;
    gap: 0 !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 70px !important;
  }
  .wos-mob-region-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  .wos-mob-region-circle {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #f5e8d0 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.12) !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
  }
  .wos-mob-region-circle img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .wos-mob-region-label {
    display: block !important;
    font-size: .5rem !important;
    font-weight: 600 !important;
    color: #2c1a0e !important;
    text-align: center !important;
    line-height: 1.2 !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── DISCOVER SECTION spacing ── */
  .wos-mob-discover {
    padding: 10px 0 4px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  /* ── FEATURE CARDS: reset any inherited padding on p ── */
  .wos-mob-feat-card p, .wos-mob-feat-card span {
    margin: 0 !important; padding: 0 !important;
  }

  /* ── WELCOME: reset p margins ── */
  .wos-mob-welcome p, .wos-mob-welcome h3 {
    margin: 0 !important; padding: 0 !important;
    line-height: 1.4 !important;
  }
  .wos-mob-welcome-text h3 { margin-bottom: 2px !important; }

  /* ── PRODUCTS: reset p margins ── */
  .wos-mob-prod-name { margin: 0 0 4px !important; }
  .wos-mob-prod-heat { margin: 0 0 2px !important; }

}
/* END WOS MOBILE ATOMIC FIX v4 */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE NUCLEAR PADDING FIX v5 — 2026-05-18
   ROOT CAUSE: Global 'section p { padding: 80px 0 }' rule applying
   to mobile block paragraphs. Must use ultra-specific selectors.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* NUCLEAR: kill all inherited padding/margin on every element
     inside .wos-mobile-only — maximum specificity */
  html body .wos-mobile-only p,
  html body .wos-mobile-only h1,
  html body .wos-mobile-only h2,
  html body .wos-mobile-only h3,
  html body .wos-mobile-only h4,
  html body .wos-mobile-only span,
  html body .wos-mobile-only div {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
    box-sizing:     border-box !important;
    max-width:      100% !important;
  }

  /* Restore specific padding only where needed */
  html body .wos-mobile-only .wos-mob-hero-content {
    padding: 12px 0 14px 14px !important;
  }
  html body .wos-mobile-only .wos-mob-hero-sub {
    margin-bottom: 8px !important;
  }
  html body .wos-mobile-only .wos-mob-hero-tag {
    margin-bottom: 6px !important;
    display: inline-block !important;
    width: fit-content !important;
  }
  html body .wos-mobile-only .wos-mob-hero-h1 {
    margin-bottom: 5px !important;
  }

  html body .wos-mobile-only .wos-mob-search-bar {
    padding: 8px 12px !important;
  }
  html body .wos-mobile-only .wos-mob-section-head {
    padding: 0 12px 6px !important;
  }
  html body .wos-mobile-only .wos-mob-region-scroll {
    padding: 4px 12px 8px !important;
  }
  html body .wos-mobile-only .wos-mob-welcome {
    padding: 10px 12px !important;
    margin: 6px 12px !important;
  }
  html body .wos-mobile-only .wos-mob-welcome-text h3 {
    margin-bottom: 2px !important;
  }
  html body .wos-mobile-only .wos-mob-features {
    padding: 8px 12px 4px !important;
  }
  html body .wos-mobile-only .wos-mob-feat-card {
    padding: 10px 8px 8px !important;
  }
  html body .wos-mobile-only .wos-mob-feat-title {
    margin-bottom: 2px !important;
  }
  html body .wos-mobile-only .wos-mob-feat-desc {
    margin-bottom: 2px !important;
  }
  html body .wos-mobile-only .wos-mob-products {
    padding: 10px 0 6px !important;
  }
  html body .wos-mobile-only .wos-mob-product-scroll {
    padding: 2px 12px 6px !important;
  }
  html body .wos-mobile-only .wos-mob-prod-body {
    padding: 6px 6px 7px !important;
  }
  html body .wos-mobile-only .wos-mob-prod-name {
    margin-bottom: 4px !important;
  }
  html body .wos-mobile-only .wos-mob-sub-banner {
    padding: 16px 12px !important;
    margin: 6px 12px 0 !important;
  }
  html body .wos-mobile-only .wos-mob-sub-banner-text h3 {
    margin-bottom: 4px !important;
  }
  html body .wos-mobile-only .wos-mob-sub-banner-text p {
    margin-bottom: 10px !important;
  }
  html body .wos-mobile-only .wos-mob-spacer {
    height: 8px !important;
  }

  /* Section head: max-height removed, let content determine height */
  html body .wos-mobile-only .wos-mob-section-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  html body .wos-mobile-only .wos-mob-section-head > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 1 !important;
  }

}
/* END WOS MOBILE NUCLEAR PADDING FIX v5 */


/* ══════════════════════════════════════════════════════════════════
   WOS MOBILE HERO FINAL — 2026-05-18
   Kills all accumulated split-layout patches. Full-bleed spice BG,
   bottom-anchored text, properly sized CTAs.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* ── HERO SHELL: full bleed, tall, dark bottom ── */
  html body section.wos-mob-hero,
  html body .wos-mobile-only section.wos-mob-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 280px !important;
    max-height: 340px !important;
    height: 300px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    background: #0a0400 !important;
  }

  /* ── BG IMAGE WRAP: full cover ── */
  html body .wos-mob-hero .wos-mob-hero-img-wrap {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }
  html body .wos-mob-hero .wos-mob-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important;
    filter: brightness(.8) saturate(1.15) !important;
  }

  /* ── OVERLAY: bottom-heavy dark scrim ── */
  html body .wos-mob-hero .wos-mob-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(10,4,0,.10) 0%,
      rgba(10,4,0,.20) 35%,
      rgba(10,4,0,.65) 65%,
      rgba(10,4,0,.90) 100%
    ) !important;
  }

  /* ── CONTENT: full width, bottom-anchored ── */
  html body .wos-mob-hero .wos-mob-hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: none !important;
    overflow: visible !important;
  }

  /* ── TAG ── */
  html body .wos-mob-hero .wos-mob-hero-tag {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
    background: rgba(212,160,23,.2) !important;
    border: 1px solid rgba(212,160,23,.7) !important;
    color: #f5c842 !important;
    font-size: .6rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    border-radius: 12px !important;
    width: fit-content !important;
  }

  /* ── H1 ── */
  html body .wos-mob-hero .wos-mob-hero-h1 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.06 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.95) !important;
    max-width: 100% !important;
  }

  /* ── SUBTITLE ── */
  html body .wos-mob-hero .wos-mob-hero-sub {
    font-size: .73rem !important;
    color: rgba(255,255,255,.92) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    max-width: 290px !important;
    width: auto !important;
    display: block !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.75) !important;
    /* Remove webkit clamp that was truncating */
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* ── CTA ROW ── */
  html body .wos-mob-hero .wos-mob-hero-ctas {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* ── GOLD CTA ── */
  html body .wos-mob-hero .wos-mob-hero-cta-gold {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 18px !important;
    background: #D4A017 !important;
    color: #1a0800 !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    border-radius: 22px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 12px rgba(212,160,23,.5) !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* ── GHOST CTA ── */
  html body .wos-mob-hero .wos-mob-hero-cta-ghost {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 18px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1.5px solid rgba(255,255,255,.75) !important;
    color: #ffffff !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    border-radius: 22px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    backdrop-filter: blur(4px) !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

}
/* END WOS MOBILE HERO FINAL */


/* ═══════════════════════════════════════════════
   WOS GLOBAL NAV v4 — Shared across all pages
   Ann bar · Brand bar · Main nav · Mobile drawer
═══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   WOS HOMEPAGE v9 — FINAL REFINEMENT PASS
   Founder Blueprint: SSAS → Understanding → Confidence → Exploration
   Single unified CSS. No duplicates. No legacy.
   ══════════════════════════════════════════════════════════ */
:root{
  --ivory:#F8F4EC; --cream:#FFFDF8; --red:#A63A24; --gold:#D9A441;
  --brown:#6D4C41; --green:#4E7A4B; --char:#2D2D2D; --mid:#5A4A3A;
  --muted:#8C7B6B; --dark:#1A0E0A;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--cream);color:var(--char);font-family:'Inter',sans-serif;line-height:1.6;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;}

/* BUTTONS */
.btn-primary{background:var(--red);color:#fff;font-size:14px;font-weight:600;letter-spacing:.5px;padding:14px 28px;border-radius:6px;border:none;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{background:#8B2E1A;transform:translateY(-1px);}
.btn-gold{background:var(--gold);color:var(--dark);font-size:14px;font-weight:700;padding:14px 28px;border-radius:6px;border:none;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-gold:hover{background:#B8882E;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:rgba(255,255,255,.8);font-size:14px;font-weight:500;padding:14px 28px;border-radius:6px;border:1px solid rgba(255,255,255,.25);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-ghost-dark{background:transparent;color:var(--mid);font-size:14px;font-weight:500;padding:12px 24px;border-radius:6px;border:1px solid rgba(109,76,65,.25);cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px;}
.btn-ghost-dark:hover{border-color:var(--red);color:var(--red);}
.section-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--red);border-bottom:2px solid transparent;transition:.2s;margin-top:8px;}
.section-cta:hover{border-color:var(--red);}
.section-cta.gold{color:var(--gold);}
.section-cta.gold:hover{border-color:var(--gold);}

/* SECTION SHARED */
.section{padding:80px 0;}
.section-alt{background:var(--ivory);}
.section-dark{background:var(--dark);}
.section-label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.section-headline{font-family:'Playfair Display',serif;font-size:clamp(28px,3.5vw,44px);line-height:1.15;color:var(--char);margin-bottom:16px;}
.section-headline.light{color:#fff;}
.section-intro{font-size:17px;color:var(--mid);line-height:1.7;max-width:600px;margin-bottom:48px;}
.section-intro.light{color:rgba(255,255,255,.7);}
.section-intro.center{text-align:center;margin-left:auto;margin-right:auto;}

/* JOURNEY STRIP */
.journey-strip{background:var(--dark);padding:20px 0;border-top:1px solid rgba(217,164,65,.15);border-bottom:1px solid rgba(217,164,65,.15);}
.journey-strip-inner{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.journey-step{text-align:center;padding:0 28px;}
.journey-step .js-num{font-size:10px;color:var(--gold);letter-spacing:1px;display:block;margin-bottom:2px;text-transform:uppercase;}
.journey-step .js-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);}
.journey-arrow{color:rgba(217,164,65,.35);font-size:20px;padding:0 4px;}

/* ══ HERO ══ */
.hero{min-height:92vh;background:var(--dark);display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(166,58,36,.22) 0%,transparent 65%);pointer-events:none;}
.hero-content{padding:80px 60px 80px 80px;position:relative;z-index:2;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.3);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border-radius:20px;margin-bottom:32px;}
.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--gold);border-radius:50%;}
.hero-headline{font-family:'Playfair Display',serif;font-size:clamp(40px,5vw,72px);line-height:1.08;color:#fff;margin-bottom:14px;}
.hero-headline em{color:var(--gold);font-style:normal;}
.hero-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2vw,22px);color:rgba(255,255,255,.7);margin-bottom:32px;line-height:1.5;}
.hero-ssas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;}
.hero-ssas-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85);font-size:12px;font-weight:500;letter-spacing:.5px;padding:7px 14px;border-radius:20px;transition:.2s;}
.hero-ssas-pill:hover{background:rgba(217,164,65,.2);border-color:var(--gold);color:var(--gold);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:32px;}
.hero-search{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden;max-width:460px;}
.hero-search input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:14px;padding:14px 18px;}
.hero-search input::placeholder{color:rgba(255,255,255,.35);}
.hero-search-btn{background:var(--red);border:none;color:#fff;padding:14px 20px;cursor:pointer;transition:.2s;}
.hero-search-btn:hover{background:#8B2E1A;}
.hero-mosaic{height:92vh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:55% 45%;gap:3px;}
.hero-mosaic .tile{overflow:hidden;position:relative;}
.hero-mosaic .tile.tall{grid-row:1/3;}
.hero-mosaic img{width:100%;height:100%;object-fit:cover;transition:.6s;}
.hero-mosaic .tile:hover img{transform:scale(1.05);}
.tile-label{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.hero-stats{display:flex;gap:28px;background:rgba(26,14,10,.75);backdrop-filter:blur(10px);border:1px solid rgba(217,164,65,.2);border-radius:12px;padding:16px 24px;margin-top:32px;width:fit-content;}
.hero-stats .stat-n{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:var(--gold);display:block;}
.hero-stats .stat-l{font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.5px;}

/* ══ SSAS PILLARS ══ */
.ssas-lead{text-align:center;max-width:680px;margin:0 auto 56px;}
.ssas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border-radius:14px;overflow:hidden;}
.ssas-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;}
.ssas-card img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.ssas-card:hover img{transform:scale(1.06);}
.ssas-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,14,10,.92) 0%,rgba(26,14,10,.2) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 22px;transition:.3s;}
.ssas-card:hover .ssas-overlay{background:linear-gradient(0deg,rgba(166,58,36,.88) 0%,rgba(26,14,10,.5) 60%,transparent 100%);}
.ssas-icon{font-size:26px;margin-bottom:8px;}
.ssas-name{font-family:'Playfair Display',serif;font-size:22px;color:#fff;font-weight:700;margin-bottom:6px;}
.ssas-tagline{font-size:12px;color:rgba(255,255,255,.6);font-style:italic;margin-bottom:8px;}
.ssas-desc{font-size:13px;color:rgba(255,255,255,.8);line-height:1.5;max-height:0;overflow:hidden;transition:.35s;}
.ssas-card:hover .ssas-desc{max-height:80px;}
.ssas-door{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;margin-top:12px;opacity:0;transition:.3s;}
.ssas-card:hover .ssas-door{opacity:1;}

/* ══ UNDERSTANDING ══ */
.understand-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.understand-pillars{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
.upillar{display:flex;gap:18px;align-items:flex-start;padding:22px;background:#fff;border-radius:10px;border-left:3px solid var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.05);transition:.25s;}
.upillar:hover{transform:translateX(4px);box-shadow:0 6px 24px rgba(0,0,0,.1);}
.upillar-icon{width:42px;height:42px;background:var(--ivory);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.upillar-title{font-size:14px;font-weight:700;color:var(--char);margin-bottom:4px;}
.upillar-text{font-size:13px;color:var(--mid);line-height:1.6;}
.understand-visual{position:relative;}
.understand-img-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:280px 190px;gap:6px;border-radius:12px;overflow:hidden;}
.understand-img-tile{overflow:hidden;}
.understand-img-tile.tall{grid-row:1/3;}
.understand-img-tile img{width:100%;height:100%;object-fit:cover;}
.understand-quote{background:var(--dark);padding:22px 26px;border-radius:10px;margin-top:14px;border-left:3px solid var(--gold);}
.understand-quote p{font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;color:rgba(255,255,255,.88);line-height:1.65;}
.understand-quote cite{font-size:11px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-top:10px;display:block;}

/* ══ REGIONS ══ */
.regions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.region-card{border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;}
.region-card img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.region-card:hover img{transform:scale(1.06);}
.region-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,14,10,.88) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;}
.region-label-sm{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:3px;}
.region-name{font-family:'Playfair Display',serif;font-size:21px;color:#fff;font-weight:700;margin-bottom:5px;}
.region-flavors{font-size:12px;color:rgba(255,255,255,.6);line-height:1.4;}
.region-explore{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--gold);margin-top:10px;opacity:0;transform:translateY(6px);transition:.3s;}
.region-card:hover .region-explore{opacity:1;transform:translateY(0);}

/* ══ DISCOVERY PATHS ══ */
.paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.path-card{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:.3s;display:flex;flex-direction:column;}
.path-card:hover{transform:translateY(-6px);box-shadow:0 14px 44px rgba(0,0,0,.13);}
.path-img{height:200px;overflow:hidden;position:relative;}
.path-img img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.path-card:hover .path-img img{transform:scale(1.06);}
.path-badge{position:absolute;top:12px;left:12px;background:var(--dark);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:4px;}
.path-body{padding:24px;flex:1;display:flex;flex-direction:column;}
.path-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--char);margin-bottom:8px;}
.path-desc{font-size:13px;color:var(--mid);line-height:1.6;flex:1;}
.path-meta{display:flex;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ivory);}
.path-meta span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}

/* ══ FLAVOR PASSPORT ══ */
.fp-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.fp-image-wrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(26,14,10,.4);}
.fp-image-wrap img{width:100%;height:480px;object-fit:cover;}
.fp-seal{position:absolute;bottom:22px;right:22px;background:rgba(26,14,10,.88);backdrop-filter:blur(8px);border:2px solid var(--gold);border-radius:50%;width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;}
.fp-seal-n{font-family:'Playfair Display',serif;font-size:26px;color:var(--gold);font-weight:700;line-height:1;}
.fp-seal-l{font-size:9px;color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase;margin-top:3px;}
.fp-cards-preview{display:flex;margin-bottom:24px;}
.fp-mini-card{width:46px;height:64px;border-radius:6px;background:linear-gradient(135deg,var(--red),var(--brown));border:2px solid rgba(217,164,65,.3);display:flex;align-items:center;justify-content:center;font-size:16px;margin-right:-10px;box-shadow:2px 0 8px rgba(0,0,0,.25);}
.fp-why{display:flex;flex-direction:column;gap:14px;margin:24px 0 28px;}
.fp-why-item{display:flex;align-items:flex-start;gap:14px;}
.fp-why-icon{width:36px;height:36px;background:rgba(217,164,65,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.fp-why-text strong{font-size:14px;font-weight:700;color:#fff;display:block;}
.fp-why-text span{font-size:13px;color:rgba(255,255,255,.6);}
.fp-cta-wrap{display:flex;gap:14px;flex-wrap:wrap;}

/* ══ AI FLAVOR GUIDE ══ */
.aifg-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.aifg-chat{background:#fff;border-radius:16px;padding:28px;box-shadow:0 4px 32px rgba(0,0,0,.1);}
.chat-header{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ivory);margin-bottom:16px;}
.chat-avatar{width:40px;height:40px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0;}
.chat-title{font-weight:700;font-size:14px;color:var(--char);}
.chat-sub{font-size:12px;color:var(--muted);}
.chat-online{margin-left:auto;width:8px;height:8px;background:#4CAF50;border-radius:50%;}
.chat-msg{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start;}
.chat-msg.user{justify-content:flex-end;}
.msg-bubble{max-width:82%;padding:11px 15px;border-radius:12px;font-size:13px;line-height:1.5;}
.msg-bubble.guide{background:var(--ivory);color:var(--char);border-radius:4px 12px 12px 12px;}
.msg-bubble.user{background:var(--red);color:#fff;border-radius:12px 4px 12px 12px;}
.aifg-questions{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.aifg-q{background:var(--ivory);border:1px solid rgba(109,76,65,.12);border-radius:8px;padding:11px 14px;font-size:13px;color:var(--mid);display:flex;align-items:center;gap:10px;cursor:pointer;transition:.2s;}
.aifg-q:hover{background:#fff;border-color:var(--gold);color:var(--char);}
.aifg-q i{color:var(--gold);width:16px;}
.aifg-features{display:flex;flex-direction:column;gap:24px;}
.aifg-feat{display:flex;gap:18px;align-items:flex-start;}
.aifg-feat-icon{width:48px;height:48px;background:rgba(166,58,36,.08);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.aifg-feat-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;}
.aifg-feat-text{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;}

/* ══ COMMUNITY ══ */
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.comm-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.06);border-top:3px solid var(--gold);}
.comm-user{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.comm-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--ivory);display:flex;align-items:center;justify-content:center;font-size:18px;}
.comm-name{font-size:14px;font-weight:600;color:var(--char);}
.comm-location{font-size:12px;color:var(--muted);}
.comm-discovery{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--mid);font-style:italic;line-height:1.6;margin-bottom:14px;}
.comm-spice-tag{display:inline-flex;align-items:center;gap:6px;background:var(--ivory);border-radius:20px;font-size:11px;font-weight:600;color:var(--brown);padding:5px 12px;}

/* ══ CREATOR ══ */
.creator-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:center;}
.creator-img-wrap{border-radius:14px;overflow:hidden;position:relative;box-shadow:0 16px 60px rgba(0,0,0,.25);}
.creator-img-wrap img{width:100%;height:400px;object-fit:cover;}
.creator-role-badge{position:absolute;top:18px;left:18px;background:var(--dark);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:7px 13px;border-radius:6px;border:1px solid rgba(217,164,65,.3);}
.creator-specialties{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;}
.creator-spec-tag{background:rgba(166,58,36,.08);border:1px solid rgba(166,58,36,.2);color:var(--red);font-size:12px;font-weight:500;padding:6px 14px;border-radius:20px;}
.creator-philosophy{background:var(--ivory);border-left:3px solid var(--gold);padding:18px 22px;border-radius:0 10px 10px 0;font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;color:var(--mid);line-height:1.6;margin:18px 0;}

/* ══ HARD-TO-FIND ══ */
.mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.mkt-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:.3s;}
.mkt-card:hover{transform:translateY(-4px);box-shadow:0 14px 44px rgba(0,0,0,.13);}
.mkt-img{height:220px;overflow:hidden;position:relative;}
.mkt-img img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.mkt-card:hover .mkt-img img{transform:scale(1.06);}
.mkt-rarity{position:absolute;top:12px;right:12px;background:var(--dark);color:var(--gold);font-size:9px;font-weight:700;letter-spacing:1px;padding:5px 10px;border-radius:4px;}
.mkt-body{padding:20px;}
.mkt-region{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:5px;}
.mkt-name{font-family:'Playfair Display',serif;font-size:19px;color:var(--char);margin-bottom:7px;}
.mkt-story{font-size:13px;color:var(--mid);line-height:1.5;}
.mkt-explore{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--red);margin-top:12px;}

/* ══ EXPLORATION PROGRAMS ══ */
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sub-card{border-radius:14px;overflow:hidden;background:var(--dark);box-shadow:0 4px 24px rgba(0,0,0,.2);transition:.3s;}
.sub-card:hover{transform:translateY(-4px);}
.sub-img{height:190px;overflow:hidden;}
.sub-img img{width:100%;height:100%;object-fit:cover;transition:.5s;opacity:.72;}
.sub-card:hover .sub-img img{transform:scale(1.06);opacity:.88;}
.sub-body{padding:26px;}
.sub-level{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.sub-title{font-family:'Playfair Display',serif;font-size:21px;color:#fff;margin-bottom:8px;}
.sub-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:18px;}
.sub-includes{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;list-style:none;}
.sub-includes li{font-size:12px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:8px;}
.sub-includes li::before{content:'✦';color:var(--gold);font-size:9px;}
.sub-cta{display:block;text-align:center;background:rgba(217,164,65,.12);border:1px solid rgba(217,164,65,.35);color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.5px;padding:12px;border-radius:8px;transition:.2s;}
.sub-cta:hover{background:var(--gold);color:var(--dark);}

/* ══ FINAL CTA ══ */
.final-cta{min-height:500px;position:relative;display:flex;align-items:center;overflow:hidden;}
.final-cta-bg{position:absolute;inset:0;}
.final-cta-bg img{width:100%;height:100%;object-fit:cover;}
.final-cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,14,10,.93) 40%,rgba(26,14,10,.65));}
.final-cta-content{position:relative;z-index:2;padding:80px;max-width:620px;}
.final-headline{font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,54px);color:#fff;line-height:1.15;margin-bottom:18px;}
.final-headline em{color:var(--gold);font-style:normal;}
.final-sub{font-family:'Cormorant Garamond',serif;font-size:20px;color:rgba(255,255,255,.72);font-style:italic;margin-bottom:36px;line-height:1.5;}
.final-cta-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* ══ MOBILE ══ */
@media(max-width:1100px){
  .understand-layout,.fp-layout,.aifg-layout,.creator-layout{grid-template-columns:1fr;}
  .fp-image-wrap img{height:340px;}
  .creator-img-wrap img{height:300px;}
}
@media(max-width:900px){
  /* wos-brand-bar hidden on homepage mobile — overridden on inner pages by nav CSS */
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-content{padding:56px 24px 36px;}
  .hero-mosaic{height:320px;}
  .ssas-grid{grid-template-columns:1fr 1fr;}
  .regions-grid{grid-template-columns:1fr 1fr;}
  .paths-grid{grid-template-columns:1fr;}
  .comm-grid{grid-template-columns:1fr;}
  .mkt-grid{grid-template-columns:1fr;}
  .sub-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
  .section{padding:56px 0;}
  .final-cta-content{padding:48px 24px;}
  .journey-step{padding:0 14px;}
  .journey-arrow{display:none;}
  .hero-stats{flex-wrap:wrap;gap:16px;}
  .understand-img-grid{grid-template-rows:200px 150px;}
}
@media(max-width:600px){
  .ssas-grid{grid-template-columns:1fr;}
  .regions-grid{grid-template-columns:1fr;}
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .hero-search{max-width:100%;}
  .fp-layout,.aifg-layout{gap:32px;}
}



/* ── Header CSS (deduplicated, no :root overlap) ── */
/* ══ WOS HEADER v3 ══ */


/* ANN BAR */
.wos-ann{background:var(--red);color:#fff;padding:9px 48px 9px 24px;font-size:12.5px;font-weight:500;overflow:hidden;position:relative;white-space:nowrap;transition:height .35s,padding .35s,opacity .35s;}
.wos-ann.hidden{height:0!important;padding:0!important;opacity:0;overflow:hidden;}
.wos-ann-track{display:inline-flex;gap:96px;animation:ann-scroll 32s linear infinite;}
.wos-ann-track strong{font-weight:700;}
@keyframes ann-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wos-ann-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.65);cursor:pointer;font-size:14px;padding:4px 8px;line-height:1;}
/* BRAND BAR */
.wos-brand-bar{background:var(--cream);border-bottom:1px solid rgba(109,76,65,.10);padding:12px 40px;display:flex;align-items:center;justify-content:space-between;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;max-height:80px;}
.wos-brand-bar.compressed{height:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;overflow:hidden;border:none;}
.wos-brand-logo-wrap{display:flex;align-items:center;gap:16px;text-decoration:none;}
.wos-brand-logo-img{height:64px!important;max-height:64px!important;width:auto!important;transition:height .4s;object-fit:contain;flex-shrink:0;}
.wos-brand-name{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--char);line-height:1;letter-spacing:-.01em;}
.wos-brand-tagline{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:var(--muted);margin-top:5px;letter-spacing:.04em;}
.wos-brand-bar-right{display:flex;align-items:center;gap:14px;}
.wos-brand-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(109,76,65,.18);border-radius:30px;padding:9px 18px;transition:box-shadow .2s;}
.wos-brand-search:focus-within{box-shadow:0 0 0 3px rgba(166,58,36,.11);}
.wos-brand-search input{background:none;border:none;outline:none;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--char);width:240px;}
.wos-brand-search input::placeholder{color:var(--muted);}
.wos-brand-search button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;padding:0 4px;transition:color .2s;}
.wos-brand-search button:hover{color:var(--red);}
.wos-util-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid rgba(109,76,65,.18);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500;color:var(--mid);text-decoration:none;cursor:pointer;transition:all .2s;white-space:nowrap;}
.wos-util-btn:hover{background:rgba(109,76,65,.06);color:var(--char);}
.wos-util-btn.primary{background:var(--red);border-color:var(--red);color:#fff;}
.wos-util-btn.primary:hover{opacity:.88;}
.wos-cart-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:#1a0a02;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;margin-left:2px;}
/* MAIN NAV */
.wos-mainnav{background:#FFFDF8;border-bottom:2px solid #B22222;position:sticky;top:0;z-index:400;transition:box-shadow .25s;box-shadow:0 2px 16px rgba(44,24,8,.12);}
.wos-mainnav.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.08);}
.wos-mainnav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:60px;gap:20px;}
/* Compact logo */
.wos-compact-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;opacity:0;width:0;overflow:hidden;pointer-events:none;transition:opacity .35s,width .35s;}
.wos-mainnav.scrolled .wos-compact-logo{opacity:1;width:auto;pointer-events:all;}
.wos-compact-logo img{height:36px!important;max-height:36px!important;width:auto!important;max-width:36px!important;object-fit:contain!important;flex-shrink:0!important;}
.wos-compact-logo-name{font-family:'Playfair Display',serif;font-size:15px;font-weight:600;color:var(--char);white-space:nowrap;line-height:1;}
.wos-compact-logo-sub{font-family:'Cormorant Garamond',serif;font-size:11px;font-style:italic;color:var(--muted);margin-top:1px;}
/* Nav links */
.wos-nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.wos-nav-link{font-size:13px;font-weight:500;color:var(--mid);text-decoration:none;padding:8px 13px;border-radius:7px;transition:color .2s,background .2s;white-space:nowrap;position:relative;}
.wos-nav-link:hover,.wos-nav-link.active{color:var(--char);background:rgba(109,76,65,.07);}
.wos-nav-link.passport{font-weight:600;color:var(--red);}
.wos-nav-link.passport:hover{background:rgba(166,58,36,.07);}
.wos-nav-chip{display:inline-block;background:var(--gold);color:#1a0a02;font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 6px;border-radius:8px;margin-left:4px;vertical-align:middle;text-transform:uppercase;}
/* Nav right */
.wos-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.wos-nav-search-wrap{display:flex;align-items:center;gap:8px;background:rgba(109,76,65,.07);border-radius:22px;padding:7px 14px;opacity:0;width:0;overflow:hidden;pointer-events:none;transition:opacity .35s,width .35s;}
.wos-mainnav.scrolled .wos-nav-search-wrap{opacity:1;width:210px;pointer-events:all;}
.wos-nav-search-wrap input{background:none;border:none;outline:none;font-size:13px;color:var(--char);width:100%;font-family:'Inter',sans-serif;}
.wos-nav-search-wrap input::placeholder{color:var(--muted);}
.wos-nav-icon{background:none;border:none;cursor:pointer;color:var(--mid);font-size:16px;padding:8px 10px;display:flex;align-items:center;border-radius:8px;text-decoration:none;transition:color .2s,background .2s;position:relative;}
.wos-nav-icon:hover{color:var(--char);background:rgba(109,76,65,.07);}
.wos-nav-icon-badge{position:absolute;top:4px;right:4px;background:var(--red);color:#fff;border-radius:50%;width:15px;height:15px;font-size:8.5px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.wos-nav-cta{background:var(--red);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:opacity .2s;display:inline-flex;align-items:center;gap:6px;}
.wos-nav-cta:hover{opacity:.88;}
.wos-nav-cta.ghost{background:transparent;color:var(--red);border:1px solid rgba(166,58,36,.28);}
.wos-nav-cta.ghost:hover{background:rgba(166,58,36,.06);}
/* Mobile hamburger */
.wos-hamburger{display:none;background:none;border:1px solid rgba(109,76,65,.2);border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--mid);flex-direction:column;gap:4px;}
.wos-hamburger span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:all .3s;}
/* ── DESKTOP: hide mobile-only elements ── */
.wos-mobile-drawer{display:none;}
.wos-hamburger{display:none;}

@media(max-width:900px){
  /* ── MOBILE HEADER: hide brand-bar, show hamburger, enable drawer ── */
  .wos-brand-bar{display:none!important;}
  .wos-ann{font-size:11px;padding:7px 40px 7px 12px;}
  .wos-mainnav-inner{padding:0 16px;height:54px;}
  .wos-nav-links,.wos-nav-search-wrap,.wos-compact-logo{display:none!important;}
  .wos-hamburger{display:flex!important;}
  .wos-mobile-drawer{display:block;position:fixed;inset:0;z-index:9999;pointer-events:none;}
  .wos-mobile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;}
  .wos-mobile-panel{position:absolute;top:0;right:0;bottom:0;width:285px;background:var(--cream);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding:24px 20px;overflow-y:auto;}
  .wos-mobile-drawer.open{pointer-events:all;}
  .wos-mobile-drawer.open .wos-mobile-overlay{opacity:1;}
  .wos-mobile-drawer.open .wos-mobile-panel{transform:translateX(0);}
  .wos-mobile-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--mid);float:right;margin-bottom:20px;padding:4px;}
  .wos-mobile-nav-link{display:block;font-size:15px;font-weight:500;color:var(--char);text-decoration:none;padding:13px 0;border-bottom:1px solid var(--ivory);}
  .wos-mobile-nav-link.passport{color:var(--red);font-weight:700;}
  .wos-mobile-ctas{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
}

/* Override: show brand bar on all inner pages */
.wos-brand-bar{display:flex!important;}


/* ═══════════════════════════════════════════════════════════════════════════
   WOS STICKY NAV FIX — PERMANENT FINAL RULE (appended last, always wins)
   overflow-x:clip  = hides horizontal overflow WITHOUT creating scroll container
   This is the ONLY body rule that allows position:sticky to function correctly.
   DO NOT add body{overflow-x: clip} anywhere — it breaks sticky nav.
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip !important;
}
body {
  overflow-x:  visible !important;  /* MUST be visible/clip — hidden kills sticky */
  overflow-y:  visible !important;
  position:    static  !important;
  max-width:   100%    !important;
}

/* ═══════════════════════════════════════════════
   WOS NAV v5 — sticky nav overrides (appended)
   ═══════════════════════════════════════════════ */
.wos-nav { position: sticky !important; top: 0 !important; z-index: 500 !important; }
.wos-nav-logo img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}