/* ==========================================================================
   Boi Bazar - book card system (every .product_item on the site), home page
   sections and listing pages. Loaded after the legacy CSS and bb-theme.css.
   Every selector is prefixed with .bb (body class). !important appears only
   where a legacy !important rule or an inline style must be beaten.
   ========================================================================== */

/* ==========================================================================
   1. THE BOOK CARD
   Markup (unchanged, shared with details.blade.php related cards):
   .product_item.wist_item > .product_item_inner > [.sale-badge] + .pro_img > a > img
   [+ .stock-out-overlay] + .pro_des > .pro_name + .pro_price ; then .pro_btn
   ========================================================================== */
.bb .product_item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    margin: 0;                                   /* legacy margin-bottom: 30px */
    padding: 10px;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    box-shadow: var(--bb-shadow-1);
    transition: transform .22s var(--bb-ease), box-shadow .22s var(--bb-ease), border-color .22s var(--bb-ease);
}
/* Size queries only where the card width is set by its container (grid / owl). */
.bb .owl-item > .product_item,
.bb .main_product_inner > .product_item,
.bb .product_sliders > .product_item {
    container-type: inline-size;
    container-name: bbcard;
}
/* legacy: .product_item:hover { border-color: primary !important } */
.bb .product_item:hover,
.bb .product_item:focus-within {
    border-color: #C8E1D2 !important;
    box-shadow: var(--bb-shadow-2);
}
.bb .product_item_inner {
    position: relative;                          /* ribbon hangs from the stage's top edge */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
}

/* ---- 1a. Shelf stage + physical book ------------------------------------ */
.bb .product_item .pro_img {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: auto;                                /* legacy 200px / 158px */
    aspect-ratio: 4 / 5;
    padding: 12% 13% 9%;
    overflow: hidden;
    border-radius: var(--bb-r-sm);
    background: var(--bb-grad-shelf);
    box-shadow: inset 0 -3px 0 rgba(10, 122, 69, .07);   /* the shelf lip */
}
/* The link shrink-wraps the cover so the spine overlay is sized to the image. */
.bb .product_item .pro_img > a {
    position: relative;
    display: block;
    flex: 0 1 auto;
    height: 100%;
    max-width: 100%;
    border-radius: var(--bb-r-book);
    transform-origin: 0 50%;                     /* tilt from the spine */
    transition: transform .35s var(--bb-ease);
}
.bb .product_item .pro_img img {
    display: block;
    width: auto;                                 /* owl sets img width:100% */
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--bb-r-book);
    background: #fff;
    box-shadow: var(--bb-shadow-book);
    transform: none;                             /* legacy hover scale(1.1) */
    transition: none;
}
/* Spine highlight: dark hinge -> light crease -> transparent over ~7% of the cover. */
.bb .product_item .pro_img > a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 7%;
    min-width: 5px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(255, 255, 255, .38) 40%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* ---- 1b. Stock-out: a rubber stamp over a faded cover ------------------- */
.bb .product_item .stock-out-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: auto;
    padding: 5px 11px 4px;
    transform: translate(-50%, -50%) rotate(-12deg);
    background: rgba(255, 255, 255, .92);
    color: var(--bb-red-600);
    border: 2px solid currentColor;
    border-radius: 6px;
    outline: 1px solid rgba(192, 20, 43, .55);
    outline-offset: 2px;
    box-shadow: 0 4px 14px rgba(4, 50, 31, .16);
    font: 800 13px/1.15 var(--bb-font-ui);
    letter-spacing: .08em;
    white-space: nowrap;
    opacity: 1;
    pointer-events: none;
}
.bb .product_item .pro_img:has(.stock-out-overlay) img {
    filter: grayscale(.85);
    opacity: .7;
}

