/* ═══════════════════════════════════════════════════════════
   Bug Bounty SA — theme stylesheet
   Brand: blue #1e4fa2 + charcoal, amber accent for deals.
   Built on the Generator Parts theme stylesheet; the variable
   NAMES are kept (--bb-navy, --bb-yellow…) so every existing
   rule follows the new palette. The Bug Bounty components are
   at the end of the file.
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --bb-navy:       #1e4fa2;   /* brand blue: primary buttons, dark bands */
    --bb-navy-light: #2a62c2;
    --bb-dark:       #10213f;   /* deep blue: footer, hero */
    --bb-yellow:     #f5b301;   /* accent: deals, primary CTA on dark */
    --bb-yellow-hover: #db9f00;
    --bb-gold:       #db9f00;

    --bb-green-text: #1e4fa2;   /* links / accent text on light backgrounds */
    --bb-green-text-hover: #163c7c;
    --bb-green:      #25D366;   /* WhatsApp */
    --bb-red:        #c62828;
    --bb-white:      #ffffff;
    --bb-light:      #f4f6fa;
    --bb-gray:       #5b6472;
    --bb-gray-light: #e3e7ee;
    --bb-text:       #1f2328;
    --bb-text-light: #8a93a1;
    --bb-radius:     10px;
    --bb-shadow:     0 2px 10px rgba(16,33,63,0.07);
    --bb-shadow-lg:  0 12px 34px rgba(16,33,63,0.14);
    --bb-transition: 0.2s ease;
    --bb-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bb-container:  1280px;

    --bb-blue:       #1e4fa2;
    --bb-blue-50:    #eef3fc;
    --bb-blue-100:   #dce7f8;
    --bb-charcoal:   #3c3c3c;
    --bb-amber:      #f5b301;
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--bb-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--bb-text);
    background: var(--bb-white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bb-green-text); text-decoration: none; transition: color var(--bb-transition); }
a:hover { color: var(--bb-green-text-hover); }

.bb-container {
    max-width: var(--bb-container);
    margin: 0 auto;
    padding: 0 20px;
}

.bb-container--narrow { max-width: 800px; }

/* ── Buttons ────────────────────────────────────────────── */
.bb-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    border-radius: var(--bb-radius);
    cursor: pointer;
    transition: all var(--bb-transition);
    text-align: center;
    line-height: 1.4;
}

.bb-btn--primary {
    background: var(--bb-navy);
    color: var(--bb-white);
    border-color: var(--bb-navy);
}
.bb-btn--primary:hover { background: var(--bb-navy-light); color: var(--bb-white); }

.bb-btn--yellow {
    background: var(--bb-yellow);
    color: var(--bb-dark);
    border-color: var(--bb-yellow);
}
.bb-btn--yellow:hover { background: var(--bb-yellow-hover); color: var(--bb-dark); }

.bb-btn--outline {
    background: transparent;
    color: var(--bb-white);
    border-color: var(--bb-white);
}
.bb-btn--outline:hover { background: var(--bb-white); color: var(--bb-navy); }

.bb-btn--outline-white {
    background: transparent;
    color: var(--bb-white);
    border-color: rgba(255,255,255,0.4);
}
.bb-btn--outline-white:hover { border-color: var(--bb-white); color: var(--bb-white); }

.bb-btn--small { padding: 8px 16px; font-size: 13px; }

/* ── Promo Bar ──────────────────────────────────────────── */
.bb-promo-bar {
    background: var(--bb-yellow);
    color: var(--bb-dark);
    text-align: center;
    padding: 8px 0;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.bb-promo-bar .bb-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.bb-promo-bar__link {
    color: var(--bb-dark);
    text-decoration: underline;
    font-weight: 800;
}
.bb-promo-bar__link:hover {
    color: var(--bb-navy);
}

/* ── Top Bar ────────────────────────────────────────────── */
.bb-top-bar {
    background: var(--bb-dark);
    color: var(--bb-text-light);
    font-size: 13px;
    padding: 6px 0;
}
.bb-top-bar__inner { display: flex; justify-content: space-between; align-items: center; }
.bb-top-bar__left { display: flex; align-items: center; gap: 20px; }
.bb-top-bar__phone { display: flex; align-items: center; gap: 4px; }
.bb-top-bar__phone svg { flex-shrink: 0; }
.bb-top-bar__social { display: flex; align-items: center; gap: 14px; }
.bb-top-bar__social a { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.bb-top-bar a { color: var(--bb-text-light); }
.bb-top-bar a:hover { color: var(--bb-yellow); }

/* ── Header ─────────────────────────────────────────────── */
.bb-header {
    background: var(--bb-navy);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--bb-shadow-lg);
}
.admin-bar .bb-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .bb-header { top: 46px; }
}

.bb-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
}

.bb-header__logo { flex-shrink: 0; max-width: 280px; }
.bb-header__logo a { display: flex; align-items: center; }
.bb-logo-img,
.bb-header__logo img,
.woocommerce .bb-header__logo img,
.woocommerce-page .bb-header__logo img {
    height: 44px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
}

.bb-header__search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }

.bb-search-form {
    display: flex;
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
}

.bb-search-input {
    flex: 1;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    font-family: var(--bb-font);
}

.bb-search-btn {
    background: var(--bb-yellow);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--bb-dark);
    transition: background var(--bb-transition);
}
.bb-search-btn:hover { background: var(--bb-yellow-hover); }

.bb-header__actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.bb-account-link {
    color: var(--bb-white);
    display: flex;
    align-items: center;
}
.bb-account-link:hover { color: var(--bb-yellow); }

.bb-wishlist-link {
    color: var(--bb-white);
    display: flex;
    align-items: center;
}
.bb-wishlist-link:hover { color: var(--bb-yellow); }

.bb-cart-link {
    position: relative;
    color: var(--bb-white);
    display: flex;
    align-items: center;
}
.bb-cart-link:hover { color: var(--bb-yellow); }

.bb-cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Toggle */
.bb-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.bb-mobile-toggle span {
    width: 24px;
    height: 2px;
    background: var(--bb-white);
    border-radius: 2px;
    transition: all var(--bb-transition);
}

/* ── Navigation ─────────────────────────────────────────── */
.bb-nav {
    background: var(--bb-navy-light);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.bb-nav__menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 0;
}

.bb-nav__menu li { position: relative; }

.bb-nav__menu > li > a {
    display: block;
    padding: 14px 20px;
    color: var(--bb-white);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--bb-transition);
}

.bb-nav__menu > li > a:hover,
.bb-nav__menu > li.current-menu-item > a {
    color: var(--bb-yellow);
    background: rgba(255,255,255,0.04);
}

/* Dropdown */
.bb-nav__menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bb-navy);
    min-width: 220px;
    list-style: none;
    box-shadow: var(--bb-shadow-lg);
    border-radius: 0 0 var(--bb-radius) var(--bb-radius);
    z-index: 100;
}

.bb-nav__menu li:hover > .sub-menu { display: block; }

.bb-nav__menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--bb-white);
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bb-nav__menu .sub-menu a:hover { background: rgba(255,255,255,0.06); color: var(--bb-yellow); }

/* ── Mega Menu ──────────────────────────────────────────── */
.bb-mega-menu-parent { position: static !important; }
.bb-mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bb-white);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    z-index: 100;
    border-top: 3px solid var(--bb-yellow);
}
.bb-mega-menu-parent:hover > .bb-mega-menu { display: block; }
.bb-mega-menu__inner {
    max-width: var(--bb-container);
    margin: 0 auto;
    padding: 24px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 16px;
}
.bb-mega-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--bb-text);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--bb-radius);
    transition: all var(--bb-transition);
    text-decoration: none;
}
.bb-mega-menu__item:hover {
    background: #f5f5f5;
    color: var(--bb-navy);
    padding-left: 16px;
}
.bb-mega-menu__arrow {
    color: var(--bb-green-text);
    font-weight: 700;
    font-size: 16px;
}
.bb-mega-menu__all {
    grid-column: 1 / -1;
    display: inline-block;
    margin-top: 12px;
    padding: 10px 20px;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--bb-radius);
    text-align: center;
    text-decoration: none;
    transition: background var(--bb-transition);
}
.bb-mega-menu__all:hover { background: var(--bb-yellow-hover); color: var(--bb-dark); }

/* ── Live Search Dropdown ───────────────────────────────── */
.bb-live-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: 0 0 var(--bb-radius) var(--bb-radius);
    box-shadow: var(--bb-shadow-lg);
    z-index: 101;
    max-height: 400px;
    overflow-y: auto;
}

.bb-live-search-results {
    list-style: none;
}
.bb-live-search-results li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--bb-text);
    border-bottom: 1px solid var(--bb-gray-light);
}
.bb-live-search-results li a:hover { background: var(--bb-light); }
.bb-live-search-results li a img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; }
.bb-live-search-results .price { font-size: 13px; color: var(--bb-gray); }
.bb-no-results { padding: 16px; text-align: center; color: var(--bb-gray); }

/* ── Hero Section ───────────────────────────────────────── */
.bb-hero {
    background: var(--bb-navy) url('../img/hero-bg.png') center/cover no-repeat;
    padding: 80px 0;
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.bb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(26,31,46,0.92) 0%, rgba(26,31,46,0.7) 45%, rgba(26,31,46,0.15) 100%);
    pointer-events: none;
}
.bb-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(26,31,46,0.4) 0%, transparent 30%, transparent 70%, rgba(26,31,46,0.5) 100%);
    pointer-events: none;
}
.bb-hero .bb-container {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 100%;
    margin: 0;
    padding-left: max(20px, calc((100vw - var(--bb-container)) / 2 + 20px));
    padding-right: 20px;
}
.bb-hero__content {
    max-width: 650px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
.bb-hero__title {
    text-align: left !important;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: var(--bb-white);
    margin-bottom: 16px;
    line-height: 1.2;
}
.bb-hero__subtitle {
    font-size: 17px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 28px;
    line-height: 1.6;
}
.bb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.bb-hero__features {
    list-style: none;
    margin-bottom: 16px;
}
.bb-hero__features li {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    padding: 6px 0 6px 32px;
    position: relative;
}
.bb-hero__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--bb-yellow);
    color: var(--bb-white);
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bbPulse 2s ease-in-out infinite;
}
@keyframes bbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(151,202,67,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(151,202,67,0); }
}
.bb-hero__disclaimer {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

/* ── Sections ───────────────────────────────────────────── */
.bb-section { padding: 60px 0; }
.bb-section--light { background: var(--bb-light); }
.bb-section--dark  { background: var(--bb-navy); }
.bb-section--yellow { background: var(--bb-yellow); }

.bb-section-heading { text-align: center; margin-bottom: 40px; }
.bb-section-heading h4,
.bb-section-heading .bb-eyebrow {
    display: inline-flex;
    margin-top: 0;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--bb-green-text);
    margin-bottom: 14px;
    font-weight: 700;
}
.bb-section-heading h4::before,
.bb-section-heading h4::after,
.bb-section-heading .bb-eyebrow::before,
.bb-section-heading .bb-eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    flex-shrink: 0;
}
.bb-section-heading h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--bb-text);
    position: relative;
    padding-bottom: 18px;
}
.bb-section-heading h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    background: var(--bb-yellow);
    border-radius: 2px;
}
.bb-section-heading .bb-section-desc {
    margin-top: 16px;
    color: var(--bb-gray);
    font-size: 15px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}
.bb-section-heading--light h4,
.bb-section-heading--light .bb-eyebrow { color: var(--bb-yellow); }
.bb-section-heading--light h2 { color: var(--bb-white); }
.bb-section-heading--light h2::after { background: var(--bb-yellow); }
.bb-section-heading--light .bb-section-desc { color: rgba(255,255,255,0.7); }

.bb-section--yellow .bb-section-heading h4,
.bb-section--yellow .bb-section-heading .bb-eyebrow { color: var(--bb-dark); }
.bb-section--yellow .bb-section-heading h4::before,
.bb-section--yellow .bb-section-heading h4::after,
.bb-section--yellow .bb-section-heading .bb-eyebrow::before,
.bb-section--yellow .bb-section-heading .bb-eyebrow::after { background: var(--bb-dark); }
.bb-section--yellow .bb-section-heading h2 { color: var(--bb-dark); }
.bb-section--yellow .bb-section-heading h2::after { background: var(--bb-dark); }

/* ── Shop Sub-Banner ─────────────────────────────────────── */
.bb-shop-subbanner {
    background: var(--bb-white);
    border-bottom: 1px solid var(--bb-gray-light);
    padding: 20px 0;
}
.bb-shop-subbanner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.bb-shop-subbanner__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--bb-radius);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.bb-shop-subbanner__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.bb-shop-subbanner__card--specials {
    background: linear-gradient(135deg, var(--bb-navy) 0%, #2a3352 100%);
    color: var(--bb-white);
}
.bb-shop-subbanner__card--categories {
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    color: var(--bb-text);
    align-items: flex-start;
    cursor: default;
}
.bb-shop-subbanner__card--categories:hover {
    transform: none;
    box-shadow: none;
}
.bb-shop-subbanner__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-shop-subbanner__card--specials .bb-shop-subbanner__icon {
    background: var(--bb-yellow);
    color: var(--bb-dark);
}
.bb-shop-subbanner__card--categories .bb-shop-subbanner__icon {
    background: var(--bb-navy);
    color: var(--bb-white);
}
.bb-shop-subbanner__body {
    flex: 1;
    min-width: 0;
}
.bb-shop-subbanner__body strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}
.bb-shop-subbanner__card--specials .bb-shop-subbanner__body strong { color: var(--bb-white); }
.bb-shop-subbanner__card--categories .bb-shop-subbanner__body strong { color: var(--bb-navy); }
.bb-shop-subbanner__body > span {
    font-size: 13px;
    opacity: 0.8;
}
.bb-shop-subbanner__arrow {
    font-size: 22px;
    flex-shrink: 0;
    opacity: 0.7;
}
.bb-shop-subbanner__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.bb-shop-subbanner__cat-pill {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-navy);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bb-shop-subbanner__cat-pill:hover {
    background: var(--bb-navy);
    border-color: var(--bb-navy);
    color: var(--bb-white);
}
@media (max-width: 768px) {
    .bb-shop-subbanner__grid { grid-template-columns: 1fr; }
    .bb-shop-subbanner__card--categories { display: none; }
}

.bb-section-cta { text-align: center; margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Product Grid (WooCommerce) ─────────────────────────── */
.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    clear: none !important;
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

/* Homepage product carousel row */
.bb-product-carousel {
    position: relative;
    overflow: visible;
    padding: 0 30px;
}
.bb-product-carousel > .woocommerce {
    overflow: hidden;
}
.bb-product-carousel .bb-carousel-track,
.bb-product-carousel .woocommerce ul.products,
.bb-product-carousel ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    transition: transform 0.4s ease;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bb-product-carousel .bb-carousel-track li.product,
.bb-product-carousel .woocommerce ul.products li.product,
.bb-product-carousel ul.products li.product {
    flex: 0 0 calc(25% - 18px) !important;
    width: calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
}
.bb-product-carousel .bb-carousel-track::before,
.bb-product-carousel .bb-carousel-track::after,
.bb-product-carousel ul.products::before,
.bb-product-carousel ul.products::after {
    display: none !important;
    content: none !important;
}
.bb-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    color: var(--bb-navy);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--bb-shadow-lg);
    transition: all var(--bb-transition);
}
.bb-carousel-arrow:hover {
    background: var(--bb-yellow);
    border-color: var(--bb-yellow);
    color: var(--bb-dark);
}
.bb-carousel-arrow--prev {
    left: 5px;
}
.bb-carousel-arrow--next {
    right: 5px;
}

@media (max-width: 1024px) {
    .bb-product-carousel .bb-carousel-track li.product,
    .bb-product-carousel .woocommerce ul.products li.product,
    .bb-product-carousel ul.products li.product {
        flex: 0 0 calc(33.333% - 16px) !important;
        width: calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
}
@media (max-width: 768px) {
    .bb-product-carousel .bb-carousel-track li.product,
    .bb-product-carousel .woocommerce ul.products li.product,
    .bb-product-carousel ul.products li.product {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
    .bb-carousel-arrow { width: 36px; height: 36px; font-size: 18px; }
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    padding: 16px;
    background: var(--bb-light);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 16px 4px;
    color: var(--bb-text);
    line-height: 1.4;
}

.woocommerce ul.products li.product .price {
    padding: 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-green-text);
}
.woocommerce ul.products li.product .price del {
    color: var(--bb-gray);
    font-size: 13px;
    font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--bb-green-text);
}

.bb-vat-label {
    display: inline;
    font-size: 11px;
    color: var(--bb-gray);
    font-weight: 400;
    margin-left: 4px;
}

.woocommerce ul.products li.product .button {
    display: block;
    margin: auto 0 0 0;
    padding: 12px 16px;
    background: var(--bb-yellow);
    color: var(--bb-white);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0 0 var(--bb-radius) var(--bb-radius);
    border: none;
    cursor: pointer;
    transition: background var(--bb-transition);
    width: 100%;
}
/* Hide WC's default "View Cart" link that appears after add to cart */
.woocommerce ul.products li.product a.added_to_cart {
    display: none !important;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--bb-yellow-hover);
    color: var(--bb-white);
}

/* ── Snackbar notification ────────────────────────── */
.bb-snackbar {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bb-navy);
    color: var(--bb-white);
    padding: 14px 24px;
    border-radius: var(--bb-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--bb-font);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: bottom 0.35s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
}
.bb-snackbar.is-visible {
    bottom: 32px;
}
.bb-snackbar__icon {
    width: 22px;
    height: 22px;
    background: var(--bb-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bb-snackbar__icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--bb-white);
    fill: none;
    stroke-width: 3;
}
.bb-snackbar__link {
    color: var(--bb-yellow);
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}
.bb-snackbar__link:hover {
    text-decoration: underline;
}

/* Sale badge */
.bb-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--bb-red);
    color: var(--bb-white);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--bb-radius);
    z-index: 2;
}

.bb-sold-out-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #d32f2f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: var(--bb-radius);
    text-transform: uppercase;
    z-index: 2;
}

.bb-product-brand,
.woocommerce ul.products li.product .bb-product-brand {
    display: block !important;
    padding: 0 16px !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    overflow: hidden;
}
.bb-product-brand a,
.woocommerce ul.products li.product .bb-product-brand a { color: var(--bb-green-text); font-weight: 600; display: block; }

/* ── Shop Layout ────────────────────────────────────────── */
.bb-shop-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
}

.bb-shop-sidebar {
    position: sticky;
    /* .bb-header is sticky, and the WP admin bar pushes it down another
       32px, so a hardcoded offset clips the first filter heading.
       theme.js measures both and sets --bb-sticky-top at runtime;
       140px is the logged-out fallback. */
    top: var(--bb-sticky-top, 140px);
    align-self: start;
    max-height: calc(100vh - var(--bb-sticky-top, 140px) - 20px);
    overflow-y: auto;
    padding-right: 8px;
}

.bb-sidebar-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--bb-text);
}

.bb-widget { margin-bottom: 24px; }
.bb-widget-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bb-yellow);
}

.bb-category-filter,
.bb-brand-filter {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Parent-level items ───────────────────────────────── */
.bb-category-filter > li,
.bb-brand-filter li {
    border-bottom: 1px solid var(--bb-gray-light);
}
.bb-category-filter > li:last-child { border-bottom: none; }

.bb-category-filter > li > a,
.bb-brand-filter li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 4px;
    color: var(--bb-text);
    font-size: 13px;
    font-weight: 500;
    transition: color var(--bb-transition);
    gap: 6px;
}
.bb-category-filter > li > a {
    font-weight: 600; /* parents are bold */
}

/* Hover / active state */
.bb-category-filter li a:hover,
.bb-brand-filter li a:hover,
.bb-category-filter li.active > a,
.bb-brand-filter li.active a {
    color: var(--bb-green-text);
}
.bb-category-filter li.active > a,
.bb-brand-filter li.active a {
    position: relative;
}

