/* =====================================================================
   Chennai Bioflora — storefront
   Palette and type taken from the Figma hero: green primary, amber
   accent, Poppins throughout.
   ===================================================================== */

:root {
    --green:      #027102;
    --green-dark: #015701;
    --green-tint: #eaf5ed;
    --amber:      #FFC901;
    --amber-dark: #e3b301;
    --ink:        #1a1a1a;
    --ink-mid:    #4a4a4a;
    --ink-soft:   #767676;
    /* Placeholder hints only — half the grey of the text the field will hold,
       so a hint reads as a faint example rather than a value. Body text never
       uses it: at this weight it is meant to be skimmed past, not read. */
    --ink-hint:   #cacaca;
    --line:       #e6e6e6;
    --bg:         #ffffff;
    --bg-soft:    #faf8f5;
    --radius:     14px;
    --radius-sm:  8px;
    --shadow:     0 2px 14px rgba(0,0,0,.07);
    --wrap:       1180px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .7rem 1.35rem; border-radius: 999px;
    font-size: .86rem; font-weight: 600; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-dark { background: rgba(20,20,20,.72); color: #fff; backdrop-filter: blur(3px); }
.btn-dark:hover { background: rgba(20,20,20,.88); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber:hover { background: var(--amber-dark); }
.btn-block { width: 100%; justify-content: center; }
.btn .chev { width: 15px; height: 15px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* --- Top bar --------------------------------------------------------- */
.topbar { background: var(--green); color: #fff; font-size: .74rem; }
.topbar-in { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; flex-wrap: wrap; }
.tb-item { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; opacity: .95; }
.tb-item:hover { opacity: 1; }
.tb-item svg { width: 14px; height: 14px; }

/* --- Header ---------------------------------------------------------- */
.hdr { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.hdr-in {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 1rem; padding-block: .7rem;
}
.nav-l { display: flex; gap: 1.5rem; font-size: .86rem; font-weight: 500; }
.nav-l a { text-decoration: none; color: var(--ink-mid); }
.nav-l a:hover, .nav-l a.on { color: var(--green); font-weight: 600; }

.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; justify-self: center; }
.brand .mark svg { width: 40px; height: 40px; stroke: none; }
/* Uploaded logos vary in size — pin the height so the header row keeps its
   rhythm whatever gets uploaded, and let the width follow the aspect ratio. */
.brand img { height: 44px; width: auto; }
.wordmark { font-size: .95rem; font-weight: 800; line-height: 1.05; letter-spacing: .02em; color: var(--ink); }
.wordmark.dark { color: #fff; font-size: 1.15rem; }

.nav-r { display: flex; align-items: center; gap: .5rem; justify-self: end; }
.icon-btn {
    display: grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; color: var(--ink-mid); text-decoration: none; position: relative;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--green); }
.cart-n {
    position: absolute; top: 0; right: 0; min-width: 17px; height: 17px;
    border-radius: 9px; background: var(--green); color: #fff;
    font-size: .6rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}

/* --- Hero ------------------------------------------------------------ */
/* The height lives on the section rather than the slide: every slide is
   absolutely positioned so they can stack and cross-fade, which leaves nothing
   in flow to give the carousel its height. */
.hero { position: relative; background: #111; overflow: hidden; height: min(78vh, 620px); }

/* Cross-fade without the mid-transition dip.
   The incoming slide sits on top and fades 0 -> 1. The outgoing one does NOT
   fade out — its opacity is switched off instantly but delayed by the length
   of the fade, so it stays fully opaque underneath the whole time. Fading both
   at once would let the #111 backdrop show through the middle of every
   transition and read as a flicker. */
.hero-slide {
    position: absolute; inset: 0; z-index: 1;
    opacity: 0; visibility: hidden;
    transition: opacity 0s linear .8s, visibility 0s linear .8s;
}
.hero-slide.on {
    z-index: 2;
    opacity: 1; visibility: visible;
    transition: opacity .8s ease, visibility 0s;
}
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.08) 100%);
}
.hero-copy {
    position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto;
    padding: 0 1.25rem; height: 100%; display: flex; flex-direction: column; justify-content: center;
    color: #fff; max-width: min(var(--wrap), 100%);
}
.hero-copy .inner { max-width: 480px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber); margin-bottom: .9rem;
}
.eyebrow svg { width: 14px; height: 14px; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); font-weight: 800; line-height: 1.02; margin: 0 0 1rem; }
.hero p { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.9); margin: 0 0 1.7rem; }
.hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; }

.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.16); border: 0; color: #fff;
    display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px);
}
.hero-nav:hover { background: rgba(255,255,255,.3); }
.hero-nav.prev { left: 1.6rem; }
.hero-nav.next { right: 1.6rem; }

.hero-dots { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .4rem; }
.hero-dots button {
    width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0;
    background: rgba(255,255,255,.55); cursor: pointer; transition: width .2s, background .2s;
}
.hero-dots button.on { width: 26px; background: var(--green); }
.hero-count { position: absolute; right: 1.6rem; bottom: 1.1rem; z-index: 3; font-size: .74rem; color: rgba(255,255,255,.75); }
.hero-count b { color: var(--green); font-weight: 700; }

/* Honour a system-level request for less motion: swap the slide instantly
   rather than animating it. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide.on { transition: none; }
}

@media (max-width: 720px) {
    .hero-nav { display: none; }
    .nav-l { display: none; }
    .hdr-in { grid-template-columns: auto 1fr; }
    .brand { justify-self: start; }
}

/* --- Promo strip ----------------------------------------------------- */
/* Text here sits on saturated amber, where the muted greys used elsewhere on
   white lose their legibility. The design runs every line at full black and
   leans on size and weight alone for hierarchy. */
.promo { background: var(--amber); color: #000; }
.promo-in { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: 1.35rem; flex-wrap: wrap; }
.promo .l { display: flex; align-items: center; gap: 1.4rem; }
/* Was an emoji, which rendered as whatever party popper the visitor's OS
   happened to ship. Now a fixed asset, sized to the height the design gives it
   with the width left to follow the artwork's own ratio. */
.promo .emo { height: 28px; width: auto; flex: none; }
.promo .h { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.promo .s { font-size: .74rem; margin-top: .1rem; }
.promo .s strong { font-weight: 700; }
.promo .r { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.promo .chip { display: inline-flex; align-items: center; gap: .55rem; font-size: .76rem; }
.promo .chip svg { width: 16px; height: 16px; }
/* A translucent white rather than a solid one: the pill reads as a lighter
   patch of the same bar instead of a card dropped on top of it. */
.promo .tel {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.2); padding: .55rem 1rem; border-radius: 10px;
    font-size: .82rem; font-weight: 700; text-decoration: none; color: #000;
    transition: background .14s;
}
.promo .tel:hover { background: rgba(255,255,255,.34); }

/* --- Sections -------------------------------------------------------- */
.section { padding-block: 3.5rem; }
.section.soft { background: var(--bg-soft); }
.sec-head { text-align: center; margin-bottom: 2.2rem; }
.sec-head .eyebrow { color: var(--green); justify-content: center; }
.sec-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; margin: 0 0 .5rem; }
.sec-head p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* --- Brand statement ------------------------------------------------- */
/* Set narrower than the page gutter allows: these are the only long-form
   paragraphs on the home page, and a 1180px measure would run them well past
   the ~75 characters a line can be read comfortably. */
/* --- Intro film ------------------------------------------------------ */

.intro-film { background: #fff; padding-block: 3.4rem 0; }
.film-frame {
    max-width: 900px; margin: 0 auto;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); background: #000;
    /* Reserves the 16:9 box before the metadata lands, so the copy below
       does not jump down once the browser knows the video's size. */
    aspect-ratio: 16 / 9;
}
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The film already carries the white band above the copy, so the intro drops
   its own top padding when the two sit together. */
.intro-film + .intro { padding-top: 2.2rem; }

.intro { background: #fff; padding-block: 3.4rem 3rem; }
.intro-in { max-width: 760px; text-align: center; }
.intro-in p { color: var(--ink-mid); font-size: 1rem; line-height: 1.85; margin: 0 0 1.15rem; }
.intro-in .intro-sig {
    margin: 1.9rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--green); font-weight: 700;
    font-size: .96rem; letter-spacing: .02em;
}
.intro-sig span { display: inline-block; margin-top: .3rem; color: var(--ink-soft); font-weight: 500; }
.intro-cta { margin-top: 1.7rem; }

@media (max-width: 560px) {
    .intro-film { padding-block: 2.4rem 0; }
    .film-frame { border-radius: var(--radius-sm); }
    .intro-film + .intro { padding-top: 1.6rem; }
    .intro { padding-block: 2.4rem 2.2rem; }
    .intro-in p { font-size: .94rem; line-height: 1.8; }
}

/* --- Process steps --------------------------------------------------- */
.pr-head { max-width: 720px; margin-bottom: 2rem; }
.pr-head h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.12; }
.pr-head p { font-size: 1rem; color: var(--ink-mid); }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
/* The rail is drawn behind the numerals rather than between the cards: it has
   to pass through the badges, and a border on the list would stop at each gap. */
