/* ============================================================
   OroCafe – storefront theme
   Palette and typography follow the supplied coffee design:
   cream page, deep-brown display type, orange accents.
   ============================================================ */

/* ---------- Fonts (self-hosted, see wwwroot/fonts) ---------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/archivo-black-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/archivo-black-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Boldonse';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/boldonse-regular.woff2') format('woff2');
}

/* Brand-book headline fallback. Beni remains first in the stack for licensed installs. */
@font-face {
    font-family: 'Bayon';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bayon-regular.woff2') format('woff2');
}

/* Outfit Bold, for the About page's story statement. Only the bold weight is hosted, so it has
   its own family name: called 'Outfit' it would be picked up by --body and turn all body text bold. */
@font-face {
    font-family: 'Outfit Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/outfit-bold-latin.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
    /* Orocafe brand book, color palette p.20. */
    --brand-dark-green: #01382d;
    --brand-light-beige: #fff3e4;
    --brand-lime: #80bc00;
    --brand-bright-lime: #d0dd28;
    --brand-yellow: #ffb71b;
    --brand-orange: #f15d2a;
    --brand-dark-brown: #52110f;
    --brand-ochre: #ca8342;
    --brand-pale-yellow: #fdd756;

    /* Existing component tokens mapped to the approved palette. */
    --cream: var(--brand-light-beige);
    --cream-2: var(--brand-light-beige);
    --cream-3: var(--brand-pale-yellow);
    --brown: var(--brand-dark-green);
    --brown-2: var(--brand-dark-green);
    --brown-3: var(--brand-dark-brown);
    --orange: var(--brand-lime);
    --orange-2: var(--brand-lime);
    --ink: var(--brand-dark-green);
    --muted: var(--brand-dark-brown);
    --white: var(--brand-light-beige);
    --line: rgba(1, 56, 45, .16);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    /* Shared sizing for section headings ("Explore our coffee collection", "Discover our
       three original blends", "Exceptional coffee...", "Frequently Asked Questions", menu
       category headings) and the copy that sits under them, so every section reads at the
       same scale. */
    --section-h2-size: clamp(3.4rem, 5.2vw, 5.2rem);
    --section-h2-line-height: .95;
    --section-h2-size-mobile: clamp(2.75rem, 9.7vw, 3.49rem);
    --section-h2-line-height-mobile: 1;
    --section-subtext-size: 1.26rem;
    --section-subtext-line-height: 1.7;
    --section-head-gap: 6px;
    /* Gap between a section's heading+subtext block and whatever content follows it
       (product grid, FAQ list, CTA button...) — one shared value so every section's
       rhythm matches, instead of each picking its own margin. */
    --section-content-gap: clamp(22px, 3vw, 38px);

    /* Same scale as the plain h1/h2/h3/h5 tags below, for spots that need to match a
       heading level's size exactly without being that heading level themselves
       (the footer, the marquee bar, etc). One canonical size per level, used
       everywhere — admin and account dashboards included — so headings stay
       symmetric across the whole site instead of each page picking its own. */
    --h1-size: clamp(2.8rem, 5.4vw, 5.25rem);
    --h2-size: clamp(2.2rem, 4.3vw, 4rem);
    --h3-size: clamp(1.3rem, 2.1vw, 1.9rem);
    --h5-size: clamp(.98rem, 1.25vw, 1.18rem);
    /* The band's own h5 ("By sourcing directly...") is the reference size a few other
       spots are asked to match exactly — kept separate from --h5-size (the real h5 tag
       scale), which is smaller. */
    --band-h5-size: clamp(1.5rem, 2.45vw, 2.2rem);

    --shell: 1500px;
    --gutter: 28px;

    --display: 'Beni', 'Bayon', 'Boldonse', 'Arial Black', system-ui, sans-serif;
    --body: 'Outfit', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --shadow: 0 18px 40px rgba(1, 56, 45, .10);
    --shadow-lg: 0 26px 70px rgba(1, 56, 45, .18);
}

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

html {
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: clip;
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
}

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

[hidden] {
    display: none !important;
}

a {
    color: var(--brown);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--orange-2);
}

h1, h2, h3, h4, h5, h6, .as-h5 {
    font-family: var(--display);
    font-weight: 400;
    color: var(--brand-dark-green);
    line-height: 1.04;
    letter-spacing: -.015em;
    text-transform: uppercase;
    margin: 0 0 .5em;
}

p {
    margin: 0 0 1em;
    font-size: 1.03rem;
}

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

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

.section {
    padding: clamp(32px, 4.8vw, 61px) 0;
}

/* ---------- Scroll reveal (sitewide) ----------
   Generic entrance animation: fade + slide in when a [data-reveal] element scrolls into
   view. Direction defaults to "up"; add data-reveal="left"/"right" to slide in from a
   side (used for asymmetric content, e.g. the crafted section's shutter). Wrap a set of
   siblings (product/blend/blog cards) in [data-reveal-group] to stagger them one after
   another instead of firing all at once. The hidden state only applies once JS adds
   .reveal-ready, so content stays visible if JavaScript fails to load. */
[data-reveal].reveal-ready {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal="left"].reveal-ready { transform: translateX(-64px); }
[data-reveal="right"].reveal-ready { transform: translateX(64px); }

[data-reveal].reveal-ready.is-visible {
    opacity: 1;
    transform: none;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Eyebrow / headings ---------- */
.eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange-2);
    margin: 0 0 14px;
}

.section-head {
    display: block;
    margin-bottom: 40px;
}

.section-head > div {
    width: 100%;
}

.section-head h2 {
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
    width: 100%;
    max-width: none;
    margin: 0;
}

.section-head__two-line {
    font-family: var(--display);
    font-size: var(--section-h2-size) !important;
    line-height: var(--section-h2-line-height);
    letter-spacing: -.025em;
    max-width: none !important;
    text-align: center;
}

.section-head > p {
    display: none;
}

/* The product page's "Articles about {product name}" heading includes the full product title,
   which can run to 80+ characters — the shared heading size above is tuned for short titles like
   "You might also like" and wraps a long one into a wall of oversized text. Give this one its own,
   more modest size and let it use the full row instead of the 15-character cap. */
#product-articles .section-head {
    display: block;
}

#product-articles .section-head h2 {
    max-width: none;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1.3;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    padding: 15px 30px;
    font-family: var(--body);
    font-size: .94rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.btn--primary {
    background: var(--orange);
    color: var(--brand-dark-green);
    box-shadow: 0 10px 24px rgba(128, 188, 0, .24);
}

.btn--primary:hover {
    background: var(--brown-2);
    color: var(--cream);
    box-shadow: 0 14px 28px rgba(1, 56, 45, .24);
    transform: translateY(-2px);
}

.btn--primary .btn__flip-text {
    display: inline-block;
    transform-origin: center;
    backface-visibility: hidden;
}

.btn--primary:hover .btn__flip-text {
    animation: primary-text-flip .32s cubic-bezier(.2,.75,.25,1);
}

@keyframes primary-text-flip {
    0% { transform: rotateX(0); }
    50% { transform: rotateX(90deg); opacity: .25; }
    100% { transform: rotateX(360deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .btn--primary:hover {
        animation: none;
        transform: translateY(-2px);
    }
    .btn--primary:hover .btn__flip-text { animation: none; }
}

.btn--dark {
    background: var(--brown);
    color: var(--cream);
}

.btn--dark:hover {
    background: var(--brown-2);
    color: var(--cream);
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--brown);
    border: 2px solid var(--line);
}

.btn--ghost:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

/* The quieter partner to .btn--primary, for the alternative action sitting beside it. The padding
   is reduced by the width of the border so it lines up exactly with a primary button next to it,
   and it inherits .btn's radius so the pair reads as one set. */
.btn--secondary {
    background: transparent;
    color: var(--brand-dark-green);
    border: 2px solid var(--brand-dark-green);
    padding: 13px 28px;
}

.btn--secondary:hover {
    background: var(--brand-dark-green);
    color: var(--cream);
    transform: translateY(-2px);
}

/* A compact .btn, for a secondary action inside a notice rather than in a form's action row. */
.btn--sm {
    padding: 9px 18px;
    font-size: .8rem;
    letter-spacing: .08em;
}

.btn--sm.btn--secondary {
    padding: 7px 16px;
}

.btn--block {
    width: 100%;
    height: 55px;
}

/* ---------- Announcement bar ---------- */
.announce {
    background: var(--brown-2);
    color: var(--cream-2);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.announce__track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 44px;
    text-align: center;
}

.announce a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.announce--promo {
    background: var(--brown-2);
    color: var(--cream-2);
}

.announce--promo a {
    color: var(--white);
    font-weight: 700;
}

.announce__badge {
    background: var(--white);
    color: var(--orange-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.announce--promo .announce__badge {
    background: var(--brown-2);
    color: var(--cream);
}

.announce__close {
    position: absolute;
    inset-block: 0;
    right: 14px;
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.announce__close:hover {
    opacity: 1;
}

/* ---------- Header ---------- */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding-block: 10px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brown);
    justify-self: center;
}

.brand svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand__wordmark {
    width: clamp(210px, 19vw, 285px);
    height: auto;
    max-height: 68px;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.main-nav a {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brown);
}

.nav-drawer__close,
.nav-drawer__brand,
.nav-overlay {
    display: none;
}

.main-nav a:hover,
.main-nav a.is-active {
    color: var(--orange-2);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nav-account {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*
 * The account links are rendered in two slots (drawer + header) so they can sit in the right place
 * at each size. Exactly one slot is displayed at any width, so the user never sees them twice.
 */
.nav-account-slot--drawer {
    display: none;
}

.nav-account-slot--header {
    display: block;
}

.nav-account__link {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown);
}

.nav-account__form {
    display: inline;
}

.nav-account__link--button {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--brown);
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: currentColor;
    margin: 5px auto;
    width: 22px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: clamp(460px, 74vh, 760px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.hero__media,
.hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, .96) 83%, rgba(0, 0, 0, .58) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, .96) 83%, rgba(0, 0, 0, .58) 92%, transparent 100%);
}

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1, 56, 45, .62) 0%, rgba(1, 56, 45, .2) 48%, rgba(1, 56, 45, .48) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding: 90px 0 130px;
}

.hero--reference {
    align-items: center;
}

.hero--reference .hero__inner {
    padding-top: 0;
    padding-bottom: 0;
}

.hero--reference .hero__sub,
.hero--reference .hero__actions {
    display: none;
}

.hero h1 {
    font-family: var(--display);
    color: var(--white);
    font-size: clamp(3.35rem, 6.4vw, 7.4rem);
    font-weight: 400;
    line-height: .86;
    letter-spacing: -.02em;
    max-width: none;
    margin-inline: auto;
    text-shadow: 0 6px 30px rgba(51, 23, 10, .35);
}

.hero h1 span,
.about-intro h1 span {
    display: block;
    white-space: nowrap;
    opacity: 0;
    will-change: transform, opacity, filter;
    animation-duration: 1.05s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    animation-fill-mode: forwards;
}

.header-cart {
    width: 44px;
    height: 44px;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    border: 1px solid rgba(92, 42, 18, .25);
    border-radius: 50%;
    color: var(--brown);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.header-cart svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-cart:hover { background: var(--brown); color: var(--cream); transform: translateY(-2px); }

/* Default semantic heading scale; section-specific rules may override it. */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); }
h5, .as-h5 { font-size: var(--h5-size); }
h6 { font-size: clamp(.84rem, 1vw, 1rem); }

.hero h1 span:first-child:not(:only-child),
.about-intro h1 span:first-child:not(:only-child),
.hero h1 span:only-child,
.about-intro h1 span:only-child {
    transform: translateX(-42vw);
    filter: blur(8px);
    animation-name: hero-title-from-left;
    animation-delay: .18s;
}

.hero h1 span:last-child:not(:only-child),
.about-intro h1 span:last-child:not(:only-child) {
    transform: translateX(42vw);
    filter: blur(8px);
    animation-name: hero-title-from-right;
    animation-delay: .34s;
}

