.store-body {
    background: #f7f8fa
}

.store-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff
}

.store-nav {
    min-height: 68px
}

.store-brand {
    font-weight: 800;
    color: #1e2721;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.15rem
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #238b2c;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900
}

.store-search {
    width: min(520px,42vw);
    margin-left: 35px;
    background: #f3f5f3;
    border-radius: 12px;
    padding: 0 12px;
    align-items: center
}

    .store-search span {
        font-size: 20px;
        color: #68716b
    }

    .store-search input {
        border: 0;
        outline: 0;
        background: transparent;
        width: 100%;
        padding: 11px
    }

.store-nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto
}

.nav-action {
    color: #3d4540;
    text-decoration: none;
    display: flex;
    gap: 6px;
    align-items: center
}

.cart-action {
    position: relative;
    color: #fff;
    background: #238b2c;
    border-radius: 11px;
    padding: 9px 14px;
    text-decoration: none
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e53935;
    color: #fff;
    border-radius: 50%;
    min-width: 21px;
    height: 21px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff
}

.mobile-search {
    padding: 8px 12px;
    border-top: 1px solid #f0f1f2;
    background: #fff
}

    .mobile-search form {
        display: flex;
        background: #f3f5f3;
        border-radius: 12px
    }

    .mobile-search input {
        border: 0;
        background: transparent;
        outline: 0;
        padding: 11px;
        width: 100%
    }

    .mobile-search button {
        border: 0;
        background: transparent;
        padding: 0 15px
    }

.store-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 18px 18px 0
}

.pb-mobile-nav {
    padding-bottom: 20px
}

.store-hero {
    background: linear-gradient(135deg,#eaf8ea,#fff);
    border: 1px solid #dceedd;
    border-radius: 18px;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.store-kicker {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    color: #238b2c
}

.store-hero h1, .page-heading h1, .account-hero h1, .order-detail-top h1, .content-page h1 {
    font-weight: 800;
    margin: .25rem 0
}

.store-hero p {
    margin: 0;
    color: #667067
}

.hero-badge {
    background: #fff;
    border: 1px solid #dceedd;
    border-radius: 999px;
    padding: 10px 14px;
    white-space: nowrap
}

.store-search-row {
    max-width: 720px
}

.category-strip {
    display: flex;
    gap: 9px;
    overflow: auto;
    padding-bottom: 4px
}

.category-chip {
    background: #fff;
    border: 1px solid #e1e5e2;
    border-radius: 999px;
    padding: 8px 14px;
    color: #3f4742;
    text-decoration: none;
    white-space: nowrap
}

    .category-chip.active {
        background: #238b2c;
        border-color: #238b2c;
        color: #fff
    }

.product-card-modern {
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,.03)
}

.product-image-wrap {
    height: 190px;
    background: #fafbfa;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

    .product-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 12px
    }

.product-placeholder {
    font-size: 48px
}

.offer-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #e8f6e8;
    color: #187421;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 7px
}

.product-card-body {
    padding: 13px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.product-category, .product-unit {
    font-size: 11px;
    color: #79817b
}

.product-card-body h3 {
    font-size: .96rem;
    line-height: 1.25;
    margin: 5px 0 2px;
    font-weight: 700
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 8px 0 10px
}

    .price-row strong {
        font-size: 1.1rem
    }

.mrp {
    text-decoration: line-through;
    color: #9aa09c;
    font-size: .85rem
}

.product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: auto
}

    .product-actions form {
        margin: 0
    }

.out-of-stock {
    opacity: .62
}

.empty-state {
    background: #fff;
    border: 1px dashed #d7ddd8;
    border-radius: 18px;
    padding: 55px 20px;
    text-align: center
}

.empty-icon {
    font-size: 42px;
    margin-bottom: 10px
}

.page-heading, .order-detail-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 8px 0 18px
}

.order-detail-top {
    align-items: center
}

.circle-back {
    width: 42px;
    height: 42px;
    border: 1px solid #e1e5e2;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-size: 28px
}

.order-detail-top > div {
    flex: 1
}

.order-card, .summary-card, .checkout-card, .account-edit-card {
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 16px;
    padding: 18px
}

.order-card-title {
    font-weight: 800;
    margin-bottom: 8px
}

.cart-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f1f0
}

    .cart-line:last-child {
        border-bottom: 0
    }

.cart-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: #f5f7f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #dfe4e0;
    border-radius: 8px;
    overflow: hidden
}

    .qty-stepper button {
        border: 0;
        background: #fff;
        width: 30px;
        height: 30px;
        font-size: 18px
    }

    .qty-stepper span {
        min-width: 28px;
        text-align: center
    }

.btn-remove-line {
    border: 0;
    background: transparent;
    color: #999;
    font-size: 22px
}

.summary-card {
    padding: 18px
}

    .summary-card h5, .order-card h5, .checkout-card h5 {
        font-weight: 800;
        margin-bottom: 14px
    }

.summary-row, .summary-total {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0
}

.summary-total {
    border-top: 1px solid #e9ece9;
    margin-top: 6px;
    padding-top: 12px;
    font-size: 1.05rem
}

.summary-product {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f1f0
}

.sticky-lg-top {
    top: 88px
}

.checkout-card hr {
    border-color: #eef0ee;
    margin: 22px 0
}

.payment-option {
    display: block;
    border: 1px solid #e1e5e2;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer
}

.policy-check {
    font-size: .9rem;
    display: flex;
    gap: 8px
}

.order-list-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 15px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    color: inherit;
    text-decoration: none
}

    .order-list-card > div:first-child {
        flex: 1
    }

.status-pill {
    display: inline-flex;
    background: #eaf7ea;
    color: #24732b;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800
}

.order-arrow {
    font-size: 25px;
    color: #a0a6a2
}

.order-status-banner {
    background: #eff8ef;
    border: 1px solid #d8ecd8;
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px
}

.order-meta {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    margin: 0
}

    .order-meta dt {
        font-size: .8rem;
        color: #818984;
        font-weight: 500
    }

    .order-meta dd {
        margin: 0
    }

.help-card > a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    padding-top: 12px
}

.content-page {
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 18px;
    padding: 30px;
    max-width: 900px;
    margin: 15px auto
}

    .content-page h3 {
        margin-top: 25px;
        font-weight: 800
    }

    .content-page p, .content-page li {
        line-height: 1.7;
        color: #505852
    }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 20px
}

    .contact-grid > div {
        background: #f7f9f7;
        border-radius: 12px;
        padding: 16px
    }

.seller-card {
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 15px;
    padding: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    height: 100%
}

.seller-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaf7ea;
    color: #238b2c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px
}

.site-footer {
    background: #fff;
    border-top: 1px solid #e8ebe9;
    margin-top: 35px;
    padding: 34px 0 85px
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 35px
}

    .footer-main h6 {
        font-weight: 800
    }

    .footer-main a {
        display: block;
        color: #68716b;
        text-decoration: none;
        margin: 7px 0;
        font-size: .9rem
    }

    .footer-main p {
        color: #6b746e;
        max-width: 360px
    }

.footer-bottom {
    border-top: 1px solid #eef0ee;
    margin-top: 25px;
    padding-top: 15px;
    color: #8a928d;
    font-size: .8rem
}

.footer-brand {
    margin-bottom: 10px
}

.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #e5e8e5;
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -3px 15px rgba(0,0,0,.06)
}

    .mobile-bottom-nav a {
        color: #6c736e;
        text-decoration: none;
        text-align: center;
        font-size: 20px;
        position: relative
    }

    .mobile-bottom-nav small {
        display: block;
        font-size: 10px;
        font-weight: 600
    }

    .mobile-bottom-nav a:first-child {
        color: #238b2c
    }

    .mobile-bottom-nav b {
        position: absolute;
        background: #e53935;
        color: #fff;
        border-radius: 50%;
        font-size: 9px;
        min-width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        top: -3px
    }

.account-hero {
    background: linear-gradient(180deg,#fff3bf,#fff);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 16px
}

.account-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    box-shadow: 0 2px 12px rgba(0,0,0,.05)
}

.account-phone {
    color: #69716b
}

.account-shortcuts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 12px 0
}

    .account-shortcuts a {
        background: #fff;
        border: 1px solid #e8ebe9;
        border-radius: 15px;
        padding: 15px;
        text-align: center;
        color: inherit;
        text-decoration: none
    }

    .account-shortcuts span {
        display: block;
        font-size: 23px
    }

    .account-shortcuts strong {
        font-size: .85rem
    }

.account-section {
    background: #fff;
    border: 1px solid #e8ebe9;
    border-radius: 16px;
    overflow: hidden;
    margin: 12px 0
}

    .account-section h3 {
        font-size: 1rem;
        font-weight: 800;
        padding: 17px;
        margin: 0;
        border-bottom: 1px solid #eef0ee
    }

.account-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f0f1f0
}

    .account-list a:last-child {
        border-bottom: 0
    }

    .account-list a > span:nth-child(2) {
        flex: 1
    }

.account-list small {
    color: #9aa09c;
    font-size: 11px
}

.account-edit-card {
    margin: 15px 0
}

.future-row {
    color: #6c736e !important
}

@media(max-width:767.98px) {
    .store-nav {
        min-height: 58px;
        padding: 0 12px
    }

    .store-brand {
        font-size: 1rem
    }

    .brand-mark {
        width: 30px;
        height: 30px
    }

    .store-nav-actions {
        gap: 10px
    }

    .store-container {
        padding: 12px 10px 0
    }

    .store-hero {
        padding: 18px;
        border-radius: 15px
    }

        .store-hero h1 {
            font-size: 1.35rem
        }

    .hero-badge {
        display: none
    }

    .product-image-wrap {
        height: 150px
    }

    .product-card-body {
        padding: 10px
    }

        .product-card-body h3 {
            font-size: .86rem
        }

    .product-actions {
        grid-template-columns: 1fr;
        gap: 5px
    }

        .product-actions .btn {
            font-size: .78rem;
            padding: 7px
        }

    .page-heading h1, .order-detail-top h1, .content-page h1 {
        font-size: 1.45rem
    }

    .page-heading, .order-detail-top {
        align-items: flex-start
    }

        .page-heading .btn {
            font-size: .8rem
        }

    .cart-line {
        gap: 8px
    }

        .cart-line .qty-stepper {
            order: 4
        }

        .cart-line > .line-total {
            margin-left: auto
        }

        .cart-line .btn-remove-line {
            order: 5
        }

    .contact-grid, .footer-main {
        grid-template-columns: 1fr
    }

    .site-footer {
        padding-bottom: 90px
    }

    .account-shortcuts {
        gap: 7px
    }

        .account-shortcuts a {
            padding: 11px 5px
        }

    .account-hero {
        padding: 22px
    }

    .order-meta {
        grid-template-columns: 105px 1fr
    }

    .content-page {
        padding: 20px
    }

    .summary-card {
        margin-bottom: 12px
    }

    .pb-mobile-nav {
        padding-bottom: 8px
    }

    .footer-main {
        gap: 18px
    }

    .store-search-row {
        margin-top: 5px
    }
}

