/* ===============================================================
   Storefront.

   Loaded after app.css on customer pages only; the admin never
   sees it. Everything is scoped under body.site so it wins over
   the base rules without !important.

   The look follows the brand book: a coral notice bar, a navy
   header carrying the search, light banners on inner pages marked
   with the brand's pattern, white cards with rounded corners, and a
   deep navy footer. Two colours do the work — navy for anything you
   can press, coral for anything that wants your eye — and the brand
   gradient (peach, coral, navy) is kept for the few places that
   introduce the shop. Type is Outfit, the closest free face to the
   brand's Arboria; the drop shape from the logo frames photographs.

   Order of this file:
     1  tokens
     2  type, links, buttons, fields
     3  the bar at the very top
     4  the header
     5  page banners and the page frame
     6  sections and bands
     7  the hero
     8  product cards, aisles, baskets, promos
     9  widgets from the page builder
    10  shop, product, cart and checkout
    11  the account area
    12  messages
    13  order tracking
    14  the promise strip and the band above the footer
    15  the footer
    16  the phone tab bar
    17  phones and tablets
   =============================================================== */

/* Outfit: the brand's Arboria is a paid face; Outfit is the closest free
   geometric sans, served from this site so nothing loads from elsewhere. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-latin-700-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------
   1  Tokens
   --------------------------------------------------------------- */

body.site {
    /* Brand colours (set in Settings): navy for anything you can press and for the frame, coral
       for anything that wants your eye, peach only inside the brand
       gradient. The navy comes from the brand settings, so a change
       there recolours every button and both bands. */
    --leaf:    var(--brand-primary, #00557A);
    --leaf-up: #0A6A95;              /* a step lighter, for hovers */
    --leaf-dn: #004A6C;              /* the brand's deep navy */
    --sun:     var(--brand-accent, #E87870);
    --focus:   rgba(0, 85, 122, 0.45);
    --sun-dn:  #DC625A;
    --sun-ink: #0F2B3D;              /* text on coral: dark enough to read */
    --peach:   #EFB886;
    --grad:    linear-gradient(120deg, #EFB886 0%, #E87870 34%, #00557A 74%, #004A6C 100%);

    --ink:    #0F2B3D;
    --stone:  #5B6B78;
    --mist:   #F4F6F8;
    --mist-2: #EAF2F6;
    --line:   #E3E8EC;
    --paper:  #FFFFFF;

    --display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --wrap:    75rem;
    --gutter:  1.25rem;
    --r-card:  16px;
    --r-soft:  10px;
    --r-drop:  999px 999px 999px 0;  /* the drop in the logo: round, one corner square */
    --shadow:  0 2px 10px rgba(0, 85, 122, 0.07);

    font-family: var(--display);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
}

/* ---------------------------------------------------------------
   2  Type, links, buttons, fields
   --------------------------------------------------------------- */

body.site h1,
body.site h2,
body.site h3,
body.site .page__title,
body.site .page__subtitle {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.site a { color: var(--leaf); }
body.site :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

body.site .btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.62rem 1.3rem;
}
body.site .btn--primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
body.site .btn--primary:hover { background: var(--leaf-up); border-color: var(--leaf-up); }
body.site .btn--ghost { background: transparent; color: var(--leaf); border: 1.5px solid var(--leaf); }
body.site .btn--ghost:hover { background: var(--mist-2); }
body.site .btn--quiet { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
body.site .btn--quiet:hover { border-color: var(--leaf); color: var(--leaf); }
body.site .btn--sun { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }
body.site .btn--sun:hover { background: var(--sun-dn); border-color: var(--sun-dn); }
body.site .btn--lg { padding: 0.85rem 1.7rem; font-size: 1rem; }
body.site .btn--sm { padding: 0.42rem 0.95rem; font-size: 0.87rem; }

body.site input[type=text], body.site input[type=email], body.site input[type=password],
body.site input[type=tel], body.site input[type=number], body.site input[type=search],
body.site input[type=date], body.site select {
    border-radius: 999px;
    border-color: #DCE3E9;
    padding-left: 1rem;
    padding-right: 1rem;
}
body.site textarea { border-radius: var(--r-soft); border-color: #DCE3E9; }
body.site input:focus, body.site select:focus, body.site textarea:focus { border-color: var(--leaf); }

/* ---------------------------------------------------------------
   3  The bar at the very top
   --------------------------------------------------------------- */

.utilitybar {
    background: var(--sun);
    color: #0F2B3D;
    font-size: 0.84rem;
}
.utilitybar__inner {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0.52rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.utilitybar a { color: #0F2B3D !important; }
body.site .utilitybar__phone { text-decoration: none; font-weight: 600; white-space: nowrap; }
.utilitybar__note { margin: 0 auto; text-align: center; }
.utilitybar__note a { text-decoration: underline; font-weight: 600; }
.utilitybar__social { display: flex; gap: 0.4rem; margin: 0; }
.utilitybar__social a {
    display: grid; place-items: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--leaf); color: #fff !important;
}
.utilitybar__social a:hover { background: var(--leaf-up); }

/* ---------------------------------------------------------------
   4  The header

   Two rows inside one green block. On top, in this order: the shop's
   name, a menu, the search, a second menu, and the icons — which are
   always last. Beneath: the aisle button and the aisles. The two menus
   are placed by `order`, so on a narrower screen the same two lists
   fold together behind the burger without being printed twice.
   --------------------------------------------------------------- */

body.site .sitebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--leaf);
    border-bottom: 0;
    color: #fff;
}
/* The bars carry their own side padding, so they are the page's column
   plus that padding: the shop's name then starts on exactly the same line
   as the first product card beneath it. */
.sitebar__inner {
    position: relative;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0.8rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 1.15rem;
}
/* Where each piece of the top row sits, whatever order it is written in. */
.wordmark          { order: 0; }
.sitenav--before   { order: 1; }
.sitesearch        { order: 2; }
.sitenav--after    { order: 3; }
.sitebar__icons    { order: 4; }
.menu-button       { order: 5; }
.sitebar__row { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sitebar__row .sitebar__inner { padding-top: 0.55rem; padding-bottom: 0.55rem; }

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff !important;
    text-decoration: none;
    flex: none;
}
.wordmark__logo { display: block; height: 2.1rem; width: auto; }
.wordmark__name { white-space: nowrap; }
/* The leaf in a yellow disc, drawn in CSS so no image has to load. */
.wordmark__mark {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: var(--sun);
    color: var(--leaf);
    font-size: 1.05rem;
    flex: none;
}
.wordmark--foot { font-size: 1.25rem; margin: 0 0 0.75rem; }

/* ---------- the search ---------- */

.sitesearch {
    position: relative;
    flex: 1 1 14rem;
    min-width: 11rem;
    max-width: 38rem;
    display: flex;
    align-items: stretch;
    margin: 0;
    background: var(--paper);
    border-radius: 999px;
    /* Not clipped: the list of suggestions hangs beneath it. */
}
body.site .sitesearch select {
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0 0.75rem 0 1.1rem;
    font-size: 0.88rem;
    color: var(--stone);
    max-width: 11rem;
}
body.site .sitesearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.62rem 0.9rem;
    font-size: 0.92rem;
}
body.site .sitesearch input:focus,
body.site .sitesearch select:focus { outline: 0; }
.sitesearch:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.sitesearch__go {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--leaf);
    padding: 0 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.sitesearch__go:hover { color: var(--leaf-up); }

/* ---------- the icons on the right ---------- */

/* margin-left: auto pushes them to the far end whatever comes before. */
.sitebar__icons { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; flex: none; }
.iconlink {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none;
}
.iconlink:hover { background: rgba(255, 255, 255, 0.14); }
.iconlink__count,
.iconlink__dot {
    position: absolute;
    top: 0.1rem;
    right: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--sun);
    color: #0F2B3D;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}
.iconlink__dot { background: #D64545; color: #fff; }
.iconlink__dot[hidden] { display: none; }
summary.iconlink { list-style: none; cursor: pointer; }
summary.iconlink::-webkit-details-marker { display: none; }

/* Signed in: your own face is the button. */
.iconlink--me .avatar { width: 2.05rem; height: 2.05rem; font-size: 0.78rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.iconlink--me:hover .avatar, .hdrop[open] > .iconlink--me .avatar { box-shadow: 0 0 0 2px var(--sun); }

/* Signed out: the icon says what it is for. */
.iconlink--signin {
    display: inline-flex; align-items: center; width: auto; gap: 0.4rem; padding: 0 0.95rem 0 0.7rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.9rem; font-weight: 600;
}
.iconlink__label { white-space: nowrap; }

/* ---------- what opens from an icon ---------- */

.hdrop { position: relative; }
.hdrop[open] > summary { background: rgba(255, 255, 255, 0.16); }
.hdrop__panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 50;
    width: 17.5rem;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 0.45rem;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 18px 40px rgba(0, 85, 122, 0.22);
    font-size: 0.93rem;
    text-align: left;
}
.hdrop__panel--wide { width: 23.5rem; padding: 0; overflow: hidden; }
.hdrop__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin: 0; padding: 0.85rem 1rem 0.7rem; font-size: 1rem;
}
.hdrop__count { background: #D64545; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.5rem; border-radius: 999px; line-height: 1; }
.hdrop__empty { margin: 0; padding: 0 1rem 1rem; color: var(--stone); line-height: 1.5; }
.hdrop__list { max-height: min(24rem, 60vh); overflow-y: auto; border-top: 1px solid var(--line); }
.hdrop__foot {
    display: flex; gap: 0.5rem; justify-content: space-between; align-items: center;
    padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); background: var(--mist-2);
}
.hdrop__foot form { margin: 0; }
.hdrop__buttons { display: grid; gap: 0.5rem; padding: 0 0.55rem 0.55rem; }
.hdrop__me { padding: 0.6rem 0.65rem 0.75rem; border-bottom: 1px solid var(--line); margin-bottom: 0.35rem; }
.hdrop__me .person { display: flex; }
.hdrop__out { margin: 0.35rem 0 0; padding-top: 0.35rem; border-top: 1px solid var(--line); }

/* The rows of a menu that opened from an icon. Each is one whole target. */
.hmenu { display: grid; }
body.site .hmenu__item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    box-sizing: border-box; width: 100%; padding: 0.58rem 0.7rem; border: 0; border-radius: var(--r-soft);
    background: transparent; color: var(--ink); text-decoration: none; text-align: left;
    font: inherit; font-size: 0.94rem; cursor: pointer;
}
body.site .hmenu__item:hover, body.site .hmenu__item:focus-visible { background: var(--mist-2); color: var(--leaf); }
body.site .hmenu__item--child { padding-left: 1.5rem; color: var(--stone); font-size: 0.9rem; }
body.site .hmenu__item--strong { font-weight: 700; color: var(--leaf); }
body.site .hmenu__item--out { color: #A32D22; font-weight: 600; }
.hmenu__badge { background: var(--leaf); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 999px; line-height: 1; }

/* ---------- one notice ---------- */

body.site .noticerow, .noticerow {
    display: flex; gap: 0.8rem; align-items: flex-start;
    padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; background: var(--paper);
}
.noticerow:last-child { border-bottom: 0; }
body.site .noticerow:hover { background: var(--mist-2); }
.noticerow--new { background: #F3F7FA; }
.noticerow__icon {
    flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: #DCE8EF; color: #00557A;
}
.noticerow__icon--delivery { background: #DCE7F1; color: #2A4F70; }
.noticerow__icon--message  { background: #E4E2F1; color: #443C72; }
.noticerow__icon--credit,
.noticerow__icon--list     { background: #FCE4E1; color: #8A5E0B; }
.noticerow__icon--review   { background: #F3E1DD; color: #7A3B30; }
.noticerow__text { display: grid; gap: 0.12rem; min-width: 0; }
.noticerow__title { font-weight: 600; line-height: 1.3; }
/* Not read yet: a dot at the row's edge, where it cannot wrap under the title. */
.noticerow { position: relative; padding-right: 2rem; }
.noticerow--new::after {
    content: ''; position: absolute; top: 1.15rem; right: 0.95rem;
    width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #D64545;
}
.noticerow__body { color: var(--stone); font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
.noticerow__when { color: var(--stone); font-size: 0.78rem; }

.noticepage { max-width: 44rem; margin: 0 auto; }
.noticepage__tools { display: flex; justify-content: flex-end; margin: 0 0 0.75rem; }
.noticelist { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--paper); }

/* ---------- suggestions under the search ---------- */

.suggest {
    position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0; z-index: 50;
    padding: 0.4rem; background: var(--paper); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: 0 18px 40px rgba(0, 85, 122, 0.22);
}
.suggest[hidden] { display: none; }
body.site .suggest__item {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.55rem;
    border-radius: var(--r-soft); color: var(--ink); text-decoration: none;
}
body.site .suggest__item:hover, body.site .suggest__item.is-on { background: var(--mist-2); color: var(--leaf); }
.suggest__pic {
    flex: none; width: 2.3rem; height: 2.3rem; border-radius: 8px; overflow: hidden;
    display: grid; place-items: center; background: var(--mist); color: var(--leaf);
    font-family: var(--display); font-weight: 700;
}
.suggest__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest__text { display: grid; min-width: 0; line-height: 1.25; }
.suggest__name { font-weight: 600; font-size: 0.93rem; }
.suggest__unit { color: var(--stone); font-size: 0.8rem; }
body.site .suggest__all {
    display: block; margin-top: 0.3rem; padding: 0.55rem 0.6rem; border-top: 1px solid var(--line);
    color: var(--leaf); font-weight: 600; font-size: 0.88rem; text-decoration: none;
}
.searchnote { max-width: var(--wrap); }

/* ---------- the aisle button and the menu ---------- */

.aisledrop { position: relative; flex: none; }
.aisledrop > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: var(--sun);
    color: #0F2B3D;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.aisledrop > summary::-webkit-details-marker { display: none; }
.aisledrop > summary:hover { background: var(--sun-dn); }
.aisledrop__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 40;
    min-width: 17rem;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 14px 34px rgba(0, 85, 122, 0.18);
}
body.site .aisledrop__panel a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-soft);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
}
body.site .aisledrop__panel a:hover { background: var(--mist-2); color: var(--leaf); }

.sitebar__menu { display: contents; }
.sitenav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.93rem; flex: none; white-space: nowrap; }
body.site .sitenav a { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 500; }
body.site .sitenav a:hover { color: var(--sun); }
.sitenav form { margin: 0; }
body.site .linkbutton { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.93rem; }
body.site .linkbutton:hover { color: var(--sun); }

/* A menu item with children, opened by the browser's own details. */
.navdrop { position: relative; }
.navdrop > summary {
    list-style: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}
.navdrop > summary::-webkit-details-marker { display: none; }
.navdrop > summary::after { content: ' \25BE'; font-size: 0.8em; }
.navdrop__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: -0.6rem;
    z-index: 40;
    min-width: 13rem;
    padding: 0.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: 0 14px 34px rgba(0, 85, 122, 0.18);
}
body.site .navdrop__panel a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-soft);
    color: var(--ink);
    font-size: 0.92rem;
}
body.site .navdrop__panel a:hover { background: var(--mist-2); color: var(--leaf); }

.menu-toggle { display: none; }
.menu-button { display: none; }

/* ---------------------------------------------------------------
   5  Page banners and the page frame

   Every inner page opens with a light grey band carrying its title
   and a trail back to the home page, as in the template. The band
   runs edge to edge; the main's own side padding is cancelled with
   a negative margin of exactly the gutter.
   --------------------------------------------------------------- */

body.site .site__main { padding: 0 var(--gutter) 5rem; }
body.site .site__main > .flash { max-width: var(--wrap); margin: 1.25rem auto 0; }

body.site .page__head {
    /*
     * A centred column. app.css lays this out as a row with the actions on
     * the right; here every piece — title, line, trail, buttons — sits on
     * the page's centre line, one under another.
     *
     * It is a flex column on purpose. Centring each piece with auto margins
     * worked until a later rule set a margin on one of them, and then that
     * piece alone slid left on a wide screen while the rest stayed put.
     * align-items centres whatever is inside, whatever its margins say.
     */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(-1 * var(--gutter)) 2.75rem;
    padding: 3.25rem var(--gutter);
    background-color: var(--mist);
    /* A faint produce pattern, drawn rather than loaded. */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 85, 122, 0.028) 0 9px, transparent 8px),
        radial-gradient(circle at 70% 70%, rgba(232, 120, 112, 0.07) 0 12px, transparent 10px),
        radial-gradient(circle at 45% 85%, rgba(0, 85, 122, 0.02) 0 7px, transparent 6px);
    background-size: 220px 180px, 300px 240px, 160px 140px;
    text-align: center;
}
body.site .page__head > * { max-width: min(100%, var(--wrap)); }
body.site .page__title { font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1.15; margin: 0; }
body.site .page__lede { font-size: 1rem; color: var(--stone); margin: 0.6rem auto 0; max-width: 44rem; }
body.site .page__head .head__actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.25rem; }

