/* The Pickle Potli — vintage brand system (cream / deep green / terracotta / gold) */

:root {
    --cream: #f8f1de;
    --cream-deep: #efe3c6;
    --paper: #fdf8ec;
    --green-950: #1b2a13;
    --green-900: #24371a;
    --green-700: #3a5527;
    --green-100: #dde5cf;
    --terracotta: #b3551f;
    --terracotta-dark: #964314;
    --gold: #b8963f;
    --gold-soft: #d9c68e;
    --ink: #2c2a1e;
    --muted: #71705c;
    --line: rgba(59, 74, 38, 0.25);
    --radius: 14px;
    --shadow: 0 10px 30px rgba(43, 42, 30, 0.12);
    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body: 'Karla', 'Helvetica Neue', sans-serif;
    --font-script: 'Dancing Script', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    background:
        radial-gradient(circle at 12% 8%, rgba(184, 150, 63, 0.08), transparent 40%),
        radial-gradient(circle at 88% 92%, rgba(58, 85, 39, 0.08), transparent 40%),
        var(--cream);
    color: var(--ink);
    line-height: 1.55;
    font-size: 16px;
}

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

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--green-950); margin: 0 0 0.4em; }

a { color: var(--terracotta); }

/* The shell width. Fluid with clamped gutters: on a 1280px laptop this is
   near enough the old 1180px, and on a 2000px monitor it uses the screen
   instead of leaving ~400px of cream in each corner. */
:root {
    /* Fluid: the shell IS the screen, minus a gutter. The 2200px ceiling only
       bites on ultrawide monitors, where an unbroken 2560px row of text would
       be unreadable. */
    --shell: min(100%, 2200px);
    --gutter: clamp(20px, 2.6vw, 60px);
}

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

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(248, 241, 222, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--green-900);
}

.header-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 10px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--green-950);
}

.brand img { width: 54px; height: 54px; object-fit: contain; }

.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.brand-tag {
    display: block;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--terracotta);
}

.site-nav { display: flex; align-items: center; gap: 22px; }

.site-nav a {
    text-decoration: none;
    color: var(--green-900);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.site-nav a:hover { color: var(--terracotta); }

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-900);
    color: var(--cream) !important;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--green-950);
    cursor: pointer;
}

.cart-link:hover { background: var(--green-700); }

.cart-count {
    background: var(--terracotta);
    color: #fff;
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    font-size: 0.78rem;
    padding: 0 6px;
}

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

.hero {
    display: grid;
    /* Stacked, not side by side. The poster is a 2:1 banner carrying its own
       fine print — given the full container width it is finally legible, and
       the headline reads as a caption under it rather than competing with it. */
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 30px 0 48px;
}

.eyebrow {
    font-family: var(--font-script);
    color: var(--terracotta);
    font-size: 1.7rem;
    margin: 0 0 4px;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
    line-height: 1.04;
    margin-bottom: 14px;
}

.hero h1 em { font-style: italic; color: var(--terracotta); }

.hero-copy { color: var(--muted); font-size: 1.08rem; max-width: 46ch; margin: 0 0 26px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

.primary-btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.03em;
    background: var(--terracotta);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 26px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease, transform 0.15s ease;
}

.primary-btn:hover:not(:disabled) { background: var(--terracotta-dark); transform: translateY(-1px); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.secondary-btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    background: transparent;
    color: var(--green-900);
    border: 2px solid var(--green-900);
    border-radius: 10px;
    padding: 11px 24px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.secondary-btn:hover { background: var(--green-900); color: var(--cream); }

.hero-stats {
    display: flex;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.hero-stats > div { padding: 0 26px; border-left: 1px solid var(--line); }
.hero-stats > div:first-child { padding-left: 0; border-left: none; }

.hero-stats dt {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.7rem;
    color: var(--green-900);
}

.hero-stats dd { margin: 0; color: var(--muted); font-size: 0.86rem; }




@keyframes floaty {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-7px) rotate(-4deg); }
}

/* ----------------------------- trust band ------------------------------- */

.trust-band {
    background: var(--green-900);
    color: var(--cream);
    border-block: 3px double var(--gold);
}

.trust-band .page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-block: 20px;
}

.trust-item { display: flex; align-items: center; gap: 12px; padding: 6px 10px; }

.trust-item .icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(248, 241, 222, .10);
    color: var(--gold-soft);
}
.trust-item .icon svg { width: 21px; height: 21px; }

.trust-item strong { display: block; font-size: 0.92rem; letter-spacing: 0.02em; }
.trust-item span.sub { font-size: 0.78rem; color: var(--gold-soft); }

/* ------------------------------ storefront ------------------------------ */

.section-heading { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; }
.section-heading p.sub { color: var(--muted); margin: 0; }

.storefront { padding: 58px 0 30px; }

.toolbar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 14px;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 26px;
    box-shadow: var(--shadow);
}

.toolbar label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.toolbar input, .toolbar select,
/* `.auth-form` is included because the sign-in boxes use `.field` markup but
   are not a `.form-grid`, so their inputs were rendering with the browser's
   bare defaults — 22px tall, square, 13px text — on the last screen before
   payment. */
.form-grid input, .form-grid textarea, .form-grid select,
.auth-form input[type="email"], .auth-form input[type="text"],
.auth-form input[type="tel"], .auth-form input[type="number"] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 11px 13px;
}

.toolbar input:focus, .toolbar select:focus,
.form-grid input:focus, .form-grid textarea:focus,
.auth-form input:focus {
    outline: 2px solid var(--gold);
    border-color: var(--gold);
}

.catalog-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.catalog-bar h3 { margin: 0; font-size: 1.2rem; }
#result-count { color: var(--muted); font-size: 0.9rem; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 22px;
}

.product-card {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.product-card { border-top: 4px solid var(--accent, var(--gold)); }

.product-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1.5px solid var(--line);
    background: var(--paper);
}

.product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-script {
    font-family: var(--font-script);
    color: var(--terracotta);
    font-size: 1.2rem;
    margin: 0 0 -2px;
}

.product-hi {
    font-size: 0.86rem;
    color: var(--green-700);
    margin: 0 0 8px;
}

