/* ==========================================================================
   Lucid Dreamz 420 — Premium Homepage Stylesheet (Light / Professional)
   ========================================================================== */

:root {
  --bg: #fbfbf8;
  --bg-alt: #f2f3ee;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --border: rgba(20, 24, 16, 0.09);
  --border-soft: rgba(20, 24, 16, 0.06);

  --green: #3f6a12;
  --green-deep: #2c4d0c;
  --green-bright: #8ec63f;
  --green-tint: #eef4e2;
  --gold: #b08d4f;
  --gold-tint: #f6efdf;

  --text: #181c12;
  --text-dim: #5a6152;
  --text-faint: #8d9484;

  --grad-green: linear-gradient(120deg, var(--green-deep), var(--green) 55%, var(--green-bright));
  --grad-gold: linear-gradient(120deg, var(--gold), #d8bd85);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 28px rgba(24, 28, 18, 0.18);
  --shadow-lift: 0 14px 34px rgba(24, 28, 18, 0.26);
  --shadow-glow: 0 0 0 1px rgba(63, 106, 18, 0.1), 0 20px 45px rgba(63, 106, 18, 0.1);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1240px;
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, button { border: none; outline: none; background: none; color: inherit; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', 'Inter', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.14;
  color: var(--text);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

/* ---------- Reusable bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  max-width: 560px;
}
.section-head p {
  color: var(--text-dim);
  max-width: 380px;
  font-size: 15px;
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center h2, .section-head--center p { max-width: 640px; }

.text-accent { color: var(--green); font-style: italic; font-weight: 500; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  font-family: 'Inter', sans-serif;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s ease, border-color .3s ease, color .3s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-green);
  color: #fbfff0;
  box-shadow: 0 12px 28px rgba(63, 106, 18, 0.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(63, 106, 18, 0.36); }
.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: var(--surface-strong); border-color: rgba(63,106,18,0.35); transform: translateY(-3px); color: var(--green); }
.btn-sm { padding: 11px 22px; font-size: 13px; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chip-green { background: rgba(63,106,18,0.1); color: var(--green); border: 1px solid rgba(63,106,18,0.22); }
.chip-gold { background: var(--gold-tint); color: var(--gold); border: 1px solid rgba(176,141,79,0.35); }
.chip-dark { background: rgba(24,28,18,0.85); color: #fff; border: 1px solid rgba(24,28,18,0.85); }

.glass {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce {
  background: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  padding: 9px 0;
}
.announce .container { display: flex; align-items: center; justify-content: center; gap: 20px; }
.announce-track { display: flex; align-items: center; gap: 32px; overflow: hidden; }
.announce-track span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.announce-track i { color: var(--green-bright); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(251, 251, 248, 0.9);
  backdrop-filter: blur(14px);
  transition: padding .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 8px 30px rgba(24,28,18,0.06);
}
.site-header .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 83px; width: auto; transition: transform .4s var(--ease); }
.brand:hover img { transform: rotate(-4deg) scale(1.04); }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav a.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 500; color: var(--text-dim);
  transition: color .25s ease, background .25s ease;
}
.main-nav a.nav-link:hover, .main-nav li.has-dropdown:hover a.nav-link { color: var(--green); background: var(--green-tint); }

.main-nav li.has-dropdown { position: relative; }
.mega-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; transform: translateY(8px);
  width: 250px; padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  z-index: 50;
}
.main-nav li.has-dropdown:hover .mega-dropdown,
.main-nav li.has-dropdown.menu-open .mega-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s;
}
.mega-item { position: relative; }
.mega-item-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
.mega-item-link:hover { background: var(--green-tint); color: var(--green); }
.mega-item-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mega-item-meta .count { font-size: 11px; color: var(--text-faint); }
.mega-item-meta .sub-caret { font-size: 10px; color: var(--text-faint); transition: color .2s ease, transform .2s ease; }
.mega-item.has-submenu:hover .mega-item-meta .sub-caret,
.mega-item.has-submenu.submenu-open .mega-item-meta .sub-caret { color: var(--green); transform: translateX(2px); }

/* Subcategory flyout — opens to the right of the category it belongs to */
.mega-submenu {
  position: absolute; top: -8px; left: calc(100% + 10px);
  width: 220px; padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateX(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  z-index: 60;
}
.mega-item.has-submenu:hover .mega-submenu,
.mega-item.has-submenu.submenu-open .mega-submenu {
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
}
.mega-submenu a {
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
.mega-submenu a:hover { background: var(--green-tint); color: var(--green); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-dim);
  border: 1px solid var(--border); background: var(--surface);
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.icon-btn:hover { color: var(--green); border-color: rgba(63,106,18,.35); transform: translateY(-2px); }
.icon-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.icon-btn:active { transform: translateY(0) scale(.94); }
.header-actions .mobile-quick-btn { display: none; }
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
.burger { display: none; }

/* ==========================================================================
   Header Search Overlay
   ========================================================================== */
.search-overlay {
  position: fixed; inset: 0; z-index: 400; visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.search-overlay.is-open { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.search-overlay-backdrop { position: absolute; inset: 0; background: rgba(15,18,10,.55); backdrop-filter: blur(2px); }
.search-panel {
  position: relative; max-width: 720px; margin: 110px auto 0; padding: 0 24px;
  transform: translateY(-16px); transition: transform .35s var(--ease);
}
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-form {
  display: flex; align-items: center; gap: 14px; background: var(--bg-elevated);
  border-radius: var(--radius-md); padding: 8px 10px 8px 22px; box-shadow: var(--shadow-lift);
}
.search-form-icon { color: var(--text-faint); font-size: 16px; }
.search-form-input {
  flex: 1 1 auto; height: 52px; font-size: 16.5px; font-family: 'Inter', sans-serif; color: var(--text);
}
.search-form-input::placeholder { color: var(--text-faint); }
.search-panel-close {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-dim); flex-shrink: 0; transition: background .2s ease, color .2s ease;
}
.search-panel-close:hover { background: var(--bg-alt); color: var(--text); }

.search-results {
  margin-top: 12px; max-height: 60vh; overflow-y: auto; background: var(--bg-elevated);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
}
.search-results:empty { display: none; box-shadow: none; }
.search-result-list { display: flex; flex-direction: column; padding: 8px; }
.search-result-item {
  display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--radius-sm);
  transition: background .2s ease;
}
.search-result-item:hover { background: var(--green-tint); }
.search-result-item img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-alt); flex-shrink: 0; }
.search-result-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.search-result-name { font-size: 14.5px; font-weight: 500; color: var(--text); }
.search-result-sku { font-size: 12px; color: var(--text-faint); }
.search-result-price { font-family: 'Fraunces', serif; font-weight: 600; color: var(--green-deep); font-size: 14.5px; white-space: nowrap; }
.search-view-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; font-size: 13.5px; font-weight: 600; color: var(--green);
  border-top: 1px solid var(--border-soft);
}
.search-view-all:hover { color: var(--green-deep); }
.search-loading, .search-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 32px 20px; color: var(--text-faint); text-align: center; font-size: 14px;
}
.search-loading i { font-size: 20px; color: var(--green); }
.search-empty i { font-size: 22px; }

/* ==========================================================================
   21+ Age Verification Gate
   ========================================================================== */
body.age-gate-locked { overflow: hidden; }
.age-gate {
  position: fixed; inset: 0; z-index: 700; visibility: hidden; opacity: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.age-gate.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
.age-gate-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(63,106,18,.35), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(176,141,79,.2), transparent 55%),
    rgba(8,10,6,.9);
  backdrop-filter: blur(6px);
}
.age-gate-panel {
  position: relative; width: 100%; max-width: 440px; text-align: center;
  background: var(--bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); padding: 44px 36px 36px;
  transform: translateY(18px) scale(.98); transition: transform .4s var(--ease);
}
.age-gate.is-open .age-gate-panel { transform: translateY(0) scale(1); }
.age-gate-logo { height: 44px; width: auto; margin: 0 auto 22px; display: block; }
.age-gate-panel h2 { font-family: 'Fraunces', serif; font-size: 26px; margin-bottom: 12px; color: var(--text); }
.age-gate-panel p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 28px; }
.age-gate-actions { display: flex; flex-direction: column; gap: 12px; }
.age-gate-actions .btn { width: 100%; }
.age-gate-no {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
}
.age-gate-no:hover { background: var(--bg-alt); border-color: var(--text-faint); color: var(--text); transform: translateY(-2px); }
.age-gate-no:focus-visible, .age-gate-yes:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.age-gate-legal { display: block; margin-top: 22px; font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.age-gate-legal a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.age-gate-legal a:hover { color: var(--green-deep); }

.contact-map {
    display: none !important;
}

@media (min-width: 480px) {
  .age-gate-actions { flex-direction: row; }
}

@media (max-width: 640px) {
  .search-panel { margin-top: 90px; padding: 0 16px; }
  .search-form { padding: 6px 8px 6px 16px; }
  .search-form-input { height: 46px; font-size: 15px; }
}

/* ==========================================================================
   Wholesale Account Gate Modal — shown when a guest/non-approved visitor
   clicks any Add to Cart button (see script.js + ld420Gate localized data).
   ========================================================================== */
.gate-modal {
  position: fixed; inset: 0; z-index: 500; visibility: hidden; opacity: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.gate-modal.is-open { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.gate-modal-backdrop { position: absolute; inset: 0; background: rgba(15,18,10,.6); backdrop-filter: blur(2px); }
.gate-modal-panel {
  position: relative; width: 100%; max-width: 420px; background: var(--bg-elevated);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 40px 32px 32px;
  text-align: center; transform: translateY(-16px) scale(.97); transition: transform .35s var(--ease);
}
.gate-modal.is-open .gate-modal-panel { transform: translateY(0) scale(1); }
.gate-modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim); transition: background .2s ease, color .2s ease;
}
.gate-modal-close:hover { background: var(--bg-alt); color: var(--text); }
.gate-modal-icon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px; display: grid; place-items: center;
  background: var(--grad-green); color: #fff; font-size: 26px; box-shadow: 0 12px 28px rgba(63,106,18,.28);
}
.gate-modal-panel h3 { font-size: 22px; margin-bottom: 10px; }
.gate-modal-panel > p { color: var(--text-dim); font-size: 14.5px; margin-bottom: 26px; }
.gate-modal-actions { display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   Hero — full-width banner
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  /* z-index:0 (with position) makes .hero establish its own stacking
     context, so the negative z-index media/scrim/slider layers inside it
     stack correctly *within* .hero instead of escaping to a much higher
     ancestor context — without this, .hero's own (transparent) box ends up
     painted above its escaped-negative-z children and silently intercepts
     every click on the CTA buttons and breadcrumb links underneath it. */
  z-index: 0;
  min-height: 690px;
  display: flex; align-items: center;
  padding: 140px 0 190px;
  margin-bottom: -64px;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(5,7,4,.6) 0%, rgba(5,7,4,.4) 38%, rgba(5,7,4,.15) 62%, transparent 82%),
    linear-gradient(0deg, rgba(5,7,4,.35) 0%, transparent 40%);
}