/* ===== Bhandaarbox Storefront Pro / 3D UI ===== */
.store-body {
    background: radial-gradient(circle at 10% 5%,#f2fff5 0,#f8faf8 30%,#f5f7f8 100%);
    color: #172033
}

.store-header {
    box-shadow: 0 6px 25px rgba(20,40,25,.05)
}

.brand-mark {
    background: linear-gradient(145deg,#24a64c,#14752d);
    box-shadow: 5px 6px 12px rgba(35,139,44,.22),inset 2px 2px 5px rgba(255,255,255,.5)
}

.store-search {
    border: 1px solid #e7ece8;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.03)
}

.cart-action {
    background: linear-gradient(135deg,#239c37,#187329);
    box-shadow: 0 7px 18px rgba(35,139,44,.2)
}

.store-container {
    max-width: 1320px;
    padding: 22px 20px 0
}

.store-hero-pro {
    position: relative;
    overflow: hidden;
    min-height: 255px;
    border-radius: 28px;
    padding: 36px 40px;
    background: linear-gradient(120deg,#f0fff3 0%,#fff 52%,#eff8ff 100%);
    border: 1px solid #e2eee5;
    box-shadow: 0 20px 55px rgba(35,77,48,.08);
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .store-hero-pro:before, .store-hero-pro:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(1px);
        opacity: .6
    }

    .store-hero-pro:before {
        width: 260px;
        height: 260px;
        right: 90px;
        top: -150px;
        background: radial-gradient(circle,#ccefd5,transparent 68%)
    }

    .store-hero-pro:after {
        width: 230px;
        height: 230px;
        left: -130px;
        bottom: -150px;
        background: radial-gradient(circle,#dceeff,transparent 68%)
    }

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 720px
}

    .hero-copy h1 {
        font-size: clamp(2rem,4vw,3.45rem);
        font-weight: 950;
        letter-spacing: -.055em;
        line-height: 1.02;
        margin: 8px 0 12px;
        color: #132239
    }

    .hero-copy p {
        font-size: 1rem;
        color: #6d7888;
        max-width: 620px
    }

.hero-trust {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 20px
}

    .hero-trust span {
        background: rgba(255,255,255,.85);
        border: 1px solid #e1ebe4;
        border-radius: 999px;
        padding: 8px 11px;
        font-size: .72rem;
        font-weight: 800;
        color: #46614e;
        box-shadow: 0 4px 12px rgba(0,0,0,.04)
    }

.hero-orb {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: linear-gradient(145deg,#fff,#dff4e4);
    box-shadow: 20px 25px 50px rgba(42,91,53,.18),inset -8px -8px 20px rgba(65,115,74,.08),inset 8px 8px 20px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.4rem;
    transform: perspective(500px) rotateY(-12deg) rotateX(8deg);
    animation: floatOrb 5s ease-in-out infinite;
    position: relative;
    z-index: 2
}

.orb-ring {
    position: absolute;
    inset: 15px;
    border: 1px solid rgba(35,139,44,.18);
    border-radius: 50%;
    transform: rotateX(70deg);
    box-shadow: 0 0 0 7px rgba(35,139,44,.04)
}

@keyframes floatOrb {
    50% {
        transform: perspective(500px) rotateY(7deg) rotateX(2deg) translateY(-7px)
    }
}

.store-search-pro {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #e2e8e3;
    border-radius: 17px;
    padding: 5px 6px 5px 15px;
    margin: 18px 0 13px;
    box-shadow: 0 12px 30px rgba(30,54,37,.06);
    max-width: 880px
}

    .store-search-pro > span {
        font-size: 1.35rem;
        color: #7e8980
    }

    .store-search-pro input {
        border: 0;
        outline: 0;
        flex: 1;
        padding: 11px;
        background: transparent;
        min-width: 0
    }

    .store-search-pro button {
        border: 0;
        background: #1e8c34;
        color: #fff;
        border-radius: 12px;
        padding: 10px 18px;
        font-weight: 800
    }

.category-strip-pro {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 3px 1px 12px;
    scrollbar-width: none
}

    .category-strip-pro::-webkit-scrollbar {
        display: none
    }

.category-chip-pro {
    background: #fff;
    border: 1px solid #dfe6e1;
    border-radius: 999px;
    padding: 9px 14px;
    color: #526056;
    text-decoration: none;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 750;
    box-shadow: 0 3px 10px rgba(0,0,0,.025)
}

    .category-chip-pro.active {
        background: #168331;
        color: #fff;
        border-color: #168331;
        box-shadow: 0 7px 17px rgba(22,131,49,.18)
    }

.product-grid-pro {
    --bs-gutter-y: 18px
}

.product-card-3d {
    height: 100%;
    background: rgba(255,255,255,.98);
    border: 1px solid #e4e9e5;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 32px rgba(27,48,33,.08),0 2px 4px rgba(0,0,0,.03);
    transition: transform .25s ease,box-shadow .25s ease;
    transform-style: preserve-3d
}

    .product-card-3d:hover {
        transform: perspective(900px) rotateX(1.5deg) rotateY(-1.5deg) translateY(-5px);
        box-shadow: 0 24px 48px rgba(27,48,33,.14),0 5px 10px rgba(0,0,0,.04)
    }

.product-image-pro {
    height: 205px;
    background: linear-gradient(145deg,#fbfcfb,#f0f5f1);
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none
}

.product-image-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(15px)
}

.product-image-pro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply
}

.product-placeholder-3d {
    font-size: 4rem;
    filter: drop-shadow(8px 12px 8px rgba(0,0,0,.12))
}

.offer-badge-pro {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #fff1bf;
    color: #a96508;
    border-radius: 9px;
    padding: 6px 9px;
    font-size: .68rem;
    font-weight: 950;
    box-shadow: 0 5px 12px rgba(140,100,0,.08)
}

.image-shine {
    position: absolute;
    inset: -50% 40% -50% -40%;
    background: linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
    transform: rotate(8deg);
    opacity: 0;
    transition: .3s
}

.product-card-3d:hover .image-shine {
    opacity: 1;
    animation: shine 1s ease
}

@keyframes shine {
    from {
        transform: translateX(-80%) rotate(8deg)
    }

    to {
        transform: translateX(180%) rotate(8deg)
    }
}

.product-content-pro {
    padding: 14px 14px 15px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.product-category-pro {
    font-size: .63rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #11927f
}

.product-name-pro {
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.23;
    color: #172033;
    text-decoration: none;
    margin: 5px 0 6px;
    min-height: 39px
}

.product-rating-pro {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .68rem;
    margin-bottom: 8px
}

    .product-rating-pro > span:first-child {
        background: #fff0c8;
        color: #a75a0b;
        border-radius: 7px;
        padding: 4px 6px;
        font-weight: 900
    }

    .product-rating-pro small {
        color: #8c96a2
    }

    .product-rating-pro .rating-new {
        background: #edf7ee;
        color: #2a7b39
    }

.product-price-pro {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 7px
}

    .product-price-pro strong {
        font-size: 1.45rem;
        font-weight: 950;
        color: #172033
    }

    .product-price-pro span {
        font-size: .82rem;
        color: #7d8693;
        text-decoration: line-through
    }

    .product-price-pro b {
        font-size: .78rem;
        color: #17813b
    }

.product-meta-pro {
    display: grid;
    gap: 3px;
    color: #6d7988;
    font-size: .7rem;
    margin-bottom: 12px
}

.product-actions-pro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto
}

    .product-actions-pro form {
        margin: 0
    }

.btn-add-cart, .btn-buy-now, .btn-soldout {
    width: 100%;
    border-radius: 13px;
    padding: 11px 8px;
    font-weight: 900;
    font-size: .82rem;
    transition: .2s
}

.btn-add-cart {
    background: #fff;
    border: 2px solid #159b91;
    color: #127d74
}

    .btn-add-cart:hover {
        background: #eefcf9;
        transform: translateY(-1px)
    }

.btn-buy-now {
    background: linear-gradient(135deg,#ff7a17,#f85a0b);
    border: 2px solid #f85a0b;
    color: #fff;
    box-shadow: 0 8px 18px rgba(248,90,11,.2)
}

    .btn-buy-now:hover {
        transform: translateY(-1px);
        box-shadow: 0 11px 23px rgba(248,90,11,.27)
    }

.btn-soldout {
    border: 1px solid #dfe4e0;
    background: #f2f4f2;
    color: #8a938d
}

.is-soldout {
    filter: saturate(.65);
    opacity: .75
}

.empty-state-pro {
    background: #fff;
    border: 1px dashed #d9e2dc;
    border-radius: 20px;
    text-align: center;
    padding: 70px 20px
}

    .empty-state-pro > div {
        font-size: 3.4rem
    }

.product-detail-pro {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 42px;
    align-items: center;
    padding: 22px 0
}

.product-detail-media {
    height: 560px;
    border-radius: 30px;
    background: linear-gradient(145deg,#fff,#edf5ef);
    border: 1px solid #e0e9e2;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 20px 25px 55px rgba(31,66,42,.11);
    transform-style: preserve-3d
}

    .product-detail-media img {
        width: 88%;
        height: 88%;
        object-fit: contain;
        mix-blend-mode: multiply;
        transform: translateZ(35px)
    }

    .product-detail-media > span {
        font-size: 8rem;
        filter: drop-shadow(12px 18px 10px rgba(0,0,0,.15))
    }

.product-detail-orbit {
    position: absolute;
    width: 70%;
    height: 24%;
    border: 1px solid rgba(31,139,70,.18);
    border-radius: 50%;
    transform: rotateX(65deg) translateZ(10px)
}

.product-detail-info h1 {
    font-size: clamp(2rem,4vw,3.1rem);
    font-weight: 950;
    letter-spacing: -.05em;
    margin: 6px 0 10px
}

.product-detail-seller {
    color: #15917f;
    font-weight: 800;
    margin-bottom: 18px
}

.product-detail-price {
    display: flex;
    align-items: baseline;
    gap: 11px
}

    .product-detail-price strong {
        font-size: 2.2rem;
        font-weight: 950
    }

    .product-detail-price del {
        color: #8a929c
    }

    .product-detail-price b {
        color: #18823d
    }

.detail-delivery {
    margin: 12px 0;
    color: #697586
}

.stock-live {
    display: inline-block;
    background: #e9f8ed;
    color: #197741;
    border-radius: 999px;
    padding: 8px 11px;
    font-size: .78rem;
    font-weight: 850
}

    .stock-live.out {
        background: #fff0f0;
        color: #a44040
    }

.detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0
}

    .detail-actions form {
        display: flex;
        gap: 8px
    }

    .detail-actions input {
        width: 82px;
        border: 1px solid #dce4de;
        border-radius: 12px;
        padding: 10px
    }

.detail-trust {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #e8ece9;
    padding-top: 17px
}

    .detail-trust span {
        font-size: .72rem;
        color: #687484;
        background: #f7faf8;
        border-radius: 999px;
        padding: 8px 10px
    }

.detail-description {
    margin-top: 24px
}

    .detail-description h3 {
        font-size: 1rem;
        font-weight: 900
    }

    .detail-description p {
        color: #687484;
        line-height: 1.7
    }

.account-page {
    max-width: 720px;
    margin: 0 auto
}

.account-hero-pro {
    background: linear-gradient(180deg,#ffe98b 0%,#fff8df 50%,#fff 100%);
    border-radius: 28px;
    padding: 24px 22px 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 40px rgba(110,92,27,.08)
}

.account-back {
    position: absolute;
    left: 15px;
    top: 15px
}

    .account-back a {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #28303c;
        font-size: 1.5rem;
        box-shadow: 0 5px 15px rgba(0,0,0,.07)
    }

.account-avatar-pro {
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(145deg,#fff,#f0f1f3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 950;
    color: #2c3037;
    box-shadow: 8px 12px 24px rgba(0,0,0,.12),inset 3px 3px 7px #fff
}

.account-identity h1 {
    font-size: 1.45rem;
    font-weight: 950;
    margin: 4px 0
}

.account-identity p {
    margin: 0;
    color: #727b87;
    font-size: .76rem
}

.account-shortcuts-pro {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin: -1px 0 12px
}

    .account-shortcuts-pro a {
        background: #fff;
        border: 1px solid #e6e9ed;
        border-radius: 17px;
        padding: 14px 8px;
        text-align: center;
        text-decoration: none;
        color: #242a33;
        box-shadow: 0 8px 22px rgba(29,39,52,.05)
    }

    .account-shortcuts-pro span {
        display: block;
        font-size: 1.45rem
    }

    .account-shortcuts-pro strong, .account-shortcuts-pro small {
        display: block
    }

    .account-shortcuts-pro strong {
        font-size: .78rem
    }

    .account-shortcuts-pro small {
        color: #9aa2ac;
        font-size: .62rem;
        margin-top: 2px
    }

.account-section-pro, .account-edit-pro {
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: 19px;
    margin: 11px 0;
    box-shadow: 0 8px 24px rgba(29,39,52,.04);
    overflow: hidden
}

.account-section-head {
    padding: 16px 17px;
    border-bottom: 1px solid #edf0f2;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .account-section-head h2 {
        font-size: 1rem;
        font-weight: 900;
        margin: 3px 0
    }

.account-list-pro a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f2f4;
    text-decoration: none;
    color: #252c35
}

    .account-list-pro a:last-child {
        border-bottom: 0
    }

    .account-list-pro a > b {
        font-size: 1.35rem;
        color: #b2b8c0
    }

.account-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #f4f7f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.account-list-pro a span:nth-child(2) {
    flex: 1
}

.account-list-pro strong, .account-list-pro small {
    display: block
}

.account-list-pro strong {
    font-size: .82rem
}

.account-list-pro small {
    color: #929aa5;
    font-size: .67rem;
    margin-top: 2px
}

.account-edit-pro {
    padding-bottom: 18px
}

    .account-edit-pro .account-section-head {
        margin-bottom: 17px
    }

    .account-edit-pro > .row, .account-edit-pro > button {
        margin-left: 16px;
        margin-right: 16px
    }

.secure-pill {
    font-size: .65rem;
    background: #edf8ef;
    color: #2d7b42;
    border-radius: 999px;
    padding: 6px 9px
}

.future-row {
    opacity: .72
}

.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.auth-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,#dff7e5,transparent 65%);
    filter: blur(10px)
}

.auth-card-pro {
    width: min(100%,460px);
    position: relative;
    background: rgba(255,255,255,.94);
    border: 1px solid #e2e8e4;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 25px 70px rgba(28,54,36,.12);
    text-align: center
}

.auth-logo-3d {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    margin: 0 auto 18px;
    background: linear-gradient(145deg,#32ad53,#13742d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 950;
    box-shadow: 12px 14px 25px rgba(24,115,45,.25),inset 3px 3px 7px rgba(255,255,255,.35);
    transform: perspective(160px) rotateX(7deg) rotateY(-7deg)
}

.auth-card-pro h1 {
    font-size: 1.55rem;
    font-weight: 950;
    margin: 5px 0
}

.auth-subtitle {
    font-size: .78rem;
    color: #7e8792;
    line-height: 1.55;
    margin-bottom: 22px
}

.floating-field {
    text-align: left;
    margin: 13px 0
}

    .floating-field label {
        font-size: .68rem;
        font-weight: 850;
        color: #5c6570;
        margin: 0 0 5px
    }

    .floating-field input {
        width: 100%;
        border: 1px solid #dde5df;
        border-radius: 13px;
        padding: 12px 13px;
        outline: 0;
        background: #fbfdfb
    }

        .floating-field input:focus {
            border-color: #39a257;
            box-shadow: 0 0 0 4px rgba(57,162,87,.1)
        }

.auth-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    font-size: .72rem
}

    .auth-links a {
        color: #24783a;
        text-decoration: none;
        font-weight: 800
    }

.auth-note {
    margin-top: 17px;
    padding: 10px;
    border-radius: 11px;
    background: #f5faf6;
    color: #79847c;
    font-size: .65rem
}

.payment-security-banner {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #f3faf5;
    border: 1px solid #dcefe0;
    border-radius: 13px;
    padding: 11px;
    margin: 0 0 13px
}

.payment-security-icon {
    font-size: 1.2rem
}

.payment-security-banner strong, .payment-security-banner small {
    display: block
}

.payment-security-banner strong {
    font-size: .8rem
}

.payment-security-banner small {
    color: #7c8780;
    font-size: .65rem;
    margin-top: 2px
}

.site-footer {
    background: linear-gradient(180deg,#fff,#f6faf7);
    padding-top: 45px
}

.footer-brand .brand-mark {
    margin-right: 4px
}

@media(max-width:767px) {
    .store-container {
        padding: 11px 9px 0
    }

    .store-hero-pro {
        min-height: 220px;
        padding: 23px 19px;
        border-radius: 21px
    }

    .hero-copy h1 {
        font-size: 1.8rem
    }

    .hero-copy p {
        font-size: .78rem
    }

    .hero-orb {
        width: 95px;
        height: 95px;
        font-size: 2.1rem;
        position: absolute;
        right: 13px;
        bottom: 13px
    }

    .hero-trust {
        padding-right: 80px
    }

        .hero-trust span {
            font-size: .59rem;
            padding: 6px 8px
        }

    .store-search-pro {
        margin: 11px 0 8px
    }

        .store-search-pro input {
            font-size: .78rem
        }

        .store-search-pro button {
            font-size: .7rem;
            padding: 9px 11px
        }

    .product-image-pro {
        height: 148px
    }

    .product-content-pro {
        padding: 10px
    }

    .product-name-pro {
        font-size: .83rem;
        min-height: 34px
    }

    .product-price-pro strong {
        font-size: 1.15rem
    }

    .product-price-pro span {
        font-size: .68rem
    }

    .product-price-pro b {
        font-size: .65rem
    }

    .product-meta-pro {
        font-size: .6rem
    }

    .product-actions-pro {
        gap: 5px
    }

    .btn-add-cart, .btn-buy-now {
        padding: 8px 4px;
        font-size: .67rem;
        border-radius: 10px
    }

    .product-rating-pro {
        font-size: .59rem
    }

    .product-detail-pro {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .product-detail-media {
        height: 340px;
        border-radius: 22px
    }

    .product-detail-info h1 {
        font-size: 1.9rem
    }

    .detail-actions {
        grid-template-columns: 1fr
    }

    .account-shortcuts-pro {
        gap: 6px
    }

        .account-shortcuts-pro a {
            padding: 12px 4px
        }

        .account-shortcuts-pro strong {
            font-size: .68rem
        }

        .account-shortcuts-pro small {
            font-size: .56rem
        }

    .auth-card-pro {
        padding: 26px 19px;
        border-radius: 23px
    }

    .auth-page {
        min-height: 76vh
    }
}

.order-line-pro {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #eef1ef
}

    .order-line-pro:last-child {
        border-bottom: 0
    }

    .order-line-pro .cart-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px
    }
/* Pro UI additions: favorites, payment redirect and premium depth */
.product-card-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .25s ease,box-shadow .25s ease
}

    .product-card-3d:hover {
        transform: translateY(-5px) rotateX(.5deg);
        box-shadow: 0 22px 45px rgba(18,55,45,.12)
    }

.favorite-btn-pro, .favorite-btn-detail {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 4;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    color: #52605a;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.1);
    transition: .2s
}

    .favorite-btn-pro:hover, .favorite-btn-detail:hover {
        transform: scale(1.08);
        color: #d63d58
    }

    .favorite-btn-pro.is-favorite, .favorite-btn-detail.is-favorite {
        color: #e33d5c;
        background: #fff4f6
    }

.favorite-btn-detail {
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px
}

.product-image-pro {
    position: relative
}

.payment-redirect-pro {
    max-width: 620px;
    margin: 70px auto;
    padding: 45px 30px;
    text-align: center;
    background: linear-gradient(145deg,#fff,#f4fbf8);
    border: 1px solid #dfece7;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(20,70,55,.12)
}

.payment-orb {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg,#0b9c87,#064d43);
    box-shadow: inset -8px -8px 16px rgba(0,0,0,.12),0 18px 30px rgba(0,128,108,.2);
    transform: perspective(400px) rotateX(8deg) rotateY(-8deg)
}

.payment-progress {
    height: 6px;
    border-radius: 99px;
    background: #e5eee9;
    overflow: hidden;
    margin: 25px auto 12px;
    max-width: 320px
}

    .payment-progress span {
        display: block;
        width: 70%;
        height: 100%;
        background: linear-gradient(90deg,#0a8d79,#25c4a9);
        animation: paymentProgress 1.8s ease-in-out infinite alternate
    }

@keyframes paymentProgress {
    from {
        transform: translateX(-60%)
    }

    to {
        transform: translateX(45%)
    }
}

.admin-note {
    background: linear-gradient(135deg,#f2f7ff,#f9fbff);
    border: 1px solid #dbe6f5;
    border-radius: 15px;
    padding: 15px;
    color: #596579;
    font-size: .82rem
}

    .admin-note strong {
        color: #244d84
    }

.payment-option-auto {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg,#f3fbf8,#fff);
    border-color: #b9ded5
}

    .payment-option-auto > div {
        display: flex;
        flex-direction: column;
        flex: 1
    }

    .payment-option-auto small {
        color: #75847e;
        margin-top: 2px
    }

.gateway-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0c8d78;
    box-shadow: 0 0 0 6px #e1f4ef
}

.auto-badge {
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .08em;
    color: #0a7b6b;
    background: #dff5ef;
    border-radius: 999px;
    padding: 5px 8px
}

/* Premium home page */
.home-hero-premium {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border-radius: 32px;
    padding: 58px 58px;
    background: radial-gradient(circle at 82% 42%,#e4f8ed 0,#f4fbf7 28%,transparent 52%),linear-gradient(135deg,#f5fff7,#fff 55%,#f3f8ff);
    border: 1px solid #dfece3;
    box-shadow: 0 25px 75px rgba(24,66,43,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px
}

    .home-hero-premium:before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        right: -190px;
        top: -160px;
        border: 1px solid rgba(21,139,92,.10);
        box-shadow: 0 0 0 35px rgba(21,139,92,.025),0 0 0 75px rgba(21,139,92,.02)
    }

.home-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 690px
}

.home-eyebrow, .section-kicker {
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .14em;
    color: #14816d
}

.home-hero-copy h1 {
    font-size: clamp(2.8rem,5vw,5.1rem);
    line-height: .98;
    letter-spacing: -.065em;
    color: #132237;
    font-weight: 950;
    margin: 13px 0 18px
}

    .home-hero-copy h1 em {
        font-style: normal;
        background: linear-gradient(90deg,#128a68,#238b2c);
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: transparent
    }

.home-hero-copy p {
    max-width: 630px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #687687;
    margin: 0
}

.home-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap
}

.home-primary-cta, .home-secondary-cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 900;
    font-size: .82rem
}

.home-primary-cta {
    background: #147d55;
    color: #fff;
    box-shadow: 0 12px 28px rgba(20,125,85,.20)
}

    .home-primary-cta span {
        font-size: 1.1rem
    }

.home-secondary-cta {
    background: #fff;
    color: #243329;
    border: 1px solid #dce7df
}

.home-trust-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 23px;
    color: #647269;
    font-size: .69rem;
    font-weight: 800
}

.home-hero-visual {
    width: 370px;
    height: 350px;
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle,#bfe8d1,transparent 68%);
    filter: blur(4px)
}

.hero-ring {
    position: absolute;
    border: 1px solid rgba(20,125,85,.16);
    border-radius: 50%;
    transform: rotateX(65deg)
}

.hero-ring-one {
    width: 290px;
    height: 110px
}

.hero-ring-two {
    width: 330px;
    height: 145px;
    transform: rotateX(65deg) rotateZ(18deg)
}

.hero-basket-3d {
    position: relative;
    width: 155px;
    height: 150px;
    z-index: 2;
    transform: perspective(500px) rotateX(5deg) rotateY(-8deg);
    animation: homeFloat 5s ease-in-out infinite
}

.basket-handle {
    position: absolute;
    left: 28px;
    top: -48px;
    width: 100px;
    height: 75px;
    border: 9px solid #16865d;
    border-bottom: 0;
    border-radius: 60px 60px 0 0;
    filter: drop-shadow(8px 12px 8px rgba(30,70,45,.13))
}

.basket-body {
    height: 115px;
    margin-top: 24px;
    border-radius: 18px 18px 32px 32px;
    background: linear-gradient(145deg,#35ad7b,#08744e);
    box-shadow: inset -15px -15px 25px rgba(0,0,0,.13),inset 8px 8px 20px rgba(255,255,255,.18),0 25px 35px rgba(20,90,58,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3.2rem
}

.floating-card {
    position: absolute;
    z-index: 4;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    border: 1px solid #e0ebe4;
    border-radius: 14px;
    padding: 11px 14px;
    box-shadow: 0 16px 35px rgba(35,65,48,.12);
    display: flex;
    flex-direction: column
}

    .floating-card strong {
        font-size: .9rem;
        color: #173528
    }

    .floating-card small {
        font-size: .62rem;
        color: #78857d
    }

.floating-card-top {
    right: 5px;
    top: 48px
}

.floating-card-bottom {
    left: 12px;
    bottom: 36px
}

.home-search-wrap {
    margin: 20px 0 6px
}

.home-search-pro {
    max-width: none;
    margin: 0;
    box-shadow: 0 16px 35px rgba(28,54,38,.08);
    padding: 6px 7px 6px 17px
}

    .home-search-pro button {
        padding: 11px 22px
    }

.home-search-hint {
    padding: 8px 5px;
    color: #89928c;
    font-size: .67rem
}

    .home-search-hint span {
        font-weight: 900;
        color: #4f6056
    }

.home-section {
    padding: 42px 0 6px
}

.home-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px
}

    .home-section-head h2 {
        font-size: 1.65rem;
        letter-spacing: -.035em;
        color: #172233;
        margin: 5px 0 0;
        font-weight: 900
    }

    .home-section-head > a {
        color: #16805f;
        text-decoration: none;
        font-size: .74rem;
        font-weight: 900;
        white-space: nowrap
    }

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 11px
}

.home-category-card {
    min-height: 125px;
    padding: 16px;
    background: linear-gradient(145deg,#fff,#f6faf7);
    border: 1px solid #e2eae4;
    border-radius: 18px;
    text-decoration: none;
    color: #26352d;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 8px 22px rgba(30,56,40,.05);
    transition: .22s
}

    .home-category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 30px rgba(30,56,40,.10)
    }

.category-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #e5f5eb;
    color: #16805f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    margin-bottom: auto
}

.home-category-card strong {
    font-size: .83rem;
    line-height: 1.2
}

.home-category-card small {
    font-size: .62rem;
    color: #8a948e;
    margin-top: 3px
}

.category-tone-1 .category-icon {
    background: #dff4ee
}

.home-feature-banner {
    margin-top: 44px;
    border-radius: 25px;
    padding: 29px 32px;
    background: linear-gradient(120deg,#102d24,#164f3b 60%,#176e54);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 20px 45px rgba(18,69,51,.16)
}

    .home-feature-banner .section-kicker {
        color: #8ee1bf
    }

    .home-feature-banner h2 {
        font-size: 1.65rem;
        max-width: 650px;
        line-height: 1.15;
        margin: 6px 0 8px;
        font-weight: 900;
        letter-spacing: -.035em
    }

    .home-feature-banner p {
        margin: 0;
        color: #b9d6cb;
        font-size: .78rem
    }

.feature-stat-stack {
    display: flex;
    gap: 9px;
    flex: none
}

    .feature-stat-stack div {
        min-width: 95px;
        padding: 13px 14px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 14px;
        background: rgba(255,255,255,.06);
        display: flex;
        flex-direction: column
    }

    .feature-stat-stack b {
        font-size: .66rem;
        color: #87dcb9
    }

    .feature-stat-stack span {
        font-size: .68rem;
        font-weight: 800;
        margin-top: 5px
    }

.home-product-grid {
    margin-top: 0
}

.home-values {
    padding: 48px 0 10px
}

.home-value-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px
}

    .home-value-grid article {
        background: #fff;
        border: 1px solid #e5ebe7;
        border-radius: 18px;
        padding: 19px;
        min-height: 175px;
        box-shadow: 0 8px 22px rgba(31,53,41,.04)
    }

.value-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #edf7f1;
    color: #16805f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900
}

.home-value-grid h3 {
    font-size: .91rem;
    font-weight: 900;
    margin: 13px 0 6px
}

.home-value-grid p {
    font-size: .7rem;
    line-height: 1.6;
    color: #77827b;
    margin: 0
}

.home-partner-banner {
    margin-top: 38px;
    border: 1px solid #dfe8e2;
    border-radius: 24px;
    padding: 27px 30px;
    background: linear-gradient(135deg,#f5fbf7,#fff);
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 14px 35px rgba(32,61,44,.06)
}

.partner-orb {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(145deg,#15845c,#0b553e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: inset -8px -8px 15px rgba(0,0,0,.12),0 12px 24px rgba(18,103,72,.18);
    flex: none
}

.partner-copy {
    flex: 1
}

    .partner-copy h2 {
        font-size: 1.35rem;
        margin: 4px 0
    }

    .partner-copy p {
        font-size: .72rem;
        color: #77827b;
        margin: 0
    }

.home-mission-strip {
    margin: 28px 0 35px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #f5f8f6;
    border: 1px solid #e5ebe6;
    display: flex;
    align-items: center;
    gap: 20px
}

    .home-mission-strip p {
        margin: 0;
        flex: 1;
        font-size: .86rem;
        font-weight: 750;
        color: #39483f
    }

    .home-mission-strip a {
        font-size: .7rem;
        font-weight: 900;
        color: #16805f;
        text-decoration: none;
        white-space: nowrap
    }

@keyframes homeFloat {
    50% {
        transform: perspective(500px) rotateX(8deg) rotateY(6deg) translateY(-8px)
    }
}

@media(max-width:991px) {
    .home-hero-premium {
        padding: 40px 32px
    }

    .home-hero-visual {
        width: 280px
    }

    .home-category-grid {
        grid-template-columns: repeat(4,1fr)
    }

    .home-value-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .feature-stat-stack {
        display: none
    }
}

@media(max-width:767px) {
    .home-hero-premium {
        min-height: 540px;
        padding: 28px 20px;
        border-radius: 22px;
        display: block
    }

    .home-hero-copy {
        max-width: none
    }

        .home-hero-copy h1 {
            font-size: 2.45rem
        }

        .home-hero-copy p {
            font-size: .8rem;
            line-height: 1.55;
            padding-right: 5px
        }

    .home-hero-actions {
        margin-top: 19px
    }

    .home-primary-cta, .home-secondary-cta {
        padding: 11px 13px;
        font-size: .68rem
    }

    .home-trust-row {
        gap: 8px;
        font-size: .57rem;
        margin-top: 17px
    }

    .home-hero-visual {
        position: absolute;
        width: 230px;
        height: 180px;
        right: 0;
        bottom: 4px
    }

    .hero-basket-3d {
        width: 105px;
        height: 100px
    }

    .basket-handle {
        left: 18px;
        top: -31px;
        width: 70px;
        height: 50px;
        border-width: 6px
    }

    .basket-body {
        height: 80px;
        font-size: 2.2rem;
        margin-top: 16px;
        border-radius: 13px 13px 22px 22px
    }

    .hero-ring-one {
        width: 200px;
        height: 70px
    }

    .hero-ring-two {
        width: 225px;
        height: 88px
    }

    .floating-card {
        padding: 7px 9px
    }

        .floating-card strong {
            font-size: .68rem
        }

        .floating-card small {
            font-size: .5rem
        }

    .floating-card-top {
        right: 3px;
        top: 8px
    }

    .floating-card-bottom {
        left: 0;
        bottom: 7px
    }

    .home-search-pro {
        margin-top: 10px
    }

        .home-search-pro input {
            font-size: .74rem
        }

        .home-search-pro button {
            font-size: .68rem;
            padding: 9px 12px
        }

    .home-section {
        padding-top: 30px
    }

    .home-section-head h2 {
        font-size: 1.25rem
    }

    .home-category-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 8px
    }

    .home-category-card {
        min-height: 112px;
        padding: 12px;
        border-radius: 15px
    }

    .category-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px
    }

    .home-feature-banner {
        margin-top: 30px;
        padding: 22px 18px;
        border-radius: 19px
    }

        .home-feature-banner h2 {
            font-size: 1.3rem
        }

    .home-values {
        padding-top: 30px
    }

    .home-value-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

        .home-value-grid article {
            min-height: 155px;
            padding: 14px;
            border-radius: 15px
        }

    .home-partner-banner {
        padding: 19px;
        border-radius: 19px;
        flex-wrap: wrap
    }

    .partner-orb {
        width: 50px;
        height: 50px;
        border-radius: 15px
    }

    .partner-copy {
        min-width: calc(100% - 70px)
    }

    .home-partner-banner .home-primary-cta {
        margin-left: 68px
    }

    .home-mission-strip {
        display: block;
        padding: 18px;
        margin-bottom: 22px
    }

        .home-mission-strip p {
            margin: 8px 0 12px;
            font-size: .75rem
        }

        .home-mission-strip a {
            font-size: .65rem
        }
}

/* BoatB AI assistant */
.store-top-tools {
    display: flex;
    align-items: center;
    order: 5;
    margin-left: auto;
    margin-right: 8px
}

.language-toggle {
    border: 1px solid #dce9e1;
    background: #fff;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: .66rem;
    font-weight: 950;
    color: #175d49;
    box-shadow: 0 5px 16px rgba(23,70,48,.06);
    cursor: pointer
}

.voice-search-btn {
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 1rem;
    cursor: pointer
}

    .voice-search-btn.voice-listening {
        background: #e8fff4;
        box-shadow: 0 0 0 4px rgba(22,128,95,.12);
        animation: voicePulse 1s infinite
    }

.voice-search-form {
    display: flex;
    align-items: center
}

    .voice-search-form input {
        flex: 1
    }

.category-anchor {
    display: block;
    position: relative;
    top: -15px
}

.home-category-card {
    position: relative;
    overflow: hidden
}

    .home-category-card:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(20,125,85,.0),rgba(20,125,85,.12));
        opacity: 0;
        transition: .22s;
        pointer-events: none
    }

    .home-category-card:hover:after {
        opacity: 1
    }

    .home-category-card:hover .category-icon {
        transform: translateY(-2px) scale(1.05)
    }

    .home-category-card:nth-child(2):hover {
        border-color: #22a6f2;
        box-shadow: 0 18px 36px rgba(34,166,242,.16)
    }

        .home-category-card:nth-child(2):hover .category-icon {
            background: #e5f5ff;
            color: #1889ca
        }

    .home-category-card:nth-child(3):hover {
        border-color: #f59e0b;
        box-shadow: 0 18px 36px rgba(245,158,11,.16)
    }

        .home-category-card:nth-child(3):hover .category-icon {
            background: #fff4db;
            color: #d97706
        }

    .home-category-card:nth-child(4):hover {
        border-color: #8b5cf6;
        box-shadow: 0 18px 36px rgba(139,92,246,.16)
    }

        .home-category-card:nth-child(4):hover .category-icon {
            background: #f1ebff;
            color: #7c3aed
        }

    .home-category-card:nth-child(5):hover {
        border-color: #ec4899;
        box-shadow: 0 18px 36px rgba(236,72,153,.16)
    }

        .home-category-card:nth-child(5):hover .category-icon {
            background: #fff0f7;
            color: #db2777
        }

    .home-category-card:nth-child(6):hover {
        border-color: #14b8a6;
        box-shadow: 0 18px 36px rgba(20,184,166,.16)
    }

        .home-category-card:nth-child(6):hover .category-icon {
            background: #e7fbf8;
            color: #0f9488
        }

    .home-category-card:nth-child(7):hover {
        border-color: #ef4444;
        box-shadow: 0 18px 36px rgba(239,68,68,.16)
    }

        .home-category-card:nth-child(7):hover .category-icon {
            background: #fff0f0;
            color: #dc2626
        }

    .home-category-card:nth-child(8):hover {
        border-color: #3b82f6;
        box-shadow: 0 18px 36px rgba(59,130,246,.16)
    }

        .home-category-card:nth-child(8):hover .category-icon {
            background: #edf4ff;
            color: #2563eb
        }

    .home-category-card:nth-child(9):hover {
        border-color: #84cc16;
        box-shadow: 0 18px 36px rgba(132,204,22,.16)
    }

        .home-category-card:nth-child(9):hover .category-icon {
            background: #f3fbdc;
            color: #65a30d
        }

.boatb-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200
}

