/* =============================================
   KNOWLES GREEN, SHOP STYLESHEET
   Link after style.css on all shop pages.
   ============================================= */

/* Force the navbar solid on shop pages (no transparent-on-load behaviour) */
body.shop-page .navbar {
    background-color: rgba(14, 55, 35, 1) !important;
}
body.shop-page .navbar.scrolled {
    background-color: rgba(14, 55, 35, 1) !important;
}

/* ─── SHARED PAGE SHELL ─────────────────────────────── */

.shop-page {
    padding-top: 6em;
}

/* ─── SHOP HERO (page header) ───────────────────────── */

.shop-hero {
    background-color: var(--color-bg-strong);
    color: var(--color-text-inverse);
    padding: 3.5rem 2rem 3rem;
    text-align: center;
}

.shop-hero__breadcrumb {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-inverse-muted);
    margin-bottom: 0.9rem;
}

.shop-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.shop-hero__breadcrumb a:hover { color: var(--color-text-inverse); }

.shop-hero__breadcrumb span {
    margin: 0 0.5em;
    opacity: 0.4;
}

.shop-hero__title {
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 300;
    color: var(--color-text-inverse);
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.shop-hero__subtitle {
    font-size: 1rem;
    font-weight: 200;
    color: var(--color-text-inverse-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 760px) {
    /* On mobile the opening-hours bar drops out of the navbar and sits as its
       own band down to 130px, overlapping the top of this panel. With only
       3.5rem of padding the breadcrumb ended up 22px under it, which read as
       squashed. Pad clear of the bar and give the panel a bit more depth. */
    .shop-hero { padding: 6.5rem 1.4rem 2.75rem; }
}

/* ─── INFO STRIP ─────────────────────────────────────── */

.shop-info-strip {
    background: var(--color-bg-surface-soft);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.shop-info-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 13px;
    font-weight: 300;
    color: var(--color-text-secondary);
}

/* On a phone the flex row can only fit one item per line, which made this a
   tall 1x4 list. An explicit 2x2 grid keeps it compact. */
@media (max-width: 700px) {
    .shop-info-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: stretch;
        align-items: start;
        gap: 1.1rem 1.25rem;
        padding: 1.25rem 1.4rem;
    }

    .shop-info-item {
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 12px;
        line-height: 1.4;
    }

    /* Keep the icon on the first line when the label wraps to two. */
    .shop-info-item i {
        flex: 0 0 auto;
        margin-top: 0.15em;
    }
}

.shop-info-item i {
    color: var(--color-text-accent);
    font-size: 14px;
}

/* ─── FILTER TABS ────────────────────────────────────── */

.shop-filter-bar {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border: 1.5px solid var(--color-border-medium);
    border-radius: 100px;
    font-family: var(--font-family-base);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    background: transparent;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    text-decoration: none;
    user-select: none;
}

.filter-tab:hover {
    background: var(--color-bg-surface-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.filter-tab.active {
    background: var(--color-bg-strong);
    border-color: var(--color-bg-strong);
    color: var(--color-text-inverse);
}

/* ─── PRODUCT SECTION WRAPPER ────────────────────────── */

.product-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 5rem;
}

.product-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.product-section__title {
    font-family: var(--font-family-display);
    font-size: 1.35rem;
    font-weight: 300;
}

.product-section__count {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-text-muted);
}

/* ─── PRODUCT GRID ───────────────────────────────────── */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

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

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

/* Short featured rails (homepage/about-page 3-up wine rail, and the "you
   might also like" row on every product page) previously sat directly on
   the page's cream background, which is close enough to the white-wine
   bottle tint (#f5f0d8) that the two blended together. A true white backdrop
   behind the row fixes the confusion without touching the full wine listing
   on /shop/wines.html, which isn't a short rail and keeps its own page bg. */
[data-kg-grid][data-limit="3"],
[data-kg-related] {
    background: var(--color-bg-surface);
}

/* On a phone a 3-up rail became a very tall stack. Turn just these short
   rails into a swipeable row instead, with the next card peeking to signal
   there's more. The full wine listing keeps its normal stacked layout. */
@media (max-width: 700px) {
    [data-kg-grid][data-limit="3"],
    [data-kg-related] {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem;
        scrollbar-width: none;
    }

    [data-kg-grid][data-limit="3"]::-webkit-scrollbar,
    [data-kg-related]::-webkit-scrollbar { display: none; }

    [data-kg-grid][data-limit="3"] > *,
    [data-kg-related] > * { scroll-snap-align: center; }
}

/* ─── PRODUCT CARD ───────────────────────────────────── */

.product-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s, transform 0.22s;
    text-decoration: none;
    color: inherit;
}

