/*
Theme Name:  Astra Child – Born Gifted
Description: Child theme for Astra – Born Gifted store
Template:    astra
Version:     2.6.30
Author:      Born Gifted
*/

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --bg-teal-deep:    #0b5a66;
    --bg-teal-mid:     #1f97a8;
    --bg-teal-dark:    #084955;
    --bg-teal-pale:    #ebf5f6;
    --bg-teal-pastel:  #a9c5be;
    --bg-coral:        #e88f7b;
    --bg-charcoal:     #2f3e46;
    --bg-off-white:    #faf8f5;
    --bg-white:        #ffffff;
    --bg-stone:        #e9e3dd;
    --bg-stone-mid:    #ede8e3;
    --bg-stone-light:  #f0ede9;
    --bg-stone-border: #e0deda;
    --bg-grey-text:    #6b7c85;
    --bg-grey-sub:     #4a5a60;
}

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap');

/* ── Global ────────────────────────────────────────────────── */
/* ⚠️ THIS MUST BE AT LEAST THE STICKY HEADER'S HEIGHT, or anything scrolled
   to by an anchor or scrollIntoView lands underneath .bg-header and the
   customer arrives looking at the middle of it. Measured heights of
   .bg-header (position: sticky; top: 0, no compact state):
       375px / 810px   175px   <- covered by the <=900px override below
       901px / 1024px  199px
       1280px / 1440px 165px
   104px cleared none of them. 200px clears the worst case; above 1280px it
   leaves ~35px of extra air, which is harmless.
   Its two consumers are the rating link's scrollIntoView on the product page
   and the checkout's scroll-to-first-error in bg-personalisation.js — both
   were landing under the header on desktop. */
html {
    scroll-padding-top: 200px;
}

body {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    background-color: var(--bg-off-white);
    color: var(--bg-charcoal);
}

/* ── Container widths ──────────────────────────────────────── */
.ast-container,
.entry-content,
.site-content .ast-container {
    max-width: 1280px;
}

/* ── Catalogue (WooCommerce archive / shop) ────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .woocommerce-products-header,
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container {
    display: block !important;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Forms ─────────────────────────────────────────────────── */
.woocommerce form,
.woocommerce-page form,
form.checkout,
form.woocommerce-form,
.entry-content form,
#customer_login,
.woocommerce-MyAccount-content form {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Buttons ───────────────────────────────────────────────── */
.ast-btn,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background-color: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    border-color: var(--bg-teal-deep) !important;
    border-radius: 6px !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ast-btn:hover,
.ast-btn:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: var(--bg-teal-dark) !important;
    border-color: var(--bg-teal-dark) !important;
    color: var(--bg-white) !important;
}

/* ── Topbar ────────────────────────────────────────────────── */
.bg-topbar {
    background-color: var(--bg-off-white);
    color: var(--bg-teal-deep);
    font-size: 13px;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    border: none;
}

.bg-topbar__inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 40px;
    max-width: 1280px;
    margin: 0 auto;
}

.bg-topbar__item {
    color: var(--bg-teal-deep);
    font-weight: 400;
}

.bg-topbar__item strong {
    font-weight: 700;
    color: var(--bg-teal-deep);
}


/* ── Header ────────────────────────────────────────────────── */
.bg-header {
    background: var(--bg-teal-deep);
    position: sticky;
    top: 0;
    z-index: 200;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--bg-stone);
}

/* suppress Astra's own header so ours is the only one rendered */
#masthead { display: none !important; }

/* kill any default browser/Astra margins on topbar and header */
.bg-topbar,
.bg-header,
.bg-header__row1,
.bg-header__row2 {
    box-sizing: border-box;
}

/* Row 1: logo | search | icons */
.bg-header__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 40px;
    min-height: 56px;
}

.bg-header__logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Row 2: nav strip */
.bg-header__row2 {
    background: var(--bg-off-white);
    border-bottom: 1px solid var(--bg-stone);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.bg-header__nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.bg-header__logo:hover,
.bg-header__logo:focus {
    opacity: 0.85;
    text-decoration: none;
}

.bg-header__logo-img {
    display: block;
    height: 88px;
    width: auto;
    max-height: 88px;
}

.bg-header__logo img {
    max-height: 88px;
    width: auto;
}

.bg-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.bg-nav > li > a {
    display: block;
    padding: 12px 18px;
    font-family: 'Raleway', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--bg-charcoal);
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bg-nav > li > a:hover,
.bg-nav > li > a:focus {
    color: var(--bg-teal-deep);
    background-color: var(--bg-teal-pale);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bg-nav > li.current-menu-item > a,
.bg-nav > li.current_page_item > a {
    color: var(--bg-teal-deep);
    background-color: transparent;
}

.bg-nav .menu-item a { letter-spacing: 0.05em; }
.bg-nav .menu-item a[href*="sale"] { color: var(--bg-coral) !important; }

/* ── Search centrepiece ────────────────────────────────────── */
.bg-header__search {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem;
}

.bg-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 504px;
    border: 1.5px solid var(--bg-teal-pastel);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bg-search:focus-within {
    border-color: var(--bg-teal-deep);
    box-shadow: 0 0 0 2px rgba(11,90,102,0.12);
}

/* Kill all browser/Astra/WooCommerce input overrides */
.bg-search input,
.bg-search input[type="search"] {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 48px 12px 20px !important;
    height: 44px !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 15px !important;
    color: var(--bg-charcoal) !important;
}

.bg-search input::placeholder {
    color: #9aacb4;
    opacity: 1;
}

/* Remove browser search decoration chrome (magnifier, cancel ×) */
.bg-search input[type="search"]::-webkit-search-decoration,
.bg-search input[type="search"]::-webkit-search-cancel-button,
.bg-search input[type="search"]::-webkit-search-results-button,
.bg-search input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.bg-search__icon {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--bg-teal-deep) !important;
    cursor: pointer !important;
}
.bg-search__icon:hover {
    color: var(--bg-teal-mid) !important;
}
.bg-search__icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* ── Header icons ──────────────────────────────────────────── */
.bg-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bg-header__actions svg,
.bg-account-btn svg,
.bg-basket-btn svg {
    color: var(--bg-white);
    stroke: var(--bg-white);
    width: 32px;
    height: 32px;
}

/* ── Basket button ─────────────────────────────────────────── */
.bg-basket-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    color: var(--bg-white);
    text-decoration: none;
    padding: 0.3rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bg-basket-btn:hover,
.bg-basket-btn:focus {
    color: var(--bg-teal-deep);
    background-color: var(--bg-teal-pale);
    text-decoration: none;
}

.bg-basket-btn__count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--bg-coral);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* hide count badge when empty */
.bg-basket-btn__count:empty,
.bg-basket-btn__count[data-count="0"] {
    display: none;
}

/* ── Account button ────────────────────────────────────────── */
.bg-account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    color: var(--bg-white);
    text-decoration: none;
    padding: 0.3rem;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bg-account-btn:hover,
.bg-account-btn:focus {
    color: var(--bg-teal-deep);
    background-color: var(--bg-teal-pale);
    text-decoration: none;
}

/* Icon labels beneath account/basket icons — desktop only */
.bg-header__icon-label {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* ── Trust bar ─────────────────────────────────────────────── */
.bg-trust-bar {
    background: #ffffff;
    border-top: 1px solid var(--bg-stone-border);
    border-bottom: 1px solid var(--bg-stone-border);
}

/* Thin strip acts as section divider above trust bar items */
.bg-trust-bar::before {
    content: '';
    display: block;
    height: 10px;
    background: #ffffff;
}

.bg-trust-bar__inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bg-trust-bar__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 20px;
    flex: 1;
    border-right: 1px solid var(--bg-stone-border);
    color: var(--bg-charcoal);
}

.bg-trust-bar__item:last-child {
    border-right: none;
}

.bg-trust-bar__item svg {
    flex-shrink: 0;
    color: var(--bg-teal-deep);
}

.bg-trust-bar__label {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bg-charcoal);
}

.bg-trust-bar__label small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--bg-grey-text);
    margin-top: 0.1rem;
}

/* ── Responsive: header ────────────────────────────────────── */
@media (max-width: 900px) {
    html { scroll-padding-top: 175px; }

    /* Hide desktop nav row and topbar info strip */
    .bg-header__row2 { display: none; }
    .bg-topbar       { display: none; }

    /* Row 1: hamburger | logo (centred) | icons | search full-width below */
    .bg-header__row1 {
        display: grid !important;
        grid-template-columns: 44px 1fr 88px !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 12px 16px !important;
        gap: 0 !important;
        min-height: auto;
    }

    .bg-mobile-menu-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        display: flex;
    }

    .bg-header__logo {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        text-align: center !important;
    }

    .bg-header__logo-img {
        height: auto;
        max-height: 48px;
    }

    .bg-header__actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    .bg-header__icon-label {
        display: none;
    }

    /* Search bar: full width on its own row below */
    .bg-header__search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        padding: 6px 0 10px;
        justify-content: stretch;
    }

    .bg-search {
        width: 100%;
    }
}

/* ── Responsive: trust bar ─────────────────────────────────── */
@media (max-width: 760px) {
    .bg-trust-bar {
        background: #ffffff;
    }
    .bg-trust-bar__inner {
        flex-wrap: wrap;
    }
    .bg-trust-bar__item {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #e0eeec;
        padding: 1rem 1.25rem;
    }
    .bg-trust-bar__item:last-child {
        border-bottom: none;
    }
}

/* ── Footer ────────────────────────────────────────────────── */
.bg-footer {
    background-color: var(--bg-teal-deep);
    color: #C8D0D4;
    font-family: 'Raleway', sans-serif;
    margin-top: auto;
}

.bg-footer__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 2rem 3rem;
}

/* ── Col 1: eKomi widget ───────────────────────────────────── */
.bg-footer__col--ekomi {
    max-width: 280px;
    margin-bottom: 20px;
}

.bg-footer__col .ekomi-widget-container {
    transform: scale(1.3);
    transform-origin: top left;
    margin-top: -30px;
}

/* ── Col 1: brand ──────────────────────────────────────────── */
.bg-footer__logo {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bg-white);
    text-decoration: none;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.bg-footer__logo:hover {
    color: var(--bg-teal-deep);
}

.bg-footer__tagline {
    font-size: 0.9375rem;
    color: #9AACB4;
    margin: 0;
    line-height: 1.5;
}

/* ── Column headings ───────────────────────────────────────── */
.bg-footer__heading {
    color: #ffffff !important;
    font-family: 'Raleway', sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: none !important;
}

/* ── Link lists ────────────────────────────────────────────── */
.bg-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bg-footer__links li {
    margin-bottom: 0.5rem;
}

.bg-footer__links a {
    color: #C8D0D4;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.bg-footer__address {
    color: #C8D0D4;
    font-style: normal;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 0.25rem;
}

.bg-footer__links a:hover,
.bg-footer__links a:focus {
    color: var(--bg-coral);
    text-decoration: underline;
}

/* ── Bottom bar ────────────────────────────────────────────── */
.bg-footer__bottom {
    background: var(--bg-off-white);
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #5e5e5b;
}

.bg-footer__bottom p { margin: 0; color: #5e5e5b; }

.bg-footer__bottom .bg-footer__payments { max-height: 130px; height: auto; width: auto; max-width: 65%; opacity: 0.9; }
.bg-footer__payments--mobile { display: none; }

.bg-footer__ekomi { display: flex; align-items: center; }

.bg-footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bg-footer__social-icons { display: flex; gap: 24px; }
.bg-footer__social a { color: #5e5e5b; transition: color 0.2s; line-height: 1; }
.bg-footer__social a:hover { color: var(--bg-coral); }

/* suppress Astra scroll-to-top button */
.ast-scroll-to-top { display: none !important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bg-footer__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .bg-footer__bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px !important;
        gap: 12px !important;
    }
    .bg-footer__bottom p {
        white-space: nowrap !important;
    }
    .bg-footer__payments {
        height: auto !important;
        max-height: 80px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    .bg-footer__payments--desktop { display: none; }
    .bg-footer__payments--mobile { display: block; max-width: 100%; height: auto; }
    .bg-footer__social {
        align-items: center;
    }
}

@media (max-width: 520px) {
    .bg-footer__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 2.5rem 1.25rem 2rem;
    }
    .bg-footer__inner .bg-footer__col:nth-child(1),
    .bg-footer__inner .bg-footer__col:nth-child(2) {
        display: none;
    }
    .bg-footer__links a {
        font-size: 14px;
    }
    .bg-footer__links li {
        margin-bottom: 0.375rem;
    }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE TEMPLATE
   ════════════════════════════════════════════════════════════ */

/* Let homepage sections control their own widths */
body.page-template-template-homepage #content .ast-container {
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.bg-homepage {
    width: 100%;
}

/* ── 1. Hero Slider  (1280 × 500 px) ──────────────────────── */
.bg-hero-slider {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-left: 0 !important;
    padding-left: 0 !important;
    background-color: var(--bg-off-white);
}

/* MetaSlider overrides — strip default chrome, sit below sticky header */
[id^="metaslider-id-"] {
    width: 100% !important;
}

.metaslider {
    position: relative;
    z-index: 1;
}

.metaslider .flexslider {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

.metaslider .flexslider .slides > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Custom slider layout */
.bg-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 500px;
    max-width: 1860px;
    margin: 0 auto;
}

@media (max-width: 1280px) {
    .bg-slider { height: calc(100vw * 0.3906); }
}

.bg-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.6s ease;
}

.bg-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

/* FlexSlider measures .bg-slide height directly — must be explicit */
.bg-slide {
    display: block;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    text-decoration: none;
}

/* Scale proportionally below 1280px — maintains 500/1280 = 0.3906 ratio */
@media (max-width: 1280px) {
    .bg-hero-slider {
        max-height: calc(100vw * 0.3906);
    }
    .bg-slide {
        height: calc(100vw * 0.3906);
    }
}

/* Slide fallback colours — shown only if image fails to load */
.bg-slide--1 { background-color: #DDECEF; }
.bg-slide--2 { background-color: var(--bg-teal-mid); }
.bg-slide--3 { background-color: var(--bg-teal-pastel); }

.bg-slide--1 .bg-slide__headline,
.bg-slide--1 .bg-slide__sub {
    color: var(--bg-charcoal);
}

.bg-slide--2 .bg-slide__headline,
.bg-slide--2 .bg-slide__sub {
    color: var(--bg-white);
}

.bg-slide--3 .bg-slide__headline,
.bg-slide--3 .bg-slide__sub {
    color: var(--bg-charcoal);
}

.bg-slide__content {
    text-align: left !important;
    padding: 0 48px !important;
    max-width: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
}

.bg-slide__headline {
    font-family: 'Raleway', sans-serif !important;
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    color: var(--bg-white) !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.bg-slide__sub {
    font-family: 'Raleway', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.9) !important;
    line-height: 1.5 !important;
    margin-bottom: 28px !important;
}

.bg-slide__cta {
    display: inline-block !important;
    background: var(--bg-white) !important;
    color: var(--bg-teal-deep) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, color 0.2s !important;
}

.bg-slide__cta:hover {
    background: var(--bg-coral) !important;
    color: var(--bg-white) !important;
}


/* Prev / Next arrows — hidden */
.bg-slider__prev,
.bg-slider__next,
.bg-hero-slider .flex-prev,
.bg-hero-slider .flex-next,
.bg-hero-slider .flex-direction-nav {
    display: none !important;
}

.bg-slider__prev,
.bg-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.88);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bg-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}

.bg-slider__prev { left: 1.25rem; }
.bg-slider__next { right: 1.25rem; }

.bg-slider__prev:hover,
.bg-slider__next:hover {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
}

/* Dot navigation */
.bg-slider__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.bg-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.bg-slider__dot.is-active {
    background: var(--bg-teal-deep);
}

/* ── 2. Occasions Carousel  (boxes 160 × 160 px) ──────────── */
/* ── 2. Occasions Carousel ──────────────────────────────────── */
.bg-occasions {
    padding-top: 24px;
    padding-bottom: 24px;
    overflow: hidden;
}

.bg-occasions__scroll-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

.bg-occasions-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px;
    padding: 10px 40px 20px 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    box-sizing: border-box;
}

.bg-occasions-carousel::-webkit-scrollbar {
    display: none;
}

.bg-occasions__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    z-index: 10;
    background: rgba(255,255,255,0.85);
    color: var(--bg-teal-deep);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.bg-occasions__arrow:hover,
.bg-occasions__arrow:focus {
    background: var(--bg-coral);
    color: var(--bg-white);
}

.bg-occasions__arrow--prev { left: 4px; }
.bg-occasions__arrow--next { right: 4px; }

/* Box */
.bg-occ-box {
    position: relative;
    flex: 0 0 160px !important;
    min-width: 160px !important;
    width: 160px !important;
    height: 140px;
    border-radius: 16px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.bg-occ-box:hover {
    opacity: 0.75;
    text-decoration: none;
}

.bg-occ-box__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.bg-occ-box__label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 12px;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-white);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    line-height: 1.2;
}

/* ── 3. Featured Category Banners ──────────────────────────── */
/*    Top row:    2 × (540 × 360 px)  aspect-ratio 3:2
      Bottom row: 3 × (340 × 280 px)  aspect-ratio 17:14      */
.bg-banners {
    padding: 60px 20px;
}