.boatb-launcher {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 18px;
    padding: 8px 12px;
    background: linear-gradient(145deg,#102f28,#16805f);
    color: #fff;
    box-shadow: 0 18px 42px rgba(12,73,54,.28);
    cursor: pointer;
    transition: .25s
}

    .boatb-launcher:hover {
        transform: translateY(-3px) scale(1.02)
    }

.boatb-robot {
    position: relative;
    width: 43px;
    height: 39px;
    border-radius: 13px 13px 16px 16px;
    background: linear-gradient(145deg,#eafff8 0,#66ddb3 38%,#087653 100%);
    box-shadow: inset -7px -8px 13px rgba(0,0,0,.2),inset 5px 5px 10px rgba(255,255,255,.45),0 7px 16px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.6)
}

    .boatb-robot:before {
        content: "";
        position: absolute;
        left: 50%;
        top: -7px;
        width: 3px;
        height: 8px;
        background: #aaf4dc;
        transform: translateX(-50%);
        border-radius: 3px
    }

    .boatb-robot:after {
        content: "";
        position: absolute;
        left: 50%;
        top: -10px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #d6fff1;
        transform: translateX(-50%);
        box-shadow: 0 0 9px #8df0c9
    }

    .boatb-robot i {
        position: absolute;
        top: 14px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #102e27;
        box-shadow: 0 0 7px rgba(255,255,255,.8)
    }

        .boatb-robot i:first-child {
            left: 10px
        }

        .boatb-robot i:last-child {
            right: 10px
        }

.boatb-launcher strong {
    display: block;
    font-size: .78rem;
    text-align: left
}

.boatb-launcher small {
    display: block;
    font-size: .58rem;
    color: #bcefe0;
    text-align: left
}

.boatb-panel {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 340px;
    background: #fff;
    border: 1px solid #dceae2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(21,50,38,.22)
}

.boatb-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(120deg,#102f28,#147b59);
    color: #fff
}

    .boatb-head strong {
        display: block;
        font-size: .9rem
    }

    .boatb-head small {
        display: block;
        font-size: .6rem;
        color: #b9e9db
    }

    .boatb-head button {
        border: 0;
        background: rgba(255,255,255,.12);
        color: #fff;
        border-radius: 10px;
        font-size: 1.1rem;
        width: 30px;
        height: 30px
    }

.boatb-messages {
    height: 300px;
    overflow: auto;
    padding: 13px;
    background: linear-gradient(180deg,#f8fcfa,#fff)
}

.boatb-quick {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 7px 10px;
    background: #f7fbf9;
    border-top: 1px solid #edf2ef
}

    .boatb-quick button {
        border: 1px solid #d9e8e0;
        background: #fff;
        color: #28604d;
        border-radius: 999px;
        padding: 5px 8px;
        font-size: .57rem;
        font-weight: 850;
        cursor: pointer
    }

        .boatb-quick button:hover {
            background: #eaf8f1;
            border-color: #9dd7bf
        }

.boatb-message {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 13px;
    margin: 7px 0;
    font-size: .7rem;
    line-height: 1.5
}

    .boatb-message.bot {
        background: #edf7f1;
        color: #284438;
        border-bottom-left-radius: 4px
    }

    .boatb-message.user {
        margin-left: auto;
        background: #147d55;
        color: #fff;
        border-bottom-right-radius: 4px
    }

.boatb-link {
    display: inline-block;
    margin-top: 5px;
    color: inherit;
    font-weight: 900
}

.boatb-form {
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid #e8efeb;
    padding: 8px;
    background: #fff
}

    .boatb-form input {
        border: 0;
        outline: 0;
        flex: 1;
        font-size: .72rem;
        padding: 9px
    }

    .boatb-form > button:last-child {
        border: 0;
        background: #147d55;
        color: #fff;
        border-radius: 10px;
        width: 36px;
        height: 36px
    }

.language-toggle:hover {
    transform: translateY(-1px)
}

@keyframes voicePulse {
    50% {
        transform: scale(1.08)
    }
}

@media(max-width:767px) {
    .store-top-tools {
        position: absolute;
        right: 8px;
        top: 7px;
        margin: 0;
        z-index: 20
    }

    .language-toggle {
        padding: 5px 8px;
        font-size: .58rem
    }

    .boatb-widget {
        right: 12px;
        bottom: 78px
    }

    .boatb-launcher {
        border-radius: 16px;
        padding: 7px 9px
    }

    .boatb-robot {
        width: 39px;
        height: 36px
    }

        .boatb-robot i {
            top: 13px
        }

            .boatb-robot i:first-child {
                left: 9px
            }

            .boatb-robot i:last-child {
                right: 9px
            }

    .boatb-panel {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: 130px;
        width: auto
    }

    .boatb-messages {
        height: 260px
    }

    .mobile-search .voice-search-btn {
        padding: 6px
    }

    .store-nav {
        padding-right: 86px
    }

    .category-anchor {
        top: -80px
    }
}

/* VIP Shopping */
.vip-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px 100px
}

.vip-hero, .vip-preview-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px;
    border-radius: 30px;
    background: linear-gradient(135deg,#111827,#263246);
    color: #fff;
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
    margin-bottom: 22px
}

.vip-kicker {
    font-size: .75rem;
    letter-spacing: .14em;
    font-weight: 800;
    opacity: .8
}

.vip-hero h1, .vip-preview-hero h1 {
    font-size: clamp(2rem,5vw,4rem);
    margin: 8px 0
}

.vip-hero p, .vip-preview-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.76);
    margin: 0;
    line-height: 1.7
}