/* Hero slider (homepage) */
.hero-slider { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background-size: cover; background-position: center center;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.hero-slide > .container { width: 100%; }
.hero-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 1s var(--ease), visibility 0s linear 0s;
  z-index: 1;
}
.hero-slide .hero-inner { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .25s, transform .7s ease .25s; }
.hero-slide.is-active .hero-inner { opacity: 1; transform: translateY(0); }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 14px; backdrop-filter: blur(8px);
  cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-arrow:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
.hero-arrow:active { transform: translateY(-50%) scale(.92); }
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }

.hero-dots {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px;
}
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.5);
  cursor: pointer; transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.is-active { width: 26px; border-radius: var(--radius-pill); background: var(--green-bright); border-color: var(--green-bright); }

.hero-inner { max-width: 620px; }
.hero .eyebrow-light { color: var(--green-bright); }
.hero .eyebrow-light::before { background: var(--gold); }

/* Shorter page hero (About, etc.) — compound selector so this reliably beats
   the homepage slider's .hero rules (including its responsive breakpoints
   and its -64px margin-bottom meant only for the homepage trust-bar overlap),
   regardless of CSS source order. */
.hero.hero--page { min-height: 380px; padding: 150px 0 70px; margin-bottom: 0; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  color: rgba(255,255,255,.65); margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255,255,255,.85); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--green-bright); }
.breadcrumb i { font-size: 9px; color: rgba(255,255,255,.4); }
.hero-content h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); margin-bottom: 22px; }
.hero-content .text-accent-light { color: var(--green-bright); font-style: italic; font-weight: 500; }
.hero-content p.lead { color: rgba(255,255,255,.82); font-size: 17px; max-width: 500px; margin-bottom: 38px; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-outline-light {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.35); color: #fff;
  backdrop-filter: blur(8px);
}
.btn-outline-light:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); transform: translateY(-3px); }

/* Trust bar — overlaps the hero's bottom edge */
.trust-bar-wrap { position: relative; z-index: 30; margin-bottom: 40px; }
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius-lg); padding: 28px 20px;
}
.trust-bar-item {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  padding: 0 12px; border-right: 1px solid var(--border-soft);
}
.trust-bar-item:last-child { border-right: none; }
.trust-bar-item i {
  font-size: 19px; color: var(--green); background: var(--green-tint);
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid rgba(63,106,18,.16);
}
.trust-bar-item strong { display: block; font-family: 'Fraunces', serif; font-size: 18.5px; }
.trust-bar-item span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   Wholesale Process
   ========================================================================== */
.process { padding: 60px 0; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-card {
  position: relative; padding: 32px 26px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-elevated); box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.process-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(63,106,18,.25); }
.process-num {
  position: absolute; top: 20px; right: 24px;
  font-family: 'Fraunces', serif; font-size: 34px; font-weight: 700; color: var(--border-soft);
}
.process-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--green-tint); color: var(--green); font-size: 20px; border: 1px solid rgba(63,106,18,.18);
}
.process-card h3 { font-size: 17px; margin-bottom: 8px; }
.process-card p { font-size: 14px; color: var(--text-dim); }

/* ==========================================================================
   Featured Categories
   ========================================================================== */