/* flavour profile dots, mirroring the printed label's taste meter */
.taste-meter {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.taste-meter span { display: flex; align-items: center; gap: 6px; }

.taste-meter .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
}

.taste-meter .dot.on { background: var(--accent, var(--gold)); border-color: var(--accent, var(--gold)); }

/* ---- size selector + quantity stepper ---- */

.product-buy { border-top: 1px dashed var(--line); }

.size-row { display: flex; gap: 8px; padding: 12px 16px 0; }

.size-chip {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--green-900);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 8px 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.size-chip:hover:not(.active):not(.out) { border-color: var(--green-700); }

.size-chip.active {
    background: var(--green-900);
    border-color: var(--green-900);
    color: var(--cream);
}

.size-chip.out { opacity: 0.45; text-decoration: line-through; }

.stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--terracotta);
    border-radius: 10px;
    padding: 4px;
}

.stepper button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.34); }
.stepper button:disabled { opacity: 0.4; cursor: not-allowed; }

.stepper-count {
    min-width: 26px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.stepper.small { background: var(--green-900); padding: 3px; }
.stepper.small button { width: 26px; height: 26px; font-size: 1rem; }
.stepper.small .stepper-count { min-width: 22px; font-size: 0.92rem; }

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--green-900);
    color: var(--cream);
    border: 1px solid var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}

.product-body { padding: 16px 16px 6px; flex: 1; }
.product-body h4 { font-size: 1.12rem; font-weight: 700; margin-bottom: 2px; }
.product-body p.desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; }

.product-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.meta-chip {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--cream-deep);
    color: var(--green-900);
    border: 1px solid var(--line);
}

.meta-chip.jain { background: var(--green-100); border-color: var(--green-700); color: var(--green-900); }

.heat-mild { background: #e4ecd4; }
.heat-medium { background: #f3e3bb; }
.heat-hot { background: #f4d1b3; color: #8a3d12; }
.heat-very-hot { background: #eebcae; color: #7c2810; }

.product-pairing { color: var(--muted); font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 16px;
}

.price { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; color: var(--green-950); }
.stock-note { display: block; font-size: 0.72rem; color: var(--muted); }
.stock-note.low { color: var(--terracotta); font-weight: 700; }

.add-btn { padding: 10px 18px; font-size: 0.92rem; }

.loading-card {
    grid-column: 1 / -1;
    text-align: center;
    padding: 46px 20px;
    background: var(--paper);
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}

/* ------------------------------ story band ------------------------------ */

.story {
    margin: 50px 0;
    background: var(--green-950);
    border-radius: var(--radius);
    border: 1px solid var(--gold);
    color: var(--cream);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.story .story-copy { padding: 44px 46px; }
.story h2 { color: var(--cream); font-weight: 900; font-size: 1.9rem; }
.story h2 em { color: var(--gold-soft); }
.story p { color: rgba(248, 241, 222, 0.82); }
.story .eyebrow { color: var(--gold-soft); }
/* The jars in this panel change one after another. Each photo is stacked on the
   same spot and crossfaded.
   `contain`, not `cover`: the product shots are square and the panel is wide, so
   covering would crop the tops and bottoms off the jars. The photos already
   carry a #f8f1de background — exactly `--cream` — so a contained photo blends
   into the panel invisibly and needs no cutting out. */
.story-visual {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    border-radius: var(--radius);
    background: var(--cream);
}
.story-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* The square shots carry a wide cream margin around the jar, so contained
       they read much smaller than the 3-jar photo they replace. Scaling up
       crops that margin — and since the margin and the panel are the same
       cream, the crop is invisible. */
    transform: scale(1.22);
    opacity: 0;
    transition: opacity 900ms ease-in-out;
}
/* The landscape 3-jar photo already fills the panel and must not be cropped —
   scaling it would cut the outer two jars off. */
.story-visual img.fills {
    object-fit: cover;
    transform: none;
}
.story-visual img.is-on { opacity: 1; }

/* Someone who has asked for less motion gets the first photo and no cycling. */
@media (prefers-reduced-motion: reduce) {
    .story-visual img { transition: none; }
}

.story-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.story-points li { display: flex; gap: 10px; align-items: baseline; font-size: 0.95rem; }
.story-points li::before { content: '❧'; color: var(--gold-soft); }

/* Contact block on the order-confirmed page. The email address cannot be
   hyphenated, so each contact gets its own full-width tappable row rather
   than being wrapped inside a sentence. */

.help-box {
    margin-top: 18px;
    padding: 4px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.help-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
    margin: 12px 0 4px;
}
.help-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--green-700);
    text-decoration: none;
    /* long addresses shrink rather than overflow the panel */
    overflow-wrap: anywhere;
}
.help-row + .help-row { border-top: 1px dashed var(--line); }
.help-row:hover,
.help-row:focus-visible { color: var(--terracotta); }
.help-icon {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream-deep);
    font-size: 0.8rem;
}

/* ----------------------------- cart drawer ------------------------------ */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(27, 42, 19, 0.45);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(420px, 94vw);
    background: var(--cream);
    border-left: 3px solid var(--green-900);
    z-index: 70;
    transform: translateX(105%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 2px solid var(--green-900);
}

.cart-drawer-header h3 { margin: 0; font-size: 1.3rem; }

.close-btn {
    background: none;
    border: 2px solid var(--green-900);
    border-radius: 999px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--green-900);
}

.cart-items { flex: 1; overflow-y: auto; padding: 14px 20px; display: grid; gap: 12px; align-content: start; }

