:root{
  /* ===== PREMIUM ORGANIC PALETTE ===== */
  --bg:#f6f8f4;
  --panel:#ffffff;
  --text:#1f2a1f;
  --muted:#6f7c6f;

  --primary:#1f5f3a;
  --accent:#3e8f5a;
  --premium:#c7a44b;

  --border:rgba(31,95,58,.12);

  --max:1120px;
  --radius:18px;

  /* ===== TYPO / PREMIUM POLISH ===== */
  --serif:"Playfair Display", ui-serif, Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --ring:rgba(31,95,58,.35);
  --cardShadow:0 22px 55px rgba(31,95,58,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  color:var(--text);
  background:linear-gradient(180deg,#f9fbf7 0%,var(--bg) 100%);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-open{
  overflow:hidden;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ================= HEADER ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(31,95,58,.10);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:14px;
  transition:padding .2s ease;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:.14em;
  min-width:0;
  text-decoration:none;
}

.brand-logo{
  width:59px;
  height:59px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
}

.brand-mark{
  font-weight:900;
  font-size:21px;
  color:var(--primary);
  letter-spacing:.22em;
  position:relative;
  line-height:1;
}

.brand-mark::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:20px;
  height:1.5px;
  background:linear-gradient(90deg,var(--premium),transparent);
  opacity:.8;
  border-radius:2px;
}

.brand-sub{
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.30em;
  color:rgba(31,42,31,.48);
  line-height:1;
  text-transform:uppercase;
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(31,95,58,.04);
  color:var(--primary);
  border:1px solid rgba(31,95,58,.10);
  border-radius:14px;
  padding:10px 14px;
  font:inherit;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(31,95,58,.06);
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

.menu-toggle:hover{
  background:rgba(31,95,58,.08);
  border-color:rgba(31,95,58,.16);
  transform:translateY(-1px);
}

.menu-toggle.is-active{
  background:rgba(31,95,58,.08);
  border-color:rgba(31,95,58,.18);
}

.nav{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  padding:10px 10px;
  color:var(--muted);
  border-radius:12px;
  font-weight:600;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}

.nav a:hover{
  background:rgba(31,95,58,.06);
  color:var(--primary);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  color:#ffffff !important;
  font-weight:900;
  border-radius:999px;
  padding:10px 16px !important;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 12px 28px rgba(31,95,58,.22);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 18px 40px rgba(31,95,58,.28);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 10px 22px rgba(31,95,58,.20);
}

/* ================= HERO ================= */
.hero{padding:40px 0 28px}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  align-items:stretch;
}

@media(max-width:920px){
  .hero{padding:18px 0 22px}
  .hero-grid{grid-template-columns:1fr}
}

/* ================= CARDS ================= */
.card{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(31,95,58,.10);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--cardShadow);
  transition:transform .20s ease,box-shadow .20s ease,border-color .20s ease;
}

.card:hover{
  transform:translateY(-1.5px);
  border-color:rgba(31,95,58,.18);
  box-shadow:0 26px 78px rgba(31,95,58,.12);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(900px 380px at 25% 15%, rgba(255,255,255,.55), transparent 55%);
  opacity:.55;
}

.card.pad::before{opacity:.25}
.card.pad{padding:22px}

@media(max-width:540px){
  .card.pad{padding:18px}
}

.kicker{
  color:var(--primary);
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}

h1{
  margin:10px 0 12px;
  font-size:42px;
  line-height:1.08;
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

@media(max-width:540px){
  h1{font-size:32px;line-height:1.12}
}

.lead{
  color:rgba(31,42,31,.68);
  font-size:17px;
  line-height:1.65;
  margin:0 0 16px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.actions .ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(31,95,58,.22);
  color:var(--primary);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.actions .ghost:hover{
  background:rgba(31,95,58,.08);
  border-color:rgba(31,95,58,.34);
  transform:translateY(-1px);
}

/* ================= MEDIA CARDS ================= */
.media{position:relative;min-height:360px}

@media(max-width:920px){
  .media{min-height:320px}
}

@media(max-width:540px){
  .media{min-height:260px}
}

.media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.03) contrast(1.02);
  transform:scale(1);
  transition:transform .55s ease,filter .35s ease;
  backface-visibility:hidden;
}

.card.media:hover img{
  transform:scale(1.02);
  filter:saturate(1.06) contrast(1.03);
}

.media .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.28) 68%,
    rgba(0,0,0,.46) 100%
  );
  opacity:.94;
  transition:opacity .3s ease;
}

.card.media:hover .overlay{opacity:.90}

.media .label{
  position:absolute;
  left:18px;
  bottom:16px;
  right:18px;
}

.media .label strong{
  display:block;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:#fff;
}

.media .label span{
  display:block;
  color:rgba(255,255,255,.86);
  font-size:13px;
  margin-top:4px;
}

