/*
 * Bebe storefront theme
 * Loaded after app.css. Holds the design tokens and the modern component
 * styles; where it targets legacy class names it intentionally overrides app.css.
 */

:root {
    /* Brand: the logo red on white. */
    --bb-red: #e30613;
    --bb-red-600: #c0040f;
    --bb-red-50: #fff0f1;
    --bb-red-rgb: 227, 6, 19;
    --bb-on-red: #ffffff;
    --bb-ink: #1a1a1a;
    --bb-ink-2: #444444;
    --bb-muted: #7a7a7a;
    --bb-line: #f0e6e7;
    --bb-bg: #ffffff;
    --bb-surface: #ffffff;
    --bb-surface-rgb: 255, 255, 255;
    --bb-soft: #fff5f5;
    --bb-cream: var(--bb-soft);
    --bb-footer-bg: var(--bb-red);
    --bb-radius-sm: 10px;
    --bb-radius: 16px;
    --bb-radius-lg: 24px;
    --bb-shadow-sm: 0 1px 2px rgba(26, 26, 26, .06);
    --bb-shadow: 0 10px 30px -12px rgba(26, 26, 26, .18);
    --bb-ease: cubic-bezier(.2, .7, .2, 1);
    --bb-container: 1320px;
    color-scheme: light;
}

html[data-theme="dark"] {
    --bb-red: #ff2d3a;
    --bb-red-600: #e30613;
    --bb-red-50: rgba(255, 45, 58, .14);
    --bb-red-rgb: 255, 45, 58;
    --bb-ink: #f4f4f5;
    --bb-ink-2: #c9c9cc;
    --bb-muted: #8e8e93;
    --bb-line: #2c2c30;
    --bb-bg: #0f0f11;
    --bb-surface: #18181b;
    --bb-surface-rgb: 24, 24, 27;
    --bb-soft: #1f1f23;
    --bb-footer-bg: #0a0a0b;
    --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --bb-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* ---------- Base ---------- */

html, body.bb-body {
    font-family: 'FiraGO', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--bb-ink);
    background: var(--bb-bg);
    -webkit-font-smoothing: antialiased;
}

.bb-body a { color: inherit; }
.bb-body h1, .bb-body h2, .bb-body h3, .bb-body h4, .bb-body h5 { color: var(--bb-ink); letter-spacing: -.01em; }

.bb-container {
    width: 100%;
    max-width: var(--bb-container);
    margin-inline: auto;
    padding-inline: 24px;
}
@media (max-width: 767px) {
    .bb-container { padding-inline: 16px; }
}

.bb-page { min-height: 60vh; background: var(--bb-bg); }

/* Legacy rule forced every button to 0.75rem radius; let components decide. */
.bb-body button { border-radius: var(--bb-radius-sm) !important; }

/* ---------- Buttons ---------- */

.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.4rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .2s var(--bb-ease), transform .2s var(--bb-ease), box-shadow .2s var(--bb-ease);
}
.bb-btn--lg { padding: 1rem 1.8rem; font-size: 1rem; }
.bb-btn--primary { background: var(--bb-red); color: #fff !important; box-shadow: 0 8px 20px -8px rgba(var(--bb-red-rgb), .55); }
.bb-btn--primary:hover { background: var(--bb-red-600); transform: translateY(-1px); }

.bb-body .btn-danger,
.bb-body .addCartBtn,
.bb-body .CheckOutButton,
.bb-body .SearchBtn,
.bb-body .CompleteBtn {
    background: var(--bb-red) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 500;
    transition: background-color .2s var(--bb-ease);
}
.bb-body .btn-danger:hover,
.bb-body .addCartBtn:hover,
.bb-body .CheckOutButton:hover,
.bb-body .SearchBtn:hover,
.bb-body .CompleteBtn:hover { background: var(--bb-red-600) !important; }

.bb-body .btn-secondary {
    background: var(--bb-cream);
    color: var(--bb-ink);
    border: 1px solid var(--bb-line);
    border-radius: 999px;
}

.bb-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--bb-line);
    background: var(--bb-surface);
    color: var(--bb-ink);
    border-radius: 999px !important;
    font-size: 1.25rem;
    transition: background-color .2s, border-color .2s, opacity .2s;
}
.bb-icon-btn:hover { border-color: var(--bb-ink); }
.bb-icon-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }

.bb-pill {
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    background: var(--bb-red-50);
    color: var(--bb-red-600);
}
.bb-pill--muted { background: var(--bb-soft); color: var(--bb-ink-2); }

/* ---------- Forms ---------- */

.bb-body .form-control,
.bb-body .form-select,
.bb-body .ProductNumberInp {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-sm);
    padding: .7rem .9rem;
    font-size: .95rem;
    color: var(--bb-ink);
    background-color: var(--bb-surface);
    transition: border-color .2s, box-shadow .2s;
}
.bb-body .form-control:focus,
.bb-body .form-select:focus {
    border-color: var(--bb-red);
    box-shadow: 0 0 0 4px var(--bb-red-50);
}
.bb-body .form-control::-moz-placeholder { color: var(--bb-muted); }
.bb-body .form-control:-ms-input-placeholder { color: var(--bb-muted); }
.bb-body .form-control::placeholder { color: var(--bb-muted); }

/* ---------- Announcement bar ---------- */

.bb-announce {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--bb-red);
    color: var(--bb-on-red);
    font-size: .8rem;
    letter-spacing: .01em;
}
.bb-announce i { font-size: 1rem; opacity: .85; }

/* ---------- Header ---------- */

.bb-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* No backdrop-filter here: it would trap the fixed-position cart/auth drawers inside the header. */
    background: var(--bb-surface);
    border-bottom: 1px solid var(--bb-line);
    overflow: visible !important;
}

.bb-header .DesctopNav,
.bb-header .MobileNav { background: transparent !important; }
.bb-header .DesctopNav { padding: .6rem 1.5rem; }
.bb-header .DesctopNav > .container-fluid { max-width: var(--bb-container); }

.bb-header .DesctopNav .nav-link {
    position: relative;
    padding: 1.1rem 1.1rem !important;
    color: var(--bb-ink) !important;
    font-size: .95rem;
    font-weight: 500;
}
.bb-header .DesctopNav .nav-link::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: .7rem;
    height: 2px;
    border-radius: 2px;
    background: var(--bb-red);
    transform: scaleX(0);
    transition: transform .25s var(--bb-ease);
}
.bb-header .DesctopNavItem:hover .nav-link::after { transform: scaleX(1); }

/* Mega menu
 * Legacy CSS toggled display on li:hover, but the panel sits under the whole navbar, leaving a
 * gap below the item: crossing it closed the menu. Now: opacity/visibility with a short close
 * delay, plus an invisible bridge (::before) that keeps the item hovered across the gap. */
.bb-header .sos > .SubMenu {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    /* Close: wait .15s, fade, then hide. */
    transition: opacity .18s ease .15s, transform .18s ease .15s, visibility 0s linear .33s;
}
.bb-header .sos:hover > .SubMenu,
.bb-header .sos:focus-within > .SubMenu {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.bb-header .SubMenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 16px;
}
.bb-header .sos:hover > .nav-link { color: var(--bb-red) !important; }
.bb-header .SubMenu {
    top: 100%;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-line);
    border-bottom: 1px solid var(--bb-line);
    box-shadow: var(--bb-shadow);
    padding: 1.5rem 0 2rem;
}
.bb-header .SubMenuText1 { color: var(--bb-ink) !important; font-weight: 600; font-size: .95rem; }
.bb-header .SubMenuA { color: var(--bb-muted); font-size: .9rem; }
.bb-header .SubMenuA:hover { color: var(--bb-red); }

/* Header actions */
.bb-actions { gap: .25rem; }
.bb-header .iconPacklist,
.bb-header .mobileNavList { padding: 0 !important; }
.bb-header .transperentBtn {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    border-radius: 999px !important;
    color: var(--bb-ink);
    font-size: 1.3rem;
    transition: background-color .2s;
}
.bb-header .transperentBtn:hover { background: var(--bb-cream); }
.bb-header .cartNumber {
    top: 2px !important;
    right: 2px !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    display: grid;
    place-items: center;
    background: var(--bb-red) !important;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1;
    z-index: 1;
}
.bb-header .langS.nav-link {
    font-size: .85rem;
    font-weight: 500;
    color: var(--bb-ink-2) !important;
    padding: .5rem .75rem;
    border-radius: 999px;
}
.bb-header .langS.nav-link:hover { background: var(--bb-cream); }
.bb-header .dropdown-menu {
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-sm);
    box-shadow: var(--bb-shadow);
    padding: .35rem;
    min-width: 6rem;
}
.bb-header .dropdown-item { border-radius: 8px; font-size: .85rem; }