.cart-item {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.cart-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.item-title { font-weight: 700; }
.muted { color: var(--muted); font-size: 0.84rem; }

.quantity-controls { display: inline-flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 6px; background: #fff; }

.quantity-controls button {
    background: var(--cream-deep);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    color: var(--green-900);
}

.remove-btn { background: none; border: none; color: var(--terracotta); font-weight: 700; cursor: pointer; font-size: 0.82rem; }

.empty-cart { text-align: center; color: var(--muted); padding: 40px 10px; }

.cart-footer { border-top: 2px solid var(--green-900); padding: 16px 20px 20px; background: var(--paper); }

.shipping-note { font-size: 0.84rem; color: var(--terracotta); font-weight: 700; margin-bottom: 10px; }
.summary-line { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 3px 0; }
.summary-line.total { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }

.cart-footer .primary-btn { width: 100%; margin-top: 14px; text-align: center; }

/* --------------------------- checkout / payment ------------------------- */

.flow-page { max-width: 1020px; margin: 0 auto; padding: 40px 22px 70px; }

.flow-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 34px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    flex-wrap: wrap;
}

.flow-steps .step { display: flex; align-items: center; gap: 8px; }
.flow-steps .step::after { content: '———'; color: var(--line); letter-spacing: -2px; }
.flow-steps .step:last-child::after { content: ''; }
.flow-steps .dot {
    width: 26px; height: 26px; border-radius: 999px;
    display: inline-grid; place-items: center;
    border: 2px solid var(--line); background: var(--paper); color: var(--muted);
    font-family: var(--font-display);
}
.flow-steps .step.active { color: var(--green-950); }
.flow-steps .step.active .dot { background: var(--green-900); border-color: var(--green-900); color: var(--cream); }
.flow-steps .step.done .dot { background: var(--gold); border-color: var(--gold); color: #fff; }

.checkout-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 26px; align-items: start; }

.panel {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow);
}

.panel h2 { font-size: 1.4rem; }
.panel h3 { font-size: 1.05rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.form-grid label,
.auth-form .field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
}

.summary-items { display: grid; gap: 10px; margin-bottom: 14px; }
.summary-item { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }

.pay-card { max-width: 560px; margin: 0 auto; text-align: center; }
.pay-amount { font-family: var(--font-display); font-weight: 900; font-size: 3rem; color: var(--green-950); margin: 6px 0; }
.order-chip { display: inline-block; background: var(--cream-deep); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 700; color: var(--green-900); }

.test-note {
    background: #fdf0d5;
    border: 1.5px dashed var(--gold);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.86rem;
    color: #7a5b12;
    margin: 18px 0;
    text-align: left;
}

.secure-note { color: var(--muted); font-size: 0.8rem; margin-top: 14px; }

/* ------------------------------- success -------------------------------- */

.success-hero { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.success-hero img { width: 100%; max-width: 560px; margin: 0 auto 18px; border-radius: var(--radius); }

/* -------------------------------- admin --------------------------------- */

.admin-order { margin-bottom: 16px; }
.admin-order summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-weight: 700; }
.admin-order .pill { font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-deep); }
.pill.paid { background: #dbe8cd; color: #2c521c; }
.pill.pending_payment { background: #fdf0d5; color: #7a5b12; }
.pill.failed { background: #f3d3c8; color: #8a2c12; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; font-size: 0.9rem; }
.admin-grid h4 { margin-bottom: 6px; }
.admin-grid table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin-grid td { padding: 4px 6px 4px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }

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

.site-footer { background: var(--green-950); color: var(--cream); margin-top: 70px; border-top: 3px double var(--gold); }

.footer-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 44px var(--gutter) 30px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 30px;
}

.footer-inner img.footer-logo { width: 76px; margin-bottom: 12px; }
.site-footer h4 { color: var(--gold-soft); font-size: 1rem; }
.site-footer p, .site-footer a { color: rgba(248, 241, 222, 0.8); font-size: 0.9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-bottom { text-align: center; padding: 14px; border-top: 1px solid rgba(248, 241, 222, 0.15); font-size: 0.8rem; color: rgba(248, 241, 222, 0.6); }

/* ----------------------------- notification ----------------------------- */

.notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green-900);
    color: var(--cream);
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid var(--gold);
    box-shadow: var(--shadow);
    z-index: 90;
    font-weight: 700;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.notification.error { background: #8a2c12; }
.notification.hidden { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

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

@media (max-width: 900px) {
    .hero { padding-top: 22px; }
    .trust-band .page { grid-template-columns: 1fr 1fr; }
    .story { grid-template-columns: 1fr; }
    .story-visual { min-height: 200px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .toolbar { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .admin-grid { grid-template-columns: 1fr; }
    .hero-stats > div { padding: 0 14px; }
}

@media (max-width: 560px) {
    .form-grid { grid-template-columns: 1fr; }
    .trust-band .page { grid-template-columns: 1fr; }

    /* keep the brand lockup on one line instead of wrapping to three */
    .header-inner { padding: 8px 16px; gap: 10px; }
    .brand img { width: 42px; height: 42px; }
    .brand-name { font-size: 1.05rem; }
    .brand-tag { font-size: 0.56rem; letter-spacing: 0.14em; }
}

/* ----------------------- control room (admin portal) --------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat {
    background: var(--green-950);
    color: var(--cream);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.stat dt { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--cream); }
.stat dd { margin: 2px 0 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); }

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 2px solid var(--green-900);
    margin-bottom: 20px;
}

.admin-tab {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    background: transparent;
    color: var(--green-900);
    border: 1.5px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
}

.admin-tab:hover { background: var(--cream-deep); }

.admin-tab.active {
    background: var(--green-900);
    color: var(--cream);
    border-color: var(--green-900);
}

.admin-tab.download { margin-left: auto; color: var(--terracotta); }

.activity-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.activity-filter label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.activity-filter select { font-family: var(--font-body); padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }

.activity-table {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.activity-row {
    display: grid;
    grid-template-columns: 190px 210px 1fr;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px dashed var(--line);
    font-size: 0.86rem;
    align-items: baseline;
}

.activity-row:last-child { border-bottom: none; }
.activity-row .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-row .what { font-weight: 700; color: var(--green-900); }
.activity-row .detail { color: var(--muted); word-break: break-word; }
.activity-row.highlight { background: #dbe8cd; }
.activity-row.highlight .what { color: #2c521c; }
.activity-row.danger { background: #f7ddd4; }
.activity-row.danger .what { color: #8a2c12; }

.stock-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stock-table th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 6px;
    border-bottom: 2px solid var(--line);
}
.stock-table td { padding: 8px 6px; border-bottom: 1px dashed var(--line); }
.stock-table tr.low td { background: #fdf0d5; }

@media (max-width: 700px) {
    .activity-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------- policies -------------------------------- */

.policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 26px;
}

.policy-nav a {
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--green-900);
    background: var(--cream-deep);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
}

.policy-nav a:hover { background: var(--green-900); color: var(--cream); border-color: var(--green-900); }

.policy { margin-bottom: 18px; scroll-margin-top: 90px; }
.policy h3 {
    font-size: 1.3rem;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--gold);
}
.policy p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.65; }
.policy p:last-child { margin-bottom: 0; }
.policy strong { color: var(--green-950); }

.policy-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    justify-content: center;
    padding: 22px 22px 34px;
    border-top: 1px solid var(--line);
    max-width: 1020px;
    margin: 0 auto;
}

.policy-strip a {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
}

.policy-strip a:hover { color: var(--terracotta); text-decoration: underline; }

/* ---------------------- discounts, savings and packs --------------------- */

/* Diagonal band across the top-right of the label image. */
.discount-band {
    position: absolute;
    top: 14px;
    right: -42px;
    transform: rotate(38deg);
    background: var(--terracotta);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 46px;
    border-block: 1px solid var(--gold-soft);
    box-shadow: 0 4px 12px rgba(43, 42, 30, 0.28);
    pointer-events: none;
    white-space: nowrap;
}

.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }

/* Original label price, struck through. */
.price-mrp {
    font-size: 0.95rem;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.price-save {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2c651f;
    background: #dbe8cd;
    border-radius: 999px;
    padding: 2px 8px;
}

.pack-contents {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--green-700);
    background: var(--cream-deep);
    border-left: 3px solid var(--accent, var(--gold));
    border-radius: 0 8px 8px 0;
    padding: 8px 10px;
    margin: 0 0 12px;
    text-transform: capitalize;
}

.pack-contents strong { color: var(--green-950); }

@media (max-width: 560px) {
    .discount-band { font-size: 0.66rem; padding: 4px 42px; right: -40px; }
}

/* Exactly three products per row on desktop, as chosen by the owner.
   Steps down to two on tablet and one on phone so cards never squash. */
@media (min-width: 981px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 641px) and (max-width: 980px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Interactive layer — reveals, quick view, progress bars, celebration.
   Every effect here is decorative: with reduced motion, or with JS off,
   content still renders in its final readable state.
   ========================================================================= */

/* ------------------------------ scroll reveals --------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

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

.product-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.product-visual { position: relative; overflow: hidden; }
.product-visual img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-visual img { transform: scale(1.05); }

/* The whole photo is the quick-view target. It is a <button> so the keyboard
   can reach it, which means the button chrome has to be reset back to the
   plain image frame the card design expects. */
.product-visual {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
}
.product-visual:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: -3px;
}

/* ------------------------------ category chips --------------------------- */

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
}
.filter-chip {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 600 0.85rem/1 var(--font-body);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.filter-chip:hover { background: var(--cream-deep); }
.filter-chip:active { transform: scale(.97); }
.filter-chip.active {
    background: var(--green-900);
    border-color: var(--green-900);
    color: var(--cream);
}

/* -------------------------------- quick view ----------------------------- */

body.no-scroll { overflow: hidden; }

.quick-view {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(27, 42, 19, .55);
    backdrop-filter: blur(3px);
}
.quick-view.open { display: grid; animation: qv-fade .2s ease; }

.qv-panel {
    position: relative;
    width: min(920px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: qv-rise .28s cubic-bezier(.2,.7,.3,1);
}
.qv-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.9rem;
    cursor: pointer;
}
.qv-close:hover { background: var(--cream-deep); }

.qv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.qv-media {
    position: relative;
    background: var(--cream);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: hidden;
    border-radius: var(--radius) 0 0 var(--radius);
}

/* The card's discount ribbon is rotated and deliberately hangs off the corner,
   which only works inside the card's fixed aspect box. In the modal it reads
   as a clipped sliver, so use a plain pill here instead. */
.qv-media .discount-band {
    top: 16px;
    left: 16px;
    right: auto;
    transform: none;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    letter-spacing: 0.08em;
}
@media (max-width: 720px) {
    .qv-media { border-radius: var(--radius) var(--radius) 0 0; }
}
.qv-media img { width: 100%; height: auto; border-radius: var(--radius); }
.qv-info { padding: 28px 28px 30px; }
.qv-info h3 { font-size: 1.5rem; margin: 2px 0 2px; }

.qv-facts { margin: 16px 0 18px; display: grid; gap: 9px; }
.qv-facts div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 0.86rem; }
.qv-facts dt { font-weight: 700; color: var(--muted); }
.qv-facts dd { margin: 0; color: var(--ink); }

.qv-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
    .qv-body { grid-template-columns: 1fr; }
    .qv-info { padding: 20px; }
}

@keyframes qv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qv-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }

/* --------------------------- free-shipping progress ---------------------- */

.ship-msg { display: block; margin-bottom: 7px; }
.ship-msg.unlocked { color: var(--green-700); font-weight: 700; }
.ship-bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: var(--cream-deep);
    overflow: hidden;
}
.ship-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--terracotta));
    transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.ship-fill.unlocked { background: linear-gradient(90deg, var(--green-700), var(--green-900)); }

/* ------------------------------ cart badge bump -------------------------- */

.cart-count.bump { animation: badge-bump .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes badge-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.fly-ghost {
    position: fixed;
    z-index: 200;
    border-radius: var(--radius);
    object-fit: cover;
    pointer-events: none;
}

/* --------------------------- checkout validation ------------------------- */

.field { position: relative; }
.field.invalid input { border-color: var(--terracotta); background: #fdf3ef; }
.field.valid input { border-color: rgba(58, 85, 39, .5); }
.field-error {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--terracotta-dark);
    animation: qv-fade .2s ease;
}

/* --------------------------- order confirmation -------------------------- */

.order-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.ghost-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--green-900);
    font: 700 0.8rem/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.ghost-btn:hover { background: var(--cream-deep); }
.ghost-btn.copied { background: var(--green-100); border-color: var(--green-700); }
.share-btn { margin-top: 14px; }

