/* ============================================================
   PLANT MEAT — page-level blocks
   ============================================================ */

/* ------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------ */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------------
   PRODUCT DETAIL
   ------------------------------------------------------------ */
.pdp { padding-bottom: clamp(3rem, 7vw, 6rem); }

.pdp__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* image-dominant: the product should carry the page, not the spec list */
.pdp__media { grid-column: 1 / 9; margin: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
.pdp__buy   { grid-column: 9 / 13; }
@media (max-width: 1000px) {
  .pdp__media, .pdp__buy { grid-column: 1 / -1; }
  .pdp__media { position: static; }
}

.pdp__plate {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--plate, var(--sage));
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-md);
}
.pdp__plate svg, .pdp__plate img { width: 100%; height: 100%; object-fit: cover; }

/* sized to its column: at the full xxl size NUGGETS ran past the edge and
   the whole page scrolled sideways */
.pdp__name { text-transform: uppercase; margin-top: .5rem; font-size: clamp(2.4rem, 1rem + 3.4vw, 4.6rem); overflow-wrap: break-word; }
.pdp__tagline {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  color: var(--verde);
  line-height: 1.15;
  margin-top: .5rem;
}

.pdp__spec {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pdp__spec > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: var(--t-xs);
}
.pdp__spec > div:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--rule-soft); }
.pdp__spec > div:nth-child(even) { padding-left: 1.5rem; }
.pdp__spec dt { color: var(--ink-3); }
.pdp__spec dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .pdp__spec { grid-template-columns: 1fr; }
  .pdp__spec > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .pdp__spec > div:nth-child(even) { padding-left: 0; }
}

.pdp__long {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "wdth" 96, "opsz" 28;
  font-size: clamp(1.25rem, 2.4vw, 1.95rem);
  line-height: 1.28;
  letter-spacing: -.022em;
  text-wrap: pretty;
}

.pdp__cook {
  background: var(--paper-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.pdp__cook-line {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -.022em;
  line-height: 1.2;
}

.pdp__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.pdp__facts ol { list-style: none; margin: 0; padding: 0; }
@media (max-width: 820px) { .pdp__facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   CATALOGUE
   ------------------------------------------------------------ */
.cat-bar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
}
.cat-bar .filters { padding-bottom: 0; }
.cat-empty { padding: 4rem 0; text-align: center; color: var(--ink-3); }

.never-list { border-top: 1px solid var(--ink); }
.never {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  letter-spacing: -.025em;
  position: relative;
}
.never > span:first-child { transition: color .4s, transform .5s var(--ease-out); }
.never:hover > span:first-child { color: var(--verde); transform: translateX(6px); }
/* struck through, because these are the exclusions */
.never > span:first-child::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1.5px; background: var(--verde);
  transition: width .55s var(--ease-out);
}
.never:hover > span:first-child::after { width: 100%; max-width: 12ch; }

/* ------------------------------------------------------------
   VERDE THEORY — cafe
   ------------------------------------------------------------ */
.cafe-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.cafe-hero__media { position: absolute; inset: -8% 0; z-index: -2; }
.cafe-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.cafe-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb),.62) 0%, rgba(var(--ink-rgb),.28) 38%, rgba(var(--ink-rgb),.88) 100%);
}
.cafe-hero .label { color: rgba(var(--paper-rgb),.6); }

.cafe-hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "wdth" 82;
  font-size: clamp(3.5rem, 15vw, 14rem);
  line-height: .84;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.cafe-hero__title .serif { text-transform: none; color: inherit; font-size: inherit; }

.cafe-hero__foot {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(var(--paper-rgb),.2);
}
.cafe-hero__lede { grid-column: 1 / 6; color: rgba(var(--paper-rgb),.84); }
.cafe-hero__meta { grid-column: 8 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) {
  .cafe-hero__lede, .cafe-hero__meta { grid-column: 1 / -1; }
}
.cafe-meta { display: flex; flex-direction: column; gap: .35rem; }
.cafe-meta strong {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-md); letter-spacing: -.02em;
}

/* menu columns */
.menu-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 820px) { .menu-cols { grid-template-columns: 1fr; } }

.menu-sec + .menu-sec { margin-top: clamp(2.5rem, 5vw, 4rem); }
.menu-sec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--ink);
}
.menu-sec__title {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-lg); letter-spacing: -.025em;
}

/* gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
.gallery__item { overflow: hidden; border-radius: var(--radius-lg); background: var(--sage); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.05); }
.g-a { grid-column: 1 / 6;  aspect-ratio: 4/5; }
.g-b { grid-column: 6 / 13; aspect-ratio: 16/11; align-self: end; }
.g-c { grid-column: 1 / 5;  aspect-ratio: 1; }
.g-d { grid-column: 5 / 9;  aspect-ratio: 1; margin-top: clamp(1rem, 4vw, 3.5rem); }
.g-e { grid-column: 9 / 13; aspect-ratio: 3/4; }
@media (max-width: 820px) {
  .g-a, .g-b, .g-c, .g-d, .g-e { grid-column: span 6; aspect-ratio: 1; margin-top: 0; }
}

/* visit card */
.visit {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--paper-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}
.visit__map { grid-column: 1 / 7; border-radius: var(--radius); overflow: hidden; background: var(--sage); aspect-ratio: 16/11; }
.visit__info { grid-column: 8 / 13; }
@media (max-width: 900px) { .visit__map, .visit__info { grid-column: 1 / -1; } }