.bg-banners--cream {
    background: var(--bg-stone);
}

.bg-banners__heading {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #2e2e2c;
    margin: 0 0 2rem;
}

.bg-banners__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bg-banners__row {
    display: grid;
    gap: 20px;
}

.bg-banners__row--top    { grid-template-columns: 1fr 1fr; }
.bg-banners__row--bottom { grid-template-columns: 1fr 1fr 1fr; }

.bg-banner {
    position: relative;
    display: block;
    border-radius: 12px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bg-banner:hover {
    text-decoration: none;
}

/* Colour overlay — lets the photo show through while keeping white text readable */
.bg-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.4;
    z-index: 1;
    border-radius: 12px;
    pointer-events: none;
}

.bg-banner--teal::before  { background: var(--bg-teal-pastel); }
.bg-banner--rose::before  { background: var(--bg-coral); }
.bg-banner--cream::before { background: #C4A98A; }
.bg-banner--sage::before  { background: #8DB5A8; }
.bg-banner--blush::before { background: #EBC2B4; }

.bg-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
    border-radius: 12px;
    z-index: 2;
}

.bg-banner:hover::after {
    background: rgba(0,0,0,0.15);
}

/* Aspect ratios lock the placeholder dimensions */
.bg-banners__row--top    .bg-banner { aspect-ratio: 540 / 360; }
.bg-banners__row--bottom .bg-banner { aspect-ratio: 340 / 280; }

.bg-banner__label {
    position: absolute;
    bottom: 20px;
    left: 24px;
    top: auto;
    transform: none;
    font-family: 'Raleway', sans-serif;
    font-size: 29px;
    font-weight: 700;
    color: var(--bg-white);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-align: left;
    white-space: nowrap;
    z-index: 3;
}

/* ── Best Sellers carousel ──────────────────────────────────── */
.bg-bestsellers {
    padding: 64px 0 48px;
    background: var(--bg-off-white);
    border-top: 3px solid var(--bg-coral);
}

.bg-bestsellers__header {
    text-align: center;
    margin-bottom: 28px;
    padding: 0 20px;
}

.bg-bestsellers__heading {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    margin: 0 0 8px;
}

.bg-bestsellers__intro {
    font-size: 15px;
    color: var(--bg-grey-text);
    margin: 0;
}

.bg-bestsellers__scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 48px;
}

.bg-bestsellers-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 16px 4px 24px;
}

.bg-bestsellers-carousel::-webkit-scrollbar {
    display: none;
}

.bg-bestsellers__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #5FA99F;
    color: var(--bg-white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.bg-bestsellers__arrow:hover { background: var(--bg-coral); }
.bg-bestsellers__arrow--prev { left: 4px; }
.bg-bestsellers__arrow--next { right: 4px; }

.bg-bs-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    text-decoration: none;
    gap: 8px;
}

.bg-bs-oval {
    position: relative;
    width: 180px;
    height: 224px;
    flex-shrink: 0;
}

.bg-bs-oval__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.bg-bs-oval__photo {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    overflow: hidden;
}

.bg-bs-oval__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "New" badge — small coral pill, opposite corner from the star-shaped Top Gift badge */
.bg-bs-new-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--bg-coral);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 20px;
    line-height: 1.4;
    z-index: 1;
}

.bg-bs-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 70px;
    height: 70px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: var(--bg-coral);
    color: var(--bg-white);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
    box-sizing: border-box;
    padding-top: 6px;
}

.bg-bs-tile__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-charcoal);
    text-align: center;
    line-height: 1.3;
    max-width: 180px;
    margin: 0;
}

.bg-bs-tile__price,
.bg-bs-tile__price .woocommerce-Price-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-align: center;
}

.bg-bs-tile__price ins { text-decoration: none; }

.bg-bs-tile .bgcp-star { font-size: 13px; }
.bg-bs-tile .bgcp-card__reviews { font-size: 13px; }

/* ── Best Sellers: desktop wrapping grid (all tiles visible) ── */
@media (min-width: 901px) {
    .bg-bestsellers-carousel {
        flex-wrap: wrap;
        overflow: visible;
        justify-content: center;
    }
    .bg-bestsellers__arrow {
        display: none;
    }
}

/* ── About section ──────────────────────────────────────────── */
.bg-about { background: var(--bg-stone); padding: 48px 20px; }
.bg-about__inner { max-width: 900px; margin: 0 auto; text-align: left; }
.bg-about__inner p { font-size: 15px; line-height: 1.8; color: var(--bg-grey-sub); margin-bottom: 1.2em; }
.bg-about__inner p:last-child { margin-bottom: 0; }

/* ── eKomi widget ───────────────────────────────────────────── */
.bg-ekomi { background: var(--bg-white); padding: 40px 20px; text-align: center; border-top: 1px solid var(--bg-stone-border); }
.bg-ekomi__inner { max-width: 900px; margin: 0 auto; }

/* ── Homepage responsive ────────────────────────────────────── */
@media (max-width: 900px) {
    .bg-bestsellers {
        border-top: none;
    }
    /* Slider: 220px height, bottom-third gradient, title + CTA pill */
    .bg-hero-slider,
    .bg-slider {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        margin-bottom: 0 !important;
    }
    .bg-slider__slide,
    .bg-slide {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        position: relative !important;
        overflow: hidden !important;
        background-position: center center !important;
    }
    /* Higher-specificity override for inline background-position:left on .bg-slide <a> */
    .bg-slider .bg-slide,
    .bg-hero-slider .bg-slide {
        background-position: center center !important;
        background-size: cover !important;
    }
    /* Covers future img-based slides; bg-image slides use background-position above */
    .bg-slide__bg,
    .bg-hero-slide__img,
    .bg-slide img {
        object-position: center center !important;
    }
    .bg-slide__content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important; /* base rule caps this at 520px; without the reset the gradient stops dead mid-banner */
        padding: 32px 16px 14px !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.65)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .bg-slide__headline {
        font-family: 'Raleway', sans-serif !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        color: var(--bg-white) !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
    }
    .bg-slide__sub { display: none !important; }
    .bg-slide__cta {
        font-family: 'Raleway', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: var(--bg-white) !important;
        background: rgba(255,255,255,0.2) !important;
        border: 1px solid rgba(255,255,255,0.7) !important;
        border-radius: 20px !important;
        padding: 6px 16px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    /* Hide prev/next arrows on mobile — swipe only */
    .bg-slider__prev,
    .bg-slider__next {
        display: none !important;
    }

    /* Hide long about/description text block */
    .bg-about { display: none !important; }

    /* Category + product grids: 2 columns */
    .bgcp-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .bgcp-card__name { font-size: 13px !important; }

    /* Banner rows */
    .bg-banners__row--top    { grid-template-columns: 1fr; }
    .bg-banners__row--bottom { grid-template-columns: 1fr 1fr; }

    /* Hide icon carousel arrows on mobile — touch/swipe only */
    .bg-icon-carousel__prev,
    .bg-icon-carousel__next,
    .bg-occasions-carousel__btn,
    .bg-occasions__arrow--prev,
    .bg-occasions__arrow--next,
    .bg-bestsellers__arrow--prev,
    .bg-bestsellers__arrow--next,
    [class*="carousel__btn"] {
        display: none !important;
    }

    /* Icon carousel: scroll-snap, 2.3 items visible, clip overflow */
    .bg-occasions__scroll-wrap {
        overflow: hidden !important;
    }
    .bg-occasions-carousel {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 10px 0 16px 16px !important;
        gap: 12px !important;
    }
    .bg-occasions-carousel::-webkit-scrollbar { display: none !important; }
    .bg-occ-box {
        flex: 0 0 calc(42vw) !important;
        min-width: calc(42vw) !important;
        width: calc(42vw) !important;
        scroll-snap-align: start !important;
        height: 120px !important;
    }

    /* Consistent 12px section gaps — zero all, then apply uniformly */
    .bg-homepage {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .bg-homepage > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .bg-homepage > * + * {
        margin-top: 12px !important;
    }
    /* Exceptions: occasions carousel keeps top padding; bottom zeroed so only the 12px margin-top from banners creates the gap */
    .bg-occasions {
        padding-top: 16px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .bg-banners__row--bottom { grid-template-columns: 1fr; }
}

/* ── General mobile polish ──────────────────────────────────── */
@media (max-width: 900px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Base font size */
    body { font-size: 15px !important; }

    /* Page padding */
    .ast-container,
    .entry-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── Banners mobile spacing — standalone block, last in cascade ─ */
@media (max-width: 900px) {
    .bg-banners,
    .bg-banners--cream {
        padding: 16px 0 16px 0 !important;
        margin-top: 0 !important;
    }
}

/* ── Tablet / landscape band, 521-900px ──────────────────────────
   Everything above is the phone layout, but it is written at
   max-width:900px so it also governs tablets and phone landscape.
   These rules restore the design proportions across that band.
   They start at 521px so no phone portrait width is affected. */
@media (min-width: 521px) and (max-width: 900px) {

    /* Occasion tiles size their width in vw but pin height to a
       flat 120px, so they stretch from 1.3:1 on a phone to 2.8:1
       by 900px. Back to the 160x140 the desktop uses. */
    .bg-occ-box {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        width: 160px !important;
        height: 140px !important;
    }

    /* The phone rule drops the top row to one column and the bottom
       row to two. At 810px that makes the top banner a 770x513 slab
       and orphans the third bottom banner alone on its own line.
       Restore the desktop 2 / 3 split across the band. */
    .bg-banners__row--top    { grid-template-columns: 1fr 1fr; }
    .bg-banners__row--bottom { grid-template-columns: 1fr 1fr 1fr; }

    /* .bg-banner__label is a flat 29px with white-space:nowrap at
       every width, so it only fits while the cells are wide. With
       the grid restored above, scale it with the viewport and pull
       the inset in, or it clips ("Christening Gif", "Teacher G"). */
    .bg-banner__label {
        font-size: clamp(15px, 3vw, 29px);
        left: 16px;
        bottom: 14px;
    }
}

@media (max-width: 520px) {
    .bg-footer__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        padding: 2.5rem 1.25rem 2rem;
    }
}

/* ── eKomi strip ────────────────────────────────────────────── */
.bg-ekomi-strip { background: var(--bg-off-white); padding: 30px 20px; border-top: 1px solid var(--bg-stone); border-bottom: 1px solid var(--bg-stone); }
.bg-ekomi-strip__inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; }

/* ── Suppress Astra scroll-to-top button ────────────────────── */
.ast-scroll-to-top,
#ast-scroll-to-top,
.ast-scroll-to-top-progress,
[data-scroll-to-top] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PARENT TEMPLATE
   ════════════════════════════════════════════════════════════ */

body.page-template-template-category-parent #content .ast-container {
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.page-template-template-category-parent .site-content .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

body.page-template-template-category-parent .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-template-template-category-parent .bg-cat-parent {
    width: 100%;
}

/* ════════════════════════════════════════════════════════════
   MEGA MENU
   ════════════════════════════════════════════════════════════ */

/* Wrap — fixed behind the header so it scrolls with the page top */
.bg-mega-wrap {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9990;
    pointer-events: none;
}

/* Individual panel */
.bg-mega-panel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--bg-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
}

.bg-mega-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

/* Centred inner container */
.bg-mega-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px 20px;
}

/* Column */
.bg-mega-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pill heading */
.bg-mega-pill {
    display: block;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-bottom: 4px;
    text-align: center;
}

/* Link list */
.bg-mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bg-mega-links li {
    margin: 0;
    padding: 0;
}

.bg-mega-links a {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--bg-charcoal);
    text-decoration: none;
    display: block;
    padding: 2px 0;
    transition: color 0.15s ease;
}

.bg-mega-links a:hover {
    color: var(--bg-teal-mid);
    text-decoration: underline;
}

/* Hide on mobile */
@media (max-width: 900px) {
    .bg-mega-wrap {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PRODUCT PAGE
   ════════════════════════════════════════════════════════════ */

body.page-template-template-category-products #content .ast-container,
body.page-template-template-category-products .site-content .ast-container {
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

body.page-template-template-category-products .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Page wrapper ───────────────────────────────────────────── */
.bgcp-page {
    background: var(--bg-off-white);
    padding: 32px 20px 0;
}

.bgcp-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 64px;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.bgcp-breadcrumb {
    font-size: 13px;
    color: var(--bg-charcoal);
    margin-bottom: 20px;
}

.bgcp-breadcrumb a {
    color: var(--bg-teal-mid);
    text-decoration: none;
}

.bgcp-breadcrumb a:hover {
    text-decoration: underline;
}

.bgcp-breadcrumb__current {
    color: var(--bg-charcoal);
}

/* ── Page header ────────────────────────────────────────────── */
.bgcp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.bgcp-header__left {
    flex: 1;
    min-width: 0;
}

.bgcp-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: var(--bg-charcoal);
    margin: 0 0 10px;
    line-height: 1.2;
}

.bgcp-desc {
    font-size: 14px;
    color: #5a6a70;
    max-width: 650px;
    line-height: 1.7;
}

.bgcp-desc p {
    margin: 0;
}

.bgcp-header__count {
    font-size: 13px;
    color: var(--bg-grey-text);
    white-space: nowrap;
    padding-top: 6px;
    flex-shrink: 0;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.bgcp-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg-stone-light);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
}

.bgcp-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bgcp-filter-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--bg-charcoal);
    margin-right: 2px;
}

.bgcp-filter-divider {
    width: 1px;
    height: 24px;
    background: var(--bg-teal-pastel);
    flex-shrink: 0;
}

.bgcp-pill {
    display: inline-block;
    padding: 5px 12px;
    border: 1.5px solid var(--bg-teal-pastel);
    border-radius: 999px;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--bg-charcoal);
    text-decoration: none;
    background: transparent;
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bgcp-pill:hover {
    background: var(--bg-stone);
    color: var(--bg-charcoal);
    text-decoration: none;
}

.bgcp-pill--active {
    background: var(--bg-teal-mid);
    border-color: var(--bg-teal-mid);
    color: var(--bg-white);
}

.bgcp-pill--active:hover {
    background: #1a85a6;
    border-color: #1a85a6;
    color: var(--bg-white);
}

/* ── Sort + count toolbar ───────────────────────────────────── */
.bgcp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bgcp-toolbar__count {
    font-size: 13px;
    color: var(--bg-grey-text);
    margin: 0;
}

.bgcp-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bgcp-toolbar__sort label {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--bg-charcoal);
    white-space: nowrap;
}

.bgcp-sort-wrap {
    position: relative;
}

.bgcp-sort-wrap::after {
    content: '▼';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--bg-charcoal);
    pointer-events: none;
}

.bgcp-toolbar__sort select {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--bg-charcoal);
    border: 1.5px solid var(--bg-teal-pastel);
    border-radius: 20px;
    padding: 6px 32px 6px 16px;
    background: var(--bg-white);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ── Product grid ───────────────────────────────────────────── */
.bgcp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* ── Product card ───────────────────────────────────────────── */
.bgcp-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border-radius: 12px;
    border: 1px solid var(--bg-stone);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bgcp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    text-decoration: none;
}

.bgcp-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-stone-light);
}

.bgcp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.bgcp-card:hover .bgcp-card__img {
    transform: scale(1.03);
}

.bgcp-card__img-wrap:hover .bgcp-card__img {
    opacity: 0.92;
}

.bgcp-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--bg-coral);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

/* "New" badge — opposite corner from SALE so both can show at once without overlapping */
.bgcp-card__badge--new {
    left: auto;
    right: 10px;
    text-transform: uppercase;
}

.bgcp-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.bgcp-card__name {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--bg-charcoal);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bgcp-card__price {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--bg-teal-deep);
}

.bgcp-card__price .woocommerce-Price-amount,
.bgcp-card__price .amount {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--bg-teal-deep) !important;
}

.bgcp-card__price ins .woocommerce-Price-amount,
.bgcp-card__price ins .amount {
    color: var(--bg-coral) !important;
}

.bgcp-card__price del .woocommerce-Price-amount,
.bgcp-card__price del .amount {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
}

.bgcp-card__price del {
    margin-right: 4px;
    text-decoration: none;
}

.bgcp-card__price ins {
    text-decoration: none;
}

/* ── Star rating ────────────────────────────────────────────── */
.bgcp-card__rating {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 2px;
}

.bgcp-star {
    font-size: 13px;
    color: #D4DDE0 !important;
    line-height: 1;
}

.bgcp-star--on {
    color: #F5A623 !important;
}

.bgcp-card__reviews {
    font-size: 13px;
    color: #888888;
    margin-left: 4px;
}

/* ── No results ─────────────────────────────────────────────── */
.bgcp-no-results {
    padding: 60px 0;
    text-align: center;
    font-size: 15px;
    color: var(--bg-grey-text);
}

.bgcp-no-results a {
    color: var(--bg-teal-deep);
    text-decoration: underline;
}

/* ── Pagination ─────────────────────────────────────────────── */
.bgcp-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.bgcp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bg-teal-pastel);
    border-radius: 6px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-charcoal);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bgcp-pagination .page-numbers:hover {
    background: var(--bg-stone);
    text-decoration: none;
}

.bgcp-pagination .page-numbers.current {
    background: var(--bg-teal-deep);
    border-color: var(--bg-teal-deep);
    color: var(--bg-white);
}

.bgcp-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
}