.categories { padding: 20px 0 60px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden; height: 260px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  transition: transform .5s var(--ease), border-color .4s ease, box-shadow .4s ease;
}
.cat-card:hover { transform: translateY(-8px); border-color: rgba(63,106,18,.3); box-shadow: var(--shadow-lift); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s ease; filter: saturate(1.02); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,18,10,.88) 8%, rgba(15,18,10,.1) 62%, transparent 100%); z-index: 1; }
.cat-card-body { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cat-card-body h3 { color: #fff; font-size: 18.5px; }
.cat-card-body span { font-size: 12.5px; color: rgba(255,255,255,0.75); }
.cat-arrow {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  transition: background .3s ease, transform .4s var(--ease), color .3s ease;
}
.cat-card:hover .cat-arrow { background: var(--grad-green); color: #fff; transform: rotate(45deg); }

/* ==========================================================================
   Products (shared: Featured + New Arrivals)
   ========================================================================== */
.products { padding: 60px 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* Product carousel — activated by JS only when a section has more than 4 cards */
/* display:flow-root establishes a block formatting context so the carousel's
   internal negative margin (below) can't collapse through and shift this
   whole wrapper — without clipping the arrow buttons that intentionally
   hang outside its box. */
.product-carousel-wrap { position: relative; display: flow-root; }
.product-grid.is-carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Padding gives the card hover-lift + box-shadow room to paint on every
     side without being clipped by the scroll container; the matching
     negative margin cancels it back out so the section's outer spacing
     doesn't change. 24px left/right exactly fills — and never exceeds —
     the surrounding .container's own 24px inline padding, so this can
     never cause page-level horizontal overflow at any viewport width. */
  padding: 40px 24px 90px;
  margin: -40px -24px -90px;
}
.product-grid.is-carousel::-webkit-scrollbar { display: none; }
.product-grid.is-carousel .product-card {
  flex: 0 0 calc(25% - 16.5px);
  scroll-snap-align: start;
}
.carousel-arrow {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-soft); font-size: 14px;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.carousel-arrow:hover { background: var(--grad-green); color: #fff; border-color: transparent; box-shadow: var(--shadow-lift); }
.carousel-arrow:active { transform: translateY(-50%) scale(.92); }
.carousel-arrow:disabled { opacity: .4; cursor: default; pointer-events: none; }
.carousel-arrow-prev { left: -23px; }
.carousel-arrow-next { right: -23px; }
@media (max-width: 1300px) {
  .carousel-arrow-prev { left: 8px; }
  .carousel-arrow-next { right: 8px; }
}
.product-card {
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), border-color .4s ease, box-shadow .45s ease;
}
.product-card:hover { transform: translateY(-8px); border-color: rgba(63,106,18,.28); box-shadow: var(--shadow-lift); }
.product-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-alt); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-media img { transform: scale(1.08); }
.product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.product-quick {
  position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px;
  transform: translateX(60px); opacity: 0; transition: transform .4s var(--ease), opacity .4s ease;
}
.product-card:hover .product-quick { transform: translateX(0); opacity: 1; }
.product-quick a, .product-quick button {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  color: var(--text); border: 1px solid var(--border); display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(24,28,18,.14);
  transition: background .25s ease, color .25s ease;
}
.product-quick a:hover, .product-quick button:hover { background: var(--green); color: #fff; }
.product-info { padding: 18px 18px 20px; }
.product-cat { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 6px; display: block; }
.product-info h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.product-sku { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; display: block; letter-spacing: .02em; }
.stars { color: var(--gold); font-size: 12px; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.stars span { color: var(--text-faint); }
.price-row { display: flex; align-items: center; justify-content: space-between; }
.price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--green-deep); }
.price small { color: var(--text-faint); font-weight: 400; text-decoration: line-through; margin-left: 8px; font-size: 13px; }
.add-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); color: var(--text);
  display: grid; place-items: center; transition: background .25s ease, color .25s ease, transform .3s var(--ease);
}
.add-btn:hover { background: var(--grad-green); color: #fff; transform: rotate(90deg); }

.products-footer { display: flex; justify-content: center; margin-top: 48px; }

/* New arrivals tint */
.new-arrivals { padding: 20px 0 100px; }

/* ==========================================================================
   Why Choose Us
   ========================================================================== */
.why { padding: 100px 0; background: var(--bg-alt); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card {
  padding: 32px 28px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-elevated); transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(63,106,18,.25); }
.why-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px;
  background: var(--green-tint); color: var(--green); font-size: 21px; border: 1px solid rgba(63,106,18,.18);
}
.why-card h3 { font-size: 18px; margin-bottom: 10px; }
.why-card p { color: var(--text-dim); font-size: 14.5px; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { padding: 60px 0 110px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* Review carousel — activated by JS only when there are more than 3 testimonials */
.review-carousel-wrap { position: relative; display: flow-root; }
.review-grid.is-carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Same shadow-clipping fix as .product-grid.is-carousel above — 24px
     left/right exactly fills the surrounding .container's own inline
     padding, so it never causes page-level horizontal overflow. */
  padding: 40px 24px 90px;
  margin: -40px -24px -90px;
}
.review-grid.is-carousel::-webkit-scrollbar { display: none; }
.review-grid.is-carousel .review-card {
  flex: 0 0 calc(33.333% - 14.7px);
  scroll-snap-align: start;
}
.review-card {
  padding: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.review-card .stars { margin-bottom: 18px; font-size: 14px; }
.review-card p.quote { color: var(--text-dim); font-size: 15px; margin-bottom: 26px; }
.review-person { display: flex; align-items: center; gap: 12px; }
.avatar-initials {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--grad-green); color: #fff; font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px;
}
.review-person strong { display: block; font-size: 14.5px; }
.review-person span { font-size: 12.5px; color: var(--text-faint); }
.quote-mark { font-size: 42px; color: var(--gold); font-family: Georgia, serif; line-height: 1; opacity: .7; margin-bottom: 6px; }

/* ==========================================================================
   Shop / New Arrivals — sidebar filters + toolbar
   ========================================================================== */
.shop-section { padding: 20px 0 110px; }
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }

.filter-sidebar {
  position: sticky; top: 100px;
  padding: 26px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-elevated);
  box-shadow: var(--shadow-soft);
}
.filter-sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.filter-sidebar-head h3 { font-size: 18px; }
.filter-clear {
  font-size: 12.5px; font-weight: 600; color: var(--green); border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.filter-clear:hover { border-color: var(--green); }
.filter-group { padding: 18px 0; border-top: 1px solid var(--border-soft); }
.filter-group:first-of-type { padding-top: 0; border-top: none; }
.filter-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 14px; }
.filter-list { display: flex; flex-direction: column; gap: 12px; }
.filter-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.filter-check input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.filter-check span { flex: 1; }
.filter-check em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.filter-check:hover span { color: var(--green); }
.filter-list-accordion .filter-check em { display: none; }

/* Category accordion — top-level categories with subcategories get a
   chevron toggle; the sublist stays collapsed (display:none) until opened,
   keeping the sidebar compact instead of listing every subcategory flat. */
.filter-list-accordion { gap: 4px; }
.filter-cat-item { border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; }
.filter-cat-item:last-child { border-bottom: none; padding-bottom: 0; }
.filter-cat-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.filter-cat-row .filter-check { flex: 1; padding: 4px 0; }
.filter-cat-toggle {
  width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--text-faint); transition: background .2s ease, color .2s ease;
}
.filter-cat-toggle:hover { background: var(--green-tint); color: var(--green); }
.filter-cat-toggle i { transition: transform .25s var(--ease); font-size: 11px; }
.filter-cat-item.is-open .filter-cat-toggle i { transform: rotate(180deg); }
.filter-sublist {
  display: none; flex-direction: column; gap: 10px; padding: 6px 0 4px 14px;
  margin-left: 8px; border-left: 1px solid var(--border-soft);
}
.filter-cat-item.is-open .filter-sublist { display: flex; }
.filter-check-sub { font-size: 13.5px; }
.filter-check-sub input { width: 14px; height: 14px; }