.success-hero.celebrate img { animation: card-pop .6s cubic-bezier(.3,1.3,.5,1); }
@keyframes card-pop {
    0%   { transform: scale(.94); opacity: 0; }
    60%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); }
}

.order-track {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin: 22px auto 0;
    padding: 0;
    max-width: 520px;
    position: relative;
}
/* the connecting rail sits behind the markers */
.order-track::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--cream-deep);
}
.order-track li {
    position: relative;
    z-index: 1;
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    line-height: 1.25;
}
.order-track .tick {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--cream-deep);
    background: var(--paper);
    font-size: 0.6rem;
    color: var(--muted);
}
.order-track li.done { color: var(--green-900); }
.order-track li.done .tick {
    background: var(--green-700);
    border-color: var(--green-700);
    color: var(--cream);
    font-size: 0.72rem;
}
.order-track li.current { color: var(--terracotta-dark); }
.order-track li.current .tick {
    border-color: var(--terracotta);
    color: var(--terracotta);
    animation: pulse-dot 1.8s ease-in-out infinite;
}
.order-track.unpaid li.done .tick { background: var(--muted); border-color: var(--muted); }

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 85, 31, .35); }
    50%      { box-shadow: 0 0 0 7px rgba(179, 85, 31, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .order-track li.current .tick { animation: none; }
    .success-hero.celebrate img { animation: none; }
}

/* --------------------------------- confetti ------------------------------ */

.confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    overflow: hidden;
}
.confetti-layer i {
    position: absolute;
    top: -14px;
    width: 9px;
    height: 14px;
    opacity: .92;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(105vh) rotate(680deg); opacity: 0; }
}

/* The category chips are the visible control; the <select> stays in the DOM
   purely so one place owns the current category. */
.toolbar-category { display: none; }
.toolbar { grid-template-columns: 2fr 1fr; }
@media (max-width: 640px) { .toolbar { grid-template-columns: 1fr; } }

/* =========================================================================
   Home page top layer — offer bar, hero stage, collection tiles.
   ========================================================================= */

/* ------------------------------ offer bar -------------------------------- */

.announce {
    background: var(--green-950);
    color: var(--cream);
    font-size: 0.8rem;
    letter-spacing: .03em;
}
.announce .page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 9px;
    text-align: center;
}
.announce strong { color: var(--gold-soft); }
.announce-dot { color: var(--gold); }

/* The header is sticky; the bar deliberately is not, so it scrolls away once
   the shopper is past it. */

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

.hero-wrap {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 90% at 78% 38%, rgba(184, 150, 63, .16), transparent 62%),
        radial-gradient(ellipse 60% 80% at 10% 82%, rgba(58, 85, 39, .13), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--cream) 62%, var(--cream-deep) 100%);
    border-bottom: 1px solid rgba(59, 74, 38, .18);
}

.hero { padding: 62px 0 66px; }

/* Capped so the headline holds one line at desktop width; it wraps
   naturally on narrower screens. */
.hero h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.05; margin-bottom: 0.3em; }
.hero-copy { font-size: 1.03rem; max-width: 42ch; }

.hero-actions { margin-top: 26px; }

/* The poster is the only artwork in the fold, so let it sit forward. */

.hero-stats { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
}

/* ---------------------------- collection tiles --------------------------- */

.collections { padding: 62px 0 8px; }

.collections-head { text-align: center; max-width: 560px; margin: 0 auto 30px; }
.collections-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; margin-bottom: 6px; }
.collections-head .sub { color: var(--muted); margin: 0; }

.collection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.collection {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    text-decoration: none;
    background: var(--cream-deep);
    box-shadow: 0 6px 18px rgba(43, 42, 30, .10);
    transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.collection:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(43, 42, 30, .20);
}
.collection img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.collection:hover img { transform: scale(1.07); }

/* The label sits on a gradient rather than a solid bar, so the jar stays
   visible behind it. */
.collection-label {
    position: absolute;
    inset: auto 0 0 0;
    display: grid;
    gap: 2px;
    padding: 46px 16px 16px;
    background: linear-gradient(180deg, transparent, rgba(20, 30, 14, .86) 58%);
    color: var(--cream);
}
.collection-label strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: .01em;
}
.collection-label span { font-size: 0.76rem; color: var(--gold-soft); line-height: 1.3; }

.collection:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

@media (max-width: 980px) {
    .collection-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .collections { padding-top: 44px; }
    .collection { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .collection:hover { transform: none; }
    .collection:hover img { transform: none; }
}

@media (max-width: 640px) {
    /* Two short lines beat one wrapped line with a stranded separator. */
    .announce { font-size: 0.72rem; }
    .announce .page { gap: 1px 8px; padding-block: 7px; line-height: 1.35; }
    .announce-dot { display: none; }
    .announce .page > span { flex: 0 0 100%; }
}

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

/* Mobile and tablet: stacked above the copy and edge to edge — the negative
   inline margin simply cancels .page's own padding, which is safer than a
   100vw trick (that would overflow by the scrollbar width). */
.hero-banner {
    line-height: 0;
    margin-inline: calc(-1 * var(--gutter));
}
.hero-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.hero { padding: 26px 0 34px; }

/* Desktop: side by side. A 2:1 poster running full width would be ~720px tall
   on a 1440px screen, which leaves no room under it for the headline, buttons,
   stats and trust band. Beside the copy it is ~350px tall and the whole fold
   fits one screen. */
@media (min-width: 981px) {
    .hero {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        gap: 40px;
        align-items: center;
        padding: 34px 0 40px;
    }
    .hero-banner {
        order: 0;                       /* left column, before the copy */
        margin-inline: 0;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(43, 42, 30, .18);
    }
    .hero-content { order: 1; }
    .hero h1 { font-size: clamp(2rem, 2.7vw, 2.65rem); }
    .hero-copy { font-size: 0.98rem; }
    .hero-stats { margin-top: 24px; padding-top: 20px; }
}

/* ------------------------------ WhatsApp float --------------------------- */

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 70;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 211, 102, .38);
    transition: transform .22s cubic-bezier(.3,1.3,.5,1), box-shadow .22s ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover {
    transform: scale(1.07);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .5);
}
/* Clear of the cart drawer's own controls on small screens. */
@media (max-width: 640px) {
    .wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; }
    .wa-float svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-float:hover { transform: none; }
}