/* Tick on active items */
.bb-category-filter li.active > a .count::before,
.bb-brand-filter li.active a .count::before {
    content: '\2713';
    margin-right: 6px;
    color: var(--bb-green-text);
    font-weight: 700;
    font-size: 14px;
}

.bb-category-filter .count,
.bb-brand-filter .count {
    color: var(--bb-text-light);
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Sub-category children ────────────────────────────── */
.bb-category-filter__children {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 0;
    border-left: 2px solid var(--bb-gray-light);
    margin-left: 10px;
}
.bb-category-filter__children li {
    border-bottom: none;
}
.bb-category-filter__children li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    padding: 6px 4px 6px 12px;
    color: var(--bb-gray);
    transition: color var(--bb-transition), padding-left var(--bb-transition);
    gap: 6px;
}
.bb-category-filter__children li a:hover,
.bb-category-filter__children li.active a {
    color: var(--bb-green-text);
    padding-left: 14px;
}
.bb-category-filter__children li.active a {
    font-weight: 600;
    border-left: 2px solid var(--bb-yellow);
    margin-left: -2px;
}
.bb-category-filter__children .count {
    color: var(--bb-text-light);
    font-size: 11px;
}

/* Active Filters */
.bb-active-filters {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--bb-radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.bb-active-filters__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.bb-active-filters__header h5 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-dark);
}
.bb-active-filters__clear {
    font-size: 12px;
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
}
.bb-active-filters__clear:hover { text-decoration: underline; }
.bb-active-filters__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bb-active-filters__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bb-yellow);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: background var(--bb-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.bb-active-filters__tag:hover {
    background: var(--bb-yellow-hover);
    color: #fff;
}

.bb-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.bb-shop-toolbar__info { flex: 1; color: var(--bb-gray); font-size: 14px; }
.bb-shop-toolbar .woocommerce-ordering select {
    padding: 8px 12px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-size: 13px;
    font-family: var(--bb-font);
}

.bb-sidebar-toggle { display: none; }

/* ── Brands Grid ────────────────────────────────────────── */
.bb-section-desc {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    max-width: 680px;
    margin: 12px auto 0;
    line-height: 1.6;
}
.bb-brands-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.bb-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    padding: 10px;
    min-height: 140px;
    overflow: hidden;
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
}
.bb-brand-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
}
.bb-brand-item img {
    width: 150%;
    height: auto;
    object-fit: contain;
    max-height: none;
}
.bb-brand-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--bb-text);
}

/* ── Single Product ─────────────────────────────────────── */
.bb-single-product__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

/* Gallery */
.bb-single-product__gallery {
    position: relative;
}
.bb-single-product__gallery .woocommerce-product-gallery {
    width: 100% !important;
}
.bb-single-product__gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    border-radius: var(--bb-radius);
    background: var(--bb-light);
}
.bb-single-product__gallery .bb-sale-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
}
.bb-single-product__gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
}
.bb-single-product__gallery .flex-control-thumbs li {
    flex: 0 0 70px;
}
.bb-single-product__gallery .flex-control-thumbs li img {
    border-radius: var(--bb-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--bb-transition);
}
.bb-single-product__gallery .flex-control-thumbs li img:hover,
.bb-single-product__gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--bb-yellow);
}

/* Summary */
.bb-single-product__brand {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-green-text);
    margin-bottom: 8px;
}
.bb-single-product__brand:hover { color: var(--bb-yellow-hover); }

.bb-single-product__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--bb-dark);
    line-height: 1.3;
    margin-bottom: 12px;
}

.bb-single-product__excerpt {
    color: var(--bb-gray);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bb-gray-light);
}

.bb-single-product__price .price,
.bb-single-product__price .price .woocommerce-Price-amount,
.woocommerce .bb-single-product__price .price {
    font-size: 28px !important;
    font-weight: 800;
    color: var(--bb-green-text) !important;
    padding: 0;
}
.bb-single-product__price .price del,
.bb-single-product__price .price del .woocommerce-Price-amount {
    font-size: 18px !important;
    color: var(--bb-gray) !important;
    font-weight: 400;
}
.bb-single-product__price .price ins,
.bb-single-product__price .price ins .woocommerce-Price-amount {
    text-decoration: none;
    color: var(--bb-green-text) !important;
}
.bb-single-product__price .bb-vat-label {
    display: inline;
    margin-left: 6px;
}

.bb-single-product__saving {
    display: inline-block;
    background: #fef3cd;
    color: #856404;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--bb-radius);
    margin-top: 4px;
}

.bb-single-product__stock {
    margin: 16px 0;
}
.bb-stock {
    font-size: 14px;
    font-weight: 600;
}
.bb-stock--in { color: var(--bb-green-text); }
.bb-stock--out { color: var(--bb-red); }

.bb-single-product__add-to-cart {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bb-gray-light);
}
.bb-single-product__add-to-cart form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bb-single-product__add-to-cart .quantity input {
    width: 70px;
    padding: 12px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-size: 15px;
    font-family: var(--bb-font);
    text-align: center;
}
.bb-single-product__add-to-cart .single_add_to_cart_button,
.woocommerce .bb-single-product__add-to-cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart .button {
    flex: 1;
    padding: 14px 24px !important;
    background: var(--bb-yellow) !important;
    color: var(--bb-white) !important;
    border: none !important;
    border-radius: var(--bb-radius) !important;
    font-size: 15px !important;
    font-weight: 700;
    font-family: var(--bb-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--bb-transition);
}
.bb-single-product__add-to-cart .single_add_to_cart_button:hover,
.woocommerce .bb-single-product__add-to-cart .button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
    background: var(--bb-yellow-hover) !important;
}

/* Get a Quote button */
.bb-single-product__quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: transparent;
    color: var(--bb-navy);
    border: 2px solid var(--bb-navy);
    border-radius: var(--bb-radius);
    font-size: 15px;
    font-weight: 700;
    font-family: var(--bb-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--bb-transition);
    text-decoration: none;
}
.bb-single-product__quote-btn:hover {
    background: var(--bb-navy);
    color: var(--bb-white);
}

/* Quote-only product (no price) */
.bb-single-product__quote-only-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 16px 32px;
    background: var(--bb-yellow);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--bb-font);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background var(--bb-transition);
    text-decoration: none;
}
.bb-single-product__quote-only-btn:hover {
    background: var(--bb-yellow-hover);
    color: var(--bb-white);
}

/* Quote basket notification */
.bb-quote-added-notice {
    display: none;
    padding: 10px 16px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: var(--bb-radius);
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
}
.bb-quote-added-notice.is-visible {
    display: block;
}

/* Quote basket count badge */
.bb-quote-count {
    display: none;
    background: var(--bb-yellow);
    color: var(--bb-white);
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    right: -6px;
}
.bb-quote-count.has-items {
    display: block;
}

/* Quote basket table on Request a Quote page */
.bb-quote-basket {
    margin-bottom: 32px;
}
.bb-quote-basket h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--bb-navy);
}
.bb-quote-basket table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
.bb-quote-basket th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bb-gray-light);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-navy);
}
.bb-quote-basket td {
    padding: 12px;
    border-bottom: 1px solid var(--bb-gray-light);
    font-size: 14px;
    vertical-align: middle;
}
.bb-quote-basket td img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}
.bb-quote-basket .bb-remove-quote-item {
    color: #c62828;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 14px;
}
.bb-quote-basket .bb-remove-quote-item:hover {
    text-decoration: underline;
}

/* ── Quote Page Layout ────────────────────────────── */
.bb-quote-page-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    padding: 40px 0;
}
.bb-quote-page-main {
    min-width: 0;
}
.bb-quote-page-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Steps */
.bb-quote-step {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 32px;
    margin-bottom: 24px;
}
.bb-quote-step__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bb-gray-light);
}
.bb-quote-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bb-yellow);
    color: var(--bb-white);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}
.bb-quote-step__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-navy);
    margin: 0;
}

/* Sidebar cards */
.bb-quote-sidebar-card {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 24px;
    margin-bottom: 20px;
}
.bb-quote-sidebar-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--bb-navy);
    margin: 0 0 16px;
}
.bb-quote-how-step {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.bb-quote-how-step:last-child {
    margin-bottom: 0;
}
.bb-quote-how-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bb-yellow);
    color: var(--bb-white);
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.bb-quote-how-step strong {
    display: block;
    font-size: 14px;
    color: var(--bb-navy);
    margin-bottom: 2px;
}
.bb-quote-how-step p {
    font-size: 13px;
    color: var(--bb-gray);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .bb-quote-page-layout {
        grid-template-columns: 1fr;
    }
    .bb-quote-page-sidebar {
        position: static;
    }
    .bb-quote-step {
        padding: 20px;
    }
}

/* Meta */
.bb-single-product__meta {
    margin-bottom: 24px;
}
.bb-meta-row {
    font-size: 14px;
    padding: 6px 0;
    color: var(--bb-gray);
    border-bottom: 1px solid var(--bb-gray-light);
}
.bb-meta-row:last-child { border-bottom: none; }
.bb-meta-row span { font-weight: 600; color: var(--bb-dark); margin-right: 8px; }
.bb-meta-row a { color: var(--bb-green-text); }
.bb-meta-row a:hover { color: var(--bb-green-text-hover); }

/* Trust badges */
.bb-single-product__trust {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px;
    background: var(--bb-light);
    border-radius: var(--bb-radius);
}
.bb-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-dark);
}
.bb-trust-item svg { color: var(--bb-yellow); flex-shrink: 0; }

/* WC Tabs */
.woocommerce div.product.bb-single-product .woocommerce-tabs {
    margin-bottom: 48px;
}

/* Product Video */
.bb-single-product__video {
    margin: 40px 0;
    max-width: 640px;
}
.bb-single-product__video-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-bottom: none;
    border-radius: var(--bb-radius) var(--bb-radius) 0 0;
}
.bb-single-product__video-header svg {
    color: var(--bb-yellow);
    flex-shrink: 0;
}
.bb-single-product__video-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bb-single-product__video-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 0 0 var(--bb-radius) var(--bb-radius);
    border: 1px solid var(--bb-gray-light);
    border-top: none;
}
.bb-single-product__video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* App Download Banner */
.bb-app-banner {
    background: var(--bb-navy);
    padding: 32px 0;
}
.bb-app-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.bb-app-banner__text {
    color: #fff;
    text-align: left;
}
.bb-app-banner__text h4,
.bb-app-banner__text h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
}
.bb-app-banner__text p {
    margin: 0;
    font-size: 13px;
    color: #9ca3af;
}
.bb-app-banner__links {
    display: flex;
    gap: 12px;
    align-items: center;
}
.bb-app-banner__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s;
}
.bb-app-banner__links a:hover { opacity: .85; }
.bb-app-badge--ios {
    background: #fff;
    color: #000;
}
.bb-app-badge--android {
    background: var(--bb-yellow);
    color: #fff;
}
.bb-app-badge--android:hover {
    color: #fff;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs {
    list-style: none;
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 0 24px;
    border-bottom: 2px solid var(--bb-gray-light);
}
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-gray);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--bb-transition);
}
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--bb-green-text);
    border-bottom-color: var(--bb-yellow);
}
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--bb-dark);
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel {
    padding: 0;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel p {
    color: var(--bb-gray);
    line-height: 1.7;
    margin-bottom: 12px;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel table th,
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bb-gray-light);
    font-size: 14px;
    text-align: left;
}
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel table th {
    font-weight: 600;
    color: var(--bb-dark);
    width: 200px;
}

/* Related Products */
.bb-single-product .related.products {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--bb-gray-light);
}
.bb-single-product .related.products > h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 24px;
}

/* Single product responsive */
@media (max-width: 768px) {
    .bb-single-product__top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .bb-single-product__trust { flex-direction: column; }
    /* Prevent content from touching screen edges on mobile */
    .single-product .bb-single-product {
        padding: 0 4px;
    }
    .single-product .woocommerce-product-gallery {
        max-width: 100%;
        overflow: hidden;
    }
}

/* ── Blog Grid ──────────────────────────────────────────── */
.bb-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bb-blog-card {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
    display: flex;
    flex-direction: column;
}
.bb-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
}

.bb-blog-card__image {
    display: block;
    position: relative;
    overflow: hidden;
}
.bb-blog-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.bb-blog-card__date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    padding: 6px 10px;
    border-radius: var(--bb-radius);
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}
.bb-blog-card__date .day { display: block; font-size: 18px; }
.bb-blog-card__date .month { display: block; font-size: 11px; text-transform: uppercase; }

.bb-blog-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bb-blog-card__placeholder {
    width: 100%;
    height: 200px;
    background: var(--bb-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bb-gray-light);
}

.bb-blog-card__cats a {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--bb-green-text);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bb-blog-card__body h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 8px 0;
    line-height: 1.4;
}
.bb-blog-card__body h3 a { color: var(--bb-text); }
.bb-blog-card__body h3 a:hover { color: var(--bb-yellow); }

.bb-blog-card__body p {
    font-size: 14px;
    color: var(--bb-gray);
    margin-bottom: 12px;
    flex: 1;
}

.bb-read-more {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bb-green-text);
}
.bb-read-more:hover { color: var(--bb-yellow-hover); }

/* ── Blog Category Filter Bar ───────────────────────────── */
.bb-blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.bb-blog-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bb-white);
    color: var(--bb-text);
    border: 1px solid var(--bb-gray-light);
    transition: all var(--bb-transition);
}
.bb-blog-filter:hover {
    border-color: var(--bb-yellow);
    color: var(--bb-yellow);
}
.bb-blog-filter--active {
    background: var(--bb-yellow);
    color: var(--bb-dark);
    border-color: var(--bb-yellow);
}
.bb-blog-filter--active:hover {
    background: var(--bb-yellow-hover);
    border-color: var(--bb-yellow-hover);
    color: var(--bb-dark);
}
.bb-blog-filter__count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,0.08);
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.4;
}
.bb-blog-filter--active .bb-blog-filter__count {
    background: rgba(0,0,0,0.15);
}

/* ── Newsletter ─────────────────────────────────────────── */
.bb-newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 0;
}
.bb-newsletter-form input[type="email"] {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid var(--bb-dark);
    border-right: none;
    border-radius: var(--bb-radius) 0 0 var(--bb-radius);
    font-size: 14px;
    font-family: var(--bb-font);
    outline: none;
}
.bb-newsletter-form .bb-btn {
    border-radius: 0 var(--bb-radius) var(--bb-radius) 0;
    white-space: nowrap;
    background: var(--bb-navy);
    color: var(--bb-white);
    border-color: var(--bb-navy);
}
.bb-newsletter-form .bb-btn:hover {
    background: var(--bb-navy-light);
    color: var(--bb-white);
}

.bb-newsletter-msg {
    text-align: center;
    margin-top: 12px;
    font-weight: 600;
}

/* ── Page Header ────────────────────────────────────────── */
.bb-page-header {
    background: var(--bb-navy);
    padding: 28px 0 24px;
    color: var(--bb-white);
}
.bb-page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--bb-white);
    margin-bottom: 4px;
}
.bb-page-header p {
    color: rgba(255,255,255,0.65);
    font-size: 15px;
    margin: 0;
}
.bb-page-header--dark {
    background: var(--bb-navy);
    color: var(--bb-white);
}
.bb-page-header--dark h1 { color: var(--bb-white); }
.bb-page-header--dark p { color: rgba(255,255,255,0.65); }

/* Banner breadcrumbs */
.bb-page-header .bb-breadcrumb,
.bb-page-header .bb-breadcrumb a,
.bb-page-header .woocommerce-breadcrumb,
.bb-page-header .woocommerce-breadcrumb a {
    color: rgba(255,255,255,0.5);
}
.bb-page-header .bb-breadcrumb a:hover,
.bb-page-header .woocommerce-breadcrumb a:hover {
    color: var(--bb-yellow);
}

.bb-breadcrumb,
.bb-breadcrumb a,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
    font-size: 13px;
    color: var(--bb-gray);
    margin-bottom: 10px;
}
.bb-page-header .bb-breadcrumb,
.bb-page-header .woocommerce-breadcrumb {
    margin-bottom: 10px;
}
.bb-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover { color: var(--bb-yellow); }

/* Banner row layout for shop pages (result count left, sorting right) */
.bb-page-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.bb-page-header__left { flex: 1; min-width: 0; }
.bb-page-header__right {
    flex-shrink: 0;
    align-self: flex-end;
}
@media (max-width: 640px) {
    .bb-page-header {
        padding: 20px 0 18px;
    }
    .bb-page-header h1 {
        font-size: 22px !important;
    }
    .bb-page-header p {
        font-size: 13px;
    }
    .bb-page-header__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .bb-page-header__right {
        width: 100%;
    }
    .bb-page-header__right .woocommerce-ordering select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .bb-page-header__count {
        font-size: 12px;
    }
}

/* Result count in banner */
.bb-page-header__count {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.bb-page-header__count .woocommerce-result-count {
    margin: 0;
    padding: 0;
    color: inherit;
}

/* Ordering dropdown in banner */
.bb-page-header__right .woocommerce-ordering {
    margin: 0;
}
.bb-page-header__right .woocommerce-ordering select {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--bb-radius);
    font-size: 13px;
    font-family: var(--bb-font);
    background: rgba(255,255,255,0.1);
    color: var(--bb-white);
    cursor: pointer;
}
.bb-page-header__right .woocommerce-ordering select option {
    background: var(--bb-navy);
    color: var(--bb-white);
}

/* ── Main Content ───────────────────────────────────────── */
.bb-main { padding: 40px 0; }

.bb-page-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--bb-text);
}
.bb-page-content p  { margin-bottom: 16px; }
.bb-page-content h2 {
    margin: 36px 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bb-navy);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bb-gray-light);
}
.bb-page-content h2:first-child { margin-top: 0; }
.bb-page-content h3 {
    margin: 28px 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bb-navy);
}
.bb-page-content strong { color: var(--bb-navy); }
.bb-page-content a { color: var(--bb-green-text); font-weight: 500; }
.bb-page-content a:hover { color: var(--bb-green-text-hover); text-decoration: underline; }
.bb-page-content ul,
.bb-page-content ol {
    margin: 0 0 16px 0;
    padding-left: 20px;
    list-style-position: inside;
}
.bb-page-content li {
    margin-bottom: 8px;
    line-height: 1.7;
    padding-left: 4px;
}

/* ── Forms ──────────────────────────────────────────────── */
.bb-form-row { margin-bottom: 20px; }
.bb-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.bb-form-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--bb-text);
}
.bb-form-field label .required { color: var(--bb-red); }

.bb-form-field input,
.bb-form-field select,
.bb-form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-size: 14px;
    font-family: var(--bb-font);
    transition: border-color var(--bb-transition);
}
.bb-form-field input:focus,
.bb-form-field select:focus,
.bb-form-field textarea:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}

.bb-form-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}
.bb-form-field--checkbox input { width: auto; }

.bb-form-success {
    background: #d4edda;
    color: #155724;
    padding: 16px;
    border-radius: var(--bb-radius);
    margin-bottom: 20px;
    font-weight: 600;
}
.bb-form-errors {
    background: #f8d7da;
    color: #721c24;
    padding: 16px;
    border-radius: var(--bb-radius);
    margin-bottom: 20px;
}
.bb-form-errors p { margin-bottom: 4px; }

/* ── Contact Page ───────────────────────────────────────── */
.bb-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.bb-contact-section__heading {
    font-size: 26px;
    font-weight: 800;
    color: var(--bb-navy);
    margin-bottom: 6px;
}
.bb-contact-section__sub {
    font-size: 15px;
    color: var(--bb-gray);
    margin-bottom: 24px;
}

.bb-whatsapp-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
}

.bb-whatsapp-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--bb-light);
    border-radius: var(--bb-radius);
    color: var(--bb-text);
    transition: all var(--bb-transition);
    border: 2px solid transparent;
}
.bb-whatsapp-card:hover {
    border-color: #25D366;
    background: #f0faf3;
    color: var(--bb-text);
}
.bb-whatsapp-card__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f9ed;
    border-radius: 50%;
}
.bb-whatsapp-card strong { display: block; font-size: 16px; color: var(--bb-navy); }
.bb-whatsapp-card p { font-size: 13px; color: var(--bb-gray); margin: 4px 0 0; }

