/* Generated by brand/build.py from brand/tokens.json. Do not edit by hand. */
/* Algae Foundry brand: tokens + components */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces/Fraunces-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces/Fraunces-Italic-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans/NunitoSans-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans/NunitoSans-Italic-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("../fonts/syncopate/Syncopate-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("../fonts/league-spartan/LeagueSpartan-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --af-color-paper: #FBF6EC;
  --af-color-surface: #FFFFFF;
  --af-color-sand: #F1E4C8;
  --af-color-hairline: #D9CFBC;
  --af-color-ink: #1E2A22;
  --af-color-muted: #5E6A5F;
  --af-color-green: #158442;
  --af-color-green-deep: #0E5A2D;
  --af-color-aqua: #01B7C1;
  --af-color-whatsapp: #075E54;
  --af-color-white: #FFFFFF;
  --af-jus2-accent: #FF6600;
  --af-jus2-strong: #B34700;
  --af-jus2-band: #F7E6BC;
  --af-jus2glo-accent: #E3B3BB;
  --af-jus2glo-strong: #94435A;
  --af-jus2glo-band: #CFEFF1;
  --af-jus2glo-tint: #F7E4E7;
  --af-jus2glo-edge: #E3B3BB;
  --af-font-display: "Fraunces", Georgia, 'Times New Roman', serif;
  --af-font-body: "Nunito Sans", system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --af-font-display-variation: 'SOFT' 100, 'WONK' 0;
  --af-font-label: "Syncopate", 'Nunito Sans', system-ui, sans-serif;
  --af-font-spartan: "League Spartan", 'Nunito Sans', system-ui, sans-serif;
  --af-kicker-size: 13px;
  --af-kicker-tracking: 0.04em;
  --af-fs-label: 0.75rem;
  --af-lh-label: 1.2;
  --af-fs-small: clamp(0.875rem, 0.8476rem + 0.1124vw, 0.9375rem);
  --af-lh-small: 1.45;
  --af-fs-body: clamp(1rem, 0.9726rem + 0.1124vw, 1.0625rem);
  --af-lh-body: 1.55;
  --af-fs-lead: clamp(1.0625rem, 0.9803rem + 0.3371vw, 1.25rem);
  --af-lh-lead: 1.5;
  --af-fs-h4: clamp(1.25rem, 1.1404rem + 0.4494vw, 1.5rem);
  --af-lh-h4: 1.2;
  --af-fs-h3: clamp(1.5rem, 1.3357rem + 0.6742vw, 1.875rem);
  --af-lh-h3: 1.12;
  --af-fs-h2: clamp(1.875rem, 1.6011rem + 1.1236vw, 2.5rem);
  --af-lh-h2: 1.05;
  --af-fs-h1: clamp(2.25rem, 1.7022rem + 2.2472vw, 3.5rem);
  --af-lh-h1: 1.04;
  --af-fs-display: clamp(2.75rem, 1.8736rem + 3.5955vw, 4.75rem);
  --af-lh-display: 1.02;
  --af-tracking-heading: -0.015em;
  --af-tracking-label: 0.14em;
  --af-tracking-body: 0;
  --af-space-10: 0.25rem;
  --af-space-20: 0.5rem;
  --af-space-30: 0.75rem;
  --af-space-40: 1rem;
  --af-space-50: 1.5rem;
  --af-space-60: 2rem;
  --af-space-70: 3rem;
  --af-space-80: 4rem;
  --af-space-90: 6rem;
  --af-content: 720px;
  --af-wide: 1200px;
  --af-gutter: clamp(1.25rem, 0.2640rem + 4.0449vw, 3.5rem);
  --af-section-y: clamp(3rem, 1.6854rem + 5.3933vw, 6rem);
  --af-radius-xs: 6px;
  --af-radius-sm: 12px;
  --af-radius-md: 20px;
  --af-radius-lg: 28px;
  --af-radius-xl: 32px;
  --af-radius-card: 30px;
  --af-radius-pill: 999px;
  --af-radius-pebble: 46% 54% 42% 58% / 55% 44% 56% 45%;
  --af-shadow-glass: 0 12px 32px rgba(30, 42, 34, .14);
  --af-shadow-lift: 0 10px 30px rgba(30, 42, 34, .10);
  --af-shadow-button: 0 6px 16px rgba(30, 42, 34, .18);
  --af-glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .56));
  --af-glass-fill-fallback: rgba(255, 255, 255, .92);
  --af-glass-blur: 20px;
  --af-glass-saturate: 180%;
  --af-glass-border: 1px solid rgba(255, 255, 255, .75);
  --af-glass-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -10px 20px rgba(255, 255, 255, .18), 0 12px 32px rgba(30, 42, 34, .14);
  --af-btn-radius: 999px;
  --af-btn-height: 48px;
  --af-btn-px: 24px;
  --af-btn-weight: 700;
  --af-btn-tracking: 0.01em;
  --af-btn-deepen: 18%;
  --af-btn-highlight: rgba(255, 255, 255, .14);
  --af-btn-rim: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .18);
  --af-btn-shadow: 0 1px 2px rgba(20, 30, 25, .18);
  --af-btn-glow: 0 12px 24px -12px;
  --af-btn-chip: rgba(255, 255, 255, .18);
  --af-focus-ring: 0 0 0 3px #FBF6EC, 0 0 0 5px #0E5A2D;
  --af-btn-glass-tint: 96%;
  --af-btn-glass-blur: 12px;
  --af-btn-glass-saturate: 180%;
  --af-btn-glass-lens: radial-gradient(95% 70% at 50% -10%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06) 62%, transparent 64%);
  --af-btn-glass-caustic: radial-gradient(60% 55% at 50% 118%, rgba(255, 255, 255, .22), transparent 70%);
  --af-btn-glass-rim: inset 0 1px 0 rgba(255, 255, 255, .62), inset 0 -1px 0 rgba(255, 255, 255, .20), inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -10px 18px -10px rgba(0, 0, 0, .30);
  --af-btn-clear-fill: rgba(255, 255, 255, .55);
  --af-btn-clear-fill-hover: rgba(255, 255, 255, .78);
  --af-btn-clear-lens: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%);
  --af-btn-clear-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(30, 42, 34, .10), 0 1px 2px rgba(20, 30, 25, .08), 0 10px 22px -14px rgba(20, 30, 25, .40);
  --af-icon-amazon: url("data:image/svg+xml,%3Csvg role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726a17.617 17.617 0 01-10.951-.577 17.88 17.88 0 01-5.43-3.35c-.1-.074-.151-.15-.151-.22 0-.047.021-.09.051-.13zm6.565-6.218c0-1.005.247-1.863.743-2.577.495-.71 1.17-1.25 2.04-1.615.796-.335 1.756-.575 2.912-.72.39-.046 1.033-.103 1.92-.174v-.37c0-.93-.105-1.558-.3-1.875-.302-.43-.78-.65-1.44-.65h-.182c-.48.046-.896.196-1.246.46-.35.27-.575.63-.675 1.096-.06.3-.206.465-.435.51l-2.52-.315c-.248-.06-.372-.18-.372-.39 0-.046.007-.09.022-.15.247-1.29.855-2.25 1.82-2.88.976-.616 2.1-.975 3.39-1.05h.54c1.65 0 2.957.434 3.888 1.29.135.15.27.3.405.48.12.165.224.314.283.45.075.134.15.33.195.57.06.254.105.42.135.51.03.104.062.3.076.615.01.313.02.493.02.553v5.28c0 .376.06.72.165 1.036.105.313.21.54.315.674l.51.674c.09.136.136.256.136.36 0 .12-.06.226-.18.314-1.2 1.05-1.86 1.62-1.963 1.71-.165.135-.375.15-.63.045a6.062 6.062 0 01-.526-.496l-.31-.347a9.391 9.391 0 01-.317-.42l-.3-.435c-.81.886-1.603 1.44-2.4 1.665-.494.15-1.093.227-1.83.227-1.11 0-2.04-.343-2.76-1.034-.72-.69-1.08-1.665-1.08-2.94l-.05-.076zm3.753-.438c0 .566.14 1.02.425 1.364.285.34.675.512 1.155.512.045 0 .106-.007.195-.02.09-.016.134-.023.166-.023.614-.16 1.08-.553 1.424-1.178.165-.28.285-.58.36-.91.09-.32.12-.59.135-.8.015-.195.015-.54.015-1.005v-.54c-.84 0-1.484.06-1.92.18-1.275.36-1.92 1.17-1.92 2.43l-.035-.02zm9.162 7.027c.03-.06.075-.11.132-.17.362-.243.714-.41 1.05-.5a8.094 8.094 0 011.612-.24c.14-.012.28 0 .41.03.65.06 1.05.168 1.172.33.063.09.099.228.099.39v.15c0 .51-.149 1.11-.424 1.8-.278.69-.664 1.248-1.156 1.68-.073.06-.14.09-.197.09-.03 0-.06 0-.09-.012-.09-.044-.107-.12-.064-.24.54-1.26.806-2.143.806-2.64 0-.15-.03-.27-.087-.344-.145-.166-.55-.257-1.224-.257-.243 0-.533.016-.87.046-.363.045-.7.09-1 .135-.09 0-.148-.014-.18-.044-.03-.03-.036-.047-.02-.077 0-.017.006-.03.02-.063v-.06z%22/%3E%3C/svg%3E");
  --af-ambient: radial-gradient(34% 40% at 80% 20%, rgba(1, 183, 193, .38), transparent 70%), radial-gradient(30% 34% at 58% 42%, rgba(21, 132, 66, .22), transparent 70%), radial-gradient(40% 40% at 12% 8%, rgba(247, 230, 188, 1), transparent 70%);
  --af-line-accent: var(--af-color-green);
  --af-line-strong: var(--af-color-green-deep);
  --af-line-band: var(--af-color-sand);
  --af-line-edge: transparent;
  --af-line-edge-w: 0px;
  --af-line-numeral-font: var(--af-font-display);
  --af-line-numeral-weight: 500;
  --af-line-numeral-variation: var(--af-font-display-variation);
}