.product-card:hover {
    box-shadow: 0 6px 28px var(--color-shadow-medium);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.product-card__img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-surface-soft);
}

.product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card__img-wrap img {
    transform: scale(1.03);
}


.bottle-svg {
    width: 70px;
    height: auto;
    color: var(--color-bg-strong);
    opacity: 0.28;
}

.product-card__deal-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-bg-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}

.product-card__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.product-card__badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}

.badge--cat {
    background: var(--color-accent-tint-soft);
    color: var(--color-text-accent);
    border: 1px solid var(--color-accent-border-soft);
}

.badge--country {
    background: var(--color-bg-surface-soft);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
}

.badge--deal {
    background: var(--color-bg-accent);
    color: #fff;
    border: none;
}

.product-card__name {
    font-family: var(--font-family-display);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0;
}

.product-card__meta {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-muted);
    margin: 0;
}

.product-card__tasting {
    font-size: 13px;
    font-weight: 200;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0.2rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
}

.product-card__price {
    font-family: var(--font-family-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--color-text-primary);
}

.product-card__price-orig {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--color-text-muted);
    text-decoration: line-through;
    margin-left: 0.2rem;
}

.product-card__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid currentColor;
    border-radius: 0;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    white-space: nowrap;
}

.product-card__cta:hover {
    background: var(--color-bg-strong-hover);
    color: var(--color-text-inverse);
}

/* ─── SHOP LANDING CATEGORIES ────────────────────────── */

.shop-categories {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.shop-categories__heading {
    text-align: center;
    margin-bottom: 2rem;
}

.shop-categories__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.5rem;
}

.shop-categories__title {
    font-family: var(--font-family-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 300;
}

.shop-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .shop-categories-grid { grid-template-columns: 1fr; }
}

.shop-category-tile {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    aspect-ratio: 4 / 3;
}

.shop-category-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    display: block;
}

.shop-category-tile:hover .shop-category-tile__img {
    transform: scale(1.04);
}

.shop-category-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14,55,35,0.82) 0%, rgba(14,55,35,0.22) 55%, transparent 100%);
    transition: background 0.3s;
}

.shop-category-tile:hover .shop-category-tile__overlay {
    background: linear-gradient(to top, rgba(14,55,35,0.9) 0%, rgba(14,55,35,0.35) 65%, transparent 100%);
}

.shop-category-tile__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.75rem;
    color: #fff;
}

.shop-category-tile__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,254,247,0.65);
    margin-bottom: 0.2rem;
}

.shop-category-tile__name {
    font-family: var(--font-family-display);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 0.35rem;
}

.shop-category-tile__arrow {
    font-size: 13px;
    color: rgba(255,254,247,0.75);
    transition: transform 0.2s;
    display: inline-block;
}

.shop-category-tile:hover .shop-category-tile__arrow {
    transform: translateX(4px);
}

/* ─── FEATURED STRIP ─────────────────────────────────── */

.featured-strip {
    padding: 3.5rem 2rem 4rem;
    background: var(--color-bg-surface-soft);
}

.featured-strip__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.featured-strip__header {
    text-align: center;
    margin-bottom: 2rem;
}

.featured-strip__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.5rem;
}

.featured-strip__title {
    font-family: var(--font-family-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 300;
    margin-bottom: 0.25rem;
}

.featured-strip__link {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-text-accent);
    text-decoration: none;
}

.featured-strip__link:hover { text-decoration: underline; }

/* ─── SINGLE PRODUCT PAGE ────────────────────────────── */

/* Age confirmation on the checkout form. Shown only when the basket holds
   alcohol, so it reads as a real question rather than boilerplate. */
/* Qualified with .checkout-form so it outranks `.checkout-form label`,
   which would otherwise force this sentence into 11px uppercase. */
.checkout-form label.checkout-age {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    /* The form's field labels are uppercase. This is a sentence, not a
       label, so it must opt out or it shouts. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    margin: 0 0 1.2rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #4a4a44);
}

.checkout-age input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--color-bg-accent);
}

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

.single-product-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
}

@media (max-width: 600px) {
    /* The opening-hours bar is fixed and reaches down to 130px on mobile.
       This wrap only cleared it by 6px, leaving the breadcrumb jammed under
       the bar. (The bar's own background is handled in script.js, which
       keeps the header solid on any page without a dark hero.) */
    .single-product-wrap { padding-top: 6rem; }
}

.single-product__breadcrumb {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.04em;
}

.single-product__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.single-product__breadcrumb a:hover { text-decoration: underline; }
.single-product__breadcrumb span { margin: 0 0.45em; opacity: 0.5; }

