/* =========================================================
   main.css
   Wildridge — reset + typography + primitives + homepage
   Primitives mirror SecureLynx base.css (.container/.label/.btn)
   ========================================================= */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);
  font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:pageFade 800ms ease}
@keyframes pageFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4{margin:0}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-0.005em;font-weight:400}

/* ---------- primitives ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.label{font-family:var(--mono);font-size:.85rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bark)}
.text-pine{color:var(--pine)}.text-wheat{color:var(--wheat)}.text-muted{color:var(--text-muted)}

.section{position:relative;padding:clamp(58px,8vw,116px) 0}
.section-heading{margin-bottom:46px}
.section-heading .label{display:block;margin-bottom:16px}
.section-heading h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}

.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.78rem;
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:.92em 1.5em;
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:transform var(--transition-fast),background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.btn-primary{background:var(--pine);color:var(--bone)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-2px)}
.btn-secondary{border-color:rgba(63,94,65,.4);color:var(--pine)}
.btn-secondary:hover{border-color:var(--pine);background:rgba(63,94,65,.07);transform:translateY(-2px)}
.btn-cream{border-color:var(--border-deep);color:var(--cream)}
.btn-cream:hover{border-color:var(--wheat);color:var(--wheat);transform:translateY(-2px)}

/* ---------- image slot (placeholder until art lands) ---------- */
.slot{position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(170deg,#cfdbe0 0%,#d8cfa8 48%,#9fae84 100%);
  border:1px solid var(--border-primary)}
.slot::after{content:attr(data-shot);position:absolute;left:14px;bottom:12px;right:14px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#2b2118;opacity:.7;line-height:1.5}
.slot-grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* real imagery filling former placeholder slots (keeps the slot's aspect-ratio class) */
.media-img{width:100%;object-fit:cover;border-radius:var(--radius-md);
  border:1px solid var(--border-primary);display:block}

/* =========================================================
   HERO — light video background (ported from SecureLynx, lightened)
   ========================================================= */
.hero{position:relative;min-height:660px;padding:clamp(96px,12vw,150px) 0 clamp(48px,6vw,84px);
  overflow:hidden;isolation:isolate}
.hero .container{position:relative;z-index:4}
.hero-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(244,236,214,.30) 0%, rgba(244,236,214,.10) 38%, rgba(244,236,214,.86) 100%),
    linear-gradient(95deg, rgba(244,236,214,.72) 0%, rgba(244,236,214,.30) 46%, rgba(244,236,214,.08) 100%),
    linear-gradient(160deg,#cfdbe0 0%,#dcd2a8 46%,#a6b487 100%);
  background-size:cover}
.hero-video{position:absolute;top:50%;left:0;width:100%;height:100%;object-fit:cover;
  object-position:center;z-index:var(--z-bg);opacity:0;transform:translateY(-50%);
  transition:opacity 1.2s ease-in-out}
.hero-video.is-ready{opacity:0.5}
.hero-scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(244,236,214,.18), transparent 40%, rgba(244,236,214,.55))}
.hero-fog{position:absolute;inset:auto -18% -6% -18%;height:46%;
  background:radial-gradient(ellipse at 30% 60%, rgba(255,250,235,.5), transparent 42%),
    radial-gradient(ellipse at 72% 44%, rgba(194,142,61,.16), transparent 38%);
  filter:blur(30px);opacity:.5;animation:heroFogDrift 22s ease-in-out infinite alternate}