/* ── Long description ───────────────────────────────────────── */
.bgcp-longdesc {
    background: var(--bg-stone);
    padding: 48px 20px;
    margin: 0 -20px;
    clear: both;
    display: block;
}

.bgcp-longdesc__inner {
    max-width: 900px;
    margin: 0 auto;
    font-size: 15px;
    color: var(--bg-grey-sub);
    line-height: 1.8;
}

.bgcp-longdesc__inner h2,
.bgcp-longdesc__inner h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.bgcp-longdesc__inner h2 { font-size: 22px; }
.bgcp-longdesc__inner h3 { font-size: 18px; }

.bgcp-longdesc__inner p {
    margin: 0 0 1.2em;
}

.bgcp-longdesc__inner p:last-child { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bgcp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .bgcp-grid { grid-template-columns: repeat(2, 1fr); }
    .bgcp-header { flex-direction: column; gap: 8px; }
    .bgcp-title { font-size: 22px; }
    .bgcp-filters { flex-direction: column; align-items: flex-start; }
    .bgcp-filter-divider { width: 100%; height: 1px; }
    .bgcp-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Single product: OFBiz product ID ──────────────────────── */
.bg-product-id {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: #888888;
    margin: 0 0 8px;
    padding: 0;
    line-height: 1.4;
}

/* ── Single Product Page ─────────────────────────────────────────────────────── */

/* Full-page wrapper */
.bgsp-wrap {
    background: var(--bg-off-white);
    font-family: 'Raleway', sans-serif;
}

/* Centred content container */
.bgsp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Breadcrumb */
.bgsp-breadcrumb { font-size: 13px; color: var(--bg-charcoal); margin: 32px 0 24px; }
.bgsp-breadcrumb a { color: var(--bg-teal-mid); text-decoration: none; }
.bgsp-breadcrumb a:hover { text-decoration: underline; }
.bgsp-breadcrumb__current { color: var(--bg-charcoal); }

/* Two-column layout — flexbox */
.bgsp-main {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    padding-bottom: 48px;
}

/* Left column: 55% */
.bgsp-gallery {
    flex: 0 0 55%;
    max-width: 55%;
    min-width: 0;
}

/* Right column: remainder after gap */
.bgsp-details {
    flex: 0 0 calc(45% - 48px);
    max-width: calc(45% - 48px);
    min-width: 0;
}

/* Gallery — main image */
.bgsp-gallery__wrap {
    position: relative;
    border-radius: 12px;
    background: var(--bg-white);
    border: 1px solid var(--bg-stone);
    overflow: hidden;
}

.bgsp-gallery__main { width: 100%; }

.bgsp-gallery__main-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: var(--bg-white);
    transition: transform 0.3s ease;
}

.bgsp-gallery__main-img:hover { transform: scale(1.08); }

.bgsp-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 52px;
    background: rgba(255, 255, 255, 0.75) !important;
    border: none !important;
    color: #999 !important;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s;
    padding: 0;
}

.bgsp-gallery__arrow:hover { background: var(--bg-white); }
.bgsp-gallery__arrow--prev { left: 0; border-radius: 0 4px 4px 0; }
.bgsp-gallery__arrow--next { right: 0; border-radius: 4px 0 0 4px; }

.bgsp-gallery__counter {
    text-align: center;
    font-size: 12px;
    color: #888;
    font-family: 'Raleway', sans-serif;
    margin-top: 8px;
}

/* Thumbnail strip */
.bgsp-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.bgsp-thumb {
    width: 65px;
    height: 65px;
    border-radius: 6px;
    border: 1px solid var(--bg-stone);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--bg-white);
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.bgsp-thumb--active { border: 2px solid var(--bg-teal-mid); }

.bgsp-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carousel full-width background rows */
.bgsp-carousel-row {
    background: var(--bg-stone);
    padding: 32px 0;
}

/* Carousel header + track */
.bgsp-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bgsp-carousel__title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--bg-charcoal);
    margin: 0;
}

.bgsp-carousel__track-wrap { position: relative; }

.bgsp-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
    border-radius: 0;
    transition: background 0.15s;
}

.bgsp-carousel__btn--prev { left: 0; }
.bgsp-carousel__btn--next { right: 0; }
.bgsp-carousel__btn:hover { background: rgba(255, 255, 255, 0.98); }

.bgsp-carousel__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bgsp-carousel__track::-webkit-scrollbar { display: none; }

/* Carousel card — image + name + price stacked */
.bgsp-carousel__card {
    flex-shrink: 0;
    width: 160px;
    background: var(--bg-white);
    border-radius: 10px;
    border: 1px solid var(--bg-stone);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bgsp-carousel__card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

.bgsp-carousel__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--bg-coral);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
    z-index: 1;
}

.bgsp-carousel__img { width: 100%; height: 150px; object-fit: contain; display: block; flex-shrink: 0; }

.bgsp-carousel__name {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-charcoal);
    padding: 7px 8px 2px;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bgsp-carousel__price {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--bg-teal-deep);
    padding: 2px 8px 8px;
    text-align: center;
    line-height: 1.4;
    display: block;
}

/* Product details */
.bgsp-product-id {
    font-size: 14px;
    color: var(--bg-charcoal);
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    margin: 0 0 6px;
}

.bgsp-product-id__label { color: #888; font-weight: 400; }

.bgsp-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--bg-charcoal);
    margin: 0 0 8px;
    line-height: 1.3;
}

/* Stars */
.bgsp-star { color: var(--bg-stone); font-size: 18px; line-height: 1; }
.bgsp-star--on { color: #F5A623; }

/* Rating row */
.bgsp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bgsp-stars { display: flex; gap: 2px; }
.bgsp-rating__count { font-size: 14px; color: var(--bg-teal-mid); text-decoration: none; }
.bgsp-rating__count:hover { text-decoration: underline; }

/* The stars and the review count are one control — the anchor carries the
   same flex/gap the .bgsp-rating row used to, so the row looks identical. */
.bgsp-rating__link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
}
.bgsp-rating__link:hover .bgsp-rating__count { text-decoration: underline; }

/* On a phone the row is only 23px tall, well under the 44px a fingertip
   needs, which is its own reason tapping "did nothing" — the tap missed.
   An absolutely positioned pseudo-element enlarges the hit area without
   occupying any layout space, so nothing on the page moves. */
@media (max-width: 767px) {
    .bgsp-rating__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 44px;
    }
}

/* Price */
.bgsp-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }

.bgsp-price__normal {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: var(--bg-teal-deep);
}

.bgsp-price__normal .woocommerce-Price-amount { font-size: inherit; color: inherit; }

.bgsp-price__regular {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #aaa;
    text-decoration: line-through;
}

.bgsp-price__sale {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: var(--bg-coral);
}

/* Delivery estimate widget */
.bg-delivery-estimate {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--bg-charcoal);
}
.bg-delivery-estimate__text strong {
    color: var(--bg-coral);
    font-weight: 700;
}

/* Info banners (basket + product page) */
.bg-info-banner {
    font-size: 14px;
    font-style: normal;
    color: var(--bg-teal-deep);
    text-align: center;
    background-color: #F0F5F4;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

/* Two banners side by side above basket items card */
.bg-banners-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.bg-banners-row .bg-info-banner {
    flex: 1;
    margin-bottom: 0;
}
@media (max-width: 640px) {
    .bg-banners-row {
        flex-direction: column;
        gap: 8px;
    }
}

/* Gift wrap badge — soft peach */
.bgsp-giftwrap {
    display: inline-block;
    background: #EBC2B4;
    color: var(--bg-charcoal);
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
    border-radius: 999px;
    padding: 4px 14px;
    margin-bottom: 14px;
}

/* Personalisation placeholder */
.bgsp-personalisation { background: var(--bg-stone-light); border-radius: 8px; padding: 16px; margin: 16px 0; }
.bgsp-personalisation__text { font-style: italic; color: #888; margin: 0; font-size: 14px; }

/* WooCommerce add to cart overrides */
.bgsp-details form.cart { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.bgsp-details .quantity { display: none !important; }

.bgsp-details .single_add_to_cart_button {
    width: 100%;
    background: var(--bg-teal-mid) !important;
    color: var(--bg-white) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    border-radius: 50px !important;
    padding: 17px !important;
    border: none !important;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.bgsp-details .single_add_to_cart_button:hover { background: var(--bg-teal-deep) !important; }

/* Trust strip */
.bgsp-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.bgsp-trust__item { display: flex; align-items: center; gap: 7px; color: var(--bg-teal-deep); font-family: 'Raleway', sans-serif; font-size: 13px; font-weight: 600; }
.bgsp-trust__item svg { flex-shrink: 0; }

/* Accordion sections container */
.bgsp-accordions { padding: 32px 0 64px; display: flex; flex-direction: column; gap: 8px; }

.bgsp-accordion__item { border-radius: 8px; overflow: hidden; }

.bgsp-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-teal-pastel) !important;
    padding: 16px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--bg-charcoal) !important;
    text-align: left;
    transition: background 0.15s;
}

.bgsp-accordion__header:hover { background: #97b5ad; }
.bgsp-accordion__header[aria-expanded="true"] { border-radius: 8px 8px 0 0; }

.bgsp-accordion__icon {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--bg-white);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.bgsp-accordion__header[aria-expanded="true"] .bgsp-accordion__icon { transform: rotate(180deg); }

.bgsp-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.bgsp-accordion__content {
    background: var(--bg-white);
    padding: 24px 16px;
    border: 1px solid var(--bg-stone);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.bgsp-accordion__content p { font-size: 16px; color: var(--bg-grey-sub); line-height: 1.8; margin: 0 0 1em; }
.bgsp-accordion__content li { font-size: 16px; color: var(--bg-grey-sub); line-height: 1.8; }
.bgsp-accordion__content ul { padding-left: 18px; margin: 0 0 0.5em; }

.bgsp-accordion__body font { display: block; margin-bottom: 4px; }
.bgsp-accordion__body br { display: none; }
.bgsp-accordion__body p { margin-bottom: 16px; }
.bgsp-accordion__content p:last-child { margin-bottom: 0; }
.bgsp-accordion__content h2, .bgsp-accordion__content h3 { font-family: 'Raleway', sans-serif; font-weight: 700; color: var(--bg-charcoal); }

.bgsp-accordion__content iframe {
    display: block;
    margin: 0 auto 1em;
    max-width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
}

/* Delivery list */
.bgsp-delivery-list { list-style: none; padding: 0; margin: 0; }
.bgsp-delivery-list li { padding: 12px 0; border-bottom: 1px solid var(--bg-stone-light); font-size: 15px; color: var(--bg-grey-sub); line-height: 1.6; }
.bgsp-delivery-list li:last-child { border-bottom: none; }

/* Reviews */
.bgsp-reviews-list { margin-bottom: 24px; }
.bgsp-review { padding: 20px 0; border-bottom: 1px solid var(--bg-stone-light); }
.bgsp-review:last-child { border-bottom: none; }
.bgsp-review__header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.bgsp-review__stars { display: flex; gap: 2px; }
.bgsp-review__author { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 14px; color: var(--bg-charcoal); }
.bgsp-review__date { font-size: 12px; color: #888; }
.bgsp-review__body { font-size: 14px; color: var(--bg-grey-sub); line-height: 1.7; margin: 0; }

/* Show more reviews */
.bgsp-show-more-reviews {
    display: block;
    margin: 16px auto 0;
    background: none;
    border: 1px solid var(--bg-teal-deep);
    color: var(--bg-teal-deep);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.bgsp-show-more-reviews:hover { background: var(--bg-teal-deep); color: var(--bg-white); }

/* Write a Review */
.bgsp-write-review { margin-top: 24px; border-top: 1px solid var(--bg-stone-light); padding-top: 24px; }

.bgsp-write-review__btn {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.bgsp-write-review__btn:hover { background: var(--bg-teal-mid); }

.bgsp-write-review__form { margin-top: 24px; }

.bgsp-review-form-title {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin: 0 0 16px;
}

.bgsp-write-review__form .comment-form p { margin: 0 0 14px; }

.bgsp-write-review__form label {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin-bottom: 4px;
}

.bgsp-write-review__form input[type="text"],
.bgsp-write-review__form input[type="email"],
.bgsp-write-review__form textarea,
.bgsp-write-review__form #comment {
    width: 100%;
    border: 1px solid var(--bg-stone);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
    color: var(--bg-charcoal);
}

.bgsp-submit-btn {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.bgsp-submit-btn:hover { background: var(--bg-teal-mid); }

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .bgsp-main { flex-direction: column; gap: 32px; padding-bottom: 24px; }
    .bgsp-gallery { flex: 0 0 100%; max-width: 100%; }
    .bgsp-details { flex: 0 0 100%; max-width: 100%; }

    /* Tighten accordion bottom so gap to Recently Viewed feels intentional not accidental */
    .bgsp-accordions { padding-bottom: 24px; }

    /* 1. Thumbnails — scrollable row, 58px tap area, no inner padding so border stays subtle */
    .bgsp-thumbs { gap: 10px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .bgsp-thumb { width: 58px; height: 58px; padding: 0; border: 1px solid var(--bg-stone-light); }
    .bgsp-thumb--active { border: 2px solid #0B6670; }

    /* 2. SKU — muted label, navy value */
    .bgsp-product-id { font-size: 13px; color: #1E3440; }
    .bgsp-product-id__label { color: var(--bg-grey-text); }

    /* 3. Price — teal, prominent, premium weight */
    .bgsp-price { margin: 14px 0; }
    .bgsp-price__normal {
        font-size: 27px;
        font-weight: 500;
        line-height: 1.2;
        color: #0B6670;
    }
    .bgsp-price__normal .woocommerce-Price-amount { font-size: inherit; color: inherit; }

}

/* Out-of-stock notice — soft coral pill (mobile + desktop) */
.bgsp-details .stock.out-of-stock {
    display: inline-block;
    background: #FCDFD8;
    border: 1px solid var(--bg-coral);
    color: var(--bg-teal-deep);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 18px;
    margin: 8px 0 14px;
    font-family: 'Raleway', sans-serif;
}

/* Desktop: OOS short-column fix, tighter section spacing, accordion gap */
@media (min-width: 901px) {
    .bgsp-wrap.is-oos .bgsp-main {
        padding-bottom: 16px;
    }
    .bgsp-recently-viewed-row {
        padding-bottom: 16px;
    }
    .bgsp-accordions {
        padding-bottom: 24px;
    }
}

@media (max-width: 640px) {
    .bgsp-title { font-size: 24px; }
    .bgsp-trust { gap: 10px; flex-direction: column; }
    .bgsp-trust__item { font-size: 13px; }
    .bgsp-accordion__header { font-size: 14px; padding: 14px 16px; }
    .bgsp-accordion__content { padding: 16px 10px; }
    .bgsp-carousel-row { padding: 24px 0; }
}

/* ════════════════════════════════════════════════════════════
   WOOCOMMERCE CART / BASKET PAGE
   ════════════════════════════════════════════════════════════ */

/* ── Hide "added to cart" success notice on the cart page ──── */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
    display: none !important;
}

/* ── Override global form constraint for cart ───────────── */
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ── Cart table ─────────────────────────────────────────── */
.woocommerce-cart-form table.woocommerce-cart-form__contents {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--bg-stone);
}

.woocommerce-cart-form table.woocommerce-cart-form__contents thead th {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    text-align: left;
    border: none;
}

.woocommerce-cart-form table.woocommerce-cart-form__contents thead th.product-remove  { width: 40px; }
.woocommerce-cart-form table.woocommerce-cart-form__contents thead th.product-thumbnail { width: 90px; }
.woocommerce-cart-form table.woocommerce-cart-form__contents thead th.product-price,
.woocommerce-cart-form table.woocommerce-cart-form__contents thead th.product-subtotal { text-align: right; }
.woocommerce-cart-form table.woocommerce-cart-form__contents thead th.product-quantity { text-align: center; }

/* Table body rows */
.woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr {
    border-bottom: 1px solid var(--bg-stone-light);
    transition: background-color 0.15s ease;
}

.woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr:last-child {
    border-bottom: none;
}

.woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr:hover {
    background-color: #FDFBF9;
}

.woocommerce-cart-form table.woocommerce-cart-form__contents tbody td {
    padding: 16px;
    vertical-align: middle;
    border: none;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: var(--bg-charcoal);
}

/* ── Remove column: hidden — button lives next to qty stepper */
.woocommerce-cart-form table th.product-remove,
.woocommerce-cart-form table td.product-remove {
    display: none !important;
}

/* ── Qty + inline remove wrapper ───────────────────────────── */
.qty-remove-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Inline remove — bin icon button */
.woocommerce-cart-form table a.remove--inline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-white) !important;
    color: #999 !important;
    border: 1px solid var(--bg-stone-border) !important;
    box-shadow: none !important;
    text-decoration: none;
    cursor: pointer;
    margin-left: 8px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.woocommerce-cart-form table a.remove--inline:hover {
    border-color: var(--bg-coral) !important;
    color: var(--bg-coral) !important;
    background: #fff7f5 !important;
}

.woocommerce-cart-form table a.remove--inline svg {
    display: block;
    pointer-events: none;
}

/* ── Product thumbnail ──────────────────────────────────── */
.woocommerce-cart-form table td.product-thumbnail {
    padding: 12px 16px;
}

.woocommerce-cart-form table td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bg-stone);
    display: block;
}

/* ── Product name ───────────────────────────────────────── */
.woocommerce-cart-form table td.product-name a {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--bg-charcoal);
    text-decoration: none;
    transition: color 0.15s ease;
}

.woocommerce-cart-form table td.product-name a:hover {
    color: var(--bg-teal-deep);
    text-decoration: underline;
}

/* ── Edit personalisation link ──────────────────────────── */
.bg-edit-pers-wrap {
    display: block;
    margin-top: 4px;
}

.bg-edit-pers-link {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--bg-coral) !important;
    text-decoration: none;
}

.bg-edit-pers-link:hover {
    color: var(--bg-teal-mid);
    text-decoration: underline;
}

.woocommerce-cart-form table td.product-name dl.variation {
    margin: 4px 0 0;
    padding: 0;
}

.woocommerce-cart-form table td.product-name dl.variation dt,
.woocommerce-cart-form table td.product-name dl.variation dd {
    display: inline;
    margin: 0;
    font-size: 14px;
    color: var(--bg-grey-text);
}

/* ── Price + subtotal columns ───────────────────────────── */
.woocommerce-cart-form table td.product-price,
.woocommerce-cart-form table td.product-subtotal {
    text-align: right;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--bg-teal-deep);
}