/* ---------------------------- tile item counts --------------------------- */

.collection-count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(253, 248, 236, .93);
    color: var(--green-900);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* =========================================================================
   Shop layout — filter rail beside the jars on desktop, collapsed behind
   two buttons on mobile. One set of controls in the DOM either way.
   ========================================================================= */

.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;
}

.shop-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.shop-rail {
    position: sticky;
    top: 96px;                     /* clears the sticky header */
    display: grid;
    gap: 22px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
.rail-group { display: grid; gap: 10px; }
.rail-group h4 {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.shop-rail input[type="search"],
.shop-rail select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--cream);
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
}

/* In the rail the chips stack into a list rather than a wrapping row. */
.shop-rail .category-chips {
    display: grid;
    gap: 6px;
    margin: 0;
}
.shop-rail .filter-chip {
    justify-self: stretch;
    text-align: left;
    border-radius: 10px;
    padding: 9px 12px;
}

.rail-done { display: none; }

/* The mobile control bar is hidden on desktop — the rail is always open. */
.shop-controls { display: none; }

.shop-main { min-width: 0; }

/* Three across in the remaining width, and a fourth once the shell is wide
   enough that three would make each card absurdly large. */
@media (min-width: 981px) {
    .shop-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    .shop-layout { grid-template-columns: 268px minmax(0, 1fr); gap: 36px; }
}
@media (min-width: 1560px) {
    .shop-main .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------- mobile --------------------------------- */

@media (max-width: 980px) {
    .shop-layout { grid-template-columns: 1fr; gap: 0; }

    .shop-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }
    .shop-control {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--paper);
        font: inherit;
        color: var(--ink);
        cursor: pointer;
    }
    .shop-control > span { font-weight: 700; font-size: 0.9rem; }
    .shop-control > em {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
        font-style: normal;
        font-size: 0.82rem;
        color: var(--muted);
    }
    .shop-control svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
    .shop-control[aria-expanded="true"] { border-color: var(--green-700); background: var(--cream-deep); }
    .shop-control[aria-expanded="true"] svg { transform: rotate(180deg); }

    /* The rail becomes a dropdown, showing only the group that was asked for. */
    .shop-rail {
        position: static;
        display: none;
        margin-bottom: 18px;
    }
    .shop-rail.open { display: grid; }
    .shop-rail[data-open="filter"] .rail-group[data-group="sort"] { display: none; }
    .shop-rail[data-open="sort"] .rail-group[data-group="filter"] { display: none; }

    .shop-rail .category-chips { grid-template-columns: 1fr 1fr; }

    .rail-done {
        display: block;
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 12px;
        background: var(--green-900);
        color: var(--cream);
        font: 700 0.92rem var(--font-body);
        cursor: pointer;
    }
}

@media (max-width: 560px) {
    .shop-rail .category-chips { grid-template-columns: 1fr; }
}

/* ------------------------------- first screen ---------------------------- */

/* The offer bar and header sit above this block, so their combined height is
   measured at runtime into --above (see interactive.js). Without that the
   trust band would sit ~150px below the fold and the next section would peek
   into view underneath it. */
@media (min-width: 981px) {
    .fold {
        min-height: calc(100vh - var(--above, 150px));
        display: flex;
        flex-direction: column;
    }
    /* The hero soaks up whatever height is left; the trust band keeps its own. */
    .fold .hero-wrap {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .fold .hero-wrap > .page { width: 100%; }

    /* With room to breathe, the poster can be a little larger. */
    .fold .hero { padding-block: 30px; }
}

/* Very short desktop windows: let it scroll rather than crushing the hero. */
@media (min-width: 981px) and (max-height: 620px) {
    .fold { min-height: 0; }
}

/* ------------------- first screen: scale to the space ------------------- */

/* The fold block is sized to the viewport, so the hero inside it was floating
   in ~340px of slack on a 1080px screen. These sizes carry a vh term so the
   contents grow with the space instead of sitting small in the middle of it. */
@media (min-width: 981px) {
    .fold .hero {
        grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
        gap: clamp(28px, 2.6vw, 52px);
    }

    .fold .hero h1 {
        font-size: clamp(2.1rem, 1.2vw + 3.1vh, 4rem);
        line-height: 1.04;
    }
    .fold .hero-copy {
        font-size: clamp(1rem, 0.3vw + 1.2vh, 1.35rem);
        max-width: 30ch;
    }

    .fold .hero-actions .primary-btn,
    .fold .hero-actions .secondary-btn {
        padding: clamp(13px, 1.9vh, 22px) clamp(24px, 2vw, 40px);
        font-size: clamp(0.95rem, 0.25vw + 1.35vh, 1.2rem);
    }

    .fold .hero-stats { margin-top: clamp(20px, 3.4vh, 44px); padding-top: clamp(16px, 2.6vh, 32px); }
    .fold .hero-stats dt { font-size: clamp(1.7rem, 0.6vw + 2.4vh, 3rem); }
    .fold .hero-stats dd { font-size: clamp(0.8rem, 0.15vw + 0.8vh, 1rem); }
    .fold .hero-stats > div { padding-inline: clamp(18px, 2vw, 36px); }
}

/* ---------------------------- shuffle carousel --------------------------- */

/* All six banners occupy the same box. aspect-ratio holds the height so the
   pile never collapses before the images decode, and the padding leaves room
   for the fanned cards to lean outside the front one without being clipped. */
.shuffle {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    cursor: pointer;
    /* room for the lean of the back cards */
    padding: 22px;
    box-sizing: content-box;
}

.shuffle-card {
    position: absolute;
    inset: 22px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 10px 26px rgba(43, 42, 30, .22);
    transform-origin: center center;
    transition:
        transform .85s cubic-bezier(.22, .72, .28, 1),
        opacity .55s ease,
        box-shadow .55s ease;
    will-change: transform;
}
/* The front card is lifted clear of the pile. */
.shuffle-card[aria-hidden="false"] {
    box-shadow: 0 20px 46px rgba(43, 42, 30, .30);
}
.shuffle-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shuffle-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.shuffle-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.shuffle-dot:hover { background: var(--gold-soft); }
.shuffle-dot.on {
    background: var(--green-900);
    border-color: var(--green-900);
    transform: scale(1.25);
}
.shuffle-dot:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Edge-to-edge on mobile: cancel the stack padding so the front card still
   reaches the screen edges the way the single banner used to. */
@media (max-width: 980px) {
    .shuffle { padding: 14px; }
    .shuffle-card { inset: 14px; border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    /* No auto-advance (handled in JS) and no sliding — the pile just sits. */
    .shuffle-card { transition: opacity .2s ease; }
}

/* The stack is 16:9 where the old single poster was 2:1 — taller for the same
   width. On a short desktop window that pushed the trust band below the fold.
   Cap the stack's WIDTH (not its height) from the space actually available, so
   the aspect ratio holds and no banner gets cropped; it simply sits narrower on
   a short screen. 232px covers the hero padding, the dots and the trust band. */
@media (min-width: 981px) {
    .fold .shuffle {
        max-width: min(100%, calc((100vh - var(--above, 150px) - 232px) * 16 / 9));
    }
}

/* An order that was paid for but cannot be filled from stock. Loud on purpose:
   it needs a refund or a restock, not a tidy queue position. */
.pill.oversold {
    background: #f3d3c8;
    color: #8a2c12;
    border-color: #8a2c12;
    font-weight: 700;
}

.track-stamp {
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: var(--muted);
    text-align: center;
}

/* ------------------------------- account page ---------------------------- */

.auth-panel { max-width: 460px; margin: 0 auto; }

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 20px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--cream);
}
.auth-tab {
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: 700 0.9rem var(--font-body);
    color: var(--ink);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.auth-tab.active { background: var(--green-900); color: var(--cream); }

.auth-form { display: grid; gap: 14px; }
.auth-form .muted { margin: 0; font-size: 0.9rem; }
.field-hint { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--muted); }
.auth-alt { margin: 4px 0 0; text-align: center; }