.hero-copy{position:relative;z-index:5;max-width:660px}
.hero-kicker{display:inline-flex;align-items:center;gap:16px;margin-bottom:24px;color:var(--bark)}
.hero-kicker::after{content:"";width:96px;height:1px;background:linear-gradient(90deg,var(--wheat),transparent)}
.hero-tagline{font-size:clamp(3rem,8vw,6rem);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.hero-tagline em{font-style:italic;color:var(--pine)}
.hero-subtitle{max-width:34ch;margin:22px 0 0;color:var(--bark);font-size:clamp(1.05rem,1.7vw,1.26rem);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.scroll-cue{position:relative;z-index:5;display:grid;place-items:center;gap:8px;margin-top:54px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.scroll-cue span{color:var(--wheat);font-size:1.4rem}
@keyframes heroFogDrift{0%{transform:translate3d(-3%,2%,0)}100%{transform:translate3d(3%,-2%,0)}}

/* ---------- ridge contour signature ---------- */
.ridge-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* =========================================================
   TRUST STRIP (marquee)
   ========================================================= */
.trust{background:var(--pine-deep);overflow:hidden}
.trust .track{display:flex;gap:42px;align-items:center;padding-block:16px;white-space:nowrap;
  animation:marq 36s linear infinite}
.trust .tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);display:inline-flex;align-items:center;gap:.6em;flex:none}
.trust .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wheat)}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   RECIPES — the four cans
   ========================================================= */
.recipes{background:var(--bg-secondary)}
.recipes .section-heading{text-align:center;max-width:640px;margin-inline:auto}
.recipes .section-heading p{color:var(--bark);margin-top:14px}
.recipe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.can{display:flex;flex-direction:column;min-width:0;background:var(--cream);border:1px solid var(--border-primary);
  border-radius:var(--radius-md);overflow:hidden;transition:transform var(--transition-medium),box-shadow var(--transition-medium)}
.can:hover{transform:translateY(-6px);box-shadow:0 22px 46px -26px rgba(43,33,24,.5)}
.can-art{aspect-ratio:1/1;border-top:4px solid var(--c)}
.can-body{padding:20px 20px 24px;border-top:1px solid var(--border-secondary)}
.can-flavor{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.can-body h3{font-size:1.45rem;margin-bottom:6px}
.can-body p{margin:0;font-size:.86rem;color:var(--stone)}
.can-meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bark)}
.can-meta span{border:1px solid var(--border-primary);border-radius:var(--radius-pill);padding:.25em .6em}

/* =========================================================
   FEEDING SCHEDULE (under cans) — PLACEHOLDER values
   ========================================================= */
.feeding{background:var(--bg-secondary);padding-top:0}
.feeding-card{background:var(--cream);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,44px)}
.feeding-card .label{display:block;margin-bottom:8px;color:var(--wheat)}
.feeding-card h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:6px}
.feeding-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:24px}
.feeding-table{width:100%;border-collapse:collapse}
.feeding-table th,.feeding-table td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--border-secondary);font-size:.95rem}
.feeding-table th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bark)}
.feeding-table td:first-child{font-weight:600;color:var(--ink)}
.is-filler{color:var(--stone);font-style:italic}

/* =========================================================
   INSIDE THE BOWL
   ========================================================= */
.inside .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
.inside-art{aspect-ratio:5/4;min-height:300px}
.inside h2{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.inside h2 .dot{color:var(--pine)}
.inside .label{display:block;margin-bottom:16px}
.inside p{font-size:1.06rem;max-width:52ch;margin:18px 0 0;color:var(--bark)}
.notes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.notes li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline}
.notes .n{font-family:var(--mono);font-size:.72rem;color:var(--wheat);letter-spacing:.1em}
.notes b{font-weight:600;color:var(--ink)}

/* =========================================================
   BELIEF STRIP (small, single line)
   ========================================================= */
.belief{background:var(--pine-deep);color:var(--cream);text-align:center;
  padding:clamp(28px,4vw,40px) 0}
.belief p{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.4;
  font-weight:400;max-width:60ch;margin-inline:auto}
.belief em{font-style:italic;color:var(--wheat)}

/* =========================================================
   ABOUT + NEWS teasers
   ========================================================= */
.about .container{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.about-art{aspect-ratio:4/3;min-height:260px}
.about .label{display:block;margin-bottom:16px}
.about h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.about p{color:var(--bark);max-width:48ch;margin:18px 0 28px}

.news{background:var(--bg-secondary)}
.news .section-heading{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--cream);border:1px solid var(--border-primary);border-radius:var(--radius-md);
  overflow:hidden;transition:transform var(--transition-medium),box-shadow var(--transition-medium)}