.af-line-jus2 { --af-line-accent: var(--af-jus2-accent); --af-line-strong: var(--af-jus2-strong); --af-line-band: var(--af-jus2-band); --af-line-edge: transparent; --af-line-edge-w: 0px; --af-line-numeral-font: var(--af-font-spartan); --af-line-numeral-weight: 700; --af-line-numeral-variation: normal; }
.af-line-jus2glo { --af-line-accent: var(--af-jus2glo-accent); --af-line-strong: var(--af-jus2glo-strong); --af-line-band: var(--af-jus2glo-band); --af-line-edge: var(--af-jus2glo-edge); --af-line-edge-w: 10px; --af-line-numeral-font: var(--af-font-display); --af-line-numeral-weight: 500; --af-line-numeral-variation: var(--af-font-display-variation); }

/* ===================== Components =====================
   Hand-written; uses only --af-* variables from tokens.json.
   Appended to dist/brand.css by brand/build.py. Responsive rules use
   container queries so components behave the same in mockups, frames and the theme.
   ====================================================== */

/* ---------- Base ---------- */
.af, .af *, .af *::before, .af *::after { box-sizing: border-box; }
.af { font-family: var(--af-font-body); font-size: var(--af-fs-body); line-height: var(--af-lh-body); color: var(--af-color-ink); background: var(--af-color-paper); -webkit-font-smoothing: antialiased; }
.af :where(h1, h2, h3, h4) { font-family: var(--af-font-display); font-weight: 500; letter-spacing: var(--af-tracking-heading); font-variation-settings: var(--af-font-display-variation); margin: 0; color: var(--af-color-ink); }
.af :where(h1) { font-size: var(--af-fs-h1); line-height: var(--af-lh-h1); }
.af :where(h2) { font-size: var(--af-fs-h2); line-height: var(--af-lh-h2); }
.af :where(h3) { font-size: var(--af-fs-h3); line-height: var(--af-lh-h3); }
.af :where(h4) { font-size: var(--af-fs-h4); line-height: var(--af-lh-h4); }
.af :where(p) { margin: 0; }
.af :where(h1, h2, h3, h4) em { font-style: italic; color: var(--af-color-green); }
.af a:not(.af-btn):not(.wp-element-button) { color: var(--af-color-green-deep); }
.af :focus-visible { outline: none; box-shadow: var(--af-focus-ring); border-radius: 6px; }