.hero .card.media{
  border-radius:22px;
  overflow:hidden;
}

.card.media{
  background:linear-gradient(135deg, rgba(31,95,58,.10), rgba(199,164,75,.10));
}

.card.media img{
  background:transparent;
}

.card.media img[src=""],
.card.media img:not([src]){
  display:none;
}

.card.media::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(900px 300px at 20% 20%, rgba(255,255,255,.45), transparent 60%);
  pointer-events:none;
  opacity:.6;
}

/* ================= SECTIONS ================= */
.section{padding:44px 0}

.section h2{
  margin:0 0 12px;
  font-size:26px;
  color:var(--primary);
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:.01em;
}

.section p{
  color:var(--muted);
  margin:0 0 12px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

@media(max-width:920px){
  .grid3{grid-template-columns:1fr}
}

.tile{padding:18px}

.tile h3{
  margin:4px 0 6px;
  font-size:16px;
  color:var(--text);
}

.tile p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

hr.sep{
  border:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(31,95,58,.18),
    rgba(199,164,75,.18),
    rgba(31,95,58,.18),
    transparent
  );
  margin:26px 0;
}

/* ================= PAGE HERO ================= */
.page-hero{padding:36px 0 18px}

.breadcrumb{
  color:var(--muted);
  font-size:13px;
}

.page-title{
  margin:10px 0 10px;
  font-size:34px;
  line-height:1.12;
  color:var(--primary);
  font-family:var(--serif);
  font-weight:800;
}

.page-sub{
  color:var(--muted);
  margin:0 0 18px;
}

/* ================= CARDS GRID ================= */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

@media(max-width:920px){
  .cards{grid-template-columns:1fr}
}

/* ================= VARIETIES ================= */
.variety{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:14px;
  padding:16px;
}

@media(max-width:640px){
  .variety{grid-template-columns:1fr}
}

.variety img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(31,95,58,.12);
  background:#eef3ec;
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(31,95,58,.06);
  border:1px solid rgba(31,95,58,.12);
  color:var(--muted);
  font-size:12px;
}

.meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0 10px;
}

.kv{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.kv b{
  color:var(--text);
  font-weight:900;
}

.small{
  font-size:13px;
  color:rgba(31,42,31,.62);
  line-height:1.7;
}

/* ================= DETAILS ================= */
details{
  border:1px solid rgba(31,95,58,.14);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(31,95,58,.03);
}

details summary{
  cursor:pointer;
  font-weight:900;
  color:var(--primary);
}

details p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

/* ================= FOOTER ================= */
.site-footer{
  padding:0;
  border-top:1px solid rgba(31,95,58,.10);
  background:linear-gradient(180deg,#f6f8f4 0%,#edf2eb 100%);
  color:rgba(31,42,31,.70);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 0.75fr 0.75fr 1fr;
  gap:44px 48px;
  padding:52px 0 44px;
}

/* ---- Brand col ---- */
.footer-brand{display:flex;flex-direction:column;gap:0}
.footer-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-wf-logo{width:36px;height:36px;object-fit:contain}
.footer-brand-name{font-weight:800;font-size:14px;letter-spacing:.22em;color:var(--primary);line-height:1}
.footer-brand-sub-name{font-weight:400;opacity:.50;letter-spacing:.28em}
.footer-tagline{font-size:13px;color:rgba(31,42,31,.60);line-height:1.7;margin:0 0 4px;max-width:260px}
.footer-motto{font-size:11px;letter-spacing:.07em;color:rgba(31,42,31,.38);margin:0;line-height:1.6}

/* ---- Section label (shared) ---- */
.footer-section-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(31,95,58,.60);
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(31,95,58,.08);
}

/* ---- Medium articles ---- */
.footer-medium{margin-top:24px;padding-top:20px;border-top:1px solid rgba(31,95,58,.08)}
.footer-medium-link{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:rgba(31,42,31,.60);
  font-size:12px;
  line-height:1.6;
  transition:color .18s ease;
  text-decoration:none;
}
.footer-medium-link:hover{color:var(--primary)}
.footer-medium-icon{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--primary)}
.footer-ext-icon{width:10px;height:10px;flex-shrink:0;margin-top:4px;margin-left:auto;color:rgba(31,42,31,.28);transition:color .18s}
.footer-medium-link:hover .footer-ext-icon{color:var(--primary)}

/* ---- Quick links col ---- */
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{
  font-size:13px;
  color:rgba(31,42,31,.58);
  transition:color .18s ease;
  text-decoration:none;
}
.footer-links a:hover{color:var(--primary)}

