/* Hoidised Riinalt: Vioreta CMS mall (vana kujundus, 4 detaili muudetud 09.11.2026).
   Pealkirjad: Young Serif, tekst: Karla (OFL, assets/fonts). Nurgad kandilisemad, pealkirja all aktsentjoon,
   kontaktilehel Google'i kaart. Värvid, mustrid ja paigutus samad. */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/young-serif-normal-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/young-serif-normal-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/fonts/karla-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("assets/fonts/karla-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --paper: #FAFAF9;
    --paper-2: #FFFFFF;
    --ink: #1F1E1C;
    --ink-2: #5C5854;
    --ink-3: #8A8580;
    --rule: #E5E2DE;

    /* Four oranges, each with a specific job -- see the contrast note
       below. #F5821F is the client's real brand colour and #D24A28 is
       the logo's secondary red-orange; neither is safe as small text or
       button text on a light or white background (measured: F5821F on
       white is 2.6:1, D24A28 is 4.4:1, both under the 4.5:1 AA floor for
       normal text). --orange-dark and --orange-darker are darker shades
       of the SAME hue, picked by measuring actual WCAG contrast rather
       than eyeballing, and are what carries white text or sits behind a
       focus ring or active state.
         --orange       F5821F  5.7:1 dark-neutral text on it -- badges,
                                 icon colour, decorative borders/accents,
                                 never small white text
         --orange-dark  BF4611  4.9:1 vs paper as text, 5.1:1 white on it
                                 -- links, primary buttons, focus ring
         --orange-darker 9A3A0C even darker -- link/button hover, so
                                 hover reads as "the same colour, pressed
                                 harder" rather than a different colour
         --orange-red   D24A28  logo's secondary -- decorative accents
                                 only (footer rule, large headings), not
                                 small text or button backgrounds */
    --orange: #F5821F;
    --orange-dark: #BF4611;
    --orange-darker: #9A3A0C;
    --orange-red: #D24A28;
    --orange-ink: #1F1E1C;
    --gold: #C99A3C;
    --green: #4B6B3A;
    --green-dark: #35502A;
    --cream: #FBE7D2;

    --danger: #A23B2E;
    --danger-bg: #FBEAE6;
    --ok: #3B6B4A;
    --ok-bg: #E9F3EA;

    --radius: 4px;
    --radius-lg: 6px;
    --shadow: 0 2px 10px rgba(31, 30, 28, .08);
    --shadow-lg: 0 8px 28px rgba(31, 30, 28, .16);

    --maxw: 1180px;
    --gutter: clamp(1rem, 4vw, 2.5rem);

    --font: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Georgia is the fallback chain, not a second self-hosted face --
       body copy stays the system stack throughout (see the font-face
       comment above); only headings, eyebrows and display numerals ask
       for Fraunces. */
    --font-display: "Young Serif", Georgia, "Times New Roman", serif;

    /* Gingham (checked cloth) and paper-grain, both inline SVG data URIs
       -- see the pattern note above .surface-cream / .gingham-strip for
       how each is used. Generated once with a small PHP script (not
       shipped) so the encoding is verified correct, not hand-typed. */
    --pattern-gingham: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><rect width="28" height="28" fill="%23FFFFFF"/><rect width="14" height="28" fill="%23F5821F" fill-opacity="0.42"/><rect width="28" height="14" fill="%23F5821F" fill-opacity="0.42"/></svg>');
    --pattern-grain: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" result="t"/><feColorMatrix in="t" type="matrix" values="0 0 0 0 0.12, 0 0 0 0 0.09, 0 0 0 0 0.07, 0 0 0 0.05 0"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
    --pattern-pinked-edge: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20"><polygon points="0,4 4,0 8,4 12,0 16,4 16,16 12,20 8,16 4,20 0,16" fill="white"/></svg>');

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 .5em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); }
h3 { font-size: 1.3rem; }

/* Short orange underline flourish under a section title -- pair with
   <h2 class="section-title">. */
.section-title { display: block; position: relative; padding-bottom: .55rem; }
.section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 54px; height: 3px; border-radius: 2px;
    background: var(--orange); box-shadow: 0 0 0 rgba(0,0,0,0);
}
.section-title--center { display: block; text-align: center; }
.section-title--center::after { left: 50%; transform: translateX(-50%); }
p { margin: 0 0 1em; }
a { color: var(--orange-dark); text-decoration-thickness: 1.5px; }
a:hover { color: var(--orange-darker); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.3em; }

:focus-visible {
    /* --focus-color lets a dark/photo surface repoint the ring so it
       still hits 3:1 -- orange-dark measures 3.25:1 on the admin ink bar
       (passes, but too close to the 3:1 floor to trust), so every dark
       container below sets --focus-color: #fff instead (16.7:1). */
    outline: 3px solid var(--focus-color, var(--orange-dark));
    outline-offset: 2px;
    border-radius: 3px;
}

.vh {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Every icon in the UI is one of these -- see src/Support/Icons.php
   (Lucide, ISC licence, assets/vendor/lucide/LICENSE). Sized in em so it
   follows the font-size of whatever text it sits next to, and coloured
   with currentColor so it always follows the new orange palette without
   its own colour rules. */
.icon {
    width: 1.15em; height: 1.15em; display: inline-block;
    vertical-align: -0.2em; flex-shrink: 0;
}
.icon--lg { width: 1.8rem; height: 1.8rem; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2rem, 5vw, 4rem); }
.section--tight { padding-block: clamp(1.25rem, 3vw, 2rem); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-head p { margin: 0; color: var(--ink-2); }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.eyebrow {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--orange-dark); margin-bottom: .5rem;
}

/* ---------------------------------------------------------------- DEMO -- */
.demo-ribbon {
    background: var(--ink); color: #fff; text-align: center;
    font-size: .82rem; font-weight: 600; letter-spacing: .04em;
    padding: .5rem 1rem;
    --focus-color: #fff;
}
.demo-ribbon strong { color: var(--gold); }

/* -------------------------------------------------------------- header -- */
.site-header {
    background: var(--paper-2);
    border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-block: .7rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }

.main-nav { display: flex; align-items: center; gap: 1.4rem; }
.main-nav a {
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem;
    padding: .3rem 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--orange-dark); border-bottom-color: var(--orange); }

.header-actions { display: flex; align-items: center; gap: .9rem; }
.cart-link {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    color: var(--ink); font-weight: 700; background: var(--cream); border-radius: 999px;
    padding: .45rem .9rem; border: 1px solid var(--rule);
}
.cart-link__count {
    background: var(--orange-dark); color: #fff; border-radius: 999px; min-width: 1.4em;
    text-align: center; font-size: .78rem; padding: .05em .4em;
}
.nav-toggle {
    display: none; background: none; border: 1px solid var(--rule); border-radius: 8px;
    padding: .4rem .6rem; font-size: 1.1rem; cursor: pointer;
}

@media (max-width: 780px) {
    .main-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: var(--paper-2); border-bottom: 1px solid var(--rule);
        flex-direction: column; align-items: flex-start; gap: 0; padding: .5rem var(--gutter) 1rem;
        box-shadow: var(--shadow);
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: .6rem 0; width: 100%; border-bottom: 1px solid var(--rule); }
    .nav-toggle { display: inline-block; }
}

/* --------------------------------------------------------------- hero --- */
/* Three explicitly z-indexed layers (not source-order/pseudo-element
   paint order, which is fragile once a real child and a ::before are
   mixed): .hero__bg (the photo, animated), ::before (the gradient,
   guaranteed-contrast scrim -- see the WCAG note below), .hero__content
   (text, above both). */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background: var(--ink);
    min-height: min(76vh, 620px);
    display: flex; align-items: flex-end;
    --focus-color: #fff;
}
.hero__bg {
    position: absolute; inset: -2%; z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
    animation: hero-kenburns 24s ease-in-out infinite alternate;
}
/* Worst-case verified, not assumed: a .78-opacity ink scrim over even a
   pure-white photo still composites to ~8:1 contrast for white text
   (computed, see the commit that added --focus-color) -- comfortably
   past the 4.5:1 floor with margin for a real (non-worst-case) photo. */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(31, 30, 28, .82) 0%, rgba(31, 30, 28, .40) 55%, rgba(31, 30, 28, .12) 100%);
}
.hero__content { position: relative; z-index: 2; padding-block: 3rem 3.5rem; max-width: 660px; }
.hero__content h1 { color: #fff; }
.hero__content p { color: rgba(255, 255, 255, .92); font-size: 1.15rem; }
.hero__badges { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.hero__badge {
    display: inline-flex; align-items: center; gap: .4em;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
    color: #fff; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    backdrop-filter: blur(2px);
}

@keyframes hero-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__bg { animation: none; }
}

/* ------------------------------------------------------------- buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none;
    border-radius: var(--radius); padding: .75rem 1.4rem; border: 2px solid transparent;
    cursor: pointer; transition: transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange-dark); color: #fff; }
.btn--primary:hover { background: var(--orange-darker); color: #fff; }
.btn--outline { background: transparent; border-color: var(--orange-dark); color: var(--orange-dark); }
.btn--outline:hover { background: var(--cream); }
.btn--ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: .5rem .9rem; font-size: .85rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- forms -- */
label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .3rem; }
.field { margin-bottom: 1.1rem; }
.field__hint { font-size: .8rem; color: var(--ink-3); margin-top: .25rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    width: 100%; font: inherit; font-size: .96rem; padding: .65rem .8rem;
    border: 1.5px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink);
}
textarea { min-height: 7em; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); }
.checkbox-field { display: flex; align-items: flex-start; gap: .6rem; }
.checkbox-field input { width: auto; margin-top: .3rem; }
.checkbox-field label { font-weight: 400; margin: 0; }
.form-errors {
    background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger);
    border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem;
}
.form-errors ul { margin: .3rem 0 0; padding-left: 1.2em; }
.alert {
    border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.2rem; font-size: .92rem; border: 1px solid;
}
.alert--success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.alert--error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* --------------------------------------------------------------- cards -- */
.card {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); overflow: hidden;
}
.card__body { padding: 1.1rem 1.2rem; }

.grid {
    display: grid; gap: 1.4rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .grid--3col { grid-template-columns: 1fr; } }