.af-display { font-size: var(--af-fs-display) !important; line-height: var(--af-lh-display) !important; }
.af-lead { font-size: var(--af-fs-lead); line-height: var(--af-lh-lead); color: var(--af-color-muted); }
.af-small { font-size: var(--af-fs-small); line-height: var(--af-lh-small); }
.af-label { font: 800 var(--af-fs-label) / var(--af-lh-label) var(--af-font-body); letter-spacing: var(--af-tracking-label); text-transform: uppercase; color: var(--af-color-green-deep); }
.af-label--dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--af-color-aqua); margin-right: 10px; vertical-align: 1px; }
.af-kicker { font: 700 var(--af-kicker-size) / 1.3 var(--af-font-label); letter-spacing: var(--af-kicker-tracking); text-transform: lowercase; color: var(--af-color-green-deep); }
.af-kicker--dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--af-color-aqua); margin-right: 10px; vertical-align: 0; }
.af-figure { font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); letter-spacing: -0.01em; }
.af-num { display: block; font: italic 500 15px/1 var(--af-font-display); color: var(--af-color-muted); }
.af-line-title { font-size: var(--af-fs-h2); line-height: var(--af-lh-h2); }
.af .af-line-title em, .af-line-title em { color: var(--af-line-strong); }
/* Line titles lead with the real product-line logo */
.af-line-title { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: .28em; }
.af-line-title img { display: block; height: var(--af-line-logo-h, 1.1em); width: auto; margin-bottom: .06em; }
.af-line-jus2 { --af-line-logo-h: 1.05em; }
.af-line-jus2glo { --af-line-logo-h: 1.5em; }

/* ---------- Surfaces ---------- */
.af-glass {
  background: var(--af-glass-fill-fallback);
  border: var(--af-glass-border);
  box-shadow: var(--af-glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .af-glass {
    background: var(--af-glass-fill);
    -webkit-backdrop-filter: blur(var(--af-glass-blur)) saturate(var(--af-glass-saturate));
    backdrop-filter: blur(var(--af-glass-blur)) saturate(var(--af-glass-saturate));
  }
}
.af-glass, .af-glass * { --af-text-on-glass: var(--af-color-ink); }
.af-glass :where(p, span, li) { color: var(--af-color-ink); }
.af-ambient { position: relative; isolation: isolate; }
.af-ambient::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--af-ambient); pointer-events: none; }
.af-pebble { border-radius: var(--af-radius-pebble); background: var(--af-color-sand); }

/* ---------- Buttons: liquid glass pill (tokens 1.3.0) ----------
   One style for mockup buttons (.af-btn) and WordPress buttons (.wp-block-button__link).
   Primary = tinted glass in --btn-bg: frosted, a lens highlight across the top half, a caustic
   along the bottom, bright rims and inner depth. The lens fades out above the text line.
   Secondary = clear glass (.af-btn--glass / "Glass" block style), ink text. */