/* ---- Connect / socials col ---- */
.footer-socials{display:flex;gap:8px;flex-wrap:wrap}
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(31,95,58,.12);
  background:transparent;
  color:rgba(31,42,31,.50);
  text-decoration:none;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
  cursor:pointer;
}
.social-icon:not(.social-disabled):hover{
  background:rgba(31,95,58,.07);
  border-color:rgba(31,95,58,.20);
  color:var(--primary);
  transform:translateY(-2px);
}
.social-icon svg{width:16px;height:16px}
.social-disabled{opacity:.22;cursor:not-allowed;pointer-events:none}

/* ---- Copyright bar ---- */
.footer-bottom{
  border-top:1px solid rgba(31,95,58,.10);
  padding:16px 0;
  background:rgba(31,95,58,.03);
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}
.footer-bottom-inner span{
  font-size:11.5px;
  color:rgba(31,42,31,.48);
  letter-spacing:.02em;
}
.footer-bottom-loc{
  font-size:10.5px !important;
  letter-spacing:.10em !important;
  text-transform:uppercase;
  opacity:.7;
}

.footer-policy-links{font-size:11px;color:rgba(31,42,31,.44);display:flex;flex-wrap:wrap;gap:4px 10px;letter-spacing:.01em}
.footer-policy-links a{color:rgba(31,42,31,.44);text-decoration:none;transition:color .15s}
.footer-policy-links a:hover{color:var(--primary)}
.checkout-policy-note{font-size:11.5px;color:rgba(31,42,31,.52);text-align:center;margin:8px 0 0;line-height:1.6}
.checkout-policy-note a{color:rgba(31,42,31,.52);text-decoration:underline}
.checkout-policy-note a:hover{color:var(--primary)}

/* ---- Legacy util (used elsewhere) ---- */
.notice{font-size:12px;color:rgba(31,42,31,.60);margin-top:12px}

/* ---- Responsive ---- */
/* Tablet: 2-column — brand full width top, then 3 cols below */
@media(max-width:960px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:36px 40px;
    padding:44px 0 36px;
  }
  .footer-brand{grid-column:1 / -1}
}

/* Mobile: 2-col grid */
@media(max-width:640px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px 24px;
    padding:36px 0 28px;
  }
  .footer-brand{grid-column:1 / -1}
  .footer-trade-col{grid-column:1 / -1}
  .footer-tagline{max-width:100%}
}

/* Small mobile: single column */
@media(max-width:420px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:24px;
    padding:28px 0 20px;
  }
  .footer-brand,.footer-trade-col{grid-column:auto}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ================= ACCESSIBILITY ================= */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:3px;
  border-radius:14px;
}

/* ================= VIDEO WRAPPER ================= */
.hero-video-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

.hero-video-wrapper video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  position:relative;
  z-index:1;
}

.hero-video-wrapper .overlay{z-index:2;}
.hero-video-wrapper .label{z-index:3;}
#heroVideoWrap .label{pointer-events:none;}

/* ===== PREMIUM CENTER PLAY BUTTON ===== */
.video-toggle-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(.95);
  z-index:5;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:999px;
  cursor:pointer;
  font-size:22px;
  font-weight:900;
  line-height:1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, background .22s ease;
}

.hero-video-wrapper:hover .video-toggle-btn{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, -50%) scale(1);
}

.hero-video-wrapper.is-playing .video-toggle-btn{
  opacity:0;
  pointer-events:none;
}

.video-toggle-btn:hover{
  background:rgba(0,0,0,.65);
  transform:translate(-50%, -50%) scale(1.06);
}

@media (hover:none){
  .hero-video-wrapper .video-toggle-btn{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
  }
}

/* ================= AUTHENTIC MICRO-TEXTURE ================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(31,95,58,.18), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(199,164,75,.14), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ================= VARIETIES TOOLBAR ================= */
.varieties-toolbar{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.6fr .7fr auto;
  gap:12px;
  align-items:center;
}

@media (max-width:820px){
  .varieties-toolbar{grid-template-columns:1fr}
}

.varieties-search input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(31,95,58,.14);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  box-shadow:0 10px 26px rgba(31,95,58,.06);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.varieties-search input::placeholder{
  color:rgba(31,42,31,.45);
}

.varieties-search input:focus{
  border-color:rgba(31,95,58,.30);
  box-shadow:0 0 0 4px rgba(31,95,58,.12), 0 14px 34px rgba(31,95,58,.10);
  transform:translateY(-1px);
}

.varieties-filter select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(31,95,58,.14);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  box-shadow:0 10px 26px rgba(31,95,58,.06);
  outline:none;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.varieties-filter select:focus{
  border-color:rgba(31,95,58,.30);
  box-shadow:0 0 0 4px rgba(31,95,58,.12), 0 14px 34px rgba(31,95,58,.10);
  transform:translateY(-1px);
}

.varieties-count{
  display:flex;
  justify-content:flex-end;
}

@media (max-width:820px){
  .varieties-count{justify-content:flex-start;}
}