@keyframes hero-title-from-left {
    0% {
        opacity: 0;
        transform: translateX(-42vw);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes hero-title-from-right {
    0% {
        opacity: 0;
        transform: translateX(42vw);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.hero__sub {
    color: rgba(255, 250, 242, .92);
    max-width: 46ch;
    margin: 22px auto 30px;
    font-size: 1.02rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.btn--ghost.btn--on-dark {
    border-color: rgba(255, 250, 242, .55);
    color: var(--white);
    background: rgba(51, 23, 10, .28);
}

.btn--ghost.btn--on-dark:hover {
    border-color: var(--white);
    color: var(--white);
    background: rgba(51, 23, 10, .45);
}

/* Live offers under the heading: one frosted card per offer, the whole card a link, taking turns.
   Swipe or drag to move between them. */
.hero-offers {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(860px, calc(100% - 32px));
    margin: clamp(18px, 3vw, 30px) auto 0;
}

.hero-offers__track {
    width: 100%;
    touch-action: pan-y;
    user-select: none;
}

.hero-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 12px 10px 10px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    background: rgba(255, 250, 242, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(20, 8, 3, .35);
    color: var(--brand-dark-green);
    text-align: left;
    text-decoration: none;
    animation: hero-offer-in .45s ease;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hero-offer:hover { color: var(--brand-dark-green); transform: translateY(-2px); box-shadow: 0 22px 46px rgba(20, 8, 3, .42); }
.hero-offer:focus-visible { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.hero-offer[hidden] { display: none; }
.hero-offer:not(:has(.hero-offer__image)) { grid-template-columns: minmax(0, 1fr) auto; padding-left: 26px; }

@keyframes hero-offer-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.hero-offer__image {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--white);
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(128, 188, 0, .6);
    pointer-events: none;
}

/* Badge on top, one line of text under it. */
.hero-offer__text { display: grid; justify-items: start; gap: 6px; min-width: 0; }

.hero-offer__badge {
    min-width: 132px;
    padding: 4px 24px;
    text-align: center;
    border-radius: 999px;
    background: var(--brand-lime);
    color: var(--brand-dark-green);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* One line on a wide screen; the rest is cut with an ellipsis (the whole text is in the tooltip). */
.hero-offer__headline {
    /* Stretch to the column, not to the text, so a long line is cut before the button. */
    justify-self: stretch;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-offer__headline-short { display: none; }

.hero-offer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--brand-dark-green);
    color: var(--white);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.hero-offer__cta svg,
.hero-offer__inline-arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Sits inline after the last word, like a character, so it moves with the text. */
.hero-offer__inline-arrow { display: inline-block; width: 26px; margin-left: 6px; vertical-align: -3px; }

.hero-offer:hover .hero-offer__cta { background: var(--brand-lime); color: var(--brand-dark-green); }
.hero-offer__cta svg { transition: transform .2s ease; }
.hero-offer:hover .hero-offer__cta svg { transform: translateX(3px); }

.hero-offers__dots { display: flex; gap: 8px; }

.hero-offers__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

.hero-offers__dot[aria-selected="true"] { width: 26px; background: var(--brand-lime); }

/* Phones: a bigger picture, at most two lines of text, and a small arrow right after the last word
   instead of the button. */
@media (max-width: 640px) {
    .hero-offer {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 10px 14px 10px 10px;
        border-radius: 22px;
    }

    .hero-offer__image { width: 68px; height: 68px; border-radius: 16px; }
    .hero-offer__badge { min-width: 112px; font-size: .62rem; padding: 3px 20px; }

    .hero-offer__headline { display: none; }

    .hero-offer__headline-short {
        display: block;
        font-size: .9rem;
        font-weight: 700;
        line-height: 1.3;
    }
    .hero-offer__cta { display: none; }
    .hero-offer:not(:has(.hero-offer__image)) { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
}

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

/* Dry-brush edge that separates the hero from the cream page. */
.hero__edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 3;
    width: 100%;
    height: clamp(76px, 9.2vw, 132px);
    display: block;
    background: url('../images/site/hero-brush-edge.png') center / 100% 100% no-repeat;
    pointer-events: none;
}

/* ---------- About intro ---------- */
.intro {
    text-align: center;
    padding-block: clamp(52px, 7vw, 92px);
}

.intro__statement {
    font-family: var(--display);
    text-transform: uppercase;
    color: var(--brown);
    font-size: clamp(1.94rem, 3.62vw, 3.31rem);
    line-height: 1;
    letter-spacing: -.025em;
    max-width: none;
    margin: 0 auto;
}

.intro__line {
    display: block;
    white-space: nowrap;
}

.intro__statement .chip {
    display: inline-block;
    vertical-align: baseline;
    width: 1em;
    height: 1em;
    border-radius: 999px;
    object-fit: contain;
    margin-inline: .2em;
    will-change: transform;
    transition: transform .25s ease, filter .25s ease;
}

.intro__statement .chip--glass {
    width: .72em;
    height: 1em;
    object-fit: contain;
    object-position: center;
    margin-inline: .18em;
    margin-bottom: -.16em;
    transform: translateY(-.2em) scale(1.62) rotate(3deg);
    transform-origin: center bottom;
}

.intro__statement .chip--bean {
    width: 1.25em;
    height: 1em;
    object-fit: contain;
    margin-inline: .15em;
    transform: translateY(.08em) scale(1.14) rotate(-8deg);
    transform-origin: center bottom;
}

.intro__statement .chip--glass:hover {
    animation: intro-chip-glass-wobble .65s ease-in-out;
    filter: drop-shadow(0 8px 8px rgba(69, 32, 14, .18));
}

.intro__statement .chip--bean:hover {
    animation: intro-chip-bean-wobble .65s ease-in-out;
    filter: drop-shadow(0 7px 7px rgba(69, 32, 14, .2));
}

@keyframes intro-chip-glass-wobble {
    0%, 100% { transform: translateY(-.2em) scale(1.62) rotate(3deg); }
    30% { transform: translateY(-.28em) scale(1.67) rotate(-5deg); }
    65% { transform: translateY(-.22em) scale(1.64) rotate(7deg); }
}

@keyframes intro-chip-bean-wobble {
    0%, 100% { transform: translateY(.08em) scale(1.14) rotate(-8deg); }
    30% { transform: translateY(.02em) scale(1.18) rotate(-17deg); }
    65% { transform: translateY(.06em) scale(1.16) rotate(1deg); }
}

@media (max-width: 700px) {
    .hero {
        min-height: clamp(400px, 56vh, 580px);
    }

    .hero h1 {
        font-size: clamp(2.7rem, 12.8vw, 4.25rem);
        line-height: .88;
    }

    .hero--reference .hero__inner {
        padding-top: 0;
    }

    .hero__edge {
        height: 82px;
    }

    .intro__statement {
        max-width: 22ch;
        font-size: clamp(2.1rem, 9.98vw, 3.15rem);
        line-height: 1;
    }

    .intro__line {
        display: inline;
        white-space: normal;
    }

    .intro__statement .chip--glass {
        width: .72em;
        height: 1em;
        margin-inline: .16em;
        margin-bottom: -.14em;
        transform: translateY(-.16em) scale(1.48) rotate(3deg);
    }

    .intro__statement .chip--bean {
        width: 1.2em;
        height: 1em;
        margin-inline: .14em;
        transform: translateY(.06em) scale(1.08) rotate(-8deg);
    }

    .section-head__two-line {
        font-size: var(--section-h2-size-mobile) !important;
        line-height: var(--section-h2-line-height-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero h1 span {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .intro__statement .chip:hover {
        animation: none;
    }

    .band__phrase {
        animation: none;
        transition: none;
    }
}

/* ---------- Category tabs ---------- */
.category-filter__hint {
    display: none;
}

.category-filter__mobile-label,
.category-filter__select-wrap {
    display: none;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.tab {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 9px;
    padding: 9px 20px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.tab:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

.tab.is-active {
    background: var(--brown);
    border-color: var(--brown);
    color: var(--cream);
}

@media (min-width: 1101px) {
    .category-filter .tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        width: 100%;
    }

    .category-filter .tab {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .category-filter {
        margin-bottom: 30px;
    }

    .category-filter__mobile-label {
        display: block;
        margin: 0 0 9px;
        color: var(--brown);
        font-size: .88rem;
        font-weight: 800;
        letter-spacing: .1em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .category-filter__select-wrap {
        position: relative;
        display: block;
        width: 100%;
    }

    .category-filter__select-wrap::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--brand-bright-lime);
        border-bottom: 2px solid var(--brand-bright-lime);
        pointer-events: none;
        transform: translateY(-70%) rotate(45deg);
    }

    .category-filter__select {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-height: 58px;
        padding: 14px 52px 14px 18px;
        border: 1px solid rgba(1, 56, 45, .2);
        border-radius: 15px;
        outline: none;
        background: var(--brand-dark-green);
        color: var(--cream);
        box-shadow: 0 10px 24px rgba(1, 56, 45, .16);
        font-family: var(--display);
        font-size: 1.08rem;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .category-filter__select:focus {
        box-shadow: 0 0 0 3px rgba(124, 197, 0, .28), 0 10px 24px rgba(1, 56, 45, .16);
    }

    .category-filter .tabs {
        display: none;
    }
}

/* ---------- Menu filters ---------- */
.menu-page-head {
    text-align: center;
}

.menu-page-head h1 {
    margin-inline: auto;
    font-size: clamp(3.35rem, 6.4vw, 7.4rem);
    line-height: .86;
}

.menu-page-head__text {
    max-width: 80%;
    margin: var(--section-head-gap) auto 0;
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.menu-category-list {
    display: grid;
    gap: clamp(42px, 7vw, 82px);
}

.menu-category {
    padding: clamp(30px, 5vw, 64px);
    background: #fffaf2;
    border: 1px solid rgba(1, 56, 45, .1);
    border-radius: 28px;
    box-shadow: 0 16px 42px rgba(1, 56, 45, .06);
}

.menu-category__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--section-head-gap);
    margin-bottom: var(--section-content-gap);
}

.menu-category__head h2 {
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
    margin: 0;
}

.menu-category__head p {
    width: 100%;
    max-width: 80%;
    margin: 0;
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.menu-category .product-card {
    background: var(--cream);
    border-color: rgba(1, 56, 45, .1);
}

@media (max-width: 680px) {
    .menu-category-list { gap: 32px; }
    .menu-category { padding: 28px 14px; border-radius: 20px; }
    .menu-category__head { gap: 10px; margin-bottom: 28px; }
    .menu-category__head h2 { font-size: var(--section-h2-size-mobile); line-height: var(--section-h2-line-height-mobile); }
}

.filters {
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 26px;
    display: grid;
    gap: 16px;
}

.filters__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr) minmax(170px, 1fr);
    gap: 16px;
    align-items: end;
}

.filters__row--secondary {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.filters .field label,
.filters legend {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brown);
}

.filters input,
.filters select {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-family: var(--body);
    font-size: .92rem;
    color: var(--ink);
    width: 100%;
}

.filters input:focus,
.filters select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(238, 122, 46, .18);
}

.filters__price {
    border: 0;
    padding: 0;
    margin: 0;
}

.filters__price legend {
    padding: 0;
    margin-bottom: 7px;
}

.filters__price div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filters__price input {
    width: 96px;
}

.filters__price span {
    color: var(--muted);
}

.filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.filters__toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
}

.filters__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.filters__count {
    color: var(--muted);
    font-size: .88rem;
    margin: 0 0 20px;
}

.filters__count strong {
    color: var(--brown);
}

@media (max-width: 860px) {
    .filters__row,
    .filters__row--secondary {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .filters__actions {
        justify-content: stretch;
    }

    .filters__actions .btn {
        flex: 1;
    }
}

/* ---------- Product grid ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* A row with only 1-2 products would otherwise stretch/left-align inside the 3-column
   track (or 2-column at tablet) — center it instead of leaving lopsided empty space. */
.product-grid:has(> .product-card:only-child),
.product-grid:has(> .product-card:first-child:nth-last-child(2)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product-grid:has(> .product-card:only-child) > .product-card,
.product-grid:has(> .product-card:first-child:nth-last-child(2)) > .product-card {
    width: calc(33.333% - 15px);
    min-width: 260px;
}

@media (max-width: 820px) {
    .product-grid:has(> .product-card:only-child) > .product-card,
    .product-grid:has(> .product-card:first-child:nth-last-child(2)) > .product-card {
        width: calc(50% - 11px);
    }
}

@media (max-width: 520px) {
    .product-grid:has(> .product-card:only-child) > .product-card,
    .product-grid:has(> .product-card:first-child:nth-last-child(2)) > .product-card {
        width: 100%;
    }
}

.product-card {
    background: rgba(255, 250, 242, .52);
    border: 1px solid rgba(92, 42, 18, .06);
    border-radius: var(--radius);
    padding: 0 0 18px;
    overflow: hidden;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 4px 14px rgba(1, 56, 45, .07);
}

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

.product-card__media {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    /* Product photos share this neutral edge colour, so their canvas disappears
       into the card instead of reading as a second box. */
    background: #f1f1ef;
}

/* Detail-page product rails: edge-to-edge inside the shell with scroll-snap cards. */
.product-rail {
    position: relative;
    width: 100%;
}

/* Cards in a horizontally-scrolling rail shouldn't also slide in vertically —
   that reads as jitter while scrolling. Show them at rest immediately. */
.product-rail__track [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.product-rail__track {
    display: grid;
    grid-auto-flow: column;
    /* Four complete cards and a clear preview of the fifth on wide screens. */
    grid-auto-columns: calc(22.222% - 17px);
    gap: 22px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding: 4px 0 18px;
}

/* Short rows sit in the middle; longer rows retain a reachable left edge and scroll. */
.product-rail__track:not(:has(> .product-card:nth-child(5))) {
    justify-content: center;
}

.product-rail__track::-webkit-scrollbar {
    display: none;
}

.product-rail__track > .product-card {
    scroll-snap-align: start;
    min-width: 0;
}

.product-rail__nav {
    position: static;
    width: 42px;
    height: 42px;
    border: 1px solid var(--brown);
    border-radius: 50%;
    background: transparent;
    color: var(--brown);
    box-shadow: none;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    display: grid;
    place-items: center;
    padding: 0;
}

.product-rail__nav svg,
.testimonial-carousel__controls button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-rail__nav:hover {
    background: var(--brown);
    color: var(--cream);
    transform: translateY(-2px);
}

.product-rail__controls {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

@media (max-width: 820px) {
    .product-rail__track {
        grid-auto-columns: 42%;
        gap: 18px;
    }

    .product-rail__track:not(:has(> .product-card:nth-child(3))) {
        justify-content: center;
    }

    .product-rail__track:has(> .product-card:nth-child(3)) {
        justify-content: start;
    }
}

@media (max-width: 520px) {
    .product-rail__track {
        /* One full card plus a deliberate preview of the next card. */
        grid-auto-columns: 86%;
        gap: 14px;
        padding-right: 14%;
    }

    .product-rail__track:has(> .product-card:nth-child(2)) {
        justify-content: start;
    }

    .product-rail__track:not(:has(> .product-card:nth-child(2))) {
        justify-content: center;
    }

    .product-rail__nav {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
    }
}

.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    padding: 0;
    transition: transform .5s ease;
}

.product-card:hover .product-card__media img {
    transform: scale(1.035);
}

.product-card__rating {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--white);
    color: var(--brown);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(69, 32, 14, .12);
}

.product-card__rating .star {
    color: var(--orange);
}

/* Temporarily hidden on storefront cards; review and promotion data remains available. */
.product-card__rating,
.product-card__rating-inline,
.product-card__badge,
.product-card__badge--sale {
    display: none !important;
}

.product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--orange);
    color: var(--white);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-card__badge--sale {
    background: #b3261e;
}

.product-card__name {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 1.02rem;
    color: var(--brown);
    margin: 12px 14px 10px;
    text-align: center;
    min-height: 3.24em;
    line-height: 1.08;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Stretched link: the anchor's ::after covers the whole card, so clicking anywhere opens the
 * product. The cart form is lifted above it so its button keeps working.
 */
.product-card__overlay {
    color: inherit;
}

.product-card__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius);
}

.product-card:focus-within {
    box-shadow: 0 0 0 3px rgba(238, 122, 46, .35);
}

.product-card__cart {
    position: relative;
    z-index: 2;
    margin-top: 0;
    position: absolute;
    right: 18px;
    bottom: 17px;
}

.product-card__rating-inline {
    display: inline-flex;
    align-items: center;
}

/* ---------- Hover detail panel ---------- */
.product-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 18px 18px 20px;
    background: linear-gradient(180deg, rgba(51, 23, 10, .18) 0%, rgba(51, 23, 10, .88) 62%);
    color: var(--white);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.product-card:hover .product-card__hover,
.product-card:focus-within .product-card__hover {
    opacity: 1;
}

.product-card__hover-category {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
}

.product-card__hover-text {
    margin: 0;
    font-size: .96rem;
    line-height: 1.55;
    color: rgba(255, 250, 242, .92);
}

.product-card__hover-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: .84rem;
    color: rgba(255, 250, 242, .8);
}

.product-card__hover-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.product-card__hover-meta .stars__star--empty {
    color: rgba(255, 250, 242, .35);
}

.product-card__hover-cue {
    margin-top: 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--white);
}

/* Touch devices have no hover, so the panel would just cover the image. */
@media (hover: none) {
    .product-card__hover {
        display: none;
    }
}

.product-card__desc {
    font-size: .84rem;
    color: var(--muted);
    margin: 0 14px 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__foot {
    margin-top: auto;
    margin-inline: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 820px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .product-card {
        aspect-ratio: auto;
        min-height: 520px;
    }

    .product-card__media {
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
    }

    .product-card__foot {
        padding-right: 0;
        margin-bottom: 42px;
    }

    .product-card__cart {
        right: 14px;
        bottom: 16px;
    }

}

.price {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--brown);
}

/* Keep the amount prominent without letting the currency mark overpower it. Deliberately inline, not
   inline-block: browsers allow a line break on either side of an inline-block, which put the pound
   sign on one line and the amount on the next whenever a price was squeezed (a narrow table column, a
   small card). As an inline span there is no break opportunity between the sign and the digits, so
   they always stay together, with or without white-space: nowrap on the price. Measured identical
   otherwise: same size, weight, width and spacing. */
.currency-sign {
    display: inline;
    margin-right: .04em;
    font-family: var(--body);
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
    vertical-align: 0;
}

.price del {
    white-space: nowrap;
    font-family: var(--body);
    font-size: .95rem;
    color: var(--muted);
    margin-left: 8px;
    font-weight: 500;
}

.product-card__link {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-card__link:hover {
    gap: 10px;
}

/* Shown on the photo whenever nothing can be bought, above the hover panel so it stays visible. */
.product-card__soldout {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--brand-dark-green);
    color: var(--brand-light-beige);
    font: 700 .74rem/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(1, 56, 45, .22);
    pointer-events: none;
}

.product-card--soldout .product-card__media img {
    /* Stock status is communicated by the card action; keep product photography at full fidelity. */
    filter: none;
    opacity: 1;
}

/* ---------- Statement band + feature cards ---------- */
.band {
    background-color: var(--brand-dark-green);
    background-image: linear-gradient(rgba(1, 56, 45, .97), rgba(1, 56, 45, .99)), url('../images/site/orocafe-pattern.webp');
    background-size: cover, cover;
    background-position: center;
    color: var(--cream-2);
    border-radius: 12px;
    min-height: clamp(560px, 62vw, 760px);
    padding: clamp(72px, 8vw, 112px) clamp(24px, 6vw, 82px) clamp(56px, 6vw, 82px);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: grid;
    place-content: center;
}

.band h2 {
    color: var(--cream);
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
    max-width: none;
    margin: 0 auto clamp(40px, 5vw, 64px);
    position: relative;
    z-index: 2;
}

.band__line {
    display: block;
    white-space: nowrap;
    margin-block: .045em;
}

.product-card__desc { display: none; }

.product-card__quick-add {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--orange);
    font-family: var(--display);
    font-size: .62rem;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-menu {
    position: relative;
}

.profile-menu__trigger {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(92, 42, 18, .25);
    border-radius: 50%;
    background: var(--cream-2);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.profile-menu__trigger::-webkit-details-marker {
    display: none;
}

.profile-menu__trigger::marker {
    content: '';
}

.profile-menu__trigger:hover,
.profile-menu[open] .profile-menu__trigger {
    border-color: var(--orange);
    box-shadow: 0 5px 16px rgba(69, 32, 14, .14);
    transform: translateY(-2px);
}

.profile-menu__trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-menu__dropdown {
    position: absolute;
    z-index: 80;
    top: calc(100% + 12px);
    right: 0;
    width: 190px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.profile-menu__dropdown a,
.profile-menu__dropdown button {
    width: 100%;
    display: block;
    padding: 11px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--brown);
    font: 700 .76rem/1.3 var(--body);
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.profile-menu__dropdown a:hover,
.profile-menu__dropdown button:hover {
    background: var(--cream-2);
    color: var(--orange-2);
}

.profile-logout {
    margin-top: 24px;
}
.product-card__quick-add:hover { color: var(--brown); }
.product-card__foot { padding-right: 138px; }
.product-card__rating-inline { display: none; }

@media (hover: none) {
    .product-card__desc {
        display: none;
    }
}

.band__phrase {
    background: var(--orange);
    color: var(--brown-2);
    border: 4px solid rgba(51, 23, 10, .42);
    border-radius: 9px;
    padding: .06em .3em .12em;
    display: table;
    min-width: 5.3em;
    margin: .2em auto .24em;
    transform: rotate(-4deg);
    box-shadow: 7px 8px 0 rgba(51, 23, 10, .32);
    transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}

.band__phrase.is-changing {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(-.25em) rotate(3deg) scale(.92);
}

.band__phrase.is-entering {
    animation: band-phrase-enter .58s cubic-bezier(.16, 1, .3, 1);
}

@keyframes band-phrase-enter {
    from { opacity: 0; transform: translateY(.38em) rotate(-8deg) scale(.9); filter: blur(7px); }
    to { opacity: 1; transform: translateY(0) rotate(-4deg) scale(1); filter: blur(0); }
}

.band h5, .band .as-h5 {
    max-width: 42ch;
    margin: 0 auto;
    color: rgba(255, 255, 255, .92);
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--band-h5-size);
    line-height: 1.05;
    position: relative;
    z-index: 2;
}

@media (max-width: 760px) {
    .band {
        min-height: 540px;
        padding: 76px 12px 54px;
    }

    .band h2 {
        font-size: clamp(2.15rem, 10vw, 3.2rem);
        line-height: 1.02;
        margin-bottom: 34px;
    }
}

/* ---------- Original blends ---------- */
.blend-showcase {
    margin-top: clamp(70px, 8vw, 112px);
}

.blend-showcase-section .blend-showcase {
    margin-top: 0;
}

.blend-showcase__head {
    width: 100%;
    max-width: none;
    margin-bottom: clamp(34px, 4vw, 54px);
    text-align: center;
}

.blend-showcase__head .eyebrow {
    margin-bottom: 12px;
}

.blend-showcase__head h2 {
    width: 100%;
    max-width: none;
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
}

@media (min-width: 1101px) {
    .section-head__two-line,
    .blend-showcase__head h2 {
        white-space: nowrap;
    }
}

.blend-carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.blend-carousel__track {
    touch-action: pan-y pinch-zoom;
    position: relative;
    width: 100%;
    /* Height is measured from the actual rendered card content in JS (--blend-track-height) —
       a guessed fixed/vw height clipped the card at some widths since its content doesn't
       scale at the same rate as the track. Falls back to a rough clamp before JS runs. */
    height: var(--blend-track-height, clamp(460px, 118vw, 560px));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.blend-carousel .blend-card {
    position: absolute;
    top: 0;
    /* Base width is sized so the CENTER card renders 30% larger than before; the side
       cards' scale is reduced to compensate so their own on-screen size is unchanged. */
    width: min(780px, 67.6%);
    height: auto;
    transition: left .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1), opacity .6s ease;
}

.blend-carousel .blend-card[data-position="center"] {
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    border: 2px solid var(--blend-accent);
    box-shadow: 0 14px 34px -6px color-mix(in srgb, var(--blend-accent) 45%, transparent);
}

.blend-carousel .blend-card[data-position="left"] {
    left: 10%;
    transform: translateX(-50%) scale(.646);
    opacity: .55;
    z-index: 2;
    pointer-events: none;
}

.blend-carousel .blend-card[data-position="right"] {
    left: 90%;
    transform: translateX(-50%) scale(.646);
    opacity: .55;
    z-index: 2;
    pointer-events: none;
}

.blend-carousel__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 4;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--brand-dark-green);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(1, 56, 45, .16);
    transition: background-color .2s ease, transform .2s ease;
}

.blend-carousel__nav:hover {
    background: var(--brand-lime);
    color: var(--white);
}

.blend-carousel__nav--prev { left: 0; }
.blend-carousel__nav--next { right: 0; }

.blend-carousel__dots {
    display: flex;
    gap: 10px;
}

.blend-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--brand-dark-green) 22%, transparent);
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}

.blend-carousel__dot.is-active {
    background: var(--brand-dark-green);
    transform: scale(1.25);
}

.blend-card {
    --blend-accent: var(--brand-yellow);
    display: block;
    overflow: hidden;
    border-radius: 20px;
    background: var(--cream);
    box-shadow: 0 18px 42px rgba(1, 56, 45, .14);
}

.blend-card--specialty { --blend-accent: var(--brand-yellow); }
.blend-card--espresso { --blend-accent: var(--brand-lime); }
.blend-card--barista { --blend-accent: var(--brand-orange); }

.blend-card__banner {
    padding: clamp(26px, 3.2vw, 34px) 20px clamp(20px, 2.4vw, 26px);
    background: var(--blend-accent);
    text-align: center;
}

.blend-card__banner h2 {
    margin: 0;
    color: var(--white);
    font-family: var(--display);
    text-transform: uppercase;
    /* Same var(--h2-size) as every other real h2 on the site, on every
       breakpoint — no card-specific size of its own anymore. */
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.blend-card__tagline {
    padding: 12px 16px;
    background: var(--blend-accent);
    border-top: 2px solid rgba(0, 0, 0, .55);
}

.blend-card__tagline p {
    margin: 0;
    overflow: hidden;
    color: var(--white);
    font-weight: 800;
    font-size: clamp(.6rem, 2.1vw, .82rem);
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blend-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
}

.blend-card__stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blend-card__stat {
    display: grid;
    grid-template-columns: 5.4em 2.4em 1fr;
    align-items: center;
    gap: 10px;
}

.blend-card__stat-label {
    font-family: var(--body);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
}

.blend-card__stat-score {
    font-family: var(--body);
    font-size: .8rem;
    font-weight: 800;
    color: #000;
}

.blend-card__stat-bar {
    display: flex;
    gap: 4px;
}

.blend-card__stat-bar span {
    flex: 1 1 0;
    height: 15px;
    border-radius: 2px;
    background: #3a3a3a;
}

.blend-card__stat-bar span.is-filled {
    background: var(--blend-accent);
}

/* Bleed past the body's own padding so the line touches the card's outer edges,
   matching the full-width line under the tagline banner above it. */
.blend-card__divider {
    margin: 0 calc(-1 * clamp(20px, 2.6vw, 28px));
    border: 0;
    border-top: 2px solid rgba(0, 0, 0, .55);
}

.blend-card__notes-line {
    margin: 0;
    overflow: hidden;
    color: #000;
    font-weight: 800;
    font-size: clamp(.62rem, 2.15vw, .84rem);
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blend-card__specs {
    position: relative;
    /* Let the two spec rows occupy the complete visible area between the
       divider above and the bottom edge of the card.  Previously the body's
       gap and bottom padding sat outside this block, so the labels were
       mathematically centred in the block but looked vertically offset. */
    margin-top: -16px;
    margin-bottom: calc(-1 * clamp(20px, 2.4vw, 26px));
}

.blend-card__specs::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, .55);
    transform: translateX(-50%);
}

.blend-card__specs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(50px, 4.4vw, 56px);
    gap: 12px;
    color: #000;
    font-weight: 800;
    font-size: clamp(.68rem, 1.9vw, .8rem);
    text-transform: uppercase;
}

.blend-card__specs-row span {
    flex: 1;
    text-align: center;
}

/* Bigger, easier-to-read card copy on desktop; mobile keeps its own tuned
   sizes below so the single-line fit there stays intact. Sized ~20% up from
   the previous pass across the board. */
@media (min-width: 701px) {
    .blend-card__stat {
        grid-template-columns: minmax(112px, 7em) 3em minmax(0, 1fr);
        column-gap: 12px;
    }

    .blend-card__stat-label,
    .blend-card__stat-score {
        font-size: 1.2rem;
        line-height: 1;
        white-space: nowrap;
    }

    .blend-card__stat-score { text-align: center; }

    .blend-card__notes-line {
        font-size: clamp(.98rem, 1.56vw, 1.2rem);
        white-space: normal;
    }

    .blend-card__specs-row {
        font-size: clamp(1.1rem, 1.44vw, 1.26rem);
    }

    .blend-card__tagline p {
        font-size: clamp(1.1rem, 1.92vw, 1.24rem);
        white-space: normal;
    }
}

@media (max-width: 700px) {
    .blend-carousel__track {
        -webkit-mask-image: none;
        mask-image: none;
    }


    .blend-showcase__head h2 {
        font-size: var(--section-h2-size-mobile);
        line-height: var(--section-h2-line-height-mobile);
    }

    .blend-carousel .blend-card {
        width: 96%;
    }

    .blend-carousel .blend-card[data-position="left"] {
        left: 1%;
    }

    .blend-carousel .blend-card[data-position="right"] {
        left: 99%;
    }

    .blend-carousel__nav {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
    }

    .blend-card__body {
        padding: 16px 12px 20px;
    }

    .blend-card__divider {
        margin-inline: -12px;
    }

    .blend-card__stat {
        grid-template-columns: 4.6em 2.2em 1fr;
    }

    .blend-card__tagline {
        padding: 10px 10px;
    }

    /* Readable size now instead of the old single-line-fit tuning — wrapping
       to a second line is fine since the carousel's height sync (site.js)
       tracks each card's real content height and re-measures on any change,
       so a taller wrapped card no longer gets clipped. */
    .blend-card__tagline p,
    .blend-card__notes-line {
        font-size: clamp(.78rem, 3.2vw, .92rem);
        letter-spacing: 0;
        white-space: normal;
    }
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(320px, 22vw, 420px);
    grid-template-columns: none;
    gap: 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    scroll-snap-type: none;
    scrollbar-width: none;
    padding: 0 0 6px;
}

.testimonial-grid::-webkit-scrollbar {
    display: none;
}

.testimonial-carousel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.testimonial-carousel__controls {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin: 20px max(18px, calc((100vw - var(--shell)) / 2)) 0;
}

.testimonial-carousel__controls button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--brown);
    border-radius: 50%;
    background: transparent;
    color: var(--brown);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    display: grid;
    place-items: center;
    padding: 0;
}