.vip-badge-3d {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    border-radius: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg,#f5d76e,#b77b18);
    box-shadow: inset 8px 8px 18px rgba(255,255,255,.3),inset -10px -12px 20px rgba(0,0,0,.25),0 25px 40px rgba(0,0,0,.3);
    transform: rotate(4deg)
}

    .vip-badge-3d span {
        font-size: 2.8rem;
        font-weight: 950;
        letter-spacing: .08em
    }

    .vip-badge-3d small {
        font-weight: 700
    }

.card-pro {
    background: #fff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 14px 45px rgba(15,23,42,.08);
    margin-bottom: 22px
}

.section-head-pro {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px
}

    .section-head-pro h2 {
        margin: 4px 0 0
    }

.vip-min {
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff8dc;
    color: #805d00
}

.vip-amount-input {
    display: flex;
    align-items: center;
    border: 1px solid #dce3e8;
    border-radius: 16px;
    padding: 4px 10px 4px 16px
}

    .vip-amount-input > span {
        font-size: 1.4rem;
        font-weight: 900
    }

    .vip-amount-input input {
        border: 0;
        box-shadow: none !important
    }

    .vip-amount-input b {
        white-space: nowrap;
        font-size: .75rem
    }

.vip-category-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    max-height: 310px;
    overflow: auto;
    padding-right: 4px
}

.vip-category-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e5e9ed;
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: .2s
}

    .vip-category-option:hover {
        border-color: #d3aa38;
        background: #fffaf0;
        transform: translateY(-2px)
    }

    .vip-category-option input {
        position: absolute;
        opacity: 0
    }

    .vip-category-option span {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        border: 1px solid #ccd4db;
        display: grid;
        place-items: center;
        color: transparent;
        font-size: .8rem
    }

    .vip-category-option input:checked ~ span {
        background: #111827;
        color: #fff;
        border-color: #111827
    }

    .vip-category-option input:checked ~ strong {
        color: #8a6200
    }

.vip-generate {
    border-radius: 14px;
    padding: 14px 22px;
    margin-top: 24px;
    font-weight: 800
}

.vip-alert {
    border-radius: 16px
}

.vip-preview-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(300px,.8fr);
    gap: 22px
}

.vip-target {
    min-width: 230px;
    text-align: right
}

    .vip-target small {
        display: block;
        opacity: .7;
        font-weight: 800
    }

    .vip-target strong {
        font-size: 2.5rem
    }

.vip-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid #edf0f2
}

    .vip-line:last-child {
        border-bottom: 0
    }

.vip-line-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f4f7f8;
    display: grid;
    place-items: center
}

.vip-line small {
    display: block;
    color: #66717b;
    margin-top: 3px
}

.vip-summary {
    height: max-content
}

    .vip-summary .summary-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #edf0f2
    }

    .vip-summary .summary-total {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 1.25rem;
        padding-top: 18px
    }