.woocommerce-cart-form table td.product-price .woocommerce-Price-amount,
.woocommerce-cart-form table td.product-subtotal .woocommerce-Price-amount {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    color: var(--bg-teal-deep) !important;
}

/* ── Quantity stepper ───────────────────────────────────── */
.woocommerce-cart-form table td.product-quantity {
    text-align: center;
}

.woocommerce-cart-form table td.product-quantity .quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--bg-teal-pastel);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-white);
}

.woocommerce-cart-form table td.product-quantity input.qty {
    width: 52px !important;
    text-align: center;
    border: none !important;
    border-left: 1.5px solid var(--bg-teal-pastel) !important;
    border-right: 1.5px solid var(--bg-teal-pastel) !important;
    border-radius: 0 !important;
    padding: 8px 4px !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bg-charcoal) !important;
    background: var(--bg-white) !important;
    box-shadow: none !important;
    -moz-appearance: textfield;
}

.woocommerce-cart-form table td.product-quantity input.qty::-webkit-inner-spin-button,
.woocommerce-cart-form table td.product-quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Coupon + Update Basket actions row ─────────────────── */
.woocommerce-cart-form table tfoot td.actions {
    padding: 20px 16px;
    background: var(--bg-off-white);
    border-top: 1px solid var(--bg-stone);
}

.woocommerce-cart-form table tfoot td.actions .coupon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code {
    width: 180px;
    padding: 10px 14px;
    border: 1.5px solid var(--bg-teal-pastel) !important;
    border-radius: 6px !important;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--bg-charcoal);
    background: var(--bg-white) !important;
    box-shadow: none !important;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code:focus {
    outline: none;
    border-color: var(--bg-teal-deep) !important;
    box-shadow: 0 0 0 2px rgba(11, 90, 102, 0.10) !important;
}

.woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code::placeholder {
    color: var(--bg-teal-pastel);
}

/* Apply Coupon button */
.woocommerce-cart-form table tfoot td.actions .coupon button[name="apply_coupon"] {
    background: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    border-color: var(--bg-teal-deep) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

.woocommerce-cart-form table tfoot td.actions .coupon button[name="apply_coupon"]:hover {
    background: var(--bg-teal-dark) !important;
    border-color: var(--bg-teal-dark) !important;
}

/* Update Basket button */
.woocommerce-cart-form table tfoot td.actions button[name="update_cart"] {
    float: right;
    background: transparent !important;
    color: var(--bg-teal-deep) !important;
    border: 1.5px solid var(--bg-teal-deep) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart-form table tfoot td.actions button[name="update_cart"]:hover {
    background: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    border-color: var(--bg-teal-deep) !important;
}

/* ── Coupon toggle (collapsed by default) ───────────────── */
.bg-coupon-toggle-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bg-teal-deep) !important;
    cursor: pointer;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 2px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
}
.bg-coupon-toggle-btn:hover { color: var(--bg-teal-mid) !important; background: transparent !important; }
.bg-coupon-toggle-btn:focus { outline: none !important; box-shadow: none !important; background: transparent !important; }
.bg-coupon-toggle-btn:focus-visible { outline: 2px solid var(--bg-teal-mid) !important; outline-offset: 2px; border-radius: 2px; }
.bg-coupon-fields { display: none; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.bg-coupon-fields.is-open { display: flex; }

/* ── Gift wrap row — tinted section block ───────────────── */
.bg-giftwrap-wrap {
    display: block !important;
    width: fit-content !important;
    min-width: 200px !important;
    background: #FEF4F1 !important;
    border: 1px solid #F0C4B8 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    margin-top: 8px !important;
}
.bg-giftwrap-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bg-charcoal) !important;
}
.bg-giftwrap-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Delivery duplication fix — hide fee row; radios show it ── */
.cart-collaterals .cart_totals table tr.bg-is-delivery-fee {
    display: none;
}

/* ── Cart totals box ────────────────────────────────────── */
.cart-collaterals {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

.cart-collaterals .cart_totals {
    width: 380px;
    background: var(--bg-off-white) !important;
    border: none !important;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

.cart-collaterals .cart_totals h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bg-stone);
}

.cart-collaterals .cart_totals table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.cart-collaterals .cart_totals table.shop_table tr th,
.cart-collaterals .cart_totals table.shop_table tr td {
    padding: 10px 0;
    border-top: 1px solid var(--bg-stone-light);
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: var(--bg-charcoal);
    vertical-align: middle;
}

.cart-collaterals .cart_totals table.shop_table tr:first-child th,
.cart-collaterals .cart_totals table.shop_table tr:first-child td {
    border-top: none;
}

.cart-collaterals .cart_totals table.shop_table tr th {
    font-weight: 600;
    text-align: left;
    padding-right: 12px;
}

.cart-collaterals .cart_totals table.shop_table tr td {
    text-align: right;
}

/* Shipping row */
.cart-collaterals .cart_totals table.shop_table tr.shipping th,
.cart-collaterals .cart_totals table.shop_table tr.shipping td {
    font-size: 14px;
    color: var(--bg-grey-text);
}

/* Order total row */
.cart-collaterals .cart_totals table.shop_table tr.order-total th,
.cart-collaterals .cart_totals table.shop_table tr.order-total td {
    font-weight: 800;
    font-size: 18px;
    color: var(--bg-teal-deep);
    padding-top: 14px;
    border-top: 2px solid var(--bg-stone);
}

.cart-collaterals .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount {
    font-family: 'Raleway', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: var(--bg-teal-deep) !important;
}

.cart-collaterals .cart_totals table.shop_table .woocommerce-Price-amount {
    font-family: 'Raleway', sans-serif !important;
}

/* ── Proceed to Checkout button ─────────────────────────── */
.cart-collaterals .cart_totals .wc-proceed-to-checkout {
    margin-top: 16px;
    padding-bottom: 0 !important;
}
.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    margin-bottom: 0 !important;
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background: #0B6670 !important;
    color: var(--bg-white) !important;
    border-color: #0B6670 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    border-radius: 8px !important;
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(11, 90, 102, 0.25);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cart-collaterals .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: #0a5560 !important;
    border-color: #0a5560 !important;
    color: var(--bg-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 90, 102, 0.35);
}

/* ── Empty basket message ───────────────────────────────── */
body.woocommerce-cart .cart-empty {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: var(--bg-grey-text);
    padding: 48px 0 16px;
}

body.woocommerce-cart .return-to-shop {
    text-align: center;
    margin-top: 8px;
}

body.woocommerce-cart .return-to-shop a.button {
    display: inline-block;
    background: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    border-color: var(--bg-teal-deep) !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    text-decoration: none;
}

body.woocommerce-cart .return-to-shop a.button:hover {
    background: var(--bg-teal-dark) !important;
    border-color: var(--bg-teal-dark) !important;
}

/* ── Responsive / mobile ────────────────────────────────── */
@media (max-width: 760px) {
    /* Hide column headers */
    .woocommerce-cart-form table.woocommerce-cart-form__contents thead {
        display: none;
    }

    /* Table + tbody as block so rows stack vertically */
    .woocommerce-cart-form table.woocommerce-cart-form__contents,
    .woocommerce-cart-form table.woocommerce-cart-form__contents tbody {
        display: block;
        width: 100%;
    }

    /* Tfoot actions: stack coupon + update button vertically */
    .woocommerce-cart-form table.woocommerce-cart-form__contents tfoot,
    .woocommerce-cart-form table.woocommerce-cart-form__contents tfoot tr {
        display: block;
        width: 100%;
    }

    .woocommerce-cart-form table tfoot td.actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code {
        width: 100%;
    }

    .woocommerce-cart-form table tfoot td.actions button[name="update_cart"] {
        float: none;
        width: 100%;
        text-align: center;
    }

    /* Cart totals: full width */
    .cart-collaterals {
        justify-content: stretch;
    }

    .cart-collaterals .cart_totals {
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════
   WooCommerce Checkout Page
   Design: Coastal Clean — teal var(--bg-teal-deep), coral var(--bg-coral), Raleway
   ════════════════════════════════════════════════════════════ */

/* ── Page background ─────────────────────────────────────── */
.woocommerce-checkout.woocommerce-page {
    background: var(--bg-off-white);
}

/* ── Two-column layout ───────────────────────────────────── */

/* Override any Astra / WooCommerce floats */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    float: none !important;
    width: auto !important;
}

/* Lift the 640px form constraint applied by the global form rule */
.woocommerce-checkout form.woocommerce-checkout {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Content container — give the grid room to breathe */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .ast-woocommerce-container {
    max-width: 1200px !important;
    width: 100% !important;
}

.woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto;
    gap: 40px;
    align-items: start;
}

.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1;
}

.woocommerce-checkout #order_review_heading {
    display: none;
}

.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 1;
}

.woocommerce-checkout #payment {
    grid-column: 1;
    grid-row: 2;
}

/* ── Section panels ──────────────────────────────────────── */
.woocommerce-checkout #order_review {
    float: none;
    width: auto;
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

/* ── Section headings ────────────────────────────────────── */
.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    margin: 0 0 20px;
    padding: 0 0 10px 0;
    border-left: none;
    border-bottom: 2px solid var(--bg-stone-border);
    line-height: 1.2;
}

.woocommerce-checkout h3#order_review_heading {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px 8px 0 0;
    border-bottom: none;
    padding: 20px 28px 0;
    margin-bottom: 0;
}

.woocommerce-checkout #order_review {
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    padding-top: 20px;
}

/* ── Form field labels ───────────────────────────────────── */
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-checkout form .form-row label {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-charcoal);
    display: block;
    margin-bottom: 6px;
}

.woocommerce-checkout form .form-row .required {
    color: var(--bg-coral);
    text-decoration: none;
}

/* ── Inputs, selects, textareas ──────────────────────────── */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--bg-charcoal);
    background: var(--bg-white);
    border: 1px solid #C8C3BE;
    border-radius: 8px;
    padding: 0 14px;
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.woocommerce-checkout form .form-row textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    min-height: 100px;
}

.woocommerce-checkout form .form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B5A66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Focus state */
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus {
    border-color: var(--bg-teal-mid);
    box-shadow: 0 0 0 3px rgba(31, 151, 168, 0.15);
}

/* Error state */
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select,
.woocommerce-checkout form .form-row.woocommerce-invalid textarea {
    border-color: var(--bg-coral);
    background: #fff7f5;
}

.woocommerce-checkout form .form-row.woocommerce-invalid label {
    color: #c0614c;
}

/* Inline validation message */
.woocommerce-checkout form .form-row .woocommerce-error,
.woocommerce-checkout form .form-row em.required {
    color: var(--bg-coral);
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
}

/* ── Two-col billing grid (first name / last name) ───────── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* ── Ship to different address toggle ────────────────────── */
.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--bg-charcoal);
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--bg-teal-deep);
    margin: 0;
    flex-shrink: 0;
}

/* ── Order summary table ─────────────────────────────────── */
.woocommerce-checkout table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Raleway', sans-serif;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: 10px 0;
    border-top: 1px solid var(--bg-stone-light);
    font-size: 14px;
    color: var(--bg-charcoal);
    vertical-align: middle;
}

.woocommerce-checkout table.shop_table tfoot tr:first-child td,
.woocommerce-checkout table.shop_table tfoot tr:first-child th {
    border-top: 1px solid var(--bg-stone-border);
}

/* Product name column */
.woocommerce-checkout table.shop_table .product-name {
    font-weight: 600;
}

/* Quantity badge */
.woocommerce-checkout table.shop_table .product-name .product-quantity {
    display: inline-block;
    background: var(--bg-stone-light);
    color: var(--bg-teal-deep);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}


/* ── Payment section ─────────────────────────────────────── */
#payment {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px;
    padding: 28px;
    margin-top: 0;
}

#payment ul.payment_methods {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid var(--bg-stone-light);
}

#payment ul.payment_methods li {
    padding: 12px 0;
    border-top: 1px solid var(--bg-stone-light);
}

#payment ul.payment_methods li:first-child {
    border-top: none;
}

#payment ul.payment_methods li label {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-charcoal);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#payment ul.payment_methods li input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--bg-teal-deep);
    margin: 0;
    flex-shrink: 0;
}

#payment .payment_box {
    background: var(--bg-off-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 10px 0 0;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--bg-grey-text);
}

/* ── WooCommerce notices on checkout ─────────────────────── */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* ── Mobile: single column ───────────────────────────────── */
@media ( max-width: 767px ) {
    .woocommerce-checkout form.woocommerce-checkout {
        grid-template-columns: 1fr;
    }

    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: 2;
    }

    .woocommerce-checkout #payment {
        grid-column: 1;
        grid-row: 3;
    }

    /* ── Give the card fields their WIDTH back ───────────────────
       Reported from a real iPhone on 2 September: "there is only room
       for 8 numbers". Commit 9cbc1c5 fixed the HEIGHT of these fields
       and that part was right; the width had never been looked at.

       Nothing here is one bad rule. Measured at a 375px viewport, the
       Stripe container ended up 111.41px wide — 30% of the screen —
       because six nested boxes each take their own horizontal padding:

         .ast-container      16+16   375  -> 343
         .entry-content      16+16   343  -> 311
         #order_review       28+28   311  -> 261
         #payment            28+28   261  -> 203
         .payment_box        14+14   203  -> 175
         fieldset            30+30   175  -> 111   <- the worst single one

       That last one is Astra's generic `fieldset { padding: 30px }`
       from its inline CSS, landing on the gateway's own
       #wc-stripe-upe-form. It takes 60px out of a box that only had
       173px left, and serves no purpose on a payment form.

       ⚠️ bg-checkout.css ALREADY TRIES TO DO THIS and cannot win. Its
       <=767px block sets #order_review and #payment to 16px, but
       style.css carries `.woocommerce-checkout #order_review` (1,1,0)
       and a later `#payment` (1,0,0), so it loses on specificity and
       on source order. The rules therefore live HERE, in the sheet
       that was beating them.

       ⛔ Scoped to <=767px. Desktop and tablet already give the
       container ~356-360px and must not move. */
    /* !important only because bg-checkout.css carries an !important 24px
       here; matched rather than escalated. */
    .woocommerce-checkout #order_review {
        padding: 14px !important;
    }
    .woocommerce-checkout #payment {
        padding: 14px 8px;
    }
    /* `div.payment_box`, not `.payment_box` — WooCommerce's own
       `.woocommerce-checkout #payment div.payment_box { padding: 1em }`
       carries that element selector and outranks a class-only rule. */
    .woocommerce-checkout #payment div.payment_box {
        padding: 12px 8px;
    }
    .woocommerce-checkout #payment fieldset.wc-payment-form,
    .woocommerce-checkout #payment #wc-stripe-upe-form {
        padding: 0;
        margin: 0;
        border: 0;
    }

    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    #payment #place_order {
        height: 48px;
        font-size: 15px;
    }
}


/* ════════════════════════════════════════════════════════════
   Checkout visual polish — warmth & on-brand styling
   ════════════════════════════════════════════════════════════ */

/* 1 ── Header separation ────────────────────────────────── */
.woocommerce-checkout .site-header,
.woocommerce-checkout #masthead,
.woocommerce-checkout .main-header-bar {
    background: var(--bg-white) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.woocommerce-checkout #masthead::before,
.woocommerce-checkout .site-header::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--bg-teal-deep);
    width: 100%;
}

/* 1 ── Page background & title ───────────────────────────── */
.woocommerce-checkout.woocommerce-page {
    background: var(--bg-off-white) !important;
}

.woocommerce-checkout .entry-content,
.woocommerce-checkout .ast-woocommerce-container {
    background: var(--bg-off-white) !important;
}

.woocommerce-checkout h1.entry-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--bg-teal-deep);
    letter-spacing: -0.3px;
}

/* 2 ── Card panels — teal top accent ────────────────────── */
.bg-step-1,
.woocommerce-checkout #order_review,
.woocommerce-checkout #payment {
    border-top: 4px solid var(--bg-teal-deep) !important;
    border-radius: 8px !important;
    background: var(--bg-white) !important;
    box-shadow: 0 2px 12px rgba(11, 90, 102, 0.06) !important;
}