.testimonial-carousel__controls button:hover {
    background: var(--brown);
    color: var(--cream);
}

.testimonial {
    background: #fffaf2;
    border-radius: 24px;
    padding: 32px clamp(26px, 2.2vw, 36px);
    display: flex;
    flex-direction: column;
    min-height: 400px;
    scroll-snap-align: start;
    margin: 0;
}

@media (max-width: 800px) {
    .testimonial-grid {
        grid-auto-columns: min(78vw, 380px);
        gap: 18px;
    }
}

@media (max-width: 520px) {
    .testimonial-grid {
        grid-auto-columns: 88vw;
        gap: 14px;
    }

    .testimonial {
        min-height: 370px;
        padding: 30px 24px;
    }

    .testimonial .stars {
        margin-bottom: 42px;
        font-size: 1.38rem;
    }

    .testimonial blockquote {
        font-size: clamp(1.08rem, 5vw, 1.28rem);
        line-height: 1.42;
    }

    .testimonial__identity strong {
        font-size: 1rem;
    }

    .testimonial__identity cite,
    .testimonial cite {
        font-size: .9rem;
    }
}

/* ---------- Star rating ---------- */
.stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
    font-size: .92rem;
}

.stars__star--full {
    color: var(--orange);
}

.stars__star--empty {
    color: rgba(92, 42, 18, .25);
}

/* Half star: an orange left half over a muted base. */
.stars__star--half {
    background: linear-gradient(90deg, var(--orange) 50%, rgba(92, 42, 18, .25) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.testimonial .stars {
    margin-bottom: 58px;
    color: var(--orange);
    font-size: 1.2rem;
}

.testimonial blockquote {
    margin: 0 0 18px;
    font-family: var(--display);
    text-transform: uppercase;
    font-size: clamp(1.08rem, 1.4vw, 1.28rem);
    line-height: 1.48;
    color: var(--brown);
}

.testimonial cite {
    font-family: var(--display);
    line-height: 1.52;
    font-style: normal;
    font-size: .92rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange-2);
}

/* ---------- Split (image + copy) ---------- */
.about-intro { text-align: center; padding-bottom: var(--section-content-gap); }
.about-intro .eyebrow { margin-bottom: 20px; }
.about-intro h1 { font-size: clamp(3.35rem, 6.4vw, 7.4rem); line-height: .86; margin: 0 auto; }
.about-intro h1 span { display: block; }
.about-photo { padding-inline: var(--gutter); }
.about-photo__frame { width: min(100%, var(--shell)); height: clamp(360px, 58vw, 720px); margin-inline: auto; overflow: hidden; border-radius: 28px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); will-change: transform; }
/* Sentence case in Outfit Bold rather than the uppercase display face, so the
   statement reads as a sentence. */
.about-story p {
    max-width: 34ch;
    margin: 0 auto;
    text-align: center;
    color: var(--brown);
    font-family: 'Outfit Bold', var(--body);
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: clamp(1.5rem, 2.6vw, 2.35rem);
    line-height: 1.28;
    text-wrap: balance;
}

@media (max-width: 680px) {
    .about-intro h1 { font-size: clamp(2.7rem, 12.8vw, 4.25rem); line-height: .88; }
    /* The About page's heading: sized so its longest line ("Made to be discovered.") still
       fits a phone, since the spans never wrap. */
    section.about-intro h1 { font-size: clamp(2.1rem, 10.4vw, 4.25rem); }

    /* The FAQ page's h1 is one single span (unlike other .about-intro pages,
       which hand-split their heading into a span per line), so the shared
       nowrap rule above ran it off the edge of the screen — let it wrap. */
    .faq-section .about-intro h1 span {
        white-space: normal;
    }
    .about-photo { padding-inline: 18px; }
    /* A wide landscape crop, as on a desktop, rather than a tall one. */
    .about-photo__frame { height: auto; aspect-ratio: 16 / 9; border-radius: 20px; }
    .about-story p { font-size: clamp(1.3rem, 5.6vw, 1.6rem); line-height: 1.3; }
    .split--crafted .split__body p { font-size: 1.05rem; }
}

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(26px, 4vw, 60px);
    align-items: center;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.split__body h2 {
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    max-width: 16ch;
}

.split__body p {
    color: var(--muted);
    max-width: 60ch;
}

.split--crafted {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(42px, 5.5vw, 76px);
    align-items: center;
    padding-inline: clamp(20px, 7vw, 108px);
}

.split--crafted .split__media,
.split--crafted .split__body {
    min-height: 0;
}

.split--crafted .split__media {
    position: relative;
    overflow: hidden;
    border-radius: 42px;
}

.split--crafted .split__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--cream);
    transform: translateY(-101%);
    pointer-events: none;
}

.split--crafted .split__media img {
    display: block;
    height: auto;
    max-height: none;
    aspect-ratio: 1.3 / 1;
    border-radius: 42px;
}

.split--crafted .split__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split--crafted .split__body h2 {
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
    max-width: 28ch;
    /* A raw pixel gap looks bigger under a huge display headline than the
       same gap looks under small body text (the eye reads whitespace next to
       large type as more prominent) — so this margin is intentionally
       smaller than the paragraph's below, to make the two gaps read as
       visually even rather than being numerically equal. */
    margin-bottom: 10px;
}

.split--crafted .split__body p {
    max-width: 100%;
    margin-bottom: 20px;
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.testimonial__customer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
}

.testimonial__avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cream-2);
    color: var(--orange-2);
}

.testimonial__avatar svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.testimonial__identity {
    display: grid;
    gap: 3px;
}

.testimonial__identity strong {
    font-family: var(--display);
    color: var(--brown);
    font-size: 1rem;
    line-height: 1.35;
    text-transform: uppercase;
}

.testimonial__identity cite {
    font-family: var(--body);
    font-size: .9rem;
    letter-spacing: .05em;
}

.split--crafted .split__body .btn {
    align-self: flex-start;
}