/* =========================================================
ULTRA PREMIUM MEDIA CARDS — WGAN FINAL PATCH
========================================================= */
.card.media.premium-card{
  border-radius:22px;
  overflow:hidden;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease,
    border-color .35s ease;
}

.card.media.premium-card img{
  transition:
    transform 1.15s cubic-bezier(.22,.61,.36,1),
    filter .6s ease;
  will-change:transform;
}

.card.media.premium-card .overlay{
  background:linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,.12) 72%,
    transparent 100%
  );
  transition:opacity .45s ease;
}

.card.media.premium-card .label{
  transform:translateY(8px);
  opacity:.94;
  transition:all .45s ease;
}

.card.media.premium-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:
    0 28px 70px rgba(0,0,0,.18),
    0 10px 26px rgba(31,95,58,.14);
}

.card.media.premium-card:hover img{
  transform:scale(1.085);
  filter:saturate(1.06) contrast(1.05);
}

.card.media.premium-card:hover .overlay{
  opacity:.88;
}

.card.media.premium-card:hover .label{
  transform:translateY(0);
  opacity:1;
}

@media (max-width:768px){
  .card.media.premium-card:hover{
    transform:none;
    box-shadow:var(--cardShadow);
  }
  .card.media.premium-card:hover img{
    transform:none;
  }
}

/* =========================================
MOBILE MENU VERSION
========================================= */
@media (max-width: 820px){

  .site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(31,95,58,.08);
    box-shadow:0 10px 24px rgba(31,95,58,.05);
  }

  .header-inner{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px 12px;
    padding:10px 0 12px;
    align-items:center;
  }

  .brand{
    grid-column:1;
    justify-content:flex-start;
    gap:7px;
    width:100%;
  }

  .brand-logo{
    width:46px;
    height:46px;
  }

  .brand-mark{
    font-size:15px;
    line-height:1;
    letter-spacing:.18em;
  }

  .brand-mark::after{
    width:16px;
    bottom:-3px;
  }

  .brand-sub{
    font-size:8.5px;
    line-height:1;
    letter-spacing:.24em;
  }

  .menu-toggle{
    display:inline-flex;
    grid-column:2;
    justify-self:end;
    min-height:42px;
    padding:10px 14px;
    font-size:13px;
  }

  .nav{
    display:none;
    grid-column:1 / -1;
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:8px;
    justify-content:stretch;
    align-items:stretch;
    padding-top:4px;
  }

  .nav.is-open{
    display:grid;
  }

  .nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    min-height:40px;
    padding:9px 8px;
    font-size:12px;
    line-height:1.2;
    text-align:center;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    background:rgba(31,95,58,.03);
    border:1px solid rgba(31,95,58,.08);
    border-radius:14px;
  }

  .nav .btn{
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    min-height:44px;
    padding:11px 14px !important;
    color:#ffffff !important;
    background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:0 14px 28px rgba(31,95,58,.18) !important;
  }

  .hero{
    padding-top:18px;
  }
}

@media (max-width:520px){

  .container{
    padding:0 16px;
  }

  .brand-logo{
    width:42px;
    height:42px;
  }

  .brand-mark{
    font-size:14px;
    letter-spacing:.16em;
  }

  .brand-sub{
    font-size:8px;
    letter-spacing:.20em;
  }

  .menu-toggle{
    min-height:40px;
    padding:9px 12px;
    font-size:12px;
  }

  .nav{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .nav a{
    font-size:12px;
    min-height:40px;
    padding:9px 8px;
  }

  .nav .btn{
    min-height:44px;
  }

  h1{
    font-size:30px;
    line-height:1.12;
  }

  .lead{
    font-size:16px;
    line-height:1.7;
  }

  .actions{
    gap:10px;
  }

  .actions .ghost,
  .actions .btn,
  .btn{
    width:100%;
    text-align:center;
    justify-content:center;
  }
}

@media (max-width:380px){

  .brand-logo{
    width:37px;
    height:37px;
  }

  .brand-mark{
    font-size:13px;
    letter-spacing:.14em;
  }

  .brand-sub{
    font-size:7.5px;
    letter-spacing:.18em;
  }

  .menu-toggle{
    padding:9px 10px;
    font-size:11.5px;
  }

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

  .nav .btn{
    grid-column:auto;
  }
}

/* ================= WHATSAPP FLOAT BUTTON ================= */
.ig-float{
  position:fixed;
  bottom:88px;
  right:24px;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(188,24,136,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ig-float:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(188,24,136,.48);
}
.ig-float svg{width:22px;height:22px}
@media(max-width:540px){
  .ig-float{bottom:82px;width:44px;height:44px}
  .ig-float svg{width:20px;height:20px}
}

.wa-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  background:#25d366;
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:12px 18px 12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 4px 20px rgba(0,0,0,.16),0 6px 28px rgba(37,211,102,.28);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.wa-float:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 24px rgba(0,0,0,.14),0 10px 32px rgba(37,211,102,.32);
  color:#fff;
}
.wa-float svg{width:22px;height:22px;flex-shrink:0}
@media(max-width:540px){
  .wa-float span{display:none}
  .wa-float{padding:13px}
}

/* ================= CONTACT PAGE ================= */
.contact-info-card,.contact-form-card{display:flex;flex-direction:column}

.contact-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(31,95,58,.08);
}
.contact-row:last-of-type{border-bottom:none}
.contact-icon{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(31,95,58,.07);
  border:1px solid rgba(31,95,58,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);
}
.contact-icon svg{width:16px;height:16px}
.contact-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(31,42,31,.45);margin-bottom:3px}
.contact-value{font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
a.contact-value:hover{color:var(--primary)}

.contact-response-note{
  display:flex;align-items:center;gap:8px;
  margin:20px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(31,95,58,.05);
  border:1px solid rgba(31,95,58,.10);
  font-size:13px;color:rgba(31,42,31,.70);
}
.contact-response-note svg{width:15px;height:15px;flex-shrink:0;color:var(--primary)}

.contact-what-to-include{
  margin-top:20px;
  padding:16px;
  border-radius:14px;
  background:rgba(31,95,58,.03);
  border:1px solid rgba(31,95,58,.08);
}
.contact-checklist{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.contact-checklist li{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:rgba(31,42,31,.72);
}
.contact-checklist li::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--premium);flex-shrink:0;
}