.af-btn, .af .wp-block-button__link {
  --btn-bg: var(--af-color-green-deep);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--af-btn-height); padding: 0 var(--af-btn-px); box-sizing: border-box;
  font: var(--af-btn-weight) 0.9375rem / 1 var(--af-font-body); letter-spacing: var(--af-btn-tracking);
  color: var(--af-color-white); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; border-radius: var(--af-btn-radius);
  background:
    var(--af-btn-glass-lens),
    var(--af-btn-glass-caustic),
    linear-gradient(180deg,
      color-mix(in srgb, var(--btn-bg) var(--af-btn-glass-tint), transparent),
      color-mix(in srgb, color-mix(in srgb, var(--btn-bg), #000 var(--af-btn-deepen)) var(--af-btn-glass-tint), transparent));
  -webkit-backdrop-filter: blur(var(--af-btn-glass-blur)) saturate(var(--af-btn-glass-saturate));
          backdrop-filter: blur(var(--af-btn-glass-blur)) saturate(var(--af-btn-glass-saturate));
  box-shadow: var(--af-btn-glass-rim), var(--af-btn-shadow), var(--af-btn-glow) color-mix(in srgb, var(--btn-bg) 80%, transparent);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-color .25s ease;
}
/* Light sweep across the glass on hover */
.af-btn::before, .af .wp-block-button__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .20) 48%, rgba(255, 255, 255, .06) 56%, transparent 70%);
  transform: translateX(-110%); transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.af-btn:hover, .af .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--af-btn-glass-rim), 0 2px 4px rgba(20, 30, 25, .16), 0 18px 30px -14px color-mix(in srgb, var(--btn-bg) 85%, transparent);
}
.af-btn:hover::before, .af .wp-block-button__link:hover::before { transform: translateX(110%); }
.af-btn:active, .af .wp-block-button__link:active { transform: translateY(0) scale(.985); box-shadow: var(--af-btn-glass-rim), var(--af-btn-shadow); }
.af-btn:focus-visible, .af .wp-block-button__link:focus-visible { outline: none; box-shadow: var(--af-btn-glass-rim), var(--af-focus-ring); }
/* Clear glass: the secondary button (View product). Ink text, white frost, the line colour only in its glow. */
.af-btn--glass, .af .is-style-glass > .wp-block-button__link {
  color: var(--af-color-ink);
  background: var(--af-btn-clear-lens), var(--af-btn-clear-fill);
  box-shadow: var(--af-btn-clear-rim);
}
.af-btn--glass:hover, .af .is-style-glass > .wp-block-button__link:hover {
  background: var(--af-btn-clear-lens), var(--af-btn-clear-fill-hover);
  box-shadow: var(--af-btn-clear-rim), 0 14px 26px -16px color-mix(in srgb, var(--af-line-strong) 70%, transparent);
}
.af-btn--glass:focus-visible, .af .is-style-glass > .wp-block-button__link:focus-visible { box-shadow: var(--af-btn-clear-rim), var(--af-focus-ring); }
.af-btn--glass::before, .af .is-style-glass > .wp-block-button__link::before {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .3) 56%, transparent 70%);
}
/* …ending in a small arrow that nudges right on hover */
.af-btn--glass::after, .af .is-style-glass > .wp-block-button__link::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor; margin-right: -4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.af-btn--glass:hover::after, .af .is-style-glass > .wp-block-button__link:hover::after { transform: translateX(3px); }
/* Buy on Amazon: tinted glass in the line colour, led by the Amazon glyph */
.af-btn--amazon, .af .is-style-amazon > .wp-block-button__link { --btn-bg: var(--af-line-strong); }
.af-btn--amazon::after, .af .is-style-amazon > .wp-block-button__link::after {
  content: ""; order: -1; width: 18px; height: 18px; flex: none; background: currentColor; margin-top: 3px;
  -webkit-mask: var(--af-icon-amazon) center / contain no-repeat;
          mask: var(--af-icon-amazon) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .af-btn, .af .wp-block-button__link, .af-btn::before, .af .wp-block-button__link::before { transition: none; }
}
.af-btn--line, .af .is-style-line > .wp-block-button__link { --btn-bg: var(--af-line-strong); }
.af-btn--whatsapp, .af .is-style-whatsapp > .wp-block-button__link { --btn-bg: var(--af-color-whatsapp); }
.af-btn--block, .af .wp-block-button.has-custom-width .wp-block-button__link { width: 100%; }
.af-btn svg { width: 18px; height: 18px; flex: none; }
/* Amazon (external) buttons end in a small glass chip with an arrow */
.af-btn--external::after, .af .is-style-line > .wp-block-button__link[target="_blank"]::after {
  content: ""; flex: none; width: 26px; height: 26px; margin-right: -12px; border-radius: 50%;
  background: var(--af-btn-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.af-btn--external:hover::after, .af .is-style-line > .wp-block-button__link[target="_blank"]:hover::after { transform: translate(1px, -1px); }
/* WhatsApp buttons lead with the chat icon */
.af .is-style-whatsapp > .wp-block-button__link::after {
  content: ""; order: -1; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.6-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.6-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Text-link and "coming soon" buttons opt out of the lacquer */
.af .is-style-text-link > .wp-block-button__link, .af .af-soon .wp-block-button__link {
  min-height: 0; background: none; box-shadow: none; transform: none; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.af .is-style-text-link > .wp-block-button__link::before, .af .is-style-text-link > .wp-block-button__link::after,
.af .af-soon .wp-block-button__link::before { display: none; }
.af .is-style-text-link > .wp-block-button__link { border-radius: 0; padding: 0 0 2px; border-bottom: 2px solid currentColor; color: var(--af-line-strong); font-weight: 800; }
.af .af-soon .wp-block-button__link { color: var(--af-color-ink); box-shadow: inset 0 0 0 1px var(--af-color-hairline); cursor: default; }
.af-textlink { display: inline-block; font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; color: var(--af-line-strong) !important; }

/* ---------- Tag / chips ---------- */
.af-tag { display: inline-flex; align-items: center; gap: 8px; font: 800 var(--af-fs-label) / 1 var(--af-font-body); letter-spacing: var(--af-tracking-label); text-transform: uppercase; color: var(--af-color-muted); }
.af-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--af-line-accent); }
.af-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--af-radius-pill); font: 700 var(--af-fs-small) / 1 var(--af-font-body); background: var(--af-color-surface); box-shadow: inset 0 0 0 1px var(--af-color-hairline); color: var(--af-color-ink); }

