/* ==========================================================================
   Echo Lifestyle - storefront

   Same palette as the back office, opposite intent. The admin shell is dense
   because people work in it all day; this is browsed, so it is generous:
   larger type, more air, and the serif from the logo doing the talking.

   Loaded instead of site.css, not alongside it. Nothing here overrides the
   back office and nothing there leaks in.
   ========================================================================== */

:root {
    --shop-wine-900: #2a0713;
    --shop-wine-700: #4d1028;
    --shop-wine-600: #70203e;
    --shop-wine-100: #f7e9ee;

    --shop-rose-400: #e6aa96;
    --shop-rose-500: #c98b6e;
    --shop-rose-600: #a9705a;   /* dark enough to read on white */

    --shop-ink: #1c1418;
    --shop-ink-soft: #6b6169;
    --shop-line: #e7e2e5;
    --shop-surface: #ffffff;
    --shop-canvas: #fbf9fa;

    --shop-display: Georgia, "Times New Roman", serif;

    --shop-header-height: 68px;
}

body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--shop-ink);
    background: var(--shop-surface);
}

.shop-display {
    font-family: var(--shop-display);
    letter-spacing: -0.01em;
}

a {
    color: var(--shop-wine-600);
}

a:hover {
    color: var(--shop-wine-700);
}

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

.shop-announce {
    background: var(--shop-wine-900);
    color: var(--shop-rose-400);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0;
    text-align: center;
}

/* Underlined rather than merely tinted. On a strip this dark, colour alone is
   not enough contrast to read as a link, and the phone number is the one thing
   here somebody is meant to act on. */
.shop-announce__link {
    display: inline-block;
    padding: .3rem .2rem;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    font-weight: 600;
    white-space: nowrap;
}

.shop-announce__link:hover,
.shop-announce__link:focus {
    color: var(--shop-rose-400);
}

/* --- trust and delivery -------------------------------------------------- */

/* Two facts about the order, not advertising. The moment these look like
   badges somebody bought, they stop being believed - so: no gold, no seals, no
   shouting. A tinted panel, a line drawing, and the plain words. */
.shop-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Side by side is fine on a narrow phone at this size, but below 360px the
   labels start breaking mid-word, and a stacked pair reads better than a
   hyphenated one. */
@media (max-width: 359px) {
    .shop-trust {
        grid-template-columns: 1fr;
    }
}

.shop-trust__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.015);
}

.shop-trust__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--shop-wine-100);
    color: var(--shop-wine-600);
}

.shop-trust__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.shop-trust__label {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--shop-wine-700);
    font-weight: 600;
}

/* A statement of fact, styled like one. Deliberately not a gold rosette: the
   claim is only worth anything while it still looks like data. */
.shop-rank {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--shop-wine-600);
    background: var(--shop-wine-100);
    border-radius: 0.3rem;
    padding: 0.2rem 0.5rem;
}

.shop-freeship {
    color: #2a6b45;
    font-weight: 600;
}

.shop-freeship-nudge .progress {
    background: rgba(0, 0, 0, 0.08);
}

.shop-freeship-nudge .progress-bar {
    background: #2a6b45;
}

.shop-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--shop-surface);
    border-bottom: 1px solid var(--shop-line);
}

.shop-header__bar {
    min-height: var(--shop-header-height);
}

/* The mark and the wordmark are separate on purpose: the emblem ships as
   artwork, the words are live type. Setting the whole lockup as an image would
   mean shipping the LIFESTYLE line at a size where it cannot be read, and it
   would blur on every screen the artwork was not sized for. */
.shop-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--shop-wine-700);
    white-space: nowrap;
}

.shop-logo:hover {
    color: var(--shop-wine-600);
}

.shop-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}

.shop-logo__type {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--shop-display);
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Tracked out to sit under ECHO at the same optical width, the way it does in
   the artwork. */
.shop-logo__type small {
    font-family: var(--shop-display);
    font-size: .5rem;
    font-weight: 400;
    letter-spacing: .38em;
    text-transform: uppercase;
    /* Darker than the rose used elsewhere: at this size the lighter one fell
       short of the 4.5:1 contrast small text needs. */
    color: #8c5845;
    margin-top: .22rem;
    margin-left: .1em;
}

.shop-logo--dark {
    color: #fff;
}

.shop-logo--dark .shop-logo__type small {
    color: var(--shop-rose-400);
}

.shop-logo--dark img {
    width: 36px;
    height: 36px;
}

/* The header basket: always a filled wine pill with a bag, so it is the most
   visible thing in the header after the logo. With something in it the count
   sits in a gold bubble and a soft ring pulses out now and then. */
.shop-basket {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: .45rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--shop-wine-600) 0%, var(--shop-wine-700) 100%);
    text-decoration: none;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px -8px rgba(77, 16, 40, .85);
    transition: transform .2s ease, box-shadow .2s ease;
}

.shop-basket:hover,
.shop-basket:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(77, 16, 40, .95);
}

.shop-basket.has-items {
    background: linear-gradient(120deg, #e3266f 0%, var(--shop-wine-600) 55%, var(--shop-wine-700) 100%);
}

.shop-basket.has-items::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(227, 38, 111, .55);
    animation: shop-basket-pulse 3.2s ease-out infinite;
    pointer-events: none;
}

@keyframes shop-basket-pulse {
    0% { box-shadow: 0 0 0 0 rgba(227, 38, 111, .55); }
    45%, 100% { box-shadow: 0 0 0 10px rgba(227, 38, 111, 0); }
}

.shop-basket__icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.shop-basket.has-items .shop-basket__count {
    background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd23f 50%, #f4a300 100%);
    color: var(--shop-wine-900);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .shop-basket.has-items::after { animation: none; }
}

/* Small phones: the bag and the number say it; the word does not fit. */
@media (max-width: 380px) {
    .shop-basket__label { display: none; }
}

.shop-basket__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--shop-wine-600);
    color: #fff;
    font-size: .72rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.shop-nav {
    border-top: 1px solid var(--shop-line);
}

.shop-nav__list {
    display: flex;
    flex-direction: column;
}

.shop-nav__item {
    position: static;
}

.shop-nav__link {
    display: inline-block;
    padding: 0.65rem 0;
    margin-right: 1.6rem;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}

.shop-nav__link:hover,
.shop-nav__link.is-active {
    color: var(--shop-wine-600);
    border-bottom-color: var(--shop-wine-600);
}

/* --- mega menu ------------------------------------------------------------
   Desktop only. On a phone there is no hover, the panel would cover the page,
   and the top-level link already goes somewhere useful - so below the md
   breakpoint the children simply do not render as a panel. */

.shop-mega { display: none; }

@media (min-width: 768px) {
    .shop-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
    }

    .shop-mega {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 1040;
        background: var(--shop-surface);
        border-top: 1px solid var(--shop-line);
        border-bottom: 1px solid var(--shop-line);
        box-shadow: 0 12px 24px -18px rgba(42, 7, 19, .5);

        /* Hidden by clipping rather than display:none, so the panel can fade
           and so a keyboard tab still reaches the links inside it. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition: opacity .14s ease, transform .14s ease, visibility .14s;
    }

    .shop-nav__item:hover .shop-mega,
    .shop-nav__item:focus-within .shop-mega {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .shop-mega__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 2rem;
        padding: 1.5rem 0 1.75rem;
    }

    /* Sub-categories and brands side by side, each falling away when it has
       nothing in it - so a category with brands but no children still gets a
       full-width panel rather than a column of dead space. */
    .shop-mega__panels {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem 2.5rem;
        align-items: start;
    }

    .shop-mega__panel {
        flex: 1 1 240px;
        min-width: 0;
    }

    .shop-mega__title {
        font-size: .7rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--shop-ink-soft);
        margin-bottom: .45rem;
    }

    .shop-mega__cols {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .1rem 1.5rem;
        align-content: start;
    }

    .shop-mega__link {
        display: block;
        padding: .3rem 0;
        color: var(--shop-ink);
        text-decoration: none;
        font-size: .9rem;
    }

    .shop-mega__link:hover {
        color: var(--shop-wine-600);
    }

    /* Quiet on purpose. The number is there to be checked, not read. */
    .shop-mega__count {
        font-size: .72rem;
        color: var(--shop-ink-soft);
        font-variant-numeric: tabular-nums;
        margin-left: .25rem;
    }

    .shop-mega__aside {
        border-left: 1px solid var(--shop-line);
        padding-left: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: .6rem;
        align-content: start;
    }

    .shop-mega__all,
    .shop-mega__offer {
        font-size: .85rem;
        text-decoration: none;
    }

    .shop-mega__all {
        font-weight: 600;
        color: var(--shop-wine-600);
    }

    .shop-mega__offer {
        color: var(--shop-rose-600);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-mega { transition: none; }
}

/* --- the search box ---------------------------------------------------------
   A soft pill with a rose border that warms to wine on focus, a search icon
   on the left, and a round go button on the right. Opened while empty, it
   drops a panel of current offers. */
.shop-search {
    position: relative;
}

.shop-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 .3rem 0 .95rem;
    border: 1.5px solid #f08ab0;
    border-radius: 999px;
    background: #fdf6f8;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.shop-searchbox:focus-within {
    border-color: var(--shop-wine-600);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(214, 31, 105, .12);
}

.shop-searchbox__icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--shop-wine-700);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.shop-searchbox__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 .6rem;
    border: 0;
    background: transparent;
    color: var(--shop-ink);
    font-size: 16px;   /* 16px or iPhones zoom the page on focus */
    outline: none;
}

.shop-searchbox__input::placeholder {
    color: #8a7480;
    opacity: 1;
}

/* The browser's own clear cross would sit beside the go button. */
.shop-searchbox__input::-webkit-search-cancel-button { display: none; }

.shop-searchbox__go {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3266f 0%, var(--shop-wine-600) 100%);
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease;
}

.shop-searchbox__go:hover,
.shop-searchbox__go:focus-visible { transform: scale(1.07); }

.shop-searchbox__go svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- the offers panel ------------------------------------------------------ */

.shop-searchbox__panel {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    right: 0;
    z-index: 1040;
    padding: .55rem;
    border: 1px solid var(--shop-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 40px -16px rgba(42, 7, 19, .45);
    animation: shop-searchbox-in .18s ease;
}

@keyframes shop-searchbox-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.shop-searchbox__head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .1rem .35rem .45rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-wine-700);
}

.shop-searchbox__spark {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd23f 50%, #f4a300 100%);
    color: var(--shop-wine-900);
    font-size: .65rem;
}

.shop-searchbox__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-searchbox__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .4rem .45rem;
    border-radius: 10px;
    color: var(--shop-ink);
    text-decoration: none;
}

.shop-searchbox__item:hover,
.shop-searchbox__item:focus-visible {
    background: #fdf0f4;
    outline: none;
}

.shop-searchbox__item img,
.shop-searchbox__noimg {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--shop-canvas);
}

.shop-searchbox__noimg {
    display: grid;
    place-items: center;
    font-family: var(--shop-display);
    color: var(--shop-wine-600);
}