/* .product-card is a plain container -- two SEPARATE links (image, then
   body text) rather than one link wrapping everything, because the
   quick-add <form> has to be a sibling of the image link, not nested
   inside it (a <form> cannot legally nest inside an <a>). The image link
   itself is tabindex="-1" aria-hidden with alt="" -- .product-card__link
   right below carries the one real stop per card for keyboard/AT users,
   so this avoids two identical destinations in the tab order. */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.product-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream); position: relative; }
.product-card__img-link { display: block; width: 100%; height: 100%; }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__tags { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.product-card__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card__cat { font-size: .74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.product-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.product-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
.product-card__price { font-weight: 800; font-size: 1.1rem; color: var(--orange-dark); }

/* The quick-add button: a direct child of .product-card__img (already
   position:relative), so it anchors to the image itself regardless of
   the card's rendered width -- no fixed-pixel guessing. Visibility/reveal
   timing comes from the generic .quick-add rules further down. */
.product-card .quick-add { position: absolute; right: .6rem; bottom: .6rem; margin: 0; z-index: 1; }
.quick-add__btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--orange-dark); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
}
.quick-add__btn:hover { background: var(--orange-darker); }
.quick-add__btn .icon { width: 20px; height: 20px; }

.badge {
    display: inline-flex; align-items: center; gap: .3em; font-size: .74rem; font-weight: 700;
    padding: .25em .6em; border-radius: 999px; letter-spacing: .02em;
}
.badge--out { background: var(--danger-bg); color: var(--danger); }
.badge--in { background: var(--ok-bg); color: var(--ok); }
.badge--new { background: var(--orange); color: var(--orange-ink); }
.badge--gold { background: #FBF0D9; color: #8A6412; }

/* --------------------------------------------------------------- filters- */
.filter-bar {
    display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: .8rem; margin-bottom: 1.5rem;
}
.filter-bar select { width: auto; }
.filter-bar .checkbox-field { margin: 0; }
.filter-bar--sticky { position: sticky; top: .7rem; z-index: 10; box-shadow: var(--shadow); }
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; margin-top: 1.2rem; }
.chip {
    text-decoration: none; font-size: .86rem; font-weight: 600; padding: .4rem .9rem;
    border-radius: 999px; border: 1.5px solid var(--rule); color: var(--ink); background: #fff;
    transition: transform .15s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip__count { opacity: .65; font-weight: 500; }
.chip[aria-current="true"] { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }

.empty-state { text-align: center; padding: 3rem 1rem; position: relative; }
.empty-state .motif { position: static; display: block; width: 72px; height: auto; margin: 0 auto 1rem; opacity: .3; }

/* --------------------------------------------------------- product page- */
.product-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; }
.product-hero > * { min-width: 0; }
@media (max-width: 780px) { .product-hero { grid-template-columns: 1fr; gap: 1.5rem; } }
.product-hero__img { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.product-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__img--zoom img { transition: transform .5s ease; }
.product-hero__img--zoom:hover img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .product-hero__img--zoom:hover img { transform: none; } }
.product-price { font-size: 1.8rem; font-weight: 800; color: var(--orange-dark); margin: .3rem 0 1rem; }

/* A jar-label treatment: cream card, a faint gingham corner motif (see
   partials with Motifs::svg('cucumber-leaf', 'motif motif--corner-br')). */
.ingredients-box {
    position: relative; overflow: hidden;
    background: var(--cream); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0;
}
.ingredients-box h3 { margin-bottom: .4rem; font-size: 1rem; position: relative; }
.ingredients-box p { position: relative; }

.taste-chips { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .6rem 0 1rem; }
.taste-chip {
    display: inline-block; font-size: .78rem; font-weight: 700; padding: .25em .7em;
    border-radius: 999px; background: var(--paper); border: 1.5px solid var(--orange);
    color: var(--orange-darker);
}
.delivery-info-row {
    display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.2rem;
    border-top: 1px solid var(--rule); font-size: .88rem; color: var(--ink-2);
}
.delivery-info-row span { display: inline-flex; align-items: center; gap: .4em; }

.qty-input { display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.qty-input button { background: var(--cream); border: 0; width: 2.4rem; height: 2.6rem; font-size: 1.1rem; cursor: pointer; }
.qty-input input { width: 3.2rem; border: 0; text-align: center; -moz-appearance: textfield; }

/* --------------------------------------------------------------- cart --- */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: .5rem .6rem; border-bottom: 2px solid var(--rule); }
.cart-table td { padding: .8rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.cart-line__product { display: flex; align-items: center; gap: .8rem; }
.cart-line__product img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }

/* Below 500px the 4-column table (402px, mostly the qty form) overflows once
   there is a real row -- an empty cart never does, which is why this was
   missed twice. Stack each row into a card: label above value, taken from
   data-label so no information is lost. thead goes visually-hidden (not
   display:none) rather than removed, matching the step-indicator fix's rule.
   See riina-epood-mobile-overflow-2026-09-16, item 3. */
@media (max-width: 500px) {
    .cart-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { margin-bottom: 1rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
    .cart-table td { border-bottom: 1px solid var(--rule); padding: .7rem .9rem; }
    .cart-table td:last-child { border-bottom: 0; }
    .cart-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .3rem;
        font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
    }
    .cart-table td[data-label="Toode"]::before { display: none; }
}
.cart-summary { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.3rem; }
.summary-row { display: flex; justify-content: space-between; padding: .4rem 0; }
.summary-row--total { font-weight: 800; font-size: 1.2rem; border-top: 2px solid var(--rule); margin-top: .5rem; padding-top: .8rem; }
.checkout-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.delivery-option { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--rule); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .6rem; cursor: pointer; }
.delivery-option:has(input:checked) { border-color: var(--orange); background: var(--cream); }
.delivery-option input { width: auto; }
.delivery-option .price { margin-left: auto; font-weight: 700; }
.payment-btn { display: flex; align-items: center; gap: .7rem; border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 1rem; width: 100%; background: #fff; font-weight: 700; cursor: pointer; }
.payment-btn:hover { border-color: var(--orange); }

/* -------------------------------------------------------------- misc --- */
.story-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 780px) { .story-strip { grid-template-columns: 1fr; } }
.story-strip img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }

.trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 780px) { .trust-points { grid-template-columns: 1fr; } }
.trust-point { text-align: center; padding: 1.2rem; }
.trust-point__icon { color: var(--orange-dark); margin-bottom: .6rem; display: flex; justify-content: center; }

.recipe-card { text-decoration: none; color: inherit; }
.recipe-card__img { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: .7rem; }
.recipe-card__img img { width: 100%; height: 100%; object-fit: cover; }

.category-banner {
    border-radius: var(--radius-lg); overflow: hidden; position: relative; color: #fff;
    min-height: 220px; display: flex; align-items: flex-end; background: var(--green) center/cover;
}
.category-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,20,10,.72), rgba(20,20,10,.15)); }
.category-banner__content { position: relative; padding: 1.4rem 1.6rem; }
.category-banner h2 { color: #fff; margin: 0; }

table.plain { width: 100%; border-collapse: collapse; }
table.plain th, table.plain td { padding: .6rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
table.plain th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }

/* table.plain (table-layout:auto) refuses to shrink cells below content width,
   so a wide table's own box grows past 100% instead of respecting it -- overflow
   on the table itself does nothing, since it's the table's box that's oversized,
   not its content. .admin-main (a plain block box, already wrapping every admin
   page) is the right place for the scroll boundary: the table keeps one piece
   with thead/tbody in the same table-layout scope (no column-misalignment risk
   from display:block-ing the table itself), and it only scrolls if something
   inside actually doesn't fit. See riina-epood-mobile-overflow-2026-09-16, item 2. */
.admin-main { overflow-x: auto; }

.breadcrumb { font-size: .85rem; color: var(--ink-3); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-2); }

.pagebar { background: var(--cream); }
.pagebar .wrap { padding-block: 2.5rem; }

.footer-cta { text-align: center; }

/* -------------------------------------------------------------- footer - */
/* A FIXED decision for round 3: "no dark footer" -- light and warm
   instead. Every colour re-measured for THIS background, not carried
   over from the old dark version: --orange-dark (fine on white/paper)
   drops to 4.26:1 on --cream, under the 4.5:1 floor, so headings and
   links use --orange-darker (5.85:1) instead. Plain --orange stays
   non-text only (the top border), same reasoning as everywhere else. */
.site-footer { background: var(--cream); color: var(--ink-2); margin-top: 3rem; border-top: 4px solid var(--orange); position: relative; overflow: hidden; }
.site-footer .footer-inner { position: relative; z-index: 1; padding-block: 2.5rem 1.5rem; }
.site-footer .brand img { height: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h3 { color: var(--orange-darker); font-size: .95rem; font-family: var(--font); text-transform: uppercase; letter-spacing: .05em; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--orange-darker); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid rgba(31, 30, 28, .14); padding-top: 1.2rem; font-size: .8rem; color: var(--ink-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }

/* -------------------------------------------------------------- utils -- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.small { font-size: .85rem; }
/* Riina's kitchen photo needs the crop biased up, or a cover-cropped
   container cuts her head off (Ivar's fix note) -- used wherever
   site/meist-riina.jpg is shown as a cropped cover image. */
.object-top { object-position: center 20%; }
.bg-top { background-position: center 20%; }

/* --------------------------------------------------------------- admin - */
.admin-topbar { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1); --focus-color: #fff; }
.admin-topbar__bar { display: flex; align-items: center; gap: 1.4rem; padding-block: .7rem; flex-wrap: wrap; }
/* The logo is designed for a light ground (white wordmark strokes read as
   invisible directly on the dark bar, and brightness(0) invert(1) was
   worse -- it flattened the whole mark, orange included, into one white
   silhouette). A light pill behind it shows the real logo unmodified. */
.admin-topbar .brand {
    background: rgba(255, 255, 255, .94); padding: .3rem .8rem;
    border-radius: 999px;
}
.admin-topbar .brand span { color: var(--ink); }
.admin-topbar .brand img { height: 30px; }
.admin-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-right: auto; }
.admin-nav a { display: inline-flex; align-items: center; gap: .4em; color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; font-size: .9rem; }
.admin-nav a:hover { color: #fff; }
.admin-main { padding-block: 2rem 4rem; }

/* .btn--ghost's default (dark text, light border) is built for a light
   surface -- it disappears on this dark bar (dark-on-dark text, per
   Ivar). Give it light text and a visible border here specifically,
   rather than changing .btn--ghost everywhere it's used on light cards. */
.admin-topbar .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.admin-topbar .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat-card {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem; text-decoration: none; color: inherit; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: .2rem;
}
.stat-card__num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--orange-dark); }
.stat-card__label { color: var(--ink-2); font-size: .88rem; }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.admin-form { max-width: 620px; }
.table-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tag-row a { text-decoration: none; }