/* The trail. Inside a banner it sits under the title; on its own it
   sits above the content, which is where the product page puts it. */
.crumbs {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.7rem 0 0;
    font-size: 0.88rem;
    color: var(--stone);
}
body.site .crumbs a { text-decoration: none; }
body.site .crumbs a:hover { text-decoration: underline; }
body.site .site__main > .crumbs { max-width: var(--wrap); margin: 1.5rem auto 1rem; justify-content: flex-start; }

/* Pages that open with a form or a conversation want no banner. */
body.site .page__head--plain {
    align-items: flex-start;
    margin: 2.5rem auto 1.5rem;
    padding: 0;
    max-width: var(--wrap);
    background: none;
    text-align: left;
}
body.site .page__head--plain .crumbs { justify-content: flex-start; }

body.site .narrow { padding-top: 2.5rem; }

/* ---------------------------------------------------------------
   6  Sections and bands

   Everything that stacks down a page shares one column width and
   one gap, whether it was written by hand or placed in the page
   builder. Reading measures narrow the text inside a section, not
   the section itself.
   --------------------------------------------------------------- */

body.site .section,
body.site .shelf,
body.site .w-html,
body.site .product,
body.site .sec__inner,
body.site .band__inner,
body.site .proofband__inner {
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
}

body.site .site__main > .section,
body.site .site__main > .shelf,
body.site .site__main > .w-html,
body.site .designed > .section,
body.site .designed > .shelf,
body.site .designed > .w-html,
body.site .sec,
body.site .band,
body.site .proofband,
body.site .w-cta { margin-top: 4.5rem; }

body.site .designed > .w:first-child,
body.site .site__main > .section:first-child,
body.site .sec--first { margin-top: 2.5rem; }

