/* ==========================================================================   BAIRAHA — Homepage + Category listing + Product detail   ========================================================================== */:root {    --bai-red:        #C8102E;    --bai-red-deep:   #8E1E1E;    --bai-gold:       #F7C223;    --bai-green:      #54A30D;    --bai-green-dark: #12871C;    --bai-white:      #FFFFFF;    --bai-ink:        #2B2A28;    --bai-line:       #E6E1D5;    --bai-r:     12px;    --bai-gap:   20px;    --bai-pad-y: clamp(32px, 4vw, 60px);    --bai-shadow:       0 1px 3px rgba(30, 25, 20, .06);    --bai-shadow-hover: 0 8px 20px rgba(30, 25, 20, .12);    --bai-wave-banner: url("https://dna3n15iwxmh8.cloudfront.net/e40f00095a4ff37570da906badf62cb7/images/487c0a8f7844c76f44c7c31197a53128_1785835470.webp");    --bai-wave-bundle: url("https://dna3n15iwxmh8.cloudfront.net/e40f00095a4ff37570da906badf62cb7/images/c6db1241ff5244590c3f0cdcfad92be3_1785904916.webp");}body.page-main {    background: var(--bai-white);}.title.text-primary {    color: #000;}/* ==========================================================================   1. Sections and headings   ========================================================================== */.bai-section {    padding-block: var(--bai-pad-y) !important;}.bai-section .category-block,.bai-section .product-block > [role="region"],.bai-section .custom-banner-block {    padding-top: 0 !important;    padding-bottom: 0 !important;    margin-top: 0 !important;    margin-bottom: 0 !important;    border-width: 0 !important;}.bai-section.bai-categories {    padding-block: 20px !important;    margin-bottom:20px !important;}.bai-section.bai-bestselling,.bai-section.bai-featured {    padding-top: 0 !important;}.bai-hero {    margin-bottom: 0 !important;}.bai-categories h1.title,.bai-section h2.title {    margin: 0 0 clamp(20px, 2.2vw, 32px) !important;    font-weight: 700;    line-height: 1.2;    letter-spacing: -0.01em;    color: var(--bai-ink) !important;}.bai-categories h1.title {    text-align: center;    font-size: clamp(26px, 2.9vw, 42px) !important;}.bai-section h2.title {    font-size: clamp(20px, 2.3vw, 32px) !important;}/* ==========================================================================   2. Main Categories   ========================================================================== */.bai-cat-grid .category-list {    display: grid !important;    grid-template-columns: repeat(4, minmax(0, 1fr));    gap: var(--bai-gap);}.bai-cat-grid .category-list > .grid {    display: contents !important;}.bai-cat-grid .category-list > .grid:first-child > .category:first-child {    grid-column: span 2;}.bai-cat-grid .category > a {    display: block;    height: 100%;}.bai-cat-grid .category-inner {    position: relative;    height: 100%;    border-radius: var(--bai-r);    overflow: hidden;    background: #EDE7DA;    box-shadow: var(--bai-shadow);    transition: transform .25s ease, box-shadow .25s ease;}.bai-cat-grid .category-inner:hover {    transform: translateY(-3px);    box-shadow: var(--bai-shadow-hover);}.bai-cat-grid .category-image {    padding-top: 0 !important;    margin-bottom: 0 !important;    height: clamp(170px, 18vw, 280px) !important;    border-radius: 0 !important;    overflow: hidden;}.bai-cat-grid .category-image img,.bai-cat-grid .category-image > span {    border-radius: 0 !important;}.bai-cat-grid .category-image img {    transition: transform .4s ease;}.bai-cat-grid .category-inner:hover .category-image img {    transform: scale(1.04);}.bai-cat-grid .category-image .bi-link-45deg {    display: none;}.bai-cat-grid .category-inner .title {    position: absolute;    left: 0;    right: 0;    bottom: 0;    display: flex;    align-items: center;    justify-content: space-between;    gap: 10px;    min-height: 44px;    padding: 8px 14px;    margin: 0;    background: var(--bai-green);    color: #fff;    text-align: left;    line-height: 1.25;    white-space: normal !important;    overflow: hidden;    text-overflow: clip;    transition: background .2s ease;}.bai-cat-grid .category-inner:hover .title {    background: var(--bai-red);}.bai-cat-grid .category-inner .title::after {    content: "\203A";    flex: none;    line-height: 1;    opacity: .9;}/* ==========================================================================   3. Bundle Offers band + curved top divider + View All pill   ========================================================================== */.bai-bundle {    position: relative;    background-color: #fff;    background-image: url("https://dna3n15iwxmh8.cloudfront.net/e40f00095a4ff37570da906badf62cb7/images/28f7c6845e5a7845f8acda0588fd3e31_1785905031.webp");    background-position: center;    background-repeat: repeat;    background-size: auto;}.bai-bundle::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 48px;    background-image: var(--bai-wave-bundle);    background-position: center;    background-size: 100% 100%;    background-repeat: no-repeat;    z-index: 2;    pointer-events: none;}.bai-bundle .bai-container {    position: relative;}.bai-view-all {    position: absolute;    top: 15px;    right: clamp(16px, 3.4vw, 48px);    display: inline-flex;    align-items: center;    gap: 8px;    padding: 10px 20px;    background: #fff;    color: var(--bai-ink);    font-size: 13px;    font-weight: 600;    line-height: 1;    text-decoration: none;    border: 1px solid transparent;    border-radius: 999px;    box-shadow: 0 2px 6px rgba(30, 25, 20, .12);    transition: border-color .2s ease, transform .2s ease;    z-index: 3;}.bai-view-all:hover {    border-color: var(--bai-red);    transform: translateY(-1px);}.bai-view-all i {    font-size: 12px;    line-height: 1;    margin-top: 1px;}.bai-section.bai-bundle:not(:has(.product-block > *)) {    display: none !important;}/* ==========================================================================   4. Product grid layouts   ========================================================================== *//* Homepage product blocks */.bai-products .product-row {    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;    gap: var(--bai-gap) !important;    margin-top: 0 !important;}@media (min-width: 768px) {    .bai-products .product-row {        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;    }}@media (min-width: 1024px) {    .bai-products .product-row {        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;    }}/* Category listing page — override the theme's grid-cols-2 md:3 xl:3 */.product-list-inner-wrapper .product-grid > .grid {    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;    gap: 14px !important;}@media (min-width: 768px) {    .product-list-inner-wrapper .product-grid > .grid {        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;    }}@media (min-width: 1280px) {    .product-list-inner-wrapper .product-grid > .grid {        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;    }}/* ==========================================================================   5. Product card — shared across homepage + listing page   Selector groups target both scopes. Where DOM differs (media anchor is   .flex-shrink-0 on homepage vs .relative on listing; heading is h1 on   homepage vs h3 on listing), rules split.   ========================================================================== *//* Card shell */.bai-products .card.grid-mode,.product-list-inner-wrapper .card {    background: #fff !important;    border: 1px solid var(--bai-line) !important;    border-radius: var(--bai-r) !important;    box-shadow: var(--bai-shadow);    padding-bottom: 4px;    transition: box-shadow .25s ease, transform .25s ease;}.bai-products .card.grid-mode:hover,.product-list-inner-wrapper .item:hover .card {    box-shadow: var(--bai-shadow-hover) !important;}/* Slideshow variant (Best Selling) */.bai-products--slider .card.slideshow-mode {    background: #fff !important;    border: 1px solid var(--bai-line);    border-radius: var(--bai-r) !important;    box-shadow: var(--bai-shadow);    overflow: hidden;    height: 100%;    padding-bottom: 12px;}.bai-products--slider .card.slideshow-mode:hover {    box-shadow: var(--bai-shadow-hover);}.bai-products--slider .swiper-slide {    height: auto;}.bai-products--slider .swiper-wrapper {    align-items: stretch;}/* Media wrapper — homepage anchor is .flex-shrink-0, listing is .relative */.bai-products .card > a.flex-shrink-0,.product-list-inner-wrapper .card > a.relative {    display: block;    position: relative;    width: 100% !important;    height: auto !important;    aspect-ratio: 1 / 1;    padding: 10px;    background: #fff;    border-radius: var(--bai-r) var(--bai-r) 0 0;    overflow: hidden;}.bai-products .card > a.flex-shrink-0 picture,.product-list-inner-wrapper .card > a.relative picture {    display: block;    width: 100%;    height: 100%;}.bai-products .card .thumb,.product-list-inner-wrapper .card .thumb {    width: 100% !important;    height: 100% !important;    object-fit: contain;}/* Offer badge — ships top-right on slate, design wants top-left in red */.bai-products .offer-percentage-wrapper,.product-list-inner-wrapper .offer-percentage-wrapper {    top: 10px !important;    left: 10px !important;    right: auto !important;    background: var(--bai-red) !important;    border-radius: 4px !important;    padding: 3px 8px !important;    letter-spacing: .02em;    font-size: 10px !important;    font-weight: 700;}/* Featured star badge — green pill, sits above the offer badge in z */.bai-products .card .head h1 > span.absolute,.bai-products .card .head h3 > span.absolute,.product-list-inner-wrapper .card .head h3 > span.absolute{    background: var(--bai-green-dark) !important;    border-radius: 5px !important;    padding: 4px !important;    z-index: 11;}.bai-products .card:has(.offer-percentage-wrapper) .head h1 > span.absolute,.bai-products .card:has(.offer-percentage-wrapper) .head h3 > span.absolute,.product-list-inner-wrapper .card:has(.offer-percentage-wrapper) .head h3 > span.absolute {    left: 84px;}.page-product .main-title-wrapper > span {    background: var(--bai-green-dark) !important;    border-radius: 5px !important;    padding: 6px 8px !important;    vertical-align: middle;}/* Favourite heart — top-right instead of bottom-right */.bai-products .card > a.flex-shrink-0 > div.rounded-full,.product-list-inner-wrapper .card > a.relative > div.rounded-full {    top: 10px !important;    bottom: auto !important;    right: 10px !important;    background: rgba(255, 255, 255, .92) !important;    width: 28px !important;    height: 28px !important;}.bai-products .card > a.flex-shrink-0 > div.rounded-full .bi-heart,.product-list-inner-wrapper .card > a.relative > div.rounded-full .bi-heart {    color: var(--bai-red) !important;}.bai-products .card > a.flex-shrink-0 > div.rounded-full:hover,.product-list-inner-wrapper .card > a.relative > div.rounded-full:hover {    background: var(--bai-red) !important;}.bai-products .card > a.flex-shrink-0 > div.rounded-full:hover .bi-heart,.product-list-inner-wrapper .card > a.relative > div.rounded-full:hover .bi-heart {    color: #fff !important;}/* Name */.bai-products .card .head h3,.product-list-inner-wrapper .card .head h3 {    margin-top: 16px !important;    font-weight: 500;    line-height: 1.45;    color: var(--bai-ink);}.bai-products .card .name-product-link:hover .head h3,.product-list-inner-wrapper .card .name-product-link:hover .head h3 {    color: var(--bai-red);}/* Description hidden by design */.bai-products .card .info .description,.product-list-inner-wrapper .card .description {    display: none !important;}/* Price */.bai-products .price.text-primary,.product-list-inner-wrapper .card .price.text-primary,.product-list-inner-wrapper .card .discount-price.text-primary {    color: var(--bai-ink) !important;}.bai-products .you-save-wrapper,.product-list-inner-wrapper .card .you-save-wrapper {    color: var(--bai-green) !important;}/* Add to cart — resting */.bai-products .card .button-pre-icon,.product-list-inner-wrapper .card .button-pre-icon {    width: 26px !important;    height: 26px !important;    margin-right: 5px;    border-radius: 50% !important;    background: var(--bai-red) !important;    color: #fff !important;}/* Add to cart — hover anywhere on the button */.bai-products .card .group:hover button.add-to-cart,.product-list-inner-wrapper .card .group:hover button.add-to-cart {    background: var(--bai-red) !important;}.bai-products .card .group:hover .button-label,.product-list-inner-wrapper .card .group:hover .button-label {    color: #fff !important;}.bai-products .card .group:hover .button-pre-icon,.product-list-inner-wrapper .card .group:hover .button-pre-icon {    background: #fff !important;    color: var(--bai-red) !important;}.product-list-inner-wrapper .card .info {    padding: 10px !important;}.product-list-inner-wrapper .card .price-details,.product-list-inner-wrapper .card .discount-price {    font-size: 12px !important;}/* Tags row on any card */.tag-wrapper .tag , .product-details-wrapper .item-tag img {    display: flex;    justify-content: center;    width: 100px;    height: 25px;    margin-top: 10px;    margin-inline: 0.25rem;}.tag-wrapper .tag span {    width: 100%;    height: 100%;    background-repeat: no-repeat;    background-size: contain;}.product-details-wrapper .item-tag span {    display: none}/* ==========================================================================   6. Swiper arrows   ========================================================================== */.bai-section .swiper-button-prev,.bai-section .swiper-button-next {    width: 36px;    height: 36px;    margin-top: 0;    top: 50%;    transform: translateY(-50%);    background: none;    box-shadow: none;}.bai-section .swiper-button-prev { left: 8px; }.bai-section .swiper-button-next { right: 8px; }.bai-section .swiper-button-prev::after,.bai-section .swiper-button-next::after {    content: none !important;}.bai-section .swiper-button-prev > div,.bai-section .swiper-button-next > div {    position: absolute;    top: 0;    left: 0;    right: auto;    transform: none !important;    width: 36px !important;    height: 36px !important;    border-radius: 50%;    background: #fff !important;    color: var(--bai-green) !important;    border: 1px solid var(--bai-line);    box-shadow: var(--bai-shadow);    font-size: 16px !important;    transition: background .2s ease, color .2s ease;}.bai-section .swiper-button-prev:hover > div,.bai-section .swiper-button-next:hover > div {    background: var(--bai-green) !important;    color: #fff !important;}/* ==========================================================================   7. Header — brand strip, centred logos, hamburger button   ========================================================================== */#header.header-red::before {    content: "";    position: absolute;    top: 0;    left: 0;    right: 0;    height: 8px;    background: var(--bai-red);    z-index: 1;}#header .header-wrapper.px-4 {    padding-top: 1.25rem;}#header .menuBtn {    width: 40px;    height: 40px;    border-radius: 50%;    background: var(--bai-red);    color: #fff;    transition: background .2s ease, transform .2s ease;}#header .menuBtn:hover {    background: var(--bai-red-deep);    transform: translateY(-1px);}#header .main-logo {    display: flex;    align-items: center;    gap: 12px;}@media (min-width: 641px) {    #header .main-logo {        position: absolute;        left: 50%;        top: 50%;        transform: translate(-50%, -50%);        z-index: 1;        pointer-events: auto;    }}/* ==========================================================================   8. Hero banner   ========================================================================== */.custom-banner-block {    position: relative;}.banner .custom-banner-block .image.relative.overflow-hidden {    width: 100%;    height: 0;    padding-top: 25% !important;}.banner .custom-banner-block::after {    content: '';    position: absolute;    bottom: -5px;    left: 0;    width: 100%;    height: 48px;    background-image: var(--bai-wave-banner);    background-position: center;    background-size: 100% 100%;    background-repeat: no-repeat;    z-index: 5;    pointer-events: none;}/* ==========================================================================   9. Footer   ========================================================================== */.page-footer {    position: relative;    margin-top: 20px;}.page-footer::before {    content: '';    position: absolute;    top: -15px;    left: 0;    width: 100%;    height: 48px;    background-image: var(--bai-wave-banner);    background-position: center;    background-size: 100% 100%;    background-repeat: no-repeat;    z-index: 10;    pointer-events: none;}/* Column order (swap Social and Contact) */.page-footer .footer-links > .contact-block        { order: 1; }.page-footer .footer-links > .social-block         { order: 2; }.page-footer .footer-links > .quick-link-block     { order: 3; }.page-footer .footer-links > .top-categories-block { order: 4; }.page-footer .footer-links.grid {    padding-top: 2.5rem;    padding-bottom: 2.5rem;}.page-footer .footer-links .text-heading {    color: var(--bai-red) !important;}.page-footer .footer-links .mr-3 {    color: black;}.page-footer .border-t {    background-color: var(--bai-red-deep);    color: #fff;    padding-bottom: 10px;}.page-footer .border-t a {    color: #e5e7eb;}/* ==========================================================================   10. Third-party widgets (WhatsApp chat, go-to-top)   ========================================================================== */.whatsapp-chat-widget .wa-chat-box {    bottom: 100px !important;}#whatsapp-chat-widget #wa-widget-send-button {    z-index: 10 !important;    background-color: #43c54e;}.footer-block .go-to-top-btn {    background: #43c54e;    right: 50px;}/* ==========================================================================   11. Product detail page — layout, gallery, variants, price, add-to-cart   ========================================================================== */.product-details-wrapper .item-description.whitespace-pre-wrap {    white-space: unset !important;}.page-product .description-wrapper {    padding: 0 15px !important;}/* Breadcrumb */.page-product .breadcrumb a:hover {    color: var(--bai-red);}/* Product title */.page-product .main-title-wrapper h1.title {    color: var(--bai-ink) !important;    font-size: clamp(22px, 2.4vw, 32px) !important;    font-weight: 700;    line-height: 1.25;    letter-spacing: -0.01em;}/* Image gallery */.page-product .single-image {    background: #fff;    border: 1px solid var(--bai-line);    border-radius: var(--bai-r);    padding: 20px;    box-shadow: var(--bai-shadow);}.page-product .thumb-list .choosed-thumb {    box-shadow: 0 0 0 2px var(--bai-red) !important;}/* Variant chooser (Quantity: 1 bot / 6 bot) */.page-product .super-attributes .attr-name {    color: var(--bai-ink) !important;    font-weight: 700;}.page-product .attr-value {    border-color: var(--bai-line) !important;    border-radius: 999px !important;    transition: border-color .2s ease, background .2s ease, color .2s ease;}.page-product .attr-value:hover {    border-color: var(--bai-red) !important;}.page-product .offer-percentage-wrapper {    display: inline-block;    color: #fff !important;    background: var(--bai-red);    font-size: 15px !important;    font-weight: 700;    letter-spacing: .04em;    line-height: 1;    padding: 6px 10px;    border-radius: 4px;    margin-bottom: 14px;}.page-product .offer-percentage-wrapper .offer-percentage {    font-size: inherit !important;    color: inherit !important;}/* Price */.page-product .price-details .price.text-primary,.page-product .price-details .discount-price.text-primary {    color: var(--bai-ink) !important;}.page-product .price-details .has-offer {    color: #8A867F !important;}.page-product .price-details .discount-price {    font-size: clamp(22px, 2.4vw, 32px) !important;}.page-product .you-save-wrapper {    color: var(--bai-green) !important;}/* Quantity stepper */button.flex.items-center.justify-center.flex-shrink-0.h-full.transition.ease-in-out.duration-300.min-w-\[33\%\].focus\:outline-none.w-8.md\:w-9.hover\:text-white.hover\:bg-primary.bg-transparent.focus\:outline-none {    background: #e5e7eb;    color: grey;}input.font-semibold.flex.items-center.text-center.h-full.transition.duration-250.ease-in-out.cursor-auto.flex-shrink-0.text-xs.md\:text-sm.min-w-\[35\%\].w-8.md\:w-10.focus\:outline-none.bg-transparent {    background: white;    color: black;}.page-product .detail-count-btn-wrapper button:hover {    background: var(--bai-red) !important;    color: #fff !important;}/* Primary Add To Cart button */.page-product button.add-to-cart.bg-primary {    background: var(--bai-red) !important;    color: #fff !important;    border-radius: 999px !important;    letter-spacing: .04em;    transition: background .2s ease, transform .2s ease;}.page-product button.add-to-cart.bg-primary:hover {    background: var(--bai-red-deep) !important;    transform: translateY(-1px);}/* Heart button (bigger version next to Add To Cart) */.page-product .add-to-cart-wrapper > .add-to-cart > div > .flex .rounded-full {    background: #fff !important;    border: 1px solid var(--bai-line);    transition: background .2s ease;}.page-product .add-to-cart-wrapper > .add-to-cart > div > .flex .rounded-full .bi-heart {    color: var(--bai-red) !important;}.page-product .add-to-cart-wrapper > .add-to-cart > div > .flex .rounded-full:hover {    background: var(--bai-red) !important;}.page-product .add-to-cart-wrapper > .add-to-cart > div > .flex .rounded-full:hover .bi-heart {    color: #fff !important;}/* ==========================================================================   12. Mobile overrides   ========================================================================== */@media (max-width: 900px) {    .bai-cat-grid .category-list {        grid-template-columns: repeat(2, minmax(0, 1fr));    }}@media (max-width: 640px) {    /* Headings centred on mobile */    .bai-section h1.title,    .bai-section h2.title {        text-align: center;    }    /* Shorter curved dividers so the arc stays proportional */    .banner .custom-banner-block::after,    .page-footer::before,    .bai-bundle::before {        height: 24px;    }.bai-cat-grid .category-list > .grid:first-child > .category:first-child .category-image {    height: clamp(250px, 18vw, 280px) !important;}    /* Bundle Offers — View All pill drops below the grid */    .bai-bundle .bai-container {        padding-bottom: 60px;    }    .bai-view-all {        top: auto;        bottom: 0;        right: 50%;        transform: translateX(50%);    }    .bai-view-all:hover {        transform: translateX(50%) translateY(-1px);    }    .bai-bestselling .swiper-container {        padding-bottom: 56px;    }    .bai-bestselling .swiper-button-prev,    .bai-bestselling .swiper-button-next {        top: auto;        bottom: 0;        transform: none;    }    .bai-bestselling .swiper-button-prev {        left: 50%;        margin-left: -50px;    }    .bai-bestselling .swiper-button-next {        right: 50%;        margin-right: -50px;    }    .bai-bestselling .swiper-button-prev > div,    .bai-bestselling .swiper-button-next > div {        transform: none !important;    }    .page-footer .footer-links {        gap: 0;        grid-template-columns: 1fr !important;    }    .page-footer .social-block ul,    .page-footer .quick-link-block ul,    .page-footer .top-categories-block ul {        display: flex;        flex-direction: row;        flex-wrap: wrap;        width: 100%;    }    .page-footer .social-block ul li,    .page-footer .quick-link-block ul li,    .page-footer .top-categories-block ul li {        align-items: flex-start;        width: 50%;    }    .page-footer .border-t {        padding-bottom: 70px;    }    #whatsapp-chat-widget #wa-widget-send-button {        bottom: 70px !important;    }    .footer-block .go-to-top-btn {        bottom: 5rem;    }}