.vip-note {
    margin-top: 18px;
    padding: 13px;
    border-radius: 14px;
    background: #f6f8f9;
    color: #64707a;
    font-size: .85rem;
    line-height: 1.5
}

.vip-checkout-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: #fff8dc;
    border: 1px solid #f0d77a
}

    .vip-checkout-banner strong {
        color: #765700
    }

    .vip-checkout-banner small {
        color: #746b52
    }

.premium-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff0b3;
    color: #755800;
    font-size: .7rem;
    font-weight: 900;
    vertical-align: middle
}

.vip-account-row {
    background: linear-gradient(90deg,#fff9e7,#fff)
}

    .vip-account-row em {
        font-style: normal;
        font-size: .65rem;
        color: #8a6200;
        background: #fff0b3;
        padding: 3px 6px;
        border-radius: 999px;
        margin-left: 5px
    }

@media(max-width:768px) {
    .vip-page {
        padding: 16px 12px 90px
    }

    .vip-hero, .vip-preview-hero {
        padding: 24px;
        border-radius: 22px;
        align-items: flex-start
    }

    .vip-badge-3d {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        border-radius: 28px
    }

        .vip-badge-3d span {
            font-size: 1.6rem
        }

    .vip-category-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        max-height: none
    }

    .vip-preview-grid {
        grid-template-columns: 1fr
    }

    .vip-target {
        text-align: left;
        min-width: 0
    }

        .vip-target strong {
            font-size: 2rem
        }

    .section-head-pro {
        align-items: flex-start;
        flex-direction: column
    }

    .vip-min {
        align-self: flex-start
    }

    .card-pro {
        padding: 19px
    }

    .vip-hero p {
        font-size: .9rem
    }
}

.realtime-stamp {
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

    .realtime-stamp b {
        letter-spacing: .03em
    }

.seller-public-grid {
    margin-top: 8px
}

.seller-public-card {
    height: 100%;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    background: #fff;
    border: 1px solid #e1e9e4;
    border-radius: 18px;
    text-decoration: none;
    color: #203229;
    box-shadow: 0 10px 28px rgba(30,56,40,.05);
    transition: .2s
}

    .seller-public-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 17px 35px rgba(30,56,40,.10);
        border-color: #b9d9ca
    }

.seller-public-copy h5 {
    margin: 0 0 3px;
    font-weight: 900
}

.seller-public-copy small {
    color: #7a877f
}

.seller-public-copy p {
    font-size: .72rem;
    line-height: 1.45;
    color: #66746c;
    margin: 7px 0
}

.seller-public-copy span {
    font-size: .68rem;
    color: #147d55;
    font-weight: 900
}

.seller-public-page {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 70px
}

.seller-profile-hero {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg,#effaf4,#fff);
    border: 1px solid #dfeae3;
    box-shadow: 0 15px 40px rgba(30,56,40,.07)
}

    .seller-profile-hero h1 {
        margin: 5px 0 2px;
        font-size: 2rem;
        font-weight: 900
    }

    .seller-profile-hero p {
        margin: 0;
        color: #6d7b73
    }

.seller-avatar-xl {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.7rem !important
}

.seller-public-badge {
    display: inline-block;
    margin-top: 9px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e9f8ef;
    color: #1e7b46;
    font-size: .65rem;
    font-weight: 900
}

.seller-public-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px
}

    .seller-public-info-grid article {
        background: #fff;
        border: 1px solid #e3ebe5;
        border-radius: 17px;
        padding: 18px;
        box-shadow: 0 9px 24px rgba(30,56,40,.04)
    }

    .seller-public-info-grid span {
        display: block;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .62rem;
        font-weight: 900;
        color: #16805f
    }

    .seller-public-info-grid h3 {
        font-size: .95rem;
        line-height: 1.5;
        margin: 8px 0;
        color: #26362d
    }

    .seller-public-info-grid small {
        color: #7b867f;
        line-height: 1.5
    }

.seller-products-section {
    padding-top: 30px
}

@media(max-width:700px) {
    .seller-profile-hero {
        padding: 20px;
        border-radius: 18px
    }

        .seller-profile-hero h1 {
            font-size: 1.55rem
        }

    .seller-public-info-grid {
        grid-template-columns: 1fr
    }
}
/* Customer support */
.support-page {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 70px
}

.support-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 16px
}

.support-card {
    background: #fff;
    border: 1px solid #e2ebe5;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 13px 35px rgba(28,61,43,.06)
}

    .support-card h2 {
        font-size: 1.35rem;
        font-weight: 900;
        margin: 5px 0 18px
    }

.support-empty {
    padding: 35px 10px;
    text-align: center;
    color: #78847d
}

.support-ticket-card {
    border: 1px solid #e6ece8;
    border-radius: 15px;
    padding: 14px;
    margin-top: 10px;
    background: #fbfdfc
}

.support-ticket-head {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

    .support-ticket-head strong, .support-ticket-head small {
        display: block
    }

    .support-ticket-head small {
        color: #89948d;
        font-size: .65rem;
        margin-top: 3px
    }

.support-ticket-card > p {
    font-size: .78rem;
    line-height: 1.55;
    color: #46544c;
    margin: 12px 0
}

.support-status {
    display: inline-flex;
    align-items: center;
    height: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
    background: #edf2f5;
    color: #617080
}

    .support-status.open {
        background: #fff3d5;
        color: #8a6200
    }

    .support-status.answered {
        background: #e9f7ef;
        color: #24764a
    }

    .support-status.closed {
        background: #eef0f2;
        color: #68737d
    }

.support-response {
    padding: 12px;
    border-radius: 12px;
    background: #eff8f3;
    border: 1px solid #d9eee1
}

    .support-response b {
        font-size: .7rem;
        color: #20744a
    }

    .support-response p {
        margin: 5px 0;
        font-size: .75rem;
        line-height: 1.5
    }

    .support-response small {
        font-size: .62rem;
        color: #7a8a81
    }

.saved-address-grid, .saved-checkout-grid {
    display: grid;
    gap: 10px
}

.saved-address-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.saved-address-card {
    border: 1px solid #e2e9e5;
    border-radius: 16px;
    padding: 15px;
    background: #fff
}

    .saved-address-card.is-default {
        border-color: #91c8a9;
        box-shadow: 0 8px 20px rgba(27,112,73,.07)
    }

.saved-address-head {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.saved-address-label {
    display: block;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #16805f;
    font-weight: 900
}

    .saved-address-label b, .saved-checkout-card strong b {
        font-size: .55rem;
        background: #e8f7ed;
        color: #217448;
        border-radius: 999px;
        padding: 3px 6px;
        margin-left: 4px
    }

.saved-address-head strong {
    display: block;
    margin-top: 4px
}

.saved-address-icon {
    font-size: 1.2rem
}

.saved-address-card p {
    margin: 10px 0 4px;
    font-size: .76rem;
    line-height: 1.5
}

.saved-address-card small {
    display: block;
    color: #7d8982;
    font-size: .65rem
}

.saved-address-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px
}

.address-add-details {
    margin-top: 14px;
    border: 1px dashed #b9cfc1;
    border-radius: 15px;
    padding: 12px 15px;
    background: #fbfefc
}

    .address-add-details summary {
        cursor: pointer;
        font-weight: 900;
        color: #147d55;
        font-size: .8rem
    }

.address-form-pro {
    padding-top: 4px
}

.account-empty-pro {
    padding: 25px;
    color: #758078
}

.address-modal-pro {
    border: 0;
    border-radius: 20px;
    overflow: hidden
}

.saved-checkout-section {
    padding: 15px;
    border: 1px solid #e2e9e5;
    border-radius: 16px;
    background: #fbfefc
}

.saved-checkout-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.saved-checkout-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-top: 10px
}

.saved-checkout-card {
    display: flex;
    text-align: left;
    gap: 10px;
    border: 1px solid #dfe7e2;
    background: #fff;
    border-radius: 13px;
    padding: 12px;
    cursor: pointer
}

    .saved-checkout-card.is-selected {
        border-color: #75b890;
        background: #f3fbf6;
        box-shadow: 0 8px 20px rgba(31,114,73,.08)
    }

.saved-checkout-radio {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #cbd8d0;
    color: #fff;
    font-size: .7rem
}

.saved-checkout-card.is-selected .saved-checkout-radio {
    background: #147d55;
    border-color: #147d55
}

.saved-checkout-card strong, .saved-checkout-card small {
    display: block
}

.saved-checkout-card strong {
    font-size: .76rem
}

.saved-checkout-card small {
    font-size: .64rem;
    color: #7b8780;
    margin-top: 3px;
    line-height: 1.4
}

.new-address-choice {
    border: 1px dashed #9fc8af;
    background: #fff;
    color: #147d55;
    border-radius: 12px;
    padding: 10px 13px;
    margin-top: 10px;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer
}

.new-address-fields {
    padding-top: 5px
}

.section-divider {
    font-size: .62rem;
    letter-spacing: .1em;
    font-weight: 900;
    color: #16805f;
    border-bottom: 1px solid #e6ece8;
    padding: 14px 0 7px;
    margin-bottom: 11px
}

.seller-public-page + .site-footer {
}

@media(max-width:760px) {
    .support-grid, .saved-address-grid, .saved-checkout-grid {
        grid-template-columns: 1fr
    }

    .saved-checkout-head {
        align-items: flex-start;
        flex-direction: column
    }
}
/* =========================================
   BHANDAARBOX COMPACT CATEGORY (FINAL)
   ========================================= */

/* ---------- Desktop ---------- */

.home-category-visual-grid {
    display: grid;
    grid-template-columns: repeat(10,minmax(0,1fr));
    gap: 14px;
    align-items: start;
}

.home-category-visual-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none !important;
    color: #222 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: transform .18s ease;
}

    .home-category-visual-card:hover {
        transform: translateY(-2px);
        text-decoration: none;
    }

/* ---------- Square Image ---------- */

.category-visual-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
}

.category-square-thumb {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    background: #EEF4F7;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .category-square-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        padding: 4px;
        display: block;
        transition: transform .25s ease;
    }

.home-category-visual-card:hover .category-square-thumb img {
    transform: scale(1.08);
}

/* ---------- Category Name ---------- */

.category-title {
    width: 100%;
    text-align: center;
}

    .category-title strong {
        color: #222 !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        min-height: 36px;
    }

/* Force black links */

.home-category-visual-card,
.home-category-visual-card:link,
.home-category-visual-card:visited {
    color: #222 !important;
}

    .home-category-visual-card strong {
        color: #222 !important;
    }

    /* Hide subtitle */

    .home-category-visual-card small {
        display: none !important;
    }

/* ---------- Laptop ---------- */

@media (max-width:1400px) {

    .home-category-visual-grid {
        grid-template-columns: repeat(8,minmax(0,1fr));
    }
}

/* ---------- Tablet ---------- */

@media (max-width:991px) {

    .home-category-visual-grid {
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: 14px 12px;
    }

    .category-visual-image,
    .category-square-thumb {
        width: 72px;
        height: 72px;
    }

    .category-title strong {
        font-size: 13px;
        min-height: 34px;
    }
}

/* ---------- Mobile ---------- */

@media only screen and (max-width:767px) {

    .home-category-visual-grid {
        display: grid !important;
        grid-template-columns: repeat(3,1fr) !important;
        gap: 18px 10px !important;
    }

    .home-category-visual-card {
        width: 100%;
        align-items: center;
        gap: 6px;
    }

    .category-visual-image,
    .category-square-thumb {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

        .category-square-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            padding: 3px;
        }

    .category-title strong {
        color: #222 !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        min-height: 32px;
        -webkit-line-clamp: 2;
    }
}
/* Compact storefront density: keep the first viewport useful without removing content. */
.store-container {
    max-width: 1320px;
    margin: 0 auto
}

.home-hero-premium {
    min-height: 390px;
    padding: 42px 48px
}

.home-section {
    padding: 30px 0 4px
}

.home-feature-banner {
    margin-top: 30px
}

.home-values {
    padding: 34px 0 8px
}

.product-card-3d {
    border-radius: 18px
}

.product-image-pro {
    height: 205px
}

.product-content-pro {
    padding: 12px 14px 14px
}

.product-name-pro {
    font-size: .93rem
}

.product-price-pro strong {
    font-size: 1.28rem
}

.product-meta-pro {
    font-size: .6rem
}

.product-actions-pro {
    gap: 7px
}

    .product-actions-pro button {
        padding: 10px 8px;
        font-size: .68rem
    }

.site-footer {
    padding-top: 28px
}

@media(max-width:767px) {
    .home-hero-premium {
        min-height: 470px;
        padding: 26px 18px
    }

    .product-image-pro {
        height: 170px
    }

    .product-content-pro {
        padding: 10px 11px 12px
    }

    .product-price-pro strong {
        font-size: 1.08rem
    }

    .home-section {
        padding-top: 23px
    }
}

.product-detail-seller a {
    color: inherit;
    text-decoration: none;
    font-weight: 900
}

    .product-detail-seller a:hover {
        text-decoration: underline
    }

.seller-policy-mini {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #e0e9e3;
    border-radius: 15px;
    background: #f8fcf9
}

    .seller-policy-mini strong {
        display: block;
        font-size: .78rem
    }

    .seller-policy-mini p {
        margin: 5px 0;
        font-size: .72rem;
        color: #5e6d63;
        line-height: 1.45
    }

    .seller-policy-mini small {
        display: block;
        color: #6f7d74;
        font-size: .67rem;
        line-height: 1.45
    }

    .seller-policy-mini a {
        display: inline-block;
        margin-top: 8px;
        color: #147d55;
        font-size: .67rem;
        font-weight: 900;
        text-decoration: none
    }