/* Mobile header */
.bb-header .MobileNav { padding: .35rem .5rem !important; }
.bb-header .openNavBtn {
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    font-size: 1.5rem;
    color: var(--bb-ink);
    left: .25rem;
}
.bb-header .MobileLogo1 { max-height: 40px !important; }

/* Search drop-down */
.bb-header .SearchNavbar {
    padding: 0 !important;
    justify-content: center !important;
    background: var(--bb-surface) !important;
    transition: height .3s var(--bb-ease);
}
.bb-header .SearchNavbar form {
    width: min(640px, calc(100% - 32px));
    gap: .5rem;
    margin: .75rem 0;
}
.bb-header .SearchNavbar .form-control { border-radius: 999px; padding-inline: 1.2rem; }
.bb-header .SearchNavbar .SearchBtn { padding: 0 1.4rem; white-space: nowrap; }

/* ---------- Section scaffolding ---------- */

.bb-section { padding: 56px 0; }
.bb-section--tint { background: var(--bb-cream); }
.bb-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 24px;
}
.bb-section__title {
    margin: 0;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    font-weight: 600;
}
.bb-section__nav { display: flex; gap: .5rem; }
@media (max-width: 767px) {
    .bb-section { padding: 36px 0; }
    .bb-section__nav { display: none; }
}

/* ---------- Hero ---------- */

.home-hero.bb-container { padding-top: 20px; }
.bb-hero {
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
    height: clamp(320px, 48vw, 560px) !important;
    background: var(--bb-cream);
}
.bb-hero__slide { position: relative; height: 100%; }
.bb-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.bb-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--bb-surface-rgb), .85) 0%, rgba(var(--bb-surface-rgb), .55) 38%, rgba(var(--bb-surface-rgb), 0) 65%);
    pointer-events: none;
}
.bb-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 clamp(24px, 6vw, 72px);
}
.bb-hero__title {
    margin: 0;
    font-size: clamp(1.8rem, 1.1rem + 3vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.bb-hero__dots.swiper-pagination { bottom: 20px !important; }
.bb-hero__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--bb-ink);
    opacity: .25;
    transition: width .3s var(--bb-ease), opacity .3s;
}
.bb-hero__dots .swiper-pagination-bullet-active { width: 28px; border-radius: 8px; opacity: 1; background: var(--bb-red); }
@media (max-width: 767px) {
    .bb-hero { height: 420px !important; }
    .bb-hero__slide::after { background: linear-gradient(0deg, rgba(var(--bb-surface-rgb), .92) 0%, rgba(var(--bb-surface-rgb), .6) 45%, rgba(var(--bb-surface-rgb), 0) 75%); }
    .bb-hero__content { justify-content: flex-end; padding-bottom: 56px; gap: 1rem; }
}

/* ---------- Product card ---------- */

.bb-card { position: relative; display: block; }
.bb-card__link {
    display: block;
    color: var(--bb-ink) !important;
    text-decoration: none !important;
}
.bb-card__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px !important;
    background: rgba(var(--bb-surface-rgb), .92);
    color: var(--bb-ink);
    font-size: 1.15rem;
    box-shadow: var(--bb-shadow-sm);
    transition: transform .15s var(--bb-ease), color .15s, background-color .15s;
}
.bb-card__wish:hover { color: var(--bb-red); transform: scale(1.06); }
.bb-card__wish:active { transform: scale(.94); }
.bb-card__wish-on { display: none; }
.bb-card__wish.is-saved { color: var(--bb-red); }
.bb-card__wish.is-saved .bb-card__wish-on { display: inline; }
.bb-card__wish.is-saved .bb-card__wish-off { display: none; }
@media (max-width: 575px) {
    .bb-card__wish { width: 34px; height: 34px; top: 8px; right: 8px; font-size: 1rem; }
}
.bb-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--bb-radius);
    background: var(--bb-cream);
}
.bb-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: opacity .4s var(--bb-ease), transform .6s var(--bb-ease);
}
.bb-card__img--hover { opacity: 0; }
.bb-card:hover .bb-card__img { transform: scale(1.04); }
.bb-card:hover .bb-card__img--hover { opacity: 1; }
.bb-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--bb-surface);
    color: var(--bb-ink);
    font-size: .75rem;
    font-weight: 600;
    box-shadow: var(--bb-shadow-sm);
}
.bb-badge--sale { background: var(--bb-red); color: #fff; }
.bb-card__body { padding: 12px 2px 0; }
.bb-card__title {
    margin: 0 0 4px;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--bb-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bb-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-weight: 600;
    font-size: 1rem;
}
.bb-card__price .is-sale { color: var(--bb-red); }
.bb-card__price s { color: var(--bb-muted); font-weight: 400; font-size: .85rem; }

/* ---------- Collections ---------- */

.bb-collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.bb-collection {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
    background: var(--bb-surface);
    text-decoration: none !important;
}
.bb-collection img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform .6s var(--bb-ease);
}
.bb-collection:hover img { transform: scale(1.04); }
.bb-collection__label {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--bb-radius);
    background: rgba(var(--bb-surface-rgb), .95);
    color: var(--bb-ink);
    font-weight: 600;
}
.bb-collection__label i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bb-red);
    color: var(--bb-on-red);
    flex-shrink: 0;
    transition: background-color .2s;
}
.bb-collection:hover .bb-collection__label i { background: var(--bb-red-600); }
/* Long Georgian words (e.g. ახალშობილებისთვის) have no break points; let the text shrink and wrap instead of pushing the arrow out. */
.bb-collection__label span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 575px) {
    .bb-collections { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bb-collection { border-radius: var(--bb-radius); }
    .bb-collection__label { left: 8px; right: 8px; bottom: 8px; padding: .55rem .65rem; font-size: .78rem; gap: .4rem; }
    .bb-collection__label i { width: 24px; height: 24px; font-size: .85rem; }
}
@media (max-width: 340px) {
    .bb-collection__label i { display: none; }
}

/* ---------- Shop / collection / search listing ---------- */

.bb-shop { padding-top: 24px; }
.bb-shop__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.bb-shop__main { min-width: 0; }
@media (max-width: 991px) {
    .bb-shop__layout { grid-template-columns: 1fr; }
    .bb-filters { display: none; }
}

/* Toolbar */
.bb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.bb-toolbar__title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.bb-toolbar__title h1 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 700; overflow-wrap: anywhere; }
.bb-toolbar__count { color: var(--bb-muted); font-size: .9rem; white-space: nowrap; }
.bb-toolbar__actions { display: flex; gap: 8px; }
.bb-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 1rem;
    border: 1px solid var(--bb-line);
    border-radius: 999px !important;
    background: var(--bb-surface);
    color: var(--bb-ink);
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color .15s;
}
.bb-toolbar__btn:hover, .bb-toolbar__btn.show { border-color: var(--bb-ink); }
.bb-toolbar__btn i { font-size: 1.05rem; }
.bb-toolbar__btn.dropdown-toggle::after { margin-left: .2rem; }
.bb-toolbar__filters { display: none; }
.bb-body .dropdown-item.active, .bb-body .dropdown-item:active { background: var(--bb-red-50); color: var(--bb-red) !important; }
@media (max-width: 991px) {
    .bb-toolbar__filters { display: inline-flex; }
}
@media (max-width: 575px) {
    .bb-toolbar__actions { width: 100%; }
    .bb-toolbar__actions > * { flex: 1; }
    .bb-toolbar__btn { width: 100%; justify-content: center; }
}

/* Category chips (phones / tablets) */
.bb-shop__chips { display: none; margin: -4px 0 18px; }
@media (max-width: 991px) { .bb-shop__chips { display: block; } }
.bb-shop__chips .MobileFlow { overflow: visible; }
.bb-shop__chips .swiper-slide { background: transparent !important; display: block; }
.bb-shop__chips .pr-3 { padding: 0 !important; }
.bb-body .maxCon {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--bb-line);
    border-radius: 999px;
    background: var(--bb-surface);
    color: var(--bb-ink-2) !important;
    font-size: .85rem !important;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.bb-body .maxCon.selected { background: var(--bb-red); border-color: var(--bb-red); color: var(--bb-on-red) !important; }

/* Product grid */
.bb-grid--shop { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 20px; }
@media (max-width: 575px) { .bb-grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }
.bb-pagination { display: flex; justify-content: center; margin-top: 36px; }
.bb-pagination nav { width: auto !important; }
.bb-pagination nav > div:first-child + div > div:first-child { display: none; }

/* Filter sidebar */
/* Scrolls with the page: no inner scrollbar. */
.bb-filters {
    padding: 20px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}