/* 3 ── Input focus — teal glow ───────────────────────────── */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: var(--bg-teal-mid) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 151, 168, 0.12) !important;
}

/* 4 ── Field labels ──────────────────────────────────────── */
.woocommerce-checkout label {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 600 !important;
    color: var(--bg-charcoal) !important;
}

.woocommerce-checkout label .required,
.woocommerce-checkout .form-row .required {
    color: var(--bg-coral) !important;
    font-weight: 700 !important;
}

/* 7 ── Section headings consistency ─────────────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review h3,
.woocommerce-checkout #payment h3 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--bg-teal-deep) !important;
    border-left: none !important;
    padding-left: 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--bg-stone-border) !important;
    margin-bottom: 24px !important;
}

.woocommerce-checkout .bg-footer h3,
.woocommerce-checkout .bg-footer__col h3,
.woocommerce-checkout .bg-footer__heading {
    color: #ffffff !important;
    border-bottom: none !important;
}

/* 8 ── Coupon toggle link ────────────────────────────────── */
.woocommerce-checkout .showcoupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle a {
    color: var(--bg-teal-mid);
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
}

/* ── Accessibility font sizes — cart ─────────────────────── */
.woocommerce-cart .cart_item td {
    font-size: 15px !important;
}
.woocommerce-cart .cart_item .product-name a {
    font-size: 15px !important;
}
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
    font-size: 15px !important;
}

/* ── Accessibility font sizes — checkout ─────────────────── */
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    font-size: 15px !important;
}
.woocommerce-checkout label {
    font-size: 14px !important;
}

/* ── Checkout fields at phone width ──────────────────────────
   Reported 25 August: the card number, expiry and CVC are cramped on a
   phone. Those three fields are drawn by STRIPE inside an iframe, so their
   internal CSS is not ours — but the Appearance object that styles them IS
   derived from this stylesheet, and that is what this block changes.

   HOW, precisely (gateway 10.7.0, build/upe-classic.js, selectors
   `classicCheckout`): on every page load the gateway deep-clones exactly ONE
   element — #billing_first_name — into a 1px clipped div inside
   .woocommerce-billing-fields__field-wrapper, rewrites the clone's id, reads
   its computed style through a fixed property allowlist, and sends that to
   Stripe as the `.Input` rule. The server-side path is gone:
   save_appearance_ajax() is @deprecated 10.5.0 and the wc_stripe_appearance
   transient is declared but never read.

   ⚠️ `height` IS NOT IN THAT ALLOWLIST — padding, font-size and line-height
   are. Our fields got their 44px from `height` with `padding: 0 14px`, so
   Stripe was handed ZERO vertical padding and sized its card fields from the
   line-height alone. That is the actual cause of the cramping: the fix is to
   give the fields real vertical padding, which Stripe does copy.

   16px is also the threshold below which iOS zooms the page on focus, so
   15px was making the layout jump the moment a customer tapped the field.

   `font-size` needs !important only to outrank the accessibility rule just
   above; padding-top/bottom are set instead of the `padding` shorthand so the
   select keeps its 36px right padding for the dropdown arrow.
   ⛔ Presentation only, and scoped to <=767px so desktop cannot move. */
@media (max-width: 767px) {
    .woocommerce-checkout form .form-row input.input-text,
    .woocommerce-checkout form .form-row select,
    .woocommerce-checkout form .form-row textarea {
        font-size: 16px !important;
        line-height: 20px;
        padding-top: 13px;
        padding-bottom: 13px;
        height: auto;
    }
    .woocommerce-checkout form .form-row textarea {
        min-height: 100px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE
   ═══════════════════════════════════════════════════════════════ */

/* No sidebar — single-column layout */
.bg-search-layout {
    display: block !important;
}
#bg-search-filters {
    display: none !important;
}

/* Page background */
.bg-search-results-page.woocommerce-page {
    background-color: var(--bg-off-white);
}

/* Heading: "Search results for …" */
.bg-search-results-page h1.entry-title,
.bg-search-results-page .woocommerce-products-header__title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    color: var(--bg-teal-deep) !important;
    margin-bottom: 8px !important;
}

/* Result count */
.bg-search-results-page .woocommerce-result-count {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--bg-teal-deep);
}

/* Ordering dropdown */
.bg-search-results-page .woocommerce-ordering select {
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    border: 1px solid #C8C3BE;
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--bg-charcoal);
    outline: none;
}

/* ── Mobile ≤768px ───────────────────────────────────────────── */
@media ( max-width: 768px ) {
    .bg-search-results-page h1.entry-title,
    .bg-search-results-page .woocommerce-products-header__title {
        font-size: 22px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MY ACCOUNT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Page background & wrapper ───────────────────────────────── */
.woocommerce-account .woocommerce {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.woocommerce-account.woocommerce-page {
    background-color: var(--bg-off-white);
}

/* ── Two-column layout ───────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: 240px;
    flex-shrink: 0;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
}

.woocommerce-account .woocommerce {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

/* ── Navigation sidebar card ─────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px;
    padding: 8px 0;
    position: sticky;
    top: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-charcoal);
    text-decoration: none;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    transition: color 0.15s, background 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--bg-teal-mid);
    background: #F5F9FA;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    color: var(--bg-teal-deep) !important;
    background: var(--bg-teal-pale) !important;
    border-left: 3px solid var(--bg-teal-deep) !important;
    font-weight: 700 !important;
}

/* Logout separator + coral colour */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px;
    border-top: 1px solid var(--bg-stone-border);
    padding-top: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--bg-coral);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: #D4614A;
    background: #fdf5f3;
}

/* ── Content area card ───────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px;
    padding: 32px;
}

/* Section headings */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--bg-teal-deep);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 24px;
}

/* ── Dashboard welcome message ───────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content p {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: var(--bg-charcoal);
    line-height: 1.65;
}

/* Dashboard quick-link buttons */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-account .woocommerce-MyAccount-content p > a.button {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    background: transparent;
    border: 2px solid var(--bg-teal-deep);
    border-radius: 8px;
    padding: 9px 20px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    margin: 4px 6px 4px 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content p > a.button:hover {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
}

/* ── Orders table ────────────────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
}

.woocommerce-account .woocommerce-orders-table thead th {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    text-align: left;
    border: none;
}

.woocommerce-account .woocommerce-orders-table tbody tr {
    border-bottom: 1px solid var(--bg-stone-light);
    transition: background 0.12s;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover {
    background: #FDFBF9;
}

.woocommerce-account .woocommerce-orders-table tbody td {
    padding: 16px 14px;
    color: var(--bg-charcoal);
    vertical-align: middle;
    border: none !important;
    border-bottom: 1px solid var(--bg-stone-light) !important;
}

/* Order number link */
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
    color: var(--bg-teal-deep);
    font-weight: 700;
    text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    text-decoration: underline;
}

/* Status badges */
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark,
.woocommerce-account .order-status {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 12px;
    background: #999;
    color: var(--bg-white);
}

.woocommerce-account mark.order-status.status-processing { background: var(--bg-teal-mid); color: var(--bg-white); }
.woocommerce-account mark.order-status.status-completed  { background: #4A9B7F; color: var(--bg-white); }
.woocommerce-account mark.order-status.status-cancelled  { background: #999999; color: var(--bg-white); }
.woocommerce-account mark.order-status.status-on-hold    { background: var(--bg-coral); color: var(--bg-white); }
.woocommerce-account mark.order-status.status-pending    { background: #c8a96e; color: var(--bg-white); }
.woocommerce-account mark.order-status.status-refunded   { background: #888;    color: var(--bg-white); }

/* View button */
.woocommerce-account .woocommerce-orders-table .woocommerce-button.button {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    background: transparent;
    border: 2px solid var(--bg-teal-deep);
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-button.button:hover {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
}

/* Empty orders state */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
    background: var(--bg-off-white);
    border: none;
    border-left: 4px solid var(--bg-teal-mid);
    border-radius: 6px;
    padding: 16px 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    color: var(--bg-charcoal);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before {
    display: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button {
    margin: 0;
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    border-color: var(--bg-teal-deep);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button:hover {
    background: var(--bg-teal-dark);
    border-color: var(--bg-teal-dark);
    color: var(--bg-white);
}

/* ── Account details form ────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields label {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-charcoal);
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--bg-charcoal);
    background: var(--bg-white);
    border: 1px solid #C8C3BE;
    border-radius: 8px;
    padding: 0 14px;
    height: 44px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    border-color: var(--bg-teal-mid);
    box-shadow: 0 0 0 3px rgba(31, 151, 168, 0.12);
}

.woocommerce-account .woocommerce-MyAccount-content .required {
    color: var(--bg-coral);
    text-decoration: none;
}

/* Save / submit button */
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
    background: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 28px !important;
    cursor: pointer !important;
    transition: background 0.15s, transform 0.15s !important;
}

.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
    background: var(--bg-teal-dark) !important;
    transform: translateY(-1px) !important;
}

/* ── Page titles ─────────────────────────────────────────────── */
.woocommerce-account h1.entry-title,
.woocommerce-account h2.entry-title {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    color: var(--bg-teal-deep) !important;
    margin-bottom: 24px !important;
}

/* ── Mobile ≤768px ───────────────────────────────────────────── */
@media ( max-width: 768px ) {

    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 0;
        padding: 16px 16px 48px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        width: 100%;
        position: static;
        border-radius: 8px 8px 0 0;
        border-bottom: none;
        padding: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        flex-shrink: 0;
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 13px 16px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left: none;
        border-bottom-color: var(--bg-teal-deep);
        background: transparent;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        color: var(--bg-coral);
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        border-radius: 0 0 8px 8px;
        padding: 20px 16px;
    }

    .woocommerce-MyAccount-content .u-columns,
    .woocommerce-MyAccount-content .col2-set {
        grid-template-columns: 1fr !important;
    }
}

/* ── Dashboard — recent order + help ─────────────────────────── */
.bg-myaccount-recent-order {
    background: #fff;
    border: 1px solid var(--bg-stone-border);
    border-left: 4px solid var(--bg-teal-deep);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.bg-myaccount-recent-order__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bg-grey-text);
    margin-bottom: 4px;
}
.bg-myaccount-recent-order__order {
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
}
.bg-myaccount-recent-order__order a {
    font-size: 16px;
}
.bg-myaccount-recent-order__meta {
    font-size: 14px;
    color: var(--bg-charcoal);
    margin-top: 4px;
}
.bg-myaccount-recent-order__status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--bg-stone-light);
    color: var(--bg-charcoal);
}
.bg-myaccount-recent-order__view {
    font-size: 13px;
    color: var(--bg-coral) !important;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    display: inline-block;
}
.bg-myaccount-help {
    text-align: center;
    font-size: 14px;
    color: var(--bg-grey-text);
    padding: 12px 0;
}
.bg-myaccount-help a {
    color: var(--bg-teal-deep) !important;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PAGE — MOBILE OVERRIDES (standalone, last in file)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bgcp-page {
        padding: 12px 0 16px 0 !important;
        margin: 0 !important;
    }
    .bgcp-inner {
        padding: 0 12px !important;
    }
    .bgcp-breadcrumb {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        font-size: 13px !important;
    }
    .bgcp-title {
        font-size: 24px !important;
        margin-top: 4px !important;
        margin-bottom: 12px !important;
    }
    .bgcp-pill {
        font-size: 13px !important;
        padding: 8px 16px !important;
        height: auto !important;
        min-height: 36px !important;
    }
    .bgcp-grid {
        margin-bottom: 16px !important;
        padding-bottom: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PAGE — ASTRA WRAPPER OVERRIDES (standalone, last in file)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    body.tax-product_cat #content,
    body.tax-product_cat .site-content,
    body.tax-product_cat .ast-container,
    body.tax-product_cat .content-area,
    body.tax-product_cat .entry-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PARENT PAGE — MOBILE OVERRIDES (standalone, last in file)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Fix 1 — Astra wrapper top spacing */
    .page-template-template-category-parent #content,
    .page-template-template-category-parent .site-content,
    .page-template-template-category-parent .ast-container,
    .page-template-template-category-parent .entry-content,
    .page-template-template-category-parent #primary {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* Fix 1 — page wrapper and inner */
    .bg-cat-parent {
        padding: 12px 0 32px 0 !important;
    }
    .bg-cat-parent__inner {
        padding: 0 12px !important;
    }
    .bg-cat-parent__breadcrumb {
        margin-bottom: 6px !important;
        font-size: 12px !important;
    }
    .bg-cat-parent__title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }
    /* Fix 2 — pills with higher specificity */
    h2.bg-cat-section__pill,
    .bg-cat-section .bg-cat-section__pill {
        font-size: 15px !important;
        padding: 8px 20px !important;
        min-height: 36px !important;
        height: auto !important;
        line-height: 1.4 !important;
    }
}

/* ════════════════════════════════════════════════════════════
   CATEGORY PRODUCTS — DESCRIPTION EXPANDER + FILTER FIXES
   ════════════════════════════════════════════════════════════ */

/* Desktop: show full description, hide toggle */
.bgcp-desc-toggle { display: none; }
.bgcp-desc-text { max-height: none !important; overflow: visible !important; max-width: 100%; }

@media (max-width: 900px) {
    /* FIX 1 — Description expander */
    .bgcp-desc-text {
        max-height: 3.2em !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    .bgcp-desc-text.is-expanded {
        max-height: 400px !important;
    }
    .bgcp-desc-toggle {
        display: inline-flex !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: var(--bg-teal-deep) !important;
        font-size: 13px !important;
        padding: 4px 0 !important;
        cursor: pointer !important;
        font-family: 'Raleway', sans-serif !important;
        font-weight: 600 !important;
        text-decoration: underline !important;
    }
    /* Filter box */
    .bgcp-filters {
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }
    .bgcp-pill {
        font-size: 13px !important;
        padding: 5px 10px !important;
        height: auto !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
    }
    /* FIX 1 — Price pill row scrolls horizontally instead of wrapping.

       `width: 100%` is what makes the rest of this rule do anything. The group
       is a flex item of .bgcp-filters, which goes flex-direction: column at
       <=640px, so its width is decided on the CROSS axis: not stretched, hence
       sized to fit-content, and fit-content cannot fall below min-content.
       Because the group itself is flex-wrap: nowrap its min-content width IS
       its max-content width, so it sized to its own contents — measured 380px
       at a 375px viewport, inside a 295px content box. It overflowed by 85px,
       .bgcp-filters { overflow: hidden } sliced "£50+" clean off, and nothing
       could be scrolled to it because scrollWidth and clientWidth were both
       380: the element was exactly as wide as its content, so overflow-x: auto
       had nothing to do. (min-width: 0 does not help — that governs shrinking
       along the MAIN axis, and here the main axis is vertical.)

       Pinning the width to the container makes scrollWidth exceed clientWidth,
       and the scroller this rule always meant to be now works. A pill only
       part-visible at the right edge is then correct: it is how a scroller
       signals there is more. */
    .bgcp-filter-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
    }
    .bgcp-filter-group::-webkit-scrollbar {
        display: none !important;
    }
    /* FIX 2 — Sort dropdown compact */
    .bgcp-toolbar__sort {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    .bgcp-toolbar__sort label {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    .bgcp-toolbar__sort select {
        font-size: 13px !important;
        padding: 6px 10px !important;
        height: auto !important;
        flex: 1 !important;
    }
    /* FIX 1 — Remove Astra wrapper shadow/border (page template variant) */
    .page-template-template-category-products .ast-container,
    .page-template-template-category-products #primary,
    .page-template-template-category-products #content {
        box-shadow: none !important;
        border: none !important;
    }
    /* FIX 1 — Remove Astra wrapper shadow/border (taxonomy archive variant) */
    body.tax-product_cat #primary,
    body.tax-product_cat #content,
    body.tax-product_cat .ast-container {
        box-shadow: none !important;
        border: none !important;
    }
    /* FIX 1 — Kill ast-separate-container content card shadow on category pages */
    body.ast-separate-container.tax-product_cat #primary,
    body.ast-separate-container.page-template-template-category-products #primary {
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }
}

@media (max-width: 900px) {
    body.tax-product_cat .ast-container .bgcp-page {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    body.tax-product_cat .bgcp-filter-group {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        width: 100% !important;
        padding-bottom: 4px !important;
    }
    body.tax-product_cat .bgcp-filter-label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }
    body.tax-product_cat .bgcp-pill {
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   MOBILE — Filter Drawer + Mobile Toolbar
   v1.1.2
   ============================================================ */

/* Ensure drawer + mobile toolbar never show on desktop */
.bgcp-mobile-toolbar { display: none; }
.bgcp-filter-drawer  { display: none; }
.bgcp-sort-pill      { display: none; }

@media (max-width: 900px) {
    .bgcp-mobile-toolbar          { display: flex         !important; }
    .bgcp-filter-drawer.is-open   { display: block        !important; }
    .bgcp-sort-pill               { display: inline-flex  !important; }
    .bgcp-filters--desktop        { display: none         !important; }
    .bgcp-desktop-only            { display: none         !important; }
}

@media (max-width: 900px) {
    /* Mobile toolbar */
    .bgcp-mobile-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    /* Filter button */
    .bgcp-mobile-filter-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        border: 1.5px solid var(--bg-teal-deep) !important;
        border-radius: 50px !important;
        background: var(--bg-white) !important;
        color: var(--bg-teal-deep) !important;
        font-family: Raleway, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }

    .bgcp-mobile-filter-btn svg {
        flex-shrink: 0 !important;
    }

    /* Mobile sort dropdown */
    .bgcp-mobile-sort {
        flex: 1 !important;
        text-align: right !important;
    }

    .bgcp-sort-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        border: 1.5px solid var(--bg-teal-deep) !important;
        border-radius: 50px !important;
        background: var(--bg-white) !important;
        position: relative !important;
        height: 40px !important;
        box-sizing: border-box !important;
    }

    .bgcp-sort-pill select {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
    }

    .bgcp-sort-pill-label {
        color: var(--bg-teal-deep) !important;
        font-family: Raleway, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    .bgcp-mobile-sort .bgcp-toolbar__sort {
        padding: 8px 16px !important;
        border: 1.5px solid var(--bg-teal-deep) !important;
        border-radius: 50px !important;
        background: var(--bg-white) !important;
        color: var(--bg-teal-deep) !important;
        font-family: Raleway, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B5A66' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 32px !important;
    }

    /* Scroll lock when drawer open */
    body.bgcp-drawer-open {
        overflow: hidden !important;
    }

    /* Drawer overlay */
    .bgcp-filter-drawer {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
    }

    .bgcp-filter-drawer.is-open {
        display: block !important;
    }

    .bgcp-filter-drawer__overlay {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 1 !important;
    }

    /* Drawer panel */
    .bgcp-filter-drawer__panel {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-white) !important;
        border-radius: 16px 16px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: 85vh !important;
        overflow: hidden !important;
        animation: bgcp-slide-up 0.3s ease !important;
        z-index: 2 !important;
    }

    @keyframes bgcp-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Drawer header */
    .bgcp-filter-drawer__header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }

    .bgcp-filter-drawer__title {
        font-family: Raleway, sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--bg-teal-deep) !important;
    }

    .bgcp-filter-drawer__close {
        background: #f2f2f2 !important;
        border: none !important;
        border-radius: 50% !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #333 !important;
    }

    /* Drawer body */
    .bgcp-filter-drawer__body {
        overflow-y: auto !important;
        padding: 8px 20px !important;
        flex: 1 !important;
    }

    /* Accordion section */
    .bgcp-filter-drawer__section {
        padding: 4px 0 !important;
    }

    .bgcp-filter-drawer__section-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: none !important;
        border: none !important;
        padding: 14px 0 !important;
        font-family: Raleway, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #333 !important;
        cursor: pointer !important;
        border-bottom: 1px dotted #ddd !important;
    }

    .bgcp-filter-drawer__section-toggle svg {
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    .bgcp-filter-drawer__section-toggle[aria-expanded="false"] svg {
        transform: rotate(-90deg) !important;
    }

    .bgcp-filter-drawer__pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 0 8px !important;
    }

    .bgcp-filter-drawer__pills.is-collapsed {
        display: none !important;
    }

    .bgcp-filter-divider {
        height: 1px !important;
        background: #eee !important;
        margin: 4px 0 !important;
    }

    /* Drawer footer */
    .bgcp-filter-drawer__footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px 20px !important;
        border-top: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }

    .bgcp-filter-drawer__clear {
        display: block !important;
        text-align: center !important;
        padding: 12px !important;
        border: 1.5px solid #ddd !important;
        border-radius: 50px !important;
        color: #333 !important;
        font-family: Raleway, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .bgcp-filter-drawer__view {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        background: var(--bg-teal-deep) !important;
        color: var(--bg-white) !important;
        border: none !important;
        border-radius: 50px !important;
        font-family: Raleway, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        text-align: center !important;
    }

    .bgcp-filter-drawer__pills .bgcp-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
    }

    /* Hide current product name from breadcrumb on mobile — Home › Category is enough */
    .bgsp-breadcrumb__current,
    .bgsp-breadcrumb__current + [aria-hidden="true"] {
        display: none !important;
    }

    /* Breadcrumb spacing from header */
    .bgsp-breadcrumb {
        margin-top: 16px !important;
        padding-top: 4px !important;
    }

    /* Hide trailing separator after last visible breadcrumb item */
    .bgsp-breadcrumb__current ~ [aria-hidden="true"],
    .bgsp-breadcrumb [aria-hidden="true"]:last-of-type {
        display: none !important;
    }
}