/* ============================================================ ROUND 3 ===
   The "signature visual language": textured section surfaces, waved
   edges, botanical accents, and a small reduced-motion-safe animation
   vocabulary (reveal-on-scroll, card lift/zoom, cart-badge pop). Every
   page from here on is built out of these, not one-off styling. ======= */

/* -------------------------------------------------------- surfaces --- */
/* No flat single-colour sections: every surface below is textured, glowed
   or photographic. Alternate these section-to-section down a page. */
.surface-cream {
    background-color: var(--cream);
    background-image: var(--pattern-grain);
}
.surface-paper-grain {
    background-color: var(--paper);
    background-image: var(--pattern-grain);
}
/* A soft radial wash of brand orange behind key content -- content is
   pulled above it via z-index so the glow never interferes with text. */
.surface-glow { position: relative; overflow: hidden; isolation: isolate; }
.surface-glow::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: min(70vw, 780px); height: min(70vw, 780px); border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 130, 31, .20) 0%, rgba(245, 130, 31, 0) 72%);
    top: -18%; right: -12%;
}
.surface-glow--left::before { left: -12%; right: auto; }
/* The gingham motif as a thin decorative strip or corner, never a full
   background (a whole section in checked cloth would be too loud) --
   see .ingredients-box and the footer for real placements. */
.gingham-strip {
    background-image: var(--pattern-gingham);
    background-size: 24px 24px;
    height: 20px;
    -webkit-mask-image: var(--pattern-pinked-edge);
    mask-image: var(--pattern-pinked-edge);
    -webkit-mask-size: 16px 20px;
    mask-size: 16px 20px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}
.gingham-corner {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--pattern-gingham);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0, #000 46%, transparent 70%);
    mask-image: radial-gradient(circle at 100% 0%, #000 0, #000 46%, transparent 70%);
    opacity: .7;
}

/* A full-bleed photo band with a legibility gradient -- the mid-page
   equivalent of .hero, for the parallax quote strip and similar. */
.photo-band {
    position: relative; overflow: hidden; color: #fff; --focus-color: #fff;
    min-height: clamp(320px, 46vw, 480px);
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.photo-band__bg {
    position: absolute; inset: 0; z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
@media (min-width: 780px) {
    .photo-band:not(.photo-band--static) .photo-band__bg { background-attachment: fixed; }
}
.photo-band::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(31, 30, 28, .58);
}
.photo-band__content { position: relative; z-index: 2; max-width: 780px; padding: 2rem var(--gutter); }

/* --------------------------------------------------------- page header - */
/* Every page except home gets one of these instead of a bare title on
   white -- see partials/page-header.php. Same guaranteed-contrast
   gradient stops as .hero (verified against a worst-case pure-white
   photo, see the hero comment above). */
.page-header {
    position: relative; overflow: hidden; color: #fff; --focus-color: #fff;
    min-height: clamp(230px, 34vw, 360px);
    display: flex; align-items: flex-end;
}
.page-header__bg {
    position: absolute; inset: 0; z-index: 0;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-header::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, rgba(31, 30, 28, .82) 0%, rgba(31, 30, 28, .42) 60%, rgba(31, 30, 28, .15) 100%);
}
.page-header__content { position: relative; z-index: 2; padding-block: 2.5rem 3.4rem; }
.page-header h1 { color: #fff; margin-bottom: .2rem; }
.page-header__subtitle { color: rgba(255, 255, 255, .92); max-width: 640px; margin-bottom: 0; font-size: 1.05rem; }
.breadcrumb--onphoto, .breadcrumb--onphoto a { color: rgba(255, 255, 255, .85); }
.breadcrumb--onphoto a:hover { color: #fff; }
.page-header .wave-divider { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; margin-top: 0; }

/* -------------------------------------------------------------- wave -- */
/* See partials/wave.php -- a full-width SVG divider between two
   sections. line-height:0 keeps the inline SVG from adding baseline gap. */
.wave-divider { display: block; line-height: 0; margin-top: -1px; }
.wave-divider svg { display: block; width: 100%; height: clamp(28px, 5vw, 56px); }

/* ------------------------------------------------------------ motifs -- */
/* Hand-drawn botanical accents (src/Support/Motifs.php) -- always faint
   and decorative, never load-bearing content, so aria-hidden in the SVG
   itself is enough; no extra af fordance needed here. */
.motif {
    color: var(--orange); opacity: .16;
    position: absolute; pointer-events: none; z-index: 0;
}
.motif--corner-br { right: -10px; bottom: -10px; width: 110px; height: auto; transform: rotate(8deg); }
.motif--corner-tl { left: -14px; top: -10px; width: 90px; height: auto; transform: rotate(-14deg) scaleX(-1); }
.motif--beside-heading { position: static; display: inline-block; width: 34px; height: auto; margin-right: .5rem; vertical-align: -8px; opacity: .55; }

/* --------------------------------------------------------- animation -- */
/* Reveal-on-scroll: robust by default (fully visible with no JS and no
   IntersectionObserver support), only ever hidden-then-revealed once
   app.js confirms both are available and prefers-reduced-motion is off
   -- see the .js-reveal-armed gate, set on <html> by app.js. */
.reveal { opacity: 1; transform: none; }
.js-reveal-armed .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: var(--reveal-delay, 0s);
}
.js-reveal-armed .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal-armed .reveal { opacity: 1; transform: none; transition: none; }
}

/* Card hover: a small lift plus an image zoom, cheap (transform/opacity
   only, no layout thrash) and skipped outright under reduced motion. */
.product-card__img img, .recipe-card__img img { transition: transform .5s ease; }
.product-card:hover .product-card__img img, .product-card:focus-within .product-card__img img,
.recipe-card:hover .recipe-card__img img, .recipe-card:focus-within .recipe-card__img img {
    transform: scale(1.07);
}
.product-card, .recipe-card, .card--lift {
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover, .product-card:focus-within,
.recipe-card:hover, .recipe-card:focus-within,
.card--lift:hover, .card--lift:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
    .product-card__img img, .recipe-card__img img,
    .product-card, .recipe-card, .card--lift { transition: none; }
    .product-card:hover .product-card__img img, .recipe-card:hover .recipe-card__img img { transform: none; }
    .product-card:hover, .recipe-card:hover, .card--lift:hover { transform: none; }
}

/* Quick add-to-cart on hover: hidden until hover/focus on pointer
   devices, always visible on touch (no hover state to reveal it). */
.quick-add { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.product-card:hover .quick-add, .product-card:focus-within .quick-add { opacity: 1; transform: none; }
@media (hover: none) {
    .quick-add { opacity: 1; transform: none; }
}

@keyframes cart-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.4); }
    65% { transform: scale(.95); }
    100% { transform: scale(1); }
}
.cart-link__count.is-popping { animation: cart-pop .5s ease; }
@media (prefers-reduced-motion: reduce) {
    .cart-link__count.is-popping { animation: none; }
}

/* Animated counters (Meist) -- app.js updates the text content; this
   just prevents a layout jump between "0" and the final number. */
.stat-counter { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.4rem); color: var(--orange-dark); font-variant-numeric: tabular-nums; }
.counter-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 600px) { .counter-row { grid-template-columns: 1fr; } }
.counter-item p { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* Sticky helpers, used by the product buy box, checkout summary, and the
   recipe "add to cart" bar. */
.sticky-panel { position: sticky; top: 5.5rem; }

/* =========================================================== HOME ===== */
/* Value-point cards overlapping the hero's bottom edge -- z-index 3 puts
   them above the hero's own layers (bg=0, gradient=1, content=2). White
   icon on --orange-dark (not plain --orange, which is only 2.6:1 for
   white) keeps the circle readable as a graphic, not just decoration. */
.value-cards {
    position: relative; z-index: 3; margin-top: -60px; margin-bottom: 1rem;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
@media (max-width: 780px) { .value-cards { grid-template-columns: 1fr; margin-top: -36px; gap: .9rem; } }
.value-card {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 1.6rem 1.4rem; text-align: center;
}
.value-card__icon {
    width: 56px; height: 56px; border-radius: 50%; background: var(--orange-dark); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto .8rem;
}
.value-card__icon .icon { width: 28px; height: 28px; }

.photo-band__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 3.2vw, 2.1rem); margin: 1rem 0; line-height: 1.3; }

/* The seasonal-box teaser -- a gingham strip along the top edge (see
   home.php), photo on one side, offer text on the other. */
.box-teaser {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; background: var(--paper-2);
}
@media (max-width: 780px) { .box-teaser { grid-template-columns: 1fr; } }
.box-teaser__text { padding: 2rem clamp(1.2rem, 4vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; }
.box-teaser__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }

/* An asymmetric photo mosaic, one large frame plus three smaller ones. */
.photo-mosaic {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 170px);
    gap: .8rem; border-radius: var(--radius-lg); overflow: hidden;
}
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.photo-mosaic img:hover { transform: scale(1.04); }
.mosaic-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.mosaic-b { grid-column: 3 / 5; grid-row: 1 / 2; }
.mosaic-c { grid-column: 3 / 4; grid-row: 2 / 3; }
.mosaic-d { grid-column: 4 / 5; grid-row: 2 / 3; }
@media (max-width: 780px) {
    .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 130px); }
    .mosaic-a { grid-column: 1 / 3; grid-row: 1 / 2; }
    .mosaic-b { grid-column: 1 / 2; grid-row: 2 / 3; }
    .mosaic-c { grid-column: 2 / 3; grid-row: 2 / 3; }
    .mosaic-d { grid-column: 1 / 3; grid-row: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) { .photo-mosaic img:hover { transform: none; } }