.bb-body .bb-filters .productDisp {
    padding: 0 0 16px !important;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--bb-line);
}
.bb-body .bb-filters .productDisp:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 !important; }
.bb-body .prodDispH1 {
    margin: 0 0 10px;
    font-size: .74rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bb-ink) !important;
}
.bb-body .bb-filters .list-unstyled { margin: 0; display: grid; gap: 2px; }
.bb-body .ProdDispLi { margin: 0; padding: 0 !important; list-style: none; line-height: 1.3; }
.bb-body .filter-item {
    display: flex !important;
    align-items: center;
    gap: .6rem;
    padding: .38rem .5rem;
    margin: 0 -.5rem !important;
    border-radius: 8px;
    line-height: 1.3;
    color: var(--bb-ink-2) !important;
    font-size: .9rem !important;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.bb-body .filter-item::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1.5px solid var(--bb-line);
    border-radius: 999px;
    background: var(--bb-surface);
    transition: border-color .15s, box-shadow .15s;
}
.bb-body .filter-item:hover { background: var(--bb-soft); color: var(--bb-ink) !important; }
.bb-body .filter-item:hover::before { border-color: var(--bb-muted); }
.bb-body .filter-item.selected { color: var(--bb-ink) !important; font-weight: 600; }
.bb-body .filter-item.selected::before { border-color: var(--bb-red); box-shadow: inset 0 0 0 4px var(--bb-surface); background: var(--bb-red); }
.bb-body .color-filter-circle { width: 14px; height: 14px; margin-left: auto !important; box-shadow: 0 0 0 1px var(--bb-line); }

/* Collapsible sections (sizes / colours) */
.bb-body .bb-filters [data-bs-toggle="collapse"] { justify-content: space-between; }
.bb-body .bb-filters [data-bs-toggle="collapse"] .prodDispH1 { margin: 0 !important; }
.bb-body .bb-filters [data-bs-toggle="collapse"] i { margin: 0 !important; font-size: .75rem; color: var(--bb-muted); transition: transform .2s; }
.bb-body .bb-filters [data-bs-toggle="collapse"][aria-expanded="true"] i { transform: rotate(180deg); }
.bb-body .bb-filters .collapse, .bb-body .bb-filters .collapsing { margin-top: 10px; }
.bb-body #SizeDisp { padding: 0 0 16px !important; }
.bb-body #sizesForm { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
.bb-body #sizesForm .radio-custom-label {
    width: 100%;
    height: 38px;
    margin: 0;
    border: 1px solid var(--bb-line);
    border-radius: 8px;
    background: var(--bb-surface);
    color: var(--bb-ink) !important;
    font-size: .8rem;
    font-weight: 500;
    transition: border-color .15s, background-color .15s;
}
.bb-body #sizesForm .radio-custom-label:hover { border-color: var(--bb-ink-2); }
.bb-body #sizesForm .radio-custom:checked + .radio-custom-label { background: var(--bb-red); border-color: var(--bb-red); color: var(--bb-on-red) !important; }
.bb-body .size-checkbox, .bb-body .size-checkbox .text-group-field { width: 100%; margin: 0; }

/* Collection banner */
.bb-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 240px;
    margin-bottom: 28px;
    overflow: hidden;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-red);
}
.bb-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.bb-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0) 100%);
}
.bb-banner__content { position: relative; z-index: 1; padding: 28px clamp(20px, 4vw, 40px); color: #fff; }
.bb-banner__eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.bb-banner__title { margin: 0; color: #fff !important; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.bb-banner__meta { margin: 8px 0 0; opacity: .85; font-size: .9rem; }
@media (max-width: 575px) { .bb-banner { min-height: 180px; border-radius: var(--bb-radius); } }

/* Mobile filter panel content */
.bb-body .overlay3 .accordion-item { border: 0; border-bottom: 1px solid var(--bb-line) !important; }
.bb-body .overlay3 .accordion-button { padding: 16px 20px; font-weight: 600; font-size: .95rem; color: var(--bb-ink); background: var(--bb-surface); box-shadow: none !important; }
.bb-body .overlay3 .accordion-button:not(.collapsed) { color: var(--bb-red); }
.bb-body .overlay3 .accordion-body { padding: 0 20px 14px; }
.bb-body .overlay3 .accordion-body ul { padding-left: 0 !important; display: grid; gap: 2px; }

/* Pagination */
.bb-body .pagination { gap: .35rem; }
.bb-body .page-link {
    border: 1px solid var(--bb-line);
    border-radius: 999px !important;
    min-width: 38px;
    text-align: center;
    color: var(--bb-ink);
}
.bb-body .page-item.active .page-link { background: var(--bb-red); border-color: var(--bb-red); color: var(--bb-on-red); }

/* ---------- Product page ---------- */

/* Own layout instead of the legacy .ProductContainer (overflow hidden + % padding clipped the row's negative margins on phones). */
.bb-product { padding-top: 24px; }
.bb-product__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.bb-product__gallery, .bb-product__info { min-width: 0; }
.bb-product__gallery .descProd { position: -webkit-sticky; position: sticky; top: 96px; }
@media (max-width: 991px) { .bb-product__grid { gap: 28px; } }
@media (max-width: 768px) {
    .bb-product { padding-top: 12px; }
    .bb-product__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Phone gallery */
.bb-mgallery .swiper { border-radius: var(--bb-radius-lg); overflow: hidden; background: var(--bb-soft); }
.bb-mgallery .swiper-slide { display: block !important; padding: 0 !important; background: var(--bb-soft) !important; aspect-ratio: 4 / 5; height: auto !important; }
.bb-mgallery .swiper-slide img { width: 100% !important; height: 100% !important; max-height: none !important; -o-object-fit: cover !important; object-fit: cover !important; display: block; border-radius: 0 !important; }
.bb-mgallery__dots.swiper-pagination { bottom: 12px !important; }
.bb-mgallery__dots .swiper-pagination-bullet { width: 7px; height: 7px; background: var(--bb-ink); opacity: .3; transition: width .25s var(--bb-ease); }
.bb-mgallery__dots .swiper-pagination-bullet-active { width: 22px; border-radius: 6px; opacity: 1; background: var(--bb-red); }

/* Size chips wrap instead of running off screen */
.bb-sizes { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.bb-sizes .size-checkbox, .bb-sizes .text-group-field { margin: 0 !important; width: auto !important; }

/* Related products: grid on desktop, swipeable row on phones */
.bb-related { padding-bottom: 0; }
.bb-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 20px; }
@media (max-width: 767px) {
    .bb-rail {
        display: flex;
        gap: 12px;
        margin-inline: -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
    }
    .bb-rail::-webkit-scrollbar { display: none; }
    .bb-rail > .bb-card { flex: 0 0 46%; scroll-snap-align: start; }
}
.bb-body .gallery-top .swiper-slide,
.bb-body .gallery-thumbs .swiper-slide {
    border-radius: var(--bb-radius);
    overflow: hidden;
    background: var(--bb-cream);
}
.bb-body .gallery-top .productInnerImg,
.bb-body .gallery-thumbs .productInnerImg { -o-object-fit: cover !important; object-fit: cover !important; border-radius: 0; }
.bb-body .gallery-thumbs .swiper-slide { opacity: .55; transition: opacity .2s; }
.bb-body .gallery-thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--bb-red); outline-offset: -2px; }

.bb-pdp { padding-top: 8px; max-width: 520px; }
.bb-pdp__title {
    margin: .75rem 0 .75rem;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
}
.bb-pdp__price { display: flex; align-items: baseline; gap: .75rem; font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem; }
.bb-pdp__price .is-sale { color: var(--bb-red); }
.bb-pdp__price s { font-size: 1.05rem; font-weight: 400; color: var(--bb-muted); }
.bb-pdp__desc {
    color: var(--bb-ink-2);
    line-height: 1.65;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bb-line);
}
.bb-pdp .prNum { padding: 0; }
.bb-pdp .addCartBtn,
.bb-pdp .addedToCartBtn {
    width: auto !important;
    min-width: 220px;
    height: 52px !important;
    padding: 0 2rem !important;
    font-size: 1rem !important;
}
.bb-pdp .addedToCartBtn { border-radius: 999px !important; }
.bb-pdp .wishlistBtn {
    margin-top: 1rem;
    border: 0;
    background: transparent;
    padding: .25rem 0;
}
.bb-pdp .wishlistBtnText { color: var(--bb-ink-2); font-size: .9rem; display: inline-flex; gap: .35rem; align-items: center; }
.bb-pdp .wishlistBtn:hover .wishlistBtnText { color: var(--bb-red); }
.bb-pdp .PSize,
.bb-pdp .PColor { margin-top: 1.5rem; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bb-body .size-select {
    min-width: 48px;
    height: 44px;
    padding: 0 .75rem;
    border: 1px solid var(--bb-line) !important;
    border-radius: var(--bb-radius-sm);
    background: var(--bb-surface);
    color: var(--bb-ink);
    font-size: .9rem;
    transition: border-color .15s;
}
.bb-body .size-select:hover { border-color: var(--bb-ink) !important; }
.bb-body .size-select.selected { background: var(--bb-red) !important; color: var(--bb-on-red) !important; border-color: var(--bb-red) !important; }
.bb-body .productInnerImgWrp { border-radius: var(--bb-radius-sm); overflow: hidden; }
.bb-body .productInnerImg.selected { outline: 2px solid var(--bb-red); outline-offset: -2px; }

/* Related products */
.bb-body .RelatedText,
.bb-body .mobCkeckH1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 600; margin-bottom: 1.5rem; }
.bb-body .relatedProducts2 .SectionTwoCard { border: 0; background: transparent; }
.bb-body .relatedProducts2 .CheckOutSlide { border-radius: var(--bb-radius); background: var(--bb-cream); aspect-ratio: 4 / 5; -o-object-fit: cover !important; object-fit: cover !important; }