.split--crafted.reveal-ready .split__media::after { transform: translateY(0); }
.split--crafted.reveal-ready .split__body { opacity: 0; transform: translateX(90px); }
.split--crafted.reveal-ready.is-visible .split__media::after {
    animation: crafted-shutter 1.05s cubic-bezier(.77,0,.18,1) forwards;
}
.split--crafted.reveal-ready.is-visible .split__body {
    animation: crafted-copy-in .9s .25s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes crafted-shutter {
    0% { transform: translateY(0); }
    100% { transform: translateY(101%); }
}

@keyframes crafted-copy-in {
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 680px) {
    .split--crafted {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-inline: 16px;
    }

    .split--crafted .split__media,
    .split--crafted .split__media img { border-radius: 26px; }

    .split--crafted .split__media img {
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
    }

    .split--crafted .split__body {
        width: 100%;
        padding: 26px 22px 24px;
        background: rgba(255, 250, 242, .97);
        border: 1px solid rgba(91, 48, 26, .13);
        border-radius: 24px;
        box-shadow: 0 14px 34px rgba(51, 23, 10, .08);
        text-align: center;
    }

    .split--crafted .split__body .btn {
        align-self: center;
    }

    .split--crafted.reveal-ready .split__body {
        transform: translateY(32px);
    }

    .split--crafted .split__body h2 {
        width: 100%;
        max-width: none;
        margin: 0 0 18px;
        font-size: clamp(1.85rem, 8vw, 2.55rem);
        line-height: 1.1;
    }
}

/* The About page's story blocks: the crafted layout, with copy that runs to several
   paragraphs, as wide as the header's shell so their edges line up with the nav. --flip
   puts the photo on the right on wider screens, so consecutive blocks alternate sides. Instead of the crafted shutter,
   the photo and the copy slide in from opposite sides, each from the side it sits on. */
.about-blocks { overflow-x: clip; }
.about-blocks .section + .section { padding-top: 0; }
.split--crafted.split--about { max-width: var(--shell); padding-inline: var(--gutter); }
.split--about .split__body p:last-of-type { margin-bottom: 28px; }
.split--flip .split__media { order: 2; }

.split--crafted.split--about .split__media::after { display: none; }
.split--about.reveal-ready .split__media { opacity: 0; transform: translateX(-90px); }
.split--about.reveal-ready .split__body { transform: translateX(90px); }
.split--flip.reveal-ready .split__media { transform: translateX(90px); }
.split--flip.reveal-ready .split__body { transform: translateX(-90px); }
.split--about.reveal-ready.is-visible .split__media {
    animation: crafted-copy-in .9s cubic-bezier(.16,1,.3,1) forwards;
}

/* On a desktop the photo stands as tall as its copy. It is taken out of the flow so
   the copy alone sets the row's height, and the photo fills it. */
@media (min-width: 681px) {
    .split--crafted.split--about { align-items: stretch; }
    .split--crafted.split--about .split__media { min-height: 360px; }
    .split--crafted.split--about .split__media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
    .split--crafted.split--about .split__body { padding-block: 12px; }

    /* A little more air between the blocks than the sections' own padding gives. */
    .about-blocks .section + .section { padding-top: clamp(24px, 3.5vw, 56px); }
}

/* On a phone each block is one card: the photo across its top, the copy below, and the
   card rises into place as a whole. */
@media (max-width: 680px) {
    .split--flip .split__media { order: 0; }

    .split--crafted.split--about {
        width: auto;
        margin-inline: 16px;
        padding: 0;
        gap: 0;
        overflow: hidden;
        background: rgba(255, 250, 242, .97);
        border: 1px solid rgba(91, 48, 26, .13);
        border-radius: 24px;
        box-shadow: 0 14px 34px rgba(51, 23, 10, .08);
    }

    .split--crafted.split--about .split__media,
    .split--crafted.split--about .split__media img { border-radius: 0; }

    .split--crafted.split--about.reveal-ready { opacity: 0; transform: translateY(32px); }
    .split--crafted.split--about.reveal-ready.is-visible {
        animation: crafted-copy-in .9s cubic-bezier(.16,1,.3,1) forwards;
    }
    .split--crafted.split--about.reveal-ready .split__media,
    .split--crafted.split--about.reveal-ready .split__body { opacity: 1; transform: none; animation: none; }

    /* Several paragraphs read better left-aligned than centred. */
    .split--crafted.split--about .split__body {
        padding: 24px 22px 26px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: left;
    }
    .split--crafted.split--about .split__body .btn { align-self: flex-start; }

    /* The story is the content here, so it is never cut to two lines as other crafted copy is. */
    .split--crafted.split--about .split__body p {
        display: block;
        overflow: visible;
        -webkit-line-clamp: none;
        line-clamp: none;
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .split--crafted.split--about .split__body p:last-of-type { margin-bottom: 22px; }
    .split--crafted.split--about .split__body h2 { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .split--crafted.reveal-ready .split__media::after { display: none; }
    .split--crafted.reveal-ready .split__body,
    .split--about.reveal-ready .split__media { opacity: 1; transform: none; }
    .split--crafted.split--about.reveal-ready,
    .split--crafted.split--about.reveal-ready.is-visible { opacity: 1; transform: none; animation: none; }
}

/* Text-heavy variant: copy leads, the photo plays a supporting role. */
.split--text-led {
    grid-template-columns: minmax(0, 1.75fr) minmax(240px, 1fr);
    align-items: start;
}

.split--text-led .split__media {
    position: sticky;
    top: 96px;
}

.split--text-led .split__media img {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
}

.split__facts {
    list-style: none;
    margin: 22px 0 26px;
    padding: 0;
    display: grid;
    gap: 10px;
    max-width: 56ch;
}

.split__facts li {
    position: relative;
    padding-left: 26px;
    font-size: .92rem;
    color: var(--muted);
}

.split__facts li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--orange);
}

.split__facts strong {
    color: var(--brown);
}

@media (max-width: 900px) {
    .split--text-led {
        grid-template-columns: minmax(0, 1fr);
    }

    .split--text-led .split__media {
        position: static;
    }

    .split--text-led .split__media img {
        aspect-ratio: 16 / 10;
    }
}

/* ---------- FAQ ---------- */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--section-head-gap);
    margin-bottom: var(--section-content-gap);
}

.faq-section__head h2 {
    font-family: var(--display);
    font-size: var(--section-h2-size);
    line-height: var(--section-h2-line-height);
    margin: 0;
}

.faq-section__head p {
    width: 100%;
    max-width: 80%;
    margin: 0;
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.faq-item {
    background: #fffaf2;
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(1, 56, 45, .07);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    min-height: 90px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--brown);
}

/* Tighten the gap before the answer starts — only when open, so the closed row keeps
   its full click target height. */
.faq-item[open] summary {
    padding-bottom: 10px;
}

.faq-item summary h6, .faq-item summary .faq-item__q {
    all: unset;
    display: block;
    width: 100%;
    font-family: var(--display);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    line-height: 1.15;
    color: inherit;
}

.coffee-cta {
    width: 100%;
    min-height: 680px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 54px 28px 48px;
    position: relative;
    text-align: center;
    background: transparent;
    border-radius: 0;
}

.section--coffee-cta {
    padding-block: clamp(32px, 4vw, 54px);
}

.coffee-cta__body {
    width: min(100%, 820px);
    position: relative;
    z-index: 3;
}

.coffee-cta__body h2 {
    font-family: var(--display);
    font-size: clamp(2.15rem, 4.5vw, 4.25rem);
    line-height: 1.34;
    letter-spacing: -.025em;
    margin-bottom: 0;
}

.coffee-cta__body h2 span {
    display: table;
    margin: 0 auto 8px;
    background: var(--brown);
    color: var(--white);
    border-radius: 7px;
    padding: .08em .28em .12em;
    white-space: nowrap;
}

.coffee-cta__body h2 span:first-child {
    transform: rotate(-1deg);
}

.coffee-cta__body h2 span:last-child {
    background: var(--orange-2);
    transform: rotate(.5deg);
}

.coffee-cta__body h5, .coffee-cta__body .as-h5 {
    max-width: 36ch;
    margin: 25px auto 22px;
    color: var(--muted);
    font-family: var(--display);
    font-weight: 400;
    text-transform: none;
    font-size: var(--band-h5-size);
    line-height: 1.05;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.coffee-cta__drink {
    width: clamp(210px, 19vw, 280px);
    height: clamp(350px, 38vw, 470px);
    object-fit: contain;
    position: absolute;
    top: 28px;
    bottom: auto;
    z-index: 2;
    filter: drop-shadow(0 20px 18px rgba(69, 32, 14, .18));
}

.coffee-cta__drink--left {
    left: max(0px, calc(50% - 590px));
    --drink-rotation: -6deg;
    transform: rotate(var(--drink-rotation));
}

.coffee-cta__drink--right {
    right: max(0px, calc(50% - 590px));
    --drink-rotation: 5deg;
    transform: rotate(var(--drink-rotation));
}

.coffee-cta.reveal-ready .coffee-cta__drink {
    opacity: 0;
    transform: translateY(115%) rotate(var(--drink-rotation));
    transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}

.coffee-cta.reveal-ready .coffee-cta__drink--right { transition-delay: .1s; }

.coffee-cta.reveal-ready.is-visible .coffee-cta__drink {
    opacity: 1;
    transform: translateY(0) rotate(var(--drink-rotation));
}

@media (max-width: 720px) {
    .coffee-cta {
        min-height: 390px;
        padding: 52px 12px 46px;
        border-radius: 0;
    }

    .coffee-cta__body {
        width: 82%;
    }

    .coffee-cta__body h2 {
        font-size: clamp(1.65rem, 8vw, 2.25rem);
        line-height: 1.02;
    }

    .coffee-cta__body h5, .coffee-cta__body .as-h5 {
        max-width: 31ch;
        margin-block: 24px 20px;
        font-size: var(--band-h5-size);
        line-height: 1.05;
    }

    .coffee-cta__drink {
        width: 132px;
        height: 245px;
        top: auto;
        bottom: 0;
    }

    .coffee-cta__drink--left {
        left: -54px;
    }

    .coffee-cta__drink--right {
        right: -48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coffee-cta.reveal-ready .coffee-cta__drink {
        opacity: 1;
        transform: rotate(var(--drink-rotation));
        transition: none;
    }
}

/* Mobile CTA: keep both tall glasses fully inside the viewport. */
@media (max-width: 720px) {
    .coffee-cta {
        min-height: 510px;
        align-items: flex-start;
        padding: 38px 8px 210px;
        overflow: visible;
    }

    .coffee-cta__body { width: 100%; padding-inline: 4px; }
    .coffee-cta__body h2 { font-size: clamp(1.35rem, 6.6vw, 1.9rem); line-height: 1.3; }
    .coffee-cta__drink { width: clamp(104px, 30vw, 130px); height: 230px; bottom: 4px; }
    .coffee-cta__drink--left { left: 8px; }
    .coffee-cta__drink--right { right: 8px; }
}

@media (max-width: 390px) {
    .coffee-cta { min-height: 500px; padding-bottom: 196px; }
    .coffee-cta__drink { width: 102px; height: 210px; }
    .coffee-cta__drink--left { left: 2px; }
    .coffee-cta__drink--right { right: 2px; }
}

/* Mobile: the glasses flank the heading badges near the top instead of
   anchoring to the bottom, shrunk ~35% smaller. Desktop (>720px) and the
   reveal-ready/is-visible slide-up animation are untouched — the animation
   only translates the element, so it still works at this new resting spot. */
@media (max-width: 720px) {
    .coffee-cta {
        padding-bottom: 46px;
        min-height: 460px;
    }

    .coffee-cta__drink {
        width: clamp(56px, 16vw, 70px);
        height: 95px;
        top: 40px;
        bottom: auto;
    }

    .coffee-cta__drink--left { left: 2px; }
    .coffee-cta__drink--right { right: 2px; }
}

@media (max-width: 390px) {
    .coffee-cta {
        min-height: 440px;
        padding-bottom: 42px;
    }

    .coffee-cta__drink {
        width: 54px;
        height: 88px;
        top: 40px;
    }

    .coffee-cta__drink--left { left: 2px; }
    .coffee-cta__drink--right { right: 2px; }
}

/* Phones only: no sub-line, bigger glasses, and "View products" as a plain underlined link rather than a
   button. Desktop keeps the full band. */
@media (max-width: 720px) {
    /* Doubled class so it outranks the small-screen text clamp further down, which sets display. */
    .coffee-cta .coffee-cta__body h5,
    .coffee-cta .coffee-cta__body .as-h5 { display: none; }

    .coffee-cta { min-height: 0; padding-bottom: 40px; }

    .coffee-cta__drink {
        width: clamp(74px, 21vw, 92px);
        height: 128px;
        top: 30px;
    }

    .coffee-cta__body .btn {
        margin-top: 18px;
        padding: 6px 2px;
        min-height: 0;
        height: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--brand-dark-green);
        font-size: .82rem;
        letter-spacing: .14em;
        text-decoration: underline;
        text-decoration-color: var(--brand-lime);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        transform: none;
    }

    .coffee-cta__body .btn:hover { background: transparent; color: var(--brand-lime); transform: none; }
}

@media (max-width: 390px) {
    .coffee-cta__drink { width: 70px; height: 118px; }
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '↓';
    color: var(--orange);
    font-size: 1rem;
    transition: transform .25s ease;
    flex: none;
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item__body {
    padding: 0 22px 20px;
    font-size: .9rem;
    color: var(--muted);
    max-width: none;
}

/* Reference FAQ presentation and scroll entrance. */
.faq-item summary::after { font-family: Arial, sans-serif; font-size: 2rem; font-weight: 300; }
.faq-item__body { padding: 0 32px 30px; line-height: 1.55; color: #000; }

/* Brand legibility pass: keep the existing layout while making storefront copy easier to scan. */
body { font-size: 18px; }
.eyebrow,
.main-nav a,
.nav-account__link,
.tabs .tab { font-size: .88rem; }
.section-head p { font-size: 1.06rem; }
.product-card__rating { font-size: .84rem; }
.product-card__badge { font-size: .76rem; }
.product-card__name {
    font-size: clamp(1.47rem, 1.78vw, 1.98rem);
    line-height: 1.08;
    min-height: 3.24em;
}
.product-card__hover-category { font-size: .84rem; }
.product-card__hover-text { font-size: 1.08rem; }
.product-card__hover-meta { font-size: .96rem; }
.product-card__hover-cue { font-size: .86rem; }
.product-card__quick-add {
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: .025em;
}
.product-card__link { font-size: .82rem; }
.price {
    font-size: clamp(1.28rem, 1.45vw, 1.48rem);
    line-height: 1.12;
}
.product-card .price {
    font-size: clamp(1.84rem, 2.08vw, 2.13rem);
}
.product-card .price del {
    font-size: 1.37rem;
}
/* Dashboard amounts keep the storefront's face and pound sign (.currency-sign) at two sizes. The
   page's main figure uses the product-card price size; table rows and cards use the storefront's
   standard price size, so a column of prices does not overpower the rows around it. */
.price--headline {
    font-size: clamp(1.84rem, 2.08vw, 2.13rem);
    line-height: 1.12;
    white-space: nowrap;
}

.price--compact {
    font-size: clamp(1.28rem, 1.45vw, 1.48rem);
    line-height: 1.12;
    white-space: nowrap;
}
/* The same face and pound sign inside a sentence, at the sentence's own size. */
.price--inline {
    font-size: inherit;
    line-height: inherit;
    white-space: nowrap;
}
.faq-item summary h6, .faq-item summary .faq-item__q {
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    line-height: 1.15;
}
.faq-item__body { font-size: var(--section-subtext-size); max-width: none; }
.footer-col a,
.footer-col li { font-size: 1rem; }
.faq-list.reveal-ready .faq-item { opacity: 0; transform: translateY(54px) scale(.94); }
.faq-list.reveal-ready.is-visible .faq-item { animation: faq-pop-in .7s cubic-bezier(.16,1,.3,1) forwards; }
.faq-list.reveal-ready.is-visible .faq-item:nth-child(2) { animation-delay: .1s; }
.faq-list.reveal-ready.is-visible .faq-item:nth-child(3) { animation-delay: .2s; }
.faq-list.reveal-ready.is-visible .faq-item:nth-child(4) { animation-delay: .3s; }
.faq-list.reveal-ready.is-visible .faq-item:nth-child(5) { animation-delay: .4s; }

@keyframes faq-pop-in {
    70% { opacity: 1; transform: translateY(-5px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
    .faq-section__head { margin-bottom: 32px; gap: 10px; }
    .faq-section__head h2 {
        font-size: var(--section-h2-size-mobile);
        line-height: var(--section-h2-line-height-mobile);
    }
    .faq-item { border-radius: 18px; }
    .faq-item summary { min-height: 82px; padding: 23px 20px; }
    .faq-item__body { padding: 0 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .faq-list.reveal-ready .faq-item { opacity: 1; transform: none; animation: none; }
}

/* Image panel that sits beside the FAQ accordion. */
.faq-aside {
    width: 100%;
    aspect-ratio: 3 / 4;
    justify-self: center;
    background: var(--cream-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: sticky;
    top: 96px;
}

.faq-aside img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 960px) {
    .faq-aside {
        display: none;
    }
}

/* ---------- CTA ---------- */
.cta {
    background: var(--cream-2);
    border-radius: var(--radius-lg);
    padding: clamp(34px, 5vw, 64px);
    display: grid;
    /* Copy gets the wider column so it balances the photograph. */
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

.cta__body p {
    max-width: 62ch;
}

.cta__points {
    list-style: none;
    margin: 20px 0 26px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.cta__points li {
    position: relative;
    padding-left: 26px;
    font-size: .9rem;
    color: var(--brown);
    font-weight: 500;
}

.cta__points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: 700;
}

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

.cta__title {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    margin: 0 0 .4em;
}

.cta__title .mark {
    background: var(--brown);
    color: var(--cream);
    border-radius: 12px;
    padding: .04em .22em;
    display: inline-block;
}

.cta p {
    color: var(--muted);
    max-width: 44ch;
}

.cta__media img {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

/* ---------- Marquee ---------- */
.marquee {
    background: var(--orange);
    color: var(--white);
    overflow: hidden;
    padding: 28px 0;
}

.marquee__track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: marquee 26s linear infinite;
    font-family: var(--display);
    text-transform: uppercase;
    font-size: var(--h3-size);
    letter-spacing: .05em;
}

.marquee__track span {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    white-space: nowrap;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--brand-dark-green);
    background-image: linear-gradient(rgba(1, 56, 45, .97), rgba(1, 56, 45, .99)), url('../images/site/orocafe-pattern.webp');
    background-size: cover, cover;
    background-position: center;
    color: var(--cream-2);
    padding: clamp(32px, 4vw, 52px) 0 0;
    overflow: hidden;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(28px, 3.6vw, 46px);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cream);
    font-family: var(--display);
    font-size: 1.5rem;
    text-transform: uppercase;
}

.footer-brand img {
    display: block;
    width: clamp(336px, 36.4vw, 476px);
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) minmax(180px, 1fr);
    column-gap: clamp(50px, 9vw, 150px);
    align-items: start;
}

.footer-col:nth-child(1) { justify-self: start; }
.footer-col:nth-child(2) { justify-self: center; width: min(100%, 310px); text-align: center; }
.footer-col:nth-child(3) { justify-self: end; text-align: right; }

.footer-col h3 {
    color: var(--cream);
    font-size: var(--band-h5-size);
    letter-spacing: 0;
    margin-bottom: 10px;
    font-family: var(--display);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-col a,
.footer-col li {
    color: rgba(247, 240, 226, .82);
    font-size: 1.3rem;
    line-height: 1.15;
}

.footer-menu a,
.footer-col:last-child a {
    font-family: var(--display);
    font-size: var(--band-h5-size);
    text-transform: uppercase;
    color: var(--cream);
}

.footer-col a:hover {
    color: var(--orange);
}

.footer-bottom {
    margin-top: clamp(28px, 3.4vw, 42px);
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    font-size: 1.08rem;
    color: rgba(247, 240, 226, .6);
}

.footer-legal { display: flex; gap: 28px; }
.footer-legal a { color: inherit; font-size: inherit; }

.footer-back-top {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}

.footer-back-top span {
    color: var(--brand-bright-lime);
    font-size: 1.45em;
    font-weight: 800;
    line-height: .75;
}

@media (max-width: 700px) {
    :root {
        --gutter: 18px;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 10.5vw, 3.3rem);
        line-height: .9;
    }

    .hero--reference .hero__inner {
        padding-top: 0;
    }

    .band__line {
        white-space: normal;
    }

    .site-footer {
        padding: 34px 0 0;
        background-image: linear-gradient(rgba(1, 56, 45, .97), rgba(1, 56, 45, .99)), url('../images/site/orocafe-pattern.webp');
        background-size: cover, cover;
        background-position: center;
    }

    .footer-top {
        align-items: center;
        justify-content: center;
        margin-bottom: 38px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-brand img {
        width: min(322px, 95vw);
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        border: 0;
    }

    .footer-col,
    .footer-col:nth-child(1),
    .footer-col:nth-child(2),
    .footer-grid .footer-col:last-child {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: left;
    }

    .footer-col:first-child {
        padding: 0;
        background: transparent;
    }

    .footer-col:nth-child(2) {
        grid-column: 1 / -1;
        text-align: left;
    }

    .footer-grid .footer-col:last-child {
        grid-column: 1 / -1;
    }

    .footer-col h3 {
        margin: 0 0 16px;
        color: var(--cream);
        font-size: var(--band-h5-size);
    }

    .footer-col ul {
        gap: 11px;
    }

    .footer-col a,
    .footer-col li,
    .footer-menu a,
    .footer-col:last-child a {
        font-size: 1.14rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .footer-menu {
        display: flex !important;
        gap: 11px !important;
    }

    .footer-menu a {
        display: inline;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--cream);
        font-size: var(--band-h5-size);
    }

    .footer-col:last-child ul {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        gap: 11px !important;
    }

    .footer-col:last-child a {
        display: inline;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: var(--band-h5-size);
    }

    .footer-bottom {
        align-items: flex-start;
        margin-top: 38px;
        padding: 20px 0 28px;
            flex-direction: column;
        gap: 16px;
        line-height: 1.4;
        font-size: 1.04rem;
        text-align: left;
    }

    .footer-legal {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }

    .footer-legal a {
        padding: 0;
        border: 0;
        border-radius: 0;
    }
}

/* Mobile + tablet footer: Follow sits beside the nav links (right-aligned, mirroring
   them) instead of stacked at the bottom, Contact centers as its own row below, and
   the copyright/privacy line sits close together instead of stretched edge to edge.
   Desktop (>1024px) keeps the original three-column layout untouched. */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(20px, 6vw, 60px);
        row-gap: 34px;
    }

    .footer-col:first-child {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: auto;
        text-align: left;
    }

    .footer-grid .footer-col:last-child {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: auto;
        text-align: right;
    }

    .footer-col:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: min(100%, 320px);
        text-align: center;
    }

    /* Copyright left, Privacy policy right — same spread as desktop, just row
       layout instead of column. */
    /* Copyright, Privacy policy and Cookies stay on one line, down to the narrowest phone. */
    .footer-bottom {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        white-space: nowrap;
    }

    .footer-legal {
        width: auto;
        justify-content: flex-end;
        gap: 14px;
    }
}

@media (max-width: 400px) {
    .footer-bottom {
        gap: 10px;
        font-size: .92rem;
    }

    .footer-legal {
        gap: 10px;
    }
}


/* ---------- Product detail ---------- */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 4vw, 60px);
    align-items: start;
}