.steps::before {
    content: ''; position: absolute; top: 1.4rem; bottom: 1.4rem; left: 27px;
    width: 2px; background: var(--line);
}
.step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; }
.step + .step { margin-top: 1.1rem; }
.step-n {
    position: relative; z-index: 1;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--green); color: #fff;
    font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 0 0 5px #f8f6f0;
}
.step-card { margin-bottom: 0; padding: 1.3rem 1.5rem; }
/* Doubled up on .op-card for the same reason .page-body is: that class sets a
   small uppercase caption for its own panels, and these are step titles. */
.op-card.step-card h2 {
    margin: 0 0 .7rem; font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0; text-transform: none; color: var(--ink);
}
.step-card .step-n-sm { display: none; }
.step-card p { margin: 0 0 .7rem; font-size: .94rem; line-height: 1.8; color: var(--ink-mid); }
.step-card > :last-child { margin-bottom: 0; }

/* The copy sets these on their own lines. Kept as separate rows with a rule
   between, so the pacing survives instead of collapsing into a sentence. */
.step-beats { list-style: none; margin: 0 0 .9rem; padding: 0; }
.step-beats li {
    padding: .5rem 0; font-size: .96rem; font-weight: 600; color: var(--ink);
    border-bottom: 1px dashed var(--line);
}
.step-beats li:last-child { border-bottom: 0; }

.pr-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }

/* --- Botanical library ----------------------------------------------- */
.bot-lede {
    max-width: 720px; margin: 0 0 2.4rem;
    font-size: 1.02rem; line-height: 1.8; color: var(--ink-mid);
}
.bot-group + .bot-group { margin-top: 2.8rem; }
.bot-group .row-head { align-items: flex-end; margin-bottom: 1.2rem; }
.bot-count { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }

.bot-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: .9rem;
}
.bot-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.1rem 1.15rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bot-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.bot-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--green-tint); color: var(--green); margin-bottom: .7rem;
}
.bot-mark svg { width: 17px; height: 17px; }
.bot-card h3 { margin: 0; font-size: .98rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.bot-latin { margin: .25rem 0 0; font-size: .82rem; color: var(--ink-soft); }

/* Poster cards. Only some of the library has a sheet, so the two kinds share a
   row: start-aligned, or a plain card would stretch to a poster's height and
   sit in a pool of empty white. The sheet runs edge to edge — it carries its
   own printed border, and card padding around that reads as a double frame. */
.bot-grid { align-items: start; }
.bot-card.has-poster { padding: 0 0 1.05rem; overflow: hidden; }
.bot-card.has-poster h3 { padding: .95rem 1.05rem 0; }
.bot-card.has-poster .bot-latin { padding: 0 1.05rem; }

.bot-shot {
    display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: var(--bg-soft); position: relative;
    border-bottom: 1px solid var(--line);
}
.bot-shot img { width: 100%; height: auto; display: block; }
/* The sheet is dense with type and unreadable at grid size, so the card has to
   say the picture opens — same affordance as a certificate scan. */
.bot-zoom {
    position: absolute; inset: auto 0 0 0;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem; font-size: .78rem; font-weight: 600; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.62));
    opacity: 0; transition: opacity .18s;
}
.bot-shot:hover .bot-zoom,
.bot-shot:focus-visible .bot-zoom { opacity: 1; }
.bot-zoom svg { width: 15px; height: 15px; }

/* --- Shop natural absolutes ------------------------------------------ */
/* The retail collection. Wider cards than .bot-card: these carry selling
   copy, a size line and an action, where a botanical card carries a name. */
.abs-beats { max-width: 720px; margin-bottom: 2.6rem; }

.abs-intro { max-width: 720px; }

/* The copy sets these on their own lines, so they are kept that way rather
   than run into a sentence. Weighted like a statement, not body text. */
.abs-refrain {
    margin: 1.3rem 0 0; font-size: 1.05rem; font-weight: 700;
    line-height: 1.65; color: var(--ink);
}

.abs-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem;
}
/* Column, so the size line and the action can be pinned to the bottom with
   margin-top:auto — the cards sit on a shared baseline however much copy
   each one carries. */
.abs-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.3rem 1.35rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.abs-card:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-2px); }
.abs-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.abs-card .bot-latin { margin: .3rem 0 0; }
.abs-lead {
    margin: .7rem 0 0; font-size: .92rem; font-weight: 600;
    line-height: 1.55; color: var(--ink);
}
.abs-body { margin: .5rem 0 0; font-size: .88rem; line-height: 1.7; color: var(--ink-mid); }

.abs-sizes {
    margin-top: auto; padding-top: 1rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.abs-sizes-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-soft);
}
.abs-sizes-list { font-size: .9rem; font-weight: 600; color: var(--ink); }

.abs-cta {
    margin-top: .95rem; padding-top: .9rem; border-top: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 700; color: var(--green); text-decoration: none;
}
.abs-cta .chev { width: 14px; height: 14px; transition: transform .15s; }
.abs-cta:hover .chev { transform: translateX(3px); }

.abs-why {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1rem;
}
.abs-why li {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.2rem 1.25rem; border-top: 3px solid var(--green);
}
.abs-why h3 {
    margin: 0 0 .45rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--green);
}
.abs-why p { margin: 0; font-size: .89rem; line-height: 1.7; color: var(--ink-mid); }

.abs-close { max-width: 720px; margin-top: 3rem; }
.abs-close h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; margin: 0 0 .8rem; }
.abs-close > p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--ink-mid); }
.abs-bulk { margin: 1.6rem 0 0; font-size: .89rem; color: var(--ink-soft); }
.abs-bulk a { color: var(--green); }

/* --- For perfumers & brands ------------------------------------------ */
/* Reuses .abs-why for the portfolio and audience grids — same shape of
   content, so the same card rather than a second one that looks nearly
   like it. */