/* Legacy cards still used on profile / wishlist pages */
.bb-body .SectionTwoCard { border: 0; border-radius: var(--bb-radius); background: transparent; }

/* ---------- Checkout ---------- */

.bb-checkout { padding-top: 24px; }
.bb-checkout__head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 20px; }
.bb-checkout__head .bb-back { width: 100%; margin-bottom: 4px; }
.bb-checkout__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; }
.bb-checkout__secure { margin: 0 0 6px; display: inline-flex; align-items: center; gap: .35rem; color: var(--bb-muted); font-size: .88rem; }
.bb-checkout__secure i { color: #16a34a; }
.bb-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.bb-checkout__form { display: grid; gap: 16px; min-width: 0; }
.bb-checkout__summary { position: -webkit-sticky; position: sticky; top: 96px; }
@media (max-width: 991px) {
    .bb-checkout__layout { grid-template-columns: 1fr; }
    .bb-checkout__summary { position: static; }
}
.bb-checkout__step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.1rem; font-weight: 600; }
.bb-checkout__step-title span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bb-red);
    color: var(--bb-on-red);
    font-size: .85rem;
}
.bb-checkout__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.bb-checkout__full { grid-column: 1 / -1; }
@media (max-width: 575px) { .bb-checkout__grid { grid-template-columns: 1fr; } }
.bb-checkout .bb-label { display: block; margin: 6px 0 0; }
.bb-checkout .form-group { padding-top: 6px !important; padding-bottom: 6px !important; }
.bb-checkout .form-control, .bb-checkout .form-select { height: 48px; border-radius: 12px; }
.bb-checkout textarea.form-control { height: auto; min-height: 92px; }
.bb-checkout .alert-danger { border: 0; border-radius: 10px; padding: .55rem .8rem; font-size: .85rem; background: var(--bb-red-50); color: var(--bb-red-600); }

/* Payment method cards */
.bb-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bb-pay__option { position: relative; margin: 0; cursor: pointer; }
.bb-pay__option input { position: absolute; opacity: 0; pointer-events: none; }
.bb-pay__box {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 58px;
    padding: 12px 16px;
    border: 1.5px solid var(--bb-line);
    border-radius: 14px;
    background: var(--bb-surface);
    font-weight: 500;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bb-pay__box i { font-size: 1.4rem; color: var(--bb-muted); }
.bb-pay__option:hover .bb-pay__box { border-color: var(--bb-ink-2); }
.bb-pay__option input:checked + .bb-pay__box { border-color: var(--bb-red); background: var(--bb-red-50); box-shadow: 0 0 0 3px var(--bb-red-50); }
.bb-pay__option input:checked + .bb-pay__box i { color: var(--bb-red); }
.bb-pay__option input:focus-visible + .bb-pay__box { outline: 2px solid var(--bb-red); outline-offset: 2px; }

/* Order summary (React) */
.bb-cosum .checkOutCart { display: block !important; width: 100%; box-shadow: none !important; padding: 22px; border: 1px solid var(--bb-line) !important; border-radius: var(--bb-radius-lg); background: var(--bb-surface); }
.bb-summary__items { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; max-height: none; }
.bb-summary__item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bb-summary__item .alert { width: 100%; margin: 0 !important; }
.bb-summary__thumb { position: relative; flex-shrink: 0; }
.bb-summary__thumb img { width: 60px; height: 74px; -o-object-fit: cover; object-fit: cover; border-radius: 12px; background: var(--bb-soft); display: block; }
.bb-summary__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bb-ink);
    color: var(--bb-bg);
    font-size: .72rem;
    font-weight: 700;
}
.bb-summary__info { flex: 1; min-width: 0; }
.bb-summary__name { margin: 0; font-weight: 500; font-size: .92rem; line-height: 1.3; }
.bb-summary__meta { margin: 2px 0 0; color: var(--bb-muted); font-size: .82rem; }
.bb-summary__price { margin: 0; font-weight: 600; white-space: nowrap; }
.bb-summary__coupon { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--bb-line); }
.bb-summary__coupon-row { display: flex; gap: 8px; margin-top: 6px; }
.bb-summary__coupon-row .form-control { height: 44px; border-radius: 12px; }
.bb-summary__coupon-btn { height: 44px; padding: 0 1.1rem; flex-shrink: 0; }
.bb-summary__coupon-btn:disabled { opacity: .5; pointer-events: none; }
.bb-summary__coupon-error { margin: 6px 0 0; color: var(--bb-red); font-size: .82rem; }
.bb-summary__rows { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--bb-line); display: grid; gap: 10px; }
.bb-summary__row { display: flex; justify-content: space-between; gap: 12px; color: var(--bb-ink-2); font-size: .92rem; }
.bb-summary__row--old s { color: var(--bb-muted); }
.bb-summary__row--total { padding-top: 12px; border-top: 1px solid var(--bb-line); color: var(--bb-ink); font-size: 1.15rem; font-weight: 700; }
.bb-cosum .border-stock-error { padding: 8px; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--bb-red); }
.bb-checkout__also { padding-bottom: 0; }

/* Phone verification modal */
.bb-body .final-checkout-form-modal-wrp { background: rgba(17, 17, 17, .55); }
.bb-body .final-checkout-form-modal .modal-content { border: 0; border-radius: var(--bb-radius-lg); padding: 8px; background: var(--bb-surface); color: var(--bb-ink); }
.bb-body .final-checkout-form-modal .modal-header, .bb-body .final-checkout-form-modal .modal-footer { border: 0; }
.bb-body .final-checkout-form-modal .CheckOutButton { height: 46px; padding: 0 1.6rem; }

/* ---------- Out of stock / add to cart states ---------- */

.bb-badge--out { background: var(--bb-ink); color: var(--bb-bg); }
.bb-card.is-out .bb-card__img:not(.bb-card__img--hover) { opacity: .55; filter: grayscale(.5); }
.bb-card.is-out:hover .bb-card__img--hover { opacity: .55; filter: grayscale(.5); }
.bb-card.is-out .bb-card__price { color: var(--bb-muted); }
.bb-pill--out { display: inline-flex; align-items: center; gap: .35rem; background: var(--bb-ink); color: var(--bb-bg); }
.bb-btn--disabled {
    min-width: 220px;
    height: 52px;
    background: var(--bb-soft);
    color: var(--bb-muted) !important;
    border: 1px dashed var(--bb-line);
    cursor: not-allowed;
}
.bb-spinner {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 999px;
    -webkit-animation: bb-spin .7s linear infinite;
            animation: bb-spin .7s linear infinite;
}
@-webkit-keyframes bb-spin { to { transform: rotate(360deg); } }
@keyframes bb-spin { to { transform: rotate(360deg); } }
.bb-body .addCartBtn.is-loading { opacity: .85; cursor: progress; }

/* "Not in stock" / cart error toast (status-alert.js) */
.bb-body .status-alert {
    left: 50%;
    right: auto !important;
    bottom: 24px !important;
    transform: translateX(-50%);
    z-index: 2100;
    max-width: calc(100% - 32px);
    padding: 12px 18px !important;
    border: 0;
    border-radius: 14px;
    background: var(--bb-ink);
    color: var(--bb-bg);
    font-size: .9rem;
    box-shadow: var(--bb-shadow);
}

/* ---------- Cart drawer ---------- */

