:root {
  --green-dark: #4a6318;
  --green: #5e7d1f;
  --green-light: #7baa41;
  --lime: #bada55;
  --cream: #e6deca;
  --ink: #1f2417;
  --ink-soft: #4b5240;
  --bg: #ffffff;
  --bg-tint: #f8f9f3;
  --border: #e4e6da;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(31, 36, 23, 0.08);
  --font-head: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 180px; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .5em; line-height: 1.15; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--green-dark); border-color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--sm { padding: 8px 16px; font-size: 0.85rem; width: 100%; }
.link-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; padding: 0; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.site-header { position: sticky; top: 0; z-index: 200; }
.utility-bar { background: #fff; border-bottom: 1px solid var(--border); }
.utility-bar__inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand__logo { height: 34px; width: auto; display: block; }
.brand__word { font-family: var(--font-head); font-size: 1.15rem; }
.brand__word strong { color: var(--ink); }
.brand__word span { color: var(--green); }
.utility-links { display: flex; gap: 20px; }
.utility-links a { font-size: 0.9rem; font-weight: 500; }
.utility-links a:hover { color: var(--green); }
.utility-actions { display: flex; align-items: center; gap: 18px; }
.icon-btn { background: none; border: none; font-size: 1rem; cursor: pointer; }
.account-links { font-size: 0.82rem; line-height: 1.3; text-align: right; }
.account-links a { font-weight: 600; }
.account-links a:hover { color: var(--green); }
.flag-badge { font-size: 1.4rem; }
.main-nav { background: #fff; border-bottom: 1px solid var(--border); }
.main-nav__inner { display: flex; align-items: center; justify-content: flex-end; height: 60px; gap: 24px; }
.main-nav__actions .btn--primary { padding: 8px 16px; font-size: 0.85rem; }
.nav { position: fixed; inset: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 96px 24px 32px; gap: 12px; display: none; z-index: 950; overflow-y: auto; box-shadow: 0 0 60px rgba(0, 0, 0, 0.15); }
.nav.is-open { display: flex; }
.nav > a, .nav__trigger > a { display: block; padding: 16px 22px; border: 1.5px solid var(--border); border-radius: 999px; font-size: 1.05rem; font-weight: 600; text-align: center; color: var(--ink); }
.nav__trigger > a { flex: 1; padding-right: 46px; }
.nav > a:hover, .nav > a.is-current, .nav__trigger > a:hover, .nav__trigger > a.is-current { border-color: var(--green); color: var(--green); background: var(--bg-tint); }
.nav__item { width: 100%; }
.nav__trigger { display: flex; align-items: center; gap: 2px; position: relative; }
.nav__caret { display: flex; align-items: center; justify-content: center; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; font-size: 0.9rem; color: var(--ink-soft); background: none; border: none; cursor: pointer; }
.nav__submenu { position: static; box-shadow: none; border: none; margin-top: 8px; padding: 0; width: 100%; gap: 8px; display: none; flex-direction: column; }
.nav__item.is-open > .nav__submenu { display: flex; }
.nav__submenu a { display: block; padding: 12px 20px; border: 1.5px solid var(--border); border-radius: 999px; text-align: center; font-weight: 500; }
.nav__submenu a:hover { border-color: var(--green); color: var(--green); background: var(--bg-tint); }
@media (min-width: 721px) { .nav { max-width: 420px; } }
.nav__toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; position: relative; z-index: 970; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); display: block; transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.main-nav__actions { display: flex; align-items: center; gap: 20px; }
.points { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit; }
.cart { position: relative; font-size: 1.1rem; background: none; border: none; cursor: pointer; padding: 4px; }
.cart__count { position: absolute; top: -8px; right: -10px; background: var(--green); color: #fff; font-size: 0.62rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.giftbar { background: var(--green-dark); color: #fff; font-size: 0.8rem; }
.giftbar__inner { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.giftbar__links { display: flex; gap: 20px; }
.giftbar__right { display: flex; align-items: center; gap: 20px; }
.giftbar__badge { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.giftbar__badge strong { background: var(--lime); color: var(--green-dark); padding: 2px 10px; border-radius: 999px; }
.search-bar { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: var(--bg-tint); border-bottom: 1px solid transparent; }
.search-bar.is-open { max-height: 70px; border-bottom-color: var(--border); }
.search-bar__inner { display: flex; align-items: center; gap: 12px; padding: 14px 24px; }
.search-bar__inner input { flex: 1; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); font-family: var(--font-body); font-size: 0.95rem; }
.search-bar__count { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.hero { position: relative; overflow: hidden; min-height: 520px; background: #233214 url("../assets/trust-banner-hero.jpg") center/cover no-repeat; }
.hero__slides { position: relative; min-height: 520px; }
.hero__slide { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(18,28,8,0.78) 0%, rgba(18,28,8,0.4) 42%, rgba(18,28,8,0.1) 68%); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide-inner { max-width: 640px; color: #fff; }
.eyebrow { display: inline-block; background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; font-size: 0.82rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.hero h1 span { color: var(--lime); }
.hero__slide p { color: rgba(255,255,255,0.95); font-size: 1.05rem; max-width: 46ch; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero__feature-list { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.hero__feature-list li { color: #fff; font-weight: 500; display: flex; gap: 10px; align-items: flex-start; }
.hero__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.hero__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; }
.hero__dot.is-active { background: #fff; }
.usp-strip { background: var(--cream); }
.usp-strip__inner { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 16px 24px; font-weight: 600; color: var(--green-dark); font-size: 0.92rem; }
.qr-teaser { background: #fff; border-bottom: 1px solid var(--border); }
.qr-teaser__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0; text-align: center; }
.qr-teaser__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-teaser__icon { font-size: 1.8rem; }
.section { padding: 84px 0; }
.section--compact { padding: 48px 0; }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark p { color: #cfd3c6; }
.section__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section--compact .section__head { margin-bottom: 24px; }
.section__head--light h2, .section__head--light p { color: #fff; }
.section__head--light p { color: #cfd3c6; }
.section__head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.section__more { text-align: center; margin-top: 36px; }
.tag { display: inline-block; color: var(--green-dark); background: var(--cream); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.tag--light { background: rgba(255,255,255,0.1); color: var(--lime); }
.feature-card { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 20px; }
.feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 1.5rem; background: var(--cream); border-radius: 50%; margin-bottom: 14px; }
.feature-card__icon--logo { width: auto; padding: 0 16px; border-radius: 14px; }
.feature-card__icon--logo img { height: 24px; width: auto; display: block; }
.feature-card__icon--photo { overflow: hidden; background: none; }
.feature-card__icon--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card h3 { font-size: 1rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.88rem; margin: 0; }
.accent { color: var(--green); }
.highlight-card { text-align: center; }
.highlight-card__art { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; margin: 0 auto 20px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--border); }
.highlight-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.highlight-card h3 { font-size: 1.3rem; color: var(--green-dark); margin-bottom: 8px; }
.highlight-card p { color: var(--ink-soft); }
.highlight-card__art--badge { display: flex; align-items: center; justify-content: center; background: var(--cream); padding: 30px; }
.price-badge-img { width: 100%; height: 100%; object-fit: contain; }
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: left; transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { font-size: 1rem; margin-bottom: 8px; }
.card__price { font-weight: 700; color: var(--green-dark); margin-bottom: 12px; }
.card__img { height: 140px; border-radius: 10px; margin-bottom: 16px; background: linear-gradient(135deg, var(--cream), var(--lime)); display: flex; align-items: center; justify-content: center; }
.card__img::after { content: "\1F95C"; font-size: 2.6rem; }
.card__img--butter1::after { content: "\1F965"; }
.card__img--butter2::after { content: "\1F330"; }
.card__img--butter3::after { content: "\1F36F"; }
.card__img--butter4::after { content: "\1F95C"; }
.card__img--mend1::after, .card__img--mend2::after, .card__img--mend3::after, .card__img--mend4::after { content: "\1F36B"; }
.card__img--clus1::after, .card__img--clus2::after, .card__img--clus3::after, .card__img--clus4::after { content: "\1F36C"; }
.card__img--dates::after { content: "\1F334"; }
.card__img--seed1 { background: #fff url("../assets/pumpkin-seeds-jar-thumb.jpg") center/contain no-repeat; }
.card__img--seed1::after { content: ""; }
.card__img--seed2 { background: #fff url("../assets/sunflower-seeds-jar-thumb.jpg") center/contain no-repeat; }
.card__img--seed2::after, .card__img--seed3::after { content: ""; }
.card__img--seed3 { background: #fff url("../assets/sesame-black-jar-thumb.jpg") center/contain no-repeat; }
.card__img--seed4::after { content: "\1F331"; }
.card__img--seed5::after { content: "\1F33E"; }
.card__img--powder1::after { content: "\1F343"; }
.card__img--powder2::after { content: "\1F333"; }
.card__img--powder3::after { content: "\1FADA"; }
.card__img--powder4::after { content: "\1F7E2"; }
.card__img--oil1::after { content: "\1F965"; }
.card__img--oil2::after { content: "\1F330"; }
.card__img--oil3::after { content: "\1F951"; }
.card__img--oil4::after { content: "\1F95C"; }
.card__img--fx-kombucha::after { content: "\1F375"; }
.card__img--fx-hotchoc::after { content: "\1F36B"; }
.card__img--fx-mango::after { content: "\1F96D"; }
.card__img--fx-pineapple::after { content: "\1F34D"; }
.card__img--fx-granola::after { content: "\1F963"; }
.card__img--fx-oats::after { content: "\1F33E"; }
.card__img--fx-water::after { content: "\1F4A7"; }
.card__img--fx-coffee::after { content: "\2615"; }
.card__img--fx-pesto::after { content: "\1F33F"; }
.card__img--fx-hotsauce::after { content: "\1F336\FE0F"; }
.card--row { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.card--row h3 { margin: 0; display: inline-block; }
.pill { background: var(--lime); color: var(--green-dark); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 10px; text-transform: uppercase; }
.card--variant .variants { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.variant { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.variant:hover { border-color: var(--green); }
.variant.is-selected { background: var(--green); border-color: var(--green); color: #fff; }
.card--spec .card__desc { font-size: 0.87rem; margin-bottom: 12px; }
.allergen-tag { display: block; font-size: 0.72rem; font-weight: 600; color: #8a5a15; background: #fdf2df; border: 1px solid #f0dcb3; border-radius: 8px; padding: 6px 10px; margin-bottom: 14px; }
.card__actions { display: flex; gap: 8px; }
.card__actions .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
.grid--categories { grid-template-columns: repeat(3, 1fr); }
.cat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; display: block; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cat:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat__icon { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.cat h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cat p { font-size: 0.9rem; margin: 0 0 14px; }
.cat__btn { display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--green-dark); border: 1px solid var(--green); border-radius: 999px; padding: 5px 14px; }
.certified { background: var(--cream); }
.certified__inner { display: flex; align-items: center; gap: 24px; padding: 40px 24px; max-width: 1180px; margin: 0 auto; }
.certified__icon { font-size: 2.6rem; flex-shrink: 0; }
.certified h2 { margin-bottom: 6px; }
.certified p { margin: 0; }
.range-card { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 20px; }
.range-card__icon { font-size: 2.4rem; display: block; margin-bottom: 14px; }
.range-card h3 { margin: 0; font-size: 1.05rem; }
.benefit { text-align: center; }
.benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 1.6rem; background: rgba(186, 218, 85, 0.15); border-radius: 50%; margin-bottom: 16px; }
.benefit h3 { color: #fff; font-size: 1.05rem; }
.benefit p { font-size: 0.92rem; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.process__step { position: relative; padding-top: 8px; }
.process__num { display: inline-block; font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--lime); -webkit-text-stroke: 1.5px var(--green); margin-bottom: 10px; }
.process__step h3 { font-size: 1.05rem; }
.process__step p { font-size: 0.92rem; }
.trace { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.checklist li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-soft); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.checklist--icons li { padding-left: 32px; }
.checklist--icons li::before { content: "\2713"; width: 20px; height: 20px; background: var(--green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; top: 1px; }
.product-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; font-size: 0.88rem; font-weight: 600; color: var(--green-dark); }
.product-hero__tags span:not(:last-child)::after { content: "|"; margin-left: 8px; color: var(--border); font-weight: 400; }
.product-gallery { display: flex; gap: 14px; }
.product-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
.product-gallery__thumb { width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--border); overflow: hidden; padding: 0; cursor: pointer; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: border-color .15s ease; }
.product-gallery__thumb:hover { border-color: var(--green-light); }
.product-gallery__thumb.is-active { border-color: var(--green); }
.product-gallery__main { flex: 1; height: 380px; border-radius: var(--radius); overflow: hidden; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; font-size: 6rem; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 24px; }
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.product-hero { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.product-hero__info h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 10px; }
.product-hero__info .card__price { font-size: 1.4rem; margin-bottom: 18px; }
.product-hero__info .variants { margin-bottom: 22px; }
.variant-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 8px; }
.product-hero__info .variant { font-size: 0.85rem; padding: 6px 14px; }
.product-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin-bottom: 28px; }
.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 999px; background: var(--bg-tint); overflow: hidden; }
.qty__btn { width: 46px; border: none; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--green-dark); transition: background .15s ease; }
.qty__btn:hover { background: var(--cream); }
.qty__input { width: 52px; border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); background: #fff; text-align: center; font-size: 1rem; font-weight: 600; font-family: inherit; color: var(--ink); -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.step__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.step__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); }
.step h3 { margin: 2px 0 6px; font-size: 1.3rem; }
.step p { margin: 0; color: var(--ink-soft); }
.step__photo { display: block; width: 100%; height: auto; max-width: 340px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-top: 16px; box-shadow: var(--shadow); }
/* steps-two-col: two steps side by side on wide screens */
@media (min-width: 900px) {
  .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; gap: 20px; }
  .steps .step__photo { max-width: 100%; }
  .steps .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps .step:last-child:nth-child(odd) .step__photo { max-width: 340px; }
}
.step__slides { position: relative; width: 100%; max-width: 340px; aspect-ratio: 4 / 3; margin-top: 16px; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--cream); }
.step__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: step-fade 12s infinite; }
.step__slide:nth-child(1) { object-position: center 25%; animation-delay: 0s; }
.step__slide:nth-child(2) { animation-delay: -8s; }
.step__slide:nth-child(3) { animation-delay: -4s; }
.step__slides:hover .step__slide { animation-play-state: paused; }
.step__slides--2 .step__slide { animation-name: step-fade-2; animation-duration: 8s; }
.step__slides--2 .step__slide:nth-child(2) { animation-delay: -4s; }
.step__slide.step__slide--mid { object-position: center 35%; }
.step__slide.step__slide--low { object-position: center 60%; }
@keyframes step-fade-2 { 0% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes step-fade { 0% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .step__slide { animation: none; } .step__slide:nth-child(1) { opacity: 1; } }
@media (min-width: 900px) { .steps .step__slides { max-width: 100%; } }
.slides { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--cream); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slides-fade-4 16s infinite; }
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: -12s; }
.slide:nth-child(3) { animation-delay: -8s; }
.slide:nth-child(4) { animation-delay: -4s; }
.slides:hover .slide { animation-play-state: paused; }
.slide.slide--top { object-position: center 25%; }
@keyframes slides-fade-4 { 0% { opacity: 1; } 22% { opacity: 1; } 27% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide { animation: none; } .slide:nth-child(1) { opacity: 1; } }
.step__photo--top { object-position: center 25%; }
.step__photo--mid { object-position: center 35%; }
.trust-badges { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.trust-badge { padding: 10px 20px; border-radius: 999px; background: var(--green-dark); color: #fff; font-weight: 600; }
a.trust-badge:hover { background: var(--green); }
@media (max-width: 560px) { .step { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px; } .step__icon { width: 48px; height: 48px; font-size: 1.4rem; } }
.partner-banner .container { text-align: center; }
.partner-banner__img { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto 28px; border-radius: var(--radius); box-shadow: var(--shadow); }
.partner-banner__list { max-width: 520px; margin: 0 auto 28px; text-align: left; }
.partner-banner__img--wide { max-width: 1000px; height: auto; }
.partner-banner__lead { max-width: 640px; margin: 0 auto 20px; color: var(--ink-soft); }
.partner-banner__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.partner-form { gap: 18px; }
.partner-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; background: #fff; }
.partner-form legend { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark); padding: 0 8px; }
.partner-form__note { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.partner-form__checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.partner-form .partner-form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; cursor: pointer; }
.partner-form .partner-form__check input { width: auto; padding: 0; margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
#kraPin { text-transform: uppercase; }
#kraPin::placeholder { text-transform: none; }
.partner-form__file { display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.partner-form__file small { display: block; margin-top: 2px; font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
.partner-form__file input[type="file"] { padding: 10px 12px; background: #fff; border: 1px dashed var(--border); border-radius: 10px; font-size: 0.9rem; width: 100%; }
.partner-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.partner-form__error { color: #8f2424; background: #fdecec; border: 1px solid #f0bcbc; border-radius: 10px; padding: 12px 14px; margin: 0; font-size: 0.9rem; }
.partner-form__done { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 36px 28px; text-align: center; }
.partner-form__done h3 { margin: 10px 0 8px; }
.partner-form__done p { margin: 0; color: var(--ink-soft); }
.partner-form__done a { color: var(--green-dark); text-decoration: underline; }
@media (max-width: 600px) { .partner-form__checks { grid-template-columns: 1fr; } }
.trace-ad { background: linear-gradient(120deg, #1f2d12, var(--green-dark) 55%, var(--green)); color: #fff; padding: 64px 0; }
.trace-ad__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.trace-ad h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.trace-ad h2 span { color: var(--lime); }
.trace-ad p { color: rgba(255,255,255,0.9); max-width: 52ch; }
.trace-ad__steps { list-style: none; counter-reset: step; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.trace-ad__steps li { counter-increment: step; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; align-items: start; }
.trace-ad__steps li::before { content: counter(step); grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--green-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.trace-ad__steps strong { font-size: 1.05rem; color: #fff; }
.trace-ad__steps span { font-size: 0.92rem; color: rgba(255,255,255,0.82); }
.trace-ad__demo { display: flex; align-items: center; justify-content: center; gap: 20px; }
.trace-ad__card { background: #fff; border-radius: 18px; padding: 18px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 4px; max-width: 240px; }
.trace-ad__qr { width: 100%; height: auto; display: block; border-radius: 8px; }
.trace-ad__card strong { color: var(--green-dark); font-size: 1.05rem; margin-top: 6px; }
.trace-ad__card span { color: var(--ink-soft); font-size: 0.82rem; }
.trace-ad__jar { height: 280px; width: auto; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
@media (max-width: 960px) { .trace-ad__inner { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .trace-ad { padding: 48px 0; } .trace-ad__demo { flex-direction: column; } .trace-ad__jar { height: 220px; } }
.accordion { margin-top: 24px; border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark); }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; flex-shrink: 0; }
.accordion__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.accordion__item p { margin: 0 0 14px; padding: 0 2px; color: var(--ink-soft); font-size: 0.92rem; }
.rating { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 0.88rem; color: var(--ink-soft); }
.rating__stars { letter-spacing: 2px; font-size: 1.05rem; color: var(--border); }
.rating__stars.is-filled { color: #e0a526; }
.reviews__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; }
.reviews__list { display: flex; flex-direction: column; gap: 14px; }
.reviews__empty { color: var(--ink-soft); background: #fff; border: 1px dashed var(--border); border-radius: var(--radius); padding: 24px; margin: 0; }
.review { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.review p { margin: 6px 0 10px; }
.review__stars { color: #e0a526; letter-spacing: 2px; }
.review__meta { font-size: 0.8rem; color: var(--ink-soft); }
.reviews__form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.reviews__form h3 { font-size: 1.05rem; margin: 0; }
.reviews__form input, .reviews__form textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; }
.reviews__pick { display: flex; gap: 4px; }
.reviews__pick button { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--border); padding: 0; }
.reviews__pick button.is-on { color: #e0a526; }
@media (max-width: 720px) { .reviews__grid { grid-template-columns: 1fr; } }
.also-like { margin-top: 8px; }
.also-like h3 { font-size: 1rem; margin-bottom: 16px; }
.farmers2 { max-width: 760px; margin: 0 auto; text-align: left; }
.farmers2__content h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.partner-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--border); }
.partner-block:last-child { border-bottom: none; }
.partner-block--reverse { direction: rtl; }
.partner-block--reverse > * { direction: ltr; }
.partner-block__text h3 { font-size: 1.15rem; }
.flag-icon { display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-left: 8px; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.partner-block__art { height: 320px; border-radius: var(--radius); background: linear-gradient(135deg, var(--cream), var(--lime)); display: flex; align-items: center; justify-content: center; font-size: 3.4rem; overflow: hidden; }
.partner-block__art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.farmhero { position: relative; background: linear-gradient(120deg, var(--green-dark), var(--green)); padding: 96px 0 72px; text-align: center; }
.farmhero--farm { background: linear-gradient(120deg, rgba(15,38,14,0.5), rgba(40,90,38,0.42)), url("../assets/farmhero-bg.jpg") center/cover no-repeat; }
.farmhero--farm h1, .farmhero--farm p { text-shadow: 0 2px 10px rgba(0,0,0,0.45); }
.farmhero__inner { max-width: 760px; margin: 0 auto; }
.farmhero .tag { background: rgba(255,255,255,0.16); color: #fff; }
.farmhero h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: #fff; }
.farmhero p { color: rgba(255,255,255,0.9); }
.farmhero__badges { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.farmhero__badges img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
@media (min-width: 1000px) { .farmhero--nuts .farmhero__badges { position: absolute; right: max(24px, calc(50% - 560px)); bottom: -92px; margin: 0; z-index: 3; } .farmhero--nuts .farmhero__badges img { width: 120px; height: 120px; } }
.farmhero__afa { display: block; width: 88px; height: auto; margin: 0 auto 16px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: var(--shadow); }
@media (min-width: 1000px) { .farmhero__afa { position: absolute; right: max(24px, calc(50% - 560px)); top: 32px; width: 118px; margin: 0; } }
.farmhero__nuts { display: block; width: 230px; max-width: 70%; height: auto; margin: 22px auto 0; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.4)); }
@media (max-width: 999px) {
  .farmhero--nuts { text-align: left; padding: 112px 0 96px; margin-bottom: 76px; }
  .farmhero--nuts .farmhero__inner { margin: 0; max-width: none; }
  .farmhero--nuts .farmhero__afa { position: absolute; right: 16px; top: 16px; width: 72px; margin: 0; padding: 4px; border-radius: 10px; }
  .farmhero--nuts .farmhero__nuts { position: absolute; left: 12px; bottom: -48px; width: 48vw; max-width: 300px; margin: 0; z-index: 3; }
  .farmhero--nuts .farmhero__badges { position: absolute; right: 12px; bottom: -34px; margin: 0; gap: 4px; z-index: 3; }
  .farmhero--nuts .farmhero__badges img { width: 14vw; max-width: 76px; height: auto; aspect-ratio: 1 / 1; }
}
@media (min-width: 1000px) {
  .farmhero--nuts { text-align: left; padding-bottom: 190px; margin-bottom: 116px; }
  .farmhero--nuts .farmhero__inner { max-width: 1120px; }
  .farmhero--nuts .farmhero__inner > p { max-width: 640px; }
  .farmhero--nuts .farmhero__nuts { position: absolute; left: max(24px, calc(50% - 560px)); bottom: -96px; width: min(460px, 38vw); max-width: none; margin: 0; z-index: 3; }
}
.farmhero__lede { font-weight: 600; color: var(--lime); font-size: 1.05rem; margin: 0; }
.authority { background: var(--green-dark); color: #fff; }
.authority__inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 20px 24px; text-align: center; font-size: 0.88rem; }
.authority__label { font-weight: 600; }
.authority__roles { display: flex; gap: 14px; flex-wrap: wrap; }
.authority__roles span, .authority__roles a { background: rgba(255,255,255,0.12); padding: 4px 12px; border-radius: 999px; }
.authority__roles a { color: #fff; text-decoration: none; transition: background .15s ease; }
.authority__roles a:hover { background: rgba(255,255,255,0.22); text-decoration: underline; }
@media (max-width: 600px) {
  .authority__inner { gap: 8px; padding: 12px 16px; font-size: 0.74rem; line-height: 1.35; }
  .authority__roles { gap: 6px; justify-content: center; }
  .authority__roles span, .authority__roles a { padding: 3px 9px; font-size: 0.72rem; }
  .authority__link { font-size: 0.72rem; }
}
.grid--2-cta { grid-template-columns: repeat(2, 1fr); }
.cta-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; }
.footer { background: var(--ink); color: #cfd3c6; padding: 64px 0 24px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 6px; }
.footer__col a { font-size: 0.88rem; opacity: 0.85; }
.footer__col a:hover { opacity: 1; text-decoration: underline; }
.footer__brand p { font-size: 0.88rem; color: #b9bfae; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 0.82rem; color: #9aa08c; }
.overlay { position: fixed; inset: 0; background: rgba(20, 24, 14, 0.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 900; }
.overlay.is-open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.15); z-index: 950; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s ease; }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer__close, .modal__close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ink-soft); width: 32px; height: 32px; border-radius: 50%; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer__empty { color: var(--ink-soft); text-align: center; margin-top: 40px; }
.drawer__item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.drawer__item-img { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, var(--cream), var(--lime)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.drawer__item-info { flex: 1; }
.drawer__item-info h4 { font-size: 0.9rem; margin: 0 0 2px; }
.drawer__item-info span { font-size: 0.82rem; color: var(--ink-soft); }
.drawer__item-qty { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.drawer__item-qty button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 0.8rem; line-height: 1; }
.drawer__item-remove { background: none; border: none; color: var(--ink-soft); cursor: pointer; font-size: 0.95rem; padding: 4px; }
.drawer__foot { padding: 20px 24px; border-top: 1px solid var(--border); }
.drawer__total { display: flex; justify-content: space-between; margin-bottom: 14px; font-weight: 600; }
.modal { position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { background: #fff; border-radius: var(--radius); padding: 32px; max-width: 420px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.25); transform: translateY(10px); transition: transform .2s ease; max-height: 85vh; overflow-y: auto; }
.modal.is-open .modal__box { transform: translateY(0); }
.modal__box--sm { max-width: 360px; }
.modal__box--spec { max-width: 560px; }
.modal__close { position: absolute; top: 14px; right: 14px; }
.spec-sheet { margin: 20px 0; border-top: 1px solid var(--border); }
.spec-sheet__row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.spec-sheet__row span:first-child { font-weight: 600; color: var(--ink); font-size: 0.88rem; }
.spec-sheet__row span:last-child { color: var(--ink-soft); font-size: 0.9rem; }
.spec-sheet__note { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; margin: 0; }
.spec-sheet__download { margin-top: 24px; }
.spec-print-header { display: none; }
@media print { body * { visibility: hidden; } .spec-sheet-section, .spec-sheet-section * { visibility: visible; } .spec-sheet-section { position: absolute; left: 0; top: 0; width: 100%; padding: 24px !important; background: #fff !important; } .spec-sheet__download { display: none; } .spec-print-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--green); } }
.modal__img { height: 160px; border-radius: 10px; margin-bottom: 16px; background: linear-gradient(135deg, var(--cream), var(--lime)); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
#loginForm { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#loginForm input { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-family: var(--font-body); font-size: 0.95rem; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease; z-index: 1000; white-space: nowrap; }
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.stats-band { background: var(--green); color: #fff; padding: 72px 0; text-align: center; }
.stats-band h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 40px; }
.stats-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
.stat strong { display: block; font-family: var(--font-head); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 500; margin-bottom: 14px; text-transform: uppercase; }
.stat p { color: rgba(255,255,255,0.92); margin: 0 auto; max-width: 30ch; font-size: 1.05rem; }
.btn--light { background: #fff; color: var(--green-dark); }
.btn--light:hover { background: var(--cream); }
.footer--v2 { background: var(--bg-tint); color: var(--ink); padding: 56px 0 24px; border-top: 1px solid var(--border); }
.footer__top { display: grid; grid-template-columns: 1.1fr 0.8fr 1.2fr; gap: 48px; margin-bottom: 36px; }
.footer--v2 .footer__col { gap: 12px; }
.footer--v2 .footer__col h4 { color: var(--ink); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.footer--v2 .footer__col a { color: var(--ink); font-size: 0.95rem; opacity: 1; }
.footer--v2 .footer__col a:hover { color: var(--green); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.team-member { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.team-member__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 18%; }
@media (max-width: 600px) {
  #team.section { padding: 40px 0; }
  #team .section__head { margin-bottom: 20px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .team-member { border-radius: 12px; }
  .team-member__body { padding: 10px 10px 12px; gap: 2px; }
  .team-member__body h3 { font-size: 0.86rem; line-height: 1.25; }
  .team-member__body p { font-size: 0.74rem; line-height: 1.3; margin-bottom: 8px; }
  .team-member__body .btn { padding: 5px 12px; font-size: 0.74rem; }
  .team-member__avatar span { width: 52px; height: 52px; font-size: 1.15rem; }
}
@media (max-width: 700px) {
  #who.section { padding: 36px 0; }
  #who .trace { gap: 18px; }
  #who .slides { aspect-ratio: 16 / 10; border-radius: 12px; }
  #who .trace__content .tag { font-size: 0.72rem; padding: 5px 12px; margin-bottom: 8px; }
  #who .trace__content h2 { font-size: 1.35rem; margin-bottom: 8px; }
  #who .trace__content p { font-size: 0.9rem; line-height: 1.55; margin: 0 0 8px; }
  #who .partner-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  #who .partner-banner__actions .btn { padding: 6px 12px; font-size: 0.78rem; line-height: 1.3; }
}
@media (max-width: 700px) {
  #story.section, #values.section, #registered.section { padding: 32px 0; }
  #story .section__head, #values .section__head, #registered .section__head { margin-bottom: 16px; }
  #story .section__head h2, #values .section__head h2, #registered .section__head h2 { font-size: 1.3rem; margin-bottom: 0; }
  #story .section__head .tag, #values .section__head .tag, #registered .section__head .tag { font-size: 0.7rem; padding: 4px 11px; margin-bottom: 8px; }
  #story p { font-size: 0.9rem !important; line-height: 1.6 !important; }
  #values .grid { gap: 10px; }
  #values .feature-card { padding: 12px 14px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; text-align: left; }
  #values .feature-card__icon { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 1.1rem; margin: 0; }
  #values .feature-card h3 { font-size: 0.92rem; margin: 0 0 2px; }
  #values .feature-card p { font-size: 0.8rem; line-height: 1.4; }
  #registered .trust-badges { gap: 8px; }
  #registered .trust-badge, .trust-badges .trust-badge { padding: 6px 13px; font-size: 0.78rem; }
}
.cashew-hero { padding-bottom: 48px; }
#product .product-gallery__thumb { width: 72px; height: 88px; }
#product .product-gallery__main { height: 460px; background: linear-gradient(160deg, var(--cream), var(--bg-tint)); }
#product .variant { cursor: pointer; font-family: inherit; }
#product .product-hero__actions .btn { flex: 0 1 auto; }
#product .product-hero__actions { margin-bottom: 14px; }
#product .product-hero__actions .btn--lg { flex: 1 1 auto; text-align: center; }
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; margin: 0 0 12px; }
.stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.stock--in { color: #1b7a3e; }
.stock--out { color: #b3261e; }
.card .stock { margin: 0 0 8px; font-size: 0.74rem; }
.btn--whatsapp { background: #fff; color: #128c4a; border-color: #25d366; gap: 10px; font-weight: 700; }
.btn--whatsapp:hover { background: #25d366; color: #fff; }
#product .product-hero__actions--wa { margin-bottom: 12px; }
#product .product-hero__actions--wa .btn { flex: 1 1 auto; width: 100%; }
.delivery-box { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
.delivery-box p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.delivery-box p + p { margin-top: 8px; }
@media (max-width: 600px) { #product .product-hero__actions--wa .btn { font-size: 0.86rem; padding: 9px 14px; } .delivery-box { padding: 10px 12px; margin-bottom: 12px; } .delivery-box p { font-size: 0.8rem; } }
#product .product-hero__actions--secondary .btn { flex: 1 1 0; padding: 10px 16px; font-size: 0.9rem; }
@media (max-width: 960px) {
  #product .product-gallery__main { flex: 0 0 auto; height: 300px; }
  #product .product-gallery__main img { height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
  #product .product-gallery__thumb { width: 52px; height: 64px; }
}
@media (max-width: 600px) {
  #product.section { padding: 28px 0; }
  #product .product-hero { gap: 18px; }
  #product .product-hero__info h1 { font-size: 1.4rem; }
  #product .product-hero__actions { gap: 8px; margin-bottom: 18px; }
  #product .product-hero__actions .btn { padding: 8px 14px; font-size: 0.82rem; }
  #product .checklist { font-size: 0.88rem; }
  #product .accordion { margin-top: 14px; }
}
.cashew-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 8px; }
.hero-packs { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-top: 26px; }
.hero-packs img { height: 210px; width: auto; border-radius: 10px; box-shadow: 0 14px 26px rgba(0,0,0,0.35); }
.hero-packs img:nth-child(1) { transform: rotate(-5deg); }
.hero-packs img:nth-child(3) { transform: rotate(5deg); }
.card__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 8%; border-radius: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .hero-packs { gap: 8px; } .hero-packs img { height: 130px; } .cashew-hero .btn { padding: 9px 16px; font-size: 0.85rem; } }
@media (max-width: 600px) {
  #range.section { padding: 36px 0; }
  #range .section__head { margin-bottom: 18px; }
  #range .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #range .card { padding: 10px; border-radius: 12px; }
  #range .card__photo { border-radius: 8px; margin-bottom: 8px; }
  #range .card h3 { font-size: 0.86rem; line-height: 1.25; }
  #range .card__desc { font-size: 0.72rem; line-height: 1.35; margin: 4px 0; }
  #range .allergen-tag { font-size: 0.64rem; }
  #range .card__actions { gap: 6px; flex-direction: column; align-items: stretch; }
  #range .card__actions .btn { width: 100%; white-space: normal; text-align: center; }
  #range .card__actions .btn { padding: 5px 8px; font-size: 0.7rem; }
  #why.section, #farming.section { padding: 32px 0; }
  #why .section__head { margin-bottom: 16px; }
  #why .grid { gap: 10px; }
  #why .feature-card { padding: 12px 14px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; text-align: left; }
  #why .feature-card__icon { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 1.1rem; margin: 0; }
  #why .feature-card h3 { font-size: 0.92rem; margin: 0 0 2px; }
  #why .feature-card p { font-size: 0.8rem; line-height: 1.4; }
}
@media (max-width: 600px) {
  .cashew-hero { padding: 40px 0 28px; }
  .cashew-hero h1 { font-size: 1.7rem; margin-bottom: 6px; }
  .cashew-hero .tag { font-size: 0.7rem; padding: 4px 11px; margin-bottom: 8px; }
  .cashew-hero p { font-size: 0.88rem; line-height: 1.45; margin-bottom: 10px; }
  .cashew-hero__cta { margin: 10px 0 0; gap: 8px; }
  .cashew-hero .btn { padding: 7px 14px; font-size: 0.8rem; }
  #product.section { padding: 20px 0; }
  #product .product-gallery__main { height: 230px; }
  #product .product-gallery__thumb { width: 44px; height: 54px; }
  #product .product-gallery { gap: 8px; }
  #product .product-hero { gap: 12px; }
  #product .product-hero__info .tag { font-size: 0.68rem; padding: 3px 10px; margin-bottom: 6px; }
  #product .product-hero__info h1 { font-size: 1.25rem; margin-bottom: 6px; }
  #product .product-hero__info > p { font-size: 0.86rem; line-height: 1.45; margin: 0 0 8px; }
  #product .product-hero__tags { font-size: 0.74rem; gap: 6px; margin-bottom: 10px; }
  #product .variant-label { font-size: 0.7rem; margin-bottom: 6px; }
  #product .product-hero__info .variants { margin-bottom: 12px; }
  #product .product-hero__info .variant { font-size: 0.74rem; padding: 4px 11px; }
  #product .product-hero__actions { gap: 6px; margin-bottom: 12px; }
  #product .product-hero__actions .btn { padding: 6px 12px; font-size: 0.76rem; }
  #product .checklist li { font-size: 0.82rem; padding: 2px 0 2px 24px; }
  #product .accordion { margin-top: 10px; }
  #product .accordion__item summary { padding: 11px 2px; font-size: 0.88rem; }
  #product .accordion__item p { font-size: 0.8rem; }
  #range .card__photo { aspect-ratio: 1 / 1; object-position: center 14%; }
  #range .card__img { height: 120px; margin-bottom: 8px; }
  #range .card__desc { display: none; }
  #range .card h3 { margin: 0 0 4px; }
  #range .allergen-tag { margin: 0 0 6px; display: block; }
  #range .card--spec { min-height: 0; }
  #range .section__head p { font-size: 0.82rem; margin: 4px 0 0; }
  #range .section__head h2 { font-size: 1.3rem; }
  #range p[style] { margin-top: 16px !important; font-size: 0.82rem; }
  #why .section__head h2, #farming h2 { font-size: 1.25rem; }
  #why.section { padding: 26px 0; }
  #why .feature-card { padding: 10px 12px; }
  #why .feature-card p { font-size: 0.76rem; }
  #farming.section { padding: 26px 0; }
  #farming .trace { gap: 14px; }
  #farming .trace__art img { aspect-ratio: 16 / 10; object-fit: cover; }
  #farming .trace__content p, #farming .checklist li { font-size: 0.86rem; line-height: 1.5; }
  #farming .trace__content .tag { font-size: 0.68rem; padding: 3px 10px; margin-bottom: 6px; }
  #farming .flag-icon { width: 24px; height: 24px; }
  #farming .btn { padding: 7px 14px; font-size: 0.8rem; }
  .cashew-cta.section--compact { padding: 22px 0; }
  .cashew-cta .section__head h2 { font-size: 1.2rem !important; }
  .cashew-cta .section__head p { font-size: 0.82rem; }
  .cashew-cta .btn { padding: 7px 12px; font-size: 0.78rem; }
  .cashew-cta .partner-banner__actions { gap: 6px; }
}
.team-member__avatar { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--green-dark), var(--green)); display: flex; align-items: center; justify-content: center; }
.team-member__avatar span { width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.55); color: #fff; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; }
.team-member__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.team-member__body h3 { margin: 0; font-size: 1.05rem; }
.team-member__body p { margin: 0 0 10px; font-size: 0.9rem; color: var(--ink-soft); }
.team-member__body .btn { width: auto; align-self: flex-start; margin-top: auto; }
.footer--v2 .footer__col h4 a { font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
.footer--v2 .footer__brand p, .footer--v2 .footer__signup p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.footer__logo img { height: 64px; width: auto; display: block; mix-blend-mode: multiply; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__badges span { font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; background: #fff; color: var(--green-dark); }
.footer--v2 .newsletter__form { max-width: none; margin: 0; }
.footer--v2 .newsletter__form > button { align-self: flex-start; }
.footer--v2 .footer__bottom { border-top: 1px solid var(--border); color: var(--ink-soft); }
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } .footer__signup { grid-column: 1 / -1; } .stats-band__grid { gap: 24px; } }
@media (max-width: 720px) { .stats-band__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } .footer--v2 .newsletter__row { grid-template-columns: 1fr; } }
.newsletter { padding: 72px 0; }
.newsletter__head { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.newsletter__form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.newsletter__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.newsletter__form input { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-family: var(--font-body); font-size: 0.95rem; width: 100%; }
.newsletter__check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-soft); }
.newsletter__check input { width: auto; flex-shrink: 0; }
.newsletter__form > button { align-self: center; }
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.contact-details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.contact-details h3 { margin-bottom: 20px; }
.contact-details__block { margin-bottom: 20px; }
.contact-details__block:last-child { margin-bottom: 0; }
.contact-details__block h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 4px; }
.contact-details__block p { margin: 0; color: var(--ink); }
.contact-details__block a:hover { color: var(--green); text-decoration: underline; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
[hidden] { display: none !important; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form select, .contact-form textarea { padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-family: var(--font-body); font-size: 0.95rem; width: 100%; background: #fff; color: var(--ink); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form > button { align-self: flex-start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }
.county-legend { display: flex; gap: 16px; justify-content: center; margin-bottom: 14px; font-size: 0.78rem; color: var(--ink-soft); }
.county-legend__item { display: flex; align-items: center; gap: 6px; }
.county-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.county-dot--live { background: var(--green); }
.county-dot--soon { background: var(--border); }
.hero-logos { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.rubis-logo, .enjoy-logo, .pure-logo { object-fit: contain; width: 72px; height: 72px; border-radius: 16px; background: #fff; padding: 8px; box-shadow: var(--shadow); }
.pure-logo-tile { width: 96px; height: 96px; border-radius: 20px; background: #fff; padding: 10px; object-fit: contain; box-shadow: var(--shadow); }
.partner-logo { height: 84px; width: auto; border-radius: 14px; box-shadow: var(--shadow); }
.farmhero--logo-corner .hero-logos .pure-logo { width: 84px; height: 84px; }
.feature-card__logo { display: block; height: 80px; width: auto; max-width: 80%; object-fit: contain; margin: 0 auto 14px; border-radius: 10px; }
.partner-logo--card { background: #fff; padding: 6px; height: 96px; width: 96px; object-fit: contain; }
.farmhero--photo { background: linear-gradient(120deg, rgba(15,38,14,0.6), rgba(40,90,38,0.48)), url("../assets/enjoy-store.jpg") center 20%/cover no-repeat; padding: 150px 0 120px; }
.farmhero--factory { background: linear-gradient(120deg, rgba(15,38,14,0.62), rgba(40,90,38,0.5)), url("../assets/pure-factory.jpg") center 35%/cover no-repeat; padding: 150px 0 120px; }
.farmhero--factory h1, .farmhero--factory p { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.farmhero--photo h1, .farmhero--photo p { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.farmhero--logo-side .hero-logos { justify-content: flex-start; }
@media (min-width: 981px) { .farmhero--logo-corner .hero-logos { position: absolute; left: max(24px, calc(50% - 560px)); top: 32px; margin: 0; } }
@media (min-width: 981px) { .farmhero--logo-side .hero-logos { position: absolute; left: max(24px, calc(50% - 560px)); top: calc(50% - 32px); transform: translateY(-50%); margin: 0; } }
.kenya-map-wrap { max-width: 260px; margin: 0 auto 14px; text-align: center; }
svg.county-map { width: 100%; height: auto; }
.county-map__path { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; paint-order: stroke; cursor: pointer; transition: fill .15s ease, opacity .15s ease; vector-effect: non-scaling-stroke; }
.county-map__path--live { fill: var(--green-light); }
.county-map__path--soon { fill: var(--border); }
.county-map__path:hover { opacity: 0.8; }
.county-map__path.is-selected { fill: var(--green-dark); }
.kenya-map__credit { margin: 6px 0 0; font-size: 0.68rem; color: var(--ink-soft); }
.kenya-map__credit a:hover { color: var(--green); text-decoration: underline; }
.county-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 20px; }
.county { padding: 8px 4px; border-radius: 8px; border: 1.5px solid var(--border); background: #fff; font-size: 0.72rem; font-weight: 600; text-align: center; cursor: pointer; color: var(--ink-soft); transition: background .15s ease, color .15s ease, border-color .15s ease; line-height: 1.2; }
.county--live { border-color: var(--green); color: var(--green-dark); background: var(--bg-tint); }
.county--live:hover, .county--live.is-selected { background: var(--green); color: #fff; }
.county--soon:hover, .county--soon.is-selected { border-color: var(--ink-soft); color: var(--ink); }
.county-detail { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; text-align: center; min-height: 80px; }
.county-detail__placeholder { margin: 0; color: var(--ink-soft); }
.county-detail h4 { margin-bottom: 8px; }
.county-detail p { margin: 0 0 14px; }
.county-detail__stores { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.store-chip { background: var(--bg-tint); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 500; color: var(--ink); cursor: pointer; font-family: inherit; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.store-chip:hover { border-color: var(--green); color: var(--green-dark); }
.flavour-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
@media (min-width: 600px) { .flavour-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .flavour-grid { grid-template-columns: repeat(6, 1fr); gap: 24px 14px; } }
.flavour { margin: 0; text-align: center; }
.flavour img { width: 100%; max-width: 230px; height: auto; margin: 0 auto 12px; border-radius: 12px; box-shadow: var(--shadow); }
.flavour figcaption strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.flavour figcaption span { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.store-products { margin: 6px 0 12px; padding-left: 20px; font-size: 0.9rem; color: var(--ink-soft); }
.store-products li { margin: 2px 0; }
.store-chip.is-selected { background: var(--green); border-color: var(--green); color: #fff; }
.store-info { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; }
.store-info h5 { margin-bottom: 6px; font-size: 0.95rem; }
.store-info p { margin: 0 0 4px; font-size: 0.85rem; color: var(--ink-soft); }
.store-info strong { color: var(--ink); }
.store-info a:hover { color: var(--green); text-decoration: underline; }
@media (max-width: 720px) { .county-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .county-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .trace, .product-hero { grid-template-columns: 1fr; } .product-gallery { flex-direction: column-reverse; } .product-gallery__thumbs { flex-direction: row; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--categories, .grid--3 { grid-template-columns: repeat(2, 1fr); } .process { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(2, 1fr); } .qr-teaser__inner { grid-template-columns: 1fr; gap: 16px; } .utility-links { display: none; } .partner-block, .partner-block--reverse { grid-template-columns: 1fr; direction: ltr; } .grid--2-cta { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .utility-bar__inner { height: 60px; } .account-links { display: none; } .main-nav__actions .btn--primary, .points { display: none; } .giftbar__links { display: none; } .grid--4, .grid--categories, .grid--3, .process, .footer__grid, .newsletter__row { grid-template-columns: 1fr; } .hero { min-height: 620px; } .hero__slides { min-height: 620px; } .drawer { width: 100%; max-width: 100vw; } .search-bar__inner { flex-wrap: wrap; } }

.logo-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: logo-scroll 32s linear infinite; }
.logo-marquee:hover .logo-marquee__track, .logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item { display: flex; align-items: center; flex: 0 0 auto; }
.logo-marquee__item img { height: 72px; width: auto; border-radius: 10px; background: #fff; box-shadow: var(--shadow); transition: transform .2s ease; }
.logo-marquee__item:hover img { transform: scale(1.06); }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } .logo-marquee__track { animation: none; } }

/* Contact page */
.contacthero { background: linear-gradient(rgba(10,30,10,0.45), rgba(10,30,10,0.55)), url("../assets/farmhero-bg.jpg") center 40%/cover no-repeat; padding: 120px 0 110px; text-align: center; color: #fff; }
.contacthero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.4rem); margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.contacthero__script { display: block; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.2rem); margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.contactpage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contactpage__info h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.35; margin-bottom: 24px; }
.contactpage__big { font-size: 1.5rem; margin: 0 0 8px; }
.contactpage__small { font-size: 1.05rem; margin: 0 0 16px; }
.contactpage__info a:hover { color: var(--green); text-decoration: underline; }
.contactpage__wa { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 28px; font-weight: 700; color: var(--green-dark); }
.contactpage__waicon { flex: 0 0 auto; }
.contactpage__addr h4 { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 4px; }
.contactpage__addr p { margin: 0; }
.contact-form--line { gap: 22px; }
.contact-form--line label { display: block; font-size: 0.95rem; color: var(--ink); width: 100%; }
.contact-form--line input, .contact-form--line select, .contact-form--line textarea { display: block; margin-top: 4px; border: 0; border-bottom: 1px solid #b9c2b6; border-radius: 0; padding: 10px 0; background: transparent; }
.contact-form--line input:focus, .contact-form--line select:focus, .contact-form--line textarea:focus { outline: none; border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.contact-form--line textarea { min-height: 90px; }
@media (max-width: 860px) { .contactpage__grid { grid-template-columns: 1fr; gap: 32px; } .contacthero { padding: 80px 0 70px; } .contactpage__big { font-size: 1.25rem; } }
@media (max-width: 600px) {
  .contacthero { padding: 44px 0 38px; }
  .contacthero__script { font-size: 1.1rem; margin-bottom: 0; }
  .contacthero h1 { font-size: 2.1rem; }
  .contactpage { padding-block: 28px; }
  .contactpage__grid { gap: 22px; }
  .contactpage__info h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 12px; }
  .contactpage__big { font-size: 1.05rem; margin-bottom: 4px; }
  .contactpage__small { font-size: 0.95rem; margin-bottom: 8px; }
  .contactpage__wa { margin: 2px 0 14px; font-size: 0.95rem; }
  .contactpage__addr h4 { font-size: 0.7rem; }
  .contactpage__addr p { font-size: 0.9rem; line-height: 1.45; }
  .contact-form--line { gap: 12px; }
  .contact-form--line .contact-form__row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .contact-form--line label { font-size: 0.8rem; }
  .contact-form--line input, .contact-form--line select, .contact-form--line textarea { padding: 6px 0; font-size: 0.9rem; }
  .contact-form--line textarea { min-height: 64px; }
  .contact-form--line > button { align-self: stretch; padding-block: 11px; }
}
/* Compact footer on phones */
@media (max-width: 600px) {
  .footer--v2 { padding: 28px 0 14px; }
  .footer__top { gap: 18px; margin-bottom: 16px; }
  .footer--v2 .footer__col { gap: 6px; }
  .footer__logo img { height: 40px; }
  .footer--v2 .footer__brand p, .footer--v2 .footer__signup p { font-size: 0.82rem; line-height: 1.45; }
  .footer__badges { gap: 5px; }
  .footer__badges span { font-size: 0.68rem; padding: 3px 8px; }
  .footer--v2 .footer__col h4 { font-size: 0.78rem; margin-bottom: 0; }
  .footer__top > .footer__col:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 5px; }
  .footer__top > .footer__col:nth-child(2) h4 { grid-column: 1 / -1; }
  .footer--v2 .footer__col a { font-size: 0.85rem; }
  .footer--v2 .newsletter__row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer--v2 .newsletter__form { gap: 8px; }
  .footer--v2 .newsletter__form input[type="text"], .footer--v2 .newsletter__form input[type="email"], .footer--v2 .newsletter__form input[type="tel"] { padding: 9px 12px; font-size: 0.88rem; }
  .footer--v2 .newsletter__check { font-size: 0.78rem; }
  .footer--v2 .newsletter__form > button { align-self: stretch; padding-block: 10px; }
  .footer--v2 .footer__bottom { padding-top: 12px; font-size: 0.74rem; gap: 4px; }
}
.contactpage__block { margin-bottom: 18px; }
.contactpage__block h4 { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 4px; }
.contactpage__block p { font-size: 1.35rem; margin: 0 0 2px; }
@media (max-width: 600px) { .contactpage__block { margin-bottom: 10px; } .contactpage__block h4 { font-size: 0.7rem; margin-bottom: 2px; } .contactpage__block p { font-size: 1.05rem; } }
.contactpage__wa.btn { background: #25d366; color: #fff; border: 0; padding: 12px 22px; border-radius: 999px; margin: 6px 0 24px; gap: 10px; font-weight: 700; box-shadow: 0 2px 8px rgba(37,211,102,0.35); }
.contactpage__info a.contactpage__wa.btn:hover { background: #1ebe5a; color: #fff; text-decoration: none; }
@media (max-width: 600px) { .contactpage__wa.btn { padding: 10px 18px; margin: 4px 0 16px; font-size: 0.92rem; } }
.contactpage__wa.btn { padding: 7px 16px; font-size: 0.9rem; gap: 8px; box-shadow: none; }
.contactpage__wa .contactpage__waicon { width: 18px; height: 18px; }
@media (max-width: 600px) { .contactpage__wa.btn { padding: 6px 14px; font-size: 0.85rem; margin: 2px 0 12px; } .contactpage__wa .contactpage__waicon { width: 16px; height: 16px; } }
.contact-form--line > button.btn { padding: 8px 22px; font-size: 0.92rem; }
@media (max-width: 600px) { .contact-form--line > button.btn { padding: 7px 16px; font-size: 0.88rem; align-self: stretch; } }
.footer--v2 .newsletter__form > button.btn { padding: 8px 22px; font-size: 0.92rem; }
@media (max-width: 600px) { .footer--v2 .newsletter__form > button.btn { padding: 7px 16px; font-size: 0.88rem; } }
/* Jar photos have a white background: make the whole picture frame white */
.product-gallery__main:has(> img) { background: #fff; border: 1px solid var(--border); }
#product .product-gallery__main:has(> img) { background: #fff; border: 1px solid var(--border); }
#product .product-gallery__main:has(> #cashewMain) { background: linear-gradient(160deg, var(--cream), var(--bg-tint)); border: 0; }
/* About: "Want to work with us?" band with handshake picture */
.workband { padding: 44px 0; background: linear-gradient(rgba(14,40,16,0.72), rgba(14,40,16,0.62)), url("../assets/work-with-us-bg.jpg") center/cover no-repeat; color: #fff; text-align: center; }
.workband h2, .workband p { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.45); }
@media (max-width: 600px) { .workband { padding: 28px 0; } }
/* Footer contact icons */
.footer__contact { display: flex; flex-direction: column; gap: 6px; }
.footer--v2 .footer__brand .footer__line { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); }
.footer__icon { flex: 0 0 auto; color: var(--green); }
@media (max-width: 600px) { .footer__contact { gap: 4px; } .footer--v2 .footer__brand .footer__line { gap: 8px; font-size: 0.85rem; } .footer__icon { width: 16px; height: 16px; } }
/* Footer social icons */
.footer__social { display: flex; gap: 10px; margin: 2px 0 4px; }
.footer--v2 .footer__col .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--green-dark); transition: background .15s, color .15s; }
.footer--v2 .footer__col .footer__social a:hover { background: var(--green); color: #fff; }
@media (max-width: 600px) { .footer--v2 .footer__col .footer__social a { width: 34px; height: 34px; } .footer__social svg { width: 18px; height: 18px; } }
/* Cashew: Product Benefits */
.benefits__title { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 28px; }
.benefits__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.benefits__box { border: 1.5px solid var(--ink); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); padding: 36px 40px; display: flex; align-items: center; }
.benefits__box .checklist { margin: 0; width: 100%; }
.benefits__box .checklist li { font-size: 1.1rem; line-height: 1.45; color: var(--ink); margin-bottom: 14px; }
.benefits__box .checklist li:last-child { margin-bottom: 0; }
.benefits__pic { display: flex; gap: 10px; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--cream), var(--bg-tint)); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 16px; }
.benefits__pic img { width: 31%; height: auto; max-height: 340px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18)); }
.benefits__pic img:nth-child(2) { transform: translateY(-12px); }
@media (max-width: 760px) {
  .benefits { padding-block: 28px; }
  .benefits__title { font-size: 1.5rem; margin-bottom: 16px; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefits__box { border-right: 1.5px solid var(--ink); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 18px 18px; }
  .benefits__box .checklist li { font-size: 0.9rem; margin-bottom: 8px; }
  .benefits__pic { border-radius: 0 0 var(--radius) var(--radius); padding: 14px 10px; }
  .benefits__pic img { max-height: 180px; }
}
/* Spec cards: let the buttons wrap so 4 cards never push the page wider than the screen */
.grid--4 > .card { min-width: 0; }
.card--spec .card__actions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .benefits__box { padding: 12px 14px; }
  .benefits__box .checklist li { font-size: 0.82rem; line-height: 1.35; margin-bottom: 5px; padding-left: 28px; }
  .benefits__box .checklist--icons li::before { width: 17px; height: 17px; font-size: 0.55rem; }
  .benefits__pic { padding: 10px 8px; }
  .benefits__pic img { max-height: 130px; }
  .benefits__pic img:nth-child(2) { transform: none; }
}
.benefits__pic { border: 1.5px solid var(--ink); border-left: 0; }
@media (max-width: 760px) { .benefits__pic { border: 1.5px solid var(--ink); border-top: 0; } }
.seeds-page { position: relative; overflow: hidden; }
.seeds-page > .container { position: relative; z-index: 1; }
/* Purchase options: One-time / Subscribe & Save */
.purchase { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.purchase .variant-label { margin: 0 0 2px; }
.purchase__opt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; background: #fff; }
.purchase__opt.is-selected { border-color: var(--green); background: var(--cream, #f6f7ef); box-shadow: 0 0 0 1px var(--green) inset; }
.purchase__opt input { accent-color: var(--green); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.purchase__main { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.purchase__main strong { font-size: 1.02rem; }
.purchase__badge { background: var(--green); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.purchase__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-left: auto; }
.purchase__price s { font-size: 0.8rem; color: var(--ink-soft); }
.purchase__price b { font-size: 1.05rem; }
.purchase__freq { padding: 4px 4px 0; }
.purchase__freq label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.purchase__freq select { flex: 1; max-width: 240px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: #fff; }
.purchase__note { margin: 8px 0 4px; font-size: 0.82rem; color: var(--ink-soft); }
.purchase__mail { font-size: 0.85rem; color: var(--green-dark); text-decoration: underline; }
.is-out .purchase, .is-out .js-subreq { display: none !important; }
@media (max-width: 600px) { .purchase { gap: 6px; margin-bottom: 10px; } .purchase__opt { padding: 8px 12px; gap: 9px; border-radius: 12px; } .purchase__main strong { font-size: 0.9rem; } .purchase__price b { font-size: 0.92rem; } .purchase__badge { font-size: 0.66rem; } .purchase__note { font-size: 0.76rem; margin: 5px 0 2px; } .purchase__freq select { padding: 6px 10px; font-size: 0.88rem; } }
/* Order / subscription request form */
.modal__box--order { max-width: 520px; padding: 26px 26px 22px; }
.modal__box--order h3 { margin: 0 34px 12px 0; }
.order__summary { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; background: var(--bg-tint); font-size: 0.92rem; }
.order__sub { font-weight: 700; color: var(--green-dark); margin-bottom: 6px; }
.order__line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.order__total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.order__form { display: flex; flex-direction: column; gap: 10px; }
.order__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order__form input[type="text"], .order__form input[type="email"], .order__form input[type="tel"], .order__form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.92rem; background: #fff; color: var(--ink); }
.order__form textarea { resize: vertical; }
.order__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--ink-soft); }
.order__consent input { margin-top: 3px; accent-color: var(--green); }
.order__note { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.order__error { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdecea; color: #b3261e; font-size: 0.88rem; }
.order__error a { text-decoration: underline; font-weight: 700; }
.order__form .btn { padding: 9px 22px; }
@media (max-width: 600px) { .modal__box--order { padding: 18px 16px 16px; max-height: 92vh; } .order__row { grid-template-columns: 1fr; gap: 8px; } .order__form { gap: 8px; } .order__summary { font-size: 0.85rem; padding: 8px 12px; margin-bottom: 10px; } }
.order__form input[list], .order__form select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.92rem; background: #fff; color: var(--ink); }
@media (max-width: 600px) { .order__row { grid-template-columns: 1fr 1fr; } .order__form input[type="text"], .order__form input[type="email"], .order__form input[type="tel"], .order__form textarea, .order__form select { padding: 8px 12px; font-size: 0.88rem; } }
/* Our Process: KEBS Standardization Mark in the right corner of the quality section */
.quality--kebs { position: relative; }
.quality__kebs { position: absolute; top: 26px; right: max(24px, calc(50% - 560px)); width: 92px; height: auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); background: #fff; }
@media (max-width: 720px) { .quality__kebs { top: 12px; right: 12px; width: 52px; border-radius: 7px; } }
/* Our Process quality section: compact on phones */
@media (max-width: 600px) {
  #quality.section { padding-block: 22px; }
  #quality .section__head { margin-bottom: 12px; }
  #quality .section__head .tag { font-size: 0.68rem; padding: 4px 10px; margin-bottom: 8px; }
  #quality .section__head h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 6px; padding: 0 44px; }
  #quality .section__head p { font-size: 0.84rem; line-height: 1.45; margin: 0; }
  #quality .trust-badges { gap: 6px; }
  #quality .trust-badge { padding: 5px 11px; font-size: 0.74rem; }
  .quality__kebs { top: 10px; right: 10px; width: 40px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
}
/* Our Process "Taste the difference": compact on phones */
@media (max-width: 600px) {
  #taste.section { padding-block: 22px; }
  #taste .tag { font-size: 0.68rem; padding: 4px 10px; margin-bottom: 8px; }
  #taste h2 { font-size: 1.3rem; margin: 0 0 6px; }
  #taste p { font-size: 0.86rem; line-height: 1.45; margin: 0 0 12px; }
  #taste .btn { padding: 7px 16px; font-size: 0.84rem; margin: 0 6px 6px 0; }
}
/* Our Process steps and banner: smaller on phones */
@media (max-width: 600px) {
  .farmhero--factory { padding: 56px 0 44px; }
  .farmhero--factory h1 { font-size: 1.7rem; line-height: 1.2; margin: 6px 0; }
  .farmhero--factory p { font-size: 0.86rem; line-height: 1.45; }
  #steps.section { padding-block: 20px; }
  .steps { gap: 10px; }
  .steps .step { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; border-radius: 14px; }
  .steps .step__icon { width: 34px; height: 34px; font-size: 1rem; }
  .steps .step__label { font-size: 0.66rem; }
  .steps .step h3 { font-size: 1.02rem; margin: 0 0 3px; }
  .steps .step p { font-size: 0.82rem; line-height: 1.4; }
  .steps .step__photo, .steps .step__slides { aspect-ratio: 16 / 9; max-width: 100%; margin-top: 8px; border-radius: 10px; box-shadow: none; }
}
/* Our Process steps: a little smaller still on phones */
@media (max-width: 600px) {
  .farmhero--factory { padding: 44px 0 34px; }
  .farmhero--factory h1 { font-size: 1.5rem; }
  .farmhero--factory p { font-size: 0.8rem; }
  #steps.section { padding-block: 14px; }
  .steps { gap: 8px; }
  .steps .step { grid-template-columns: 28px 1fr; gap: 8px; padding: 9px 10px; border-radius: 12px; }
  .steps .step__icon { width: 28px; height: 28px; font-size: 0.85rem; }
  .steps .step__label { font-size: 0.6rem; }
  .steps .step h3 { font-size: 0.92rem; margin: 0 0 2px; }
  .steps .step p { font-size: 0.76rem; line-height: 1.35; }
  .steps .step__photo, .steps .step__slides { aspect-ratio: 2 / 1; margin-top: 6px; border-radius: 8px; }
}
/* Footer "About" links: smaller font */
.footer--v2 .footer__top > .footer__col:nth-child(2) { gap: 8px; }
.footer--v2 .footer__top > .footer__col:nth-child(2) a { font-size: 0.82rem; }
.footer--v2 .footer__top > .footer__col:nth-child(2) h4, .footer--v2 .footer__top > .footer__col:nth-child(2) h4 a { font-size: 0.78rem; }
@media (max-width: 600px) {
  .footer--v2 .footer__top > .footer__col:nth-child(2) { row-gap: 3px; }
  .footer--v2 .footer__top > .footer__col:nth-child(2) a { font-size: 0.76rem; }
  .footer--v2 .footer__top > .footer__col:nth-child(2) h4, .footer--v2 .footer__top > .footer__col:nth-child(2) h4 a { font-size: 0.7rem; }
}
/* Partners page: Enjoy and RUBIS logos on the RUBIS Enjoy Stores card */
.partner-logos { display: inline-flex; gap: 12px; align-items: center; justify-content: center; margin-bottom: 14px; }
.partner-logos__item { width: 78px; height: 78px; margin-bottom: 0; border: 1px solid var(--border); background: #fff; border-radius: 14px; }
.partner-logos__item img { border-radius: 0; }
.partner-logos__item--rubis img { object-fit: cover; padding: 0; }
@media (max-width: 600px) { .partner-logos { gap: 8px; margin-bottom: 8px; } .partner-logos__item { width: 56px; height: 56px; border-radius: 11px; } }
/* Footer: bigger Pure logo in the right corner of the brand block */
.footer--v2 .footer__brand { position: relative; }
.footer--v2 .footer__brand .footer__logo { position: absolute; top: 0; right: 0; }
.footer--v2 .footer__brand .footer__logo img { height: 112px; width: auto; }
.footer--v2 .footer__brand > p:first-of-type { min-height: 112px; padding-right: 128px; }
@media (max-width: 600px) {
  .footer--v2 .footer__brand .footer__logo img { height: 76px; }
  .footer--v2 .footer__brand > p:first-of-type { min-height: 76px; padding-right: 92px; }
}
/* Partners page: supermarket logos */
.partner-logos--grid { flex-wrap: wrap; gap: 10px; max-width: 280px; }
.partner-logos__item--fit { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; padding: 6px; }
.partner-logos__item--fit img { width: 100%; height: 100%; object-fit: contain; display: block; }
.partner-logos__item--fit:hover { border-color: var(--green); }
@media (max-width: 600px) { .partner-logos--grid { gap: 6px; max-width: 100%; } .partner-logos__item--fit { width: 52px; height: 52px; border-radius: 11px; padding: 4px; } }
/* Partner banner (checklist + Become a Partner / Request a Quote): smaller and organized on phones */
@media (max-width: 720px) {
  .partner-banner.section { padding-block: 22px; }
  .partner-banner .partner-banner__img { margin-bottom: 14px; border-radius: 12px; }
  .partner-banner .partner-banner__list { margin-bottom: 14px; }
  .partner-banner .partner-banner__list li { font-size: 0.84rem; line-height: 1.4; margin-bottom: 5px; padding-left: 24px; }
  .partner-banner .partner-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 0 auto; }
  .partner-banner .partner-banner__actions .btn { width: 100%; padding: 9px 10px; font-size: 0.84rem; line-height: 1.2; text-align: center; margin: 0; }
}
/* About story: Kenya and Belgium flags picture in the right corner */
.story--flags { position: relative; }
.story__flags { position: absolute; top: 26px; right: max(20px, calc(50% - 600px)); width: 230px; height: auto; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
@media (max-width: 900px) { .story__flags { width: 150px; top: 18px; right: 16px; border-width: 3px; border-radius: 10px; } }
@media (max-width: 600px) { .story--flags .section__head { padding-top: 50px; } .story__flags { width: 112px; top: 12px; right: 14px; border-width: 3px; border-radius: 9px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } }
/* Gift card page */
.giftpage .breadcrumb { margin-bottom: 20px; }
.gift { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.gift__points { max-width: 520px; margin: 22px auto 0; }
.gift__info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 6px 0 10px; line-height: 1.15; }
.gift__price { font-size: 1.6rem; font-weight: 800; color: var(--green-dark); margin-bottom: 10px; }
.gift__lead { color: var(--ink-soft); margin-bottom: 14px; }
.gift__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gift__amt { padding: 9px 16px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; font: inherit; cursor: pointer; color: var(--ink); }
.gift__amt:hover { border-color: var(--green); }
.gift__amt.is-selected { border-color: var(--green); background: var(--cream, #f6f7ef); box-shadow: 0 0 0 1px var(--green) inset; font-weight: 700; }
.gift__other { display: block; font-size: 0.9rem; margin-bottom: 12px; }
.gift__other input { display: block; margin-top: 4px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; width: 100%; max-width: 240px; }
.gift__fields { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 12px; }
.gift__fields input, .gift__fields textarea { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.95rem; width: 100%; background: #fff; }
.gift__fields textarea { resize: vertical; }
.gift__error { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fdecea; color: #b3261e; font-size: 0.88rem; }
.gift__note { margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
@media (max-width: 860px) { .gift { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 600px) {
  .giftpage.section { padding-block: 18px; }
  .giftpage .breadcrumb { margin-bottom: 10px; }
  .gift__points { margin-top: 12px; }
  .gift__points li { font-size: 0.8rem; }
  .gift__info h1 { font-size: 1.45rem; margin: 4px 0 6px; }
  .gift__price { font-size: 1.2rem; margin-bottom: 6px; }
  .gift__lead { font-size: 0.86rem; margin-bottom: 10px; }
  .gift__amt { padding: 7px 11px; font-size: 0.84rem; border-radius: 9px; }
  .gift__amounts { gap: 6px; }
  .gift__fields { gap: 8px; margin: 12px 0 8px; }
  .gift__fields input, .gift__fields textarea { padding: 8px 12px; font-size: 0.88rem; }
}
/* Gift card: gift-wrapped card in deep green with gold foil and a ribbon */
/* Gift card v3: emerald card, gold foil frame, shimmer, ribbon with bow, product medallions, hanging value tag */
.gift__art { perspective: 900px; }
.gcard { position: relative; aspect-ratio: 1.6 / 1; max-width: 540px; margin: 0 auto; border-radius: 1.5em; font-size: clamp(11px, 2.6vw, 16px); color: #fff; overflow: hidden; background: radial-gradient(90% 110% at 8% 0%, #4c9a2c 0%, #2c6320 38%, #153810 100%); box-shadow: 0 26px 50px rgba(15,45,8,0.42), 0 2px 0 rgba(255,255,255,0.18) inset; transition: transform .25s ease; will-change: transform; }
.gcard::before { content: ""; position: absolute; inset: 0.7em; border-radius: 1.05em; border: 1px solid rgba(240,214,130,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset; pointer-events: none; z-index: 3; }
.gcard::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: gcard-shine 6.5s ease-in-out infinite; pointer-events: none; z-index: 4; }
@keyframes gcard-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .gcard::after { animation: none; display: none; } .gcard { transition: none; } }
.gcard__art { position: absolute; inset: 0; width: 100%; height: 100%; color: #9bd44a; }
.gcard__art[data-art="leaves"] { opacity: 0.2; }
.gcard__main { position: relative; z-index: 2; width: 66%; padding: 1.5em 0 0 1.8em; }
.gcard__logo { width: 4em; height: auto; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.gcard__title { margin-top: 0.45em; font-family: var(--font-head); font-weight: 800; font-size: 2.6em; letter-spacing: 0.05em; line-height: 1; background: linear-gradient(100deg, #fff3bd 0%, #e6bf58 35%, #fff0a8 52%, #c99a2e 78%, #f1d77a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e2bb55; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.gcard__sub { margin-top: 0.5em; font-size: 0.6em; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.82); line-height: 1.5; }
.gcard__to { margin-top: 0.7em; font-weight: 700; font-size: 0.95em; color: #f4dd8f; }
.gcard__msg { margin-top: 0.1em; font-style: italic; font-size: 0.8em; line-height: 1.35; color: rgba(255,255,255,0.94); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gcard__foot { position: absolute; left: 2.9em; bottom: 1.7em; z-index: 2; font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.gcard__main { width: 100%; }
.gcard__to, .gcard__msg { max-width: 62%; }
.gcard__tag { position: absolute; right: 1.9em; bottom: 1.6em; z-index: 5; text-align: right; }
.gcard__tag::before { content: ""; display: block; width: 3.2em; height: 2px; margin: 0 0 0.45em auto; background: linear-gradient(90deg, rgba(226,187,85,0), #e6bf58); }
.gcard__tag span { display: block; font-size: 0.55em; letter-spacing: 0.22em; color: rgba(255,255,255,0.75); }
.gcard__tag strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2em; line-height: 1.1; letter-spacing: 0.01em; background: linear-gradient(100deg, #fff3bd 0%, #e6bf58 40%, #fff0a8 58%, #c99a2e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e2bb55; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.gcard__tag strong b { font-weight: 800; }
/* Gift card page: accepted payment logos */
.gift__pay { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.gift__pay span { font-size: 0.8rem; color: var(--ink-soft); margin-right: 2px; }
.gift__pay img { height: 22px; width: auto; padding: 4px 8px; box-sizing: content-box; background: #fff; border: 1px solid var(--border); border-radius: 7px; }
.gift__pay img[src$="visa.png"] { height: 14px; padding: 6px 9px; }
@media (max-width: 600px) { .gift__pay { gap: 7px; margin-top: 8px; } .gift__pay span { font-size: 0.74rem; } .gift__pay img { height: 18px; padding: 3px 6px; border-radius: 6px; } .gift__pay img[src$="visa.png"] { height: 11px; padding: 5px 7px; } }
/* Kombucha: subscribe & save banner */
.kombucha-sub__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.kombucha-sub__pic { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.kombucha-sub__text h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 12px; }
.kombucha-sub__text p { color: var(--ink-soft); font-size: 1.05rem; }
.kombucha-sub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.kombucha-sub__actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.kombucha-sub__text .kombucha-sub__note { font-size: 0.82rem; margin: 6px 0 0; }
@media (max-width: 860px) { .kombucha-sub__grid { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 600px) { .kombucha-sub.section { padding-block: 22px; } .kombucha-sub__text h2 { font-size: 1.4rem; margin: 6px 0 6px; } .kombucha-sub__text p { font-size: 0.9rem; } .kombucha-sub__actions { gap: 8px; margin: 12px 0 8px; } .kombucha-sub__actions .btn { padding: 8px 16px; font-size: 0.86rem; } .kombucha-sub__text .kombucha-sub__note { font-size: 0.76rem; } }
/* Kombucha subscribe section: more compact on phones */
@media (max-width: 600px) {
  .kombucha-sub.section { padding-block: 14px; }
  .kombucha-sub__grid { gap: 10px; }
  .kombucha-sub__pic { aspect-ratio: 2.8 / 1; object-fit: cover; object-position: center 45%; border-radius: 12px; box-shadow: none; }
  .kombucha-sub__text .tag { display: none; }
  .kombucha-sub__text h2 { font-size: 1.15rem; margin: 0 0 4px; }
  .kombucha-sub__text p { font-size: 0.82rem; line-height: 1.4; margin: 0; }
  .kombucha-sub__actions { gap: 6px; margin: 8px 0 6px; }
  .kombucha-sub__actions .btn { padding: 6px 13px; font-size: 0.8rem; }
  .kombucha-sub__actions .btn svg { width: 16px; height: 16px; }
  .kombucha-sub__text .kombucha-sub__note { font-size: 0.7rem; line-height: 1.35; }
}
.gcard__brand { margin-top: 0.3em; font-family: var(--font-head); font-weight: 700; font-size: 0.8em; letter-spacing: 0.34em; color: #9bd44a; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
/* Gift Card button in the green bar: gold foil pill with a gift icon and a light shimmer */
.giftbar__links { align-items: center; }
.giftbar__gift { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; color: #2b1f02 !important; background: linear-gradient(100deg, #fff3bd 0%, #e6bf58 42%, #fff0a8 60%, #c99a2e 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.45), 0 3px 10px rgba(0,0,0,0.35); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.giftbar__gift:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 6px 14px rgba(0,0,0,0.4); }
.giftbar__gift::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0)); transform: skewX(-20deg); animation: giftbar-shine 4.5s ease-in-out infinite; }
.giftbar__icon { flex: 0 0 auto; animation: giftbar-wiggle 4.5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes giftbar-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes giftbar-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .giftbar__gift::after, .giftbar__icon { animation: none; } }
@media (max-width: 720px) { .giftbar__links { display: flex; gap: 0; } .giftbar__links a:not(.giftbar__gift) { display: none; } .giftbar__gift { padding: 3px 12px 3px 9px; font-size: 0.78rem; } .giftbar__right > a { display: none; } }
/* Gift Card button: a little smaller on phones */
@media (max-width: 720px) {
  .giftbar__inner { height: 34px; }
  .giftbar__gift { padding: 2px 10px 2px 8px; font-size: 0.7rem; gap: 5px; }
  .giftbar__icon { width: 13px; height: 13px; }
  .giftbar__badge { font-size: 0.7rem; gap: 6px; }
  .giftbar__badge strong { padding: 2px 8px; }
}
/* Gift card designs: background and picture change by themselves */
.gcard { background: #153810; }
.gcard__theme { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.gcard__theme.is-on { opacity: 1; }
.gcard__theme[data-theme="classic"] { background: radial-gradient(90% 110% at 8% 0%, #4c9a2c 0%, #2c6320 38%, #153810 100%); }
.gcard__theme[data-theme="birthday"] { background: radial-gradient(90% 110% at 8% 0%, #2f9a78 0%, #1d5c45 42%, #0c2f26 100%); }
.gcard__theme[data-theme="thanks"] { background: radial-gradient(90% 110% at 8% 0%, #84a22a 0%, #5a6a1e 42%, #2a3510 100%); }
.gcard__theme[data-theme="congrats"] { background: radial-gradient(90% 110% at 8% 0%, #2c7a62 0%, #17433a 42%, #0a2220 100%); }
.gcard__theme[data-theme="love"] { background: radial-gradient(90% 110% at 8% 0%, #a53d5c 0%, #6d2238 42%, #35101c 100%); }
.gcard__theme .gcard__art:not([data-art]) { opacity: 0.95; }
.gift__designs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.gift__design { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-size: 0.9rem; cursor: pointer; color: var(--ink); }
.gift__design i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e2bb55; flex: 0 0 auto; }
.gift__design:hover { border-color: var(--green); }
.gift__design.is-selected { border-color: var(--green); background: var(--cream, #f6f7ef); box-shadow: 0 0 0 1px var(--green) inset; font-weight: 700; }
.gift__designnote { margin: 0 0 6px; font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 600px) { .gift__designs { gap: 6px; } .gift__design { padding: 5px 10px 5px 7px; font-size: 0.8rem; gap: 6px; } .gift__design i { width: 13px; height: 13px; } .gift__designnote { font-size: 0.74rem; } }
/* keep the decorations in the top-right area, away from the text */
.gcard__theme .gcard__art:not([data-art]) { -webkit-mask-image: linear-gradient(to bottom left, #000 38%, transparent 72%); mask-image: linear-gradient(to bottom left, #000 38%, transparent 72%); }
/* nested submenu (Drinks > Kombucha > flavours) */
.nav__submenu .nav__item--sub { width: 100%; }
.nav__submenu .nav__item--sub .nav__trigger > a { padding: 12px 46px 12px 20px; font-weight: 500; font-size: inherit; }
.nav__submenu .nav__item--sub .nav__submenu { padding-left: 16px; margin-top: 8px; }
.nav__submenu .nav__item--sub .nav__submenu a { padding: 10px 18px; font-size: 0.95rem; }
/* Made in Kenya mark in the corner of the product info */
.mik { float: right; width: 74px; height: auto; margin: 0 0 8px 14px; }
@media (max-width: 600px) { .mik { width: 50px; margin-left: 10px; } }
@media (max-width: 600px) {
}
/* Kombucha: our partner (Tala Brews) */
.maker .container { max-width: 960px; }
.maker__head { text-align: center; margin-bottom: 26px; }
.maker__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 8px 0 0; }
.maker__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; align-items: center; }
.maker__fig { margin: 0; }
.maker__fig img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow); }
.maker__fig figcaption { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.maker__fig figcaption span { font-size: 0.88rem; color: var(--ink-soft); }
.maker__text p { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--lime, #8cc63f); }
.maker__text p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .maker__grid { gap: 22px; } }
@media (max-width: 600px) {
  .maker.section { padding-block: 16px; }
  .maker__head { margin-bottom: 12px; text-align: left; }
  .maker__head .tag { font-size: 0.66rem; padding: 3px 9px; }
  .maker__head h2 { font-size: 1.1rem; margin-top: 6px; line-height: 1.25; }
  .maker__grid { grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
  .maker__fig img { border-radius: 12px; box-shadow: none; }
  .maker__fig figcaption { margin-top: 5px; } .maker__fig figcaption strong { font-size: 0.82rem; } .maker__fig figcaption span { font-size: 0.66rem; line-height: 1.25; }
  .maker__text p { font-size: 0.8rem; line-height: 1.4; margin-bottom: 8px; padding-left: 9px; border-left-width: 2px; }
}
/* Kombucha: scrolling highlights band */
.ticker { background: #e9e1cf; overflow: hidden; border-block: 1px solid rgba(0,0,0,0.06); }
.ticker__track { display: flex; width: max-content; animation: ticker-move 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__item { white-space: nowrap; font-size: clamp(1.1rem, 2.4vw, 1.7rem); padding: 22px 0; color: var(--ink); }
.ticker__item b { font-weight: 800; }
.ticker__dot { padding: 0 34px; font-size: 1.2rem; color: var(--green-dark); }
@keyframes ticker-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .ticker__group[aria-hidden="true"] { display: none; } .ticker__item { padding: 12px 0; } }
@media (max-width: 600px) { .ticker__item { font-size: 0.95rem; padding: 12px 0; } .ticker__dot { padding: 0 18px; font-size: 0.9rem; } .ticker__track { animation-duration: 30s; } }
/* Ethically sourced seal in the corner of the partner section */
.maker .container { position: relative; }
.maker__seal { position: absolute; top: -6px; right: 0; width: 104px; height: 104px; }
@media (max-width: 600px) { .maker__seal { width: 56px; height: 56px; top: -4px; } .maker__head h2 { padding-right: 62px; } }
.maker__seal { right: 24px; }
@media (max-width: 600px) { .maker__seal { right: 16px; } }
@media (min-width: 1100px) { .maker__seal { right: 0; } }
.maker__head h2 .green { color: var(--green); }
/* Product pictures: smooth zoom on hover, hint chip, full-screen viewer */
.product-gallery__main { position: relative; }
.product-gallery__main:has(> img) { cursor: pointer; }
.product-gallery__main img { transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.zoom-hint { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.74rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.15); pointer-events: none; transition: opacity .2s ease; display: inline-flex; align-items: center; gap: 6px; }
.zoom-hint::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; box-sizing: border-box; position: relative; }
@media (hover: hover) and (pointer: fine) {
  .product-gallery__main:has(> img) { cursor: zoom-in; }
  .product-gallery__main.is-zoom img { transform: scale(2.4); }
  .product-gallery__main.is-zoom .zoom-hint { opacity: 0; }
}
@media (max-width: 600px) { .zoom-hint { left: 8px; bottom: 8px; font-size: 0.66rem; padding: 4px 9px 4px 7px; } }
.lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,16,8,0.88); opacity: 0; visibility: hidden; transition: opacity .2s ease; cursor: zoom-out; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox__close { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.95); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); }
/* Scan to Verify: traceability panel */
.product-qr { position: relative; display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 22px 24px; border-radius: 20px; color: #fff; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #4c8a2a 0%, #2f5f1b 45%, #17330e 100%); box-shadow: 0 16px 34px rgba(25,55,12,0.32); }
.product-qr::before { content: ""; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(155,212,74,0.35), rgba(155,212,74,0) 70%); pointer-events: none; }
.product-qr__scan { position: relative; flex: 0 0 auto; width: 132px; height: 132px; padding: 12px; background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); overflow: hidden; }
.product-qr__code { display: block; width: 100%; height: 100%; padding: 0; background: #fff; border-radius: 0; }
.qc { position: absolute; width: 20px; height: 20px; border: 0 solid #5e9a22; }
.qc--tl { top: 5px; left: 5px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 7px; }
.qc--tr { top: 5px; right: 5px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 7px; }
.qc--bl { bottom: 5px; left: 5px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 7px; }
.qc--br { bottom: 5px; right: 5px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 7px; }
.product-qr__line { position: absolute; left: 8px; right: 8px; top: 10px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(139,201,63,0), #8cc63f, rgba(139,201,63,0)); box-shadow: 0 0 12px 3px rgba(139,201,63,0.7); animation: qr-scan 2.8s ease-in-out infinite; }
@keyframes qr-scan { 0%, 100% { top: 10px; } 50% { top: calc(100% - 13px); } }
.product-qr__text { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-qr__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 11px 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #cfe9a3; }
.product-qr__text strong { font-family: var(--font-head); font-size: 1.55rem; line-height: 1.1; color: #fff; }
.product-qr__desc { font-size: 0.86rem; color: rgba(255,255,255,0.85); }
.product-qr__steps { list-style: none; counter-reset: qr; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: rgba(255,255,255,0.88); }
.product-qr__steps li { counter-increment: qr; display: flex; align-items: center; gap: 8px; }
.product-qr__steps li::before { content: counter(qr); display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #8cc63f; color: #17330e; font-size: 0.68rem; font-weight: 800; flex: 0 0 auto; }
.product-qr__steps b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .product-qr__line { animation: none; top: 50%; } }
@media (max-width: 600px) {
  .product-qr { gap: 14px; padding: 14px 14px; border-radius: 16px; margin-top: 14px; }
  .product-qr__scan { width: 96px; height: 96px; padding: 9px; border-radius: 11px; }
  .qc { width: 15px; height: 15px; } .qc--tl, .qc--tr { top: 4px; } .qc--bl, .qc--br { bottom: 4px; } .qc--tl, .qc--bl { left: 4px; } .qc--tr, .qc--br { right: 4px; }
  .product-qr__text { gap: 4px; }
  .product-qr__badge { font-size: 0.58rem; padding: 2px 8px 2px 7px; }
  .product-qr__text strong { font-size: 1.15rem; }
  .product-qr__desc { font-size: 0.74rem; line-height: 1.35; }
  .product-qr__steps { font-size: 0.72rem; gap: 3px; margin-top: 3px; }
  .product-qr__steps li::before { width: 15px; height: 15px; font-size: 0.6rem; }
}
/* Homepage QR: same scanning effect as the product pages */
.trace-ad__scan { position: relative; padding: 12px; overflow: hidden; border-radius: 14px; background: #fff; }
.trace-ad__scan .trace-ad__qr { border-radius: 0; }
.trace-ad__scan .qc { width: 26px; height: 26px; }
.trace-ad__scan .qc--tl { top: 4px; left: 4px; } .trace-ad__scan .qc--tr { top: 4px; right: 4px; } .trace-ad__scan .qc--bl { bottom: 4px; left: 4px; } .trace-ad__scan .qc--br { bottom: 4px; right: 4px; }
.trace-ad__scan .product-qr__line { left: 10px; right: 10px; }
.trace-ad__card { position: relative; }
@media (max-width: 560px) { .trace-ad__scan { padding: 9px; } .trace-ad__scan .qc { width: 20px; height: 20px; } }
/* Why Choose Pure Nutritions: smaller 2 x 2 grid on phones */
@media (max-width: 720px) {
  .highlight-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 10px; }
  .highlight-grid + * , .highlight-grid { margin-top: 0; }
  .highlight-card__art { max-width: 100%; margin: 0 auto 8px; border-radius: 12px; box-shadow: none; }
  .highlight-card__art--badge { padding: 14px; }
  .highlight-card h3 { font-size: 0.98rem; margin-bottom: 3px; }
  .highlight-card p { font-size: 0.76rem; line-height: 1.35; margin: 0; }
}
@media (max-width: 720px) {
  .section:has(.highlight-grid) { padding-block: 24px; }
  .section:has(.highlight-grid) .section__head { margin-bottom: 14px; }
  .section:has(.highlight-grid) .section__head h2 { font-size: 1.35rem; line-height: 1.25; }
}
/* USP strip above "Why Choose": one tidy row on phones */
@media (max-width: 720px) {
  .usp-strip__inner { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px; padding: 10px 14px; font-size: 0.7rem; line-height: 1.25; text-align: center; }
}
/* RUBIS store locator: map on the left, live dashboard on the right */
.locator { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; margin-top: 8px; }
.locator__map { position: relative; background: linear-gradient(160deg, var(--cream), var(--bg-tint)); border: 1px solid var(--border); border-radius: 24px; padding: 20px 20px 14px; position: sticky; top: 90px; }
.locator__map .kenya-map-wrap { max-width: 440px; margin: 0 auto; }
.locator__map .county-legend { margin: 8px 0 0; }
.locator__pill { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: var(--green-dark); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.22); }
.locator__pill strong { font-size: 1rem; line-height: 1.2; }
.locator__pill span { font-size: 0.74rem; color: #cfe9a3; }
.locator__pill.is-soon { background: #6b6f63; } .locator__pill.is-soon span { color: #e4e6dc; }
.locator__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.locstat { background: linear-gradient(150deg, #3d7a24, #1d4414); color: #fff; border-radius: 16px; padding: 14px 12px; text-align: center; box-shadow: 0 10px 22px rgba(25,55,12,0.25); }
.locstat b { display: block; font-family: var(--font-head); font-size: 2.1rem; line-height: 1; background: linear-gradient(100deg, #fff3bd, #e6bf58 60%, #fff0a8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.locstat span { display: block; margin-top: 6px; font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); }
.locator__search { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 12px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink-soft); }
.locator__search:focus-within { border-color: var(--green); }
.locator__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.95rem; color: var(--ink); min-width: 0; }
.locator__panel .county-grid { grid-template-columns: repeat(4, 1fr); max-height: 232px; overflow-y: auto; padding: 2px 4px 2px 2px; margin-bottom: 16px; scrollbar-width: thin; }
.locator__panel .county[hidden] { display: none; }
.locator__panel .county-detail { text-align: left; min-height: 150px; border-radius: 20px; border: 1.5px solid var(--green); background: linear-gradient(180deg, #fff, var(--bg-tint)); }
.locator__panel .county-detail h4 { font-size: 1.15rem; }
.locator__panel .county-detail__stores { justify-content: flex-start; }
.locator__panel .county-detail__placeholder { display: flex; align-items: center; min-height: 100px; }
@media (max-width: 980px) { .locator { grid-template-columns: 1fr; gap: 18px; } .locator__map { position: relative; top: 0; } .locator__map .kenya-map-wrap { max-width: 340px; } }
@media (max-width: 600px) {
  .locator__map { padding: 12px 12px 8px; border-radius: 18px; }
  .locator__map .kenya-map-wrap { max-width: 250px; }
  .locator__pill { top: 10px; left: 10px; padding: 5px 10px; border-radius: 11px; } .locator__pill strong { font-size: 0.82rem; } .locator__pill span { font-size: 0.66rem; }
  .locator__stats { gap: 8px; margin-bottom: 10px; } .locstat { padding: 9px 6px; border-radius: 12px; } .locstat b { font-size: 1.5rem; } .locstat span { font-size: 0.62rem; margin-top: 4px; line-height: 1.2; }
  .locator__search { padding: 8px 13px; margin-bottom: 8px; } .locator__search input { font-size: 0.88rem; }
  .locator__panel .county-grid { grid-template-columns: repeat(3, 1fr); max-height: 168px; gap: 5px; margin-bottom: 10px; }
  .locator__panel .county { padding: 6px 3px; font-size: 0.66rem; }
  .locator__panel .county-detail { padding: 14px 14px; min-height: 90px; border-radius: 14px; }
}
/* RUBIS staff app promo */
.stockapp { position: relative; overflow: hidden; color: #fff; padding: 72px 0; background: radial-gradient(110% 120% at 0% 0%, #4c8a2a 0%, #2c5a1b 40%, #12290b 100%); }
.stockapp::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1.2px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; }
.stockapp__grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: center; }
.stockapp__tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #cfe9a3; }
.stockapp h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.12; margin: 16px 0 14px; }
.stockapp h2 span { background: linear-gradient(100deg, #fff3bd, #e6bf58 55%, #fff0a8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stockapp__lead { font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 0 22px; }
.stockapp__roles { display: grid; gap: 12px; margin-bottom: 18px; max-width: 640px; }
.srole { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(2px); }
.srole__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #fff3bd, #e6bf58); color: #2b1f02; }
.srole strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.srole div > span { font-size: 0.88rem; line-height: 1.45; color: rgba(255,255,255,0.85); }
.stockapp__facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 22px; }
.stockapp__facts span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(0,0,0,0.22); font-size: 0.82rem; color: #e9f5cf; }
.stockapp__facts svg { width: 16px; height: 16px; }
.stockapp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.stockapp__btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; color: #2b1f02; background: linear-gradient(100deg, #fff3bd 0%, #e6bf58 45%, #fff0a8 62%, #c99a2e 100%); box-shadow: 0 10px 26px rgba(0,0,0,0.35); transition: transform .15s ease; }
.stockapp__btn:hover { transform: translateY(-2px) scale(1.02); }
.stockapp__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0)); transform: skewX(-20deg); animation: giftbar-shine 4.5s ease-in-out infinite; }
.stockapp__note { flex: 1 1 240px; font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.75); }
.stockapp__phone { position: relative; display: flex; justify-content: center; }
.stockapp__glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(155,212,74,0.45), rgba(155,212,74,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.phone { position: relative; z-index: 1; width: 250px; padding: 12px; border-radius: 38px; background: #0d1509; box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 0 0 2px #2c3a22; transform: rotate(4deg); animation: phone-float 6s ease-in-out infinite; }
@keyframes phone-float { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-10px); } }
.phone__notch { position: absolute; top: 12px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 0 0 12px 12px; background: #0d1509; z-index: 2; }
.phone__screen { border-radius: 28px; background: #f5f7ee; padding: 34px 12px 14px; color: var(--ink); min-height: 400px; display: flex; flex-direction: column; gap: 9px; }
.phone__bar { display: flex; flex-direction: column; margin-bottom: 4px; }
.phone__bar b { font-size: 1.05rem; color: var(--green-dark); }
.phone__bar span { font-size: 0.7rem; color: var(--ink-soft); }
.phone__card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.phone__card i { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-tint); border: 2px solid var(--green); flex: 0 0 auto; }
.phone__card b { display: block; font-size: 0.85rem; }
.phone__card span { font-size: 0.68rem; color: var(--ink-soft); }
.phone__card--on { border-color: var(--green); background: linear-gradient(150deg, #5e8f2a, #2f5f1b); color: #fff; }
.phone__card--on i { background: #8cc63f; border-color: #cfe9a3; } .phone__card--on span { color: #dcefc0; }
.phone__pill { margin-top: auto; align-self: center; padding: 7px 16px; border-radius: 999px; background: linear-gradient(100deg, #fff3bd, #e6bf58); color: #2b1f02; font-size: 0.74rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .phone { animation: none; } .stockapp__btn::after { animation: none; } }
@media (max-width: 980px) { .stockapp__grid { grid-template-columns: 1fr; gap: 28px; } .stockapp__phone { order: -1; } }
@media (max-width: 600px) {
  .stockapp { padding: 28px 0 30px; }
  .stockapp__phone { display: none; }
  .stockapp__tag { font-size: 0.62rem; padding: 4px 10px; }
  .stockapp h2 { font-size: 1.45rem; margin: 10px 0 8px; }
  .stockapp__lead { font-size: 0.86rem; line-height: 1.45; margin-bottom: 12px; }
  .stockapp__roles { gap: 8px; margin-bottom: 12px; }
  .srole { padding: 9px 11px; gap: 10px; border-radius: 12px; } .srole__ico { width: 32px; height: 32px; border-radius: 9px; } .srole__ico svg { width: 18px; height: 18px; }
  .srole strong { font-size: 0.88rem; } .srole div > span { font-size: 0.74rem; line-height: 1.35; }
  .stockapp__facts { gap: 6px; margin-bottom: 14px; } .stockapp__facts span { font-size: 0.7rem; padding: 4px 10px; }
  .stockapp__btn { padding: 11px 20px; font-size: 0.92rem; width: 100%; justify-content: center; }
  .stockapp__note { font-size: 0.7rem; }
}
.srole div > span { display: block; }
.stockapp h2 span { display: inline-block; }
@media (max-width: 600px) { .stockapp h2 span { display: block; font-size: 0.8em; line-height: 1.2; } .srole div > span { line-height: 1.35; } }
.srole__ico--logo { background: none; padding: 0; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.srole__ico--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srole__ico--white { background: #fff; }
.srole__ico--white img { object-fit: contain; }
.srole__ico--white img[src$="pure-logo.png"] { padding: 3px; }
/* RUBIS ranges: packs on a glossy shelf, smaller, with a swipe row on phones */
[data-range] { --rc: #c99a2e; --rc2: #f6dc86; }
[data-range="gourmet"] { --rc: #7a3fa0; --rc2: #c7a2e0; }
[data-range="indulge"] { --rc: #6b3f26; --rc2: #d9b79a; }
[data-range] .section__head { position: relative; margin-bottom: 20px; }
.range-count { position: absolute; right: 0; top: 0; padding: 5px 13px; border-radius: 999px; background: var(--rc); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.flavour-grid.shelf { position: relative; display: flex; gap: 14px; justify-content: center; align-items: flex-end; padding: 26px 18px 34px; border-radius: 22px; background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--rc2) 55%, #fff) 0%, rgba(255,255,255,0) 75%); }
.flavour-grid.shelf::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 14px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 40%, #fff), color-mix(in srgb, var(--rc) 85%, #000)); box-shadow: 0 10px 18px rgba(0,0,0,0.22), inset 0 2px 0 rgba(255,255,255,0.5); }
.shelf .flavour { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; max-width: 150px; transition: transform .25s ease; }
.shelf .flavour img { max-width: 100%; margin: 0 auto 8px; border-radius: 10px; box-shadow: none; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.25)); transition: transform .25s ease, filter .25s ease; transform-origin: 50% 100%; }
.shelf .flavour:hover { transform: translateY(-8px); }
.shelf .flavour:hover img { transform: rotate(-3deg) scale(1.05); filter: drop-shadow(0 16px 10px rgba(0,0,0,0.3)); }
.shelf .flavour figcaption small { display: block; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.shelf .flavour figcaption strong { font-size: 0.86rem; line-height: 1.2; color: var(--ink); }
.shelf .flavour figcaption > span { font-size: 0.7rem; }
.flavour__spec { margin-top: 6px; padding: 3px 12px; border-radius: 999px; border: 1.5px solid var(--rc); background: #fff; color: var(--rc); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease; }
.flavour__spec:hover { background: var(--rc); color: #fff; }
@media (max-width: 900px) {
  .flavour-grid.shelf { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 18px 16px 30px; margin-inline: -8px; scrollbar-width: none; }
  .flavour-grid.shelf::-webkit-scrollbar { display: none; }
  .flavour-grid.shelf::after { left: 0; right: 0; min-width: 100%; width: calc(var(--n, 6) * 112px); }
  .shelf .flavour { flex: 0 0 104px; scroll-snap-align: start; }
  .shelf .flavour:hover { transform: none; }
}
@media (max-width: 600px) {
  [data-range] .section__head { margin-bottom: 8px; text-align: left; }
  [data-range].section { padding-block: 22px; }
  .range-count { position: static; display: inline-block; margin-bottom: 6px; margin-right: 6px; font-size: 0.64rem; padding: 3px 10px; }
  [data-range] .section__head h2 { font-size: 1.3rem; margin: 4px 0; } [data-range] .section__head p { font-size: 0.82rem; margin: 0; }
  .shelf .flavour figcaption strong { font-size: 0.78rem; } .shelf .flavour figcaption small { font-size: 0.56rem; }
  .flavour__spec { padding: 2px 10px; font-size: 0.66rem; }
}
@media (max-width: 900px) {
  .flavour-grid.shelf::after { display: none; }
  .flavour-grid.shelf { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 40%, #fff), color-mix(in srgb, var(--rc) 85%, #000)) 0 calc(100% - 14px) / 100% 14px no-repeat local, radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--rc2) 55%, #fff) 0%, rgba(255,255,255,0) 75%) 0 0 / 100% 100% no-repeat scroll; }
}
/* RUBIS banner: three equal logo tiles with an entrance, floating and shine effect */
.hero-logos--fx { gap: 10px; }
.hero-logos--fx .hl { position: relative; display: block; width: 92px; height: 92px; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.38), 0 0 0 3px rgba(255,255,255,0.35); opacity: 0; animation: hl-pop .7s cubic-bezier(.2,.9,.3,1.3) forwards, hl-float 5s ease-in-out 1.2s infinite; }
.hero-logos--fx .hl:nth-of-type(1) { animation-delay: .1s, 1.2s; }
.hero-logos--fx .hl:nth-of-type(2) { animation-delay: .35s, 2.2s; }
.hero-logos--fx .hl:nth-of-type(3) { animation-delay: .6s, 3.2s; }
.hero-logos--fx .hl img, .farmhero--logo-corner .hero-logos--fx .hl img { display: block; width: 100%; height: 100%; padding: 9px; border-radius: 0; box-shadow: none; background: #fff; object-fit: contain; }
.hero-logos--fx .hl .enjoy-logo { padding: 0; object-fit: cover; }
.hero-logos--fx .hl::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0)); transform: skewX(-20deg); animation: hl-shine 4.5s ease-in-out infinite; }
.hero-logos--fx .hl:nth-of-type(2)::after { animation-delay: .5s; } .hero-logos--fx .hl:nth-of-type(3)::after { animation-delay: 1s; }
.hl__x { font-style: normal; font-size: 1.5rem; font-weight: 300; color: #fff; opacity: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.5); animation: hl-fade .5s ease forwards; }
.hl__x:nth-of-type(1) { animation-delay: .25s; } .hl__x:nth-of-type(2) { animation-delay: .5s; }
@keyframes hl-pop { 0% { opacity: 0; transform: translateY(18px) scale(.6) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes hl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hl-shine { 0%, 55% { left: -70%; } 100% { left: 140%; } }
@keyframes hl-fade { to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .hero-logos--fx .hl { animation: none; opacity: 1; } .hero-logos--fx .hl::after { display: none; } .hl__x { animation: none; opacity: .9; } }
@media (max-width: 600px) { .hero-logos--fx { gap: 6px; } .hero-logos--fx .hl { width: 68px; height: 68px; border-radius: 14px; } .hero-logos--fx .hl img { padding: 6px; } .hl__x { font-size: 1.1rem; } }
/* Granola builder */
.granola-builder { background: linear-gradient(180deg, #fbfaf3, #f4f1e2); }
.gb__head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.gb__head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0; } .gb__head p { color: var(--ink-soft); }
.gb { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; max-width: 1040px; margin: 0 auto; }
.gb__sticky { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gjar { width: 190px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 18px 18px rgba(60,45,10,.22)); }
.gjar__lid { width: 120px; height: 20px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #c99a2e, #8f6612); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
.gjar__neck { width: 130px; height: 12px; background: rgba(255,255,255,.55); border: 2px solid #cfd8c0; border-bottom: 0; }
.gjar__body { position: relative; width: 190px; height: 250px; border-radius: 22px 22px 34px 34px; border: 3px solid #cfd8c0; background: rgba(255,255,255,.7); overflow: hidden; display: flex; flex-direction: column-reverse; }
.gjar__fill { display: flex; flex-direction: column-reverse; width: 100%; transition: height .5s cubic-bezier(.2,.8,.2,1); }
.gjar__fill span { display: block; width: 100%; transition: height .5s cubic-bezier(.2,.8,.2,1); background-image: radial-gradient(rgba(0,0,0,.14) 1.2px, transparent 1.4px); background-size: 9px 9px; }
.gjar__empty { width: 100%; transition: height .5s cubic-bezier(.2,.8,.2,1); background: repeating-linear-gradient(135deg, #f1efe6 0 8px, #f8f6ee 8px 16px); }
.gjar__shine { position: absolute; left: 14px; top: 16px; bottom: 26px; width: 14px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.gb__meter { width: 100%; max-width: 260px; }
.gb__meter-top { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: .95rem; color: var(--ink-soft); } .gb__meter-top b:first-child { font-size: 1.9rem; font-family: var(--font-head); color: var(--green-dark); }
.gb__bar { height: 10px; border-radius: 999px; background: #e4e0cf; overflow: hidden; margin: 8px 0 6px; } .gb__bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8cc63f, #5e7d1f); transition: width .4s ease; } .gb__bar i.is-ok { background: linear-gradient(90deg, #e6bf58, #c99a2e); } .gb__bar i.is-over { background: #c0392b; }
.gb__msg { text-align: center; font-size: .85rem; color: var(--ink-soft); } .gb__msg.is-ok { color: #2f7a1c; font-weight: 700; } .gb__msg.is-over { color: #b3261e; font-weight: 700; }
.gb__step { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 22px 0 10px; } .gb__step:first-child { margin-top: 0; }
.gb__step span { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; }
.gb__sizes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gb__sizes button { padding: 9px 18px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; } .gb__sizes button.is-on { border-color: var(--green); background: var(--green); color: #fff; }
.gb__custom { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-soft); } .gb__custom input { width: 78px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; }
.gb__quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; font-size: .88rem; color: var(--ink-soft); }
.gb__quick button { padding: 6px 14px; border-radius: 999px; border: 1.5px dashed var(--green); background: #fff; color: var(--green-dark); font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; } .gb__quick button:hover { background: var(--bg-tint); } .gb__quick .is-clear { border-color: var(--border); color: var(--ink-soft); }
.gb__group { margin-bottom: 14px; } .gb__group h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 8px; }
.gb__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gb__row { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .gb__row.is-on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; background: var(--bg-tint); }
.gb__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tint, #f3f1e6); } .gb__name { flex: 1; font-weight: 600; font-size: .92rem; min-width: 0; }
.gb__step-ctl { display: flex; align-items: center; gap: 4px; } .gb__step-ctl output { min-width: 52px; text-align: center; font-weight: 800; font-size: .88rem; }
.gb__step-ctl button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--green); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; } .gb__step-ctl button:disabled { background: #d7dccb; cursor: default; }
.gb__fill { margin: 4px 0 8px; } .gb__fill button { padding: 8px 16px; border-radius: 999px; border: 1.5px solid #c99a2e; background: #fff8e1; color: #6a4a07; font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; }
.gb__recipe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .gb__recipe li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); } .gb__recipe li i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); } .gb__recipe li span { flex: 1; } .gb__recipe li em { font-style: normal; color: var(--ink-soft); font-size: .82rem; min-width: 36px; text-align: right; }
.gb__empty { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.gb__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .gb__actions .btn { padding: 11px 24px; font-size: .95rem; } .gb__actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.gb__note { margin: 10px 0 0; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px) { .gb { grid-template-columns: 1fr; gap: 18px; } .gb__sticky { position: sticky; top: 76px; z-index: 5; flex-direction: row; justify-content: center; gap: 16px; padding: 10px 12px; background: rgba(251,250,243,.96); border-radius: 18px; box-shadow: 0 8px 20px rgba(0,0,0,.1); } .gjar { width: 70px; filter: none; } .gjar__lid { width: 44px; height: 8px; } .gjar__neck { width: 48px; height: 5px; border-width: 1.5px; } .gjar__body { width: 70px; height: 92px; border-radius: 12px 12px 16px 16px; border-width: 2px; } .gjar__shine { display: none; } .gb__meter { max-width: 220px; } .gb__meter-top b:first-child { font-size: 1.3rem; } }
@media (max-width: 600px) { .granola-builder.section { padding-block: 22px; } .gb__head { margin-bottom: 14px; } .gb__head h2 { font-size: 1.45rem; } .gb__head p { font-size: .85rem; } .gb__rows { grid-template-columns: 1fr; gap: 6px; } .gb__row { padding: 6px 8px 6px 8px; gap: 8px; } .gb__ico { width: 38px; height: 38px; } .gb__name { font-size: .86rem; } .gb__step { font-size: 1rem; margin: 16px 0 8px; } .gb__sizes button { padding: 7px 14px; font-size: .86rem; } .gb__actions .btn { width: 100%; justify-content: center; } }
.gb__jarwrap { align-self: stretch; }
@media (max-width: 900px) {
  .gb__jarwrap { align-self: auto; position: sticky; top: 126px; z-index: 5; }
  .gb__sticky { position: static; }
}
.gjar__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.gjar__empty { position: absolute; top: 0; left: 0; right: 0; }
.gjar__shine { z-index: 2; }

/* Granola jar: realistic glass, metal lid, paper label and hang tag */
.gjar-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.gjar { filter: none; }
.gjar__lid { position: relative; width: 132px; height: 26px; border-radius: 9px 9px 4px 4px; background: linear-gradient(90deg, #7a560e 0%, #d9ad45 18%, #f6dc8e 32%, #c99a2e 55%, #8f6612 82%, #6a470a 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 4px rgba(0,0,0,.18); z-index: 6; }
.gjar__lid::after { content: ""; position: absolute; inset: 5px 4px 6px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, rgba(255,255,255,.12) 2px 5px); }
.gjar__neck { width: 140px; height: 14px; background: linear-gradient(90deg, rgba(190,210,200,.55), rgba(255,255,255,.75) 30%, rgba(210,225,215,.45) 70%, rgba(170,190,180,.6)); border: 0; border-left: 2px solid rgba(150,175,160,.7); border-right: 2px solid rgba(150,175,160,.7); }
.gjar__body { border: 0; border-radius: 26px 26px 38px 38px; background: linear-gradient(90deg, rgba(190,210,200,.5), rgba(255,255,255,.9) 22%, rgba(250,252,250,.85) 70%, rgba(180,200,190,.55)); box-shadow: inset 0 0 0 3px rgba(170,195,182,.75), inset 0 -14px 16px rgba(120,150,135,.35), inset 0 10px 14px rgba(255,255,255,.7); }
.gjar__glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background:
  linear-gradient(90deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 82%, rgba(255,255,255,.35) 100%),
  radial-gradient(120% 40% at 50% 100%, rgba(120,160,140,.28), transparent 70%),
  linear-gradient(180deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 14%); }
.gjar__shine { z-index: 4; left: 16px; top: 22px; bottom: 34px; width: 12px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 60%, rgba(255,255,255,0)); filter: blur(.6px); }
.gjar__shine::after { content: ""; position: absolute; right: -118px; top: 40px; bottom: 60px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.gjar__floor { width: 170px; height: 20px; margin-top: -9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(50,35,10,.4), rgba(50,35,10,0)); z-index: 0; }
.gjar__label { position: absolute; z-index: 5; left: 50%; bottom: 44px; transform: translateX(-50%) rotate(-1.5deg); width: 122px; padding: 8px 8px 7px; text-align: center; border-radius: 4px; background: linear-gradient(180deg, #f6edd3, #e9dab0); box-shadow: 0 2px 4px rgba(0,0,0,.28), inset 0 0 0 1px rgba(120,90,30,.28), inset 0 0 0 4px #f6edd3, inset 0 0 0 5px rgba(120,90,30,.35); color: #4a3a12; line-height: 1.1; }
.gjar__label small { display: block; font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: #5e7d1f; font-weight: 800; }
.gjar__label b { display: block; font-family: var(--font-head); font-size: 1.12rem; margin: 3px 0 2px; color: #3b2d0a; }
.gjar__label span { display: block; font-size: .56rem; letter-spacing: .06em; color: #7a6428; } .gjar__label i { font-style: normal; font-weight: 800; color: #3b2d0a; }
.gjar__tag { position: absolute; z-index: 7; top: 20px; right: -16px; width: 56px; padding: 10px 4px 7px; border-radius: 3px 3px 8px 8px; background: linear-gradient(180deg, #8cc63f, #5e7d1f); color: #fff; text-align: center; transform: rotate(9deg); transform-origin: top left; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.gjar__tag::before { content: ""; position: absolute; top: 3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #f4efe0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.gjar__tag em { display: block; margin-top: 8px; font-family: var(--font-head); font-style: italic; font-size: .66rem; line-height: 1.15; }
.gb__ico { background: radial-gradient(circle at 50% 40%, #fff, #f1ede0); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.gb__row.is-on .gb__ico { background: radial-gradient(circle at 50% 40%, #fff, #e2efc9); }
@media (max-width: 900px) {
  .gjar-stage { flex: 0 0 auto; }
  .gjar__lid { width: 46px; height: 10px; border-radius: 4px 4px 2px 2px; } .gjar__lid::after { inset: 2px 2px 3px; }
  .gjar__neck { width: 50px; height: 5px; } .gjar__body { border-radius: 12px 12px 18px 18px; box-shadow: inset 0 0 0 2px rgba(170,195,182,.8), inset 0 -6px 8px rgba(120,150,135,.3); }
  .gjar__label, .gjar__tag, .gjar__shine::after, .gjar__floor { display: none; } .gjar__shine { display: block; left: 7px; top: 8px; bottom: 14px; width: 5px; }
}

.gb__ico--s { width: 30px; height: 30px; border-radius: 9px; } .gb__recipe li { gap: 10px; }

.gb__recipe li span small { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 600; margin-top: 1px; }
.gb__kcal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.gb__kcal > div { text-align: center; padding: 10px 6px; border-radius: 14px; background: linear-gradient(180deg, #fff8e1, #f8ecc4); border: 1px solid #e6cf86; }
.gb__kcal b { display: block; font-family: var(--font-head); font-size: 1.35rem; color: #6a4a07; line-height: 1.1; } .gb__kcal span { display: block; font-size: .7rem; color: #7a6428; margin-top: 3px; line-height: 1.2; }
.gb__kcal-note { margin: 8px 0 0; font-size: .74rem; color: var(--ink-soft); }
@media (max-width: 600px) { .gb__kcal b { font-size: 1.12rem; } .gb__kcal > div { padding: 8px 4px; } }

/* brand on the jar */
.gjar__label { width: 132px; padding: 7px 8px 7px; }
.gjar__logo { display: block; width: 34px; height: auto; margin: 0 auto 2px; }
.gjar__label small { font-size: .62rem; letter-spacing: .1em; color: #5e7d1f; } .gjar__label small strong { color: #3b2d0a; }
.gjar__mark { display: none; }
.gjar__lid::before { content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 12px; transform: translate(-50%, -50%); z-index: 1; background: rgba(60,40,5,.0); }
@media (max-width: 900px) {
  .gjar__mark { display: block; position: absolute; z-index: 5; left: 50%; bottom: 14px; width: 26px; height: auto; transform: translateX(-50%); background: rgba(255,255,255,.88); padding: 3px 5px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
}

/* Granola builder: fresh, natural Pure Nutritions look */
.granola-builder { position: relative; background: radial-gradient(900px 380px at 12% 0%, rgba(140,198,63,.16), transparent 70%), radial-gradient(800px 360px at 95% 100%, rgba(94,125,31,.12), transparent 70%), linear-gradient(180deg, #f6faec 0%, #eef5df 100%); }
.granola-builder::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0h1440v20c-120 30-240 40-360 30S840 10 720 14 480 46 360 48 120 36 0 20z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; pointer-events: none; }
.granola-builder::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%235e7d1f' opacity='.07'%3E%3Cpath d='M20 60C20 30 40 12 70 12c0 30-20 48-50 48z'/%3E%3Cpath d='M130 170c0-26 18-42 44-42 0 26-18 42-44 42z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px; pointer-events: none; }
.granola-builder > .container { position: relative; z-index: 1; }
.gb__sprig { display: block; width: 96px; height: 32px; margin: 0 auto 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cg fill='%237baa41'%3E%3Cpath d='M60 36V14' stroke='%235e7d1f' stroke-width='2' fill='none'/%3E%3Cpath d='M60 20C48 20 40 12 38 4c12 0 20 6 22 16z'/%3E%3Cpath d='M60 20C72 20 80 12 82 4c-12 0-20 6-22 16z' fill='%235e7d1f'/%3E%3Cpath d='M60 30C50 32 42 28 36 20c10-2 18 2 24 10z' opacity='.7'/%3E%3Cpath d='M60 30C70 32 78 28 84 20c-10-2-18 2-24 10z' fill='%235e7d1f' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.gb__head h2 em { font-family: inherit; font-style: normal; color: var(--green); position: relative; white-space: nowrap; }
.gb__head h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(140,198,63,.55), rgba(230,191,88,.5)); z-index: -1; }
.gb__badges { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gb__badges li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 9px; border-radius: 999px; background: #fff; border: 1px solid #d7e5bd; color: var(--green-dark); font-weight: 700; font-size: .8rem; box-shadow: 0 2px 6px rgba(94,125,31,.1); }
.gb__badges li::before { content: ""; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235e7d1f' d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.gb__step span { border-radius: 50% 0 50% 0; background: linear-gradient(135deg, #8cc63f, #4a6318); box-shadow: 0 3px 8px rgba(74,99,24,.3); }
.gb__group h4 { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.gb__group h4::before { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235e7d1f' d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.gb__group h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c9dca6, transparent); }
.gb__row { border-radius: 18px; border: 1.5px solid #e1ead0; box-shadow: 0 2px 8px rgba(94,125,31,.06); position: relative; overflow: hidden; }
.gb__row:hover { border-color: #b8d28a; }
.gb__row.is-on { background: linear-gradient(135deg, #ffffff 0%, #eaf4d6 100%); border-color: #5e7d1f; box-shadow: 0 0 0 1px #5e7d1f inset, 0 6px 14px rgba(94,125,31,.16); }
.gb__row.is-on::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235e7d1f' d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z'/%3E%3Cpath d='M5 19C9 13 13 9 18 6' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(225deg, rgba(140,198,63,.35) 50%, transparent 50%); }
.gb__sticky { padding: 18px 14px 14px; border-radius: 28px; background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f2f8e6 55%, #e6f0cf 100%); box-shadow: 0 14px 30px rgba(74,99,24,.14), inset 0 0 0 1px rgba(255,255,255,.9); }
.gb__quick button { background: #fff; border-color: #8cb552; } .gb__quick button:hover { background: #eef5df; }
.gb__sizes button { border-color: #d9e6bf; } .gb__sizes button.is-on { background: linear-gradient(135deg, #7baa41, #4a6318); border-color: #4a6318; box-shadow: 0 4px 10px rgba(74,99,24,.28); }
.gb__actions .btn--primary { background: linear-gradient(135deg, #7baa41, #4a6318); box-shadow: 0 6px 14px rgba(74,99,24,.28); }
.gb__recipe li { border-color: #e1ead0; }
@media (max-width: 900px) { .gb__sticky { border-radius: 20px; padding: 10px 12px; background: rgba(247,251,238,.97); } }
@media (max-width: 600px) { .granola-builder::before { height: 26px; } .gb__sprig { width: 72px; height: 24px; margin-bottom: 2px; } .gb__badges { gap: 6px; margin-top: 10px; } .gb__badges li { font-size: .7rem; padding: 4px 10px 4px 7px; } .gb__badges li::before { width: 12px; height: 12px; } .gb__row.is-on::after { width: 18px; height: 18px; background-size: 11px, auto; } }

/* white background version */
.granola-builder { background: #fff; }
.granola-builder::before { display: none; }
.granola-builder::after { opacity: .5; }
.gb__sticky { background: #fff; box-shadow: 0 10px 28px rgba(60,80,20,.1), inset 0 0 0 1px #e8efd9; }
.gb__row { background: #fff; }
.gb__ico { background: radial-gradient(circle at 50% 40%, #fff, #f6f8f0); }
.gb__row.is-on { background: linear-gradient(135deg, #ffffff 0%, #f1f8e3 100%); }
.gb__badges li { background: #fff; }
@media (max-width: 900px) { .gb__sticky { background: rgba(255,255,255,.97); } }

/* black lid, like the Pure Nutritions jar */
.gjar__lid { background: linear-gradient(90deg, #0b0b0b 0%, #2a2a2a 16%, #5a5a5a 30%, #1c1c1c 52%, #0a0a0a 80%, #000 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.6), 0 3px 5px rgba(0,0,0,.3); }
.gjar__lid::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, rgba(0,0,0,.25) 2px 5px); }
.gjar__lid::before { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); left: 12%; right: 12%; top: 2px; width: auto; height: 6px; transform: none; border-radius: 6px; }

/* background: faint Pure logo pattern instead of leaves */
.granola-builder::after { background: url("../assets/pure-logo-pattern.png?v=3") 0 0 / 220px 220px; opacity: 1; }

/* plain white background, no pattern */
.granola-builder::after { display: none; }

/* Granola product block: more compact */
.product--compact.section { padding: 26px 0 18px; }
.product--compact .breadcrumb { margin-bottom: 10px; font-size: .85rem; }
.product--compact .product-hero { grid-template-columns: 360px 1fr; gap: 32px; align-items: center; }
.product--compact .product-gallery__main, #product.product--compact .product-gallery__main { height: 340px; }
.product--compact .product-hero__info h1 { font-size: 1.9rem; margin-bottom: 6px; }
.product--compact .product-hero__info p { margin: 0 0 8px; font-size: .95rem; line-height: 1.5; }
.product--compact .product-hero__actions { margin: 12px 0 0; }
.product--compact .product-gallery__thumbs { display: none; }
.product--compact .also-like { margin-top: 14px; }
.product--compact .also-like h3 { font-size: .9rem; margin-bottom: 8px; }
.product--compact .also-like .grid--4 { grid-template-columns: repeat(auto-fill, 150px); gap: 10px; }
.product--compact .also-like .card { padding: 8px; display: flex; align-items: center; gap: 10px; }
.product--compact .also-like .card__img { width: 44px; height: 44px; flex: 0 0 auto; margin: 0; border-radius: 10px; } .product--compact .also-like .card__img::after { font-size: 1.3rem; }
.product--compact .also-like .card h3 { margin: 0; font-size: .9rem; }
@media (max-width: 960px) {
  .product--compact .product-hero { grid-template-columns: 250px 1fr; gap: 20px; }
  #product.product--compact .product-gallery__main { height: 250px; width: 100%; }
  #product.product--compact .product-gallery__main img { width: 100%; height: 100%; }
}
@media (max-width: 600px) {
  .product--compact .product-hero { grid-template-columns: 1fr; gap: 10px; }
  #product.product--compact .product-gallery__main { height: 210px; }
  .product--compact.section, #product.product--compact.section { padding: 14px 0 10px; }
  .product--compact .product-hero__info h1 { font-size: 1.35rem; }
  .product--compact .product-hero__info .stars, .product--compact .product-hero__info [class*="rating"] { margin-bottom: 4px; }
  .product--compact .product-hero__info p { font-size: .86rem; margin-bottom: 6px; }
  .product--compact .also-like { margin-top: 10px; }
}

.granola-builder.section { padding-top: 26px; }
@media (max-width: 600px) { .granola-builder.section { padding-top: 14px; } }

/* Granola pictures: change by themselves, with dots */
.product--compact .product-gallery { flex-direction: column; gap: 8px; }
@media (max-width: 960px) { .product--compact .product-gallery { flex-direction: column; } }
.product--compact .product-gallery__main img { transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.gg-dots { display: flex; justify-content: center; gap: 7px; padding: 2px 0; }
.gg-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #cfd8bd; cursor: pointer; transition: width .25s ease, background .25s ease; }
.gg-dots button.is-on { width: 24px; background: var(--green, #5e7d1f); }

/* Club 500 partner page */
.club500-about { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; }
.club500-about__logo { width: 200px; height: 200px; border-radius: 28px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 26px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; padding: 18px; }
.club500-about__logo img { width: 100%; height: 100%; object-fit: contain; }
.club500-about__text h2 { margin: 6px 0 10px; } .club500-about__text p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.55; }
.club500-about__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.club500-banner { margin: 28px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); } .club500-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .club500-about { grid-template-columns: 1fr; gap: 16px; text-align: center; justify-items: center; } .club500-about__logo { width: 120px; height: 120px; border-radius: 20px; padding: 12px; } .club500-about__actions { justify-content: center; } .club500-about__actions .btn { padding: 9px 16px; font-size: .88rem; } .club500-banner { margin-top: 18px; border-radius: 12px; } }

.club500-story { max-width: 760px; margin: 0 auto; text-align: center; } .club500-story h2 { margin: 6px 0 14px; } .club500-story p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 12px; }
.club500-story__lead { font-family: var(--font-head); font-size: 1.15rem; color: var(--green-dark) !important; font-weight: 600; } .club500-story__src { font-size: .8rem; } .club500-story__src a { color: var(--green); }
.club500-strip { display: flex; align-items: center; gap: 22px; max-width: 880px; margin: 0 auto; padding: 18px 22px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.club500-strip img { flex: 0 0 auto; width: 84px; height: 84px; object-fit: contain; border-radius: 16px; background: #fff; border: 1px solid var(--border); padding: 8px; }
.club500-strip h3 { margin: 0 0 4px; } .club500-strip p { margin: 0 0 10px; color: var(--ink-soft); }
@media (max-width: 600px) { .club500-strip { flex-direction: column; text-align: center; gap: 10px; padding: 16px; } .club500-strip img { width: 64px; height: 64px; } }

@media (max-width: 600px) { #what .grid--4 { grid-template-columns: 1fr 1fr; gap: 10px; } #what .feature-card { padding: 12px 10px; } #what .feature-card h3 { font-size: .95rem; margin-bottom: 4px; } #what .feature-card p { font-size: .8rem; line-height: 1.4; margin: 0; } #what .feature-card__icon { width: 44px; height: 44px; font-size: 1.3rem; margin-bottom: 8px; } #story.section { padding: 22px 0; } #what.section, #together.section { padding: 22px 0; } }

.club500-strip > div { display: flex; flex-direction: column; align-items: flex-start; } .club500-strip .btn { width: auto; }
@media (max-width: 600px) { .club500-strip > div { align-items: center; } }

/* Club 500: partnership shown clearly */
.farmhero--partners .farmhero__inner { padding-block: 34px; }
.hero-logos--big { margin-bottom: 18px; } .hero-logos--big .hl { width: 128px; height: 128px; border-radius: 26px; } .hero-logos--big .hl img { padding: 14px; } .hero-logos--big .hl__x { font-size: 2.2rem; }
.tag--seal { background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #3b2d0a; font-weight: 800; letter-spacing: .08em; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.farmhero--partners h1 { margin-top: 10px; }
.club500-strip__logos { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; } .club500-strip__logos i { font-style: normal; font-size: 1.3rem; color: var(--green-dark); font-weight: 700; }
.club500-strip .club500-strip__logos img { width: 72px; height: 72px; }
.club500-strip__badge { display: inline-block; margin-bottom: 6px; padding: 3px 11px; border-radius: 999px; background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #3b2d0a; font-weight: 800; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 600px) { .hero-logos--big .hl { width: 88px; height: 88px; border-radius: 18px; } .hero-logos--big .hl img { padding: 9px; } .hero-logos--big .hl__x { font-size: 1.5rem; } .farmhero--partners .farmhero__inner { padding-block: 22px; } .club500-strip .club500-strip__logos img { width: 56px; height: 56px; } }

/* Club 500: Kenyan football photos in the background */
.farmhero--partners { background: linear-gradient(180deg, rgba(20,44,10,.55), rgba(20,44,10,.82)), url("../assets/club500/hero-pitch.jpg") center 58% / cover no-repeat; padding: 120px 0 80px; }
.farmhero--partners h1, .farmhero--partners p { text-shadow: 0 2px 12px rgba(0,0,0,.55); }
#together.partner-banner { background: linear-gradient(rgba(20,44,10,.78), rgba(20,44,10,.88)), url("../assets/club500/fans.jpg") center / cover no-repeat; color: #fff; }
#together .section__head h2, #together .section__head p { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
#together .btn--outline { color: #fff; border-color: rgba(255,255,255,.85); background: transparent; } #together .btn--outline:hover { background: rgba(255,255,255,.15); }
#community.section { background: linear-gradient(rgba(20,44,10,.72), rgba(20,44,10,.86)), url("../assets/club500/hero-pitch.jpg") center 60% / cover no-repeat; }
#community .section__head h2 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
#community .tag { background: rgba(255,255,255,.2); color: #fff; }
@media (max-width: 600px) { .farmhero--partners { padding: 70px 0 44px; } }

/* Granola: whole picture, a bit bigger on phones */
@media (max-width: 600px) { #product.product--compact .product-gallery__main { height: 280px; } }

/* Nut grading buttons (farm sections) */
.nutgrade { margin-top: 14px; }
.nutgrade > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; user-select: none; } .nutgrade > summary::-webkit-details-marker { display: none; }
.nutgrade > summary::after { content: "\25BE"; font-size: .8em; transition: transform .2s ease; } .nutgrade[open] > summary::after { transform: rotate(180deg); }
.nutgrade[open] > summary { background: var(--green); color: #fff; border-color: var(--green); }
.nutgrade__body { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.nutgrade__body p { margin: 0 0 8px; font-size: .92rem; } .nutgrade__body ul { margin: 0 0 8px; padding-left: 18px; font-size: .9rem; line-height: 1.5; } .nutgrade__body li { margin-bottom: 4px; }
.nutgrade__note { font-size: .8rem !important; color: var(--ink-soft); margin: 0 !important; } .nutgrade__note a { color: var(--green); font-weight: 700; }
@media (max-width: 600px) { .nutgrade__body { padding: 11px 12px; } .nutgrade__body p, .nutgrade__body ul { font-size: .84rem; } }

/* Nut grading: smaller and tidier */
.nutgrade { margin-top: 10px; }
.nutgrade > summary { display: inline-flex; width: auto; padding: 5px 13px; font-size: .8rem; gap: 6px; }
.nutgrade__body { margin-top: 8px; padding: 10px 12px; max-width: 460px; border-radius: 10px; border-left-width: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.nutgrade__list { margin: 0 0 6px; display: grid; gap: 0; }
.nutgrade__list > div { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #e3e8d6; } .nutgrade__list > div:last-child { border-bottom: 0; }
.nutgrade__list dt { margin: 0; font-weight: 800; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); }
.nutgrade__list dd { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink); }
.nutgrade__note { font-size: .72rem !important; margin: 0 !important; } 
@media (max-width: 600px) { .nutgrade__list > div { grid-template-columns: 72px 1fr; gap: 8px; } .nutgrade__list dd { font-size: .8rem; } .nutgrade__body { max-width: none; } }

/* Club 500: what it does, more attractive (black and gold like the Club500 badge, with pitch lines) */
.c5-what { position: relative; background: radial-gradient(900px 400px at 85% 0%, rgba(201,154,46,.22), transparent 65%), linear-gradient(180deg, #14210c, #0d1608); overflow: hidden; }
.c5-what::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background:
  radial-gradient(circle at 50% 120%, transparent 0 138px, rgba(255,255,255,.07) 139px 141px, transparent 142px),
  linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.05) 50%, transparent calc(50% + 1px)); }
.c5-what > .container { position: relative; }
.c5-what .tag { background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; font-weight: 800; }
.c5-what .section__head h2 { color: #fff; } .c5-what .section__head p { color: rgba(255,255,255,.72); }
.c5-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.c5-card { position: relative; padding: 26px 20px 22px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(243,211,106,.28); box-shadow: 0 14px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; overflow: hidden; }
.c5-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #f3d36a, #c99a2e, #f3d36a); }
.c5-card:hover { transform: translateY(-6px); border-color: rgba(243,211,106,.7); box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(243,211,106,.25); }
.c5-num { position: absolute; top: 12px; right: 16px; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: rgba(243,211,106,.35); letter-spacing: .02em; }
.c5-ico { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 14px; border-radius: 50%; font-size: 1.9rem; background: radial-gradient(circle at 35% 30%, #fff6d6, #f3d36a 55%, #c99a2e); box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 -3px 6px rgba(120,80,0,.25); }
.c5-card h3 { color: #fff; margin: 0 0 8px; font-size: 1.15rem; } .c5-card p { margin: 0; color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.55; }
@media (max-width: 960px) { .c5-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .c5-cards { gap: 10px; } .c5-card { padding: 16px 10px 14px; border-radius: 16px; } .c5-ico { width: 46px; height: 46px; font-size: 1.3rem; margin-bottom: 8px; } .c5-card h3 { font-size: .98rem; margin-bottom: 4px; } .c5-card p { font-size: .76rem; line-height: 1.4; } .c5-num { font-size: 1rem; top: 8px; right: 10px; } .c5-what.section { padding: 22px 0; } }

/* Club 500: lighter, brighter */
.c5-what { background: radial-gradient(900px 400px at 85% 0%, rgba(243,211,106,.28), transparent 65%), linear-gradient(160deg, #5e7d1f 0%, #4a6318 100%); }
.c5-what::before { opacity: .35; }
.c5-card { background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: 0 12px 26px rgba(30,50,10,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.c5-card:hover { box-shadow: 0 18px 34px rgba(30,50,10,.38), 0 0 0 1px rgba(243,211,106,.3); }
.c5-card p { color: rgba(255,255,255,.92); }
.farmhero--partners { background: linear-gradient(180deg, rgba(40,70,15,.22), rgba(40,70,15,.55)), url("../assets/club500/hero-pitch.jpg") center 58% / cover no-repeat; }
#together.partner-banner { background: linear-gradient(rgba(40,70,15,.42), rgba(40,70,15,.62)), url("../assets/club500/fans.jpg") center / cover no-repeat; }
#community.section { background: linear-gradient(rgba(40,70,15,.42), rgba(40,70,15,.6)), url("../assets/club500/hero-pitch.jpg") center 60% / cover no-repeat; }

/* Club 500 hero: Kenyan football pictures change by themselves (crossfade + slow zoom) */
.farmhero--partners { background: #2f4a10; overflow: hidden; }
.c5-bg { position: absolute; inset: 0; z-index: 0; }
.c5-bg i { position: absolute; inset: 0; background-size: cover; background-position: center 58%; opacity: 0; transform: scale(1); animation: c5fade 24s linear infinite; will-change: opacity, transform; }
.c5-bg i:nth-child(1) { animation-delay: -1.2s; } .c5-bg i:nth-child(2) { animation-delay: 4.8s; } .c5-bg i:nth-child(3) { animation-delay: 10.8s; } .c5-bg i:nth-child(4) { animation-delay: 16.8s; }
.c5-bg i:nth-child(1) { opacity: 1; }
.c5-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,70,15,.22), rgba(40,70,15,.58)); }
.farmhero--partners .farmhero__inner { position: relative; z-index: 1; }
@keyframes c5fade { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .c5-bg i { animation: none; opacity: 0; } .c5-bg i:nth-child(1) { opacity: 1; } }

/* Club 500: e-commerce partner steps */
.c5-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.c5-step { position: relative; padding: 22px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.05); text-align: center; }
.c5-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: .85rem; line-height: 24px; z-index: 1; }
.c5-step__n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.c5-step h3 { margin: 0 0 4px; font-size: 1.05rem; } .c5-step p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
@media (max-width: 700px) { .c5-steps { grid-template-columns: 1fr; gap: 10px; } .c5-step { padding: 12px 14px; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; text-align: left; align-items: center; } .c5-step__n { grid-row: 1 / span 2; margin: 0; } .c5-step:not(:last-child)::after { display: none; } #shop.section { padding: 22px 0; } }

/* Product specification (PDF) button */
.spec-btn { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; }

/* Customer Reviews: more compact */
#reviews.reviews { padding: 26px 0; }
#reviews .section__head { margin-bottom: 14px; } #reviews .section__head .tag { font-size: .7rem; padding: 3px 11px; } #reviews .section__head h2 { font-size: 1.5rem; margin: 6px 0 0; }
#reviews .reviews__grid { gap: 16px; }
#reviews .reviews__empty { padding: 14px 16px; font-size: .9rem; border-radius: 12px; }
#reviews .review { padding: 12px 14px; border-radius: 12px; } #reviews .review p { margin: 4px 0 6px; font-size: .92rem; }
#reviews .reviews__form { padding: 14px 16px; gap: 8px; border-radius: 14px; }
#reviews .reviews__form h3 { font-size: .98rem; }
#reviews .reviews__pick button { font-size: 1.4rem; }
#reviews .reviews__form input, #reviews .reviews__form textarea { padding: 7px 10px; font-size: .9rem; border-radius: 8px; }
#reviews .reviews__form textarea { min-height: 58px; resize: vertical; }
#reviews .reviews__form .btn { padding: 8px 18px; font-size: .88rem; align-self: flex-start; }
@media (max-width: 720px) { #reviews.reviews { padding: 18px 0; } #reviews .section__head h2 { font-size: 1.25rem; } #reviews .reviews__form .btn { align-self: stretch; } }

#reviews .reviews__form textarea { height: 60px; }

/* Customer Reviews: attractive but compact */
#reviews.reviews { background: radial-gradient(700px 240px at 8% 0%, rgba(140,198,63,.16), transparent 70%), radial-gradient(600px 220px at 95% 100%, rgba(243,211,106,.18), transparent 70%), #fbfcf6; }
#reviews .section__head h2 em { font-style: normal; color: var(--green); position: relative; } #reviews .section__head h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 7px; border-radius: 6px; background: linear-gradient(90deg, rgba(140,198,63,.5), rgba(243,211,106,.55)); z-index: -1; }
#reviews .reviews__sub { margin: 4px 0 0; font-size: .9rem; color: var(--ink-soft); }
#reviews .reviews__empty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px dashed #b9d08a; border-radius: 16px; background: rgba(255,255,255,.75); }
#reviews .reviews__empty b { display: block; font-size: 1rem; color: var(--ink); } #reviews .reviews__empty span:not(.reviews__bubble) { font-size: .88rem; color: var(--ink-soft); }
#reviews .reviews__bubble { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #5b3d00; background: radial-gradient(circle at 35% 30%, #fff6d6, #f3d36a 60%, #e0a526); box-shadow: 0 6px 14px rgba(224,165,38,.35); }
#reviews .reviews__form { position: relative; overflow: hidden; border: 1px solid #dfe9c9; box-shadow: 0 10px 26px rgba(74,99,24,.1); }
#reviews .reviews__form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #8cc63f, #f3d36a, #5e7d1f); }
#reviews .reviews__form h3 { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
#reviews .reviews__pick { gap: 2px; } #reviews .reviews__pick button { transition: transform .15s ease, color .15s ease; } #reviews .reviews__pick button:hover { transform: scale(1.18); color: #e0a526; }
#reviews .reviews__hint { margin-top: -4px; font-size: .74rem; color: var(--ink-soft); }
#reviews .reviews__form input:focus, #reviews .reviews__form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(94,125,31,.18); }
#reviews .reviews__form .btn { background: linear-gradient(135deg, #7baa41, #4a6318); box-shadow: 0 6px 14px rgba(74,99,24,.28); }
#reviews .review { border-left: 4px solid #8cc63f; box-shadow: 0 4px 12px rgba(0,0,0,.05); }

/* You might also like: smaller cards on all product pages */
.also-like { margin-top: 14px; }
.also-like h3 { font-size: .95rem; margin: 0 0 10px; }
.also-like .grid--4 { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); gap: 10px; }
.also-like .card { padding: 8px; border-radius: 12px; }
.also-like .card__img { height: 64px; margin-bottom: 8px; border-radius: 8px; } .also-like .card__img::after { font-size: 1.6rem; }
.also-like .card img { height: 64px !important; margin-bottom: 8px !important; }
.also-like .card h3 { font-size: .86rem; margin: 0 0 2px; line-height: 1.25; }
.also-like .card__price { font-size: .82rem; margin: 0; }
@media (max-width: 600px) { .also-like .grid--4 { grid-template-columns: 1fr 1fr; gap: 8px; } .also-like .card { padding: 7px; } .also-like .card__img, .also-like .card img { height: 52px !important; margin-bottom: 6px !important; } .also-like .card h3 { font-size: .8rem; } }

/* KEBS mark on product pages */
.product-hero__info { position: relative; }
.kebs-mark { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 46px; line-height: 0; border-radius: 7px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.14); transition: transform .2s ease; }
.kebs-mark:hover { transform: translateY(-2px) scale(1.05); } .kebs-mark img { display: block; width: 100%; height: auto; border-radius: 7px; }
.product-hero__info:has(.kebs-mark) h1 { padding-right: 58px; }
@media (max-width: 600px) { .kebs-mark { width: 36px; border-radius: 6px; } .product-hero__info:has(.kebs-mark) h1 { padding-right: 46px; } }

/* Product specification button sits under Scan to Verify */
.spec-btn-wrap { margin: 12px 0 6px; }
.spec-btn-wrap .spec-btn { margin: 0; width: 100%; justify-content: center; }

/* three-picture version of the automatic picture change */
.slides--3 .slide { animation: slides-fade-3 12s infinite; }
.slides--3 .slide:nth-child(1) { animation-delay: 0s; } .slides--3 .slide:nth-child(2) { animation-delay: -8s; } .slides--3 .slide:nth-child(3) { animation-delay: -4s; }
@keyframes slides-fade-3 { 0% { opacity: 1; } 28% { opacity: 1; } 34% { opacity: 0; } 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slides--3 .slide { animation: none; } .slides--3 .slide:nth-child(1) { opacity: 1; } }

/* RUBIS: Why Enjoy Stores, simple and clean */
.why-strip { background: #fff; padding-block: 40px; }
.why-strip .section__head { margin-bottom: 22px; }
.why-row { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 960px; margin: 0 auto; }
.why-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 22px; }
.why-item + .why-item { border-left: 1px solid var(--border); }
.why-ico { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; font-size: 1.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8cc63f, #4a6318); box-shadow: 0 8px 18px rgba(74,99,24,.28), 0 0 0 6px rgba(140,198,63,.16); }
.why-item h3 { margin: 0 0 4px; font-size: 1.1rem; } .why-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.why-link { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .88rem; color: var(--green); } .why-link:hover { color: var(--green-dark); text-decoration: underline; }
@media (max-width: 720px) {
  .why-strip { padding-block: 22px; } .why-strip .section__head { margin-bottom: 12px; }
  .why-row { grid-template-columns: 1fr; gap: 0; }
  .why-item { flex-direction: row; text-align: left; align-items: center; gap: 14px; padding: 12px 6px; }
  .why-item + .why-item { border-left: 0; border-top: 1px solid var(--border); }
  .why-ico { flex: 0 0 auto; width: 48px; height: 48px; font-size: 1.25rem; box-shadow: 0 5px 12px rgba(74,99,24,.25), 0 0 0 4px rgba(140,198,63,.16); }
  .why-item h3 { font-size: 1rem; margin-bottom: 2px; } .why-item p { font-size: .86rem; }
}

/* Coffee page (with BIA Coffee Roastery) */
.farmhero--coffee { background: linear-gradient(135deg, #3b2a14, #6b4423 60%, #4a6318); }
.farmhero--coffee .farmhero__inner { padding-block: 30px; } .hero-logos .bia-logo { object-fit: contain; padding: 10px; }
.coffee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.coffee-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.06); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.coffee-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(60,40,10,.15); }
.coffee-card__img { background: #eceae6; aspect-ratio: 1; } .coffee-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coffee-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .coffee-card__body h3 { margin: 0; font-size: 1.2rem; } .coffee-card__body p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.coffee-card__body .coffee-card__origin { font-weight: 700; color: var(--green-dark); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.roast { align-self: flex-start; padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.roast--light { background: #c99a52; } .roast--medium { background: #8a5a2b; } .roast--dark { background: #3b2412; }
.coffee-card__actions { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coffee-card__link { font-size: .84rem; font-weight: 700; color: var(--green); } .coffee-card__link:hover { text-decoration: underline; }
.coffee-note { text-align: center; margin: 20px 0 0; color: var(--ink-soft); font-size: .9rem; } .coffee-note a { color: var(--green); font-weight: 700; }
.coffee-about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; max-width: 980px; margin: 0 auto; }
.coffee-about__pic { margin: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); } .coffee-about__pic img { display: block; width: 100%; height: auto; }
.coffee-about__text h2 { margin: 6px 0 10px; } .coffee-about__text p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }
@media (max-width: 900px) { .coffee-grid { grid-template-columns: 1fr; gap: 12px; } .coffee-card { flex-direction: row; } .coffee-card__img { flex: 0 0 38%; aspect-ratio: auto; } .coffee-card__body { padding: 12px 14px; } .coffee-about { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 600px) { #coffees.section, #bia.section { padding: 22px 0; } .coffee-card__body h3 { font-size: 1.05rem; } .coffee-card__body p { font-size: .82rem; } .farmhero--coffee .farmhero__inner { padding-block: 20px; } }

.hero-logos--fx .hl .bia-logo, .hero-logos--big .hl .bia-logo { padding: 3px; object-fit: contain; }

/* Coffee hero: coffee plantation pictures that change by themselves */
.farmhero--coffee { background: #3b2a14; overflow: hidden; padding-top: 90px; padding-bottom: 60px; }
.farmhero--coffee .farmhero__inner { position: relative; z-index: 1; }
.farmhero--coffee .c5-bg::after { background: linear-gradient(180deg, rgba(40,25,8,.3), rgba(40,25,8,.68)); }
.farmhero--coffee h1, .farmhero--coffee p { text-shadow: 0 2px 12px rgba(0,0,0,.55); }
@media (max-width: 600px) { .farmhero--coffee { padding-top: 60px; padding-bottom: 38px; } }

/* Coffee: partner logos in the top-left corner */
.farmhero--coffee .hero-logos--corner { position: relative; z-index: 2; margin: 0 0 14px; justify-content: center; }
.farmhero--coffee .hero-logos--corner .hl { width: 96px; height: 96px; border-radius: 20px; } .farmhero--coffee .hero-logos--corner .hl img { padding: 10px; } .farmhero--coffee .hero-logos--corner .hl .bia-logo { padding: 4px; }
.farmhero--coffee .hero-logos--corner .hl__x { font-size: 1.5rem; }
@media (min-width: 981px) { .farmhero--coffee.farmhero--logo-corner .hero-logos--corner { position: absolute; z-index: 2; left: max(24px, calc(50% - 560px)); top: 32px; margin: 0; justify-content: flex-start; } .farmhero--coffee { padding-top: 130px; padding-bottom: 100px; } }
@media (max-width: 980px) { .farmhero--coffee { padding-top: 40px; } }
@media (max-width: 600px) { .farmhero--coffee .hero-logos--corner .hl { width: 72px; height: 72px; border-radius: 15px; } .farmhero--coffee .hero-logos--corner .hl img { padding: 7px; } .farmhero--coffee .hero-logos--corner .hl__x { font-size: 1.1rem; } }

/* Coffee: wholesale */
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
.ws-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px 18px; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.ws-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #6b4423, #c99a52, #4a6318); }
.ws-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; background: linear-gradient(135deg, #f1e3c8, #e1c895); margin-bottom: 10px; }
.ws-card h3 { margin: 0 0 8px; font-size: 1.08rem; } .ws-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ws-card li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--ink-soft); line-height: 1.4; } .ws-card li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.ws-note { margin: 10px 0 0 !important; font-size: .76rem; color: var(--ink-soft); }
.ws-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
@media (max-width: 900px) { .ws-grid { grid-template-columns: 1fr; gap: 10px; } .ws-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 14px 14px 12px; } .ws-ico { width: 44px; height: 44px; font-size: 1.25rem; margin: 0; grid-row: 1 / span 3; } .ws-card h3 { margin-bottom: 4px; font-size: 1rem; } .ws-card li { font-size: .85rem; } .ws-cta .btn { padding: 10px 20px; font-size: .92rem; } }
@media (max-width: 600px) { #wholesale.section { padding: 22px 0; } }

/* Coffee wholesale: dark espresso, gold accents, big numbers */
.ws2 { position: relative; color: #fff; background: linear-gradient(rgba(52,32,14,.82), rgba(52,32,14,.9)), url("../assets/bia/hero-branch.jpg") center / cover no-repeat; padding-block: 46px; }
.ws2 .section__head h2 { color: #fff; } .ws2 .section__head p { color: rgba(255,255,255,.78); max-width: 640px; margin-inline: auto; }
.ws2 .section__head .tag { background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; font-weight: 800; }
.ws2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; margin: 0 auto 26px; }
.ws2-stat { padding: 18px 14px; text-align: center; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(243,211,106,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.ws2-stat b { display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1.1; color: #f3d36a; } .ws2-stat span { display: block; margin-top: 6px; font-size: .84rem; color: rgba(255,255,255,.82); line-height: 1.35; }
.ws2-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; max-width: 980px; margin: 0 auto; padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ws2-col h3 { margin: 0 0 12px; color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.ws2-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ws2-chips span { padding: 7px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: #fff; border: 1px solid rgba(243,211,106,.55); background: rgba(243,211,106,.08); }
.ws2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .ws2-list li { position: relative; padding-left: 26px; font-size: .94rem; color: rgba(255,255,255,.9); } .ws2-list li::before { content: "\2713"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; font-size: .72rem; font-weight: 800; text-align: center; line-height: 18px; }
.ws2-cta { max-width: 980px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 24px; border-radius: 18px; background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.ws2-cta h3 { margin: 0 0 3px; color: #2b1f05; font-size: 1.2rem; } .ws2-cta p { margin: 0; font-size: .9rem; color: #4a3508; }
.ws2-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ws2-btn { padding: 11px 22px; font-weight: 700; border-radius: 999px; } .ws2-btn--gold { background: #2b1f05; color: #f3d36a; } .ws2-btn--gold:hover { background: #000; } .ws2-btn--line { background: transparent; color: #2b1f05; border: 2px solid #2b1f05; } .ws2-btn--line:hover { background: rgba(43,31,5,.1); }
.ws2-note { max-width: 980px; margin: 12px auto 0; text-align: center; font-size: .78rem; color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .ws2-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ws2-cols { grid-template-columns: 1fr; gap: 16px; padding: 16px; } .ws2-cta { padding: 16px; } }
@media (max-width: 600px) { .ws2 { padding-block: 24px; } .ws2-stat { padding: 12px 8px; } .ws2-stat b { font-size: 1.45rem; } .ws2-stat span { font-size: .76rem; } .ws2-chips span { padding: 5px 11px; font-size: .8rem; } .ws2-cta h3 { font-size: 1.05rem; } .ws2-cta__btns { width: 100%; } .ws2-btn { flex: 1 1 100%; text-align: center; } }

/* Sesame page: colour, style and size choices (enquiry) */
.ses-pic { position: relative; background: #fff; } .ses-pic img { object-fit: contain; }
.ses-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(160deg, #f6f1e3, #e9efd8); color: var(--ink-soft); } .ses-soon span { font-size: 3rem; } .ses-soon[hidden] { display: none; }
.ses-opts { display: grid; gap: 12px; margin: 14px 0 10px; }
.ses-opt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ses-opt__label { flex: 0 0 62px; font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.ses-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ses-pill { padding: 8px 18px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .ses-pill:hover { border-color: var(--green); }
.ses-pill.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.ses-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; } .ses-price b { font-family: var(--font-head); font-size: 1.3rem; color: var(--green-dark); } .ses-price span { color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 600px) { .ses-opts { gap: 9px; margin: 10px 0 8px; } .ses-opt__label { flex-basis: 100%; } .ses-pill { padding: 6px 14px; font-size: .84rem; } .ses-price b { font-size: 1.1rem; } }

/* Footer bottom: two tidy rows (copyright and approval, payments we accept) */
.footer__bottom { display: block; padding-top: 18px; }
.footer__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; }
.footer__row + .footer__row { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); }
.footer__paylabel { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.footer__pills { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.footer__pills b { padding: 5px 14px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7baa41, #4a6318); box-shadow: 0 2px 6px rgba(74,99,24,.25); }
.footer__made { font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 600px) { .footer__bottom { padding-top: 12px; } .footer__row + .footer__row { margin-top: 10px; padding-top: 10px; } .footer__pills b { padding: 4px 11px; font-size: .7rem; } .footer__paylabel { flex-basis: 100%; font-size: .66rem; } .footer__made { flex-basis: 100%; font-size: .74rem; } }

/* Footer legal links (bottom right) and legal pages */
.footer__legal { display: inline-flex; align-items: center; gap: 12px; } .footer__legal a { color: var(--ink); font-weight: 600; font-size: .86rem; } .footer__legal a:hover { color: var(--green); text-decoration: underline; } .footer__legal i { font-style: normal; color: var(--green); font-size: .8rem; }
.farmhero--legal .farmhero__inner { padding-block: 10px; }
.legal { max-width: 760px; margin: 0 auto; } .legal h2 { font-size: 1.15rem; margin: 26px 0 8px; color: var(--green-dark); } .legal p, .legal li { line-height: 1.65; color: var(--ink-soft); font-size: .98rem; } .legal ul { margin: 6px 0 10px; padding-left: 20px; } .legal li { margin-bottom: 4px; }
.legal__updated { margin-top: 26px; font-size: .84rem; color: var(--ink-soft); } .legal__contact { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-tint); border: 1px solid var(--border); font-size: .92rem; line-height: 1.6; } .legal__contact a { color: var(--green); font-weight: 700; }
@media (max-width: 600px) { .legal h2 { font-size: 1.05rem; margin-top: 20px; } .legal p, .legal li { font-size: .92rem; } .footer__legal { gap: 9px; } .footer__legal a { font-size: .8rem; } }

/* Footer: the two phone numbers one under the other */
.footer__phones { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.footer--v2 .footer__brand .footer__line:has(.footer__phones) { align-items: flex-start; } .footer--v2 .footer__brand .footer__line:has(.footer__phones) .footer__icon { margin-top: 2px; }

/* ===== Footer redesign: newsletter band, brand + three link columns, three bottom rows ===== */
.footer--v2 .footer__top { display: block; margin-bottom: 0; }
.footer__band { display: grid; grid-template-columns: .9fr 1.4fr; gap: 28px 40px; align-items: center; padding: 26px 30px; margin-bottom: 36px; border-radius: 22px; background: linear-gradient(135deg, #5e7d1f, #4a6318); color: #fff; box-shadow: 0 14px 30px rgba(74,99,24,.22); position: relative; overflow: hidden; }
.footer__band::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(243,211,106,.28), transparent 70%); pointer-events: none; }
.footer--v2 .footer__band h4 { color: #fff; font-size: 1.25rem; text-transform: none; letter-spacing: 0; margin: 0 0 6px; } .footer--v2 .footer__band .footer__bandtext p { color: rgba(255,255,255,.88); font-size: .95rem; margin: 0; }
.footer__band .newsletter__form { position: relative; display: grid; gap: 10px; max-width: none; margin: 0; }
.footer__band .newsletter__row { grid-template-columns: 1fr 1fr; gap: 10px; }
.footer__band input[type="text"], .footer__band input[type="email"], .footer__band input[type="tel"] { background: #fff; border: 0; border-radius: 12px; padding: 12px 14px; font-size: .92rem; }
.footer__band .newsletter__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.footer__band .newsletter__check { color: rgba(255,255,255,.92); font-size: .84rem; } .footer__band .newsletter__form > button, .footer__band .newsletter__foot .btn { background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; border: 0; font-weight: 800; padding: 11px 28px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.22); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 30px; }
.footer--v2 .footer__grid .footer__col h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid #d7e5bd; display: inline-block; align-self: flex-start; }
.footer--v2 .footer__grid .footer__col a { font-size: .93rem; }
.footer__brand .footer__logo img { width: 74px; height: auto; } .footer__brand .footer__addr { margin: 4px 0 6px; line-height: 1.55; }
.footer__bottom { border-top: 1px solid var(--border); }
.footer__row--credit { color: var(--ink-soft); font-size: .84rem; } .footer__credit b { color: var(--green-dark); font-weight: 700; }
.footer--v2 .footer__bottom { padding-bottom: 22px; }
@media (max-width: 960px) { .footer__band { grid-template-columns: 1fr; padding: 22px; } .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px 24px; } .footer__grid .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .footer__band { padding: 16px 16px; gap: 12px; border-radius: 16px; margin-bottom: 22px; } .footer--v2 .footer__band h4 { font-size: 1.02rem; } .footer--v2 .footer__band .footer__bandtext p { font-size: .84rem; }
  .footer__band .newsletter__row { gap: 8px; } .footer__band input[type="text"], .footer__band input[type="email"], .footer__band input[type="tel"] { padding: 9px 12px; font-size: .86rem; border-radius: 10px; } .footer__band .newsletter__foot { flex-direction: column; align-items: stretch; } .footer__band .newsletter__foot .btn { width: 100%; padding: 10px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-bottom: 18px; } .footer__grid .footer__brand { grid-column: 1 / -1; } .footer__grid .footer__col:last-child { grid-column: 1 / -1; } .footer__grid .footer__col:last-child { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; align-items: center; } .footer__grid .footer__col:last-child h4 { flex-basis: 100%; }
  .footer--v2 .footer__grid .footer__col a { font-size: .86rem; }
  .footer__row--credit { font-size: .76rem; }
}

/* Footer brand: logo on top, then the address with a pin, phones and email (like a contact card) */
.footer--v2 .footer__brand .footer__logo { position: static; display: block; margin-bottom: 4px; }
.footer--v2 .footer__brand .footer__logo img { height: 84px; width: auto; }
.footer--v2 .footer__brand > p:first-of-type { min-height: 0; padding-right: 0; }
.footer__line--addr { align-items: flex-start !important; } .footer__line--addr .footer__icon { margin-top: 3px; }
.footer__address { display: flex; flex-direction: column; gap: 1px; line-height: 1.4; } .footer__address b { font-weight: 700; color: var(--ink); } .footer__address span { color: var(--ink-soft); }
.footer__brand .footer__contact { gap: 10px; }
@media (max-width: 600px) { .footer--v2 .footer__brand .footer__logo img { height: 60px; } .footer__brand .footer__contact { gap: 7px; } }

/* ===== Footer: more organized (aligned columns with dividers, compact two-row bottom) ===== */
.footer__band { margin-bottom: 30px; }
.footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 0; padding-bottom: 26px; align-items: start; }
.footer__grid > .footer__col { padding: 0 28px; } .footer__grid > .footer__col:first-child { padding-left: 0; } .footer__grid > .footer__col:last-child { padding-right: 0; }
.footer__grid > .footer__col + .footer__col { border-left: 1px solid var(--border); }
.footer--v2 .footer__grid .footer__col { gap: 9px; }
.footer--v2 .footer__grid .footer__col h4 { display: block; width: 100%; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid #d7e5bd; }
.footer--v2 .footer__brand .footer__logo img { height: 52px; } .footer--v2 .footer__brand .footer__logo { margin-bottom: 8px; }
.footer__brand .footer__contact { gap: 9px; } .footer__brand .footer__social { margin-top: 4px; } .footer__brand .footer__social a { width: 36px; height: 36px; }
.footer__bottom { border-top: 0; padding-top: 0; }
.footer__bottom .footer__row { padding: 14px 0; } .footer__bottom .footer__row + .footer__row { margin-top: 0; border-top: 1px solid var(--border); }
.footer__bottom .footer__row--top { border-top: 1px solid var(--border); font-size: .88rem; color: var(--ink-soft); }
.footer__payments { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__row--pay .footer__credit { font-size: .84rem; color: var(--ink-soft); } .footer__credit i { font-style: normal; color: var(--green); margin: 0 4px; } .footer__credit b { color: var(--green-dark); font-weight: 700; }
.footer--v2 .footer__bottom { padding-bottom: 8px; }
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px 0; } .footer__grid .footer__brand { grid-column: 1 / -1; padding: 0 0 20px; border-bottom: 1px solid var(--border); }
  .footer__grid > .footer__col:nth-child(2) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 18px 0; padding-bottom: 12px; }
  .footer__grid > .footer__col { padding: 0 14px; } .footer__grid > .footer__col:nth-child(2) { padding-left: 0; } .footer__grid > .footer__col:nth-child(3) { padding-right: 0; }
  .footer__grid .footer__col:last-child { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
  .footer--v2 .footer__grid .footer__col h4 { margin-bottom: 2px; padding-bottom: 8px; }
  .footer__bottom .footer__row { padding: 11px 0; gap: 6px 12px; } .footer__bottom .footer__row--top { font-size: .78rem; }
  .footer__row--pay { flex-direction: column; align-items: flex-start; } .footer__row--pay .footer__credit { font-size: .76rem; }
}

/* ===== Footer: tighter (less empty space) ===== */
.footer--v2 { padding-top: 22px; }
.footer__band { padding: 16px 22px; gap: 14px 28px; margin-bottom: 18px; border-radius: 18px; } .footer--v2 .footer__band h4 { font-size: 1.1rem; margin-bottom: 3px; } .footer--v2 .footer__band .footer__bandtext p { font-size: .88rem; line-height: 1.4; }
.footer__band .newsletter__form { gap: 8px; } .footer__band .newsletter__row { gap: 8px; } .footer__band input[type="text"], .footer__band input[type="email"], .footer__band input[type="tel"] { padding: 9px 12px; font-size: .88rem; }
.footer__band .newsletter__foot .btn { padding: 8px 24px; }
.footer__grid { padding-bottom: 14px; } .footer__grid > .footer__col { padding: 0 20px; }
.footer--v2 .footer__grid .footer__col { gap: 6px; } .footer--v2 .footer__grid .footer__col h4 { padding-bottom: 7px; margin-bottom: 2px; } .footer--v2 .footer__grid .footer__col a { font-size: .88rem; line-height: 1.35; }
.footer--v2 .footer__brand .footer__logo img { height: 44px; } .footer--v2 .footer__brand .footer__logo { margin-bottom: 4px; }
.footer__brand .footer__contact { gap: 6px; } .footer__brand .footer__social { margin-top: 2px; } .footer__brand .footer__social a { width: 32px; height: 32px; }
.footer__address { line-height: 1.3; } .footer--v2 .footer__brand .footer__line { font-size: .88rem; }
.footer__bottom .footer__row { padding: 9px 0; } .footer__bottom .footer__row--top { font-size: .82rem; } .footer__row--pay .footer__credit { font-size: .8rem; }
.footer__pills b { padding: 3px 11px; font-size: .72rem; } .footer__paylabel { font-size: .66rem; }
.footer--v2 .footer__bottom { padding-bottom: 4px; }
@media (max-width: 600px) {
  .footer--v2 { padding-top: 14px; }
  .footer__band { padding: 12px 14px; gap: 8px; margin-bottom: 14px; border-radius: 14px; } .footer--v2 .footer__band h4 { font-size: .98rem; } .footer--v2 .footer__band .footer__bandtext p { font-size: .8rem; }
  .footer__grid { gap: 12px 0; padding-bottom: 6px; } .footer__grid .footer__brand { padding-bottom: 12px; } .footer__grid > .footer__col { padding: 0 10px; }
  .footer--v2 .footer__grid .footer__col a { font-size: .84rem; } .footer--v2 .footer__grid .footer__col { gap: 5px; }
  .footer__grid .footer__col:last-child { padding-top: 10px; gap: 4px 16px; }
  .footer--v2 .footer__brand .footer__logo img { height: 40px; }
  .footer__bottom .footer__row { padding: 8px 0; } .footer__row--pay { gap: 4px; }
}

/* remove leftover spacing from the older footer rules */
.footer--v2 .footer__grid { margin-bottom: 0; } .footer--v2 .footer__bottom { border-top: 0; padding-top: 0; margin-top: 0; }

/* From farm to your hands: farm pictures behind the text, changing by themselves */
.taste-bg { position: relative; overflow: hidden; background: #2f4a10; padding-block: 90px; }
.taste-bg .c5-bg::after { background: linear-gradient(90deg, rgba(25,45,10,.78), rgba(25,45,10,.35)); }
.taste-bg .farmers2 { position: relative; z-index: 1; }
.taste-bg .tag { background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(2px); }
.taste-bg h2, .taste-bg p { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.taste-bg .btn--primary { background: linear-gradient(135deg, #f3d36a, #c99a2e); color: #2b1f05; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.taste-bg .btn--outline { color: #fff; border-color: rgba(255,255,255,.9); background: transparent; } .taste-bg .btn--outline:hover { background: rgba(255,255,255,.15); }
@media (max-width: 600px) { .taste-bg { padding-block: 44px; } .taste-bg .c5-bg::after { background: linear-gradient(180deg, rgba(25,45,10,.6), rgba(25,45,10,.72)); } }

/* Payment logos in the footer (real M-PESA, Visa and Mastercard logos on white chips) */
.footer__pills--logos { gap: 10px; align-items: center; }
.paychip { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 6px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.paychip img { display: block; height: 100%; width: auto; max-width: 64px; object-fit: contain; }
@media (max-width: 600px) { .paychip { height: 32px; padding: 5px 10px; border-radius: 8px; } .paychip img { max-width: 54px; } .footer__pills--logos { gap: 8px; } }

/* payment logos: smaller */
.footer__pills--logos { gap: 7px; }
.paychip { height: 26px; padding: 4px 8px; border-radius: 7px; box-shadow: none; }
.paychip img { max-width: 44px; }
.footer__paylabel { font-size: .62rem; }
@media (max-width: 600px) { .paychip { height: 23px; padding: 3px 7px; border-radius: 6px; } .paychip img { max-width: 38px; } .footer__pills--logos { gap: 6px; } }

/* Macadamia seasonal notice with the PDF */
.season-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px 26px; flex-wrap: wrap; margin: 6px 0 22px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(135deg, #f6efd9, #eaf1d5); border: 1px solid #d9e2bc; border-left: 6px solid var(--green); box-shadow: 0 8px 20px rgba(74,99,24,.1); }
.season-notice__text { flex: 1 1 360px; min-width: 0; } .season-notice__badge { display: inline-block; margin-bottom: 6px; padding: 3px 11px; border-radius: 999px; background: var(--green); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.season-notice h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.season-notice__pdf { flex: 0 0 auto; display: grid; grid-template-columns: 48px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 16px 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; } .season-notice__pdf:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.season-notice__ico { grid-row: 1 / span 2; width: 48px; height: 56px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; border-radius: 6px; background: linear-gradient(180deg, #fdecec, #f6c9c9); border: 1px solid #e8aaaa; color: #c0392b; font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.season-notice__pdf b { color: var(--ink); font-size: 1rem; line-height: 1.2; } .season-notice__pdf small { color: var(--ink-soft); font-size: .76rem; }
@media (max-width: 600px) { .season-notice { padding: 14px 14px; gap: 12px; border-radius: 14px; } .season-notice h3 { font-size: .94rem; } .season-notice__pdf { width: 100%; padding: 8px 12px 8px 10px; } .season-notice__ico { width: 40px; height: 46px; } .season-notice__pdf { grid-template-columns: 40px auto; } }

/* seasonal notice: slimmer */
.season-notice { padding: 10px 16px; margin: 2px 0 14px; gap: 10px 20px; border-radius: 14px; border-left-width: 5px; box-shadow: 0 5px 14px rgba(74,99,24,.08); }
.season-notice__badge { margin-bottom: 3px; padding: 2px 9px; font-size: .6rem; }
.season-notice h3 { font-size: .95rem; line-height: 1.25; }
.season-notice__pdf { grid-template-columns: 34px auto; column-gap: 9px; padding: 6px 12px 6px 8px; border-radius: 11px; }
.season-notice__ico { width: 34px; height: 40px; padding-bottom: 5px; font-size: .6rem; border-radius: 5px; }
.season-notice__pdf b { font-size: .9rem; } .season-notice__pdf small { font-size: .7rem; }
@media (max-width: 600px) { .season-notice { padding: 9px 12px; gap: 8px; margin-bottom: 12px; } .season-notice h3 { font-size: .84rem; } .season-notice__pdf { padding: 5px 10px 5px 7px; grid-template-columns: 30px auto; } .season-notice__ico { width: 30px; height: 36px; } }

/* Kombucha price (changes with the size and quantity) */
.kom-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px; } .kom-price .card__price { margin: 0; font-size: 1.6rem; } .kom-price__note { color: var(--ink-soft); font-size: .86rem; }
@media (max-width: 600px) { .kom-price .card__price { font-size: 1.35rem; } .kom-price__note { font-size: .78rem; } }

/* Hair & Skin Power page */
.hs-sub { margin: -4px 0 6px; font-weight: 700; color: var(--green-dark); letter-spacing: .02em; }
.hs-list { margin: 0; padding-left: 18px; line-height: 1.6; } .hs-list li { margin-bottom: 3px; }
.hs-disclaimer { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--bg-tint); border: 1px solid var(--border); font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.hs-quote { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 26px auto 8px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(135deg, #f6efd9, #eaf1d5); border: 1px solid #d9e2bc; }
.hs-quote img { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.hs-quote blockquote { margin: 0; } .hs-quote blockquote p { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.55; font-style: italic; color: var(--ink); } .hs-quote figcaption { font-weight: 800; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }
@media (max-width: 600px) { .hs-quote { flex-direction: column; text-align: center; gap: 10px; padding: 14px 16px; border-radius: 16px; } .hs-quote img { width: 60px; height: 60px; } .hs-quote blockquote p { font-size: .92rem; } .hs-disclaimer { font-size: .74rem; } }

/* Hair & Skin: the 5 seeds */
.hs-seeds { background: #fff; padding-block: 36px; } .hs-seeds .section__head { margin-bottom: 18px; } .hs-seeds .section__head p { margin: 4px 0 0; color: var(--ink-soft); }
.hs-seeds__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1040px; margin: 0 auto; }
.hs-seed { text-align: center; padding: 14px 8px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; } .hs-seed:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(74,99,24,.14); }
.hs-seed__pic { display: block; width: 100%; max-width: 150px; aspect-ratio: 1; margin: 0 auto 8px; object-fit: cover; border-radius: 50%; }
.hs-seed h3 { margin: 0 0 8px; font-size: .84rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.hs-seed__ico { display: block; width: 44px; height: 44px; margin: 0 auto 6px; }
.hs-seed p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); } .hs-seed p b { display: block; color: var(--ink); font-weight: 700; } .hs-seed p span { display: block; }
@media (max-width: 900px) { .hs-seeds__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hs-seeds { padding-block: 22px; } .hs-seeds__row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hs-seed { padding: 10px 6px 12px; border-radius: 14px; } .hs-seed__pic { max-width: 96px; } .hs-seed h3 { font-size: .74rem; } .hs-seed__ico { width: 34px; height: 34px; } .hs-seed p { font-size: .76rem; } .hs-seeds__row .hs-seed:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; } }

.hs-seed__pic { height: auto; }

/* Hair & Skin seeds: compact rows on phones */
@media (max-width: 600px) {
  .hs-seeds { padding-block: 16px; } .hs-seeds .section__head { margin-bottom: 10px; } .hs-seeds .section__head h2 { font-size: 1.15rem; } .hs-seeds .section__head p { font-size: .82rem; }
  .hs-seeds__row { grid-template-columns: 1fr; gap: 6px; }
  .hs-seed { display: grid; grid-template-columns: 52px 1fr 30px; grid-template-areas: "pic title ico" "pic text ico"; column-gap: 12px; row-gap: 0; align-items: center; text-align: left; padding: 7px 12px 7px 8px; border-radius: 12px; box-shadow: none; }
  .hs-seeds__row .hs-seed:last-child { grid-column: auto; max-width: none; justify-self: stretch; }
  .hs-seed__pic { grid-area: pic; width: 52px; max-width: none; margin: 0; }
  .hs-seed h3 { grid-area: title; margin: 0; font-size: .74rem; align-self: end; }
  .hs-seed p { grid-area: text; align-self: start; font-size: .76rem; line-height: 1.3; } .hs-seed p b, .hs-seed p span { display: inline; } .hs-seed p b::after { content: " "; }
  .hs-seed__ico { grid-area: ico; width: 28px; height: 28px; margin: 0; justify-self: end; }
}

.hs-month { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #f6efd9, #eaf1d5); border: 1px solid #d9e2bc; font-size: .9rem; color: var(--ink); } .hs-month b { color: var(--green-dark); } .hs-month span:last-child { color: var(--ink-soft); }
@media (max-width: 600px) { .hs-month { font-size: .8rem; padding: 6px 11px; gap: 6px; } }

/* Hair & Skin quote: smaller, side-by-side on phones */
@media (max-width: 600px) { .hs-quote { flex-direction: row; text-align: left; align-items: center; gap: 10px; margin: 14px auto 4px; padding: 10px 12px; border-radius: 14px; } .hs-quote img { width: 44px; height: 44px; border-width: 2px; } .hs-quote blockquote p { font-size: .8rem; line-height: 1.4; margin: 0 0 3px; } .hs-quote figcaption { font-size: .68rem; } }

/* Moringa card: real jar photo instead of the leaf icon */
.card__img--powder1 { background: #fff url("../assets/moringa-powder.jpg") center/contain no-repeat; }
.card__img--powder1::after { content: ""; }

/* NEMA certification */
.trust-badge--nema { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--green-dark); border: 1px solid #d9e2bc; padding-left: 8px; }
.trust-badge--nema img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; }
.certified__nema { margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; font-size: .78rem; color: var(--green-dark); }
.certified__nema img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #fff; }
@media (max-width: 600px) { .certified__nema img { width: 46px; height: 46px; } .certified__nema { font-size: .68rem; } #registered .trust-badge--nema, .trust-badges .trust-badge--nema { padding-left: 6px; } .trust-badge--nema img { width: 22px; height: 22px; } }
.trust-badge--nema { padding-top: 4px; padding-bottom: 4px; } .trust-badge--nema img { width: 40px; height: 40px; }
@media (max-width: 600px) { .trust-badge--nema img { width: 36px; height: 36px; } #registered .trust-badge--nema, .trust-badges .trust-badge--nema { padding-top: 3px; padding-bottom: 3px; } }

/* Home "Scan the QR": compact on phones */
@media (max-width: 560px) {
  .trace-ad { padding: 26px 0; }
  .trace-ad__inner { gap: 16px; }
  .trace-ad h2 { font-size: 1.45rem; margin-bottom: 8px; }
  .trace-ad p { font-size: .86rem; line-height: 1.45; margin: 0; }
  .trace-ad__steps { margin: 12px 0 14px; gap: 8px; }
  .trace-ad__steps li { grid-template-columns: 28px 1fr; column-gap: 10px; }
  .trace-ad__steps li::before { width: 28px; height: 28px; font-size: .85rem; }
  .trace-ad__steps strong { font-size: .92rem; }
  .trace-ad__steps span { font-size: .78rem; line-height: 1.35; }
  .trace-ad .btn--lg { padding: 10px 20px; font-size: .9rem; }
  .trace-ad__demo { flex-direction: row; gap: 12px; align-items: center; }
  .trace-ad__card { padding: 8px; border-radius: 14px; max-width: 150px; flex: 0 0 auto; }
  .trace-ad__scan { padding: 6px; }
  .trace-ad__scan .qc { width: 14px; height: 14px; }
  .trace-ad__card strong { font-size: .88rem; margin-top: 2px; }
  .trace-ad__card span { font-size: .7rem; line-height: 1.25; }
  .trace-ad__jar { height: 150px; border-radius: 12px; }
}

/* Baobab card: real jar photo instead of the tree icon */
.card__img--powder2 { background: #fff url("../assets/baobab-powder.jpg") center/contain no-repeat; }
.card__img--powder2::after { content: ""; }

/* Traceability pill under the price on product pages */
.trace-pill { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 9px 14px; border-radius: 14px; background: linear-gradient(135deg, #1f2d12, var(--green-dark)); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(31,45,18,.2); }
.trace-pill svg { flex: 0 0 auto; color: var(--lime); }
.trace-pill span { flex: 1 1 auto; font-size: .86rem; line-height: 1.3; color: rgba(255,255,255,.88); }
.trace-pill b { display: block; color: #fff; font-size: .92rem; letter-spacing: .01em; }
.trace-pill i { font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--lime); }
.trace-pill:hover { filter: brightness(1.08); }
.product-qr.is-flash { animation: qrflash 1.6s ease-out 1; }
@keyframes qrflash { 0% { box-shadow: 0 0 0 0 rgba(168,214,74,.9); } 60% { box-shadow: 0 0 0 14px rgba(168,214,74,0); } 100% { box-shadow: none; } }
@media (max-width: 600px) { .trace-pill { margin: 6px 0 8px; padding: 7px 12px; gap: 8px; border-radius: 12px; } .trace-pill span { font-size: .76rem; } .trace-pill b { font-size: .84rem; } }

/* Trace badge on shop cards */
.card { position: relative; }
.trace-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--green-dark); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1; box-shadow: 0 2px 8px rgba(31,45,18,.25); pointer-events: none; }
.trace-badge svg { color: var(--lime); flex: 0 0 auto; }
@media (max-width: 600px) { .trace-badge { top: 7px; left: 7px; padding: 3px 7px 3px 5px; font-size: .62rem; } .trace-badge svg { width: 11px; height: 11px; } }

/* Gift Card button: a little smaller */
.giftbar__gift { padding: 3px 11px 3px 9px; font-size: .74rem; gap: 6px; }
.giftbar__icon { width: 14px; height: 14px; }
@media (max-width: 720px) { .giftbar__gift { padding: 2px 9px 2px 7px; font-size: .66rem; gap: 5px; } .giftbar__icon { width: 12px; height: 12px; } }
@media (max-width: 560px) { .giftbar__gift { padding: 2px 8px 2px 6px; font-size: .62rem; gap: 4px; } .giftbar__icon { width: 11px; height: 11px; } }

/* Price comparison page */
.pc { max-width: 820px; margin: 0 auto; }
.pc h2 { font-size: 1.15rem; margin: 26px 0 6px; color: var(--green-dark); }
.pc-note { margin: 0 0 12px; color: var(--ink-soft); font-size: .9rem; }
.pc-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-hero__card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); text-align: center; }
.pc-hero__card span { font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.pc-hero__card strong { font-size: 2rem; line-height: 1.1; color: var(--ink); }
.pc-hero__card em { font-style: normal; font-size: .84rem; color: var(--ink-soft); }
.pc-hero__card--me { background: linear-gradient(135deg, #1f2d12, var(--green-dark)); border-color: transparent; }
.pc-hero__card--me span, .pc-hero__card--me em { color: rgba(255,255,255,.85); } .pc-hero__card--me strong { color: var(--lime); }
.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr 44px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.pc-row__label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .pc-row__label b { font-size: .92rem; color: var(--ink); } .pc-row__label span { font-size: .74rem; color: var(--ink-soft); }
.pc-row__bar { height: 12px; border-radius: 999px; background: #eef0e6; overflow: hidden; } .pc-row__bar i { display: block; height: 100%; border-radius: 999px; background: #b9c0a6; }
.pc-row__val { text-align: right; font-weight: 800; color: var(--ink); }
.pc-row--me { background: #f3f8e4; border-color: #b7d27a; } .pc-row--me .pc-row__bar i { background: var(--green); } .pc-row--me .pc-row__label b, .pc-row--me .pc-row__val { color: var(--green-dark); }
.pc-facts { margin: 6px 0 10px; padding-left: 20px; } .pc-facts li { line-height: 1.55; color: var(--ink-soft); font-size: .92rem; margin-bottom: 6px; }
.pc-link { display: inline-block; margin-top: 6px; font-weight: 700; font-size: .86rem; color: var(--green); } .pc-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .pc-hero { gap: 8px; } .pc-hero__card { padding: 12px 8px; border-radius: 14px; } .pc-hero__card strong { font-size: 1.25rem; } .pc-hero__card span { font-size: .66rem; } .pc-hero__card em { font-size: .7rem; }
  .pc h2 { font-size: 1.05rem; margin-top: 18px; }
  .pc-list { gap: 5px; } .pc-row { grid-template-columns: 1fr 38px; gap: 3px 8px; padding: 6px 10px; } .pc-row__label { grid-column: 1 / 2; } .pc-row__val { grid-column: 2 / 3; grid-row: 1 / 2; } .pc-row__bar { grid-column: 1 / 3; height: 8px; }
  .pc-row__label b { font-size: .84rem; } .pc-row__label span { font-size: .68rem; } .pc-facts li { font-size: .86rem; }
}
@media (max-width: 600px) { .farmhero--pc { padding: 26px 0 22px; } .farmhero--pc h1 { font-size: 1.5rem; margin: 8px 0 6px; } .farmhero--pc p { font-size: .9rem; margin: 0; } .section--pc { padding-top: 20px; padding-bottom: 28px; } }

/* Price comparison: several products + jump links + button on product pages */
.pc-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; } .pc-jump span { font-size: .84rem; color: var(--ink-soft); font-weight: 700; }
.pc-jump a { padding: 6px 14px; border-radius: 999px; background: #f3f8e4; border: 1px solid #b7d27a; color: var(--green-dark); font-weight: 700; font-size: .86rem; } .pc-jump a:hover { background: #e8f2cf; }
.pc-block { padding: 8px 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.pc-block__title { font-size: 1.5rem; margin: 14px 0 2px; color: var(--ink); } .pc-block__sub { display: none; }
.pc-block h3 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--green-dark); }
.pc-checked { margin-top: 10px; }
.price-pill { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 14px; border-radius: 14px; background: #f3f8e4; border: 1.5px solid #b7d27a; color: var(--green-dark); text-decoration: none; }
.price-pill > b { flex: 0 0 auto; font-size: 1rem; color: #d4a017; } .price-pill span { flex: 1 1 auto; font-size: .86rem; line-height: 1.3; color: var(--ink-soft); } .price-pill span b { display: block; color: var(--green-dark); font-size: .92rem; } .price-pill i { font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--green); }
.price-pill:hover { background: #e8f2cf; }
@media (max-width: 600px) { .pc-block__title { font-size: 1.2rem; margin-top: 10px; } .pc-block h3 { font-size: .98rem; margin-top: 12px; } .pc-jump a { padding: 5px 11px; font-size: .8rem; } .price-pill { padding: 6px 12px; gap: 8px; border-radius: 12px; margin-bottom: 8px; } .price-pill span { font-size: .76rem; } .price-pill span b { font-size: .84rem; } }

/* Cashew page: cashew farm picture behind the title */
.cashew-hero { background: linear-gradient(180deg, rgba(20,38,8,.45), rgba(20,38,8,.72)), url("../assets/cashew-hero.jpg") center 32% / cover no-repeat; padding-top: 110px; padding-bottom: 64px; }
.cashew-hero h1, .cashew-hero p { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
@media (max-width: 600px) { .cashew-hero { padding: 48px 0 32px; background-position: center 30%; } }

/* Nuts pages: picture behind the title */
.nut-hero { background-size: cover; background-repeat: no-repeat; padding-top: 110px; padding-bottom: 64px; }
.nut-hero h1, .nut-hero p { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.nut-hero--macadamia { background-image: linear-gradient(180deg, rgba(20,38,8,.4), rgba(20,38,8,.7)), url("../assets/macadamia-farmers.jpg"); background-position: center 35%; }
.nut-hero--peanuts { background-image: linear-gradient(180deg, rgba(30,28,8,.4), rgba(30,28,8,.7)), url("../assets/peanut-farmers.jpg"); background-position: center 28%; }
.nut-hero--almonds { background-image: linear-gradient(180deg, rgba(35,22,8,.5), rgba(35,22,8,.76)), url("../assets/almonds-hero.jpg"); background-position: center 45%; }
@media (max-width: 600px) { .nut-hero { padding: 48px 0 32px; } .nut-hero h1 { font-size: 1.7rem; margin-bottom: 6px; } .nut-hero .tag { font-size: .7rem; padding: 4px 11px; margin-bottom: 8px; } .nut-hero p { font-size: .88rem; line-height: 1.45; } }

/* Nuts pages: small heading above a second product group inside a range */
.range-sub { margin: 34px 0 14px; text-align: center; font-size: 1.15rem; color: var(--green-dark); }
@media (max-width: 600px) { .range-sub { margin: 22px 0 10px; font-size: 1rem; } }

/* Nuts pages: range chooser under the title (Pure, Classic, Gourmet, Indulge) */
.range-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 18px 0; }
.range-nav__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 900px; }
.range-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 10px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--bg-tint, #f6f8ee); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.range-chip b { font-size: 1.1rem; color: var(--green-dark); letter-spacing: .01em; }
.range-chip span { font-size: .8rem; color: var(--ink-soft); }
.range-chip:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 8px 18px rgba(31,45,18,.12); }
.range-chip--pure { background: #eef5dc; } .range-chip--classic { background: #fbf1da; } .range-chip--gourmet { background: #f6e4d6; } .range-chip--indulge { background: #efe3df; } .range-chip--butters { background: #f3efe0; }
.section[id] { scroll-margin-top: 20px; }
@media (max-width: 600px) { .range-nav { padding: 10px 0; } .range-nav__row { grid-template-columns: 1fr 1fr; gap: 8px; } .range-chip { padding: 9px 8px; border-radius: 12px; } .range-chip b { font-size: .98rem; } .range-chip span { font-size: .72rem; } }

/* Nuts pages: the picture behind the title changes by itself */
.nut-hero { position: relative; overflow: hidden; background-color: #2a3a14; }
.nut-hero .farmhero__inner { position: relative; z-index: 1; }
.nut-hero .c5-bg::after { background: linear-gradient(180deg, rgba(20,30,8,.5), rgba(20,30,8,.76)); }
.nut-hero .c5-bg i { animation-duration: 32s; }
.nut-hero .c5-bg i:nth-child(1) { animation-delay: -1.6s; } .nut-hero .c5-bg i:nth-child(2) { animation-delay: 6.4s; } .nut-hero .c5-bg i:nth-child(3) { animation-delay: 14.4s; } .nut-hero .c5-bg i:nth-child(4) { animation-delay: 22.4s; }

/* Registered and certified: tidy equal badges, smaller */
.trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 860px; margin: 0 auto; }
.trust-badge { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 48px; padding: 9px 14px; border-radius: 12px; font-size: .88rem; font-weight: 700; line-height: 1.25; text-align: left; }
.trust-badge--nema { padding: 6px 12px; } .trust-badge--nema img { width: 30px; height: 30px; }
@media (max-width: 600px) {
  #registered .trust-badges, #quality .trust-badges { grid-template-columns: 1fr 1fr; gap: 7px; }
  #registered .trust-badge, #quality .trust-badge, .trust-badges .trust-badge { min-height: 40px; padding: 6px 10px; border-radius: 10px; font-size: .72rem; gap: 6px; }
  .trust-badge--nema img, .trust-badges .trust-badge--nema img { width: 24px; height: 24px; }
}
.footer__social { flex-wrap: wrap; }
@media (max-width: 600px) { .footer__social { gap: 7px; } .footer__brand .footer__social a { width: 32px; height: 32px; } }
.paychip img[alt="PayPal"] { max-width: 58px; } @media (max-width: 600px) { .paychip img[alt="PayPal"] { max-width: 50px; } }

/* Our Work page */
.ow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.ow-card { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); }
.ow-card__icon { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, var(--cream), var(--lime)); font-size: 1.6rem; }
.ow-card__body { min-width: 0; } .ow-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--green-dark); } .ow-card p { margin: 0 0 8px; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.ow-links { display: flex; flex-wrap: wrap; gap: 6px; } .ow-links a { padding: 4px 11px; border-radius: 999px; background: #f3f8e4; border: 1px solid #b7d27a; color: var(--green-dark); font-weight: 700; font-size: .78rem; text-decoration: none; } .ow-links a:hover { background: #e8f2cf; }
.ow-sec .section__head p { margin-bottom: 0; }
@media (max-width: 600px) { .ow-grid { grid-template-columns: 1fr; gap: 8px; } .ow-card { padding: 11px 12px; gap: 10px; border-radius: 13px; } .ow-card__icon { width: 38px; height: 38px; font-size: 1.3rem; border-radius: 11px; } .ow-card h3 { font-size: .98rem; } .ow-card p { font-size: .8rem; margin-bottom: 6px; } .ow-links a { padding: 3px 9px; font-size: .72rem; } .ow-sec { padding-block: 22px; } }
@media (max-width: 600px) { .ow-sec .section__head { margin-bottom: 12px; } .ow-sec .section__head h2 { font-size: 1.35rem; margin: 6px 0 4px; } .ow-sec .section__head p { font-size: .86rem; } .ow-sec .section__head .tag { font-size: .68rem; padding: 4px 11px; } }

/* Distributors page */
.ow-card__icon--logo { background: #fff; border: 1px solid var(--border); padding: 4px; } .ow-card__icon--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.dist-world { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dist-world__box { padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--border); } .dist-world__box h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--green-dark); } .dist-world__box p { margin: 0 0 12px; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 700px) { .dist-world { grid-template-columns: 1fr; gap: 8px; } .dist-world__box { padding: 12px 14px; border-radius: 13px; } .dist-world__box h3 { font-size: 1rem; } .dist-world__box p { font-size: .84rem; margin-bottom: 8px; } }

/* Distributors: world map */
.wm { margin-bottom: 18px; }
.wm__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wm__views { display: flex; flex-wrap: wrap; gap: 6px; } .wm__views button { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; color: var(--green-dark); font-weight: 700; font-size: .84rem; cursor: pointer; } .wm__views button.is-on { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.wm__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0; font-size: .78rem; color: var(--ink-soft); } .wm__legend li { display: flex; align-items: center; gap: 6px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .lg--home { background: var(--green-dark); } .lg--partner { background: #8cc63f; } .lg--none { background: #d8dcc9; }
.wm__map { position: relative; border-radius: 16px; overflow: hidden; background: #e9f2f6; border: 1px solid var(--border); }
.wm__svg { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 568; }
.wm__land path { fill: #d8dcc9; stroke: #fff; stroke-width: .6; cursor: pointer; transition: fill .15s; } .wm__land path:hover { fill: #c3c9ac; }
.wm__land path.is-partner { fill: #8cc63f; } .wm__land path.is-home { fill: var(--green-dark); } .wm__land path.is-partner:hover { fill: #79b42f; } .wm__land path.is-home:hover { fill: #1f2d12; }
.wm__land path.is-sel { stroke: #d4a017; stroke-width: 1.6; }
.wm__dot { fill: #f4c430; stroke: #fff; stroke-width: 1.5; } .wm__pulse { fill: rgba(244,196,48,.5); transform-box: fill-box; transform-origin: center; animation: wmpulse 2.2s ease-out infinite; } .wm__pin { pointer-events: none; }
@keyframes wmpulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wm__pulse { animation: none; } }
.wm__tip { position: absolute; z-index: 3; pointer-events: none; padding: 4px 9px; border-radius: 8px; background: rgba(20,30,8,.9); color: #fff; font-size: .78rem; white-space: nowrap; }
.wm__panel { margin-top: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); } .wm__panel h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--green-dark); } .wm__panel p { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.wm__btn { display: inline-block; margin: 0 6px 4px 0; padding: 6px 14px; border-radius: 999px; background: #f3f8e4; border: 1px solid #b7d27a; color: var(--green-dark); font-weight: 700; font-size: .82rem; text-decoration: none; } .wm__btn:hover { background: #e8f2cf; }
@media (max-width: 600px) { .wm__bar { gap: 6px; margin-bottom: 8px; } .wm__views button { padding: 5px 11px; font-size: .76rem; } .wm__legend { font-size: .7rem; gap: 2px 10px; } .wm__map { border-radius: 12px; } .wm__panel { padding: 11px 13px; border-radius: 13px; } .wm__panel h3 { font-size: 1rem; } .wm__panel p { font-size: .84rem; } .wm__btn { padding: 5px 11px; font-size: .76rem; } }

/* Distributors: distribution channel picture */
.dist-channel { padding-block: 22px 8px; } .dist-channel__pic { display: block; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.14); border: 1px solid var(--border); } .dist-channel__pic img { display: block; width: 100%; height: auto; }
.dist-channel__cap { margin: 8px 0 0; text-align: center; font-size: .86rem; color: var(--ink-soft); font-weight: 600; } .dist-channel__cap span { display: none; }
@media (max-width: 700px) { .dist-channel { padding-block: 12px 4px; } .dist-channel__pic { border-radius: 12px; } .dist-channel__cap { font-size: .76rem; } .dist-channel__cap span { display: inline; font-weight: 400; } }

/* Distributors: the two big buttons (Kenya, Worldwide) */
.dist-btns { padding: 16px 0 18px; border-bottom: 1px solid var(--border); background: #fff; }
.dist-btns__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; }
.dist-btn { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 10px 24px rgba(31,45,18,.22); transition: transform .18s ease, box-shadow .18s ease; }
.dist-btn::after { content: ""; position: absolute; top: -40%; right: -10%; width: 120px; height: 160%; background: rgba(255,255,255,.12); transform: rotate(18deg); }
.dist-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(31,45,18,.3); }
.dist-btn--kenya { background: linear-gradient(135deg, #1f2d12, #3f6b1a 60%, #6aa52a); }
.dist-btn--world { background: linear-gradient(135deg, #0f3d5c, #1f7a8c 60%, #3fa86b); }
.dist-btn__ic { flex: 0 0 auto; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.95); font-size: 1.9rem; box-shadow: 0 3px 10px rgba(0,0,0,.2); z-index: 1; }
.dist-btn__ic img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.dist-btn__tx { display: flex; flex-direction: column; min-width: 0; z-index: 1; } .dist-btn__tx b { font-size: 1.35rem; line-height: 1.15; letter-spacing: .01em; } .dist-btn__tx em { font-style: normal; font-size: .84rem; opacity: .9; }
.dist-btn i { margin-left: auto; font-style: normal; font-size: 2rem; line-height: 1; z-index: 1; opacity: .9; }
@media (max-width: 600px) { .dist-btns { padding: 10px 0 12px; } .dist-btns__row { gap: 8px; } .dist-btn { gap: 8px; padding: 10px 10px; border-radius: 15px; } .dist-btn__ic { width: 36px; height: 36px; font-size: 1.3rem; } .dist-btn__ic img { width: 24px; height: 24px; } .dist-btn__tx b { font-size: 1rem; } .dist-btn__tx em { font-size: .66rem; line-height: 1.2; } .dist-btn i { font-size: 1.4rem; } }
.wm__city { fill: #f4c430; stroke: #fff; cursor: pointer; } .wm__city:hover { fill: #ffd95a; }
.wm__cityname { fill: #1f2d12; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-linejoin: round; pointer-events: none; font-family: inherit; }

/* Become a Partner hero: logo in the top-left corner, above the title on phones */
.nut-hero--partner .hero-logos { position: relative; z-index: 2; margin: 0 0 14px; justify-content: center; }
.nut-hero--partner .pure-logo-tile { width: 84px; height: 84px; border-radius: 18px; padding: 9px; }
@media (min-width: 981px) { .nut-hero--partner .hero-logos { position: absolute; left: max(56px, calc(50% - 520px)); top: 44px; margin: 0; justify-content: flex-start; } .nut-hero--partner.nut-hero { padding-top: 120px; padding-bottom: 84px; } }
@media (max-width: 600px) { .nut-hero--partner .pure-logo-tile { width: 62px; height: 62px; border-radius: 14px; padding: 7px; } .nut-hero--partner .hero-logos { margin-bottom: 8px; } }
/* Become a Partner hero on phones and tablets: logo in the top-left corner too */
@media (max-width: 980px) { .nut-hero--partner .hero-logos { position: absolute; left: 14px; top: 12px; margin: 0; justify-content: flex-start; } .nut-hero--partner .pure-logo-tile { width: 54px; height: 54px; border-radius: 12px; padding: 6px; } .nut-hero--partner.nut-hero { padding-top: 56px; } }
@media (max-width: 600px) { .nut-hero--partner .pure-logo-tile { width: 46px; height: 46px; border-radius: 11px; padding: 5px; } .nut-hero--partner.nut-hero { padding-top: 52px; } }

/* Online payment (Paystack): order window buttons and the payment result page */
.order__pay { width: 100%; margin-bottom: 8px; background: linear-gradient(135deg, #1f2d12, var(--green-dark) 60%, #4a7a1e); box-shadow: 0 6px 16px rgba(31,45,18,.25); }
.order__pay[hidden] { display: none; }
.btn.order__later { width: 100%; background: #fff; color: var(--green-dark); border: 1.5px solid var(--green-dark); }
.pay-result { max-width: 640px; margin: 0 auto; }
.pay-result__box { text-align: center; padding: 28px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.pay-result__box[hidden] { display: none; }
.pay-result__icon { width: 64px; height: 64px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef0e6; font-size: 1.8rem; font-weight: 800; color: var(--green-dark); }
.pay-result__icon--ok { background: #dff3c4; } .pay-result__icon--bad { background: #fbe0d8; color: #b3341a; }
.pay-result__box h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--green-dark); } .pay-result__box p { margin: 0 0 10px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 600px) { .pay-result__box { padding: 18px 14px; border-radius: 15px; } .pay-result__icon { width: 52px; height: 52px; font-size: 1.5rem; } .pay-result__box h2 { font-size: 1.15rem; } }
/* Long messages in the pop-up toast wrap instead of running off the screen */
.toast { width: max-content; max-width: calc(100vw - 32px); white-space: normal; text-align: center; line-height: 1.35; }
@media (max-width: 600px) { .toast { border-radius: 16px; padding: 10px 16px; font-size: .84rem; } }

/* Payment result page: bigger, friendlier card with a coloured top, next steps and the Paystack mark */
.farmhero--pay .farmhero__inner { padding-block: 6px; }
.pay-secure { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: .85rem; backdrop-filter: blur(4px); }
.pay-secure img { display: block; width: 22px; height: auto; background: #fff; border-radius: 6px; padding: 3px; box-sizing: content-box; }
.pay-secure b { font-weight: 800; letter-spacing: .2px; }
.pay-secure--dark { background: #f3f6ec; border-color: var(--border); color: var(--ink-soft); backdrop-filter: none; margin-top: 0; }
.pay-secure--dark img { background: transparent; padding: 0; width: 20px; }
.pay-secure--dark b { color: #0a2540; }
.pay-result { max-width: 560px; }
.pay-result__box { padding: 0; overflow: hidden; text-align: center; border-radius: 22px; box-shadow: 0 18px 46px rgba(40,60,10,.16); }
.pay-result__head { padding: 28px 22px 22px; background: linear-gradient(160deg, #eef3e1, #f8faf2); border-bottom: 1px solid var(--border); }
.pay-result__box--ok .pay-result__head { background: linear-gradient(160deg, var(--green-dark), var(--green)); border-bottom: 0; color: #fff; }
.pay-result__box--bad .pay-result__head { background: linear-gradient(160deg, #fdeee9, #fff7f4); }
.pay-result__head .pay-result__icon { margin-bottom: 12px; width: 72px; height: 72px; font-size: 2.1rem; box-shadow: 0 0 0 8px rgba(255,255,255,.28); }
.pay-result__box--ok .pay-result__icon--ok { background: #fff; color: var(--green-dark); animation: payPop .55s cubic-bezier(.2,1.4,.4,1) both; }
.pay-result__head h2 { margin: 0; font-size: 1.45rem; }
.pay-result__box--ok .pay-result__head h2 { color: #fff; }
.pay-result__amt { margin: 10px 0 0 !important; font-size: 2.1rem; font-weight: 800; letter-spacing: .3px; color: #fff !important; }
.pay-result__order { display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: .85rem; font-weight: 700; }
.pay-result__body { padding: 20px 22px 22px; }
.pay-result__body h3 { margin: 0 0 12px; font-size: 1rem; color: var(--green-dark); text-transform: uppercase; letter-spacing: .6px; }
.pay-steps { list-style: none; counter-reset: ps; margin: 0 0 20px; padding: 0; text-align: left; display: grid; gap: 10px; }
.pay-steps li { counter-increment: ps; position: relative; padding: 10px 12px 10px 52px; border-radius: 14px; background: #f6f8f0; border: 1px solid var(--border); display: grid; gap: 1px; }
.pay-steps li::before { content: counter(ps); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; }
.pay-steps b { color: var(--green-dark); font-size: .95rem; }
.pay-steps span { color: var(--ink-soft); font-size: .85rem; }
.pay-result__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 18px; background: #fafbf6; border-top: 1px solid var(--border); }
.pay-methods { display: inline-flex; align-items: center; gap: 10px; }
.pay-methods img { height: 20px; width: auto; display: block; }
@keyframes payPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pay-result__box--ok .pay-result__icon--ok { animation: none; } }
@media (max-width: 600px) {
  .pay-result__box { border-radius: 18px; padding: 0; }
  .pay-result__head { padding: 20px 14px 16px; }
  .pay-result__head .pay-result__icon { width: 58px; height: 58px; font-size: 1.7rem; }
  .pay-result__head h2 { font-size: 1.2rem; }
  .pay-result__amt { font-size: 1.7rem; }
  .pay-result__body { padding: 16px 14px 18px; }
  .pay-secure { font-size: .8rem; }
}
.farmhero--pay { padding: 52px 0 40px; }
.nut-hero.farmhero--pay { padding: 64px 0 52px; } @media (max-width: 600px) { .nut-hero.farmhero--pay { padding: 40px 0 30px; } }

/* Scan the QR section: QR card and jar card are the same size; the jar changes every few seconds */
.trace-ad__demo { align-items: stretch; }
.trace-ad__demo > .trace-ad__card { flex: 1 1 0; width: 0; min-width: 0; max-width: 260px; }
.trace-ad__card--jar { text-decoration: none; color: inherit; }
.trace-ad__stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 6px; border-radius: 14px; background: #fff; overflow: hidden; }
.trace-ad__stage img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; transition: opacity .35s ease, transform .35s ease; }
.trace-ad__card--jar.is-swapping .trace-ad__stage img { opacity: 0; transform: scale(.94); }
.trace-ad__card--jar strong { transition: opacity .35s ease; } .trace-ad__card--jar.is-swapping strong { opacity: 0; }
@media (max-width: 560px) { .trace-ad__demo { flex-direction: row; } }
@media (max-width: 600px) { .trace-ad__demo { align-items: stretch; } .trace-ad__demo > .trace-ad__card { max-width: 170px; } .trace-ad__stage { padding: 3px; } }

/* RUBIS county card: Kenyan look (flag stripes on top, Maasai shield and spears watermark, Karibu greeting) */
.locator__panel .county-detail { position: relative; overflow: hidden; padding-top: 34px; background-color: #fbfdf5; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170'><g opacity='.16'><g stroke='%23111' stroke-width='3' stroke-linecap='round'><line x1='12' y1='158' x2='88' y2='10'/><line x1='88' y1='158' x2='12' y2='10'/></g><g fill='%23111'><path d='M88 10l-8 18 12-6z'/><path d='M12 10l8 18-12-6z'/></g><ellipse cx='50' cy='88' rx='30' ry='56' fill='%23bb0000' stroke='%23111' stroke-width='4'/><ellipse cx='50' cy='88' rx='9' ry='46' fill='%23fff'/><ellipse cx='50' cy='88' rx='3.5' ry='38' fill='%23111'/><g fill='%23fff'><circle cx='30' cy='60' r='2.5'/><circle cx='70' cy='60' r='2.5'/><circle cx='28' cy='88' r='2.5'/><circle cx='72' cy='88' r='2.5'/><circle cx='30' cy='116' r='2.5'/><circle cx='70' cy='116' r='2.5'/></g></g></svg>"), linear-gradient(180deg, #fff, #f1f6e2); background-repeat: no-repeat; background-position: right 14px bottom 8px, 0 0; background-size: 92px auto, 100% 100%; }
.locator__panel .county-detail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: linear-gradient(180deg, #111 0 4px, #fff 4px 5px, #bb0000 5px 10px, #fff 10px 11px, #006600 11px 15px); }
.locator__panel .county-detail::after { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: rgba(0,0,0,.08); }
.locator__panel .county-detail > * { position: relative; z-index: 1; }
.county-detail__placeholder { gap: 16px; }
.county-detail__flag { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #006600, 0 6px 14px rgba(0,0,0,.2); }
.county-detail__placeholder span { display: block; max-width: 30ch; line-height: 1.45; color: var(--ink-soft); }
.county-detail__placeholder b { display: block; margin-bottom: 2px; font-size: 1.25rem; letter-spacing: .02em; color: #bb0000; }
@media (max-width: 600px) { .locator__panel .county-detail { padding-top: 28px; background-size: 64px auto, 100% 100%; background-position: right 8px bottom 4px, 0 0; } .locator__panel .county-detail::before { height: 12px; background: linear-gradient(180deg, #111 0 3px, #fff 3px 4px, #bb0000 4px 8px, #fff 8px 9px, #006600 9px 12px); } .locator__panel .county-detail::after { top: 12px; } .county-detail__flag { width: 44px; height: 44px; } .county-detail__placeholder { gap: 12px; } .county-detail__placeholder b { font-size: 1.1rem; } .county-detail__placeholder span { font-size: .88rem; } }

/* Kenya map: flag colours (green land, red selection, white borders, black outline), neighbours, ocean, lake and Nairobi star */
svg.county-map { overflow: visible; }
.county-map__land { filter: drop-shadow(0 0 .7px #111) drop-shadow(0 0 .7px #111) drop-shadow(0 7px 8px rgba(0,0,0,.2)); }
.county-map__path { stroke-width: 1.3; }
.county-map__path--live { fill: #2c8a41; }
.county-map__path--soon { fill: #efe6cf; }
.county-map__path.is-selected { fill: #bb0000; }
.county-dot--live { background: #2c8a41; } .county-dot--soon { background: #efe6cf; box-shadow: inset 0 0 0 1px #cfc3a2; }
.county-map__nb { font: 700 9.5px/1 system-ui, sans-serif; letter-spacing: .12em; fill: #9a9a86; }
.county-map__water { font: italic 600 10.5px/1 Georgia, serif; fill: #3a88bd; letter-spacing: .03em; }
.county-map__star { fill: #f7c948; stroke: #111; stroke-width: 1; stroke-linejoin: round; }
.county-map__capital { font: 800 10.5px/1 system-ui, sans-serif; fill: #111; stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.locator__map { overflow: hidden; padding-top: 30px; }
.locator__map::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; background: linear-gradient(180deg, #111 0 4px, #fff 4px 5px, #bb0000 5px 10px, #fff 10px 11px, #006600 11px 15px); z-index: 3; }
.locator__pill { top: 28px; }
@media (max-width: 600px) { .locator__map { padding-top: 24px; } .locator__map::before { height: 12px; background: linear-gradient(180deg, #111 0 3px, #fff 3px 4px, #bb0000 4px 8px, #fff 8px 9px, #006600 9px 12px); } .locator__pill { top: 20px; } .county-map__nb { font-size: 11px; } .county-map__water { font-size: 12px; } .county-map__capital { font-size: 12px; } }

/* County card, professional layout: name + Live badge, store list, detail panel with address / phone / products */
.locator__panel .county-detail.has-cd { background-image: none; background: linear-gradient(180deg, #fff, #f6f9ee); padding-bottom: 18px; }
.cd { text-align: left; }
.cd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cd__label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a8f7e; }
.county-detail .cd h4 { margin: 2px 0 0; font-size: 1.55rem; line-height: 1.12; color: #1f2d12; }
.cd__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.cd__live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #e3f3e1; color: #0b5d1e; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cd__live i { width: 8px; height: 8px; border-radius: 50%; background: #1fa046; animation: cdPulse 2s ease-out infinite; }
@keyframes cdPulse { 0% { box-shadow: 0 0 0 0 rgba(31,160,70,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31,160,70,0); } }
.cd__count { font-size: .78rem; color: var(--ink-soft); }
.cd__soon { display: inline-block; padding: 4px 11px; border-radius: 999px; background: #f6ecd2; color: #7a5a10; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.county-detail .cd__note { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.cd__cta { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; font-size: .86rem; text-decoration: none; }
.cd__cta:hover { background: var(--green-dark); }
.cd__list { display: grid; gap: 8px; margin-bottom: 14px; }
.cd__store { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--border); background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.cd__store:hover { border-color: #2c8a41; }
.cd__store.is-selected { border-color: #2c8a41; background: #f4faea; box-shadow: 0 0 0 3px rgba(44,138,65,.13); }
.cd__sicon { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eaf2d8; color: #2c8a41; }
.cd__store.is-selected .cd__sicon { background: #2c8a41; color: #fff; }
.cd__sname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd__sname b { font-size: .95rem; color: #1f2d12; }
.cd__sname small { font-size: .76rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd__chev { flex: 0 0 auto; color: #9aa38a; display: inline-flex; transition: transform .15s ease; }
.cd__store.is-selected .cd__chev { color: #2c8a41; transform: rotate(90deg); }
.cd__info { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(30,45,15,.07); }
.cd__info[hidden] { display: none; }
.county-detail .cd__info h5 { margin: 0 0 10px; font-size: 1.08rem; color: #1f2d12; }
.cd__facts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.cd__facts li { display: flex; align-items: center; gap: 10px; }
.cd__ficon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #f3f6ea; color: #2c8a41; }
.cd__ftext { min-width: 0; display: flex; flex-direction: column; font-size: .88rem; line-height: 1.3; color: #1f2d12; }
.cd__ftext small { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8f7e; }
.cd__act { margin-left: auto; flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; background: #2c8a41; border: 1px solid #2c8a41; color: #fff; font-size: .76rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cd__act--ghost { background: #fff; color: #2c8a41; border-color: #b7d27a; }
.cd__act:hover { filter: brightness(.94); }
.cd__prods { padding-top: 12px; border-top: 1px dashed var(--border); }
.county-detail .cd__prods h6 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a8f7e; }
.cd__prods h6 em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: #2c8a41; color: #fff; letter-spacing: 0; }
.cd__group { margin-top: 8px; }
.cd__gname { font-size: .8rem; font-weight: 800; color: #bb0000; }
.cd__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cd__chip { padding: 4px 10px; border-radius: 999px; background: #f3f8e4; border: 1px solid #d5e5b0; font-size: .76rem; line-height: 1.3; color: #2a3a14; }
@media (max-width: 600px) {
  .county-detail .cd h4 { font-size: 1.3rem; }
  .cd__store { padding: 8px 10px; gap: 10px; } .cd__sicon { width: 32px; height: 32px; }
  .cd__info { padding: 11px; } .cd__facts li { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; row-gap: 6px; align-items: center; } .cd__facts .cd__act { grid-column: 2; justify-self: start; margin: 0; } .cd__ftext { font-size: .84rem; }
  .cd__chip { font-size: .72rem; padding: 3px 9px; }
}
@media (prefers-reduced-motion: reduce) { .cd__live i { animation: none; } }

/* Contact page: contact cards on the left, form card on the right */
.contactpage { background: linear-gradient(180deg, #f4f7ea, #fff 70%); }
.contactpage__grid { gap: 48px; align-items: start; }
.contactpage__info h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.25; margin: 10px 0 22px; }
.ccards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ccard { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(30,45,15,.08); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,45,15,.14); }
.ccard__icon { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(145deg, #eaf3d6, #d6e9b0); color: var(--green-dark); }
.ccard h4 { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a8f7e; }
.ccard p { margin: 0 0 2px; font-size: .95rem; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.ccard p b { color: var(--green-dark); }
.ccard a { text-decoration: none; font-weight: 600; } .ccard a:hover { color: var(--green); text-decoration: underline; }
.ccard--wa { background: linear-gradient(145deg, #25d366, #128c4a); border-color: transparent; }
.ccard--wa .ccard__icon { background: rgba(255,255,255,.2); color: #fff; }
.ccard--wa h4 { color: rgba(255,255,255,.8); } .ccard--wa p { color: #fff; font-weight: 700; }
.contact-form--card { position: relative; gap: 16px; padding: 30px 28px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--border); box-shadow: 0 22px 56px rgba(30,45,15,.14); overflow: hidden; }
.contact-form--card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, #5e8f2a, #9bd44a, #e6bf58); }
.cform__head h3 { margin: 4px 0 4px; font-size: 1.45rem; color: var(--green-dark); }
.cform__head p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.contact-form--card label { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #3a4630; }
.contact-form--card input, .contact-form--card select, .contact-form--card textarea { margin-top: 6px; padding: 12px 14px; border: 1.5px solid #dfe6d0; border-radius: 12px; background: #f9fbf4; font-size: .95rem; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.contact-form--card input:focus, .contact-form--card select:focus, .contact-form--card textarea:focus { outline: none; background: #fff; border-color: var(--green); box-shadow: 0 0 0 4px rgba(94,143,42,.16); }
.contact-form--card textarea { min-height: 120px; }
.contact-form--card .cform__btn { align-self: stretch; justify-content: center; padding: 14px 22px; border-radius: 14px; font-size: 1rem; box-shadow: 0 10px 22px rgba(60,100,20,.28); }
@media (max-width: 860px) { .contactpage__grid { gap: 26px; } }
@media (max-width: 600px) {
  .ccards { grid-template-columns: 1fr; gap: 9px; }
  .ccard { padding: 11px 12px; gap: 11px; border-radius: 14px; } .ccard__icon { width: 40px; height: 40px; border-radius: 12px; } .ccard p { font-size: .9rem; }
  .contactpage__info h2 { margin: 8px 0 14px; }
  .contact-form--card { padding: 22px 16px 18px; border-radius: 18px; gap: 12px; } .cform__head h3 { font-size: 1.2rem; } .cform__head p { font-size: .84rem; }
}

/* Cashew Pure Range: four raw grades (W320, SK1, W240, W180) */
.card__img--photo { position: relative; height: 170px; overflow: hidden; background-image: linear-gradient(180deg, rgba(20,30,8,0) 55%, rgba(20,30,8,.35)), url("../assets/nuts/cashew-2.jpg"); background-size: auto, 190%; background-repeat: no-repeat; }
.card__img--photo::after { content: none; }
.grade-badge { position: absolute; left: 10px; top: 10px; padding: 4px 11px; border-radius: 999px; background: #fff; color: var(--green-dark); font-size: .8rem; font-weight: 800; letter-spacing: .03em; box-shadow: 0 3px 9px rgba(0,0,0,.2); }
.card--grade h3 { color: var(--green-dark); }
.grade-note { max-width: 640px; margin: 18px auto 0; padding: 11px 16px; border-radius: 14px; background: #f3f8e4; border: 1px dashed #b7d27a; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.grade-note b { color: var(--green-dark); }
@media (max-width: 600px) { .card__img--photo { height: 120px; } .grade-badge { left: 7px; top: 7px; padding: 3px 9px; font-size: .8rem; } .grade-note { margin-top: 12px; padding: 9px 12px; font-size: .78rem; } }
@media (max-width: 600px) {
  .grid--4:has(.card--grade) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card--grade { padding: 10px; }
  .card--grade h3 { font-size: .98rem; margin-bottom: 3px; }
  .card--grade .card__desc { font-size: .78rem; line-height: 1.35; margin-bottom: 8px; }
  .card--grade .card__img--photo { height: 96px; margin-bottom: 9px; }
  .card--grade .card__actions .btn { width: 100%; justify-content: center; padding: 8px 10px; font-size: .82rem; }
}

/* Cashew grades: spec lines on the cards and the full grade specification table */
.grade-spec { margin: 0 0 14px; display: grid; gap: 6px; }
.grade-spec div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 10px; background: #f3f8e4; }
.grade-spec dt { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a8068; }
.grade-spec dd { margin: 0; font-size: .9rem; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
@media (max-width: 600px) {
  .card--grade .grade-spec div { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; }
  .card--grade .grade-spec dd { text-align: left; font-size: .8rem; }
}

/* Cashew grade cards: each picture changes by itself (three raw cashew photos fade into each other) */
.card__img--show { background-image: none; background-color: #efe6cf; }
.card__img--show i { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: gfade 12s linear infinite; animation-delay: calc(var(--k, 0) * 4s - var(--o, 0s)); will-change: opacity, transform; }
.card__img--show i:nth-of-type(2) { --k: 1; } .card__img--show i:nth-of-type(3) { --k: 2; }
.card__img--show::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,30,8,0) 55%, rgba(20,30,8,.3)); pointer-events: none; }
.card__img--show .grade-badge { z-index: 2; }
@keyframes gfade { 0% { opacity: 0; transform: scale(1); } 4% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; transform: scale(1.09); } 100% { opacity: 0; transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .card__img--show i { animation: none; } .card__img--show i:nth-of-type(1) { opacity: 1; } }

/* Cashew grades: nine cards in one tidy grid */
.grid--grades { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grade-spec .grade-spec__wrap dd { white-space: normal; }
@media (max-width: 600px) { .grid--grades { grid-template-columns: 1fr 1fr; } }

/* Cashew grades that are available now */
.avail-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #1f9d4a; color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.avail-badge i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: availPulse 2s ease-out infinite; }
@keyframes availPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.card--avail { border-color: #1f9d4a; box-shadow: 0 0 0 2px rgba(31,157,74,.18), 0 10px 26px rgba(30,45,15,.1); }
@media (prefers-reduced-motion: reduce) { .avail-badge i { animation: none; } }
@media (max-width: 600px) { .avail-badge { left: 6px; bottom: 6px; padding: 3px 8px; font-size: .62rem; gap: 5px; } .avail-badge i { width: 6px; height: 6px; } .card--grade .grade-badge { font-size: .68rem; padding: 3px 9px; } }

/* Range buttons (Pure / Classic / Gourmet / Indulge): clean white cards with a colour accent, numbered, quiet hover; the range you are reading is shown with a tinted card */
.range-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 22px 0; }
.range-nav__row { max-width: 1040px; margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; counter-reset: rng; }
.range-chip { --rc: #5e8f2a; --rt: #1f2d12; --rtint: #f5f9ec; counter-increment: rng; position: relative; display: grid; grid-template-columns: 1fr 22px; grid-template-areas: "n go" "t go" "s go"; column-gap: 10px; row-gap: 1px; align-items: center; justify-items: start; padding: 13px 16px 14px 20px; border-radius: 10px; border: 1px solid #dde3d0; background: #fff; box-shadow: 0 1px 2px rgba(20,30,10,.06); text-align: left; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; }
.range-chip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rc); }
.range-chip::after { content: ""; grid-area: go; width: 8px; height: 8px; border-top: 2px solid #9aa38a; border-right: 2px solid #9aa38a; transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease; }
.range-chip b { grid-area: t; font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: var(--rt); letter-spacing: .01em; }
.range-chip b::before { content: "0" counter(rng); display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 800; letter-spacing: .16em; color: var(--rc); }
.range-chip span { grid-area: s; font-size: .8rem; color: #6a7260; }
.range-chip:hover { border-color: var(--rc); box-shadow: 0 6px 16px rgba(20,30,10,.1); transform: translateY(-1px); }
.range-chip:hover::after { border-color: var(--rc); transform: translateX(3px) rotate(45deg); }
.range-chip.is-active { border-color: var(--rc); background: var(--rtint); box-shadow: 0 6px 16px rgba(20,30,10,.1); }
.range-chip.is-active::after { border-color: var(--rc); }
.range-chip--pure { --rc: #5e8f2a; --rtint: #f3f8e8; }
.range-chip--classic { --rc: #b9831a; --rtint: #fbf5e6; }
.range-chip--gourmet { --rc: #b8662a; --rtint: #fbf0e7; }
.range-chip--indulge { --rc: #6b4437; --rtint: #f6eeeb; }
.range-chip--butters { --rc: #8f7a3c; --rtint: #f8f4e6; }
@media (prefers-reduced-motion: reduce) { .range-chip, .range-chip::after { transition: none; } .range-chip:hover { transform: none; } }
@media (max-width: 600px) {
  .range-nav { padding: 8px 0 10px; }
  .range-nav__row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .range-chip { grid-template-columns: 1fr; grid-template-areas: "t" "s"; row-gap: 0; padding: 6px 8px 7px 11px; border-radius: 7px; }
  .range-chip::before { width: 3px; }
  .range-chip::after { display: none; }
  .range-chip b { font-size: .88rem; } .range-chip b::before { display: inline; margin: 0 6px 0 0; font-size: .58rem; vertical-align: 1px; } .range-chip span { font-size: .64rem; }
}

/* Classic Range: "Fire roasted" shown as a flame badge on the picture */
.fire-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: linear-gradient(135deg, #e8590c, #f08c00); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.fire-badge svg { flex: 0 0 auto; filter: drop-shadow(0 0 3px rgba(255,220,120,.9)); }
@media (max-width: 600px) { .fire-badge { left: 6px; bottom: 6px; padding: 3px 9px 3px 7px; font-size: .62rem; gap: 4px; } .fire-badge svg { width: 11px; height: 11px; } }

/* Gourmet Range: "Caramelised" shown as a caramel badge on the picture */
.caramel-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: linear-gradient(135deg, #a8561c, #d98a2b); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
@media (max-width: 600px) { .caramel-badge { left: 6px; bottom: 6px; padding: 3px 9px 3px 7px; font-size: .62rem; gap: 4px; } .caramel-badge svg { width: 11px; height: 11px; } }
/* Traceable badge on the grade/flavour cards sits at the top right of the picture, so it never covers the flavour badge */
.card--grade .trace-badge { left: auto; right: 20px; top: 20px; }
@media (max-width: 600px) { .card--grade .trace-badge { left: auto; right: 15px; top: 15px; } }

/* Range headings: each range has its own colour (tag, short bar under the title, description in a coloured box) so Pure, Classic, Gourmet and Indulge are easy to tell apart */
section#pure .section__head, section#classic .section__head, section#gourmet .section__head, section#indulge .section__head { --rc: #5e8f2a; --rt: #3f6a1b; --rtint: #f3f8e8; }
section#classic .section__head { --rc: #b9831a; --rt: #7d5206; --rtint: #fbf5e6; }
section#gourmet .section__head { --rc: #b8662a; --rt: #7e3f12; --rtint: #fbf0e7; }
section#indulge .section__head { --rc: #6b4437; --rt: #4d2d22; --rtint: #f6eeeb; }
section#pure .section__head .tag, section#classic .section__head .tag, section#gourmet .section__head .tag, section#indulge .section__head .tag { background: var(--rtint); color: var(--rt); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
section#pure .section__head h2::after, section#classic .section__head h2::after, section#gourmet .section__head h2::after, section#indulge .section__head h2::after { content: ""; display: block; width: 64px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: var(--rc); }
section#pure .section__head p, section#classic .section__head p, section#gourmet .section__head p, section#indulge .section__head p { display: inline-block; max-width: 640px; margin: 14px auto 0; padding: 9px 20px; border-radius: 999px; background: var(--rtint); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); color: var(--rt); font-size: 1.02rem; font-weight: 700; line-height: 1.4; }
@media (max-width: 600px) {
  section#pure .section__head h2::after, section#classic .section__head h2::after, section#gourmet .section__head h2::after, section#indulge .section__head h2::after { width: 48px; height: 3px; margin-top: 6px; }
  section#pure .section__head p, section#classic .section__head p, section#gourmet .section__head p, section#indulge .section__head p { margin-top: 10px; padding: 7px 14px; border-radius: 14px; font-size: .86rem; }
}

/* Picture badges (Fire roasted, Caramelised, Available): a little smaller */
.fire-badge, .caramel-badge, .avail-badge { left: 9px; bottom: 9px; padding: 3px 10px 3px 8px; gap: 5px; font-size: .62rem; letter-spacing: .05em; box-shadow: 0 3px 9px rgba(0,0,0,.26); }
.fire-badge svg, .caramel-badge svg { width: 11px; height: 11px; }
.avail-badge i { width: 6px; height: 6px; }
@media (max-width: 600px) { .fire-badge, .caramel-badge, .avail-badge { left: 6px; bottom: 6px; padding: 2px 8px 2px 6px; font-size: .56rem; gap: 4px; } .fire-badge svg, .caramel-badge svg { width: 9px; height: 9px; } .avail-badge i { width: 5px; height: 5px; } }

/* Indulge Range: "Compound coated" shown as a chocolate badge on the picture */
.choc-badge { position: absolute; left: 9px; bottom: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #4d2d22, #7a4a38); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 3px 9px rgba(0,0,0,.28); }
@media (max-width: 600px) { .choc-badge { left: 6px; bottom: 6px; padding: 2px 8px 2px 6px; font-size: .56rem; gap: 4px; } .choc-badge svg { width: 9px; height: 9px; } }

/* Flavour / grade name on the picture (Plain, Cayenne Lemon, WW320 ...): smaller */
.card--grade .grade-badge { left: 9px; top: 9px; padding: 2px 9px; font-size: .66rem; letter-spacing: .03em; box-shadow: 0 2px 7px rgba(0,0,0,.2); }
@media (max-width: 600px) { .card--grade .grade-badge { left: 6px; top: 6px; padding: 2px 7px; font-size: .58rem; } }

/* "Fire roasted" badge: red */
.fire-badge { background: linear-gradient(135deg, #b3141b, #e02f2f); }
.fire-badge svg { filter: drop-shadow(0 0 3px rgba(255,170,150,.9)); }

/* Range buttons: a little bolder (heavier names, thicker colour bar and border) */
.range-chip { border-width: 1.5px; border-color: color-mix(in srgb, var(--rc) 35%, #dde3d0); box-shadow: 0 2px 6px rgba(20,30,10,.1); }
.range-chip::before { width: 6px; }
.range-chip b { font-weight: 800; font-size: 1.18rem; color: #14210a; }
.range-chip b::before { font-weight: 900; font-size: .72rem; }
.range-chip span { font-weight: 600; color: #4f573f; }
.range-chip::after { border-width: 3px; border-color: var(--rc); }
@media (max-width: 600px) { .range-chip::before { width: 5px; } .range-chip b { font-size: .95rem; } .range-chip b::before { font-size: .6rem; } }

/* Picture badges (Fire roasted, Caramelised, Chocolate coated, Available): smaller again */
.fire-badge, .caramel-badge, .choc-badge, .avail-badge { left: 8px; bottom: 8px; padding: 2px 8px 2px 6px; gap: 4px; font-size: .55rem; letter-spacing: .05em; }
.fire-badge svg, .caramel-badge svg, .choc-badge svg { width: 9px; height: 9px; }
.avail-badge i { width: 5px; height: 5px; }
@media (max-width: 600px) { .fire-badge, .caramel-badge, .choc-badge, .avail-badge { left: 5px; bottom: 5px; padding: 2px 6px 2px 5px; font-size: .5rem; gap: 3px; } .fire-badge svg, .caramel-badge svg, .choc-badge svg { width: 8px; height: 8px; } .avail-badge i { width: 4px; height: 4px; } }

/* Origin with the country flag on the product cards */
.flag-sm { display: inline-block; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; vertical-align: -4px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); object-fit: cover; }
.grade-spec .grade-spec__origin dd { display: flex; align-items: center; }
.grade-spec .grade-spec__origin .flag-sm { flex: 0 0 auto; }
@media (max-width: 600px) { .flag-sm { width: 15px; height: 15px; margin-right: 6px; } }

/* Contact page: tidier cards (WhatsApp and address full width, email never breaks, map link) */
.contactpage__info h2 { position: relative; padding-bottom: 14px; }
.contactpage__info h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #5e8f2a, #e6bf58); }
.ccard a[href^="mailto"] { white-space: nowrap; }
.ccard p { overflow-wrap: break-word; }
.ccard--wa, .ccard--visit { grid-column: 1 / -1; }
.ccard--wa { align-items: center; padding: 18px 20px; }
.ccard--wa .ccard__icon { width: 54px; height: 54px; border-radius: 16px; }
.ccard--wa p { font-size: 1.05rem; }
.ccard__go { margin-left: auto; flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; background: #fff; color: #0f7a3d; font-weight: 800; font-size: .88rem; white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.ccard--wa:hover .ccard__go { background: #fffbe8; }
.ccard--visit .ccard__map { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid #b7d27a; background: #f3f8e4; color: var(--green-dark); font-size: .82rem; font-weight: 700; text-decoration: none; }
.ccard--visit .ccard__map:hover { background: #e8f2cf; text-decoration: none; }
@media (max-width: 600px) { .ccard--wa { padding: 13px 14px; } .ccard--wa .ccard__icon { width: 44px; height: 44px; } .ccard__go { padding: 7px 12px; font-size: .78rem; } .ccard--wa p { font-size: .92rem; } .ccard a[href^="mailto"] { font-size: .9rem; } }

/* Made in Kenya logo centred above a section heading */
.mik--head { float: none; display: block; width: 64px; margin: 0 auto 12px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
@media (max-width: 600px) { .mik--head { width: 52px; margin-bottom: 8px; } }

/* Made in Kenya logo in the footer (all pages) */
.footer__brand .mik--footer { float: none; display: block; width: 58px; height: auto; margin: 14px 0 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
@media (max-width: 600px) { .footer__brand .mik--footer { width: 50px; margin-top: 10px; } }

/* Gourmet peanut cards: the real Pure Nutritions pack picture (from Odoo) instead of a stock photo */
.card__img--pack { background-color: #fff; border: 1px solid #ecece4; }
.card__img--pack::before { display: none; }
.card__img--pack i { background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 1 !important; animation: none !important; transform: none !important; }
.card__img--photo.card__img--pack { height: 250px; }
@media (max-width: 600px) { .card--grade .card__img--photo.card__img--pack { height: 200px; } }

/* Add to cart button (gold) on the product cards */
.btn--cart { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(135deg, #e6bf58, #f5d878); color: #3a2a05; border: 0; font-weight: 800; box-shadow: 0 6px 14px rgba(150,110,10,.28); }
.btn--cart:hover { filter: brightness(.96); }
.card--grade .card__actions .btn--cart { width: 100%; }

/* Made in Kenya logo in the corner of a range section */
.container--mik { position: relative; }
.mik--corner { position: absolute; top: -52px; right: 20px; float: none; width: 72px; height: auto; margin: 0; z-index: 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,.15)); }
@media (max-width: 600px) { .mik--corner { width: 46px; top: -56px; right: 14px; } }

/* Phone: grade / flavour cards more compact */
@media (max-width: 600px) {
  .grid--4:has(.card--grade), .grid--grades { gap: 8px; }
  .card--grade { padding: 8px; border-radius: 14px; }
  .card--grade h3 { font-size: .86rem; line-height: 1.2; margin: 0 0 5px; }
  .card--grade .card__img--photo { height: 84px; margin-bottom: 6px; }
  .card--grade .card__img--photo.card__img--pack { height: 150px; }
  .card--grade .grade-spec { gap: 4px; margin-bottom: 8px; }
  .card--grade .grade-spec div { padding: 3px 7px; border-radius: 8px; }
  .card--grade .grade-spec dt { font-size: .54rem; letter-spacing: .06em; }
  .card--grade .grade-spec dd { font-size: .72rem; }
  .card--grade .card__actions { gap: 5px; }
  .card--grade .card__actions .btn { padding: 5px 8px; font-size: .72rem; line-height: 1.2; min-height: 0; }
  .card--grade .btn--cart svg { width: 12px; height: 12px; }
  .card--grade .btn--cart { gap: 5px; }
  .card--grade .flag-sm { width: 14px; height: 14px; }
}

/* Desktop: smaller Origin / Pack size boxes on the grade cards */
@media (min-width: 601px) {
  .card--grade .grade-spec { gap: 5px; margin-bottom: 10px; }
  .card--grade .grade-spec div { padding: 4px 10px; border-radius: 9px; gap: 0; }
  .card--grade .grade-spec dt { font-size: .58rem; letter-spacing: .07em; }
  .card--grade .grade-spec dd { font-size: .78rem; }
  .card--grade .flag-sm { width: 16px; height: 16px; }
}

/* Price line on the grade cards */
.card--grade .card__price { font-size: 1.05rem; margin: 0 0 8px; color: var(--green-dark); }
.card--grade .card__price small { font-size: .7rem; font-weight: 600; color: #7a8068; }
@media (max-width: 600px) { .card--grade .card__price { font-size: .9rem; margin-bottom: 6px; } .card--grade .card__price small { font-size: .6rem; } }

/* Desktop / tablet: Origin and Pack size rows on one line (label left, value right) */
@media (min-width: 601px) {
  .card--grade .grade-spec { gap: 4px; margin-bottom: 8px; }
  .card--grade .grade-spec div { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 9px; border-radius: 8px; }
  .card--grade .grade-spec dt { font-size: .54rem; }
  .card--grade .grade-spec dd { font-size: .74rem; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
  .card--grade .flag-sm { width: 14px; height: 14px; }
}

/* Cart: product picture when the item has one */
.drawer__item-img--photo { background: #fff; border: 1px solid #ecece4; padding: 3px; overflow: hidden; }
.drawer__item-img--photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Home: the man behind Pure Nutritions */
.founder { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.founder__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; border-radius: 16px; display: block; }
.founder__body h2 { margin: 10px 0 2px; font-size: 1.9rem; }
.founder__role { margin: 0 0 12px; font-weight: 700; color: var(--green-dark); font-size: .95rem; }
.founder__body p { margin: 0 0 10px; line-height: 1.55; color: var(--ink-soft); }
.founder__body .btn { margin-top: 6px; }
@media (max-width: 600px) {
  .founder { grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; border-radius: 16px; align-items: start; }
  .founder__photo { border-radius: 12px; }
  .founder__body h2 { font-size: 1.2rem; margin-top: 6px; }
  .founder__role { font-size: .74rem; margin-bottom: 8px; }
  .founder__body p { font-size: .82rem; margin-bottom: 8px; }
  .founder__body .tag { font-size: .62rem; }
  .founder__body > p:nth-of-type(2), .founder__body > p:nth-of-type(3) { grid-column: 1 / -1; }
}

.founder__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.founder__chips span { padding: 5px 14px; border-radius: 999px; background: var(--green-dark); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .03em; }
@media (max-width: 600px) { .founder__chips { gap: 5px; margin-bottom: 8px; } .founder__chips span { padding: 3px 10px; font-size: .66rem; } }

.founder__chips a.founder__chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, #e6bf58, #f5d878); color: #3a2a05; font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-decoration: none; box-shadow: 0 5px 12px rgba(150,110,10,.28); transition: transform .15s ease, filter .15s ease; }
.founder__chips a.founder__chip-btn span { background: none; padding: 0; color: inherit; font-size: 1.05em; letter-spacing: 0; }
.founder__chips a.founder__chip-btn:hover { transform: translateY(-1px); filter: brightness(.96); }
@media (max-width: 600px) { .founder__chips a.founder__chip-btn { padding: 3px 10px; font-size: .66rem; gap: 4px; } }

/* Home: founder section, more professional */
.founder--pro { position: relative; grid-template-columns: 300px 1fr; gap: 38px; max-width: 920px; padding: 30px; border: 0; border-radius: 22px; box-shadow: 0 18px 44px rgba(40,55,20,.14); background: #fff; overflow: hidden; }
.founder--pro::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--green-dark), #e6bf58, var(--green-dark)); }
.founder__media { position: relative; }
.founder--pro .founder__photo { border-radius: 18px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #e6bf58, 0 14px 30px rgba(0,0,0,.2); aspect-ratio: 4 / 5; object-position: center 15%; }
.founder__badge { position: absolute; left: 14px; bottom: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(35,55,15,.88); color: #f5d878; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.founder--pro .founder__body h2 { font-size: 2.2rem; letter-spacing: -.01em; margin: 12px 0 4px; }
.founder--pro .founder__role { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid #efe3b8; }
.founder--pro .founder__chips { margin-bottom: 16px; }
.founder__lead { padding-left: 14px; border-left: 3px solid #e6bf58; color: var(--ink) !important; font-weight: 500; }
.founder__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.founder__stats > div { text-align: center; padding: 12px 8px; border-radius: 14px; background: #f3f8e4; border: 1px solid #dfe9c6; }
.founder__stats b { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--green-dark); }
.founder__stats span { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a8068; }
.founder__actions .btn { margin-top: 0; padding-left: 26px; padding-right: 26px; }
@media (max-width: 760px) { .founder--pro { grid-template-columns: 220px 1fr; gap: 24px; } .founder--pro .founder__body h2 { font-size: 1.8rem; } }
@media (max-width: 600px) {
  .founder--pro { grid-template-columns: 92px 1fr; gap: 4px 14px; padding: 18px 14px 14px; border-radius: 18px; align-items: start; }
  .founder--pro .founder__body { display: contents; }
  .founder--pro .founder__media { grid-column: 1; grid-row: 1 / span 5; }
  .founder--pro .founder__photo { aspect-ratio: 1 / 1; border-radius: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e6bf58, 0 8px 16px rgba(0,0,0,.18); }
  .founder__badge { left: 6px; bottom: 6px; padding: 2px 8px; font-size: .52rem; letter-spacing: .08em; }
  .founder--pro .tag, .founder--pro h2, .founder--pro .founder__role, .founder--pro .founder__chips { grid-column: 2; }
  .founder--pro .founder__body h2 { font-size: 1.15rem; margin: 2px 0 0; }
  .founder--pro .founder__role { font-size: .72rem; padding-bottom: 8px; margin-bottom: 8px; }
  .founder--pro .founder__lead, .founder--pro .founder__body > p:not(.founder__role), .founder__stats, .founder__actions { grid-column: 1 / -1; }
  .founder--pro .founder__body > p:not(.founder__role) { font-size: .82rem; margin: 10px 0 0; }
  .founder__lead { margin-top: 14px !important; }
  .founder__stats { gap: 6px; margin: 12px 0; }
  .founder__stats > div { padding: 8px 4px; border-radius: 10px; }
  .founder__stats b { font-size: 1rem; }
  .founder__stats span { font-size: .55rem; letter-spacing: .02em; }
  .founder__actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) { .founder--pro .tag { justify-self: start; } }

.founder__flags { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.founder__flags img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18); display: block; }
.founder__stats b .founder__flag-in { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: -4px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
@media (max-width: 600px) { .founder__flags { gap: 4px; margin-left: 4px; } .founder__flags img { width: 16px; height: 16px; } .founder__stats b .founder__flag-in { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; } }

/* Farmers page: Our Sourcing Promise, more professional */
.promise__grid { gap: 20px; }
.promise__card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 34px 22px 26px; text-align: center; box-shadow: 0 10px 28px rgba(40,55,20,.08); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.promise__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--green-dark), #e6bf58); }
.promise__card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(40,55,20,.16); }
.promise__num { position: absolute; top: 14px; right: 18px; font-size: .95rem; font-weight: 800; letter-spacing: .08em; color: #d9c98a; }
.promise__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 16px; border-radius: 50%; background: linear-gradient(145deg, #5f7f1f, #3d5a10); color: #fff; box-shadow: 0 0 0 5px #eef4d8, 0 10px 20px rgba(60,90,15,.28); }
.promise__icon svg { width: 32px; height: 32px; }
.promise__icon--logo { background: #fff; border: 1px solid #e3e8d6; box-shadow: 0 0 0 5px #eef4d8, 0 10px 20px rgba(60,90,15,.18); }
.promise__icon--logo img { width: 52px; height: auto; display: block; }
.promise__card h3 { margin: 4px 0 8px; font-size: 1.15rem; color: var(--green-dark); }
.promise__card p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: .95rem; }
@media (max-width: 600px) {
  .promise__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .promise__card { padding: 24px 12px 16px; border-radius: 16px; }
  .promise__num { top: 9px; right: 11px; font-size: .72rem; }
  .promise__icon { width: 52px; height: 52px; margin-bottom: 10px; box-shadow: 0 0 0 3px #eef4d8, 0 6px 12px rgba(60,90,15,.25); }
  .promise__icon svg { width: 24px; height: 24px; }
  .promise__icon--logo img { width: 38px; }
  .promise__card h3 { font-size: .95rem; margin-bottom: 4px; }
  .promise__card p { font-size: .78rem; line-height: 1.4; }
}

/* Three-card version (Cashew: Why our cashews) */
.promise--3 .promise__grid { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .promise--3 .promise__grid { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 600px) {
  .promise--3 .promise__card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 14px 14px 14px 14px; }
  .promise--3 .promise__icon { grid-row: 1 / span 2; margin: 0; }
  .promise--3 .promise__card h3 { margin: 0 0 2px; font-size: 1rem; padding-right: 22px; }
  .promise--3 .promise__card p { font-size: .8rem; }
}

/* Additional value article */
.av { max-width: 780px; margin: 0 auto; }
.av__byline { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 14px 18px; border-radius: 16px; background: #f3f8e4; border: 1px solid #dfe9c6; }
.av__byline > img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e6bf58; flex: 0 0 auto; }
.av__byline strong { display: block; font-size: 1.1rem; color: var(--green-dark); line-height: 1.2; }
.av__by, .av__from { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a8068; }
.av__flags { margin-left: auto; display: inline-flex; gap: 6px; }
.av__flags img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.18); object-fit: cover; }
.av h2 { margin: 38px 0 12px; font-size: 1.55rem; line-height: 1.25; color: var(--green-dark); padding-left: 14px; border-left: 4px solid #e6bf58; }
.av > p { margin: 0 0 14px; line-height: 1.75; font-size: 1.04rem; color: #3b4033; }
.av__callout { margin: 22px 0; padding: 20px 22px; border-radius: 16px; background: linear-gradient(135deg, #3d5a10, #5f7f1f); color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1.6; box-shadow: 0 12px 28px rgba(60,90,15,.28); }
.av__points { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 14px; }
.av__points li { display: flex; gap: 16px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(40,55,20,.08); position: relative; overflow: hidden; }
.av__points li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--green-dark), #e6bf58); }
.av__n { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #5f7f1f, #3d5a10); color: #fff; font-weight: 800; box-shadow: 0 0 0 4px #eef4d8; }
.av__points h3 { margin: 0 0 4px; font-size: 1.08rem; color: var(--green-dark); }
.av__points p { margin: 0; line-height: 1.65; font-size: .98rem; color: #4a5043; }
.av__quote { margin: 26px 0; padding: 22px 26px; border-radius: 16px; background: #fbf6e2; border-left: 5px solid #e6bf58; font-size: 1.25rem; line-height: 1.55; font-weight: 600; color: #4b3a09; font-style: italic; }
.av__sign { display: flex; gap: 18px; align-items: center; margin: 34px 0 8px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(40,55,20,.1); }
.av__sign > img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e6bf58; flex: 0 0 auto; }
.av__sign strong { display: block; font-size: 1.2rem; color: var(--green-dark); }
.av__sign span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a8068; margin-bottom: 6px; }
.av__sign p { margin: 0; line-height: 1.6; color: #4a5043; }
.av__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 600px) {
  .av__byline { padding: 10px 12px; gap: 10px; margin-bottom: 18px; }
  .av__byline > img { width: 48px; height: 48px; }
  .av__byline strong { font-size: 1rem; }
  .av__flags img { width: 20px; height: 20px; }
  .av h2 { font-size: 1.2rem; margin: 26px 0 10px; padding-left: 10px; border-left-width: 3px; }
  .av > p { font-size: .94rem; line-height: 1.65; }
  .av__callout { font-size: .98rem; padding: 14px 16px; }
  .av__points { gap: 10px; }
  .av__points li { padding: 12px 12px 12px 14px; gap: 10px; }
  .av__n { width: 30px; height: 30px; font-size: .9rem; }
  .av__points h3 { font-size: .98rem; }
  .av__points p { font-size: .88rem; line-height: 1.55; }
  .av__quote { font-size: 1.05rem; padding: 16px 16px; }
  .av__sign { padding: 14px; gap: 12px; }
  .av__sign > img { width: 60px; height: 60px; }
  .av__sign p { font-size: .86rem; }
  .av__actions .btn { flex: 1 1 100%; justify-content: center; }
}

.farmhero--av { background: linear-gradient(120deg, rgba(15,38,14,.66), rgba(40,90,38,.5)), url("../assets/macadamia-farmers.jpg") center 30% / cover no-repeat; padding: 120px 0 96px; }
.farmhero--av h1, .farmhero--av p { text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.farmhero--av p { font-size: 1.15rem; }
@media (max-width: 600px) { .farmhero--av { padding: 84px 0 64px; } .farmhero--av p { font-size: 1rem; } }
.av__teach { display: flex; gap: 16px; align-items: center; margin: 26px 0; padding: 18px 22px; border-radius: 16px; background: #fbf6e2; border: 1px solid #ecd98a; box-shadow: 0 10px 24px rgba(150,110,10,.14); }
.av__teach-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, #e6bf58, #f5d878); color: #3a2a05; box-shadow: 0 0 0 4px #fff3c4; }
.av__teach p { margin: 0; font-size: 1.12rem; line-height: 1.5; font-weight: 600; color: #4b3a09; }
.av__teach strong { display: block; margin-bottom: 3px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6a0e; }
@media (max-width: 600px) { .av__teach { padding: 12px 14px; gap: 12px; } .av__teach-icon { width: 44px; height: 44px; } .av__teach-icon svg { width: 22px; height: 22px; } .av__teach p { font-size: .96rem; } }
.av__teach-sub { display: block; margin-top: 8px; font-size: .95rem; font-weight: 600; color: #6b520c; }
.av__teach-sub b { color: var(--green-dark); }
@media (max-width: 600px) { .av__teach-sub { font-size: .84rem; margin-top: 6px; } }

/* Coffee product pages and cards */
.cof-origin { margin: -6px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a8068; }
.cof-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 18px; }
.cof-facts > div { padding: 10px 14px; border-radius: 12px; background: #f3f8e4; border: 1px solid #dfe9c6; }
.cof-facts span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a8068; }
.cof-facts b { display: block; margin-top: 2px; font-size: 1rem; color: var(--green-dark); }
.coffee-card__price { margin: 2px 0 8px; font-weight: 800; color: var(--green-dark); font-size: 1.05rem; }
.coffee-card__price small { font-size: .72rem; font-weight: 600; color: #7a8068; }
@media (max-width: 600px) { .cof-facts { gap: 8px; margin: 12px 0 14px; } .cof-facts > div { padding: 8px 10px; } .cof-facts b { font-size: .9rem; } }

/* Kombucha: Subscribe button in the buy area */
.product-hero__actions--sub { margin-top: 10px; }
.product-hero__actions--sub .btn { width: 100%; justify-content: center; gap: 10px; }

/* Coffee product pages: coffee look */
.section--coffee { --green: #5a3a22; --green-dark: #2e1b0f; --green-light: #8a5a2b; --lime: #d9b77a; --cream: #efe2c9; --ink: #2a1a10; --ink-soft: #5a4636; --border: #e7d9c0; position: relative; overflow: hidden; background: linear-gradient(180deg, #fcf8f0 0%, #f5ecdb 100%); }
.section--coffee::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232e1b0f' stroke-width='1.6'%3E%3Cellipse cx='32' cy='34' rx='10' ry='16' transform='rotate(35 32 34)'/%3E%3Cpath d='M25 44c7-5 11-13 17-19'/%3E%3Cellipse cx='88' cy='86' rx='10' ry='16' transform='rotate(-30 88 86)'/%3E%3Cpath d='M96 78c-7 4-11 12-16 19'/%3E%3C/g%3E%3C/svg%3E") repeat; opacity: .05; pointer-events: none; }
.section--coffee > .container { position: relative; z-index: 1; }
.section--coffee .breadcrumb, .section--coffee .breadcrumb a { color: #8a6f4e; }
.section--coffee .product-gallery__main { background: linear-gradient(180deg, #f9f1e2, #efe2c9); border: 1px solid #e7d9c0; box-shadow: 0 22px 46px rgba(46, 27, 15, .2); }
.section--coffee .roast-tag { color: #fff; border: 0; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; box-shadow: 0 4px 10px rgba(46, 27, 15, .25); }
.section--coffee .roast-tag--light { background: #c99a52; }
.section--coffee .roast-tag--medium { background: #8a5a2b; }
.section--coffee .roast-tag--dark { background: #3b2412; }
.section--coffee .product-hero__info h1 { letter-spacing: -.01em; }
.section--coffee .cof-origin { color: #8a6f4e; }
.section--coffee .card__price { color: #5a3a22; }
.roast-meter { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.roast-meter span { margin-right: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6f4e; }
.roast-meter i { width: 14px; height: 20px; border-radius: 50% / 60%; background: #e6d7bb; transform: rotate(25deg); position: relative; }
.roast-meter i.on { background: #4a2e1b; }
.roast-meter i::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .45); border-radius: 2px; transform: rotate(-12deg); }
.roast-meter b { margin-left: 6px; font-size: .85rem; color: #2e1b0f; }
.section--coffee .product-hero__tags span { color: #5a3a22; }
.section--coffee .cof-facts > div { background: #fbf3e3; border-color: #ecdcba; box-shadow: 0 4px 12px rgba(46, 27, 15, .06); }
.section--coffee .cof-facts span { color: #8a6f4e; }
.section--coffee .cof-facts b { color: #2e1b0f; }
.section--coffee .variant { background: #fffaf0; border-color: #e1cfae; color: #4a2e1b; }
.section--coffee .variant.is-selected { background: #4a2e1b; border-color: #4a2e1b; color: #fff; }
.section--coffee .purchase__opt { background: #fffaf0; border-color: #e1cfae; }
.section--coffee .purchase__opt.is-selected { background: #f1e3c8; border-color: #5a3a22; }
.section--coffee .btn--primary { background: linear-gradient(135deg, #5a3a22, #2e1b0f); box-shadow: 0 8px 18px rgba(46, 27, 15, .3); }
.section--coffee .btn--outline { color: #4a2e1b; border-color: #5a3a22; }
.section--coffee .accordion__item summary { color: #4a2e1b; }
.section--coffee .accordion__item { border-color: #e7d9c0; }
.section--coffee .also-like h3 { color: #2e1b0f; }
.section--coffee .also-like .card { background: #fffaf0; border-color: #e7d9c0; }
@media (max-width: 600px) { .roast-meter { margin-bottom: 10px; } .roast-meter i { width: 11px; height: 16px; } .roast-meter span { font-size: .6rem; } .roast-meter b { font-size: .78rem; } }

/* Coffee pages: the bag picture sits straight on the page colour */
#product.section--coffee .product-gallery__main { background: transparent; border-color: transparent; box-shadow: none; }
#product.section--coffee .product-gallery__main img { filter: drop-shadow(0 16px 18px rgba(46, 27, 15, .22)); }

/* Coffee facts: Process / Roast / Altitude / Varietal, professional cards with icons */
.section--coffee .cof-facts { gap: 12px; margin: 18px 0 20px; }
.section--coffee .cof-facts > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #fbf1de); border: 1px solid #ecdcba; box-shadow: 0 8px 20px rgba(46, 27, 15, .08); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.section--coffee .cof-facts > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #5a3a22, #d9b77a); }
.section--coffee .cof-facts > div:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(46, 27, 15, .14); }
.cof-facts__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #6b4428, #2e1b0f); color: #f3dfb8; box-shadow: 0 0 0 4px #f3e7cf, 0 6px 12px rgba(46, 27, 15, .28); }
.cof-facts__ic svg { width: 24px; height: 24px; }
.section--coffee .cof-facts__tx { display: block; padding: 0; background: none; border: 0; box-shadow: none; min-width: 0; }
.section--coffee .cof-facts__tx::before { display: none; }
.section--coffee .cof-facts__tx span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a6f4e; }
.section--coffee .cof-facts__tx b { display: block; margin-top: 2px; font-size: 1.12rem; line-height: 1.2; color: #2e1b0f; }
@media (max-width: 600px) {
  .section--coffee .cof-facts { gap: 8px; margin: 14px 0 16px; }
  .section--coffee .cof-facts > div { gap: 9px; padding: 10px 10px 10px 13px; border-radius: 13px; }
  .cof-facts__ic { width: 34px; height: 34px; box-shadow: 0 0 0 3px #f3e7cf, 0 4px 8px rgba(46, 27, 15, .25); }
  .cof-facts__ic svg { width: 18px; height: 18px; }
  .section--coffee .cof-facts__tx span { font-size: .56rem; letter-spacing: .08em; }
  .section--coffee .cof-facts__tx b { font-size: .86rem; }
}
.section--coffee .cof-facts .cof-facts__ic { display: inline-flex; color: #f3dfb8; font-size: 1rem; letter-spacing: 0; text-transform: none; }

/* Coffee pages: You might also like */
.cof-also { margin-top: 46px; padding-top: 30px; border-top: 1px solid #e7d9c0; }
.cof-also h3 { margin: 0 0 18px; font-size: 1.4rem; color: #2e1b0f; padding-left: 12px; border-left: 4px solid #d9b77a; }
.cof-also__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
.cof-also__card { display: flex; align-items: center; gap: 18px; padding: 16px 20px 16px 16px; border-radius: 20px; background: linear-gradient(180deg, #fffaf0, #fbf1de); border: 1px solid #ecdcba; box-shadow: 0 10px 24px rgba(46, 27, 15, .09); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.cof-also__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #5a3a22, #d9b77a); }
.cof-also__card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(46, 27, 15, .18); }
.cof-also__pic { flex: 0 0 auto; width: 118px; height: 118px; border-radius: 16px; background: radial-gradient(circle at 50% 40%, #fbf3e3, #efe2c9); display: flex; align-items: center; justify-content: center; }
.cof-also__pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(46, 27, 15, .25)); }
.cof-also__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cof-also__txt strong { font-size: 1.25rem; line-height: 1.15; color: #2e1b0f; }
.cof-also__txt em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a6f4e; }
.cof-also__price { margin-top: 4px; font-weight: 800; color: #5a3a22; }
.cof-also__price small { font-size: .7rem; font-weight: 600; color: #8a6f4e; }
.cof-also__go { margin-top: 6px; font-size: .85rem; font-weight: 800; color: #4a2e1b; border-bottom: 2px solid #d9b77a; }
@media (max-width: 760px) { .cof-also__grid { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .cof-also { margin-top: 30px; padding-top: 20px; } .cof-also h3 { font-size: 1.1rem; margin-bottom: 12px; } .cof-also__card { gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; } .cof-also__pic { width: 84px; height: 84px; border-radius: 12px; } .cof-also__txt strong { font-size: 1.05rem; } .cof-also__go { font-size: .78rem; } }

/* "Specification sheet coming soon" bubble next to the button */
.soon-pop { position: fixed; z-index: 1200; transform: translate(-50%, -100%) scale(.96); width: max-content; max-width: 220px; padding: 10px 14px; border-radius: 14px; background: #1f2417; color: #fff; font-size: .82rem; line-height: 1.35; text-align: center; box-shadow: 0 12px 28px rgba(0,0,0,.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.soon-pop strong { display: block; margin-bottom: 2px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #f5d878; }
.soon-pop::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #1f2417; transform: rotate(45deg); }
.soon-pop.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -100%) scale(1); }
.soon-pop--below { transform: translate(-50%, 0) scale(.96); }
.soon-pop--below.is-open { transform: translate(-50%, 0) scale(1); }
.soon-pop--below::after { bottom: auto; top: -6px; }

/* Currency switch (Ksh / US$) */
.cur { display: inline-flex; border: 1.5px solid var(--green); border-radius: 999px; overflow: hidden; font-size: .74rem; font-weight: 800; line-height: 1; flex: 0 0 auto; }
.cur button { border: 0; background: transparent; color: var(--green-dark); padding: 7px 11px; cursor: pointer; font-weight: 800; letter-spacing: .02em; }
.cur button.is-on { background: var(--green); color: #fff; }
.cur-note { margin: 0 0 10px; font-size: .74rem; line-height: 1.4; color: var(--ink-soft); }
.cur-note a { color: var(--green); font-weight: 700; text-decoration: underline; }
@media (max-width: 600px) { .cur { font-size: .7rem; } .cur button { padding: 6px 9px; } }

/* Farmers: "Where it comes from" button and panel */
.partner-block__btns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 10px; }
.partner-block__btns .nutgrade { margin-top: 0; }
.partner-block__btns > .btn { display: inline-flex; align-items: center; gap: 7px; }
.origin { max-width: 520px; margin: 0 auto; }
.origin h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; font-size: 1.3rem; }
.origin__flag { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.origin p { line-height: 1.6; }
.origin__sub { margin-top: 14px; font-weight: 700; color: var(--green-dark); }
.origin__countries { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; list-style: none; padding: 0; }
.origin__countries li { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; background: #f3f8e4; font-weight: 700; color: var(--green-dark); }
.origin__countries .origin__flag { width: 22px; height: 22px; }
.origin-map { max-width: 340px; margin: 12px auto 4px; padding: 10px; border-radius: 18px; background: #f7faee; border: 1px solid #e1ebcb; }
.origin-map svg { display: block; width: 100%; height: auto; }
.origin-map path { fill: #e3ecd0; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.origin-map path.is-hl { fill: #4f8a1f; stroke: #fff; stroke-width: 1.4; }
.origin-map__lbl { font: 800 15px/1 var(--font-body), sans-serif; fill: #1f2417; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; pointer-events: none; }
.origin-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 16px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.origin-legend i { width: 14px; height: 14px; border-radius: 4px; background: #4f8a1f; }
@media (max-width: 600px) { .origin h3 { font-size: 1.1rem; } .origin-map { max-width: 280px; } .origin__countries { grid-template-columns: 1fr 1fr; } .origin__countries li { padding: 7px 9px; font-size: .86rem; } }
.origin-map__line { stroke: #1f2417; stroke-width: 1.4; }
.origin-map__dot { fill: #1f2417; stroke: #fff; stroke-width: 1.5; }
.origin-map__lbl { font-size: 17px; }

.soon-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #f5d878; color: #3a2a05; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* One card with a style selector */
.grid--single, .grid--4.grid--single:has(.card--grade) { grid-template-columns: minmax(0, 440px); justify-content: center; }
.card--styles .variant-label { margin: 2px 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a8068; }
.card--styles .variants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
@media (max-width: 600px) { .card--styles .variants { gap: 6px; } .card--styles .variant { padding: 5px 11px; font-size: .78rem; } .card--styles .variant-label { font-size: .62rem; } }
.pick .variant-label { margin: 2px 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a8068; }
.pick .variants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.grid--pick > article[hidden] { display: none !important; }
@media (max-width: 600px) { .pick .variants { gap: 6px; } .pick .variant { padding: 5px 11px; font-size: .78rem; } .pick .variant-label { font-size: .62rem; } }
/* Single-card ranges: a bigger picture */
.grid--single .card__img--photo.card__img--pack { height: 250px; }
@media (max-width: 600px) { .card--grade .grid--single .card__img--photo.card__img--pack, .grid--single .card--grade .card__img--photo.card__img--pack { height: 200px; } }

/* Range: picture next to the single card */
.range-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 34px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.range-split--reverse { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.range-split--reverse .range-split__pic { order: 2; }
.range-split__pic { position: relative; margin: 0; min-height: 380px; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(31, 36, 23, .18); }
.range-split__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.range-split__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(20,24,14,.55)); }
.range-split__pic figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--green-dark); font-weight: 800; font-size: .86rem; letter-spacing: .03em; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.range-split .grid--single { align-self: center; }
@media (max-width: 800px) {
  .range-split, .range-split--reverse { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .range-split--reverse .range-split__pic { order: 0; }
  .range-split__pic { min-height: 0; aspect-ratio: 16 / 10; border-radius: 16px; }
  .range-split__pic figcaption { left: 10px; bottom: 10px; padding: 5px 12px; font-size: .74rem; }
}

/* Nut switcher: jump between the nut pages */
.nut-switch { background: #f6f8ef; border-bottom: 1px solid var(--border); padding: 12px 0; }
.nut-switch__row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.nut-switch__label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6a7260; margin-right: 6px; }
.nut-switch a { padding: 9px 20px; border-radius: 999px; background: #fff; border: 1.5px solid #d9dfc9; color: #1f2d12; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.nut-switch a:hover { border-color: var(--green); color: var(--green-dark); }
.nut-switch a.is-current { background: var(--green); border-color: var(--green); color: #fff; }
@media (max-width: 600px) { .nut-switch { padding: 10px 0; } .nut-switch__row { gap: 6px; } .nut-switch__label { width: 100%; text-align: center; margin: 0 0 2px; } .nut-switch a { padding: 8px 14px; font-size: .88rem; } }

/* Glass pill (glass-jar promise on product pages) */
.glass-pill { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 14px; border-radius: 14px; background: #eef7fb; border: 1.5px solid #a9d3e4; color: #1d5a73; }
.glass-pill svg { flex: 0 0 auto; }
.glass-pill span { flex: 1 1 auto; font-size: .86rem; line-height: 1.3; color: var(--ink-soft); }
.glass-pill b { display: block; color: #1d5a73; font-size: .92rem; }
@media (max-width: 600px) { .glass-pill { padding: 7px 12px; gap: 8px; border-radius: 12px; } .glass-pill span { font-size: .76rem; } .glass-pill b { font-size: .84rem; } }

/* Option pill that is coming soon */
.variant--soon { position: relative; opacity: .72; border-style: dashed; cursor: pointer; }
.variant--soon em { margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: #f5d878; color: #3a2a05; font-size: .58rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* "Organic" word tag next to the section tag in the hero */
.farmhero .tag--organic { margin-left: 6px; background: #5e7d1f; color: #fff; }

/* Organic band on the macadamia page */
.organic-band { background: linear-gradient(135deg, #2f4a12, #5e7d1f 60%, #7baa41); color: #fff; padding: 22px 0; }
.organic-band__inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: left; }
.organic-band__leaf { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.55); color: #f3e7b8; }
.organic-band__text { display: flex; flex-direction: column; gap: 2px; }
.organic-band__text strong { font-size: 1.45rem; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.organic-band__text span { font-size: .98rem; color: rgba(255,255,255,.88); }
.organic-band__link { padding: 9px 20px; border-radius: 999px; background: #fff; color: #2f4a12; font-weight: 700; font-size: .9rem; text-decoration: none; }
.organic-band__link:hover { background: #f3e7b8; }
@media (max-width: 600px) { .organic-band { padding: 16px 0; } .organic-band__inner { gap: 12px; } .organic-band__leaf { width: 52px; height: 52px; } .organic-band__text strong { font-size: 1.15rem; } .organic-band__text span { font-size: .84rem; } }

/* Indulge range: dark chocolate stage so it stands out from the other ranges */
section#indulge { position: relative; background: radial-gradient(ellipse at 20% 0%, rgba(214,160,70,.22), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(120,60,30,.45), transparent 60%), linear-gradient(160deg, #2a1810 0%, #3d2316 55%, #2a1810 100%); padding-block: 72px; overflow: hidden; }
section#indulge::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #8a5a2b, #f0cf85, #8a5a2b); }
section#indulge .section__head .tag { background: linear-gradient(135deg, #f6dd94, #d5a640); color: #3a2208; border: 0; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
section#indulge .section__head h2 { color: #fbefd0; font-size: clamp(2rem, 4vw, 2.9rem); text-shadow: 0 3px 16px rgba(0,0,0,.45); }
section#indulge .section__head h2::after { width: 90px; height: 4px; background: linear-gradient(90deg, #8a5a2b, #f0cf85, #8a5a2b); }
section#indulge .section__head p { background: rgba(255,244,220,.1); border: 1px solid rgba(240,207,133,.5); color: #f6e6c4; backdrop-filter: blur(2px); }
section#indulge .range-split__pic { box-shadow: 0 0 0 3px rgba(240,207,133,.85), 0 26px 60px rgba(0,0,0,.55); }
section#indulge .range-split .card { box-shadow: 0 0 0 2px rgba(240,207,133,.6), 0 26px 60px rgba(0,0,0,.5); }
section#indulge .range-split__pic figcaption { background: rgba(42,24,16,.85); color: #f6dd94; border: 1px solid rgba(240,207,133,.5); }
@media (max-width: 600px) { section#indulge { padding-block: 44px; } section#indulge .section__head h2 { font-size: 1.7rem; } section#indulge .range-split__pic { box-shadow: 0 0 0 2px rgba(240,207,133,.85), 0 14px 30px rgba(0,0,0,.5); } }

/* Sugar free badge on the Gourmet cards */
.grade-spec__sugar { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 11px 14px; border-radius: 14px; background: linear-gradient(135deg, #2f7a2b, #58a336); color: #fff; box-shadow: 0 6px 16px rgba(47,122,43,.32); }
.grade-spec__sugar-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; }
.grade-spec__sugar-tx { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.grade-spec__sugar-tx b { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; line-height: 1.2; color: #fff; }
.grade-spec__sugar-tx small { font-size: .8rem; color: rgba(255,255,255,.9); }
@media (max-width: 600px) { .grade-spec__sugar { padding: 9px 12px; gap: 10px; } .grade-spec__sugar-ic { width: 34px; height: 34px; } .grade-spec__sugar-tx b { font-size: .98rem; } }
.card .grade-spec > .grade-spec__sugar { background: linear-gradient(135deg, #2f7a2b, #58a336); border: 0; border-radius: 14px; padding: 11px 14px; display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
@media (max-width: 600px) { .card .grade-spec > .grade-spec__sugar { padding: 9px 12px; gap: 10px; } }
.card .grade-spec > .grade-spec__sugar { flex-direction: row; text-align: left; }
.card .grade-spec > .grade-spec__sugar .grade-spec__sugar-tx { align-items: flex-start; }

/* Pure range: fresh green stage (matches the dark Indulge stage) */
section#pure { position: relative; background: radial-gradient(ellipse at 15% 0%, rgba(190,225,120,.28), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(20,60,15,.55), transparent 60%), linear-gradient(160deg, #1f3a10 0%, #2f5518 55%, #1f3a10 100%); padding-block: 72px; overflow: hidden; }
section#pure::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #4f7a22, #d9ec9a, #4f7a22); }
section#pure .section__head .tag { background: linear-gradient(135deg, #e6f4b0, #a9cf4d); color: #1f3a10; border: 0; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
section#pure .section__head h2 { color: #f4fbdc; font-size: clamp(2rem, 4vw, 2.9rem); text-shadow: 0 3px 16px rgba(0,0,0,.4); }
section#pure .section__head h2::after { width: 90px; height: 4px; background: linear-gradient(90deg, #4f7a22, #d9ec9a, #4f7a22); }
section#pure .section__head p { background: rgba(244,251,220,.1); border: 1px solid rgba(217,236,154,.55); color: #eaf5c8; font-size: 1.05rem; }
section#pure .section__head p .org-chip { display: inline-block; margin-right: 4px; padding: 2px 12px; border-radius: 999px; background: linear-gradient(135deg, #f6dd94, #d5a640); color: #3a2208; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .86em; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
section#pure .range-split__pic { box-shadow: 0 0 0 3px rgba(217,236,154,.85), 0 26px 60px rgba(0,0,0,.5); }
section#pure .range-split .card { box-shadow: 0 0 0 2px rgba(217,236,154,.6), 0 26px 60px rgba(0,0,0,.45); }
section#pure .range-split__pic figcaption { background: rgba(31,58,16,.88); color: #e6f4b0; border: 1px solid rgba(217,236,154,.5); }
@media (max-width: 600px) { section#pure { padding-block: 44px; } section#pure .section__head h2 { font-size: 1.7rem; } section#pure .section__head p { font-size: .9rem; } section#pure .range-split__pic { box-shadow: 0 0 0 2px rgba(217,236,154,.85), 0 14px 30px rgba(0,0,0,.45); } }

/* Gourmet range: warm caramel stage */
section#gourmet { position: relative; background: radial-gradient(ellipse at 18% 0%, rgba(255,214,130,.35), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(120,60,10,.5), transparent 60%), linear-gradient(160deg, #6b3a0f 0%, #94571a 55%, #6b3a0f 100%); padding-block: 72px; overflow: hidden; }
section#gourmet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #a8661f, #ffe3a1, #a8661f); }
section#gourmet .section__head .tag { background: linear-gradient(135deg, #fff0c2, #f0b54a); color: #4a2606; border: 0; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
section#gourmet .section__head h2 { color: #fff3d6; font-size: clamp(2rem, 4vw, 2.9rem); text-shadow: 0 3px 16px rgba(0,0,0,.45); }
section#gourmet .section__head h2::after { width: 90px; height: 4px; background: linear-gradient(90deg, #a8661f, #ffe3a1, #a8661f); }
section#gourmet .section__head p { background: rgba(255,243,214,.12); border: 1px solid rgba(255,227,161,.55); color: #fff0cc; font-size: 1.05rem; }
section#gourmet .range-split__pic { box-shadow: 0 0 0 3px rgba(255,227,161,.9), 0 26px 60px rgba(0,0,0,.5); }
section#gourmet .range-split .card { box-shadow: 0 0 0 2px rgba(255,227,161,.65), 0 26px 60px rgba(0,0,0,.45); }
section#gourmet .range-split__pic figcaption { background: rgba(74,38,6,.88); color: #ffe3a1; border: 1px solid rgba(255,227,161,.5); }
@media (max-width: 600px) { section#gourmet { padding-block: 44px; } section#gourmet .section__head h2 { font-size: 1.7rem; } section#gourmet .section__head p { font-size: .9rem; } section#gourmet .range-split__pic { box-shadow: 0 0 0 2px rgba(255,227,161,.9), 0 14px 30px rgba(0,0,0,.45); } }

/* Classic range: fire-roasted ember stage */
section#classic { position: relative; background: radial-gradient(ellipse at 18% 0%, rgba(255,150,60,.38), transparent 55%), radial-gradient(ellipse at 95% 100%, rgba(110,15,5,.55), transparent 60%), linear-gradient(160deg, #4a1208 0%, #7a2410 55%, #4a1208 100%); padding-block: 72px; overflow: hidden; }
section#classic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #b8401a, #ffc474, #b8401a); }
section#classic .section__head .tag { background: linear-gradient(135deg, #ffe0a8, #f08a3a); color: #4a1208; border: 0; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
section#classic .section__head h2 { color: #fff0d8; font-size: clamp(2rem, 4vw, 2.9rem); text-shadow: 0 3px 16px rgba(0,0,0,.45); }
section#classic .section__head h2::after { width: 90px; height: 4px; background: linear-gradient(90deg, #b8401a, #ffc474, #b8401a); }
section#classic .section__head p { background: rgba(255,240,216,.12); border: 1px solid rgba(255,196,116,.55); color: #ffe9c8; font-size: 1.05rem; }
section#classic .range-split__pic { box-shadow: 0 0 0 3px rgba(255,196,116,.9), 0 26px 60px rgba(0,0,0,.55); }
section#classic .range-split .card { box-shadow: 0 0 0 2px rgba(255,196,116,.65), 0 26px 60px rgba(0,0,0,.5); }
section#classic .range-split__pic figcaption { background: rgba(74,18,8,.9); color: #ffc474; border: 1px solid rgba(255,196,116,.5); }
@media (max-width: 600px) { section#classic { padding-block: 44px; } section#classic .section__head h2 { font-size: 1.7rem; } section#classic .section__head p { font-size: .9rem; } section#classic .range-split__pic { box-shadow: 0 0 0 2px rgba(255,196,116,.9), 0 14px 30px rgba(0,0,0,.5); } }

/* Price that follows the chosen pack size */
.card__price--calc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.card__price--calc strong { font-size: 1.55rem; font-weight: 800; color: var(--green-dark); }
.card__price--calc small { font-size: .78rem; color: #7a8068; }

/* Phone friendly nut pages: shorter top area, compact range headers, bigger tap targets */
@media (max-width: 600px) {
  .nut-switch { padding: 8px 0; }
  .nut-switch__row { flex-wrap: nowrap; overflow-x: auto; justify-content: center; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nut-switch__row::-webkit-scrollbar { display: none; }
  .nut-switch__label { display: none; }
  .nut-switch a { flex: 0 0 auto; padding: 8px 13px; font-size: .86rem; }
  .organic-band { padding: 12px 0; }
  .organic-band__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; }
  .organic-band__link { display: none; }
  .organic-band__leaf { width: 44px; height: 44px; }
  .organic-band__leaf svg { width: 24px; height: 24px; }
  .organic-band__text strong { font-size: 1.05rem; }
  .organic-band__text span { font-size: .8rem; }
  section#pure, section#classic, section#gourmet, section#indulge { padding-block: 30px; }
  section#pure .section__head, section#classic .section__head, section#gourmet .section__head, section#indulge .section__head { margin-bottom: 16px; }
  section#pure .section__head h2, section#classic .section__head h2, section#gourmet .section__head h2, section#indulge .section__head h2 { font-size: 1.5rem; }
  section#pure .section__head p, section#classic .section__head p, section#gourmet .section__head p, section#indulge .section__head p { margin-top: 8px; padding: 6px 12px; font-size: .82rem; }
  .range-split { gap: 12px; }
  .range-split__pic { aspect-ratio: 16 / 8; }
  .card--styles .variant, .grid--pick .variant, .pick .variant { min-height: 38px; display: inline-flex; align-items: center; }
  .card .card__actions .btn { min-height: 44px; }
}
@media (max-width: 600px) { .nut-switch__row { gap: 5px; } .nut-switch a { padding: 8px 10px; font-size: .82rem; } }
@media (max-width: 360px) { .nut-switch a { padding: 8px 8px; font-size: .78rem; } }
@media (max-width: 600px) { .nut-switch__row { gap: 4px; padding-inline: 10px; } .nut-switch a { padding: 8px 9px; font-size: .8rem; } }

/* Single-card ranges: Origin and the other facts sit side by side on one compact line (saves space) */
.grid--single .card--grade .grade-spec { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.grid--single .card--grade .grade-spec > div { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 10px; }
.grid--single .card--grade .grade-spec > .grade-spec__origin { flex: 0 0 auto; }
.grid--single .card--grade .grade-spec > .grade-spec__wrap { flex: 1 1 160px; }
.grid--single .card--grade .grade-spec > .grade-spec__sugar { flex: 1 1 100%; }
.grid--single .card--grade .grade-spec dd { white-space: nowrap; font-size: .84rem; }
.grid--single .card--grade .grade-spec .grade-spec__wrap dd { white-space: normal; }
.grid--single .card--grade .grade-spec dt { margin: 0; }
.grid--single .card--grade .grade-spec > .grade-spec__origin { order: 1; }
.grid--single .card--grade .grade-spec > .grade-spec__wrap { order: 2; }
.grid--single .card--grade .grade-spec > .grade-spec__sugar { order: 3; }

/* Bakery menu: two cards like a shop mega menu (Shop Bakery + Our Bakery) */
.nav__submenu--mega { gap: 12px; }
.nav__submenu--mega .mega-card { background: #f7f9f1; border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.nav__submenu--mega .mega-card--feature { background: #fff; border: 2px solid var(--green); }
.nav__submenu--mega .mega-title { margin: 0 0 4px; padding-bottom: 8px; font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-style: italic; font-size: 1.7rem; line-height: 1.1; color: var(--green-dark); border-bottom: 2px solid var(--green); }
.nav__submenu--mega a.mega-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff; text-align: left; font-weight: 700; color: #1f2d12; }
.nav__submenu--mega a.mega-item:hover { background: var(--bg-tint); color: var(--green-dark); }
.nav__submenu--mega .mega-ic { flex: 0 0 auto; display: grid; place-items: center; color: #6b7a52; }
.nav__submenu--mega .mega-name { flex: 1 1 auto; }
.nav__submenu--mega .mega-text { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.nav__submenu--mega .mega-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nav__submenu--mega .mega-tags span { padding: 4px 11px; border-radius: 999px; background: var(--green); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.nav__submenu--mega .mega-tags span:last-child { background: #f5d878; color: #3a2a05; }

/* Bakery drop-down in the green bar: wide panel with two cards side by side */
.giftbar { position: relative; z-index: 60; }
.giftbar__drop { display: inline-flex; align-items: center; }
.giftbar__btn { background: none; border: 0; padding: 4px 0; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.giftbar__btn[aria-expanded="true"] { color: #f5d878; }
.giftbar__btn span { font-size: .7em; margin-left: 2px; }
.giftbar__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: #1f2d12; border-top: 3px solid var(--green); box-shadow: 0 24px 50px rgba(20,30,10,.28); padding: 22px 0 26px; }
.giftbar__panel[hidden] { display: none; }
.giftbar__panel-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; max-width: 1040px; }
.giftbar__panel .mega-card { background: #f7f9f1; border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.giftbar__panel .mega-card--feature { background: #fff; border: 2px solid var(--green); justify-content: center; }
.giftbar__panel .mega-title { margin: 0 0 4px; padding-bottom: 8px; font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-style: italic; font-size: 2rem; line-height: 1.1; color: var(--green-dark); border-bottom: 2px solid var(--green); }
.giftbar__panel a.mega-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 1rem; color: #1f2d12; text-decoration: none; }
.giftbar__panel a.mega-item:hover { background: var(--bg-tint); color: var(--green-dark); }
.giftbar__panel .mega-ic { flex: 0 0 auto; display: grid; place-items: center; color: #6b7a52; }
.giftbar__panel .mega-name { flex: 1 1 auto; }
.giftbar__panel .soon-badge { margin-left: 0; }
.giftbar__panel .mega-text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.giftbar__panel .mega-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.giftbar__panel .mega-tags span { padding: 5px 13px; border-radius: 999px; background: var(--green); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.giftbar__panel .mega-tags span:last-child { background: #f5d878; color: #3a2a05; }
@media (max-width: 900px) { .giftbar__drop, .giftbar__panel { display: none !important; } }

/* Wide menu panel under the header (computer screens) */
.megapanel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: #1f2d12; border-top: 3px solid var(--green); box-shadow: 0 24px 50px rgba(20,30,10,.28); padding: 22px 0 26px; z-index: 300; }
.megapanel[hidden] { display: none; }
.megapanel__inner { max-width: 1040px; }
.megapanel__inner--cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; }
.megapanel .mega-card { background: #f7f9f1; border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.megapanel .mega-card--feature { background: #fff; border: 2px solid var(--green); justify-content: center; }
.megapanel .mega-title { margin: 0 0 4px; padding-bottom: 8px; font-family: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive; font-style: italic; font-size: 2rem; line-height: 1.1; color: var(--green-dark); border-bottom: 2px solid var(--green); }
.megapanel a.mega-item, .megapanel .mega-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 1rem; color: #1f2d12; text-decoration: none; }
.megapanel a.mega-item:hover { background: var(--bg-tint); color: var(--green-dark); }
.megapanel .mega-ic { flex: 0 0 auto; display: grid; place-items: center; color: #6b7a52; }
.megapanel .mega-name { flex: 1 1 auto; color: inherit; text-decoration: none; }
.megapanel .mega-name .soon-badge, .megapanel .megapanel__chip .soon-badge { margin-left: 8px; }
.megapanel .mega-text { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.megapanel .mega-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.megapanel .mega-tags span { padding: 5px 13px; border-radius: 999px; background: var(--green); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.megapanel .mega-tags span:last-child { background: #f5d878; color: #3a2a05; }
.megapanel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.megapanel .mega-item--group { flex-direction: column; align-items: flex-start; gap: 8px; }
.megapanel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.megapanel a.megapanel__chip { padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: #f7f9f1; font-size: .85rem; font-weight: 600; color: #1f2d12; text-decoration: none; }
.megapanel a.megapanel__chip:hover { border-color: var(--green); color: var(--green-dark); }
@media (max-width: 900px) { .megapanel { display: none !important; } }

/* Glass jar note under the packaging buttons */
.glass-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 7px 12px; border-radius: 12px; background: #eef7fb; border: 1.5px solid #a9d3e4; color: #1d5a73; font-size: .8rem; line-height: 1.3; }
.glass-note svg { flex: 0 0 auto; }
.glass-note b { display: block; font-size: .86rem; color: #1d5a73; }
.glass-note span { color: var(--ink-soft); }

/* "Made in Kenya" mark next to the KEBS mark on product pages that carry data-kenya */
.kenya-mark { position: absolute; top: 0; right: 56px; z-index: 2; display: block; width: 40px; line-height: 0; }
.kenya-mark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.product-hero__info:has(.kenya-mark) h1 { padding-right: 104px; }
@media (max-width: 600px) { .kenya-mark { width: 31px; right: 44px; } .product-hero__info:has(.kenya-mark) h1 { padding-right: 82px; } }

/* Quantity row on cards */
.card__qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.card__qty-label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7a8068; }
.card__qty .qty { flex: 0 0 auto; }

/* Home page: "How Pure is made" as four professional step cards joined by a line */
.section--process { background: linear-gradient(180deg, #f7f9f1 0%, #ffffff 100%); }
.section--process .section__head h2 { letter-spacing: -.01em; }
.section--process .process { position: relative; gap: 22px; counter-reset: pstep; }
.section--process .process::before { content: ""; position: absolute; left: 12%; right: 12%; top: 58px; height: 2px; background: linear-gradient(90deg, rgba(94,125,31,.15), rgba(94,125,31,.55), rgba(94,125,31,.15)); z-index: 0; }
.section--process .process__step { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 24px; text-align: center; box-shadow: 0 10px 28px rgba(40,55,20,.07); transition: transform .2s ease, box-shadow .2s ease; }
.section--process .process__step:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(40,55,20,.14); }
.section--process .process__ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: linear-gradient(145deg, var(--green-dark), #7baa41); color: #fff; box-shadow: 0 8px 18px rgba(74,99,24,.35), 0 0 0 6px #fff; }
.section--process .process__num { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: #eef4de; border: 0; -webkit-text-stroke: 0; font-family: inherit; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark); }
.section--process .process__step h3 { margin: 0 0 8px; font-size: 1.15rem; color: #1f2d12; }
.section--process .process__step p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 960px) { .section--process .process { grid-template-columns: repeat(2, 1fr); } .section--process .process::before { display: none; } }
@media (max-width: 560px) { .section--process .process { grid-template-columns: 1fr; gap: 14px; } .section--process .process__step { padding: 20px 18px; text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; } .section--process .process__ic { grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; box-shadow: 0 6px 14px rgba(74,99,24,.3); } .section--process .process__num { justify-self: start; margin-bottom: 4px; } .section--process .process__step h3 { margin-bottom: 4px; } }

/* Home page trust band: certificates as white badge cards on a dark green band */
.trust-band { background: radial-gradient(ellipse at 10% 0%, rgba(160,205,90,.25), transparent 55%), linear-gradient(135deg, #1f2d12 0%, #35511a 100%); color: #fff; padding: 44px 0; }
.trust-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.trust-band__text { display: flex; align-items: center; gap: 18px; flex: 1 1 380px; }
.trust-band__icon { flex: 0 0 auto; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1.5px solid rgba(245,216,120,.7); color: #f5d878; }
.trust-band__eyebrow { display: block; margin-bottom: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #f5d878; }
.trust-band h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; }
.trust-band p { margin: 0; color: rgba(255,255,255,.8); font-size: 1rem; }
.trust-band__badges { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.trust-band .trust-badge-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 18px; border-radius: 16px; background: #fff; color: #1f2d12; text-decoration: none; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .2s ease; }
.trust-band a.trust-badge-card:hover { transform: translateY(-3px); }
.trust-band .trust-badge-card img { flex: 0 0 auto; width: auto; max-height: 48px; object-fit: contain; border-radius: 6px; }
.trust-band .trust-badge-card b { font-size: .86rem; font-weight: 800; line-height: 1.25; }
@media (max-width: 720px) { .trust-band { padding: 30px 0; } .trust-band__inner { gap: 20px; } .trust-band__icon { width: 52px; height: 52px; } .trust-band__icon svg { width: 26px; height: 26px; } .trust-band__badges { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; } .trust-band .trust-badge-card { padding: 10px 14px; } }

.trust-band .trust-badge-card--kam img { max-height: 60px; border-radius: 0; }
.trust-band .trust-badge-card--kam b { max-width: 150px; }
@media (min-width: 721px) { .trust-band__badges { max-width: 700px; justify-content: flex-end; } }

/* Trust band, compact and tidy: text on the left, four equal badge tiles on the right */
.trust-band { padding: 26px 0; }
.trust-band__inner { flex-wrap: nowrap; gap: 28px; }
.trust-band__text { flex: 0 0 330px; gap: 14px; }
.trust-band__icon { width: 52px; height: 52px; }
.trust-band__icon svg { width: 26px; height: 26px; }
.trust-band__eyebrow { margin-bottom: 2px; font-size: .64rem; }
.trust-band h2 { margin-bottom: 4px; font-size: 1.3rem; line-height: 1.2; }
.trust-band p { font-size: .88rem; line-height: 1.45; }
.trust-band__badges { flex: 1 1 auto; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; justify-content: stretch; }
.trust-band__badges li { display: flex; }
.trust-band .trust-badge-card { width: 100%; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 8px; text-align: center; border-radius: 14px; box-shadow: 0 6px 14px rgba(0,0,0,.22); }
.trust-band .trust-badge-card img { max-height: 40px; max-width: 64px; }
.trust-band .trust-badge-card--kam img { max-height: 42px; max-width: 64px; }
.trust-band .trust-badge-card b { max-width: none; font-size: .72rem; line-height: 1.25; }
@media (max-width: 900px) { .trust-band__inner { flex-wrap: wrap; gap: 16px; } .trust-band__text { flex: 1 1 100%; } .trust-band__badges { width: 100%; } }
@media (max-width: 560px) { .trust-band { padding: 20px 0; } .trust-band__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .trust-band .trust-badge-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 12px; } .trust-band .trust-badge-card img { max-height: 32px; max-width: 44px; } }
.trust-band__badges { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.trust-band .trust-badge-card--mik img { max-height: 44px; max-width: 30px; }
.trust-band__text { flex-basis: 300px; }
@media (max-width: 900px) { .trust-band__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-band__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-band .trust-badge-card--mik img { max-height: 36px; max-width: 24px; } .trust-band__badges li:last-child { grid-column: 1 / -1; } }

/* Floating WhatsApp button */
.wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.6s ease-out infinite; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }
@media (max-width: 600px) { .wa-float { width: 52px; height: 52px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .wa-float svg { width: 27px; height: 27px; } }

/* Packaging choices that are not available for the chosen size */
.variant.is-disabled { opacity: .38; pointer-events: none; text-decoration: line-through; cursor: not-allowed; }
.pack-note { margin: -4px 0 8px; font-size: .78rem; color: #7a8068; }
.pack-note[hidden] { display: none; }

/* Home page: "How we deliver" three cards */
.section--deliver { background: #fff; }
.deliver__title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.deliver { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.deliver__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 26px 28px; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 10px 28px rgba(40,55,20,.08); transition: transform .2s ease, box-shadow .2s ease; }
.deliver__card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(40,55,20,.15); }
.deliver__ic { display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; background: linear-gradient(145deg, #eef4de, #dcebb8); color: var(--green-dark); box-shadow: inset 0 0 0 2px rgba(94,125,31,.25); }
.deliver__card h3 { margin: 0 0 8px; font-size: 1.2rem; color: #1f2d12; }
.deliver__card p { margin: 0 0 18px; font-size: .96rem; line-height: 1.55; color: var(--ink-soft); }
.deliver__link { margin-top: auto; padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--green); color: var(--green-dark); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background .15s, color .15s; }
.deliver__link:hover { background: var(--green); color: #fff; }
@media (max-width: 900px) { .deliver { grid-template-columns: 1fr; gap: 14px; } .deliver__card { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 18px; flex-wrap: wrap; } .deliver__ic { width: 64px; height: 64px; margin: 0; } .deliver__ic svg { width: 32px; height: 32px; } .deliver__card h3 { flex: 1 1 calc(100% - 90px); margin: 0; font-size: 1.1rem; } .deliver__card p { flex: 1 1 100%; margin: 0; } .deliver__link { margin-top: 0; } }
.deliver__card--art { padding-top: 22px; }
.deliver__art { display: block; width: 100%; max-width: 250px; margin: 0 auto 10px; }
.deliver__art svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .deliver__card--art .deliver__art { flex: 0 0 120px; max-width: 120px; margin: 0; } .deliver__card--art h3 { flex: 1 1 calc(100% - 150px); } }

/* How we deliver: moving pictures. Wheels turn, the road scrolls, vehicles drive and bob, the plane floats past clouds. Still pictures if motion is reduced. */
.deliver__art .wheel { transform-box: fill-box; transform-origin: center; animation: dSpin .9s linear infinite; }
.deliver__art .road { animation: dRoad .8s linear infinite; }
.deliver__art .speed { animation: dSpeed 1.2s ease-in-out infinite; }
.deliver__art .veh--drive { animation: dDrive 5.5s ease-in-out infinite alternate; }
.deliver__art .veh--bob { animation: dBob .55s ease-in-out infinite alternate; }
.deliver__art .plane { animation: dFloat 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.deliver__art .shadow { animation: dShadow 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.deliver__art .cloud--a { animation: dCloudA 14s linear infinite; }
.deliver__art .cloud--b { animation: dCloudB 19s linear infinite; }
@keyframes dSpin { to { transform: rotate(360deg); } }
@keyframes dRoad { to { stroke-dashoffset: -26; } }
@keyframes dSpeed { 0%, 100% { opacity: .15; transform: translateX(0); } 50% { opacity: .9; transform: translateX(-6px); } }
@keyframes dDrive { from { transform: translateX(-8px); } to { transform: translateX(10px); } }
@keyframes dBob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes dFloat { from { transform: translateY(2px) rotate(-1.4deg); } to { transform: translateY(-9px) rotate(1.2deg); } }
@keyframes dShadow { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(.86); opacity: .6; } }
@keyframes dCloudA { from { transform: translate(340px, 18px); } to { transform: translate(-80px, 18px); } }
@keyframes dCloudB { from { transform: translate(340px, 44px); } to { transform: translate(-80px, 44px); } }
@media (prefers-reduced-motion: reduce) { .deliver__art .wheel, .deliver__art .road, .deliver__art .speed, .deliver__art .veh--drive, .deliver__art .veh--bob, .deliver__art .plane, .deliver__art .shadow, .deliver__art .cloud--a, .deliver__art .cloud--b { animation: none; } }

/* Fairtrade Africa logo in the top right corner of the Farmers section */
.fairtrade--corner { position: absolute; top: -6px; right: 16px; z-index: 2; width: 88px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.14)); }
@media (max-width: 720px) { .fairtrade--corner { top: -18px; right: 10px; width: 58px; } }

/* Diabetic logo inside the green sugar free badge */
.grade-spec__sugar .grade-spec__sugar-ic { width: 46px; height: 46px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.grade-spec__sugar .grade-spec__sugar-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) { .grade-spec__sugar .grade-spec__sugar-ic { width: 40px; height: 40px; } }

/* Logos in the top-right corner of the jar picture (diabetic friendly products) */
.product-gallery__main .corner-logos { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; pointer-events: none; }
#product .product-gallery__main .corner-logos img { width: 36px; height: 36px; max-width: none; object-fit: contain; padding: 2px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
@media (max-width: 600px) { .product-gallery__main .corner-logos { top: 8px; right: 8px; gap: 6px; } #product .product-gallery__main .corner-logos img { width: 30px; height: 30px; border-radius: 7px; } }

/* Compact option rows on the seed product pages: label on the left, pills on the right */
#product .opt-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
#product .opt-row .variant-label { margin: 0; font-size: .72rem; }
#product .opt-row .variants { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#product .opt-row .variant { padding: 5px 12px; font-size: .8rem; line-height: 1.2; }
@media (max-width: 480px) { #product .opt-row { grid-template-columns: 78px 1fr; gap: 4px 8px; } #product .opt-row .variant { padding: 5px 10px; font-size: .76rem; } }

/* Proportions of the buy box on the seed pages (Pumpkin, Sunflower) */
#pumpInfo .product-hero__tags, #sunInfo .product-hero__tags { margin-bottom: 14px; }
#pumpInfo .opt-row, #sunInfo .opt-row { margin-bottom: 10px; }
#pumpInfo .opt-row .variant, #sunInfo .opt-row .variant { padding: 6px 14px; font-size: .82rem; }
#pumpInfo .product-hero__actions, #sunInfo .product-hero__actions { flex-wrap: nowrap; gap: 10px; align-items: stretch; margin: 16px 0 16px; }
#pumpInfo .product-hero__actions .qty, #sunInfo .product-hero__actions .qty { flex: 0 0 auto; height: 46px; }
#pumpInfo .product-hero__actions .qty__btn, #sunInfo .product-hero__actions .qty__btn { width: 38px; font-size: 1.15rem; }
#pumpInfo .product-hero__actions .qty__input, #sunInfo .product-hero__actions .qty__input { width: 44px; font-size: .95rem; }
#pumpInfo .product-hero__actions .btn--lg, #sunInfo .product-hero__actions .btn--lg { height: 46px; padding: 0 20px; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: 1 1 0; min-width: 0; }
#pumpInfo .product-hero__actions .btn--outline, #sunInfo .product-hero__actions .btn--outline { flex: 0 0 auto; padding: 0 22px; border-width: 1.5px; }
#pumpInfo .checklist li, #sunInfo .checklist li { font-size: .9rem; margin-bottom: 6px; }
@media (max-width: 480px) {
  #pumpInfo .product-hero__actions, #sunInfo .product-hero__actions { gap: 8px; }
  #pumpInfo .product-hero__actions .btn--lg, #sunInfo .product-hero__actions .btn--lg { padding: 0 14px; font-size: .88rem; }
  #pumpInfo .product-hero__actions .btn--outline, #sunInfo .product-hero__actions .btn--outline { padding: 0 14px; }
}

/* Customer reviews: clearer layout (summary card on the left, form on the right) */
#reviews .reviews__grid { grid-template-columns: 0.85fr 1.15fr; gap: 20px; align-items: stretch; max-width: 980px; margin: 0 auto; }
#reviews .reviews__list { height: 100%; }
#reviews .reviews__empty { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; height: 100%; padding: 26px 22px; border: 1px solid #dfe9c9; border-style: solid; background: #fff; box-shadow: 0 8px 22px rgba(74,99,24,.08); }
#reviews .reviews__bigstars { font-size: 1.9rem; letter-spacing: 4px; line-height: 1; color: #e0a526; margin-bottom: 4px; }
#reviews .reviews__empty b { font-size: 1.05rem; }
#reviews .reviews__empty span:not(.reviews__bigstars) { max-width: 30ch; line-height: 1.45; }
#reviews .reviews__empty .btn { margin-top: 10px; align-self: center; width: auto; flex: 0 0 auto; padding: 8px 22px; }
#reviews .reviews__form { padding: 20px 22px 22px; gap: 10px; }
#reviews .reviews__form h3 { font-size: 1.05rem; margin: 2px 0 0; }
#reviews .reviews__formsub { margin: -4px 0 2px; font-size: .84rem; color: var(--ink-soft); }
#reviews .reviews__rate { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg-tint, #f6f4ea); border-radius: 10px; }
#reviews .reviews__ratelabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
#reviews .reviews__rate .reviews__pick button { font-size: 1.5rem; }
#reviews .reviews__form textarea { height: 84px; }
@media (max-width: 720px) { #reviews .reviews__grid { grid-template-columns: 1fr; } #reviews .reviews__empty { padding: 20px 16px; } }

#reviews .reviews__hint--note { margin: 2px 0 0; font-size: .76rem; color: var(--ink-soft); }
#reviews .reviews__form button[disabled] { opacity: .7; cursor: wait; }

/* Live weather card on the farm sections */
.weather-live { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 10px 16px; max-width: 460px; border: 1px solid #dfe9c9; border-left: 4px solid var(--green); border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.weather-live[hidden] { display: none; }
.weather-live__ic { font-size: 2rem; line-height: 1; }
.weather-live__main { display: flex; flex-direction: column; min-width: 78px; }
.weather-live__temp { font-size: 1.5rem; line-height: 1.1; color: var(--green-dark); }
.weather-live__desc { font-size: .8rem; color: var(--ink-soft); }
.weather-live__meta { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px dashed #d4dcc0; }
.weather-live__place { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green-dark); }
.weather-live__more { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 480px) { .weather-live { gap: 10px; padding: 9px 12px; } .weather-live__meta { padding-left: 10px; } .weather-live__more { font-size: .72rem; } }

/* Weather card: small overlay in the corner of the farm picture */
.partner-block__art { position: relative; }
.partner-block__art .weather-live { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0; max-width: calc(100% - 20px); gap: 8px; padding: 5px 10px 5px 8px; border: 0; border-left: 3px solid var(--green); border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.18); backdrop-filter: blur(4px); }
.partner-block__art .weather-live__ic { font-size: 1.15rem; }
.partner-block__art .weather-live__main { min-width: 0; }
.partner-block__art .weather-live__temp { font-size: .95rem; line-height: 1.05; }
.partner-block__art .weather-live__desc { font-size: .62rem; line-height: 1.1; }
.partner-block__art .weather-live__meta { padding-left: 8px; border-left: 1px solid #d4dcc0; }
.partner-block__art .weather-live__place { font-size: .58rem; letter-spacing: .06em; white-space: nowrap; }
.partner-block__art .weather-live__more { display: none; }

/* Small AFA logo in the registration banner */
.authority__logo { flex: 0 0 auto; display: block; width: 52px; height: 52px; padding: 3px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); line-height: 0; }
.authority__logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 9px; }
@media (max-width: 600px) { .authority__logo { width: 40px; height: 40px; border-radius: 10px; } }

/* Cards of products that are coming soon */
.card--soon .card__price--soon { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #f5d878; color: #3a2a05; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.card--soon .card__img { filter: grayscale(.35); opacity: .85; }
.card--soon .trace-badge { display: none; }

/* Home hero: white, easy-to-read text on the left, our picture on the right fading into white */
.hero { background: #fff; }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 58%; background: url("../assets/trust-banner-hero.jpg") 62% center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); pointer-events: none; }
.hero__slide { background: none; z-index: 1; }
.hero__slide-inner { color: var(--ink); max-width: 500px; margin: 0; margin-left: max(0px, calc(50% - 590px)); }
.hero h1 { color: #1b2a10; text-shadow: none; font-size: clamp(2.1rem, 3.7vw, 3.2rem); line-height: 1.1; }
.hero h1 span { color: var(--green); }
.hero__slide p { color: var(--ink-soft); text-shadow: none; }
.hero .eyebrow { background: #eef4df; color: var(--green-dark); }
.hero__feature-list li { color: var(--ink); }
.hero__dots { left: 5%; transform: none; }
.hero__dot { background: rgba(0,0,0,.22); }
.hero__dot.is-active { background: var(--green); }
@media (max-width: 900px) {
  .hero::before { width: 100%; opacity: .16; -webkit-mask-image: none; mask-image: none; background-position: 70% center; }
  .hero__slide-inner { margin-left: 0; max-width: none; }
  .hero__dots { left: 50%; transform: translateX(-50%); }
}

/* To your door: real photo of our branded delivery scooter */
.deliver__art--photo { max-width: 270px; }
.deliver__art--photo img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 900px) { .deliver__card--art .deliver__art.deliver__art--photo { flex: 0 0 130px; max-width: 130px; } }

.deliver__eco { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 8px; padding: 4px 12px; border-radius: 999px; background: #e7f3d3; color: var(--green-dark); border: 1px solid #c9e0a3; font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.deliver__eco svg { color: #e0a526; }
.deliver__card--art .deliver__eco { align-self: center; }

/* Community strip (Instagram) above Our Partners */
.insta { text-align: center; padding: 44px 0 40px; background: #fff; }
.community__script { margin: 0 0 8px; font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); }
.community__follow { margin: 0 auto 22px; max-width: 60ch; font-size: .95rem; letter-spacing: .02em; color: var(--ink-soft); }
.community__follow a { color: var(--green); font-weight: 800; text-decoration: none; }
.community__follow a:hover { text-decoration: underline; }
.community__grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 12px; margin-bottom: 24px; }
.community__tile { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--bg-tint, #f3f1e6); }
.community__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.community__tile:hover img { transform: scale(1.06); }
.community__btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .community__grid { grid-template-columns: repeat(var(--cols, 5), 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .community__tile { scroll-snap-align: start; } }

/* Corporate Gifting as a button in the green gift bar */
.giftbar__links a.giftbar__corp { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 999px; background: #fff; color: var(--green-dark) !important; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.giftbar__links a.giftbar__corp:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.35); text-decoration: none; }
.giftbar__icon--corp { color: var(--green); }
/* On phones the Corporate Gifting button has exactly the Gift Card button size */
@media (max-width: 720px) { .giftbar__links { gap: 8px; } .giftbar__links a.giftbar__corp { padding: 2px 9px 2px 7px; font-size: .66rem; gap: 5px; font-weight: 800; } }
@media (max-width: 560px) { .giftbar__links a.giftbar__corp { padding: 2px 8px 2px 6px; font-size: .62rem; gap: 4px; } }

/* Bakery as a button with the same look as Corporate Gifting; it fills gold while the panel is open */
.giftbar__links .giftbar__btn { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 999px; background: #fff; color: var(--green-dark); font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.giftbar__links .giftbar__btn:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.35); }
.giftbar__links .giftbar__btn .giftbar__icon--bake { color: var(--green); }
.giftbar__links .giftbar__btn[aria-expanded="true"] { background: #f5d878; color: #3a2a05; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.35); }
.giftbar__links .giftbar__btn[aria-expanded="true"] .giftbar__icon--bake { color: #3a2a05; }
.giftbar__links .giftbar__btn span { margin-left: 0; }
/* Corner logos on the jar picture: let the hover label show */
#product .product-gallery__main .corner-logos img { pointer-events: auto; cursor: help; }
/* Glass jar box: a little smaller */
.glass-pill { gap: 8px; margin: 0 0 10px; padding: 6px 11px; border-radius: 11px; border-width: 1px; max-width: 460px; }
.glass-pill svg { width: 15px; height: 15px; }
.glass-pill span { font-size: .74rem; line-height: 1.25; }
.glass-pill b { font-size: .8rem; }
@media (max-width: 600px) { .glass-pill { padding: 5px 10px; gap: 7px; border-radius: 10px; max-width: none; } .glass-pill span { font-size: .68rem; } .glass-pill b { font-size: .76rem; } }

.kom-moq { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: #f6f4ea; border-left: 3px solid var(--green); font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.kom-moq b { color: var(--green-dark); }

/* Cashew Pure Range: the dark green fades smoothly to light at the bottom */
section#pure.pure--fade { background: linear-gradient(180deg, #1f3a10 0%, #2f5518 14%, #4d7a2a 34%, #86ad57 56%, #c6dca0 78%, #eef5dc 100%); }
section#pure.pure--fade::before { background: linear-gradient(90deg, #4f7a22, #d9ec9a, #4f7a22); }

/* All range backgrounds (Pure, Classic, Gourmet, Indulge): each colour fades from dark at the top to light at the bottom */
section#pure { background: linear-gradient(180deg, #1f3a10 0%, #2f5518 14%, #4d7a2a 34%, #86ad57 56%, #c6dca0 78%, #eef5dc 100%); }
section#classic { background: linear-gradient(180deg, #4a1208 0%, #6a2010 14%, #9a3f1f 34%, #c9805a 56%, #ebc9ab 78%, #fbefe1 100%); }
section#gourmet { background: linear-gradient(180deg, #6b3a0f 0%, #85501a 14%, #ad7a3c 34%, #d1a870 56%, #ecd5ad 78%, #fbf3e2 100%); }
section#indulge { background: linear-gradient(180deg, #2a1810 0%, #3d2316 14%, #6b4a33 34%, #a58468 56%, #d9c3ae 78%, #f6eee6 100%); }

/* Cashew "Grown on the Kenyan coast": Kenya flag colours (black, red, green) on warm cream, cashew-apple accents */
.promise--coast { position: relative; overflow: hidden; padding-block: 84px 72px; background: linear-gradient(180deg, #fdf5e1 0%, #f6f4df 38%, #e8f1d2 100%); }
.promise--coast .coast__waves { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: linear-gradient(180deg, #111 0 30%, #fff 30% 36%, #b50d0d 36% 64%, #fff 64% 70%, #0f7a3a 70% 100%); }
.promise--coast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #111 0 33%, #b50d0d 33% 66%, #0f7a3a 66% 100%); }
.promise--coast .section__head .tag { background: #0f7a3a; color: #fff; border: 0; letter-spacing: .1em; }
.promise--coast .section__head h2 { color: #0b3d1c; }
.coast__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; }
.coast__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid #d3e2bf; color: #0b5d2c; font-weight: 700; font-size: .84rem; box-shadow: 0 2px 8px rgba(15,90,40,.12); }
.coast__chips span svg { color: #b50d0d; }
.coast__chips span img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.promise--coast .promise__card { border-color: #dde8cc; box-shadow: 0 12px 28px rgba(40,70,20,.12); }
.promise--coast .promise__card::before { background: linear-gradient(90deg, #111 0 33%, #b50d0d 33% 66%, #0f7a3a 66% 100%); }
.promise--coast .promise__icon { background: linear-gradient(145deg, #1b9a4c, #0b5d2c); box-shadow: 0 0 0 6px #e7f3dc; }
.promise--coast .promise__card h3 { color: #0b5d2c; }
.promise--coast .promise__num { color: #b50d0d; opacity: .75; }
@media (max-width: 600px) { .promise--coast { padding-block: 70px 56px; } .coast__chips span { font-size: .76rem; padding: 4px 11px; } }

/* Corporate Gifting drop-down (gift package sizes) */
.giftbar__links .giftbar__btn.giftbar__corp { color: var(--green-dark) !important; }
.giftbar__links .giftbar__btn.giftbar__corp[aria-expanded="true"] { background: #f5d878; color: #3a2a05 !important; }
.giftbar__links .giftbar__btn.giftbar__corp[aria-expanded="true"] .giftbar__icon--corp { color: #3a2a05; }
.giftbar__panel-inner--one { grid-template-columns: minmax(0, 1fr); }
.size-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.giftbar__panel a.size-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--border); color: #1f2d12; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.giftbar__panel a.size-item:hover { background: var(--bg-tint); border-color: var(--green); transform: translateY(-2px); }
.size-item__tag { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--green-dark); }
.size-item__name { font-size: .78rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }
/* Keep the Corporate Gifting button and its sizes panel on phones too */
@media (max-width: 900px) {
  .giftbar__drop--corp { display: inline-flex !important; }
  .giftbar__panel--corp:not([hidden]) { display: block !important; }
  .giftbar__panel--corp { padding: 14px 0 18px; }
  .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .giftbar__panel--corp .mega-title { font-size: 1.5rem; }
}
@media (max-width: 720px) {
  .giftbar__links .giftbar__btn.giftbar__corp { padding: 2px 9px 2px 7px; font-size: .66rem; gap: 5px; font-weight: 800; }
  .giftbar__links { gap: 8px; }
}
@media (max-width: 560px) { .giftbar__links .giftbar__btn.giftbar__corp { padding: 2px 8px 2px 6px; font-size: .62rem; gap: 4px; } }

/* Gift basket sizes: tabs + contents */
.giftbar__panel button.size-item { font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--border); color: #1f2d12; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.giftbar__panel button.size-item:hover { background: var(--bg-tint); border-color: var(--green); }
.giftbar__panel button.size-item.is-on { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); }
.size-item.is-on .size-item__tag, .size-item.is-on .size-item__name { color: #fff; }
.size-details { margin-top: 14px; }
.size-detail { background: #fff; border: 2px solid var(--green); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.size-detail[hidden] { display: none; }
.size-detail__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.size-detail__head h3 { margin: 0; font-size: 1.05rem; color: var(--green-dark); flex: 1 1 auto; }
.size-basket { color: var(--green); display: grid; place-items: center; }
.size-price { font-weight: 800; color: var(--green-dark); background: #f5d878; padding: 4px 12px; border-radius: 999px; font-size: .85rem; }
.size-price--ask { background: var(--bg-tint); font-weight: 700; }
.size-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.size-list li { position: relative; padding-left: 20px; font-size: .95rem; color: #1f2d12; }
.size-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.size-soon { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.giftbar__panel a.size-ask { align-self: flex-start; padding: 8px 18px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 800; font-size: .85rem; text-decoration: none; }
.giftbar__panel a.size-ask:hover { background: var(--green-dark); }
@media (max-width: 720px) { .size-list { grid-template-columns: 1fr; } }

/* Small pictures next to basket items */
.size-list li { display: flex; align-items: center; gap: 12px; padding-left: 0; }
.size-list li::before { content: none; }
.size-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--bg-tint); border: 1px solid var(--border); font-size: 1.5rem; line-height: 1; }
.size-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Microplastic-free badge in the glass jar box */
.glass-pill { gap: 12px; max-width: 520px; }
.glass-pill .glass-pill__badge { flex: 0 0 auto; width: 56px; height: 56px; }
@media (max-width: 600px) { .glass-pill { gap: 10px; } .glass-pill .glass-pill__badge { width: 46px; height: 46px; } }

/* Moringa leaves growing in from the top-right corner of the product section */
.has-leaf { position: relative; overflow: hidden; }
.has-leaf > .container { position: relative; z-index: 1; }
.leaf-corner { position: absolute; top: 0; right: 0; width: clamp(150px, 20vw, 300px); height: auto; z-index: 0; pointer-events: none; user-select: none; }
@media (max-width: 600px) { .leaf-corner { width: 130px; opacity: .9; } }

/* Sesame seeds pouring in from the top-right corner (photo has a white background, so it is blended in and mirrored) */
.leaf-corner--seeds { width: clamp(170px, 24vw, 340px); transform: scaleX(-1); mix-blend-mode: multiply; }
@media (max-width: 600px) { .leaf-corner--seeds { width: 140px; } }

/* Seeds pages: Made in Kenya + KEBS marks small, side by side, just below the jar picture */
.product-hero__media .corner-marks { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 8px; }
.corner-marks .kebs-mark { position: static; width: 28px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.corner-marks .kebs-mark img { border-radius: 4px; }
.corner-marks .kenya-mark { position: static; width: 26px; }
.corner-marks .kenya-mark img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.2)); }
@media (max-width: 600px) { .corner-marks .kebs-mark { width: 24px; } .corner-marks .kenya-mark { width: 22px; } }

/* Live Nairobi weather in the bottom-right corner of the Contact hero */
.contacthero { position: relative; }
.contacthero .weather-live { position: absolute; right: 18px; bottom: 18px; z-index: 2; margin: 0; max-width: calc(100% - 36px); gap: 10px; padding: 8px 14px 8px 10px; border: 0; border-left: 4px solid var(--green); border-radius: 12px; background: rgba(255,255,255,.93); box-shadow: 0 4px 14px rgba(0,0,0,.25); backdrop-filter: blur(4px); }
.contacthero .weather-live__ic { font-size: 1.6rem; }
.contacthero .weather-live__main { min-width: 0; }
.contacthero .weather-live__temp { font-size: 1.2rem; line-height: 1.05; }
.contacthero .weather-live__desc { font-size: .72rem; line-height: 1.1; }
.contacthero .weather-live__meta { padding-left: 10px; border-left: 1px solid #d4dcc0; }
.contacthero .weather-live__place { font-size: .64rem; white-space: nowrap; }
.contacthero .weather-live__more { display: none; }
@media (max-width: 600px) { .contacthero .weather-live { right: 10px; bottom: 10px; padding: 5px 10px 5px 8px; gap: 8px; } .contacthero .weather-live__ic { font-size: 1.2rem; } .contacthero .weather-live__temp { font-size: 1rem; } }

/* Switchable picture (Indulge range) */
.range-split__pic--switch { cursor: pointer; }
.range-split__pic--switch .rs-slide { opacity: 0; transition: opacity .7s ease; }
.range-split__pic--switch .rs-slide.is-on { opacity: 1; }
.rs-dots { position: absolute; right: 14px; bottom: 18px; z-index: 2; display: flex; gap: 8px; }
.rs-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.35); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.rs-dot.is-on { background: #fff; }
@media (max-width: 960px) { .rs-dots { right: 10px; bottom: 14px; } }

/* Gift bag picture in the corporate gifting basket */
.size-detail__body { display: flex; align-items: center; gap: 18px; }
.size-detail__body .size-list { flex: 1 1 auto; }
.size-bag { flex: 0 0 auto; width: 120px; height: 120px; object-fit: contain; }
.size-thumb img[src*="gift-bag"] { object-fit: contain; padding: 2px; background: #fff; }
@media (max-width: 720px) { .size-bag { width: 84px; height: 84px; } .size-detail__body { gap: 10px; } }

.size-bag-wrap { flex: 0 0 auto; display: grid; place-items: center; padding: 6px; border-radius: 18px; background: #e9f0da; }
.size-bag-wrap .size-bag { mix-blend-mode: multiply; display: block; }

/* Seven gift sizes (XXS to XXL) */
.size-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 900px) { .size-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Gift bar pills a little smaller on computer screens (Corporate Gifting, Bakery, Gift Card) */
@media (min-width: 721px) {
  .giftbar__links a.giftbar__gift,
  .giftbar__links .giftbar__btn { padding: 2px 11px 2px 9px; font-size: .7rem; gap: 5px; letter-spacing: .02em; }
  .giftbar__links .giftbar__icon { width: 12px; height: 12px; }
  .giftbar__links { gap: 16px; }
}

/* Occasions Gifting as a white pill like Corporate Gifting and Bakery (computer screens; hidden on phones as before) */
.giftbar__links a.giftbar__occ { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 999px; background: #fff; color: var(--green-dark) !important; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.giftbar__links a.giftbar__occ:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.35); text-decoration: none; }
.giftbar__icon--occ { color: var(--green); }
@media (min-width: 721px) { .giftbar__links a.giftbar__occ { padding: 2px 11px 2px 9px; font-size: .7rem; gap: 5px; } .giftbar__links a.giftbar__occ .giftbar__icon { width: 12px; height: 12px; } }
@media (max-width: 720px) { .giftbar__links a.giftbar__occ { display: none; } }

/* The glass jar box is a link to the Glass Jars page (opens in a new tab) */
a.glass-pill { text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
a.glass-pill:hover { box-shadow: 0 4px 14px rgba(29,90,115,.22); transform: translateY(-1px); }
.glass-pill__go { flex: 0 0 auto; align-self: center; font-style: normal; font-weight: 800; font-size: .74rem; color: #1d5a73; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #a9d3e4; }
@media (max-width: 600px) { .glass-pill__go { font-size: .66rem; padding: 3px 8px; } }

/* Glass Jars page */
.gjhero { position: relative; color: #fff; padding: 110px 0 100px; background: linear-gradient(100deg, rgba(14,40,14,.88), rgba(30,70,22,.62)), url("../assets/farmhero-bg.jpg") center 40%/cover no-repeat; }
.gjhero__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.gjhero__text { max-width: 640px; }
.gjhero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 4.4rem); margin: 10px 0 12px; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.gjhero p { font-size: 1.2rem; color: rgba(255,255,255,.92); margin: 0; }
.gjhero__badge { flex: 0 0 auto; width: clamp(110px, 16vw, 190px); height: auto; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.gjintro { background: #eef7fb; border-bottom: 1px solid #cfe5ef; }
.gjintro .container { max-width: 880px; padding-block: 38px; }
.gjintro__lead { margin: 0; text-align: center; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.5; color: #1d5a73; font-weight: 600; }
.gjcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.gjcard { background: #fff; border: 1px solid var(--border); border-top: 5px solid var(--green); border-radius: 18px; padding: 26px 24px; box-shadow: 0 10px 26px rgba(31,36,23,.08); }
.gjcard--refund { border-top-color: #e6bf58; }
.gjcard__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--bg-tint); color: var(--green-dark); margin-bottom: 14px; }
.gjcard h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--green-dark); }
.gjcard p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.gjcard__big { margin-top: 12px !important; display: inline-block; padding: 6px 16px; border-radius: 999px; background: #f5d878; color: #3a2a05 !important; font-weight: 800; }
.gjnote { text-align: center; margin: 26px auto 0; max-width: 640px; color: var(--ink-soft); }
.gjshelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.gjjar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 18px; background: #fff; border: 1px solid var(--border); border-radius: 18px; text-decoration: none; color: var(--green-dark); font-weight: 800; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.gjjar:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31,36,23,.16); }
.gjjar img { width: 100%; max-width: 190px; height: auto; border-radius: 10px; }
.gjchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.gjchips a { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--green); color: var(--green-dark); font-weight: 700; text-decoration: none; }
.gjchips a:hover { background: var(--green); color: #fff; }
@media (max-width: 860px) { .gjcards { grid-template-columns: 1fr; } .gjshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gjhero { padding: 70px 0 60px; } .gjhero__inner { flex-direction: column-reverse; align-items: flex-start; } .gjhero__badge { width: 96px; } .gjhero p { font-size: 1.02rem; } }

/* Glass Jars page: where microplastics come from */
.gjsource { padding-bottom: 0; }
.gjsource__box { max-width: 860px; margin: 0 auto; padding: 30px 32px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--border); border-left: 6px solid #3b8fb3; box-shadow: 0 10px 26px rgba(31,36,23,.08); }
.gjsource__box .section__head { text-align: left; margin-bottom: 12px; }
.gjsource__lead { margin: 0 0 14px; font-size: 1.12rem; line-height: 1.6; color: #1f2d12; font-weight: 600; }
.gjsource__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gjsource__list li { position: relative; padding-left: 28px; line-height: 1.6; color: var(--ink-soft); }
.gjsource__list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: #3b8fb3; }
@media (max-width: 600px) { .gjsource__box { padding: 22px 18px; } }

/* Glass Jars page: more compact on phones */
@media (max-width: 600px) {
  .gjhero { padding: 34px 0 30px; }
  .gjhero__inner { flex-direction: row; align-items: center; gap: 14px; }
  .gjhero h1 { font-size: 2.1rem; margin: 6px 0 6px; }
  .gjhero p { font-size: .92rem; line-height: 1.35; }
  .gjhero__badge { width: 78px; padding: 4px; }
  .gjintro .container { padding-block: 18px; }
  .gjintro__lead { font-size: 1rem; line-height: 1.45; }
  .gjsource, .gjwhy, .gjjars { padding-block: 26px; }
  .gjsource { padding-bottom: 0; }
  .gjwhy .section__head, .gjjars .section__head { margin-bottom: 12px; }
  .gjwhy .section__head h2, .gjjars .section__head h2, .gjsource__box .section__head h2 { font-size: 1.3rem; margin: 6px 0 0; }
  .gjsource__box { padding: 16px 16px 14px; border-radius: 16px; }
  .gjsource__box .section__head { margin-bottom: 8px; }
  .gjsource__lead { font-size: .98rem; margin-bottom: 10px; line-height: 1.5; }
  .gjsource__list { gap: 6px; }
  .gjsource__list li { font-size: .9rem; line-height: 1.45; padding-left: 22px; }
  .gjcards { gap: 10px; margin-top: 0; }
  .gjcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 14px; border-radius: 14px; border-top-width: 4px; }
  .gjcard__ic { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .gjcard__ic svg { width: 24px; height: 24px; }
  .gjcard h3 { font-size: 1.02rem; margin: 0 0 3px; }
  .gjcard p { font-size: .88rem; line-height: 1.45; }
  .gjcard__big { margin-top: 8px !important; justify-self: start; padding: 4px 12px; font-size: .84rem; }
  .gjnote { margin-top: 14px; font-size: .88rem; line-height: 1.45; }
  .gjshelf { gap: 10px; margin-top: 0; }
  .gjjar { padding: 10px 8px 12px; gap: 6px; border-radius: 14px; font-size: .88rem; }
  .gjjar img { max-width: 108px; }
  .gjchips { gap: 8px; margin-top: 14px; }
  .gjchips a { padding: 6px 13px; font-size: .84rem; }
  .gjcontact-wrap, .legal__contact { font-size: .9rem; }
}

/* Glass Jars page: nicer cards */
.gjwhy { background: linear-gradient(180deg, #fff 0%, #f1f7ea 100%); }
.gjcards { gap: 26px; }
.gjcard { position: relative; overflow: hidden; text-align: center; padding: 30px 26px 28px; border: 1px solid #dfe9c9; border-top-width: 1px; border-radius: 22px; box-shadow: 0 14px 34px rgba(31,36,23,.10); transition: transform .2s ease, box-shadow .2s ease; }
.gjcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--green), #8cc152); }
.gjcard--refund::before { background: linear-gradient(90deg, #e6bf58, #f5d878); }
.gjcard:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(31,36,23,.16); }
.gjcard__ic { margin: 0 auto 16px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #7baa41); color: #fff; box-shadow: 0 8px 18px rgba(77,111,24,.35); }
.gjcard--refund .gjcard__ic { background: linear-gradient(135deg, #d9a82f, #f0cd62); color: #3a2a05; box-shadow: 0 8px 18px rgba(201,154,46,.4); }
.gjcard__ic svg { width: 32px; height: 32px; }
.gjcard h3 { font-size: 1.3rem; margin-bottom: 10px; }
.gjcard__stat { display: block; margin: 0 auto 12px; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--green-dark); letter-spacing: -.02em; }
.gjcard__stat small { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.gjcard__stat--txt { font-size: 1.5rem; line-height: 1.15; padding-top: 14px; }
.gjcard__stat--gold { color: #8a6410; }
.gjcard p { font-size: .98rem; }
@media (max-width: 860px) { .gjcard:hover { transform: none; } }
@media (max-width: 600px) {
  .gjcard { text-align: left; }
  .gjcard::before { height: 4px; }
  .gjcard__ic { width: 44px; height: 44px; margin: 0; box-shadow: none; }
  .gjcard__stat { grid-column: 2; display: inline-block; justify-self: start; margin: 0 0 4px; font-size: 1.15rem; letter-spacing: 0; }
  .gjcard__stat small { display: inline; margin: 0 5px 0 0; font-size: .68rem; letter-spacing: .08em; }
  .gjcard__stat--txt { font-size: .95rem; padding-top: 0; }
}

/* Our Process, Packaging and Sealing: four pictures taking turns */
.step__slides--4 .step__slide { animation-name: step-fade-4; animation-duration: 16s; }
.step__slides--4 .step__slide:nth-child(1) { animation-delay: 0s; }
.step__slides--4 .step__slide:nth-child(2) { animation-delay: -12s; }
.step__slides--4 .step__slide:nth-child(3) { animation-delay: -8s; }
.step__slides--4 .step__slide:nth-child(4) { animation-delay: -4s; }
@keyframes step-fade-4 { 0% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } }

/* Home: 100% Transparent Food, nicer look */
.trace-sec { background: radial-gradient(circle at 12% 20%, #eef6dc 0, rgba(238,246,220,0) 45%), radial-gradient(circle at 92% 85%, #f6efd6 0, rgba(246,239,214,0) 40%), #fff; }
.trace-sec .trace { gap: 64px; }
.trace__frame { position: relative; padding: 12px; border-radius: 28px; background: linear-gradient(145deg, #dff0bf, #fff 55%, #f3e6b8); box-shadow: 0 24px 50px rgba(40,60,20,.18); }
.trace__frame::before { content: ""; position: absolute; inset: -14px 28px auto -14px; height: 60%; border-radius: 30px; border: 2px dashed rgba(94,125,31,.35); z-index: -1; }
.trace__frame img { display: block; width: 100%; height: auto; border-radius: 18px; object-fit: cover; }
.trace__badge { position: absolute; left: 22px; bottom: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--green-dark); color: #fff; font-weight: 800; font-size: .84rem; letter-spacing: .02em; box-shadow: 0 10px 24px rgba(31,45,18,.35); }
.trace-sec .trace__content h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 10px 0 14px; position: relative; padding-bottom: 14px; }
.trace-sec .trace__content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--green), #e6bf58); }
.trace__lead { font-size: 1.08rem; color: #1f2d12; font-weight: 600; line-height: 1.6; }
.trace__list { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 10px; }
.trace__list li { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 16px; background: #fff; border: 1px solid #e3ebd0; box-shadow: 0 4px 14px rgba(40,55,20,.06); font-weight: 600; color: #1f2d12; line-height: 1.4; transition: transform .15s ease, box-shadow .15s ease; }
.trace__list li:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(40,55,20,.12); }
.trace__ic { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #7baa41); color: #fff; box-shadow: 0 5px 12px rgba(77,111,24,.3); }
@media (max-width: 960px) { .trace-sec .trace { gap: 40px; } .trace__frame { margin-bottom: 14px; } }
@media (max-width: 600px) {
  .trace-sec .trace { gap: 30px; }
  .trace__frame { padding: 8px; border-radius: 20px; }
  .trace__frame img { border-radius: 14px; }
  .trace__frame::before { display: none; }
  .trace__badge { left: 12px; bottom: -14px; padding: 8px 13px; font-size: .74rem; }
  .trace__lead { font-size: 1rem; }
  .trace__list { gap: 8px; margin: 14px 0 18px; }
  .trace__list li { padding: 9px 12px; gap: 11px; font-size: .9rem; border-radius: 14px; }
  .trace__ic { width: 36px; height: 36px; }
  .trace__ic svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .trace__list li { transition: none; } .trace__list li:hover { transform: none; } }

/* Footer without the Help column: brand + Company + Shop */
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .footer__grid .footer__col:last-child { grid-column: auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--border); }
  .footer__grid .footer__col:last-child h4 { flex-basis: auto; }
}

/* Touch screens: a tap leaves the "hover" state stuck, which froze the automatic picture changes (and the marquees); keep them running */
@media (hover: none) {
  .slides:hover .slide, .step__slides:hover .step__slide, .logo-marquee:hover .logo-marquee__track, .logo-marquee:focus-within .logo-marquee__track, .ticker:hover .ticker__track { animation-play-state: running; }
}

/* Corporate Gifting sizes panel on phones: fits the screen (scrolls inside if needed) and is more compact */
@media (max-width: 900px) {
  .giftbar__panel--corp { max-height: calc(100vh - 165px); max-height: calc(100dvh - 165px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 0 14px; }
  .giftbar__panel--corp .mega-card { padding: 12px; gap: 8px; border-radius: 14px; }
  .giftbar__panel--corp .mega-title { font-size: 1.25rem; padding-bottom: 6px; margin-bottom: 0; }
  .size-grid { gap: 6px; }
  .giftbar__panel button.size-item { padding: 8px 2px; border-radius: 10px; gap: 0; }
  .size-item__tag { font-size: 1.05rem; }
  .size-item__name { display: none; }
  .size-details { margin-top: 8px; }
  .size-detail { padding: 10px 12px; gap: 6px; border-radius: 12px; }
  .size-detail__head h3 { font-size: .92rem; }
  .size-detail__head .size-basket svg { width: 20px; height: 20px; }
  .size-price { font-size: .78rem; padding: 3px 10px; }
  .size-list { grid-template-columns: 1fr 1fr; gap: 4px 8px; }
  .size-list li { font-size: .78rem; gap: 7px; }
  .size-thumb { width: 30px; height: 30px; border-radius: 8px; font-size: 1.05rem; }
  .size-detail__body { gap: 8px; }
  .size-bag-wrap { padding: 3px; border-radius: 12px; }
  .size-bag { width: 64px; height: 64px; }
  .giftbar__panel a.size-ask { padding: 6px 14px; font-size: .78rem; }
  .size-soon { font-size: .82rem; }
}

/* Mendiants jar pictures on the cards (replace the chocolate emoji) */
.card__img--mend1, .card__img--mend2, .card__img--mend3, .card__img--mend4 { background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain; }
.card__img--mend1::after, .card__img--mend2::after, .card__img--mend3::after, .card__img--mend4::after { content: none; }
.card__img--mend1 { background-image: url("../assets/mendiants-dark.jpg"); }
.card__img--mend2 { background-image: url("../assets/mendiants-mix.webp"); }
.card__img--mend3 { background-image: url("../assets/mendiants-milk.webp"); }
.card__img--mend4 { background-image: url("../assets/mendiants-white.webp"); }

/* Mendiants: choose the chocolate (links to the four pages) */
.choc-pick a.variant { text-decoration: none; color: inherit; display: inline-block; }

/* Clusters page: How we manufacture picture under the jar picture */
.make-pic { position: relative; margin: 20px 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.make-pic img { display: block; width: 100%; height: auto; }
.make-pic figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--green-dark); font-weight: 800; font-size: .86rem; letter-spacing: .03em; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
/* On phones the picture goes after the choices and the cart instead of pushing them down */
@media (max-width: 960px) {
  .product-hero--make .product-hero__media { display: contents; }
  .product-hero--make .product-gallery { order: 1; }
  .product-hero--make .product-hero__info { order: 2; }
  .product-hero--make .make-pic { order: 3; }
}
@media (max-width: 600px) { .make-pic figcaption { left: 10px; bottom: 10px; padding: 5px 12px; font-size: .74rem; } }

/* How we deliver: the scooter and the van move (drive along, bob, speed lines, road) */
.deliver__art--photo { position: relative; animation: dDrive 5.5s ease-in-out infinite alternate; }
.deliver__art--photo img { animation: dBob .55s ease-in-out infinite alternate; }
.deliver__art--photo::before { content: ""; position: absolute; left: -6%; top: 46%; width: 22%; height: 40px; z-index: 2; pointer-events: none;
  background: linear-gradient(#b9c79a, #b9c79a) 0 0 / 100% 3px no-repeat, linear-gradient(#b9c79a, #b9c79a) 0 16px / 70% 3px no-repeat, linear-gradient(#b9c79a, #b9c79a) 0 32px / 48% 3px no-repeat;
  border-radius: 3px; animation: dSpeed 1.2s ease-in-out infinite; }
.deliver__art--van::before { background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 0 0 / 100% 3px no-repeat, linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 0 16px / 70% 3px no-repeat, linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 0 32px / 48% 3px no-repeat; left: 2%; top: 50%; }
.deliver__art--bike::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 2px; height: 3px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, #c5d0a8 0 14px, transparent 14px 26px); background-size: 26px 3px; animation: dRoadP .8s linear infinite; }
@keyframes dRoadP { to { background-position-x: -26px; } }
@media (prefers-reduced-motion: reduce) { .deliver__art--photo, .deliver__art--photo img, .deliver__art--photo::before, .deliver__art--bike::after { animation: none; } }
.deliver__art--van { animation-delay: -2.7s; }
.deliver__art--van img { animation-delay: -.3s; }

/* Made in Kenya mark in the corner of the About picture */
.slides__mark { position: absolute; top: 12px; right: 12px; z-index: 3; width: 46px; height: auto; padding: 2px; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.28); pointer-events: none; }
@media (max-width: 600px) { .slides__mark { top: 8px; right: 8px; width: 36px; } }

/* About: Kenya x Belgium story, more attractive */
.story2 { background: radial-gradient(circle at 8% 12%, #f3e9c9 0, rgba(243,233,201,0) 42%), radial-gradient(circle at 95% 90%, #e3efcd 0, rgba(227,239,205,0) 45%), #faf8ef; }
.story2__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 60px; align-items: center; }
.story2__text h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 10px 0 18px; padding-bottom: 14px; position: relative; }
.story2__text h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #1f1f1f 0 33%, #e6bf58 33% 66%, #c2301e 66%); }
#story.story2 .story2__lead { font-size: 1.25rem; line-height: 1.6; font-weight: 600; color: #1f2d12; margin: 0 0 14px; }
#story.story2 .story2__text p { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); margin: 0 0 14px; }
.story2__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.story2__chips span { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--green); color: var(--green-dark); font-weight: 800; font-size: .84rem; letter-spacing: .02em; box-shadow: 0 3px 10px rgba(40,55,20,.08); }
.story2__art { position: relative; padding: 14px; transform: rotate(2deg); }
.story2__art::before { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(135deg, #1f1f1f 0 33%, #e6bf58 33% 66%, #c2301e 66%); opacity: .9; transform: rotate(-4deg); }
.story2__art img { position: relative; display: block; width: 100%; height: auto; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 22px 46px rgba(31,45,18,.28); }
.story2__pill { position: absolute; bottom: 0; z-index: 2; padding: 9px 20px; border-radius: 999px; background: #fff; color: #1f2d12; font-weight: 800; font-size: .95rem; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.story2__pill--ke { left: 6%; border-bottom: 4px solid #1f6b2c; }
.story2__pill--be { right: 6%; border-bottom: 4px solid #e6bf58; }
.story2__x { position: absolute; left: 50%; bottom: -6px; z-index: 3; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--green-dark); color: #fff; font-size: 1.5rem; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
@media (max-width: 860px) { .story2__grid { grid-template-columns: 1fr; gap: 40px; } .story2__art { max-width: 520px; margin: 0 auto; width: 100%; } }
@media (max-width: 600px) {
  #story.story2 { padding: 34px 0 40px; }
  .story2__text h2 { font-size: 1.55rem; margin-bottom: 14px; padding-bottom: 10px; }
  #story.story2 .story2__lead { font-size: 1.02rem !important; line-height: 1.55 !important; }
  #story.story2 .story2__text p { font-size: .92rem !important; line-height: 1.65 !important; }
  .story2__chips { gap: 8px; } .story2__chips span { padding: 6px 12px; font-size: .74rem; }
  .story2__art { padding: 8px; transform: rotate(1.2deg); } .story2__art img { border-width: 4px; border-radius: 14px; }
  .story2__pill { padding: 6px 14px; font-size: .78rem; } .story2__x { width: 34px; height: 34px; font-size: 1.15rem; }
}

/* Price comparison hero: a price-tag and bar-chart picture behind the title */
.farmhero.pchero { overflow: hidden; padding: 110px 0 120px; background: linear-gradient(115deg, #1a3410 0%, #2f5a17 55%, #4d7a1f 100%); }
.pchero::before { content: ""; position: absolute; inset: 0; background: url("../assets/price-compare-bg.svg") center bottom / cover no-repeat; pointer-events: none; }
.pchero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(15,32,8,.55) 0, rgba(15,32,8,0) 62%); pointer-events: none; }
.pchero .farmhero__inner { position: relative; z-index: 1; max-width: 820px; padding-block: 0; }
.pchero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 12px 0 14px; text-shadow: 0 3px 16px rgba(0,0,0,.4); }
.pchero p { font-size: 1.15rem; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pchero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.pchero__chips span { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: .88rem; backdrop-filter: blur(3px); }
.pchero__chips b { color: #d4ec6a; font-size: 1.05em; }
@media (max-width: 600px) {
  .farmhero.pchero { padding: 40px 0 76px; }
  .pchero h1 { font-size: 1.75rem !important; margin: 8px 0 8px !important; }
  .pchero p { font-size: .95rem !important; }
  .pchero__chips { gap: 6px; margin-top: 14px; } .pchero__chips span { padding: 6px 11px; font-size: .74rem; }
  .pchero::before { background-position: center bottom; background-size: auto 70%; }
}

/* Seeds page hero: seed piles pouring in from the top corners on a warm background */
.farmhero--seeds { overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #fffdf6 0, #f6f0dc 70%); padding: 100px 0 90px; }
.farmhero--seeds .farmhero__inner { position: relative; z-index: 2; } .farmhero--seeds .farmhero__inner::before { content: ""; position: absolute; inset: -30px -40px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,253,246,.92) 0, rgba(255,253,246,0) 72%); }
.farmhero--seeds .tag { background: var(--green-dark); color: #fff; }
.farmhero--seeds h1 { color: #1f2d12; text-shadow: none; }
.farmhero--seeds p { color: #3f4f2a; font-size: 1.15rem; }
.seedhero__pile { position: absolute; top: 0; width: clamp(200px, 22vw, 340px); height: auto; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.seedhero__pile--l { left: 0; }
.seedhero__pile--r { right: 0; transform: scaleX(-1); }
@media (max-width: 700px) {
  .farmhero--seeds { padding: 48px 0 44px; }
  .farmhero--seeds h1 { font-size: 1.7rem; }
  .farmhero--seeds p { font-size: .95rem; }
  .seedhero__pile { width: 46%; opacity: .9; }
}

/* Small logos next to the Partners menu items */
.nav__submenu a[href="rubis.html"]::before, .nav__submenu a[href="supermarkets.html"]::before, .nav__submenu a[href="corporate-events.html"]::before, .nav__submenu a[href="club500.html"]::before, .nav__submenu a[href="become-a-partner.html"]::before,
.megapanel a.mega-item[href="rubis.html"] .mega-name::before, .megapanel a.mega-item[href="supermarkets.html"] .mega-name::before, .megapanel a.mega-item[href="corporate-events.html"] .mega-name::before, .megapanel a.mega-item[href="club500.html"] .mega-name::before, .megapanel a.mega-item[href="become-a-partner.html"] .mega-name::before {
  content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 10px; vertical-align: middle; border-radius: 6px; background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; top: -1px;
}
.nav__submenu a[href="rubis.html"]::before, .megapanel a.mega-item[href="rubis.html"] .mega-name::before { background-image: url(../assets/enjoy-logo.jpg); }
.nav__submenu a[href="club500.html"]::before, .megapanel a.mega-item[href="club500.html"] .mega-name::before { background-image: url(../assets/club500/club500-mark.png); }
.nav__submenu a[href="supermarkets.html"]::before, .megapanel a.mega-item[href="supermarkets.html"] .mega-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7H6'/%3E%3Ccircle cx='9.5' cy='20' r='1.2'/%3E%3Ccircle cx='17.5' cy='20' r='1.2'/%3E%3C/svg%3E"); }
.nav__submenu a[href="corporate-events.html"]::before, .megapanel a.mega-item[href="corporate-events.html"] .mega-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12M12 8c-1.5-3-5-3.5-5-1.2C7 8 9 8 12 8zM12 8c1.5-3 5-3.5 5-1.2C17 8 15 8 12 8z'/%3E%3C/svg%3E"); }
.nav__submenu a[href="become-a-partner.html"]::before, .megapanel a.mega-item[href="become-a-partner.html"] .mega-name::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b1f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-8-4.6-8-10.2A4.3 4.3 0 0 1 12 8a4.3 4.3 0 0 1 8 2.3c0 5.600-8 10.200-8 10.200z'/%3E%3Cpath d='M12 11v4M10 13h4'/%3E%3C/svg%3E"); }

/* Corporate & Events hero: gift jar and gift bag on a warm background */
.farmhero--gift { padding: 80px 0 76px; }
.farmhero--gift .seedhero__pile { top: 50%; width: clamp(150px, 17vw, 260px); transform: translateY(-50%); }
.farmhero--gift .seedhero__pile--l { left: clamp(8px, 4vw, 70px); }
.farmhero--gift .seedhero__pile--r { right: clamp(8px, 4vw, 70px); transform: translateY(-50%); }
@media (max-width: 700px) {
  .farmhero--gift { padding: 40px 0 150px; }
  .farmhero--gift .seedhero__pile { top: auto; bottom: 8px; transform: none; width: 34%; max-width: 150px; opacity: 1; }
  .farmhero--gift .seedhero__pile--l { left: 8%; }
  .farmhero--gift .seedhero__pile--r { right: 8%; transform: none; }
}

/* Realistic Enjoy pouch photos (white background) sit directly on the shelf */
.flavour img[src$="-pouch.webp"] { box-shadow: none; border-radius: 0; background: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.28)); }

/* Gift basket picture inside a size box */
.size-pic { margin: 0; }
.size-pic img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border-radius: 12px; background: #000; }
.size-pic figcaption { margin-top: 6px; font-size: .78rem; color: #7a8068; text-align: center; }

/* Baobab page: pictures that change by themselves under the jar picture */
.make-pic--slides .slides { box-shadow: none; border-radius: 0; }
.make-pic--slides figcaption { z-index: 2; }
@media (min-width: 961px) { .make-pic--slides { margin-top: 130px; } }

/* Baobab fruit (cut out, no background) in the top-right corner like the seeds pages */
.leaf-corner--fruit { --fw: clamp(190px, 25vw, 370px); width: var(--fw); mix-blend-mode: normal; }
@media (max-width: 600px) { .leaf-corner--fruit { --fw: 112px; } .leaf-corner--fruit2 { right: calc(var(--fw) * .84); top: 2px; } }
/* second, smaller fruit next to the first for a good composition */
.leaf-corner--fruit2 { width: calc(var(--fw) * .56); right: calc(var(--fw) * .9); top: 8px; transform: scaleX(-1) rotate(9deg); }
@media (max-width: 960px) { .product-hero--make .corner-marks { order: 1; } }

/* Two baobab fruits as one picture, fully in view in the top-right corner */
.leaf-corner--pair { width: clamp(250px, 30vw, 470px); right: 14px; top: 8px; transform: none; mix-blend-mode: normal; opacity: 1; }
@media (max-width: 600px) { .leaf-corner--pair { width: 160px; right: 8px; top: 4px; opacity: 1; } #product.section.has-leaf:has(.leaf-corner--pair) { padding-top: 62px; } }

/* KNCCI Nairobi County badge in the trust band (six badges) */
.trust-band__badges { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.trust-band .trust-badge-card--kncci img { max-height: 36px; max-width: 92px; width: auto; height: auto; border-radius: 0; }
@media (max-width: 1100px) { .trust-band__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .trust-band__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trust-band__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-band__badges li:last-child { grid-column: auto; } .trust-band .trust-badge-card--kncci img { max-height: 28px; max-width: 72px; } }

/* Corporate Gifting sizes panel on computers: never taller than the window, scrolls inside so the whole basket can be seen */
@media (min-width: 901px) {
  .giftbar__panel--corp { max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .size-pic img { max-width: 400px; }
}

/* XL basket: list of what is in the basket next to the picture */
.size-detail__body--pic { align-items: flex-start; gap: 22px; }
.size-detail__body--pic .size-list--one { grid-template-columns: 1fr; flex: 1 1 260px; gap: 10px; }
.size-detail__body--pic .size-pic { flex: 1 1 300px; max-width: 400px; }
@media (max-width: 720px) { .size-detail__body--pic { flex-direction: column; align-items: stretch; gap: 10px; } .size-detail__body--pic .size-pic { order: -1; max-width: none; } }

/* "100 % Naturel" card: the farmer pictures change by themselves */
.highlight-card__art--slides .slides { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.highlight-card__art--slides .slide { object-position: center 30%; }

/* Gift basket: quantity and Add to basket */
.size-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.size-buy .size-ask { margin: 0; }
@media (max-width: 720px) { .size-buy { gap: 8px; } }
.size-buy .qty { flex: 0 0 auto; height: 46px; }

/* The Power of Nuts: nut photo behind a dark green veil, glass cards, gold line icons */
.section--power { position: relative; background: linear-gradient(180deg, rgba(22,32,10,.82) 0%, rgba(30,46,14,.68) 55%, rgba(22,32,10,.86) 100%), url("../assets/almonds-hero.jpg") center / cover no-repeat; overflow: hidden; }
.section--power .section__head h2 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.section--power .section__head h2::after { content: ""; display: block; width: 64px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: #f5d878; }
.section--power .section__head p { color: rgba(255,255,255,.86); }
.section--power .benefit { padding: 30px 20px 26px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.section--power .benefit:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); border-color: rgba(245,216,120,.7); }
.section--power .benefit__icon { width: 72px; height: 72px; margin-bottom: 18px; color: #f5d878; background: rgba(245,216,120,.12); border: 1.5px solid rgba(245,216,120,.65); }
.section--power .benefit h3 { margin: 0 0 8px; font-size: 1.15rem; }
.section--power .benefit p { color: rgba(255,255,255,.86); line-height: 1.5; }
@media (max-width: 600px) { .section--power .benefit { padding: 18px 12px 16px; border-radius: 16px; } .section--power .benefit__icon { width: 54px; height: 54px; margin-bottom: 10px; } .section--power .benefit__icon svg { width: 24px; height: 24px; } .section--power .benefit h3 { font-size: 1rem; } }
@media (hover: none) { .section--power .benefit:hover { transform: none; } }
@media (max-width: 960px) { .section--power .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 600px) { .section--power .grid--4 { gap: 10px; } .section--power .benefit p { font-size: .82rem; } }

/* Farmers map: tap Embu to see pictures from there */
.origin-map__lbl.is-link, .origin-map__dot.is-link, .origin-map path.is-link { cursor: pointer; }
.origin-map__lbl.is-link { pointer-events: auto; fill: #2f6b1f; text-decoration: underline; }
.origin-map path.is-link:hover, .origin-map path.is-link:focus { fill: #356a14; outline: none; }
.origin-hint { margin: -6px 0 14px; text-align: center; font-size: .84rem; color: var(--ink-soft); }
.origin-photos { margin: 0 0 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); }
.origin-photos[hidden] { display: none; }
.origin-photos__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f3f8e4; color: var(--green-dark); }
.origin-photos__close { border: none; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--green-dark); }
.origin-photos__pic { position: relative; aspect-ratio: 4 / 3; background: var(--cream); }
.origin-photos__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.origin-photos__pic img.is-on { opacity: 1; }

/* Peanut butter card: the real jar picture */
.card__img--pbpic { background: #fff url("../assets/peanut-butter-natural.webp") center / contain no-repeat; }
.card__img--pbpic::after { content: none; }

/* "incl. VAT" after a price */
.card__price.has-vat::after { content: "incl. VAT"; margin-left: 10px; font-size: .85rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft); vertical-align: middle; white-space: nowrap; }

/* All product pages: the green (vegetarian) and blue (diabetic friendly) logos stand under each other in the corner */
.product-gallery__main .corner-logos { flex-direction: column; align-items: flex-end; }

/* Peanut butter: the "How we make it" picture is as wide as the jar picture and sits a bit lower (computers) */
@media (min-width: 961px) { .product-hero:has(#pbInfo) .make-pic { margin-top: 150px; } }

/* Slimmer "Packed in glass" box on every page that has it (full width, smaller badge, less height) */
.glass-pill { max-width: none; padding: 5px 12px; gap: 10px; }
.glass-pill .glass-pill__badge { width: 38px; height: 38px; }
.glass-pill span { font-size: .78rem; line-height: 1.25; }
.glass-pill b { font-size: .86rem; }
.glass-pill__go { padding: 3px 10px; font-size: .72rem; }
@media (max-width: 600px) { .glass-pill { padding: 5px 10px; gap: 8px; } .glass-pill .glass-pill__badge { width: 34px; height: 34px; } .glass-pill span { font-size: .7rem; } .glass-pill b { font-size: .78rem; } .glass-pill__go { font-size: .66rem; padding: 3px 8px; } }

/* How to Preserve: icon tiles above the storage text */
.preserve-tiles { list-style: none; margin: 2px 0 12px; padding: 0 2px; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.preserve-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; text-align: center; border-radius: 14px; background: linear-gradient(180deg, #f6faea 0%, #edf5da 100%); border: 1px solid #d9e8bd; animation: preserve-in .35s ease both; }
.preserve-tile:nth-child(2) { animation-delay: .05s; } .preserve-tile:nth-child(3) { animation-delay: .1s; } .preserve-tile:nth-child(4) { animation-delay: .15s; } .preserve-tile:nth-child(5) { animation-delay: .2s; }
.preserve-tile__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--green-dark); box-shadow: 0 3px 8px rgba(60,90,20,.15); }
.preserve-tile b { font-size: .8rem; line-height: 1.25; color: var(--green-dark); }
.accordion__item p.preserve-note { margin-top: 2px; font-size: .84rem; color: var(--ink-soft); }
@keyframes preserve-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .preserve-tile { animation: none; } }
@media (max-width: 600px) { .preserve-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .preserve-tile { flex-direction: row; text-align: left; padding: 9px 10px; gap: 8px; } .preserve-tile__ic { width: 34px; height: 34px; flex: 0 0 auto; } .preserve-tile__ic svg { width: 18px; height: 18px; } .preserve-tile b { font-size: .74rem; } }

/* Product accordions: icon in each title, soft panel and chips when open */
.accordion__item summary { gap: 12px; }
.accordion__item .acc-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #edf5da; color: var(--green-dark); transition: background .2s ease, color .2s ease; }
.accordion__item .acc-title { flex: 1 1 auto; }
.accordion__item[open] .acc-ic { background: var(--green); color: #fff; }
.accordion__item.acc--allergen[open] .acc-ic { background: #e8a317; color: #fff; }
.accordion__item[open] > p:not(.preserve-note):not([hidden]) { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: #f7faee; border: 1px solid #e1ebcb; border-left: 4px solid var(--green); color: #34402a; font-size: .95rem; line-height: 1.6; }
.accordion__item.acc--allergen[open] > p:not(.preserve-note):not([hidden]) { background: #fff8e6; border-color: #f1dca0; border-left-color: #e8a317; }
.accordion__item[open] > p.acc-note { margin-top: 2px; }
.accordion__item[open] > * { animation: acc-in .3s ease both; }
.accordion__item[open] > summary { animation: none; }
.acc-chips { list-style: none; margin: 2px 0 12px; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 8px; }
.acc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #f3f8e4; border: 1px solid #d3e4b0; color: var(--green-dark); font-weight: 700; font-size: .86rem; }
.acc-chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
.acc-chip--warn { background: #fff4d6; border-color: #f0d68a; color: #8a5a00; }
@keyframes acc-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .accordion__item[open] > * { animation: none; } }
@media (max-width: 600px) { .accordion__item .acc-ic { width: 28px; height: 28px; } .accordion__item .acc-ic svg { width: 16px; height: 16px; } .accordion__item[open] > p:not(.preserve-note):not([hidden]) { padding: 11px 12px; font-size: .86rem; } .acc-chip { font-size: .78rem; padding: 6px 11px 6px 8px; } }

/* Phones: no newsletter sign-up band in the footer (it stays on computers) */
@media (max-width: 700px) { .footer__signup { display: none !important; } }

/* About story: the flags card floats, the Kenya / Belgium labels bob, the cross pulses, a warm glow sits behind */
.story2__cv { position: relative; display: block; width: 100%; height: auto; border-radius: 20px; border: 6px solid #fff; box-shadow: 0 22px 46px rgba(31,45,18,.28); background: #fff; }
.story2__art { animation: story-float 7s ease-in-out infinite; }
.story2__art::after { content: ""; position: absolute; inset: -6% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,191,88,.42), rgba(194,48,30,.12) 60%, rgba(0,0,0,0) 72%); filter: blur(8px); animation: story-glow 5s ease-in-out infinite; }
.story2__pill--ke { animation: story-bob 4s ease-in-out infinite; }
.story2__pill--be { animation: story-bob 4s ease-in-out -2s infinite; }
.story2__x { animation: story-pulse 2.6s ease-in-out infinite; }
@keyframes story-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-9px); } }
@keyframes story-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes story-glow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes story-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 0 0 rgba(47,107,31,.45); } 50% { box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 0 12px rgba(47,107,31,0); } }
@media (prefers-reduced-motion: reduce) { .story2__art, .story2__art::after, .story2__pill--ke, .story2__pill--be, .story2__x { animation: none; } }
@media (hover: none) { .story2__art, .story2__art::after, .story2__pill--ke, .story2__pill--be, .story2__x { animation-play-state: running; } }
@media (max-width: 600px) { .story2__cv { border-width: 4px; border-radius: 14px; } }
.team-member__photo--rider { object-position: center 40%; background: #fff; }
.team-member__photo--van { object-position: center 45%; }
.team-member__photo--founder { object-position: center 12%; background: #fff; }

/* Founder portrait: cut-out picture on a studio-style brand backdrop (soft light behind the head, floor shadow) */
.founder--pro .founder__media { position: relative; overflow: hidden; border-radius: 20px; background: radial-gradient(ellipse 85% 60% at 50% 26%, #a9cf62 0%, #6f9a34 42%, #3f6a1d 78%, #2c4b12 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 6px #e6bf58, 0 14px 30px rgba(0,0,0,.22); }
.founder--pro .founder__media::before { content: ""; position: absolute; left: 50%; bottom: -8%; width: 120%; height: 30%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,0) 65%); pointer-events: none; }
.founder--pro .founder__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.founder--pro .founder__photo { position: relative; z-index: 1; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.founder--pro .founder__badge { z-index: 2; background: #e6bf58; color: #2a2006; }

/* Special offers: cards with a real product picture */
.card__img--pic { background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain; }
.card__img--pic::after { content: none; }
#products .card .btn { align-self: stretch; text-align: center; }
#products .card__img--pic { height: 250px; background-size: contain; }
@media (max-width: 600px) { #products .card__img--pic { height: 170px; } }

/* Distributors map: the tapped country's city is marked and named right on the map */
.wm__citycard { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 16px)); padding: 7px 14px; border-radius: 10px; background: #1f2d12; color: #fff; font-weight: 800; font-size: .88rem; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.28); animation: wm-pop .25s ease both; }
.wm__citycard::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #1f2d12; transform: translateX(-50%) rotate(45deg); }
.wm__citycard::before { content: "\1F4CD"; margin-right: 6px; }
.wm__city.is-focus { fill: #ff7a1a; stroke-width: 3px; animation: wm-dot 1.6s ease-in-out infinite; }
@keyframes wm-pop { from { opacity: 0; transform: translate(-50%, calc(-100% - 6px)); } to { opacity: 1; } }
@keyframes wm-dot { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wm__citycard, .wm__city.is-focus { animation: none; } }
@media (max-width: 600px) { .wm__citycard { font-size: .74rem; padding: 5px 10px; } }

/* Store list: small product picture inside the chip when we have one */
.cd__chip--pic { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; }
.cd__chip--pic img { flex: 0 0 auto; width: auto; height: 34px; max-width: 30px; object-fit: contain; border-radius: 5px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
@media (max-width: 600px) { .cd__chip--pic img { height: 28px; max-width: 24px; } }

/* Distributors hero: world map with flight lines from Nairobi to the partner cities behind the title */
.farmhero--world { overflow: hidden; padding: 110px 0 96px; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(28,48,10,.5) 0%, rgba(28,48,10,.12) 70%, rgba(28,48,10,0) 100%), linear-gradient(180deg, rgba(31,52,12,.2), rgba(31,52,12,.4)), url("../assets/world-map-bg.svg") center / cover no-repeat, linear-gradient(120deg, #2f4f12, #5b7d1e); }
.farmhero--world .farmhero__inner { position: relative; z-index: 1; }
.farmhero--world h1 { text-shadow: 0 3px 18px rgba(0,0,0,.35); }
.farmhero--world p { text-shadow: 0 2px 10px rgba(0,0,0,.35); }
@media (max-width: 600px) { .farmhero--world { padding: 40px 0 36px; background-size: auto 100%, auto, cover, auto; } .farmhero--world h1 { font-size: 1.5rem; margin: 8px 0 6px; } .farmhero--world p { font-size: .9rem; margin: 0; } }

/* Corporate & Events hero: three clear ways in, softly floating pictures with a warm glow */
.gifthero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.gifthero__btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; background: #fff; border: 2px solid var(--green); color: var(--green-dark); font-weight: 800; font-size: .95rem; text-decoration: none; box-shadow: 0 6px 16px rgba(60,80,20,.14); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.gifthero__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(60,80,20,.22); background: #f3f8e4; }
.gifthero__btn--main { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.gifthero__btn--main:hover { background: var(--green); }
.farmhero--gift .seedhero__pile { filter: drop-shadow(0 14px 18px rgba(60,40,10,.25)); animation: gift-float 6s ease-in-out infinite; }
.farmhero--gift .seedhero__pile--r { animation-delay: -3s; }
.farmhero--gift::before { content: ""; position: absolute; left: 4%; top: 50%; width: 28vw; height: 28vw; max-width: 380px; max-height: 380px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(230,191,88,.38), rgba(230,191,88,0) 72%); }
.farmhero--gift::after { content: ""; position: absolute; right: 4%; top: 50%; width: 28vw; height: 28vw; max-width: 380px; max-height: 380px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(150,196,70,.35), rgba(150,196,70,0) 72%); }
@keyframes gift-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .farmhero--gift .seedhero__pile { animation: none; } }
@media (max-width: 700px) { .gifthero__actions { gap: 8px; margin-top: 14px; } .gifthero__btn { padding: 9px 14px; font-size: .8rem; gap: 7px; } .gifthero__btn svg { width: 16px; height: 16px; } .farmhero--gift .seedhero__pile { animation: none; } .farmhero--gift { padding-bottom: 170px; } }
.farmhero--gift .seedhero__pile { mix-blend-mode: normal; width: clamp(110px, 13vw, 200px); }
@media (max-width: 700px) { .farmhero--gift .seedhero__pile { width: 30%; max-width: 130px; } }

/* Golf clubs: buttons on the club cards and the "what we do" page */
.club-btn { margin-top: 12px; display: inline-block; }
.feature-card .club-btn + .btn--outline { margin-left: 8px; }
.farmhero--golf { padding: 100px 0 92px; background: #2c4a12; overflow: hidden; }
.farmhero--golf::before { content: ""; position: absolute; inset: -10px; z-index: 0; background: url("../assets/golf-course-vetlab.webp") center 46% / cover no-repeat; filter: saturate(1.06); }
.farmhero--golf::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 78% at 50% 50%, rgba(14,28,6,.66) 0%, rgba(14,28,6,.4) 58%, rgba(14,28,6,.1) 100%), linear-gradient(180deg, rgba(20,40,8,.12), rgba(20,40,8,.36)); }
.farmhero--golf .farmhero__inner { position: relative; z-index: 1; }
.farmhero--golf h1 { text-shadow: 0 3px 16px rgba(0,0,0,.4); } .farmhero--golf p { text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.golf-ic { display: grid; place-items: center; color: var(--green-dark); }
.golfpic__fig { position: relative; margin: 0 auto; max-width: 720px; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(40,55,20,.22); }
.golfpic__fig img { display: block; width: 100%; height: auto; }
.golfpic__fig figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--green-dark); font-weight: 800; font-size: .86rem; }
.club-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.club-card { padding: 24px 22px; text-align: center; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 22px rgba(40,55,20,.08); scroll-margin-top: 150px; }
.club-card:target { border-color: var(--green); box-shadow: 0 0 0 3px rgba(79,138,31,.25), 0 12px 28px rgba(40,55,20,.14); }
.club-card__ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #edf5da; font-size: 1.8rem; }
.club-card h3 { margin: 0 0 6px; } .club-card p { margin: 0 0 12px; color: var(--ink-soft); }
.club-card__links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 800px) { .club-grid { grid-template-columns: 1fr; } .farmhero--golf { padding: 40px 0 34px; } }

/* Club logos on the club cards */
.club-logo { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%; background: #fff; border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(40,55,20,.14); overflow: hidden; }
.club-logo img { width: 74%; height: 74%; object-fit: contain; display: block; }
.club-logo--dark { background: #243d10; border-color: #243d10; }
@media (max-width: 600px) { .club-logo { width: 76px; height: 76px; } }

.golfhero__logos { display: flex; justify-content: center; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
.golfhero__logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-shadow: 0 2px 8px rgba(0,0,0,.45); transition: transform .2s ease; }
.golfhero__logo:hover { transform: translateY(-4px); }
.club-logo--sm { width: 60px; height: 60px; margin: 0; box-shadow: 0 6px 16px rgba(0,0,0,.35); border-color: rgba(255,255,255,.7); }
@media (max-width: 800px) { .farmhero--golf { padding: 42px 0 40px; } .golfhero__logos { gap: 14px; margin-top: 16px; } .club-logo--sm { width: 48px; height: 48px; } .golfhero__logo { font-size: .7rem; } }

/* Corporate & Events hero: a sunlit fairway along the bottom (hills, bunker, flag) and a soft sky */
.farmhero--gift { background: url("../assets/golf-light-bg.svg") center bottom / max(100%, 1100px) auto no-repeat, radial-gradient(ellipse at 50% 30%, #fffdf3 0, #f7f0d9 55%, #efe4bd 100%); }
.farmhero--gift .farmhero__inner { padding-bottom: 36px; }
@media (max-width: 700px) { .farmhero--gift { background-size: 900px auto, auto; } }

/* Golf page "What we do": numbered cards with a green icon, accent bar and lift on hover */
.golf-what { background: radial-gradient(circle at 12% 18%, rgba(230,191,88,.16) 0, rgba(230,191,88,0) 38%), radial-gradient(circle at 92% 88%, rgba(111,154,53,.16) 0, rgba(111,154,53,0) 42%), #fbfaf2; }
.golf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
.golf-card { position: relative; overflow: hidden; padding: 34px 26px 30px; text-align: center; border-radius: 22px; background: #fff; border: 1px solid #e3ebcf; box-shadow: 0 10px 26px rgba(40,55,20,.09); transition: transform .25s ease, box-shadow .25s ease; }
.golf-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--green-dark), var(--green), #e6bf58); }
.golf-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(40,55,20,.18); }
.golf-card__num { position: absolute; right: 18px; top: 14px; font-size: 3.2rem; font-weight: 900; line-height: 1; color: rgba(111,154,53,.14); letter-spacing: -.02em; }
.golf-card__ic { display: grid; place-items: center; width: 70px; height: 70px; margin: 4px auto 16px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 10px 20px rgba(60,100,20,.3), 0 0 0 7px rgba(111,154,53,.14); transition: transform .3s ease; }
.golf-card:hover .golf-card__ic { transform: scale(1.08) rotate(-4deg); }
.golf-card h3 { margin: 0 0 8px; font-size: 1.2rem; color: #1f2d12; }
.golf-card p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 800px) { .golf-cards { grid-template-columns: 1fr; gap: 16px; } .golf-card { padding: 26px 20px 22px; } .golf-card:hover { transform: none; } }
@media (hover: none) { .golf-card:hover { transform: none; } }

/* Golf page: prize hampers */
.prize-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prize { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #e3ebcf; box-shadow: 0 10px 24px rgba(40,55,20,.1); transition: transform .25s ease, box-shadow .25s ease; }
.prize:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(40,55,20,.18); }
.prize__btn { display: block; width: 100%; padding: 0; border: 0; background: #efe9dc; cursor: zoom-in; }
.prize__btn img { display: block; width: 100%; height: auto; }
.prize figcaption { padding: 12px 14px 14px; text-align: center; }
.prize figcaption b { display: block; color: var(--green-dark); font-size: 1.02rem; }
.prize figcaption span { display: block; margin-top: 3px; font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 960px) { .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .prize-grid { gap: 10px; } .prize figcaption { padding: 9px 8px 11px; } .prize figcaption b { font-size: .88rem; } .prize figcaption span { font-size: .74rem; } .prize:hover { transform: none; } }
@media (hover: none) { .prize:hover { transform: none; } }

/* Golf page hero: live weather at Vetlab Sports Club (Loresho) in the bottom-right corner of the picture */
.golfhero__weather { position: absolute; right: 18px; bottom: 18px; z-index: 2; margin: 0; max-width: calc(100% - 36px); gap: 10px; padding: 8px 14px 8px 10px; border: 0; border-left: 4px solid var(--green); border-radius: 12px; background: rgba(255,255,255,.93); box-shadow: 0 4px 14px rgba(0,0,0,.3); backdrop-filter: blur(4px); text-align: left; }
.golfhero__weather .weather-live__ic { font-size: 1.7rem; }
.golfhero__weather .weather-live__main { min-width: 0; }
.golfhero__weather .weather-live__temp { font-size: 1.25rem; line-height: 1.05; }
.golfhero__weather .weather-live__desc { font-size: .74rem; line-height: 1.1; }
.golfhero__weather .weather-live__meta { padding-left: 10px; border-left: 1px solid #d4dcc0; }
.golfhero__weather .weather-live__place { font-size: .66rem; }
.golfhero__weather .weather-live__more { display: none; }
@media (max-width: 800px) { .golfhero__weather { right: 10px; bottom: 10px; padding: 5px 10px 5px 8px; gap: 8px; } .golfhero__weather .weather-live__ic { font-size: 1.25rem; } .golfhero__weather .weather-live__temp { font-size: 1rem; } .golfhero__weather .weather-live__place { font-size: .58rem; } }

/* Gift card form: labels and emoji picker */
.gift__lbl { margin: 6px 0 -4px; font-size: .8rem; font-weight: 800; color: var(--green-dark); letter-spacing: .02em; }
.gift__lbl small { font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.gift__fields > .gift__lbl:first-child { margin-top: 0; }
.gift__emojis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.gift__emoji { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.gift__emoji:hover { background: var(--bg-tint); transform: translateY(-2px); }
@media (max-width: 600px) { .gift__emoji { width: 34px; height: 34px; font-size: 1.1rem; } .gift__lbl { font-size: .74rem; } }

/* Order window: gift card code */
.order__gift { margin: 4px 0 10px; }
.order__giftlink { padding: 0; border: 0; background: none; color: var(--green-dark); font: inherit; font-weight: 800; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.order__giftrow { display: flex; gap: 8px; margin-top: 8px; }
.order__giftrow input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.order__giftrow input:disabled { background: #f3f8e4; color: var(--green-dark); }
.order__giftmsg { margin: 8px 0 0; font-size: .84rem; font-weight: 700; color: #2c8a41; }
.order__giftmsg.is-bad { color: #b3261e; }
.order__gifted { color: #2c8a41; font-weight: 700; }

/* Home green bar: the Blog link is a button like the others */
.giftbar__right a.giftbar__blog { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 11px; border-radius: 999px; background: #fff; color: var(--green-dark) !important; font-weight: 700; letter-spacing: .02em; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.giftbar__right a.giftbar__blog:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 6px 14px rgba(0,0,0,.35); text-decoration: none; }
@media (min-width: 721px) { .giftbar__right a.giftbar__blog { padding: 2px 11px 2px 9px; font-size: .7rem; gap: 5px; } .giftbar__right a.giftbar__blog .giftbar__icon { width: 12px; height: 12px; } }
@media (max-width: 720px) { .giftbar__right a.giftbar__blog { display: none; } }

/* Blog page */
.farmhero--blog { position: relative; overflow: hidden; padding: 110px 0 100px; background: #2c4a12; }
.farmhero--blog::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../assets/farmhero-bg.jpg") center 42% / cover no-repeat; transform: scale(1.04); }
.farmhero--blog::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 58% 72% at 50% 50%, rgba(16,32,6,.62) 0%, rgba(16,32,6,.34) 62%, rgba(16,32,6,.12) 100%), linear-gradient(180deg, rgba(20,40,8,.28), rgba(20,40,8,.5)); }
.farmhero--blog .farmhero__inner { position: relative; z-index: 1; }
.farmhero--blog h1 { text-shadow: 0 3px 18px rgba(0,0,0,.45); } .farmhero--blog p { font-size: 1.15rem; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 980px; margin: 0 auto; }
.blog-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid #e3ebcf; box-shadow: 0 10px 26px rgba(40,55,20,.1); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(40,55,20,.18); }
.blog-card__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.blog-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card__pic img { transform: scale(1.05); }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 20px 22px 24px; flex: 1 1 auto; }
.blog-card__tag { padding: 4px 12px; border-radius: 999px; background: #edf5da; color: var(--green-dark); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.blog-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; } .blog-card h3 a { color: inherit; text-decoration: none; } .blog-card h3 a:hover { color: var(--green-dark); }
.blog-card p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.blog-card__by { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); } .blog-card__by img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.blog-card .btn { margin-top: auto; }
.blog-card--soon { background: #f8faf0; border: 2px dashed #cfdfae; box-shadow: none; justify-content: center; }
.blog-card--soon:hover { transform: none; box-shadow: none; }
.blog-card__soonpic { display: grid; place-items: center; padding: 34px 0 0; color: #9db46a; }
@media (max-width: 800px) { .blog-grid { grid-template-columns: 1fr; gap: 18px; } .farmhero--blog { padding: 56px 0 50px; } .farmhero--blog p { font-size: .98rem; } .blog-card:hover { transform: none; } }
@media (hover: none) { .blog-card:hover { transform: none; } }

/* Hot Sauces: picture space of the maker section until the real photo is added */
.maker__ph { aspect-ratio: 561 / 558; width: 100%; border-radius: 20px; box-shadow: var(--shadow); background: linear-gradient(160deg, var(--cream, #f6f1e4), var(--bg-tint, #eef2e6)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); text-align: center; padding: 12px; }
.maker__ph span { font-size: 4rem; line-height: 1; }
.maker__ph b { font-size: .95rem; font-weight: 700; }
@media (max-width: 600px) { .maker__ph { border-radius: 12px; box-shadow: none; gap: 4px; padding: 6px; } .maker__ph span { font-size: 2rem; } .maker__ph b { font-size: .62rem; } }

/* Hot Sauces: brand logo in the maker section */
.maker__logo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 0 20px; }
@media (max-width: 600px) { .maker__logo { max-width: 170px; margin-bottom: 10px; } }

/* "How we make it" picture space while the real photo is not added yet */
.make-pic--empty .maker__ph { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }

/* Shop All page: products by category in columns */
.shop-all h1 { margin: 6px 0 6px; font-size: clamp(2rem, 4.4vw, 3rem); }
.shop-all__sub { color: var(--ink-soft); margin: 0 0 34px; font-size: 1.05rem; }
.shop-all__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 38px 44px; }
.shop-all__col h2 { font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--lime, #8cc63f); }
.shop-all__col h2 a { color: var(--green); text-decoration: none; }
.shop-all__col h2 a:hover { color: var(--green-dark); }
.shop-all__col > a:not(:first-child), .shop-all__col > a { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 1rem; }
.shop-all__col > a:hover span:last-child { color: var(--green); text-decoration: underline; }
.shop-all__col h2 a { display: inline; padding: 0; }
.shop-all__pic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--border, #e5e1d4); display: flex; align-items: center; justify-content: center; }
.shop-all__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-all__pic--empty { background: linear-gradient(160deg, var(--cream, #f6f1e4), var(--bg-tint, #eef2e6)); }
.shop-all__pic--empty::after { content: ""; width: 14px; height: 14px; border-radius: 50% 0 50% 0; background: var(--lime, #8cc63f); opacity: .65; transform: rotate(-20deg); }
@media (max-width: 600px) { .shop-all__grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; } .shop-all__col > a { gap: 8px; font-size: .78rem; line-height: 1.25; padding: 5px 0; } .shop-all__pic { flex-basis: 36px; width: 36px; height: 36px; border-radius: 9px; } .shop-all__col h2 { font-size: .82rem; } .shop-all__sub { font-size: .92rem; margin-bottom: 22px; } }

/* Back to Shop button above the breadcrumb on product pages */
.back-shop { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 8px 18px; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green-dark, var(--green)); font-weight: 700; font-size: .9rem; text-decoration: none; background: #fff; transition: background .15s ease, color .15s ease; }
.back-shop:hover, .back-shop:focus-visible { background: var(--green); color: #fff; }
.back-shop + .breadcrumb { margin-top: 0; }
@media (max-width: 600px) { .back-shop { padding: 6px 14px; font-size: .8rem; margin-bottom: 10px; } }

/* Cookie consent banner (Google Analytics) */
.consent { position: fixed; left: 18px; bottom: 18px; z-index: 9990; max-width: 430px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border, #e5e1d4); box-shadow: 0 10px 34px rgba(0,0,0,.18); font-size: .9rem; line-height: 1.45; }
.consent p { margin: 0 0 12px; color: var(--ink, #1f2d12); }
.consent a { color: var(--green); font-weight: 700; }
.consent__btns { display: flex; gap: 10px; }
.consent__btns .btn { padding: 8px 20px; }
@media (max-width: 600px) { .consent { left: 10px; right: 10px; bottom: 86px; max-width: none; padding: 12px 14px; font-size: .8rem; } .consent p { margin-bottom: 9px; } .consent__btns .btn { padding: 7px 16px; font-size: .8rem; } }

/* "Soon" tag on products that are not available yet (Shop All) */
.shop-all__soon { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #f5d878; color: #3a2a05; font-size: .6rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.shop-all__col > a:has(.shop-all__soon) .shop-all__pic { opacity: .75; }
@media (max-width: 600px) { .shop-all__soon { margin-left: 5px; padding: 1px 6px; font-size: .52rem; } }