.post:hover{transform:translateY(-5px);box-shadow:0 18px 40px -24px rgba(43,33,24,.5)}
.post-art{aspect-ratio:16/10}
.post-body{padding:20px 22px 24px}
.post .date{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wheat)}
.post h3{font-size:1.2rem;margin-top:8px}

/* =========================================================
   FOLLOW THE PACK (curated social) — PLACEHOLDER slots
   ========================================================= */
.social .section-heading{text-align:center;max-width:560px;margin-inline:auto}
.social .section-heading p{color:var(--bark);margin-top:14px}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.social-tile{position:relative;aspect-ratio:9/16;border-radius:var(--radius-md);overflow:hidden;
  background:var(--ink);border:1px solid var(--border-primary);cursor:pointer}
.social-clip{width:100%;height:100%;object-fit:cover;display:block}
/* centered play/sound cue, hidden while a clip is playing */
.social-tile::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;z-index:2;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(28,23,18,.5);
  backdrop-filter:blur(3px);pointer-events:none;transition:opacity var(--transition-fast)}
.social-tile::before{content:"";position:absolute;left:calc(50% + 2px);top:50%;z-index:3;
  transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--cream);
  pointer-events:none;transition:opacity var(--transition-fast)}
.social-tile.is-playing::after,.social-tile.is-playing::before{opacity:0}
.social-actions{display:flex;justify-content:center;gap:14px;margin-top:36px}

/* =========================================================
   LOCATIONS teaser
   ========================================================= */
.buy{background:var(--cream);text-align:center}
.buy .label{display:block;margin-bottom:16px}
.buy h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.buy p{color:var(--bark);max-width:46ch;margin:18px auto 30px;font-size:1.06rem}
.buy .hero-actions{justify-content:center}

/* =========================================================
   MOTION
   ========================================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  .recipe-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .recipe-grid{grid-template-columns:1fr}
  .social-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .news-grid{grid-template-columns:1fr}
  .social-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .container{padding:0 22px}
  .inside .container,.about .container{grid-template-columns:1fr}
  .inside-art,.about-art{order:-1}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  body{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .trust .track,.hero-fog{animation:none}
  .label {font-size:.65rem}
}

/* =========================================================
   INNER PAGES — menu / recipe / about   (Session 3)
   Extends the existing system; tokens & primitives reused.
   ========================================================= */

/* ---------- shared inner-page intro ---------- */
.page-hero{padding-bottom:0}
.page-hero .label{display:block;margin-bottom:16px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;letter-spacing:-.01em;max-width:16ch}
.page-hero h1 em{font-style:italic;color:var(--pine)}
.page-lead{margin-top:20px;max-width:52ch;color:var(--bark);
  font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.6}
.section-heading.center{text-align:center;max-width:640px;margin-inline:auto}
.section-heading.center p{margin-top:14px;color:var(--bark)}

/* ---------- can card with real photo (menu + cross-sell) ---------- */
.menu-grid-section{padding-top:40px}
.can-art--photo{aspect-ratio:auto;display:grid;place-items:center;padding:16px 12px 0;
  background:var(--bone);
  background:radial-gradient(120% 100% at 50% 0%,
    color-mix(in srgb,var(--c) 18%, var(--bone)) 0%, var(--bone) 72%)}
.can-art--photo img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 20px rgba(43,33,24,.22))}
.can-cta{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c)}

/* ---------- "in every can" ---------- */
.every-can{background:var(--bg-secondary)}
.every-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px}
.every-grid li{position:relative;padding-left:18px;color:var(--bark);font-size:.98rem;line-height:1.55}
.every-grid li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--wheat)}
.every-grid b{color:var(--ink);font-weight:600}

/* =========================================================
   RECIPE PAGE
   ========================================================= */
.recipe-hero{position:relative;overflow:hidden;
  padding:clamp(90px,11vw,140px) 0 clamp(48px,6vw,84px);
  background:var(--bg-secondary);
  background:
    radial-gradient(120% 92% at 84% 10%, color-mix(in srgb,var(--c) 16%, var(--bone)) 0%, transparent 58%),
    var(--bg-secondary)}