/* ---- 1c. Discount = red bookmark ribbon hanging from the stage ---------- */
.bb .product_item .sale-badge {
    position: absolute;
    top: -3px;
    right: 10px;
    left: auto;
    z-index: 3;
    pointer-events: none;
}
.bb .product_item .sale-badge-inner {
    position: relative;
    width: 40px;
    height: auto;
    filter: drop-shadow(0 3px 3px rgba(154, 15, 30, .30));
}
/* the fold where the ribbon tucks over the stage edge */
.bb .product_item .sale-badge-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -4px;
    border-style: solid;
    border-width: 0 4px 3px 0;
    border-color: transparent #6E0A15 transparent transparent;
}
.bb .product_item .sale-badge-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 7px 2px 14px;
    border-radius: 0;
    background: var(--bb-grad-sun);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.bb .product_item span.sale-badge-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font: 700 11px/1.1 var(--bb-font-ui);
    text-align: center;
}
.bb .product_item span.sale-badge-text p {
    margin: 0 0 1px;
    color: #fff;
    font: 700 13.5px/1.1 var(--bb-font-ui);
    letter-spacing: -.01em;
}

/* ---- 1d. Title, sold chip, price ---------------------------------------- */
.bb .product_item .pro_des {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 2px 0;
    text-align: center;
}
.bb .product_item .pro_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    height: auto;                                /* legacy 50px + 4-line clamp */
    min-height: 2.9em;                           /* exactly two lines reserved */
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--bb-ink);
    font: 600 14.5px/1.45 var(--bb-font-book);
}
.bb .product_item .pro_name a {
    color: inherit;
    font: inherit;
    text-transform: none;
    text-decoration: none;
    transition: color .2s var(--bb-ease);
}
.bb .product_item .pro_name a:hover { color: var(--bb-green-700); text-decoration: none; }

.bb .product_item .bb-sold {
    align-self: center;
    margin: 7px 0 0;
    padding: .15em .6em;
}
.bb .product_item .bb-sold::before {
    content: "\f7e4";                            /* fire-flame-curved */
    font: 900 11px/1 "Font Awesome 6 Free";
    color: var(--bb-gold-600);
}

.bb .product_item .pro_price {
    margin: auto 0 0;                            /* price + buttons align at the card bottom */
    padding-top: 6px;
}
.bb .product_item .pro_price p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 7px;
    margin: 0;
    color: var(--bb-red-600);
    font: 700 17px/1.3 var(--bb-font-ui);
    text-align: center;
}
.bb .product_item .pro_price del {
    order: 2;                                    /* new price first, struck old price after */
    margin: 0;
    color: var(--bb-ink-3);
    font-size: 13px;
    font-weight: 500;
}

/* ---- 1e. Button row ------------------------------------------------------ */
.bb .product_item .pro_btn {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}
/* legacy: > form:first-child { flex:1 } / > form:last-child { flex:0 0 44px; max-width:44px } */
.bb .product_item .pro_btn > form,
.bb .product_item .pro_btn > a,
.bb .product_item .pro_btn > div {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    margin: 0;
    text-align: center;
}
/* the cart holder: 2nd form, the icon link, or (search page) the plain .cart_btn */
.bb .product_item .pro_btn > form + form,
.bb .product_item .pro_btn > a.cart-icon-link,
.bb .product_item .pro_btn > .cart_btn:not(.order_button) {
    flex: 0 0 42px;
    max-width: 42px;
}
.bb .product_item .pro_btn > .cart_btn:not(.order_button) { order: 2; }

/* Primary: অর্ডার করুন */
.bb .product_item .order-btn,
.bb .product_item .order-btn-link,
.bb .product_item .pro_btn form button:not(.cart-icon-btn):not(.cart-icon-link),
.bb .product_item .pro_btn .cart_btn.order_button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: var(--bb-r-sm);
    background: var(--bb-grad-sun);
    color: #fff !important;                      /* legacy color rules use !important */
    box-shadow: 0 4px 12px rgba(192, 20, 43, .22);
    font: 600 15px/1.2 var(--bb-font-ui);        /* legacy "Potro Sans Bangla" 404s */
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s var(--bb-ease), box-shadow .2s var(--bb-ease), transform .15s var(--bb-ease);
}
.bb .product_item .order-btn:hover,
.bb .product_item .order-btn-link:hover,
.bb .product_item .order-btn:focus-visible,
.bb .product_item .order-btn-link:focus-visible,
.bb .product_item .pro_btn form button:not(.cart-icon-btn):not(.cart-icon-link):hover,
.bb .product_item .pro_btn .cart_btn.order_button a:hover {
    background: var(--bb-grad-sun);              /* legacy hover: #b71c1c / #1b6ab0 */
    border-color: transparent;
    color: #fff !important;                      /* legacy hover sets text = primary !important */
    filter: brightness(.93) saturate(1.05);
    box-shadow: var(--bb-shadow-sun);
}
.bb .product_item .order-btn:active,
.bb .product_item .order-btn-link:active,
.bb .product_item .pro_btn form button:active { transform: translateY(1px); }