/* Chat Live — two-column row */
.bb-contact-chat-left .bb-whatsapp-cards {
    max-width: 100%;
}
.bb-contact-reach-below {
    margin-top: 32px;
}
.bb-contact-chat-row {
    display: flex;
    gap: 40px;
    align-items: stretch;
    flex-wrap: wrap;
}
.bb-contact-chat-left {
    width: calc(50% - 20px);
    flex: none;
}
.bb-contact-quick-form {
    width: calc(50% - 20px);
    flex: none;
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 28px 28px 24px;
}
.bb-quick-form__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bb-navy);
    margin: 0 0 20px;
}
.bb-quick-contact-msg {
    padding: 12px 16px;
    border-radius: var(--bb-radius);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.bb-quick-contact-msg--success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.bb-quick-contact-msg--error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* Reach Out grid */
.bb-reach-out-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.bb-reach-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--bb-light);
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-gray-light);
}
.bb-reach-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-white);
    border-radius: 50%;
    color: var(--bb-yellow);
    border: 1px solid var(--bb-gray-light);
}
.bb-reach-card strong {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-gray);
    margin-bottom: 4px;
}
.bb-reach-card p {
    font-size: 15px;
    color: var(--bb-text);
    margin: 0;
    font-weight: 600;
}
.bb-reach-card a {
    color: var(--bb-yellow);
}
.bb-reach-card a:hover {
    color: var(--bb-yellow-hover);
}

.bb-contact-details p { margin-bottom: 8px; font-size: 15px; }

/* ── Map ────────────────────────────────────────────────── */
.bb-map-section { position: relative; }
.bb-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(26,31,46,0.88);
    color: var(--bb-white);
    padding: 30px 0;
    text-align: center;
}
.bb-map-title { font-size: 24px; margin-bottom: 8px; }
.bb-map-overlay h5,
.bb-map-overlay .bb-map-address { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--bb-yellow); }
.bb-map-overlay p { font-size: 14px; color: rgba(255,255,255,0.7); }
.bb-map iframe { width: 100%; border: 0; }

/* ── Single Post ────────────────────────────────────────── */
.bb-single-post__image { margin-bottom: 30px; border-radius: var(--bb-radius); overflow: hidden; }
.bb-single-post__image img { width: 100%; height: 400px; object-fit: cover; display: block; }
.bb-single-post__header { margin-bottom: 30px; }
.bb-single-post__header h1, .bb-single-post__title { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.bb-single-post__meta { font-size: 13px; color: var(--bb-gray); display: flex; gap: 16px; flex-wrap: wrap; }
.bb-single-post__meta a { color: var(--bb-yellow); }
.bb-single-post__content { line-height: 1.8; font-size: 16px; }
.bb-single-post__content p { margin-bottom: 18px; }
.bb-single-post__content h2 { margin: 36px 0 16px; }
.bb-single-post__content h3 { margin: 28px 0 12px; }
.bb-single-post__content img { border-radius: var(--bb-radius); margin: 20px 0; }
.bb-single-post__content ul, .bb-single-post__content ol { padding-left: 24px; margin-bottom: 16px; }

.bb-post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--bb-gray-light);
}
.bb-post-nav a { color: var(--bb-navy); font-weight: 600; font-size: 14px; }
.bb-post-nav a:hover { color: var(--bb-yellow); }

/* ── 404 ────────────────────────────────────────────────── */
.bb-404 {
    text-align: center;
    padding: 80px 20px;
}
.bb-404 h1 { font-size: 120px; font-weight: 800; color: var(--bb-yellow); line-height: 1; }
.bb-404 h2 { font-size: 28px; margin: 16px 0; }
.bb-404 p { color: var(--bb-gray); max-width: 500px; margin: 0 auto 28px; }

/* ── Pagination ─────────────────────────────────────────── */
.bb-pagination {
    margin-top: 40px;
    text-align: center;
}
/* flex container — matches both WP native (.nav-links) and WooCommerce (ul.page-numbers) */
.bb-pagination .nav-links,
.bb-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* individual page buttons — :not(ul) prevents the container from getting button styles */
.bb-pagination .page-numbers:not(ul) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-gray-light);
    color: var(--bb-text);
    font-size: 14px;
    font-weight: 600;
    transition: all var(--bb-transition);
    text-decoration: none;
}
.bb-pagination .page-numbers.current:not(ul),
.bb-pagination .page-numbers:not(ul):hover {
    background: var(--bb-yellow);
    border-color: var(--bb-yellow);
    color: var(--bb-dark);
}

/* ── Footer ─────────────────────────────────────────────── */
.bb-footer {
    background: var(--bb-navy);
    color: rgba(255,255,255,0.75);
    padding-top: 50px;
}

.bb-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

.bb-footer-title {
    color: var(--bb-white);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bb-yellow);
    display: inline-block;
}

.bb-footer p { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }

.bb-footer-contact {
    list-style: none;
    font-size: 14px;
}
.bb-footer-contact li {
    padding: 4px 0;
}
.bb-footer-contact a { color: var(--bb-yellow); }

.bb-footer-links {
    list-style: none;
}
.bb-footer-links li { padding: 4px 0; }
.bb-footer-links a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    transition: color var(--bb-transition);
}
.bb-footer-links a:hover { color: var(--bb-yellow); }

.bb-footer-news {
    list-style: none;
}
.bb-footer-news li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bb-footer-news a {
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.5;
}
.bb-footer-news a:hover { color: var(--bb-yellow); }

.bb-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.bb-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bb-footer__bottom p { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }
/* The credit link here fell through to the global `a` colour, which is now the
   green tuned for white backgrounds and drops to 2.1:1 on this navy. On a dark
   ground the brand lime is the readable one, so it is set explicitly. */
.bb-footer__bottom a { color: var(--bb-yellow); }
.bb-footer__bottom a:hover { color: var(--bb-white); }

.bb-footer__social {
    display: flex;
    gap: 12px;
}
.bb-footer__social a {
    color: rgba(255,255,255,0.5);
    transition: color var(--bb-transition);
}
.bb-footer__social a:hover { color: var(--bb-yellow); }

/* ── WhatsApp Float ─────────────────────────────────────── */
.bb-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(37,211,102,0.4);
    transition: transform var(--bb-transition);
}
.bb-whatsapp-float:hover { transform: scale(1.1); }

/* ── WooCommerce Overrides ──────────────────────────────── */
.woocommerce span.onsale { display: none !important; }
.woocommerce-result-count { font-size: 14px; color: var(--bb-gray); }

.woocommerce nav.woocommerce-pagination { margin-top: 30px; }
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    border: none;
    list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-gray-light);
    color: var(--bb-text);
    font-size: 14px;
    font-weight: 600;
    background: var(--bb-white);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--bb-yellow);
    border-color: var(--bb-yellow);
    color: var(--bb-dark);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bb-shop-layout {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
    .bb-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .bb-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .bb-mobile-toggle { display: flex; }

    .bb-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bb-navy);
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .bb-nav--open { display: block; }
    .bb-nav__menu { flex-direction: column; }
    .bb-nav__menu > li > a { padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .bb-nav__menu .sub-menu { position: static; box-shadow: none; }

    /* Mobile mega menu */
    .bb-mega-menu-parent { position: relative !important; }
    .bb-mega-menu-parent:hover > .bb-mega-menu { display: none; }
    .bb-mega-menu-parent.bb-mega-open > .bb-mega-menu { display: block; }
    .bb-mega-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        background: var(--bb-navy) !important;
    }
    .bb-mega-menu__inner {
        grid-template-columns: 1fr;
        padding: 8px 0;
        gap: 0;
    }
    .bb-mega-menu__item {
        color: var(--bb-white);
        padding: 10px 32px;
        font-size: 13px;
        border-radius: 0;
    }
    .bb-mega-menu__item:hover { background: rgba(255,255,255,0.06); color: var(--bb-yellow); padding-left: 36px; }
    .bb-mega-menu__all {
        margin: 8px 20px 12px;
        font-size: 12px;
    }

    .bb-header__search { flex: 0 0 100%; max-width: none; order: 3; width: 100%; margin: 0; }
    .bb-header__inner { flex-wrap: wrap; gap: 12px; padding: 8px 16px; }

    .bb-top-bar { display: none; }

    .bb-header__logo { flex: 1; max-width: none; flex-shrink: 1; min-width: 0; order: 1; }
    .bb-header__actions { order: 2; margin-left: auto; }
    .bb-header__logo img,
    .bb-logo-img,
    .woocommerce .bb-header__logo img,
    .woocommerce-page .bb-header__logo img {
        height: 34px !important;
        width: auto !important;
        display: block !important;
    }

    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .bb-shop-layout {
        grid-template-columns: 1fr;
    }
    .bb-shop-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        width: 300px;
        height: 100%;
        max-height: 100%;
        background: var(--bb-white);
        z-index: 10000;
        overflow-y: auto;
        padding: 24px;
        transition: right var(--bb-transition);
        box-shadow: var(--bb-shadow-lg);
    }
    .bb-shop-sidebar--open { right: 0; }
    .bb-sidebar-close { display: block; }
    .bb-sidebar-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 90px;
        right: 24px;
        width: 56px;
        height: 56px;
        background: var(--bb-navy);
        color: var(--bb-white);
        border: none;
        border-radius: 50%;
        z-index: 9999;
        box-shadow: 0 4px 14px rgba(0,0,0,0.3);
        cursor: pointer;
        transition: transform var(--bb-transition);
        padding: 0;
        gap: 2px;
    }
    .bb-sidebar-toggle svg {
        width: 20px;
        height: 20px;
    }
    .bb-sidebar-toggle span {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1;
    }
    .bb-sidebar-toggle:hover { transform: scale(1.1); }

    .bb-hero { padding: 50px 0; min-height: 400px; }
    .bb-hero__title { font-size: 28px; }

    .bb-brands-grid { grid-template-columns: repeat(3, 1fr); }

    .bb-blog-grid { grid-template-columns: 1fr; }

    .bb-whatsapp-cards { grid-template-columns: 1fr; }

    .bb-contact-chat-row { flex-direction: column; gap: 24px; }
    .bb-contact-chat-left,
    .bb-contact-quick-form { width: 100%; flex: none; }

    .bb-contact-layout { grid-template-columns: 1fr; }
    .bb-reach-out-grid { grid-template-columns: 1fr; }

    .bb-footer__inner { grid-template-columns: 1fr; gap: 30px; }
    .bb-footer__bottom-inner { flex-direction: column; gap: 12px; text-align: center; }

    .bb-form-row--half { grid-template-columns: 1fr; }

    /* Carousel: show 2 cards at a time on mobile */
    .bb-product-carousel { padding: 0 16px; }
    .bb-product-carousel .bb-carousel-track li.product,
    .bb-product-carousel .woocommerce ul.products li.product,
    .bb-product-carousel ul.products li.product {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .bb-hero__actions { flex-direction: column; }
    .bb-hero__actions .bb-btn { width: 100%; }
}

/* ── Price on request / Quote-only products ─────────── */
.bb-single-product__price-note {
    font-size: 18px;
    font-weight: 600;
    color: var(--bb-navy);
    margin-bottom: 16px;
    font-style: italic;
}

/* Shop loop quote link button */
.bb-quote-link-btn {
    background: transparent !important;
    color: var(--bb-navy) !important;
    border: 2px solid var(--bb-navy) !important;
}
.bb-quote-link-btn:hover {
    background: var(--bb-navy) !important;
    color: var(--bb-white) !important;
}

/* Add to cart + quote row layout */
.bb-single-product__add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.bb-single-product__add-to-cart form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce Cart & Checkout Block Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Cart Page Container ──────────────────────────────── */
.bb-page-content--wide {
    max-width: 100%;
    margin: 0;
}
/* Ensure block cart/checkout fills the bb-page-content wrapper cleanly */
.woocommerce-cart .bb-page-content,
.woocommerce-checkout .bb-page-content {
    padding: 0;
}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    max-width: 100% !important;
    margin: 0 auto !important;
    font-family: var(--bb-font) !important;
    padding: 0 !important;
}

/* ── Filled Cart Layout ───────────────────────────────── */
.wc-block-cart .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

/* Cart main (product list) — left column */
.wc-block-cart .wc-block-cart__main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 0;
    overflow: hidden;
}

/* Cart table — override WC @container padding on th and td */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items th {
    padding: 14px 16px 14px 24px !important;
}
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items th:last-child {
    padding-right: 24px !important;
}
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items td {
    padding: 20px 16px 20px 24px !important;
    vertical-align: top;
}
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items td:last-child {
    padding-right: 24px !important;
}

/* Cart table header row */
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__header {
    background: var(--bb-light);
    border-bottom: 2px solid var(--bb-gray-light);
}
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__header span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-gray);
}

/* Cart line items */
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
    border-bottom: 1px solid var(--bb-gray-light);
}
.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row:last-child {
    border-bottom: none;
}
/* Bottom border on the table itself */
.wc-block-cart .wc-block-cart__main table.wc-block-cart-items {
    border-bottom: none !important;
}

/* Product image in cart */
.wc-block-cart .wc-block-cart-item__image img {
    border-radius: var(--bb-radius) !important;
    background: var(--bb-light);
    object-fit: contain;
    padding: 4px;
}
.wc-block-cart .wc-block-cart-item__image a {
    display: block;
    border-radius: var(--bb-radius);
    overflow: hidden;
    border: 1px solid var(--bb-gray-light);
}

/* Product name in cart */
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bb-text) !important;
    text-decoration: none !important;
}
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-name:hover {
    color: var(--bb-yellow) !important;
}

/* Product meta (SKU, variation details) */
.wc-block-cart .wc-block-cart-item__product .wc-block-components-product-metadata {
    font-size: 13px;
    color: var(--bb-gray);
}

/* Prices in cart */
.wc-block-cart .wc-block-cart-item__total .wc-block-formatted-money-amount,
.wc-block-cart .wc-block-cart-item__prices .wc-block-formatted-money-amount {
    font-weight: 700;
    color: var(--bb-text);
}
.wc-block-cart .wc-block-components-product-price__regular {
    color: var(--bb-gray) !important;
    text-decoration: line-through;
}

/* Quantity selector */
.wc-block-cart .wc-block-components-quantity-selector {
    border: 1px solid var(--bb-gray-light) !important;
    border-radius: var(--bb-radius) !important;
    overflow: hidden;
    background: var(--bb-white);
}
.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    font-family: var(--bb-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--bb-text) !important;
    border: none !important;
}
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    background: var(--bb-light) !important;
    color: var(--bb-text) !important;
    border: none !important;
    transition: background var(--bb-transition);
}
.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    background: var(--bb-gray-light) !important;
    color: var(--bb-navy) !important;
}

/* Remove item link */
.wc-block-cart .wc-block-cart-item__remove-link {
    font-size: 13px !important;
    color: var(--bb-red) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.wc-block-cart .wc-block-cart-item__remove-link:hover {
    text-decoration: underline !important;
}

/* ── Cart Sidebar / Totals ────────────────────────────── */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart__totals-title {
    font-family: var(--bb-font) !important;
}

/* Cart sidebar (totals) — right column, sticky */
.wc-block-cart .wc-block-cart__sidebar {
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 24px !important;
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 28px !important;
}

/* Order summary heading */
.wc-block-cart .wc-block-cart__totals-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bb-navy) !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: none !important;
}

/* Totals rows — clean up excess dividers */
.wc-block-cart .wc-block-components-totals-wrapper {
    border-top: none !important;
    border-bottom: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.wc-block-cart .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
    border-top: 2px solid var(--bb-gray-light) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
}
.wc-block-cart .wc-block-components-totals-item {
    border-color: transparent !important;
}
.wc-block-cart .wc-block-components-totals-item__label {
    font-size: 14px !important;
    color: var(--bb-text) !important;
}
.wc-block-cart .wc-block-components-totals-item__value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bb-text) !important;
}

/* Total footer (grand total) */
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bb-navy) !important;
}
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--bb-yellow) !important;
}

/* Hide coupon section on cart page */
.wc-block-cart .wc-block-components-totals-coupon,
.wc-block-cart .wc-block-components-totals-coupon-link,
.wc-block-cart .wc-block-components-totals-coupon__form {
    display: none !important;
}

/* ── Proceed to Checkout Button ───────────────────────── */
.wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart .wc-block-components-checkout-return-to-cart-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
    background: var(--bb-yellow) !important;
    color: var(--bb-dark) !important;
    border: none !important;
    border-radius: var(--bb-radius) !important;
    font-family: var(--bb-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 15px 28px !important;
    width: 100% !important;
    cursor: pointer;
    transition: background var(--bb-transition) !important;
    box-shadow: none !important;
}
.wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
    background: var(--bb-yellow-hover) !important;
}

/* Hide shipping section entirely on cart page */
.wc-block-cart .wc-block-components-totals-shipping,
.wc-block-cart .wc-block-components-shipping-rates-control,
.wc-block-cart .wc-block-components-shipping-calculator,
.wc-block-cart [class*="totals-shipping"],
.wc-block-cart [class*="shipping-rates"],
.wc-block-cart [class*="shipping-calculator"] {
    display: none !important;
}

/* ── Empty Cart ───────────────────────────────────────── */
.wp-block-woocommerce-empty-cart-block {
    text-align: center;
    padding: 40px 20px;
}
.wc-block-cart__empty-cart__title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--bb-navy) !important;
    margin-bottom: 16px !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
    border-color: var(--bb-gray-light) !important;
    margin: 32px auto !important;
    max-width: 200px;
}
.wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--bb-text) !important;
    margin-bottom: 24px !important;
}

/* ── Empty Cart — Product Grid (WC Blocks) ────────────── */
.wc-block-grid.has-4-columns .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wc-block-grid .wc-block-grid__product {
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    transition: transform var(--bb-transition), box-shadow var(--bb-transition);
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Override WC block's flex: 1 0 25% / max-width: 25% that squashes grid items */
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
}
.wc-block-grid .wc-block-grid__product:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-lg);
}

/* Product image */
.wc-block-grid .wc-block-grid__product-image {
    background: var(--bb-light);
    padding: 16px;
}
.wc-block-grid .wc-block-grid__product-image img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

/* Product title */
.wc-block-grid .wc-block-grid__product-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bb-text) !important;
    padding: 12px 16px 4px !important;
    line-height: 1.4;
}

/* Product price */
.wc-block-grid .wc-block-grid__product-price.price {
    padding: 0 16px 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bb-yellow) !important;
}
.wc-block-grid .wc-block-grid__product-price del {
    color: var(--bb-gray) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
.wc-block-grid .wc-block-grid__product-price ins {
    text-decoration: none !important;
    color: var(--bb-yellow) !important;
}

/* Sale badge */
.wc-block-grid .wc-block-grid__product-onsale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: var(--bb-red) !important;
    color: var(--bb-white) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: var(--bb-radius) !important;
    z-index: 2;
}
.wc-block-grid .wc-block-grid__product {
    position: relative;
}

/* Add to cart button */
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    margin-top: auto;
    padding: 12px 16px !important;
    background: var(--bb-yellow) !important;
    color: var(--bb-white) !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 0 var(--bb-radius) var(--bb-radius) !important;
    border: none !important;
    cursor: pointer;
    transition: background var(--bb-transition) !important;
    font-family: var(--bb-font) !important;
}
.wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: var(--bb-yellow-hover) !important;
}
.wc-block-grid .wc-block-grid__product-add-to-cart {
    margin-top: auto !important;
}

/* Product link reset */
.wc-block-grid .wc-block-grid__product-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── Checkout Block Styles ────────────────────────────── */
.wp-block-woocommerce-checkout {
    font-family: var(--bb-font) !important;
}