.recipe-hero .container{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);align-items:center}
.recipe-eyebrow{display:block;margin-bottom:18px;color:var(--c)}
.recipe-hero h1{font-size:clamp(2.8rem,6.5vw,5rem);font-weight:400;letter-spacing:-.01em}
.recipe-hero h1 em{font-style:italic;color:var(--c)}
.recipe-made{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bark);margin-top:16px}
.recipe-lead{font-size:1.1rem;line-height:1.6;color:var(--bark);max-width:46ch;margin-top:16px}
.recipe-hero .hero-actions{margin-top:30px}
.recipe-hero-can{justify-self:center;display:grid;place-items:center}
.recipe-hero-can img{width:auto;max-height:560px;max-width:100%;
  filter:drop-shadow(0 30px 40px rgba(43,33,24,.28))}

/* badge pair — echoes the physical can */
.badge-ring{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap}
.can-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  width:120px;height:120px;border-radius:50%;text-align:center;
  background:var(--pine-deep);color:var(--cream);
  border:2px solid var(--wheat);
  border-color:color-mix(in srgb,var(--wheat) 72%, transparent);
  box-shadow:inset 0 0 0 1px rgba(244,236,214,.12)}
.can-badge svg{width:26px;height:26px;color:var(--wheat)}
.can-badge>span{font-family:var(--mono);font-size:.57rem;line-height:1.35;letter-spacing:.07em;text-transform:uppercase}

/* the story */
.recipe-story .label{display:block;margin-bottom:14px}
.recipe-story h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.story-body{max-width:62ch;margin-top:20px;display:grid;gap:16px}
.story-body p{color:var(--bark);font-size:1.06rem;line-height:1.7}

/* SIGNATURE — ingredient panel styled as a can label */
.ingredients{background:var(--bg-primary)}
.label-card{max-width:620px;margin:0 auto;background:var(--bone);
  border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 30px 60px -36px rgba(43,33,24,.5)}
.label-band{position:relative;text-align:center;padding:34px 28px 26px;
  background:color-mix(in srgb,var(--c) 13%, var(--bone));
  border-bottom:1px solid var(--border-secondary)}
.label-band::before,.label-band::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:170px;height:1px;background:linear-gradient(90deg,transparent,var(--wheat),transparent)}
.label-band::before{top:20px}.label-band::after{bottom:14px}
.label-brand{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bark)}
.label-band h3{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--c);margin:16px 0 8px}
.label-made{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bark)}
.label-body{padding:30px 34px 36px;text-align:center}
.label-eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wheat)}
.ingredient-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px 10px}
.ingredient-list li{font-family:var(--body);font-size:.9rem;color:var(--ink);background:var(--cream);
  border:1px solid var(--border-secondary);border-radius:var(--radius-pill);padding:.4em .9em}
.label-body .badge-ring{justify-content:center;margin:28px 0 0}
.label-netwt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bark);margin-top:24px}

/* guaranteed analysis (reuses .feeding-card/.feeding-table) */
.analysis{background:var(--bg-secondary)}

/* cross-sell */
.cross-sell .section-heading{margin-bottom:36px}
.cross-grid{grid-template-columns:repeat(3,1fr)}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.story .container{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,64px);align-items:center}
.story-art{aspect-ratio:4/5;min-height:320px}
.story-copy .label{display:block;margin-bottom:14px}
.story-copy h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.story-copy p{color:var(--bark);font-size:1.06rem;line-height:1.7;margin-top:16px;max-width:54ch}
.story-copy p.story-pending{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--stone);max-width:none}

.values{background:var(--bg-secondary)}
.values-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 44px}
.values-grid li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.v-n{font-family:var(--mono);font-size:.8rem;color:var(--wheat);letter-spacing:.1em;padding-top:.2em}
.values-grid b{color:var(--ink);font-weight:600}
.values-grid li>div{color:var(--bark);line-height:1.6}

.testimonials .section-heading{margin-bottom:40px}
.t-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tcard{margin:0;background:var(--bone);border:1px solid var(--border-primary);border-radius:var(--radius-md);
  padding:30px 32px 26px;position:relative}