/* Full-bleed bands: cancel the main's own side padding exactly. */
body.site .band,
body.site .proofband,
body.site .sec--tint,
body.site .sec--dark {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding: 4rem var(--gutter);
}
body.site .band,
body.site .sec--tint { background: var(--mist); }
body.site .sec--dark { background: var(--leaf); color: #fff; }
body.site .sec--dark .section__title,
body.site .sec--dark h2,
body.site .sec--dark h3 { color: #fff; }
body.site .sec--dark .section__lede { color: #CFE0EA; }
body.site .sec--narrow .sec__inner { max-width: 46rem; }
body.site .sec__sub { font-size: 1.15rem; margin: 2rem 0 0.75rem; }

body.site .section__title,
body.site .band__title,
body.site .w-cta__title {
    font-size: clamp(1.5rem, 3.2vw, 1.95rem);
    line-height: 1.2;
    margin: 0 0 1.25rem;
}
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section__head .section__title { margin: 0; }
.section__more { font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section__lede { color: var(--stone); margin: -0.75rem 0 1.75rem; max-width: 44rem; }
.band__head { margin-bottom: 1.75rem; max-width: 42rem; }
.band__lede { color: var(--stone); margin: 0; }
.band__more { margin: 1.5rem 0 0; }

body.site .sec__more { margin: -3.25rem 0 1.25rem; text-align: right; }
body.site .sec--first .sec__more,
body.site .sec__inner > .sec__more:first-child { margin-top: 0; }

/* A page that opens with a hero or a banner needs no gap above it. */
body.site .site__main > .page__head:first-child { margin-top: 0; }

.split2 { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.split2__side > * { margin-top: 0; }
.split2__main > *:first-child { margin-top: 0; }
body.site .sec--split .sec__inner { max-width: var(--wrap); }
body.site .split2__main > .sec__sub:first-child,
body.site .split2__side > .sec__sub:first-child { margin-top: 0; }
.split2__side .tiles,
.split2__side .shelfgrid,
.split2__side .features,
.split2__side .wgallery { grid-template-columns: 1fr; }
.split2__side .wstats { grid-template-columns: repeat(2, 1fr); }

/* Tabs inside a section, built from radios so they need no script. */
.sectabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.sectabs__bar { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.sectabs__tab {
    padding: 0.6rem 1rem; cursor: pointer; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--stone);
}
.sectabs__tab:hover { color: var(--ink); }
.sectabs__panel { display: none; }
.sectabs__radio:nth-of-type(1):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(1),
.sectabs__radio:nth-of-type(2):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(2),
.sectabs__radio:nth-of-type(3):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(3),
.sectabs__radio:nth-of-type(4):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(4),
.sectabs__radio:nth-of-type(5):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(5),
.sectabs__radio:nth-of-type(6):checked ~ .sectabs__bar .sectabs__tab:nth-of-type(6) {
    color: var(--leaf); border-bottom-color: var(--leaf);
}
.sectabs__radio:nth-of-type(1):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(1),
.sectabs__radio:nth-of-type(2):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(2),
.sectabs__radio:nth-of-type(3):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(3),
.sectabs__radio:nth-of-type(4):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(4),
.sectabs__radio:nth-of-type(5):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(5),
.sectabs__radio:nth-of-type(6):checked ~ .sectabs__panels .sectabs__panel:nth-of-type(6) { display: block; }
.sectabs__radio:focus-visible ~ .sectabs__bar .sectabs__tab { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------
   7  The hero

   Four shapes from one block: words beside a picture either way
   round, words over a picture, or words alone. With several slides
   they stack in one cell and only the current one shows, so the
   band never jumps as it changes.
   --------------------------------------------------------------- */

.hero2 {
    position: relative;
    margin: 0 calc(-1 * var(--gutter));
    background-color: var(--mist);
    /* The same faint produce pattern as the page banners, so a hero with
       no photograph yet still reads as a designed band. */
    background-image:
        radial-gradient(circle at 18% 28%, rgba(0, 85, 122, 0.028) 0 10px, transparent 9px),
        radial-gradient(circle at 74% 68%, rgba(232, 120, 112, 0.07) 0 13px, transparent 11px),
        radial-gradient(circle at 46% 86%, rgba(0, 85, 122, 0.02) 0 7px, transparent 7px);
    background-size: 240px 200px, 320px 260px, 180px 150px;
}
.hero2--behind { background: var(--ink); }
.hero2__slides { display: grid; }
.hero2__slide {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s ease;
    padding: 0 var(--gutter);
}
.hero2__slide.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .hero2__slide { transition: none; }
}

.hero2__inner {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; gap: 3rem; align-items: center;
}
.hero2--picture_right .hero2__inner,
.hero2--picture_left  .hero2__inner { grid-template-columns: 1.05fr 0.95fr; }
.hero2--picture_left  .hero2__media { order: -1; }

.hero2--short  .hero2__inner { min-height: 21rem; padding: 2.5rem 0; }
.hero2--medium .hero2__inner { min-height: 28rem; padding: 3.5rem 0; }
.hero2--tall   .hero2__inner { min-height: 36rem; padding: 4.5rem 0; }

.hero2__eyebrow {
    display: inline-block; margin: 0 0 1rem;
    background: var(--sun); color: #0F2B3D;
    font-size: 0.82rem; font-weight: 700;
    padding: 0.35rem 0.9rem; border-radius: 999px;
}
body.site .hero2__title {
    font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08;
    margin: 0 0 1.1rem; letter-spacing: -0.03em;
}
.hero2__mark { color: var(--leaf); }
.hero2__lede { font-size: 1.05rem; line-height: 1.65; color: var(--stone); margin: 0 0 1.9rem; max-width: 34rem; }
.hero2__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0; }
.hero2__second { font-weight: 600; }
.hero2__proof { margin: 1.5rem 0 0; color: var(--stone); font-size: 0.9rem; }

.hero2__media { position: relative; }
.hero2__media img {
    display: block; width: 100%; height: 100%; max-height: 30rem;
    object-fit: cover; border-radius: 20px;
}

.hero2__chip {
    position: absolute; left: -0.75rem;
    background: var(--paper); color: var(--ink);
    font-size: 0.82rem; font-weight: 600;
    padding: 0.5rem 0.9rem; border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 85, 122, 0.18);
    white-space: nowrap;
}
.hero2__chip--top    { top: 12%; }
.hero2__chip--middle { top: 48%; left: auto; right: -0.75rem; }
.hero2__chip--bottom { bottom: 12%; }

.hero2--behind .hero2__slide { position: relative; }
.hero2--behind .hero2__media { position: absolute; inset: 0; z-index: 0; margin: 0 calc(-1 * var(--gutter)); }
.hero2--behind .hero2__media img { border-radius: 0; max-height: none; }
.hero2--behind .hero2__media::after { content: ''; position: absolute; inset: 0; }
.hero2--behind .hero2__slide--shade-light  .hero2__media::after { background: rgba(10, 36, 23, 0.45); }
.hero2--behind .hero2__slide--shade-strong .hero2__media::after { background: rgba(10, 36, 23, 0.68); }
.hero2--behind .hero2__inner { position: relative; z-index: 1; grid-template-columns: 1fr; }
.hero2--behind .hero2__text { max-width: 42rem; }
body.site .hero2--behind .hero2__title,
.hero2--behind .hero2__lede,
.hero2--behind .hero2__proof,
.hero2--behind .hero2__second { color: #fff; }
.hero2--behind .hero2__mark { color: var(--sun); }

.hero2--words_only .hero2__inner { grid-template-columns: 1fr; }

.hero2__slide--centre .hero2__text { text-align: center; margin: 0 auto; }
.hero2__slide--centre .hero2__lede { margin-left: auto; margin-right: auto; }
.hero2__slide--centre .hero2__actions { justify-content: center; }

.hero2__controls {
    position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.75rem; z-index: 2;
}
.hero2__arrow {
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem; line-height: 1; color: var(--leaf); cursor: pointer;
    box-shadow: var(--shadow);
}
.hero2__arrow:hover { background: #fff; }
.hero2__dots { display: flex; gap: 0.4rem; }
.hero2__dot {
    width: 0.55rem; height: 0.55rem; padding: 0; border-radius: 50%;
    border: 0; background: rgba(26, 26, 26, 0.25); cursor: pointer;
}
.hero2__dot.is-on { background: var(--leaf); width: 1.5rem; border-radius: 999px; }
.hero2--behind .hero2__dot { background: rgba(255, 255, 255, 0.45); }
.hero2--behind .hero2__dot.is-on { background: var(--sun); }

/* ---------------------------------------------------------------
   8  Product cards, aisles, baskets, promos
   --------------------------------------------------------------- */

body.site .shelfgrid {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 0.8rem 0.9rem 0.9rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { border-color: #CFDDE6; box-shadow: 0 8px 22px rgba(0, 85, 122, 0.09); }
.card__link { display: contents; text-decoration: none; color: inherit; }

.card__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    margin-bottom: 0.85rem;
    border-radius: var(--r-soft);
    overflow: hidden;
}
/* Groceries are photographed on white. Contain, never crop — and no panel
   behind the picture: on a white card a tinted one reads as a grey frame
   round every product. Only a product with no picture yet gets the tint. */
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__letter { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--leaf); opacity: 0.3; }

.card__name {
    font-weight: 600;
    font-size: 0.97rem;
    line-height: 1.35;
    color: var(--ink);
    /* Two lines, then an ellipsis: every card in the row stays the same height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.card__unit { color: var(--stone); font-size: 0.84rem; margin-top: 0.1rem; }
.card__price { font-size: 1.15rem; font-weight: 700; color: var(--leaf); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

.card__foot { margin-top: 0.8rem; }
.card__foot form { margin: 0; }
.card__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--leaf);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.card__add:hover { background: var(--leaf-up); }

/* ---------- aisle tiles ---------- */

.aisles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.aisle {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.1rem;
    min-height: 10rem;
    padding: 1.25rem 0.6rem 1.1rem;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink) !important;
    text-align: center;
    background: var(--paper);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.aisle:hover { border-color: var(--leaf); box-shadow: 0 8px 22px rgba(0, 85, 122, 0.09); }
.aisle__img {
    display: grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: var(--mist);
    overflow: hidden;
}
.aisles li:nth-child(6n+2) .aisle__img { background: #FDF0EE; }
.aisles li:nth-child(6n+3) .aisle__img { background: #EAF1F7; }
.aisles li:nth-child(6n+4) .aisle__img { background: #FBEDE9; }
.aisles li:nth-child(6n+5) .aisle__img { background: #F2EEF9; }
.aisles li:nth-child(6n+6) .aisle__img { background: #E8F3EC; }
.aisle__img img { max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain; }
.aisle__letter { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--leaf); opacity: 0.45; }
.aisle__name { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.aisle__count { font-size: 0.78rem; color: var(--stone); }

/* ---------- basket tiles ---------- */

body.site .tiles { gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
body.site .site__main > .tiles { max-width: var(--wrap); margin: 0 auto; }
.tiles--2 { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.tiles--4 { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
body.site .tile {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--paper);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
body.site .tile:hover { border-color: #CFDDE6; box-shadow: 0 8px 22px rgba(0, 85, 122, 0.09); }
body.site .tile__link { color: var(--ink); }
body.site .tile__img { position: relative; background: var(--mist); }
body.site .tile__name { font-size: 1.2rem; line-height: 1.25; padding: 1.1rem 1.2rem 0; }
.tile__desc { display: block; color: var(--stone); font-size: 0.92rem; line-height: 1.5; padding: 0.4rem 1.2rem 0; }
.tile__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.2rem 1.2rem; margin-top: auto; }
body.site .tile__price { display: block; padding: 0; font-size: 1.2rem; font-weight: 700; color: var(--leaf); }
body.site .tile__meta { padding: 0; font-size: 0.87rem; color: var(--stone); }
.tile__badge {
    position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    background: var(--sun); color: #0F2B3D;
    font-size: 0.75rem; font-weight: 700;
}
.tile__was { color: var(--stone); text-decoration: line-through; font-size: 0.88rem; margin-left: 0.4rem; font-weight: 400; }

/* No photo yet: a soft tint and the first letter, never a grey box. */
.tile__img--empty, .card__media--empty, .detail__media--empty { background: var(--mist); display: grid; place-items: center; }
.tile__initial { font-family: var(--display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--leaf); opacity: 0.3; }

/* ---------- offer banners ---------- */

.promos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.promo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.9rem;
    border-radius: var(--r-card);
    overflow: hidden;
    min-height: 11rem;
}
.promo--mist { background: var(--mist); }
.promo--sand { background: #FDF0EE; }
.promo--leaf { background: var(--leaf); color: #CFE0EA; }
.promo--leaf .promo__title { color: #fff; }
.promo__text { max-width: 20rem; }
.promo__title { font-size: 1.4rem; line-height: 1.2; margin: 0 0 0.35rem; }
.promo__sub { color: inherit; opacity: 0.85; margin: 0 0 0.5rem; font-size: 0.95rem; }
.promo__price { font-weight: 700; font-size: 1.15rem; margin: 0 0 1rem; }
.promo__img { width: 11rem; height: 9rem; object-fit: cover; border-radius: var(--r-soft); flex-shrink: 0; }

/* ---------- a campaign inside the product grid ---------- */

.campaignbar { font-size: 0.88rem; }
.campaignbar__inner {
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0.55rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.campaignbar--mist { background: var(--mist); color: var(--ink); }
.campaignbar--sand { background: #FDF0EE; color: var(--ink); }
.campaignbar--leaf { background: var(--leaf); color: #fff; }
.campaignbar--ink  { background: #0B2433;    color: #fff; }
.campaignbar a { color: inherit !important; text-decoration: underline; font-weight: 600; }

.cardpromo {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border-radius: var(--r-card);
    background: var(--mist);
    overflow: hidden;
}
.cardpromo--sand { background: #FDF0EE; }
.cardpromo--leaf { background: var(--leaf); color: #CFE0EA; }
.cardpromo--ink  { background: #0B2433;    color: #CFE0EA; }
.cardpromo--leaf h3, .cardpromo--ink h3 { color: #fff; }
.cardpromo img { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--r-soft); flex-shrink: 0; }
.cardpromo__text h3 { font-size: 1.15rem; margin: 0 0 0.3rem; }
.cardpromo__text p { font-size: 0.92rem; margin: 0 0 0.8rem; opacity: 0.88; }

/* ---------------------------------------------------------------
   9  Widgets from the page builder
   --------------------------------------------------------------- */

/* Reasons to shop */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.4rem 1.4rem; }
.feature__title { font-size: 1.08rem; margin: 0 0 0.4rem; }
.feature__text { color: var(--stone); font-size: 0.93rem; margin: 0; line-height: 1.55; }

/* How it works. The numbers are drawn by the counter, so the editor's
   list can gain or lose a step without anyone renumbering anything.
   (.steps belongs to the checkout's progress line in app.css and is
   deliberately left alone here.) */
body.site .how {
    list-style: none;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem;
    counter-reset: step;
    color: var(--stone);
}
body.site .how li { counter-increment: step; margin: 0; line-height: 1.6; }
body.site .how li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: var(--sun);
    color: #0F2B3D;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
}
body.site .how strong {
    display: block;
    color: var(--ink);
    font-size: 1.12rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* What other people said */
.w-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.w-proof__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 1.4rem;
}
.w-proof__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-soft); margin-bottom: 0.9rem; }
.w-proof__item blockquote { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.6; }
.w-proof__item .sub { color: var(--stone); font-size: 0.88rem; }

/* Numbers worth saying */
.wstats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.wstats__item { display: grid; gap: 0.3rem; padding: 1.75rem 1.25rem; background: var(--mist); border-radius: var(--r-card); text-align: center; }
.wstats__value { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--leaf); }
.wstats__label { color: var(--stone); font-size: 0.92rem; }

/* What we promise */
.wtrust { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.wtrust__item { position: relative; padding-left: 1.9rem; line-height: 1.55; }
.wtrust__item::before {
    content: '\2713'; position: absolute; left: 0; top: 0.05rem;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: var(--sun); color: #0F2B3D;
    font-size: 0.75rem; font-weight: 700;
    display: grid; place-items: center;
}

/* Where we deliver */
.wcover { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.wcover__item { display: grid; gap: 0.15rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-soft); background: var(--paper); }
.wcover__name { font-weight: 600; }
.wcover__note { color: var(--stone); font-size: 0.87rem; }

/* Picture beside words */
.wsplit { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr 1fr; }
.wsplit--right .wsplit__media { order: 2; }
.wsplit--alone { grid-template-columns: 1fr; }
.wsplit--alone .wsplit__text .prose-body { max-width: 62ch; }
.wsplit__media img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.wsplit__text .section__title { margin-bottom: 1rem; }
.wsplit__text .prose-body { max-width: none; }
.wsplit__action { margin: 1.75rem 0 0; }

/* Photo strip */
.wgallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.wgallery__item { display: grid; gap: 0.4rem; }
.wgallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-soft); }
.wgallery__caption { color: var(--stone); font-size: 0.87rem; }

/* Video */
.wvideo { max-width: 48rem; }
.wvideo__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #0B2433; }
.wvideo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Questions and answers, as in the template: closed rows are white
   cards, the open one is filled green. */
body.site .w-faq { max-width: none; }
.w-faq__list { display: grid; gap: 0.75rem; }
.w-faq__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 0;
    overflow: hidden;
}
.w-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    font-weight: 600;
}
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--stone); }
.w-faq__item[open] { background: var(--leaf); border-color: var(--leaf); }
.w-faq__item[open] summary { color: #fff; }
.w-faq__item[open] summary::after { content: '\2013'; color: var(--sun); }
.w-faq__item p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--stone); line-height: 1.6; max-width: 62ch; }
.w-faq__item[open] p { color: #CFE0EA; }

/* Words */

/*
 * The call to action.
 *
 * A rounded green panel held to the page's column, the same shape as the
 * footer block. As an edge-to-edge band it was a slab of flat colour two
 * metres wide on a desktop monitor, cutting the page in half between two
 * rows of white cards; as a panel it is one more card in the column, and
 * the page reads straight through it.
 */
body.site .w-cta {
    position: relative;
    overflow: hidden;
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
    padding: 3.5rem 2rem;
    border-radius: 20px;
    background-color: var(--leaf);
    /* Two soft discs, lighter than the green, so the panel is not flat. */
    background-image:
        radial-gradient(circle at 8% 115%, rgba(255, 255, 255, 0.10) 0 9rem, transparent 9.05rem),
        radial-gradient(circle at 94% -20%, rgba(232, 120, 112, 0.20) 0 8rem, transparent 8.05rem);
    color: #fff;
    text-align: center;
}
body.site .w-cta__inner { position: relative; max-width: 44rem; margin: 0 auto; }
body.site .w-cta__title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.7rem; color: #fff; }
body.site .w-cta p { color: #CFE0EA; margin: 0 0 1.75rem; }
body.site .w-cta .btn--primary { background: var(--sun); border-color: var(--sun); color: #0F2B3D; }
body.site .w-cta .btn--primary:hover { background: var(--sun-dn); border-color: var(--sun-dn); }

/* ---------------------------------------------------------------
   10  Shop, product, cart and checkout
   --------------------------------------------------------------- */

body.site .chips {
    max-width: var(--wrap);
    margin: 0 auto 2rem;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    /* No scrollbar: on Windows it is a grey bar as wide as the page under
       a row of pills. The fade on the right says there is more. */
    scrollbar-width: none;
}
body.site .chips::-webkit-scrollbar { display: none; }
body.site .chip {
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    background: var(--paper);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}
body.site .chip:hover { border-color: var(--leaf); color: var(--leaf); }
body.site .chip.is-here { background: var(--sun); border-color: var(--sun); color: #0F2B3D; font-weight: 600; }

/* The line above the grid: how many, and a way back out of a search. */
.shopbar {
    max-width: var(--wrap);
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--stone);
    font-size: 0.93rem;
}
.shopbar strong { color: var(--ink); }

body.site .item { border-radius: var(--r-soft); padding: 0.85rem; }

body.site .product { padding-top: 0; gap: 3rem; }
body.site .product__media img { border-radius: var(--r-card); }
body.site .product__price { font-weight: 700; font-size: 2rem; color: var(--leaf); }

.detail { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
/* The picture stands on the page itself: no box, no border, no tint. */
.detail__media { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; }
.detail__media img { width: 100%; height: 100%; object-fit: contain; }
.detail__media--empty { border-radius: var(--r-card); }
.detail__media--empty .card__letter { font-size: 6rem; }
.detail__unit { color: var(--stone); margin: -0.4rem 0 0.9rem; }
.detail__price { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--leaf); margin: 0 0 1.1rem; }
.detail__text { color: var(--ink); line-height: 1.7; max-width: 34rem; }
.detail__buy { display: flex; align-items: flex-end; gap: 0.9rem; margin: 1.75rem 0; flex-wrap: wrap; }
.detail__qty { display: grid; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; }
.detail__qty .stepper { height: 3.1rem; }
.detail__buy .btn { display: inline-flex; align-items: center; gap: 0.55rem; height: 3.1rem; padding-top: 0; padding-bottom: 0; }

/* ---------- several pictures of one product ---------- */

.gallery { display: grid; gap: 0.9rem; min-width: 0; }
.gallery__pick { position: absolute; opacity: 0; pointer-events: none; }
.gallery__stage { aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden; display: grid; }
.gallery__stage { place-items: center; }
/* The picture keeps its own shape and its own rounded corners: a wide banner
   sits as a wide banner in the middle rather than being squared off or cropped. */
.gallery__slide { grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-card); display: none; }
.gallery__thumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.gallery__thumb {
    width: 4.6rem; height: 4.6rem; flex: none; border-radius: 12px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--paper); box-shadow: 0 0 0 1px var(--line);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { box-shadow: 0 0 0 1px var(--leaf); }
.gallery__pick:nth-of-type(1):checked ~ .gallery__stage .gallery__slide:nth-of-type(1),
.gallery__pick:nth-of-type(2):checked ~ .gallery__stage .gallery__slide:nth-of-type(2),
.gallery__pick:nth-of-type(3):checked ~ .gallery__stage .gallery__slide:nth-of-type(3),
.gallery__pick:nth-of-type(4):checked ~ .gallery__stage .gallery__slide:nth-of-type(4),
.gallery__pick:nth-of-type(5):checked ~ .gallery__stage .gallery__slide:nth-of-type(5),
.gallery__pick:nth-of-type(6):checked ~ .gallery__stage .gallery__slide:nth-of-type(6),
.gallery__pick:nth-of-type(7):checked ~ .gallery__stage .gallery__slide:nth-of-type(7),
.gallery__pick:nth-of-type(8):checked ~ .gallery__stage .gallery__slide:nth-of-type(8) { display: block; }
.gallery__pick:nth-of-type(1):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(1),
.gallery__pick:nth-of-type(2):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(2),
.gallery__pick:nth-of-type(3):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(3),
.gallery__pick:nth-of-type(4):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(4),
.gallery__pick:nth-of-type(5):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(5),
.gallery__pick:nth-of-type(6):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(6),
.gallery__pick:nth-of-type(7):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(7),
.gallery__pick:nth-of-type(8):checked ~ .gallery__thumbs .gallery__thumb:nth-of-type(8) { border-color: var(--leaf); box-shadow: none; }
.gallery__pick:focus-visible ~ .gallery__thumbs { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }
.detail__points { list-style: none; margin: 1.75rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; color: var(--stone); font-size: 0.93rem; }
.detail__points li { padding-left: 1.6rem; position: relative; }
.detail__points li::before { content: '\2713'; position: absolute; left: 0; color: var(--leaf); font-weight: 700; }

body.site .empty { border-radius: var(--r-card); background: var(--mist); border-color: var(--line); text-align: center; padding: 2.5rem 1rem; }
.empty__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.4rem; }
.empty__text { color: var(--stone); margin: 0 auto 1.25rem; max-width: 26rem; }

body.site .table { border-radius: var(--r-card); overflow: hidden; }
/* The template's tables wear a yellow head. */
body.site .table thead th { background: var(--sun); color: #0F2B3D; font-weight: 700; border-bottom: 0; }
body.site .choice { border-radius: var(--r-card); }
.choice--off { opacity: 0.55; }
body.site .checkout, body.site .basket { max-width: var(--wrap); margin: 0 auto; }

.creditbig { font-family: var(--display); font-weight: 700; font-size: 2.6rem; color: var(--leaf); margin: 0.5rem 0 1.5rem; }

/* ---------- ways to pay ---------- */

/* A choice that is a link rather than a radio: "add your address first". */
.choice--link { display: block; margin: 0 0 0.5rem; border-style: dashed; }

/*
 * The mobile money number is only wanted while a mobile money option is
 * ticked. :has() does the showing and hiding, so there is no script to
 * fail; a browser too old for :has() simply shows the field all the time,
 * which is a little untidy and entirely usable.
 */
.payways__phone { margin: 0.25rem 0 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--mist); }
@supports selector(:has(*)) {
    .payways__phone { display: none; }
    .payways:has(input[data-phone]:checked) .payways__phone { display: block; }
}
.payways__phone input { background: var(--paper); }

/* The address form is for "someone else". While a saved address is the
   one ticked it is only in the way, so it steps aside — again by :has(),
   and again a browser without it just shows everything. */
@supports selector(:has(*)) {
    .checkout:has(input[type="radio"][name="recipient_id"]:not([value="0"]):checked) .guestaddr { display: none; }
}

/* Waiting for the customer to approve a request on their phone. */
.paywait { text-align: center; padding-top: 2rem; }
.paywait .page__title { margin-bottom: 0.6rem; }
.paywait .page__lede { margin-left: auto; margin-right: auto; }
.paywait__phone {
    display: inline-grid; place-items: center;
    width: 4.5rem; height: 4.5rem; margin: 0 0 1.25rem;
    border-radius: 50%; background: #FDF0EE; color: var(--leaf);
}
@media (prefers-reduced-motion: no-preference) {
    .paywait__phone { animation: paywait-ring 2.4s ease-in-out infinite; }
}
@keyframes paywait-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 120, 112, 0.55); }
    60%      { box-shadow: 0 0 0 18px rgba(232, 120, 112, 0); }
}
.paywait__steps {
    list-style: none; counter-reset: step;
    max-width: 26rem; margin: 1.75rem auto 1.25rem; padding: 0;
    display: grid; gap: 0.7rem; text-align: left;
}
.paywait__steps li { counter-increment: step; position: relative; padding-left: 2.3rem; line-height: 1.5; }
.paywait__steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0.05rem;
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    background: var(--sun); color: #0F2B3D;
    font-size: 0.8rem; font-weight: 700;
    display: grid; place-items: center;
}
.paywait__note { margin-bottom: 1.5rem; }
.paywait__num { white-space: nowrap; }
.paywait .summary { justify-content: center; margin: 1.75rem auto 1rem; max-width: 22rem; text-align: left; }
.paywait .confirm__failed .btn { margin-top: 0.5rem; }

/* ---------------------------------------------------------------
   11  The account area

   A rail of sections on the left and the chosen one beside it, as
   in the template. On a phone the rail becomes a scrolling row of
   pills above the content.
   --------------------------------------------------------------- */

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

body.site .account { max-width: var(--wrap); margin: 0 auto; }
body.site .account--form { max-width: 46rem; }

.accountlayout {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.accountlayout__main { min-width: 0; }
/* The banner at the top of the account already names the page, so a
   screen's own heading inside the column is a plain heading again. */
body.site .accountlayout .page__head {
    align-items: flex-start;
    margin: 0 0 1.5rem;
    padding: 0;
    background: none;
    text-align: left;
}
body.site .accountlayout .page__head .crumbs,
body.site .accountlayout .page__head .head__actions { justify-content: flex-start; }
body.site .accountlayout .page__lede { margin-left: 0; }
body.site .accountlayout .account { max-width: none; margin: 0; }

.accountrail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
body.site .accountrail a,
body.site .accountrail button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-soft);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
body.site .accountrail a:hover,
body.site .accountrail button:hover { border-color: var(--leaf); color: var(--leaf); }
body.site .accountrail .is-here {
    background: var(--sun);
    border-color: var(--sun);
    color: #0F2B3D;
    font-weight: 600;
}
body.site .accountrail .is-here:hover { background: var(--sun-dn); border-color: var(--sun-dn); color: #0F2B3D; }
.accountrail__count { margin-left: auto; font-size: 0.8rem; color: var(--stone); }
body.site .accountrail .is-here .accountrail__count { color: var(--sun-ink); }
.accountrail form { margin: 0; }

.backlink { margin: 0 0 0.35rem; font-size: 0.9rem; }
body.site .backlink a { text-decoration: none; }
.backlink a::before { content: '\2039\00a0'; }

.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
       vertical-align: middle; margin: 0 0.45rem; opacity: 0.55; }

/* ---------- avatars ----------
   The shapes, sizes and six tones are in app.css, shared with the control
   panel. The shop only sets its own typeface, a slightly larger middle size
   and one extra tone. */

.avatar { font-family: var(--display); background: var(--mist); color: var(--ink); }
.avatar--md { width: 2.9rem; height: 2.9rem; font-size: 1rem; }
.avatar__initials { transform: translateY(0.02em); }
.avatar--brand { background: var(--leaf); color: #fff; }

/* ---------- the profile header ---------- */

.profilehead { display: flex; gap: 1.25rem; align-items: center; padding: 0 0 1.5rem; }
.profilehead__text { min-width: 0; }
.profilehead__name { font-size: 1.5rem; line-height: 1.15; margin: 0 0 0.25rem; }
.profilehead__bio { margin: 0 0 0.3rem; color: var(--ink); }
.profilehead__meta { margin: 0 0 0.9rem; color: var(--stone); font-size: 0.9rem; }
.profilehead__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }

/* ---------- the numbers strip ---------- */

.statstrip {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
    background: var(--paper);
}
.statstrip__item { display: grid; text-align: center; padding: 1rem 0.5rem; border-left: 1px solid var(--line); }
.statstrip__item:first-child { border-left: 0; }
body.site .statstrip__link { display: grid; text-decoration: none; color: inherit; }
.statstrip__value { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--leaf); }
.statstrip__label { font-size: 0.8rem; color: var(--stone); margin-top: 0.15rem; }

/* ---------- the cards each module fills ---------- */

.panelcard {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 1.3rem 1.4rem; margin: 0 0 1.25rem;
}
body.site .panelcard__title,
body.site .panelcard .page__subtitle {
    font-size: 1.05rem; margin: 0 0 0.9rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.panelcard .stack { margin-bottom: 0; }
.panelcard .stack > :last-child { margin-bottom: 0; }
.panelcard .form { margin-top: 0.25rem; }

.pill {
    display: inline-block; background: var(--leaf); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    line-height: 1; padding: 0.32rem 0.55rem; border-radius: 999px;
}

.tag {
    display: inline-block; background: var(--mist); color: var(--stone);
    font-size: 0.74rem; line-height: 1; padding: 0.3rem 0.5rem; border-radius: 999px;
}
.tag--quiet { background: transparent; border: 1px solid var(--line); }

/* ---------- settings rows ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows__row { border-top: 1px solid var(--line); }
.rows__row:first-child { border-top: 0; }

.rows--static .rows__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; }
.rows--toggle .rows__row { padding: 0; }
.rows__label { font-weight: 600; font-size: 0.97rem; }
.rows__value { color: var(--stone); font-size: 0.88rem; }

/* A switch, built from a checkbox so it needs no script. */
.toggle { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0; cursor: pointer; }
.toggle__text { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { flex: none; width: 2.9rem; height: 1.7rem; border-radius: 999px; background: #CBD5D0; position: relative; transition: background 0.15s ease; }
.toggle__knob {
    position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.toggle__input:checked ~ .toggle__track { background: var(--leaf); }
.toggle__input:checked ~ .toggle__track .toggle__knob { transform: translateX(1.2rem); }
.toggle__input:focus-visible ~ .toggle__track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- photo picker ---------- */

.photoedit { display: flex; gap: 1.25rem; align-items: flex-start; }
.photoedit__controls { display: grid; gap: 0.6rem; }
.photoedit__form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.filepick { display: inline-flex; }
.filepick__label {
    display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid var(--line);
    border-radius: 999px; font-size: 0.9rem; cursor: pointer; background: var(--paper);
}
.filepick:hover .filepick__label { border-color: var(--leaf); color: var(--leaf); }
.filepick input { position: absolute; opacity: 0; width: 0; height: 0; }
.filepick input:focus-visible + .filepick__label,
.filepick:focus-within .filepick__label { outline: 3px solid var(--focus); outline-offset: 2px; }
.hint { color: var(--stone); font-size: 0.85rem; margin: 0.3rem 0 0; }

.addresses__item { border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem 1.15rem; }
.page__aside { margin: 0 0 1.25rem; }

/* ---------------------------------------------------------------
   12  Messages
   --------------------------------------------------------------- */

.inboxhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.inboxhead .page__title { margin: 0; }

.inbox {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--paper);
}
.inbox__row { border-top: 1px solid var(--line); }
.inbox__row:first-child { border-top: 0; }
body.site .inbox__link { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.95rem 1.1rem; text-decoration: none; color: inherit; }
.inbox__link:hover { background: var(--mist); }
.inbox__avatar { margin-top: 0.1rem; }
.inbox__body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.inbox__top { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
.inbox__subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__when { color: var(--stone); font-size: 0.8rem; white-space: nowrap; flex: none; }
.inbox__preview { color: var(--stone); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__you { color: var(--ink); opacity: 0.6; }
.inbox__tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.inbox__tags:empty { display: none; }
.inbox__dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--leaf); margin-top: 0.55rem; }
.inbox__row--unread .inbox__preview { color: var(--ink); }
.inbox__row--unread .inbox__subject { font-weight: 700; }

.minilist { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.minilist__item { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
body.site .minilist__link { display: grid; gap: 0.1rem; text-decoration: none; color: inherit; min-width: 0; }
.minilist__name { font-weight: 600; font-size: 0.95rem; }
.minilist__meta { color: var(--stone); font-size: 0.87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minilist__when { color: var(--stone); font-size: 0.8rem; white-space: nowrap; }
.minilist__item--unread .minilist__name::after {
    content: ''; display: inline-block; width: 0.45rem; height: 0.45rem;
    border-radius: 50%; background: var(--leaf); margin-left: 0.4rem; vertical-align: middle;
}

.account--chat { padding-bottom: 1rem; max-width: 50rem; }

.chathead {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem;
}
body.site .chathead__back { text-decoration: none; font-size: 1.3rem; line-height: 1; color: var(--ink); padding: 0.25rem 0.35rem; }
.chathead__text { min-width: 0; }
.chathead__name { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chathead__meta { margin: 0; color: var(--stone); font-size: 0.83rem; }

.chat { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.chat__day { text-align: center; margin: 0.9rem 0 0.4rem; }
.chat__day span { display: inline-block; background: var(--mist); color: var(--stone); font-size: 0.76rem; padding: 0.25rem 0.7rem; border-radius: 999px; }
.chat__note { text-align: center; }
.chat__note span { color: var(--stone); font-size: 0.83rem; font-style: italic; }

.chat__line { display: flex; }
.chat__line--me { justify-content: flex-end; }

.bubble { max-width: min(80%, 32rem); padding: 0.65rem 0.9rem 0.5rem; border-radius: 18px; position: relative; }
.chat__line--them .bubble { background: var(--mist); border-bottom-left-radius: 5px; }
.chat__line--me   .bubble { background: var(--leaf); color: #fff; border-bottom-right-radius: 5px; }
.bubble__who { margin: 0 0 0.15rem; font-size: 0.78rem; font-weight: 700; color: var(--leaf); }
.bubble__body { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.bubble__when { margin: 0.2rem 0 0; font-size: 0.72rem; text-align: right; opacity: 0.65; }
.chat__line--me .bubble__when { color: #D8E8DE; }

/*
 * The composer sits at the end of the conversation, in normal flow.
 * A sticky box floating over the thread is the native-app pattern,
 * but doing it properly needs script to scroll the newest message
 * clear of it, and this site has none.
 */
.composer {
    display: flex; gap: 0.5rem; align-items: flex-end;
    background: var(--paper); padding: 0.9rem 0 0;
    border-top: 1px solid var(--line); margin: 0.5rem 0 0;
}
.composer--closed { border-top: 0; padding-bottom: 0; }
.composer--closed .prose { margin: 0; color: var(--stone); font-size: 0.9rem; }
.composer__input {
    flex: 1; min-height: 2.75rem; max-height: 9rem; resize: vertical;
    padding: 0.75rem 1.1rem; border: 1px solid var(--line); border-radius: 20px;
    font: inherit; line-height: 1.4; background: var(--paper); color: var(--ink);
}
.composer__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--leaf); }
.composer__send {
    flex: none; border: 0; border-radius: 999px; background: var(--leaf); color: #fff;
    padding: 0.8rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
}
.composer__send:hover { background: var(--leaf-up); }

/*
 * A conversation screen has no use for a four-column marketing footer
 * under the message box. Where :has() is unsupported the footer simply
 * stays, which harms nothing.
 */
body.site:has(.account--chat) .sitefoot,
body.site:has(.account--chat) .utilitybar,
body.site:has(.account--chat) .promisestrip,
body.site:has(.account--chat) .joinband { display: none; }

/* ---------------------------------------------------------------
   13  Order tracking

   The five stages of an order on one line, the way a parcel service
   shows it. Stages already passed are filled; the rest are hollow.
   --------------------------------------------------------------- */

.tracker { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); padding: 1.6rem 1.4rem 1.3rem; }
.tracker__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tracker__step { display: grid; justify-items: center; text-align: center; gap: 0.3rem; position: relative; }

/* The line between the marks, drawn behind them. */
.tracker__step::before {
    content: '';
    position: absolute;
    top: 0.85rem;
    left: -50%;
    width: 100%;
    height: 3px;
    background: var(--line);
    z-index: 0;
}
.tracker__step:first-child::before { display: none; }
.tracker__step--done::before,
.tracker__step--now::before { background: var(--leaf); }

.tracker__mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--line);
    font-size: 0.8rem;
    line-height: 1;
}
.tracker__step--done .tracker__mark { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.tracker__step--now  .tracker__mark { background: var(--sun); border-color: var(--sun); color: #0F2B3D; }
.tracker__name { font-size: 0.88rem; font-weight: 600; margin-top: 0.4rem; }
.tracker__step--todo .tracker__name { color: var(--stone); font-weight: 500; }
.tracker__when { font-size: 0.78rem; color: var(--stone); }

/* ---------------------------------------------------------------
   14  The promise strip and the band above the footer
   --------------------------------------------------------------- */

.promisestrip {
    margin: 0;
    padding: 2.5rem var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.promisestrip__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.promise { display: flex; align-items: center; gap: 0.9rem; }
.promise__icon {
    display: grid; place-items: center; flex: none;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: #FDF0EE; color: var(--leaf);
}
.promise__title { display: block; font-weight: 700; margin: 0; font-size: 1.02rem; }
.promise__text { display: block; color: var(--stone); margin: 0.1rem 0 0; font-size: 0.9rem; }

/* The band above the footer. Same shape as the template's newsletter
   block; it sends people to the baskets rather than collecting an
   address nobody has anywhere to send to yet. */
.joinband {
    padding: 4rem var(--gutter);
    background-color: var(--mist);
    background-image:
        radial-gradient(circle at 15% 25%, rgba(0, 85, 122, 0.028) 0 10px, transparent 9px),
        radial-gradient(circle at 78% 65%, rgba(232, 120, 112, 0.07) 0 13px, transparent 11px),
        radial-gradient(circle at 45% 88%, rgba(0, 85, 122, 0.02) 0 7px, transparent 7px);
    background-size: 240px 200px, 320px 260px, 180px 150px;
    text-align: center;
}
.joinband__inner { max-width: 46rem; margin: 0 auto; }
.joinband__eyebrow { margin: 0 0 0.5rem; color: var(--stone); }
.joinband__title { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 0.9rem; }
.joinband__title em { font-style: normal; color: var(--leaf); }
.joinband__text { color: var(--stone); margin: 0 0 1.75rem; }
.joinband__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* ---------------------------------------------------------------
   15  The footer
   --------------------------------------------------------------- */

body.site .sitefoot { background: var(--paper); border-top: 0; padding: 0 var(--gutter) 1.5rem; color: #CFE0EA; }
.sitefoot__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 3.25rem 2.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--leaf);
    border-radius: 20px;
}
body.site .footgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; }
body.site .sitefoot .wordmark--foot { color: #fff !important; }
.footgrid__col--brand p { max-width: 24rem; line-height: 1.7; font-size: 0.92rem; }
body.site .footgrid__title { color: #fff; font-weight: 700; margin-bottom: 0.9rem; }
body.site .footgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
body.site .footgrid a { color: #CFE0EA; font-size: 0.92rem; text-decoration: none; }
body.site .footgrid a:hover { color: var(--sun); }

.footgrid__sub { list-style: none; margin: 0.3rem 0 0.5rem 0.9rem; padding: 0; }
body.site .footgrid__sub a { font-size: 0.88rem; opacity: 0.85; }

.socials { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.social {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff !important;
}
.social:hover { background: var(--sun); color: #0F2B3D !important; }

.contactlist { display: grid; gap: 0.7rem; }
.contactlist li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; line-height: 1.55; }
.contactlist svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--sun); }

.sitefoot__legal {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
    padding: 1.25rem 0 0; margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
body.site .sitefoot__legal a { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); text-decoration: none; }
body.site .sitefoot__legal a:hover, body.site .sitefoot__legal a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sitefoot__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.86rem;
    color: #B6CDBF;
}
.sitefoot__bar p { margin: 0; }
.sitefoot__bar strong { color: var(--sun); font-weight: 600; }

/* ---------------------------------------------------------------
   15b  Signing in

   The one screen outside the shop's own chrome. It borrows the
   palette so it still looks like the same shop.
   --------------------------------------------------------------- */

body.site.page-centred {
    background-color: var(--mist);
    background-image:
        radial-gradient(circle at 18% 28%, rgba(0, 85, 122, 0.028) 0 10px, transparent 9px),
        radial-gradient(circle at 74% 68%, rgba(232, 120, 112, 0.07) 0 13px, transparent 11px),
        radial-gradient(circle at 46% 86%, rgba(0, 85, 122, 0.02) 0 7px, transparent 7px);
    background-size: 240px 200px, 320px 260px, 180px 150px;
}
body.site .panel {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2.25rem 2.25rem 2rem;
    box-shadow: 0 14px 40px rgba(0, 85, 122, 0.08);
}
body.site .panel__brand {
    color: var(--leaf) !important;
    font-size: 1.15rem;
    margin: 0 0 1.5rem;
    text-decoration: none;
}
body.site .panel__brand .wordmark__mark { width: 1.9rem; height: 1.9rem; }
body.site .panel__title { font-size: 1.6rem; margin: 0 0 0.4rem; }
body.site .panel__lede { color: var(--stone); margin: 0 0 1.5rem; }
body.site .panel .btn--block { width: 100%; }

/* ---------------------------------------------------------------
   16  The phone tab bar
   --------------------------------------------------------------- */

.appbar { display: none; }

/* ---------------------------------------------------------------
   16b  Buttons instead of links, people instead of names

   Anything a person can do is a button, and anyone the site talks
   about is a picture and a name. A bare link in a sentence is easy
   to miss and hard to tap; these are neither.
   --------------------------------------------------------------- */

/* A row of buttons under some text. */
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.9rem 0 0; }
.actions--centre { justify-content: center; }
.actions form { margin: 0; }
.panelcard .prose + .actions, .panelcard .peoplegrid + .actions { margin-top: 0.8rem; }
.stack--divided { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }

/* "Back" and the like: small buttons, wherever they were written as links. */
body.site .page__back .link,
body.site .backlink a,
body.site .band__more .link,
body.site .page__foot .link,
body.site .panel__foot .link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--ink); font-size: 0.87rem; font-weight: 600; text-decoration: none;
}
body.site .page__back .link:hover,
body.site .backlink a:hover,
body.site .band__more .link:hover,
body.site .page__foot .link:hover,
body.site .panel__foot .link:hover { border-color: var(--leaf); color: var(--leaf); }
body.site .page__back .link::before, body.site .backlink a::before { content: '\2039'; font-size: 1.1em; line-height: 1; }
body.site .page__foot .link, body.site .panel__foot .link { margin-left: 0.35rem; }

.hero2__second.btn { text-decoration: none; }
.hero2--behind .hero2__second.btn { color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.hero2--behind .hero2__second.btn:hover { background: rgba(255, 255, 255, 0.14); }

/* People, in a grid: each one a single target. */
.peoplegrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
body.site .peoplegrid .person {
    display: flex; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--paper); color: var(--ink);
}
body.site .peoplegrid a.person:hover { border-color: var(--leaf); background: var(--mist-2); }
body.site a.person--link:hover .person__name { text-decoration: none; color: var(--leaf); }
.person__sub { color: var(--stone); opacity: 1; }
.person--lg { gap: 1rem; }
.person--lg .person__name { font-family: var(--display); font-size: 1.6rem; line-height: 1.15; white-space: normal; }
.person--lg .person__sub { font-size: 0.95rem; margin-top: 0.2rem; white-space: normal; }

body.site .page__head.page__head--person { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 1rem; flex-wrap: wrap; }
body.site .cards__link--person { display: block; text-decoration: none; color: inherit; }
.cards--people .cards__meta { padding-left: 3.25rem; }
.cards__for, .page__for { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--stone); font-size: 0.87rem; }
.page__for { justify-content: center; }

/* A choice at checkout that is a person. */
.choice .person { flex: 1 1 auto; }
.choice__body { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
body.site .choice:has(.person) { align-items: center; }
body.site .choice:has(.person) input { margin-top: 0; }

/* ---------------------------------------------------------------
   16c  How many: one control, everywhere

   Minus, the number, plus, in one rounded pill. The number is still
   a real field — it can be typed into, and the form works without
   scripts — but it has none of the browser's own arrows, which is
   what made the old box look like it belonged to another program.
   --------------------------------------------------------------- */

.stepper {
    display: inline-flex; align-items: stretch; height: 2.7rem; flex: none;
    border: 1.5px solid #DCE3E9; border-radius: 999px; background: var(--paper);
    overflow: hidden; vertical-align: middle;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.stepper:focus-within { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(0, 85, 122, 0.14); }
.stepper__btn {
    width: 2.55rem; border: 0; background: transparent; color: var(--leaf);
    font: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1; cursor: pointer;
    display: grid; place-items: center; padding: 0;
}
.stepper__btn:hover { background: var(--mist-2); }
.stepper__btn:active { background: #DCE8EF; }
.stepper__btn[disabled] { color: #B9C4BD; cursor: not-allowed; background: transparent; }
body.site .stepper .stepper__input {
    width: 2.7rem; min-width: 0; border: 0; border-radius: 0; padding: 0; margin: 0;
    background: transparent; box-shadow: none; outline: 0;
    text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink);
    -moz-appearance: textfield; appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.table .stepper { height: 2.4rem; }
.inline-form .stepper { flex: none; }
/* A select is as wide as its longest option unless told otherwise, and one
   long product name must not push the row off the side of a phone. */
body.site .inline-form select { min-width: 0; max-width: 100%; }

/* ---------------------------------------------------------------
   16d  The cart
   --------------------------------------------------------------- */

.cartpage {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start;
}
.cartbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.9rem; }
.cartbar__count { margin: 0; color: var(--stone); }
.cartbar__count strong { color: var(--ink); font-size: 1.1rem; }

/* A button that asks before it acts. */
.confirm { position: relative; }
.confirm > summary { list-style: none; cursor: pointer; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm__panel {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20; width: 16rem; margin: 0;
    padding: 0.9rem 1rem 1rem; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: 0 14px 34px rgba(0, 85, 122, 0.18); text-align: left;
}
.confirm__panel p { margin: 0 0 0.7rem; font-size: 0.93rem; }
body.site .btn--danger { background: #A32D22; border-color: #A32D22; color: #fff; }
body.site .btn--danger:hover { background: #8B241B; border-color: #8B241B; }

.cartlines { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.cartline {
    display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto 5.5rem 2.4rem;
    gap: 0.5rem 1rem; align-items: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line);
    scroll-margin-top: 11rem;
}
.cartline:last-child { border-bottom: 0; }
.cartline:target { background: #F3F7FA; }
.cartline--off { opacity: 0.6; }
.cartline__pic { width: 4.4rem; height: 4.4rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.cartline__pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cartline__pic--empty { background: var(--mist); }
body.site .cartline__pic--empty span { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--leaf); opacity: 0.35; }
.cartline__what { display: grid; gap: 0.15rem; min-width: 0; }
body.site .cartline__name { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.3; }
body.site .cartline__name:hover { color: var(--leaf); }
.cartline__meta { color: var(--stone); font-size: 0.86rem; }
.cartline__tag {
    justify-self: start; margin-top: 0.15rem; padding: 0.18rem 0.55rem; border-radius: 999px;
    background: #FCE4E1; color: #6B4A00; font-size: 0.74rem; font-weight: 600;
}
.cartline__tag--warn { background: #F3E1DD; color: #7A3B30; }
.cartline__total { text-align: right; font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.cartline__remove {
    width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--stone);
    display: grid; place-items: center; cursor: pointer;
}
.cartline__remove:hover { background: #F3E1DD; color: #A32D22; }
/* With scripts on, a typed quantity saves itself and this is not needed.
   nojs.css, loaded only where scripts are off, brings it back. */
.cart__update { display: none; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0; }

.cartsum {
    position: sticky; top: 9.5rem; display: grid; gap: 0.75rem;
    padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper);
}
body.site .cartsum__title { font-size: 1.1rem; margin: 0; }
.cartsum__rows { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; margin: 0; }
.cartsum__rows dt { color: var(--stone); }
.cartsum__rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cartsum__rows .cartsum__total { padding-top: 0.7rem; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 1.15rem; }
.cartsum__note { margin: 0 0 0.3rem; color: var(--stone); font-size: 0.86rem; line-height: 1.45; }
.cartsum .btn { text-align: center; }

.cartbaskets { max-width: var(--wrap); margin: 3rem auto 0; }
.cartbaskets__head { margin: 0 0 1rem; }
body.site .cartbaskets__title { font-size: 1.35rem; margin: 0 0 0.25rem; }
.cartbaskets__lede { margin: 0; color: var(--stone); }
.basketrow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.basketcard {
    display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.6rem 0.9rem; align-items: center;
    padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper);
}
.basketcard:hover { border-color: #CFDDE6; }
.basketcard__pic { width: 4.6rem; height: 4.6rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.basketcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.basketcard__pic--empty { background: var(--mist); }
body.site .basketcard__pic--empty span { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--leaf); opacity: 0.35; }
.basketcard__what { display: grid; gap: 0.1rem; min-width: 0; }
body.site .basketcard__name { font-weight: 700; color: var(--ink); text-decoration: none; line-height: 1.3; }
body.site .basketcard__name:hover { color: var(--leaf); }
.basketcard__meta { color: var(--stone); font-size: 0.84rem; }
.basketcard__price { font-weight: 700; color: var(--leaf); font-variant-numeric: tabular-nums; }
.basketcard__was { color: var(--stone); text-decoration: line-through; font-weight: 400; font-size: 0.86rem; margin-left: 0.3rem; }
.basketcard__add { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.7rem; margin: 0; }
body.site .basketcard__pic, body.site .cartline__pic { text-decoration: none; }
/* A saved list has no picture of its own; the person it is for stands in for one. */
.basketcard--list { grid-template-columns: minmax(0, 1fr); }
.basketcard__for { display: flex; align-items: center; gap: 0.4rem; color: var(--stone); font-size: 0.86rem; margin: 0.15rem 0; }
.basketcard__in { color: var(--stone); font-size: 0.84rem; }

/* ---------------------------------------------------------------
   17  Phones and tablets
   --------------------------------------------------------------- */

@media (max-width: 68rem) {
    /* minmax(0, 1fr), not 1fr: a 1fr track is at least as wide as its
       widest content, and the rail laid out in a row is wider than a
       phone — which is exactly what the scroller is there to handle. */
    .accountlayout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .accountrail {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 0.4rem;
        scrollbar-width: thin;
    }
    .accountrail a, .accountrail button { white-space: nowrap; padding: 0.6rem 1.05rem; border-radius: 999px; }
    .accountrail__count { margin-left: 0.4rem; }
}

@media (max-width: 70rem) {
    /* Two menus, a search and four icons do not fit one line here, so the
       menus go behind the burger. The name, the search and the icons stay. */
    .sitebar__inner { flex-wrap: wrap; row-gap: 0.6rem; }
    .menu-button { display: grid; gap: 4px; padding: 0.5rem 0.25rem; cursor: pointer; }
    .menu-button span { display: block; width: 22px; height: 2px; background: #fff; }

    .sitebar__menu {
        display: none;
        order: 7;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    .menu-toggle:checked ~ .sitebar__menu { display: flex; }

    .sitebar__menu .sitenav { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; }
    .sitebar__menu .sitenav--after:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 0.25rem; padding-top: 0.25rem; }
    body.site .sitebar__menu .sitenav a, .sitebar__menu .navdrop > summary { display: block; padding: 0.7rem 0; font-size: 1rem; text-align: left; }
    .sitebar__menu .navdrop__panel { position: static; box-shadow: none; margin: 0.25rem 0 0.5rem; }

    /* The aisles are a row that scrolls sideways rather than one that wraps. */
    .sitebar__row .sitenav { overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
    .sitebar__row .sitenav::-webkit-scrollbar { display: none; }
}

@media (max-width: 62rem) {
    body.site .footgrid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footgrid__col--brand { grid-column: 1 / -1; }
    .split2 { grid-template-columns: 1fr; gap: 1.5rem; }
    .sitesearch { max-width: none; }
    body.site .sitesearch select { display: none; }
}

@media (max-width: 52rem) {
    .steps { grid-template-columns: 1fr; gap: 1.75rem; }
    .detail { grid-template-columns: 1fr; gap: 1.75rem; }
    .cardpromo { grid-column: span 2; flex-direction: column; align-items: flex-start; }
    .cardpromo img { width: 100%; height: 7rem; }
    .promisestrip__inner { grid-template-columns: 1fr; gap: 1.25rem; }
    .hero2--picture_right .hero2__inner,
    .hero2--picture_left  .hero2__inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero2--picture_left  .hero2__media { order: 0; }
    .hero2--short  .hero2__inner,
    .hero2--medium .hero2__inner,
    .hero2--tall   .hero2__inner { min-height: 0; padding: 2.5rem 0 3.5rem; }
    .hero2__chip--middle { right: 0.5rem; }
    .hero2__chip { left: 0.5rem; }
    .wsplit { grid-template-columns: 1fr; gap: 1.75rem; }
    .wsplit--right .wsplit__media { order: 0; }
    .tracker__steps { grid-auto-flow: row; grid-auto-columns: auto; justify-items: start; gap: 0.1rem; }
    .tracker__step { grid-template-columns: 1.75rem 1fr; justify-items: start; text-align: left; column-gap: 0.75rem; }
    .tracker__step::before { top: -50%; left: 0.8rem; width: 3px; height: 100%; }
    .tracker__mark { grid-row: span 2; }
    .tracker__name { margin-top: 0; }
}

@media (max-width: 47rem) {
    body.site { --gutter: 1rem; }

    /* The header folds: name and icons stay, the search drops to its
       own line, everything else goes behind the burger. */
    .sitebar__inner { gap: 0.6rem 0.5rem; }
    /* The name gives way before the icons do: they must stay on its line. */
    .wordmark { flex: 1 1 0; min-width: 0; font-size: 1.12rem; }
    .wordmark__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wordmark__logo { max-width: 100%; height: 1.9rem; object-fit: contain; object-position: left; }
    .sitesearch { order: 6; width: 100%; flex-basis: 100%; max-width: none; }
    .sitebar__row { display: none; }
    .sitebar__icons { gap: 0.1rem; }
    .iconlink__label { display: none; }
    .iconlink--signin { width: 2.4rem; padding: 0; border: 0; }
    /* Messages has its own place in the bar along the bottom. */
    body.site:has(.appbar) .iconlink--messages { display: none; }

    /* What opens from an icon spans the screen rather than hanging off
       an icon that may be anywhere along the row. */
    .hdrop { position: static; }
    .hdrop__panel, .hdrop__panel--wide {
        left: var(--gutter); right: var(--gutter); top: 3.5rem;
        width: auto; max-width: none;
    }
    .hdrop__list { max-height: 55vh; }

    body.site .page__head { padding: 2.25rem var(--gutter); margin-bottom: 2rem; }
    body.site .shelfgrid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.9rem; }
    .card { padding: 0.65rem 0.7rem 0.75rem; }
    .card__name { font-size: 0.92rem; }
    .aisles { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; }
    body.site .footgrid { grid-template-columns: 1fr; }
    .sitefoot__inner { padding-left: 1.4rem; padding-right: 1.4rem; }
    .sitefoot__bar { flex-direction: column; align-items: flex-start; }
    body.site .band, body.site .proofband,
    body.site .sec--tint, body.site .sec--dark { padding-top: 2.75rem; padding-bottom: 2.75rem; }
    body.site .w-cta { padding: 2.5rem 1.25rem; border-radius: 16px; }
    .joinband { padding: 2.75rem var(--gutter); }
    body.site .site__main > .section,
    body.site .site__main > .shelf,
    body.site .sec, body.site .band, body.site .proofband, body.site .w-cta { margin-top: 3.25rem; }

    .utilitybar__note { display: none; }
    .utilitybar__inner { justify-content: space-between; }

    /* The bar people already know from every app on their phone. */
    .appbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .appbar__tab {
        display: grid; justify-items: center; gap: 0.2rem;
        padding: 0.55rem 0.25rem 0.5rem;
        text-decoration: none; color: var(--stone); font-size: 0.7rem;
    }
    .appbar__tab svg { width: 1.45rem; height: 1.45rem; }
    .appbar__tab--on { color: var(--leaf); }
    .appbar__icon { position: relative; display: block; line-height: 0; }
    .appbar__badge {
        position: absolute; top: -0.35rem; left: 0.8rem;
        min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
        border-radius: 999px; background: #D64545; color: #fff;
        font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
    }

    /* A button reached by Tab, or a line the page jumps to, must not come to
       rest underneath the bar, where it can be seen but not pressed. */
    html:has(.appbar) { scroll-padding-bottom: 5rem; }

    /* Nothing should end up underneath the bar. */
    body.site .site__main { padding-bottom: 6.5rem; }
    body.site .sitefoot { padding-bottom: 4.5rem; }
}

@media (max-width: 34rem) {
    .statstrip { grid-auto-flow: row; grid-auto-columns: auto; }
    .statstrip__item {
        border-left: 0; border-top: 1px solid var(--line);
        display: flex; align-items: baseline; justify-content: space-between;
        text-align: left; padding: 0.75rem 1rem;
    }
    .statstrip__item:first-child { border-top: 0; }
    .statstrip__link { display: flex; width: 100%; align-items: baseline; justify-content: space-between; }
    .profilehead { gap: 0.9rem; }
    .photoedit { flex-direction: column; }
    .cardpromo { grid-column: span 1; }
}

@media (max-width: 60rem) {
    .cartpage { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .cartsum { position: static; }
}
@media (max-width: 36rem) {
    /* Picture and name on one line; quantity, total and remove beneath. */
    .cartline { grid-template-columns: 3.6rem minmax(0, 1fr) auto; grid-template-areas: "pic what remove" "pic qty total"; row-gap: 0.6rem; padding: 0.85rem; }
    .cartline__pic { grid-area: pic; width: 3.6rem; height: 3.6rem; align-self: start; }
    .cartline__what { grid-area: what; }
    .cartline .stepper { grid-area: qty; justify-self: start; }
    .cartline__total { grid-area: total; }
    .cartline__remove { grid-area: remove; justify-self: end; align-self: start; }
    .basketrow { grid-template-columns: minmax(0, 1fr); }
    .gallery__thumb { width: 3.8rem; height: 3.8rem; }
    .confirm__panel { width: min(16rem, calc(100vw - 2 * var(--gutter))); }
}

/* ---------------------------------------------------------------
   Where we deliver: one question at the top, then the places, read
   like a directory. Colour is a small dot per region and nothing else.
   --------------------------------------------------------------- */

.where { max-width: 70rem; margin: 0 auto; }

.wfind { max-width: 60rem; margin: 0 auto 3rem; text-align: center; }
.wfind__form, .wfind__answer { max-width: 42rem; margin-left: auto; margin-right: auto; }
.wfind__form { display: grid; gap: 0.6rem; justify-items: center; }
.wfind__label { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.wfind__lede { margin: 0 0 0.6rem; color: var(--stone); max-width: 32rem; }
.wfind__row {
    display: flex; gap: 0.4rem; width: 100%; padding: 0.4rem;
    border-radius: 999px; background: var(--paper);
    box-shadow: 0 1px 2px rgba(10, 38, 56, 0.06), 0 10px 30px rgba(10, 38, 56, 0.09);
}
.wfind__row input { flex: 1; min-width: 0; border: 0 !important; background: transparent; box-shadow: none !important; font-size: 1.05rem; padding-left: 1.1rem; }
.wfind__row input:focus { outline: none; }
.wfind__row:focus-within { box-shadow: 0 0 0 3px rgba(0, 85, 122, 0.18), 0 10px 30px rgba(10, 38, 56, 0.09); }
.wfind__row .btn { flex: none; }
.wfind__answer { margin: 1.25rem auto 0; display: grid; gap: 0.5rem; text-align: left; }
.wanswer {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
    margin: 0; padding: 0.85rem 1.1rem; border-radius: 14px; background: var(--mist-2); color: var(--ink);
}
.wanswer span { color: var(--stone); }
.wanswer--no { background: #FFF6DA; }
.wanswer .btn { margin-left: auto; }
.wjump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1.5rem 0 0; }
.wjump__one {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px;
    background: var(--mist); color: var(--ink); text-decoration: none; font-size: 0.9rem;
}
.wjump__one:hover { background: var(--mist-2); }
.wjump__dot, .wregion__name::before { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--z); flex: none; }
.wfind__free { margin: 1rem 0 0; color: var(--stone); font-size: 0.92rem; }

.wlist { display: grid; gap: 1rem; }
.wregion {
    display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 1.5rem 2.5rem;
    padding: 1.75rem 2rem; border-radius: 22px; background: var(--mist);
    scroll-margin-top: 6rem;
}
.wregion__side { align-self: start; position: sticky; top: 7rem; }
.wregion__name { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.6rem; font-size: 1.3rem; letter-spacing: -0.015em; }
.wregion__name::before { content: ""; width: 0.65rem; height: 0.65rem; }
.wregion__fee { margin: 0; color: var(--stone); }
.wregion__fee strong { color: var(--leaf); font-size: 1.15rem; }
.wregion__eta { margin: 0.2rem 0 0; color: var(--ink); }
.wregion__count { margin: 0.6rem 0 0; color: var(--stone); font-size: 0.88rem; }
.wregion__areas {
    list-style: none; margin: 0; padding: 0;
    columns: 4 9rem; column-gap: 1.75rem;
}
.wregion__areas li { break-inside: avoid; padding: 0.28rem 0; color: var(--ink); line-height: 1.35; }
.wregion__own { margin-left: 0.25rem; color: var(--stone); font-size: 0.82rem; }

.wask {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 3rem; align-items: start;
    margin: 3rem 0 0; padding: 2rem; border-radius: 22px; background: var(--paper);
    box-shadow: 0 1px 2px rgba(10, 38, 56, 0.05), 0 12px 36px rgba(10, 38, 56, 0.07);
}
.wask__title { margin: 0 0 0.5rem; font-size: 1.3rem; letter-spacing: -0.015em; }
.wask__text p { color: var(--stone); margin: 0; max-width: 26rem; }
.wask__form { max-width: none; }

@media (max-width: 47rem) {
    .wfind { margin-bottom: 2rem; }
    .wregion { grid-template-columns: minmax(0, 1fr); padding: 1.35rem 1.25rem; border-radius: 18px; gap: 1rem; }
    .wregion__side { position: static; }
    .wregion__areas { columns: 2 8rem; }
    .wask { grid-template-columns: minmax(0, 1fr); padding: 1.35rem 1.25rem; }
}

/* ---------------------------------------------------------------
   The shop: aisles that slide, filters beside the shelf
   --------------------------------------------------------------- */

.aislestrip { position: relative; max-width: var(--wrap); margin: 0 auto 1.75rem; }
.aislestrip .chips { margin: 0; padding: 0.15rem 0 0.4rem; scroll-behavior: smooth; }
.aislestrip.has-after .chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent); }
.aislestrip.has-before .chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem); mask-image: linear-gradient(to right, transparent, #000 4rem); }
.aislestrip.has-before.has-after .chips { -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); }
.aislestrip.is-dragging .chips { cursor: grabbing; user-select: none; }
.aislestrip.is-dragging .chips a { pointer-events: none; }
.aislestrip__arrow {
    position: absolute; top: 0.15rem; z-index: 2;
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0;
    border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
    box-shadow: 0 1px 3px rgba(10, 38, 56, 0.12), 0 4px 14px rgba(10, 38, 56, 0.12);
}
.aislestrip__arrow:hover { background: var(--mist-2); }
.aislestrip__arrow--back { left: -0.4rem; }
.aislestrip__arrow--next { right: -0.4rem; }
.aislestrip__arrow[hidden] { display: none; }
body.site .chip.is-empty { color: var(--stone); }
.chip__n { margin-left: 0.2rem; font-size: 0.8rem; font-weight: 500; color: var(--stone); }
body.site .chip.is-here .chip__n { color: #4A3A00; }

.shop {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.25rem; align-items: start;
}
.shop__filters { position: sticky; top: 7.5rem; }
.sfilter { display: grid; gap: 1.4rem; max-width: none; }
.sfilter__head { display: flex; align-items: center; justify-content: space-between; }
.sfilter__title { margin: 0; font-size: 1.05rem; }
.sfilter__close { display: none; }
.sfilter__group { margin: 0; padding: 0; border: 0; display: grid; gap: 0.4rem; min-width: 0; }
.sfilter__label { padding: 0; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.15rem; }
.sfilter__group input[type="search"], .sfilter__range input { width: 100%; min-width: 0; }
.sfilter__check {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0; cursor: pointer; font-weight: 400;
}
.sfilter__check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--leaf); }
.sfilter__n { color: var(--stone); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sfilter__bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.sfilter__band {
    display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0.7rem; margin: 0 -0.7rem;
    border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 0.94rem;
}
.sfilter__band:hover { background: var(--mist); }
.sfilter__band.is-on { background: var(--mist-2); color: var(--leaf); font-weight: 700; }
.sfilter__range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.45rem; margin-top: 0.35rem; color: var(--stone); font-size: 0.88rem; }
.sfilter__do { display: grid; gap: 0.5rem; }

.shoptop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1rem; }
.shoptop__count { margin: 0 auto 0 0; color: var(--stone); }
.shoptop__count strong { color: var(--ink); }
.shoptop__filters { display: none; cursor: pointer; }
.shoptop__sort { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.shoptop__sort label { color: var(--stone); font-size: 0.9rem; white-space: nowrap; }
.shoptop__sort select { width: auto; min-width: 11rem; }
.shoptop__active { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.activechip {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; border-radius: 999px;
    background: var(--mist-2); color: var(--leaf); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.activechip:hover { background: #DDEAF1; }
.activechip--all { background: transparent; color: var(--stone); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
body.site .shelfgrid--shop { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

.shoppager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; margin: 2.5rem 0 0; }
.shoppager__nums { display: flex; align-items: center; gap: 0.25rem; }
.shoppager__n {
    display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.5rem; border-radius: 999px;
    color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
}
.shoppager__n:hover { background: var(--mist); }
.shoppager__n.is-here { background: var(--ink); color: #fff; font-weight: 700; }
.shoppager__gap { color: var(--stone); padding: 0 0.2rem; }

@media (max-width: 60rem) {
    .shop { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .shoptop__filters { display: inline-flex; align-items: center; gap: 0.4rem; }
    .shop__filters {
        display: none; position: fixed; inset: 0; z-index: 80; top: 0;
        overflow-y: auto; padding: 1.25rem var(--gutter) 2rem; background: var(--paper);
    }
    .shop__toggle:checked ~ .shop__filters { display: block; }
    .sfilter__close {
        display: inline-flex; padding: 0.45rem 1rem; border-radius: 999px; background: var(--mist);
        font-weight: 600; cursor: pointer;
    }
    .shoptop__sort select { min-width: 0; }
    .aislestrip__arrow { display: none !important; }
}

/* A customer's invoices and receipts. */
body.site .myinvoices .dsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0 0 1.5rem; }
body.site .myinvoices .dsum__fig { margin: 0; padding: 1rem 1.1rem; border-radius: 14px; background: var(--mist); color: var(--stone); font-size: 0.9rem; }
body.site .myinvoices .dsum__fig strong { display: block; color: var(--ink); font-size: 1.35rem; letter-spacing: -0.01em; }
body.site .statement { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
body.site .statement th { text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--stone); padding: 0 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
body.site .statement td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
body.site .statement .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.site .statement .sub { display: block; font-size: 0.82rem; color: var(--stone); }
body.site .statement__payment td, body.site .statement__refund td { color: var(--stone); }
@media (max-width: 40rem) {
    body.site .statement thead { display: none; }
    body.site .statement tr { display: grid; grid-template-columns: 1fr 1fr; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
    body.site .statement td { border: 0; padding: 0.15rem 0; }
    body.site .statement td::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--stone); }
    body.site .statement .num { text-align: left; }
}

/* Choosing the kind of a product: brand, size, colour. */
.kinds { flex: 1 0 100%; display: grid; gap: 1.1rem; }
.kinds__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.kinds__name { padding: 0; margin-bottom: 0.55rem; font-weight: 700; font-size: 0.92rem; }
.kinds__picked { font-weight: 400; color: var(--stone); }
.kinds__values { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kinds__radio { position: absolute; opacity: 0; pointer-events: none; }
.kinds__pill {
    display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.45rem 1rem; border-radius: 999px;
    border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font-size: 0.92rem; font-weight: 500; cursor: pointer;
}
.kinds__pill:hover { border-color: var(--ink); }
.kinds__radio:checked + .kinds__pill { border-color: var(--leaf); background: var(--leaf); color: #fff; font-weight: 600; }
.kinds__radio:focus-visible + .kinds__pill { outline: 2px solid var(--leaf); outline-offset: 2px; }
.kinds__pill.is-unavailable { color: var(--stone); border-style: dashed; }
.kinds__none { margin: 0; color: #A32D22; font-size: 0.9rem; }
.detail__range { margin: -0.4rem 0 0.4rem; color: var(--stone); font-size: 0.9rem; }
.detail__buy .btn:disabled { opacity: 0.5; cursor: not-allowed; }
a.card__add { text-decoration: none; color: #fff; }
.card__from { font-size: 0.78em; font-weight: 500; color: var(--stone); }
.cartline__kind { margin-top: 0.35rem; max-width: 100%; width: auto; min-width: 12rem; padding: 0.35rem 2rem 0.35rem 0.75rem; font-size: 0.88rem; border-radius: 999px; }


/* ===============================================================
   The brand book's pieces, applied once here so the rules
   above stay about layout:
     - the drop from the logo (round, one corner square) frames
       photographs and the small icon discs;
     - the logo pattern, very faint, marks the banners and the footer;
     - the gradient (peach, coral, navy) is kept for the one band that
       asks people to join, so it means something when it appears.
   =============================================================== */

body.site button, body.site input, body.site select, body.site textarea { font-family: inherit; }
body.site h1, body.site h2, body.site .page__title { font-weight: 700; letter-spacing: -0.025em; }

/* The header: navy, the logo in white, the aisle row a step deeper. */
.wordmark__logo { height: 2.75rem; }
.sitebar__row { background: var(--leaf-dn); border-top: 0; }
.wordmark__mark { background: var(--sun); color: var(--sun-ink); border-radius: var(--r-drop); }
.utilitybar__social a { background: var(--leaf-dn); }
body.site .chip.is-here .chip__n { color: var(--sun-ink); }

/* Banners and the hero: the pattern instead of dots. */
body.site .page__head,
.hero2 {
    background-color: var(--mist);
    background-image: var(--brand-pattern-light, none);
    background-size: var(--brand-pattern-size, 128px);
}
.hero2__eyebrow { background: var(--sun); color: var(--sun-ink); }
.hero2__media img { border-radius: 240px 240px 240px 0; }
.hero2__chip { border-radius: 999px 999px 999px 0; }

/* The three promises: icons in a small drop. */
.promise__icon { border-radius: var(--r-drop); background: #FDF0EE; color: var(--leaf); }

/* The join band: the brand gradient, white words. */
.joinband {
    background-color: var(--leaf);
    background-image: var(--brand-pattern-dark, none), var(--grad);
    background-size: var(--brand-pattern-size, 128px), cover;
    color: #fff;
}
.joinband__eyebrow { color: rgba(255, 255, 255, 0.85); }
body.site .joinband__title { color: #fff; font-weight: 300; letter-spacing: -0.02em; }
.joinband__title em { color: #fff; font-weight: 700; }
.joinband__text { color: rgba(255, 255, 255, 0.9); }
body.site .joinband .btn--sun { background: #fff; border-color: #fff; color: var(--leaf); }
body.site .joinband .btn--sun:hover { background: var(--mist-2); border-color: var(--mist-2); }
body.site .joinband .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.8); }
body.site .joinband .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* The footer: deep navy with the pattern, the logo in white. */
.sitefoot__inner {
    background-color: var(--leaf-dn);
    background-image: var(--brand-pattern-dark, none);
    background-size: var(--brand-pattern-size, 128px);
}
.wordmark__logo--foot { height: 3.25rem; }
body.site .footgrid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sitefoot__bar strong { color: var(--sun); }

/* Product and basket cards: the price in navy, a coral "from". */
.card__from { color: var(--sun-dn); }
.card__media img, .tile__img { border-radius: 12px; }

/* The empty picture of a product with no photograph: the drop, faint. */
.card__media--empty, .detail__media--empty { background-color: var(--mist); background-image: var(--brand-pattern-light, none); background-size: var(--brand-pattern-size, 128px); }
body.site .sitefoot { padding-top: 1.75rem; }

/* Focus on the dark header and footer: the warm peach of the brand, which
   reads on navy where a navy ring would vanish. */
body.site .sitebar, body.site .sitefoot, body.site .joinband { --focus: #EFB886; }
body.site .utilitybar { --focus: #0F2B3D; }
body.site .hdrop__panel, body.site .aisledrop__panel { --focus: rgba(0, 85, 122, 0.45); }
[data-variant-price].is-muted { opacity: 0.4; transition: opacity .15s; }

/* The cookie question, when the shop uses outside tools: a quiet card at
   the bottom corner, never a wall in front of the shop. */
.consent {
    position: fixed; z-index: 70; left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 30rem; margin-left: auto;
    display: grid; gap: 0.85rem; padding: 1.1rem 1.2rem;
    background: #fff; color: var(--ink, #0E2A3B); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(14, 42, 59, 0.18), 0 2px 6px rgba(14, 42, 59, 0.08);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.consent__actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
body.site .sitefoot__cookies {
    margin-left: 0.9rem; padding: 0; border: 0; background: none; cursor: pointer;
    color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.85;
}
body.site .sitefoot__cookies:hover { opacity: 1; }
@media (max-width: 40rem) {
    .consent { left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
    body.site:has(.appbar) .consent { bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px) + 4rem); }
}