.newsletter-card {
    position: relative; overflow: hidden; max-width: 640px; margin: 0 auto;
    padding: 2.2rem clamp(1.2rem, 5vw, 2.6rem); text-align: center;
}
.newsletter-form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.1rem; }
.newsletter-form input[type="email"] { max-width: 280px; width: auto; flex: 1 1 240px; }

/* ========================================================= RECIPES ==== */
.featured-recipe {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; text-decoration: none; color: inherit;
    background: var(--paper-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
@media (max-width: 780px) { .featured-recipe { grid-template-columns: 1fr; } }
.featured-recipe__img { aspect-ratio: 4/3; overflow: hidden; }
.featured-recipe__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.featured-recipe:hover .featured-recipe__img img { transform: scale(1.05); }
.featured-recipe__body { padding: clamp(1.4rem, 4vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .featured-recipe:hover .featured-recipe__img img { transform: none; } }

.recipe-meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; color: var(--ink-2); font-size: .92rem; margin-bottom: 1rem; }
.recipe-meta span { display: inline-flex; align-items: center; gap: .35em; }

.recipe-layout { display: grid; grid-template-columns: 340px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .recipe-layout { grid-template-columns: 1fr; } }

.ingredient-checklist { list-style: none; padding: 0; margin: 0; position: relative; }
.checklist-item { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; cursor: pointer; font-weight: 400; }
.checklist-item input { width: auto; margin-top: .2rem; accent-color: var(--orange-dark); }
.checklist-item input:checked + span { text-decoration: line-through; opacity: .5; }

.steps-list { list-style: none; counter-reset: step; padding: 0; margin: 0; max-width: 640px; }
.steps-list li {
    counter-increment: step; position: relative; padding-left: 3.4rem; margin-bottom: 1.5rem;
    min-height: 2.5rem; display: flex; align-items: center;
}
.steps-list li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--orange-dark); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; flex-shrink: 0;
}

.pdf-promo-card {
    display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1.2rem 1.4rem;
    background: var(--cream); border-radius: var(--radius-lg); text-decoration: none; color: var(--ink);
    max-width: 640px; transition: transform .2s ease;
}
.pdf-promo-card:hover { transform: translateY(-2px); }
.pdf-promo-card .icon--lg { color: var(--orange-darker); flex-shrink: 0; }

/* Print: the recipe itself, nothing else. */
@media print {
    .demo-ribbon, .site-header, .site-footer, .page-header .wave-divider,
    .quick-add, .sticky-panel form, .pdf-promo-card, .skip-link { display: none !important; }
    .page-header { color: var(--ink); min-height: auto; padding-block: 1rem; }
    .page-header::before, .page-header__bg { display: none; }
    .page-header h1, .breadcrumb--onphoto, .breadcrumb--onphoto a { color: var(--ink); }
    body { background: #fff; }
}

/* ==================================================== HOOAJAKAST ====== */
.box-detail {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2);
}
@media (max-width: 780px) { .box-detail { grid-template-columns: 1fr; } }
.box-detail__media { aspect-ratio: 16/9; }
@media (min-width: 780px) { .box-detail__media { aspect-ratio: auto; height: 100%; } }
.box-detail__img { width: 100%; height: 100%; object-fit: cover; }
.box-detail__body { padding: clamp(1.4rem, 4vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }

.contents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; margin-top: .8rem; }
.contents-item {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center;
    padding: .8rem .5rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
    text-decoration: none; color: var(--ink); font-size: .8rem; transition: transform .2s ease, box-shadow .2s ease;
}
.contents-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contents-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.contents-item--plain { color: var(--ink-2); }
.contents-item--plain .icon { color: var(--orange-dark); width: 24px; height: 24px; }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; }
@media (max-width: 700px) { .timeline { grid-template-columns: 1fr; } }
.timeline__step { text-align: center; position: relative; }
.timeline__dot {
    width: 52px; height: 52px; border-radius: 50%; background: var(--orange-dark); color: #fff;
    display: flex; align-items: center; justify-content: center; margin: 0 auto .7rem;
}
@media (min-width: 700px) {
    .timeline__step:not(:last-child)::after {
        content: ""; position: absolute; top: 26px; left: calc(50% + 40px); width: calc(100% - 56px);
        height: 2px; background: var(--rule);
    }
}

/* Advent calendar: a real <button aria-expanded> per door, CSS 3D flip.
   .advent-door__inner is the one thing that rotates; front/back faces
   have backface-visibility:hidden and the back is PRE-rotated 180deg, so
   at 0deg the front shows and at 180deg the back shows -- the standard
   flip-card technique, not two independently-animated faces. */
.advent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
@media (max-width: 640px) { .advent-grid { grid-template-columns: repeat(4, 1fr); } }
.advent-door__trigger {
    position: relative; aspect-ratio: 1; border: 0; padding: 0; background: none; cursor: pointer;
    perspective: 800px; border-radius: 10px;
}
.advent-door__inner {
    position: absolute; inset: 0; transition: transform .6s; transform-style: preserve-3d;
}
.advent-door__trigger[aria-expanded="true"] .advent-door__inner { transform: rotateY(180deg); }
.advent-door__face {
    position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; overflow: hidden;
}
.advent-door__face--front {
    background: var(--orange-dark); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
}
.advent-door__face--back {
    background: #fff; border: 2px solid var(--orange); transform: rotateY(180deg);
    font-size: .68rem; text-align: center; padding: .3rem;
}
.advent-door__face--back img { width: 60%; height: 40%; object-fit: cover; border-radius: 6px; }
.advent-door__tip { font-size: .65rem; line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .advent-door__inner { transition: none; } }

.faq-accordion details {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 1rem 1.2rem; margin-bottom: .8rem;
}
.faq-accordion summary { font-weight: 700; cursor: pointer; }
.faq-accordion summary::marker { color: var(--orange-dark); }
.faq-accordion details p { margin: .7rem 0 0; color: var(--ink-2); }

/* ================================================ CONTACT / B2B ======= */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card {
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: 1.4rem; text-align: center; text-decoration: none; color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-card__icon {
    width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--orange-dark);
    display: flex; align-items: center; justify-content: center; margin: 0 auto .6rem;
}

.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-top: 1.5rem; }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 780px) { .map-embed iframe { height: 280px; } }

.benefit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.5rem 0 2rem; }
@media (max-width: 780px) { .benefit-cards { grid-template-columns: 1fr; } }
.benefit-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.4rem; }
.benefit-card .icon { color: var(--orange-dark); width: 28px; height: 28px; margin-bottom: .6rem; }

/* table-layout:auto tables won't shrink cells below content width, so at
   320px "Küsi personaalset pakkumist" pushed the whole page sideways --
   same root cause as the admin tables and cart table fixed today, same
   remedy: a dedicated scroll boundary around the one table that needs it,
   since there's no shared page-level wrapper to reuse here. */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.table-scroll .wholesale-table { margin: 0; box-shadow: none; }
.wholesale-table { width: 100%; border-collapse: collapse; background: var(--paper-2); border-radius: var(--radius-lg); overflow: hidden; }
.wholesale-table th, .wholesale-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--rule); }
.wholesale-table th { background: var(--cream); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; color: var(--ink-2); }
.wholesale-table tr:last-child td { border-bottom: 0; }

.coming-soon-card {
    position: relative; overflow: hidden; max-width: 640px; margin: 0 auto; text-align: center;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3rem) 1.6rem; box-shadow: var(--shadow);
}
.coming-soon-card .icon--lg { color: var(--orange-dark); margin: 0 auto 1rem; }
.coming-soon-card .badge { margin-bottom: .8rem; }

/* ============================================= CART / CHECKOUT ======== */
.step-indicator { display: flex; list-style: none; padding: 0; margin: 0 0 2rem; }
.step-indicator__step { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .85rem; font-weight: 700; }
.step-indicator__step:not(:last-child) { flex: 1; }
.step-indicator__step:not(:last-child)::after { content: ""; display: inline-block; flex: 1; height: 2px; background: var(--rule); margin: 0 .8rem; min-width: 24px; }
.step-indicator__num {
    width: 28px; height: 28px; border-radius: 50%; background: var(--rule); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0;
}
.step-indicator__step.is-current { color: var(--ink); }
.step-indicator__step.is-current .step-indicator__num { background: var(--orange-dark); }
.step-indicator__step.is-done .step-indicator__num { background: var(--orange); color: var(--orange-ink); }

/* Below 390px the full 3-label row overflows (386px min-width measured against
   a 320-389px viewport). Non-current labels go visually-hidden -- still in the
   accessibility tree via position:absolute, never display:none -- so the
   current step's name stays readable and "how many steps" still reads off the
   circles/connectors. See riina-epood-mobile-overflow-2026-09-16. */
@media (max-width: 389px) {
    .step-indicator__step:not(:last-child)::after { min-width: 12px; margin: 0 .3rem; }
    .step-indicator__step:not(.is-current) span:not(.step-indicator__num) {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

.delivery-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .delivery-cards { grid-template-columns: 1fr; } }
.delivery-card {
    display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center;
    border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 1.1rem .8rem; cursor: pointer;
    position: relative;
}
.delivery-card input { position: absolute; top: .6rem; right: .6rem; width: auto; margin: 0; }
.delivery-card:has(input:checked) { border-color: var(--orange); background: var(--cream); }
.delivery-card .icon--lg { color: var(--orange-dark); }
.delivery-card__label { font-weight: 700; font-size: .92rem; }
.delivery-card__price { color: var(--ink-2); font-size: .85rem; }

.confirmation-banner {
    display: flex; align-items: center; gap: 1rem; background: var(--ok-bg); color: var(--ok);
    border: 1px solid var(--ok); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
    animation: confirmation-pop .5s ease;
}
.confirmation-banner__icon {
    width: 52px; height: 52px; border-radius: 50%; background: var(--paper-2); color: var(--orange-dark);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@keyframes confirmation-pop {
    0% { opacity: 0; transform: scale(.9) translateY(6px); }
    100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .confirmation-banner { animation: none; } }

/* ---------------------------------------------------------- lightbox --- */
/* Trigger is a real <a href="full-size photo">; app.js intercepts the click
   when JS is available and opens .lightbox-overlay instead. With no JS the
   link just navigates to the image -- see riina-epood-lightbox-2026-09-16. */
a.lightbox-trigger { display: block; width: 100%; height: 100%; cursor: zoom-in; }

.lightbox-overlay {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 16, 12, .92); padding: clamp(1rem, 4vw, 3rem);
    animation: lightbox-fade-in .2s ease;
}
.lightbox-overlay__img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: lightbox-scale-in .2s ease;
}
.lightbox-overlay__close {
    position: absolute; top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem);
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-overlay__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox-overlay__close svg { width: 22px; height: 22px; }