.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.shop-count { font-size: 14px; color: var(--text-dim); }
.shop-toolbar-controls { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.shop-sort, .shop-per-page { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.shop-sort select, .shop-per-page select {
  padding: 9px 34px 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a6152'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--text); font-size: 13.5px; appearance: none; cursor: pointer;
}
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-empty {
  text-align: center; padding: 70px 20px; border-radius: var(--radius-md); border: 1px dashed var(--border);
}
.shop-empty i { font-size: 34px; color: var(--text-faint); margin-bottom: 16px; }
.shop-empty h3 { font-size: 20px; margin-bottom: 8px; }
.shop-empty p { color: var(--text-dim); margin-bottom: 22px; }

/* ==========================================================================
   Legal pages (Privacy / Terms / Shipping)
   ========================================================================== */
.legal-section { padding: 20px 0 120px; }
.legal-layout { max-width: 780px; margin: 0 auto; }
.legal-updated { font-size: 13px; color: var(--text-faint); margin-bottom: 40px; }
.legal-layout h2 { font-size: 24px; margin: 44px 0 16px; }
.legal-layout h2:first-child { margin-top: 0; }
.legal-layout p { color: var(--text-dim); margin-bottom: 16px; }
.legal-layout ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding-left: 22px; list-style: disc; color: var(--text-dim); }
.legal-layout li::marker { color: var(--green); }
.legal-layout a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.legal-layout strong { color: var(--text); }

/* ==========================================================================
   About
   ========================================================================== */
.about { padding: 20px 0 110px; }
.about .container { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; }
.about-visual { position: relative; }
.about-visual .img-main { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.about-visual .img-main img { width: 100%; height: 560px; object-fit: cover; }
.about-badge {
  position: absolute; bottom: -24px; left: -24px; padding: 20px 24px; border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-lift);
}
.about-badge .num { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 700; color: var(--green); }
.about-badge span { font-size: 12.5px; color: var(--text-dim); max-width: 120px; display: block; }

.about-content h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 20px; }
.about-content > p { color: var(--text-dim); margin-bottom: 26px; max-width: 560px; }
.about-quote {
  border-left: 3px solid var(--gold); padding: 4px 0 4px 20px; margin-bottom: 30px;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 19px; color: var(--text); max-width: 560px;
}
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 34px; }
.about-stats div { padding: 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-alt); text-align: center; }
.about-stats strong { display: block; font-family: 'Fraunces', serif; font-size: 24px; color: var(--green); }
.about-stats span { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   Newsletter CTA — full-width premium band (light)
   ========================================================================== */
.newsletter {
  position: relative; overflow: hidden;
  padding: 90px 0 60px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.newsletter-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; filter: blur(120px); z-index: 0; }
.newsletter-glow-1 { background: rgba(63,106,18,.12); top: -160px; left: -100px; }
.newsletter-glow-2 { background: rgba(176,141,79,.14); bottom: -160px; right: -80px; }
.newsletter-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; text-align: center; }
.newsletter-inner .eyebrow { color: var(--green); }
.newsletter-inner .eyebrow::before { background: var(--gold); }
.newsletter-inner h2 { font-size: clamp(28px, 3.8vw, 42px); color: var(--text); margin-bottom: 16px; }
.newsletter-inner > p { color: var(--text-dim); margin-bottom: 36px; }
.newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; padding: 16px 24px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14.5px; box-shadow: var(--shadow-soft);
}
.newsletter-form input::placeholder { color: var(--text-faint); }
.newsletter-note { margin-top: 18px; font-size: 12.5px; color: var(--text-faint); }
.newsletter-success { display: none; color: var(--green); font-size: 14px; margin-top: 18px; align-items: center; justify-content: center; gap: 8px; }
.newsletter-success.show { display: flex; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #000; color: rgba(255,255,255,0.72); padding-top: 80px; }
.site-footer h4, .site-footer strong { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand img { filter: brightness(0) invert(1); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 14.5px; max-width: 300px; margin-bottom: 22px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.7);
  transition: color .25s ease, border-color .25s ease, transform .3s var(--ease);
}
.footer-social a:hover { color: var(--green-bright); border-color: var(--green-bright); transform: translateY(-3px); }
.footer-col h4 { font-size: 15px; margin-bottom: 22px; font-family: 'Fraunces', serif; }
.footer-col ul li { margin-bottom: 13px; }
.footer-col a { color: rgba(255,255,255,0.6); font-size: 14.5px; transition: color .25s ease, padding-left .25s ease; }
.footer-col a:hover { color: var(--green-bright); padding-left: 4px; }
.footer-contact li { display: flex; gap: 12px; color: rgba(255,255,255,0.6); font-size: 14.5px; align-items: flex-start; }
.footer-contact i { color: var(--green-bright); margin-top: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; flex-wrap: wrap; }
.footer-bottom p { color: rgba(255,255,255,0.45); font-size: 13px; }
.footer-payments { display: flex; gap: 10px; color: rgba(255,255,255,0.45); font-size: 22px; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 13px; color: rgba(255,255,255,0.45); }
.footer-legal a:hover { color: var(--green-bright); }

.back-to-top {
  position: fixed; right: 26px; bottom: 26px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-green); color: #fff; display: grid; place-items: center; z-index: 200;
  box-shadow: 0 14px 32px rgba(63,106,18,.32);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Contact Page
   ========================================================================== */
.contact-section { padding: 20px 0 110px; }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }

.contact-info-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.contact-info-card {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg-elevated); box-shadow: var(--shadow-soft);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.contact-info-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--green-tint); color: var(--green); font-size: 18px; border: 1px solid rgba(63,106,18,.16);
}
.contact-info-card h4 { font-size: 15px; margin-bottom: 4px; }
.contact-info-card p, .contact-info-card a { font-size: 14px; color: var(--text-dim); display: block; }
.contact-info-card a:hover { color: var(--green); }

.contact-map {
  position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border);
  min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px;
  background:
    linear-gradient(rgba(20,24,16,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,16,.05) 1px, transparent 1px),
    var(--bg-alt);
  background-size: 28px 28px, 28px 28px, auto;
}
.contact-map-pin {
  width: 52px; height: 52px; border-radius: 50%; background: var(--grad-green); color: #fff;
  display: grid; place-items: center; font-size: 20px; margin: 0 auto 14px; box-shadow: 0 10px 26px rgba(63,106,18,.3);
}
.contact-map-note strong { display: block; font-family: 'Fraunces', serif; font-size: 16px; color: var(--text); margin-bottom: 8px; }
.contact-map-note span { font-size: 12.5px; color: var(--text-faint); max-width: 260px; display: block; margin: 0 auto; }

.contact-form-card {
  padding: 38px; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-elevated); box-shadow: var(--shadow-soft);
}
.contact-form-card h3 { font-size: 22px; margin-bottom: 8px; }
.contact-form-card > p { color: var(--text-dim); margin-bottom: 28px; font-size: 14.5px; }
/* .form-field-row (NOT .form-row — deliberately a distinct class name).
   WooCommerce's own login/checkout/address forms use a bare .form-row class
   on each field's <p>, and My Account's login card (woocommerce/myaccount/
   form-login.php) reuses .contact-form-card for its card styling, so a
   .contact-form-card .form-row rule would reach WooCommerce's own markup
   too and split that field's label/input into separate grid columns
   instead of stacking them — this happened once already when the rule was
   scoped to .contact-form-card .form-row; renaming the wrapper class here
   is what actually prevents it, since scoping alone can't help once a real
   WC form ends up inside the same card. */
.contact-form-card .form-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form-card .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.contact-form-card .form-field label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.contact-form-card .form-field input, .contact-form-card .form-field select, .contact-form-card .form-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--text); font-size: 14.5px; font-family: 'Inter', sans-serif;
  transition: border-color .2s ease, background .2s ease;
}
.contact-form-card .form-field input:focus, .contact-form-card .form-field select:focus, .contact-form-card .form-field textarea:focus {
  outline: none; border-color: var(--green); background: var(--bg-elevated);
}
.contact-form-card .form-field textarea { resize: vertical; min-height: 130px; }
.contact-form-card .form-field input::placeholder, .contact-form-card .form-field textarea::placeholder { color: var(--text-faint); }
.contact-form-card .form-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6152'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form-success { display: none; align-items: center; gap: 8px; color: var(--green); font-size: 14px; margin-top: 6px; }
.form-success.show { display: flex; }

/* ==========================================================================
   My Account — logged-out login layout (woocommerce/myaccount/form-login.php)
   Same two-column benefits-panel + card pattern as Contact/Apply for Account.
   ========================================================================== */
.account-login-layout { align-items: start; grid-template-columns: 1.15fr 1.15fr; }

/* Apply for Account page: registration form (left) 20% wider than the
   "How it works" info column (right). */