.link-btn {
    border: none;
    background: none;
    padding: 0;
    font: 600 0.85rem var(--font-body);
    color: var(--green-700);
    text-decoration: underline;
    cursor: pointer;
}
.link-btn:hover { color: var(--terracotta); }

.account-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.account-head h2 { margin: 2px 0 2px; }

.history-order { margin-bottom: 14px; }
.history-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line);
}
.history-items { padding: 10px 0; display: grid; gap: 6px; }
.history-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

/* ------------------------- checkout account gate ------------------------- */

.auth-gate { margin-bottom: 20px; }
.auth-gate h3 { margin: 2px 0 4px; }
.auth-gate .muted { margin: 0 0 16px; font-size: 0.9rem; }

.addr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.addr-head h3 { margin: 0; }

.addr-list { display: grid; gap: 10px; margin-bottom: 20px; }

.addr-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.addr-card:hover { background: var(--cream-deep); }
.addr-card.selected { border-color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-700); }
.addr-card input[type="radio"] { margin-top: 4px; accent-color: var(--green-900); }
.addr-body { display: grid; gap: 2px; font-size: 0.88rem; }
.addr-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.addr-label em { font-style: normal; color: var(--green-700); }
.addr-remove {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 0.76rem;
}

/* The OTP box: big, spaced digits so a 6-digit code is easy to check. */
#otp-code {
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
}

.success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

/* ------------------------- admin: status + stock ------------------------- */

/* Four buttons instead of a dropdown, so the current step is visible at a
   glance and changing it is one tap. */