.tcard::before{content:"\201C";position:absolute;top:8px;left:20px;font-family:var(--display);
  font-size:3.4rem;line-height:1;color:color-mix(in srgb,var(--wheat) 60%, transparent)}
.tcard blockquote{margin:16px 0 18px;font-family:var(--display);font-size:1.18rem;line-height:1.5;color:var(--ink)}
.tcard figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  display:flex;flex-direction:column;gap:3px}
.tcard figcaption b{color:var(--pine);font-weight:700;letter-spacing:.06em}
.tcard figcaption span{color:var(--stone)}

/* =========================================================
   INNER-PAGE RESPONSIVE
   ========================================================= */
@media(max-width:1000px){
  .every-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .recipe-hero .container{grid-template-columns:1fr}
  .recipe-hero-can{order:-1}
  .recipe-hero-can img{max-height:60px}
  .story .container{grid-template-columns:1fr}
  .story-art-wrap{order:-1}
  .values-grid,.t-grid,.every-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .cross-grid{grid-template-columns:1fr}
  .badge-ring{justify-content:center}
}

/* =========================================================
   LOCATIONS — store locator (public)   (Session 4)
   ========================================================= */
.locator{padding-top:40px}
.loc-tools{display:flex;gap:14px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.loc-search-wrap{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:var(--bone);
  border:1px solid var(--border-primary);border-radius:var(--radius-pill);padding:.5em 1em}
.loc-search-icon{color:var(--stone);font-size:1.1rem}
#loc-zip{flex:1;border:0;background:transparent;font-family:var(--body);font-size:1rem;color:var(--ink);outline:none}
.loc-results{margin-top:26px}
.loc-prompt{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--stone);
  background:var(--bone);border:1px dashed var(--border-secondary);border-radius:var(--radius-md);
  padding:18px 20px;margin:0;text-align:center}
.loc-count{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin:0 0 14px}
.loc-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.loc-card{position:relative;background:var(--bone);border:1px solid var(--border-primary);border-radius:var(--radius-md);
  padding:16px 18px;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
.loc-card:hover{border-color:rgba(63,94,65,.5);transform:translateY(-2px)}
.loc-card.is-active{border-color:var(--pine);box-shadow:0 10px 26px -18px rgba(43,33,24,.5)}
.loc-card h3{font-family:var(--display);font-size:1.18rem;font-weight:600;margin:0 0 4px}
.loc-addr{font-size:.9rem;color:var(--bark);margin:0 0 8px;line-height:1.5}
.loc-phone{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--pine);margin-right:14px}
.loc-dir{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wheat)}
.loc-dist{display:inline-block;float:right;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  color:var(--bark);background:var(--cream);border:1px solid var(--border-secondary);border-radius:var(--radius-pill);padding:.2em .6em}
.loc-empty-search{font-size:.9rem;color:var(--stone);margin-top:14px}
.loc-fallback{background:var(--bone);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:22px 24px;text-align:center}
.loc-fallback p{color:var(--bark);margin:0 0 16px}
.loc-fallback .hero-actions{justify-content:center}
.loc-map-wrap{position:relative;min-height:560px;margin-bottom:6px;display:flex;flex-direction:column}
.loc-map{flex:1;min-height:560px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-primary);
  position:relative;z-index:var(--z-base);
  background:linear-gradient(170deg,#cfdbe0,#d8cfa8 48%,#9fae84)}
.loc-map-note{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:var(--stone);margin:8px 0 0;text-align:right}
.leaflet-container{font-family:var(--body)}

/* empty state (no data loaded yet) */
.locator-empty{padding-top:20px}
.empty-card{background:var(--bone);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,52px);text-align:center;max-width:640px;margin:0 auto}
.empty-card .label{display:block;margin-bottom:14px;color:var(--wheat)}
.empty-card h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.empty-card p{color:var(--bark);max-width:46ch;margin:14px auto 26px}
.empty-card .hero-actions{justify-content:center}

@media(max-width:900px){
  .loc-map-wrap,.loc-map{min-height:380px}
  .loc-tools{flex-direction:column;align-items:stretch}
  .loc-list{max-height:none}
}

/* =========================================================
   NEWS — index + post pages   (Session 5)
   ========================================================= */