/* Secondary: cart icon square */
.bb .product_item .cart-icon-btn,
.bb .product_item .cart-icon-link,
.bb .product_item .pro_btn > .cart_btn:not(.order_button) > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--bb-green-600);
    border-radius: var(--bb-r-sm);
    background: #fff;
    color: var(--bb-green-600);
    box-shadow: none;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease), border-color .2s var(--bb-ease), transform .15s var(--bb-ease);
}
.bb .product_item .cart-icon-btn i,
.bb .product_item .cart-icon-link i,
.bb .product_item .pro_btn > .cart_btn:not(.order_button) > a i {
    color: var(--bb-green-600);                  /* legacy: white icon on white */
    font-size: 17px;
    transition: color .2s var(--bb-ease);
}
.bb .product_item .cart-icon-btn:hover,
.bb .product_item .cart-icon-link:hover,
.bb .product_item .cart-icon-btn:focus-visible,
.bb .product_item .cart-icon-link:focus-visible,
.bb .product_item .pro_btn > .cart_btn:not(.order_button) > a:hover {
    background: var(--bb-green-600);             /* legacy hover: red #d32f2f */
    border-color: var(--bb-green-600);
    color: #fff;
}
.bb .product_item .cart-icon-btn:hover i,
.bb .product_item .cart-icon-link:hover i,
.bb .product_item .cart-icon-btn:focus-visible i,
.bb .product_item .cart-icon-link:focus-visible i,
.bb .product_item .pro_btn > .cart_btn:not(.order_button) > a:hover i { color: #fff; }
.bb .product_item .cart-icon-btn:active,
.bb .product_item .cart-icon-link:active { transform: translateY(1px); }

/* ---- 1f. Card sizes ------------------------------------------------------ */
@container bbcard (min-width: 200px) {
    .bb .product_item .pro_name { font-size: 15px; }
}
/* narrow cards (~150-175px: 2-up phones, 5-up small desktops) */
@container bbcard (max-width: 178px) {
    .bb .product_item .pro_name { font-size: 13.5px; }
    .bb .product_item .pro_price p { font-size: 16px; column-gap: 5px; }
    .bb .product_item .pro_price del { font-size: 12px; }
    .bb .product_item .pro_btn { gap: 5px; }
    .bb .product_item .order-btn,
    .bb .product_item .order-btn-link,
    .bb .product_item .pro_btn form button:not(.cart-icon-btn):not(.cart-icon-link),
    .bb .product_item .pro_btn .cart_btn.order_button a { font-size: 14px; padding: 0 4px; }
    .bb .product_item .sale-badge { right: 6px; }
    .bb .product_item .sale-badge-inner { width: 36px; }
    .bb .product_item .sale-badge-box { min-height: 48px; padding-top: 6px; }
    .bb .product_item span.sale-badge-text p { font-size: 12.5px; }
    .bb .product_item .stock-out-overlay { padding: 4px 8px 3px; font-size: 11.5px; }
}

/* ==========================================================================
   2. CAROUSELS + GRIDS THAT HOLD CARDS
   ========================================================================== */
/* room for the hover lift + shadow inside owl's overflow:hidden viewport */
.bb .flash_sale_slider .owl-stage-outer,
.bb .product_slider .owl-stage-outer,
.bb .related_slider .owl-stage-outer {
    padding: 5px 0 34px;                         /* the hover shadow reaches ~46px below the card */
    margin-bottom: -20px;                        /* ...without adding space to the section */
}
/* equal-height cards in a carousel row */
.bb .flash_sale_slider .owl-stage,
.bb .product_slider .owl-stage,
.bb .related_slider .owl-stage { display: flex; }
.bb .flash_sale_slider .owl-stage::after,
.bb .product_slider .owl-stage::after,
.bb .related_slider .owl-stage::after { content: none; }
.bb .flash_sale_slider .owl-item,
.bb .product_slider .owl-item,
.bb .related_slider .owl-item { display: flex; flex-shrink: 0; }
.bb .owl-item > .product_item { width: 100%; }

/* Grids: home "All Products", category-wise rows, every listing page. */
.bb .main_product_inner,
.bb .product_sliders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;                           /* legacy overflow:hidden clipped the hover lift */
}
@media (min-width: 576px) {
    .bb .main_product_inner,
    .bb .product_sliders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 768px) {
    .bb .col-sm-12 > .main_product_inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .bb .main_product_inner,
    .bb .product_sliders { gap: 16px; }
    .bb .col-sm-12 > .main_product_inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .bb .col-sm-9 > .main_product_inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .bb .col-sm-12 > .main_product_inner,
    .bb .product_sliders { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 6 books per category row */
}

/* ==========================================================================
   3. SECTION HEADINGS + COUNTDOWN CHIPS + VIEW MORE (home and listing pages)
   ========================================================================== */
.bb .sec_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 14px;
}
.bb .sec_title .section-title-header {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;                                   /* legacy 1px #ececec rule */
    font-size: inherit;
    line-height: 1.25;
}
.bb .timer_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.bb .section-title-header .section-title-name {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: 0;
    color: var(--bb-ink);
    font: 800 25px/1.25 var(--bb-font-ui);
    font-stretch: 112%;
    letter-spacing: -.005em;
    text-transform: none;
}
.bb .section-title-header .section-title-name::before {
    content: "";
    flex: 0 0 auto;
    width: .48em;
    height: .48em;
    border-radius: 50%;
    background: var(--bb-grad-sun);
    box-shadow: 0 0 0 4px var(--bb-red-50);
}
@media (max-width: 767px) {
    .bb .section-title-header .section-title-name { font-size: 20px; }
}

