/* ==========================================================================
   African Farm & Gardens — africanfg.com
   ==========================================================================

   COLOUR VALUES: MEASURED FROM THE DESIGN EXPORTS (9 Sep 2026).

   The first pass matched these by eye from Figma's rendered previews. On
   9 Sep the flattened PNGs were exported and sampled directly (see
   afg-design/ and the sampling script in the session log). Solid fills —
   announcement bar, buttons, footer, banner, page ground — are the most
   common pixel in a known region and are authoritative. Text colours are
   anti-aliased and measure darker than they read; --green for the headline
   accent is placed between its measured core (#012514) and its visual weight.

   Swap any value below and nothing else needs to change.
   ========================================================================== */

:root {
    /* Brand — measured. */
    --orange:        #D94704;   /* announce bar #DA4703, primary button #D64705 */
    --orange-deep:   #BE3F03;   /* Kilishi banner, right edge */
    --orange-burnt:  #9B3F05;   /* Kilishi banner, left edge */
    --orange-soft:   #FDECE3;   /* icon-circle wash on Contact */
    --green:         #1A4A2E;   /* headline accent; measured core #012514 */
    --green-dark:    #103320;   /* footer */
    --green-band:    #0C361E;   /* About page stats band */
    --cream:         #F8ECE3;   /* hero ground */
    --ink:           #141110;   /* headline text measures #000; softened one step */

    /* Page and surfaces. The design's page ground is off-white, not white;
       cards sit white on top of it. */
    --paper:         #F9F4F0;   /* body ground, measured */
    --card:          #FFFFFF;
    --muted:         #74706D;   /* body copy, measured */
    --muted-soft:    #9A948E;
    --line:          #EDE6DF;
    --line-strong:   #DDD3C8;
    --wash:          #EEEAE5;   /* stats strip, measured */

    /* Status. Separate from the brand accent on purpose. */
    --ok:            #2E7D4F;
    --warn:          #A8620C;
    --warn-soft:     #FDF4E6;

    --radius-sm:     6px;
    --radius:        10px;
    --radius-lg:     16px;
    --radius-pill:   999px;

    --shadow-card:   0 1px 2px rgba(20, 17, 16, .04), 0 4px 14px rgba(20, 17, 16, .05);
    --shadow-lift:   0 2px 6px rgba(20, 17, 16, .07), 0 12px 28px rgba(20, 17, 16, .09);

    --font-display:  "Playfair Display", "Iowan Old Style", Georgia, serif;
    --font-body:     "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-script:   "Kaushan Script", "Snell Roundhand", cursive;

    --shell:         1240px;
    --gutter:        24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* An <svg> with no width or height renders at the 300x150 replaced-element
   default, which is how a 13px leaf became a 138px smear across the category
   rail. Every glyph here is a 24-unit box; this is the floor, not the rule. */
svg { width: 16px; height: 16px; flex: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.15;
    text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
    border-radius: 3px;
}

.shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --------------------------------------------------------------- announce */

.announce {
    background: var(--orange-deep);
    color: #FDE6DC;
    font-size: 11.5px;
    letter-spacing: .01em;
}
.announce ul {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.announce ul::-webkit-scrollbar { display: none; }
.announce li {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.announce svg { width: 13px; height: 13px; flex: none; opacity: .85; }

/* ---------------------------------------------------------------- header */

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.masthead .shell {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}

.brandmark { display: flex; align-items: center; gap: 10px; flex: none; }
.brandmark .glyph {
    width: 34px; height: 34px; flex: none;
    border-radius: 8px;
    background: linear-gradient(140deg, var(--orange) 0%, var(--orange-deep) 55%, var(--green) 56%, var(--green-dark) 100%);
    display: grid; place-items: center;
    color: #fff;
}
.brandmark .glyph svg { width: 19px; height: 19px; }
.brandmark .words { line-height: 1.05; }
.brandmark .words strong {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--green-dark);
}
.brandmark .words span {
    display: block;
    font-size: 8.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--muted-soft);
}

.mainnav { margin-inline: auto; }
.mainnav ul {
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mainnav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 500;
    color: #3D362C;
    padding: 6px 0;
    position: relative;
}
.mainnav a[aria-current="page"] { color: var(--orange); font-weight: 700; }
.mainnav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
}
.mainnav .caret { width: 9px; height: 9px; opacity: .55; }

.headtools { display: flex; align-items: center; gap: 6px; flex: none; }
.headtools a:not(.btn), .headtools button:not(.btn) {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-sm);
    color: #3D362C;
    position: relative;
}
.headtools a:not(.btn):hover, .headtools button:not(.btn):hover { background: var(--wash); color: var(--orange); }
.headtools a:not(.btn) svg, .headtools button:not(.btn) svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); color: #fff; }

.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