/* ── news index hero ── */
.news-hero{padding-bottom:0}
.news-hero-in{text-align:center;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(32px,5vw,56px)}
.news-hero-in h1{font-size:clamp(2.8rem,6vw,5rem);margin:.18em 0 .3em}
.news-hero-sub{color:var(--bark);font-size:1.1rem;max-width:50ch;margin:0 auto}

/* ── news grid ── */
.news-grid-section{padding-top:0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.news-empty{color:var(--stone);font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:60px 0}

/* ── news card ── */
.ncard{display:flex;flex-direction:column;background:var(--bone);border:1px solid var(--border-primary);
  border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast)}
.ncard:hover{box-shadow:0 12px 32px -16px rgba(43,33,24,.18);transform:translateY(-3px)}
.ncard-img-link{display:block;overflow:hidden;aspect-ratio:3/2}
.ncard-img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--transition-base)}
.ncard-img-link:hover .ncard-img{transform:scale(1.04)}
.ncard-img-placeholder{width:100%;height:100%;background:linear-gradient(145deg,var(--cream),var(--bone))}
.ncard-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard-date{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);display:block}
.ncard-title{font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.35;margin:0}
.ncard-title a{color:var(--ink);text-decoration:none}
.ncard-title a:hover{color:var(--pine)}
.ncard-excerpt{font-size:.88rem;color:var(--bark);line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── post page ── */
.post-wrap{padding-bottom:clamp(40px,6vw,80px)}
.post-back{padding-top:clamp(16px,3vw,28px);padding-bottom:16px}
.post-back-link{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone);text-decoration:none}
.post-back-link:hover{color:var(--pine)}

.post-hero-img-wrap{width:100%;max-height:480px;overflow:hidden;margin-bottom:clamp(28px,5vw,52px)}
.post-hero-img{width:100%;height:480px;object-fit:cover;display:block}

.post-container{max-width:760px}
.post-date{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stone);display:block;margin-bottom:1.2em}

/* article body elements */
.post-body{display:flex;flex-direction:column;gap:0}
.post-h1{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.2;
  color:var(--ink);margin:0 0 .6em;font-weight:700}
.post-summary{font-size:1.08rem;color:var(--bark);line-height:1.7;margin:0 0 2em;
  border-left:3px solid var(--wheat);padding-left:1.1em}
.post-sub{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--pine);
  margin:2em 0 .5em}
.post-body p{font-size:1rem;line-height:1.75;color:var(--bark);margin:0 0 1.2em}
.post-points{margin:.4em 0 1.6em 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.9em}
.post-points li{display:flex;gap:.75em;align-items:flex-start;font-size:.97rem;line-height:1.65;color:var(--bark)}
.post-points li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:var(--wheat);margin-top:.55em}
.post-points li strong{color:var(--ink)}

/* bottom line */
.post-bottom-line{margin-top:2.4em;padding:28px 32px 32px;background:var(--bone);
  border:1px solid var(--border-primary);border-radius:var(--radius-lg);border-left:4px solid var(--pine)}
.post-bl-heading{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--pine);margin:0 0 .5em}
.post-bottom-line p{font-size:.97rem;line-height:1.7;color:var(--bark);margin:0 0 1.4em}
.post-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* more to read */
.post-more{padding-top:clamp(40px,6vw,72px)}
.post-more-heading{margin-bottom:clamp(20px,3vw,36px)}
.ncard--sm .ncard-title--sm{font-size:.98rem}

/* share bar */
.post-share{display:flex;align-items:center;gap:14px;margin:0 0 2.2em;padding-bottom:1.5em;
  border-bottom:1px solid var(--border-primary);flex-wrap:wrap}
.post-share-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.post-share-row{display:flex;gap:10px;flex-wrap:wrap}
.share-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid rgba(63,94,65,.32);border-radius:50%;
  color:var(--pine);background:none;cursor:pointer;text-decoration:none;
  transition:transform var(--transition-fast),background var(--transition-fast),
    border-color var(--transition-fast),color var(--transition-fast)}