/* ---------- Header / nav capsule ---------- */
.af-header { container-type: inline-size; position: relative; z-index: 5; padding: 12px 12px 0; }
/* A container can't respond to its own width, so every @container rule targets descendants only. */
.af-nav { display: flex; align-items: center; justify-content: space-between; border-radius: var(--af-radius-pill); padding: 10px 16px 10px 20px; }
.af-nav img { height: 32px; width: auto; display: block; }
.af-nav ul { display: none; list-style: none; margin: 0; padding: 0; gap: 30px; font-weight: 700; font-size: 15px; }
.af-nav a { color: var(--af-color-ink) !important; text-decoration: none; }
.af-nav .af-menu { font: 800 13px/1 var(--af-font-body); letter-spacing: .12em; text-transform: uppercase; }
@container (min-width: 760px) {
  .af-nav { margin: 6px 28px 0; padding: 12px 24px 12px 30px; }
  .af-nav img { height: 42px; }
  .af-nav ul { display: flex; }
  .af-nav .af-menu { display: none; }
}

/* ---------- Home hero ---------- */
.af-hero { container-type: inline-size; position: relative; overflow: hidden; }
.af-hero__lead { position: relative; padding: 14px var(--af-gutter) 20px; display: grid; gap: 18px; max-width: 1440px; margin-inline: auto; }
.af-hero__lead h1 { margin-top: 12px; }
.af-hero__lead .af-lead { margin-top: 14px; }
.af-hero__art { position: relative; aspect-ratio: 1.45; }
.af-hero__art .af-pebble { position: absolute; inset: 6% 3% 0 8%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(247, 230, 188, .9) 60%); }
.af-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center 62%; }
@container (min-width: 760px) {
  .af-hero__lead { grid-template-columns: 1fr 1.05fr; align-items: center; padding-bottom: 28px; gap: 40px; }
}

/* ---------- Certification strip (glass pill) ---------- */
.af-certs { position: relative; z-index: 3; margin: 0 16px -26px; border-radius: var(--af-radius-pill); padding: 12px 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font: italic 400 15px/1.35 var(--af-font-display); }
.af-certs span::before { content: "✦"; color: var(--af-color-green); font-style: normal; font-size: 11px; margin-right: 8px; vertical-align: 2px; }
@container (min-width: 760px) { .af-certs { margin: 0 auto -30px; width: fit-content; gap: 10px 40px; font-size: 18px; padding: 14px 34px; } }
.af-certs--flat { margin: 0 !important; width: auto !important; box-shadow: none; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: flex-start; padding: 0; }

/* ---------- Product-line banner (band panel) ---------- */
.af-band { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.af-panel { container-type: inline-size; position: relative; overflow: hidden; background: var(--af-line-band); border-bottom: var(--af-line-edge-w) solid var(--af-line-edge); }
.af-panel--tint { --af-line-band: var(--af-jus2glo-tint); }
.af-panel__inner { position: relative; min-height: 250px; padding: 44px 16px 22px; }
.af-panel__product { position: absolute; right: 8px; bottom: 0; width: 150px; height: 200px; object-fit: contain; object-position: bottom; }
/* Two products in one panel (e.g. both soap bars), placed side by side, overlapping */
.af-panel__duo { position: absolute; right: 4px; bottom: 6px; width: 160px; height: 190px; }
.af-panel__duo > * { position: absolute; width: 82%; margin: 0; }
.af-panel__duo > :first-child { left: 0; top: 0; }
.af-panel__duo > :last-child { right: 0; bottom: 0; }
.af-panel__duo img { display: block; width: 100%; height: auto; }
.af-panel__copy { position: relative; z-index: 1; width: 70%; border-radius: var(--af-radius-lg); padding: 16px 16px 18px; }
.af-panel__copy .af-line-title { margin: 6px 0 10px; }
.af-panel__copy p { font-size: var(--af-fs-small); line-height: var(--af-lh-small); margin-bottom: 16px; max-width: 32ch; }
/* Copy and product stay together however wide the screen (or however far the page is zoomed out) */
.af-panel__inner { max-width: 640px; margin-inline: auto; }
/* Two buttons per panel: they sit side by side when there's room and stack when there isn't */
.af-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.af-panel__actions > * { flex: 1 1 150px; }
.af-panel__actions .wp-block-button__link, .af-panel__actions .af-btn { width: 100%; padding-inline: 16px; font-size: 14px; }
/* 3D product sets (home band, hero-3d.js): they take the photo's place once loaded. With 3D the card turns
   compact (about half the panel, its type sized to the panel) and the set gets the other half at the
   panel's full height beside it, so card and products read at a similar
   size from phone to wide screens. The photo stays underneath (and for screen readers) until the set is ready. */
.af-panel__3d { position: absolute; z-index: 0; top: 5%; bottom: 0; left: 52%; right: 0; opacity: 0; transition: opacity .6s ease; touch-action: pan-y; cursor: grab; }
.af-panel__3d:active { cursor: grabbing; }
.af-panel__3d canvas { display: block; width: 100% !important; height: 100% !important; }
.af-has-3d .af-panel__3d { opacity: 1; }
.af-has-3d :is(.af-panel__product, .af-panel__duo) { opacity: 0; pointer-events: none; }
.af-has-3d .af-panel__copy { width: 52%; padding: clamp(12px, 3.4cqw, 22px); border-radius: clamp(16px, 4cqw, 28px); }
.af-has-3d .af-panel__copy .af-line-title { font-size: clamp(22px, 6.6cqw, 40px); margin: 4px 0 8px; }
.af-has-3d .af-panel__copy p:not(.af-num) { font-size: clamp(12.5px, 3cqw, 16px); line-height: 1.45; margin-bottom: clamp(10px, 2.6cqw, 16px); }
.af-has-3d .af-panel__actions { gap: 6px; }
.af-has-3d .af-panel__actions .wp-block-button__link { font-size: clamp(12px, 2.8cqw, 14px); padding: clamp(8px, 2cqw, 12px) 10px; }
/* "The range" heading above the band */
.af-range-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; max-width: calc(var(--af-wide) + 2 * var(--af-gutter)); margin: 0 auto; padding: calc(var(--af-section-y) * .6 + 26px) var(--af-gutter) 28px; }
.af-range-head .af-section__head { margin: 0; }
@container (min-width: 400px) {
  .af-panel__inner { min-height: 340px; padding: 56px 24px 32px; }
  .af-panel__product { right: 16px; width: 190px; height: 250px; }
  .af-panel__duo { right: 10px; width: 210px; height: 250px; }
  .af-panel__copy { width: 62%; padding: 20px 20px 22px; border-radius: var(--af-radius-xl); }
}
@container (min-width: 560px) {
  .af-panel__inner { min-height: 360px; padding: 70px 36px 40px var(--af-gutter); }
  .af-panel__product { right: 36px; width: 250px; height: 300px; }
  .af-panel__duo { right: 30px; width: 300px; height: 300px; }
  .af-panel__copy { width: 56%; padding: 22px 24px 24px; }
  .af-panel__copy p { font-size: var(--af-fs-body); }
}