/* jquery.syotimer: .syotimer__body > .syotimer-cell > .syotimer-cell__value + __unit */
.bb .offer_timer .syotimer__body {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bb .offer_timer .syotimer__body::before {
    content: "\f017";                            /* clock */
    margin-right: -4px;
    color: var(--bb-gold-600);
    font: 400 17px/1 "Font Awesome 6 Free";
}
.bb .offer_timer .syotimer-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;                                 /* legacy 38px red box */
    min-width: 38px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--bb-green-900);
    box-shadow: inset 0 -2px 0 var(--bb-gold-500);
    color: #fff;
    font: 700 16px/1 var(--bb-font-ui);
    font-variant-numeric: tabular-nums;
}
.bb .offer_timer .syotimer-cell:not(:last-child)::after {
    content: ":";
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-58%);
    color: var(--bb-gold-600);
    font: 800 16px/1 var(--bb-font-ui);
}
.bb .offer_timer .syotimer-cell__unit { display: none; }
@media (max-width: 767px) {
    .bb .offer_timer .syotimer__body { gap: 10px; }
    .bb .offer_timer .syotimer__body::before { font-size: 15px; }
    .bb .offer_timer .syotimer-cell { min-width: 32px; height: 32px; padding: 0 6px; font-size: 14.5px; }
    .bb .offer_timer .syotimer-cell:not(:last-child)::after { right: -8px; }
}

/* "View More" = green ghost pill (sits in the section header row) */
.bb .show_more_btn {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
}
.bb a.view_more_btn {
    float: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 18px;
    border: 1.5px solid var(--bb-green-600);
    border-radius: var(--bb-r-pill);
    background: #fff;
    color: var(--bb-green-700);
    font: 600 14.5px/1.2 var(--bb-font-ui);
    text-transform: none;
    text-decoration: none;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease);
}
.bb a.view_more_btn:hover,
.bb a.view_more_btn:focus-visible {
    background: var(--bb-green-600);
    color: #fff;
}

/* ==========================================================================
   4. HOME PAGE
   ========================================================================== */