.product-detail__info {
    min-width: 0;
    padding-top: clamp(4px, 1vw, 18px);
}

/* Fixed frame so every product page is the same height whatever the source image is. */
.product-detail__media {
    background: var(--cream-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: clamp(360px, 52vw, 560px);
}

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

.product-detail__rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: .82rem;
    color: var(--muted);
}

.product-detail__name {
    font-size: clamp(2.2rem, 4.3vw, 4rem);
}

.product-detail .price {
    font-size: 2.28rem;
    margin-bottom: 10px;
}

.product-detail__desc-wrap {
    margin-bottom: 18px;
}

.product-detail__desc {
    font-size: 1.13rem;
}

.product-detail__desc.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.product-detail__readmore-btn {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 2px;
    font-family: var(--body);
    font-size: .95rem;
    font-weight: 700;
    color: var(--orange-2);
    text-decoration: underline;
    cursor: pointer;
}

.product-detail__highlights {
    margin: 0 0 22px;
}

.product-detail__highlights h2 {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.product-detail__highlights ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.25rem;
}

.product-detail__highlights li {
    line-height: 1.5;
}

/* Product detail gallery */
.gallery {
    min-width: 0;
}

/* Keep the product imagery in view while the longer details column is read.
   Sticky positioning is bounded by .product-detail, so the gallery releases
   naturally once the bottoms of both columns meet. */
@media (min-width: 861px) {
    .product-detail {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    }

    .product-detail > .gallery {
        position: sticky;
        top: 112px;
        align-self: start;
    }
}

.gallery__stage {
    position: relative;
    overflow: visible;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 1.08 / 1;
    height: auto;
    max-height: 600px;
    background: transparent;
}

.gallery__track {
    display: flex;
    width: min(100%, 600px);
    height: 100%;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 34px;
    clip-path: inset(0 round 34px);
    background: var(--cream-2);
    isolation: isolate;
}

.gallery__track::-webkit-scrollbar {
    display: none;
}

.gallery__slide {
    display: none;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border-radius: 34px;
    clip-path: inset(0 round 34px);
}

.gallery__slide.is-active {
    display: grid;
}

.gallery__slide img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 34px !important;
    clip-path: inset(0 round 34px);
}

.gallery__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    translate: 0 -50%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 65, 51, .92);
    color: var(--white);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background-color .2s ease;
}

/* An SVG chevron, not a text arrow: a text glyph sits on the font's baseline and never centres. */
.gallery__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gallery__nav:hover { background: var(--brand-dark-green); }

.gallery__nav--prev { left: 14px; }
.gallery__nav--next { right: 14px; }

.gallery__badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    border-radius: 999px;
    padding: 7px 13px;
    background: #b3261e;
    color: var(--white);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* The strip is exactly as wide as the main image. "safe center" centres a short strip but, unlike
   plain center, never pushes the first thumbnails out of reach when the strip overflows. It glides
   and snaps a thumbnail at a time, with no scrollbar and softly faded edges. */
.gallery__thumbs {
    display: flex;
    justify-content: safe center;
    gap: 10px;
    width: min(100%, 600px);
    margin-inline: auto;
    overflow-x: auto;
    padding: 12px 4px 4px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.gallery__thumbs::-webkit-scrollbar { display: none; }

.gallery__thumb {
    flex: 0 0 76px;
    width: 76px;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f3f1ee;
    cursor: pointer;
    scroll-snap-align: start;
    opacity: .75;
    transition: border-color .2s ease, opacity .2s ease;
}

.gallery__thumb:hover { opacity: 1; }

.gallery__thumb.is-active {
    border-color: var(--orange);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .gallery__thumbs { scroll-behavior: auto; }
}

.gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 860px) {
    .product-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .product-detail__info {
        padding-top: 4px;
        text-align: left;
    }

    .product-detail__rating {
        justify-content: flex-start;
    }

    .product-meta {
        justify-items: start;
    }

    .add-to-cart {
        justify-content: flex-start;
    }

    .product-detail__highlights,
    .product-detail__highlights h2,
    .product-detail__highlights ul,
    .product-detail__desc,
    .product-detail .price,
    .product-detail .eyebrow,
    .product-detail__name,
    .product-detail .notice {
        text-align: left;
    }

    .gallery__stage {
        aspect-ratio: 1 / 1;
        height: clamp(320px, 92vw, 500px);
    }
}

#product-faqs h2 {
    width: 100%;
    max-width: none;
    margin: 0 0 14px;
    font-size: var(--h2-size);
    line-height: 1.06;
}

#product-faqs .product-faqs__main {
    min-width: 0;
}

#product-faqs .product-faqs__heading-label,
#product-faqs .product-faqs__heading-name {
    overflow-wrap: anywhere;
}

#product-faqs .faq-layout > div > .eyebrow {
    margin: 0 0 9px;
    font-size: 1rem;
    line-height: 1.15;
}

#product-faqs .faq-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr);
    gap: clamp(24px, 3vw, 44px);
}

#product-faqs .faq-list {
    gap: 10px;
}

/* The same square, uncropped presentation as the gallery above; the column width is unchanged. The
   product photos are square, so the old 3:4 frame with object-fit: cover cut off both sides. */
#product-faqs .faq-aside {
    aspect-ratio: 1 / 1;
    border-radius: 34px;
}

#product-faqs .faq-aside img {
    object-fit: contain;
}

#product-faqs .faq-item summary {
    min-height: 70px;
    padding: 18px 24px;
}

#product-faqs .faq-item[open] summary {
    padding-bottom: 8px;
}

#product-faqs .faq-item__body {
    max-width: none;
    padding: 0 24px 18px;
    line-height: 1.42;
}

@media (max-width: 680px) {
    #product-faqs {
        padding-block: 42px;
    }

    #product-faqs .faq-layout {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    #product-faqs .product-faqs__main {
        min-width: 0;
        width: 100%;
        padding: 20px 16px 16px;
        border: 1px solid rgba(1, 56, 45, .1);
        border-radius: 22px;
        background: rgba(255, 250, 242, .94);
        box-shadow: 0 12px 30px rgba(1, 56, 45, .06);
    }

    #product-faqs .faq-aside {
        min-width: 0;
        width: 100%;
    }

    #product-faqs .product-faqs__main > .eyebrow {
        text-align: center;
    }

    #product-faqs h2 {
        margin-bottom: 18px;
        font-size: var(--h2-size);
        line-height: 1;
        text-align: center;
    }

    #product-faqs .product-faqs__heading-label,
    #product-faqs .product-faqs__heading-name {
        display: block;
        width: 100%;
    }

    #product-faqs .product-faqs__heading-label {
        font-size: clamp(1.65rem, 7.5vw, 2.15rem);
        line-height: 1.02;
    }

    #product-faqs .product-faqs__heading-name {
        margin-top: 7px;
        color: var(--orange-2);
        font-family: var(--body);
        font-size: clamp(1.05rem, 4.8vw, 1.35rem);
        font-weight: 750;
        line-height: 1.2;
        text-transform: none;
    }

    #product-faqs .faq-layout > div > .eyebrow {
        margin-bottom: 7px;
        font-size: .92rem;
    }

    #product-faqs .faq-item summary {
        min-height: 62px;
        padding: 15px 18px;
    }

    #product-faqs .faq-item__body {
        padding: 0 18px 15px;
        line-height: 1.38;
    }
}

.product-meta {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    gap: 10px;
    font-size: .99rem;
    color: var(--muted);
}

.product-meta strong {
    color: var(--brown);
    font-weight: 700;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Extra breathing room before the gallery/info grid starts. */
[data-product-detail-id] .breadcrumb {
    margin-bottom: 34px;
}

.notice {
    background: var(--cream-2);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 1.05rem;
    color: var(--brown);
}

/* ---------- Cart & checkout ---------- */
.shell:has(> .cart-title) > .eyebrow,
.shell:has(> .checkout-title) > .eyebrow {
    text-align: center;
}

.cart-title,
.checkout-title {
    text-align: center;
    /* Same scale as the plain h1 tag. */
    font-size: var(--h1-size);
    line-height: 1.05;
    margin-bottom: 32px;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: start;
}

.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-line {
    display: grid;
    grid-template-columns: 28px 88px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.cart-line__select {
    display: grid;
    place-items: center;
    align-self: stretch;
    cursor: pointer;
}

.cart-line__select input {
    width: 20px;
    height: 20px;
    accent-color: var(--lime);
    cursor: pointer;
}

#cart-checkout-form { width: 100%; }

.checkout-notice { margin-bottom: 24px; }

/* ---------- Stripe checkout: button, trust note and redirect loader ----------
   Styled in Stripe's own colours (blurple #635BFF, navy #0A2540, slate #425466) so the customer
   recognises the payment step before they are handed to Stripe. */
.stripe-wordmark {
    display: block;
    width: auto;
    height: 1.45em;
    flex: none;
}

.stripe-lock {
    width: 1em;
    height: 1em;
    flex: none;
}

.btn--stripe {
    gap: 10px;
    background: #635bff;
    color: #fff;
    box-shadow: 0 10px 24px rgba(99, 91, 255, .28);
}

.btn--stripe:hover,
.btn--stripe:focus-visible {
    background: #5249f5;
    color: #fff;
    transform: translateY(-2px);
}

.btn--stripe:focus-visible {
    outline: 3px solid rgba(99, 91, 255, .45);
    outline-offset: 2px;
}

.btn--stripe:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn--stripe .stripe-wordmark {
    /* The wordmark's bowl sits high in its box; nudge it onto the label's baseline. */
    margin-top: 2px;
}

/* The button has a fixed 55px height, so the label must never wrap onto a second line. */
.btn--stripe [data-stripe-redirect-label] {
    white-space: nowrap;
}

@media (max-width: 420px) {
    .btn--stripe {
        gap: 7px;
        padding-inline: 14px;
        font-size: .82rem;
        letter-spacing: .06em;
    }
}

/* On the narrowest phones "Pay with [stripe]" still fits where "Pay securely with" does not; the
   lock icon and the trust note underneath keep the security message. */
@media (max-width: 359px) {
    .btn--stripe__optional {
        display: none;
    }
}

.stripe-trust {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    color: #425466;
    font-size: .92rem;
    line-height: 1.5;
}

.stripe-trust .stripe-lock {
    margin-top: .25em;
    color: #635bff;
}

.checkout-loader {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 37, 64, .55);
    backdrop-filter: blur(5px);
}

.checkout-loader[hidden] { display: none; }

.checkout-loader__card {
    width: min(420px, 100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 34px;
    border-radius: 16px;
    background: #fff;
    color: #425466;
    text-align: center;
    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .3);
}

.checkout-loader__card strong {
    color: #0a2540;
    font-size: 1.1rem;
}

.checkout-loader__card > .stripe-wordmark {
    height: 38px;
    margin-bottom: 4px;
    color: #635bff;
}

.checkout-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 91, 255, .18);
    border-top-color: #635bff;
    border-radius: 50%;
    animation: checkout-spin .75s linear infinite;
}

.checkout-loader__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: .82rem;
}

.checkout-loader__secure .stripe-lock {
    color: #635bff;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-loader__spinner {
        animation-duration: 2s;
    }
}

@keyframes checkout-spin { to { transform: rotate(360deg); } }

.cart-line img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--cream-3);
}

.cart-line__name {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--brown);
    margin: 0 0 4px;
}

.cart-line__meta {
    font-size: 1.15rem;
    color: var(--muted);
    margin: 0;
}

.cart-line__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.qty-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-form input {
    width: 68px;
    height: 38px;
    padding: 8px 10px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--body);
    color: var(--ink);
    box-sizing: border-box;
}

.cart-update {
    height: 38px;
    padding: 9px 16px;
    border: 1px solid var(--brown);
    border-radius: 9px;
    background: var(--brown);
    color: var(--cream);
    font-family: var(--display);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.cart-update:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
    transform: translateY(-2px);
}

.cart-update:focus-visible {
    outline: 3px solid rgba(238, 122, 46, .38);
    outline-offset: 2px;
}

.link-danger {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b3261e;
    cursor: pointer;
}

.summary {
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 26px 24px;
    position: sticky;
    top: 96px;
}

.summary h2 {
    font-size: var(--h2-size);
    line-height: 1.05;
    margin-bottom: 18px;
}

.summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 1.12rem;
    color: var(--muted);
}

.summary__row--total {
    border-top: 1px solid var(--line);
    margin-top: 8px;
    padding-top: 16px;
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 1.6rem;
    color: var(--brown);
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    margin: 0;
    position: absolute;
    top: -6px;
    right: -6px;
    border: 2px solid var(--cream);
    line-height: 1;
}

.add-to-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.add-to-cart__qty-label {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.add-to-cart input[type="number"] {
    width: 76px;
    height: 52px;
    padding: 0 10px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--body);
    color: var(--ink);
}