/* ---------- Product card ---------- */
.af-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px 10px calc(10px + var(--af-line-edge-w)); border-radius: var(--af-radius-card); background: var(--af-line-band); box-shadow: inset 0 calc(-1 * var(--af-line-edge-w)) 0 var(--af-line-edge); }
.af-card__well { position: relative; aspect-ratio: 1 / .9; }
.af-card__well > img { position: absolute; inset: 6% 8% 16%; width: 84%; height: 78%; object-fit: contain; }
.af-card__well .af-placeholder { inset: 6% 8% 18%; }
.af-card__body { position: relative; margin-top: -44px; flex: 1; border-radius: var(--af-radius-md); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.af-card__body h3 { font-size: var(--af-fs-h4); line-height: 1.1; margin-top: 4px; }
.af-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.af-card__actions .af-btn { flex: 1 1 auto; font-size: 14px; }
.af-card a.af-card__link { color: inherit !important; text-decoration: none; }
.af-grid { container-type: inline-size; }
.af-grid__inner { display: grid; gap: 20px; grid-template-columns: 1fr; }
@container (min-width: 640px) { .af-grid__inner { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 900px) { .af-grid__inner { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Placeholder (missing photo) ---------- */
.af-placeholder { position: absolute; inset: 8% 12% 38%; border-radius: var(--af-radius-sm); border: 2px dashed rgba(94, 106, 95, .55); display: grid; place-items: center; text-align: center; color: var(--af-color-muted); font: 700 var(--af-fs-small) / 1.35 var(--af-font-body); background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, .45) 12px 24px); }
.af-placeholder small { display: block; font-weight: 600; font-size: 12px; }

/* ---------- Product page: gallery left, everything else in cards on the right ---------- */
.af-product { container-type: inline-size; position: relative; overflow-x: clip; }
.af-product__grid { display: grid; gap: 20px; max-width: 1200px; margin: 0 auto; padding: 16px var(--af-gutter) var(--af-section-y); }
/* Gallery stage: the whole pack is always in view. Capped in real pixels and by the window height,
   so it stays a sensible size at any zoom level. */
.af-gallery { display: grid; gap: 12px; }
.af-gallery__stage, .af-product__media .af-placeholder-wrap {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: min(70vh, 600px);
  border-radius: var(--af-radius-card); background: var(--af-line-band); box-shadow: inset 0 -10px 0 var(--af-line-edge); overflow: hidden;
}
.af-gallery__slide { position: absolute; inset: 7% 9% 12%; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.af-gallery__slide.is-active { opacity: 1; pointer-events: auto; }
.af-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.af-gallery__nav {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; cursor: pointer; color: var(--af-color-ink);
  background: var(--af-btn-clear-lens), var(--af-btn-clear-fill); box-shadow: var(--af-btn-clear-rim);
  -webkit-backdrop-filter: blur(var(--af-btn-glass-blur)); backdrop-filter: blur(var(--af-btn-glass-blur));
}
.af-gallery__nav::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.af-gallery__nav--prev { left: 12px; }
.af-gallery__nav--next { right: 12px; }
.af-gallery__nav--next::after { transform: scaleX(-1); }
.af-gallery__nav:focus-visible { outline: none; box-shadow: var(--af-btn-clear-rim), var(--af-focus-ring); }
.af-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.af-gallery__thumb { width: 72px; height: 72px; padding: 6px; border: 0; border-radius: var(--af-radius-md); background: var(--af-line-band); box-shadow: inset 0 0 0 1px var(--af-color-hairline); cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.af-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.af-gallery__thumb:hover { transform: translateY(-1px); }
.af-gallery__thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--af-line-strong); }
.af-gallery__thumb:focus-visible { outline: none; box-shadow: var(--af-focus-ring); }
@media (prefers-reduced-motion: reduce) { .af-gallery__slide, .af-gallery__thumb { transition: none; } }
.af-product__info { display: flex; flex-direction: column; gap: 14px; }
/* The product's own content (facts, description, how to use) sits in cards under the buy box */
.af-product__body { display: grid; gap: 14px; }
.af-pcard { border-radius: var(--af-radius-lg); padding: 20px 22px; display: grid; gap: 12px; align-content: start; background: color-mix(in srgb, var(--af-color-white) 72%, transparent); box-shadow: inset 0 0 0 1px var(--af-color-hairline), 0 10px 24px -20px rgba(20, 30, 25, .35); }
.af-pcard h3 { font-size: var(--af-fs-h4); line-height: var(--af-lh-h4); }
.af-pcard .af-stats { border-top: 0; }
.af-pcard .af-steps { grid-template-columns: 1fr; gap: 10px; }
.af-pcard .af-steps li { grid-template-columns: 56px 1fr; padding: 12px 14px; background: var(--af-line-band); box-shadow: none; }
.af-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.af-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.af-cards--stack { grid-template-columns: 1fr; }
.af-section--sand .af-pcard { background: color-mix(in srgb, var(--af-color-white) 60%, transparent); }
.af-product__info h1 { margin-top: 2px; }
.af-product__buy { border-radius: var(--af-radius-lg); padding: 18px; display: grid; gap: 12px; }
.af-product__buy .af-label { color: var(--af-color-ink); }
.af-product__sizes { display: grid; gap: 10px; }
.af-product__size { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.af-product__size b { font-size: var(--af-fs-h4); line-height: 1; font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); }
.af-product__note { font-size: var(--af-fs-small); color: var(--af-color-ink); }
.af-facts { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--af-color-hairline); margin: 0; }
.af-facts dt, .af-facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--af-color-hairline); font-size: var(--af-fs-small); }
.af-facts dt { font-weight: 800; padding-right: 20px; }
@container (min-width: 860px) {
  .af-product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 28px; }
  .af-product__media { position: sticky; top: 24px; }
}
/* ---------- Find us (About) ---------- */
.af-findus { container-type: inline-size; border-radius: var(--af-radius-xl); padding: 26px; display: grid; gap: 20px; }
.af-findus__facts { display: grid; gap: 16px; }
.af-findus__facts .af-label { margin-bottom: 4px; }
.af-findus__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@container (min-width: 760px) {
  .af-findus__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Stats strip (figures take the line's numeral font) ---------- */
.af-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--af-color-hairline); border-bottom: 1px solid var(--af-color-hairline); }
.af-stats > div { padding: 14px 12px 14px 0; }
.af-stats > div + div { padding-left: 14px; border-left: 1px solid var(--af-color-hairline); }
.af-stats b { display: block; white-space: nowrap; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1; color: var(--af-line-strong); font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); letter-spacing: -0.01em; }
.af-stats span { display: block; font-size: 13px; line-height: 1.3; margin-top: 6px; color: var(--af-color-muted); }
.af-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-stats--4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
.af-stats--4 > div:nth-child(n+3) { border-top: 1px solid var(--af-color-hairline); }
@media (min-width: 760px) { .af-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .af-stats--4 > div:nth-child(3) { padding-left: 14px; border-left: 1px solid var(--af-color-hairline); } .af-stats--4 > div:nth-child(n+3) { border-top: 0; } }