.bb-body .cartBackground { background-color: rgba(31, 26, 28, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.bb-body .cartItemBorders { border-color: var(--bb-line) !important; }

/* ---------- Auth modal (login / register / forgot) ---------- */

.bb-auth {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    padding: 24px 16px;
    overflow-y: auto;
}
.bb-auth.d-block { display: grid !important; place-items: center; }
.bb-auth__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .55);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    -webkit-animation: bb-fade .2s ease-out;
            animation: bb-fade .2s ease-out;
}
.bb-auth__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 20px 28px 28px;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    color: var(--bb-ink);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
    -webkit-animation: bb-pop .25s var(--bb-ease);
            animation: bb-pop .25s var(--bb-ease);
}
.bb-auth__dialog.d-none { display: none; }
@-webkit-keyframes bb-fade { from { opacity: 0; } }
@keyframes bb-fade { from { opacity: 0; } }
@-webkit-keyframes bb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes bb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.bb-auth__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bb-auth__brand img { height: 36px; border-radius: 8px; }
.bb-auth__close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px !important;
    background: var(--bb-soft);
    color: var(--bb-ink);
    font-size: 1.25rem;
    transition: background-color .15s, color .15s;
}
.bb-auth__close:hover { background: var(--bb-red-50); color: var(--bb-red); }

.bb-auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    margin-bottom: 22px;
    border-radius: 999px !important;
    background: var(--bb-soft);
}
.bb-auth__tab {
    padding: .6rem 1rem;
    border: 0;
    border-radius: 999px !important;
    background: transparent;
    color: var(--bb-muted);
    font-weight: 500;
    font-size: .92rem;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.bb-auth__tab:hover { color: var(--bb-ink); }
/* navigation.js still toggles the legacy upperActiveBtn / upperActiveBtn2 classes; neutralise their old borders, offsets and red fill. */
.bb-auth__tab.upperActiveBtn,
.bb-auth__tab.upperActiveBtn2 { transform: none; border: 0; padding: .6rem 1rem; z-index: auto; }
.bb-auth__tab.upperActiveBtn2 { background: transparent; }
.bb-auth__tab.upperActiveBtn { background: var(--bb-surface); color: var(--bb-ink); box-shadow: var(--bb-shadow-sm); }

.bb-auth__panel.d-none { display: none; }
.bb-auth__title { margin: 0 0 18px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.bb-auth__lead { margin: -8px 0 18px; color: var(--bb-muted); font-size: .92rem; line-height: 1.5; }
.bb-auth__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 16px;
    background: var(--bb-red-50);
    color: var(--bb-red);
    font-size: 1.5rem;
}
.bb-auth__icon--success { background: rgba(22, 163, 74, .12); color: #16a34a; margin-inline: auto; border-radius: 999px; width: 64px; height: 64px; font-size: 2rem; }

.bb-auth__form { display: grid; gap: 14px; }
.bb-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-auth__field { display: grid; gap: 6px; margin: 0; }
.bb-auth__field > span { font-size: .82rem; font-weight: 500; color: var(--bb-ink-2); }
.bb-auth__label-row { display: flex; justify-content: space-between; gap: 8px; }
.bb-auth__label-row a { color: var(--bb-red) !important; font-weight: 500; text-decoration: none; }
.bb-auth__label-row a:hover { text-decoration: underline; }
.bb-auth .form-control { height: 48px; border-radius: 12px; }
.bb-auth__error { color: var(--bb-red); font-size: .8rem; }
.bb-btn--block { width: 100%; height: 50px; margin-top: 4px; }

.bb-auth__legal { margin: 2px 0 0; display: flex; justify-content: center; gap: 16px; font-size: .8rem; }
.bb-auth__legal a { color: var(--bb-muted) !important; text-decoration: none; }
.bb-auth__legal a:hover { color: var(--bb-ink) !important; }

.bb-auth__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    color: var(--bb-muted);
    font-size: .8rem;
}
.bb-auth__divider::before,
.bb-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--bb-line); }
.bb-auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-auth__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 46px;
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    background: var(--bb-surface);
    color: var(--bb-ink) !important;
    font-weight: 500;
    font-size: .9rem;
    text-decoration: none !important;
    transition: border-color .15s, background-color .15s;
}
.bb-auth__social-btn:hover { border-color: var(--bb-ink-2); background: var(--bb-soft); }
.bb-auth__social-btn i { font-size: 1.25rem; }
.bb-auth__fb { color: #1877f2; }
.bb-auth__google { color: #ea4335; }

/* Signed-in state */
.bb-auth__account { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--bb-radius); background: var(--bb-soft); }
.bb-auth__account .bb-account__avatar { width: 48px; height: 48px; font-size: 1.2rem; }
.bb-auth__account-info { min-width: 0; }
.bb-auth__account-name { margin: 0; font-weight: 600; }
.bb-auth__account-email { margin: 0; color: var(--bb-muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-auth__menu { display: grid; margin: 12px 0 16px; }
.bb-auth__menu a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 12px 4px;
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-ink) !important;
    text-decoration: none !important;
    font-weight: 500;
}
.bb-auth__menu a i:first-child { color: var(--bb-red); font-size: 1.15rem; }
.bb-auth__menu a i:last-child { margin-left: auto; color: var(--bb-muted); }
.bb-auth__menu a:hover i:last-child { color: var(--bb-red); }

/* Order success (home page, after checkout) */
.bb-success { position: relative; padding: 36px 28px 28px; border: 0; border-radius: var(--bb-radius-lg) !important; text-align: center; background: var(--bb-surface); }
.bb-success__close { position: absolute; top: 14px; right: 14px; }
.bb-success__num { margin: 0 0 20px; color: var(--bb-ink-2); }

/* Phones: bottom sheet */
@media (max-width: 575px) {
    .bb-auth { padding: 0; }
    .bb-auth.d-block { place-items: end stretch; }
    .bb-auth__dialog {
        max-width: none;
        max-height: 92vh;
        overflow-y: auto;
        padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        -webkit-animation: bb-sheet .28s var(--bb-ease);
                animation: bb-sheet .28s var(--bb-ease);
    }
    .bb-auth__row { grid-template-columns: 1fr; }
}
@-webkit-keyframes bb-sheet { from { transform: translateY(40px); opacity: .6; } }
@keyframes bb-sheet { from { transform: translateY(40px); opacity: .6; } }

/* ---------- Footer ---------- */

.bb-footer {
    margin-top: 64px;
    padding: 56px 0 24px;
    background: var(--bb-footer-bg);
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
}
.bb-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.bb-footer__logo { height: 44px; border-radius: 10px; }
.bb-footer__brand p { margin: 1rem 0 1.25rem; max-width: 280px; line-height: 1.6; }
.bb-footer__social { display: flex; gap: .6rem; }
.bb-footer__social a { display: inline-flex; transition: transform .2s var(--bb-ease); }
.bb-footer__social a:hover { transform: translateY(-2px); }
.bb-footer__social svg { width: 36px; height: 36px; }
.bb-footer__title {
    color: #fff !important;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.bb-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.bb-footer__links a {
    color: rgba(255, 255, 255, .85) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: color .15s;
}
.bb-footer__links a:hover { color: #fff !important; }
.bb-footer__info { display: flex; align-items: center; gap: .5rem; }
.bb-footer__links i { font-size: 1.05rem; color: rgba(255, 255, 255, .7); }
.bb-footer__bottom {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .8rem;
    color: rgba(255, 255, 255, .7);
}
@media (max-width: 991px) {
    .bb-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .bb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .bb-footer { padding-top: 40px; }
    .bb-footer__grid { grid-template-columns: 1fr; }
}

/* Legacy app.css centers and tints every .swiper-slide; reset for the new sliders. */
.bb-section .swiper-slide,
.bb-hero .swiper-slide {
    display: block;
    height: auto;
    background: transparent;
    text-align: left;
}
.bb-hero .swiper-slide { height: 100%; }
.bb-header .MobileNav .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); margin: 0 !important; }
.bb-header .MobileNav .container-fluid { min-height: 52px; justify-content: flex-end; }

/* ---------- Account (profile / orders / wishlist) ---------- */

.bb-account { padding-top: 32px; padding-bottom: 24px; }
.bb-account__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.bb-account__avatar {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bb-red);
    color: var(--bb-on-red);
    font-size: 1.4rem;
    font-weight: 600;
    flex-shrink: 0;
}
.bb-account__hello { margin: 0; color: var(--bb-muted); font-size: .85rem; }
.bb-account__name { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600; }
.bb-account__body { display: grid; gap: 16px; }

.bb-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: var(--bb-soft);
    border: 1px solid var(--bb-line);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.bb-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    color: var(--bb-ink-2) !important;
    text-decoration: none !important;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
.bb-tab:hover { color: var(--bb-ink) !important; }
.bb-tab.is-active { background: var(--bb-red); color: var(--bb-on-red) !important; box-shadow: 0 6px 16px -8px rgba(var(--bb-red-rgb), .6); }
/* Phones: three equal segments, icon above a label that can wrap, so nothing gets cut off. */
@media (max-width: 575px) {
    .bb-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        border-radius: 18px;
        overflow: visible;
    }
    .bb-tab {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: .55rem .35rem;
        border-radius: 14px;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }
    .bb-tab span { overflow-wrap: anywhere; }
}