.add-to-cart .btn {
    height: 52px;
    padding-block: 0;
}

/* ---------- Order status ---------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status--pending {
    background: #fdf1dd;
    color: #9a6414;
}

.status--inprogress {
    background: #e2eefb;
    color: #17548f;
}

.status--completed {
    background: #e7f4ea;
    color: #1e5c22;
}

.status--cancelled {
    background: #fdecea;
    color: #8c1d18;
}

/* Payment status uses the same shape/colour language as order status above, kept as its own set of
   modifiers since the two are independent concepts (see OroCafe.Data.Entities.PaymentStatus). */
.status--unpaid {
    background: #fdf1dd;
    color: #9a6414;
}

.status--processing {
    background: #e2eefb;
    color: #17548f;
}

.status--paid {
    background: #e7f4ea;
    color: #1e5c22;
}

.status--failed {
    background: #fdecea;
    color: #8c1d18;
}

/* ---------- Order tables ---------- */
.order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.03rem;
}

.order-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: .85rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.order-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.order-table tfoot td {
    border-bottom: 0;
    font-weight: 700;
    color: var(--brown);
}

.order-table tfoot tr:last-child td {
    font-size: 1.3rem;
}

.order-table .num {
    text-align: right;
    white-space: nowrap;
}

.order-card {
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.order-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
}

.order-card__number {
    font-family: var(--display);
    text-transform: uppercase;
    color: var(--brown);
    font-size: 1.2rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.detail-grid dt {
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.detail-grid > div { min-width: 0; }

/* A long email or address wraps inside its own column instead of running into the next one. */
.detail-grid dd {
    margin: 0;
    font-size: 1.18rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .cart-title,
    .checkout-title { margin-bottom: 24px; }
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .summary {
        position: static;
    }

    .cart-line {
        grid-template-columns: 28px 64px minmax(0, 1fr);
    }

    .cart-line img {
        width: 64px;
        height: 64px;
    }

    .cart-line__actions {
        grid-column: 2 / -1;
        justify-content: center;
    }

    .summary h2 {
        text-align: center;
    }

    .cart-lines form {
        text-align: center;
    }
}

/* ---------- Empty state ---------- */
.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    background: var(--cream-2);
    border-radius: var(--radius);
}

/* ---------- Error pages ---------- */
.error-page {
    min-height: 62vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 80px 0;
}

.error-page__code {
    font-family: var(--display);
    font-size: clamp(5rem, 18vw, 12rem);
    color: var(--orange);
    line-height: .9;
    margin: 0;
}

.error-page h1 {
    font-size: var(--h1-size);
    margin: 18px 0 12px;
}

.error-page p {
    color: #000;
    max-width: 46ch;
    margin-inline: auto;
}

.error-page__id {
    margin-top: 22px;
    font-size: .74rem;
    color: #000;
    word-break: break-all;
}

/* ---------- 404 ---------- */
.not-found {
    padding-block: clamp(48px, 8vw, 96px);
}

.not-found__inner {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
}

.not-found__art svg {
    width: 100%;
    height: auto;
    max-width: 340px;
    margin-inline: auto;
}

.not-found__code {
    font-family: var(--display);
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--orange);
    line-height: 1;
    margin: 0 0 6px;
}

.not-found__body h1 {
    font-size: var(--h1-size);
    margin-bottom: 14px;
}

.not-found__lede {
    color: #000;
    max-width: 46ch;
    font-size: 1rem;
}

.not-found__hint {
    margin-top: 26px;
    font-size: .88rem;
    color: #000;
}

@media (max-width: 760px) {
    .not-found__inner {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .not-found__art svg {
        max-width: 240px;
    }

    .not-found__lede {
        margin-inline: auto;
    }

    .not-found .form-actions {
        justify-content: center;
    }
}

/* ---------- Auth (Identity) pages ---------- */
.auth {
    min-height: 70vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Register mirrors login: form on the left, image on the right — but only
   once there's room to sit side by side. On mobile every auth page keeps the
   same top-to-bottom structure (image, then form), so the swap is desktop-only. */
@media (min-width: 701px) {
    .auth--reversed .auth__aside {
        order: 2;
    }

    .auth--reversed .auth__panel {
        order: 1;
    }
}

.auth__aside {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: clamp(32px, 5vw, 64px);
    color: var(--white);
    isolation: isolate;
    min-height: 320px;
}

.auth__aside img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.auth__aside::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(51, 23, 10, .30), rgba(51, 23, 10, .78));
    z-index: -1;
}

.auth__aside h1 {
    color: var(--white);
    font-size: clamp(2.4rem, 4.6vw, 3.8rem);
    line-height: .96;
    max-width: 23ch;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.auth__aside p {
    color: rgba(255, 250, 242, .82);
    max-width: 34ch;
    margin: 0;
    font-size: var(--section-subtext-size);
    line-height: 1.4;
}

.auth__panel {
    display: grid;
    place-items: center;
    padding: clamp(36px, 5vw, 72px) var(--gutter);
}

.auth-card {
    width: 100%;
    max-width: 460px;
}

.auth-card h2 {
    font-size: var(--h2-size);
    line-height: 1.05;
    margin-bottom: 8px;
}

.auth-card__lede {
    color: #000;
    margin-bottom: 28px;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

@media (max-width: 700px) {
    .auth-card h2,
    .auth-card__lede {
        text-align: center;
    }

    .auth__aside {
        justify-content: center;
        text-align: center;
    }

    .auth__aside h1 {
        margin-inline: auto;
    }

    .auth__aside p {
        margin-inline: auto;
    }
}

.auth-card__foot {
    margin-top: 24px;
    font-size: 1.05rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: space-between;
}

/* ---------- Account management (Identity /Manage) ---------- */
.account-page-title {
    font-size: var(--h1-size);
    line-height: 1.05;
    margin-bottom: 28px;
}

.account-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(22px, 3vw, 46px);
    align-items: start;
    margin-top: 0;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--cream-2);
    border-radius: var(--radius);
    padding: 12px;
}

.account-nav a {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 1.03rem;
    font-weight: 500;
    color: var(--brown);
}

.account-nav a:hover {
    background: rgba(238, 122, 46, .12);
}

.account-nav a.active {
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
}

.account-content {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(22px, 3vw, 34px);
    /* Fill the column beside the nav on every account page rather than a narrow form-card width. */
    max-width: none;
}

/* Below the drawer breakpoint the drawer lists every account page, so the tabs would only repeat it. */
@media (max-width: 860px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-nav {
        display: none;
    }
}

@media (max-width: 800px) {
    .shell:has(> .account-page-title) > .eyebrow,
    .account-page-title {
        text-align: center;
    }

}

/* ---------- Forms ---------- */
.form-grid {
    display: grid;
    gap: 18px;
}

.form-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field label,
.form-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brown);
}

.field input,
.field select,
.field textarea,
.form-control,
.form-select {
    width: 100%;
    height: 55px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 15px;
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field textarea {
    height: auto;
    min-height: 130px;
    padding-block: 12px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(238, 122, 46, .18);
}

.field--check {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.field--check input {
    width: 18px;
    height: 18px;
    accent-color: var(--orange);
    flex: none;
}

/* Stripe Elements mounts its own iframe inside this div, so it gets the same box treatment as
   .form-control above (matching height/border/radius) with the focus ring toggled by JS instead of
   a native :focus pseudo-class. */
.stripe-card-element {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.stripe-card-element > div {
    width: 100%;
}

.stripe-card-element--focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(238, 122, 46, .18);
}

.stripe-card-element--invalid {
    border-color: #c4544c;
}

.field--check label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
}

.field__hint {
    font-size: .78rem;
    color: var(--muted);
}

.text-danger,
.field-validation-error,
.validation-summary-errors ul {
    color: #b3261e;
    font-size: .82rem;
}

/* ASP.NET renders the summary element on every page and only fills it when something failed,
   so without this an empty red box sat above every clean form. */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    background: #fdecea;
    border-left: 4px solid #b3261e;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 18px;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.input-validation-error {
    border-color: #b3261e !important;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

#menu .form-actions {
    justify-content: center;
}

/* Mobile robustness for orders, confirmation and account security screens. */
.cart-remove { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid rgba(179,38,30,.25); border-radius: var(--radius-sm); background: transparent; color: #b3261e; cursor: pointer; transition: background-color .2s ease,color .2s ease,transform .2s ease; box-sizing: border-box; }
.cart-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cart-remove:hover { background: #b3261e; color: var(--white); transform: translateY(-2px); }
.account-subhead--danger { margin-top: 42px !important; }

.setup-steps { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 22px; }
.setup-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 14px; min-width: 0; }
.setup-step__num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--white); font-family: var(--display); font-size: .72rem; }
.setup-step__body,.qr-panel__manual { min-width: 0; }
.qr-panel { display: grid; grid-template-columns: minmax(150px,190px) minmax(0,1fr); gap: 20px; align-items: center; margin-top: 18px; }
.qr-panel__code svg { display: block; width: 100%; height: auto; max-width: 190px; background: white; padding: 8px; }
.qr-panel__key { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; padding: 10px; background: var(--cream-2); border-radius: 8px; }

.confirmation-page > .shell > .eyebrow,
.confirmation-page h1,
.confirmation-page > .shell > p:not(.eyebrow) {
    text-align: center;
}

.confirmation-page > .shell > p:not(.eyebrow) {
    max-width: 56ch;
    margin-inline: auto;
    font-size: 1.15rem;
}

.confirmation-page .form-actions {
    justify-content: center;
}

@media (max-width: 640px) {
    .confirmation-page .shell { padding-inline: 18px; }
    .confirmation-page h1 { line-height: 1.4; }
    .confirmation-page .order-card { padding: 18px 14px; min-width: 0; }
    .confirmation-page .detail-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .confirmation-page .detail-grid dd { overflow-wrap: anywhere; }
    .confirmation-page .form-actions .btn { width: 100%; }
    .order-items-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
    .order-items-table-wrap .order-table,
    .order-items-table-wrap .order-table tbody,
    .order-items-table-wrap .order-table tfoot,
    .order-items-table-wrap .order-table tr,
    .order-items-table-wrap .order-table td {
        display: block;
        width: 100%;
    }
    .order-items-table-wrap .order-table thead { display: none; }
    .order-items-table-wrap .order-table tbody {
        display: grid;
        gap: 12px;
    }
    .order-items-table-wrap .order-table tbody tr {
        padding: 15px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--cream-2);
    }
    .order-items-table-wrap .order-table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0;
        border: 0;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .order-items-table-wrap .order-table tbody td:first-child {
        display: block;
        padding: 0 0 10px;
        margin-bottom: 3px;
        border-bottom: 1px solid var(--line);
        color: var(--brown);
        font-weight: 700;
        text-align: left;
    }
    .order-items-table-wrap .order-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--muted);
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .order-items-table-wrap .order-table tbody td:first-child::before { display: none; }
    .order-items-table-wrap .order-table tfoot {
        margin-top: 16px;
        padding-top: 10px;
        border-top: 2px solid var(--brown);
    }
    .order-items-table-wrap .order-table tfoot tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px;
    }
    .order-items-table-wrap .order-table tfoot td {
        padding: 7px 0;
        border: 0;
        text-align: right;
    }
    .order-items-table-wrap .order-table tfoot td:first-child { text-align: left; }
    .order-items-table-wrap .order-table tfoot tr:last-child {
        margin-top: 5px;
        padding-top: 9px;
        border-top: 1px solid var(--line);
        font-size: 1.05rem;
    }
    .account-content { min-width: 0; width: 100%; padding: 18px 14px; overflow: hidden; }
    .setup-step { grid-template-columns: 30px minmax(0,1fr); gap: 10px; }
    .setup-step__num { width: 28px; height: 28px; font-size: .62rem; }
    .setup-step__body h3 { line-height: 1.2; }
    .qr-panel { grid-template-columns: minmax(0,1fr); }
    .qr-panel__code svg { margin-inline: auto; max-width: 170px; }
    .verify-form__code { width: 100%; max-width: 100%; }
    .verify-form__actions { width: 100%; }
    .verify-form__actions .btn { flex: 1 1 0; padding-inline: 10px; font-size: .67rem; }
}

.verify-form__actions {
    flex-wrap: nowrap;
    align-items: center;
}

.verify-form__actions .btn {
    white-space: nowrap;
    height: 48px;
    min-height: 48px;
    min-width: 0;
    padding-block: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 420px) {
    .verify-form__actions { gap: 8px; }
    .verify-form__actions .btn {
        padding-inline: 6px;
        font-size: clamp(.6rem, 2.8vw, .72rem);
        letter-spacing: .03em;
    }
    .verify-form__actions .btn--primary { flex: 2 1 0; }
    .verify-form__actions .btn--ghost { flex: 1 1 0; }
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    font-size: .9rem;
    margin-bottom: 20px;
}

.alert--success {
    background: #e7f4ea;
    border-left: 4px solid #2e7d32;
    color: #1e5c22;
}

.alert--error,
.alert-danger {
    background: #fdecea;
    border-left: 4px solid #b3261e;
    color: #8c1d18;
}

.alert-success {
    background: #e7f4ea;
    border-left: 4px solid #2e7d32;
    color: #1e5c22;
}

/* ---------- Toast notifications ---------- */
.toast-stack {
    position: fixed;
    z-index: 500;
    top: 22px;
    right: 22px;
    width: min(390px, calc(100vw - 44px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    --toast-accent: #327a42;
    --toast-surface: #f1fbf3;
    --toast-ink: #205b2d;
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 11px;
    min-height: 76px;
    padding: 15px 13px 17px 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 30%, var(--cream-3));
    border-left: 5px solid var(--toast-accent);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(238, 122, 46, .1), transparent 34%),
        var(--toast-surface);
    color: var(--toast-ink);
    box-shadow: 0 18px 50px rgba(51, 23, 10, .2);
    pointer-events: auto;
    animation: toast-enter .42s cubic-bezier(.16, 1, .3, 1) both;
}

.toast--warning {
    --toast-accent: #bd7610;
    --toast-surface: #fff7e7;
    --toast-ink: #80500d;
}

.toast--danger {
    --toast-accent: #b3261e;
    --toast-surface: #fff0ee;
    --toast-ink: #861d18;
}

.toast--info {
    --toast-accent: #356b9a;
    --toast-surface: #edf7ff;
    --toast-ink: #285779;
}

.toast__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 24%, transparent);
    background: var(--white);
    color: var(--toast-accent);
    font-size: 1.05rem;
    font-weight: 800;
}

.toast--success .toast__icon::before { content: '✓'; }
.toast--warning .toast__icon::before { content: '!'; }
.toast--danger .toast__icon::before { content: '×'; }
.toast--info .toast__icon::before { content: 'i'; }

.toast__message {
    margin: 0;
    color: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.45;
}

.toast__close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.toast__close:hover {
    background: color-mix(in srgb, var(--toast-accent) 11%, transparent);
    opacity: 1;
}

.toast__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--toast-accent);
    transform-origin: left;
    animation: toast-progress 5s linear forwards;
}

.toast:hover .toast__progress {
    animation-play-state: paused;
}

.toast.is-leaving {
    animation: toast-leave .3s ease both;
}

@keyframes toast-enter {
    from { opacity: 0; transform: translateX(calc(100% + 30px)) scale(.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-leave {
    to { opacity: 0; transform: translateX(calc(100% + 30px)) scale(.96); }
}

@keyframes toast-progress {
    to { transform: scaleX(0); }
}

@media (max-width: 560px) {
    .toast-stack {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        gap: 9px;
    }

    .toast {
        grid-template-columns: 34px minmax(0, 1fr) 30px;
        min-height: 68px;
        padding: 12px 10px 14px 13px;
        border-radius: 14px;
    }

    .toast__icon {
        width: 32px;
        height: 32px;
    }

    .toast__message {
        font-size: .84rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast { animation-duration: .01ms; }
    .toast__progress { animation: none; }
}

/* ---------- Add-to-cart confirmation ---------- */
.cart-confirm {
    position: fixed;
    inset: 0;
    z-index: 490;
    display: grid;
    place-items: center;
    padding: 22px;
}

.cart-confirm__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(33, 15, 7, .6);
    backdrop-filter: blur(5px);
    cursor: default;
    animation: cart-confirm-fade .25s ease both;
}

.cart-confirm__panel {
    position: relative;
    width: min(100%, 520px);
    padding: clamp(30px, 5vw, 46px);
    border: 1px solid rgba(92, 42, 18, .18);
    border-top: 6px solid var(--orange);
    border-radius: 26px;
    background:
        radial-gradient(circle at 8% 8%, rgba(238, 122, 46, .14), transparent 27%),
        radial-gradient(circle at 94% 92%, rgba(92, 42, 18, .08), transparent 32%),
        var(--white);
    box-shadow: 0 28px 90px rgba(33, 15, 7, .32);
    text-align: center;
    animation: cart-confirm-enter .42s cubic-bezier(.16, 1, .3, 1) both;
}

.cart-confirm__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--brown);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.cart-confirm__close:hover {
    border-color: var(--orange);
    color: var(--orange-2);
}

.cart-confirm__icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 5px solid rgba(238, 122, 46, .18);
    background: var(--brown);
    color: var(--cream);
    box-shadow: 0 10px 24px rgba(69, 32, 14, .18);
}

.cart-confirm__icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-confirm h2 {
    max-width: 16ch;
    margin: 0 auto 8px;
    font-size: var(--h2-size);
    line-height: .94;
}

.cart-confirm .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--orange-2);
}