.tr-sub {
    margin: 2rem 0 1rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.tr-portfolio { margin-bottom: 0; }

.tr-help {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem;
}
.tr-help > li {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 1.3rem 1.35rem;
}
.tr-help > li > h3 { margin: 0 0 .55rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
/* The question the customer arrives with, set ahead of the answer. */
.tr-ask { margin: 0 0 .5rem; font-size: .92rem; font-weight: 600; color: var(--green); line-height: 1.55; }
.tr-help p { margin: 0; font-size: .89rem; line-height: 1.7; color: var(--ink-mid); }

/* The documentation card spans the row: it carries a list, so it would
   otherwise be twice the height of its neighbours. */
.tr-docs { grid-column: 1 / -1; }
.tr-docs ul {
    list-style: none; margin: .9rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .45rem;
}
.tr-docs ul li {
    padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--green-tint); font-size: .82rem; color: var(--ink-mid);
}

.tr-form { max-width: 720px; margin-top: .4rem; }
.tr-form .q-cta { width: auto; margin-top: .6rem; }

/* The three named routes into a conversation. Bordered rather than carded:
   they are signposts between two sections, not content in their own right. */
.tr-routes {
    list-style: none; margin: 2.6rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1rem;
}
.tr-routes li {
    padding: 1.1rem 0 0; border-top: 2px solid var(--line);
}
.tr-routes h3 { margin: 0 0 .5rem; font-size: .95rem; font-weight: 700; color: var(--ink); }
.tr-routes a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .86rem; font-weight: 700; color: var(--green); text-decoration: none;
}
.tr-routes a .chev { width: 14px; height: 14px; transition: transform .15s; }
.tr-routes a:hover .chev { transform: translateX(3px); }

@media (max-width: 460px) {
    .bot-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .bot-card { padding: .9rem; }
}

@media (max-width: 640px) {
    /* No room for a rail and a 56px badge beside the card, so the number moves
       into the heading and the card takes the full width. */
    .steps::before { display: none; }
    .step { grid-template-columns: 1fr; gap: 0; }
    .step-n { display: none; }
    .step-card .step-n-sm { display: inline; color: var(--green); font-weight: 800; margin-right: .45rem; }
}

/* --- Certificates ---------------------------------------------------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.cert {
    margin: 0; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.cert-shot {
    display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: var(--bg-soft); position: relative;
    border-bottom: 1px solid var(--line);
}
.cert-shot img { width: 100%; height: auto; display: block; }
/* The affordance sits over the scan rather than beside it: the certificate is
   unreadable at grid size, so the page has to say the picture opens. */
.cert-zoom {
    position: absolute; inset: auto 0 0 0;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem; font-size: .78rem; font-weight: 600; color: #fff;
    background: linear-gradient(transparent, rgba(0,0,0,.62));
    opacity: 0; transition: opacity .18s;
}
.cert-shot:hover .cert-zoom,
.cert-shot:focus-visible .cert-zoom { opacity: 1; }
.cert-zoom svg { width: 15px; height: 15px; }

.cert figcaption { padding: 1.15rem 1.25rem 1.3rem; }
.cert figcaption h2 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.cert-issuer { margin: .2rem 0 .9rem; font-size: .84rem; color: var(--ink-soft); }
.cert-meta {
    display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem;
    margin: 0; font-size: .82rem;
}
.cert-meta dt { color: var(--ink-soft); }
.cert-meta dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

/* --- Lightbox -------------------------------------------------------- */
.lb {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 3.2rem 1rem 1.5rem;
    background: rgba(12,12,12,.9);
}
.lb[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; min-width: 0; }
.lb-stage img {
    max-width: min(880px, 100%); max-height: calc(100vh - 8rem);
    width: auto; height: auto; object-fit: contain;
    background: #fff; border-radius: 4px;
}
.lb-stage figcaption { color: rgba(255,255,255,.85); font-size: .84rem; text-align: center; }
.lb-x, .lb-nav {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-x { position: absolute; top: 1rem; right: 1rem; }
/* One image is not a set — hide the arrows rather than have them cycle it. */
.lb.single .lb-nav { display: none; }

@media (max-width: 560px) {
    .lb { padding: 3.2rem .5rem 1rem; }
    .lb-nav { position: absolute; bottom: 1rem; }
    .lb-nav.prev { left: 25%; }
    .lb-nav.next { right: 25%; }
    .lb-stage img { max-height: calc(100vh - 11rem); }
}

/* --- Category tiles -------------------------------------------------- */
.cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; }
.cat {
    text-align: center; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.cat .circle {
    width: 128px; height: 128px; border-radius: 50%; overflow: hidden;
    background: #fce9ea; display: grid; place-items: center;
    border: 1.1px solid rgba(255, 90, 31, .15);
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
}
/* The tile carries the shadow at rest now, so hover deepens it rather than
   introducing it — otherwise the lift would be the only thing that moved. */
.cat:hover .circle { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.cat .circle img { width: 100%; height: 100%; object-fit: cover; }
.cat .nm { font-size: .88rem; font-weight: 600; }
.cat .ct { font-size: .72rem; color: var(--ink-soft); }

/* --- Product cards --------------------------------------------------- */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem; }
/* The design separates the card from the page with a soft shadow rather than a
   hairline border, so the tile edge reads as depth instead of an outline. */
.p-card {
    border-radius: var(--radius); overflow: hidden;
    background: #fff; text-decoration: none; color: inherit; display: flex; flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s;
}
.p-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.p-card .ph { aspect-ratio: 1/1; background: var(--bg-soft); position: relative; }
.p-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.p-card .ph .none { display: grid; place-items: center; height: 100%; color: var(--ink-soft); font-size: .78rem; }
.p-card .tag {
    position: absolute; top: .6rem; left: .6rem;
    background: var(--green); color: #fff; font-size: .64rem; font-weight: 700;
    padding: .2rem .5rem; border-radius: 4px; letter-spacing: .04em;
}
.p-card .tag.out { background: #b3261e; }
.p-card .body { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.p-card .nm { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.p-card .ds { font-size: .74rem; color: var(--ink-soft); line-height: 1.45; flex: 1; }
.p-card .pr { display: flex; align-items: baseline; gap: .45rem; margin-top: .35rem; }
.p-card .pr .now { font-size: 1.02rem; font-weight: 800; color: var(--green); }
.p-card .pr .was { font-size: .78rem; color: var(--ink-soft); text-decoration: line-through; }

/* --- Gallery --------------------------------------------------------- */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.g-cell {
    position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 4/3; background: var(--bg-soft);
    box-shadow: var(--shadow); border: 1px solid rgba(255, 90, 31, .15);
    transition: transform .18s, box-shadow .18s;
}
.g-cell:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.g-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.g-cell:hover img { transform: scale(1.05); }
/* Caption rides on a gradient rather than a flat bar, so it stays readable
   over a light photo without cropping the picture. */
.g-cell figcaption {
    position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .7rem;
    background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
    color: #fff; font-size: .82rem; font-weight: 600;
}

/* --- Shop layout ----------------------------------------------------- */
/* Photo banner, darkened from the left so the copy stays legible whatever
   picture the category happens to carry. The gradient is layered over the
   inline background-image the view sets. */
.shop-hero {
    position: relative; background: #1b1b1a center / cover no-repeat;
    padding-block: 2.9rem; color: #fff;
}
.shop-hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,20,19,.94) 0%, rgba(20,20,19,.82) 34%, rgba(20,20,19,.18) 100%);
}
.shop-hero .wrap { position: relative; z-index: 1; }
.shop-hero .eyebrow { color: #8fc97e; margin-bottom: .55rem; }
.shop-hero h1 { margin: 0 0 .45rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.1; }
.shop-hero p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.78); }

.crumb-bar { background: var(--amber); font-size: .8rem; }
.crumb-bar .wrap { display: flex; align-items: center; gap: .5rem; padding-block: .6rem; }
.crumb-bar a { color: #1a1a1a; text-decoration: none; }
.crumb-bar a:hover { text-decoration: underline; }
.crumb-bar span { color: rgba(0,0,0,.55); }
.crumb-bar .on { color: var(--green-dark); font-weight: 600; }

.crumbs { font-size: .76rem; color: var(--ink-soft); margin-bottom: .6rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--green); }