.shop-searchbox__name {
    min-width: 0;
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shop-searchbox__brand {
    display: block;
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
}

.shop-searchbox__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .05rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shop-searchbox__price b {
    font-size: .9rem;
    color: var(--shop-wine-700);
}

.shop-searchbox__price s {
    font-size: .72rem;
    color: var(--shop-ink-soft);
}

.shop-searchbox__off {
    padding: 0 .4rem;
    border-radius: 999px;
    background: #e3266f;
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
}

.shop-searchbox__all {
    display: block;
    margin-top: .35rem;
    padding: .55rem;
    border-top: 1px solid var(--shop-line);
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: var(--shop-wine-600);
    text-decoration: none;
}

.shop-searchbox__all:hover { color: var(--shop-wine-700); text-decoration: underline; }

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

/* --- product tiles -------------------------------------------------------- */

.shop-card {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.shop-card__frame {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--shop-canvas);
    border: 1px solid var(--shop-line);
    overflow: hidden;
}

.shop-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.shop-card:hover .shop-card__frame img {
    transform: scale(1.04);
}

/* No photograph yet. A grey box with the product's initial beats a broken
   image icon, and it makes the gap in the photography obvious. */
.shop-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--shop-display);
    font-size: 2.5rem;
    color: var(--shop-rose-500);
    background: var(--shop-wine-100);
}

/* Discount and NEW stack in the top corner rather than sitting on each other. */
.shop-card__flags {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

.shop-card__flag {
    background: linear-gradient(135deg, #ff3d7f 0%, #d61f69 45%, var(--shop-wine-600) 100%);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    box-shadow: 0 2px 6px -2px rgba(112, 32, 62, .55);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

.shop-card__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
}

.shop-card__brand {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
    margin-top: .6rem;
}

.shop-card__name {
    font-size: .95rem;
    line-height: 1.35;
    margin: .15rem 0 .3rem;
}

.shop-card:hover .shop-card__name {
    color: var(--shop-wine-600);
}

.shop-price {
    font-weight: 600;
}

.shop-price__was {
    color: var(--shop-ink-soft);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: .35rem;
}

/* --- sections ------------------------------------------------------------- */

.shop-hero {
    /* The category chips under the headline bleed to the screen edge on a
       phone; clipping here keeps that from widening the whole page. */
    overflow-x: clip;
    background:
        radial-gradient(900px 420px at 20% -10%, var(--shop-wine-100), transparent 70%),
        var(--shop-canvas);
    border-bottom: 1px solid var(--shop-line);
}

.shop-section__title {
    font-family: var(--shop-display);
    font-size: 1.5rem;
    margin: 0;
}

.shop-rule {
    height: 1px;
    background: var(--shop-line);
    flex: 1;
}

.shop-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--shop-line);
    padding: 1.1rem;
    height: 100%;
    background: var(--shop-surface);
}

.shop-tile:hover {
    border-color: var(--shop-rose-500);
    color: var(--shop-wine-600);
}

/* --- product page --------------------------------------------------------- */

.shop-gallery__main {
    aspect-ratio: 1 / 1;
    background: var(--shop-canvas);
    border: 1px solid var(--shop-line);
    overflow: hidden;
}

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

.shop-thumb {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border: 1px solid var(--shop-line);
    cursor: pointer;
    background: var(--shop-canvas);
}

.shop-thumb.is-active {
    border-color: var(--shop-wine-600);
}

/* A shade is a colour. Rendering it as a circle rather than a dropdown row is
   the single cheapest thing this page does for a cosmetics catalogue. */
.shop-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--shop-line);
    padding: 0;
    position: relative;
}

.shop-swatch.is-active {
    box-shadow: 0 0 0 2px var(--shop-surface), 0 0 0 3px var(--shop-wine-600);
}

.shop-swatch.is-out::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(to bottom right,
        transparent calc(50% - 1px), var(--shop-ink-soft) 50%,
        transparent calc(50% + 1px));
    opacity: .7;
}

.shop-chip {
    border: 1px solid var(--shop-line);
    background: var(--shop-surface);
    padding: .35rem .85rem;
    font-size: .85rem;
}

.shop-chip.is-active {
    border-color: var(--shop-wine-600);
    color: var(--shop-wine-600);
}

/* Sold out: muted, never struck through - a crossed-out "250ml" reads like a
   crossed-out price. The "Out of stock" line under the options says why. */
.shop-chip:disabled {
    color: var(--shop-ink-soft);
    background: var(--shop-canvas);
    border-style: dashed;
    cursor: not-allowed;
}

.shop-price--lead {
    font-family: var(--shop-display);
    font-size: 1.9rem;
}

.btn-shop {
    background: var(--shop-wine-600);
    border-color: var(--shop-wine-600);
    color: #fff;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .85rem;
    padding: .7rem 1.6rem;
}

.btn-shop:hover,
.btn-shop:focus {
    background: var(--shop-wine-700);
    border-color: var(--shop-wine-700);
    color: #fff;
}

.btn-shop:disabled {
    background: var(--shop-ink-soft);
    border-color: var(--shop-ink-soft);
    color: #fff;
    opacity: .55;
}

.shop-accordion .accordion-button:not(.collapsed) {
    background: var(--shop-wine-100);
    color: var(--shop-wine-700);
}

.shop-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--shop-line);
}

/* --- browsing: filter rail beside the grid --------------------------------- */

.shop-browse {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .shop-browse {
        grid-template-columns: 232px minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .shop-browse__rail {
        position: sticky;
        top: calc(var(--shop-header-height) + 1rem);
    }
}

.shop-filters__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--shop-line);
    margin-bottom: .9rem;
}

.shop-filters__group {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--shop-line);
}

.shop-filters__group:last-child {
    border-bottom: none;
}

.shop-filters__title {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
    margin: 0 0 .5rem;
}

/* Links, not checkboxes. Every filter state is a real URL, so the thing that
   changes it should be something a browser can bookmark and go back from. */
.shop-filters__toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: .88rem;
}

.shop-filters__toggle:hover {
    color: var(--shop-wine-600);
}

.shop-filters__box {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border: 1px solid var(--shop-line);
    background: var(--shop-surface);
}

.shop-filters__toggle.is-on {
    color: var(--shop-wine-600);
    font-weight: 600;
}

.shop-filters__toggle.is-on .shop-filters__box {
    background: var(--shop-wine-600);
    border-color: var(--shop-wine-600);
    box-shadow: inset 0 0 0 2px var(--shop-surface);
}

.shop-filters__label {
    flex: 1;
    min-width: 0;
}

.shop-filters__count {
    font-size: .78rem;
    color: var(--shop-ink-soft);
    font-variant-numeric: tabular-nums;
}

/* --- basket and checkout -------------------------------------------------- */

.shop-lines {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--shop-line);
}

.shop-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--shop-line);
}

/* A line that cannot be ordered is flagged, not hidden. A basket that quietly
   drops an item is how somebody receives half an order and blames the courier. */
.shop-line.is-problem {
    background: #fdf6f3;
    box-shadow: inset 3px 0 0 var(--shop-rose-500);
    padding-left: .75rem;
}

.shop-line__thumb {
    display: block;
    width: 84px;
    height: 84px;
    background: var(--shop-canvas);
    border: 1px solid var(--shop-line);
    overflow: hidden;
}

.shop-line__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-line__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--shop-display);
    font-size: 1.6rem;
    color: var(--shop-rose-500);
    background: var(--shop-wine-100);
}

.shop-line__name {
    display: block;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: .98rem;
    line-height: 1.35;
}

.shop-line__name:hover {
    color: var(--shop-wine-600);
}

.shop-line__money {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shop-qty {
    width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.shop-summary {
    border: 1px solid var(--shop-line);
    background: var(--shop-surface);
    padding: 1.25rem;
    position: sticky;
    top: calc(var(--shop-header-height) + 1rem);
}

.shop-summary code {
    font-size: .9rem;
}

.shop-done__mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--shop-wine-100);
    color: var(--shop-wine-600);
    font-size: 1.6rem;
    line-height: 56px;
}

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

.shop-footer {
    background: var(--shop-wine-900);
    color: #c9b6bd;
    margin-top: 4rem;
    padding: 3rem 0 2rem;
}

.shop-footer .shop-logo {
    display: inline-flex;
}

.shop-footer a {
    color: #c9b6bd;
    text-decoration: none;
}

.shop-footer a:hover {
    color: var(--shop-rose-400);
}

.shop-footer__title {
    color: #fff;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

@media (max-width: 767.98px) {
    .shop-line {
        grid-template-columns: 64px minmax(0, 1fr);
        row-gap: .5rem;
    }

    .shop-line__thumb { width: 64px; height: 64px; }

    .shop-line__qty,
    .shop-line__money {
        grid-column: 2;
        text-align: left;
    }

    .shop-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .shop-logo__type {
        font-size: 1.2rem;
    }

    .shop-logo img {
        width: 34px;
        height: 34px;
    }

    .shop-price--lead {
        font-size: 1.5rem;
    }

    .shop-section__title {
        font-size: 1.25rem;
    }
}

/* --- text pages -----------------------------------------------------------
   Delivery, returns, privacy, contact. Measured in characters rather than
   pixels: a line of prose stops being readable past about seventy-five of them,
   and that is true on every screen width. */

.shop-prose {
    max-width: 68ch;
}

.shop-prose h2 {
    font-family: var(--shop-display);
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: .6rem;
}

.shop-prose p,
.shop-prose ul {
    margin-bottom: 1rem;
}

.shop-prose .lead {
    font-size: 1.05rem;
}

.shop-table {
    max-width: 32rem;
}

.shop-contact dt {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
    margin-top: 1rem;
}

.shop-contact dd {
    margin-bottom: 0;
}

/* --- order tracking -------------------------------------------------------- */

.shop-track {
    border: 1px solid var(--shop-line);
    border-radius: .5rem;
    padding: 1.25rem;
    background: var(--shop-surface);
}

.shop-track__status {
    font-family: var(--shop-display);
    font-size: 1.5rem;
    color: var(--shop-wine-600);
    line-height: 1.2;
}

.shop-track__courier {
    background: var(--shop-canvas);
    border-radius: .375rem;
    padding: .75rem 1rem;
}

/* Five plain steps rather than a percentage bar. Nobody wants to be told their
   parcel is sixty per cent delivered; they want to know which of these has
   actually happened. */

.shop-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 0;
}

.shop-steps__item {
    flex: 1 1 0;
    min-width: 5.5rem;
    position: relative;
    padding-top: 1.5rem;
    text-align: center;
}

/* The connecting rule, drawn behind the dots rather than between them, so it
   does not need a separate element per gap. */
.shop-steps__item::before {
    content: "";
    position: absolute;
    top: .43rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--shop-line);
}

.shop-steps__item:first-child::before { left: 50%; }
.shop-steps__item:last-child::before { right: 50%; }

.shop-steps__item.is-done::before {
    background: var(--shop-wine-600);
}

.shop-steps__dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: var(--shop-surface);
    border: 2px solid var(--shop-line);
}

.shop-steps__item.is-done .shop-steps__dot {
    background: var(--shop-wine-600);
    border-color: var(--shop-wine-600);
}

.shop-steps__label {
    font-size: .75rem;
    color: var(--shop-ink-soft);
    display: block;
    padding: 0 .25rem;
}

.shop-steps__item.is-done .shop-steps__label {
    color: var(--shop-ink);
}

.shop-track__form {
    background: var(--shop-canvas);
    border: 1px solid var(--shop-line);
    border-radius: .5rem;
    padding: 1.25rem;
}

/* --- Offers: the one loud entry in the menu --------------------------------
   A hot pill with a gold starburst stamped on its corner, like a price sticker
   on a shop shelf. Everything else in the menu stays quiet, which is what
   lets this one shout. One highlighted item is a signpost; three would be noise. */