.btn-light { background: #fff; color: var(--orange-burnt); }
.btn-light:hover { background: var(--cream); color: var(--orange-burnt); }

.btn-sm { padding: 7px 13px; font-size: 12px; }
.btn-block { width: 100%; }

.btn[aria-disabled="true"] {
    background: var(--wash);
    color: var(--muted-soft);
    border-color: var(--line);
    cursor: not-allowed;
}

/* -------------------------------------------------------------- sections */

.section { padding: 34px 0; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.section-head h2 {
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-head h2 .mark { font-size: 15px; }
.linkmore {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
}
.linkmore:hover { color: var(--orange); }
.linkmore svg { width: 13px; height: 13px; }
.section-head h2 .mark { display: inline-flex; }
.section-head h2 .mark svg { width: 15px; height: 15px; color: var(--orange); }

/* Filter pills, used above Popular Favourites and the recipe strip. */
.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--card);
    font-size: 12px;
    font-weight: 500;
    color: #4A4239;
}
.pill:hover { border-color: var(--orange); color: var(--orange); }
.pill[aria-current="true"] {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    font-weight: 600;
}
.pill[aria-current="true"]:hover { color: #fff; }

/* ------------------------------------------------------------------ hero */

.hero {
    background: linear-gradient(180deg, var(--cream) 0%, #F7EFE1 100%);
    position: relative;
    overflow: hidden;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    background: radial-gradient(circle at 30% 30%, rgba(30, 91, 51, .10), transparent 62%);
    pointer-events: none;
}
.hero::before { top: -80px; left: -70px; }
.hero::after  { bottom: -110px; right: -60px; }

.hero .shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: center;
    padding-block: 46px;
}
.hero .script {
    font-family: var(--font-script);
    font-size: 30px;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 6px;
}
.hero h1 { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.01em; }
.hero h1 .accent { color: var(--green); }
.hero .lede {
    margin-top: 14px;
    max-width: 42ch;
    color: var(--muted);
    font-size: 14.5px;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.trustline { display: flex; align-items: center; gap: 11px; margin-top: 26px; }
.trustline .faces { display: flex; }
.trustline .faces span {
    width: 27px; height: 27px;
    border-radius: 50%;
    border: 2px solid var(--cream);
    margin-left: -8px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; color: #fff;
    background: var(--green);
}
.trustline .faces span:first-child { margin-left: 0; }
.trustline .faces span:nth-child(2) { background: var(--orange); }
.trustline .faces span:nth-child(3) { background: var(--orange-burnt); }
.trustline .faces span:nth-child(4) { background: var(--green-dark); }
.trustline p { font-size: 11.5px; color: var(--muted); }

.hero-stage {
    position: relative;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, #F3E7D4, #E9D9C0);
    min-height: 300px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero-stage img { width: 100%; height: 100%; object-fit: cover; }

.hero-points { display: grid; gap: 10px; align-content: center; }
.hero-point { display: flex; gap: 10px; align-items: flex-start; }
.hero-point .ico {
    width: 30px; height: 30px; flex: none;
    border-radius: 8px;
    background: var(--card);
    display: grid; place-items: center;
    color: var(--orange);
    box-shadow: var(--shadow-card);
}
.hero-point .ico svg { width: 15px; height: 15px; }
.hero-point strong { display: block; font-size: 12.5px; font-weight: 700; }
.hero-point span { font-size: 11px; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------- page head */

.pagehead {
    background: linear-gradient(180deg, var(--cream), #F6EDDF);
    padding-block: 40px;
    border-bottom: 1px solid var(--line);
}
.pagehead h1 { font-size: clamp(30px, 4vw, 44px); }
.pagehead h1 .accent { color: var(--green); }
.pagehead .eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 8px;
}
.pagehead .lede { margin-top: 12px; max-width: 52ch; color: var(--muted); font-size: 14px; }

.searchbar { display: flex; gap: 8px; margin-top: 20px; max-width: 420px; }
.searchbar input {
    flex: 1;
    padding: 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    font: inherit;
    font-size: 13px;
}
.searchbar input:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }

/* ----------------------------------------------------------- category rail */

.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(124px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.cat-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 10px 10px 12px;
    text-align: center;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cat-card:hover { border-color: var(--orange); box-shadow: var(--shadow-card); color: inherit; }
.cat-card .thumb {
    height: 76px;
    border-radius: var(--radius-sm);
    background: var(--wash);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 16px;
}
.cat-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-card .thumb svg { width: 26px; height: 26px; color: var(--line-strong); }
.cat-card .badge {
    position: absolute;
    left: 50%;
    top: 78px;
    transform: translateX(-50%);
    width: 27px; height: 27px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid; place-items: center;
    border: 2px solid var(--paper);
}
.cat-card .badge svg { width: 13px; height: 13px; }
.cat-card strong { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.cat-card span { font-size: 10.5px; color: var(--muted-soft); }

/* --------------------------------------------------------- product cards */

.grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 14px;
}

.p-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.p-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.p-card .shot {
    aspect-ratio: 1 / 1;
    background: var(--wash);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}
.p-card .shot img { width: 100%; height: 100%; object-fit: cover; }

/* No photograph on file. Says so, in the brand's own furniture, rather than
   borrowing a stock image of food that is not this product. */
.noshot {
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    padding: 12px;
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(45deg, transparent 0 7px, rgba(30, 91, 51, .035) 7px 14px),
        var(--wash);
}
.noshot .initials {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
.noshot small { font-size: 9.5px; color: var(--muted-soft); letter-spacing: .04em; }

.p-card .flag {
    position: absolute;
    left: 8px; top: 8px;
    background: var(--orange);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
}

.p-card .body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.p-card .name { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.p-card .sub { font-size: 11px; color: var(--muted-soft); }
.p-card .size { font-size: 11px; color: var(--muted); margin-top: 2px; }
.p-card .price { font-size: 13px; font-weight: 700; color: var(--green); margin-top: 4px; }
.p-card .price.unset { font-size: 11px; font-weight: 500; color: var(--muted-soft); }
.p-card .cta { margin-top: auto; padding-top: 10px; }

/* --------------------------------------------------------- range layout */

.range-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding-block: 26px;
}

.filters {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    position: sticky;
    top: 84px;
}
.filters > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}
.filters > header strong { font-size: 13px; }
.filters > header a { font-size: 11.5px; color: var(--orange); font-weight: 600; }

.fgroup { border-bottom: 1px solid var(--line); padding: 13px 15px; }
.fgroup:last-child { border-bottom: 0; }
.fgroup > strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 9px;
    color: var(--ink);
}
.fgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fgroup li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4A4239;
}
.fgroup li a::before {
    content: "";
    width: 13px; height: 13px;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    flex: none;
    background: var(--card);
}
.fgroup li a[aria-current="true"] { color: var(--orange); font-weight: 600; }
.fgroup li a[aria-current="true"]::before {
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: inset 0 0 0 2px #fff;
}
.fgroup li .count { margin-left: auto; font-size: 10.5px; color: var(--muted-soft); }

.bulkbox {
    margin: 15px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--green-dark);
    color: #D9E5DB;
}
.bulkbox strong { display: block; color: #fff; font-size: 13px; margin-bottom: 4px; }
.bulkbox p { font-size: 11px; line-height: 1.5; margin-bottom: 10px; }

.range-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}
.range-toolbar .count { font-size: 12.5px; color: var(--muted); }
.range-toolbar .count b { color: var(--ink); }
.range-toolbar form { display: flex; align-items: center; gap: 8px; }
.range-toolbar label { font-size: 12px; color: var(--muted); }
.range-toolbar select {
    font: inherit;
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
}

/* ------------------------------------------------------------ pagination */

.pager { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.pager a, .pager span {
    min-width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--line);
    padding-inline: 8px;
}
.pager a:hover { border-color: var(--orange); color: var(--orange); }
.pager [aria-current="page"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.pager .gap { border: 0; color: var(--muted-soft); }

/* -------------------------------------------------------------- kilishi */

.kilishi {
    border-radius: var(--radius-lg);
    background: linear-gradient(100deg, var(--orange-burnt) 0%, var(--orange-deep) 100%);
    color: #F6E3DA;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, .7fr);
    gap: 26px;
    align-items: center;
}
.kilishi .eyebrow {
    font-size: 10px;
    letter-spacing: .38em;
    color: #E9A88F;
    margin-bottom: 8px;
}
.kilishi h2 { color: #fff; font-size: 27px; margin-bottom: 8px; }
.kilishi p { font-size: 12.5px; line-height: 1.55; margin-bottom: 16px; }
.kilishi .packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 9px; }
.kilishi .pack {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    place-items: center;
    padding: 8px;
    text-align: center;
    font-size: 9.5px;
    line-height: 1.35;
    color: #F3D9CE;
    overflow: hidden;
}
.kilishi .pack img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.kilishi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kilishi ul li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.kilishi ul svg { width: 15px; height: 15px; flex: none; color: #F0A288; }

/* -------------------------------------------------------- recipe cards */

.grid-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 16px;
}
.r-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.r-card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.r-card .shot {
    aspect-ratio: 16 / 10;
    background: var(--wash);
    position: relative;
    overflow: hidden;
}
.r-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.r-card .flag {
    position: absolute; left: 9px; top: 9px;
    background: var(--orange); color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill);
}
.r-card .body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.r-card h3 { font-size: 15px; line-height: 1.3; }
.r-card p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.r-card .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 10px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--muted);
}
.chip svg { width: 12px; height: 12px; color: var(--orange); flex: none; }

