/* ============================================================
   8020 MARKET + 8020 MEAT SUPPLIES — DESIGN SYSTEM
   Signature: the hang-tag — the same string-tag label found on
   their onion/butternut nets is used throughout as the recurring
   visual device for prices, categories and callouts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- palette ---- */
  --paper:      #F2EFE2;   /* sage-tinted parchment, not the AI-cliche cream */
  --paper-dim:  #E8E3D0;
  --forest:     #163925;   /* deep produce-crate green */
  --forest-2:   #0E2818;
  --leaf:       #6FA83B;   /* fresh leaf accent */
  --leaf-light: #A9D179;
  --paprika:    #E2572B;   /* ripe paprika/tomato — shared with the meat brand */
  --paprika-dk: #B8401C;
  --charcoal:   #14161A;   /* meat / dark sections */
  --charcoal-2: #1E2126;
  --line:       #D8D0B8;
  --line-dark:  rgba(255,255,255,0.14);
  --cream-text: #F7F4E9;

  /* ---- type ---- */
  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ---- scale ---- */
  --radius: 4px;
  --header-h: 76px;
  --shadow-soft: 0 10px 40px rgba(14,40,24,0.12);
  --shadow-card: 0 6px 24px rgba(14,40,24,0.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--forest-2);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:400; letter-spacing:.02em; line-height:1.05; text-transform:uppercase;}
p{margin:0;}
.container{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ============ visually-hidden (a11y) ============ */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* ============ SKIP LINK ============ */
.skip-link{
  position:fixed; top:-100px; left:12px; z-index:9999;
  background:var(--forest); color:var(--cream-text); padding:10px 18px;
  border-radius:var(--radius); font-family:var(--f-body); font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;}

/* ============ HEADER (present on every page) ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(242,239,226,0.86);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.header-left{display:flex; align-items:center; gap:14px;}

/* menu toggle — fixed top-left, always visible & reachable */
.menu-toggle{
  width:52px; height:52px; border-radius:50%;
  background:var(--forest); border:none;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  flex-shrink:0;
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.menu-toggle:hover{transform:scale(1.06); background:var(--forest-2);}
.menu-toggle span{
  width:20px; height:2px; background:var(--cream-text); display:block; border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:40px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--paper), 0 0 0 3px var(--forest);}
.brand-word{font-family:var(--f-display); font-size:1.05rem; letter-spacing:.03em; color:var(--forest); line-height:1;}
.brand-word small{display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em; color:var(--paprika); text-transform:uppercase; margin-top:3px;}

.header-actions{display:flex; align-items:center; gap:10px;}
.header-call{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.8rem; color:var(--forest);
  border:1px solid var(--forest); border-radius:100px; padding:8px 16px;
  transition:background .2s, color .2s;
}
.header-call:hover{background:var(--forest); color:var(--cream-text);}
.header-call svg{width:16px; height:16px;}
@media (max-width:640px){ .header-call span{display:none;} .header-call{padding:10px;} }

/* ============ NAV DRAWER ============ */
/* Slides in from the left; a light scrim dims (not hides) the rest of the page */
.nav-scrim{
  position:fixed; inset:0; z-index:1400;
  background:rgba(14,40,24,0.35);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.nav-scrim.is-open{opacity:1; pointer-events:auto;}

.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:1500;
  width:min(310px, 84vw);
  background:var(--forest);
  color:var(--cream-text);
  transform:translateX(-105%);
  transition:transform .4s var(--ease);
  display:flex; flex-direction:column;
  box-shadow:20px 0 60px rgba(0,0,0,0.25);
}
.nav-drawer.is-open{transform:translateX(0);}
.nav-drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 18px; border-bottom:1px solid var(--line-dark);
}
.nav-drawer-top .brand-word{color:var(--cream-text);}
.nav-close{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark);
  background:transparent; color:var(--cream-text); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.nav-links{padding:18px 10px; overflow-y:auto; flex:1;}