.shop-offer {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .28rem 1.05rem .3rem .85rem;
    border-radius: 999px;
    background: linear-gradient(120deg, #ff3d7f 0%, #d61f69 45%, var(--shop-wine-600) 100%);
    box-shadow: 0 4px 14px -4px rgba(214, 31, 105, .55);
    overflow: visible;
    isolation: isolate;
}

/* A shine that sweeps across every few seconds. */
.shop-offer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    background-size: 250% 100%;
    background-position: 130% 0;
    animation: shop-offer-shine 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.shop-offer__text {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8rem;
}

/* The starburst: a twelve-point gold seal with a % on it, slowly turning. */
.shop-offer__burst {
    position: absolute;
    top: -.85rem;
    right: -.8rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    background: radial-gradient(circle at 35% 30%, #fff3b0 0%, #ffd23f 45%, #f4a300 100%);
    clip-path: polygon(50.0% 0.0%, 59.3% 15.2%, 75.0% 6.7%, 75.5% 24.5%, 93.3% 25.0%, 84.8% 40.7%, 100.0% 50.0%, 84.8% 59.3%, 93.3% 75.0%, 75.5% 75.5%, 75.0% 93.3%, 59.3% 84.8%, 50.0% 100.0%, 40.7% 84.8%, 25.0% 93.3%, 24.5% 75.5%, 6.7% 75.0%, 15.2% 59.3%, 0.0% 50.0%, 15.2% 40.7%, 6.7% 25.0%, 24.5% 24.5%, 25.0% 6.7%, 40.7% 15.2%);
    animation: shop-offer-spin 9s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

/* The % counter-turns, so it stays upright while the star turns. */
.shop-offer__burst > span {
    font-size: .62rem;
    font-weight: 900;
    color: var(--shop-wine-700);
    line-height: 1;
    animation: shop-offer-spin 9s linear infinite reverse;
}

.shop-offer__burst--tiny {
    top: -.45rem;
    right: -.65rem;
    width: 1.05rem;
    height: 1.05rem;
}

.shop-offer__burst--tiny > span { font-size: .45rem; }

.shop-nav__link--offer {
    border-bottom-color: transparent !important;
}

.shop-nav__link--offer:hover .shop-offer,
.shop-nav__link--offer:focus-visible .shop-offer,
.shop-nav__link--offer.is-active .shop-offer {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 8px 20px -6px rgba(214, 31, 105, .7);
}

.shop-offer {
    transition: transform .2s ease, box-shadow .2s ease;
}

.shop-bottomnav__offer {
    color: #d61f69;
    font-weight: 800;
}

@keyframes shop-offer-shine {
    0%, 55% { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}

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

@media (prefers-reduced-motion: reduce) {
    .shop-offer::after,
    .shop-offer__burst,
    .shop-offer__burst > span {
        animation: none;
    }
}

/* --- brand index ----------------------------------------------------------
   Columns that fill downwards, so A to Z reads down one column and continues
   in the next rather than snaking across the page. */

.shop-brandindex {
    columns: 4 200px;
    column-gap: 2rem;
}

.shop-brandindex__group {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

.shop-brandindex__letter {
    font-family: var(--shop-display);
    font-size: 1rem;
    color: var(--shop-wine-600);
    border-bottom: 1px solid var(--shop-line);
    padding-bottom: .25rem;
    margin-bottom: .5rem;
}

.shop-brandindex__count {
    font-size: .72rem;
    color: var(--shop-ink-soft);
    font-variant-numeric: tabular-nums;
    margin-left: .25rem;
}

/* --- home page banner ------------------------------------------------------
   One image, no rotation. The aspect ratio is declared rather than left to the
   file, so the browser reserves the right amount of space before the image
   arrives - without it the whole page jumps downwards when the banner loads,
   which is both unpleasant and a Core Web Vitals penalty. */

.shop-banner {
    position: relative;
    background: var(--shop-wine-100);
}

.shop-banner__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.shop-banner__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

@media (max-width: 767px) {
    .shop-banner__image {
        aspect-ratio: 4 / 3;
    }
}

/* The scrim exists only where there is text to make readable. A banner whose
   artwork already carries its own words gets no overlay at all, because
   darkening a picture to make room for text that is not there just makes the
   picture worse. */
.shop-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(
        90deg,
        rgba(42, 7, 19, .72) 0%,
        rgba(42, 7, 19, .45) 45%,
        rgba(42, 7, 19, 0) 78%);
}

@media (max-width: 767px) {
    /* Bottom-up on a phone, where a left-to-right gradient would cover the
       middle of the picture rather than one edge of it. */
    .shop-banner__overlay {
        align-items: flex-end;
        padding-bottom: 1.25rem;
        background: linear-gradient(
            0deg,
            rgba(42, 7, 19, .78) 0%,
            rgba(42, 7, 19, .35) 45%,
            rgba(42, 7, 19, 0) 80%);
    }
}

.shop-banner__text {
    max-width: 34ch;
    color: #fff;
}

.shop-banner__headline {
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: .5rem;
}

.shop-banner__sub {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(.85rem, 1.6vw, 1.05rem);
    margin-bottom: .9rem;
}

.shop-banner__button {
    display: inline-block;
    padding: .5rem 1.4rem;
    border-radius: 999px;
    background: #fff;
    color: var(--shop-wine-700);
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-weight: 600;
}

.shop-banner__link:hover .shop-banner__button {
    background: var(--shop-rose-400);
    color: var(--shop-wine-900);
}

/* --- banner carousel ------------------------------------------------------
   Only present when there is more than one slide. A single banner renders as a
   plain image with none of this. */

.shop-banner .carousel-item {
    position: relative;
}

/* Bootstrap's default control icons are white chevrons on nothing, which
   disappear over a pale photograph. A soft disc behind them survives any
   artwork without covering it. */
.shop-banner .carousel-control-prev,
.shop-banner .carousel-control-next {
    width: 12%;
    opacity: 1;
}

.shop-banner .carousel-control-prev-icon,
.shop-banner .carousel-control-next-icon {
    width: 2.4rem;
    height: 2.4rem;
    padding: .7rem;
    border-radius: 999px;
    background-color: rgba(42, 7, 19, .45);
    background-size: 1rem 1rem;
}

.shop-banner .carousel-control-prev:hover .carousel-control-prev-icon,
.shop-banner .carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(42, 7, 19, .75);
}

.shop-banner .carousel-indicators {
    margin-bottom: .6rem;
}

/* The dot stays small; the padding around it is the part a thumb hits, so the
   target is 24px square without the dots looking any bigger. */
.shop-banner .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    width: .6rem;
    height: .6rem;
    padding: .45rem;
    background-clip: content-box;
    border-radius: 999px;
    border: 0;
    background-color: rgba(255, 255, 255, .55);
    opacity: 1;
}

.shop-banner .carousel-indicators .active {
    background-color: #fff;
}

/* The pause control. Small and unobtrusive, but present: hover-to-pause does
   not exist on a phone, and moving content needs a way to be stopped. */
.shop-banner__pause {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 3;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(42, 7, 19, .45);
    color: #fff;
    font-size: .6rem;
    line-height: 1;
}

.shop-banner__pause:hover,
.shop-banner__pause:focus-visible {
    background: rgba(42, 7, 19, .8);
}

/* The glyph itself is swapped in script - the control should say what pressing
   it will do, not what state the thing is in. */
.shop-banner__pause.is-paused span {
    font-size: .7rem;
}

@media (max-width: 575px) {
    /* Arrows eat a fifth of a narrow screen and overlap the headline. Swipe
       and the dots do the same job there. */
    .shop-banner .carousel-control-prev,
    .shop-banner .carousel-control-next {
        display: none;
    }
}

/* --- mega menu: grouped columns -------------------------------------------
   Once a subgroup has categories of its own (Makeup > Face > Foundation),
   each subgroup heads its own column with its categories under it - the
   same group, subgroup, category reading the phone drawer uses. */

@media (min-width: 768px) {
    .shop-mega__panel--group {
        flex: 0 1 190px;
    }

    .shop-mega__heading {
        display: block;
        margin-bottom: .35rem;
        font-weight: 600;
        font-size: .9rem;
        color: var(--shop-ink);
        text-decoration: none;
    }

    .shop-mega__heading:hover {
        color: var(--shop-wine-600);
    }

    .shop-mega__panel--group .shop-mega__link {
        padding: .2rem 0;
        font-size: .86rem;
        color: var(--shop-ink-soft);
    }

    .shop-mega__panel--group .shop-mega__link:hover {
        color: var(--shop-wine-600);
    }
}

/* --- phone menu drawer -----------------------------------------------------
   An accordion: each level indented further and a shade lighter, a +/-
   button beside anything that has something inside it. The name is always
   a link; only the button opens and closes. */

.shop-drawer {
    --bs-offcanvas-width: min(86vw, 360px);
}

.shop-drawer__header {
    border-bottom: 1px solid var(--shop-line);
    position: relative;
    justify-content: center;
}

.shop-drawer__title {
    font-size: 1.1rem;
    margin: 0;
}

.shop-drawer__header .btn-close {
    position: absolute;
    right: 1rem;
}

.shop-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-drawer > .offcanvas-body > nav > .shop-drawer__list {
    padding: .5rem 0;
}

.shop-drawer__row {
    display: flex;
    align-items: center;
}

.shop-drawer__link {
    flex: 1 1 auto;
    display: block;
    padding: .7rem 1.25rem;
    color: var(--shop-ink);
    text-decoration: none;
    font-size: 1.02rem;
}

.shop-drawer__link.is-active,
.shop-drawer__link:hover {
    color: var(--shop-wine-600);
}

/* In the drawer the pill sits on the left of the row like the others' text,
   with room above for the star. */
.shop-drawer__link--offer {
    padding-top: .95rem;
    padding-bottom: .85rem;
}

.shop-drawer__list--2 .shop-drawer__link {
    padding-left: 2.25rem;
    font-size: .98rem;
}

.shop-drawer__list--3 .shop-drawer__link {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 3.25rem;
    font-size: .95rem;
    color: var(--shop-ink-soft);
}

/* Large enough to hit with a thumb, which the glyph alone is not. */
.shop-drawer__toggle {
    flex: 0 0 auto;
    width: 3rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--shop-ink);
    font-size: 1.35rem;
    line-height: 1;
}

.shop-drawer__toggle::before {
    content: "+";
}

.shop-drawer__toggle[aria-expanded="true"]::before {
    content: "\2212";
}

.shop-drawer__toggle:focus-visible {
    outline: 2px solid var(--shop-wine-600);
    outline-offset: -4px;
}

.shop-drawer__help {
    list-style: none;
    margin: .5rem 0 1.5rem;
    padding: .75rem 1.25rem 0;
    border-top: 1px solid var(--shop-line);
    font-size: .88rem;
}

.shop-drawer__help li {
    padding: .3rem 0;
}

.shop-drawer__help a {
    color: var(--shop-ink-soft);
    text-decoration: none;
}

/* --- product page price ---------------------------------------------------
   Price in the brand colour; when marked down, the old price struck through,
   a thin rule, what it saves, and the percentage as a pill. */

.shop-pricebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
}

.shop-pricebox__now {
    font-family: var(--shop-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--shop-wine-600);
    font-variant-numeric: tabular-nums;
}

.shop-pricebox__offer {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
}

/* hidden has to beat display:inline-flex above. */
.shop-pricebox__offer[hidden],
.shop-pricebox__pct[hidden] {
    display: none;
}

.shop-pricebox__was {
    color: var(--shop-ink-soft);
    text-decoration: line-through;
    font-size: 1.05rem;
}

.shop-pricebox__divider {
    width: 1px;
    height: 1.4rem;
    background: var(--shop-line);
}

/* Bootstrap's success green, one step darker so it passes contrast on white. */
.shop-pricebox__save {
    color: #157347;
    font-size: 1.05rem;
    font-weight: 500;
}