/* Horizontal recipe card, used on the homepage strip. */
.r-wide { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.r-wide .shot { aspect-ratio: auto; height: 100%; }

/* --------------------------------------------------------------- purpose */

.purpose {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 26px;
    align-items: center;
}
.purpose h2 { font-size: 23px; margin-bottom: 10px; }
.purpose p { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.purpose .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.purpose .tile {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
}
.purpose .tile .img {
    aspect-ratio: 4 / 3;
    background: linear-gradient(140deg, #E6D9C2, #D6C4A6);
    display: grid; place-items: center;
    color: var(--green-dark);
}
.purpose .tile .img svg { width: 24px; height: 24px; opacity: .7; }
.purpose .tile span { display: block; padding: 8px 9px; font-size: 10.5px; font-weight: 600; text-align: center; }

/* ----------------------------------------------------------------- stats */

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    background: var(--wash);
}
.stat { display: flex; align-items: center; gap: 12px; }
.stat .ico {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: var(--card);
    display: grid; place-items: center;
    color: var(--green);
    border: 1px solid var(--line);
}
.stat .ico svg { width: 18px; height: 18px; }
.stat b { display: block; font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.stat span { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* A figure nobody has measured. Reads as a gap, never as a number. */
.stat b.unknown { font-size: 13px; font-family: var(--font-body); font-weight: 600; color: var(--warn); }

/* ----------------------------------------------------------------- notes */

.notice {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    border: 1px solid #EFDCBC;
    background: var(--warn-soft);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: #6B4A11;
    line-height: 1.55;
}
.notice svg { width: 16px; height: 16px; flex: none; color: var(--warn); margin-top: 1px; }
.notice strong { display: block; color: #4E360B; }

.empty {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 44px 28px;
    text-align: center;
    background: var(--wash);
}
.empty .ico {
    width: 46px; height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--muted-soft);
}
.empty .ico svg { width: 21px; height: 21px; }
.pager svg { width: 13px; height: 13px; }
.noshot svg { width: 20px; height: 20px; }
.hero-stage .noshot .initials { width: 58px; height: 58px; font-size: 18px; }
.empty h3 { font-size: 18px; margin-bottom: 7px; }
.empty p { font-size: 13px; color: var(--muted); max-width: 46ch; margin: 0 auto; }

/* ---------------------------------------------------------------- product */

.product-layout {
    display: grid;
    /* Not 1fr 1fr: a square image in a 578px column towers over a short spec
       list. Capping the image column keeps the two sides in proportion. */
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 34px;
    padding-block: 30px;
    align-items: start;
}
.product-shot {
    aspect-ratio: 1 / 1;
    max-width: 460px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--wash);
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; }
.product-main h1 { font-size: 30px; margin-bottom: 6px; }
.product-main .cat { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.product-main .summary { margin-top: 12px; color: var(--muted); font-size: 14px; }
.product-main .buybox { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.spec { margin-top: 24px; border-top: 1px solid var(--line); }
.spec div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }
.spec dd.unset { color: var(--muted-soft); font-style: italic; }

.crumbs { font-size: 11.5px; color: var(--muted-soft); padding-top: 16px; }
.crumbs a:hover { color: var(--orange); }

/* ---------------------------------------------------------------- footer */

.sitefoot {
    background: var(--green-dark);
    color: #C8D6CA;
    margin-top: 44px;
    font-size: 12px;
}
.sitefoot .cols {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
    gap: 26px;
    padding-block: 34px;
}
.sitefoot .brandmark .words strong { color: #fff; }
.sitefoot .brandmark .words span { color: #8FA894; }
.sitefoot .blurb { margin-top: 12px; line-height: 1.65; max-width: 30ch; color: #A8BCAC; }
.sitefoot h4 {
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitefoot a:hover { color: #fff; }
.sitefoot .contact li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.sitefoot .contact svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: #7FA588; }
.sitefoot .contact .unset { color: #7E9683; font-style: italic; }

.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    display: grid; place-items: center;
    color: #C8D6CA;
}
.socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.socials svg { width: 13px; height: 13px; }

.footbar {
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-block: 13px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #93AC98;
}
.footbar ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
    .kilishi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kilishi ul { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); display: grid; }
    .sitefoot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hero .shell { grid-template-columns: 1fr; }
    .range-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
    .purpose { grid-template-columns: 1fr; }
    .product-layout { grid-template-columns: 1fr; }
    .mainnav { display: none; }
}

@media (max-width: 620px) {
    .kilishi { grid-template-columns: 1fr; }
    .kilishi ul { grid-template-columns: 1fr; }
    .sitefoot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats { grid-template-columns: 1fr; }
    .purpose .tiles { grid-template-columns: repeat(2, 1fr); }
    .grid-products { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
    .r-wide { grid-template-columns: 1fr; }
    .r-wide .shot { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   Added 9 Sep 2026 — About, Contact, Recipe detail
   ====================================================================== */

/* Split page header: copy left, art right. Used by About, Contact, Recipe. */
.pagehead-split .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: center;
}
.pagehead-art {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(150deg, #F1E3D3, #E6D5BE);
}
.pagehead-art img { width: 100%; height: 100%; object-fit: cover; }
.pagehead .respond {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 18px; padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #EEF3EC; border: 1px solid #D9E4D6;
    font-size: 12.5px; color: var(--green);
}
.pagehead .respond svg { width: 16px; height: 16px; color: var(--green); }

.h-section { font-size: 21px; margin-bottom: 14px; }

/* About: mission / vision / values */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--card);
    overflow: hidden;
}
.pillar { display: flex; gap: 14px; padding: 24px 22px; border-right: 1px solid var(--line); }
.pillar:last-child { border-right: 0; }
.pillar .ico {
    width: 44px; height: 44px; flex: none;
    border-radius: 50%;
    background: var(--orange-soft); color: var(--orange);
    display: grid; place-items: center;
}
.pillar .ico svg { width: 20px; height: 20px; }
.pillar h2 { font-size: 17px; margin-bottom: 6px; }
.pillar p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ticks li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.ticks svg { width: 13px; height: 13px; color: var(--green); }

/* About: dark stats band */
.band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--green-band);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 26px;
}
.band-stat { display: flex; align-items: center; gap: 12px; padding: 4px 12px; border-left: 1px solid rgba(255,255,255,.14); }
.band-stat:first-child { border-left: 0; padding-left: 0; }
.band-stat .ico svg { width: 30px; height: 30px; opacity: .9; }
.band-stat b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.band-stat b.unknown { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #E9C9A4; }
.band-stat strong { display: block; font-size: 12.5px; }
.band-stat small { display: block; font-size: 10.5px; color: #B8CDBD; }

/* About: story */
.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.story h2 { font-size: 24px; margin-bottom: 12px; }
.story p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }
.story-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.story-tile {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    background: linear-gradient(160deg, #2B5A3C, var(--green-dark));
    color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: 16px;
}
.story-tile .ico svg { width: 22px; height: 22px; opacity: .85; }
.story-tile strong { font-size: 14px; }

/* About: team (renders only when populated) */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.member { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.member .shot { aspect-ratio: 1 / 1; background: var(--wash); }
.member .shot img { width: 100%; height: 100%; object-fit: cover; }
.member strong { display: block; padding: 10px 12px 0; font-size: 13px; }
.member span { display: block; padding: 2px 12px 12px; font-size: 11.5px; color: var(--muted); }

.pullquote {
    margin: 0; padding: 26px 30px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card);
    font-family: var(--font-display); font-size: 19px; line-height: 1.45;
}
.pullquote footer { margin-top: 12px; font-family: var(--font-body); font-size: 12.5px; }
.pullquote footer span { display: block; color: var(--muted); font-size: 11px; }

/* About: sourcing promise */
.promise {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden;
}
.promise > div:first-child { padding: 24px 26px; }
.promise h2 { font-size: 22px; margin-bottom: 4px; }
.promise .lede { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.promise-grid > div { text-align: center; padding: 0 6px; border-left: 1px solid var(--line); }
.promise-grid > div:first-child { border-left: 0; }
.promise-grid .ico svg { width: 30px; height: 30px; color: var(--green); margin-bottom: 8px; }
.promise-grid strong { display: block; font-size: 12.5px; margin-bottom: 4px; }
.promise-grid p { font-size: 11px; color: var(--muted); line-height: 1.5; }
.promise-art { min-height: 220px; background: linear-gradient(150deg, #E9DBC6, #D8C4A5); }
.promise-art .noshot, .pagehead-art .noshot { border-radius: 0; }

/* Contact: four tiles */
.tiles4 {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card);
}
.tile4 { display: flex; gap: 12px; padding: 20px 18px; border-left: 1px solid var(--line); }
.tile4:first-child { border-left: 0; }
.tile4 .ico {
    width: 42px; height: 42px; flex: none; border-radius: 50%;
    background: var(--orange-soft); color: var(--orange); display: grid; place-items: center;
}
.tile4 .ico svg { width: 19px; height: 19px; }
.tile4 strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 3px; }
.tile4 a, .tile4 > div > span { display: block; font-size: 12.5px; }
.tile4 small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.unset { color: var(--muted-soft); font-style: italic; }

/* Contact: form + ways */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; padding-block: 30px; align-items: start; }
.cform { display: grid; gap: 14px; }
.frow.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 5px; }
.fld label { font-size: 12px; font-weight: 600; }
.fld label b { color: var(--orange); font-weight: 700; }
.fld input, .fld select, .fld textarea {
    font: inherit; font-size: 13px; padding: 10px 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card);
    width: 100%;
}
.fld textarea { resize: vertical; min-height: 130px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }
.fld.has-error input, .fld.has-error textarea { border-color: #C2410C; }
.fld .err { font-size: 11.5px; color: #B3410F; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.factions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.factions .safe { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.factions .safe svg { width: 13px; height: 13px; color: var(--orange); }
.notice-ok { border-color: #CFE3D4; background: #EEF6F0; color: #1F4D30; }
.notice-ok svg { color: var(--green); }
.notice-ok strong { color: #163D22; }

.ways { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 20px 22px; }
.way { display: flex; gap: 12px; padding: 14px 0; border-top: 1px dashed var(--line); }
.way:first-of-type { border-top: 0; padding-top: 4px; }
.way .ico svg { width: 24px; height: 24px; color: var(--green); }
.way strong { display: block; font-family: var(--font-display); font-size: 14.5px; margin-bottom: 3px; }
.way p { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
.way a { font-size: 12px; font-weight: 600; color: var(--green); }
.way .unset { font-size: 12px; }

/* Recipe: facts strip */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.fact { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact .ico svg { width: 22px; height: 22px; color: var(--orange); }
.fact strong { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.fact b { display: block; font-size: 13.5px; }

.recipe-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) minmax(0, .85fr); gap: 20px; padding-block: 26px; align-items: start; }
.rbox { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 20px 22px; }
.rbox h2 { font-size: 18px; margin-bottom: 4px; }
.rbox .sub { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.rbox .unset { font-size: 12.5px; }
.ingredients { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ingredients li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; }
.ingredients svg { width: 13px; height: 13px; color: var(--orange); margin-top: 3px; }
.ingredients a { color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.steps .num {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--orange); color: var(--orange);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.steps p { font-size: 13px; line-height: 1.6; color: #3D362C; padding-top: 4px; }
.protip { display: flex; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: #EEF3EC; border: 1px solid #D9E4D6; }
.protip svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }
.protip strong { display: block; font-family: var(--font-display); font-size: 14px; margin-bottom: 3px; }
.protip p { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.related { display: grid; gap: 10px; }
.rel { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; }
.rel .shot { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: var(--wash); overflow: hidden; }
.rel .shot img { width: 100%; height: 100%; object-fit: cover; }
.rel strong { display: block; font-size: 12.5px; line-height: 1.3; }
.rel .chips { display: flex; gap: 8px; margin-top: 4px; }
.share { margin-top: 16px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--orange-soft); border: 1px solid #F6D9C7; }
.share > svg { width: 24px; height: 24px; color: var(--orange); margin-bottom: 8px; }
.share strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.share p { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }

@media (max-width: 1040px) {
    .pillars { grid-template-columns: 1fr; }
    .pillar { border-right: 0; border-bottom: 1px solid var(--line); }
    .band { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .band-stat { border-left: 0; padding-left: 0; }
    .tiles4 { grid-template-columns: repeat(2, 1fr); }
    .recipe-layout { grid-template-columns: 1fr 1fr; }
    .recipe-layout > aside:last-child { grid-column: 1 / -1; }
    .promise { grid-template-columns: 1fr; }
    .promise-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .pagehead-split .shell, .story, .contact-layout, .recipe-layout { grid-template-columns: 1fr; }
    .frow.two { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .tiles4, .band, .promise-grid { grid-template-columns: 1fr; }
    .story-tiles { grid-template-columns: 1fr; }
}

@media print {
    .announce, .masthead, .sitefoot, .share, .related, .btn, .pills { display: none !important; }
    .recipe-layout { grid-template-columns: 1fr; }
    body { background: #fff; }
}

/* ---------- portal-filled images ----------
   Added 9 Sep 2026. These slots are empty by default and each falls back to
   the glyph or the "photography to follow" panel that was already there, so
   every rule below only ever applies once somebody has uploaded something. */
.cat-card .thumb .cat-photo,
.purpose .tile .img .tile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* The glyph placeholders are centred with flex; an <img> child needs the box
   to stop centring and start filling, or it sits small in the middle. */
.cat-card .thumb:has(.cat-photo),
.purpose .tile .img:has(.tile-photo) {
    display: block;
    padding: 0;
    overflow: hidden;
}

.pagehead-art img,
.hero-art img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}

/* ---------- nav dropdown ----------
   Hover opens it, and CSS alone is enough — the script adds keyboard and touch
   support on top rather than being the only way in. */
.mainnav li.has-menu { position: relative; }
.mainnav li.has-menu > a { cursor: pointer; }
.mainnav li.has-menu .caret { transition: transform .15s ease; }
.mainnav li.has-menu:hover .caret,
.mainnav li.has-menu.is-open .caret { transform: rotate(180deg); }

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 232px;
    padding: 7px;
    margin-top: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px rgba(20, 17, 16, .13);
}
/* The gap between the link and the panel would otherwise close the menu the
   moment the pointer crosses it. */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }

.mainnav li.has-menu:hover > .submenu { display: block; }
.submenu[hidden] { display: none; }
.mainnav li.has-menu:hover > .submenu[hidden] { display: block; }

.submenu ul { list-style: none; margin: 0; padding: 0; display: block; }
.submenu li { display: block; }
.submenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-radius: 7px;
    font-size: 13px; color: var(--ink); white-space: nowrap;
}
.submenu a:hover { background: var(--orange-soft); color: var(--orange-deep); }
.submenu a small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.submenu a:hover small { color: var(--orange-deep); }

/* ---------- hero carousel ----------
   Slides are stacked and cross-faded. The first is in the HTML already
   visible, so the page is never blank waiting for script. */
.hero-carousel { position: relative; }
.hero-slide { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hero-carousel { display: grid; }
.hero-slide.is-on { opacity: 1; pointer-events: auto; }
.hero-slide img { display: block; width: 100%; height: auto; border-radius: 18px; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

.hero-dots {
    position: absolute; left: 16px; bottom: 14px; z-index: 3;
    display: flex; gap: 7px;
    padding: 6px 8px; border-radius: 999px;
    background: rgba(20, 17, 16, .34);
    backdrop-filter: blur(3px);
}
.hero-dots button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
.hero-dots button.is-on { background: #fff; width: 20px; border-radius: 999px; }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- sourcing band ----------
   These were rendering far taller than the design intended, because the
   images kept their own portrait-ish proportions instead of the 4:3 the row
   was laid out for. Constraining the row's width as well as the tile's aspect
   keeps them reading as small supporting thumbnails rather than four large
   pictures competing with the heading beside them. */
.purpose .tiles { max-width: 560px; margin-left: auto; gap: 10px; }
.purpose .tile .img { aspect-ratio: 4 / 3; }
.purpose .tile .img:has(.tile-photo) { display: block; padding: 0; overflow: hidden; }
.purpose .tile .img .tile-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.purpose .tile span:not(.img) { padding: 7px 8px; font-size: 10px; line-height: 1.3; }

@media (max-width: 980px) {
    .purpose .tiles { max-width: none; margin-left: 0; }
}

/* ---------- legal pages ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--font-display); font-size: 20px; margin: 28px 0 10px; }
.prose h3 { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.prose p, .prose li { font-size: 14px; line-height: 1.75; color: var(--ink); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--orange-deep); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: var(--wash); font-weight: 700; }

/* ---------- product card buy link ---------- */
.p-card .cta { display: flex; flex-direction: column; gap: 6px; }
.p-card .cta .btn-ghost { font-size: 11.5px; }

/* ---------- pack shots ----------
   Product photography here is a tall resealable pouch shot on white. Cropping
   it to fill a square card (object-fit: cover) cuts the top and bottom off the
   bag, so the customer sees a slice of packaging rather than the product. The
   whole pack has to be visible: it carries the name, the weight and the brand.

   `contain` leaves letterboxing, which is why the surround is a near-white
   ground that matches the photographs' own background instead of the grey
   used behind the "no photograph" placeholder. */
.p-card .shot:has(img),
.rel .shot:has(img) {
    background: #fff;
}
/* The square is correct; the image was overflowing it and being clipped by
   overflow:hidden, which is what cropped the top and bottom off every pack.
   The grid row was `auto` — sized by the image — so `height:100%` and
   `max-height:100%` on the image had nothing definite to resolve against and
   the image simply took its natural height. Pinning the track to
   minmax(0, 1fr) makes the area definite, and then `contain` can do its job. */
.p-card .shot,
.rel .shot {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
}
.p-card .shot img,
.rel .shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* The detail page shows the pack larger; same reasoning, more room. */
.product-shot:has(img) { background: #fff; }
.product-shot {
    display: grid;
    place-items: center;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
}
.product-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}

/* ==========================================================================
   HOME PAGE — the design as drawn (10 Sep 2026)
   ==========================================================================

   Added when the home page was rebuilt against the exported design: the brand
   mark, the header tools, the rail arrows, the category tabs and the Instagram
   strip. Kept in one block at the end so the earlier cascade is untouched and
   anything here can be lifted out whole.
   ========================================================================== */

/* An element hidden by the `hidden` attribute must actually be hidden. The UA
   rule is `[hidden] { display: none }`, which any later `display` on a class
   beats — and .p-card sets `display: flex`, so filtered-out cards stayed
   visible. This is the one place in the file that needs the flag. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------- brand mark */

/* The mark is the sun-and-leaf device, not a glyph in a tinted box. */
.brandmark .glyph {
    width: 38px;
    height: 38px;
    border-radius: 0;
    background: none;
    display: block;
}
.brandmark .glyph svg { width: 38px; height: 38px; }
.brandmark .words strong {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ink);
}
.brandmark .words span {
    font-size: 8px;
    letter-spacing: .22em;
    color: var(--orange);
    font-weight: 600;
}
.sitefoot .brandmark .words strong { color: #fff; }
.sitefoot .brandmark .words span { color: #E9BFA8; }
.sitefoot .brandmark .glyph { width: 34px; height: 34px; }
.sitefoot .brandmark .glyph svg { width: 34px; height: 34px; }

/* -------------------------------------------------------------- head tools */

.headtools .iconbtn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-sm);
    color: #3D362C;
}
.headtools .iconbtn:hover { background: var(--wash); color: var(--orange); }
.headtools .iconbtn svg { width: 19px; height: 19px; }

.headsearch {
    border-top: 1px solid var(--line);
    background: var(--card);
    padding-block: 12px;
}
.headsearch .shell { display: flex; align-items: center; gap: 10px; }
.headsearch label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-soft);
    flex: none;
}
.headsearch input {
    flex: 1;
    min-width: 0;
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font: inherit;
    font-size: 13px;
}
.headsearch input:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }

/* ------------------------------------------------------------------ rails */

.railwrap { position: relative; }

.railarrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 3;
    transition: opacity .15s ease, border-color .15s ease;
}
.railarrow svg { width: 16px; height: 16px; }
.railarrow.prev { left: -16px; }
.railarrow.next { right: -16px; }
.railarrow:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.railarrow:disabled { opacity: .3; cursor: default; }

/* The rail scrolls perfectly well on its own. The buttons are an addition, so
   they are not drawn until the script that drives them is running, and not at
   all when there is nothing to scroll to. */
html:not(.js) .railarrow,
.railwrap:not(.has-overflow) .railarrow { display: none; }

.rail-products {
    grid-auto-columns: minmax(150px, 1fr);
    gap: 14px;
    /* Room for the lift on hover, which would otherwise be clipped by the
       scroll container. */
    padding: 4px 2px 10px;
}
.rail-insta {
    grid-auto-columns: minmax(200px, 1fr);
    gap: 14px;
    padding-bottom: 8px;
}
.rail:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ------------------------------------------------------------------- tabs */

.tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.tab {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.tab:hover { border-color: var(--orange); color: var(--orange); }
.tab.is-on {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
html:not(.js) .tabs { display: none; }

/* --------------------------------------------------------------- hero arrows */

.stagearrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 3;
}
.stagearrow svg { width: 16px; height: 16px; }
.stagearrow.prev { left: 10px; }
.stagearrow.next { right: 10px; }
.stagearrow:hover { color: var(--orange); }
html:not(.js) .stagearrow { display: none; }

/* The hero's right-hand half: the picture and the four points beside it. */
.hero-right {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

/* -------------------------------------------------------- category tiles */

/*
 * The tile is title-only now that the product count has gone, as the design
 * draws it — and the photo is square rather than a 76px letterbox, which is
 * what the design's near-square crops need.
 *
 * The badge was absolutely positioned at a fixed `top`, which only lined up
 * while the thumbnail was a fixed height. It is in normal flow now and pulled
 * up over the photo's bottom edge, so it stays put whatever the tile's width.
 */
.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 14px;
}
.cat-card .thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
}
.cat-card .badge {
    position: static;
    transform: none;
    margin: -15px 0 9px;
}
.cat-card strong { text-align: center; }

/* ------------------------------------------------------------- instagram */

.linkmore.insta { color: var(--orange); }
.linkmore.insta svg { width: 16px; height: 16px; }

.ig-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--wash);
}
.ig-tile img { width: 100%; height: 100%; object-fit: cover; }
.ig-tile .reel,
.ig-tile .play {
    position: absolute;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(20, 17, 16, .45);
    backdrop-filter: blur(2px);
}
.ig-tile .reel {
    top: 9px; right: 9px;
    width: 26px; height: 26px;
    border-radius: 7px;
}
.ig-tile .reel svg { width: 14px; height: 14px; }
.ig-tile .play {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
}
.ig-tile .play svg { width: 17px; height: 17px; }
.ig-tile:hover .play,
.ig-tile:focus-visible .play { opacity: 1; }

/* --------------------------------------------------------------- purpose */

.purpose h2 .accent { color: var(--green); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .hero-right { grid-template-columns: minmax(0, 1fr); }
    .railarrow { display: none; }
}

@media (max-width: 620px) {
    .headsearch label { display: none; }
    .brandmark .words strong { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ig-tile .play { transition: none; }
}

/* ------------------------------------------------------- hero, uncropped */

/*
 * The hero picture shows in full.
 *
 * Two things were cutting it. The stage carried a `min-height` and a gradient
 * fill, so an image shorter than 300px sat on a coloured card; and the
 * fallback rule set `object-fit: cover`, which crops whatever does not fit the
 * box. In the design the hero is one complete scene — bowl, pack, board,
 * chillies — and none of it is trimmed, so neither is this.
 */
.hero-stage {
    background: none;
    min-height: 0;
    overflow: visible;
}
.hero-stage img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
}
.hero-slide img { border-radius: var(--radius-lg); }

/* The dots sit over the picture in the design. With one slide there are none;
   this only matters once a second hero image is uploaded. */
.hero-dots { left: 50%; transform: translateX(-50%); bottom: 12px; }

/* The hero's three columns, in the design's proportions: the picture is the
   largest thing in the band, not a thumbnail beside the text. Measured off the
   export — text ~30% of the content width, picture ~47%, feature points ~19%. */
.hero .shell { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.95fr); gap: 32px; }
.hero-right { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 24px; }

@media (max-width: 1040px) {
    .hero .shell { grid-template-columns: minmax(0, 1fr); }
}

/* The two soft glows behind the hero were reading as pale rectangles with a
   visible edge: the gradient was offset inside its own box, so it ran out of
   circle before it ran out of box. Centred, with the fade finishing inside the
   box, they are what they were meant to be — a suggestion of light, not a
   shape. The design has no block there at all. */
.hero::before,
.hero::after {
    background: radial-gradient(circle at 50% 50%, rgba(30, 91, 51, .09), transparent 68%);
}

/* A rail with one item in it must not draw that item a metre wide.
   `grid-auto-columns: minmax(124px, 1fr)` gives a single card the whole track,
   and with a square thumbnail that turned one category tile into a full-width
   block taller than the hero. The cap is what the design draws a tile at; with
   a full row of them the 1fr is smaller than the cap and nothing changes. */
.cat-card { max-width: 200px; }
.rail-products .p-card { max-width: 220px; }
.rail-insta .ig-tile { max-width: 260px; }

/* Two tiles in a rail sat at opposite ends of the row: `1fr` tracks divide the
   whole width between however many items there are, so the cap on the card
   only stopped the card growing — it did not stop the empty track around it.
   Capping the track instead, and packing the tracks to the start, makes a short
   rail read as a short row. A full row still fills the width and still
   scrolls, which is what the arrows are for. */
.rail {
    grid-auto-columns: minmax(140px, 190px);
    justify-content: start;
}
.rail-products { grid-auto-columns: minmax(150px, 215px); }
.rail-insta { grid-auto-columns: minmax(180px, 250px); }

/* The Instagram tiles in the export are landscape, not the portrait crop the
   first pass assumed. Matching the design means 3:2. The Reels badge is drawn
   here in CSS rather than living inside the picture, so a real photograph
   dropped into the slot later gets one too. */
.ig-tile { aspect-ratio: 3 / 2; }

/* ------------------------------------------------- categories as rows (0013) */

/* A placeholder tile: a category the portal shows on the home page before it
   has any products. Drawn exactly like the others so the row reads as one
   object, with one quiet difference the owner can see and a visitor barely
   notices — the label is muted, and the link goes to the whole range. */
.cat-card.is-empty strong { color: var(--muted); }
.cat-card.is-empty .badge { background: var(--line-strong); }

/* The "More ▾" tab and its menu. */
.tabmore { position: relative; }
.tabmore .tab svg { width: 10px; height: 10px; margin-left: 2px; opacity: .7; }
.tabmenu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
}
.tabmenu .tab { border-radius: var(--radius-sm); text-align: left; white-space: normal; }

/* The words shown when a tab filters the rail to nothing. */
.rail-empty {
    padding: 22px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}