/* Scroll lock: the usual position:fixed trick, with the offset restored by
   app.js on close (window.scrollTo), since fixing the body snaps it to 0. */
body.lightbox-locked { position: fixed; left: 0; right: 0; overflow: hidden; }

@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .lightbox-overlay, .lightbox-overlay__img { animation: none; }
}

/* ================================================ ROUND 4 (2026-09-21) ==
   After Riina's call. Two kinds of rule here: classes the rebuilt pages
   always used but the stylesheet never carried (product-detail,
   feature-list, cart-foot, checkout-form -- the product page rendered as
   one stacked column with a full-width photo), and the new shelf
   structure: category tiles, grouped "Kõik tooted", "Tulekul" shelves and
   the cold-season shipping note. =========================================== */

/* The sticky filter bar used to stick at .7rem -- straight under the
   sticky site header (z-index 50 over its 10), so it vanished on scroll. */
.filter-bar--sticky { top: calc(44px + 1.4rem + .7rem); }

/* Slogan beside the logo: "käsitsi valmistatud maitsed" is the line Riina
   named as the heart of the brand. Hidden where the header gets tight. */
.brand__tagline {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: .95rem; color: var(--orange-dark); line-height: 1.15;
    padding-left: .7rem; border-left: 2px solid var(--cream); white-space: nowrap;
}
@media (max-width: 1000px) { .brand__tagline { display: none; } }

/* ---------------------------------------------------- product page --- */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; }
.product-detail > * { min-width: 0; }
@media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; gap: 1.5rem; } }
.product-detail__media {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--cream);
}
.product-detail__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-detail__media:hover img { transform: scale(1.04); }
@media (min-width: 781px) { .product-detail__media { position: sticky; top: 5.5rem; } }
@media (prefers-reduced-motion: reduce) { .product-detail__media:hover img { transform: none; } }
.product-detail__info h1 { font-size: clamp(2rem, 4.5vw, 3rem); }

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.feature-list li { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .92rem; }
.feature-list .icon { color: var(--orange-dark); }

/* ------------------------------------------------------ cart/checkout -- */
.cart-foot { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.cart-foot .cart-summary { width: min(100%, 380px); display: grid; gap: .6rem; }
.checkout-form { min-width: 0; }

/* Added-to-cart feedback, set for 1.6 s by cart.js. */
.btn.is-added, .btn.is-added:hover { background: var(--ok); color: #fff; }
.quick-add__btn.is-added { background: var(--ok); }

/* --------------------------------------------------- cold shipping --- */
.cold-note {
    display: flex; align-items: flex-start; gap: .6rem;
    background: #EAF2F8; color: #1F4E6E; border: 1px solid #B9D3E6;
    border-radius: var(--radius); padding: .75rem 1rem; font-size: .9rem; margin: 1rem 0;
}
.cold-note .icon { margin-top: .15em; }
.coming-soon-card .cold-note { text-align: left; }
.cold-note--small { font-size: .84rem; padding: .6rem .8rem; margin-top: -.3rem; }

/* ------------------------------------------------------------ shelves -- */
.chip--soon { border-style: dashed; color: var(--ink-2); }
.chip--soon .chip__count { font-style: italic; }

.shelf { padding-top: 1.5rem; scroll-margin-top: 5.5rem; }
.shelf + .shelf { margin-top: 1.5rem; border-top: 1px dashed var(--rule); padding-top: 2.2rem; }
.shelf__head { margin-bottom: 1.1rem; }
.shelf__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .35rem; }
.shelf__head p { max-width: 60ch; }

.shelf-soon {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    border: 1.5px dashed var(--rule); border-radius: var(--radius-lg);
    padding: 1.1rem 1.3rem; color: var(--ink-2); background: var(--paper-2);
}
.shelf-soon__cold { display: inline-flex; align-items: center; gap: .4em; color: #1F4E6E; font-size: .88rem; }
.empty-state--inline { padding: 1.2rem; text-align: left; }

/* Home: the six shelves as photo tiles. A shelf with no jars yet gets the
   gingham corner and an icon instead of a photo, plus the Tulekul badge. */
/* Seven shelves never fill a grid evenly, so this is a centred flex wrap:
   4 + 3 on desktop, the short last row sitting in the middle. */
.shelf-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; --tiles: 4; }
.shelf-tiles > .shelf-tile { flex: 0 1 calc((100% - (var(--tiles) - 1) * 1rem) / var(--tiles)); min-width: 0; }
@media (max-width: 1000px) { .shelf-tiles { --tiles: 3; } }
@media (max-width: 700px) { .shelf-tiles { --tiles: 2; } }
@media (max-width: 460px) { .shelf-tiles { --tiles: 1; } }
.shelf-tile {
    display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.shelf-tile:hover, .shelf-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--ink); }
.shelf-tile__img {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4/3; overflow: hidden; background: var(--cream);
}
.shelf-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shelf-tile:hover .shelf-tile__img img { transform: scale(1.06); }
.shelf-tile__icon { position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; color: var(--orange-dark); }
.shelf-tile__body { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.1rem; }
.shelf-tile__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.shelf-tile__meta { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.shelf-tile__cold { color: #1F4E6E; display: inline-flex; }
.shelf-tile--soon .shelf-tile__name { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
    .shelf-tile, .shelf-tile__img img { transition: none; }
    .shelf-tile:hover, .shelf-tile:focus-visible { transform: none; }
    .shelf-tile:hover .shelf-tile__img img { transform: none; }
}

/* Seven category chips wrap to five rows on a phone. Below 600px they
   become one swipeable row instead -- the strip scrolls, the page does
   not. */
@media (max-width: 600px) {
    .chip-row[aria-label="Kategooriad"] {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1); padding: .2rem var(--gutter) .5rem;
        scroll-padding-inline: var(--gutter);
    }
    .chip-row[aria-label="Kategooriad"]::-webkit-scrollbar { display: none; }
    .chip-row[aria-label="Kategooriad"] .chip { white-space: nowrap; flex-shrink: 0; }
}

/* New jars from the January 2026 studio shoot carry no price yet. */
.product-card__price--tbd { font-size: .9rem; font-weight: 700; color: var(--ink-2); font-style: italic; }
.product-price--tbd { font-size: 1.3rem; color: var(--ink-2); font-style: italic; }

/* ======================================= TOOTEÜLEVAADE (ulevaade.php) ===
   A working page for Riina, not part of the shop: every product with its
   photo and three choices, so she can say what she has, what is sold out
   and what she no longer makes. Big tap targets -- she may well do this on
   a phone. Checked choices colour themselves with :has(); where :has() is
   missing, the radio dot still shows the choice. */
.review-intro { max-width: 72ch; }
.review-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; color: var(--ink-2); }
.photo-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2em .6em; border-radius: 999px; letter-spacing: .02em; }
.photo-badge--new { background: var(--ok-bg); color: var(--ok); }
.photo-badge--old { background: #FBF0D9; color: #8A6412; }

.review-bar {
    position: sticky; top: calc(44px + 1.4rem); z-index: 20;
    display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: .6rem .9rem; margin: 1.2rem 0 1.5rem; box-shadow: var(--shadow);
}
.review-bar__filter { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; margin: 0; }
.review-bar__links { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.review-new { scroll-margin-top: 8rem; }
.review-bar__filter input { width: auto; margin: 0; }

.review-group { margin-top: 2rem; }
.review-group h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); display: flex; align-items: baseline; gap: .5rem; }
.review-group__count { font-family: var(--font); font-size: .9rem; font-weight: 600; color: var(--ink-3); }

.review-item {
    display: grid; grid-template-columns: 140px 1fr; column-gap: 1rem; row-gap: .5rem;
    align-items: start; min-width: 0;
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: .8rem; margin: 0 0 .8rem;
}
/* Photo on the left for the whole card; name, choices and fields stacked
   beside it. On a phone the choices and fields drop to full width below
   (see the 700px rule), so the three buttons fit on one line. */
.review-item__photo { grid-row: 1 / span 3; }
.review-item__head, .review-choices, .review-extra { grid-column: 2; min-width: 0; }
.review-item.is-done { border-color: #CFE3D2; }
.review-item__photo { position: relative; }
.review-item__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); background: var(--cream); }
.review-item__photo .photo-badge { position: absolute; left: .4rem; bottom: .4rem; }
.review-item__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 .15rem; }
.review-item__meta { font-size: .85rem; color: var(--ink-2); margin: 0; }