/* ── Category page: tighter mobile vertical spacing ─────────── */
@media (max-width: 900px) {
    .bgcp-page         { padding-top: 16px  !important; } /* was 32px */
    .bgcp-breadcrumb   { margin-bottom: 8px !important; } /* was 20px */
    .bgcp-header       { margin-bottom: 12px !important; } /* was 24px */
    .bgcp-mobile-toolbar { margin-bottom: 8px !important; } /* was 16px */
    .bgcp-toolbar      { margin-bottom: 10px !important; } /* was 20px */
}

/* Preview close button — only visible when preview is active */
.bgsp-preview-close {
    display: none !important;
}

.bgsp-gallery--preview-active .bgsp-preview-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.65) !important;
    border: 2px solid rgba(255,255,255,0.8) !important;
    color: var(--bg-white) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
}

@media (max-width: 900px) {
    /* Single product page — full width fix (same approach as category page) */
    body.single-product .ast-container .bgsp-wrap {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Gallery arrows — smaller and more subtle on mobile */
    .bgsp-gallery__arrow {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        opacity: 0.75 !important;
    }

    /* Thumbs — 58px on mobile */
    .bgsp-thumb {
        width: 58px !important;
        height: 58px !important;
    }

    /* Trust bar — two items on one line */
    .bgsp-trust {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 16px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .bgsp-trust__item {
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* Tighten spacing around add to cart / personalisation area */
    .bgsp-details .cart,
    .bgsp-details form.cart {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .bgsp-details .single_add_to_cart_button,
    .bgsp-details button.single_add_to_cart_button {
        margin-top: 8px !important;
    }

    .bg-preview-btn {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .bgsp-trust {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .bgsp-details .form-row,
    .bgsp-details p.form-row {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    /* Centre Write a Review button */
    .bgsp-review-write-wrap {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* .bgsp-write-review holds the button AND the review form. Making it a
       row flex container to centre the button also put the form BESIDE the
       button as a second column: measured at 375px the row split 88px /
       193px, which turned "Hide Review Form" into an 88x710px vertical bar
       and squeezed the form into a 193px column. It was invisible until the
       form was opened, because the form carries `hidden` until then.
       Stacking the column keeps the button centred and gives the form the
       full width. */
    .bgsp-write-review {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bgsp-write-review__form {
        align-self: stretch !important;
    }
    .bgsp-write-review__btn {
        white-space: nowrap !important;
    }

    /* The consent checkbox is followed by an inline label, but
       .bgsp-write-review__form label sets display: block for the real field
       labels, which dropped this one onto its own line 23px below its box.
       Put the pair back on one line without disturbing the other labels. */
    .bgsp-write-review__form .comment-form-cookies-consent {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .bgsp-write-review__form .comment-form-cookies-consent input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin: 3px 0 0 !important;
    }
    .bgsp-write-review__form .comment-form-cookies-consent label {
        display: inline !important;
        font-weight: 400 !important;
        margin-bottom: 0 !important;
    }

    /* Coupon + update on one line */
    .woocommerce-cart-form table tfoot td.actions .coupon {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code {
        flex: 1 !important;
        width: auto !important;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Update basket full width below coupon row */
    .woocommerce-cart-form table tfoot td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .woocommerce-cart-form table tfoot td.actions button[name="update_cart"] {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Cart totals delivery section */
    .cart_totals table.shop_table tr.shipping th,
    .cart_totals table.shop_table tr.shipping td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 4px 0 !important;
    }

    .cart_totals .woocommerce-shipping-methods {
        text-align: left !important;
    }

    .cart_totals .woocommerce-shipping-methods li {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 0 !important;
    }

    /* Delivery row in cart totals */
    .cart_totals table tr.bg-delivery-row th,
    .cart_totals table tr.bg-delivery-row td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 4px 0 !important;
    }

    .cart_totals table tr.bg-delivery-row td ul.woocommerce-shipping-methods {
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cart_totals table tr.bg-delivery-row td ul.woocommerce-shipping-methods li {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 0 !important;
        list-style: none !important;
    }

    .cart_totals table tr.bg-delivery-row th {
        font-size: 0 !important;
    }

    .cart_totals table tr.bg-delivery-row th::after {
        content: 'Delivery' !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #333 !important;
    }

    /* Remove WooCommerce auto ::before label on delivery row td */
    .cart_totals table tr.bg-delivery-row td::before {
        content: '' !important;
        display: none !important;
    }

    /* Cart item — simple flex card layout */
    .woocommerce-cart-form table.woocommerce-cart-form__contents tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px 12px !important;
        padding: 16px !important;
        border-bottom: 1px solid var(--bg-stone) !important;
        background: var(--bg-white) !important;
    }

    .woocommerce-cart-form table tbody td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }

    .woocommerce-cart-form table tbody td.product-remove {
        display: none !important;
    }

    .woocommerce-cart-form table tbody td.product-thumbnail {
        flex: 0 0 72px !important;
        width: 72px !important;
    }

    .woocommerce-cart-form table tbody td.product-name {
        flex: 1 1 calc(100% - 84px) !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-align: left !important;
    }

    .woocommerce-cart-form table tbody td.product-name a {
        font-weight: 700 !important;
        font-size: 14px !important;
        display: block !important;
        margin-bottom: 4px !important;
    }

    .woocommerce-cart-form table tbody td.product-name::before {
        content: '' !important;
        display: none !important;
    }

    /* Personalisation fields — full width below thumbnail+name */
    .woocommerce-cart-form table tbody td.product-name dl {
        width: calc(100vw - 64px) !important;
        margin-top: 8px !important;
        font-size: 13px !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 2px 12px !important;
    }

    .woocommerce-cart-form table tbody td.product-name dl dt {
        color: var(--bg-teal-deep) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        padding: 1px 0 !important;
    }

    .woocommerce-cart-form table tbody td.product-name dl dd {
        color: #444 !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        word-break: break-word !important;
    }

    /* Price, quantity, subtotal — full width row each */
    .woocommerce-cart-form table tbody td.product-price,
    .woocommerce-cart-form table tbody td.product-quantity,
    .woocommerce-cart-form table tbody td.product-subtotal {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 14px !important;
    }

    .woocommerce-cart-form table tbody td.product-price::before {
        content: 'Price' !important;
        font-weight: 400 !important;
        color: var(--bg-grey-text) !important;
        font-size: 13px !important;
    }

    .woocommerce-cart-form table tbody td.product-subtotal::before {
        content: 'Subtotal' !important;
        font-weight: 400 !important;
        color: var(--bg-grey-text) !important;
        font-size: 13px !important;
    }

    .woocommerce-cart-form table tbody td.product-quantity::before {
        content: 'Quantity' !important;
        font-weight: 400 !important;
        color: var(--bg-grey-text) !important;
        font-size: 13px !important;
    }

    .woocommerce-cart-form table tbody td.product-quantity .quantity {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .woocommerce-cart-form table tbody td.product-quantity input.qty {
        width: 56px !important;
        text-align: center !important;
    }

    /* Gift wrap */
    .bg-giftwrap-wrap {
        margin: 6px 0 !important;
        font-size: 13px !important;
    }

    .bg-giftwrap-label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 13px !important;
    }

    .bg-giftwrap-wrap input[type="text"] {
        max-width: 200px !important;
        font-size: 13px !important;
        padding: 5px 8px !important;
        margin-top: 4px !important;
    }

    /* Coupon + update basket */
    .woocommerce-cart-form table tfoot td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon input#coupon_code {
        flex: 1 !important;
        width: auto !important;
    }

    .woocommerce-cart-form table tfoot td.actions .coupon button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .woocommerce-cart-form table tfoot td.actions button[name="update_cart"] {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Product meta — full width row */
    .woocommerce-cart-form table tbody td.product-meta {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }

    .woocommerce-cart-form table tbody td.product-meta dl {
        display: block !important;
        font-size: 13px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .woocommerce-cart-form table tbody td.product-meta dl dt {
        color: var(--bg-teal-deep) !important;
        font-weight: 600 !important;
        white-space: normal !important;
        margin-top: 4px !important;
        padding: 1px 0 !important;
    }

    .woocommerce-cart-form table tbody td.product-meta dl dd {
        color: #444 !important;
        font-weight: 400 !important;
        margin: 0 0 2px 0 !important;
        padding: 1px 0 !important;
        word-break: break-word !important;
    }

    .woocommerce-cart-form table tbody td.product-meta .bg-delivery-estimate {
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* Remove dl from product-name on mobile */
    .woocommerce-cart-form table tbody td.product-name dl {
        display: none !important;
    }

    .woocommerce-cart-form table tbody td.product-meta::before {
        content: none !important;
    }

    /* Show product-meta cell on mobile only */
    .woocommerce-cart-form table tbody td.product-meta {
        display: block !important;
    }

    .bg-pers-desktop {
        display: none !important;
    }

}

/* Hide product-meta cell on desktop — personalisation shows in product-name dl */
.woocommerce-cart-form table tbody td.product-meta {
    display: none;
}

/* Hide desktop personalisation on mobile */
.bg-pers-desktop {
    display: block;
}

/* Personalisation field spacing — desktop + mobile */
.woocommerce-cart-form table tbody td.product-name dl dt::after {
    content: ' ' !important;
}

/* Desktop personalisation fields — inline label: value */
.woocommerce-cart-form table tbody td.product-name dl {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 0 8px !important;
    margin-top: 4px !important;
}

.woocommerce-cart-form table tbody td.product-name dl dt,
.woocommerce-cart-form table tbody td.product-name dl dd {
    display: block !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}

/* Desktop personalisation — teal labels, grey values */
.woocommerce-cart-form table tbody td.product-name dl dt {
    color: var(--bg-teal-deep) !important;
    font-weight: 600 !important;
}

.woocommerce-cart-form table tbody td.product-name dl dd {
    color: #444 !important;
    font-weight: 400 !important;
}

/* Ensure mobile toolbar is hidden on desktop */
.bgcp-mobile-toolbar {
    display: none;
}

@media (max-width: 900px) {
    .bgcp-mobile-toolbar {
        display: flex !important;
    }
}

/* ============================================================
   MY ACCOUNT
   ============================================================ */

/* Hide Astra title + default WC nav */
.woocommerce-account .entry-header { display: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; }

/* Page title */
.bg-myaccount-title {
    font-family: Raleway, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    margin: 0 0 20px !important;
}

/* Back link */
.bg-myaccount-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: Raleway, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bg-teal-deep) !important;
    text-decoration: none !important;
    margin-bottom: 16px !important;
}

.bg-myaccount-back:hover { text-decoration: underline !important; }

/* Content card */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--bg-white) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(11, 90, 102, 0.08) !important;
    padding: 28px !important;
}

/* Welcome */
.bg-myaccount-welcome { margin-bottom: 20px !important; }

.bg-myaccount-welcome__title {
    font-family: Raleway, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    margin: 0 0 6px !important;
}

.bg-myaccount-welcome__text {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
}

/* Cards */
.bg-myaccount-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.bg-myaccount-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    background: var(--bg-off-white) !important;
    border-radius: 10px !important;
    border: 0.5px solid var(--bg-stone-mid) !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s !important;
}

.bg-myaccount-card:hover {
    background: #EBF5F6 !important;
    border-color: var(--bg-teal-deep) !important;
}

.bg-myaccount-card:hover .bg-myaccount-card__icon {
    background: var(--bg-teal-deep) !important;
}

.bg-myaccount-card:hover .bg-myaccount-card__icon i {
    color: var(--bg-white) !important;
}

.bg-myaccount-card:hover .bg-myaccount-card__title {
    color: var(--bg-teal-deep) !important;
}

.bg-myaccount-card__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #EBF5F6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.15s !important;
}

.bg-myaccount-card__icon i {
    font-size: 20px !important;
    color: var(--bg-teal-deep) !important;
    transition: color 0.15s !important;
}

.bg-myaccount-card__body { flex: 1 !important; }

.bg-myaccount-card__title {
    font-family: Raleway, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 4px !important;
    transition: color 0.15s !important;
}

.bg-myaccount-card__desc {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
}
.bg-myaccount-card__desc a { color: inherit !important; }

.bg-myaccount-card__arrow {
    font-size: 16px !important;
    color: #999 !important;
}

/* Divider */
.bg-myaccount-divider {
    border: none !important;
    border-top: 1px solid var(--bg-stone-mid) !important;
    margin: 0 0 16px !important;
}

/* Logout */
.bg-myaccount-logout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: Raleway, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bg-coral) !important;
    text-decoration: none !important;
    border: 1px solid var(--bg-coral) !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    transition: background 0.15s !important;
}

.bg-myaccount-logout:hover {
    background: #FDF0ED !important;
}

/* Hide eKomi on account pages */
.woocommerce-account .bg-ekomi-strip {
    display: none !important;
}

/* Fix My Account title spanning full width above content */
.woocommerce-account .woocommerce {
    display: block !important;
}

/* ============================================================
   ORDER VIEW — SHIPPING ADDRESS + DESPATCH/TRACKING
   WooCommerce's own unmodified order-details template — no
   theme override exists, styled via hook-injected blocks only.
   ============================================================ */

.bg-order-shipping,
.bg-order-tracking {
    background: var(--bg-off-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 20px 0;
}

.bg-order-shipping__title,
.bg-order-tracking__title {
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.bg-order-shipping__address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bg-charcoal);
}

.bg-order-shipping__phone {
    font-size: 14px;
    color: var(--bg-grey-text);
    margin: 6px 0 0;
}

.bg-order-tracking__row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: var(--bg-charcoal);
    padding: 8px 0;
    border-top: 1px solid var(--bg-stone-border);
}

.bg-order-tracking__row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.bg-order-tracking__label {
    font-weight: 700;
    color: var(--bg-charcoal);
}

.bg-order-tracking__link {
    color: var(--bg-teal-mid) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

/* ── Uploaded photo in order-item meta ───────────────────────
 * Emitted by BG_Order_Customer_Display::photo_friendly_item_meta() on
 * woocommerce_display_item_meta, which covers Find an Order, guest View My
 * Orders and the logged-in My Account order view — all three render through
 * wc_display_item_meta().
 *
 * Deliberately matched to the confirmation email and the thank-you page, which
 * have shown "✓ Photo uploaded — View your photo" all along; these three
 * surfaces were the ones that missed it and showed a naked URL instead.
 */
.bg-photo-uploaded {
    color: var(--bg-teal-deep);
    font-weight: 600;
}
.bg-photo-link {
    color: var(--bg-teal-mid) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.bg-order-tracking__unavailable {
    color: var(--bg-grey-text);
    font-style: italic;
}

/* Back link below title, not beside it */
.bg-myaccount-back {
    display: block !important;
    margin-bottom: 16px !important;
}

/* Sub-page header */
.bg-myaccount-page-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.bg-myaccount-page-header__icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: #EBF5F6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.bg-myaccount-page-header__icon i {
    font-size: 24px !important;
    color: var(--bg-teal-deep) !important;
}

.bg-myaccount-page-header__title {
    font-family: Raleway, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    margin: 0 0 4px !important;
}

.bg-myaccount-page-header__desc {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
}

/* Orders empty state */
.bg-orders-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
}

.bg-orders-empty__icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: #EBF5F6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.bg-orders-empty__icon i {
    font-size: 36px !important;
    color: var(--bg-teal-deep) !important;
}

.bg-orders-empty__title {
    font-family: Raleway, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    margin: 0 0 10px !important;
}

.bg-orders-empty__text {
    font-size: 14px !important;
    color: #666 !important;
    max-width: 360px !important;
    margin: 0 0 24px !important;
    line-height: 1.6 !important;
}

.bg-orders-empty__btn {
    display: inline-block !important;
    background: var(--bg-teal-deep) !important;
    color: var(--bg-white) !important;
    font-family: Raleway, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}

.bg-orders-empty__btn:hover {
    background: var(--bg-teal-dark) !important;
}

/* Addresses grid */
.bg-addresses-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.bg-address-card {
    border: 1px solid var(--bg-stone-mid) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.bg-address-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: var(--bg-off-white) !important;
    border-bottom: 1px solid var(--bg-stone-mid) !important;
}

.bg-address-card__title {
    font-family: Raleway, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    margin: 0 !important;
}

.bg-address-card__edit {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bg-teal-mid) !important;
    text-decoration: none !important;
}