/* Checkout layout — force side by side */
.wc-block-checkout .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 40px !important;
}
/* Customer details — left */
.wc-block-checkout .wc-block-checkout__main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}
/* Order summary + payment + place order — right, sticky */
.wc-block-checkout .wc-block-checkout__sidebar {
    flex: 1 1 0% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 24px !important;
}

/* Checkout form fields */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input select,
.wc-block-checkout .wc-block-components-textarea textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input {
    border: 1px solid var(--bb-gray-light) !important;
    border-radius: var(--bb-radius) !important;
    font-family: var(--bb-font) !important;
    font-size: 14px !important;
    color: var(--bb-text) !important;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input select:focus,
.wc-block-checkout .wc-block-components-textarea textarea:focus,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input:focus {
    border-color: var(--bb-yellow) !important;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15) !important;
    outline: none !important;
}

/* Checkout labels */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label {
    font-family: var(--bb-font) !important;
    color: var(--bb-gray) !important;
}

/* Checkout headings */
.wc-block-checkout .wc-block-components-checkout-step__title {
    font-family: var(--bb-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bb-navy) !important;
}
.wc-block-checkout .wc-block-components-checkout-step__description {
    font-family: var(--bb-font) !important;
    color: var(--bb-gray) !important;
    font-size: 14px !important;
}

/* Step numbering */
.wc-block-checkout .wc-block-components-checkout-step::before {
    color: var(--bb-yellow) !important;
}
.wc-block-checkout .wc-block-components-checkout-step::after {
    border-color: var(--bb-gray-light) !important;
}

/* Checkout sidebar card */
.wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar {
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 0 28px 28px !important;
}
.wc-block-checkout .wc-block-components-checkout-order-summary__title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Checkout totals item */
.wc-block-checkout .wc-block-components-totals-item {
    border-color: var(--bb-gray-light) !important;
}
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bb-navy) !important;
}
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--bb-yellow) !important;
}

/* Product name in checkout sidebar */
.wc-block-checkout .wc-block-components-product-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bb-text) !important;
    text-decoration: none !important;
}

/* Checkout order summary product image */
.wc-block-checkout .wc-block-components-order-summary-item__image img {
    border-radius: var(--bb-radius) !important;
    border: 1px solid var(--bb-gray-light) !important;
}

/* Place order button */
.wc-block-checkout .wc-block-components-checkout-place-order-button {
    background: var(--bb-yellow) !important;
    color: var(--bb-dark) !important;
    border: none !important;
    border-radius: var(--bb-radius) !important;
    font-family: var(--bb-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 15px 28px !important;
    cursor: pointer;
    transition: background var(--bb-transition) !important;
    box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
    background: var(--bb-yellow-hover) !important;
}

/* Return to cart link */
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
    color: var(--bb-yellow) !important;
    font-family: var(--bb-font) !important;
    font-weight: 600 !important;
}
.wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
    color: var(--bb-yellow-hover) !important;
}

/* Payment methods */
.wc-block-checkout .wc-block-components-radio-control__label {
    font-family: var(--bb-font) !important;
    color: var(--bb-text) !important;
}
.wc-block-checkout .wc-block-components-radio-control__input {
    accent-color: var(--bb-yellow) !important;
}
.wc-block-checkout .wc-block-components-radio-control__option {
    border-color: var(--bb-gray-light) !important;
}
.wc-block-checkout .wc-block-components-radio-control__option--checked {
    border-color: var(--bb-yellow) !important;
    background: rgba(151,202,67,0.05) !important;
}

/* Checkout checkbox */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--bb-yellow) !important;
    border-color: var(--bb-yellow) !important;
}

/* ── Shared WC Block Components ───────────────────────── */
/* Text input focus styling */
.wc-block-components-text-input.is-active label {
    color: var(--bb-yellow) !important;
}

/* Loading skeleton */
.wp-block-woocommerce-cart.is-loading .wc-block-components-sidebar-layout {
    opacity: 0.7;
}

/* Hide default WP block button styles that clash */
.wc-block-grid .wp-block-button {
    margin: 0 !important;
}

/* ── Notices ──────────────────────────────────────────── */
.wc-block-cart .wc-block-components-notices,
.wc-block-checkout .wc-block-components-notices {
    font-family: var(--bb-font) !important;
}
.wc-block-cart .wc-block-components-notices .wc-block-components-notice-banner,
.wc-block-checkout .wc-block-components-notices .wc-block-components-notice-banner {
    border-radius: var(--bb-radius) !important;
    font-size: 14px !important;
}
.wc-block-components-notice-banner.is-success {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}
.wc-block-components-notice-banner.is-error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

/* ── Cart & Checkout Responsive ───────────────────────── */
@media (max-width: 768px) {
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .wc-block-grid .wc-block-grid__product-image img {
        height: 150px;
    }
    /* Stack cart: product list above, totals below */
    .wc-block-cart .wc-block-components-sidebar-layout {
        flex-wrap: wrap !important;
    }
    .wc-block-cart .wc-block-cart__main {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .wc-block-cart .wc-block-cart__sidebar {
        flex: 0 0 100% !important;
        width: 100% !important;
        position: static !important;
        padding: 20px !important;
    }
    .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
        padding: 16px !important;
    }
    .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: 18px !important;
    }
    /* Stack checkout: customer details above, order summary below */
    .wc-block-checkout .wc-block-components-sidebar-layout {
        flex-wrap: wrap !important;
    }
    .wc-block-checkout .wc-block-checkout__main {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    .wc-block-checkout .wc-block-checkout__sidebar {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .wc-block-checkout .wc-block-checkout__sidebar .wc-block-components-sidebar {
        padding: 20px !important;
    }
}
@media (max-width: 480px) {
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .wc-block-grid .wc-block-grid__product-image {
        padding: 10px;
    }
    .wc-block-grid .wc-block-grid__product-image img {
        height: 120px;
    }
    .wc-block-grid .wc-block-grid__product-title {
        font-size: 13px !important;
        padding: 8px 10px 4px !important;
    }
    .wc-block-grid .wc-block-grid__product-price.price {
        padding: 0 10px 6px !important;
        font-size: 14px !important;
    }
    .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
        padding: 10px 12px !important;
        font-size: 11px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Classic WooCommerce Cart & Checkout (shortcode-based)
   ═══════════════════════════════════════════════════════════ */

/* ── Classic Cart Table ──────────────────────────────────── */
.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    overflow: hidden;
    font-family: var(--bb-font);
}
.woocommerce table.shop_table thead {
    background: var(--bb-light);
}
.woocommerce table.shop_table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-gray);
    padding: 14px 16px;
    border-bottom: 2px solid var(--bb-gray-light);
    text-align: left;
}
.woocommerce table.shop_table td {
    padding: 16px;
    border-bottom: 1px solid var(--bb-gray-light);
    vertical-align: middle;
    font-size: 14px;
    color: var(--bb-text);
}
.woocommerce table.shop_table td.product-remove {
    width: 40px;
    text-align: center;
}
.woocommerce table.shop_table td.product-remove a {
    color: #e74c3c;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
.woocommerce table.shop_table td.product-thumbnail {
    width: 80px;
}
.woocommerce table.shop_table td.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    background: var(--bb-light);
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-gray-light);
    padding: 4px;
}
.woocommerce table.shop_table td.product-name a {
    color: var(--bb-text);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce table.shop_table td.product-name a:hover {
    color: var(--bb-yellow);
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
    font-weight: 700;
}
.woocommerce table.shop_table td.product-quantity .quantity input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-family: var(--bb-font);
    font-size: 14px;
    text-align: center;
}
.woocommerce table.shop_table td.product-quantity .quantity input[type="number"]:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}

/* Classic Cart Actions */
.woocommerce table.shop_table td.actions {
    padding: 16px;
}

/* Classic cart — product list left, totals right */
.woocommerce-cart .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
}
.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
    flex: 1 1 0% !important;
    float: none !important;
    width: auto !important;
    min-width: 0;
}
.woocommerce-cart .woocommerce > .cart-collaterals {
    flex: 1 1 0% !important;
    float: none !important;
    width: auto !important;
    min-width: 0;
    position: sticky;
    top: 24px;
    padding: 0 !important;
}
/* Also override WC's inner cart_totals width */
.woocommerce-cart .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
}

/* Notices still full-width */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    flex: 0 0 100%;
}
.woocommerce table.shop_table td.actions .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
}
.woocommerce table.shop_table td.actions .coupon input[type="text"] {
    padding: 10px 14px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-family: var(--bb-font);
    font-size: 14px;
}
.woocommerce table.shop_table td.actions .coupon input[type="text"]:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}
.woocommerce table.shop_table td.actions .coupon button,
.woocommerce table.shop_table td.actions > button,
.woocommerce table.shop_table td.actions > input[type="submit"] {
    background: var(--bb-navy);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    padding: 10px 20px;
    font-family: var(--bb-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}
.woocommerce table.shop_table td.actions .coupon button:hover,
.woocommerce table.shop_table td.actions > button:hover,
.woocommerce table.shop_table td.actions > input[type="submit"]:hover {
    background: #252b3d;
}
/* Update cart — explicit enabled / disabled states */
.woocommerce table.shop_table td.actions button[name="update_cart"] {
    background: var(--bb-navy) !important;
    color: var(--bb-white) !important;
}
.woocommerce table.shop_table td.actions button[name="update_cart"]:disabled {
    background: var(--bb-gray-light) !important;
    color: var(--bb-gray) !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Classic Cart Totals — full width inside its sticky sidebar column */
.woocommerce .cart_totals {
    float: none;
    width: 100%;
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 24px;
}
.woocommerce .cart_totals h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-navy);
    margin-bottom: 16px;
}
.woocommerce .cart_totals table.shop_table {
    margin-bottom: 20px;
}
.woocommerce .cart_totals table.shop_table th {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-text);
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 16px;
}
.woocommerce .cart_totals table.shop_table td {
    text-align: right;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
    font-size: 18px;
    font-weight: 800;
    color: var(--bb-navy);
    border-top: 2px solid var(--bb-gray-light);
}
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    border: none;
    border-radius: var(--bb-radius);
    padding: 15px 28px;
    font-family: var(--bb-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
    margin-top: 10px;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--bb-yellow-hover);
}

/* ── Classic Checkout ────────────────────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout h3#order_review_heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-navy);
    margin-top: 0 !important;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bb-gray-light);
}
.woocommerce-checkout .form-row {
    margin-bottom: 16px;
}
.woocommerce-checkout .form-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-text);
    margin-bottom: 6px;
    display: block;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-family: var(--bb-font);
    font-size: 14px;
    color: var(--bb-text);
    transition: border-color 0.2s;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}

/* Checkout — billing + shipping stacked vertically */
.woocommerce-checkout .col2-set {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* WooCommerce injects a clearfix ::before/::after inside .col2-set.
   When col2-set is a flex container those pseudo-elements become flex items
   and push .col-1 down by one gap (24px). Kill them. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after {
    display: none !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
}

/* Order review table */
.woocommerce-checkout table.shop_table thead th {
    background: var(--bb-light);
}
.woocommerce-checkout #order_review_heading {
    margin-top: 0;
}

/* Payment methods */
.woocommerce-checkout #payment {
    background: var(--bb-light);
    border-radius: var(--bb-radius);
    padding: 20px;
    margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px 0;
    border-bottom: 1px solid var(--bb-gray-light);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-text);
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--bb-yellow);
    margin-right: 8px;
}
.woocommerce-checkout #payment .payment_box {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 12px 16px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--bb-gray);
}
.woocommerce-checkout #payment .place-order .button {
    display: block;
    width: 100%;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    border: none;
    border-radius: var(--bb-radius);
    padding: 15px 28px;
    font-family: var(--bb-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}
.woocommerce-checkout #payment .place-order .button:hover {
    background: var(--bb-yellow-hover);
}

/* Login & coupon toggle notices — override WC defaults */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--bb-light) !important;
    border: none !important;
    border-top: 3px solid var(--bb-yellow) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: var(--bb-radius) !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    color: var(--bb-text) !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    list-style: none !important;
}
/* Remove WooCommerce's default info icon */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none !important;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--bb-yellow) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    text-decoration: underline !important;
}
/* ── Expanded login form ─────────────────────────────── */
.woocommerce-checkout .woocommerce-form-login {
    background: #ffffff;
    border: 1.5px solid var(--bb-gray-light);
    border-top: 3px solid var(--bb-yellow);
    border-radius: 8px;
    padding: 28px;
    margin-bottom: 24px;
}
/* Intro paragraph */
.woocommerce-checkout .woocommerce-form-login > p:first-child {
    font-size: 14px;
    color: var(--bb-gray);
    margin-bottom: 20px;
    line-height: 1.6;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bb-gray-light);
}
/* Full-width stacked fields */
.woocommerce-checkout .woocommerce-form-login .form-row-first,
.woocommerce-checkout .woocommerce-form-login .form-row-last {
    float: none !important;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin-bottom: 18px !important;
}
.woocommerce-checkout .woocommerce-form-login .form-row-first {
    margin-right: 0 !important;
}
/* Labels */
.woocommerce-checkout .woocommerce-form-login label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}
/* Suppress WC-generated <br> between label and input */
.woocommerce-checkout .woocommerce-form-login .form-row-first br,
.woocommerce-checkout .woocommerce-form-login .form-row-last br,
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme br,
.woocommerce-checkout .woocommerce-form-login p.form-row:not(.form-row-first):not(.form-row-last) > br {
    display: none !important;
}
/* Input fields */
.woocommerce-checkout .woocommerce-form-login input.input-text {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1.5px solid #e0e0e8;
    border-radius: 6px;
    font-family: var(--bb-font);
    color: var(--bb-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.woocommerce-checkout .woocommerce-form-login input.input-text:focus {
    border-color: var(--bb-yellow);
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}
/* Password reveal button */
.woocommerce-checkout .woocommerce-form-login .password-input {
    position: relative;
    display: block;
}
.woocommerce-checkout .woocommerce-form-login .password-input input.input-text {
    padding-right: 42px;
}
.woocommerce-checkout .woocommerce-form-login .show-password-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bb-gray);
    padding: 0;
    line-height: 1;
}
/* Remember me + submit row */
.woocommerce-checkout .woocommerce-form-login p.form-row:not(.form-row-first):not(.form-row-last) {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    margin-top: 6px;
}
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-text);
    cursor: pointer;
    margin-bottom: 0 !important;
}
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--bb-yellow);
    cursor: pointer;
}
/* Submit button */
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit {
    background: var(--bb-yellow) !important;
    color: #0f1c2e !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 11px 32px !important;
    font-family: var(--bb-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    cursor: pointer !important;
    transition: background 0.18s !important;
    white-space: nowrap;
    margin-left: auto;
}
.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__submit:hover {
    background: var(--bb-yellow-hover) !important;
}
/* Required asterisk */
.woocommerce-checkout .woocommerce-form-login label .required {
    color: #e00;
    text-decoration: none !important;
    margin-left: 1px;
}
/* Lost password */
.woocommerce-checkout .woocommerce-form-login .lost_password {
    margin: 0;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a {
    font-size: 13px;
    color: var(--bb-yellow);
    text-decoration: none;
    font-weight: 500;
}
.woocommerce-checkout .woocommerce-form-login .lost_password a:hover {
    text-decoration: underline;
}
/* Expanded coupon form */
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 20px;
    margin-bottom: 20px;
}
.woocommerce-checkout .checkout_coupon .form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 0;
}
.woocommerce-checkout .checkout_coupon input[name="coupon_code"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-family: var(--bb-font);
    font-size: 14px;
    color: var(--bb-text);
    background: var(--bb-white);
}
.woocommerce-checkout .checkout_coupon input[name="coupon_code"]:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.15);
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] {
    background: var(--bb-navy);
    color: var(--bb-white);
    border: none;
    border-radius: var(--bb-radius);
    padding: 10px 20px;
    font-family: var(--bb-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]:hover {
    background: #252b3d;
}

/* T&Cs and privacy */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 13px;
    color: var(--bb-gray);
    margin-top: 12px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: var(--bb-yellow);
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 13px;
    color: var(--bb-gray);
    margin-bottom: 12px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a {
    color: var(--bb-yellow);
}

/* Classic checkout main layout — customer details left, order review right */
.woocommerce-checkout form.checkout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start;
}
/* Kill clearfix and any phantom grid items that break the 2-column layout */
.woocommerce-checkout form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) {
    display: none !important;
}
.woocommerce-checkout form.checkout #customer_details {
    grid-column: 1 !important;
    float: none !important;
    width: auto !important;
}
/* Hide standalone heading — title is rendered inside the card via ::before */
.woocommerce-checkout form.checkout #order_review_heading {
    display: none !important;
}
.woocommerce-checkout form.checkout #order_review {
    grid-column: 2 !important;
    float: none !important;
    width: auto !important;
    position: sticky !important;
    top: 24px !important;
}
/* Wrap order review in a card */
.woocommerce-checkout form.checkout #order_review {
    background: var(--bb-light);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 24px;
}
/* "Your order" title inside the card (replaces the removed standalone h3) */
.woocommerce-checkout form.checkout #order_review::before {
    content: 'Your order';
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-navy);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bb-gray-light);
}

/* Classic cart/checkout responsive */
@media (max-width: 768px) {
    .woocommerce .cart_totals {
        float: none;
        width: 100%;
        position: static;
        margin-top: 0;
    }
    /* Stack classic cart: table above, totals below */
    .woocommerce-cart .woocommerce {
        flex-direction: column;
    }
    .woocommerce-cart .woocommerce > .cart-collaterals {
        flex: none;
        width: 100%;
        position: static;
    }
    /* Mobile cart — card layout with product images */
    .woocommerce-cart table.shop_table thead { display: none !important; }
    .woocommerce-cart table.shop_table,
    .woocommerce-cart table.shop_table tbody { display: block !important; }
    .woocommerce-cart table.shop_table tr.cart_item {
        display: grid !important;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 2px 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--bb-gray-light);
        width: 100%;
    }
    .woocommerce-cart table.shop_table td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }
    .woocommerce-cart table.shop_table td::before { display: none !important; }
    .woocommerce-cart table.shop_table td.product-remove {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .woocommerce-cart table.shop_table td.product-thumbnail {
        display: block !important;
        grid-column: 1;
        grid-row: 1 / 5;
    }
    .woocommerce-cart table.shop_table td.product-thumbnail img {
        width: 80px !important;
        height: 80px !important;
    }
    .woocommerce-cart table.shop_table td.product-name {
        grid-column: 2;
        grid-row: 2;
        font-size: 14px;
        font-weight: 600;
    }
    .woocommerce-cart table.shop_table td.product-price { display: none !important; }
    .woocommerce-cart table.shop_table td.product-quantity {
        grid-column: 2;
        grid-row: 3;
        padding-top: 6px !important;
    }
    .woocommerce-cart table.shop_table td.product-subtotal {
        grid-column: 2;
        grid-row: 4;
        font-weight: 700;
        padding-top: 4px !important;
    }
    .woocommerce-cart table.shop_table tr.actions { display: flex !important; flex-wrap: wrap; gap: 10px; padding: 16px 0; }
    .woocommerce-cart table.shop_table tr.actions td.actions { width: 100%; border: none !important; padding: 0 !important; }

    /* ── Cart totals table — restore proper table layout so th labels stay visible ── */
    /* The block overrides above target all .shop_table; undo them for the totals section */
    .woocommerce-cart .cart_totals table.shop_table,
    .woocommerce-cart .cart_totals table.shop_table tbody { display: table !important; width: 100%; }
    .woocommerce-cart .cart_totals table.shop_table tr { display: table-row !important; }
    .woocommerce-cart .cart_totals table.shop_table th,
    .woocommerce-cart .cart_totals table.shop_table td {
        display: table-cell !important;
        padding: 12px 8px !important;
        border-bottom: 1px solid var(--bb-gray-light) !important;
        vertical-align: middle;
    }
    .woocommerce-cart .cart_totals table.shop_table th {
        font-size: 14px;
        font-weight: 600;
        color: var(--bb-text);
        text-align: left;
        white-space: nowrap;
        padding-right: 16px !important;
    }
    .woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
    .woocommerce-cart .cart_totals .order-total th,
    .woocommerce-cart .cart_totals .order-total td {
        font-size: 16px;
        font-weight: 800;
        color: var(--bb-navy);
        border-top: 2px solid var(--bb-gray-light);
        border-bottom: none !important;
    }
    /* Prevent horizontal overflow on checkout */
    .woocommerce-checkout {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .woocommerce-checkout .form-row .input-text,
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
        box-sizing: border-box;
        max-width: 100%;
    }
    .woocommerce-checkout #order_review table.shop_table {
        word-break: break-word;
    }
    /* Stack classic checkout on mobile */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-checkout form.checkout #customer_details,
    .woocommerce-checkout form.checkout #order_review {
        grid-column: 1 !important;
    }
    .woocommerce-checkout form.checkout #order_review {
        position: static;
    }
    .woocommerce-checkout .col2-set {
        flex-direction: column;
        gap: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce My Account — Login / Register
   ═══════════════════════════════════════════════════════════ */

/* Kill WooCommerce default clearfix pseudo-elements (they become ghost grid items) */
#customer_login.col2-set::before,
#customer_login.col2-set::after {
    display: none !important;
    content: none !important;
}
#customer_login .col-1,
#customer_login .col-2 {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Two-column login/register grid */
#customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100% !important;
    max-width: 100% !important;
}