.hours { border-top: 1px solid var(--rule); margin-top: 1.25rem; }
.hours > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: var(--t-xs);
}
.hours dt { color: var(--ink-3); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours .is-today dt, .hours .is-today dd { color: var(--verde); }

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 820px) { .people { grid-template-columns: 1fr; } }
.person__photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--sage); aspect-ratio: 3/4; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.person:hover .person__photo img { transform: scale(1.045); }
.person__name { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); letter-spacing: -.025em; margin-top: 1rem; }
.person__role { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--verde); margin-top: .35rem; }
.person__bio { font-size: var(--t-sm); color: var(--ink-3); margin-top: .75rem; }

/* timeline */
.time { border-top: 1px solid var(--ink); }
.time__row {
  display: grid; grid-template-columns: 8rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .4s;
}
.time__row:hover { background: var(--paper-lift); }
.time__when { font-family: var(--mono); font-size: var(--t-xs); color: var(--verde); letter-spacing: .1em; padding-top: .25rem; }
.time__what { font-family: var(--display); font-weight: 400; font-variation-settings: "wdth" 96; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -.022em; line-height: 1.25; max-width: 46ch; }
@media (max-width: 620px) { .time__row { grid-template-columns: 1fr; gap: .5rem; } }

/* the timeline reads beside its heading, which holds its place, so the
   rows use the right of the page instead of trailing off at 60% */