.single-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 800px) {
    .single-product {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.single-product__gallery {
    background: var(--color-bg-surface-soft);
    border-radius: 12px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: sticky;
    top: 7rem;
}

@media (max-width: 800px) {
    /* The gallery is sticky so it can follow the details column on desktop.
       Once the grid collapses to one column there is nothing to follow: the
       image pins itself and the details scroll underneath it.
       This has to sit AFTER the rule above, not in the earlier mobile block,
       because a media query adds no specificity and source order decides. */
    .single-product__gallery {
        position: static;
        top: auto;
    }
}

.single-product__gallery img {
    width: 100%;
    height: 100%;
    /* Photos (cakes, the club, extras) fill the frame. */
    object-fit: cover;
}

/* Bottle and voucher shots are tall, transparent cut-outs, cropping them to
   fill a 3:4 frame zoomed right into the middle of the label. Show them whole. */
.single-product-wrap[data-category="wine"] .single-product__gallery img,
.single-product-wrap[data-category="voucher"] .single-product__gallery img {
    object-fit: contain;
    padding: 2rem;
}

.single-product__bottle-placeholder {
    width: 130px;
    height: auto;
    color: var(--color-bg-strong);
    opacity: 0.22;
}

.single-product__details {
    padding-top: 0.5rem;
}

.single-product__badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.single-product__name {
    font-family: var(--font-family-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 0.4rem;
}

.single-product__producer {
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    margin-bottom: 0.2rem;
}

.single-product__region {
    font-size: 13px;
    font-weight: 200;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
}

.single-product__divider {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: 1.75rem 0;
}

.single-product__price {
    font-family: var(--font-family-display);
    font-size: 2.75rem;
    font-weight: 300;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.single-product__price-note {
    font-size: 13px;
    font-weight: 200;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
}

.single-product__tasting-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.single-product__tasting-text {
    font-size: 15px;
    font-weight: 200;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.btn-add-basket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    background: var(--color-bg-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s;
    margin-bottom: 0.75rem;
}

.btn-add-basket:hover {
    background: var(--color-bg-accent-hover);
    color: #fff;
}

.btn-enquire {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.8rem 1.9rem;
    background-color: transparent;
    color: var(--color-text-secondary);
    border: 1px solid currentColor;
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.btn-enquire:hover {
    border-color: var(--color-border-strong);
    background: var(--color-bg-surface-soft);
    color: var(--color-text-primary);
}

.single-product__meta-tags {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    font-size: 13px;
    font-weight: 200;
    color: var(--color-text-muted);
}

.single-product__meta-tag {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.single-product__meta-tag i { font-size: 12px; }

/* ─── RELATED WINES ──────────────────────────────────── */

.related-section {
    background: var(--color-bg-surface-soft);
    padding: 3.5rem 2rem 4rem;
}

.related-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.related-section__title {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1.75rem;
}

/* ─── VOUCHER PAGE ───────────────────────────────────── */

.vouchers-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

.vouchers-intro {
    max-width: 680px;
    margin: 0 auto 3rem;
    text-align: center;
}

.vouchers-intro__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: 0.6rem;
}

.vouchers-intro__title {
    font-family: var(--font-family-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 300;
    margin-bottom: 0.9rem;
}

.vouchers-intro__body {
    font-size: 15px;
    font-weight: 200;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.vouchers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

@media (max-width: 900px)  { .vouchers-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .vouchers-grid { grid-template-columns: repeat(2, 1fr); } }

.voucher-card {
    position: relative;
    background: var(--color-bg-surface-soft);
    border: 1.5px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 1.75rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.voucher-card:hover {
    box-shadow: 0 6px 24px var(--color-shadow-medium);
    border-color: var(--color-border-medium);
}

.voucher-card--featured {
    border-color: var(--color-border-accent);
    background: var(--color-accent-tint-soft);
}

.voucher-card__popular {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

.voucher-card__icon {
    font-size: 22px;
    margin-bottom: 0.25rem;
    opacity: 0.6;
}

.voucher-card__amount {
    font-family: var(--font-family-display);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1;
}

.voucher-card__label {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.voucher-card__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    background: var(--color-bg-strong);
    color: var(--color-text-inverse);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.18s;
    margin-top: 0.25rem;
}

.voucher-card__cta:hover {
    background: var(--color-bg-strong-hover);
    color: var(--color-text-inverse);
}

/* How it works */

.vouchers-how {
    background: var(--color-bg-surface-soft);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--color-border-subtle);
}

.vouchers-how__title {
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

/* Numbered "how it works" row. Was unbounded and ran to the viewport edge , 
   now contained, left-aligned and led by a large ghost numeral. */
.how-steps {
    max-width: 1200px;
    margin: 0 auto;
    /* Top padding kept light, the block above already carries a bottom margin,
       and the two were stacking into a big empty band. */
    padding: 2rem 2rem 4.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

@media (max-width: 820px) {
    .how-steps { grid-template-columns: 1fr; gap: 2.25rem; padding: 1.5rem 1.4rem 3rem; }
}

.how-step {
    display: block;
    padding-top: 1.5rem;
    /* Explicit, so the steps look the same wherever they sit, the vouchers
       page nests them inside a centre-aligned panel. */
    text-align: left;
    border-top: 1px solid var(--color-border-medium);
}

/* Nested inside the vouchers panel the wrapper already supplies the padding. */
.vouchers-how .how-steps {
    padding: 0;
    max-width: none;
}

.how-step__num {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: block;
    font-family: var(--font-family-display);
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-text-accent);
    opacity: 0.55;
    margin-bottom: 0.9rem;
}

.how-step__title {
    font-family: var(--font-family-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

.how-step__body {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 38ch;
}

/* ─── EVENTS / TICKETS PAGE ──────────────────────────── */

.events-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
}

.events-intro {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 960px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .events-grid { grid-template-columns: 1fr; } }

.event-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.22s, transform 0.22s;
}

.event-card:hover {
    box-shadow: 0 6px 28px var(--color-shadow-medium);
    transform: translateY(-3px);
}

.event-card__img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-surface-soft);
}

.event-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.event-card:hover .event-card__img-wrap img { transform: scale(1.04); }

.event-card__date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-bg-strong);
    color: #fff;
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    text-align: center;
    line-height: 1.2;
    min-width: 50px;
}

.event-card__date-badge-day {
    display: block;
    font-family: var(--font-family-display);
    font-size: 1.5rem;
    font-weight: 300;
}

.event-card__date-badge-mon {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
}

.event-card__body {
    padding: 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.event-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.1rem; }

.event-card__name {
    font-family: var(--font-family-display);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.3;
}

.event-card__time {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-muted);
}

.event-card__desc {
    font-size: 13px;
    font-weight: 200;
    line-height: 1.6;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.event-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.event-card__price {
    font-family: var(--font-family-display);
    font-size: 1.35rem;
    font-weight: 300;
}

.event-card__price-note {
    font-size: 12px;
    font-weight: 200;
    color: var(--color-text-muted);
}

.btn-book {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    background: var(--color-bg-accent);
    color: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.18s;
}

.btn-book:hover { background: var(--color-bg-accent-hover); color: #fff; }

.btn-book--sold-out {
    background: var(--color-bg-surface-muted);
    color: var(--color-text-muted);
    cursor: default;
}

.btn-book--sold-out:hover { background: var(--color-bg-surface-muted); color: var(--color-text-muted); }

/* ─── SUBMENU POSITIONING (nav dropdown) ─────────────── */

.submenu { position: relative; }

.submenu-list {
    top: 4em;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    padding: 0.5rem 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

.submenu-list li { height: auto; }

.submenu-list a {
    display: block;
    padding: 0.55rem 1.25rem;
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background 0.15s;
}

.submenu-list a:hover { background: rgba(255,255,255,0.1); }

/* ─── WINE CLUB MINI BANNER (on shop landing) ────────── */

/* Contained editorial panel rather than a full-bleed slab: text on the left,
   the price sitting in its own bordered block on the right. */
.shop-club-banner {
    max-width: 1200px;
    margin: 4rem auto 3rem;
    padding: 0 2rem;
    background: none;
    color: inherit;
    text-align: left;
}

.shop-club-banner__inner {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1.5fr auto;
    align-items: center;
    gap: 3rem;
    padding: 3.25rem 3rem;
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(221, 90, 58, 0.22) 0%, rgba(221, 90, 58, 0) 55%),
        #0b2a1b;
    border: 1px solid rgba(255, 254, 247, 0.12);
}

@media (max-width: 860px) {
    .shop-club-banner { padding: 0 1.4rem; margin: 2.5rem auto 2rem; }
    .shop-club-banner__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.25rem 1.6rem;
    }
}

.shop-club-banner__text { min-width: 0; }

.shop-club-banner__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

@media (max-width: 860px) {
    .shop-club-banner__aside { align-items: stretch; }
    .shop-club-banner__cta { justify-content: center; }
}

.shop-club-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin: 0 0 0.9rem;
}

/* Short rule after the eyebrow */
.shop-club-banner__eyebrow::after {
    content: "";
    flex: 0 0 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.shop-club-banner__title {
    font-family: var(--font-family-display);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 400;
    /* Literal light value, not a token: this panel is pinned dark in both themes. */
    color: #fffef7;
    line-height: 1.15;
    margin: 0 0 0.9rem;
}

.shop-club-banner__body {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 254, 247, 0.62);
    max-width: 50ch;
    margin: 0;
}

.shop-club-banner__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-family: var(--font-family-display);
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    color: #fffef7;
    padding: 1.6rem 1.8rem;
    border: 1px solid rgba(255, 254, 247, 0.16);
    background: rgba(255, 254, 247, 0.04);
    white-space: nowrap;
}

.shop-club-banner__price span {
    font-family: var(--font-family-base);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 254, 247, 0.55);
    white-space: normal;
}

/* The site's premium outline button: light hairline border on the dark panel. */
.shop-club-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 0.8rem 1.9rem;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    color: var(--color-text-inverse);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.shop-club-banner__cta:hover {
    color: var(--color-text-accent);
}

/* When there's no price above it (cakes, tickets) the CTA sits on its own. */
.shop-club-banner__aside > .shop-club-banner__cta:only-child { margin-top: 0; }

/* ─── DARK MODE ──────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    /* Selector bug fixed: real cards carry data-type="white/red/rose", never
       data-category="white" etc, so this block never matched anything and
       wine cards fell through to the light-mode cream tints even in dark
       mode. Also renamed "deal" -> "club", the wine club's real category. */
    .product-card[data-type="white"]    .product-card__img-wrap { background: #241f16; }
    .product-card[data-type="red"]      .product-card__img-wrap { background: #1f0f1b; }
    .product-card[data-type="rose"]     .product-card__img-wrap { background: #271418; }
    .product-card[data-category="club"] .product-card__img-wrap { background: var(--color-bg-surface-muted); }

    .product-card[data-type="white"] .badge--cat,
    .single-product-wrap[data-type="white"] .badge--cat {
        background: #463c22;
        color: #f0da9c;
        border-color: rgba(240, 218, 156, 0.3);
    }

    .product-card[data-type="red"] .badge--cat,
    .single-product-wrap[data-type="red"] .badge--cat {
        background: #3d2130;
        color: #eaa8c4;
        border-color: rgba(234, 168, 196, 0.3);
    }

    .product-card[data-type="rose"] .badge--cat,
    .single-product-wrap[data-type="rose"] .badge--cat {
        background: #452a30;
        color: #edb5c2;
        border-color: rgba(237, 181, 194, 0.3);
    }
}

/* ==========================================================================
   SHOP v2, cart, buttons, and the JS-rendered product cards
   Everything below is driven by /shop/products.js + cart.js + shop.js.
   Colours come from the design tokens in style.css, so dark mode is automatic.
   ========================================================================== */

/* ─── BUTTONS ────────────────────────────────────────── */

/* Matches the site's premium outline button (see the .hero-button group in
   style.css): transparent, hairline border in the current colour, square
   corners, uppercase and widely tracked. Hover fills it in. */
.kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.9rem;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    font-family: var(--font-family-base);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

/* On light backgrounds */
.kg-btn--primary {
    color: var(--color-text-primary);
}

.kg-btn--primary:hover {
    background-color: var(--color-bg-strong);
    border-color: var(--color-bg-strong);
    color: var(--color-text-inverse);
}

.kg-btn--accent {
    color: var(--color-text-accent);
}

.kg-btn--accent:hover {
    background-color: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: #fff;
}

.kg-btn--ghost {
    color: var(--color-text-secondary);
}

.kg-btn--ghost:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

/* On the dark panels (promos, club banner) the border needs to be light. */
.shop-promo__body .kg-btn,
.shop-club-banner .kg-btn {
    color: var(--color-text-inverse);
}

.shop-promo__body .kg-btn:hover,
.shop-club-banner .kg-btn:hover {
    color: var(--color-text-accent);
    border-color: var(--color-text-accent);
    background-color: transparent;
}

.kg-btn--block { width: 100%; }

/* Compact variant for product cards, same language, smaller footprint. */
.kg-btn--add {
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
}

.kg-btn--add:hover {
    background-color: var(--color-bg-strong);
    border-color: var(--color-bg-strong);
    color: var(--color-text-inverse);
}

.kg-btn--add i { font-size: 0.7rem; }

/* ─── PRODUCT CARD (restructured: article + inner links) ─ */

.product-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.product-card__title-link {
    text-decoration: none;
    color: inherit;
}

.product-card__title-link:hover .product-card__name {
    color: var(--color-text-accent);
}

.product-card__name { transition: color 0.18s; }

/* Bottle shots are transparent cut-outs, contain them rather than crop */
.product-card[data-category="wine"] .product-card__img-wrap img,
.product-card[data-category="voucher"] .product-card__img-wrap img {
    object-fit: contain;
    padding: 1.4rem;
}

.product-card[data-type="white"] .product-card__img-wrap { background: #f5f0d8; }
.product-card[data-type="red"]   .product-card__img-wrap { background: #dcc3d0; }
.product-card[data-type="rose"]  .product-card__img-wrap { background: #f7e3e2; }
.product-card[data-category="club"]    .product-card__img-wrap { background: #edf2ee; }
.product-card[data-category="voucher"] .product-card__img-wrap { background: #f2efe2; }

/* Wine type badge, coloured to match the wine rather than the generic
   accent orange every other badge uses. Same family as the bottle tints
   above, just saturated enough to read as text. Covers both the card grid
   and the single product page (which carries the same data-type). */
.product-card[data-type="white"] .badge--cat,
.single-product-wrap[data-type="white"] .badge--cat {
    background: #f7edc0;
    color: #7a5c12;
    border-color: rgba(122, 92, 18, 0.3);
}

.product-card[data-type="red"] .badge--cat,
.single-product-wrap[data-type="red"] .badge--cat {
    background: #ecd7e1;
    color: #6d1f3e;
    border-color: rgba(109, 31, 62, 0.3);
}

.product-card[data-type="rose"] .badge--cat,
.single-product-wrap[data-type="rose"] .badge--cat {
    background: #fae5e7;
    color: #a84a63;
    border-color: rgba(168, 74, 99, 0.3);
}

.product-card__deal-pill--muted {
    background: var(--color-text-muted);
    color: var(--color-text-inverse);
}

.product-card__cta--muted {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-subtle);
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    font-size: 12px;
}

.product-card:has(.product-card__cta--muted) { opacity: 0.72; }

.product-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* ─── FILTER + SORT BAR ──────────────────────────────── */

.shop-toolbar {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.shop-toolbar .shop-filter-bar {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.shop-toolbar__count {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.kg-sort {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.45rem 2rem 0.45rem 0.9rem;
    border: 1.5px solid var(--color-border-medium);
    border-radius: 100px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3723' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px;
    font-family: var(--font-family-base);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .kg-sort {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffef7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

/* ─── NAV CART BUTTON ────────────────────────────────── */

/* Basket sits at the end of the bar, where nav links no longer supply padding , 
   give it its own gutter plus a hairline divider so it isn't jammed on the edge. */
.kg-cart-button-wrap {
    display: flex;
    align-items: center;
    margin-left: 0.6rem;
    padding-right: 1.15em;
}

.kg-cart-button-wrap::before {
    content: "";
    width: 1px;
    height: 18px;
    margin-right: 1rem;
    background: rgba(255, 254, 247, 0.22);
}

@media (max-width: 900px) {
    /* Next to the burger the divider is clutter, drop it, keep the spacing. */
    .kg-cart-button-wrap { padding-right: 0.4rem; margin-left: 0.2rem; }
    .kg-cart-button-wrap::before { display: none; }
}

.kg-cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.18s;
}

.kg-cart-button:hover { background: rgba(255, 255, 255, 0.14); }

.kg-cart-button__count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-accent);
    color: #fff;
    border-radius: 100px;
    font-family: var(--font-family-base);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* ─── CART DRAWER ────────────────────────────────────── */

.kg-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 998;
}

.kg-cart-backdrop.is-open { opacity: 1; visibility: visible; }

.kg-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-page);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

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

.kg-cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.kg-cart-drawer__title {
    font-family: var(--font-family-display);
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
    color: var(--color-text-primary);
}

.kg-cart-drawer__close {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.3rem;
    transition: color 0.18s;
}

.kg-cart-drawer__close:hover { color: var(--color-text-primary); }

.kg-cart-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.kg-cart-drawer__foot {
    border-top: 1px solid var(--color-border-subtle);
    padding: 1.2rem 1.5rem 1.5rem;
    background: var(--color-bg-surface);
}

.kg-cart-lines { list-style: none; margin: 0; padding: 0; }

.kg-cart-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.kg-cart-line:last-child { border-bottom: none; }

.kg-cart-line__img {
    width: 64px;
    height: 78px;
    object-fit: contain;
    background: var(--color-bg-surface-soft);
    border-radius: 6px;
    padding: 5px;
}

.kg-cart-line__name {
    font-family: var(--font-family-display);
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 0.15rem;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.kg-cart-line__variant,
.kg-cart-line__price {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0 0 0.2rem;
}

.kg-cart-line__controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.kg-qty {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-medium);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}

.kg-qty:hover { background: var(--color-bg-surface-soft); border-color: var(--color-border-strong); }

.kg-qty-val {
    min-width: 22px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.kg-cart-line__remove {
    margin-left: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.kg-cart-line__remove:hover { color: var(--color-bg-accent); }

.kg-cart-line__total {
    font-family: var(--font-family-display);
    font-size: 1rem;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.kg-cart-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-family-display);
    font-size: 1.25rem;
    color: var(--color-text-primary);
    margin-bottom: 0.6rem;
}

.kg-cart-collect {
    display: flex;
    gap: 0.5rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
}

.kg-cart-collect i { margin-top: 0.15rem; }

.kg-cart-checkout { width: 100%; }

.kg-cart-clear {
    display: block;
    width: 100%;
    margin-top: 0.7rem;
    background: none;
    border: none;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.kg-cart-clear:hover { color: var(--color-bg-accent); }

.kg-cart-empty {
    text-align: center;
    padding: 3.5rem 1rem;
}

.kg-cart-empty i { font-size: 2rem; color: var(--color-border-strong); margin-bottom: 1rem; }

.kg-cart-empty__title {
    font-family: var(--font-family-display);
    font-size: 1.15rem;
    color: var(--color-text-primary);
    margin: 0 0 0.4rem;
}

.kg-cart-empty__text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 1.4rem;
    line-height: 1.6;
}

/* ─── TOAST ──────────────────────────────────────────── */

.kg-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 1.5rem);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(420px, calc(100vw - 2rem));
    padding: 0.85rem 1.3rem;
    background: var(--color-bg-strong);
    color: var(--color-text-inverse);
    border-radius: 100px;
    font-size: 0.85rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 1000;
}

.kg-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.kg-toast i { color: #8fd6a8; }

/* ─── PRODUCT PAGE: variant + qty controls ───────────── */

.single-product__options {
    display: flex;
    gap: 0.8rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 1.4rem 0 1rem;
}

.kg-field { display: flex; flex-direction: column; gap: 0.35rem; }

.kg-field__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.kg-select,
.kg-qty-input {
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--color-border-medium);
    border-radius: 4px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: 0.9rem;
}

.kg-select { min-width: 230px; }
.kg-qty-input { width: 80px; }

.single-product__spec {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--color-border-subtle);
}

.single-product__spec li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.87rem;
    color: var(--color-text-secondary);
}

.single-product__spec span:first-child {
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
}

.single-product__pairing {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    background: var(--color-bg-surface-soft);
    border-radius: 8px;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.single-product__pairing strong {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 0.3rem;
}

/* ─── CHECKOUT PAGE ──────────────────────────────────── */

.checkout-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

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

.checkout-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    padding: 1.8rem;
}

.checkout-panel__title {
    font-family: var(--font-family-display);
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 1.2rem;
    color: var(--color-text-primary);
}

.checkout-summary-line {
    display: grid;
    /* thumbnail | name and qty | line total */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.checkout-summary-line:last-of-type { border-bottom: none; }

/* Same treatment as the basket drawer's thumbnail, a little smaller to suit
   the narrower summary column. Bottle shots are tall cutouts, so contain
   rather than cover. */
.checkout-summary-line__img {
    width: 46px;
    height: 58px;
    object-fit: contain;
    background: var(--color-bg-surface-soft);
    border-radius: 6px;
    padding: 4px;
}

.checkout-summary-line__name { color: var(--color-text-primary); }

.checkout-summary-line__variant {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1.5px solid var(--color-border-medium);
    font-family: var(--font-family-display);
    font-size: 1.4rem;
    color: var(--color-text-primary);
}

.checkout-notice {
    display: flex;
    gap: 0.8rem;
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
    background: var(--color-bg-surface-soft);
    border-left: 3px solid var(--color-bg-accent);
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.checkout-notice i { margin-top: 0.2rem; color: var(--color-bg-accent); }

.checkout-form { display: flex; flex-direction: column; gap: 1rem; }

.checkout-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.checkout-form input,
.checkout-form textarea {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--color-border-medium);
    border-radius: 4px;
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: normal;
}

.checkout-form textarea { min-height: 90px; resize: vertical; }

/* ─── HOMEPAGE SHOP SECTIONS ─────────────────────────── */

.home-shop {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 1rem;
}

/* Heading block: eyebrow + rule, display title, supporting line, and a
   pill link pinned to the baseline on the right. */
.home-shop__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.home-shop__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin: 0 0 0.85rem;
}

.home-shop__eyebrow::after {
    content: "";
    flex: 0 0 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.home-shop__title {
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.08;
}

.home-shop__sub {
    margin: 0.9rem 0 0;
    max-width: 52ch;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.home-shop__link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.9rem;
    background-color: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.home-shop__link:hover {
    background-color: var(--color-bg-strong);
    border-color: var(--color-bg-strong);
    color: var(--color-text-inverse);
}

/* ─── PROMO BAND ─────────────────────────────────────── */

.shop-promo {
    max-width: 1200px;
    margin: 5rem auto;
    padding: 0 2rem;
}

.shop-promo__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(110% 130% at 0% 100%, rgba(221, 90, 58, 0.2) 0%, rgba(221, 90, 58, 0) 55%),
        #0b2a1b;
    border: 1px solid rgba(255, 254, 247, 0.12);
}

@media (max-width: 800px) {
    .shop-promo__inner { grid-template-columns: 1fr; }
}

.shop-promo__body {
    padding: 3.5rem 3rem;
    align-self: center;
}

.shop-promo__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin: 0 0 0.85rem;
}

.shop-promo__eyebrow::after {
    content: "";
    flex: 0 0 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.shop-promo__title {
    font-family: var(--font-family-display);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 400;
    color: var(--color-text-inverse);
    margin: 0 0 1rem;
    line-height: 1.15;
}

.shop-promo__text {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 254, 247, 0.6);
    margin: 0 0 1.9rem;
    max-width: 46ch;
}

.shop-promo__media {
    height: 100%;
    min-height: 300px;
    position: relative;
}

.shop-promo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── USP STRIP ──────────────────────────────────────── */

/* One bordered card split by hairlines, rather than four floating icons. */
.shop-usp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 3.5rem auto 0;
    padding: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    background: var(--color-bg-surface);
    overflow: hidden;
}

@media (max-width: 860px) {
    .shop-usp { grid-template-columns: repeat(2, 1fr); margin: 2.5rem 1.4rem 0; }
}

@media (max-width: 480px) {
    .shop-usp { grid-template-columns: 1fr; }
}

.shop-usp__item {
    text-align: left;
    padding: 1.75rem 1.6rem;
    border-right: 1px solid var(--color-border-subtle);
}

.shop-usp__item:last-child { border-right: none; }

@media (max-width: 860px) {
    .shop-usp__item:nth-child(2n) { border-right: none; }
    .shop-usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-subtle); }
}

@media (max-width: 480px) {
    .shop-usp__item { border-right: none; border-bottom: 1px solid var(--color-border-subtle); }
    .shop-usp__item:last-child { border-bottom: none; }
}

.shop-usp__item i {
    display: block;
    font-size: 0.95rem;
    color: var(--color-text-accent);
    margin-bottom: 0.9rem;
}

.shop-usp__label {
    font-family: var(--font-family-display);
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 0.35rem;
}

.shop-usp__text {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 620px) {
    .kg-cart-drawer { width: 100%; }
    .home-shop, .shop-promo { padding-left: 1.2rem; padding-right: 1.2rem; }
    .shop-promo__body { padding: 2.2rem 1.5rem; }
    .shop-toolbar { padding: 0 1.2rem; }
}

/* ==========================================================================
   UX LAYER, basket feedback, sticky buy bar
   ========================================================================== */

/* Adding from a grid no longer opens the drawer, so the basket icon does the
   confirming: a short bump draws the eye to the updated count. */
@keyframes kg-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.kg-cart-button.is-bumped { animation: kg-bump 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

@media (prefers-reduced-motion: reduce) {
    .kg-cart-button.is-bumped { animation: none; }
}

/* Undo affordance inside the toast */
.kg-toast__action {
    margin-left: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 254, 247, 0.5);
    border-radius: 0;
    color: #fffef7;
    font-family: var(--font-family-base);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.kg-toast__action:hover {
    background: rgba(255, 254, 247, 0.14);
    border-color: #fffef7;
}

/* ─── STICKY BUY BAR (small screens) ─────────────────────
   On a phone the add-to-basket button scrolls away as soon as you read the
   tasting notes. This keeps the price and the action within reach. */
.buy-bar { display: none; }

@media (max-width: 760px) {
    .buy-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1.2rem;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
        background: var(--color-bg-page);
        border-top: 1px solid var(--color-border-medium);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
    }

    .buy-bar__info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }

    .buy-bar__name {
        font-size: 0.78rem;
        color: var(--color-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .buy-bar__price {
        font-family: var(--font-family-display);
        font-size: 1.15rem;
        color: var(--color-text-primary);
    }

    .buy-bar .kg-btn { flex: 0 0 auto; }

    /* Stop the bar covering the end of the page or the drawer footer. */
    .single-product-wrap { padding-bottom: 6rem; }
}

/* The drawer sits above the buy bar. */
.kg-cart-drawer, .kg-cart-backdrop { z-index: 999; }