.review-choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.review-choice {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer;
    font-weight: 700; font-size: .92rem; padding: .5rem .85rem;
    border: 1.5px solid var(--rule); border-radius: 999px; background: #fff;
}
.review-choice input { width: auto; margin: 0; accent-color: var(--orange-dark); }
.review-choice--yes:has(input:checked) { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.review-choice--out:has(input:checked) { background: #FBF0D9; border-color: var(--gold); color: #8A6412; }
.review-choice--gone:has(input:checked) { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.review-extra { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; }
.review-extra label, .review-new__row label { margin: 0; font-size: .78rem; }
.review-extra span, .review-new__row span { display: block; margin-bottom: .15rem; color: var(--ink-2); }
.review-extra input, .review-new__row input, .review-new__row select { padding: .45rem .6rem; font-size: .92rem; }
.review-form--only-open .review-item.is-done { display: none; }

.review-new__row {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr 2fr; gap: .5rem; margin-bottom: .6rem;
    padding: .7rem; border: 1.5px dashed var(--rule); border-radius: var(--radius); background: var(--paper-2);
}
@media (max-width: 700px) {
    .review-item { grid-template-columns: 84px 1fr; column-gap: .7rem; }
    .review-item__photo { grid-row: 1; }
    .review-choices, .review-extra { grid-column: 1 / -1; }
    .review-choice { padding: .5rem .7rem; font-size: .88rem; }
    .review-item__photo .photo-badge { position: static; margin-top: .3rem; }
    .photo-badge__year { display: none; }
    .review-extra { grid-template-columns: 1fr 2fr; }
    .review-new__row { grid-template-columns: 1fr 1fr; }
    .review-new__row label:first-child, .review-new__note { grid-column: 1 / -1; }
}
.review-result textarea { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .85rem; }
/* On paper (or with ?prindi=1 on screen) the same page becomes a checklist
   to carry round the cellar: two columns of small cards, empty boxes instead
   of radio buttons, a written line for price and note, and blank lines for
   new jars. The form controls themselves are hidden -- nobody types on
   paper. */
.review-item__writeline, .review-print-lines, .review-print-head { display: none; }
@media print {
    .review-bar, [data-add-new-row], [data-review-reset], #saada button,
    .review-intro, .review-extra, .review-new__row, #saada .field { display: none !important; }
    .review--print-on, .review-item__writeline, .review-print-lines, .review-print-head { display: revert; }
    @page { size: A4 portrait; margin: 12mm; }
    body { background: #fff; font-size: 10pt; }
    .review h1 { font-size: 20pt; margin-bottom: .2rem; }
    .review-group { break-inside: auto; margin-top: .8rem; }
    .review-group h2 { font-size: 13pt; margin: 0 0 .3rem; break-after: avoid; }
    .review-list { columns: 2; column-gap: 8mm; }
    .review-item {
        display: block; break-inside: avoid; border: 0; border-bottom: .3pt solid #bbb;
        border-radius: 0; padding: 1.5mm 0; margin: 0; box-shadow: none;
    }
    .review-item__photo { float: left; width: 16mm; margin: 0 3mm 1mm 0; }
    .review-item__photo img { aspect-ratio: 4/3; }
    .review-item__photo .photo-badge { position: static; font-size: 6pt; padding: 0 .3em; }
    .review-item__name { font-size: 10pt; margin: 0; }
    .review-item__meta { font-size: 7.5pt; margin: 0; }
    .review-choices { gap: 2mm; margin-top: .5mm; }
    .review-choice { border: 0; padding: 0; font-size: 8pt; font-weight: 400; background: none; }
    .review-choice input { appearance: none; -webkit-appearance: none; width: 3.5mm; height: 3.5mm; border: .4pt solid #333; border-radius: .5mm; }
    .review-item__writeline { font-size: 7.5pt; color: #333; margin: .5mm 0 0; clear: both; }
    .review-print-head { font-size: 9pt; margin: 0 0 2mm; }
    .review-print-lines { font-size: 9pt; line-height: 2.2; margin: 0; padding-left: 5mm; }
}
/* The same, on screen, for a look before printing. */
.review--print .review-bar, .review--print [data-add-new-row], .review--print [data-review-reset],
.review--print #saada button, .review--print .review-intro, .review--print .review-extra,
.review--print .review-new__row, .review--print #saada .field { display: none; }
.review--print .review-item__writeline, .review--print .review-print-lines,
.review--print .review-print-head { display: revert; }
.review--print .review-list { columns: 2; column-gap: 2rem; }
.review--print .review-item { display: block; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .4rem 0; margin: 0; box-shadow: none; break-inside: avoid; }
.review--print .review-item__photo { float: left; width: 64px; margin: 0 .6rem .2rem 0; }
.review--print .review-item__photo .photo-badge { position: static; display: block; margin-top: .2rem; font-size: .62rem; text-align: center; }
.review--print .review-choice { border: 0; padding: 0; font-weight: 400; background: none; font-size: .85rem; }
.review--print .review-item__writeline { clear: both; font-size: .8rem; color: var(--ink-2); margin: .2rem 0 0; }

/* Riina's own line about a jar -- what to eat it with, in her words. */
.product-soovitus { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-2); margin: 0 0 .6rem; }
.product-card__soovitus { font-size: .82rem; color: var(--ink-2); font-style: italic; }

/* A jar that comes in strengths -- the chilli jam's three heat levels. */
.valik { border: 0; padding: 0; margin: 1rem 0 0; }
.valik legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: .4rem; }
.valik__option { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .4rem .4rem 0; padding: .5rem .9rem; font-weight: 700; font-size: .92rem; border: 1.5px solid var(--rule); border-radius: 999px; background: #fff; cursor: pointer; }
.valik__option input { width: auto; margin: 0; accent-color: var(--orange-dark); }
.valik__option:has(input:checked) { border-color: var(--orange-dark); background: var(--cream); color: var(--orange-darker); }

/* ===================================================================
   CMS layer
   Everything above this line is the shop's own design, carried over
   unchanged. Below are the classes the CMS contract asks for, plus the
   ones the blocks in this template introduce.
   =================================================================== */

/* --- shared utilities the CMS expects ------------------------------ */
.cms-container { max-width: 1180px; margin: 0 auto; padding: 0 1.4rem; }

.cms-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .78rem 1.5rem; border-radius: 999px;
    font-weight: 700; font-size: .95rem; line-height: 1;
    text-decoration: none; border: 2px solid transparent;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.cms-btn--primary { background: var(--orange-dark); color: #fff; }
.cms-btn--primary:hover { background: var(--orange-darker); color: #fff; }
.cms-btn--outline { background: transparent; border-color: var(--rule); color: var(--ink); }
.cms-btn--outline:hover { background: var(--cream); color: var(--ink); }
.cms-btn--sm { padding: .5rem 1.1rem; font-size: .85rem; }
.cms-btn[disabled], .cms-btn[aria-disabled="true"] {
    background: var(--rule); color: var(--ink-3); border-color: var(--rule);
    cursor: not-allowed; pointer-events: none;
}

.hr-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.hr-skip:focus { left: 0; }

.hr-icon { width: 24px; height: 24px; stroke-width: 1.8; color: var(--orange-dark); }
.hr-icon-img { width: 24px; height: 24px; object-fit: contain; }
.hr-icon-emoji { font-size: 22px; line-height: 1; }

/* --- section scaffolding shared by the blocks ---------------------- */
.hr-section { padding: 4.5rem 0; }
.hr-section--tight { padding: 3rem 0; }
.hr-section__head { margin-bottom: 2.2rem; }
.hr-section__head--center { text-align: center; }
.hr-eyebrow {
    margin: 0 0 .35rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--orange-dark);
}
.hr-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; }
.hr-lead { margin: .7rem 0 0; max-width: 56ch; color: var(--ink-2); line-height: 1.65; }
.hr-section__head--center .hr-lead { margin-left: auto; margin-right: auto; }
.hr-more { font-weight: 700; color: var(--orange-dark); text-decoration: none; border-bottom: 2px solid currentColor; }
.hr-more:hover { color: var(--orange-darker); }
.hr-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hr-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }

/* --- hero ---------------------------------------------------------- */
.hr-hero { position: relative; color: #fff; isolation: isolate; }
.hr-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hr-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(31,30,28,.78) 0%, rgba(31,30,28,.5) 55%, rgba(31,30,28,.2) 100%);
}
.hr-hero__inner { padding: 6rem 0 5rem; max-width: 42rem; }
.hr-hero__eyebrow { color: var(--cream); }
.hr-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.08; }
.hr-hero__sub { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.92); }
.hr-hero .cms-btn--outline { border-color: rgba(255,255,255,.75); color: #fff; }
.hr-hero .cms-btn--outline:hover { background: rgba(255,255,255,.14); color: #fff; }

/* --- shelves (category tiles) -------------------------------------- */
.hr-shelves { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hr-shelf {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--radius-lg); background: var(--cream);
    text-decoration: none; color: #fff; min-height: 190px;
}
.hr-shelf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hr-shelf__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,30,28,.12) 35%, rgba(31,30,28,.78) 100%); }
.hr-shelf__body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 1.1rem 1.2rem; }
.hr-shelf__name { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; }
.hr-shelf__note { margin-top: .2rem; font-size: .85rem; color: rgba(255,255,255,.85); }
.hr-shelf:hover img { transform: scale(1.04); }