.shop-pricebox__pct {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: .35rem;
    background: var(--shop-wine-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
}

@media (max-width: 575.98px) {
    .shop-pricebox__now {
        font-size: 1.55rem;
    }
}

/* ==========================================================================
   Mobile pass, 2026-09-28
   ========================================================================== */

/* --- no zoom on focus -----------------------------------------------------
   iPhone Safari zooms the whole page into any field whose text is under 16px,
   and does not zoom back out. The search box (input-group-sm, 14px) did it on
   every tap. 16px on phones only; desktops keep the compact size. Same
   specificity as Bootstrap's rules, and this file loads after it, so no
   !important is needed. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 16px;
    }
}

/* --- product gallery: swipe on phones, thumbnails on desktop ------------- */

.shop-gallery {
    position: relative;
}

.shop-gallery__track,
.shop-gallery__empty {
    aspect-ratio: 1 / 1;
    background: var(--shop-canvas);
    border: 1px solid var(--shop-line);
}

.shop-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

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

.shop-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.shop-gallery__slide {
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* The whole picture, whatever its shape - a tall pack shot or the back of
   a tube must never lose its top and bottom to fill the square. */
.shop-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    transition: transform .12s ease-out;
    transform-origin: center center;
}

/* Magnifier on a computer: the picture grows under the mouse. */
.shop-gallery__slide.is-zooming img {
    transform: scale(2.4);
    transition: none;
}

.shop-gallery__hint {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--shop-line);
    color: var(--shop-ink-soft);
    font-size: .75rem;
    pointer-events: none;
}

/* Full-screen view: tap or click a picture. */
.shop-zoom {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: rgba(20, 10, 14, .94);
    touch-action: none;
}

.shop-zoom.is-open {
    display: block;
}

.shop-zoom__stage {
    position: absolute;
    inset: 3.5rem 0 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.shop-zoom__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform .15s ease-out;
    background: #fff;
}

.shop-zoom__stage.is-zoomed img {
    cursor: grab;
    transition: none;
}

.shop-zoom__btn {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}

.shop-zoom__btn:hover {
    background: rgba(255, 255, 255, .26);
}

.shop-zoom__close { top: .6rem; right: .6rem; }
.shop-zoom__prev { left: .6rem; top: 50%; transform: translateY(-50%); }
.shop-zoom__next { right: .6rem; top: 50%; transform: translateY(-50%); }

.shop-zoom__count {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    font-size: .85rem;
}

body.shop-zoom-open {
    overflow: hidden;
}

.shop-gallery__dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .6rem;
}

.shop-gallery__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--shop-line);
    transition: background .15s, width .15s;
}

.shop-gallery__dots span.is-active {
    width: 18px;
    border-radius: 4px;
    background: var(--shop-wine-600);
}

/* --- sticky bottom bar (product page, checkout) --------------------------- */

.shop-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--shop-surface);
    border-top: 1px solid var(--shop-line);
    box-shadow: 0 -8px 20px -14px rgba(42, 7, 19, .45);
    transform: translateY(110%);
    transition: transform .2s ease;
}

.shop-stickybar.is-visible {
    transform: none;
}

.shop-stickybar .btn {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.shop-stickybar__price {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.shop-stickybar__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--shop-ink-soft);
}

.shop-stickybar__now {
    font-family: var(--shop-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--shop-wine-600);
}

.shop-stickybar__was {
    font-size: .82rem;
    color: var(--shop-ink-soft);
    text-decoration: line-through;
}

.shop-stickybar__was[hidden] {
    display: none;
}

/* Room at the foot of the page so the bar never covers the last thing on it -
   the footer links, or the checkout's last field. */
@media (max-width: 991.98px) {
    body.has-stickybar,
    body:has(.shop-has-stickybar) {
        padding-bottom: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-stickybar,
    .shop-gallery__track {
        transition: none;
        scroll-behavior: auto;
    }
}

/* --- checkout summary on phones ------------------------------------------- */

.shop-summary__lines > summary {
    cursor: pointer;
    color: var(--shop-ink-soft);
    list-style: revert;
}

@media (min-width: 992px) {
    /* Always open on a desktop; the fold is a phone affordance only. */
    .shop-summary__lines > summary {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .shop-summary {
        padding: 1rem;
    }
}

/* --- home page: rows that scroll sideways on phones ----------------------- */

.shop-section__all {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--shop-wine-600);
    text-decoration: none;
    white-space: nowrap;
}

.shop-scrollrow {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 767.98px) {
    /* One swipeable row instead of a tall two-column grid, so a phone sees
       every section of the home page within a few thumb-lengths rather than
       scrolling past eight products to reach the next heading. The next card
       peeks in at the edge, which is what tells people the row scrolls. */
    .shop-rail {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }

    .shop-rail::-webkit-scrollbar {
        display: none;
    }

    .shop-rail > .col {
        flex: 0 0 44%;
        width: 44%;
        scroll-snap-align: start;
    }

    .shop-rail--tiles > .col {
        flex-basis: 38%;
        width: 38%;
    }

    .shop-scrollrow {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: calc(-1 * var(--bs-gutter-x, .75rem));
        padding-right: var(--bs-gutter-x, .75rem);
    }

    .shop-scrollrow::-webkit-scrollbar {
        display: none;
    }

    .shop-scrollrow > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* --- "good for" concern tags on the product page -------------------------- */

.shop-goodfor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
}

.shop-goodfor__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--shop-ink-soft);
    margin-right: .15rem;
}

.shop-goodfor__tag {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .2rem .75rem;
    border: 1px solid var(--shop-wine-100);
    border-radius: 999px;
    background: var(--shop-wine-100);
    color: var(--shop-wine-700);
    font-size: .82rem;
    text-decoration: none;
}

.shop-goodfor__tag:hover,
.shop-goodfor__tag:focus-visible {
    border-color: var(--shop-wine-600);
    color: var(--shop-wine-600);
}

/* --- filter & sort sheet (phones) ----------------------------------------- */

/* Sort choices are single-choice, so they read as round buttons. */
.shop-filters__toggle--radio .shop-filters__box {
    border-radius: 50%;
}

/* offcanvas-lg lays its body out as a flex row from 992px up; the rail is a
   single column of filter groups, so it stays a plain block. */
.shop-sheet > .offcanvas-body {
    display: block;
}

@media (max-width: 991.98px) {
    .shop-sheet.offcanvas-lg {
        --bs-offcanvas-height: auto;
        max-height: 85vh;
        border-radius: 1rem 1rem 0 0;
        box-shadow: 0 -12px 30px -12px rgba(42, 7, 19, .35);
    }

    .shop-sheet__head {
        border-bottom: 1px solid var(--shop-line);
        padding-top: .9rem;
        padding-bottom: .9rem;
    }

    /* The grab handle people expect on a sheet. Decoration only - the close
       button and the backdrop are what dismiss it. */
    .shop-sheet__head::before {
        content: "";
        position: absolute;
        top: .4rem;
        left: 50%;
        width: 2.5rem;
        height: 4px;
        margin-left: -1.25rem;
        border-radius: 2px;
        background: var(--shop-line);
    }

    .shop-sheet__body {
        overflow-y: auto;
        padding-bottom: 1rem;
    }

    /* Bigger rows under a thumb than beside a mouse. */
    .shop-sheet .shop-filters__toggle {
        padding: .55rem 0;
        font-size: .95rem;
    }

    .shop-sheet__foot {
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--shop-line);
        background: var(--shop-surface);
    }

    .shop-sheet__foot .btn {
        min-height: 2.75rem;
    }
}

/* --- header folds its search row away on scroll (phones) ------------------ */

@media (max-width: 767.98px) {
    .shop-header {
        transition: box-shadow .2s ease;
    }

    .shop-header__search {
        max-height: 4rem;
        overflow: hidden;
        transition: max-height .2s ease, padding .2s ease, opacity .2s ease;
    }

    .shop-header.is-compact {
        box-shadow: 0 6px 16px -12px rgba(42, 7, 19, .45);
    }

    .shop-header.is-compact .shop-header__search {
        max-height: 0;
        padding-bottom: 0 !important;
        opacity: 0;
    }

    /* While the box is in use the row must not clip the offers panel that
       drops out of it. Folding only needs the clip while it animates. */
    .shop-header__search:focus-within {
        max-height: none;
        overflow: visible;
        opacity: 1;
    }
}

/* --- bottom navigation bar (phones) --------------------------------------- */

:root {
    --shop-bottomnav-height: 3.6rem;
}

.shop-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1036;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--shop-surface);
    border-top: 1px solid var(--shop-line);
    box-shadow: 0 -6px 16px -14px rgba(42, 7, 19, .45);
}

.shop-bottomnav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    height: var(--shop-bottomnav-height);
    padding: 0;
    border: 0;
    background: none;
    color: var(--shop-ink-soft);
    font-size: .68rem;
    line-height: 1;
    text-decoration: none;
}

.shop-bottomnav__item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-bottomnav__item.is-active,
.shop-bottomnav__item:active {
    color: var(--shop-wine-600);
}

.shop-bottomnav__icon {
    position: relative;
    display: inline-flex;
}

.shop-bottomnav__badge {
    position: absolute;
    top: -.35rem;
    right: -.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--shop-wine-600);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.1rem;
    text-align: center;
}

/* Room for the bar, and the product page's and basket's own bars lifted to sit
   on top of it rather than underneath. */
@media (max-width: 767.98px) {
    body.has-bottomnav {
        padding-bottom: calc(var(--shop-bottomnav-height) + env(safe-area-inset-bottom, 0px));
    }

    body.has-bottomnav.has-stickybar {
        padding-bottom: calc(5rem + var(--shop-bottomnav-height) + env(safe-area-inset-bottom, 0px));
    }

    body.has-bottomnav .shop-stickybar {
        bottom: calc(var(--shop-bottomnav-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: .6rem;
        transform: translateY(calc(100% + var(--shop-bottomnav-height) + 2rem));
    }

    body.has-bottomnav .shop-stickybar.is-visible {
        transform: none;
    }
}

/* --- Messenger / call button ---------------------------------------------- */

.shop-contactfab {
    position: fixed;
    right: 1rem;
    bottom: 1.25rem;
    z-index: 1034;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.shop-contactfab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(42, 7, 19, .55);
    text-decoration: none;
    transition: transform .15s ease;
}

.shop-contactfab__btn:hover,
.shop-contactfab__btn:focus-visible {
    color: #fff;
    transform: scale(1.06);
}

/* Messenger's own blue and a call-button green: the colours people already
   read as "chat" and "phone" without needing a label. */
.shop-contactfab__btn--chat {
    background: #0a7cff;
}

.shop-contactfab__btn--call {
    background: #1f9d55;
}

/* Lifted clear of whatever bar owns the foot of the screen. */
@media (max-width: 767.98px) {
    body.has-bottomnav .shop-contactfab {
        bottom: calc(var(--shop-bottomnav-height) + env(safe-area-inset-bottom, 0px) + .9rem);
    }
}

@media (max-width: 991.98px) {
    body.has-stickybar .shop-contactfab,
    body:has(.shop-has-stickybar) .shop-contactfab {
        bottom: 5.5rem;
    }
}

@media (max-width: 767.98px) {
    body.has-bottomnav.has-stickybar .shop-contactfab {
        bottom: calc(var(--shop-bottomnav-height) + env(safe-area-inset-bottom, 0px) + 5.5rem);
    }
}

@media print {
    .shop-bottomnav,
    .shop-contactfab {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-header,
    .shop-header__search {
        transition: none;
    }
}

/* --- designed home page --------------------------------------------------
   Picture sections from Website › Home page sections. Each section passes its
   own column counts in as custom properties (--cols on a computer, --cols-md
   on a tablet, --cols-sm on a phone), so one rule lays out every row. The
   artwork carries the words; this only spaces and frames it. */

.shop-home {
    padding: 1.75rem 0 .5rem;
}

.shop-home + .shop-home {
    padding-top: 1.25rem;
}

.shop-home__title {
    text-align: center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--shop-ink);
    margin: 0 0 1rem;
}

.shop-home__title--light {
    color: #fff;
}

.shop-home__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-sm, 2), minmax(0, 1fr));
    gap: .6rem;
}