/* Form fields */
.contact-form{display:flex;flex-direction:column;gap:16px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(31,42,31,.65)}
.req{color:var(--primary)}
.form-input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(31,95,58,.16);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
  box-sizing:border-box;
}
.form-input::placeholder{color:rgba(31,42,31,.38)}
.form-input:focus{
  border-color:rgba(31,95,58,.35);
  background:#fff;
  box-shadow:0 0 0 4px rgba(31,95,58,.10),0 8px 20px rgba(31,95,58,.06);
}
.form-textarea{resize:vertical;min-height:130px}
.contact-submit-btn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:4px;padding:14px 28px;
  font-size:15px;font-weight:700;
  width:100%;justify-content:center;
}

@media(max-width:640px){
  .form-row-2{grid-template-columns:1fr}
}

/* ================= PROCESS VIDEO ================= */
.process-video-wrap{
  position:relative;
  width:100%;
  min-height:320px;
  background:#111;
  overflow:hidden;
  border-radius:var(--radius);
}
.process-video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.process-video-wrap .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 60%)}
.process-video-wrap .label{position:absolute;bottom:20px;left:20px;color:#fff}
.process-video-wrap .label strong{display:block;font-size:13px;letter-spacing:.10em;text-transform:uppercase;font-weight:800}
.process-video-wrap .label span{font-size:13px;opacity:.8}
.process-video-wrap .video-toggle-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,.55);
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.process-video-wrap .video-toggle-btn:hover{background:rgba(255,255,255,.30);transform:translate(-50%,-50%) scale(1.08)}

/* ================= FOOTER TRADE & GOVT LINKS ================= */
.footer-trade-col{}
.footer-trade-links{display:flex;flex-direction:column;gap:0}
.footer-trade-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(31,95,58,.06);
  color:rgba(31,42,31,.55);
  font-size:12.5px;
  text-decoration:none;
  transition:color .18s;
}
.footer-trade-link:last-child{border-bottom:none}
.footer-trade-link:hover{color:var(--primary)}
.footer-trade-link:hover svg{opacity:.7}
.footer-trade-link svg{width:10px;height:10px;flex-shrink:0;opacity:.35;margin-left:auto;transition:opacity .18s}
.footer-trade-tag{
  display:inline-block;
  font-size:9px;font-weight:600;letter-spacing:.08em;
  color:rgba(31,95,58,.55);
  text-transform:uppercase;
  min-width:38px;
  flex-shrink:0;
}

/* ================= WGAN GALLERY STRIP ================= */
.gallery-section{
  padding:60px 0 52px;
  background:var(--bg);
  overflow:hidden;
}
.gallery-section-head{
  text-align:center;
  margin-bottom:36px;
}
.gallery-section-head .section-eyebrow{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.gallery-section-head h2{
  font-family:var(--serif);
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:600;color:var(--primary);
  margin:0;letter-spacing:.01em;
}

.gallery-track{
  position:relative;
  width:100%;
  overflow:hidden;
  cursor:grab;
  -webkit-mask:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.gallery-track:active{cursor:grabbing}

.gallery-inner{
  display:flex;
  gap:16px;
  width:max-content;
  animation:gallery-scroll 360s linear infinite;
  will-change:transform;
}
.gallery-inner.paused{animation-play-state:paused}
.gallery-inner.reverse{animation-direction:reverse}

@keyframes gallery-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.gallery-slide{
  flex-shrink:0;
  width:300px;
  height:210px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(31,95,58,.10);
  position:relative;
}
.gallery-slide img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.gallery-slide:hover img{transform:scale(1.06)}
.gallery-slide-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 100%);
  color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .3s;
}
.gallery-slide:hover .gallery-slide-caption{opacity:1}