.share-btn:hover{border-color:var(--pine);background:rgba(63,94,65,.08);transform:translateY(-2px)}
.share-btn svg{width:17px;height:17px;display:block;fill:currentColor}
.share-copy .share-copied{position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pine);color:var(--bone);padding:.3em .6em;border-radius:var(--radius-sm,6px);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}
.share-copy.is-copied .share-copied{opacity:1}

/* 404 */
.notfound{text-align:center}
.notfound-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* ── responsive ── */
@media(max-width:900px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:580px){
  .news-grid{grid-template-columns:1fr}
  .post-hero-img{height:280px}
  .post-bottom-line{padding:20px 20px 24px}
}

/* ===== REAL LABEL CONTENT (Session 8) — full ingredient statement, GA + feeding fine print ===== */
/* full ingredient declaration: a flowing statement (nested mineral/vitamin groups
   don't read as chips), centered to match the can-label panel */
.ingredient-statement{font-family:var(--body);font-size:.9rem;line-height:1.75;color:var(--ink);
  max-width:52ch;margin:16px auto 0;text-align:center}
/* secondary kcal/kg next to the per-can figure */
.ga-sub{font-family:var(--mono);font-size:.72em;letter-spacing:.04em;color:var(--stone)}
/* readable handling note under the feeding / analysis cards */
.feeding-fine{font-family:var(--body);font-size:.86rem;line-height:1.65;color:var(--bark);
  max-width:62ch;margin:20px 0 0}
/* nutritional-adequacy (AAFCO) line — quiet legal fine print */
.feeding-aafco{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;line-height:1.7;
  text-transform:uppercase;color:var(--stone);margin:14px 0 0;max-width:70ch}

/* ===== Dog Vision teaser (homepage band) ===== */
.dv-teaser{background:var(--pine-deep);color:var(--cream);text-align:center}
.dv-teaser .label{display:block;margin-bottom:16px;color:var(--wheat)}
.dv-teaser h2{font-size:clamp(2rem,4.4vw,3.1rem);color:var(--cream)}
.dv-teaser p{max-width:50ch;margin:16px auto 30px;color:var(--cream);opacity:.92;font-size:1.06rem}
.dv-teaser .hero-actions{justify-content:center}

/* =========================================================
   MERCH — shelf tiles + lid detail   (merch.php)
   Reuses the .can card wholesale so a merch tile and a recipe
   tile are the same object; only the two states below are new.
   ========================================================= */

/* coming-soon tile: not a link, so it must not behave like one */
.can.is-soon{cursor:default}
.can.is-soon:hover{transform:none;box-shadow:none}
.can.is-soon .can-body h3{color:var(--bark)}
.can.is-soon .can-cta{color:var(--stone)}
.soon-paw{width:76px;height:76px;color:var(--c);opacity:.32}

/* every tile on the shelf gets the SAME art box and letterboxes its
   product inside it, so headings align no matter what shape the next
   product photo turns out to be. (The recipe grid can't do this — the
   four cans are one known shape; the shelf won't be.) */
.merch-shelf .can-art--photo{aspect-ratio:5/7;padding:18px 14px;min-height:0}
.merch-shelf .can-art--photo img{width:auto;max-width:100%;height:100%;object-fit:contain}

/* lid detail */
.merch-detail{background:var(--bg-secondary)}
.merch-detail-grid{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,5vw,68px);align-items:center}
.merch-detail .label{display:block;margin-bottom:14px;color:var(--c)}
.merch-detail h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.merch-lead{color:var(--bark);font-size:1.06rem;line-height:1.7;margin:18px 0 0;max-width:52ch}
.merch-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.merch-points li{position:relative;padding-left:18px;color:var(--bark);font-size:.98rem;line-height:1.55}
.merch-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--c)}
.merch-points b{color:var(--ink);font-weight:600}
.merch-sizes{margin:0;display:grid;justify-items:center;gap:16px}
.merch-sizes img{display:block;width:100%;max-width:460px;height:auto}
.merch-sizes figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--stone);text-align:center;max-width:38ch;line-height:1.5}

@media(max-width:768px){
  .merch-detail-grid{grid-template-columns:1fr}
  .merch-sizes{order:-1}
}