@media (min-width: 768px) {
    .shop-home__grid {
        grid-template-columns: repeat(var(--cols-md, 3), minmax(0, 1fr));
        gap: .9rem;
    }
}

@media (min-width: 992px) {
    .shop-home__grid {
        grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
        gap: 1rem;
    }

    .shop-home {
        padding-top: 2.5rem;
    }

    .shop-home__title {
        font-size: 1.05rem;
        margin-bottom: 1.25rem;
    }
}

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

.shop-home__tile {
    display: block;
    border-radius: .6rem;
    overflow: hidden;
    background: var(--shop-canvas);
    transition: transform .18s ease, box-shadow .18s ease;
}

.shop-home__tile img {
    display: block;
    width: 100%;
    height: auto;
}

a.shop-home__tile:hover,
a.shop-home__tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(42, 7, 19, .14);
}

a.shop-home__tile:focus-visible {
    outline: 3px solid var(--shop-wine-600);
    outline-offset: 2px;
}

/* --- trust strip ----------------------------------------------------------
   The row of promises near the foot of the home page, in the brand's wine
   rather than a borrowed purple. Text, not a picture, so it stays sharp and a
   screen reader can read it. */

.shop-promise {
    background: var(--shop-wine-700);
    color: #fff;
    margin-top: 2.5rem;
    padding: 1.6rem 0;
}

.shop-promise__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem .75rem;
}

@media (min-width: 992px) {
    .shop-promise__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .shop-promise__item + .shop-promise__item {
        border-left: 1px solid rgba(255, 255, 255, .22);
        padding-left: 1.5rem;
    }
}

.shop-promise__item,
.shop-promise__link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.shop-promise__link {
    color: inherit;
    text-decoration: none;
}

.shop-promise__link:hover {
    color: inherit;
    opacity: .9;
}

.shop-promise__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--shop-rose-500);
    color: #fff;
}

.shop-promise__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.shop-promise__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.shop-promise__title {
    font-weight: 700;
    font-size: 1rem;
}

.shop-promise__line {
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85;
}

@media (min-width: 992px) {
    .shop-promise__title {
        font-size: 1.25rem;
    }

    .shop-promise__icon {
        width: 3.25rem;
        height: 3.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-home__tile {
        transition: none;
    }

    a.shop-home__tile:hover {
        transform: none;
    }
}

/* ==========================================================================
   Home page, phase 2 - themed bands
   Every home section sits in a "band" with a background theme chosen in the
   back office (plain, blush, cream, wine, gold). Headings share one look: a
   small rose flourish, the title in the display face, a soft line under it.
   ========================================================================== */

:root {
    --shop-gold-300: #f1d9a6;
    --shop-gold-500: #d4a64a;
    --shop-gold-700: #8a6420;
    --shop-whatsapp: #1fa855;
    --shop-whatsapp-dark: #168a45;
    --shop-radius: 14px;
}

.shop-band {
    position: relative;
    padding: 2.25rem 0;
    overflow: hidden;
}

/* Two plain bands in a row read as one; no doubled gap between them. */
.shop-band.shop-band--plain + .shop-band.shop-band--plain {
    padding-top: .5rem;
}

.shop-band--plain { background: var(--shop-surface); }

.shop-band--blush {
    background:
        radial-gradient(120% 90% at 0% 0%, #fde8ef 0%, transparent 60%),
        radial-gradient(90% 80% at 100% 100%, #fff1e8 0%, transparent 60%),
        #fdf3f6;
}

.shop-band--cream {
    background: linear-gradient(180deg, #fcf7ef 0%, #f8efe2 100%);
}

.shop-band--gold {
    background:
        radial-gradient(110% 90% at 100% 0%, #fff6df 0%, transparent 55%),
        linear-gradient(135deg, #f7e6c1 0%, #fbf1dc 50%, #f3dcae 100%);
}

.shop-band--wine {
    color: #fff;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(201, 139, 110, .35) 0%, transparent 60%),
        radial-gradient(60% 100% at 0% 100%, rgba(112, 32, 62, .9) 0%, transparent 70%),
        linear-gradient(135deg, var(--shop-wine-900) 0%, var(--shop-wine-700) 100%);
}

@media (min-width: 992px) {
    .shop-band {
        padding: 3.25rem 0;
    }
}

/* --- band heading ---------------------------------------------------------
   The title sits in a coloured block on the left, like a folder tab, resting
   on a rule that runs the full width. Tabs or "View all" sit on the right of
   the same rule. Bold bands (wine) turn the block white. */

.shop-bar {
    --bar-block: var(--shop-wine-600);
    --bar-block-ink: #fff;
    --bar-fold: var(--shop-wine-900);
    --bar-rule: var(--shop-wine-600);
    --bar-ink: var(--shop-ink);
    --bar-ink-soft: var(--shop-ink-soft);
    --bar-active: var(--shop-wine-600);

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 1.25rem;
    margin: 0 0 1.4rem;
    border-bottom: 2px solid var(--bar-rule);
}

.shop-band--wine .shop-bar {
    --bar-block: #fff;
    --bar-block-ink: var(--shop-wine-700);
    --bar-fold: var(--shop-rose-400);
    --bar-rule: rgba(255, 255, 255, .7);
    --bar-ink: #fff;
    --bar-ink-soft: rgba(255, 255, 255, .78);
    --bar-active: #fff;
}

.shop-band--gold .shop-bar {
    --bar-ink-soft: #5c4415;
}

.shop-bar__label {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    padding: .55rem 1.35rem .5rem;
    border-radius: 8px 8px 0 0;
    background: var(--bar-block);
    color: var(--bar-block-ink);
}

/* The folded corner at the top left of the block. */
.shop-bar__label::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--bar-fold) transparent transparent;
}

.shop-bar__eyebrow {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .8;
}

.shop-bar__title {
    margin: 0;
    font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: inherit;
}

.shop-bar__side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 1rem;
}

.shop-bar__more {
    flex: 0 0 auto;
    padding: .45rem 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bar-ink);
    text-decoration: none;
    white-space: nowrap;
}

.shop-bar__more:hover,
.shop-bar__more:focus-visible {
    color: var(--bar-active);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.shop-bar__sub {
    margin: -.8rem 0 1.2rem;
    font-size: .92rem;
    color: var(--shop-ink-soft);
}

.shop-band--wine .shop-bar__sub { color: rgba(255, 255, 255, .78); }

/* --- tabs on the rule ----------------------------------------------------- */

.shop-tabs {
    display: flex;
    gap: .25rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar { display: none; }

.shop-tab {
    flex: 0 0 auto;
    position: relative;
    padding: .55rem .85rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bar-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

.shop-tab::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: -2px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background .2s ease;
}

.shop-tab:hover { color: var(--bar-ink); }

.shop-tab[aria-selected="true"] {
    color: var(--bar-active);
}

.shop-tab[aria-selected="true"]::after {
    background: var(--bar-active);
}

.shop-tab:focus-visible {
    outline: 2px solid var(--bar-active);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Phones: the tabs drop under the title block onto their own swipeable row,
   with "View all" kept beside the block. */
@media (max-width: 767.98px) {
    .shop-bar.has-tabs .shop-bar__side {
        display: contents;
    }

    .shop-bar.has-tabs .shop-bar__more {
        margin-left: auto;
        align-self: flex-end;
    }

    .shop-bar.has-tabs .shop-tabs {
        order: 3;
        flex: 1 0 100%;
        margin-top: .35rem;
    }

    .shop-bar.has-tabs .shop-tab:first-child { padding-left: .1rem; }
    .shop-bar.has-tabs .shop-tab:first-child::after { left: .1rem; }

    .shop-bar__label { padding: .45rem 1rem .4rem; }
}

/* --- concern finder: the concerns as buttons ------------------------------ */

.shop-chips {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.25rem;
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: none;
}

.shop-chips::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .shop-chips {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
    }
}

.shop-chips .shop-tab {
    padding: .5rem 1.1rem;
    border: 1.5px solid var(--shop-line);
    border-radius: 999px;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: .85rem;
    letter-spacing: 0;
    text-transform: none;
}

.shop-chips .shop-tab::after { display: none; }

.shop-chips .shop-tab:hover {
    border-color: var(--shop-rose-500);
    color: var(--shop-wine-700);
}

.shop-chips .shop-tab[aria-selected="true"] {
    border-color: var(--shop-wine-600);
    background: var(--shop-wine-600);
    color: #fff;
}

.shop-band--wine .shop-chips .shop-tab {
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
}

.shop-band--wine .shop-chips .shop-tab[aria-selected="true"] {
    border-color: #fff;
    background: #fff;
    color: var(--shop-wine-700);
}

/* A newly opened panel eases in rather than snapping. */
.shop-tabpanel:not([hidden]) {
    animation: shop-tab-in .25s ease;
}

@keyframes shop-tab-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-tabpanel:not([hidden]) { animation: none; }
}

/* --- "view all" pill ------------------------------------------------------ */

.shop-band__more {
    text-align: center;
    margin-top: 1.5rem;
}

.shop-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--shop-wine-600);
    color: var(--shop-wine-700);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    background: rgba(255, 255, 255, .6);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.shop-pill:hover,
.shop-pill:focus-visible {
    background: var(--shop-wine-600);
    color: #fff;
    transform: translateY(-1px);
}

.shop-band--wine .shop-pill {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    background: transparent;
}

.shop-band--wine .shop-pill:hover {
    background: #fff;
    color: var(--shop-wine-700);
}

/* --- picture tiles: rounder, livelier, with a ribbon ---------------------- */

.shop-band .shop-home__tile {
    position: relative;
    border-radius: var(--shop-radius);
    box-shadow: 0 1px 2px rgba(42, 7, 19, .06), 0 6px 18px rgba(42, 7, 19, .06);
}

.shop-band .shop-home__tile img {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.shop-band a.shop-home__tile:hover img {
    transform: scale(1.045);
}

.shop-band a.shop-home__tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(42, 7, 19, .18);
}

.shop-ribbon {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 1;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e0245e 0%, #b3124a 100%);
    box-shadow: 0 4px 12px rgba(179, 18, 74, .35);
    animation: shop-ribbon-glow 2.4s ease-in-out infinite;
}

@keyframes shop-ribbon-glow {
    0%, 100% { box-shadow: 0 4px 12px rgba(179, 18, 74, .35); }
    50% { box-shadow: 0 4px 20px rgba(224, 36, 94, .6); }
}

/* --- product rows: cards lifted off the band ------------------------------ */

.shop-home__grid--products .shop-card {
    background: #fff;
    border-radius: var(--shop-radius);
    padding: .55rem .55rem .8rem;
    box-shadow: 0 1px 2px rgba(42, 7, 19, .05), 0 6px 16px rgba(42, 7, 19, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.shop-home__grid--products .shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(42, 7, 19, .14);
}

.shop-home__grid--products .shop-card__frame {
    border: 0;
    border-radius: calc(var(--shop-radius) - 4px);
}

.shop-home__grid--products .shop-card__flag {
    border-radius: 999px;
}

/* NEW in green, so it never reads as part of the price. */
.shop-card__flag--new,
.shop-home__grid--products .shop-card__flag--new {
    background: linear-gradient(135deg, #3fc47a 0%, #23955a 45%, #17643c 100%);
    box-shadow: 0 2px 6px -2px rgba(23, 100, 60, .55);
}

/* --- swipe rows on a phone ------------------------------------------------
   One row that slides sideways, with the next card peeking in at the edge so
   it is obvious there is more. Computers and tablets keep the grid. */

@media (max-width: 767.98px) {
    .shop-home__grid.is-swipe {
        display: flex;
        gap: .75rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;
        margin-inline: -12px;
        padding: .25rem 12px .9rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .shop-home__grid.is-swipe::-webkit-scrollbar {
        display: none;
    }

    .shop-home__grid.is-swipe > .shop-home__cell {
        flex: 0 0 calc((100% - .75rem * var(--cols-sm, 2)) / (var(--cols-sm, 2) + .35));
        scroll-snap-align: start;
    }
}

/* --- countdown sale band -------------------------------------------------- */

.shop-flash__inner {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 992px) {
    .shop-flash__inner.has-image {
        grid-template-columns: 1.1fr 1fr;
        gap: 3rem;
    }

    .shop-flash__inner.has-image.is-image-left .shop-flash__media {
        order: -1;
    }
}

.shop-flash__inner:not(.has-image) {
    text-align: center;
    justify-items: center;
}

.shop-flash__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .14);
}

.shop-band--plain .shop-flash__eyebrow,
.shop-band--blush .shop-flash__eyebrow,
.shop-band--cream .shop-flash__eyebrow,
.shop-band--gold .shop-flash__eyebrow {
    background: rgba(224, 36, 94, .1);
    color: #b3124a;
}

.shop-flash__pulse {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #ff4d7d;
    box-shadow: 0 0 0 0 rgba(255, 77, 125, .7);
    animation: shop-pulse 1.6s ease-out infinite;
}

@keyframes shop-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 125, .7); }
    70% { box-shadow: 0 0 0 .6rem rgba(255, 77, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 125, 0); }
}