/* Cards */
#customer_login .u-column1,
#customer_login .u-column2 {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 32px !important;
    min-width: 0;
}

/* Kill the inner WC form border/padding (no box inside a box) */
#customer_login form.login,
#customer_login form.register {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Headings */
#customer_login h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bb-navy);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bb-gray-light);
}

/* Form rows */
#customer_login .form-row {
    margin-bottom: 20px;
}
#customer_login .woocommerce-form-row {
    display: block !important;
}
#customer_login label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--bb-text);
}
#customer_login label .required {
    color: #e53e3e;
}

/* All text inputs — including password inside .password-input wrapper */
#customer_login input.input-text,
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1px solid var(--bb-gray-light) !important;
    border-radius: var(--bb-radius) !important;
    font-size: 15px !important;
    font-family: var(--bb-font) !important;
    color: var(--bb-text) !important;
    background: var(--bb-white) !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#customer_login input.input-text:focus,
#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="password"]:focus {
    border-color: var(--bb-yellow) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.18) !important;
}

/* Password wrapper — WC wraps password in .password-input div */
#customer_login .password-input {
    position: relative;
}
#customer_login .show-password-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Button + Remember me row */
#customer_login .form-row:last-of-type {
    margin-bottom: 0;
}
#customer_login .woocommerce-form-login__submit,
#customer_login .woocommerce-form-register__submit {
    display: block !important;
    width: 100% !important;
    padding: 14px 32px !important;
    background: var(--bb-yellow) !important;
    color: var(--bb-dark) !important;
    border: none !important;
    border-radius: var(--bb-radius) !important;
    font-family: var(--bb-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
}
#customer_login .woocommerce-form-login__submit:hover,
#customer_login .woocommerce-form-register__submit:hover {
    background: var(--bb-yellow-hover) !important;
}

/* Remember me */
#customer_login .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    color: var(--bb-gray);
    cursor: pointer;
    margin-bottom: 16px;
}
#customer_login .woocommerce-form-login__rememberme input[type="checkbox"] {
    width: auto !important;
    display: inline-block !important;
    padding: 0 !important;
    accent-color: var(--bb-yellow);
    margin: 0 !important;
}

/* Lost password link */
#customer_login .lost_password {
    margin-top: 20px;
    text-align: center;
}
#customer_login .lost_password a {
    color: var(--bb-yellow);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
#customer_login .lost_password a:hover {
    color: var(--bb-yellow-hover);
    text-decoration: underline;
}

/* Register side text */
#customer_login .u-column2 p {
    font-size: 14px;
    color: var(--bb-gray);
    line-height: 1.6;
    margin-bottom: 16px;
}
#customer_login .woocommerce-privacy-policy-text p {
    font-size: 13px;
    color: var(--bb-gray);
    margin-bottom: 20px;
}
#customer_login .woocommerce-privacy-policy-text a {
    color: var(--bb-yellow);
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce My Account — Dashboard (Logged In)
   ═══════════════════════════════════════════════════════════ */

/* Kill WooCommerce clearfix pseudo-elements on dashboard grid */
body.logged-in.woocommerce-account .woocommerce::before,
body.logged-in.woocommerce-account .woocommerce::after {
    display: none !important;
    content: none !important;
}
/* Reset WC float/width on nav and content */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
}
/* Nav + Content side-by-side grid (logged-in only) */
body.logged-in.woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}

/* Navigation sidebar */
.woocommerce-MyAccount-navigation {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 0;
    overflow: hidden;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--bb-gray-light);
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-text);
    transition: all var(--bb-transition);
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--bb-light);
    color: var(--bb-yellow);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--bb-navy);
    color: var(--bb-white);
    font-weight: 600;
}

/* Content area */
.woocommerce-MyAccount-content {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 32px;
    min-width: 0;
}
.woocommerce-MyAccount-content a {
    color: var(--bb-yellow);
}
.woocommerce-MyAccount-content a:hover {
    color: var(--bb-yellow-hover);
}

/* Account forms — edit-account, addresses, etc. */
.woocommerce-MyAccount-content fieldset {
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 24px;
    margin: 24px 0;
}
.woocommerce-MyAccount-content fieldset legend {
    font-size: 16px;
    font-weight: 700;
    color: var(--bb-navy);
    padding: 0 8px;
}
.woocommerce-MyAccount-content label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--bb-text);
}
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    font-size: 15px;
    font-family: var(--bb-font);
    color: var(--bb-text);
    background: var(--bb-white);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content input[type="text"]:focus,
.woocommerce-MyAccount-content input[type="email"]:focus,
.woocommerce-MyAccount-content input[type="password"]:focus,
.woocommerce-MyAccount-content input[type="tel"]:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-color: var(--bb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(151,202,67,0.18);
}
.woocommerce-MyAccount-content .form-row {
    margin-bottom: 20px;
}
.woocommerce-MyAccount-content .password-input {
    position: relative;
}
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-MyAccount-content .button {
    display: inline-block;
    padding: 14px 32px;
    background: var(--bb-yellow) !important;
    color: var(--bb-dark) !important;
    border: none !important;
    border-radius: var(--bb-radius);
    font-family: var(--bb-font);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s;
}
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-MyAccount-content .button:hover {
    background: var(--bb-yellow-hover) !important;
}

/* Orders table */
.woocommerce-MyAccount-content .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}
.woocommerce-MyAccount-content .woocommerce-orders-table th {
    background: var(--bb-light);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bb-gray);
    padding: 12px 16px;
    text-align: left;
}
.woocommerce-MyAccount-content .woocommerce-orders-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--bb-gray-light);
    font-size: 14px;
}

/* ── My Account — Responsive ────────────────────────────── */
@media (max-width: 768px) {
    #customer_login {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    #customer_login .u-column1,
    #customer_login .u-column2 {
        padding: 24px !important;
    }
    body.logged-in.woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        border-right: 1px solid var(--bb-gray-light);
    }
    .woocommerce-MyAccount-navigation ul li:last-child {
        border-right: none;
    }
    .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 14px;
        font-size: 13px;
    }
    .woocommerce-MyAccount-content {
        padding: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   WISHLIST
   ═══════════════════════════════════════════════════════════ */

/* ── Header wishlist count badge ─────────────────────────── */
.bb-wishlist-link {
    position: relative;
}
.bb-wishlist-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Heart button (shared) ───────────────────────────────── */
.bb-wishlist-btn {
    position: absolute;
    z-index: 5;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.bb-wishlist-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--bb-navy);
    fill: none;
    transition: fill 0.2s, stroke 0.2s;
}
.bb-wishlist-btn:hover {
    background: #fff;
    transform: scale(1.1);
}
.bb-wishlist-btn:hover svg {
    stroke: #e74c3c;
}
.bb-wishlist-btn.bb-wishlisted svg {
    fill: #e74c3c;
    stroke: #e74c3c;
}
.bb-wishlist-btn.bb-wishlisted:hover svg {
    fill: #c0392b;
    stroke: #c0392b;
}

/* Pulse animation */
@keyframes bb-heart-pulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.bb-wishlist-pulse {
    animation: bb-heart-pulse 0.4s ease;
}

/* ── Heart on product cards ──────────────────────────────── */
.bb-wishlist-btn--card {
    top: 10px;
    right: 10px;
}

/* ── Heart on single product gallery ─────────────────────── */
.bb-single-product__gallery {
    position: relative;
}
.bb-wishlist-btn--single {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
}
.bb-wishlist-btn--single svg {
    width: 22px;
    height: 22px;
}

/* ── Wishlist page ───────────────────────────────────────── */
.bb-wishlist-empty {
    text-align: center;
    padding: 80px 20px;
}
.bb-wishlist-empty svg {
    stroke: var(--bb-gray-light);
    margin-bottom: 20px;
}
.bb-wishlist-empty h2 {
    font-size: 22px;
    color: var(--bb-navy);
    margin: 0 0 8px;
}
.bb-wishlist-empty p {
    color: var(--bb-gray);
    margin: 0 0 24px;
    font-size: 15px;
}
.bb-btn--primary {
    display: inline-block;
    background: var(--bb-yellow);
    color: var(--bb-dark);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--bb-radius);
    text-decoration: none;
    transition: background 0.2s;
}
.bb-btn--primary:hover {
    background: var(--bb-yellow-hover);
}

.bb-wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 0 60px;
}
.bb-wishlist-row {
    display: grid;
    grid-template-columns: 140px 1fr 1.2fr auto;
    gap: 24px;
    align-items: center;
    background: var(--bb-white);
    border-radius: var(--bb-radius);
    overflow: hidden;
    box-shadow: var(--bb-shadow);
    padding: 16px;
    transition: box-shadow 0.2s;
}
.bb-wishlist-row:hover {
    box-shadow: var(--bb-shadow-lg);
}
.bb-wishlist-row__img {
    display: block;
    background: var(--bb-light);
    border-radius: var(--bb-radius);
    padding: 12px;
}
.bb-wishlist-row__img img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    display: block;
}
.bb-wishlist-row__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.bb-wishlist-row__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bb-navy);
    text-decoration: none;
    line-height: 1.4;
}
.bb-wishlist-row__title:hover {
    color: var(--bb-yellow);
}
.bb-wishlist-row__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-navy);
}
.bb-wishlist-row__price del {
    color: var(--bb-gray);
    font-weight: 400;
    font-size: 13px;
}
.bb-wishlist-row__price ins {
    text-decoration: none;
    color: var(--bb-yellow);
}
.bb-wishlist-row__desc {
    font-size: 13px;
    color: var(--bb-gray);
    line-height: 1.6;
    min-width: 0;
}
.bb-wishlist-row__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}
.bb-wishlist-row__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--bb-radius);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: var(--bb-font);
}
.bb-wishlist-row__btn svg {
    flex-shrink: 0;
}
.bb-wishlist-row__btn--cart {
    background: var(--bb-yellow);
    color: var(--bb-dark);
}
.bb-wishlist-row__btn--cart:hover {
    background: var(--bb-yellow-hover);
}
.bb-wishlist-row__btn--quote {
    background: var(--bb-navy);
    color: var(--bb-white);
}
.bb-wishlist-row__btn--quote:hover {
    background: #252b3d;
}
.bb-wishlist-row__btn--remove {
    background: transparent;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    position: static;
    width: 100%;
    height: auto;
    border-radius: var(--bb-radius);
    box-shadow: none;
}
.bb-wishlist-row__btn--remove svg {
    fill: #e74c3c;
    stroke: #e74c3c;
    width: 16px;
    height: 16px;
}
.bb-wishlist-row__btn--remove:hover {
    background: #e74c3c;
    color: #fff;
}
.bb-wishlist-row__btn--remove:hover svg {
    fill: #fff;
    stroke: #fff;
}
.bb-wishlist-row__btn--oos {
    background: var(--bb-light);
    color: #e74c3c;
    cursor: default;
}

@media (max-width: 900px) {
    .bb-wishlist-row {
        grid-template-columns: 120px 1fr;
        gap: 16px;
    }
    .bb-wishlist-row__desc {
        grid-column: 1 / -1;
    }
    .bb-wishlist-row__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
    .bb-wishlist-row__btn {
        flex: 1 1 auto;
    }
}
@media (max-width: 480px) {
    .bb-wishlist-row {
        grid-template-columns: 100px 1fr;
        gap: 12px;
        padding: 12px;
    }
    .bb-wishlist-row__img img { height: 80px; }
    .bb-wishlist-row__actions {
        flex-direction: column;
    }
    .bb-wishlist-list { padding: 24px 0 40px; gap: 12px; }
}

/* ── Google Reviews ─────────────────────────────────────── */
.bb-reviews-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: -8px 0 40px;
    flex-wrap: wrap;
}
.bb-reviews-meta__stars {
    color: #fbbc04;
    font-size: 22px;
    letter-spacing: 2px;
    line-height: 1;
}
.bb-reviews-meta__score {
    font-size: 20px;
    font-weight: 700;
    color: var(--bb-navy);
}
.bb-reviews-meta__source {
    font-size: 14px;
    color: var(--bb-gray);
    display: flex;
    align-items: center;
    gap: 5px;
}
.bb-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.bb-review-card {
    background: var(--bb-white);
    border: 1px solid var(--bb-gray-light);
    border-radius: var(--bb-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.bb-review-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}
.bb-review-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.bb-review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bb-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.bb-review-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-navy);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bb-review-card-stars {
    color: #fbbc04;
    font-size: 13px;
    letter-spacing: 1px;
    display: block;
    margin-top: 2px;
}
.bb-review-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--bb-text);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
@media (max-width: 900px) {
    .bb-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bb-reviews-grid { grid-template-columns: 1fr; }
    .bb-reviews-meta { gap: 8px; }
}

/* ── Specials promo hero (replaces the plain page header) ──────────── */
.bb-promo-hero {
    background: var(--bb-navy);
    color: var(--bb-white);
    padding: 44px 0 40px;
    position: relative;
    overflow: hidden;
}
.bb-promo-hero::after {
    content: "";
    position: absolute;
    right: -90px; top: -60px;
    width: 260px; height: 420px;
    background: var(--bb-yellow);
    opacity: 0.10;
    transform: rotate(20deg);
    pointer-events: none;
}
.bb-promo-hero__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.bb-promo-hero__main { flex: 1 1 420px; min-width: 0; }
.bb-promo-hero .bb-breadcrumb { margin-bottom: 14px; }
.bb-promo-hero .bb-breadcrumb,
.bb-promo-hero .bb-breadcrumb a { color: #b9c0cc; }
.bb-promo-hero .bb-breadcrumb a:hover { color: var(--bb-yellow); }
.bb-promo-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bb-yellow);
    color: var(--bb-navy);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}
.bb-promo-hero__badge svg { width: 14px; height: 14px; }
.bb-promo-hero__big {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 14px 0 0;
    line-height: 1;
}
.bb-promo-hero__percent {
    color: var(--bb-yellow);
    font-size: clamp(56px, 9vw, 88px);
    font-weight: 900;
    letter-spacing: -3px;
}
.bb-promo-hero__off {
    color: var(--bb-white);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 900;
    letter-spacing: -1px;
}
.bb-promo-hero__headline {
    margin: 6px 0 0;
    font-size: clamp(17px, 2.4vw, 24px);
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--bb-white);
    text-wrap: balance;
}
.bb-promo-hero__tagline {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #d7dbe2;
}
.bb-promo-hero__features {
    flex: 0 1 380px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.bb-promo-hero__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #d7dbe2;
}
.bb-promo-hero__tick {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--bb-yellow);
    color: var(--bb-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-promo-hero__tick svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
    .bb-promo-hero { padding: 30px 0 28px; }
    .bb-promo-hero__inner { gap: 24px; }
    .bb-promo-hero__features { flex-basis: 100%; }
}

/* ── Product media: video beside the data sheet ────────────────────── */
.bb-pm {
    margin: 34px 0 6px;
    display: grid;
    gap: 24px;
    align-items: start;
}
/* Video and sheet together: sheet sits alongside so the video is not
   marooned next to dead space. Stacks on mobile (and in the app). */
.bb-pm--split { grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); }
.bb-pm--single { grid-template-columns: minmax(0, 1fr); }

.bb-pm__title {
    font-size: 19px; font-weight: 800; color: var(--bb-navy);
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 2px solid var(--bb-yellow);
}

.bb-pm__player {
    position: relative; display: block; width: 100%;
    padding: 0; border: 0; background: #000; cursor: pointer;
    border-radius: var(--bb-radius); overflow: hidden; aspect-ratio: 16 / 9;
}
.bb-pm__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--bb-transition); }
.bb-pm__player:hover .bb-pm__thumb { opacity: .82; }
.bb-pm__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bb-pm__play svg { width: 68px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.bb-pm__player:focus-visible { outline: 3px solid var(--bb-yellow); outline-offset: 3px; }
.bb-pm__player iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Data sheet card — centred, fills the column beside the video */
.bb-pm__sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, #fbfcfa 0%, var(--bb-light) 100%);
    border: 1px solid var(--bb-gray-light);
    border-top: 4px solid var(--bb-yellow);
    border-radius: var(--bb-radius);
    padding: 30px 26px 26px;
    height: 100%;
}
.bb-pm__sheet-icon {
    width: 78px; height: 78px; border-radius: 18px;
    background: var(--bb-navy); color: var(--bb-yellow);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; flex: 0 0 auto;
    box-shadow: 0 8px 20px rgba(26,31,46,.22);
}
.bb-pm__sheet-icon svg { width: 40px; height: 40px; }

.bb-pm__sheet-title {
    margin: 0 0 5px;
    font-size: 21px; font-weight: 800; letter-spacing: -.2px;
    color: var(--bb-navy);
}
.bb-pm__sheet-sub {
    margin: 0 0 14px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--bb-yellow-hover);
    line-height: 1.4;
}
.bb-pm__sheet-copy {
    margin: 0 0 18px;
    font-size: 14px; line-height: 1.6; color: var(--bb-gray);
    max-width: 34ch;
}

.bb-pm__sheet-list {
    list-style: none; margin: 0 0 auto; padding: 0;
    display: grid; gap: 10px; width: 100%; text-align: left;
}
.bb-pm__sheet-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--bb-text);
}
.bb-pm__sheet-list svg {
    width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px;
    color: var(--bb-yellow-hover);
}

.bb-pm__sheet-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; margin-top: 22px; padding: 15px 18px;
    background: var(--bb-yellow); color: var(--bb-navy);
    border-radius: var(--bb-radius);
    font-weight: 800; font-size: 14px; letter-spacing: .4px;
    transition: background var(--bb-transition), transform var(--bb-transition);
}
.bb-pm__sheet-btn:hover { background: var(--bb-yellow-hover); color: var(--bb-navy); transform: translateY(-1px); }
.bb-pm__sheet-btn svg { width: 17px; height: 17px; }
.bb-pm__sheet-meta { margin: 11px 0 0; font-size: 11.5px; color: var(--bb-text-light); }

/* Mobile: data sheet drops underneath the video (same order the app uses) */
@media (max-width: 900px) {
    .bb-pm--split { grid-template-columns: minmax(0, 1fr); }
    .bb-pm__sheet { height: auto; }
}

/* ── Product description typography ───────────────────────────────────
   The migrated descriptions carry plain <ul>/<ol>/<h3>/<h4> with no theme
   styling, so lists sat flush against the edge with no markers.        */
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel--description ol,
.woocommerce-product-details__short-description ul,
.woocommerce-product-details__short-description ol {
    margin: 0 0 18px;
    padding-left: 26px;
    list-style-position: outside;
}
.woocommerce-Tabs-panel--description ul { list-style-type: disc; }
.woocommerce-Tabs-panel--description ol { list-style-type: decimal; }
.woocommerce-Tabs-panel--description li {
    margin-bottom: 7px;
    line-height: 1.65;
    color: var(--bb-text);
}
.woocommerce-Tabs-panel--description li::marker { color: var(--bb-yellow); }