.cart-confirm .eyebrow::before,
.cart-confirm .eyebrow::after {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
}

.cart-confirm__panel > p:not(.eyebrow) {
    max-width: 43ch;
    margin: 0 auto;
    color: #000;
    font-size: var(--section-subtext-size);
    line-height: var(--section-subtext-line-height);
}

.cart-confirm__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.cart-confirm__actions .btn {
    min-width: 0;
    padding: 16px 18px;
    white-space: nowrap;
    letter-spacing: .06em;
}

.cart-confirm__actions .btn--primary {
    box-shadow: 0 9px 22px rgba(238, 122, 46, .22);
}

.cart-confirm.is-leaving .cart-confirm__backdrop {
    animation: cart-confirm-fade-out .24s ease both;
}

.cart-confirm.is-leaving .cart-confirm__panel {
    animation: cart-confirm-leave .24s ease both;
}

body.cart-confirm-open {
    overflow: hidden;
}

@keyframes cart-confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cart-confirm-enter {
    from { opacity: 0; transform: translateY(28px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cart-confirm-fade-out {
    to { opacity: 0; }
}

@keyframes cart-confirm-leave {
    to { opacity: 0; transform: translateY(18px) scale(.97); }
}

@media (max-width: 520px) {
    .cart-confirm {
        align-items: end;
        padding: 12px;
    }

    .cart-confirm__panel {
        width: 100%;
        padding: 34px 20px 22px;
        border-radius: 22px;
    }

    .cart-confirm__icon {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
    }

    .cart-confirm__actions {
        flex-direction: column-reverse;
    }

    .cart-confirm__actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cart-confirm__backdrop,
    .cart-confirm__panel {
        animation-duration: .01ms;
    }
}

/* ---------- Image preview (upload) ---------- */
.image-preview {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.image-preview img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--cream-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .faq-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
        justify-self: start;
    }

    .site-header__inner {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 10px;
    }

    .brand {
        justify-self: center;
        min-width: 0;
    }

    .header-actions {
        justify-self: end;
        width: 40px;
    }

    .header-order {
        display: none;
    }

    .main-nav {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 350px);
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        background: var(--cream);
        border-right: 1px solid var(--line);
        padding: 86px 28px max(28px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 121;
        transform: translateX(-105%);
        visibility: hidden;
        box-shadow: var(--shadow-lg);
        transition: transform .3s ease, visibility .3s ease;
    }

    .main-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .main-nav a {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        font-size: .9rem;
    }

    .nav-drawer__close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 22px;
        right: 22px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: transparent;
        color: var(--brown);
        font-size: 1.65rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(33, 15, 7, .52);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-overlay[hidden] {
        display: none;
    }

    body.nav-open {
        overflow: hidden;
    }

    .main-nav .nav-drawer__brand {
        display: block;
        width: min(205px, calc(100% - 62px));
        margin: -58px 0 20px;
        padding: 0;
        border: 0;
    }

    .nav-drawer__brand img {
        display: block;
        width: 100%;
        height: auto;
    }

    body.nav-open .site-header {
        z-index: 120;
    }

    body.nav-open .main-nav {
        z-index: 122;
    }

    .header-actions .btn {
        padding: 11px 16px;
    }

    .header-actions { gap: 10px; }
    .header-cart { width: 40px; height: 40px; }

    .nav-account {
        gap: 12px;
    }

    /* Below the drawer breakpoint the account links belong inside the drawer only. */
    .nav-account-slot--header {
        display: none;
    }

    .nav-account-slot--drawer {
        display: block;
        width: 100%;
        margin-top: 8px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
    }

    .nav-account-slot--drawer .nav-account {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .nav-account-slot--drawer .nav-account__link {
        display: block;
        width: 100%;
        padding: 11px 0;
        font-size: .82rem;
    }

    .nav-account-slot--drawer .nav-account__form {
        display: block;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .announce {
        font-size: .64rem;
        letter-spacing: .11em;
    }

    .announce__track {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        padding: 9px 40px 9px 18px;
        line-height: 1.3;
    }

    .announce__track > span:not(.announce__badge) {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .announce__track > a {
        display: block;
        width: max-content;
        max-width: 100%;
        justify-self: center;
        line-height: 1.3;
    }

    .announce__badge {
        display: none;
    }

    .announce__close {
        right: 9px;
    }

    .brand__wordmark {
        width: min(170px, 48vw);
    }

    .product-card {
        min-height: 0;
        aspect-ratio: auto;
    }

    .product-card__desc,
    .product-card__hover {
        display: none;
    }

    .product-card__foot {
        padding-right: 0;
        margin-bottom: 14px;
    }

    .product-card__cart {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0;
        flex-shrink: 0;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Review nudge popup (global) ---------- */
.review-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 120;
    width: min(360px, calc(100vw - 32px));
    padding: 18px 20px;
    background: var(--brown);
    color: var(--cream-2);
    border-radius: var(--radius);
    box-shadow: 0 20px 48px rgba(20, 8, 3, .34);
}

.review-toast.is-visible {
    animation: reviewToastIn .28s ease;
}

@keyframes reviewToastIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

.review-toast__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cream-2);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.review-toast__close:hover {
    background: rgba(255, 250, 242, .14);
    color: var(--white);
}

.review-toast__lede {
    margin: 0 26px 12px 0;
    font-size: .95rem;
}

.review-toast__lede strong {
    color: var(--white);
}

.review-toast__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.review-toast__items a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border-radius: 999px;
    background: rgba(255, 250, 242, .12);
    color: var(--cream);
    font-size: .88rem;
}

.review-toast__items a:hover {
    background: rgba(255, 250, 242, .22);
    color: var(--white);
}

.review-toast__items img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 520px) {
    .review-toast {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }
}

/* ---------- Pending reviews (account page) ---------- */
.pending-reviews {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.pending-reviews__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.pending-review {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.pending-review__image {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
}

.pending-review__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: auto;
    min-width: 0;
}

.pending-review__body strong {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.pending-review__body span {
    color: var(--muted);
    font-size: .82rem;
}

.pending-review__cta {
    flex: none;
    padding: 9px 16px;
    font-size: .84rem;
}

@media (max-width: 560px) {
    .pending-review {
        flex-wrap: wrap;
    }

    .pending-review__cta {
        width: 100%;
        text-align: center;
    }
}

/* Read-only account fields (username, email): visibly not editable. */
.form-control[readonly] {
    background: #ede6da;
    border-color: #cfc3b2;
    color: #5f574d;
    cursor: not-allowed;
}

.form-control[readonly]:focus {
    border-color: #cfc3b2;
    box-shadow: none;
}

/* Shared card treatment for the cart and checkout. */
.summary-label { display: inline-flex; align-items: center; gap: 8px; }
.summary-label svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.checkout-order-item { border-bottom: 1px solid var(--line); padding-block: 14px; align-items: start; }
.checkout-order-item__name { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.checkout-order-item__name strong { color: #000; font-weight: 700; }
.checkout-order-item > span:last-child { flex: none; }
[data-stripe-redirect-form] .summary__row:not(.summary__row--total) .price { font-size: 1.35rem; }
@media (min-width: 901px) {
    [data-stripe-redirect-form] > .checkout-details-card { position: sticky; top: 104px; align-self: start; }
    .cart-layout[data-stripe-redirect-form] > .summary { position: static; max-height: none; overflow: visible; }
}

@media (min-width: 901px) {
    .cart-layout > .summary {
        position: sticky;
        top: 104px;
        align-self: start;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
    }
}

@media (min-width: 861px) {
    .cart-line {
        grid-template-columns: 22px 150px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 12px;
        padding: 20px;
        align-items: start;
    }

    .cart-line__select {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        padding-top: 2px;
    }

    .cart-line > img {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .cart-line > div:not(.cart-line__actions) {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
    }

    .cart-line__name {
        font-size: 1.45rem;
        line-height: 1.1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .cart-line__meta { font-size: .95rem; }
    .cart-line__actions {
        grid-column: 3;
        grid-row: 2;
        justify-content: flex-start;
    }

    .cart-line .cart-quantity-stepper button { width: 38px; height: 44px; }
    .cart-line .cart-quantity-stepper input { width: 96px; height: 44px; }
    .cart-line .cart-update { height: 46px; padding: 0 24px; }
    .cart-line .cart-remove { width: 46px; height: 46px; }
}

.cart-quantity-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cart-quantity-stepper button { width: 30px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--brown); font-size: 1.2rem; cursor: pointer; }
.qty-form .cart-quantity-stepper input { width: 60px; border: 0; border-radius: 0; text-align: center; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.cart-quantity-stepper input::-webkit-inner-spin-button,
.cart-quantity-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-quantity-stepper button:disabled { opacity: .45; cursor: default; }

@media (max-width: 560px) {
    .cart-line {
        position: relative;
        grid-template-columns: clamp(72px, 24vw, 100px) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 16px 12px 16px 26px;
        align-items: start;
    }

    .cart-line__select {
        position: absolute;
        top: 12px;
        left: 8px;
        align-self: start;
    }

    .cart-line__select input { width: 15px; height: 15px; margin: 0; }
    .cart-line > img {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
    }

    .cart-line > div:not(.cart-line__actions) { grid-column: 2; grid-row: 1; min-width: 0; }
    .cart-line__name {
        font-size: 1.15rem;
        line-height: 1.1;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    .cart-line__meta { font-size: .75rem; line-height: 1.35; }
    .cart-line__actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
    .cart-line .qty-form { gap: 10px; min-width: 0; flex: 1; }
    .cart-line .cart-quantity-stepper { flex: 1; min-width: 0; }
    .cart-quantity-stepper button { width: 32px; height: 40px; font-size: 1.2rem; flex: none; }
    .qty-form .cart-quantity-stepper input { width: 100%; min-width: 0; height: 40px; font-size: 1rem; }
    .cart-line .cart-update { padding: 0 22px; height: 42px; font-size: .85rem; letter-spacing: .02em; flex: none; }
    .cart-line .cart-remove { width: 42px; height: 42px; }
    .cart-line .cart-remove span { display: none; }
}

.cart-secondary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
}

.cart-secondary-actions form { margin: 0; min-width: 0; }
.cart-secondary-actions .btn {
    width: 100%;
    height: 100%;
    padding: 9px 4px;
    font-size: .94rem;
    letter-spacing: .06em;
    white-space: normal;
}

@media (max-width: 560px) {
    [data-live-cart] > .summary { padding-inline: 16px; }
    #cart-checkout-form .btn {
        padding-inline: 8px;
        font-size: .85rem;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .cart-secondary-actions { gap: 8px; }
    .cart-secondary-actions .btn {
        padding: 12px 3px;
        font-size: .85rem;
        letter-spacing: 0;
        white-space: nowrap;
        text-align: center;
    }
}

.summary__delivery-note {
    border-block: 1px solid var(--line);
    margin-top: 8px;
    padding-block: 12px;
    font-size: 1.05rem;
    font-style: italic;
    color: #000;
}

.summary__delivery-note .price { color: inherit; font-family: var(--body); font-size: inherit; font-weight: 700; }
.cart-line > img { background: #f1f1ef; box-shadow: 0 3px 10px rgba(1, 56, 45, .12); }
.summary__delivery-note[hidden] { display: none; }
.summary__delivery-note:not([hidden]) + .summary__row--total {
    border-top: 0;
    margin-top: 0;
}

.cart-line,
.cart-layout > .summary,
.checkout-details-card {
    background: #fffaf2;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(1, 56, 45, .07);
}

.checkout-details-card {
    padding: clamp(18px, 3vw, 30px);
    min-width: 0;
}

.cart-layout input[type="checkbox"] {
    accent-color: var(--brand-lime);
}

/* Give action and carousel arrows a consistent, heavier weight. */
.ui-arrow,
.blend-carousel__nav {
    font-weight: 800;
    -webkit-text-stroke: .6px currentColor;
}

/* The landing page's story statement keeps its full copy in a compact phone layout. */
@media (max-width: 560px) {
    .intro__statement {
        font-size: clamp(1.25rem, 6.3vw, 1.7rem);
        line-height: 1.15;
        max-width: 100%;
    }

    .intro__statement .intro__line {
        display: inline;
        white-space: normal;
    }
}

/* Compact heading descriptions on phones; keep full copy on larger screens. */
@media (max-width: 680px) {
    .menu-page-head__text,
    .menu-category__head p,
    .faq-section__head p,
    .split--crafted .split__body p,
    .coffee-cta__body h5,
    .coffee-cta__body .as-h5 {
        font-size: .9rem;
        /* Half the extra leading of the desktop 1.7 line height. */
        line-height: 1.35;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    .menu-page-head__text {
        margin-top: 3px;
        max-width: 100%;
    }

    .menu-category__head {
        gap: 5px;
    }

    .menu-category__head p,
    .faq-section__head p {
        max-width: 100%;
    }

    .faq-section__head {
        gap: 3px;
    }

    .split--crafted .split__body h2,
    .coffee-cta__body h2 {
        margin-bottom: 5px;
    }

    .split--crafted .split__body p,
    .coffee-cta__body h5,
    .coffee-cta__body .as-h5 {
        margin-top: 0;
    }
}

/* The cart action shares the price row whenever the card is wide enough for both.
   On a narrow card - foldables, tablets, the products page's filtered column - the
   button would otherwise spill past the card's edge, so it takes the row under the
   price instead. The card measures itself (container query) rather than guessing
   from the viewport, because the same viewport gives different card widths on the
   home page, the products page and the related-products rail. The plain wrap is the
   fallback where container queries are missing, and catches a long sale price. */
.product-card { padding-bottom: 0; container-type: inline-size; }
.product-card__foot { padding-right: 0; gap: 10px; row-gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.product-card__cart { position: relative; right: auto; bottom: auto; margin: 0; flex-shrink: 0; }

@container (max-width: 260px) {
    .product-card__cart,
    .product-card__quick-add { width: 100%; }
}
.product-card__quick-add { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--brand-lime); color: var(--brand-dark-green); border: 1px solid var(--brand-lime); border-radius: 9px; padding: 10px 12px; font-family: var(--body); font-size: .75rem; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 9px rgba(1,56,45,.1); }
.product-card__quick-add svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-card__quick-add:hover { background: var(--brand-dark-green); border-color: var(--brand-dark-green); color: #fffaf2; }
.product-card__quick-add:disabled { opacity: .6; cursor: wait; }
.product-card__quick-add:focus-visible { outline: 3px solid var(--brand-dark-green); outline-offset: 2px; }

.add-to-cart .product-quantity-stepper { flex-shrink: 0; height: 52px; box-sizing: border-box; }
.add-to-cart .product-quantity-stepper button { width: 34px; height: 100%; }
.add-to-cart .product-quantity-stepper input { width: 52px; height: 100%; padding: 0; border: 0; border-radius: 0; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.add-to-cart .btn { height: 52px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }

.cart-line .cart-quantity-stepper,
.cart-line .cart-quantity-stepper input { background: #fff; }

@media (min-width: 861px) {
    .cart-line .cart-quantity-stepper { height: 52px; box-sizing: border-box; }
    .cart-line .cart-quantity-stepper button,
    .cart-line .cart-quantity-stepper input { height: 100%; }
    .cart-line .cart-update,
    .cart-line .cart-remove { height: 52px; box-sizing: border-box; }
    .cart-line .cart-quantity-stepper input { width: 116px; }
    .add-to-cart .product-quantity-stepper input { width: 116px; }
    .add-to-cart .product-quantity-stepper button { width: 38px; }
}

/* ---------- Offers & discounts ----------
   One visual language for every saving: a yellow tag for the offer's name, a struck-through "was"
   figure, and discount rows in the summary that read as money coming off. */
.line-offer {
    display: inline-block;
    min-width: 72px;
    margin-left: 6px;
    padding: 3px 14px;
    text-align: center;
    letter-spacing: .04em;
    border-radius: 999px;
    background: var(--brand-yellow);
    color: var(--brand-dark-green);
    font-family: var(--body);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    vertical-align: middle;
    white-space: nowrap;
}

.checkout-order-item__name .line-offer { margin-left: 4px; }

.summary__was {
    margin-right: 6px;
    color: var(--muted);
    font-weight: 500;
    opacity: .75;
}

.summary__was .price { color: inherit; font-family: var(--body); font-size: .92em; }

.summary__row--discount { color: var(--brand-dark-green); font-weight: 700; }
.summary__row--discount .price { color: inherit; }
.summary__row--discount .summary-label svg { stroke: var(--brand-orange); }

.summary__offer-note {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 183, 27, .22);
    color: var(--brand-dark-green);
    font-size: 1rem;
}

.summary__savings {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(128, 188, 0, .16);
    color: var(--brand-dark-green);
    font-weight: 700;
    text-align: center;
}

.summary__savings .price { color: inherit; font-family: var(--body); font-size: inherit; }

.summary__money { transition: opacity .15s ease; }
.summary__money.is-refreshing { opacity: .55; }

.cart-line__offer {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin-top: 6px;
    font-weight: 700;
    color: var(--brand-dark-green);
}

.cart-line__offer [data-line-offer-label] {
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--brand-yellow);
    font-size: .8rem;
}

.cart-line__offer .price { color: inherit; font-family: var(--body); font-size: inherit; }
.cart-line__offer[hidden] { display: none; }

.cart-line__perk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(128, 188, 0, .16);
    color: var(--brand-dark-green);
    font-size: .8rem;
    font-weight: 700;
}

.cart-line__perk svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.welcome-note {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(1, 56, 45, .35);
    color: var(--brand-dark-green);
    font-size: 1rem;
}

.welcome-note--active {
    border-style: solid;
    border-color: var(--brand-lime);
    background: rgba(128, 188, 0, .12);
}

.welcome-note a { color: inherit; font-weight: 700; text-decoration: underline; }

.notice--warning {
    border-left-color: var(--brand-orange);
    background: rgba(241, 93, 42, .1);
}

.order-table__discount td { color: var(--brand-dark-green); font-weight: 700; }

.order-table td .line-offer { margin: 4px 0 0; display: table; }

.rules-snapshot {
    max-height: 60vh;
    overflow: auto;
    margin: 0;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: #f6f6f4;
    font-size: .85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.product-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 14px;
    color: var(--brand-dark-green);
    font-size: 1rem;
}

.product-offer .line-offer { margin-left: 0; }

/* ---------- Promotion popup ---------- */
.promo-popup {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand-light-beige);
    color: var(--brand-dark-green);
    box-shadow: 0 24px 60px rgba(1, 56, 45, .35);
    overflow: hidden;
}

.promo-popup[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    animation: promo-popup-in .28s ease-out;
}

.promo-popup::backdrop {
    background: rgba(1, 56, 45, .55);
    backdrop-filter: blur(2px);
}

.promo-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 243, 228, .92);
    color: var(--brand-dark-green);
    cursor: pointer;
}

.promo-popup__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.promo-popup__close:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 2px; }

.promo-popup__media {
    position: relative;
    min-height: 100%;
    background: #f1f1ef;
}

.promo-popup__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-popup__badge {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand-yellow);
    color: var(--brand-dark-green);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .85rem;
}

.promo-popup__body {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 36px 32px 32px;
}

.promo-popup__body .eyebrow { margin: 0; }

.promo-popup__body h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    line-height: 1.05;
}

.promo-popup__text { margin: 0; font-size: 1.05rem; }

.promo-popup__product {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 0;
    padding: 12px 0;
    border-block: 1px solid var(--line);
}

.promo-popup__product .price { font-size: 1.4rem; }
/* How long the offer has left: a pill with a clock, the countdown in bold and the day after it. */
.promo-popup__ends {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 5px 16px 5px 5px;
    border: 1px solid rgba(128, 188, 0, .45);
    border-radius: 999px;
    background: rgba(128, 188, 0, .12);
    color: var(--brand-dark-green);
    font-size: .88rem;
    line-height: 1.25;
}

.promo-popup__ends-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-dark-green);
    color: var(--brand-lime);
}

.promo-popup__ends-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.promo-popup__ends strong { font-weight: 800; }
.promo-popup__ends-date { color: rgba(1, 56, 45, .7); }
.promo-popup__ends-date::before { content: "\00b7"; margin: 0 6px; }

/* The last day: orange instead of lime. */
.promo-popup__ends--soon { border-color: rgba(240, 140, 30, .5); background: rgba(240, 140, 30, .12); }
.promo-popup__ends--soon .promo-popup__ends-icon { background: var(--brand-orange); color: #fff; }

.promo-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

@keyframes promo-popup-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-popup[open] { animation: none; }
}

@media (max-width: 640px) {
    .promo-popup[open] { grid-template-columns: 1fr; overflow-y: auto; }
    .promo-popup__media { aspect-ratio: 16 / 10; min-height: 0; }
    .promo-popup__body { padding: 22px 18px 20px; }
    .promo-popup__actions .btn { flex: 1 1 auto; }
}

.checkout-order-item__info {
    display: grid;
    gap: 6px;
    min-width: 0;
    justify-items: start;
}

.checkout-order-item__info .line-offer { margin-left: 0; }

.checkout-order-item > span:last-child {
    display: grid;
    justify-items: end;
    align-content: start;
}

/* The struck-through "was" figure stays small next to the real price, wherever it sits. */
.summary .summary__was .price,
[data-stripe-redirect-form] .summary__row .summary__was .price,
.order-table .summary__was .price {
    font-family: var(--body);
    font-size: .95rem;
    font-weight: 500;
    color: inherit;
}

.product-card__offer {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--brand-yellow);
    color: var(--brand-dark-green);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(1, 56, 45, .18);
}

.product-card--soldout .product-card__offer { top: 46px; }

/* ---------- Free "buy X get Y" cards in the cart ---------- */
.cart-rewards { display: grid; gap: inherit; }
.cart-rewards:empty { display: none; }

.cart-line--reward {
    position: relative;
    border: 2px dashed var(--brand-lime);
    background: rgba(128, 188, 0, .08);
}

.cart-line--reward > img { grid-column: 2; }
.cart-line--reward > div { grid-column: 3; }
.cart-line--reward .cart-line__meta del { opacity: .7; }
.cart-line--reward .cart-line__meta del .price { font-family: var(--body); font-size: inherit; }
.cart-line--reward .cart-line__offer span:last-child { font-weight: 600; opacity: .8; }

.cart-line__free-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--brand-lime);
    color: var(--brand-dark-green);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.checkout-order-item--reward { color: var(--brand-dark-green); }

/* Several live promotions take turns in the announcement strip. */
.announce__track[hidden] { display: none !important; }
.announce__track[data-announce-slide] { animation: announce-in .45s ease-out; }

@keyframes announce-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .announce__track[data-announce-slide] { animation: none; }
}