.shop-flash__title {
    margin: 0;
    font-family: var(--shop-display);
    font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}

.shop-flash__sub {
    margin: .6rem 0 0;
    opacity: .85;
    max-width: 40ch;
}

.shop-flash__inner:not(.has-image) .shop-flash__sub {
    margin-inline: auto;
}

.shop-timer {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 1.25rem 0 1.4rem;
}

.shop-flash__inner:not(.has-image) .shop-timer {
    justify-content: center;
}

.shop-timer__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.6rem;
    padding: .55rem .4rem .45rem;
    border-radius: 12px;
    background: #fff;
    color: var(--shop-wine-900);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.shop-timer__unit b {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.shop-timer__unit small {
    margin-top: .25rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
}

.shop-timer__sep {
    align-self: center;
    font-size: 1.4rem;
    font-weight: 800;
    opacity: .7;
    margin-top: -.9rem;
}

@media (min-width: 992px) {
    .shop-timer__unit {
        min-width: 4.6rem;
        padding: .75rem .5rem .6rem;
    }

    .shop-timer__unit b {
        font-size: 2.2rem;
    }
}

.shop-flash__ended {
    margin: 1rem 0;
    font-weight: 600;
}

.shop-flash__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--shop-radius);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .28);
    transform: rotate(-1.2deg);
}

/* --- buttons that sell ---------------------------------------------------- */

.shop-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--shop-wine-600) 0%, var(--shop-wine-700) 100%);
    box-shadow: 0 8px 20px rgba(77, 16, 40, .28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.shop-cta-btn:hover,
.shop-cta-btn:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(77, 16, 40, .36);
    filter: brightness(1.06);
}

.shop-cta-btn--gold {
    color: #2a1a02;
    background: linear-gradient(135deg, #f8e2a6 0%, var(--shop-gold-500) 100%);
    box-shadow: 0 8px 22px rgba(212, 166, 74, .4);
}

.shop-cta-btn--gold:hover,
.shop-cta-btn--gold:focus-visible {
    color: #2a1a02;
    box-shadow: 0 12px 28px rgba(212, 166, 74, .55);
}

.shop-cta-btn--whatsapp {
    background: linear-gradient(135deg, #25c463 0%, var(--shop-whatsapp-dark) 100%);
    box-shadow: 0 8px 22px rgba(31, 168, 85, .38);
}

.shop-cta-btn--whatsapp:hover,
.shop-cta-btn--whatsapp:focus-visible {
    box-shadow: 0 12px 28px rgba(31, 168, 85, .5);
}

.shop-cta-btn--lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
}

.shop-cta-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.shop-chat-icon {
    width: 1.3em;
    height: 1.3em;
    flex: 0 0 auto;
}

/* --- brand wall ----------------------------------------------------------- */

.shop-brandcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 100%;
    min-height: 6.5rem;
    padding: 1rem .75rem;
    border-radius: var(--shop-radius);
    background: #fff;
    border: 1px solid rgba(42, 7, 19, .06);
    box-shadow: 0 1px 2px rgba(42, 7, 19, .05), 0 6px 16px rgba(42, 7, 19, .05);
    text-decoration: none;
    color: var(--shop-ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.shop-brandcard img {
    max-width: 100%;
    max-height: 3.4rem;
    object-fit: contain;
    filter: grayscale(.35);
    transition: filter .25s ease, transform .25s ease;
}

.shop-brandcard:hover {
    transform: translateY(-3px);
    border-color: var(--shop-rose-400);
    box-shadow: 0 14px 28px rgba(42, 7, 19, .14);
    color: var(--shop-wine-700);
}

.shop-brandcard:hover img {
    filter: none;
    transform: scale(1.05);
}

.shop-brandcard__name {
    font-family: var(--shop-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.shop-brandcard__origin {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
}

.shop-brandcard__tag {
    position: absolute;
    top: .45rem;
    right: .45rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-gold-700);
    background: #fbf0d6;
}

/* The reseller panel under a wholesale wall. */
.shop-reseller {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.75rem;
    padding: 1.5rem;
    border-radius: calc(var(--shop-radius) + 6px);
    color: #fff;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(212, 166, 74, .35) 0%, transparent 60%),
        linear-gradient(135deg, var(--shop-wine-900) 0%, var(--shop-wine-600) 100%);
    box-shadow: 0 18px 40px rgba(42, 7, 19, .25);
}

@media (min-width: 768px) {
    .shop-reseller {
        grid-template-columns: 1fr auto;
        padding: 2rem 2.5rem;
    }
}

.shop-reseller__title {
    margin: 0 0 .35rem;
    font-family: var(--shop-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
    font-weight: 700;
}

.shop-reseller__body {
    margin: 0 0 .75rem;
    opacity: .85;
}

.shop-reseller__perks {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    font-weight: 600;
}

.shop-reseller__perks li::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: .4rem;
    border-radius: 50%;
    font-size: .7rem;
    color: var(--shop-wine-900);
    background: var(--shop-gold-300);
}

/* --- spotlight ------------------------------------------------------------ */

.shop-spot__inner {
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

@media (min-width: 992px) {
    .shop-spot__inner {
        grid-template-columns: 1.15fr 1fr;
        gap: 4rem;
    }

    .shop-spot__inner.is-image-right .shop-spot__media {
        order: 2;
    }
}

.shop-spot__media {
    position: relative;
}

/* A rose frame offset behind the picture - the editorial touch. */
.shop-spot__media::before {
    content: "";
    position: absolute;
    inset: 1rem -1rem -1rem 1rem;
    border: 2px solid var(--shop-rose-400);
    border-radius: calc(var(--shop-radius) + 6px);
    z-index: 0;
}

.shop-spot__inner.is-image-right .shop-spot__media::before {
    inset: 1rem 1rem -1rem -1rem;
}

.shop-spot__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--shop-radius) + 6px);
    box-shadow: 0 18px 40px rgba(42, 7, 19, .18);
}

.shop-spot__flourish {
    display: block;
    color: var(--shop-rose-500);
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: .5rem;
}

.shop-spot__title {
    margin: 0;
    font-family: var(--shop-display);
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--shop-wine-900);
}

.shop-spot__sub {
    margin: .6rem 0 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--shop-rose-600);
}

.shop-spot__body {
    margin: 1rem 0 1.5rem;
    color: var(--shop-ink-soft);
    font-size: 1rem;
    max-width: 46ch;
}

/* A wine button on a wine band disappears; there it turns white. */
.shop-spot.shop-band--wine .shop-cta-btn {
    color: var(--shop-wine-700);
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.shop-spot.shop-band--wine .shop-cta-btn:hover,
.shop-spot.shop-band--wine .shop-cta-btn:focus-visible {
    color: var(--shop-wine-900);
}

.shop-band--wine .shop-spot__title { color: #fff; }
.shop-band--wine .shop-spot__sub { color: var(--shop-rose-400); }
.shop-band--wine .shop-spot__body { color: rgba(255, 255, 255, .8); }

/* --- picture tiles with a name, and round tiles ---------------------------
   The picture and its name are one link. Round tiles stand a product photo on
   a soft disc - the calm, clinical look skincare shops use for categories -
   with the name in small capitals under it. */

.shop-home__named {
    display: block;
    color: inherit;
    text-decoration: none;
}

.shop-home__named .shop-home__tile {
    display: block;
}

.shop-band a.shop-home__named:hover .shop-home__tile,
.shop-band a.shop-home__named:focus-visible .shop-home__tile {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(42, 7, 19, .18);
}

.shop-band a.shop-home__named:hover .shop-home__tile img {
    transform: scale(1.045);
}

a.shop-home__named:focus-visible {
    outline: none;
}

a.shop-home__named:focus-visible .shop-home__tile {
    outline: 3px solid var(--shop-wine-600);
    outline-offset: 3px;
}

.shop-home__caption {
    display: block;
    margin-top: .7rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    color: var(--shop-wine-900);
}

a.shop-home__named:hover .shop-home__caption {
    color: var(--shop-wine-600);
}

.shop-band--wine .shop-home__caption { color: #fff; }
.shop-band--wine a.shop-home__named:hover .shop-home__caption { color: var(--shop-rose-400); }

.shop-home__grid.is-round {
    row-gap: 1.5rem;
}

.shop-band .shop-home__grid.is-round .shop-home__tile {
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f4eef1 62%, #ece3e8 100%);
    box-shadow: inset 0 0 0 1px rgba(42, 7, 19, .05);
}

.shop-home__grid.is-round .shop-home__tile img {
    width: 100%;
    height: 100%;
    padding: 14%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.shop-band .shop-home__grid.is-round a.shop-home__named:hover .shop-home__tile {
    box-shadow: inset 0 0 0 1px rgba(42, 7, 19, .05), 0 12px 26px rgba(42, 7, 19, .14);
}

.shop-home__grid.is-round .shop-ribbon {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .shop-home__grid.is-round {
        column-gap: 1.75rem;
    }

    .shop-home__caption {
        font-size: .82rem;
    }
}

/* --- quote ----------------------------------------------------------------
   Somebody's words, large and quiet: a serif quotation, who said it in small
   capitals, an optional round photo beside. */

.shop-quote__inner {
    display: grid;
    gap: 1.75rem;
    align-items: center;
    justify-items: center;
    margin: 0 auto;
    max-width: 62rem;
    text-align: center;
}

@media (min-width: 992px) {
    .shop-quote__inner.has-photo {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        gap: 4rem;
        justify-items: stretch;
        text-align: left;
    }
}

.shop-quote__media {
    width: min(16rem, 60vw);
}

@media (min-width: 992px) {
    .shop-quote__media {
        width: 100%;
    }
}

.shop-quote__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 18px 40px rgba(42, 7, 19, .16);
}

.shop-quote__mark {
    display: block;
    height: 2.6rem;
    font-family: var(--shop-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--shop-rose-500);
}

.shop-quote__words {
    margin: 0;
}

.shop-quote__words p {
    margin: 0;
    font-family: var(--shop-display);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--shop-wine-900);
}

.shop-quote__by {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.shop-quote__name {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--shop-wine-700);
}

.shop-quote__role {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--shop-ink-soft);
}

.shop-quote__link {
    display: inline-block;
    margin-top: 1.4rem;
    padding-bottom: .15rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-wine-600);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

.shop-quote__link:hover {
    color: var(--shop-wine-900);
}

.shop-band--wine .shop-quote__words p { color: #fff; }
.shop-band--wine .shop-quote__name { color: var(--shop-rose-400); }
.shop-band--wine .shop-quote__role { color: rgba(255, 255, 255, .7); }
.shop-band--wine .shop-quote__link { color: #fff; }

/* --- tips & advice cards ----------------------------------------------------
   White cards with a picture on top and the words under it. On the wine band
   they read like an editorial page; on a light band they keep a hairline. */

.shop-tips__grid {
    row-gap: 1.25rem;
}

.shop-tip__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: var(--shop-ink);
    text-decoration: none;
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    transition: transform .18s ease, box-shadow .18s ease;
}

.shop-band--wine .shop-tip__link {
    border-color: transparent;
}

a.shop-tip__link[href]:hover,
a.shop-tip__link[href]:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(42, 7, 19, .22);
}

a.shop-tip__link:focus-visible {
    outline: 3px solid var(--shop-rose-400);
    outline-offset: 3px;
}

.shop-tip__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--shop-canvas);
}