/* 2026 storefront refresh: colourful, product-first and compact on mobile. */
.store-body {
    background: linear-gradient(180deg,#fffaf2 0,#fff 28%,#f8fcff 100%);
    color: #26312b
}

.store-header .navbar {
    background: linear-gradient(90deg,#fff 0,#fff9ef 48%,#f3fbff 100%) !important
}

.brand-mark {
    background: linear-gradient(135deg,#ff7a00,#ffb000);
    box-shadow: 0 8px 18px rgba(255,122,0,.24)
}

.cart-action {
    background: linear-gradient(135deg,#ff6b00,#f59e0b)
}

.home-hero-market {
    position: relative;
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 315px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(120deg,#fff8e8,#f8fff8 55%,#edf8ff);
    border: 1px solid #f1dfc3;
    box-shadow: 0 18px 48px rgba(66,70,38,.09);
    margin-bottom: 14px
}

.home-hero-market-copy {
    position: relative;
    z-index: 2;
    padding: 36px 18px 28px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

    .home-hero-market-copy h1 {
        font-size: clamp(1.8rem,3.6vw,3.2rem);
        line-height: 1.02;
        font-weight: 950;
        margin: 7px 0 10px;
        color: #24362b
    }

        .home-hero-market-copy h1 em {
            font-style: normal;
            color: #ed6b00
        }

    .home-hero-market-copy p {
        max-width: 470px;
        color: #68746c;
        line-height: 1.55;
        margin: 0 0 16px;
        font-size: .9rem
    }

.home-hero-market-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.home-hero-market-art {
    min-height: 315px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end
}

    .home-hero-market-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 72% center;
        display: block
    }

.compact-home-search {
    margin: 0 0 10px
}

    .compact-home-search .home-search-pro {
        max-width: none;
        padding: 2px 4px
    }

.compact-live-section {
    padding-top: 14px !important
}

.compact-product-card {
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(30,55,40,.06);
    border-color: #e8ece7
}

.compact-product-image {
    height: 145px !important
}

.compact-product-content {
    padding: 8px 10px 10px !important
}

    .compact-product-content .product-name-pro {
        font-size: .78rem;
        line-height: 1.2;
        min-height: 29px
    }

    .compact-product-content .product-price-pro {
        margin: 4px 0
    }

        .compact-product-content .product-price-pro strong {
            font-size: 1rem
        }

.compact-product-unit {
    font-size: .58rem;
    color: #8a958e
}

.compact-product-actions {
    gap: 4px !important;
    margin-top: 6px !important
}

    .compact-product-actions button {
        padding: 7px 4px !important;
        font-size: .58rem !important;
        border-radius: 8px !important
    }

.compact-feature-banner {
    margin-top: 22px !important
}

.home-mission-strip {
    margin-top: 18px
}

.site-footer {
    background: #fffdf8
}

.mobile-bottom-nav {
    background: rgba(255,253,248,.98);
    border-top-color: #f0dfc7
}

    .mobile-bottom-nav a:first-child {
        color: #ed6b00
    }

    .mobile-bottom-nav a:nth-child(2) {
        color: #2478d8
    }

    .mobile-bottom-nav a:nth-child(3) {
        color: #ef6c00
    }

    .mobile-bottom-nav a:nth-child(4) {
        color: #16a06a
    }

    .mobile-bottom-nav a:nth-child(5) {
        color: #7c4bd1
    }

.required-star {
    color: #d93025;
    font-weight: 950;
    margin-left: 2px
}

.form-label .required-star {
    font-size: .95em
}

.field-required-star {
    color: #d93025;
    font-weight: 950
}

@media(max-width:767px) {
    .store-container {
        padding: 8px 8px 0
    }

    .home-hero-market {
        grid-template-columns: 47% 53%;
        min-height: 165px;
        height: 165px;
        border-radius: 18px;
        margin-bottom: 8px
    }

    .home-hero-market-copy {
        padding: 13px 4px 13px 14px
    }

        .home-hero-market-copy .home-eyebrow {
            font-size: .46rem;
            letter-spacing: .07em
        }

        .home-hero-market-copy h1 {
            font-size: 1.18rem;
            line-height: 1.03;
            margin: 4px 0 5px
        }

        .home-hero-market-copy p {
            font-size: .57rem;
            line-height: 1.3;
            margin: 0 0 7px;
            max-width: 185px
        }

    .home-hero-market-actions {
        gap: 4px
    }

        .home-hero-market-actions .home-primary-cta, .home-hero-market-actions .home-secondary-cta {
            padding: 6px 8px;
            font-size: .56rem;
            border-radius: 8px
        }

    .home-hero-market-art {
        min-height: 165px
    }

        .home-hero-market-art img {
            object-position: 76% center
        }

    .compact-home-search {
        margin-bottom: 3px
    }

        .compact-home-search .home-search-pro {
            border-radius: 10px;
            min-height: 38px
        }

            .compact-home-search .home-search-pro input {
                font-size: .68rem;
                padding: 8px
            }

            .compact-home-search .home-search-pro button {
                font-size: .62rem;
                padding: 7px 9px
            }

    .compact-live-section {
        padding-top: 10px !important
    }

        .compact-live-section .home-section-head {
            margin-bottom: 6px
        }

            .compact-live-section .home-section-head h2 {
                font-size: 1rem
            }

            .compact-live-section .home-section-head .section-kicker {
                font-size: .52rem
            }

    .compact-product-image {
        height: 106px !important
    }

    .compact-product-content .product-category-pro {
        display: none
    }

    .compact-product-content .product-name-pro {
        font-size: .68rem;
        min-height: 25px
    }

    .compact-product-content .product-price-pro strong {
        font-size: .9rem
    }

    .compact-product-content .product-price-pro span {
        font-size: .55rem
    }

    .compact-product-content .product-actions-pro button {
        font-size: .52rem !important;
        padding: 6px 3px !important
    }

    .compact-product-card .favorite-btn-pro {
        width: 25px;
        height: 25px;
        font-size: .85rem
    }

    .home-category-visual-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px
    }

    .category-visual-image {
        height: 65px
    }

    .home-category-visual-card {
        padding: 7px
    }

        .home-category-visual-card strong {
            font-size: .68rem
        }

        .home-category-visual-card small {
            font-size: .54rem
        }

    .compact-feature-banner {
        padding: 16px !important
    }

    .pb-mobile-nav {
        padding-bottom: 70px
    }

    .boatb-widget {
        right: 9px;
        bottom: 74px
    }

    .boatb-launcher {
        max-width: 145px
    }

        .boatb-launcher span:last-child {
            display: none
        }

        .boatb-launcher .boatb-robot {
            width: 36px;
            height: 33px
        }

    .boatb-panel {
        bottom: 118px;
        max-height: calc(100vh - 150px)
    }

    .boatb-messages {
        height: 220px
    }

    .boatb-form input {
        font-size: .75rem
    }

    .site-footer {
        padding-bottom: 78px
    }
}

.boatb-avatar {
    width: 39px;
    height: 39px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#fff1df,#ffb45d);
    font-size: 1.2rem;
    box-shadow: inset 0 2px 6px rgba(255,255,255,.8),0 5px 13px rgba(0,0,0,.12)
}

@media(max-width:767px) {
    .boatb-avatar {
        width: 36px;
        height: 33px;
        font-size: 1rem
    }
}

/* 2026-09-22 targeted UX refresh: account setup, search suggestions, category artwork, compact mobile layout. */
.store-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

    .store-brand > span:last-child small {
        font-size: .58rem;
        font-weight: 600;
        color: #7a837d;
        margin-top: 3px
    }

.header-search-shell {
    position: relative;
    width: min(620px,46vw);
    margin-left: 24px
}

    .header-search-shell .store-search {
        width: 100%;
        margin-left: 0
    }

.language-toggle {
    border: 1px solid #e5e7e5;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 800;
    color: #27312b;
    white-space: nowrap
}

.search-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 7px);
    background: #fff;
    border: 1px solid #e1e7e2;
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(28,52,39,.16);
    overflow: hidden;
    display: none;
    z-index: 120
}

    .search-suggestions.is-open {
        display: block
    }

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    text-decoration: none;
    color: #24302a;
    border-bottom: 1px solid #f0f3f1
}

    .search-suggestion-item:last-child {
        border-bottom: 0
    }

    .search-suggestion-item:hover {
        background: #f4faf6
    }

    .search-suggestion-item img {
        width: 42px;
        height: 42px;
        border-radius: 9px;
        object-fit: cover;
        background: #f5f7f5;
        border: 1px solid #edf0ed
    }

.search-suggestion-text {
    min-width: 0;
    display: flex;
    flex-direction: column
}

    .search-suggestion-text strong {
        font-size: .82rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .search-suggestion-text small {
        font-size: .64rem;
        color: #7d8982;
        margin-top: 2px
    }

.mobile-search-shell {
    position: relative
}

    .mobile-search-shell .search-suggestions {
        top: calc(100% + 4px);
        left: 0;
        right: 0
    }

.home-slogan {
    display: inline-block;
    color: #ed6b00;
    font-size: clamp(1rem,2vw,1.45rem);
    font-weight: 950;
    letter-spacing: -.02em;
    margin: 0 0 10px
}

    .home-slogan::after {
        content: '';
        display: block;
        height: 3px;
        width: 72px;
        background: #ff8a00;
        border-radius: 99px;
        margin-top: 4px
    }

.discount-inline {
    font-size: .58rem !important;
    color: #16805f !important;
    background: #e9f8ef;
    padding: 3px 5px;
    border-radius: 5px;
    margin-left: 5px;
    vertical-align: middle;
    white-space: nowrap
}

.search-results-section {
    padding-top: 8px !important
}

    .search-results-section .product-grid-pro {
        margin-top: 0
    }

@media(max-width:767px) {
    .store-nav {
        min-height: 52px;
        padding: 0 9px
    }

    .store-brand {
        font-size: .88rem;
        gap: 6px
    }

    .brand-mark {
        width: 29px;
        height: 29px;
        border-radius: 9px
    }

    .store-brand > span:last-child small {
        font-size: .47rem
    }

    .store-nav-actions {
        gap: 7px
    }

    .language-toggle {
        padding: 6px 8px;
        font-size: .68rem;
        border-radius: 8px
    }

    .cart-action {
        padding: 7px 9px;
        border-radius: 9px;
        font-size: .72rem
    }

    .mobile-search {
        padding: 5px 8px
    }

        .mobile-search form {
            min-height: 36px;
            border-radius: 10px
        }

        .mobile-search input {
            padding: 8px;
            font-size: .72rem
        }

        .mobile-search button {
            padding: 0 9px
        }

    .home-slogan {
        font-size: .76rem;
        margin-bottom: 5px
    }

        .home-slogan::after {
            height: 2px;
            width: 48px;
            margin-top: 2px
        }

    .home-hero-market {
        min-height: 145px;
        height: 145px
    }

    .home-hero-market-art {
        min-height: 145px
    }

    .home-hero-market-copy h1 {
        font-size: 1.05rem
    }

    .home-hero-market-copy p {
        font-size: .52rem;
        line-height: 1.25
    }

    .compact-product-image {
        height: 96px !important
    }

    .compact-product-content {
        padding: 7px 8px 8px !important
    }

        .compact-product-content .product-price-pro {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 3px
        }

            .compact-product-content .product-price-pro strong {
                font-size: .86rem
            }

    .discount-inline {
        font-size: .48rem !important;
        padding: 2px 4px
    }

    .compact-product-actions button {
        padding: 5px 2px !important;
        font-size: .48rem !important
    }

    .search-suggestion-item {
        padding: 8px
    }

        .search-suggestion-item img {
            width: 38px;
            height: 38px
        }

    .search-suggestion-text strong {
        font-size: .72rem
    }

    .search-suggestion-text small {
        font-size: .56rem
    }

    .search-results-section .home-section-head h2 {
        font-size: .9rem
    }
}

.home-search-shell {
    position: relative
}

    .home-search-shell .home-search-pro {
        max-width: none
    }

.home-search-suggestions {
    top: calc(100% + 5px)
}

/* =========================================================
   BhandaarBox storefront UI polish — 2026-09-23
   Presentation-only overrides. Checkout/cart/payment behaviour is untouched.
   ========================================================= */
:root {
    --bb-orange: #ff6b00;
    --bb-orange-2: #ff8a00;
    --bb-black: #171717;
    --bb-green: #16805f;
    --bb-soft: #f7f9f7;
}

/* Header / wordmark */
.store-nav {
    gap: 18px;
    padding-left: 20px;
    padding-right: 20px;
    background: #fff !important
}

.store-brand {
    gap: 10px;
    min-width: 190px
}

.brand-mark {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9ece9;
    box-shadow: 0 6px 16px rgba(20,25,20,.08);
    overflow: hidden;
    flex: none
}

    .brand-mark b, .brand-mark i {
        position: absolute;
        font-style: normal;
        font-weight: 1000;
        line-height: 1;
        font-size: 27px;
        letter-spacing: -.16em
    }

    .brand-mark b {
        left: 7px;
        top: 7px;
        color: var(--bb-black);
        z-index: 2
    }

    .brand-mark i {
        left: 13px;
        top: 13px;
        color: var(--bb-orange);
        z-index: 1
    }

.brand-wordmark > strong {
    display: flex;
    gap: 0;
    font-size: 1.13rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.04em
}

    .brand-wordmark > strong span:first-child {
        color: var(--bb-orange)
    }

    .brand-wordmark > strong span:last-child {
        color: var(--bb-black)
    }

.brand-wordmark small {
    display: block;
    color: #7a837d;
    font-size: .55rem;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: .02em
}

.header-commerce-tools {
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0
}

.header-search-shell {
    width: min(620px,100%);
    margin-left: 0;
    flex: 1;
    min-width: 180px
}

.store-search {
    width: 100%;
    margin-left: 0;
    background: #f6f7f6;
    border: 1px solid #e7eae7;
    border-radius: 12px;
    padding: 0 4px 0 13px;
    height: 46px;
    box-sizing: border-box
}

    .store-search:focus-within {
        background: #fff;
        border-color: #ffc28e;
        box-shadow: 0 0 0 3px rgba(255,107,0,.08)
    }

    .store-search input {
        font-size: .83rem
    }

.header-search-submit {
    width: 50px;
    height: 42px;
    border: 0 !important;
    border-radius: 9px;
    background: var(--bb-orange) !important;
    color: #fff !important;
    font-size: 22px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.category-menu {
    flex: none
}

.category-menu-trigger {
    height: 46px;
    min-width: 164px;
    border: 1px solid #e4e8e4 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #252a27 !important;
    font-size: .78rem;
    font-weight: 800;
    padding: 0 12px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 8px
}

    .category-menu-trigger::after {
        margin-left: auto
    }

    .category-menu-trigger:hover, .category-menu.show .category-menu-trigger {
        border-color: #ffc28e !important;
        background: #fffaf5 !important
    }

.category-menu-icon {
    font-size: 17px;
    color: var(--bb-orange);
    font-weight: 950
}

.category-mega-menu {
    width: min(900px,calc(100vw - 36px));
    padding: 14px !important;
    border: 1px solid #e7ebe8 !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(24,35,28,.16) !important;
    margin-top: 7px !important
}

.category-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 11px;
    border-bottom: 1px solid #eef1ef;
    margin-bottom: 10px
}

    .category-mega-head strong {
        display: block;
        font-size: .9rem;
        color: #17231d
    }

    .category-mega-head small {
        display: block;
        color: #8a948e;
        font-size: .64rem;
        margin-top: 2px
    }

    .category-mega-head > a {
        color: var(--bb-orange);
        font-size: .68rem;
        font-weight: 900;
        text-decoration: none
    }

.category-mega-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding-right: 2px
}

.category-mega-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px;
    border-radius: 12px;
    text-decoration: none;
    color: #27322c;
    border: 1px solid transparent;
    transition: .16s ease
}

    .category-mega-item:hover {
        background: #fff8f1;
        border-color: #ffe0c2;
        color: #111
    }