.bg-address-card__edit:hover {
    text-decoration: underline !important;
}

.bg-address-card__body {
    padding: 18px !important;
}

.bg-address-card__address {
    font-style: normal !important;
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.7 !important;
}

/* Empty state */
.bg-address-card__empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 10px !important;
}

.bg-address-card__empty-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #EBF5F6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
}

.bg-address-card__empty-icon i {
    font-size: 24px !important;
    color: var(--bg-teal-deep) !important;
}

.bg-address-card__empty-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 6px !important;
}

.bg-address-card__empty-hint {
    font-size: 13px !important;
    color: #888 !important;
    margin: 0 !important;
}

/* ============================================================
   MY ACCOUNT — ACCOUNT DETAILS
   ============================================================ */

/* Two-column row: first + last name */
.bg-edit-account-row--two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

/* Reset WooCommerce float-based widths inside the two-col grid */
.bg-edit-account-row--two-col .woocommerce-form-row,
.bg-edit-account-row--two-col .form-row {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Field labels */
.bg-edit-account-form .woocommerce-form-row label,
.bg-edit-account-form .form-row label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-bottom: 6px !important;
}

/* Required asterisk in coral */
.bg-edit-account-form .required {
    color: var(--bg-coral) !important;
}

/* Inputs */
.bg-edit-account-form .input-text {
    width: 100% !important;
    border: 1px solid var(--bg-stone-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: var(--bg-white) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}

.bg-edit-account-form .input-text:focus {
    border-color: var(--bg-teal-deep) !important;
    box-shadow: 0 0 0 3px rgba(11,90,102,0.08) !important;
}

/* Display name helper text */
.bg-field-hint {
    display: block !important;
    font-size: 13px !important;
    color: #888 !important;
    margin-top: 5px !important;
}

/* Divider between sections */
.bg-edit-account-divider {
    margin: 24px 0 !important;
}

/* WooCommerce native password toggle (the eye) — Account Details AND the set-a-password page.
   It is WooCommerce's own <button class="show-password-input" aria-label="Show password"> (woocommerce.js);
   its icon is a WooCommerce-font glyph in ::after (Astra's woocommerce-general inline CSS), drawn in the
   button's colour. Reset Astra's global button styles AND this theme's own "Buttons" rule above, which
   painted it as a small teal square on the set-a-password page. */
/* Source: Astra style.min.css applies padding:18px 30px + theme bg to all button elements */
.bg-edit-account-form .show-password-input,
.bg-edit-account-form .show-password-input:hover,
.bg-edit-account-form .show-password-input:focus,
.bg-edit-account-form .show-password-input:active,
form.lost_reset_password .show-password-input,
form.lost_reset_password .show-password-input:hover,
form.lost_reset_password .show-password-input:focus,
form.lost_reset_password .show-password-input:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    color: var(--bg-teal-deep) !important;
    opacity: 1 !important;
}

/* Jim, 18 Sep 2026: the eye was too faint to notice (#999 at 70% opacity on Account Details) and had no
   keyboard focus state. Now a deep-teal icon at full strength, a pale-teal circle on hover, and the
   theme's usual focus ring for keyboard users. Same icon, same place, same behaviour. */
.bg-edit-account-form .show-password-input:hover,
form.lost_reset_password .show-password-input:hover {
    color: var(--bg-teal-dark) !important;
    background-color: var(--bg-teal-pale) !important;
    box-shadow: 0 0 0 5px var(--bg-teal-pale) !important;
    border-radius: 50% !important;
}

.bg-edit-account-form .show-password-input:focus-visible,
form.lost_reset_password .show-password-input:focus-visible {
    outline: 2px solid var(--bg-teal-mid) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* WooCommerce injects .password-input wrapper — keep it block so input stays full-width */
.bg-edit-account-form .password-input {
    display: block !important;
    position: relative !important;
}

/* Save changes button */
.bg-edit-account-submit {
    margin-top: 24px !important;
}

.bg-edit-account-btn {
    display: inline-block !important;
    background: var(--bg-coral) !important;
    color: var(--bg-white) !important;
    font-family: Raleway, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
}

.bg-edit-account-btn:hover {
    background: #d97a67 !important;
}

/* Mobile */
@media (max-width: 900px) {
    .bg-myaccount-title {
        font-size: 22px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px 16px !important;
    }

    .bg-myaccount-card {
        padding: 12px 14px !important;
    }

    .bg-addresses-grid {
        grid-template-columns: 1fr !important;
    }

    .bg-edit-account-row--two-col {
        grid-template-columns: 1fr !important;
    }
}

/* Blog — Archive ───────────────────────────────────────────── */

.bg-blog-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.bg-blog-header {
    text-align: center;
    margin-bottom: 48px;
}

.bg-blog-title {
    font-family: Raleway, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin: 0 0 10px;
}

.bg-blog-subtitle {
    font-size: 16px;
    color: #888;
    margin: 0;
}

.bg-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.bg-blog-card {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.bg-blog-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.bg-blog-card__image-link {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.bg-blog-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.bg-blog-card:hover .bg-blog-card__image {
    transform: scale(1.03);
}

.bg-blog-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: #4AABB8;
    opacity: 0.15;
}

.bg-blog-card__body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bg-blog-card__title {
    font-family: Raleway, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    margin: 0 0 10px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.bg-blog-card__title a {
    color: var(--bg-teal-deep);
    text-decoration: none;
}

.bg-blog-card__title a:hover {
    color: var(--bg-coral);
}

.bg-blog-card__excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
}

.bg-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bg-blog-card__readmore {
    font-size: 14px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-decoration: none;
}

.bg-blog-card__readmore:hover {
    color: var(--bg-coral);
}

.bg-blog-card__date {
    display: none;
    font-size: 12px;
    color: #aaa;
}

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

@media (max-width: 600px) {
    .bg-blog-grid {
        grid-template-columns: 1fr;
    }

    .bg-blog-title {
        font-size: 24px;
    }
}

/* Blog — Single Post ───────────────────────────────────────── */

.bg-resource-content .bg-resource-cta {
    margin: 24px 0;
    text-align: center;
}

.bg-resource-content .bg-resource-cta a {
    display: inline-block;
    background: var(--bg-teal-deep);
    color: var(--bg-white) !important;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
    font-size: 0.95rem;
}

.bg-resource-content .bg-resource-cta a:hover {
    background: var(--bg-teal-mid);
    color: var(--bg-white) !important;
}

/* Force left-align text in blog posts */
.bg-single-resource__content div {
    text-align: left;
}

/* Restore centre-align for card grid posts (Free Baby Stuff and Easter Fun) */
.bg-resource-content .item p,
.bg-resource-content .item div,
.bg-resource-content .item-content p,
.bg-resource-content .item-content div,
.bg-resource-content td p,
.bg-resource-content td div,
.bg-resource-content td {
    text-align: center;
}

.bg-single-resource {
    max-width: 840px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.bg-single-resource__back {
    margin-bottom: 20px;
}

.bg-single-resource__back a {
    font-size: 14px;
    font-weight: 600;
    color: var(--bg-teal-deep);
    text-decoration: none;
}

.bg-single-resource__back a:hover {
    color: var(--bg-coral);
}

.bg-single-resource__card {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 14px;
    padding: 40px 44px 48px;
}

.bg-single-resource__header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bg-stone-border);
}

.bg-single-resource__title {
    font-family: Raleway, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--bg-charcoal);
    margin: 0 0 8px;
}

.bg-single-resource__date {
    display: none;
    font-size: 13px;
    color: #aaa;
}

.bg-single-resource__content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bg-charcoal);
}

.bg-single-resource__content h1,
.bg-single-resource__content h2,
.bg-single-resource__content h3,
.bg-single-resource__content h4 {
    font-family: Raleway, sans-serif;
    color: var(--bg-charcoal);
    margin: 28px 0 12px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.bg-single-resource__content h2 { font-size: 22px; }
.bg-single-resource__content h3 { font-size: 19px; }

.bg-single-resource__content p {
    margin: 0 0 16px;
}

.bg-single-resource__content ul,
.bg-single-resource__content ol {
    padding-left: 24px;
    margin: 0 0 16px;
}

.bg-single-resource__content li {
    margin-bottom: 6px;
}

.bg-single-resource__content a {
    color: var(--bg-teal-deep);
    text-decoration: underline;
}

.bg-single-resource__content a:hover {
    color: var(--bg-coral);
}

.bg-single-resource__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
}

.bg-single-resource__back--bottom {
    margin-top: 32px;
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .bg-single-resource__card {
        padding: 24px 20px 32px;
    }

    .bg-single-resource__title {
        font-size: 22px;
    }
}

/* Blog — Free Baby Stuff Cards ────────────────────────────── */

.bg-resource-content .freebie-banner {
    text-align: center;
    margin-bottom: 24px;
}

.bg-resource-content .item-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 24px;
    margin: 0 0 32px 0;
}

.bg-resource-content .item {
    flex: 1 1 280px;
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg-resource-content .item img {
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.bg-resource-content .item-title a {
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.bg-resource-content .item p {
    font-size: 0.9rem;
    color: #666;
    flex-grow: 1;
}

.bg-resource-content .get-freebie,
.bg-resource-content .get-freebie a {
    display: inline-block;
    background: var(--bg-coral);
    color: var(--bg-white) !important;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 12px;
    border: none;
    cursor: pointer;
}

.bg-resource-content .bg-freebie-btn,
.bg-resource-content a.bg-freebie-btn {
    display: inline-block;
    background: var(--bg-coral);
    color: var(--bg-white) !important;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 12px;
    border: none;
    cursor: pointer;
}

.bg-resource-content .bg-freebie-btn:hover,
.bg-resource-content a.bg-freebie-btn:hover {
    background: #d4775f;
    color: var(--bg-white) !important;
}

.bg-resource-content .section-title,
.bg-resource-content h2 {
    color: var(--bg-teal-deep);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 32px 0 16px;
    text-align: left;
}

.bg-resource-content .section-title {
    color: var(--bg-teal-deep) !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 32px 0 16px;
    padding: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .bg-resource-content .item-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bg-resource-content .item-list {
        grid-template-columns: 1fr;
    }
}

/* Fix 1 safety net — override any inline pink on headings */
.bg-resource-content h2,
.bg-resource-content h3,
.bg-resource-content h4 {
    color: var(--bg-teal-deep) !important;
}

/* Fix 4 — table styling */
.bg-resource-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
    border: 1px solid var(--bg-stone-border);
    border-radius: 8px;
    overflow: hidden;
}

.bg-resource-content table th {
    background: var(--bg-teal-deep);
    color: var(--bg-white);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.bg-resource-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-stone-border);
    vertical-align: top;
    color: #444;
    line-height: 1.5;
}

.bg-resource-content table tr:last-child td {
    border-bottom: none;
}

.bg-resource-content table tr:nth-child(even) td {
    background: var(--bg-off-white);
}

.bg-resource-content table td a {
    color: var(--bg-teal-mid);
    text-decoration: underline;
}

/* Fix naming-day-ceremony legacy font tags */
.bg-resource-content font {
    font-size: 1rem !important;
    font-family: inherit !important;
}

.bg-resource-content span[style*="font-size: small"],
.bg-resource-content span[style*="font-size:small"] {
    font-size: 1rem !important;
}

/* Simple Pages ─────────────────────────────────────────────── */
.bg-simple-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}
.bg-simple-page__card {
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-radius: 14px;
    padding: 40px 44px 48px;
}
.bg-simple-page__header {
    margin-bottom: 8px;
}
.bg-simple-page__title {
    color: var(--bg-teal-deep);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}
.bg-simple-page__divider {
    border: none;
    border-top: 1px solid var(--bg-stone-border);
    margin: 16px 0 28px;
}
.bg-simple-page__content h2 {
    color: var(--bg-teal-deep);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 28px 0 10px;
}
.bg-simple-page__content p {
    line-height: 1.75;
    color: var(--bg-charcoal);
    margin-bottom: 16px;
}
/* Page-text lists only, never WooCommerce's notices (25 Sep 2026, D7): on Find
 * an Order this rule stripped the not-found notice's padding, and its "!" icon
 * sat on top of the words. :where() adds no specificity, so the rule still
 * weighs (0,1,1) and WooCommerce's own list rules inside these pages (the
 * order details on Find an Order) win exactly as before. */
.bg-simple-page__content ul:where(:not(.woocommerce-error, .woocommerce-info, .woocommerce-message)) {
    margin: 0 0 16px 24px;
    padding: 0;
}
.bg-simple-page__content li {
    line-height: 1.75;
    color: var(--bg-charcoal);
    margin-bottom: 8px;
}
.bg-simple-page__content a {
    color: var(--bg-teal-mid);
    text-decoration: underline;
}
@media (max-width: 700px) {
    .bg-simple-page__card {
        padding: 24px 20px 32px;
    }
}

/* Find an Order — the order-number and email boxes STACK on a phone
 * (24 Sep 2026, Jim's decision). WooCommerce and Astra give .form-row-first
 * and .form-row-last width:47% and a float at EVERY width, with no phone
 * override for this form, so on a 375px phone each box was 117px wide and its
 * placeholder was cut to a few words.
 * 767px is the breakpoint the site already uses for form fields on a phone
 * (the checkout). Measured on local: side by side, the email box's placeholder
 * is cut off from about 735px down, and from 768px up the pair sits exactly as
 * it does on desktop. Only width and float change; the rows keep WooCommerce's
 * own margins. */
@media (max-width: 767px) {
    .woocommerce form.track_order .form-row-first,
    .woocommerce form.track_order .form-row-last {
        width: 100%;
        float: none;
    }
}

/* ── My Account — Login / Register page ──────────────────── */