/* The tint sits on this wrapper, not on .shop-body — .shop-body is the 1180px
   .wrap, so colouring it directly would paint a band with white gutters
   either side instead of the full-width field the design has. */
.shop-canvas { background: #f8f6f0; }
.shop-body { display: grid; grid-template-columns: 236px 1fr; gap: 1.8rem; align-items: start; padding-block: 2.2rem 3rem; }
@media (max-width: 860px) { .shop-body { grid-template-columns: 1fr; } }

/* The filters live on one white card rather than loose in the margin. */
.side-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.25rem; }
.side-card h3 {
    font-size: .92rem; font-weight: 700; color: #1e2939;
    letter-spacing: .02em; margin: 1.6rem 0 .9rem;
}
.side-card h3:first-child { margin-top: 0; }
.side-search input {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: .6rem 1rem; font-size: .84rem;
}
.side-card ul { list-style: none; margin: 0; padding: 0; }

.cat-filter li + li { margin-top: .3rem; }
.cat-filter a {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .55rem .85rem; border-radius: 999px;
    font-size: .86rem; text-decoration: none; color: var(--ink-mid);
}
.cat-filter a:hover { background: var(--bg-soft); }
.cat-filter em {
    font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ink-soft);
    background: #f3f4f6; border-radius: 999px; min-width: 24px; padding: .15rem .45rem; text-align: center;
}
.cat-filter a.on { background: var(--green); color: #fff; font-weight: 600; }
.cat-filter a.on em { background: rgba(255,255,255,.22); color: #fff; }

.side-price { padding-top: .2rem; }
.side-price input[type=range] { width: 100%; accent-color: var(--green); }
.price-ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-soft); margin-top: .5rem; }

.rating-filter li + li { margin-top: .15rem; }
.rating-filter a {
    display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem;
    border-radius: var(--radius-sm); font-size: .8rem; color: var(--ink-mid); text-decoration: none;
}
.rating-filter a:hover { background: var(--bg-soft); }
.rating-filter a.on { background: var(--green-tint); color: var(--green-dark); font-weight: 600; }
.rating-filter .stars svg { width: 16px; height: 16px; }
.side-clear {
    display: inline-block; margin-top: 1.4rem; font-size: .8rem;
    color: var(--green); text-decoration: none; font-weight: 600;
}
.side-clear:hover { text-decoration: underline; }

.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.shop-bar .n { font-size: .84rem; color: var(--ink-soft); }
.shop-bar .n b { color: var(--ink); font-weight: 700; }
.shop-sort select { border-radius: 999px; padding: .5rem 1rem; }
/* Three across. The count is pinned rather than left to auto-fill, which sizes
   off the track the sidebar leaves and lands on its own answer.
   Selector is deliberately .p-grid.four, not .p-grid — the auto-fill rule it
   has to beat is declared later in this file. */
.shop-main .p-grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 980px) { .shop-main .p-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shop-main .p-grid.four { grid-template-columns: 1fr; } }
select, input[type=text], input[type=email], input[type=tel], input[type=number], textarea {
    font-family: inherit; font-size: .86rem; color: var(--ink);
    padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; width: 100%;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--green-tint); border-color: var(--green); }
/* A placeholder is an example, not a value. Kept lighter than the text the
   field will hold, so a hint is never mistaken for something already filled in.
   Every field carries its own visible label, so nothing is lost if it goes
   unread. opacity is reset because Firefox dims placeholders of its own accord. */
input::placeholder, textarea::placeholder { color: var(--ink-hint); opacity: 1; }

/* --- Product detail -------------------------------------------------- */
.pd-wrap { padding-block: 2.2rem 3rem; }
/* Gallery, copy, and a buy panel that stays put while the copy runs long. */
.pd { display: grid; grid-template-columns: 340px 1fr 250px; gap: 2.6rem; align-items: start; }
@media (max-width: 1080px) { .pd { grid-template-columns: 300px 1fr; } .pd-buy { grid-column: 1 / -1; } }
@media (max-width: 760px)  { .pd { grid-template-columns: 1fr; gap: 1.5rem; } }
.pd-img { border-radius: 12px; overflow: hidden; background: var(--bg-soft); aspect-ratio: 1/1; }
.pd-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-img .none { display: grid; place-items: center; height: 100%; color: var(--ink-soft); font-size: .82rem; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .55rem; }
.pd-thumbs img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px;
    border: 2px solid transparent; cursor: pointer; transition: border-color .15s;
}
.pd-thumbs img:hover { border-color: var(--line); }
.pd-thumbs img.on { border-color: var(--green); }
.pd .eyebrow { color: var(--green); margin-bottom: .5rem; }
.pd h1 { font-size: 2rem; font-weight: 800; margin: 0 0 .4rem; line-height: 1.15; }
.pd-sku { font-size: .86rem; color: var(--ink-soft); font-style: italic; margin: 0 0 .7rem; }
.pd-rating { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ink-soft); margin-bottom: .5rem; }
.pd-rating b { color: var(--ink); font-weight: 700; }
.pd .price { display: flex; align-items: baseline; gap: .6rem; margin: .8rem 0 1.1rem; }
.pd .price .now { font-size: 1.7rem; font-weight: 800; color: var(--green); }
.pd .price .was { font-size: 1rem; color: var(--ink-soft); text-decoration: line-through; }
.pd .lede { color: var(--ink-mid); font-size: .94rem; line-height: 1.7; margin: 0; }
.rich { color: var(--ink-mid); font-size: .9rem; line-height: 1.75; }
.rich h2, .rich h3 { color: var(--ink); }

/* --- Admin-managed page body ----------------------------------------- */
/* The About page's card, given the padding and measure long-form copy needs.
   Capped at 820px rather than filling the canvas: the body is whatever the
   admin typed, and a full-width line of prose is hard to track back to. */
.page-body { max-width: 820px; padding: 2rem 2.1rem; }
.page-body > :first-child { margin-top: 0; }
.page-body > :last-child { margin-bottom: 0; }
/* Doubled up on .op-card to outrank its own `h2` rule, which sets the small
   uppercase label the panels elsewhere use. These are section headings in a
   document, not panel captions. */
.op-card.page-body h2 {
    font-size: 1.18rem; font-weight: 700; margin: 1.9rem 0 .55rem;
    letter-spacing: 0; text-transform: none; color: var(--ink);
}
.op-card.page-body h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .45rem; color: var(--ink); }
.page-body p { font-size: .94rem; line-height: 1.8; margin: 0 0 1rem; }
.page-body ul, .page-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.page-body li { font-size: .94rem; line-height: 1.75; margin-bottom: .4rem; }
.page-body a { color: var(--green); }
.page-body strong { color: var(--ink); }
/* Styled off the element, not a class: HtmlSanitizer allows blockquote but
   strips every attribute, so nothing the editor saves can carry one. */
.page-body blockquote {
    margin: 1.6rem 0; padding: .2rem 0 .2rem 1.3rem;
    border-left: 3px solid var(--green);
    font-size: 1.14rem; font-weight: 700; line-height: 1.5; color: var(--ink);
}

@media (max-width: 560px) {
    .page-body { padding: 1.3rem; }
}

/* --- Product detail: buy panel --------------------------------------- */
.pd-buy { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.pd-buy h3 {
    margin: 0 0 .8rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #1e2939;
}
.size-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: 1.1rem; }
/* The radio itself is hidden but still focusable, so the chip keeps keyboard
   support and the browser's own required-field handling. */