.shop-tip__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

a.shop-tip__link[href]:hover .shop-tip__media img {
    transform: scale(1.045);
}

.shop-tip__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .45rem;
    padding: 1.1rem 1.15rem 1.25rem;
}

.shop-tip__tag {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--shop-rose-600);
}

.shop-tip__title {
    margin: 0;
    font-family: var(--shop-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--shop-wine-900);
}

.shop-tip__line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--shop-ink-soft);
}

.shop-tip__more {
    margin-top: auto;
    padding-top: .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--shop-wine-600);
}

@media (prefers-reduced-motion: reduce) {
    .shop-tip__link,
    .shop-tip__media img,
    .shop-home__named .shop-home__tile,
    .shop-home__named .shop-home__tile img {
        transition: none;
    }
}

/* --- preview ribbon -------------------------------------------------------
   Staff looking at the home page with every section on. Fixed at the foot so
   it is never mistaken for part of the page. */

.shop-preview-bar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--shop-bottomnav-height, 0px) + .75rem);
    z-index: 1050;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: .45rem .9rem;
    font-size: .78rem;
    color: #fff;
    background: var(--shop-wine-900);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(42, 7, 19, .35);
}

.shop-preview-bar a {
    color: var(--shop-rose-400);
    font-weight: 700;
}

@media (min-width: 768px) {
    .shop-preview-bar {
        bottom: 1rem;
    }
}

/* --- call to action ------------------------------------------------------- */

.shop-cta__inner {
    position: relative;
    display: grid;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
    justify-items: center;
}

@media (min-width: 992px) {
    .shop-cta__inner {
        grid-template-columns: 1fr auto;
        text-align: left;
        justify-items: start;
        gap: 3rem;
    }
}

/* Soft circles behind the text - movement without a picture to load. */
.shop-cta::before,
.shop-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .06);
}

.shop-cta::before {
    width: 22rem;
    height: 22rem;
    top: -11rem;
    right: -6rem;
}

.shop-cta::after {
    width: 14rem;
    height: 14rem;
    bottom: -8rem;
    left: -4rem;
}

.shop-band--plain.shop-cta::before,
.shop-band--plain.shop-cta::after,
.shop-band--blush.shop-cta::before,
.shop-band--blush.shop-cta::after,
.shop-band--cream.shop-cta::before,
.shop-band--cream.shop-cta::after,
.shop-band--gold.shop-cta::before,
.shop-band--gold.shop-cta::after {
    background: rgba(201, 139, 110, .12);
}

.shop-cta__title {
    margin: 0;
    font-family: var(--shop-display);
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
}

.shop-cta__sub {
    margin: .5rem 0 0;
    font-weight: 600;
    opacity: .9;
}

.shop-cta__body {
    margin: .6rem 0 0;
    opacity: .8;
    max-width: 52ch;
}

/* --- trust strip themes ----------------------------------------------------
   The strip stays wine unless gold is chosen, which reads as "premium". */

.shop-promise.shop-band--gold {
    color: #3d2a0a;
    background: linear-gradient(135deg, #f7e6c1 0%, #f3dcae 100%);
}

.shop-promise.shop-band--gold .shop-promise__icon {
    background: var(--shop-wine-700);
}

.shop-promise.shop-band--gold .shop-home__title--light {
    color: #3d2a0a;
}

/* On a light band the strip turns quiet: wine words between hairlines, the
   way skincare brands run their line of claims under the banner. Without
   this the white words vanished into a white band. */
.shop-promise.shop-band--plain,
.shop-promise.shop-band--blush,
.shop-promise.shop-band--cream {
    color: var(--shop-wine-900);
    margin-top: 0;
    padding: 1.1rem 0;
    border-top: 1px solid var(--shop-line);
    border-bottom: 1px solid var(--shop-line);
}

.shop-promise.shop-band--plain .shop-promise__icon,
.shop-promise.shop-band--blush .shop-promise__icon,
.shop-promise.shop-band--cream .shop-promise__icon {
    color: var(--shop-wine-600);
    background: var(--shop-wine-100);
}

.shop-promise.shop-band--plain .shop-promise__item + .shop-promise__item,
.shop-promise.shop-band--blush .shop-promise__item + .shop-promise__item,
.shop-promise.shop-band--cream .shop-promise__item + .shop-promise__item {
    border-left-color: var(--shop-line);
}

.shop-promise.shop-band--plain .shop-promise__line,
.shop-promise.shop-band--blush .shop-promise__line,
.shop-promise.shop-band--cream .shop-promise__line {
    color: var(--shop-ink-soft);
    opacity: 1;
}

.shop-promise.shop-band--plain .shop-home__title--light,
.shop-promise.shop-band--blush .shop-home__title--light,
.shop-promise.shop-band--cream .shop-home__title--light {
    color: var(--shop-wine-900);
}

@media (min-width: 992px) {
    .shop-promise.shop-band--plain .shop-promise__title,
    .shop-promise.shop-band--blush .shop-promise__title,
    .shop-promise.shop-band--cream .shop-promise__title {
        font-size: 1.05rem;
    }

    .shop-promise.shop-band--plain .shop-promise__icon,
    .shop-promise.shop-band--blush .shop-promise__icon,
    .shop-promise.shop-band--cream .shop-promise__icon {
        width: 2.6rem;
        height: 2.6rem;
    }
}

/* --- reveal on scroll -------------------------------------------------------
   Only once the page script has said so (html.shop-reveal-on), so without
   JavaScript nothing is ever hidden. */

.shop-reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.shop-reveal-on [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .shop-ribbon,
    .shop-flash__pulse {
        animation: none;
    }

    .shop-band .shop-home__tile img,
    .shop-home__grid--products .shop-card,
    .shop-brandcard,
    .shop-brandcard img,
    .shop-cta-btn,
    .shop-pill {
        transition: none;
    }

    .shop-band a.shop-home__tile:hover,
    .shop-band a.shop-home__tile:hover img,
    .shop-home__grid--products .shop-card:hover,
    .shop-brandcard:hover,
    .shop-cta-btn:hover {
        transform: none;
    }

    .shop-reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* --- touch targets on a phone ---------------------------------------------
   Fingers need about 44px. The header's Menu button and search box, and the
   footer's link lists, were drawn for a mouse at 31-34px and 17px. */
@media (max-width: 767.98px) {
    .shop-header [aria-controls="shopDrawer"] {
        min-height: 44px;
        padding-inline: .85rem;
    }

    .shop-header__search .form-control,
    .shop-header__search .btn {
        min-height: 44px;
    }

    .shop-footer li > a {
        display: inline-block;
        padding-block: .4rem;
    }
}

/* --- sliders: one row with arrows -----------------------------------------
   A swipe row on a phone, and on a computer one row of the set width that the
   arrows in the heading move along - instead of wrapping into a second row. */
.shop-slide-nav {
    display: flex;
    gap: .3rem;
    padding-bottom: .35rem;
}

.shop-slide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--shop-line);
    border-radius: 50%;
    background: var(--shop-surface);
    color: var(--shop-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.shop-slide-btn:hover { border-color: var(--shop-wine-600); color: var(--shop-wine-600); }
.shop-slide-btn:focus-visible { outline: 2px solid var(--shop-wine-600); outline-offset: 2px; }
.shop-slide-btn:disabled { opacity: .35; cursor: default; }

.shop-band--wine .shop-slide-btn { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }

@media (max-width: 767.98px) {
    .shop-slide-nav { display: none; }
}

@media (min-width: 768px) {
    .shop-home__grid.is-slider {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: calc((100% - (var(--cols-md, 3) - 1) * .9rem) / var(--cols-md, 3));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-bottom: .5rem;
    }

    .shop-home__grid.is-slider::-webkit-scrollbar { display: none; }

    .shop-home__grid.is-slider > .shop-home__cell { scroll-snap-align: start; }
}

@media (min-width: 992px) {
    .shop-home__grid.is-slider {
        grid-auto-columns: calc((100% - (var(--cols, 4) - 1) * 1rem) / var(--cols, 4));
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-home__grid.is-slider { scroll-behavior: auto; }
}

/* --- sale products: a small clock under each card ------------------------- */

.shop-sale__cell {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.shop-sale__cell .shop-card { flex: 1 1 auto; }

.shop-sale__timer { display: flex; justify-content: center; }

.shop-timer--mini {
    display: flex;
    gap: .3rem;
}

.shop-timer--mini .shop-timer__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.6rem;
    padding: .25rem .2rem;
    border: 1px solid var(--shop-line);
    border-radius: 6px;
    background: var(--shop-surface);
    line-height: 1.1;
}

.shop-timer--mini b {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--shop-ink);
}

.shop-timer--mini small {
    font-size: .65rem;
    color: var(--shop-ink-soft);
}

.shop-sale__ended {
    margin: 0;
    font-size: .78rem;
    color: var(--shop-ink-soft);
    text-align: center;
}

/* --- the bag tag on the right edge (computers) ------------------------------
   A boutique shopping-bag tag hanging off the screen edge: a stitched wine
   leather strip with a gold eyelet that carries the count, "Basket" running
   down it, and the total on a pink strip at the foot. */
.shop-bagtag {
    display: none;
}

@media (min-width: 768px) {
    .shop-bagtag {
        position: fixed;
        top: 50%;
        right: 0;
        z-index: 1033;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .6rem;
        width: max-content;
        min-width: 3.75rem;
        padding: .85rem 0 0;
        overflow: hidden;
        border-radius: 1.1rem 0 0 1.1rem;
        background: linear-gradient(180deg, var(--shop-wine-600) 0%, var(--shop-wine-900) 100%);
        color: #fff;
        text-decoration: none;
        box-shadow: -8px 12px 28px -10px rgba(42, 7, 19, .7);
        transform: translateY(-50%);
        transform-origin: 100% 0;
        transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
    }

    /* The stitching: a dashed seam just inside the edge. */
    .shop-bagtag::before {
        content: "";
        position: absolute;
        inset: 4px 0 4px 4px;
        border: 1px dashed rgba(232, 199, 180, .45);
        border-right: 0;
        border-radius: .8rem 0 0 .8rem;
        pointer-events: none;
    }

    .shop-bagtag:hover,
    .shop-bagtag:focus-visible {
        transform: translate(-.25rem, -50%);
        box-shadow: -12px 16px 32px -10px rgba(42, 7, 19, .85);
    }

    .shop-bagtag:focus-visible {
        outline: 2px solid var(--shop-rose-500);
        outline-offset: 3px;
    }
}

/* The eyelet: a gold ring with the count in the display face. */
.shop-bagtag__eyelet {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 3px #d9a85b,
        0 0 0 4px rgba(122, 84, 16, .35),
        inset 0 1px 3px rgba(0, 0, 0, .15);
    font-family: var(--shop-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--shop-wine-700);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

/* "Basket" runs down the tag; the price reads straight across, so it can be
   taken in at a glance. */
.shop-bagtag__word {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    color: var(--shop-rose-400);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}

/* The total sits on its own strip at the foot of the tag - pink once there
   is something in the basket, a quiet darker band while it is empty, so the
   tag always ends the same way. */
.shop-bagtag__total {
    align-self: stretch;
    margin-top: .1rem;
    padding: .5rem .55rem .55rem;
    white-space: nowrap;
    line-height: 1.1;
    background: linear-gradient(180deg, #ff3d7f 0%, #d61f69 100%);
    color: #fff;
    text-align: center;
    font-family: var(--shop-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.shop-bagtag:not(.has-items) .shop-bagtag__total {
    background: rgba(0, 0, 0, .22);
    color: var(--shop-rose-400);
    font-size: .78rem;
}

/* Something in the basket: the eyelet glows gold, catches the light now and
   then, and the whole tag gives a small swing, like a tag on a bag that has
   just been picked up. */
.shop-bagtag.has-items .shop-bagtag__eyelet {
    box-shadow:
        0 0 0 3px #ffd23f,
        0 0 12px 2px rgba(255, 210, 63, .55),
        inset 0 1px 3px rgba(0, 0, 0, .15);
}

.shop-bagtag.has-items .shop-bagtag__eyelet::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 190, .9) 50%, transparent 70%);
    background-size: 260% 100%;
    background-position: 140% 0;
    animation: shop-bagtag-glint 4.5s ease-in-out infinite;
    mix-blend-mode: screen;
}

@media (min-width: 768px) {
    .shop-bagtag.has-items {
        animation: shop-bagtag-swing 6s ease-in-out 1.5s infinite;
    }

    .shop-bagtag.has-items:hover {
        animation: none;
    }
}

@keyframes shop-bagtag-swing {
    0%, 82%, 100% { transform: translateY(-50%) rotate(0deg); }
    86% { transform: translateY(-50%) rotate(-5deg); }
    90% { transform: translateY(-50%) rotate(3deg); }
    94% { transform: translateY(-50%) rotate(-1.5deg); }
}

@keyframes shop-bagtag-glint {
    0%, 70% { background-position: 140% 0; }
    100% { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .shop-bagtag { transition: none; }
    .shop-bagtag.has-items,
    .shop-bagtag.has-items .shop-bagtag__eyelet::after { animation: none; }
}

/* --- product words ------------------------------------------------------
   Bold, italic and lists written in the back office (ProductText). */

.shop-product-text p {
    margin: 0 0 .6rem;
}

.shop-product-text p:last-child,
.shop-product-text ul:last-child {
    margin-bottom: 0;
}

.shop-product-text ul {
    margin: 0 0 .6rem;
    padding-left: 1.2rem;
}

.shop-product-text li + li {
    margin-top: .2rem;
}

.shop-product-text strong {
    font-weight: 700;
    color: var(--shop-ink);
}

/* ===========================================================================
   Refresh, October 2026: type and finish.
   Kept together at the end so it reads as one decision and overrides the
   older rules above it without hunting through the file.
   =========================================================================== */

:root {
    --shop-sans: "Jost", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shop-display: "Playfair Display", "Hind Siliguri", Georgia, "Times New Roman", serif;
    --bs-body-font-family: var(--shop-sans);
    --shop-card-ground: #f7f2f4;
}

body {
    font-family: var(--shop-sans);
    font-size: 0.97rem;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea,
.btn {
    font-family: inherit;
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-family: var(--shop-display);
    letter-spacing: -0.01em;
}

/* --- product card: the product on a soft ground, words that line up ------- */

.shop-card__frame {
    border: 0;
    border-radius: 14px;
    background: var(--shop-card-ground);
    transition: box-shadow .25s ease, transform .25s ease;
}

/* Studio shots on white melt into the ground instead of sitting in a box. */
.shop-card__frame img {
    object-fit: contain;
    padding: 9%;
    mix-blend-mode: multiply;
}

.shop-card:hover .shop-card__frame {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px rgba(42, 7, 19, .35);
}

.shop-card:hover .shop-card__frame img {
    transform: scale(1.05);
}

.shop-card__flags {
    flex-direction: row;
    flex-wrap: wrap;
    top: .6rem;
    left: .6rem;
    right: .6rem;
    gap: .3rem;
}

.shop-card__flag,
.shop-home__grid--products .shop-card__flag {
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: .64rem;
    letter-spacing: .05em;
    box-shadow: none;
    text-shadow: none;
}

.shop-card__brand {
    margin-top: .75rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--shop-rose-600);
}

/* Two lines at most, always two lines tall, so a row of cards lines up. */
.shop-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin: .2rem 0 .35rem;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--shop-ink);
}

.shop-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .4rem;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--shop-wine-700);
}