/* --- product grid (blocks and storefront share this) ---------------- */
.hr-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hr-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--paper-2); border: 1px solid var(--rule);
    border-radius: var(--radius-lg); transition: border-color .2s, box-shadow .2s;
}
.hr-card:hover { border-color: var(--orange); box-shadow: 0 8px 26px rgba(31,30,28,.09); }
.hr-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; }
.hr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-card__tags { position: absolute; top: .55rem; left: .55rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.hr-tag {
    display: inline-block; padding: .18rem .55rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--orange); color: var(--orange-ink);
}
.hr-tag--out { background: var(--danger-bg); color: var(--danger); }
.hr-tag--sale { background: var(--green); color: #fff; }
.hr-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1.1rem; flex: 1; }
.hr-card__cat { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hr-card__name { margin: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.hr-card__name a { color: inherit; text-decoration: none; }
.hr-card__name a:hover { color: var(--orange-dark); }
.hr-card__note { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.hr-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .7rem; }
.hr-price { font-weight: 800; color: var(--orange-dark); font-size: 1.05rem; }
.hr-price--tbd { font-size: .9rem; font-weight: 700; color: var(--ink-2); font-style: italic; }
.hr-price__was { margin-left: .4rem; font-size: .85rem; font-weight: 600; color: var(--ink-3); text-decoration: line-through; }
.hr-empty { padding: 3rem 1.4rem; text-align: center; color: var(--ink-2); }

/* --- promise strip -------------------------------------------------- */
.hr-promise { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hr-promise__item { display: flex; gap: .8rem; align-items: flex-start; }
.hr-promise__text h3 { margin: 0 0 .25rem; font-size: 1rem; }
.hr-promise__text p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }

/* --- photo band ----------------------------------------------------- */
.hr-band { position: relative; min-height: 320px; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; }
.hr-band__bg { position: absolute; inset: 0; }
.hr-band__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-band::after { content: ""; position: absolute; inset: 0; background: rgba(31,30,28,.5); }
.hr-band__body { position: relative; z-index: 1; padding: 3.5rem 1.4rem; max-width: 44rem; }
.hr-band__body .hr-title { color: #fff; }
.hr-band__body .hr-lead { color: rgba(255,255,255,.9); }

/* --- story (image beside text) -------------------------------------- */
.hr-story { display: grid; gap: 2.2rem; align-items: center; grid-template-columns: 1fr; }
.hr-story__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.hr-story__body p { color: var(--ink-2); line-height: 1.7; }

/* --- testimonials ---------------------------------------------------- */
.hr-quotes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hr-quote { padding: 1.4rem 1.5rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.hr-quote__text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }
.hr-quote__by { margin: .9rem 0 0; font-size: .85rem; font-weight: 700; color: var(--ink-3); }

/* --- forms (newsletter, contact, checkout) --------------------------- */
.hr-form { display: grid; gap: .9rem; position: relative; }
.hr-form__row { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.hr-field { display: grid; gap: .3rem; }
.hr-field > span { font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.hr-field input, .hr-field textarea, .hr-field select {
    width: 100%; padding: .7rem .9rem; font: inherit; color: var(--ink);
    background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: var(--radius);
}
.hr-field input:focus, .hr-field textarea:focus, .hr-field select:focus {
    outline: 2px solid var(--orange-dark); outline-offset: 1px; border-color: var(--orange-dark);
}
.hr-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hr-note { margin: 0; font-size: .82rem; color: var(--ink-3); line-height: 1.5; }
.hr-alert { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius); font-size: .92rem; }
.hr-alert--ok { background: var(--ok-bg); color: var(--ok); }
.hr-alert--err { background: var(--danger-bg); color: var(--danger); }

/* --- navbar and footer (global blocks) -------------------------------- */
.hr-nav { position: sticky; top: 0; z-index: 40; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.hr-nav__bar { display: flex; align-items: center; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.hr-nav__brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; color: var(--ink); }
.hr-nav__brand img { height: 42px; width: auto; display: block; }
.hr-nav__brand-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.hr-nav__tagline { display: none; font-size: .85rem; color: var(--ink-2); }
.hr-nav__links { display: none; gap: 1.2rem; }
.hr-nav__links a { font-weight: 600; color: var(--ink); text-decoration: none; }
.hr-nav__links a:hover { color: var(--orange-dark); }
.hr-nav__actions { display: flex; align-items: center; gap: .5rem; }
.hr-nav__cart { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 700; text-decoration: none; }
.hr-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: none; border: 1.5px solid var(--rule); border-radius: var(--radius); cursor: pointer; color: var(--ink); }
.hr-nav__panel { display: none; padding: .4rem 0 1rem; border-top: 1px solid var(--rule); }
/* An open panel is its own white sheet, so it restates its own text colour
   instead of inheriting whatever painted the bar. */
.hr-nav__panel.is-open { display: block; background: var(--paper-2); }
.hr-nav__panel.is-open a { display: block; padding: .7rem .2rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.hr-nav__panel.is-open a:hover { color: var(--orange-dark); }
.hr-lang { display: inline-flex; gap: .3rem; }
.hr-lang a { padding: .3rem .5rem; font-size: .8rem; font-weight: 700; color: var(--ink-2); text-decoration: none; text-transform: uppercase; }
.hr-lang a[aria-current="true"] { color: var(--orange-dark); }

.hr-foot { padding: 3rem 0 2rem; background: var(--ink); color: rgba(255,255,255,.82); }
.hr-foot a { color: rgba(255,255,255,.82); text-decoration: none; }
.hr-foot a:hover { color: #fff; text-decoration: underline; }
.hr-foot__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.hr-foot__title { margin: 0 0 .7rem; font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.hr-foot__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .92rem; }
.hr-foot__about { font-size: .92rem; line-height: 1.65; max-width: 34ch; }
.hr-foot__bar { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; }

/* --- demo ribbon ------------------------------------------------------ */
.hr-ribbon { padding: .5rem 1.4rem; background: var(--ink); color: var(--cream); font-size: .85rem; text-align: center; }
.hr-ribbon strong { color: #fff; }

/* --- cart badge -------------------------------------------------------- */
/* A pill, not a circle: 50% on a box wider than tall is an ellipse, and with
   a border the digits sit low in it. */
.hr-cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: 999px; background: var(--orange-dark); color: #fff;
    font-size: .74rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* --- storefront pages --------------------------------------------------- */
.hr-crumbs { padding: 1rem 0; font-size: .85rem; color: var(--ink-3); }
.hr-crumbs a { color: var(--ink-2); text-decoration: none; }
.hr-crumbs a:hover { color: var(--orange-dark); }
.hr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.hr-chip { padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper-2); color: var(--ink); font-size: .88rem; font-weight: 700; text-decoration: none; }
.hr-chip:hover { border-color: var(--orange); }
.hr-chip[aria-current="true"] { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.hr-pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.hr-pager a, .hr-pager span { min-width: 2.4rem; padding: .5rem .7rem; text-align: center; border-radius: var(--radius); border: 1.5px solid var(--rule); font-weight: 700; text-decoration: none; color: var(--ink); }
.hr-pager [aria-current="page"] { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }

.hr-product { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
.hr-gallery__main { background: var(--cream); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.hr-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.hr-gallery__thumb { width: 72px; height: 54px; padding: 0; border: 1.5px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--cream); cursor: pointer; }
.hr-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-gallery__thumb[aria-current="true"] { border-color: var(--orange-dark); }
.hr-product__cat { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); }
.hr-product__title { margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.12; }
.hr-product__short { margin: .8rem 0 0; font-size: 1.02rem; font-style: italic; color: var(--ink-2); }
.hr-product__price { margin: 1.2rem 0 .4rem; font-size: 1.6rem; font-weight: 800; color: var(--orange-dark); }
.hr-product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); }
.hr-variants { margin: 1.4rem 0 0; padding: 0; border: 0; }
.hr-variants legend { padding: 0; margin-bottom: .45rem; font-size: .9rem; font-weight: 700; }
.hr-variant {
    display: inline-flex; align-items: center; gap: .4rem; margin: 0 .4rem .4rem 0;
    padding: .5rem .9rem; font-weight: 700; font-size: .92rem;
    border: 1.5px solid var(--rule); border-radius: 999px; background: var(--paper-2);
    color: var(--ink); cursor: pointer;
}
.hr-variant[aria-pressed="true"] { border-color: var(--orange-dark); background: var(--cream); color: var(--orange-darker); }
.hr-variant[disabled] { color: var(--ink-3); background: var(--paper); cursor: not-allowed; text-decoration: line-through; }
.hr-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.4rem; }
.hr-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; }
.hr-qty button { width: 2.4rem; height: 2.6rem; border: 0; background: none; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--ink); }
.hr-qty input { width: 2.6rem; height: 2.6rem; border: 0; text-align: center; font: inherit; font-weight: 700; background: none; color: var(--ink); }
.hr-prose { margin-top: 2rem; line-height: 1.7; color: var(--ink-2); }
.hr-prose h2, .hr-prose h3 { color: var(--ink); }
.hr-specs { width: 100%; margin-top: 1.5rem; border-collapse: collapse; font-size: .92rem; }
.hr-specs th, .hr-specs td { padding: .55rem .2rem; text-align: left; border-bottom: 1px solid var(--rule); }
.hr-specs th { font-weight: 700; color: var(--ink-2); width: 40%; }

.hr-cart-table { width: 100%; border-collapse: collapse; }
.hr-cart-table th { padding: .6rem .5rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--rule); }
.hr-cart-table td { padding: .9rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.hr-cart-row__name { display: flex; align-items: center; gap: .8rem; }
.hr-cart-row__name img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius); background: var(--cream); }
.hr-cart-row__drop { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.hr-sum { display: grid; gap: .5rem; padding: 1.2rem 1.4rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.hr-sum__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.hr-sum__row--total { padding-top: .6rem; border-top: 1px solid var(--rule); font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.hr-checkout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
.hr-methods { display: grid; gap: .6rem; }
.hr-method { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.hr-method input { margin-top: .25rem; }
.hr-method__name { font-weight: 700; }
.hr-method__desc { display: block; margin-top: .2rem; font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.hr-method[data-selected="true"] { border-color: var(--orange-dark); background: var(--cream); }
.hr-paybtns { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 1.2rem; }
.hr-paybtn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 68px; padding: .8rem 1rem;
    border: 1.5px solid var(--rule); border-radius: var(--radius);
    background: var(--paper-2); color: var(--ink); font-weight: 700; text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}
.hr-paybtn:hover { border-color: var(--orange-dark); box-shadow: 0 4px 14px rgba(31,30,28,.08); }
.hr-paybtn img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; }
/* A logo names itself; printing the name beside it only squeezed both. */
.hr-paybtn span { font-weight: 700; }
.hr-paybtns__note { grid-column: 1 / -1; margin: 0; }
.hr-status { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--cream); color: var(--orange-darker); }
.hr-thanks { max-width: 34rem; margin: 0 auto; text-align: center; padding: 4rem 0; }
.hr-thanks__mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); margin-bottom: 1.2rem; }
.hr-toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
    z-index: 60; padding: .7rem 1.2rem; border-radius: 999px;
    background: var(--ink); color: #fff; font-size: .9rem; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
.hr-toast.is-on { opacity: 1; }