.apply-account-layout { grid-template-columns: 1.2fr 1fr; }
.account-benefits-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 32px; margin-bottom: 20px;
}
.account-benefits-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--grad-green); color: #fff; font-size: 22px; margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(63,106,18,.28);
}
.account-benefits-card h3 { font-size: 22px; margin-bottom: 8px; }
.account-benefits-card p { color: var(--text-dim); font-size: 14.5px; }

.account-login-card .woocommerce-form-row { margin-bottom: 18px; }
.account-login-actions {
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
  border: none; padding: 0; margin: 0 0 18px;
}
.account-login-actions .woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-dim); cursor: pointer;
}
.account-login-actions .woocommerce-form__input-checkbox { width: 16px; height: 16px; accent-color: var(--green); flex-shrink: 0; }
.account-login-actions .woocommerce-form-login__submit { width: 100%; justify-content: center; }
.account-login-card .woocommerce-LostPassword { margin: 0; }

/* ==========================================================================
   Mobile nav overlay
   ========================================================================== */
.mobile-nav {
  position: fixed; inset: 0; z-index: 300; background: rgba(251,251,248,.98); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; padding: 26px 26px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .45s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.mobile-nav-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text); }
.mobile-nav ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav > ul > li > a { font-size: 22px; font-family: 'Fraunces', serif; padding: 12px 4px; display: block; border-bottom: 1px solid var(--border-soft); }
.mobile-nav .sub-list { padding-left: 14px; display: flex; flex-direction: column; }
.mobile-nav .sub-list a { font-size: 15px; color: var(--text-dim); padding: 9px 4px; font-family: 'Inter', sans-serif; }
.mobile-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-grid.is-carousel .product-card { flex: 0 0 calc(33.333% - 14.7px); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 230px 1fr; gap: 28px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .main-nav, .header-actions .icon-btn.search-only { display: none; }
  .header-actions .icon-btn:not(.cart-btn), .header-actions .btn.btn-primary { display: none; }
  .header-actions .icon-btn.mobile-quick-btn { display: grid; }
  .burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); }
  .brand img { height: 52px; }
  .hero { min-height: 644px; padding: 130px 0 165px; }
  .hero-arrow { display: none; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .trust-bar-item:nth-child(2) { border-right: none; }
  .trust-bar-item:nth-child(1), .trust-bar-item:nth-child(2) { border-bottom: 1px solid var(--border-soft); padding-bottom: 18px; }
  .about .container { grid-template-columns: minmax(0, 1fr); }
  .about-visual .img-main img { height: 380px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .shop-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
}

@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid.is-carousel .product-card { flex: 0 0 calc(50% - 11px); }
  .carousel-arrow { width: 40px; height: 40px; }
  .why-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid.is-carousel .review-card { flex: 0 0 calc(70% - 6.6px); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .process-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .announce { overflow: hidden; }
  .announce .container { max-width: 100%; }
  .announce-track { overflow: visible; max-width: 100%; }
  .announce-track span:not(:first-child) { display: none; }
  .announce-track span { white-space: normal; text-align: center; }
  .newsletter { padding: 70px 0; }
  .newsletter-form { flex-direction: column; }
  .footer-top { grid-template-columns: 1fr; }
  .about-badge { left: 12px; bottom: -18px; padding: 14px 18px; }
  .trust-bar { grid-template-columns: 1fr; }
  .trust-bar-item { border-right: none !important; border-bottom: 1px solid var(--border-soft); padding: 14px 0 !important; justify-content: flex-start; }
  .trust-bar-item:last-child { border-bottom: none; }
  .contact-form-card .form-field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form-card { padding: 26px; }
}

@media (max-width: 520px) {
  .cat-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid.is-carousel .product-card { flex: 0 0 85%; }
  .review-grid.is-carousel .review-card { flex: 0 0 88%; }
  .carousel-arrow { display: none; }
  .shop-grid { grid-template-columns: 1fr; }
  .hero { min-height: 598px; padding: 120px 0 145px; }
}

/* ==========================================================================
   WooCommerce integration
   ========================================================================== */

/* Shop/category/New Arrivals pagination */
.shop-pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.shop-pagination-bar .shop-pagination { margin-top: 0; flex: 1 1 auto; }
.shop-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.shop-pagination .page-numbers {
  min-width: 42px; height: 42px; padding: 0 6px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-dim); font-size: 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.shop-pagination .page-numbers.current { background: var(--grad-green); border-color: transparent; color: #fff; }
.shop-pagination a.page-numbers:hover { background: var(--green-tint); border-color: var(--green); color: var(--green); }
.shop-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* WooCommerce price markup (get_price_html) inside our .price span */
.price ins { text-decoration: none; }
.price del { color: var(--text-faint); font-weight: 400; font-size: 13px; margin-right: 6px; }
.woocommerce-Price-amount { font-family: 'Fraunces', serif; }

/* Add-to-cart AJAX loading/success states (WooCommerce's JS toggles these
   classes; default woocommerce.css is dequeued, so we style them ourselves) */
.add_to_cart_button.loading { opacity: .5; pointer-events: none; }
.added_to_cart {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-size: 12.5px; color: var(--green); text-decoration: underline; text-underline-offset: 2px;
}

/* ==========================================================================
   WooCommerce default pages (single product, cart, checkout, my account) —
   these are left on WooCommerce's own templates (no approved custom design
   yet), so this section only brings them on-brand typographically rather
   than pixel-matching the rest of the site.
   ========================================================================== */
.woo-default-page, .woo-default-page *:not(i) { font-family: 'Inter', sans-serif; }
.woo-default-page h1, .woo-default-page h2, .woo-default-page h3 { font-family: 'Fraunces', serif; color: var(--text); }
.woo-default-page a { color: var(--green); }
.woo-default-page a:hover { color: var(--green-deep); }

.woo-default-page table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.woo-default-page table.shop_table th, .woo-default-page table.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 14.5px; }

.woo-default-page .button, .woo-default-page .checkout-button, .woo-default-page input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--grad-green); color: #fff !important; font-weight: 600; font-size: 14.5px;
  text-decoration: none !important; border: none; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s ease;
}
.woo-default-page .button:hover, .woo-default-page .checkout-button:hover, .woo-default-page input[type="submit"]:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
}
.woo-default-page .button.alt { background: var(--grad-green); }

.woo-default-page input.qty {
  width: 64px; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14.5px; text-align: center;
}
.woo-default-page input[type="text"], .woo-default-page input[type="email"], .woo-default-page input[type="tel"],
.woo-default-page input[type="password"], .woo-default-page textarea, .woo-default-page select {
  padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 14.5px; font-family: 'Inter', sans-serif;
  transition: border-color .2s ease;
}
.woo-default-page input:focus, .woo-default-page textarea:focus, .woo-default-page select:focus { outline: none; border-color: var(--green); }
.woo-default-page label { font-size: 13px; font-weight: 600; color: var(--text); }

.woo-default-page .woocommerce-message,
.woo-default-page .woocommerce-error,
.woo-default-page .woocommerce-info {
  list-style: none; padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 24px;
  font-size: 14.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--green-tint); border: 1px solid rgba(63,106,18,.18); color: var(--green-deep);
}
.woo-default-page .woocommerce-error { background: var(--gold-tint); border-color: rgba(176,141,79,.25); color: #7a5a1e; }
.woo-default-page .woocommerce-error .gate-action-link,
.woocommerce-error .gate-action-link {
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

#apply-form .woocommerce-message,
#apply-form .woocommerce-error {
  list-style: none; padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 24px;
  font-size: 14.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--green-tint); border: 1px solid rgba(63,106,18,.18); color: var(--green-deep);
}
#apply-form .woocommerce-error {
  background: var(--gold-tint); border-color: rgba(176,141,79,.25); color: #7a5a1e; flex-direction: column; align-items: flex-start;
}
#apply-form .woocommerce-error ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.woo-default-page .star-rating { color: var(--gold); font-size: 14px; }
.woo-default-page .quantity { display: inline-flex; margin-right: 10px; }

