@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --bs-body-font-family: 'Inter';
}

.navbar-transparent .nav-link {
    color: #fff !important;
}

.navbar-transparent .logo-default { display: none; }
.navbar-transparent .logo-white   { display: inline-block; }

.navbar-transparent .btn-navbar-cta {
    color: #fff;
    border: 1px solid #fff;
    background: transparent;
}
.navbar-transparent .btn-navbar-cta:hover {
    background: #fff;
    color: #000;
}

/* Scrolled state: back to default */
.navbar-transparent.scrolled {
    background: #fff !important;
}

.navbar-transparent.scrolled .nav-link {
    color: initial !important;
}

.navbar-transparent.scrolled .logo-default { display: inline-block; }
.navbar-transparent.scrolled .logo-white   { display: none; }

.navbar-transparent.scrolled .btn-navbar-cta {
    color: #fff;
    border-color: #000;
    background: #000;
}
.navbar-transparent.scrolled .btn-navbar-cta:hover {
    background: #333;
}

.navbar-transparent .navbar-toggler {
    border-color: rgba(255,255,255,.6);
}

.navbar-transparent .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar-transparent.scrolled .navbar-toggler {
    border-color: rgba(0,0,0,.15);
}

.navbar-transparent.scrolled .navbar-toggler-icon {
    filter: none;
}

@media (max-width: 991.98px) {
    .navbar-transparent .navbar:has(.navbar-collapse.show) {
        background: #fff;
    }
    
    .navbar-transparent .navbar-collapse.show .nav-link {
        color: initial !important;
    }

    .navbar-transparent .navbar-collapse.show .btn-navbar-cta {
        color: #fff;
        border-color: #000;
        background: #000;
    }

    .navbar-transparent:has(.navbar-collapse.show) .logo-default { display: inline-block; }
    .navbar-transparent:has(.navbar-collapse.show) .logo-white   { display: none; }

    .navbar-transparent:has(.navbar-collapse.show) .navbar-toggler-icon {
        filter: none;
    }
    .navbar-transparent:has(.navbar-collapse.show) .navbar-toggler {
        border-color: rgba(0,0,0,.15);
    }
}


.hero-video-section {
    position: relative;
    overflow: hidden;
    margin-top: -151px;
    padding-top: 151px !important;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-video-section .container {
    z-index: 2;
}

.bg-video-section {
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

.bg-video-section .container {
    z-index: 2;
}

.bg-home-hero {
    background-image: url("../img/home.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-home-hero {
        background-image: url("../img/home-mobile.webp");
    }
}

.bg-home-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/home1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/home2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/home3.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/home4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-slide-1 {
    background-image: url("../img/hook1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-slide-2 {
    background-image: url("../img/hook2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-slide-3 {
    background-image: url("../img/hook3.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-home-slide-4 {
    background-image: url("../img/hook4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-product-1 {
    background-image: url("../img/product/1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-product-2 {
    background-image: url("../img/product/2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-product-3 {
    background-image: url("../img/product/3.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-banner-product-bruu {
    background-image: url("../img/product/4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
    .bg-banner-product-1 {
        background-image: url("../img/product/1-mobile.webp");
        background-position: right;
    }

    .bg-banner-product-2 {
        background-image: url("../img/product/2-mobile.webp");
        background-position: left;
    }

    .bg-banner-product-3 {
        background-image: url("../img/product/3-mobile.webp");
        background-position: left;
    }

    .bg-banner-product-bruu {
        background-image: url("../img/product/4-mobile.webp");
        background-position: right;
    }
}

.bg-product-1 {
    background-image: url("../img/product/product-1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-product-2 {
    background-image: url("../img/product/product-2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-product-3 {
    background-image: url("../img/product/product-3.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-product-4 {
    background-image: url("../img/product/product-4.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-product-5 {
    background-image: url("../img/product/product-5.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-product-6 {
    background-image: url("../img/product/product-6.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cart-busy { position: relative; }
.cart-loading {
    position: absolute; inset: 0; z-index: 5;
    display: none; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .7);
}
.cart-busy.is-loading .cart-loading { display: flex; }
.cart-busy.is-loading { cursor: progress; }

.cart-table .cart-col-qty { width: 150px; }

.checkout-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #dee2e6;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
@media (max-width: 991.98px) {
    #cartPage { padding-bottom: 7rem !important; } /* room for the bar */
}

@media (max-width: 575.98px) {
    .cart-table,
    .cart-table > tbody,
    .cart-table > tfoot { display: block; }
    .cart-table > thead { display: none; }

    .cart-table > tbody > tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name del"
            "qty  sub";
        align-items: center;
        row-gap: .5rem;
        padding: .9rem 0;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }
    .cart-table > tbody > tr > td,
    .cart-table > tfoot > tr > th {
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
    .cart-col-name { grid-area: name; }
    .cart-col-del  { grid-area: del; align-self: start; }
    .cart-col-qty  { grid-area: qty; width: 140px !important; }
    .cart-col-sub  { grid-area: sub; font-weight: 500; }

    .cart-col-qty .btn { min-width: 40px; min-height: 40px; }
    .cart-col-qty .form-control { font-size: 16px; min-height: 40px; }
    .cart-col-del .btn { padding: .5rem .6rem; font-size: 1.1rem; }

    .cart-table > tfoot > tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 1rem 0 1.25rem;
    }
    .cart-table > tfoot > tr > th:last-child { display: none; }

    #checkoutForm .form-control,
    #addMore { font-size: 16px; }
    #checkoutForm .input { margin-bottom: .75rem; }
}

.ship-option {
    display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem;
    border: 1px solid #dee2e6; padding: .65rem .75rem; margin: 0; cursor: pointer;
}
.ship-option:has(input:checked) { border-color: #212529; background: #f8f9fa; }
.ship-option .ship-name { flex: 1; font-weight: 500; }
.ship-option .ship-etd { color: #6c757d; font-size: .8rem; }
.ship-option .ship-price { font-weight: 500; }

.empty-state { text-align: center; padding: 3rem 1rem 2rem; }
.empty-state .empty-icon {
    width: 96px; height: 96px; margin: 0 auto 1.25rem; border-radius: 50%;
    background: #f1f3f5; color: #6c757d;
    display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
}
.suggest-card .suggest-img { height: 160px; background-size: cover; background-position: center; }