@media(max-width:600px){
  .gallery-slide{width:220px;height:155px}
}


/* ================================================================
   WGAN FARMS — PREMIUM TRUST & CREDIBILITY LAYER
   All classes are additive — zero existing styles modified
================================================================ */

/* ── Announcement Ribbon ── */
.ann-ribbon{
  background:#2a6744;
  color:rgba(255,255,255,.88);
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.03em;
  padding:10px 18px;
  text-align:center;
  position:relative;
  z-index:51;
}
/* Rotator: one slide at a time — slide right→center→left */
.ann-rotator{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ann-slide{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:0;
  transform:translateX(36px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.25,.46,.45,.94);
  pointer-events:none;
  white-space:nowrap;
  left:0;right:0;
  justify-content:center;
}
.ann-slide.ann-slide-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.ann-slide.ann-slide-exit{
  opacity:0;
  transform:translateX(-36px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.55,.06,.68,.19);
}
.ann-icon{
  width:13px;height:13px;
  flex-shrink:0;
  opacity:.85;
}
/* Legacy classes kept for safety, hidden */
.ann-inner{display:none}
@media(max-width:600px){
  .ann-ribbon{font-size:11.5px;padding:9px 12px}
  .ann-rotator{height:24px}
  .ann-slide{font-size:11.5px}
}

/* ── Trust Icon Strip (homepage) ── */
.trust-strip{
  padding:22px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.82);
}
.trust-strip-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0 36px;
  flex-wrap:wrap;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:600;
  color:var(--primary);
  letter-spacing:.025em;
  white-space:nowrap;
}
.trust-icon{
  width:17px;height:17px;
  flex-shrink:0;
  opacity:.8;
}
@media(max-width:700px){
  .trust-strip-grid{justify-content:center;gap:10px 20px}
  .trust-item{font-size:12px}
}

/* ── Product Page Trust Row ── */
.product-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.product-trust-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.01em;
}
.product-trust-icon{
  width:13px;height:13px;
  color:var(--accent);
  flex-shrink:0;
}

/* ── Footer Payment Strip ── */
.footer-pay-strip{
  border-top:1px solid rgba(31,95,58,.08);
  padding:12px 0;
  background:rgba(31,95,58,.02);
}
.footer-pay-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0 12px;
  flex-wrap:wrap;
  font-size:11px;
  color:rgba(31,42,31,.40);
  letter-spacing:.03em;
}
.footer-pay-label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:600;
  color:rgba(31,42,31,.52);
}
.footer-pay-icon{
  width:11px;height:11px;
  flex-shrink:0;
}
.footer-pay-sep{opacity:.4}


/* ================================================================
   PHASE 3 — HOMEPAGE ENHANCEMENTS
   From Soil to Soul · Process Steps · Testimonials
================================================================ */

/* ── Shared: centered section heading ── */
.section-head-center{
  text-align:center;
  margin-bottom:36px;
}
.section-head-center .kicker{
  margin-bottom:10px;
}
.section-head-center h2{
  font-family:var(--serif);
  font-size:26px;
  color:var(--primary);
  margin:0;
  line-height:1.35;
}

/* ── From Soil to Soul ── */
.soil-soul-section{
  background:rgba(199,164,75,.04);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.soil-soul-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:44px;
  align-items:center;
}
.soil-soul-text .kicker{
  margin-bottom:14px;
}
.soil-soul-text h2{
  font-family:var(--serif);
  font-size:26px;
  color:var(--primary);
  margin:0 0 18px;
  line-height:1.38;
}
.soil-soul-text .lead{
  margin:0 0 14px;
}
.soil-soul-bq{
  margin:0;
  padding:28px 30px;
  border-left:3px solid var(--premium);
  background:rgba(255,255,255,.75);
  border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(31,95,58,.06);
}
.soil-soul-bq p{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  font-style:italic;
  margin:0 0 18px;
}
.soil-soul-bq cite{
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.04em;
  font-style:normal;
}
@media(max-width:760px){
  .soil-soul-grid{grid-template-columns:1fr;gap:28px}
}