.category-mega-image {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f2f7f3;
    flex: none;
    color: var(--bb-green);
    font-weight: 900
}

    .category-mega-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.category-mega-name {
    font-size: .67rem;
    line-height: 1.18;
    font-weight: 800;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.mobile-category-trigger {
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-direction: column;
    color: #27312b;
    text-decoration: none;
    font-size: 17px;
    line-height: 1
}

    .mobile-category-trigger small {
        font-size: 8px;
        font-weight: 800;
        color: #707a74
    }

/* Compact product-first desktop grid */
@media(min-width:1200px) {
    .home-product-grid {
        --bs-gutter-x: .55rem;
        --bs-gutter-y: .55rem
    }

        .home-product-grid > .col-xl-3 {
            width: 16.66666667%;
            flex: 0 0 auto
        }

        .home-product-grid .compact-product-image {
            height: 132px !important
        }
}

@media(min-width:992px) and (max-width:1199.98px) {
    .home-product-grid {
        --bs-gutter-x: .65rem;
        --bs-gutter-y: .65rem
    }

        .home-product-grid > .col-md-4 {
            width: 25%;
            flex: 0 0 auto
        }
}

.compact-product-card {
    box-shadow: 0 3px 12px rgba(30,55,40,.055) !important
}

    .compact-product-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 9px 22px rgba(30,55,40,.10) !important
    }

.compact-product-content {
    min-height: 142px
}

.compact-product-actions {
    align-items: stretch !important;
    min-height: 31px
}

    .compact-product-actions form {
        display: flex;
        min-width: 0
    }

    .compact-product-actions button {
        height: 100%;
        min-height: 30px;
        line-height: 1.05;
        display: flex;
        align-items: center;
        justify-content: center
    }

/* Home hero: approximately half viewport on desktop, compact on phones */
.home-hero-market {
    min-height: 50vh;
    height: min(520px,50vh);
    margin-bottom: 10px
}

.home-hero-market-copy {
    padding-left: 34px
}

.home-hero-market-art {
    min-height: 0;
    height: 100%
}

    .home-hero-market-art img {
        object-fit: cover
    }

/* Remove the old second search area completely if any cached markup remains */
.compact-home-search {
    display: none !important
}

/* Shared company / policy pages */
.bb-company-page, .bb-about-page, .bb-policy-page {
    padding: 8px 0 30px
}

    .bb-company-page .content-page, .bb-about-page .content-page, .bb-policy-page .content-page {
        max-width: 1080px
    }

.bb-policy-hero {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    gap: 24px;
    padding: 30px;
    border-radius: 24px;
    background: linear-gradient(120deg,#fff8ef,#fff 52%,#f2f8ff);
    border: 1px solid #eee7de;
    box-shadow: 0 12px 32px rgba(30,45,35,.05);
    margin-bottom: 18px
}

    .bb-policy-hero h1 {
        font-size: clamp(1.8rem,4vw,2.8rem);
        font-weight: 950;
        letter-spacing: -.045em;
        color: #18241d;
        margin: 7px 0 9px
    }

        .bb-policy-hero h1 span {
            color: var(--bb-orange)
        }

    .bb-policy-hero p {
        max-width: 680px;
        margin: 0;
        color: #69756d;
        line-height: 1.65;
        font-size: .9rem
    }

.bb-policy-hero-art {
    min-height: 155px;
    border-radius: 20px;
    background: linear-gradient(145deg,#fff,#f3f7f4);
    display: grid;
    place-items: center;
    font-size: 5rem;
    box-shadow: inset 0 0 0 1px #e7eee9
}

.bb-policy-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin: 12px 0 18px
}

.bb-policy-card {
    background: #fff;
    border: 1px solid #e5ebe7;
    border-radius: 17px;
    padding: 18px;
    box-shadow: 0 7px 20px rgba(30,55,40,.045)
}

    .bb-policy-card .icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #fff1e5;
        color: var(--bb-orange);
        display: grid;
        place-items: center;
        font-size: 18px;
        margin-bottom: 11px
    }

    .bb-policy-card h3 {
        font-size: .9rem;
        font-weight: 900;
        margin: 0 0 5px;
        color: #1b2921
    }

    .bb-policy-card p {
        font-size: .72rem;
        line-height: 1.6;
        color: #738078;
        margin: 0
    }

.bb-policy-body {
    background: #fff;
    border: 1px solid #e5ebe7;
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 8px 24px rgba(30,55,40,.04)
}

    .bb-policy-body h2 {
        font-size: 1.12rem;
        font-weight: 900;
        margin: 22px 0 7px;
        color: #18241d
    }

        .bb-policy-body h2:first-child {
            margin-top: 0
        }

    .bb-policy-body p, .bb-policy-body li {
        font-size: .78rem;
        line-height: 1.75;
        color: #5f6b64
    }

    .bb-policy-body ul {
        padding-left: 20px;
        margin-bottom: 0
    }

.bb-policy-note {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #fff8ed;
    border: 1px solid #ffe0bb;
    color: #725229;
    font-size: .7rem;
    line-height: 1.55
}

/* Footer wordmark */
.bb-footer-logo {
    position: relative;
    overflow: hidden
}

    .bb-footer-logo b, .bb-footer-logo i {
        position: absolute;
        font-style: normal;
        font-weight: 1000;
        line-height: 1;
        font-size: 28px;
        letter-spacing: -.16em
    }

    .bb-footer-logo b {
        left: 10px;
        top: 9px;
        color: #171717;
        z-index: 2
    }

    .bb-footer-logo i {
        left: 16px;
        top: 15px;
        color: #ff6b00;
        z-index: 1
    }

.bb-footer-brand-name {
    display: flex;
    gap: 0
}

    .bb-footer-brand-name span {
        color: #ff9f1c
    }

    .bb-footer-brand-name strong {
        color: #fff
    }

@media(max-width:991.98px) {
    .category-mega-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .bb-policy-hero {
        grid-template-columns: 1fr
    }

    .bb-policy-hero-art {
        min-height: 120px
    }
}

@media(max-width:767px) {
    .store-nav {
        min-height: 56px;
        padding: 5px 9px;
        gap: 7px
    }

    .store-brand {
        min-width: 0;
        gap: 6px
    }

    .brand-mark {
        width: 31px;
        height: 31px;
        border-radius: 9px
    }

        .brand-mark b, .brand-mark i {
            font-size: 21px
        }

        .brand-mark b {
            left: 6px;
            top: 6px
        }

        .brand-mark i {
            left: 10px;
            top: 10px
        }

    .brand-wordmark > strong {
        font-size: .91rem
    }

    .brand-wordmark small {
        font-size: .45rem;
        margin-top: 2px
    }

    .store-nav-actions {
        gap: 7px;
        margin-left: auto
    }

    .language-toggle {
        padding: 6px 7px;
        font-size: .62rem
    }

    .cart-action {
        padding: 7px 8px
    }

    .home-hero-market {
        grid-template-columns: 46% 54%;
        height: 35vh;
        min-height: 145px;
        max-height: 270px;
        border-radius: 17px
    }

    .home-hero-market-copy {
        padding: 12px 4px 12px 12px
    }

        .home-hero-market-copy h1 {
            font-size: clamp(1rem,4.8vw,1.4rem)
        }

        .home-hero-market-copy p {
            font-size: .55rem;
            line-height: 1.3;
            max-width: 180px
        }

    .home-hero-market-art {
        height: 100%;
        min-height: 0
    }

        .home-hero-market-art img {
            object-position: 72% center
        }

    .home-section {
        padding-top: 22px
    }

    .home-section-head {
        margin-bottom: 8px
    }

        .home-section-head h2 {
            font-size: 1.05rem
        }

    .home-product-grid {
        --bs-gutter-x: .42rem;
        --bs-gutter-y: .42rem
    }

    .compact-product-content {
        min-height: 126px
    }

    .compact-product-image {
        height: 92px !important
    }

    .compact-product-content .product-name-pro {
        font-size: .66rem;
        line-height: 1.15
    }

    .compact-product-content .product-price-pro strong {
        font-size: .84rem
    }

    .compact-product-actions {
        min-height: 27px
    }

        .compact-product-actions button {
            font-size: .48rem !important;
            padding: 4px 2px !important;
            min-height: 27px
        }

    .bb-policy-hero {
        padding: 20px;
        border-radius: 19px
    }

        .bb-policy-hero h1 {
            font-size: 1.7rem
        }

        .bb-policy-hero p {
            font-size: .76rem
        }

    .bb-policy-hero-art {
        min-height: 90px;
        font-size: 3.4rem
    }

    .bb-policy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .bb-policy-card {
        padding: 13px;
        border-radius: 14px
    }

        .bb-policy-card .icon {
            width: 34px;
            height: 34px;
            font-size: 15px
        }

        .bb-policy-card h3 {
            font-size: .75rem
        }

        .bb-policy-card p {
            font-size: .61rem
        }

    .bb-policy-body {
        padding: 18px 15px;
        border-radius: 16px
    }

        .bb-policy-body h2 {
            font-size: .98rem
        }

        .bb-policy-body p, .bb-policy-body li {
            font-size: .69rem;
            line-height: 1.65
        }

    .bb-footer-brand-name {
        font-size: 1.15rem
    }
}

/* =========================================================
   BhandaarBox storefront UI polish — round 2 (2026-09-23b)
   Hardened header row, mega-menu, logo, density, form errors.
   Presentation-only. Checkout/cart/payment behaviour untouched.
   ========================================================= */

/* ---- Header row: category dropdown + search must always sit
   on one line, same height, never wrap ---- */
.store-nav {
    flex-wrap: nowrap !important
}

@media(min-width:768px) {
    .header-commerce-tools {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important
    }
}

.category-menu, .header-search-shell {
    display: flex !important;
    align-items: stretch !important
}

.category-menu-trigger {
    height: 46px !important;
    box-sizing: border-box
}

.store-search {
    height: 46px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center
}

.header-search-submit {
    align-self: center
}

@media(min-width:768px) and (max-width:1080px) {
    .category-menu-trigger {
        min-width: 0 !important;
        padding: 0 10px !important
    }

        .category-menu-trigger span:not(.category-menu-icon) {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 88px
        }

    .header-search-shell {
        min-width: 120px !important
    }
}

/* ---- Category mega-menu: force the grid + reset link defaults so it
   can never fall back to plain stacked/underlined browser links ---- */
.dropdown-menu.category-mega-menu {
    display: none
}

    .dropdown-menu.category-mega-menu.show {
        display: block !important
    }

.category-mega-menu {
    max-width: calc(100vw - 24px)
}

.category-mega-grid {
    display: grid !important
}

.category-mega-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 6px !important;
    text-decoration: none !important;
    color: #27322c !important;
    background: transparent
}

    .category-mega-item:visited, .category-mega-item:hover, .category-mega-item:active {
        text-decoration: none !important
    }

.category-mega-image {
    width: 100%;
    height: 56px;
    font-size: 1.3rem;
    margin: 0 auto
}

.category-mega-name {
    width: 100%;
    text-align: center
}

@media(max-width:575.98px) {
    .category-mega-menu {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important
    }

    .category-mega-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        max-height: 60vh
    }
}

/* ---- Logo: crisper interlocked "BB" mark + confirm wordmark split
   (Bhandaar = orange, Box = black) ---- */
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(155deg,#fff,#fbfbfb)
}

    .brand-mark b, .brand-mark i {
        font-size: 26px;
        letter-spacing: -.14em
    }

    .brand-mark b {
        left: 6px;
        top: 8px
    }

    .brand-mark i {
        left: 15px;
        top: 12px;
        opacity: .94
    }

.brand-wordmark > strong {
    font-size: 1.18rem
}

.bb-footer-logo {
    width: 54px;
    height: 54px
}

/* ---- Product density: more items per row on larger screens,
   Blinkit-style compact cards ---- */
@media(min-width:1400px) {
    .home-product-grid > .col-xl-3 {
        width: 14.2857143% !important
    }
}

@media(min-width:768px) and (max-width:991.98px) {
    .home-product-grid > .col-md-4 {
        width: 25% !important
    }
}

.compact-product-image {
    background: linear-gradient(145deg,#fbfcfb,#f2f6f3)
}

.compact-product-content .product-category-pro {
    font-size: .55rem
}

/* ---- Mobile: Add to cart / Buy now always sit level, same height ---- */
.compact-product-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch !important
}

    .compact-product-actions form, .compact-product-actions button, .compact-product-actions .btn-soldout {
        width: 100%;
        height: 100%;
        box-sizing: border-box
    }

    .compact-product-actions button, .compact-product-actions .btn-soldout {
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap
    }