.bb .bb-home .homeproduct {
    margin: 0;
    padding: 24px 0;                             /* ~48px between sections */
    background: transparent;
}
.bb .bb-home .slider-section { margin: 18px 0 6px; }

/* ---- 4a. Hero slider ---------------------------------------------------- */
.bb .bb-home .home-slider-container {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 1200 / 388;                    /* the uploaded banners are 1200x388; reserves the box before owl loads */
    padding: 0;
    border-radius: var(--bb-r-lg);
    background: var(--bb-green-50);
    box-shadow: var(--bb-shadow-2);
}
.bb .bb-home .main_slider,
.bb .bb-home .main_slider .owl-stage-outer,
.bb .bb-home .main_slider .owl-stage,
.bb .bb-home .main_slider .owl-item,
.bb .bb-home .main_slider .slider-item { height: 100%; }
.bb .bb-home .main_slider .slider-item { margin: 0; }
.bb .bb-home .main_slider .slider-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bb .bb-home .main_slider .owl-nav {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}
.bb .bb-home .main_slider .owl-nav button.owl-prev,
.bb .bb-home .main_slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    z-index: 2;                                  /* legacy z-index: 99999999 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: var(--bb-green-600) !important;       /* legacy button.owl-next { color:white !important } */
    box-shadow: 0 4px 14px rgba(4, 50, 31, .22);
    font-size: 17px !important;                  /* legacy 30px !important */
    line-height: 1 !important;                   /* legacy 10px !important */
    transform: translateY(-50%);
    pointer-events: auto;
    transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease);
}
.bb .bb-home .main_slider .owl-nav button.owl-prev { left: 16px; }
.bb .bb-home .main_slider .owl-nav button.owl-next { right: 16px; }
.bb .bb-home .main_slider .owl-nav button.owl-prev:hover,
.bb .bb-home .main_slider .owl-nav button.owl-next:hover,
.bb .bb-home .main_slider .owl-nav button.owl-prev:focus-visible,
.bb .bb-home .main_slider .owl-nav button.owl-next:focus-visible {
    background: var(--bb-green-600);
    color: #fff !important;
}
.bb .bb-home .main_slider .owl-nav button i { color: inherit; }
.bb .bb-home .main_slider .owl-next i:hover,
.bb .bb-home .main_slider .owl-prev i:hover { color: inherit; }   /* legacy yellow */

/* ---- 4b. Top categories as story rings ---------------------------------- */
.bb .bb-cat { padding: 5px 2px 2px; }
.bb .bb-cat__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: var(--bb-ink);
    text-decoration: none;
}
.bb .bb-cat__ring {
    position: relative;
    display: block;
    width: 100%;
    max-width: 132px;
    aspect-ratio: 1;
    padding: 3px;                                /* 3px gradient ring */
    border-radius: 50%;
    background: var(--bb-grad-field);
    box-shadow: 0 5px 14px rgba(4, 50, 31, .14);
    transition: transform .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bb .bb-cat__ring::before {                      /* sun ring fades in on hover */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bb-grad-sun);
    opacity: 0;
    transition: opacity .25s var(--bb-ease);
}
.bb .category-sliger .bb-cat__img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 3px solid #fff;                      /* 3px white gap */
    border-radius: 50%;
    background: #fff;
}
.bb .bb-cat__name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font: 600 14.5px/1.35 var(--bb-font-ui);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s var(--bb-ease);
}
.bb .bb-cat__link:hover .bb-cat__ring::before,
.bb .bb-cat__link:focus-visible .bb-cat__ring::before { opacity: 1; }
.bb .bb-cat__link:hover .bb-cat__ring { box-shadow: 0 8px 20px rgba(192, 20, 43, .22); }
.bb .bb-cat__link:hover .bb-cat__name { color: var(--bb-red-600); }
.bb .bb-cat__link:focus-visible { outline: 0; }
.bb .bb-cat__link:focus-visible .bb-cat__ring { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bb-green-600); }