/* Cart / Checkout / My Account — classic shortcode pages get a wider
   container than the 780px legal-copy column, plus card-style dressing on
   top of WooCommerce's own structural CSS (woocommerce-layout.css, kept
   enqueued for the col2-set / cart-table grid behavior). */
.woo-page-layout { max-width: none; }
.woo-page-wide .woocommerce-account-content { max-width: 980px; margin-left: auto; margin-right: auto; }
.woo-page-wide form.checkout,
.woo-page-wide .ld420-cart-columns { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* Cart — form + totals sidebar side by side (see the woocommerce_before_cart /
   woocommerce_after_cart wrapper hooks in inc/woocommerce.php). Single column
   below 901px, where the sidebar isn't wide enough to be useful. */
.woo-default-page .ld420-cart-columns { display: block; }
@media (min-width: 901px) {
  .woo-default-page .ld420-cart-columns {
    display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start;
  }
  .woo-default-page .ld420-cart-columns .cart-collaterals { position: sticky; top: 96px; }
}

.woo-default-page table.shop_table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); border-bottom: 1px solid var(--border); }

/* Progress steps — a wayfinding aid above the cart/checkout card, not a
   real multi-step form (see ld420_render_checkout_steps in inc/woocommerce.php) */
.ld420-checkout-steps {
  display: flex; align-items: center; justify-content: center; gap: 10px; list-style: none;
  padding: 0; margin: 0 0 40px;
}
.ld420-checkout-steps li {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-faint);
}
.ld420-checkout-steps li:not(:last-child)::after {
  content: ''; width: 32px; height: 1px; background: var(--border); margin-left: 10px;
}
.ld420-checkout-steps .step-num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-elevated); font-size: 12.5px; color: var(--text-faint);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ld420-checkout-steps li.is-active { color: var(--text); font-weight: 700; }
.ld420-checkout-steps li.is-active .step-num { background: var(--grad-green); border-color: transparent; color: #fff; }
.ld420-checkout-steps li.is-done .step-num { background: var(--green-tint); border-color: rgba(63,106,18,.25); color: var(--green); }
.ld420-checkout-steps li.is-done { color: var(--text-dim); }
@media (max-width: 560px) {
  .ld420-checkout-steps { gap: 4px; }
  .ld420-checkout-steps .step-label { display: none; }
  .ld420-checkout-steps li:not(:last-child)::after { width: 16px; }
}

/* Cart items — wrap the bare table in card dressing, elevate rows */
.woo-default-page .woocommerce-cart-form {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 10px 32px; box-shadow: var(--shadow-soft);
}
.woo-default-page table.shop_table.cart { margin-bottom: 0; }
.woo-default-page table.shop_table.cart tr.cart_item { transition: background .2s ease; }
.woo-default-page table.shop_table.cart tr.cart_item:hover { background: var(--bg-alt); }
.woo-default-page table.shop_table.cart td { border-bottom: 1px solid var(--border-soft); }
.woo-default-page table.shop_table.cart tr:last-child td { border-bottom: none; }
.woo-default-page td.product-thumbnail img {
  width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}
.woo-default-page td.product-name a { font-size: 15.5px; font-weight: 700; color: var(--text); }
.woo-default-page td.product-price .woocommerce-Price-amount { font-weight: 500; color: var(--text-faint); }
.woo-default-page td.product-subtotal .woocommerce-Price-amount { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; color: var(--green-deep); }
.woo-default-page table.shop_table thead th { font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.woo-default-page td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--bg-alt); color: var(--text-dim); font-size: 18px; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.woo-default-page td.product-remove a.remove:hover { background: var(--gold-tint); color: #7a5a1e; transform: scale(1.08); }
.woo-default-page td.product-quantity input.qty { height: 46px; font-family: 'Inter', sans-serif; }

/* Quantity stepper — +/- buttons injected by assets/js/cart-stepper.js
   around WooCommerce's plain number input (cart page only). */
.woo-default-page .quantity.has-stepper {
  display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-elevated);
}
.woo-default-page .quantity.has-stepper input.qty {
  height: 44px; width: 48px; border: none; border-radius: 0; text-align: center; padding: 0;
  -moz-appearance: textfield;
}
.woo-default-page .quantity.has-stepper input.qty::-webkit-inner-spin-button,
.woo-default-page .quantity.has-stepper input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woo-default-page .qty-step {
  width: 34px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-alt); color: var(--text-dim);
  font-size: 12px; transition: background .2s ease, color .2s ease;
}
.woo-default-page .qty-step:hover { background: var(--green-tint); color: var(--green); }
.woo-default-page .qty-step:active { transform: scale(.94); }
.woo-default-page .qty-step-minus { border-right: 1px solid var(--border); }
.woo-default-page .qty-step-plus { border-left: 1px solid var(--border); }

/* Empty cart */
.woo-default-page .cart-empty.woocommerce-info {
  flex-direction: column; text-align: center; padding: 56px 32px; border-radius: var(--radius-lg);
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.woo-default-page .cart-empty.woocommerce-info::before {
  content: '\f07a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; display: grid; place-items: center;
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px; background: var(--green-tint);
  color: var(--green); font-size: 26px; border: 1px solid rgba(63,106,18,.16);
}
.woo-default-page .return-to-shop { text-align: center; margin-top: 20px; }

.woo-default-page .actions { padding-top: 24px !important; border-bottom: none !important; }
.woo-default-page .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.woo-default-page .coupon input#coupon_code { width: auto; min-width: 200px; }
.woo-default-page .coupon button { padding: 13px 22px; }
.woo-default-page .actions > button[name="update_cart"] { margin-left: auto; background: var(--bg-elevated); color: var(--text) !important; border: 1px solid var(--border); box-shadow: none; }
.woo-default-page .actions > button[name="update_cart"]:hover { background: var(--green-tint); transform: none; box-shadow: none; }

.woo-default-page .cart-collaterals,
.woo-default-page #order_review,
.woo-default-page .woocommerce-checkout-review-order {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-soft);
}
/* Icon-badge section headings — Cart Totals / Your Order / Billing Details /
   Additional Information all get the same small icon-circle treatment used
   throughout the rest of the site (see .contact-info-icon). */
.woo-default-page .cart_totals h2,
.woo-default-page #order_review h3,
.woo-default-page #order_review_heading,
.woo-default-page .woocommerce-billing-fields h3,
.woo-default-page .woocommerce-additional-fields h3 {
  display: flex; align-items: center; gap: 12px;
}
.woo-default-page .cart_totals h2::before,
.woo-default-page #order_review_heading::before,
.woo-default-page .woocommerce-billing-fields h3::before,
.woo-default-page .woocommerce-additional-fields h3::before {
  font-family: 'Font Awesome 6 Free'; font-weight: 900; display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 13px; background: var(--green-tint); color: var(--green);
  font-size: 17px; border: 1px solid rgba(63,106,18,.16);
}
.woo-default-page .cart_totals h2::before { content: '\f555'; }
.woo-default-page #order_review_heading::before { content: '\f290'; }
.woo-default-page .woocommerce-billing-fields h3::before { content: '\f007'; }
.woo-default-page .woocommerce-additional-fields h3::before { content: '\f27a'; }
/* WooCommerce's own layout CSS floats .cart_totals at ~48% inside
   .cart-collaterals, which (now that our container is full-width, not
   WC's narrower default) leaves a large dead-space gap beside it. Fill
   the card edge-to-edge instead. */