.bb-panel {
    padding: 24px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}
.bb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bb-panel__title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.bb-panel__hint { margin: .25rem 0 0; color: var(--bb-muted); font-size: .85rem; }
@media (max-width: 575px) { .bb-panel { padding: 18px; border-radius: var(--bb-radius); } }

.bb-btn--sm { padding: .55rem 1rem; font-size: .85rem; }
.bb-btn--ghost { background: var(--bb-surface); border-color: var(--bb-line); color: var(--bb-ink) !important; }
.bb-btn--ghost:hover { border-color: var(--bb-red); color: var(--bb-red) !important; }

.bb-fields { margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bb-field { padding: 14px 16px; border-radius: var(--bb-radius); background: var(--bb-soft); }
.bb-field dt { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-muted); margin-bottom: 4px; }
.bb-field dd { margin: 0; font-weight: 500; word-break: break-word; }

.bb-form { margin-top: 16px; max-width: 480px; }
.bb-label { font-size: .85rem; font-weight: 500; color: var(--bb-ink-2); }
.bb-form__actions { display: flex; gap: 10px; margin-top: 16px; }

.bb-alert { display: flex; align-items: center; gap: .6rem; padding: 12px 16px; border-radius: var(--bb-radius); font-size: .9rem; }
.bb-alert--success { background: rgba(22, 163, 74, .1); color: #15803d; }
html[data-theme="dark"] .bb-alert--success { color: #4ade80; }

.bb-empty {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    border: 1px dashed var(--bb-line);
    border-radius: var(--bb-radius-lg);
    color: var(--bb-muted);
}
.bb-empty i { font-size: 2.4rem; color: var(--bb-red); }
.bb-empty p { margin: 0; }

.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
@media (max-width: 575px) { .bb-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.bb-wish { position: relative; }
.bb-wish__meta { margin: 2px 2px 0; font-size: .8rem; color: var(--bb-muted); }
.bb-wish__remove { position: absolute; top: 10px; right: 10px; z-index: 2; }
.bb-wish__remove .bb-icon-btn { width: 34px; height: 34px; font-size: 1.1rem; box-shadow: var(--bb-shadow-sm); }
.bb-wish__remove .bb-icon-btn:hover { border-color: var(--bb-red); color: var(--bb-red); }

/* Status badges */
.bb-status {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bb-soft);
    color: var(--bb-ink-2);
}
.bb-status--pending { background: rgba(217, 119, 6, .12); color: #b45309; }
.bb-status--info { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.bb-status--success { background: rgba(22, 163, 74, .12); color: #15803d; }
.bb-status--danger { background: var(--bb-red-50); color: var(--bb-red-600); }
html[data-theme="dark"] .bb-status--pending { color: #fbbf24; }
html[data-theme="dark"] .bb-status--info { color: #93c5fd; }
html[data-theme="dark"] .bb-status--success { color: #4ade80; }
html[data-theme="dark"] .bb-status--danger { color: var(--bb-red); }

/* Orders list */
.bb-orders { display: grid; gap: 14px; }
.bb-order-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    color: var(--bb-ink) !important;
    text-decoration: none !important;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--bb-ease);
}
.bb-order-card:hover { border-color: rgba(var(--bb-red-rgb), .45); box-shadow: var(--bb-shadow); transform: translateY(-1px); }
.bb-order-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bb-order-card__num { margin: 0; font-weight: 600; }
.bb-order-card__date { margin: 2px 0 0; font-size: .85rem; color: var(--bb-muted); }
.bb-order-card__statuses { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-order-card__thumbs { display: flex; gap: 8px; align-items: center; }
.bb-order-card__thumbs img { width: 56px; height: 70px; -o-object-fit: cover; object-fit: cover; border-radius: 10px; background: var(--bb-soft); }
.bb-order-card__more { font-size: .85rem; color: var(--bb-muted); padding-left: 4px; }
.bb-order-card__bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bb-line);
    font-size: .9rem;
    color: var(--bb-muted);
}
.bb-order-card__total { font-weight: 600; color: var(--bb-ink); }
.bb-order-card__cta { margin-left: auto; color: var(--bb-red); font-weight: 500; display: inline-flex; align-items: center; }
@media (max-width: 575px) {
    .bb-order-card { padding: 16px; }
    .bb-order-card__thumbs img { width: 46px; height: 58px; }
    .bb-order-card__cta span, .bb-order-card__cta { font-size: 0; }
    .bb-order-card__cta i { font-size: 1.4rem; }
}

/* Order detail */
.bb-order { padding-top: 28px; }
.bb-back { display: inline-flex; align-items: center; gap: .35rem; color: var(--bb-muted) !important; text-decoration: none !important; font-size: .9rem; margin-bottom: 16px; }
.bb-back:hover { color: var(--bb-red) !important; }
.bb-order__head { margin-bottom: 20px; }
.bb-order__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 600; }
.bb-order__date { margin: 4px 0 0; color: var(--bb-muted); }
.bb-order__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.bb-order__main, .bb-order__side { display: grid; gap: 16px; }
.bb-order__side { position: -webkit-sticky; position: sticky; top: 100px; }
@media (max-width: 991px) {
    .bb-order__grid { grid-template-columns: 1fr; }
    .bb-order__side { position: static; }
}
.bb-lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.bb-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--bb-line); }
.bb-line:first-child { border-top: 0; padding-top: 0; }
.bb-line__img img { width: 64px; height: 80px; -o-object-fit: cover; object-fit: cover; border-radius: 12px; background: var(--bb-soft); display: block; }
.bb-line__info { flex: 1; min-width: 0; }
.bb-line__name { margin: 0; font-weight: 500; }
.bb-line__meta { margin: 4px 0 0; font-size: .85rem; color: var(--bb-muted); }
.bb-line__price { margin: 0; font-weight: 600; white-space: nowrap; }
.bb-summary { margin: 0; display: grid; gap: 10px; }
.bb-summary > div { display: flex; justify-content: space-between; gap: 12px; }
.bb-summary dt { font-weight: 400; color: var(--bb-muted); }
.bb-summary dd { margin: 0; font-weight: 500; }
.bb-summary__total { padding-top: 12px; border-top: 1px solid var(--bb-line); }
.bb-summary__total dt, .bb-summary__total dd { color: var(--bb-ink); font-weight: 600; font-size: 1.1rem; }
.bb-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--bb-ink-2); font-size: .92rem; }
.bb-contact li { display: flex; gap: .6rem; align-items: flex-start; word-break: break-word; }
.bb-contact i { color: var(--bb-red); font-size: 1.05rem; line-height: 1.3; }

/* ---------- Mobile filters panel ---------- */

/* Was z-index: 2, so the sticky header (z 1000) covered it. Stays below cart/auth (2000+). */
.bb-body .overlay3 { z-index: 1500 !important; background: var(--bb-surface) !important; }
.bb-body .overlay3 .filterContainer { padding: 14px 16px; border-bottom: 1px solid var(--bb-line); }
.bb-body .reverseFilter,
.bb-body .closebtn3 { border: 0; background: transparent; color: var(--bb-ink); display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.bb-body .closebtn3 { font-size: 1.5rem; }
.bb-body .FilterBy { font-weight: 600; font-size: 1rem; }
.bb-body .MobileFilterBtn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border: 1px solid var(--bb-line);
    border-radius: 999px !important;
    background: var(--bb-surface);
    color: var(--bb-ink);
    font-size: .85rem;
    white-space: nowrap;
}

/* ---------- Header extras ---------- */

