/* 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 {
  /* === PRIMARY BRAND COLORS (from logo) === */
  --crimson: #6B0000;          /* deep dark red — logo ring background */
  --crimson-light: #8B0000;    /* main crimson red */
  --red-bright: #C41E3A;       /* bright logo red */
  --red-vivid: #E02020;        /* vibrant accent red */
  --gold: #D4A017;             /* logo gold dots & text */
  --gold-light: #E8B830;       /* lighter gold hover */
  --cream: #F5EDE0;            /* logo background cream */
  --cream-dark: #EAE0D0;       /* slightly darker cream */

  /* === NEUTRALS === */
  --charcoal: #1A1A1A;
  --charcoal-light: #2C2C2C;
  --black: #0F0F0F;
  --white: #FFFFFF;
  --green-herb: #2E7D52;       /* kept for herb/fresh labels */

  /* === SEMANTIC ALIASES === */
  --warm-brown: var(--crimson-light);
  --warm-brown-light: var(--red-bright);
  --beige: var(--cream);
  --beige-dark: var(--cream-dark);
  --red-spice: var(--red-vivid);
  --text-primary: #1A1A1A;
  --text-secondary: #5A5A5A;
  --text-muted: #9A9A9A;
  --border: #E0D0C0;

  --shadow: 0 4px 20px rgba(107,0,0,0.10);
  --shadow-hover: 0 8px 32px rgba(107,0,0,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:          #8B0000;
  --card-radius:       14px;
  --card-shadow:       0 4px 24px rgba(107,0,0,0.12);
  --card-shadow-hover: 0 12px 40px rgba(107,0,0,0.22);
  --section-bg-cream:  #FAF5EE;
  --section-bg-dark:   #120400;
  --gold-gradient:     linear-gradient(135deg,#D4A017 0%,#E8B830 100%);
  --nav-bg:            #1C1208;
  --footer-bg:         #0F0500;
}

*, *::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: 1;
}
.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: #1E0F05;
  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(--beige-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, #3A0000 0%, #1A0000 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: hidden;
}
* { 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: hidden !important;
}
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: hidden !important;
  max-width: 100vw !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}
img, video, iframe, embed {
  max-width: 100% !important;
  height: auto !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: hidden !important; }

/* ── 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: hidden; }

/* ── 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: hidden;
}

/* ── 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: hidden !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: hidden !important;
    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: hidden } 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: visible !important;  /* NOT hidden — hidden breaks sticky */
}

/* ════════════════════════════════════════════════════════════════
   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;
}