.status-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.status-step {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font: 600 0.82rem var(--font-body);
    color: var(--ink);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.status-step:hover { background: var(--cream-deep); }
.status-step.on {
    background: var(--green-900);
    border-color: var(--green-900);
    color: var(--cream);
}

.stock-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.stock-head h3 { margin: 0 0 4px; }
.stock-head .muted { margin: 0; font-size: 0.84rem; max-width: 52ch; }

.stock-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.stock-stepper button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.stock-stepper button:hover { background: var(--cream-deep); }
.stock-stepper input {
    width: 68px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    font: 700 0.95rem var(--font-body);
    text-align: center;
    color: var(--ink);
}

.stock-table tr.out td { background: rgba(179, 85, 31, .07); }

/* The HTML `hidden` attribute is only a default style, so any rule that sets
   display (our .auth-form { display: grid }, for instance) silently beats it
   and the element stays on screen. Make hidden actually mean hidden. */
[hidden] { display: none !important; }


/* Owner order entry: one row per jar. */
.entry-line {
    display: grid;
    grid-template-columns: 1fr 90px 80px auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.entry-line select,
.entry-line input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    font: inherit;
    font-size: 0.88rem;
    color: var(--ink);
}
@media (max-width: 640px) {
    .entry-line { grid-template-columns: 1fr 1fr; }
}


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

/* Six links plus the brand do not fit a narrow screen. Rather than hiding the
   nav wholesale — which left a phone with no way to reach an account at all —
   the links are dropped in order of how little they are needed:
   browsing links first, then Shop, and never Account or Potli. */

.header-inner { flex-wrap: wrap; }
.site-nav { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

@media (max-width: 900px) {
    .site-nav { gap: 14px; }
    .site-nav a { font-size: 0.88rem; letter-spacing: 0.02em; }
    .cart-link { padding: 8px 13px; }
}

/* Combos / Our Story / Contact go first: everything they reach is also on the
   page itself. */
@media (max-width: 760px) {
    .site-nav .nav-secondary { display: none; }
}

/* Then Shop — the logo goes home and the shelf is the page. Account and the
   cart stay, because nothing else reaches them. */
@media (max-width: 560px) {
    .site-nav .nav-shop { display: none; }
    .site-nav { gap: 12px; }
    .site-nav .nav-account { font-size: 0.85rem; }
}

/* The nav sheds links as the screen narrows, in priority order. `.nav-keep`
   opts out of that: it is for a page whose nav would otherwise end up empty
   (the account page has no Account link and no cart, so hiding Shop left the
   customer with only the logo to escape by). */
.site-nav .nav-keep { display: inline-block; }

/* Very narrow: the brand tagline is the last thing to give way. */
@media (max-width: 380px) {
    .brand-tag { display: none; }
    .site-nav { gap: 10px; }
    .cart-link { padding: 7px 11px; }
}

/* ------------------------- quick view photo gallery ---------------------- */

.qv-thumbs {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.qv-thumb {
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 2px solid rgba(59, 74, 38, .25);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-thumb:hover { transform: translateY(-2px); }
.qv-thumb.on { border-color: var(--green-900); }

/* --------------------- admin: catalogue and photos ---------------------- */

.prod-thumb {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    display: block;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.photo-cell {
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cream);
    aspect-ratio: 1;
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell.main { border-color: var(--green-700); box-shadow: inset 0 0 0 2px var(--green-700); }
.photo-cell figcaption {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--green-900);
    color: var(--cream);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.photo-actions {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, transparent, rgba(20, 30, 14, .82));
}
.photo-actions .link-btn { color: var(--cream); font-size: 0.74rem; }
.photo-actions .link-btn:hover { color: var(--gold-soft); }

.photo-cell.add {
    display: grid;
    place-items: center;
    border-style: dashed;
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}
.photo-cell.add:hover { background: var(--cream-deep); color: var(--green-900); }

/* The Control Room's tables have six or seven columns. On a phone they are
   wider than the screen, and a table that overflows drags the whole page
   sideways with it. Let each panel scroll on its own instead, so the page
   never does. */
@media (max-width: 760px) {
    .tab-panel .panel { overflow-x: auto; }
    .stock-table { min-width: 460px; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .entry-line { grid-template-columns: 1fr 1fr; }
    .stock-head { flex-direction: column; align-items: stretch; }
    .stock-head .primary-btn { width: 100%; }

    /* `.link-btn` is a bare text link on the storefront, which is right there.
       Inside the Control Room's tables it is a control the owner taps with a
       thumb, and 25x16px is not a thumb target. Give those a real box. */
    .stock-table .link-btn,
    .photo-actions .link-btn,
    .entry-line .link-btn {
        padding: 11px 12px;
        min-height: 44px;
        min-width: 44px;
        text-decoration: none;
        border: 1px solid rgba(45, 90, 61, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        line-height: 1.1;
    }
    .photo-actions .link-btn {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(0, 0, 0, 0.35);
    }
    .stock-table td .link-btn + .link-btn { margin-top: 6px; }

    /* Setting the day's stock is the owner's most-repeated action, and most
       likely done on a phone. 32px is a mis-tap waiting to happen. */
    .stock-stepper button { width: 44px; height: 44px; font-size: 1.15rem; }
    .stock-stepper input { min-height: 44px; }
}

/* A checkbox is not a text field: the form grid stretching it to the full
   column width draws a wide flat rectangle instead of a box. Keep its own
   size, and make it big enough to hit. */
.form-grid .field label input[type="checkbox"],
#product-form .field label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--green-700);
    vertical-align: -4px;
    margin-right: 6px;
}
.form-grid .field label:has(> input[type="checkbox"]),
#product-form .field label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}

/* Shown in the Control Room when it was opened with a helper key, so it is
   obvious why most of the page is missing. */
.role-banner {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid rgba(45, 90, 61, 0.3);
    border-left: 4px solid var(--green-700);
    border-radius: 8px;
    background: rgba(45, 90, 61, 0.07);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* The coupon line in an order summary — green, because it is money coming off. */
.summary-item.discount-line span,
.summary-item.discount-line strong { color: var(--green-700); }

/* Checkout's coupon box. */
.coupon-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
/* This input lives outside `.field`, so it does not inherit the form's input
   styling and came out 22px tall next to a 45px button. */
.coupon-row input {
    flex: 1 1 140px;
    min-width: 0;
    text-transform: uppercase;
    padding: 9px 12px;
    min-height: 45px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    font: inherit;
    letter-spacing: 0.04em;
}
.coupon-row input:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }
.coupon-row button { flex: 0 0 auto; }
.coupon-note { margin: 6px 0 0; font-size: 0.84rem; }
.coupon-note.good { color: var(--green-700); font-weight: 600; }
.coupon-note.bad { color: #a4342a; }
.coupon-applied {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-top: 8px; padding: 9px 12px;
    border: 1px solid rgba(45, 90, 61, 0.32);
    border-radius: 8px;
    background: rgba(45, 90, 61, 0.08);
    font-size: 0.9rem;
}

/* Coupon status pills. The base `.pill` rule is scoped to `.admin-order`, so
   the ones in the coupons table need their own box. */
.stock-table .pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    white-space: nowrap;
}
.pill.on { background: #dbe8cd; color: #2c521c; }
.pill.off { background: #eee9dd; color: #6d6552; }

/* The product form's jar rows carry one more control than the order-entry
   lines they share `.entry-line` with: size, label price, selling price,
   % off, jars. */
.entry-line.size-line { grid-template-columns: 64px 1fr 1fr 76px 72px; }
@media (max-width: 760px) {
    .entry-line.size-line { grid-template-columns: 52px 1fr 1fr; }
    .entry-line.size-line input[data-f="off"] { grid-column: 2; }
    .entry-line.size-line input[data-f="stock"] { grid-column: 3; }
}

/* Whether the shop's data outlives a redeploy — shown at the top of the
   Control Room, because it is the one thing the owner most needs to know. */
.storage-strip {
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.storage-strip.good { border-left-color: var(--green-700); background: rgba(45, 90, 61, 0.07); }
.storage-strip.warn { border-left-color: #b8963f; background: rgba(184, 150, 63, 0.1); }
.storage-strip.bad  { border-left-color: #a4342a; background: rgba(164, 52, 42, 0.09); }
.storage-strip code { font-size: 0.85em; word-break: break-all; }

/* A 6-digit code reads better spaced out and centred, and it is the very last
   thing between a shopper and paying. */
.auth-form input[autocomplete="one-time-code"] {
    letter-spacing: 0.4em;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
}
.auth-form .field { margin-bottom: 12px; }