.nav-links li + li{margin-top:2px;}
.nav-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 14px; border-radius:var(--radius);
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.02em;
  transition:background .2s, padding-left .2s, color .2s;
}
.nav-links a .tag-num{font-family:var(--f-mono); font-size:.68rem; color:var(--leaf-light); text-transform:none; letter-spacing:.05em;}
.nav-links a:hover, .nav-links a.active{background:rgba(255,255,255,0.08); padding-left:20px; color:var(--leaf-light);}
.nav-drawer-bottom{padding:18px 22px 26px; border-top:1px solid var(--line-dark);}
.nav-social{display:flex; gap:12px; margin-bottom:14px;}
.nav-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.nav-social a:hover{background:var(--paprika); transform:translateY(-2px); border-color:var(--paprika);}
.nav-social svg{width:17px; height:17px; fill:var(--cream-text);}
.nav-drawer-bottom .mini{font-family:var(--f-mono); font-size:.72rem; opacity:.7; line-height:1.7;}

body.nav-open{overflow:hidden;}

/* ============ HANG-TAG (signature element) ============ */
/* Mirrors the real net-bag string tags seen across their catalog photography */
.hang-tag{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); border:1.5px dashed var(--forest);
  padding:7px 14px 7px 20px;
  font-family:var(--f-mono); font-size:.82rem; color:var(--forest);
  border-radius:2px 10px 10px 2px;
}
.hang-tag::before{
  content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--paper); border:1.5px solid var(--forest);
}
.hang-tag.on-dark{background:var(--forest-2); border-color:var(--leaf-light); color:var(--leaf-light);}
.hang-tag.on-dark::before{background:var(--forest-2); border-color:var(--leaf-light);}
.hang-tag.paprika{border-color:var(--paprika); color:var(--paprika-dk);}
.hang-tag.paprika::before{border-color:var(--paprika);}
.hang-tag .price{font-weight:600; color:var(--paprika-dk);}