/* Card wrappers */
#customer_login .u-column1,
#customer_login .u-column2 {
    background: #fff !important;
    border: 1px solid var(--bg-stone-border) !important;
    border-top: 3px solid var(--bg-teal-deep) !important;
    border-radius: 8px !important;
    padding: 28px 32px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ⚠️ THE GAP BETWEEN THE TWO CARDS WHEN THEY STACK — added 28 August 2026.
 *
 * Side by side the cards need no vertical margin and have never had one.
 * STACKED they touched, with nothing between Login and Register — reported by
 * Jim at phone width. The gap BELOW Register was already right, because the
 * guest panel brings its own `margin: 24px auto 0`; this is the one join that
 * had nothing.
 *
 * ⚠️ 921px IS NOT AN ARBITRARY NUMBER. It is Astra's tablet breakpoint,
 * astra_get_tablet_breakpoint(), read from the live site. Astra enqueues
 * woocommerce-smallscreen.css with media="only screen and (max-width: 921px)",
 * and THAT is the stylesheet whose
 *     .col2-set .col-1, .col2-set .col-2 { float:none; width:100% }
 * makes the columns stack. Matching the breakpoint exactly means the margin
 * appears at precisely the width the stacking starts, and never one pixel
 * before it — so the desktop side-by-side layout cannot be touched.
 *
 * 24px matches the guest panel's own top margin, so all three cards are evenly
 * spaced down the page.
 */
@media (max-width: 921px) {
    #customer_login .u-column1 {
        margin-bottom: 24px !important;
    }
}

/* Inner form wrappers — override Astra coral border */
#customer_login .woocommerce-form {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Login / Register headings */
#customer_login h2 {
    font-family: 'Raleway', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bg-teal-deep) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--bg-stone-light) !important;
}

/* Privacy policy text */
.woocommerce-privacy-policy-text {
    font-size: 13px !important;
    color: var(--bg-grey-text) !important;
    line-height: 1.6 !important;
}

.woocommerce-privacy-policy-text a {
    color: var(--bg-teal-deep) !important;
    text-decoration: underline !important;
}

/* Privacy policy text — increase specificity to override Astra */
#customer_login .woocommerce-privacy-policy-text,
#customer_login .woocommerce-privacy-policy-text p {
    color: var(--bg-grey-text) !important;
    font-size: 13px !important;
}

/* Lost password link */
.woocommerce-LostPassword a {
    color: var(--bg-coral) !important;
    font-size: 13px !important;
}

/* ── My Account — GUEST PANEL ─────────────────────────────────
 * Rendered by BG_Guest_Order_Lookup::guest_lookup_note() on
 * woocommerce_after_customer_login_form. Added 28 August 2026, replacing a
 * one-line grey aside.
 *
 * ⚠️ DELIBERATELY THE SAME CARD TREATMENT AS #customer_login .u-column1/2 —
 * white, stone border, 3px teal top rule, 8px radius, same padding and the
 * same soft shadow. 96% of this shop's orders are guest checkouts, so this
 * panel is a peer of the login and register forms, not a footnote beneath
 * them, and it has to look like one.
 *
 * ⚠️ THE 640px MEASURE MATCHES #customer_login (line ~68) so the panel lines
 * up with the forms above it. The hook fires outside that wrapper, so the
 * width has to be restated here rather than inherited.
 */
.bg-guest-panel {
    max-width: 640px;
    margin: 24px auto 0;
    background: var(--bg-white);
    border: 1px solid var(--bg-stone-border);
    border-top: 3px solid var(--bg-teal-deep);
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.bg-guest-panel__heading {
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bg-stone-light);
}
.bg-guest-panel__intro {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bg-grey-text);
}
/* ONE option since 24 Sep 2026 (Find an Order; View My Orders retired), so one
 * column at every width. It was two columns side by side. */
.bg-guest-panel__options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.bg-guest-panel__option {
    margin: 0;
    padding: 0;
}
.bg-guest-panel__link {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-decoration: none;
    margin-bottom: 4px;
}
.bg-guest-panel__link:hover,
.bg-guest-panel__link:focus {
    text-decoration: underline;
}
.bg-guest-panel__desc {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bg-grey-text);
}
/* One column on a phone, matching how the login/register columns already
 * collapse at this width. */
@media (max-width: 600px) {
    .bg-guest-panel {
        padding: 22px 20px;
    }
    .bg-guest-panel__options {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================================
   ORDER CONFIRMATION (THANK YOU) PAGE
   ============================================================ */

.bg-thankyou-wrap {
    background: var(--bg-off-white);
    padding: 0 0 48px;
    font-family: Raleway, Arial, sans-serif;
}

.bg-thankyou-hero {
    background: var(--bg-teal-deep);
    border-radius: 12px 12px 0 0;
    padding: 36px 40px;
    text-align: center;
    margin-bottom: 0;
}

.bg-thankyou-hero--failed {
    background: #c0392b;
}

.bg-thankyou-hero__icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: var(--bg-white);
    line-height: 1;
}

.bg-thankyou-hero__label {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-coral);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bg-thankyou-hero__title {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    color: var(--bg-white);
    line-height: 1.3;
}

.bg-thankyou-hero__text {
    margin: 0;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

.bg-thankyou-hero__actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.bg-thankyou-btn {
    display: inline-block;
    padding: 11px 24px;
    background: var(--bg-white);
    color: var(--bg-teal-deep);
    font-family: Raleway, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
}

.bg-thankyou-btn--secondary {
    background: transparent;
    color: var(--bg-white);
    border: 2px solid rgba(255,255,255,0.5);
}

.bg-thankyou-strip {
    background: var(--bg-white);
    padding: 20px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--bg-stone);
    margin-bottom: 0;
}

.bg-thankyou-strip__item {
    flex: 1;
    min-width: 120px;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid var(--bg-stone);
}

.bg-thankyou-strip__item:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

.bg-thankyou-strip__label {
    display: block;
    font-size: 13px;
    color: var(--bg-grey-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.bg-thankyou-strip__value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-charcoal);
}

.bg-thankyou-strip__item:first-child .bg-thankyou-strip__value {
    color: var(--bg-teal-deep);
}

.bg-thankyou-body {
    background: var(--bg-white);
    padding: 24px 40px;
    margin-top: 0;
}

.bg-thankyou-body + .bg-thankyou-body {
    padding-top: 0;
}

.bg-thankyou-email-note {
    background: var(--bg-off-white);
    border-radius: 8px;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--bg-charcoal);
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.bg-thankyou-email-note__icon {
    font-size: 18px;
    color: var(--bg-teal-deep);
    flex-shrink: 0;
}

.bg-thankyou-card {
    background: var(--bg-off-white);
    border-radius: 8px;
    padding: 20px 24px;
}

.bg-thankyou-card__heading {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.bg-thankyou-card__heading--sub {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-stone);
}

.bg-thankyou-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bg-thankyou-step {
    background: var(--bg-white);
    border-radius: 6px;
    padding: 12px 16px;
}

.bg-thankyou-step__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
}

.bg-thankyou-step__text {
    margin: 0;
    font-size: 15px;
    color: var(--bg-grey-text);
    line-height: 1.5;
}

.bg-thankyou-item {
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bg-stone);
}

.bg-thankyou-item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bg-thankyou-item__img {
    flex-shrink: 0;
}

.bg-thankyou-item__img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--bg-stone);
    display: block;
}

.bg-thankyou-item__body {
    flex: 1;
    min-width: 0;
}

.bg-thankyou-item__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.bg-thankyou-item__name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bg-charcoal);
    line-height: 1.4;
}

.bg-thankyou-item__price {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bg-charcoal);
    white-space: nowrap;
}

.bg-thankyou-item__qty {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--bg-grey-text);
}

.bg-thankyou-item__meta {
    background: var(--bg-white);
    border-radius: 4px;
    padding: 8px 12px;
}

.bg-thankyou-item__meta-heading {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bg-thankyou-item__meta-row {
    margin: 0 0 3px;
    font-size: 15px;
    color: var(--bg-charcoal);
    line-height: 1.5;
}

.bg-thankyou-item__meta-row strong {
    color: var(--bg-teal-deep);
}

.bg-thankyou-item__meta-row:last-child {
    margin-bottom: 0;
}

.bg-thankyou-photo-uploaded {
    color: var(--bg-teal-deep);
    font-weight: 700;
}

.bg-thankyou-totals {
    border-top: 1px solid var(--bg-stone);
    padding-top: 14px;
    margin-top: 16px;
}

.bg-thankyou-totals__row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: var(--bg-charcoal);
    padding-bottom: 8px;
}

.bg-thankyou-totals__total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    color: var(--bg-teal-deep);
    border-top: 2px solid var(--bg-teal-deep);
    padding-top: 12px;
    margin-top: 4px;
}

.bg-thankyou-address__text {
    margin: 0;
    font-size: 14px;
    color: var(--bg-charcoal);
    line-height: 1.8;
}

.bg-thankyou-signoff {
    text-align: center;
    padding-bottom: 32px;
}

.bg-thankyou-signoff__thanks {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-teal-deep);
}

.bg-thankyou-signoff__contact {
    margin: 0;
    font-size: 14px;
    color: var(--bg-charcoal);
}

.bg-thankyou-signoff__contact a {
    color: var(--bg-teal-deep);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 600px) {
    .bg-thankyou-hero,
    .bg-thankyou-strip,
    .bg-thankyou-body,
    .bg-thankyou-signoff {
        padding-left: 20px;
        padding-right: 20px;
    }
    .bg-thankyou-strip {
        flex-direction: column;
        gap: 12px;
    }
    .bg-thankyou-strip__item {
        border-right: none;
        border-bottom: 1px solid var(--bg-stone);
        padding-bottom: 12px;
        margin-right: 0;
        padding-right: 0;
    }
    .bg-thankyou-strip__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .bg-thankyou-item__img img {
        width: 48px;
        height: 48px;
    }
    .bg-thankyou-item__header {
        flex-direction: column;
        gap: 2px;
    }
    .bg-thankyou-item__price {
        font-size: 14px;
    }
}

.bg-thankyou-item__body .bg-delivery-estimate {
    margin-top: 10px;
}

/* end order confirmation */

/* ════════════════════════════════════════════════════════════
   BASKET PHASE 2 — Card layout v2.4.4
   ════════════════════════════════════════════════════════════ */

/* ── Page background: cream behind all cards ─────────────── */
.woocommerce-cart.woocommerce-page {
    background: var(--bg-off-white) !important;
}

/* ── Two-column grid ─────────────────────────────────────── */
.woocommerce-cart .bg-cart-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 32px;
    align-items: start;
}

/* Left column — form is transparent; bg-cart-items-card is the card */
.woocommerce-cart .woocommerce-cart-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ── Outer basket items card ─────────────────────────────── */
.bg-cart-items-card {
    background: #ffffff;
    border-top: 4px solid #0B6670;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(30, 52, 64, 0.06);
    padding: 0 24px;
    overflow: hidden;
}

/* Right column — cart totals */
.woocommerce-cart .bg-cart-right {
    position: relative;
}

/* Override Phase 1 single-col flex alignment — not needed in grid */
.woocommerce-cart .bg-cart-layout .cart-collaterals {
    margin-top: 0 !important;
    display: block !important;
    justify-content: unset !important;
    width: 100% !important;
}
.woocommerce-cart .bg-cart-layout .cart-collaterals .cart_totals {
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-top: 4px solid #0B6670 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(30, 52, 64, 0.06) !important;
    overflow: hidden !important;
}

/* ── Reassurance banners — span both grid columns ────────── */
.woocommerce-cart .bg-cart-layout > .bg-banners-row {
    grid-column: 1 / -1;
    margin-bottom: 0;
}
.woocommerce-cart .bg-cart-layout .bg-banners-row .bg-info-banner {
    background: #e8f3f1 !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
}

/* ── Item rows inside the outer card — divider style ──────── */
.bg-cart-item {
    display: grid;
    grid-template-columns: 96px 1fr 148px;
    gap: 20px;
    padding: 22px 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--bg-stone);
}
.bg-cart-item:last-of-type {
    border-bottom: none;
}

/* ── Form footer — flat inside the outer card ─────────────── */
.bg-cart-form-footer {
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    padding: 16px 0;
    box-shadow: none;
    border-top: 1px solid var(--bg-stone);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Image */
.bg-cart-item__img {
    width: 96px;
}
.bg-cart-item__img img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.bg-cart-item__img a {
    display: block;
}

/* ── Main details column ─────────────────────────────────── */
.bg-cart-item__title {
    font-family: 'Raleway', sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: var(--bg-charcoal);
    margin: 0 0 5px;
    line-height: 1.4;
}
.bg-cart-item__title a {
    color: var(--bg-charcoal);
    text-decoration: none;
}
.bg-cart-item__title a:hover {
    color: var(--bg-teal-deep);
    text-decoration: underline;
}
.bg-cart-item__sku {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: var(--bg-grey-text);
    margin-bottom: 6px;
}
.bg-cart-item__delivery {
    margin: 4px 0 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
}

/* Personalisation heading */
.bg-cart-item__pers-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-charcoal);
    margin: 0 0 4px;
    padding: 0;
}

/* Personalisation dl — one field per line, label muted / value normal */
.bg-cart-item__pers {
    margin: 0 0 8px;
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
}
.bg-cart-item__pers dt,
.bg-cart-item__pers dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.bg-cart-item__pers dt {
    font-size: 13px;
    font-weight: 400;
    color: var(--bg-grey-text);
}
.bg-cart-item__pers dt::after {
    content: " ";
}
.bg-cart-item__pers dd {
    font-size: 16px;
    font-weight: 600;
    color: #0B6670;
}
.bg-cart-item__pers dd::after {
    content: "";
    display: block;
}

/* Edit pers + coupon links: 16px */
.bg-edit-pers-link,
.bg-coupon-toggle-btn {
    font-size: 16px !important;
}

/* ── Right column: qty / subtotal (no separate unit price) ─ */
.bg-cart-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}
.bg-cart-item__qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bg-qty-label {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #1E3440;
    white-space: nowrap;
}
.bg-cart-item__qty .qty-remove-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.bg-cart-item__qty .quantity {
    display: flex !important;
    align-items: center;
    gap: 4px;
}
.bg-cart-item__qty input.qty {
    width: 54px !important;
    text-align: center !important;
    padding: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid var(--bg-stone) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1E3440 !important;
    box-shadow: none !important;
    font-family: 'Raleway', sans-serif !important;
}
/* Astra inline remove link (trash icon) — 20px icon, 32×32 tap target, dark coral */
.bg-cart-item__qty .remove--inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9A2E1E !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.bg-cart-item__qty .remove--inline::before,
.bg-cart-item__qty .remove--inline::after {
    display: none !important;
    content: none !important;
}
.bg-cart-item__qty .remove--inline svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.bg-cart-item__qty .remove--inline:hover {
    color: #7a1f10 !important;
    background: transparent !important;
    background-color: transparent !important;
}
.bg-cart-item__subtotal {
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--bg-charcoal);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.bg-cart-item__subtotal::before {
    content: "Subtotal";
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #1E3440;
    margin-bottom: 2px;
}
.bg-cart-item__subtotal .woocommerce-Price-amount {
    font-family: 'Raleway', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* ── Form footer: coupon + update basket ──────────────────── */
.bg-cart-form-footer button[name="update_cart"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--bg-teal-deep) !important;
    color: var(--bg-teal-deep) !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bg-cart-form-footer button[name="update_cart"]:hover {
    background: var(--bg-teal-deep) !important;
    color: #fff !important;
}
.bg-cart-form-footer button[name="update_cart"][disabled],
.bg-cart-form-footer button[name="update_cart"].disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
.bg-cart-form-footer button[name="update_cart"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--bg-teal-mid) !important;
}

/* ── Mobile: single column ───────────────────────────────── */
@media (max-width: 900px) {
    .woocommerce-cart .bg-cart-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bg-cart-items-card {
        padding: 0 16px;
    }

    .bg-cart-item {
        grid-template-columns: 60px 1fr;
        gap: 14px;
        padding: 18px 0;
    }

    .bg-cart-item__img,
    .bg-cart-item__img img {
        width: 60px;
        height: 60px;
    }

    .bg-cart-item__title {
        font-size: 17px;
    }

    .bg-cart-item__right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        border-top: 1px solid var(--bg-stone);
        padding-top: 10px;
        margin-top: 4px;
        text-align: left;
        gap: 8px;
    }

    .bg-cart-form-footer {
        padding: 14px 0;
        flex-direction: column;
        align-items: stretch;
    }
    .bg-cart-form-footer button[name="update_cart"] {
        width: 100% !important;
        text-align: center !important;
    }
    .bg-cart-form-footer .coupon {
        width: 100%;
    }
}

/* ── Personalisation tinted panel ───────────────────────── */
.bg-pers-panel {
    background: #F5F3EC;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 8px 0 6px;
}
.bg-pers-panel .bg-cart-item__pers {
    margin-bottom: 6px;
}
.bg-pers-panel .bg-edit-pers-wrap {
    margin-top: 6px;
}
@media (max-width: 900px) {
    .bg-pers-panel {
        padding: 12px 10px;
    }
}

/* ── Secure checkout note below proceed button ────────── */
.bg-secure-checkout {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--bg-grey-text);
    margin: 8px 0 0;
    padding: 0;
}

/* ── Centre "Basket" page H1 + tighten spacing ───────── */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
    text-align: center;
    margin-bottom: 0;
}
.woocommerce-cart .entry-header {
    margin-bottom: 10px;
}
/* Desktop: Astra adds 60px margin-top to .content-area — reduce it */
@media (min-width: 901px) {
    .woocommerce-cart .content-area {
        margin-top: 20px !important;
    }
}

/* end basket phase 2 */