/* ---- 4c. Promo banners + customer review shots -------------------------- */
.bb .bb-home .bb-promo { padding: 12px 0; }
.bb .bb-home .bb-promo .row { row-gap: 14px; }
.bb .bb-home .bb-promo a {
    display: block;
    overflow: hidden;
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-1);
    transition: transform .25s var(--bb-ease), box-shadow .25s var(--bb-ease);
}
.bb .bb-home .bb-promo a:hover { box-shadow: var(--bb-shadow-2); }
.bb .bb-home .bb-promo img { display: block; width: 100%; height: auto; }

.bb .customer-review .owl-stage-outer { padding: 4px 0 14px; }
.bb .bb-review-shot {
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: #fff;
    box-shadow: var(--bb-shadow-1);
}
.bb .bb-review-shot img { display: block; width: 100%; height: auto; }

@media (max-width: 767px) {
    .bb .bb-home .homeproduct { padding: 14px 0; }   /* ~28px between sections */
    .bb .bb-home .slider-section { margin: 10px 0 2px; }
    .bb .bb-home .home-slider-container { border-radius: var(--bb-r-md); box-shadow: var(--bb-shadow-1); }
    .bb .bb-home .main_slider .owl-nav button.owl-prev,
    .bb .bb-home .main_slider .owl-nav button.owl-next { width: 34px; height: 34px; font-size: 14px !important; }
    .bb .bb-home .main_slider .owl-nav button.owl-prev { left: 8px; }
    .bb .bb-home .main_slider .owl-nav button.owl-next { right: 8px; }
    .bb .bb-home .bb-promo { padding: 8px 0; }
    .bb .bb-home .bb-promo a { border-radius: var(--bb-r-md); }
    .bb .bb-cat__name { font-size: 13px; }
    .bb .bb-cat__link { gap: 6px; }
    .bb a.view_more_btn { padding: 6px 14px; font-size: 14px; }
}
@media (max-width: 575px) {
    .bb .bb-home .main_slider .owl-nav { display: none; }   /* swipe on phones */
}

/* ==========================================================================
   5. LISTING PAGES (category / subcategory / childcategory / search / shop /
      hot deals / flash sales / offers)
   ========================================================================== */
.bb .product-section { padding-top: 18px; padding-bottom: 12px; }

/* ---- 5a. Toolbar: breadcrumb + result count + filter + sort -------------- */
.bb .sorting-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0 0 20px;
    padding: 10px 10px 10px 18px;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    box-shadow: var(--bb-shadow-1);
}
.bb .sorting-section .category-breadcrumb {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 8px;
    font: 500 15px/1.4 var(--bb-font-ui);
}
.bb .category-breadcrumb a {
    color: var(--bb-ink-2);                      /* ink-3 is under 4.5:1 at 15px */
    font-size: 15px;
    text-decoration: none;
}
.bb .category-breadcrumb a:hover { color: var(--bb-green-700); }
.bb .category-breadcrumb span { color: #B5C3BA; }
.bb .category-breadcrumb strong {
    color: var(--bb-ink);
    font: 700 17px/1.35 var(--bb-font-ui);
}
.bb .sorting-section .showing-data {
    display: block;
    height: auto;
    margin-left: auto;                           /* count + sort sit on the right */
    color: var(--bb-ink-2);
}
.bb .sorting-section .showing-data span {
    display: block;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}
.bb .sorting-section .filter_sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.bb .sorting-section .page-sort { min-width: 210px; padding: 0; }
.bb .sorting-section .sort-form { margin: 0; }
.bb form.sort-form .form-select {
    min-height: 42px;
    padding-right: 38px;
    border: 1.5px solid var(--bb-line);          /* legacy 1px #ddd, radius 0 */
    border-radius: var(--bb-r-sm);
    background-color: var(--bb-paper);
    color: var(--bb-ink);
    font: 500 15px/1.3 var(--bb-font-ui);
    cursor: pointer;
}
.bb form.sort-form .form-select:hover { border-color: #C8E1D2; }
.bb form.sort-form .form-select:focus {
    border-color: var(--bb-green-600);
    box-shadow: 0 0 0 4px var(--bb-green-100);
}
.bb .sorting-section .mobile-filter-toggle { display: none; }

/* deal countdown next to the page name (hot deals / flash sales) */
.bb .sorting-section .offer_timer { margin: 0; }
.bb .sorting-section .offer_timer:empty { display: none; }

/* ---- 5b. Filter sidebar: white cards, green accents ---------------------- */
.bb .filter_sidebar .sidebar_item {
    margin: 0 0 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    box-shadow: var(--bb-shadow-1);
}
.bb .filter_sidebar .accordion-item {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.bb .sidebar_item h2.accordion-header { margin: 0; }
.bb .sidebar_item h2.accordion-header button.accordion-button {
    gap: 10px;
    padding: 14px 16px;
    border-radius: 0;
    background: #fff;                            /* legacy primary-red bar */
    color: var(--bb-ink);
    box-shadow: none;
    font: 700 16px/1.3 var(--bb-font-ui);
    text-transform: none;
}
.bb .sidebar_item h2.accordion-header button.accordion-button::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--bb-grad-field);
}
.bb .sidebar_item h2.accordion-header button.accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--bb-ink);
    box-shadow: inset 0 -1px 0 var(--bb-line);
}
.bb .sidebar_item h2.accordion-header button.accordion-button:focus { box-shadow: inset 0 -1px 0 var(--bb-line); }
.bb .sidebar_item h2.accordion-header button.accordion-button:focus-visible {
    outline: 3px solid var(--bb-green-600);
    outline-offset: -3px;
}
.bb .sidebar_item .accordion-header .accordion-button::after {
    color: var(--bb-green-600);
    font-size: 13px;
}
.bb .filter_sidebar .cust_according_body { padding: 8px; }
.bb .filter_sidebar .cust_according_body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bb .cust_according_body ul li a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bb-ink-2);
    font: 500 15px/1.4 var(--bb-font-ui);
    text-decoration: none;
    transition: background-color .15s var(--bb-ease), color .15s var(--bb-ease);
}
.bb .cust_according_body ul li:hover a,
.bb .cust_according_body ul li a:focus-visible {
    background-color: var(--bb-green-50);
    color: var(--bb-green-700);
}