@media (min-width: 720px) {
    .hr-nav__tagline { display: inline; }
    .hr-foot__cols { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
    .hr-form__row--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .hr-nav__links { display: flex; }
    .hr-nav__toggle { display: none; }
    .hr-story { grid-template-columns: 1fr 1fr; }
    .hr-story--flip .hr-story__media { order: 2; }
    .hr-product { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
    .hr-checkout { grid-template-columns: 1.3fr .85fr; gap: 2.5rem; }
}

/* A product with no photograph still gets a real <img>, so it inherits the
   sizing already written for that slot at every breakpoint instead of
   collapsing and leaving a hole in the grid. */
.img-ph { object-fit: contain; background: var(--cream); }

/* Headings carry their own colour (h1-h4 { color: var(--ink) }), so every
   surface that inverts has to say so again — otherwise dark type lands on a
   dark photograph and reads at about 1:1. */
.hr-hero h1,
.hr-hero h2,
.hr-hero .hr-title,
.hr-band h1,
.hr-band h2,
.hr-band .hr-title,
.hr-foot h1,
.hr-foot h2,
.hr-foot h3,
.hr-foot .hr-foot__title,
.hr-shelf .hr-shelf__name { color: #fff; }

/* Parcel machine picker — a method that ships to a machine brings its whole
   list, so the list gets a filter above it rather than a 358-row dropdown. */
.hr-pickup { position: relative; display: grid; gap: .5rem; margin: -.2rem 0 .4rem; padding: .9rem 1rem 1rem; background: var(--paper); border: 1.5px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.hr-pickup[hidden] { display: none; }
.hr-pickup__search[hidden] { display: none; }
.hr-pickup__find { width: 100%; padding: .7rem .9rem; font: inherit; color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: var(--radius); }
.hr-pickup__find:focus { outline: 2px solid var(--orange-dark); outline-offset: 1px; border-color: var(--orange-dark); }

/* The results are a short list, not the whole country: eight rows at a time,
   narrowed by what you type. */
.hr-pickup__list { margin: .4rem 0 0; padding: .25rem; list-style: none; max-height: 19rem; overflow-y: auto; background: var(--paper-2); border: 1.5px solid var(--rule); border-radius: var(--radius); }
.hr-pickup__list[hidden] { display: none; }
.hr-pickup__row { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: var(--radius); cursor: pointer; }
.hr-pickup__row:hover { background: var(--cream); }
.hr-pickup__row.is-active { background: var(--orange-dark); }
.hr-pickup__row.is-active .hr-pickup__name,
.hr-pickup__row.is-active .hr-pickup__addr { color: #fff; }
.hr-pickup__name { font-weight: 700; font-size: .93rem; color: var(--ink); }
.hr-pickup__addr { font-size: .82rem; color: var(--ink-2); }
.hr-pickup__empty { padding: .6rem .7rem; font-size: .88rem; color: var(--ink-3); }

/* Once chosen, the search gets out of the way. */
.hr-pickup__chosen { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--paper-2); border: 1.5px solid var(--orange-dark); border-radius: var(--radius); }
.hr-pickup__chosen[hidden] { display: none; }
.hr-pickup__chosen-text { display: grid; gap: .1rem; flex: 1; }
.hr-pickup__chosen-text strong { font-size: .93rem; }
.hr-pickup__chosen-text span { font-size: .82rem; color: var(--ink-2); }
.hr-pickup__change { padding: .4rem .9rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--orange-dark); background: none; border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; }
.hr-pickup__change:hover { border-color: var(--orange-dark); background: var(--cream); }

/* The banks behind a gateway. Not clickable until the order exists.
   The logos arrive 176x62, so a 22px-tall row showed them at a third of
   their size and read as decoration rather than as "your bank is here".
   Even tiles, logo contained inside, no stretching. */
.hr-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; margin-top: .7rem; }
.hr-providers__label { grid-column: 1 / -1; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
/* Each logo is the choice itself, so it is a label around a radio rather
   than a picture beside one. */
.hr-provider {
    display: block; position: relative; cursor: pointer;
    background: #fff; border: 2px solid var(--rule); border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.hr-provider:hover { border-color: var(--orange); }
.hr-provider input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hr-provider img {
    display: block; width: 100%; height: 44px; object-fit: contain;
    padding: .4rem .55rem;
}
.hr-provider[data-selected="true"] {
    border-color: var(--orange-dark);
    box-shadow: 0 0 0 3px rgba(191, 70, 17, .14);
}
.hr-provider input:focus-visible ~ img,
.hr-provider input:focus-visible ~ .hr-providers__name { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.hr-providers__name {
    display: flex; align-items: center; justify-content: center;
    height: 44px; padding: .4rem .55rem; font-size: .85rem; font-weight: 700;
}

/* A long document in one readable column. */
.hr-doc { max-width: 46rem; }
.hr-doc__body { margin-top: 1.4rem; }
.hr-doc__body h2 { margin: 2rem 0 .6rem; font-size: 1.25rem; }
.hr-doc__body h3 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; }
.hr-doc__body ul, .hr-doc__body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.hr-doc__body li { margin-bottom: .35rem; }
.hr-doc__updated { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.hr-foot__legal { color: #fff; }

/* The tick box that has to be ticked before an order can be placed. */
.hr-consent { display: flex; align-items: flex-start; gap: .65rem; padding: .9rem 1rem; background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius); font-size: .92rem; line-height: 1.5; cursor: pointer; }
.hr-consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: none; accent-color: var(--orange-dark); }
.hr-consent a { color: var(--orange-dark); font-weight: 700; }
.hr-consent:has(input:focus-visible) { outline: 2px solid var(--orange-dark); outline-offset: 2px; }


/* ------------------------------------------------------------------
   Vioreta: plokiümbris, taustad, menüü ilma JS-ita, vormid, pood.
   ------------------------------------------------------------------ */
:root { --orange-dark: var(--accent, #BF4611); --orange-darker: color-mix(in srgb, var(--orange-dark) 80%, #000); }
body { font-synthesis: none; }
.blk { padding: 0; }
.blk.bg-alt { background: var(--cream); }
.blk.bg-dark { background: var(--ink); color: #fff; }
.blk.bg-dark .hr-title, .blk.bg-dark .hr-lead, .blk.bg-dark .hr-eyebrow { color: #fff; }
.blk.bg-accent { background: var(--orange-dark); color: #fff; }
.blk.bg-accent .hr-title, .blk.bg-accent .hr-lead, .blk.bg-accent .hr-eyebrow { color: #fff; }
.blk.space-compact .hr-section { padding-top: 2.2rem; padding-bottom: 2.2rem; }
.blk.space-airy .hr-section { padding-top: 6rem; padding-bottom: 6rem; }
.hr-section--paper { background: var(--paper); }
.hr-section--cream { background: var(--cream); }

/* Detail 3: pealkirja all lühike aktsentjoon */
.hr-section__head .hr-title::after, .hr-story__body .hr-title::after, .hr-doc .hr-title::after {
    content: ""; display: block; width: 56px; height: 3px; margin-top: .7rem; background: var(--orange);
}
.hr-section__head--center .hr-title::after { margin-left: auto; margin-right: auto; }
.hr-band .hr-title::after { display: none; }

/* Menüü: checkbox avab paneeli ka ilma JavaScriptita */
.hr-nav__check { position: absolute; opacity: 0; pointer-events: none; }
.hr-nav__check:checked ~ .cms-container .hr-nav__panel { display: block; background: var(--paper-2); }
.hr-nav__check:checked ~ .cms-container .hr-nav__panel a { display: block; padding: .7rem .2rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.hr-nav__check:focus-visible ~ .cms-container .hr-nav__toggle { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.hr-nav__links a[aria-current="page"] { color: var(--orange-dark); }
.hr-cart-count.is-zero { display: none; }
.hr-icon { fill: none; }

/* Vormid (Vioreta kontaktivorm) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.hr-field-err { display: block; color: var(--danger); font-size: .85rem; margin-top: .25rem; }
.hr-check { display: flex; gap: .6rem; align-items: flex-start; margin: .8rem 0; cursor: pointer; }
.hr-check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--orange-dark); flex: none; }

/* Detail 4: Google'i kaart kontaktilehel */
.hr-map { margin-top: 1.5rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--cream); }
.hr-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* Pood: variandid raadionuppudena, kogus, kassa */
.hr-variant { position: relative; }
.hr-variant input { position: absolute; opacity: 0; pointer-events: none; }
.hr-variant:has(input:checked) { border-color: var(--orange-dark); background: var(--cream); color: var(--orange-darker); }
.hr-variant:has(input:focus-visible) { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.hr-variant:has(input:disabled) { color: var(--ink-3); background: var(--paper); cursor: not-allowed; text-decoration: line-through; }
.hr-qty input[type="number"] { -moz-appearance: textfield; }
.hr-qty input::-webkit-outer-spin-button, .hr-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hr-method:has(input:checked) { border-color: var(--orange-dark); background: var(--cream); }
.hr-method__price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.hr-method__extra { margin: .2rem 0 .6rem 2rem; }
.hr-method:not(:has(input:checked)) + .hr-method__extra { display: none; }
.hr-cart-row__drop { padding: 0; }
.hr-terms { margin: 1rem 0 .4rem; }
.hr-terms summary { cursor: pointer; font-weight: 700; }
.hr-terms > div { margin-top: .5rem; font-size: .9rem; color: var(--ink-2); max-height: 240px; overflow: auto; }
.hr-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 1.4rem; }
.hr-search .hr-field { margin: 0; min-width: 12rem; }
.hr-specs td { white-space: pre-line; }
.hr-added { margin: 1rem 0 0; }
.velora-credit, .velora-credit a { color: inherit; opacity: .8; }

@media (max-width: 719px) {
    .hr-cart-table thead { display: none; }
    .hr-cart-table, .hr-cart-table tbody, .hr-cart-table tr, .hr-cart-table td { display: block; width: 100%; }
    .hr-cart-table tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
    .hr-cart-table td { border: 0; padding: .35rem 0; }
    .hr-map iframe { height: 260px; }
}
.hr-narrow { max-width: 34rem; margin: 0 auto; }
.hr-form--inline { align-items: end; }
.hr-form--gap { margin-top: 1.4rem; }
.hr-actions--center { justify-content: center; }
.hr-side-title { color: var(--ink); }
.hr-side-list { color: var(--ink-2); }
.hr-side-list a { color: var(--orange-dark); }
.hr-checkout__title { margin: 1.4rem 0 .4rem; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.hr-checkout__title:first-of-type { margin-top: 0; }
.hr-sum .cms-btn { margin-top: .6rem; }
[data-address][hidden] { display: none; }
.hr-foot__list li { display: flex; align-items: center; gap: .5rem; }
.hr-foot__list svg { flex: none; opacity: .85; }
.hr-nav__cart svg, .hr-nav__toggle svg { flex: none; }