/* ── Process Steps ── */
.process-section{
  background:var(--panel);
}
.process-steps{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.process-step{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 14px;
  max-width:220px;
}
.step-num{
  font-size:11px;
  font-weight:700;
  color:var(--premium);
  letter-spacing:.14em;
  margin-bottom:12px;
  font-family:var(--sans);
}
.step-icon{
  width:52px;height:52px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  background:var(--bg);
  flex-shrink:0;
}
.step-icon svg{
  width:22px;height:22px;
  stroke:var(--primary);
}
.step-title{
  font-family:var(--serif);
  font-size:16px;
  color:var(--text);
  margin:0 0 8px;
  font-weight:600;
}
.step-desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
  margin:0;
}
.process-connector{
  flex-shrink:0;
  width:40px;
  height:1.5px;
  background:linear-gradient(90deg,var(--border),rgba(199,164,75,.35),var(--border));
  margin-top:52px;
  align-self:flex-start;
}
@media(max-width:680px){
  .process-steps{flex-direction:column;align-items:center;gap:24px}
  .process-connector{width:1.5px;height:22px;background:linear-gradient(180deg,var(--border),rgba(199,164,75,.35),var(--border));margin-top:0}
  .process-step{max-width:100%;padding:0}
}

/* ── Testimonials ── */
.testimonials-section{
  background:rgba(31,95,58,.025);
  border-top:1px solid var(--border);
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.testimonial-card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:28px 24px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:0;
  box-shadow:0 2px 16px rgba(31,95,58,.05);
  transition:box-shadow .22s ease,transform .22s ease;
}
.testimonial-card:hover{
  box-shadow:var(--cardShadow);
  transform:translateY(-2px);
}
.testi-quote{
  font-family:var(--serif);
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  margin:0 0 20px;
  font-style:italic;
  flex:1;
}
.testi-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.testi-name{
  font-size:13px;
  font-weight:600;
  color:var(--primary);
  letter-spacing:.02em;
}
.testi-loc{
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.03em;
}
@media(max-width:760px){
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .testimonials-grid{grid-template-columns:1fr}
}


/* ================================================================
   REFINEMENT — Payment Badges
================================================================ */
.footer-pay-divider{
  display:inline-block;
  width:1px;
  height:14px;
  background:rgba(31,42,31,.14);
  margin:0 6px;
  flex-shrink:0;
  align-self:center;
}
.pay-badges{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.pay-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:19px;
  padding:0 6px;
  border:1px solid rgba(31,42,31,.16);
  border-radius:3px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(31,42,31,.44);
  background:rgba(255,255,255,.88);
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.pay-badge-visa{
  font-style:italic;
  letter-spacing:.05em;
  color:rgba(26,31,113,.48);
}
.pay-badge-mc{
  padding:0 5px;
  color:rgba(31,42,31,.50);
}
.pay-badge-mc svg{display:block}


/* ================================================================
   FINAL REFINEMENT PASS
================================================================ */

/* Fix: .soil-soul-link had no button styling (ghost only scoped to .actions) */
.soil-soul-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(31,95,58,.22);
  color:var(--primary);
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  font-size:13.5px;
  text-decoration:none;
  letter-spacing:.01em;
  margin-top:18px;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.soil-soul-link:hover{
  background:rgba(31,95,58,.07);
  border-color:rgba(31,95,58,.32);
  transform:translateY(-1px);
}

/* Mobile: tighten section rhythm */
@media(max-width:640px){
  .section{padding:32px 0}
  .soil-soul-grid{gap:24px}
  .soil-soul-bq{padding:22px 22px}
  .soil-soul-bq p{font-size:15.5px}
  .testimonial-card{padding:22px 20px}
  .trust-strip{padding:16px 0}
}

/* Mobile: pay badges wrap gracefully */
@media(max-width:480px){
  .footer-pay-inner{gap:6px 10px}
  .pay-badges{gap:4px}
}

/* ================================================================
   TESTIMONIAL — Verified Buyer tag
================================================================ */
.testi-verified{
  display:block;
  font-size:10.5px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.03em;
  margin-top:5px;
}

/* ================================================================
   COMPLIANCE & REGISTRATION — About page
================================================================ */
.trust-reg-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:14px;
}
.trust-reg-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(31,95,58,.06);
  border:1px solid rgba(31,95,58,.14);
  border-radius:10px;
  padding:8px 14px;
}
.trust-reg-icon{
  width:14px;height:14px;
  stroke:var(--primary);
  flex-shrink:0;
  opacity:.85;
}
.trust-reg-value{
  font-size:12.5px;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.02em;
  white-space:nowrap;
}

/* ================================================================
   MOBILE STICKY CTA
================================================================ */
.mobile-sticky-cta{display:none}
@media(max-width:640px){
  body{padding-bottom:68px}
  .mobile-sticky-cta{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:998;
    background:var(--panel);
    border-top:1px solid var(--border);
    padding:10px 16px;
    gap:10px;
    box-shadow:0 -4px 20px rgba(31,95,58,.10);
  }
  .mobile-sticky-buy{
    flex:1;
    text-align:center;
    justify-content:center;
  }
  .mobile-sticky-wa{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 16px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-weight:700;
    font-size:13.5px;
    text-decoration:none;
  }
  /* wa-float replaced by sticky bar on mobile */
  .wa-float{display:none}
  /* push ig-float above sticky bar */
  .ig-float{bottom:80px}
}