.bb .subcategory-filter-label {
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bb-ink-2);
    font: 500 15px/1.4 var(--bb-font-ui);
}
.bb .subcategory-filter-label:hover { background-color: var(--bb-green-50); }
.bb .subcategory-filter-list p { margin: 0; color: inherit; }
.bb .subcategory-filter-label input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid var(--bb-green-600);
    border-radius: 5px;
    background: #fff;
    opacity: 1;
}
.bb .subcategory-filter-label input[type=checkbox]:checked { background-color: var(--bb-green-600); }
.bb .subcategory-filter-label input:focus-visible { outline: 3px solid var(--bb-green-100); outline-offset: 1px; }

/* ---- 5c. Price range (jQuery UI) ----------------------------------------- */
.bb .filter_sidebar .slider-box { padding: 6px 10px 16px; }
.bb .filter-price-inputs {
    gap: 10px;
    margin: 0 0 18px;
}
.bb .filter-price-inputs p {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin: 0;
    color: var(--bb-ink-2);
    font: 600 14px/1 var(--bb-font-ui);
}
.bb p.min-price input,
.bb p.max-price input {
    width: 78px;
    min-width: 0;                                /* shrinks inside the narrow 768-991px sidebar */
    flex: 0 1 78px;
    height: 34px;
    padding: 0 8px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-xs);
    background: var(--bb-paper);
    color: var(--bb-ink);
    font: 600 14px/1 var(--bb-font-ui);
    text-align: center;
}
.bb #price-range.ui-slider {
    height: 6px;
    margin: 0 11px 4px;
    border: 0;
    border-radius: var(--bb-r-pill);
    background: var(--bb-green-100);
}
.bb #price-range .ui-slider-range {
    border: 0;
    border-radius: var(--bb-r-pill);
    background: var(--bb-green-600);
}
.bb #price-range .ui-slider-handle {
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid var(--bb-green-600);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(4, 50, 31, .25);
    cursor: grab;
    outline: 0;
}
.bb #price-range .ui-slider-handle:hover,
.bb #price-range .ui-slider-handle.ui-state-active { background: var(--bb-green-50); }
.bb #price-range .ui-slider-handle:focus-visible { box-shadow: 0 0 0 4px var(--bb-green-100), 0 2px 6px rgba(4, 50, 31, .25); }