.woocommerce-Tabs-panel--description p { margin: 0 0 16px; line-height: 1.7; }

.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--description h4 {
    margin: 28px 0 12px;
    color: var(--bb-navy);
    font-weight: 800;
    line-height: 1.3;
}
.woocommerce-Tabs-panel--description h2 { font-size: 22px; }
.woocommerce-Tabs-panel--description h3 { font-size: 19px; }
.woocommerce-Tabs-panel--description h4 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bb-gray);
}
.woocommerce-Tabs-panel--description > *:first-child { margin-top: 0; }

.woocommerce-Tabs-panel--description table {
    width: 100%; border-collapse: collapse; margin: 0 0 20px;
}
.woocommerce-Tabs-panel--description th,
.woocommerce-Tabs-panel--description td {
    border: 1px solid var(--bb-gray-light); padding: 9px 12px; text-align: left; font-size: 14px;
}

/* ==========================================================================
   Shop Online mega menu — desktop

   Everything here sits inside a min-width query. Below 992px none of it
   applies and the menu falls back to the flat category list the mobile styles
   already define, which is deliberately left exactly as it was.
   ========================================================================== */

@media (min-width: 992px) {

    .bb-mega-menu {
        border-top: 3px solid var(--bb-yellow);
        box-shadow: 0 18px 40px rgba(15, 28, 46, 0.18);
    }

    .bb-mega-menu__inner {
        display: grid;
        /* Categories take the first two columns worth of space. */
        grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 0;
        padding: 0;
        align-items: stretch;
    }

    .bb-mega__col {
        padding: 26px 28px 24px;
        min-width: 0;
    }

    /* Extra breathing room on the right so the count pills never crowd the
       divider that separates this column from the specials. */
    .bb-mega__col--cats { padding-right: 40px; }

    /* Hairlines rather than a border on every box — quieter. */
    .bb-mega__col--specials,
    .bb-mega__col--help {
        border-left: 1px solid var(--bb-gray-light, #e5e7eb);
    }

    .bb-mega__col--help {
        background: #fafbfc;
    }

    .bb-mega__title {
        margin: 0 0 16px;
        padding-bottom: 10px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: var(--bb-navy, #1a1f2e);
        border-bottom: 2px solid var(--bb-yellow, #1e4fa2);
        line-height: 1.45;
    }

    /* ── Categories: two columns, all of them ───────────────────────── */

    .bb-mega__cats {
        display: grid;
        /*
         * minmax(0, 1fr), never a bare 1fr.
         *
         * 1fr resolves to minmax(auto, 1fr), and that auto minimum refuses to
         * shrink below the row's min-content width. With nowrap names like
         * "Automatic Changeover Switches" the columns grew past the available
         * space, the grid overflowed to the right, and the count pill — pinned
         * to the right edge of each row — ended up sitting on the divider.
         * A zero minimum lets the column shrink so the ellipsis can do its job.
         */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 30px;
        overflow: hidden;
    }

    .bb-mega-menu__item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 10px;
        border-radius: var(--bb-radius, 6px);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--bb-text, #1f2937);
        text-decoration: none;
        transition: background var(--bb-transition, .25s ease), color var(--bb-transition, .25s ease);
        /* A flex item will not shrink past its content either, so the row
           itself needs the same zero minimum as the grid column. */
        min-width: 0;
    }

    .bb-mega-menu__item:hover {
        background: #f4f7ee;
        color: var(--bb-navy, #1a1f2e);
        padding-left: 10px; /* no jump — the arrow moves instead */
    }

    .bb-mega-menu__arrow {
        color: var(--bb-yellow, #1e4fa2);
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        transition: transform var(--bb-transition, .25s ease);
    }

    .bb-mega-menu__item:hover .bb-mega-menu__arrow { transform: translateX(3px); }

    .bb-mega__cat-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The count tells someone whether a category is worth opening. */
    .bb-mega__cat-count {
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        color: var(--bb-gray, #6b7280);
        background: #f1f2f4;
        border-radius: 999px;
        padding: 2px 8px;
    }

    .bb-mega-menu__item:hover .bb-mega__cat-count {
        background: var(--bb-yellow, #1e4fa2);
        color: var(--bb-dark, #10213f);
    }

    /* ── Specials column ────────────────────────────────────────────── */

    .bb-mega__products { display: flex; flex-direction: column; }

    .bb-mega__product {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--bb-gray-light, #e5e7eb);
        text-decoration: none;
    }

    .bb-mega__product:last-child { border-bottom: 0; }

    .bb-mega__product-media {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: var(--bb-radius, 6px);
        background: #fff;
        border: 1px solid var(--bb-gray-light, #e5e7eb);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .bb-mega__product-media img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .bb-mega__product-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; }

    .bb-mega__product-name {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--bb-navy, #1a1f2e);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bb-mega__product:hover .bb-mega__product-name { color: var(--bb-green-text-hover, #3d5c10); }

    /* One line: price, what it was, how much off. */
    .bb-mega__product-price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        line-height: 1.2;
    }

    .bb-mega__product-price strong {
        font-size: 14px;
        font-weight: 800;
        color: var(--bb-navy, #1a1f2e);
    }

    .bb-mega__product-price s {
        font-size: 11.5px;
        color: var(--bb-gray, #9aa0a6);
    }

    .bb-mega__product-price em {
        font-style: normal;
        font-size: 10.5px;
        font-weight: 800;
        color: #fff;
        background: var(--bb-sale-red, #c62828);
        border-radius: 3px;
        padding: 1px 5px;
    }

    .bb-mega__more {
        display: inline-block;
        margin-top: 14px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--bb-yellow-hover, #163c7c);
        text-decoration: none;
    }

    .bb-mega__more:hover { text-decoration: underline; }

    /* ── Help column ────────────────────────────────────────────────── */

    .bb-mega__help-text {
        margin: 0 0 16px;
        font-size: 13px;
        line-height: 1.6;
        color: var(--bb-gray, #6b7280);
    }

    .bb-mega__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 11px 14px;
        margin-bottom: 9px;
        border-radius: var(--bb-radius, 6px);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        border: 1.5px solid transparent;
        transition: all var(--bb-transition, .25s ease);
    }

    .bb-mega__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

    /* WhatsApp leads — it is how most customers actually reach the team. */
    .bb-mega__btn--wa { background: #25d366; color: #fff; }
    .bb-mega__btn--wa:hover { background: #1eb455; color: #fff; }

    .bb-mega__btn--finder {
        background: var(--bb-yellow, #1e4fa2);
        color: var(--bb-dark, #10213f);
    }
    .bb-mega__btn--finder:hover { background: var(--bb-yellow-hover, #163c7c); color: var(--bb-dark, #10213f); }

    .bb-mega__btn--quote { background: var(--bb-navy, #1a1f2e); color: #fff; }
    .bb-mega__btn--quote:hover { background: #0b1522; color: #fff; }

    .bb-mega__usps {
        list-style: none;
        margin: 18px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--bb-gray-light, #e5e7eb);
    }

    .bb-mega__usps li {
        display: grid;
        grid-template-columns: 26px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        margin-bottom: 12px;
    }

    .bb-mega__usps li:last-child { margin-bottom: 0; }

    .bb-mega__usp-ico {
        grid-row: 1 / 3;
        align-self: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: #eef3fc;
        color: var(--bb-yellow-hover, #163c7c);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .bb-mega__usps strong { font-size: 12.5px; font-weight: 700; color: var(--bb-navy, #1a1f2e); }
    .bb-mega__usps em { font-style: normal; font-size: 11.5px; color: var(--bb-gray, #6b7280); }

    /* The flat mobile link has no place in the desktop layout. */
    .bb-mega-menu__all { display: none; }
}

/* Below the desktop breakpoint the new wrappers must impose no layout of
   their own — the existing mobile rules style .bb-mega-menu__item directly,
   so display:contents makes the wrappers vanish from the box tree. */
@media (max-width: 991px) {
    .bb-mega__col,
    .bb-mega__cats { display: contents; }

    .bb-mega__title,
    .bb-mega__col--specials,
    .bb-mega__col--help,
    .bb-mega__cat-count { display: none; }
}

/* ==========================================================================
   Homepage specials carousel — phones

   At 768px each card was calc(50% - 12px), so two cards sat side by side on a
   phone inside a container with 60px of horizontal padding. On a 390px screen
   that left roughly 135px per card, which is where the squashed look came
   from. Phones now get one card with a peek of the next, and native
   scroll-snap instead of the transform carousel — momentum swiping is what
   people expect there, and the arrows were never reachable one-handed.
   ========================================================================== */

@media (max-width: 600px) {
    .bb-product-carousel { padding: 0; }

    /* The JS sets overflow:hidden inline on this wrapper for the desktop
       carousel; it has to release the scroller on phones. */
    .bb-product-carousel > .woocommerce { overflow: visible !important; }

    .bb-product-carousel .bb-carousel-track,
    .bb-product-carousel .woocommerce ul.products,
    .bb-product-carousel ul.products {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        transform: none !important;
        gap: 14px !important;
        padding: 4px 16px 10px !important;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    .bb-product-carousel .bb-carousel-track::-webkit-scrollbar,
    .bb-product-carousel ul.products::-webkit-scrollbar { display: none; }

    .bb-product-carousel .bb-carousel-track li.product,
    .bb-product-carousel .woocommerce ul.products li.product,
    .bb-product-carousel ul.products li.product {
        flex: 0 0 78% !important;
        width: 78% !important;
        max-width: 78% !important;
        scroll-snap-align: start;
    }

    /* Swiping replaces them, and they overlapped the cards at this width. */
    .bb-carousel-arrow { display: none !important; }
}

@media (max-width: 380px) {
    .bb-product-carousel .bb-carousel-track li.product,
    .bb-product-carousel .woocommerce ul.products li.product,
    .bb-product-carousel ul.products li.product {
        flex: 0 0 86% !important;
        width: 86% !important;
        max-width: 86% !important;
    }
}

/* ==========================================================================
   Single product — Description / Additional information / Reviews

   Replaces the thin underline tabs, which read as unstyled text crammed
   together. This is a segmented control on a light track: the active tab is a
   raised white pill, so it is obvious which one you are on and that the others
   are clickable. Declared after the original rules so it wins without having
   to edit them in place.
   ========================================================================== */

.woocommerce div.product.bb-single-product .woocommerce-tabs {
    margin-top: 40px;
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0 0 26px;
    padding: 5px;
    background: #f1f3f5;
    border: 0;
    border-radius: 999px;
    /* Three tabs do not fit on a narrow phone — scroll rather than squash. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }

/* WooCommerce's default theme draws pointed "tab" corners with generated
   content. They fight this layout, so they go. */
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 11px 22px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
    white-space: nowrap;
    text-align: center;
    color: var(--bb-gray, #6b7280);
    background: transparent;
    transition: background var(--bb-transition, .25s ease), color var(--bb-transition, .25s ease);
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--bb-navy, #1a1f2e);
    background: rgba(255, 255, 255, .6);
}

.woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li.active a {
    background: #fff;
    color: var(--bb-navy, #1a1f2e);
    box-shadow: 0 1px 3px rgba(15, 28, 46, .14);
}

/* The panel's own H2 repeats the tab label — the tab already says it. */
.woocommerce div.product.bb-single-product .woocommerce-tabs .panel > h2:first-child {
    display: none;
}

.woocommerce div.product.bb-single-product .woocommerce-tabs .panel {
    padding: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--bb-text, #1f2937);
}

@media (max-width: 600px) {
    .woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs { margin-bottom: 20px; }
    .woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
    .woocommerce div.product.bb-single-product .woocommerce-tabs ul.tabs li a { padding: 10px 18px; font-size: 13px; }
}

/* ==========================================================================
   Mobile web fixes
   ========================================================================== */

/* ── Snackbar ──────────────────────────────────────────────────────────────
   It was `white-space: nowrap` with `left:50%; transform:translateX(-50%)`
   and no max-width, so any message longer than the screen ran off both edges
   and only the middle was visible. Pin it to both edges instead of centring
   a wider-than-viewport box, and let the text wrap.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
    .bb-snackbar {
        left: 16px;
        right: 16px;
        transform: none;
        white-space: normal;
        text-align: left;
        line-height: 1.4;
        padding: 13px 16px;
        font-size: 13.5px;
        border-radius: 10px;
    }
    .bb-snackbar.is-visible { bottom: 16px; }
    .bb-snackbar__icon { flex: 0 0 auto; }
}

/* ── Brands grid ───────────────────────────────────────────────────────────
   Three columns on a 390px screen gave ~110px cells, but min-height stayed at
   140px and the logo was width:150% — so each brand was a tall white box with
   an oversized logo cropped inside it. Two columns, a height that matches the
   width, and a logo that fits.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
    /*
     * Three across, short tiles.
     *
     * The logos are 300x300 squares with the mark small in the middle and a lot
     * of white around it, which is why the desktop rule scales the image past
     * 100% and lets overflow:hidden crop that padding away. Never cap the
     * image's height here — that undoes the zoom and leaves a tiny mark
     * floating in a big white box.
     *
     * Three columns give ~110px tiles, so the zoom goes up to 220% to keep the
     * mark legible at that size, and the tile stays short (90px) so six brands
     * are two quick rows rather than a long scroll.
     */
    .bb-brands-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .bb-brand-item {
        min-height: 90px;
        padding: 2px;
        border-radius: 8px;
    }
    .bb-brand-item img { width: 220%; }
    .bb-brand-name { font-size: 11px; }
}

@media (max-width: 380px) {
    .bb-brands-grid { gap: 6px; }
    .bb-brand-item { min-height: 78px; }
}

/* ── Map ───────────────────────────────────────────────────────────────────
   The overlay is position:absolute at top:0 over a 400px map. On a phone its
   text wraps to several lines, so it covered the top third — exactly where the
   pin sits — and you had to drag the map down to find the warehouse. On mobile
   the overlay becomes a normal block above the map, so the whole map is
   visible and the pin is centred in it.
   ------------------------------------------------------------------------ */

@media (max-width: 782px) {
    .bb-map-overlay {
        position: static;
        padding: 22px 16px;
    }
    .bb-map-title { font-size: 19px; line-height: 1.3; }
    .bb-map-overlay h5,
    .bb-map-overlay .bb-map-address { font-size: 15px; }
    .bb-map-overlay p { font-size: 13.5px; }
    /* Taller than the desktop 400px so the pin and surrounding streets read. */
    .bb-map { height: 340px !important; }
    .bb-map iframe { height: 100%; }
}

/* ── Cart ──────────────────────────────────────────────────────────────────
   Content sat hard against the card edges with no breathing room.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
    .woocommerce-cart .bb-main,
    .woocommerce-checkout .bb-main { padding-left: 0; padding-right: 0; }

    .woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart_totals {
        padding-left: 14px;
        padding-right: 14px;
    }

    .woocommerce-cart table.shop_table {
        border: 0;
        width: 100%;
    }
    .woocommerce-cart table.shop_table td,
    .woocommerce-cart table.shop_table th {
        padding: 12px 14px;
        word-break: break-word;
    }
    .woocommerce-cart table.shop_table img { max-width: 64px; height: auto; }

    .woocommerce-cart .cart_totals table td,
    .woocommerce-cart .cart_totals table th { padding: 11px 14px; }

    /* Full-width actions rather than buttons crushed side by side. */
    .woocommerce-cart .wc-proceed-to-checkout .button,
    .woocommerce-cart .actions .button {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
}

/* ── Checkout: Your order ──────────────────────────────────────────────────
   The review table squashed product name, quantity and price into three
   columns barely wide enough for the price. Give the name room and let it
   wrap, and stop the totals cramping against the edge.
   ------------------------------------------------------------------------ */

@media (max-width: 600px) {
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .woocommerce-checkout-review-order {
        padding: 0 14px;
    }

    .woocommerce-checkout table.woocommerce-checkout-review-order-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .woocommerce-checkout .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout .woocommerce-checkout-review-order-table td {
        padding: 12px 10px;
        font-size: 13.5px;
        line-height: 1.45;
        word-break: break-word;
        vertical-align: top;
    }

    /* Product name gets the room; the amount column only needs its number. */
    .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name { width: 62%; }
    .woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
    .woocommerce-checkout .woocommerce-checkout-review-order-table th.product-total {
        width: 38%;
        text-align: right;
        white-space: nowrap;
    }
    .woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
        display: block;
        color: var(--bb-gray, #6b7280);
        font-weight: 600;
    }
}


/* ── Request a Quote: basket rows on mobile ────────────────────────────────
   A four-column table (product / SKU / qty / remove) cannot fit a 390px
   screen, so it ran off the edge. Each row becomes one compact card instead:
   thumbnail and name on the top line, SKU and quantity inline beneath, and
   the remove control as a small circular button in the corner. Deliberately
   NOT a stack of uppercase labels above each value — that is legible but
   enormous, and pushes a three-item quote off the bottom of the screen.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
    .bb-quote-page-layout { display: block; }
    .bb-quote-page-main,
    .bb-quote-page-sidebar { width: auto; max-width: 100%; }

    .bb-quote-basket { overflow-x: hidden; }
    .bb-quote-basket table { display: block; width: 100%; }
    .bb-quote-basket thead { display: none; }
    .bb-quote-basket tbody { display: block; width: 100%; }

    .bb-quote-basket tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 42px 12px 12px;
        margin-bottom: 10px;
        border: 1px solid var(--bb-gray-light, #e5e7eb);
        border-radius: 10px;
        background: #fff;
    }

    .bb-quote-basket td {
        display: block;
        border: 0;
        padding: 0;
        text-align: left;
    }

    /* Thumbnail + name own the first line. */
    .bb-quote-basket td[data-label="Product"] { flex: 1 1 100%; min-width: 0; }
    .bb-quote-basket td[data-label="Product"] strong {
        font-size: 14px;
        line-height: 1.35;
        display: block;
    }
    .bb-quote-basket td[data-label="Product"] img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        border-radius: 8px;
        background: #f7f8fa;
        flex: 0 0 52px;
    }

    /* SKU and Qty sit side by side underneath, label inline not stacked. */
    .bb-quote-basket td[data-label="SKU"],
    .bb-quote-basket td[data-label="Qty"] {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .bb-quote-basket td[data-label="SKU"]::before,
    .bb-quote-basket td[data-label="Qty"]::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--bb-gray, #6b7280);
    }

    .bb-quote-basket td[data-label="Qty"] .bb-quote-qty-input {
        width: 58px !important;
        padding: 5px !important;
    }

    /* Remove: a quiet circular button in the corner, not a red word. */
    .bb-quote-basket .bb-remove-quote-item {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--bb-gray-light, #e5e7eb);
        background: #fff;
        color: var(--bb-gray, #6b7280);
        font-size: 0;
        line-height: 1;
    }

    /* The button's text is "× Remove"; keep the × as the glyph, drop the word. */
    .bb-quote-basket .bb-remove-quote-item::before {
        content: "×";
        font-size: 18px;
        line-height: 1;
    }

    .bb-quote-basket .bb-remove-quote-item:hover {
        border-color: #f0b8ba;
        background: #fdecec;
        color: #a3282f;
    }
}

/* ==========================================================================
   Single product — identity line and reassurance strip

   Brand, SKU and category now sit above the title as one identity line. They
   used to be repeated in a labelled block under the buy button, which said the
   brand twice and dropped a stray list between the call to action and the
   product video. The reassurance strip moves up against the buttons so it
   reads as part of the decision instead of a loose row of icons.
   ========================================================================== */

.bb-single-product__ident {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 10px;
}

/* The brand keeps its own styling; the margin now belongs to the flex row. */
.bb-single-product__ident .bb-single-product__brand { margin-bottom: 0; }

/* SKU reads as a secondary fact, so it is quieter than the brand and
   separated by a rule rather than punctuation. */
.bb-ident-sku {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-text, #1f2937);
    font-variant-numeric: tabular-nums;
}

/* The divider only makes sense when the brand is actually there to divide
   from — not every product has one, and a rule with nothing to its left just
   reads as a stray mark. */
.bb-ident-sku:not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid var(--bb-gray-light, #e5e7eb);
}

.bb-ident-sku > span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bb-gray, #6b7280);
}

/* Category sits under the title as a breadcrumb-ish line, not a labelled row. */
.bb-single-product__cats {
    margin: -4px 0 18px;
    font-size: 13.5px;
    color: var(--bb-gray, #6b7280);
}

.bb-single-product__cats > span { font-style: italic; }

.bb-single-product__cats a {
    color: var(--bb-gray, #6b7280);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bb-single-product__cats a:hover { color: var(--bb-yellow-hover, #163c7c); }

/* Reassurance strip — tied to the buttons above it rather than floating. */
.bb-single-product__trust {
    margin-top: 22px;
    padding: 14px 18px;
    gap: 10px 22px;
    justify-content: space-between;
    border: 1px solid var(--bb-gray-light, #e5e7eb);
    background: #fafbfc;
}

.bb-trust-item { font-size: 12.5px; }
.bb-trust-item svg { width: 17px; height: 17px; }

@media (max-width: 600px) {
    .bb-single-product__ident { gap: 8px 12px; }
    .bb-ident-sku:not(:first-child) { padding-left: 12px; }
    .bb-ident-sku { font-size: 12.5px; }

    /* Three across on a phone would wrap awkwardly mid-label. */
    .bb-single-product__trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }
}

/* ==========================================================================
   Single product — buy row

   Stock, quantity, Add to Cart and Get a Quote now share one row. The Add to
   Cart button used to be flex:1, which stretched it across the full column
   width and left the row looking lopsided; it is sized to its content instead
   and the reclaimed space goes to the row.
   ========================================================================== */

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

/* Stock reads as a status, so it leads the row and does not compete with the
   buttons for weight. */
.bb-single-product__stock {
    flex: 0 0 auto;
    margin: 0;
    padding-right: 12px;
    border-right: 1px solid var(--bb-gray-light, #e5e7eb);
}

.bb-single-product__add-to-cart form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    flex: 0 1 auto;
}

/* Sized to its label rather than stretched. */
.woocommerce div.product.bb-single-product form.cart .button.single_add_to_cart_button,
.bb-single-product__add-to-cart .single_add_to_cart_button {
    flex: 0 0 auto !important;
    min-width: 168px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    /* The divider only works while the row is one line. */
    .bb-single-product__stock {
        flex: 1 1 100%;
        padding-right: 0;
        border-right: 0;
        margin-bottom: 2px;
    }
    .bb-single-product__add-to-cart form.cart { flex: 1 1 100%; }
    .woocommerce div.product.bb-single-product form.cart .button.single_add_to_cart_button,
    .bb-single-product__add-to-cart .single_add_to_cart_button {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    .bb-single-product__quote-btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Single product — price block

   The price, its VAT label and the saving now sit on one baseline as a single
   unit, with real space beneath before the buy row. Previously the saving was
   a separate block glued under the price, and the gap before the stock row
   came from a margin on .bb-single-product__stock — which disappeared when
   that element moved into the buy row.
   ========================================================================== */

.bb-single-product__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0 0 22px;
}

/* WooCommerce wraps the price in a <p> with its own margins. */
.bb-single-product__price .price,
.woocommerce div.product.bb-single-product .bb-single-product__price .price {
    margin: 0 !important;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.15;
}

/* A saving is good news, so it reads in the brand green rather than the amber
   that elsewhere on the site means "take note". */
.bb-single-product__saving {
    display: inline-block;
    margin: 0;
    padding: 4px 11px;
    background: #eef3fc;
    color: #1e4fa2;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1.3;
}

/* Space above the buy row now belongs to the row itself, not to the stock
   badge that used to live on its own line. */
.bb-single-product__add-to-cart {
    padding-top: 4px;
}

@media (max-width: 700px) {
    .bb-single-product__price { margin-bottom: 18px; }
}

/* ── Map facade ────────────────────────────────────────────────────────────
   Stands in for the Google embed until clicked. Styled to read as a map
   placeholder rather than an empty box, so it does not look broken.
   ------------------------------------------------------------------------ */
.bb-map__facade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 24px;
    border: 0;
    cursor: pointer;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px),
        var(--bb-navy, #1a1f2e);
    color: #fff;
    font-family: inherit;
    transition: background-color var(--bb-transition, .25s ease);
}

.bb-map__facade:hover { background-color: #0b1522; }

.bb-map__pin {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bb-yellow, #1e4fa2);
    color: var(--bb-dark, #10213f);
}

.bb-map__pin svg { width: 26px; height: 26px; }

.bb-map__addr {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: 34ch;
    line-height: 1.5;
}

.bb-map__cta {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--bb-yellow, #1e4fa2);
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}

.bb-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ═══════════════════════════════════════════════════════════
   BUG BOUNTY SA — components
   Everything below is specific to this site and overrides the
   inherited Generator Parts rules above where they overlap.
   ═══════════════════════════════════════════════════════════ */

body { font-size: 15.5px; color: var(--bb-text); background: #fff; }
h1, h2, h3, h4 { color: var(--bb-dark); letter-spacing: -0.015em; line-height: 1.2; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.bb-skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: #fff; color: var(--bb-blue); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.bb-skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--bb-amber); outline-offset: 2px; }
.bb-muted { color: var(--bb-gray); }
.bb-optional { color: var(--bb-text-light); font-weight: 400; font-size: .9em; }

/* ── Buttons ──────────────────────────────────────────────── */
.bb-btn { text-transform: none; letter-spacing: 0; font-weight: 700; border-radius: 999px; padding: 12px 24px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.bb-btn--lg { padding: 15px 30px; font-size: 16px; }
.bb-btn--sm { padding: 8px 16px; font-size: 14px; }
.bb-btn--block { display: flex; width: 100%; }
.bb-btn--primary { background: var(--bb-blue); border-color: var(--bb-blue); color: #fff; }
.bb-btn--primary:hover { background: var(--bb-green-text-hover); border-color: var(--bb-green-text-hover); color: #fff; }
.bb-btn--accent { background: var(--bb-amber); border-color: var(--bb-amber); color: #1b1300; }
.bb-btn--accent:hover { background: var(--bb-yellow-hover); border-color: var(--bb-yellow-hover); color: #1b1300; }
.bb-btn--outline { background: #fff; border-color: var(--bb-gray-light); color: var(--bb-blue); }
.bb-btn--outline:hover { border-color: var(--bb-blue); color: var(--bb-blue); }
.bb-btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.bb-btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.bb-btn--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.bb-btn--whatsapp:hover { background: #1eb457; border-color: #1eb457; color: #fff; }
.bb-link-arrow { font-weight: 700; color: var(--bb-blue); white-space: nowrap; }

/* ── Promo + top bar ──────────────────────────────────────── */
.bb-promo-bar { background: var(--bb-amber); color: #1b1300; text-align: center; padding: 7px 0; font-size: 13.5px; font-weight: 700; }
.bb-promo-bar a { color: #1b1300; }
.bb-promo-bar a:hover { color: #000; text-decoration: underline; }
.bb-top-bar { background: var(--bb-dark); color: rgba(255,255,255,.75); font-size: 13px; padding: 6px 0; }
.bb-top-bar__left, .bb-top-bar__right { display: flex; gap: 18px; align-items: center; }
.bb-top-bar a { color: rgba(255,255,255,.85); }
.bb-top-bar a:hover { color: var(--bb-amber); }
.bb-top-bar__item { display: inline-flex; align-items: center; gap: 6px; }

/* ── Header ───────────────────────────────────────────────── */
.bb-header { background: #fff; box-shadow: 0 1px 0 var(--bb-gray-light), 0 6px 20px rgba(16,33,63,.06); }
.bb-header__inner { gap: 28px; padding: 14px 20px; }
.bb-header__logo { display: flex; align-items: center; }
.bb-logo-img, .bb-header__logo img { height: 44px !important; width: auto !important; }
.bb-header__search { max-width: 620px; }
.bb-search-form { background: var(--bb-light); border: 2px solid var(--bb-gray-light); border-radius: 999px; transition: border-color var(--bb-transition); }
.bb-search-form:focus-within { border-color: var(--bb-blue); background: #fff; }
.bb-search-input { background: transparent; padding: 11px 18px; font-size: 15px; color: var(--bb-text); }
.bb-search-btn { background: var(--bb-blue); color: #fff; border-radius: 999px; margin: 3px; padding: 8px 16px; }
.bb-search-btn:hover { background: var(--bb-green-text-hover); }
.bb-live-search-dropdown { border-radius: 14px; top: calc(100% + 6px); overflow: hidden auto; }
.bb-header__actions { gap: 6px; }
.bb-action { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--bb-dark); padding: 6px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 600; }
.bb-action:hover { background: var(--bb-blue-50); color: var(--bb-blue); }
.bb-action__label { line-height: 1; }
.bb-badge { position: absolute; top: 0; right: 4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--bb-blue); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.bb-action--cart .bb-badge { background: var(--bb-amber); color: #1b1300; }
.bb-badge[hidden] { display: none; }
.bb-mobile-toggle span { background: var(--bb-dark); }

/* ── Navigation ───────────────────────────────────────────── */
.bb-nav { background: var(--bb-blue); border-top: 0; }
.bb-nav__menu { justify-content: flex-start; gap: 2px; }
.bb-nav__menu > li > a { text-transform: none; letter-spacing: 0; font-size: 14.5px; padding: 13px 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #fff; }
.bb-nav__menu > li > a:hover, .bb-nav__menu > li.current-menu-item > a { background: rgba(255,255,255,.12); color: #fff; }
.bb-nav__menu > li.bb-mega-menu-parent > a { background: rgba(0,0,0,.18); font-weight: 700; }
.bb-nav__specials > a { color: var(--bb-amber) !important; font-weight: 700; }
.bb-nav__mobile-only { display: none; }
.bb-mega-menu { border-top: 0; border-radius: 0 0 18px 18px; }
.bb-mega-menu__inner { grid-template-columns: 1.3fr 1.2fr 1fr; gap: 32px; padding: 28px 20px 30px; }
.bb-mega__title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-gray); margin-bottom: 12px; }
.bb-mega__cats { display: grid; gap: 6px; }
.bb-mega-menu__item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 12px 14px; border: 1px solid var(--bb-gray-light); border-radius: 12px; }
.bb-mega-menu__item:hover { background: var(--bb-blue-50); border-color: var(--bb-blue-100); padding-left: 14px; }
.bb-mega__cat-name { font-weight: 700; color: var(--bb-dark); }
.bb-mega__cat-sub { grid-row: 2; font-size: 13px; color: var(--bb-gray); }
.bb-mega__cat-count { grid-row: 1 / 3; align-self: center; font-size: 12px; font-weight: 700; color: var(--bb-blue); background: var(--bb-blue-50); border-radius: 999px; padding: 3px 9px; }
.bb-mega__products { display: grid; gap: 8px; }
.bb-mega__product { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; color: var(--bb-text); }
.bb-mega__product:hover { background: var(--bb-light); color: var(--bb-text); }
.bb-mega__product-media img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--bb-gray-light); border-radius: 8px; }
.bb-mega__product-body { display: flex; flex-direction: column; font-size: 14px; }
.bb-mega__product-name { font-weight: 600; line-height: 1.3; }
.bb-mega__product-price strong { color: var(--bb-blue); }
.bb-mega__product-price s { color: var(--bb-text-light); font-size: 12.5px; margin: 0 4px; }
.bb-mega__product-price em { font-style: normal; font-size: 12px; font-weight: 700; color: #a3480b; }
.bb-mega__more { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--bb-blue); }
.bb-mega__col--help { background: var(--bb-light); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bb-mega__help-text { font-size: 14px; color: var(--bb-gray); margin-bottom: 4px; }

/* ── Sections & headings ──────────────────────────────────── */
.bb-section { padding: 64px 0; }
.bb-section--soft { background: var(--bb-light); }
.bb-section--tight { padding: 24px 0 0; }
.bb-section-heading { text-align: center; margin-bottom: 32px; }
.bb-section-heading h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.bb-section-heading h2::after { display: none !important; }
.bb-section-heading--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; text-align: left; }
.bb-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bb-blue); margin-bottom: 8px; }
.bb-eyebrow::before, .bb-eyebrow::after { display: none !important; }
.bb-eyebrow--light { color: var(--bb-amber); }

/* ── Hero ─────────────────────────────────────────────────── */
.bb-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% 20%, rgba(42,98,194,.55), transparent 60%), linear-gradient(135deg, #10213f 0%, #163a78 55%, #1e4fa2 100%); padding: 72px 0 80px; min-height: 0; }
.bb-hero::before, .bb-hero::after { display: none; }
.bb-hero--image .bb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.bb-hero__inner { position: relative; display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: 40px; }
.bb-hero__content { max-width: 680px; }
.bb-hero__title { color: #fff; font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1.05; margin: 4px 0 18px; }
.bb-hero__subtitle { color: rgba(255,255,255,.85); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; margin-bottom: 30px; max-width: 600px; }
.bb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.bb-hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; color: rgba(255,255,255,.85); font-size: 14.5px; }
.bb-hero__points li { display: flex; align-items: center; gap: 8px; }
.bb-hero__points li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--bb-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1300' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat; flex: none; }
.bb-hero__mark { justify-self: center; width: min(280px, 100%); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.96); display: grid; place-items: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.bb-hero__mark img { width: 66%; height: auto; }

/* ── Shop by problem ──────────────────────────────────────── */
.bb-problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bb-problem-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; background: #fff; border: 1px solid var(--bb-gray-light); border-radius: 18px; color: var(--bb-text); transition: transform var(--bb-transition), box-shadow var(--bb-transition), border-color var(--bb-transition); }
.bb-problem-card:hover { transform: translateY(-3px); box-shadow: var(--bb-shadow-lg); border-color: var(--bb-blue-100); color: var(--bb-text); }
.bb-problem-card__icon { width: 58px; height: 58px; border-radius: 16px; background: var(--bb-blue-50); color: var(--bb-blue); display: grid; place-items: center; margin-bottom: 8px; }
.bb-problem-card__icon svg { width: 34px; height: 34px; }
.bb-problem-card__title { font-size: 19px; font-weight: 800; color: var(--bb-dark); }
.bb-problem-card__sub { font-size: 14px; color: var(--bb-gray); }
.bb-problem-card__go { position: absolute; right: 20px; top: 26px; font-size: 20px; color: var(--bb-blue); transition: transform var(--bb-transition); }
.bb-problem-card:hover .bb-problem-card__go { transform: translateX(4px); }

/* ── Brands ───────────────────────────────────────────────── */
.bb-brand-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.bb-brand-tile { background: #fff; border: 1px solid var(--bb-gray-light); border-radius: 14px; aspect-ratio: 5 / 3; display: grid; place-items: center; padding: 16px; transition: box-shadow var(--bb-transition), transform var(--bb-transition); }
.bb-brand-tile:hover { box-shadow: var(--bb-shadow-lg); transform: translateY(-2px); }
.bb-brand-tile img { max-height: 70px; width: auto; object-fit: contain; filter: grayscale(.15); }

/* ── CTA band ─────────────────────────────────────────────── */
.bb-cta-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; padding: 44px; border-radius: 24px; background: linear-gradient(135deg, #10213f, #1e4fa2); color: #fff; }
.bb-cta-band h2 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.bb-cta-band p { color: rgba(255,255,255,.85); }
.bb-cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ── Trust strip, newsletter, footer ──────────────────────── */
.bb-trust { border-top: 1px solid var(--bb-gray-light); background: #fff; padding: 26px 0; }
.bb-trust__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bb-trust__item { display: flex; gap: 12px; align-items: center; }
.bb-trust__item svg { width: 34px; height: 34px; color: var(--bb-blue); flex: none; }
.bb-trust__item strong { display: block; color: var(--bb-dark); font-size: 15px; }
.bb-trust__item span { font-size: 13.5px; color: var(--bb-gray); }
.bb-newsletter { background: var(--bb-blue); color: #fff; padding: 36px 0; }
.bb-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.bb-newsletter__title { color: #fff; font-size: 24px; margin-bottom: 4px; }
.bb-newsletter p { color: rgba(255,255,255,.85); }
.bb-newsletter__form input[type=email], .bb-newsletter__form input[type=text] { border-radius: 999px; border: 0; padding: 12px 18px; }
.bb-newsletter__form button, .bb-newsletter__form input[type=submit] { border-radius: 999px; background: var(--bb-amber); color: #1b1300; border: 0; font-weight: 700; padding: 12px 22px; }
.bb-footer { background: var(--bb-dark); color: rgba(255,255,255,.75); padding-top: 52px; }
.bb-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; }
.bb-footer .bb-footer__logo, .woocommerce-page .bb-footer .bb-footer__logo { height: 38px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px; box-sizing: content-box; margin-bottom: 16px; }
.bb-footer-title { color: #fff; font-size: 15px; text-transform: none; letter-spacing: 0; margin-bottom: 14px; }
.bb-footer-title::after { display: none !important; }
.bb-footer a { color: rgba(255,255,255,.8); }
.bb-footer a:hover { color: var(--bb-amber); }
.bb-footer-links, .bb-footer-news, .bb-footer-contact { list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.bb-footer-contact { margin-top: 14px; }
.bb-footer-more { font-weight: 700; }
.bb-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; }
.bb-footer__bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.bb-footer__social { display: flex; gap: 16px; font-size: 13px; color: rgba(255,255,255,.5); align-items: center; }

/* ── Page hero (inner pages) ──────────────────────────────── */
.bb-page-hero { background: linear-gradient(135deg, #10213f, #1e4fa2); color: #fff; padding: 36px 0 40px; margin-bottom: 36px; }
.bb-page-hero h1 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin: 8px 0 8px; }
.bb-page-hero p { color: rgba(255,255,255,.85); max-width: 720px; }
.bb-page-hero .bb-breadcrumb, .bb-page-hero .bb-breadcrumb a, .bb-page-hero .woocommerce-breadcrumb, .bb-page-hero .woocommerce-breadcrumb a { color: rgba(255,255,255,.75); font-size: 13.5px; }
.bb-page-hero--specials { background: linear-gradient(135deg, #3a2400, #a36a00 55%, #f5b301); }
.bb-specials-banner { margin: -12px auto 28px; }

/* ── Product specification panel (top of every product) ───── */
.bb-specs { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin: 4px 0 20px; padding: 16px; border: 1px solid var(--bb-gray-light); border-radius: 16px; background: #fff; }
.bb-specs__logo { width: 120px; height: 84px; border: 1px solid var(--bb-gray-light); border-radius: 12px; display: grid; place-items: center; padding: 8px; background: #fff; }
.bb-specs__logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.bb-specs__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.bb-specs__table th, .bb-specs__table td { padding: 8px 0; border-bottom: 1px dashed var(--bb-gray-light); vertical-align: top; text-align: left; }
.bb-specs__table tr:last-child th, .bb-specs__table tr:last-child td { border-bottom: 0; }
.bb-specs__table th { width: 42%; padding-right: 12px; font-weight: 700; color: var(--bb-dark); white-space: nowrap; }
.bb-specs__table td { color: var(--bb-text); text-align: right; }
.bb-specs__table td a { font-weight: 700; color: var(--bb-blue); }

/* ── Single product ───────────────────────────────────────── */
.bb-single-product__title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin: 4px 0 14px; }
.bb-single-product__brand { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-blue); background: var(--bb-blue-50); padding: 4px 10px; border-radius: 999px; }
.bb-single-product__price .price, .bb-single-product__price .amount { color: var(--bb-dark); font-size: 30px; font-weight: 800; }
.bb-single-product__price del .amount { color: var(--bb-text-light); font-size: 18px; font-weight: 500; }
.bb-single-product__saving { background: #fff4d6; color: #7a4d00; font-weight: 700; border-radius: 999px; padding: 4px 12px; font-size: 13.5px; }
.bb-single-product__add-to-cart .single_add_to_cart_button, .bb-single-product__add-to-cart button.button { background: var(--bb-blue) !important; color: #fff !important; border-radius: 999px !important; font-weight: 700 !important; padding: 13px 28px !important; text-transform: none !important; }
.bb-single-product__quote-btn { border-radius: 999px; border: 2px solid var(--bb-gray-light); background: #fff; color: var(--bb-blue); font-weight: 700; padding: 11px 20px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bb-single-product__quote-btn:hover { border-color: var(--bb-blue); }
.bb-single-product__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; padding: 14px 16px; border-radius: 14px; background: var(--bb-light); font-size: 14.5px; color: var(--bb-gray); }
.bb-single-product__ask span { flex: 1 1 220px; }
.bb-stock--in { color: #1a7f37; }
.bb-stock--out { color: var(--bb-red); }

/* ── Product cards (shop, specials, home) ─────────────────── */
ul.products li.product { border: 1px solid var(--bb-gray-light) !important; border-radius: 16px !important; overflow: hidden; background: #fff; transition: box-shadow var(--bb-transition), transform var(--bb-transition); }
ul.products li.product:hover { box-shadow: var(--bb-shadow-lg); transform: translateY(-2px); }
ul.products li.product .price { color: var(--bb-dark) !important; font-weight: 800 !important; }
ul.products li.product .button, ul.products li.product .add_to_cart_button { border-radius: 999px !important; background: var(--bb-blue) !important; color: #fff !important; text-transform: none !important; font-weight: 700 !important; }
.onsale, .bb-sale-badge { background: var(--bb-amber) !important; color: #1b1300 !important; border-radius: 999px !important; font-weight: 800 !important; }

/* ── Contact page ─────────────────────────────────────────── */
.bb-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start; margin-bottom: 48px; }
.bb-contact__channels { display: grid; gap: 12px; }
.bb-channel { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--bb-gray-light); border-radius: 16px; color: var(--bb-text); transition: border-color var(--bb-transition), box-shadow var(--bb-transition); }
.bb-channel:hover { border-color: var(--bb-blue-100); box-shadow: var(--bb-shadow); color: var(--bb-text); }
.bb-channel strong { display: block; color: var(--bb-dark); }
.bb-channel em { font-style: normal; font-size: 13.5px; color: var(--bb-gray); }
.bb-channel__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--bb-blue-50); color: var(--bb-blue); display: grid; place-items: center; flex: none; }
.bb-channel__icon svg { width: 22px; height: 22px; }
.bb-channel--whatsapp .bb-channel__icon { background: #e6f9ee; color: #1eb457; }
.bb-contact__form { padding: 28px; border: 1px solid var(--bb-gray-light); border-radius: 20px; background: #fff; box-shadow: var(--bb-shadow); }
.bb-contact__form h2 { font-size: 24px; margin-bottom: 14px; }
.bb-contact__about { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bb-light); margin-bottom: 16px; font-size: 14.5px; }
.bb-contact__about img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; }
.bb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.bb-form-field--full { grid-column: 1 / -1; }
.bb-form-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--bb-dark); }
.bb-form-field input, .bb-form-field textarea, .bb-form-field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--bb-gray-light); border-radius: 12px; font: inherit; background: #fff; transition: border-color var(--bb-transition), box-shadow var(--bb-transition); }
.bb-form-field input:focus, .bb-form-field textarea:focus, .bb-form-field select:focus { border-color: var(--bb-blue); box-shadow: 0 0 0 4px var(--bb-blue-50); outline: none; }
.bb-form-note { margin-top: 12px; font-size: 13px; color: var(--bb-gray); }
.bb-quick-contact-msg { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; }
.bb-quick-contact-msg--success { background: #e7f6ec; color: #1a7f37; }
.bb-quick-contact-msg--error { background: #fdecec; color: #b42318; }
.bb-faq { max-width: 860px; margin: 0 auto 56px; }
.bb-faq h2 { text-align: center; font-size: 28px; margin-bottom: 18px; }
.bb-faq__item { border: 1px solid var(--bb-gray-light); border-radius: 14px; margin-bottom: 10px; background: #fff; }
.bb-faq__item summary { cursor: pointer; padding: 16px 18px; font-weight: 700; color: var(--bb-dark); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bb-faq__item summary::-webkit-details-marker { display: none; }
.bb-faq__item summary::after { content: '+'; color: var(--bb-blue); font-size: 20px; line-height: 1; }
.bb-faq__item[open] summary::after { content: '–'; }
.bb-faq__item p { padding: 0 18px 16px; color: var(--bb-gray); }

/* ── Quote basket page ────────────────────────────────────── */
.bb-quote-basket-empty { text-align: center; padding: 40px 20px; background: var(--bb-light); border-radius: 16px; margin-bottom: 28px; color: var(--bb-gray); }
.bb-quote-basket-empty svg { margin: 0 auto 10px; color: var(--bb-text-light); }
.bb-quote-basket-empty h3 { margin-bottom: 6px; }
.bb-quote-basket-empty p { margin-bottom: 16px; }
.bb-quote-basket__product { display: flex; align-items: center; gap: 12px; }
.bb-quote-basket__product img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; border: 1px solid var(--bb-gray-light); }
.bb-quote-basket__foot { font-size: 13.5px; color: var(--bb-gray); margin-top: 10px; }
.bb-quote-qty-input { width: 72px; padding: 7px; text-align: center; border: 1.5px solid var(--bb-gray-light); border-radius: 10px; }
.bb-quote-step__number { background: var(--bb-blue); color: #fff; }
.bb-quote-sidebar-card { border-radius: 18px; }
.bb-quote-sidebar-card .bb-btn { margin: 12px 0; }
.bb-quote-sidebar-contact { font-size: 14.5px; line-height: 1.9; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bb-nav__menu > li > a { padding: 13px 11px; font-size: 14px; }
    .bb-action__label { display: none; }
}
@media (max-width: 1024px) {
    .bb-problem-grid { grid-template-columns: repeat(2, 1fr); }
    .bb-trust__inner { grid-template-columns: repeat(2, 1fr); }
    .bb-footer__inner { grid-template-columns: 1fr 1fr; }
    .bb-hero__inner { grid-template-columns: 1fr; }
    .bb-hero__mark { display: none; }
    .bb-cta-band { grid-template-columns: 1fr; }
    .bb-cta-band__actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
    .bb-hide-sm { display: none !important; }
    .bb-top-bar__inner { justify-content: center; }
    .bb-header__inner { flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px; }
    .bb-mobile-toggle { order: 0; display: flex; }
    .bb-header__logo { order: 1; margin-right: auto; }
    .bb-logo-img, .bb-header__logo img { height: 34px !important; }
    .bb-header__actions { order: 2; gap: 0; }
    .bb-action { padding: 6px 8px; }
    .bb-header__search { order: 3; flex: 1 1 100%; max-width: none; }
    .bb-nav { background: #fff; border-top: 1px solid var(--bb-gray-light); }
    .bb-nav__menu > li > a { color: var(--bb-dark); border-bottom: 1px solid var(--bb-gray-light); padding: 15px 20px; }
    .bb-nav__menu > li > a:hover, .bb-nav__menu > li.current-menu-item > a { background: var(--bb-blue-50); color: var(--bb-blue); }
    .bb-nav__menu > li.bb-mega-menu-parent > a { background: var(--bb-blue); color: #fff; }
    .bb-nav__specials > a { color: #a36a00 !important; }
    .bb-nav__mobile-only { display: block; }
    .bb-mega-menu { background: #fff !important; }
    .bb-mega-menu__inner { grid-template-columns: 1fr; padding: 12px 16px; gap: 16px; }
    .bb-mega-menu__item { color: var(--bb-dark); padding: 12px 14px; }
    .bb-mega-menu__item:hover { color: var(--bb-blue); padding-left: 14px; }
    .bb-mega__col--specials { display: none; }
    .bb-section { padding: 44px 0; }
    .bb-section-heading--row { flex-direction: column; align-items: flex-start; }
    .bb-hero { padding: 44px 0 52px; }
    .bb-hero__actions .bb-btn { flex: 1 1 100%; }
    .bb-problem-grid { gap: 12px; }
    .bb-problem-card { padding: 18px 16px; }
    .bb-problem-card__title { font-size: 16px; }
    .bb-problem-card__go { display: none; }
    .bb-cta-band { padding: 28px 22px; }
    .bb-trust__inner { gap: 14px; }
    .bb-newsletter__inner { grid-template-columns: 1fr; }
    .bb-footer__inner { grid-template-columns: 1fr; gap: 26px; }
    .bb-contact { grid-template-columns: 1fr; }
    .bb-form-grid { grid-template-columns: 1fr; }
    .bb-contact__form { padding: 20px; }
    .bb-specs { grid-template-columns: 1fr; }
    .bb-specs__logo { width: 110px; height: 70px; }
    .bb-specs__table th { width: auto; white-space: normal; }
}
@media (max-width: 420px) {
    .bb-problem-grid { grid-template-columns: 1fr; }
    .bb-trust__inner { grid-template-columns: 1fr; }
}

/* polish */
.bb-promo-bar { text-transform: none; letter-spacing: 0; }
.bb-page-header--dark { padding: 14px 0 !important; min-height: 0 !important; }
@media (max-width: 768px) { .bb-promo-bar { font-size: 12.5px; padding: 6px 0; } }

/* inner pages open with a full-bleed header: no gap above it */
.bb-main:has(> .bb-page-hero:first-child) { padding-top: 0; }
.bb-main > .bb-page-hero:first-child { margin-top: 0; }

/* ---------- Pages pass 2: blog, search, 404, cart/account, newsletter ---------- */
.bb-blog-card__cats a + a::before { content: "·"; margin: 0 6px; color: var(--bb-gray); }
.bb-blog-card__image:empty { display: block; aspect-ratio: 1200/628; background: var(--bb-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23c5cbd6' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center no-repeat; }

/* Single post */
.bb-page-hero--post h1 { max-width: 860px; }
.bb-post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.bb-post-cats a { background: var(--bb-amber); color: var(--bb-dark); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.bb-post-meta { opacity: .85; font-size: 14px; }
.bb-single-post { max-width: 780px; margin: 40px auto 56px; }
.bb-single-post__image { margin: 0 0 28px; }
.bb-single-post__image img { width: 100%; height: auto; border-radius: 14px; display: block; }
.bb-single-post__content { font-size: 17px; line-height: 1.75; color: #2b3445; }
.bb-single-post__content h2, .bb-single-post__content h3 { color: var(--bb-dark); margin: 1.6em 0 .5em; line-height: 1.3; }
.bb-single-post__content img { max-width: 100%; height: auto; border-radius: 10px; }
.bb-single-post__content a { color: var(--bb-blue); text-decoration: underline; }
.bb-post-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; background: #eef3fb; border: 1px solid #d6e1f3; border-radius: 14px; padding: 22px 24px; margin: 36px 0; }
.bb-post-cta strong { display: block; color: var(--bb-dark); font-size: 17px; margin-bottom: 4px; }
.bb-post-cta p { margin: 0; color: #4a5568; font-size: 15px; }
.bb-post-cta__actions { display: flex; gap: 10px; flex-shrink: 0; }
.bb-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--bb-gray-light); padding-top: 24px; }
.bb-post-nav a { display: block; color: var(--bb-dark); font-weight: 600; line-height: 1.4; }
.bb-post-nav a span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-gray); font-weight: 600; margin-bottom: 4px; }
.bb-post-nav__next { text-align: right; }
.bb-post-nav a:hover { color: var(--bb-blue); }

/* Search */
.bb-search-results { padding: 36px 0 56px; }
.bb-search-section + .bb-search-section { margin-top: 48px; }
.bb-search-section .bb-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.bb-search-section .bb-section-head h2 { margin: 0; font-size: 22px; }
.bb-link-arrow { font-weight: 700; color: var(--bb-blue); }
.bb-empty { text-align: center; max-width: 560px; margin: 24px auto; padding: 40px 24px; background: var(--bb-light); border-radius: 14px; }
.bb-empty h2 { font-size: 22px; margin: 0 0 10px; }
.bb-empty p { color: #4a5568; }
.bb-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* 404 */
.bb-404 { max-width: 760px; margin: 0 auto; padding: 48px 0 64px; text-align: center; }
.bb-404__search { display: flex; gap: 8px; padding: 6px; margin-bottom: 28px; }
.bb-404__search input[type=search] { flex: 1; border: 0; background: transparent; padding: 10px 14px; font-size: 16px; outline: none; min-width: 0; }
.bb-404__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; text-align: left; }
.bb-404__cat { display: flex; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--bb-gray-light); border-radius: 12px; font-weight: 700; color: var(--bb-dark); background: #fff; transition: border-color var(--bb-transition), transform var(--bb-transition); }
.bb-404__cat:hover { border-color: var(--bb-blue); color: var(--bb-blue); transform: translateY(-2px); }
.bb-404__help { margin-top: 28px; color: #4a5568; }
.bb-404__help a { color: var(--bb-blue); font-weight: 600; }

/* Cart / account / Woo notices */
.woocommerce-page .bb-main .woocommerce-info, .woocommerce-page .bb-main .woocommerce-message, .woocommerce-page .bb-main .woocommerce-error { border: 1px solid #d6e1f3; border-left: 4px solid var(--bb-blue); background: #f4f7fc; border-radius: 10px; color: var(--bb-dark); }
.woocommerce-page .bb-main .woocommerce-info::before, .woocommerce-page .bb-main .woocommerce-message::before { color: var(--bb-blue); }
.woocommerce-page .bb-main .woocommerce-error { border-left-color: #d63638; }
.woocommerce-cart .bb-main .cart-empty { font-size: 17px; }
.woocommerce-cart .bb-main .return-to-shop .button { background: var(--bb-blue) !important; color: #fff !important; border-radius: 999px !important; padding: 12px 26px !important; }
.woocommerce-account .bb-main a:not(.button):not(.bb-btn), .woocommerce-cart .bb-main a:not(.button):not(.bb-btn) { color: var(--bb-blue); }
.woocommerce-account .bb-main .woocommerce-button, .woocommerce-account .bb-main button.button { text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; }
.woocommerce-account .bb-main h2 { color: var(--bb-dark); }

/* Vivid Marketing signup (inline styles come from the plugin) */
.bb-newsletter__inner { align-items: center; }
.bb-newsletter .vivid-signup { max-width: none !important; }
.bb-newsletter .vivid-signup h3 { display: none; }
.bb-newsletter .vivid-signup form { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 10px; align-items: center; }
.bb-newsletter .vivid-signup form > p { margin: 0 !important; }
.bb-newsletter .vivid-signup input[type=text], .bb-newsletter .vivid-signup input[type=email] { border: 0; border-radius: 999px; padding: 13px 18px !important; font-size: 15px; }
.bb-newsletter .vivid-signup .vivid-mk-consent { grid-column: 1 / -1; grid-row: 2; font-size: 13px; opacity: .9; }
.bb-newsletter .vivid-signup .vivid-mk-consent label { color: #fff; }
.bb-newsletter .vivid-signup button[type=submit] { background: var(--bb-amber) !important; color: var(--bb-dark) !important; border-radius: 999px !important; padding: 13px 26px !important; font-weight: 800 !important; font-family: inherit; white-space: nowrap; }
.bb-newsletter .vivid-signup button[type=submit]:hover { filter: brightness(1.05); }

/* Keep the footer credit clear of the floating chat button */
.bb-footer__bottom-inner { padding-right: 190px; }

@media (max-width: 768px) {
    .bb-single-post { margin: 24px auto 40px; }
    .bb-single-post__content { font-size: 16px; }
    .bb-post-cta { flex-direction: column; align-items: flex-start; }
    .bb-post-nav { grid-template-columns: 1fr; }
    .bb-post-nav__next { text-align: left; }
    .bb-newsletter .vivid-signup form { grid-template-columns: 1fr; }
    .bb-newsletter .vivid-signup .vivid-mk-consent { grid-row: auto; }
    .bb-footer__bottom-inner { padding-right: 0; padding-bottom: 64px; }
    .bb-404__search { flex-direction: column; border-radius: 16px; }
}
.bb-404 .bb-404__help { margin: 32px 0 0 !important; }
.bb-404 .bb-404__cats { margin-bottom: 8px; }
.bb-main .bb-empty a.bb-btn--primary, .bb-main .bb-post-cta a.bb-btn--whatsapp { color: #fff !important; text-decoration: none; }
.bb-main .bb-empty a.bb-btn--outline { text-decoration: none; }
.woocommerce-cart .bb-main .wc-empty-cart-message { max-width: 520px; margin: 24px auto 0; }
.woocommerce-cart .bb-main .return-to-shop { text-align: center; margin: 18px 0 8px; }
.woocommerce-account .bb-main .woocommerce-MyAccount-navigation li.is-active a { color: #fff !important; }
.woocommerce-checkout .bb-main a:not(.button):not(.bb-btn), .woocommerce-checkout .bb-main .woocommerce-info a { color: var(--bb-blue); font-weight: 600; }
.woocommerce-checkout .bb-main .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-checkout .bb-main .woocommerce-form-login-toggle .woocommerce-info { border-top: 0; }

/* Nav between tablet and laptop: 8 links don't fit. Quote + Contact are
   already in the header icons / top bar, so they drop out of the bar here. */
@media (min-width: 769px) and (max-width: 1060px) {
    .bb-nav__menu > li.bb-nav__secondary { display: none; }
    .bb-nav__menu > li > a { padding: 13px 10px; font-size: 13.5px; }
}
@media (min-width: 769px) and (max-width: 880px) {
    .bb-nav__menu > li > a { padding: 12px 8px; font-size: 13px; gap: 6px; }
}
@media (min-width: 769px) and (max-width: 1060px) {
    .bb-header__search { min-width: 0; flex: 1 1 auto; }
    .bb-header__inner { gap: 16px; }
    .bb-logo-img, .bb-header__logo img { height: 38px !important; }
}
.bb-contact > *, .bb-channel > span:last-child { min-width: 0; }
.bb-channel strong { overflow-wrap: anywhere; }
.bb-search-form input { min-width: 0; }

/* Product page trust tiles */
.bb-pdp-trust { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bb-pdp-trust li { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--bb-gray-light); border-radius: 12px; min-width: 0; }
.bb-pdp-trust__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #eef3fb; color: var(--bb-blue); }
.bb-pdp-trust strong { display: block; font-size: 13.5px; line-height: 1.25; color: var(--bb-dark); }
.bb-pdp-trust em { display: block; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--bb-gray); margin-top: 2px; }
@media (max-width: 1100px) and (min-width: 769px) {
    .bb-pdp-trust { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .bb-pdp-trust { grid-template-columns: 1fr; }
    .bb-pdp-trust li { padding: 10px 12px; }
}

/* "About this page" copy on template pages */
.bb-seo-text { padding: 48px 0 56px; border-top: 1px solid var(--bb-gray-light); background: #fff; }
.bb-seo-text .bb-prose { max-width: 860px; color: #3a4558; font-size: 15.5px; line-height: 1.75; }
.bb-seo-text .bb-prose h2 { font-size: 22px; color: var(--bb-dark); margin: 0 0 12px; line-height: 1.3; }
.bb-seo-text .bb-prose h2:not(:first-child) { margin-top: 28px; }
.bb-seo-text .bb-prose h3 { font-size: 17px; color: var(--bb-dark); margin: 22px 0 8px; }
.bb-seo-text .bb-prose p { margin: 0 0 12px; }
.bb-seo-text .bb-prose a { color: var(--bb-blue); text-decoration: underline; }
.bb-seo-text .bb-prose img { display: none; }

/* Blog card images: same shape as the 1200x628 article/social images, so
   text in an article's image is never cropped (was a fixed 200px crop). */
.bb-blog-card__image img { height: auto; aspect-ratio: 1200 / 628; object-fit: cover; display: block; }