.woo-default-page .cart-collaterals .cart_totals { float: none; width: 100%; }
.woo-default-page .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: center; }
.woo-default-page .cart_totals table.shop_table th { font-size: 14px; font-weight: 500; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); }
.woo-default-page .cart_totals table.shop_table td { text-align: right; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-soft); }
.woo-default-page .cart_totals table.shop_table tr:last-child th,
.woo-default-page .cart_totals table.shop_table tr:last-child td { border-bottom: none; }
.woo-default-page .cart_totals h2, .woo-default-page #order_review h3, .woo-default-page #order_review_heading {
  font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 24px; color: var(--text);
}
.woo-default-page .cart_totals table.shop_table, .woo-default-page table.woocommerce-checkout-review-order-table { margin-bottom: 24px; }
.woo-default-page table.woocommerce-checkout-review-order-table td.product-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.woo-default-page table.woocommerce-checkout-review-order-table td.product-name .product-quantity { font-weight: 500; color: var(--text-faint); }
.woo-default-page table.woocommerce-checkout-review-order-table td.product-total {
  font-family: 'Fraunces', serif; font-weight: 700; color: var(--green-deep); white-space: nowrap;
}
.woo-default-page .cart_totals .order-total th {
  font-size: 16px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: normal;
}
.woo-default-page .cart_totals .order-total td { font-size: 16px; }
.woo-default-page .cart_totals .order-total .woocommerce-Price-amount {
  font-family: 'Fraunces', serif; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--green-deep);
}
.woo-default-page .wc-proceed-to-checkout a.checkout-button { width: 100%; justify-content: center; }

/* Checkout — reflow into a two-column layout (form left, sticky order
   summary right) using display:contents to lift col-1/col-2 out of
   WooCommerce's .col2-set flex wrapper and into the grid below, without
   touching the underlying template markup that its AJAX review update
   depends on. */
.woo-default-page .col2-set { display: flex; flex-wrap: wrap; gap: 32px; }
.woo-default-page .col2-set .col-1, .woo-default-page .col2-set .col-2 {
  flex: 1 1 320px; width: auto; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-soft);
}
.woo-default-page .woocommerce-billing-fields h3, .woo-default-page .woocommerce-additional-fields h3 {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 24px;
}
.woo-default-page .form-row { margin-bottom: 16px; }
.woo-default-page .form-row label { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--text-dim); margin-bottom: 7px; display: inline-block; }
.woo-default-page .form-row label .required { color: var(--gold); }
.woo-default-page ::placeholder { color: var(--text-faint); opacity: 1; }
.woo-default-page .form-row-first, .woo-default-page .form-row-last { width: calc(50% - 8px); display: inline-block; }
.woo-default-page .form-row-first { margin-right: 16px; }
.woo-default-page .woocommerce-input-wrapper { display: block; }

@media (min-width: 901px) {
  .woo-default-page form.checkout {
    display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start;
  }
  .woo-default-page form.checkout .col2-set { display: contents; }
  /* Explicit rows, not auto-placement — the grid auto-placement cursor only
     moves forward through rows as items are placed in DOM order, so the
     right-column heading/order-review (which come after col-2 in the
     markup) would otherwise get pushed down to whatever row col-2 lands
     on instead of sitting at the top beside col-1. */
  .woo-default-page form.checkout .col2-set .col-1 { grid-column: 1; grid-row: 1; }
  .woo-default-page form.checkout .col2-set .col-2 { grid-column: 1; grid-row: 2; }
  .woo-default-page form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
  .woo-default-page form.checkout #order_review {
    grid-column: 2; grid-row: 1 / 3; align-self: start; margin-top: 80px; position: sticky; top: 96px;
  }
}

/* "Have a coupon?" expandable form (cart page has the same markup) — its
   .form-row-first/.form-row-last are float:left/float:right in WooCommerce's
   own woocommerce-layout.css (kept enqueued for structural pages like this
   one), with no clearfix anywhere in the template. That collapses this
   form's own box to zero height while the floated children keep rendering,
   so they visually spill out over whatever comes right after in the
   document instead of pushing it down. display:flex sidesteps this
   entirely — per spec, float on a flex item computes to none. */
.woo-default-page .woocommerce-form-coupon {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px; margin: 0 0 24px; box-shadow: var(--shadow-soft);
}
.woo-default-page .woocommerce-form-coupon .form-row-first,
.woo-default-page .woocommerce-form-coupon .form-row-last {
  float: none; width: auto; margin: 0; flex: 1 1 220px;
}
.woo-default-page .woocommerce-form-coupon .form-row-last { flex: 0 0 auto; }
.woo-default-page .woocommerce-form-coupon input#coupon_code { width: 100%; }
.woo-default-page .woocommerce-form-coupon button { white-space: nowrap; }
.woo-default-page .woocommerce-form-coupon .clear { display: none; }

/* Select2 country/state dropdowns — re-skin to match our plain inputs */
.woo-default-page .select2-container .select2-selection--single {
  height: 50px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated);
  display: flex; align-items: center; padding: 0 16px; transition: border-color .2s ease;
}
.woo-default-page .select2-container--open .select2-selection--single,
.woo-default-page .select2-container .select2-selection--single:focus { border-color: var(--green); }
.woo-default-page .select2-selection__rendered { padding: 0 !important; font-size: 14.5px; color: var(--text); line-height: normal !important; }
.woo-default-page .select2-selection__arrow { height: 48px !important; right: 12px !important; }
.woo-default-page .select2-dropdown { border-color: var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-soft); }
.woo-default-page .select2-results__option--highlighted { background: var(--green) !important; }
.woo-default-page .select2-search--dropdown .select2-search__field { border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 8px 12px; }

/* Payment methods — selectable cards instead of a bare radio list */
.woo-default-page #payment { background: transparent; border-radius: var(--radius-md); padding: 0; margin-top: 20px; }
.woo-default-page #payment ul.payment_methods { padding: 0; display: flex; flex-direction: column; gap: 10px; }
.woo-default-page #payment ul.payment_methods li {
  margin-bottom: 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px;
  background: var(--bg-elevated); transition: border-color .2s ease, background .2s ease;
}
.woo-default-page #payment ul.payment_methods li:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.woo-default-page #payment ul.payment_methods label { font-weight: 700; font-size: 15px; }
.woo-default-page #payment input[type="radio"] { accent-color: var(--green); width: 17px; height: 17px; margin-right: 10px; vertical-align: middle; }
.woo-default-page #payment .payment_box { background: var(--surface-strong); border-radius: var(--radius-sm); margin-top: 10px; padding: 16px; font-size: 14px; color: var(--text-dim); }
.woo-default-page #payment .payment_box::before { display: none; }
.woo-default-page #payment #place_order { width: 100%; justify-content: center; padding: 16px 28px; font-size: 15px; margin-top: 6px; }
.woo-default-page #payment .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--text-faint); margin-bottom: 16px; }

.ld420-trust-row {
  clear: both; display: flex; flex-direction: column; gap: 10px; margin-top: 20px;
  padding-top: 20px; border-top: 1px solid var(--border-soft);
}
.ld420-trust-row span { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-faint); white-space: nowrap; }
.ld420-trust-row i { color: var(--green); font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; }

.woo-default-page .woocommerce-account-content table.shop_table { margin-top: 12px; }

/* WooCommerce's own woocommerce-layout.css floats nav 30%/content 68% side
   by side (kept enqueued for the cart/checkout grid) — for My Account we
   want a horizontal pill tab bar above the content instead, and floated
   elements with no clearfix on the parent collapse it to zero height,
   which let the footer render on top of them. Un-float both, full width,
   stacked. */
.woo-default-page .woocommerce-MyAccount-navigation,
.woo-default-page .woocommerce-MyAccount-content { float: none; width: 100%; }
.woo-default-page .woocommerce-MyAccount-navigation ul {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 28px;
  padding-left: 0; list-style: none;
}
.woo-default-page .woocommerce-MyAccount-navigation li { list-style: none; }
.woo-default-page .woocommerce-MyAccount-navigation li a {
  display: inline-flex; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg-elevated); font-size: 13.5px; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woo-default-page .woocommerce-MyAccount-navigation li a:hover { border-color: rgba(63,106,18,.35); color: var(--green); }