.size-chips .chip { position: relative; display: block; cursor: pointer; }
.size-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.size-chips span {
    display: block; text-align: center; padding: .6rem .4rem;
    border: 1px solid var(--line); border-radius: 8px;
    font-size: .88rem; font-weight: 600; color: var(--ink-mid); transition: all .14s;
}
.size-chips input:hover + span { border-color: var(--green); }
.size-chips input:focus-visible + span { outline: 2px solid var(--green-tint); outline-offset: 2px; }
.size-chips input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.size-chips .chip.sold span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.size-chips .chip.sold input { cursor: not-allowed; }

.size-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 1.1rem; }
.size-table th {
    background: var(--bg-soft); font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
    padding: .55rem .7rem; text-align: left;
}
.size-table th:last-child, .size-table td:last-child { text-align: right; }
.size-table td { padding: .5rem .7rem; font-size: .84rem; border-top: 1px solid var(--line); }
.size-table tr.on td { background: var(--green-tint); color: var(--green-dark); font-weight: 700; }

.pd-qty { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.pd-qty label { font-size: .74rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
/* Roomier than a cart line: this one is a primary control sitting directly
   above Add to Cart, rather than a nudge beside an already-decided figure. */
.pd-qty .stepper { height: 40px; }
.pd-qty .qty-step { width: 36px; height: 38px; }
.pd-qty .stepper input { width: 46px; height: 38px; font-size: .95rem; }
.pd-cta { border-radius: 10px; padding-block: .85rem; }
.pd-cta svg { width: 16px; height: 16px; }
.pd-quote { display: block; margin-top: .9rem; font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.pd-quote:hover { color: var(--green); }

/* --- Product detail: tabs -------------------------------------------- */
.pd-tabs { margin-top: 2.6rem; }
.pd-tabs .tab-bar { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
/* `.tab` is also the home page's pill filter, which sets a background, a
   999px radius and white text on .on. Every one of those has to be undone
   here or the selected tab renders as a green pill with green text in it. */
.pd-tabs .tab {
    background: none; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; cursor: pointer;
    padding: .7rem 1rem; font-family: inherit; font-size: .88rem; font-weight: 600;
    color: var(--ink-soft); margin-bottom: -1px;
}
.pd-tabs .tab:hover { background: none; color: var(--ink); }
.pd-tabs .tab.on { background: none; color: var(--green); border-bottom-color: var(--green); }
.pd-tabs .tab-panel { display: none; padding: 1.5rem 0 0; }
.pd-tabs .tab-panel.on { display: block; }
.spec-table { width: 100%; border-collapse: collapse; max-width: 560px; }
.spec-table th, .spec-table td { text-align: left; padding: .6rem .8rem; font-size: .86rem; border-bottom: 1px solid var(--line); }
.spec-table th { width: 40%; color: var(--ink-soft); font-weight: 600; }

.pd-related { margin-top: 3rem; }
.pd-related .p-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 980px) { .pd-related .p-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pd-related .p-grid.four { grid-template-columns: 1fr; } }
.field-row { display: flex; gap: .7rem; align-items: flex-end; margin: 1.2rem 0; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .74rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.stock-ok { color: var(--green); font-size: .8rem; font-weight: 600; }
.stock-no { color: #b3261e; font-size: .8rem; font-weight: 600; }

/* --- Cart / checkout ------------------------------------------------- */
.cart-wrap { padding-block: 2.2rem 3rem; }
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }

.cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.cart-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1e2939; }
.cart-back { font-size: .9rem; font-weight: 700; color: var(--green); text-decoration: none; }
.cart-back:hover { text-decoration: underline; }

.cart-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
/* One shared column template for the header and every line, so the labels sit
   over the values they name rather than near them. */
.c-head, .c-line {
    display: grid; grid-template-columns: 1fr 130px 130px 130px 44px;
    gap: 1rem; align-items: center;
}
.c-head {
    background: #f8f6f0; padding: .95rem 1.4rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft);
}
.c-head span:nth-child(2), .c-head span:nth-child(3), .c-head span:nth-child(4) { text-align: center; }
.c-line { padding: 1.25rem 1.4rem; border-top: 1px solid #f1f1ee; }
.c-prod { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.c-line img, .c-line .none {
    width: 64px; height: 64px; flex: none; object-fit: cover;
    border-radius: 10px; background: var(--bg-soft);
}
.c-line .nm { font-weight: 700; font-size: .92rem; text-decoration: none; color: #1e2939; }
.c-line .nm:hover { color: var(--green); }
.c-line .va { font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }
.c-price { text-align: center; font-size: .92rem; color: var(--ink); }
.c-qty { display: flex; justify-content: center; }
.c-total { text-align: center; font-size: .95rem; font-weight: 700; color: var(--green); }

.stepper { display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
/* Named qty-step, not step: .step is the numbered row on the Our Process page,
   and that rule's grid columns were landing the glyph in a 56px cell inside a
   30px button. place-items centres the sign whatever the surrounding CSS does. */
.stepper .qty-step {
    display: grid; place-items: center;
    width: 30px; height: 34px; padding: 0;
    border: 0; background: #fff; cursor: pointer;
    font-size: 1rem; line-height: 1; color: var(--ink-mid); font-family: inherit;
}
.stepper .qty-step:hover { background: var(--bg-soft); color: var(--green); }
.stepper input {
    width: 38px; height: 34px; border: 0; border-radius: 0; text-align: center;
    font-size: .88rem; font-weight: 600; padding: 0;
    -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--green-tint); }

.c-rm {
    background: none; border: 0; cursor: pointer; color: #c8c8c4;
    font-size: 1.35rem; line-height: 1; padding: .2rem .35rem; border-radius: 6px;
}
.c-rm:hover { color: #b3261e; background: #fdf1f0; }
.c-foot-actions { padding: 0 1.4rem 1.2rem; }
.c-foot {
    display: flex; justify-content: flex-end; gap: 2.2rem;
    padding: 1.1rem 1.4rem; border-top: 1px solid #f1f1ee;
    background: #fafaf8; font-size: .86rem; color: var(--ink-mid);
}
.c-foot b { color: var(--ink); font-weight: 700; margin-left: .4rem; }
.c-foot .grand { color: var(--green); }

.summary { border-radius: var(--radius); padding: 1.5rem; background: #fff; box-shadow: var(--shadow); }
.summary h3 { margin: 0 0 1.1rem; font-size: 1.15rem; font-weight: 800; color: #1e2939; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.summary .row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-mid); padding: .42rem 0; }
.summary .row .pill {
    font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .06em;
    background: var(--green-tint); color: var(--green-dark);
    padding: .16rem .45rem; border-radius: 999px; margin-left: .35rem;
}
.summary .row.total {
    font-size: 1.35rem; font-weight: 800; color: #1e2939;
    border-top: 1px solid var(--line); margin-top: .8rem; padding-top: 1rem;
}
.summary .row.total span:last-child { color: var(--green); }
.summary .free { color: var(--green); font-weight: 700; }
.summary .ship-note { font-size: .76rem; color: var(--ink-soft); margin: .5rem 0 0; }
.sum-cta { margin-top: 1.2rem; border-radius: 10px; padding-block: .95rem; font-size: .95rem; }

.pay-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: 1.2rem; }
.pay-tiles span {
    background: #f8f9fb; border: 1px solid #eef0f3; border-radius: 8px;
    padding: .55rem .3rem; text-align: center;
    font-size: .68rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em;
}
.sum-trust { list-style: none; margin: 1.3rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .9rem; }
.sum-trust li { display: flex; gap: .7rem; align-items: flex-start; }
.sum-trust svg { width: 17px; height: 17px; flex: none; color: var(--green); margin-top: .12rem; }
.sum-trust strong { display: block; font-size: .82rem; color: var(--ink); }
.sum-trust span { font-size: .74rem; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 620px) {
    .c-head { display: none; }
    .c-line { grid-template-columns: 1fr auto; row-gap: .8rem; }
    .c-prod { grid-column: 1 / -1; }
    .c-price, .c-total { text-align: left; }
}

.co-wrap { padding-block: 2rem 3rem; }
.co-title { margin: 0 0 1.4rem; font-size: 1.6rem; font-weight: 700; color: #1e2939; }
.co-grid { display: grid; grid-template-columns: 1fr 350px; gap: 1.6rem; align-items: start; }
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } }
.form-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; margin-bottom: 1.3rem; }
.form-card h3 {
    display: flex; align-items: center; gap: .65rem;
    margin: 0 0 1.3rem; font-size: 1.1rem; font-weight: 800; color: #1e2939;
}
/* Pale disc behind each section icon, as the design has it. */
.form-card h3 .ico {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    background: var(--green-tint); color: var(--green);
    display: grid; place-items: center;
}
.form-card h3 .ico svg { width: 16px; height: 16px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.f-field { margin-bottom: 1.1rem; }
.f-field label {
    display: block; font-size: .72rem; font-weight: 700; margin-bottom: .4rem;
    letter-spacing: .06em; text-transform: uppercase; color: #1e2939;
}
.f-field .req { color: #ef4444; }
.f-field input, .f-field textarea, .f-field select {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: .7rem .85rem; font-size: .88rem;
}
.pay-opt {
    display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem; cursor: pointer;
    transition: border-color .14s, background .14s;
}
.pay-opt:hover { border-color: var(--green); }
.pay-opt.on { border-color: var(--green); background: var(--green-tint); }
.pay-opt input { margin: .15rem 0 0; accent-color: var(--green); }
.pay-opt strong { display: block; font-size: .9rem; }
.pay-opt .sub { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }
.pay-note { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.co-cta { border-radius: 10px; padding-block: .95rem; font-size: .95rem; }

/* --- Checkout: order summary ----------------------------------------- */
.co-sum h3 { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.edit-cart { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--green); text-decoration: none; }
.edit-cart:hover { text-decoration: underline; }
.edit-cart svg { width: 14px; height: 14px; }
.co-items { list-style: none; margin: 0 0 1.1rem; padding: 0 0 1.1rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .9rem; }
.co-items li { display: flex; align-items: center; gap: .8rem; }
/* The quantity rides on the corner of the thumbnail rather than taking a
   column of its own, so long product names keep the width. */
.co-items .thumb { position: relative; flex: none; }
.co-items .thumb img, .co-items .thumb .none {
    width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--bg-soft); display: block;
}
.co-items .thumb em {
    position: absolute; top: -6px; right: -6px; font-style: normal;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--green); color: #fff; font-size: .68rem; font-weight: 700;
    display: grid; place-items: center;
}
.co-items .meta { flex: 1; min-width: 0; }
.co-items .meta strong { display: block; font-size: .86rem; font-weight: 700; color: #1e2939; }
.co-items .meta span { display: block; font-size: .76rem; color: var(--ink-soft); }
.co-items .amt { font-size: .88rem; font-weight: 700; white-space: nowrap; }
.co-secure {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: 1.1rem 0 0; font-size: .76rem; color: var(--green); font-weight: 600;
}
.co-secure svg { width: 14px; height: 14px; }
.co-note { font-size: .72rem; color: var(--ink-soft); text-align: center; margin: .5rem 0 0; }

/* --- Confirmation ---------------------------------------------------- */
.conf { text-align: center; padding-block: 3.5rem; }
.conf .tick {
    width: 66px; height: 66px; border-radius: 50%; background: var(--green-tint);
    display: grid; place-items: center; margin: 0 auto 1.2rem; color: var(--green);
}
.conf .tick svg { width: 32px; height: 32px; stroke-width: 2.4; }
.conf h1 { font-size: 1.7rem; margin: 0 0 .5rem; }
.conf .num { font-weight: 800; color: var(--green); font-size: 1.1rem; }

/* --- Order placed ----------------------------------------------------- */
.op-wrap { padding-block: 2rem 3rem; }
.op-hero { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.4rem 1.5rem; text-align: center; margin-bottom: 1.4rem; }
.op-hero .tick {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 1.1rem;
    border: 2px solid var(--green); color: var(--green); display: grid; place-items: center;
}
.op-hero .tick svg { width: 28px; height: 28px; stroke-width: 2.6; }
.op-hero h1 { margin: 0 0 .5rem; font-size: 1.6rem; font-weight: 800; color: #1e2939; }
.op-hero p { margin: 0 auto; max-width: 520px; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.op-id {
    display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem;
    background: var(--green-tint); border-radius: 999px; padding: .45rem .5rem .45rem 1rem;
}
.op-id .lbl { font-size: .74rem; color: var(--green-dark); }
.op-id b { font-size: .92rem; font-weight: 800; color: var(--green-dark); letter-spacing: .02em; }
.op-id .copy {
    border: 0; cursor: pointer; background: var(--green); color: #fff;
    border-radius: 999px; padding: .3rem .7rem; font-size: .72rem; font-weight: 700; font-family: inherit;
}
.op-id .copy:hover { background: var(--green-dark); }
.op-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.3rem; }
.op-meta span { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft); }
.op-meta svg { width: 15px; height: 15px; }

.op-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .op-grid { grid-template-columns: 1fr; } }
.op-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; margin-bottom: 1.4rem; }
.op-card h2 {
    margin: 0 0 1.2rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.op-plain { margin: 0; font-size: .88rem; color: var(--ink-mid); }

/* Vertical rail: the connector is drawn on the item, not between them, so a
   stage can be removed without leaving a dangling line. */
.track { list-style: none; margin: 0; padding: 0; }
.track li { position: relative; display: flex; gap: .9rem; padding-bottom: 1.5rem; }
.track li:last-child { padding-bottom: 0; }
.track li::before {
    content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line);
}
.track li:last-child::before { display: none; }
.track li.done::before { background: var(--green); }
.track .dot {
    width: 28px; height: 28px; flex: none; border-radius: 50%; z-index: 1;
    background: #fff; border: 2px solid var(--line); color: transparent;
    display: grid; place-items: center;
}
.track .dot svg { width: 14px; height: 14px; stroke-width: 3; }
.track li.done .dot, .track li.now .dot { background: var(--green); border-color: var(--green); color: #fff; }
.track strong { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); }
.track li:not(.done):not(.now) strong { color: var(--ink-soft); font-weight: 600; }
.track strong em {
    font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: var(--green-tint); color: var(--green-dark); padding: .12rem .45rem; border-radius: 999px;
}
.track span { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }

.op-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.op-items li { display: flex; align-items: center; gap: .9rem; }
.op-items img, .op-items .none { width: 54px; height: 54px; flex: none; object-fit: cover; border-radius: 8px; background: var(--bg-soft); }
.op-items .meta { flex: 1; min-width: 0; }
.op-items .meta strong { display: block; font-size: .88rem; color: #1e2939; }
.op-items .meta span { display: block; font-size: .76rem; color: var(--ink-soft); margin-top: .1rem; }
.op-items .amt { font-weight: 700; font-size: .9rem; white-space: nowrap; }

.op-addr { font-style: normal; font-size: .86rem; line-height: 1.65; color: var(--ink-mid); }
.op-addr strong { display: block; color: var(--ink); margin-bottom: .2rem; }
.op-addr .note { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .4rem; font-style: italic; }
.op-addr .contact { display: block; margin-top: .5rem; font-size: .82rem; }

.op-card .row { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; color: var(--ink-mid); padding: .35rem 0; }
.op-card .row .free { color: var(--green); font-weight: 700; }
.op-card .row .cut { color: var(--green); font-weight: 700; }
.op-card .row.total {
    font-size: 1.2rem; font-weight: 800; color: #1e2939;
    border-top: 1px solid var(--line); margin-top: .7rem; padding-top: .9rem;
}
.op-card .row.total span:last-child { color: var(--green); }
.op-pay { margin: .8rem 0 0; font-size: .76rem; color: var(--ink-soft); }

.op-next { background: var(--green-tint); border-radius: var(--radius); padding: 1.3rem; margin-bottom: 1.4rem; }
.op-next h2 { margin: 0 0 .8rem; font-size: .92rem; font-weight: 800; color: var(--green-dark); }
.op-next ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.op-next li { font-size: .82rem; color: #2f4f37; line-height: 1.5; }
.op-cta { border-radius: 10px; padding-block: .9rem; margin-bottom: .6rem; }

/* --- About ------------------------------------------------------------ */
.ab-grid { display: grid; grid-template-columns: 1fr 380px; gap: 1.4rem; align-items: stretch; }
.ab-grid.no-img { grid-template-columns: 1fr; }
@media (max-width: 860px) { .ab-grid { grid-template-columns: 1fr; } }
.ab-copy { margin-bottom: 0; display: flex; flex-direction: column; }
.ab-copy p { margin: 0; font-size: .95rem; line-height: 1.85; color: var(--ink-mid); }
.ab-ctas { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.6rem; }
.ab-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(255, 90, 31, .15); }
/* The photo matches the copy card's height on wide screens and falls back to
   its own ratio once the grid stacks. */
.ab-img img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.ab-work { margin-top: 2.4rem; }
.ab-work .row-head { margin-bottom: 1.3rem; }
.ab-work .row-head h2 { font-size: 1.4rem; }
.ab-visit { margin-top: 2.4rem; }
.ab-visit h2 { margin: 0 0 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* --- Quote / contact -------------------------------------------------- */
.q-wrap { padding-block: 2rem 3rem; }
.q-head { margin-bottom: 1.4rem; }
.q-head h1 { margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 700; color: #1e2939; }
.q-head p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.q-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .q-grid { grid-template-columns: 1fr; } }
.q-cta { border-radius: 10px; padding-block: .9rem; margin-top: .3rem; }
.q-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.q-contact li { display: flex; align-items: flex-start; gap: .7rem; font-size: .86rem; color: var(--ink-mid); line-height: 1.55; }
.q-contact svg { width: 16px; height: 16px; flex: none; color: var(--green); margin-top: .15rem; }
.q-contact a { color: var(--ink-mid); text-decoration: none; }
.q-contact a:hover { color: var(--green); }

.op-related { margin-top: 2.4rem; }
.op-related .p-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 980px) { .op-related .p-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .op-related .p-grid.four { grid-template-columns: 1fr; } }

/* --- Alerts / empty --------------------------------------------------- */
.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .86rem; margin-bottom: 1.2rem; }
.alert.bad { background: #fdecea; color: #8f1d16; }
.alert.good { background: var(--green-tint); color: var(--green-dark); }
.alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--ink-soft); }
.empty-state h3 { color: var(--ink); margin: 0 0 .4rem; }

.toast {
    position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; padding: .75rem 1.3rem; border-radius: 999px;
    font-size: .85rem; z-index: 90; box-shadow: 0 6px 24px rgba(0,0,0,.2);
    transition: opacity .4s;
}
.toast.bad { background: #b3261e; }

/* --- Footer ---------------------------------------------------------- */
/* Near-black rather than the brand green, with two levels of grey: #898989 for
   anything you might read, #565656 for the legal line underneath. */
.ftr { background: #111; color: #898989; margin-top: 3rem; }
.ftr-in { display: grid; grid-template-columns: 1.5fr repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; padding-block: 3.6rem 2.4rem; }
.ftr-logo-link { display: inline-block; }
.ftr-logo { height: 52px; width: auto; }
.ftr-brand p { font-size: .84rem; line-height: 1.75; margin: 1.1rem 0 1.5rem; max-width: 300px; }
.ftr-col h4 { color: #fff; font-size: .92rem; font-weight: 700; margin: 0 0 1.5rem; letter-spacing: 0; }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.ftr-col a { font-size: .84rem; text-decoration: none; color: #898989; }
.ftr-col a:hover { color: #fff; }
/* Each contact line leads with its own icon, so the rows are flex rather than
   plain list items — the icon holds its width while the address wraps. */
.ftr-contact li { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; line-height: 1.6; }
.ftr-contact svg { width: 15px; height: 15px; flex: none; margin-top: .2rem; }
.social { display: flex; gap: .75rem; }
.social a {
    width: 36px; height: 36px; border-radius: 8px; background: #222;
    display: grid; place-items: center; color: #898989; text-decoration: none;
    transition: background .15s, color .15s;
}
.social a:hover { background: var(--green); color: #fff; }
.social svg { width: 17px; height: 17px; }
.ftr-btm {
    border-top: 1px solid rgba(255,255,255,.07); padding-block: 1.5rem;
    font-size: .8rem; color: #565656;
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem 1.5rem; flex-wrap: wrap;
}
.ftr-end { display: flex; align-items: center; gap: .5rem 1.6rem; flex-wrap: wrap; }
.ftr-by { display: inline-flex; align-items: center; gap: .4rem; }
/* Sized to the logo's own 16x20 so it stays crisp, and baseline-matched to the
   copyright beside it rather than sitting proud of the line. */
.ftr-by a { display: inline-flex; align-items: center; }
.ftr-by img { display: block; width: 16px; height: 20px; }
.ftr-by a:hover { opacity: .8; }

.ftr-legal { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.ftr-legal a { color: #565656; text-decoration: none; }
.ftr-legal a:hover { color: #898989; }

/* --- Pagination ------------------------------------------------------ */

.pager-nav { margin-top: 2.4rem; }
.pager {
    display: flex; gap: .4rem; justify-content: center; align-items: center;
    list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.pager a, .pager strong, .pager .pg-step {
    display: grid; place-items: center;
    min-width: 38px; height: 38px; padding: 0 .6rem;
    border-radius: 999px; border: 1px solid var(--line);
    font-size: .84rem; font-weight: 600; text-decoration: none;
    color: var(--ink-mid); background: #fff;
    transition: background .15s, border-color .15s, color .15s;
}
.pager a:hover { border-color: var(--green); color: var(--green); background: var(--green-tint); }
.pager a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pager strong { background: var(--green); color: #fff; border-color: var(--green); }

.pager .pg-step { padding: 0; }
.pager .pg-step svg { width: 16px; height: 16px; }
/* The ends of the range keep their step so the row never changes width as you
   page through — greyed and inert rather than removed. */
.pager .pg-step.is-off { color: var(--line); background: var(--bg-soft); cursor: default; }

@media (max-width: 480px) {
    .pager a, .pager strong, .pager .pg-step { min-width: 34px; height: 34px; font-size: .8rem; }
}

/* =====================================================================
   Home page sections
   ===================================================================== */

.btn-sm { padding: .5rem 1rem; font-size: .78rem; }
.section.pt0 { padding-top: 0; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Category circles ------------------------------------------------ */
.cats { padding-block: 2.6rem; }
.cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem; }
.cats .cat .circle { background: #fdeef0; }
.cats .cat .circle svg { width: 42px; height: 42px; color: var(--green); }

/* --- Row heading with a "View all" on the right ---------------------- */
.row-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap;
}
.row-head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; margin: .3rem 0 0; }
.row-head .eyebrow { margin: 0; color: var(--green); }

/* --- Product card additions ------------------------------------------ */
.p-grid.four { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.p-card .ph { display: block; text-decoration: none; }
.p-card .ph .none { display: grid; place-items: center; height: 100%; }
.p-card .ph .none svg { width: 44px; height: 44px; color: #cfd8d2; }
/* A quiet caption above the product name — the design keeps it out of the way
   so the name and price carry the card.

   The display/text-align reset is load-bearing: `.cat` is also the class on the
   category tiles above, and that rule centres its contents. Without this the
   caption inherits the tile's centred column layout. */
.p-card .cat {
    display: block; text-align: left; align-self: flex-start;
    font-size: .76rem; color: #94a3b8; font-weight: 400; letter-spacing: 0;
}
.p-card .nm { text-decoration: none; color: var(--ink); }
.p-card .nm:hover { color: var(--green); }

/* No gap: the star path leaves ~14% of its own viewBox clear on each side, and
   that built-in clearance is the whole spacing between one star and the next.
   Adding a gap on top pushes the row too wide. */
.stars { display: inline-flex; align-items: center; gap: 0; }
.stars svg { width: 17px; height: 17px; stroke: none; fill: #ddd; }
.stars svg.on { fill: var(--amber); }
.stars .rc { font-size: .68rem; color: var(--ink-soft); margin-left: .25rem; }

.p-card .foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .55rem;
}
.p-card .add-form { margin: 0; }
/* A rounded rectangle, not a pill: it squares up with the card's own corner
   radius and gives the label room to sit on the same line as the price. */
/* Both a submit button (quick add) and a link (choose an option), so the link
   decoration and inherited colour have to be reset alongside the button reset. */
.p-card .add {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--green); color: #fff; border: 0; cursor: pointer;
    padding: .6rem 1rem; border-radius: 10px; font-size: .82rem;
    font-weight: 700; font-family: inherit;
    text-decoration: none; white-space: nowrap;
}
.p-card .add:hover { color: #fff; }
.p-card .add:hover { background: var(--green-dark); }
.p-card .add svg { width: 15px; height: 15px; }
.p-card .add.disabled { background: #e5e5e5; color: var(--ink-soft); cursor: not-allowed; }

/* --- Promo banners --------------------------------------------------- */
.banner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .banner-row { grid-template-columns: 1fr; } }
.banner {
    position: relative; border-radius: var(--radius); overflow: hidden;
    min-height: 190px; background: linear-gradient(105deg, #f3f7f2 0%, #e6f0e6 100%);
    display: flex; align-items: center;
    border: 1px solid rgba(255, 90, 31, .15);
}
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Artwork banners are the whole tile — no text sits on top, so hold the
   picture's own 588x200 ratio instead of cropping it to a fixed height. */
.banner.is-art {
    display: block; min-height: 0; aspect-ratio: 588 / 200;
    text-decoration: none; color: inherit;
    transition: transform .18s, box-shadow .18s;
}
.banner.is-art:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.banner .b-copy { position: relative; padding: 1.6rem; max-width: 62%; }
.banner h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; }
.banner p { font-size: .82rem; color: var(--ink-mid); margin: 0 0 1rem; line-height: 1.55; }
.banner .b-badge {
    position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%);
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--green); color: #fff; display: grid; place-items: center;
    font-size: .78rem; font-weight: 800; text-align: center; line-height: 1.1;
    box-shadow: 0 4px 14px rgba(0,0,0,.16);
}

/* --- Trust strip ----------------------------------------------------- */
.trust { background: #fff7f4; border-block: 1px solid rgba(255, 90, 31, .15); }
.trust-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.4rem; padding-block: 2.2rem;
}
/* Stacked and centred: the design puts the icon above its label rather than
   beside it, and drops the white disc that used to sit behind the icon. */
.t-item { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
/* All three sit on one 28px line. The padlock's artwork is only 26px tall, so
   it scales up to meet the others; width follows its own ratio. */
.t-ico { height: 28px; width: auto; flex: none; }
/* Kept for the icons the design ships no artwork for — truck, clock, heart. */
.t-ico-line {
    width: 40px; height: 40px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; color: var(--green);
}
.t-ico-line svg { width: 19px; height: 19px; }
.t-txt { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.t-txt strong { font-size: .86rem; font-weight: 700; }
.t-txt span { font-size: .72rem; color: var(--ink-soft); }

/* --- Filter tabs ------------------------------------------------------ */
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: 1.8rem; }
.tab {
    padding: .42rem .95rem; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--ink-mid); font-size: .78rem; font-weight: 500;
    font-family: inherit; cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.tab:hover { border-color: var(--green); color: var(--green); }
.tab.on { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.none-match { text-align: center; color: var(--ink-soft); font-size: .88rem; padding: 2rem 0; }

/* --- Newsletter ------------------------------------------------------ */
/* The artwork is already darkened at source, so it needs no scrim over it —
   the flat colour behind is only there for the moment before it loads. */
.news {
    position: relative; color: #fff; text-align: center;
    background: #1c1412 url('../img/subscription-bg.png') center / cover no-repeat;
}
.news-in { padding-block: 4.5rem; max-width: 620px; }
.news .eyebrow { color: var(--green); margin-bottom: 1rem; }
.news h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 .7rem; }
.news p { font-size: .88rem; color: rgba(255,255,255,.72); margin: 0 0 1.9rem; line-height: 1.6; }
/* One white pill holding both controls, rather than two separate ones with a
   gap. The button keeps square corners and the pill's overflow clips its right
   end into the cap — which is what the design's flat-left/round-right Subscribe
   button actually is. */
.news-form {
    display: flex; align-items: stretch; max-width: 480px; margin: 0 auto;
    background: #fff; border-radius: 999px; overflow: hidden;
}
.news-form input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    padding: .95rem 1.5rem; font-size: .88rem; font-family: inherit; color: var(--ink);
}
/* The focus ring moves to the pill: an outline on the input alone would be
   drawn inside the white field and read as a stray box. */
.news-form input:focus { outline: none; }
.news-form:focus-within { box-shadow: 0 0 0 3px rgba(2, 113, 2, .55); }
.news-form .btn { flex: none; border-radius: 0; padding: 0 1.75rem; }
@media (max-width: 520px) {
    .news-form { flex-direction: column; border-radius: var(--radius); }
    .news-form .btn { justify-content: center; padding: .8rem; }
}

/* Footer grid: an `auto-fit` track list after a fixed first column collapses
   to one column per row when the columns are few, so the counts are stated
   explicitly instead. Five tracks: the brand, the three link columns from
   `footer_columns`, and the contact block. Add a column in the admin and this
   count has to grow with it, or the last one wraps to a row of its own. */
.ftr { margin-top: 0; }
.ftr-in { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.25fr; }
@media (max-width: 1100px) { .ftr-in { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 900px)  { .ftr-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ftr-in { grid-template-columns: 1fr; } }

/* Placeholder styling for products with no photo yet.
   A soft botanical tint reads as "image coming" rather than "broken". */
.p-card .ph { background: linear-gradient(135deg, #f2f7f2 0%, #e8f1e8 100%); }
.p-card .ph .none svg { color: #b9cdbc; }
.cats .cat .circle { background: linear-gradient(135deg, #fdeef0 0%, #fbe4e7 100%); }
.hero-slide:not(:has(img)) {
    background: linear-gradient(120deg, #14301f 0%, #027102 55%, #14301f 100%);
}
.banner:not(:has(img)) { background: linear-gradient(105deg, #f3f7f2 0%, #e6f0e6 100%); }