/* ---- Form validation: make dropdown / select errors clearly visible ---- */
.field-validation-error {
    display: block;
    color: #dc3545;
    font-size: .75rem;
    font-weight: 700;
    margin-top: 5px
}

.form-select.input-validation-error, .form-control.input-validation-error {
    border-color: #dc3545 !important;
    background-image: none
}

    .form-select.input-validation-error:focus, .form-control.input-validation-error:focus {
        box-shadow: 0 0 0 3px rgba(220,53,69,.15)
    }

.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px
}


/* Final home-hero image treatment: always show the complete artwork without cropping.
   The source illustration contains important details near every edge, so contain it
   rather than using cover. */
.home-hero-market {
    grid-template-columns: 52% 48%;
}

.home-hero-market-art {
    background: #fffdf8;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .home-hero-market-art img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }

.home-hero-market-copy {
    padding-right: 28px;
}

.home-slogan {
    font-size: clamp(.95rem,1.35vw,1.2rem);
    font-weight: 800;
    color: #ef6b00;
    margin: 0 0 10px;
    line-height: 1.25;
}

@media(max-width:767px) {
    .home-hero-market {
        grid-template-columns: 48% 52%;
        height: 35vh;
        min-height: 145px;
        max-height: 270px;
    }

    .home-hero-market-art {
        height: 100%;
        min-height: 0;
    }

        .home-hero-market-art img {
            object-fit: contain;
            object-position: center;
        }

    .home-hero-market-copy {
        padding-right: 3px;
    }

    .home-slogan {
        font-size: .68rem;
        margin-bottom: 4px;
    }
}


/* =========================================================
   BhandaarBox mobile/header/favorites production polish — 2026-09-23c
   ========================================================= */

/* Universal left category drawer: compact, text-first, no artwork downloads. */
.category-menu-trigger .category-trigger-chevron {
    margin-left: auto;
    font-size: .65rem;
    color: #66716b
}

.category-menu-trigger .category-menu-icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px
}

.bb-category-drawer {
    width: min(350px,88vw);
    border: 0;
    box-shadow: 18px 0 55px rgba(25,45,33,.16)
}

    .bb-category-drawer .offcanvas-header {
        padding: 18px 18px 14px;
        border-bottom: 1px solid #edf0ed
    }

.category-drawer-kicker {
    display: block;
    color: #16805f;
    font-size: .58rem;
    font-weight: 950;
    letter-spacing: .12em;
    margin-bottom: 4px
}

.bb-category-drawer .offcanvas-title {
    font-size: 1.15rem;
    font-weight: 950;
    color: #1c2721
}

.bb-category-drawer .offcanvas-body {
    padding: 8px 10px 20px;
    overflow: auto
}

.category-drawer-all, .category-drawer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #26332c
}

.category-drawer-all {
    padding: 10px;
    border: 1px solid #e4ece6;
    border-radius: 12px;
    background: #f6fbf7;
    margin-bottom: 9px
}

    .category-drawer-all strong, .category-drawer-all small {
        display: block
    }

    .category-drawer-all strong {
        font-size: .78rem;
        font-weight: 900
    }

    .category-drawer-all small {
        font-size: .6rem;
        color: #8a958e;
        margin-top: 2px
    }

    .category-drawer-all > i, .category-drawer-item > i {
        margin-left: auto;
        color: #a3ada6;
        font-size: .72rem
    }

.category-drawer-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
    background: #fff1e5;
    color: #ef6b00;
    font-size: .78rem;
    font-weight: 950;
    border: 1px solid #ffe1c4
}

.category-drawer-letter {
    font-size: .66rem;
    background: #f2f6f3;
    border-color: #e2ebe5;
    color: #238b2c
}

.category-drawer-list {
    display: grid;
    gap: 2px
}

.category-drawer-item {
    padding: 9px 7px;
    border-radius: 9px
}

    .category-drawer-item:hover, .category-drawer-item:focus {
        background: #f7faf7
    }

.category-drawer-name {
    font-size: .75rem;
    font-weight: 750;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Mobile header: category and search MUST occupy the same compact row. */
.mobile-commerce-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 9px;
    background: #fff;
    border-top: 1px solid #f0f2ef
}

    .mobile-commerce-row > .mobile-category-trigger {
        width: 112px;
        min-width: 112px;
        height: 38px;
        border: 1px solid #e0e7e2;
        border-radius: 10px;
        background: #fff;
        color: #253029;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: .64rem;
        font-weight: 900;
        white-space: nowrap
    }

        .mobile-commerce-row > .mobile-category-trigger .mobile-category-icon {
            color: var(--bb-orange);
            font-size: .9rem;
            display: inline-flex
        }

    .mobile-commerce-row > .mobile-search-shell {
        flex: 1;
        min-width: 0;
        margin: 0
    }

.mobile-search-form {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    background: #f4f6f4;
    border: 1px solid #e2e7e3;
    border-radius: 10px;
    padding: 0 3px 0 9px
}

.mobile-search-leading {
    font-size: .72rem;
    color: #7b847e;
    flex: none
}

.mobile-search-form input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 7px 6px;
    font-size: .72rem;
    color: #27322c
}

    .mobile-search-form input::placeholder {
        color: #8b938e
    }

.mobile-search-form button {
    border: 0;
    background: transparent;
    height: 32px;
    display: grid;
    place-items: center;
    flex: none
}

.mobile-search-voice {
    width: 24px;
    font-size: .7rem;
    opacity: .72
}

.mobile-search-submit {
    width: 32px;
    border-radius: 8px !important;
    background: var(--bb-orange) !important;
    color: #fff !important;
    font-size: .72rem
}

.mobile-search-form:focus-within {
    background: #fff;
    border-color: #ffc28e;
    box-shadow: 0 0 0 3px rgba(255,107,0,.07)
}

/* Ensure old mobile search styles do not create a second row. */
@media(max-width:767.98px) {
    .store-header {
        position: sticky;
        top: 0
    }

    .store-nav {
        min-height: 54px;
        padding: 5px 10px !important;
        gap: 7px !important
    }

    .store-brand {
        min-width: 0 !important;
        max-width: 50%
    }

    .store-nav-actions {
        flex: none !important;
        gap: 5px !important
    }

        .store-nav-actions .nav-action {
            display: none !important
        }

    .mobile-commerce-row {
        padding-left: 14px;
        padding-right: 14px
    }

        .mobile-commerce-row .search-suggestions {
            z-index: 130
        }

    .home-hero-market {
        height: clamp(210px,35vh,270px) !important;
        min-height: 210px !important;
        max-height: 270px !important;
        grid-template-columns: 46% 54% !important
    }

    .home-hero-market-copy {
        padding: 14px 6px 12px 13px !important;
        justify-content: center;
        overflow: visible
    }

        .home-hero-market-copy .home-eyebrow {
            font-size: .5rem;
            line-height: 1.15
        }

        .home-hero-market-copy h1 {
            font-size: clamp(1.05rem,4.7vw,1.42rem) !important;
            line-height: 1.03;
            margin: 4px 0 5px !important
        }

    .home-slogan {
        font-size: clamp(.62rem,2.8vw,.82rem) !important;
        line-height: 1.1;
        margin-bottom: 5px !important;
        white-space: normal
    }

        .home-slogan::after {
            height: 2px;
            width: 44px;
            margin-top: 2px
        }

    .home-hero-market-copy p {
        font-size: .55rem !important;
        line-height: 1.28 !important;
        margin: 0 0 7px !important;
        max-width: 100% !important
    }

    .home-hero-market-actions {
        display: flex !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important
    }

        .home-hero-market-actions .home-primary-cta, .home-hero-market-actions .home-secondary-cta {
            display: inline-flex !important;
            visibility: visible !important;
            white-space: nowrap !important;
            padding: 6px 7px !important;
            font-size: .55rem !important;
            border-radius: 8px !important
        }

    .home-hero-market-art {
        min-height: 0 !important;
        height: 100% !important;
        display: flex !important;
        overflow: hidden !important
    }

        .home-hero-market-art picture {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center
        }

        .home-hero-market-art img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            object-position: center !important
        }
}

/* Faster, calmer page rendering: reduce expensive paint effects on touch devices. */
@media (hover:none) and (pointer:coarse) {
    .product-card-3d, .bb-footer-info-card, .home-category-card, .home-category-visual-card {
        transition: none !important
    }

        .product-card-3d:hover, .bb-footer-info-card:hover, .home-category-card:hover, .home-category-visual-card:hover {
            transform: none !important
        }

    .favorite-btn-pro, .favorite-btn-detail {
        backdrop-filter: none !important
    }
}

/* Compact forms across checkout/account without changing field semantics. */
.checkout-card .form-label, .account-page .form-label {
    font-size: .72rem;
    font-weight: 750;
    margin-bottom: 3px
}

.checkout-card .form-control, .checkout-card .form-select, .account-page .form-control, .account-page .form-select {
    min-height: 38px;
    padding: .42rem .65rem;
    font-size: .78rem;
    border-radius: 9px
}

.checkout-card textarea.form-control, .account-page textarea.form-control {
    min-height: 60px
}

.checkout-card .row.g-3, .account-page .row.g-3 {
    --bs-gutter-y: .55rem
}

.address-form-pro .form-label {
    margin-bottom: 3px
}

.address-form-pro .row {
    --bs-gutter-y: .55rem
}

.account-quick-access {
    overflow: hidden
}

.favorite-account-icon {
    color: #e33d5c;
    background: #fff1f4
}

.account-shortcuts-pro {
    grid-template-columns: repeat(4,minmax(0,1fr))
}

@media(max-width:767.98px) {
    .account-shortcuts-pro {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 6px
    }

        .account-shortcuts-pro a {
            padding: 10px 5px
        }

        .account-shortcuts-pro span {
            font-size: 1.2rem
        }

        .account-shortcuts-pro strong {
            font-size: .68rem
        }

        .account-shortcuts-pro small {
            font-size: .55rem
        }

    .checkout-card .form-control, .checkout-card .form-select, .account-page .form-control, .account-page .form-select {
        min-height: 36px;
        font-size: .75rem
    }
}

@media(max-width:767.98px) {
    .store-body {
        overflow-x: hidden
    }

    .mobile-commerce-row > .mobile-category-trigger {
        width: 118px;
        min-width: 118px;
        font-size: .6rem
    }

    .mobile-search-form {
        min-width: 0
    }

        .mobile-search-form input {
            width: 1%;
        }
}

/* =========================================================
   FINAL BhandaarBox LOGO OVERRIDE
   Presentation-only: no layout or functionality changes.
   ========================================================= */

/* Header / storefront BB mark */
.brand-mark {
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    background: #fff !important;
    border: 1px solid #e7e9e7 !important;
    box-shadow: 0 7px 17px rgba(20,25,20,.09) !important;
    overflow: hidden !important;
    color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .brand-mark b,
    .brand-mark i {
        position: absolute !important;
        display: block !important;
        font-style: normal !important;
        font-family: Inter,Arial,sans-serif !important;
        font-weight: 950 !important;
        line-height: .82 !important;
        letter-spacing: -.18em !important;
        pointer-events: none !important;
    }

    .brand-mark b {
        left: 6px !important;
        top: 8px !important;
        font-size: 28px !important;
        color: #171717 !important;
        z-index: 2 !important;
    }

    .brand-mark i {
        left: 14px !important;
        top: 12px !important;
        font-size: 28px !important;
        color: #ff6b00 !important;
        z-index: 1 !important;
        opacity: 1 !important;
    }

/* Header wordmark */
.brand-wordmark > strong {
    display: flex !important;
    gap: 0 !important;
    font-family: Inter,Arial,sans-serif !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -.045em !important;
}

    .brand-wordmark > strong span:first-child {
        color: #ff6b00 !important;
    }

    .brand-wordmark > strong span:last-child {
        color: #171717 !important;
    }

.brand-wordmark small {
    display: block !important;
    margin-top: 4px !important;
    color: #7a837d !important;
    font-family: Inter,Arial,sans-serif !important;
    font-size: .55rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

/* Customer/Admin login logo:
   existing HTML can remain as-is; original "B" text is visually replaced
   by the same interlocked black/orange BB mark. */
.auth-logo-3d {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 22px !important;
    margin: 0 auto 18px !important;
    background: #fff !important;
    border: 1px solid #e7e9e7 !important;
    box-shadow: 0 10px 22px rgba(20,25,20,.10) !important;
    transform: none !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

    .auth-logo-3d::before,
    .auth-logo-3d::after {
        content: "B";
        position: absolute;
        display: block;
        font-family: Inter,Arial,sans-serif;
        font-style: normal;
        font-weight: 950;
        line-height: .82;
        letter-spacing: -.18em;
        pointer-events: none;
    }

    .auth-logo-3d::before {
        left: 10px;
        top: 14px;
        font-size: 50px;
        color: #171717;
        z-index: 2;
    }

    .auth-logo-3d::after {
        left: 25px;
        top: 23px;
        font-size: 50px;
        color: #ff6b00;
        z-index: 1;
    }

/* Mobile logo sizing */
@media(max-width:767px) {
    .brand-mark {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 9px !important;
    }

        .brand-mark b,
        .brand-mark i {
            font-size: 22px !important;
        }

        .brand-mark b {
            left: 5px !important;
            top: 6px !important;
        }

        .brand-mark i {
            left: 10px !important;
            top: 9px !important;
        }

    .brand-wordmark > strong {
        font-size: .93rem !important;
    }

    .brand-wordmark small {
        font-size: .46rem !important;
        margin-top: 2px !important;
    }

    .auth-logo-3d {
        width: 64px !important;
        height: 64px !important;
        border-radius: 19px !important;
    }

        .auth-logo-3d::before,
        .auth-logo-3d::after {
            font-size: 42px !important;
        }

        .auth-logo-3d::before {
            left: 8px !important;
            top: 12px !important;
        }

        .auth-logo-3d::after {
            left: 21px !important;
            top: 19px !important;
        }
}