.woo-default-page .woocommerce-MyAccount-navigation li.is-active a { background: var(--grad-green); color: #fff; border-color: transparent; }

.woo-default-page fieldset {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; margin: 24px 0;
}
.woo-default-page fieldset legend { padding: 0 10px; font-weight: 600; font-size: 14px; }

/* "Register as a Member" CTA appended after the My Account login form
   (also reused, with its own copy of this rule, on wp-login.php — see
   assets/css/login.css). */
.ld420-login-register {
  max-width: 100%; margin: 20px 0 0; padding: 18px 22px;
  background: var(--green-tint); border: 1px solid rgba(63, 106, 18, .18);
  border-radius: var(--radius-md); font-size: 13.5px; color: var(--text-dim);
}
.ld420-login-register a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ld420-login-register a:hover { color: var(--green-deep); }

@media (max-width: 768px) {
  .woo-default-page .form-row-first, .woo-default-page .form-row-last { width: 100%; margin-right: 0; }
  .woo-default-page .coupon input#coupon_code { min-width: 0; flex: 1 1 auto; }
  .woo-default-page .col2-set .col-1, .woo-default-page .col2-set .col-2,
  .woo-default-page .cart-collaterals, .woo-default-page #order_review,
  .woo-default-page .woocommerce-cart-form { padding: 22px; }
}

/* Cart — turn WooCommerce's bare "Label: value" mobile stacking into
   proper product cards. */
@media (max-width: 767px) {
  .woo-default-page .woocommerce-cart-form { padding: 8px 16px; }
  .woo-default-page table.shop_table.cart thead { display: none; }
  .woo-default-page table.shop_table.cart,
  .woo-default-page table.shop_table.cart tbody { display: block; width: 100%; }
  .woo-default-page table.shop_table.cart tr.cart_item {
    display: grid; grid-template-columns: 64px 1fr;
    grid-template-areas: "thumb name" "price price" "qty qty" "subtotal subtotal";
    gap: 8px 14px; position: relative; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    padding: 16px; margin: 14px 0; background: var(--bg-elevated);
  }
  .woo-default-page table.shop_table.cart tr.cart_item:hover { background: var(--bg-elevated); }
  .woo-default-page table.shop_table.cart td { display: block; border-bottom: none !important; padding: 0; text-align: left; }
  .woo-default-page table.shop_table.cart td.product-remove { position: absolute; top: 10px; right: 10px; }
  .woo-default-page table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
  .woo-default-page table.shop_table.cart td.product-thumbnail img { width: 64px; height: 64px; }
  .woo-default-page table.shop_table.cart td.product-name { grid-area: name; align-self: center; padding-right: 34px; font-size: 14.5px; }
  .woo-default-page table.shop_table.cart td.product-price { grid-area: price; padding-top: 8px; border-top: 1px solid var(--border-soft) !important; }
  .woo-default-page table.shop_table.cart td.product-quantity { grid-area: qty; }
  .woo-default-page table.shop_table.cart td.product-subtotal { grid-area: subtotal; padding-top: 8px; border-top: 1px solid var(--border-soft) !important; }
  .woo-default-page table.shop_table.cart td.product-price,
  .woo-default-page table.shop_table.cart td.product-quantity,
  .woo-default-page table.shop_table.cart td.product-subtotal { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
  .woo-default-page table.shop_table.cart td.product-price::before,
  .woo-default-page table.shop_table.cart td.product-quantity::before,
  .woo-default-page table.shop_table.cart td.product-subtotal::before {
    content: attr(data-title); font-weight: 600; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  }
  .woo-default-page .cart_totals table.shop_table tr { flex-wrap: wrap; }
  .woo-default-page #payment ul.payment_methods li:has(input:checked) { background: var(--green-tint); }
}

/* ==========================================================================
   Product Detail (single-product.php) — bespoke layout matching the rest
   of the site's design system rather than WooCommerce's default template.
   ========================================================================== */
.product-detail-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; margin-bottom: 64px; }

.product-gallery-main {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: var(--bg-alt); aspect-ratio: 1/1; box-shadow: var(--shadow-soft);
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.product-thumb {
  width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--bg-alt); cursor: pointer; opacity: .7;
  transition: opacity .2s ease, border-color .2s ease;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb:hover { opacity: 1; }
.product-thumb.is-active { opacity: 1; border-color: var(--green); }

.product-summary .product-cat {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
  margin-bottom: 10px; display: block;
}
.product-summary h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 14px; }
.product-summary .stars { margin-bottom: 16px; }
.product-price {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 32px; color: var(--green-deep); margin-bottom: 20px;
}
.product-price .woocommerce-Price-amount { font-size: inherit; }
.product-short-desc { color: var(--text-dim); margin-bottom: 26px; max-width: 480px; }
.product-short-desc p { margin-bottom: 12px; }
.product-short-desc p:last-child { margin-bottom: 0; }

.product-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.product-qty-row .quantity { margin-right: 0; height: 54px; }
.product-qty-row input.qty { width: 76px; height: 54px; font-size: 16px; box-sizing: border-box; }
.product-qty-row .single_add_to_cart_button { flex: 1 1 auto; height: 54px; justify-content: center; padding: 0 28px; font-size: 15px; }
.product-stock-status { color: var(--gold); font-weight: 600; margin-bottom: 24px; }

.product-meta-list { border-top: 1px solid var(--border-soft); padding-top: 18px; margin-bottom: 24px; }
.product-meta-list div { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--border-soft); }
.product-meta-list div:last-child { border-bottom: none; }
.product-meta-list span:first-child { color: var(--text-faint); }
.product-meta-list span:last-child { color: var(--text); font-weight: 500; }
.product-meta-list a { color: var(--green); font-weight: 500; }

.product-trust-row { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.product-trust-row span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); }
.product-trust-row i { color: var(--green); }

.product-description-block { max-width: 780px; margin: 0 auto 64px; padding-top: 48px; border-top: 1px solid var(--border-soft); }
.product-description-block h2 { font-size: 24px; margin-bottom: 16px; }
.product-description-block p { color: var(--text-dim); margin-bottom: 16px; }

.product-reviews-block { max-width: 780px; margin: 0 auto; }
.product-reviews-block #reviews { border-top: 1px solid var(--border-soft); padding-top: 48px; }
.product-reviews-block #comments h2, .product-reviews-block .woocommerce-Reviews-title { font-size: 24px; margin-bottom: 24px; }
.product-reviews-block .commentlist { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.product-reviews-block .comment_container { display: flex; gap: 14px; }
.product-reviews-block .comment-text {
  background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 18px 20px; flex: 1;
}
.product-reviews-block .comment-text .meta { font-size: 13px; color: var(--text-faint); margin-bottom: 8px; }
.product-reviews-block .woocommerce-noreviews { color: var(--text-dim); margin-bottom: 24px; }
.product-reviews-block .comment-reply-title { font-size: 20px; display: block; margin-bottom: 18px; font-family: 'Fraunces', serif; }
.product-reviews-block .comment-form-rating { margin-bottom: 18px; }
.product-reviews-block .comment-form-rating label { display: block; margin-bottom: 8px; }
.product-reviews-block .comment-form-comment,
.product-reviews-block .comment-form-author,
.product-reviews-block .comment-form-email { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.product-reviews-block .comment-form-comment label,
.product-reviews-block .comment-form-author label,
.product-reviews-block .comment-form-email label { font-size: 12.5px; font-weight: 600; }
.product-reviews-block .form-submit input { padding: 14px 28px; border-radius: var(--radius-pill); background: var(--grad-green); color: #fff; font-weight: 600; cursor: pointer; }

@media (max-width: 900px) {
  .product-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product-short-desc { max-width: none; }
  .product-reviews-block .comment_container { flex-direction: column; }
}
@media (max-width: 480px) {
  .product-qty-row { flex-direction: column; }
  .product-qty-row .quantity { align-self: flex-start; }
}