.time-band .shell { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.time-band .sec-head { grid-column: 1 / 5; display: block; position: sticky; top: calc(var(--nav-h) + 2rem); margin: 0; }
.time-band .sec-head__idx { display: block; margin-bottom: 1rem; padding: 0; }
.time-band .time { grid-column: 6 / 13; }
@media (max-width: 999px) {
  .time-band .sec-head { grid-column: 1 / -1; position: static; margin-bottom: 2rem; }
  .time-band .time { grid-column: 1 / -1; }
}

/* an end note sits on the page's centre line, not 15% in from the left */
.soon { display: flex; flex-direction: column; align-items: center; text-align: center; }
.soon .row { justify-content: center; }

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.contact-form { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 1.25rem; }
.contact-side { grid-column: 8 / 13; }
@media (max-width: 900px) { .contact-form, .contact-side { grid-column: 1 / -1; } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.contact-block { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.contact-block:first-child { border-top: 1px solid var(--ink); }
.contact-block__v {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -.025em;
  margin-top: .35rem; display: block;
}

/* ------------------------------------------------------------
   VISIT — the map is a live Google Maps embed, not a photo
   ------------------------------------------------------------ */
.visit__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------
   VERDE THEORY — "Plant Meat, IRL." statements
   Four short lines from the brief, set as a 2×2 of display type
   rather than one paragraph, so each lands on its own.
   ------------------------------------------------------------ */
.irl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink);
}
.irl__line {
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(0rem, 2vw, 2rem) clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "wdth" 94;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.irl__line:nth-child(even) { padding-left: clamp(1rem, 2vw, 2rem); border-left: 1px solid var(--rule); }
.irl__line .serif { color: var(--verde); }
@media (max-width: 720px) {
  .irl { grid-template-columns: 1fr; }
  .irl__line:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------
   OUR STORY — portrait beside the story, told in beats
   ------------------------------------------------------------ */
.story {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.story__photo { grid-column: 1 / 6; margin: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
.story__photo svg { width: 100%; height: 100%; }
.story__text { grid-column: 7 / 12; display: flex; flex-direction: column; gap: 1.25rem; }
.story__text .body-text + .body-text { margin-top: 0; }
@media (max-width: 900px) {
  .story__photo, .story__text { grid-column: 1 / -1; }
  .story__photo { position: static; max-width: 420px; }
}
.story__lead {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.story__beat {
  padding-block: .6rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.028em;
}
.story__beat .serif { color: var(--verde); }

/* ------------------------------------------------------------
   COMING-SOON PAGES — one card, one image, the honest facts
   ------------------------------------------------------------ */
.soon-card {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--paper-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}
.soon-card__copy  { grid-column: 1 / 8; }
.soon-card__media { grid-column: 8 / 13; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--sage); }
.soon-card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .soon-card__copy, .soon-card__media { grid-column: 1 / -1; }
  .soon-card__media { order: -1; }
}
.soon-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.soon-facts dd {
  margin-top: .4rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------
   WHERE TO BUY — three-line promise, locator, business nudge
   ------------------------------------------------------------ */
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.way {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.8rem) 0;
  border-bottom: 1px solid var(--rule);
}
.way__n { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; color: var(--verde); }
.way__line {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "wdth" 94;
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.way__line .serif { color: var(--verde); }
@media (max-width: 560px) { .way { grid-template-columns: 2.5rem 1fr; } }

.locator {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.locator__list { grid-column: 1 / 7; display: flex; flex-direction: column; gap: .75rem; }
.locator__map  { grid-column: 7 / 13; margin: 0; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
/* phones: the map comes first, so "show on map" never scrolls you away */
@media (max-width: 900px) {
  .locator__list, .locator__map { grid-column: 1 / -1; }
  .locator__map { position: static; order: -1; }
}
.locator__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--stone-deep);
  box-shadow: var(--shadow-md);
}
.locator__cap { margin-top: .85rem; }

.channel {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.6rem);
  background: var(--paper-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
}
/* not live yet: an outline, not a card — the page reads as a plan
   with one confirmed stop, not as five broken listings */
.channel--soon { background: transparent; border: 1px dashed var(--ink-4); }
.channel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.channel__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  letter-spacing: -.025em;
}
.channel--soon .channel__name { color: var(--ink-2); }
.channel__empty,
.channel__none { margin-top: .45rem; font-size: var(--t-sm); color: var(--ink-3); }

.spots { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.spot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 1rem 0 .3rem;
}
.spot + .spot { border-top: 1px solid var(--rule-soft); }
.spot__main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.spot__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  letter-spacing: -.02em;
  transition: color .3s;
}
.spot__addr { font-size: var(--t-sm); color: var(--ink-2); }
.spot__note { font-size: var(--t-sm); color: var(--ink-3); }
.spot__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.spot__acts button {
  background: none;
  border: 0;
  padding: .6rem 0;               /* 44px-ish hit area without a heavier look */
  margin-block: -.6rem;
  cursor: pointer;
}
.spot.is-mapped .spot__name { color: var(--verde); }

.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.nudge__line {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.nudge__line .serif { color: var(--verde); }

/* ------------------------------------------------------------
   PARTNER — choose a segment, then enquire
   The segment cards are real radio inputs inside labels, so the
   form is complete with JS off.
   ------------------------------------------------------------ */
.partner-form { display: flex; flex-direction: column; gap: clamp(2.75rem, 6vw, 4.5rem); }
.partner-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.partner-form__about { display: flex; flex-direction: column; gap: 1.25rem; }

.seg-pick__legend {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 0;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.seg-pick__q {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -.03em;
}

.seg-pick__grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 600px) {
  .seg-pick__grid { grid-template-columns: repeat(2, 1fr); }
  .seg-pick__grid > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .seg-pick__grid { grid-template-columns: repeat(5, 1fr); }
  .seg-pick__grid > :last-child { grid-column: auto; }
}

.seg-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 9rem;
  padding: 1.2rem 1.2rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  cursor: pointer;
  /* arriving on partner.html#retailers lands the card below the fixed nav */
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.seg-opt:hover { border-color: var(--ink-4); background: var(--paper-lift); }
/* visually hidden but still the thing that takes focus and the click */
.seg-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 3px; }
.seg-opt:has(input:checked) { border-color: var(--verde); background: var(--paper-lift); box-shadow: var(--shadow-sm); }
.seg-opt__name {
  padding-right: 1.9rem;          /* clears the tick */
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.seg-opt__line { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-3); }
.seg-opt__tick {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 18px; height: 18px;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}
/* sibling selector, not :has — the tick shows on every browser */
.seg-opt input:checked ~ .seg-opt__tick {
  border-color: var(--verde);
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23FAF4E6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.field__opt { margin-left: .4em; text-transform: none; letter-spacing: 0; color: var(--ink-3); }

/* ------------------------------------------------------------
   PRODUCT DETAIL — "Ways to use" gets its label, per the brief's
   field list (What is it? | Taste | Texture | Protein | …)
   ------------------------------------------------------------ */
.pdp__ways .label { display: block; }
.pdp__cook { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* ------------------------------------------------------------
   NAV OVER A PHOTO HERO
   Verde Theory opens on a full-bleed photograph, under a nav
   that is transparent until it sticks (past 24px of scroll).
   Charcoal on that photo was close to unreadable, so until it
   sticks and gains its ivory backing, the nav reads in ivory.
   ------------------------------------------------------------ */
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .mark,
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .mark__leaf,
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__link { color: var(--paper); }
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__link::after { background: var(--paper); }
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__burger { border-color: rgba(var(--paper-rgb), .45); }
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__burger span,
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__burger span::before,
body:has(.cafe-hero):not(.menu-open) .nav:not(.is-stuck) .nav__burger span::after { background: var(--paper); }
body:has(.cafe-hero) .nav :focus-visible { outline-color: currentColor; }