/* Both popup buttons share one row at every width. */
.promo-popup__actions { flex-wrap: nowrap; }
.promo-popup__actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }

@media (max-width: 640px) {
    .promo-popup__actions { gap: 8px; }
    .promo-popup__actions .btn { padding-inline: 10px; font-size: .78rem; letter-spacing: .06em; }
}

/* Grid children default to their content's width; without this the one-row buttons push past the
   popup's right padding on narrower dialogs. */
.promo-popup__body > * { min-width: 0; }
.promo-popup__actions .btn { padding-inline: 14px; letter-spacing: .08em; text-align: center; justify-content: center; }

/* ---------- Continue with Google ---------- */
.social-login { display: grid; gap: 10px; margin: 6px 0 4px; }

.social-login__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid rgba(1, 56, 45, .22);
    border-radius: 999px;
    background: #fff;
    color: #1f1f1f;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.social-login__button svg { width: 22px; height: 22px; flex: none; }
.social-login__button:hover { background: #f7f8f8; border-color: rgba(1, 56, 45, .4); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.social-login__button:focus-visible { outline: 2px solid var(--brand-dark-green); outline-offset: 2px; }

.social-login__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 6px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.social-login__or::before,
.social-login__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Popup v2: wider, the product shown whole (never cropped or stretched), and a headline sized for
   long offer names. */
.promo-popup { width: min(960px, calc(100vw - 32px)); }

.promo-popup[open] { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }

.promo-popup__media {
    display: grid;
    place-items: center;
    padding: 28px;
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f1f1ef 70%);
}

.promo-popup__media img {
    width: 100%;
    height: auto;
    max-height: min(440px, 60vh);
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(1, 56, 45, .18));
}

.promo-popup__body { max-height: calc(100vh - 32px); overflow-y: auto; padding: 40px 36px 32px; }

.promo-popup__body h2 {
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.promo-popup__text {
    font-size: .98rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.promo-popup__product strong { font-size: .95rem; line-height: 1.35; }

@media (max-width: 640px) {
    .promo-popup__media { aspect-ratio: auto; padding: 18px; }
    .promo-popup__media img { max-height: 220px; }
    .promo-popup__body { padding: 20px 18px; }
}

/* Popup v3: the product photo fills its whole half of the popup, edge to edge, instead of sitting
   as a smaller framed box inside a grey panel. Cover keeps its proportions (never stretched). */
.promo-popup__media {
    position: relative;
    display: block;
    padding: 0;
    background: #f4f4f2;
    min-height: 100%;
    overflow: hidden;
}

.promo-popup__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

.promo-popup__badge { z-index: 1; }

/* The photo half sets a floor on the popup's height, so a short message no longer squashes a square
   product shot into a letterbox and crops the pack top and bottom. Capped so it still fits the screen. */
.promo-popup__media {
    min-height: min(480px, calc(100vh - 64px));
    max-height: calc(100vh - 32px);
}

@media (max-width: 640px) {
    /* The wide two-column rule above is written on [open], so the phone layout has to be too. */
    .promo-popup[open] { grid-template-columns: 1fr; }
    .promo-popup__media { min-height: 0; max-height: none; height: 300px; padding: 0; }
    /* Cover, as on a desktop: contain left white bands down both sides of a square shot. */
    .promo-popup__media img { max-height: none; object-fit: cover; }
}

/* Show / hide password: an eye button inside the right edge of every password box. */
.password-field {
    position: relative;
    display: block;
    width: 100%;
}

.password-field > input { width: 100%; padding-right: 48px; }

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--brand-dark-green);
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s ease, background .15s ease;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible { opacity: 1; background: rgba(1, 56, 45, .08); }
.password-field__toggle:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 1px; }

.password-field__toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Edge's own reveal button would sit beside ours. */
.password-field > input::-ms-reveal,
.password-field > input::-ms-clear { display: none; }

/* ---------- Coming soon (Shop:Enabled = false) ---------- */
.coming-soon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: min(86vh, 820px);
    padding: clamp(72px, 10vw, 128px) 0;
    background: radial-gradient(120% 90% at 50% 0%, #024a3c 0%, var(--brand-dark-green) 55%, #00261f 100%);
    color: var(--brand-light-beige);
    text-align: center;
}

/* Two soft lights drifting behind everything. */
.coming-soon__glow {
    position: absolute;
    z-index: -1;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .38;
    animation: cs-float 18s ease-in-out infinite alternate;
}

.coming-soon__glow--one { top: -18vmax; left: -12vmax; background: var(--brand-lime); }
.coming-soon__glow--two { bottom: -22vmax; right: -14vmax; background: var(--brand-orange); opacity: .26; animation-duration: 23s; animation-direction: alternate-reverse; }

@keyframes cs-float {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(8vmax, 6vmax) scale(1.15); }
}

/* Beans rising slowly from below the panel, each at its own pace and angle. */
.coming-soon__beans {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.coming-soon__bean {
    position: absolute;
    bottom: -80px;
    left: var(--left);
    width: var(--size);
    height: calc(var(--size) * 1.4);
    color: var(--brand-ochre);
    opacity: 0;
    animation: cs-rise var(--duration) linear var(--delay) infinite;
}

.coming-soon__bean:nth-child(3n) { color: var(--brand-dark-brown); }
.coming-soon__bean:nth-child(4n) { filter: blur(2px); }

@keyframes cs-rise {
    0% { transform: translateY(0) rotate(var(--turn)); opacity: 0; }
    12% { opacity: .45; }
    85% { opacity: .3; }
    100% { transform: translateY(-980px) rotate(calc(var(--turn) + 220deg)); opacity: 0; }
}

.coming-soon__inner {
    max-width: 880px;
    animation: cs-in .9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes cs-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.coming-soon__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    line-height: .92;
    text-transform: uppercase;
    color: var(--brand-light-beige);
}

.coming-soon__kicker {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    letter-spacing: .14em;
    opacity: .85;
}

/* A slow light sweeping across the letters. */
.coming-soon__shine {
    font-size: clamp(3.6rem, 11vw, 9rem);
    letter-spacing: -.01em;
    background: linear-gradient(100deg, var(--brand-lime) 20%, var(--brand-pale-yellow) 40%, #fff3e4 50%, var(--brand-pale-yellow) 60%, var(--brand-lime) 80%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cs-shine 5s ease-in-out infinite;
}

@keyframes cs-shine {
    0%, 15% { background-position: 100% 0; }
    85%, 100% { background-position: 0 0; }
}

.coming-soon__text {
    max-width: 48ch;
    margin: 26px auto 34px;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 243, 228, .78);
}

.coming-soon__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 40px;
}

.coming-soon__links a {
    position: relative;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-light-beige);
}

.coming-soon__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--brand-bright-lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.coming-soon__links a:hover { color: var(--brand-bright-lime); }
.coming-soon__links a:hover::after { transform: scaleX(1); }

@media (max-width: 700px) {
    .coming-soon { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .coming-soon *,
    .coming-soon__glow { animation: none !important; }
    .coming-soon__bean { display: none; }
}

/* ---------- Newsletter form (Coming soon panel and footer, both on dark green) ---------- */
.newsletter-form {
    width: min(100%, 520px);
    margin-inline: auto;
}

.newsletter-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.newsletter-form__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255, 243, 228, .22);
    border-radius: 14px;
    background: rgba(255, 243, 228, .08);
    backdrop-filter: blur(8px);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.newsletter-form__row:focus-within {
    border-color: var(--brand-bright-lime);
    box-shadow: 0 0 0 4px rgba(208, 221, 40, .16);
}

.newsletter-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--brand-light-beige);
}

.newsletter-form__input::placeholder { color: rgba(255, 243, 228, .45); }
.newsletter-form__input:focus { outline: none; }

.newsletter-form__account {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: .95rem;
    color: rgba(255, 243, 228, .8);
}

.newsletter-form__button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: var(--brand-lime);
    font: 700 .82rem/1 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-dark-green);
    cursor: pointer;
    transition: background-color .2s ease;
}

.newsletter-form__button:hover { background: var(--brand-bright-lime); }
.newsletter-form__button[aria-busy="true"] { opacity: .6; cursor: progress; }

.newsletter-form__message {
    margin: 12px 0 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--brand-bright-lime);
}

.newsletter-form__message:empty { display: none; }
.newsletter-form__message.is-error { color: #ffb4a0; }

.newsletter-form.is-done .newsletter-form__row { border-color: var(--brand-bright-lime); }

/* Phones keep the field and the button on one line, just tighter. */
@media (max-width: 480px) {
    .newsletter-form__row { gap: 4px; padding: 5px; }
    .newsletter-form__input { height: 44px; padding: 0 12px; font-size: .95rem; }
    .newsletter-form__account { padding: 0 12px; font-size: .88rem; }
    .newsletter-form__button { height: 44px; padding: 0 16px; letter-spacing: .08em; font-size: .76rem; }
}

/* ---------- Newsletter in the footer (above Contact) ---------- */
.footer-col:nth-child(2):has(.footer-newsletter) { width: min(100%, 380px); }

.footer-newsletter {
    margin-bottom: 28px;
}

.footer-newsletter .newsletter-form { width: 100%; }
.footer-newsletter .newsletter-form__row { padding: 4px; gap: 4px; }
.footer-newsletter .newsletter-form__input { height: 42px; padding: 0 12px; font-size: .92rem; }
.footer-newsletter .newsletter-form__button { height: 42px; padding: 0 16px; font-size: .74rem; letter-spacing: .1em; color: var(--brand-dark-green); }
.footer-newsletter .newsletter-form__message { font-size: .85rem; }

/* Tablet and phone: newsletter and contact come first, right under the logo, then the page
   links and the social profiles side by side. */
@media (max-width: 1024px) {
    .footer-grid .footer-col:nth-child(2) { grid-row: 1; }
    .footer-grid .footer-col:first-child,
    .footer-grid .footer-col:last-child { grid-row: 2; }
}

/* Capitals sit high in their line box and letter-spacing leaves a gap after the last letter,
   so "Notify me" is nudged down and right to look centred in its button at every size. */
.newsletter-form .newsletter-form__button {
    padding-top: 2px;
    padding-bottom: 0;
    text-indent: .17em;
}

/* "Contact  info@orocafe.net" on one line under the newsletter: the label in cream, the
   address in lime and a touch bolder, both a size up from body text. */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 12px;
    margin: 0;
}

.footer-contact__label {
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cream);
}

.footer-grid .footer-col a.footer-contact__email {
    font-family: var(--body);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: .01em;
    color: var(--brand-bright-lime);
}

.footer-grid .footer-col a.footer-contact__email:hover { color: var(--cream); }

/* "Be the first to know" spans exactly the width of the field under it, on any screen: the
   block is a size container and the heading's size is a share of its width (cqw). The share is
   the heading's own width-to-size ratio in the display face, measured, so keep the two in step
   if the wording changes. */
.footer-newsletter {
    container-type: inline-size;
}

.footer-col h3.footer-newsletter__title {
    margin-bottom: 12px;
    white-space: nowrap;
    text-align: center;
    font-size: 12.45cqw;
    line-height: 1;
}