/* ---------- Recipe card ---------- */
.af-recipe { container-type: inline-size; border-radius: var(--af-radius-card); background: var(--af-color-surface); box-shadow: inset 0 0 0 1px var(--af-color-hairline); overflow: hidden; }
.af-recipe__inner { display: grid; }
.af-recipe__photo { position: relative; aspect-ratio: 4 / 3; background: var(--af-line-band); }
.af-recipe__photo .af-placeholder { inset: 10%; }
.af-recipe__body { padding: 20px; display: grid; gap: 12px; }
.af-recipe__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.af-recipe ol, .af-recipe ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--af-fs-small); }
@container (min-width: 620px) { .af-recipe__inner { grid-template-columns: .9fr 1.1fr; } .af-recipe__photo { aspect-ratio: auto; min-height: 320px; } .af-recipe__body { padding: 28px; } }

/* ---------- WhatsApp CTA band ---------- */
.af-wa-band { container-type: inline-size; position: relative; overflow: hidden; padding: var(--af-section-y) var(--af-gutter); background: var(--af-line-band); }
.af-wa-band__card { position: relative; z-index: 1; border-radius: var(--af-radius-xl); padding: 24px; display: grid; gap: 14px; max-width: 760px; margin: 0 auto; text-align: center; justify-items: center; }

/* ---------- Blog post layout ---------- */
.af-post { container-type: inline-size; padding: 0 var(--af-gutter) var(--af-section-y); }
.af-post__head { max-width: var(--af-content); margin: 0 auto; padding: 24px 0 20px; display: grid; gap: 14px; }
.af-post__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: var(--af-fs-small); color: var(--af-color-muted); }
.af-post__cover { position: relative; max-width: var(--af-wide); margin: 0 auto 32px; aspect-ratio: 16 / 9; border-radius: var(--af-radius-card); overflow: hidden; background: var(--af-color-sand); }
.af-post__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.af-post__body { max-width: var(--af-content); margin: 0 auto; display: grid; gap: 20px; font-size: var(--af-fs-body); line-height: 1.7; }
.af-post__body > p:first-of-type::first-letter { float: left; font: 500 4.2em/.8 var(--af-font-display); padding: 6px 6px 0 0; color: var(--af-color-green); font-variation-settings: var(--af-font-display-variation); }
.af-post__body blockquote { margin: 8px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--af-color-green); font: italic 400 var(--af-fs-h3) / 1.25 var(--af-font-display); }
.af-post__body h2 { margin-top: 12px; }
.af-post__byline { display: flex; align-items: center; gap: 14px; border-radius: var(--af-radius-lg); padding: 14px 18px; margin-top: 12px; }
.af-post__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--af-color-sand); display: grid; place-items: center; font: 600 18px/1 var(--af-font-display); color: var(--af-color-green-deep); flex: none; }

/* ===================== Page-level components (Phase 4) ===================== */