/* ---- 5d. Pagination + category description ------------------------------- */
.bb .custom_paginate {
    display: flex;
    justify-content: center;
    margin: 26px 0 10px;
}
.bb .custom_paginate .pagination { margin: 0; }
.bb .bb-meta-sec:has(.meta_des:empty) { display: none; }
.bb .bb-meta-sec { padding: 8px 0 28px; background: transparent; }
.bb .bb-meta-sec .meta_des {
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    color: var(--bb-ink-2);
}

/* ---- 5e. Empty state ---------------------------------------------------- */
.bb .bb-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px 44px;
    background: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-1);
    text-align: center;
}
.bb .bb-empty__icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--bb-grad-shelf);
    box-shadow: inset 0 0 0 1px var(--bb-green-100);
    color: var(--bb-green-600);
    font-size: 32px;
}
.bb .bb-empty__title {
    margin: 0;
    color: var(--bb-ink);
    font: 700 21px/1.45 var(--bb-font-book);
}
.bb .bb-empty__text {
    max-width: 40ch;
    margin: 0 0 8px;
    color: var(--bb-ink-2);
}
.bb .bb-offers-empty { padding: 28px 0 40px; }

/* ---- 5f. Phones + small tablets: toolbar and filter drawer --------------- */
@media (max-width: 767px) {
    .bb .product-section { padding-top: 12px; }
    .bb .sorting-section {
        gap: 8px 12px;
        margin: 0 0 14px;
        padding: 10px;
    }
    .bb .sorting-section .category-breadcrumb { padding-left: 4px; }
    .bb .category-breadcrumb strong { font-size: 16px; }
    .bb .sorting-section .showing-data { display: block; margin-left: auto; padding-right: 4px; }
    .bb .sorting-section .showing-data span { font-size: 13px; }
    .bb .sorting-section .filter_sort { flex: 1 1 100%; }
    .bb .sorting-section .page-sort { flex: 1 1 auto; min-width: 0; }
    .bb form.sort-form .form-select { font-size: 14.5px; }

    .bb .filter_btn {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        height: 42px;
        padding: 0 16px;
        border: 0;
        border-radius: var(--bb-r-sm);
        background: var(--bb-green-600);
        color: #fff;
        font: 600 15px/1 var(--bb-font-ui);
        text-transform: none;
        cursor: pointer;
    }
    .bb .filter_btn:hover { background: var(--bb-green-700); }

    /* the products column takes the full row once the sidebar becomes a drawer */
    .bb .product-section .filter_sidebar ~ .col-sm-9 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* full-screen filter sheet (legacy: 97% wide, top 2px, red scrollbar) */
    .bb .product-section .filter_sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10050;
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
        padding: 0 12px 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bb-paper);
        opacity: 1;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .28s var(--bb-ease), visibility 0s linear .28s;
    }
    .bb .product-section .filter_sidebar.active {
        top: 0;
        width: 100%;
        visibility: visible;
        transform: none;
        transition: transform .28s var(--bb-ease);
    }
    .bb .product-section .filter_sidebar.active::-webkit-scrollbar-thumb { background-color: var(--bb-green-600); }
    .bb .filter_sidebar .filter_close {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% + 24px);
        height: 56px;
        margin: 0 -12px 14px;
        padding: 0 18px;
        border: 0;
        border-radius: 0;
        background: var(--bb-grad-field);
        color: #fff;
        box-shadow: var(--bb-shadow-1);
        font: 700 18px/1 var(--bb-font-ui);
        text-align: left;
        cursor: pointer;
    }
    .bb .filter_sidebar .filter_close i { font-size: 18px; }
}

/* ==========================================================================
   6. MOTION - only in answer to the user
   ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .bb .product_item:hover { transform: translateY(-3px); }
    .bb .product_item:hover .pro_img > a { transform: perspective(800px) rotateY(-10deg); }
    .bb .bb-cat__link:hover .bb-cat__ring { transform: scale(1.04); }
    .bb .bb-home .bb-promo a:hover { transform: translateY(-2px); }
}