/* ================================================================
   MOBILE SEARCH BAR — max-width:768px only, desktop untouched
================================================================ */
.mobile-search-bar{display:none}

@media(max-width:768px){
  .mobile-search-bar{
    display:block;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    padding:8px 14px 10px;
  }
  .mobile-search-form{margin:0}
  .mobile-search-field{
    display:flex;
    align-items:center;
    gap:8px;
    background:#eef2ee;
    border:1px solid rgba(31,95,58,.12);
    border-radius:10px;
    padding:0 12px;
    height:40px;
  }
  .mobile-search-input{
    flex:1;
    border:none;
    background:transparent;
    font-family:var(--sans);
    font-size:14px;
    color:var(--text);
    outline:none;
    min-width:0;
  }
  .mobile-search-input::placeholder{color:var(--muted);font-size:13.5px}
  .mob-search-icon{width:16px;height:16px;stroke:var(--muted);flex-shrink:0}
  .mobile-mic-btn{
    background:none;border:none;padding:4px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
    border-radius:6px;
  }
  .mob-mic-icon{width:17px;height:17px;stroke:var(--primary);flex-shrink:0}
  .mobile-location-btn{
    display:flex;align-items:center;gap:5px;
    background:none;border:none;
    padding:6px 0 0;cursor:pointer;
    font-family:var(--sans);font-size:12px;
    color:var(--muted);width:100%;text-align:left;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-loc-icon{width:13px;height:13px;stroke:var(--primary);flex-shrink:0}
  .mob-loc-text strong{color:var(--text);font-weight:700}
  .mob-loc-chevron{width:12px;height:12px;stroke:var(--muted);margin-left:auto}

  /* Search suggestions dropdown */
  .mobile-search-bar{position:relative}
  #search-suggestions{
    display:none;
    position:absolute;
    top:100%;left:14px;right:14px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    list-style:none;
    margin:4px 0 0;
    padding:4px 0;
    z-index:10000;
    overflow:hidden;
  }
  #search-suggestions li a{
    display:flex;
    flex-direction:column;
    gap:1px;
    padding:10px 14px;
    text-decoration:none;
    transition:background .12s;
  }
  #search-suggestions li a:hover,
  #search-suggestions li a:active{background:rgba(31,95,58,.07)}
  #search-suggestions .sug-name{font-size:13px;font-weight:600;color:var(--primary);font-family:var(--sans)}
  #search-suggestions .sug-sub{font-size:11px;color:var(--muted);font-family:var(--sans)}
}

/* ================================================================
   MOBILE BOTTOM NAV — max-width:768px only, desktop untouched
================================================================ */
.mobile-bottom-nav{display:none}

@media(max-width:768px){
  /* Override body padding for bottom nav height */
  body{padding-bottom:72px}
  /* Old sticky CTA replaced by bottom nav */
  .mobile-sticky-cta{display:none!important}
  /* Float buttons: push above bottom nav */
  .ig-float{bottom:82px}
  /* Restore WA float as icon-only circle above IG float */
  .wa-float{display:flex;bottom:134px;}
  .wa-float span{display:none;}

  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:9999;
    background:var(--panel);
    border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(31,95,58,.10);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mob-nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-family:var(--sans);
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:4px 2px;
    letter-spacing:.01em;
    position:relative;
    transition:color .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-nav-icon{
    width:21px;height:21px;
    stroke:currentColor;
    fill:none;
    flex-shrink:0;
  }
  .mob-nav-item.mob-nav-active{color:var(--primary)}
  .mob-nav-buy{color:var(--primary);font-weight:700}
  /* Cart item count badge */
  .mob-cart-badge{
    position:absolute;
    top:2px;
    left:50%;
    transform:translateX(4px);
    background:var(--primary);
    color:#fff;
    font-size:8.5px;
    font-weight:800;
    min-width:15px;
    height:15px;
    border-radius:8px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0 3px;
    line-height:1;
    font-family:var(--sans);
  }
  .mob-cart-badge.visible{display:flex}
}

/* ================================================================
   HERO MICRO-REFINEMENTS — spacing only, no layout/color changes
================================================================ */
/* h1 → lead: +2px breathing (12→14px) */
.hero h1{margin-bottom:14px}
/* lead → actions: effective gap 16→22px (+6px) via margin collapse */
.hero .lead{margin-bottom:22px}
/* actions: reinforce top margin + 2px wider button gap */
.hero .actions{margin-top:20px;gap:14px}