.shop-price__was {
    margin-left: 0;
    font-size: .82rem;
    color: #9a8f96;
}

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

.shop-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    color: var(--shop-wine-700);
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 50%;
}

.shop-menu-btn svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.shop-menu-btn:hover,
.shop-menu-btn:focus-visible {
    color: #fff;
    background: var(--shop-wine-600);
    border-color: var(--shop-wine-600);
}

.shop-logo__type {
    font-family: var(--shop-display);
}

.shop-nav__link {
    font-weight: 500;
    letter-spacing: .08em;
}

/* --- category pages ---------------------------------------------------------- */

.shop-sheet__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--shop-wine-700);
    background: var(--shop-wine-100);
    border: 0;
    border-radius: 999px;
}

.shop-sheet__open svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* --- contact: one button that opens ----------------------------------------- */

.shop-contactfab {
    align-items: flex-end;
    gap: .55rem;
}

.shop-contactfab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.shop-contactfab.is-open .shop-contactfab__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .18s ease, transform .18s ease;
}

.shop-contactfab__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.shop-contactfab__label {
    padding: .3rem .7rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--shop-ink);
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 14px -6px rgba(42, 7, 19, .35);
}

.shop-contactfab__btn {
    width: 2.6rem;
    height: 2.6rem;
    box-shadow: 0 0 0 2px #fff, 0 6px 16px -6px rgba(42, 7, 19, .5);
}

.shop-contactfab__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--shop-wine-600), var(--shop-wine-700));
    border: 0;
    border-radius: 50%;

    /* A white ring keeps it apart from whatever it floats over - a wine
       button on a wine band otherwise disappears into it. */
    box-shadow: 0 0 0 3px #fff, 0 10px 22px -8px rgba(42, 7, 19, .6);
    transition: transform .15s ease;
}

.shop-contactfab__toggle:hover {
    transform: scale(1.05);
}

.shop-contactfab__close,
.shop-contactfab.is-open .shop-contactfab__open {
    display: none;
}

.shop-contactfab.is-open .shop-contactfab__close {
    display: block;
}

/* Category names under the round pictures: lighter in Jost, which runs
   heavier than the old system font at the same weight. */
.shop-home__caption {
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--shop-wine-700);
}

/* --- the buying button and the product photo ------------------------------- */

.btn-shop {
    padding: .8rem 1.8rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    background: linear-gradient(135deg, var(--shop-wine-600), var(--shop-wine-700));
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 22px -12px rgba(77, 16, 40, .75);
}

.btn-shop:hover,
.btn-shop:focus {
    background: linear-gradient(135deg, var(--shop-wine-600), var(--shop-wine-700));
    filter: brightness(1.08);
}

/* Beside the quantity box, the button takes the rest of the row - the one
   thing on the page that should be easiest to hit. */
.d-flex:has(> .shop-qty) > .btn-shop {
    flex: 1 1 12rem;
    min-height: 3rem;
}

.shop-qty {
    border-radius: 999px;
    text-align: center;
}

.shop-gallery__track,
.shop-gallery__empty {
    background: var(--shop-card-ground);
    border: 0;
    border-radius: 18px;
}

.shop-gallery__slide img {
    mix-blend-mode: multiply;
}

/* The bag tag on a computer only once there is something in the bag. */
.shop-bagtag:not(.has-items) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .shop-card__frame,
    .shop-contactfab__menu {
        transition: none;
    }

    .shop-card:hover .shop-card__frame {
        transform: none;
    }
}

/* --- number boxes: no up/down arrows -----------------------------------------
   They are too small to aim at and change the value when the mouse wheel
   passes over them. A number is typed; the wheel scrolls the page. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- Categories that stand out like Offers ----------------------------------
   Chosen per category in the back office (Stand out in the menu). Same pill,
   shine and turning sticker as Offers; only the colours change. */
.shop-offer--winter {
    background: linear-gradient(120deg, #7dd3fc 0%, #2b8de8 45%, #1e3a8a 100%);
    box-shadow: 0 4px 14px -4px rgba(43, 141, 232, .6);
}

.shop-offer--winter .shop-offer__burst {
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e0f2fe 50%, #93c5fd 100%);
}

.shop-offer--winter .shop-offer__burst > span {
    color: #1d4ed8;
    font-size: .8rem;
}

.shop-offer--hot .shop-offer__burst > span {
    font-size: .7rem;
}

.shop-offer--fresh {
    background: linear-gradient(120deg, #6ee7b7 0%, #10b981 45%, #065f46 100%);
    box-shadow: 0 4px 14px -4px rgba(16, 185, 129, .55);
}

.shop-offer--fresh .shop-offer__burst > span {
    color: #047857;
    font-size: .75rem;
}

.shop-offer--gold {
    background: linear-gradient(120deg, #fde68a 0%, #d4a017 45%, #7c5a0b 100%);
    box-shadow: 0 4px 14px -4px rgba(212, 160, 23, .6);
}

.shop-offer--gold .shop-offer__text {
    text-shadow: 0 1px 1px rgba(80, 50, 0, .35);
}

.shop-offer--gold .shop-offer__burst > span {
    color: #7c5a0b;
    font-size: .7rem;
}

.shop-nav__link--offer:hover .shop-offer--winter,
.shop-nav__link--offer.is-active .shop-offer--winter {
    box-shadow: 0 8px 20px -6px rgba(43, 141, 232, .75);
}

.shop-nav__link--offer:hover .shop-offer--fresh,
.shop-nav__link--offer.is-active .shop-offer--fresh {
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, .7);
}

.shop-nav__link--offer:hover .shop-offer--gold,
.shop-nav__link--offer.is-active .shop-offer--gold {
    box-shadow: 0 8px 20px -6px rgba(212, 160, 23, .75);
}