/* ---------- Sections ---------- */
.af-section { padding: var(--af-section-y) var(--af-gutter); }
.af-section--tight { padding-top: calc(var(--af-section-y) / 2); padding-bottom: calc(var(--af-section-y) / 2); }
.af-section--sand { background: var(--af-color-sand); }
.af-section--band { background: var(--af-line-band); }
.af-wrap { max-width: var(--af-wide); margin: 0 auto; }
.af-wrap--content { max-width: var(--af-content); }
.af-section__head { display: grid; gap: 10px; margin-bottom: 28px; } /* intros and leads span the wrap; only long-form prose (posts) keeps a reading measure */
.af-section__foot { margin-top: 28px; }

/* ---------- Page header (inner pages) ---------- */
.af-pagehead { container-type: inline-size; position: relative; overflow: hidden; }
.af-pagehead__body { padding: 28px var(--af-gutter) 36px; max-width: calc(var(--af-wide) + 2 * var(--af-gutter)); margin: 0 auto; display: grid; gap: 14px; }
.af-pagehead__body h1 { max-width: 16ch; }
@container (min-width: 760px) { .af-pagehead__body { padding-top: 48px; padding-bottom: 56px; } }

/* ---------- Filter chips ---------- */
.af-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.af-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--af-radius-pill); font: 800 var(--af-fs-small) / 1 var(--af-font-body); text-decoration: none; color: var(--af-color-ink) !important; background: var(--af-color-surface); box-shadow: inset 0 0 0 1px var(--af-color-hairline); }
.af-filter a[aria-current="page"] { background: var(--af-color-ink); color: var(--af-color-paper) !important; box-shadow: none; }

/* ---------- Line heading (shop groups) ---------- */
.af-linehead { display: grid; gap: 8px; margin-bottom: 24px; }
.af-linehead p { color: var(--af-color-muted); }

/* ---------- Split (founder, story) ---------- */
.af-split { container-type: inline-size; }
.af-split__inner { display: grid; gap: 28px; align-items: center; }
.af-split__media { position: relative; aspect-ratio: 4 / 4.4; border-radius: var(--af-radius-card); overflow: hidden; background: var(--af-color-sand); }
.af-split__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.af-split__media .af-placeholder { inset: 8%; }
.af-split__media--photo > img { object-fit: cover; }
.af-split__media--wide { aspect-ratio: 4 / 3; } /* documentary photos (the farm) fill the frame; product photos never do */
.af-split__body { display: grid; gap: 16px; }
.af-split__body blockquote { margin: 4px 0; padding-left: 18px; border-left: 3px solid var(--af-color-green); font: italic 400 var(--af-fs-h4) / 1.3 var(--af-font-display); font-variation-settings: var(--af-font-display-variation); }
@container (min-width: 760px) { .af-split__inner { grid-template-columns: 1fr 1.1fr; gap: 56px; } .af-split--flip .af-split__media { order: 2; } }

/* ---------- How-to steps ---------- */
.af-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.af-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: var(--af-radius-lg); background: var(--af-color-surface); box-shadow: inset 0 0 0 1px var(--af-color-hairline); }
.af-steps b { font-size: 30px; line-height: 1; color: var(--af-line-strong); font-family: var(--af-line-numeral-font); font-weight: var(--af-line-numeral-weight); font-variation-settings: var(--af-line-numeral-variation); }
.af-steps p { font-size: var(--af-fs-body); }
@media (min-width: 900px) { .af-steps { grid-template-columns: repeat(3, 1fr); } .af-steps li { grid-template-columns: 1fr; } }

/* ---------- Blog cards ---------- */
.af-postcard { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit !important; }
.af-postcard__media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--af-radius-lg); overflow: hidden; background: var(--af-color-sand); }
.af-postcard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-postcard__media .af-placeholder { inset: 10%; }
.af-section--sand .af-postcard__media { background: var(--af-color-paper); }
.af-postcard h3 { font-size: var(--af-fs-h4); line-height: 1.15; }
.af-postcard p { font-size: var(--af-fs-small); color: var(--af-color-muted); }
.af-postcard--feature .af-postcard__media { aspect-ratio: 16 / 9; }
.af-postcard--feature h3 { font-size: var(--af-fs-h2); line-height: var(--af-lh-h2); }
@container (min-width: 900px) { .af-postcard--feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; } }

/* ---------- Site footer ---------- */
.af-footer { container-type: inline-size; background: var(--af-color-sand); padding: var(--af-section-y) var(--af-gutter) 28px; }
.af-footer__inner { max-width: var(--af-wide); margin: 0 auto; display: grid; gap: 32px; }
.af-footer__brand { display: grid; gap: 14px; }
.af-footer__brand img { height: 46px; width: auto; }
.af-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.af-footer h4 { font: 800 var(--af-fs-label) / 1.2 var(--af-font-body); letter-spacing: var(--af-tracking-label); text-transform: uppercase; color: var(--af-color-ink); margin-bottom: 10px; }
.af-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--af-fs-small); }
.af-footer a { color: var(--af-color-ink) !important; text-decoration: none; }
.af-footer a:hover { text-decoration: underline; }
.af-footer__base { max-width: var(--af-wide); margin: 32px auto 0; padding-top: 18px; border-top: 1px solid var(--af-color-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--af-color-muted); }
@container (min-width: 760px) { .af-footer__inner { grid-template-columns: 1.2fr 2fr; } .af-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- To-confirm marker (mockups: facts not yet confirmed) ---------- */
.af-tbc { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(255, 102, 0, .12); color: var(--af-color-ink); font-size: 12px; font-weight: 700; border: 1px dashed rgba(179, 71, 0, .5); }