.bb-header .cartNumber { color: var(--bb-on-red) !important; }
.bb-theme-toggle__light { display: none; }
html[data-theme="dark"] .bb-theme-toggle__light { display: inline; }
html[data-theme="dark"] .bb-theme-toggle__dark { display: none; }
.bb-footer__logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.bb-footer__social svg path:first-child { fill: #fff; }
.bb-footer__social svg path:not(:first-child) { fill: var(--bb-footer-bg); }
html[data-theme="dark"] .bb-footer__social svg path:first-child { fill: var(--bb-red); }
html[data-theme="dark"] .bb-footer__social svg path:not(:first-child) { fill: #fff; }
html[data-theme="dark"] .bb-footer { border-top: 3px solid var(--bb-red); }

/* ---------- Dark mode: shared surfaces ---------- */

html[data-theme="dark"] body,
html[data-theme="dark"] .bb-page { background: var(--bb-bg) !important; color: var(--bb-ink); }
html[data-theme="dark"] .bb-header,
html[data-theme="dark"] .bb-header .SubMenu,
html[data-theme="dark"] .bb-header .SearchNavbar,
html[data-theme="dark"] .bb-body .bg-light,
html[data-theme="dark"] .bb-body .bg-white,
html[data-theme="dark"] .bb-body .card,
html[data-theme="dark"] .bb-body .overlay,
html[data-theme="dark"] .bb-body .cartMenu,
html[data-theme="dark"] .bb-body .innerAuthor,
html[data-theme="dark"] .bb-body .innerAuthor2,
html[data-theme="dark"] .bb-body .modal-content,
html[data-theme="dark"] .bb-body .accordion-item,
html[data-theme="dark"] .bb-body .accordion-button,
html[data-theme="dark"] .bb-body .dropdown-menu,
html[data-theme="dark"] .bb-body .list-group-item {
    background-color: var(--bb-surface) !important;
    color: var(--bb-ink) !important;
    border-color: var(--bb-line) !important;
}
html[data-theme="dark"] .bb-body .accordion-button::after { filter: invert(1); }
html[data-theme="dark"] .bb-body .dropdown-item,
html[data-theme="dark"] .bb-body .nav-link,
html[data-theme="dark"] .bb-body .text-dark,
html[data-theme="dark"] .bb-body .text-body,
html[data-theme="dark"] .bb-body .table { color: var(--bb-ink) !important; }
html[data-theme="dark"] .bb-body .dropdown-item:hover { background: var(--bb-soft); }
html[data-theme="dark"] .bb-body .text-secondary,
html[data-theme="dark"] .bb-body .text-muted { color: var(--bb-muted) !important; }
html[data-theme="dark"] .bb-body .form-control,
html[data-theme="dark"] .bb-body .form-select,
html[data-theme="dark"] .bb-body select,
html[data-theme="dark"] .bb-body textarea,
html[data-theme="dark"] .bb-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    background-color: var(--bb-soft) !important;
    color: var(--bb-ink) !important;
    border-color: var(--bb-line) !important;
}
html[data-theme="dark"] .bb-body hr { border-color: var(--bb-line); opacity: 1; }
html[data-theme="dark"] .bb-body .closeX,
html[data-theme="dark"] .bb-body .mobilelistImg,
html[data-theme="dark"] .bb-body .decArrow,
html[data-theme="dark"] .bb-body .IncArrow,
html[data-theme="dark"] .bb-body .navbar-toggler-icon { filter: invert(1); }
html[data-theme="dark"] .bb-header .MobileLogo,
html[data-theme="dark"] .bb-hero__img { filter: none; }
html[data-theme="dark"] .bb-hero__img { opacity: .9; }

/* ---------- Dark mode: legacy app.css overrides ----------
 * Generated from app.css: every rule that hardcodes black text or a white/light
 * background is re-pointed at the theme tokens when data-theme="dark".
 */
html[data-theme="dark"] #EnterPromo::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #EnterPromo:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #EnterPromo::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #MobFilter .radio-custom ~ label { color: var(--bb-ink) !important; }
html[data-theme="dark"] #MobilePrice .radio-custom ~ label { color: var(--bb-ink) !important; }
html[data-theme="dark"] #PhoneNumber::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #PhoneNumber:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #PhoneNumber::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #PriceDisp .radio-custom ~ label { color: var(--bb-ink) !important; }
html[data-theme="dark"] #ShippingInfo :-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #ShippingInfo ::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #ShippingInfo ::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #SizeDisp .radio-custom ~ label,
html[data-theme="dark"] .filter-text-group-field  .radio-custom ~ label { color: var(--bb-ink) !important; }
html[data-theme="dark"] #Textarea1::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #Textarea1:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #Textarea1::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #basic-addon2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] #basic-addon3 { color: var(--bb-ink) !important; }
html[data-theme="dark"] #basic-addon4 { color: var(--bb-ink) !important; }
html[data-theme="dark"] #basic-addon5 { color: var(--bb-ink) !important; }
html[data-theme="dark"] #email::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #email:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #email::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #first_name::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #first_name:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #first_name::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #last_name::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #last_name:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #last_name::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #lastt_name::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #lastt_name:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #lastt_name::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #login { color: var(--bb-ink) !important; }
html[data-theme="dark"] #mobileProfilePass { color: var(--bb-ink) !important; }
html[data-theme="dark"] #navbarDarkDropdownMenuLink { color: var(--bb-ink) !important; }
html[data-theme="dark"] #profilePass { color: var(--bb-ink) !important; }
html[data-theme="dark"] #profilePass.form-control { color: var(--bb-ink) !important; }
html[data-theme="dark"] #profilePass::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #profilePass:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] #profilePass::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .CheckOutP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .CheckOutP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .CompleteFormH1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .CompleteFormP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .Countless { color: var(--bb-ink) !important; }
html[data-theme="dark"] .DescP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .DescP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .DesctopNav .nav-link { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobOrderNumber { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobOrderShipStat { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobOrderTotal { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobProdP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobProdP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobProdPrice { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobProdPrice2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobileFilterCat { color: var(--bb-ink) !important; }
html[data-theme="dark"] .MobileInner a { color: var(--bb-ink) !important; }
html[data-theme="dark"] .OrderP1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .OrderP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .OrderP3 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .PColor { color: var(--bb-ink) !important; }
html[data-theme="dark"] .PSize { color: var(--bb-ink) !important; }
html[data-theme="dark"] .PSize2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .PriceOf { color: var(--bb-ink) !important; }
html[data-theme="dark"] .PriceOf:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .ProductSubText { color: var(--bb-ink) !important; }
html[data-theme="dark"] .Register { color: var(--bb-ink) !important; }
html[data-theme="dark"] .ResetInp { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SignP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SizeFilter label { color: var(--bb-ink) !important; }
html[data-theme="dark"] .StaySigned { color: var(--bb-ink) !important; }
html[data-theme="dark"] .StaySigned:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SubMenu .list
.SearchBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SubMenuA { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SubMenuA:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SubMenuText1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .SubMenuText2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .T1:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .T1::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .T1::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .WishSlideText { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishSliderPrice { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishSliderText { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistA { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistA:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistActive2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistActive2:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistB { color: var(--bb-ink) !important; }
html[data-theme="dark"] .WishlistB:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .YourButton { color: var(--bb-ink) !important; }
html[data-theme="dark"] .accordion-button::after { color: var(--bb-ink) !important; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { color: var(--bb-ink) !important; }
html[data-theme="dark"] .accordion-button:not(.collapsed)::after { color: var(--bb-ink) !important; }
html[data-theme="dark"] .activeFilter { color: var(--bb-ink) !important; }
html[data-theme="dark"] .anvColor { color: var(--bb-ink) !important; }
html[data-theme="dark"] .applyPromo { color: var(--bb-ink) !important; }
html[data-theme="dark"] .cardName { color: var(--bb-ink) !important; }
html[data-theme="dark"] .cardPrice { color: var(--bb-ink) !important; }
html[data-theme="dark"] .cart-title { color: var(--bb-ink) !important; }
html[data-theme="dark"] .cartSub-title { color: var(--bb-ink) !important; }
html[data-theme="dark"] .checkBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .checkPrice { color: var(--bb-ink) !important; }
html[data-theme="dark"] .checkText { color: var(--bb-ink) !important; }
html[data-theme="dark"] .controlForm { color: var(--bb-ink) !important; }
html[data-theme="dark"] .controlForm:-ms-input-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .controlForm::-moz-placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .controlForm::placeholder { color: var(--bb-muted) !important; }
html[data-theme="dark"] .filter-item { color: var(--bb-ink) !important; }
html[data-theme="dark"] .gh1 span { color: var(--bb-ink) !important; }
html[data-theme="dark"] .gh2 span { color: var(--bb-ink) !important; }
html[data-theme="dark"] .gh3 span { color: var(--bb-ink) !important; }
html[data-theme="dark"] .gh4 span { color: var(--bb-ink) !important; }
html[data-theme="dark"] .gh5 span { color: var(--bb-ink) !important; }
html[data-theme="dark"] .level-3-menu-item .mobilelistItems { color: var(--bb-ink) !important; }
html[data-theme="dark"] .maxCon { color: var(--bb-ink) !important; }
html[data-theme="dark"] .maxCon:hover { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobOrderDate { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobProdH1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobProdP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobileBottonBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobileSubBtn,
html[data-theme="dark"] .mobileSubBtn2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .mobilelistItems { color: var(--bb-ink) !important; }
html[data-theme="dark"] .noBg { color: var(--bb-ink) !important; }
html[data-theme="dark"] .orderDetailP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .orderDetailP3 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .orderDetailP4 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .orderDetailP5 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .overlay a:hover,
html[data-theme="dark"] .overlay a:focus { color: var(--bb-ink) !important; }
html[data-theme="dark"] .overlay2 a:hover,
html[data-theme="dark"] .overlay2 a:focus { color: var(--bb-ink) !important; }
html[data-theme="dark"] .page-link.front { color: var(--bb-ink) !important; }
html[data-theme="dark"] .prodDispH1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .productP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .productsP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .productsTitle { color: var(--bb-ink) !important; }
html[data-theme="dark"] .profile2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .profile3 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .profile4 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .removeBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .secondSectionT1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .secondSectionT2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .size-select,
html[data-theme="dark"] .size-select-mobile { color: var(--bb-ink) !important; }
html[data-theme="dark"] .sizeBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .sizeBtn2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .slP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .socialBtnSpan { color: var(--bb-ink) !important; }
html[data-theme="dark"] .subMenuBtn { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck3 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck4 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck5 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .textCheck6 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishBoxP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishBtn1 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishBtn2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishP { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishP2 { color: var(--bb-ink) !important; }
html[data-theme="dark"] .wishlistBtnText { color: var(--bb-ink) !important; }
html[data-theme="dark"] body { color: var(--bb-ink) !important; }
html[data-theme="dark"] #theDiv { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] #vertical-slider { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .BottomBox { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .SectionTwoCard { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .SubMenu { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .amount-custom-input-wrp { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .applyPromo { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .bg-white { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .cardBox::-webkit-scrollbar-track { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .cartMenu { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .controlForm { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .form-control:focus { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .imgInnerPadding { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .innerAuthor { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .innerAuthor2 { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .mySwiper11 .swiper-slide { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .mySwiperZ .swiper-slide { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .navbar { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .overlay { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .overlay2 { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .overlay3 { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .spHeight::-webkit-scrollbar-track { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .swiper-slide { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .upperPassiveBtn { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] body { background-color: var(--bb-surface) !important; }
html[data-theme="dark"] .bb-section .swiper-slide,
html[data-theme="dark"] .bb-hero .swiper-slide { background: transparent !important; }
.bb-theme-row { display: flex; align-items: center; gap: .5rem; }
.bb-theme-row i { margin-right: .4rem; }
html[data-theme="dark"] .bb-theme-row .bb-theme-toggle__light { display: inline-flex; }
@media (max-width: 575px) {
    .bb-tab { font-size: .76rem; }
    .bb-tab i { font-size: 1.15rem; }
}
html { background: var(--bb-bg); }
/* The generated legacy block above paints body with the card surface; keep the page background. */
html[data-theme="dark"] body { background-color: var(--bb-bg) !important; }

/* ---------- Scalable filter sections (filter-sections.js) ---------- */

.bb-filters [hidden],
.overlay3 [hidden] { display: none !important; }
.bb-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    border: 0;
    background: transparent;
    color: var(--bb-ink);
    text-align: left;
}
.bb-filter-head .prodDispH1 { margin: 0 !important; }
.bb-filter-head i { font-size: 1.1rem; color: var(--bb-muted); transition: transform .2s var(--bb-ease); }
.bb-filter-head[aria-expanded="false"] { margin-bottom: 0; }
.bb-filter-head[aria-expanded="false"] i { transform: rotate(-90deg); }
.bb-filter-head:hover i { color: var(--bb-ink); }
.bb-filter-search {
    height: 38px;
    margin-bottom: 8px;
    padding: .4rem .8rem !important;
    border-radius: 10px !important;
    font-size: .85rem !important;
}
.bb-filter-more {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-top: 6px;
    padding: .25rem 0;
    border: 0;
    background: transparent;
    color: var(--bb-red);
    font-size: .85rem;
    font-weight: 600;
}
.bb-filter-more:hover { text-decoration: underline; }
.bb-filter-empty { margin: 4px 0 0; color: var(--bb-muted); font-size: .85rem; }

/* Mega menu: long category lists flow into columns instead of one tall column. */
.bb-header .SubMenu .container { max-width: var(--bb-container); }
.bb-header .SubMenu .row { justify-content: flex-start !important; row-gap: 12px; }
.bb-header .SubMenu .row > .col-3:only-child { width: 100%; }
.bb-header .SubMenu .innerSubBox ul {
    -moz-columns: 170px 5;
         columns: 170px 5;
    -moz-column-gap: 32px;
         column-gap: 32px;
    margin: 0;
}
.bb-header .SubMenu .SubMenuText2 { -moz-column-break-inside: avoid; break-inside: avoid; padding: 4px 0; }
.bb-header .SubMenu .SubMenuText1 { margin-bottom: 10px !important; font-size: 1rem; }
.bb-pdp .addedToCartBtn { background: #16a34a !important; color: #fff; border: 0; font-weight: 500; }
/* Product page legacy overrides: compact size chips, gallery sized by its slides. */
.bb-sizes .size-checkbox { flex: 0 0 auto; }
.bb-sizes .text-group-field,
.bb-sizes .inner-block { width: auto !important; height: auto !important; }
.bb-sizes .size-select.w-100 { width: auto !important; min-width: 52px; height: 44px !important; }
.bb-mgallery .swiper,
.bb-mgallery .swiper-wrapper { height: auto !important; }

/* ---------- Store finder (/addressShop) ---------- */

.bb-stores { padding-top: 28px; }
.bb-stores__head { margin-bottom: 18px; }
.bb-stores__head .bb-banner__eyebrow { color: var(--bb-red); opacity: 1; }
.bb-stores__title { margin: 0; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 700; }
.bb-stores__lead { margin: 6px 0 0; color: var(--bb-muted); }

.bb-stores__chips { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bb-stores__chips::-webkit-scrollbar { display: none; }
.bb-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bb-line);
    border-radius: 999px !important;
    background: var(--bb-surface);
    color: var(--bb-ink-2);
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.bb-chip span { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--bb-soft); font-size: .75rem; }
.bb-chip:hover { border-color: var(--bb-ink-2); }
.bb-chip.is-active { background: var(--bb-red); border-color: var(--bb-red); color: var(--bb-on-red); }
.bb-chip.is-active span { background: rgba(255, 255, 255, .22); color: #fff; }

.bb-stores__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bb-stores__map-wrap { position: -webkit-sticky; position: sticky; top: 96px; }
.bb-stores__map {
    height: calc(100vh - 140px);
    min-height: 420px;
    max-height: 720px;
    border-radius: var(--bb-radius-lg);
    border: 1px solid var(--bb-line);
    overflow: hidden;
    background: var(--bb-soft);
    z-index: 0;
}
.bb-stores__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.bb-store {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    cursor: pointer;
    transition: border-color .15s, box-shadow .2s, transform .2s var(--bb-ease);
}
.bb-store:hover { border-color: rgba(var(--bb-red-rgb), .4); }
.bb-store:focus-visible { outline: 2px solid var(--bb-red); outline-offset: 2px; }
.bb-store.is-active { border-color: var(--bb-red); box-shadow: 0 0 0 3px var(--bb-red-50); }
.bb-store__img { width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px; -o-object-fit: cover; object-fit: cover; background: var(--bb-soft); }
.bb-store__img--icon { display: grid; place-items: center; color: var(--bb-red); font-size: 2rem; }
.bb-store__body { flex: 1; min-width: 0; }
.bb-store__city { margin: 0; color: var(--bb-red); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.bb-store__address { margin: 2px 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.bb-store__hours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: .84rem; color: var(--bb-muted); }
.bb-store__hours-text { display: inline-flex; align-items: center; gap: .3rem; }
.bb-store__status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.bb-store__status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.bb-store__status:empty { display: none; }
.bb-store__status.is-open { color: #16a34a; }
.bb-store__status.is-closed { color: var(--bb-red); }
html[data-theme="dark"] .bb-store__status.is-open { color: #4ade80; }
.bb-store__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Embedded Google Map */
.bb-stores__map iframe { display: block; width: 100%; height: 100%; border: 0; }
html[data-theme="dark"] .bb-stores__map iframe { filter: invert(.92) hue-rotate(180deg) contrast(.9); }
.bb-stores__map-label { display: flex; align-items: center; gap: .4rem; margin: 10px 4px 0; color: var(--bb-ink-2); font-size: .88rem; font-weight: 500; }
.bb-stores__map-label i { color: var(--bb-red); font-size: 1.05rem; }

@media (max-width: 991px) {
    .bb-stores__layout { grid-template-columns: 1fr; gap: 16px; }
    .bb-stores__map-wrap { position: static; }
    .bb-stores__map { height: 320px; min-height: 0; }
}
@media (max-width: 575px) {
    .bb-store { padding: 12px; gap: 12px; }
    .bb-store__img { width: 72px; height: 72px; border-radius: 12px; }
    .bb-store__actions .bb-btn { flex: 1; }
}
.bb-sizes .text-group-field { border: 0 !important; border-radius: 0 !important; }
.bb-card [hidden] { display: none !important; }