/* ============ EYEBROW / LABEL ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paprika-dk); margin-bottom:14px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--paprika);}
.eyebrow.on-dark{color:var(--leaf-light);}
.eyebrow.on-dark::before{background:var(--leaf-light);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 30px; border-radius:100px; border:2px solid transparent;
  font-family:var(--f-body); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex-shrink:0;}
.btn-primary{background:var(--paprika); color:#fff;}
.btn-primary:hover{background:var(--paprika-dk); transform:translateY(-3px); box-shadow:0 12px 26px rgba(226,87,43,0.35);}
.btn-outline{border-color:currentColor; color:var(--forest); background:transparent;}
.btn-outline:hover{background:var(--forest); color:var(--cream-text); border-color:var(--forest); transform:translateY(-3px);}
.btn-outline.on-dark{color:var(--cream-text);}
.btn-outline.on-dark:hover{background:var(--cream-text); color:var(--forest);}
.btn-ghost{color:var(--forest); text-decoration:underline; text-underline-offset:4px; padding:15px 6px;}
.btn-block{width:100%;}

/* ============ SECTIONS ============ */
main{padding-top:var(--header-h);}
.section{padding:88px 0; position:relative;}
.section.tight{padding:60px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(2rem, 4.5vw, 3.1rem); color:var(--forest);}
.section-head p{margin-top:16px; font-size:1.06rem; color:#3c4a3f; max-width:52ch;}
.section-head.on-dark h2{color:var(--cream-text);}
.section-head.on-dark p{color:#c9d3c7;}

.bg-forest{background:var(--forest); color:var(--cream-text);}
.bg-charcoal{background:var(--charcoal); color:var(--cream-text);}
.bg-paper-dim{background:var(--paper-dim);}
.bg-paprika{background:var(--paprika); color:#fff;}

.divider-line{height:1px; background:var(--line); border:none; margin:0;}
.divider-line.on-dark{background:var(--line-dark);}

/* ============ HERO (home) — parallax layers ============ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:flex-end;
  background:var(--forest);
}
.hero-layer{position:absolute; inset:0; will-change:transform;}
.hero-layer.gradient{
  background:radial-gradient(120% 90% at 20% 15%, rgba(111,168,59,0.55), transparent 55%),
             radial-gradient(110% 90% at 85% 80%, rgba(226,87,43,0.35), transparent 50%),
             linear-gradient(160deg, var(--forest) 0%, var(--forest-2) 100%);
}
.hero-layer.photo{
  background-image:url('../images/hero-crate.jpg');
  background-size:cover; background-position:center 60%;
  opacity:.55; mix-blend-mode:luminosity;
}
.hero-layer.grain{
  background-image:url('../images/hero-crate.jpg');
  background-size:cover; background-position:center 60%;
  opacity:.16;
}
.hero-layer.scrim{background:linear-gradient(0deg, var(--forest-2) 0%, rgba(14,40,24,0.15) 55%, rgba(14,40,24,0.55) 100%);}
.hero-content{position:relative; z-index:5; width:100%; padding:0 0 64px;}
.hero-inner{max-width:820px;}
.hero .eyebrow{color:var(--leaf-light);}
.hero .eyebrow::before{background:var(--leaf-light);}
.hero h1{
  color:var(--cream-text);
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  letter-spacing:.01em;
}
.hero h1 .accent{color:var(--paprika);}
.hero-sub{color:#d9e3d3; font-size:1.15rem; max-width:52ch; margin-top:22px; font-family:var(--f-body);}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.hero-tags{display:flex; gap:14px; margin-top:52px; flex-wrap:wrap;}
.hero-orb{
  position:absolute; border-radius:50%; overflow:hidden; z-index:4;
  box-shadow:0 20px 50px rgba(0,0,0,0.35), 0 0 0 6px rgba(247,244,233,0.08);
  will-change:transform;
}
.hero-orb img{width:100%; height:100%; object-fit:cover;}
.hero-orb.orb-grapes{width:150px; height:150px; top:16%; right:8%; animation:orb-float 7s ease-in-out infinite;}
.hero-orb.orb-oranges{width:120px; height:120px; top:56%; right:20%; animation:orb-float 8.5s ease-in-out infinite reverse;}
@keyframes orb-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);}}
@media (max-width:900px){ .hero-orb{display:none;} }

.scroll-cue{
  position:absolute; right:28px; bottom:28px; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#cddccb; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:46px; background:linear-gradient(#cddccb, transparent); animation:scrollcue 1.8s infinite;}
@keyframes scrollcue{0%{opacity:1; transform:scaleY(0.4); transform-origin:top;} 100%{opacity:0; transform:scaleY(1); transform-origin:top;}}
@media (max-width:720px){ .scroll-cue{display:none;} }

/* fade/slide in-view reveal utility */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}

/* ============ FLOAT STRIP / MARQUEE ============ */
.marquee{overflow:hidden; white-space:nowrap; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.marquee-track{display:inline-flex; gap:48px; animation:marquee 26s linear infinite; padding:18px 0;}
.marquee span{font-family:var(--f-mono); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:48px;}
.marquee span::after{content:'\2022'; color:var(--paprika);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============ CARD GRID ============ */
.grid{display:grid; gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;} }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.card-media{aspect-ratio:4/3; overflow:hidden; background:var(--paper-dim);}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.card:hover .card-media img{transform:scale(1.08);}
.card-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-body h3{font-size:1.05rem; color:var(--forest); text-transform:none; letter-spacing:0;}
.card-body p{font-size:.9rem; color:#5a6a5c;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px;}

/* category tile (Shop) */
.cat-tile{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:280px;
  display:flex; align-items:flex-end; color:#fff;
}
.cat-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.cat-tile::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,22,26,0.88) 5%, rgba(14,22,26,0.05) 65%);}
.cat-tile:hover img{transform:scale(1.07);}
.cat-tile-body{position:relative; z-index:2; padding:26px;}
.cat-tile-body .eyebrow{color:var(--leaf-light);}
.cat-tile-body .eyebrow::before{background:var(--leaf-light);}
.cat-tile-body h3{color:#fff; font-size:1.5rem; text-transform:uppercase;}
.cat-tile-body p{color:#d8ded6; font-size:.85rem; margin-top:6px;}

/* ============ STATS ============ */
.stat-row{display:flex; flex-wrap:wrap; gap:40px;}
.stat{min-width:130px;}
.stat .num{font-family:var(--f-mono); font-size:2.4rem; color:var(--paprika); font-weight:600; line-height:1;}
.stat .label{font-size:.82rem; color:#5a6a5c; margin-top:8px; letter-spacing:.02em;}
.on-dark .stat .label{color:#c9d3c7;}

/* ============ PROCESS / LOT LIST (real sequence → numbered) ============ */
.lot-list{counter-reset:lot;}
.lot-item{
  display:grid; grid-template-columns:90px 1fr; gap:24px;
  padding:28px 0; border-top:1px solid var(--line);
}
.lot-item:last-child{border-bottom:1px solid var(--line);}
.lot-item::before{
  counter-increment:lot; content:"LOT " counter(lot,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.78rem; color:var(--paprika-dk); align-self:start; padding-top:4px;
}
.lot-item h3{font-size:1.25rem; color:var(--forest); text-transform:none; margin-bottom:8px;}
.lot-item p{color:#4a5a4c; font-size:.95rem;}

/* ============ QUOTE / TESTIMONIAL ============ */
.quote-card{
  background:var(--paper-dim); border-left:3px solid var(--paprika); padding:30px 34px; border-radius:0 var(--radius) var(--radius) 0;
}
.quote-card p{font-family:var(--f-body); font-style:italic; font-size:1.08rem; color:var(--forest-2);}
.quote-card .who{margin-top:16px; font-family:var(--f-mono); font-size:.78rem; color:var(--paprika-dk); text-transform:uppercase; letter-spacing:.06em;}

/* ============ FORM ============ */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.field label{display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:#fff; font-family:var(--f-body); font-size:.95rem; color:var(--forest-2);
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(22,57,37,0.12);
}
.field textarea{resize:vertical; min-height:120px;}

/* ============ MAP ============ */
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); height:420px;}
.map-wrap iframe{width:100%; height:100%; border:0;}

/* ============ CONTACT STRIP ============ */
.contact-strip{display:flex; flex-wrap:wrap; gap:18px;}
.contact-pill{
  display:flex; align-items:center; gap:12px; padding:16px 20px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); flex:1; min-width:220px;
}
.contact-pill .ic{width:38px; height:38px; border-radius:50%; background:var(--forest); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-pill .ic svg{width:18px; height:18px; fill:var(--cream-text);}
.contact-pill .txt small{display:block; font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#7a8a7c;}
.contact-pill .txt strong{font-size:.95rem; color:var(--forest-2);}

/* ============ FOOTER ============ */
.site-footer{background:var(--forest-2); color:#cfd9cd; padding:64px 0 28px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }
.footer-brand .brand-word{color:#fff;}
.footer-brand p{margin-top:16px; font-size:.9rem; color:#a9baa6; max-width:36ch;}
.footer-col h4{font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--leaf-light); margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col a{font-size:.9rem; color:#cfd9cd; transition:color .2s, padding-left .2s;}
.footer-col a:hover{color:var(--leaf-light); padding-left:4px;}
.footer-social{display:flex; gap:10px; margin-top:16px;}
.footer-social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;}
.footer-social a:hover{background:var(--paprika); border-color:var(--paprika); transform:translateY(-2px);}
.footer-social svg{width:16px; height:16px; fill:#cfd9cd;}
.footer-bottom{
  margin-top:50px; padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.75rem; color:#8ea18b;
}

/* ============ WHATSAPP FLOATER (always visible) ============ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:1300;
  width:62px; height:62px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
.wa-float svg{width:30px; height:30px; fill:#fff;}
.wa-float:hover{transform:scale(1.08);}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 10px 30px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0.45);}
  50%{box-shadow:0 10px 30px rgba(0,0,0,0.28), 0 0 0 12px rgba(37,211,102,0);}
}
@media (max-width:560px){ .wa-float{width:54px; height:54px; right:16px; bottom:16px;} .wa-float svg{width:26px; height:26px;} }

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{
  position:relative; padding:170px 0 90px; overflow:hidden;
  background:var(--forest); color:var(--cream-text);
}
.page-hero .hero-layer.photo{opacity:.28;}
.page-hero h1{font-size:clamp(2.4rem, 6vw, 4.2rem); color:var(--cream-text);}
.page-hero p{margin-top:18px; max-width:56ch; color:#d3ddcf; font-size:1.05rem;}
.crumb{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--leaf-light); margin-bottom:18px; display:flex; align-items:center; gap:8px;}

/* ============ SHOP FILTER TABS ============ */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.tab-btn{
  padding:11px 20px; border-radius:100px; border:1.5px solid var(--line);
  font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  background:#fff; color:var(--forest); transition:all .2s;
}
.tab-btn.active, .tab-btn:hover{background:var(--forest); color:var(--cream-text); border-color:var(--forest);}

.product-item{display:none;}
.product-item.show{display:flex;}

/* ============ ICON BADGE (used across About/Health pages) ============ */
.icon-badge{width:56px; height:56px; border-radius:50%; background:var(--forest); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.icon-badge svg{width:26px; height:26px; fill:var(--cream-text);}
.icon-badge.paprika{background:var(--paprika);}

/* utility spacing */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;}
.flex{display:flex;} .items-center{align-items:center;} .gap-10{gap:10px;} .gap-16{gap:16px;}
.text-center{text-align:center;}