:root {
    --ms-primary: #0d6efd;
    --ms-primary-dark: #102341;
    --ms-primary-soft: #eaf4ff;
    --ms-pink-soft: #fdebf0;
    --ms-peach: #ffe9dc;
    --ms-bg: #f7f8fc;
    --ms-card: #ffffff;
    --ms-border: #edf0f5;
    --ms-text: #1c2640;
    --ms-muted: #6c7589;
    --ms-shadow: 0 18px 40px rgba(16, 35, 65, 0.07);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    background: linear-gradient(180deg, #fbfcff 0%, var(--ms-bg) 100%);
    color: var(--ms-text);
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.sale-topbar {
    background: linear-gradient(90deg, #ffd8e2 0%, #ffe7dc 50%, #dff1ff 100%);
    color: var(--ms-primary-dark);
    padding: 0.75rem 0;
}

.site-header {
    backdrop-filter: blur(10px);
}

.brand-logo {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.15);
}

.brand-name {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--ms-primary-dark);
    line-height: 1.1;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: var(--ms-muted);
}

.search-box {
    max-width: 580px;
}

.search-box .form-control {
    border: 1px solid var(--ms-border);
    box-shadow: none;
    background: #fff;
    min-height: 54px;
    border-radius: 999px 0 0 999px !important;
}

.search-box .btn-search {
    background: var(--ms-primary-dark);
    color: #fff;
    border-radius: 0 999px 999px 0 !important;
    min-width: 100px;
}

.header-pill,
.cart-pill {
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: #f6f7fb;
    text-decoration: none;
    font-weight: 700;
    color: var(--ms-primary-dark);
    white-space: nowrap;
}

.cart-pill {
    background: var(--ms-primary-dark);
    color: #fff;
}

.cart-pill-count {
    background: rgba(255,255,255,0.16);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-inline-start: 0.35rem;
}

.category-nav {
    scrollbar-width: none;
}

.category-nav::-webkit-scrollbar {
    display: none;
}

.category-nav-link {
    text-decoration: none;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    color: var(--ms-primary-dark);
    white-space: nowrap;
}

.category-nav-link:hover,
.category-nav-link.hot-link {
    background: var(--ms-primary-soft);
}

.section-space {
    padding: 1.1rem 0 2.1rem;
}

.section-soft-bg {
    background: linear-gradient(180deg, rgba(234, 244, 255, 0.65) 0%, rgba(255,255,255,0.7) 100%);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.section-kicker {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ms-primary);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.section-title {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 900;
    color: var(--ms-primary-dark);
}

.section-link {
    font-weight: 800;
    color: var(--ms-primary);
    text-decoration: none;
}

.hero-banner {
    border-radius: 2rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ms-shadow);
    height: 100%;
}

.hero-banner::after {
    content: '';
    position: absolute;
    inset: auto -50px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    filter: blur(4px);
}

.hero-banner-main {
    background: linear-gradient(135deg, #ffdce7 0%, #ffe9de 36%, #d6efff 100%);
    min-height: 440px;
}

.hero-banner-soft {
    background: linear-gradient(135deg, #f4f8ff 0%, #fff7fb 100%);
}

.hero-banner-accent {
    background: linear-gradient(135deg, #102341 0%, #1f64ff 100%);
    color: #fff;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.hero-kicker,
.hero-badge,
.statement-kicker {
    display: inline-flex;
    padding: 0.45rem 0.9rem;
    background: rgba(255,255,255,0.55);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.hero-subtitle {
    max-width: 560px;
    color: #33415c;
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    min-width: 110px;
    padding: 0.95rem 1rem;
    background: rgba(255,255,255,0.7);
    border-radius: 1.2rem;
    backdrop-filter: blur(10px);
}

.hero-stat strong {
    font-size: 1.35rem;
    font-weight: 900;
}

.hero-stat span {
    color: var(--ms-muted);
    font-size: 0.85rem;
}

.hero-banner-soft h3,
.hero-banner-accent h3 {
    font-weight: 900;
    margin-bottom: 0.65rem;
}

.hero-banner-soft p,
.hero-banner-accent p {
    margin-bottom: 1rem;
    color: inherit;
    opacity: 0.9;
}

.hero-link {
    font-weight: 800;
    text-decoration: none;
}

.circle-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.circle-category-thumb {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #eef4ff);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-category-thumb span {
    font-size: 2rem;
    font-weight: 900;
    color: var(--ms-primary);
}

.circle-category-name {
    font-weight: 800;
    text-align: center;
}

.mini-promo-card {
    padding: 1.15rem 1.2rem;
    background: #fff;
    border-radius: 1.4rem;
    box-shadow: var(--ms-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mini-promo-card strong {
    font-size: 1.02rem;
}

.mini-promo-card span {
    color: var(--ms-muted);
}

.statement-card {
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: var(--ms-shadow);
}

.statement-card h3 {
    font-size: 1.85rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
}

.statement-card-blue {
    background: linear-gradient(135deg, #102341 0%, #1d64ff 100%);
    color: #fff;
}

.statement-card-light {
    background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
}

.product-card {
    border-radius: 1.8rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(16, 35, 65, 0.12) !important;
}

.product-image-wrap {
    position: relative;
    display: block;
    background: #fff;
}

.product-image,
.placeholder-card {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    object-fit: cover;
}

.placeholder-card,
.placeholder-detail {
    background: linear-gradient(145deg, #eef4ff 0%, #fff1f6 100%);
    color: var(--ms-primary-dark);
    font-size: 2rem;
    font-weight: 900;
}

.placeholder-detail {
    min-height: 560px;
}

.product-floating-badges {
    position: absolute;
    inset: 1rem 1rem auto auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.product-detail-card,
.product-detail-gallery,
.filter-card,
.gateway-box,
.listing-hero-box,
.empty-state-card {
    box-shadow: var(--ms-shadow);
}

.main-detail-image {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
}

.detail-meta-box {
    border: 1px solid var(--ms-border);
    border-radius: 1.15rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-meta-box span {
    color: var(--ms-muted);
}

.listing-hero-box {
    border-radius: 2rem;
    padding: 1.6rem 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0f5ff 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.listing-hero-meta {
    min-width: 110px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--ms-primary-dark);
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
}

.cart-image-wrap {
    width: 92px;
}

.cart-image {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 1.2rem;
}

.sticky-summary {
    position: sticky;
    top: 130px;
}

.form-control,
.form-select,
textarea,
input,
select {
    border-radius: 1rem !important;
    min-height: 48px;
    border: 1px solid #e6eaf2;
    box-shadow: none !important;
}

textarea {
    min-height: 125px;
}

.btn {
    border-radius: 1rem;
    font-weight: 800;
}

.site-footer {
    background: #fff;
    border-top: 1px solid var(--ms-border);
}

.footer-chip {
    padding: 0.45rem 0.85rem;
    background: #f4f7ff;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}

.table thead th {
    background: #f8f9fb;
}

@media (max-width: 991.98px) {
    .search-box {
        order: 3;
        max-width: 100%;
        width: 100%;
    }

    .hero-banner-main {
        min-height: auto;
    }

    .circle-category-thumb {
        width: 110px;
        height: 110px;
    }

    .sticky-summary {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .brand-name {
        font-size: 1.1rem;
    }

    .hero-banner,
    .statement-card,
    .listing-hero-box {
        padding: 1.4rem;
        border-radius: 1.5rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-stats {
        gap: 0.75rem;
    }

    .hero-stat {
        min-width: calc(50% - 0.5rem);
    }

    .circle-category-thumb {
        width: 94px;
        height: 94px;
    }

    .section-title {
        font-size: 1.35rem;
    }
}


.filter-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.filter-check-item{display:flex;align-items:center;gap:.45rem;background:#f7f9fc;border:1px solid #e7ebf3;border-radius:16px;padding:.55rem .7rem;font-size:.9rem}
.filter-check-item input{accent-color:#0d6efd}
.filter-check-item.compact{justify-content:center}
.color-swatch{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.variant-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border:1px solid #e8edf5;border-radius:999px;background:#fff}
.size-pill{min-width:48px;justify-content:center}
.filter-chip{display:inline-flex;align-items:center;padding:.35rem .7rem;background:#eef5ff;border-radius:999px}
.cart-qty-input{max-width:90px}
.variant-summary-card{background:#f8fbff;border:1px solid #e6efff;padding:1rem 1.1rem;border-radius:1.25rem}
@media (max-width: 991px){.filter-check-grid{grid-template-columns:1fr 1fr}}


.text-muted-dark{color:#32415e;}
.hero-carousel .carousel-inner, .hero-carousel .carousel-item{height:100%;}
.hero-banner-image{position:absolute; inset:auto 1rem 1rem auto; width:170px; height:170px; object-fit:cover; border-radius:1.4rem; box-shadow:0 20px 35px rgba(0,0,0,.12);}
.small-title{font-size:clamp(1.5rem,2.6vw,2.25rem);}
.hero-indicators [data-bs-target]{width:10px;height:10px;border:none;border-radius:50%;background:#bed8ff;opacity:1;}
.hero-indicators .active{background:var(--ms-primary-dark);}
.benefits-bar .benefit-item{background:#fff;border:1px solid var(--ms-border);border-radius:1.2rem;padding:1rem 1.1rem;font-weight:800;text-align:center;box-shadow:var(--ms-shadow);}
.coupon-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(135deg,#fff 0%,#eef6ff 100%);padding:1.5rem;border-radius:1.6rem;box-shadow:var(--ms-shadow);}
.coupon-list{display:flex;gap:1rem;flex-wrap:wrap;}
.coupon-card{background:#fff;border:1px dashed #95bfff;border-radius:1.2rem;padding:1rem 1.1rem;min-width:180px;}
.coupon-code{font-size:1.2rem;font-weight:900;color:var(--ms-primary-dark);margin-bottom:.35rem;letter-spacing:.03em;}
.mini-product{position:relative;background:#fff;border:1px solid var(--ms-border);border-radius:1rem;padding:1rem;min-height:110px;}
.mini-product-title{font-weight:800;margin-bottom:.35rem;}
.coupon-form-box{background:#f8faff;border:1px solid var(--ms-border);padding:1rem;border-radius:1rem;}
.shipping-note-box{background:#f7f8fc;border:1px solid var(--ms-border);padding:.85rem 1rem;border-radius:1rem;color:var(--ms-muted);}
.tracking-result-card{background:#f8fbff;border:1px solid var(--ms-border);border-radius:1.2rem;padding:1.25rem;}
.tracking-step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem;}
.tracking-step{padding:.9rem .75rem;text-align:center;border-radius:999px;background:#eef2f8;color:var(--ms-muted);font-weight:800;font-size:.9rem;}
.tracking-step.active{background:var(--ms-primary-dark);color:#fff;}
.shipment-box{border:1px solid #e7eef8;}
@media (max-width: 991.98px){.hero-banner-image{display:none;}.coupon-strip{padding:1.2rem;}.tracking-step-grid{grid-template-columns:repeat(2,1fr);}}


/* ===== Responsive compact product cards ===== */
.col-xl-5th {
    flex: 0 0 auto;
    width: 20%;
}

.product-col {
    display: flex;
}

.product-col > .product-card {
    width: 100%;
}

.product-card {
    border-radius: 1.45rem;
}

.product-card-body {
    padding: 0.95rem 0.95rem 1rem;
}

.product-card-title {
    font-size: 1rem;
    line-height: 1.45;
    min-height: 2.9rem;
}

.product-card-title a {
    color: var(--ms-primary-dark) !important;
}

.product-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    min-height: 2.9rem;
}

.product-image,
.placeholder-card {
    aspect-ratio: 1 / 0.96;
}

.product-floating-badges {
    inset: 0.7rem 0.7rem auto auto;
}

.product-floating-badges .badge {
    font-size: 0.72rem;
    padding: 0.38rem 0.48rem;
}

.product-price {
    font-size: 1.55rem;
    line-height: 1;
}

.product-card-meta {
    min-height: 1.4rem;
}

.product-card .btn {
    border-radius: 0.85rem;
    font-size: 0.95rem;
    padding: 0.6rem 0.8rem;
}

.product-btn-secondary {
    color: var(--ms-primary-dark);
    border-color: #cfd8e8;
}

.header-actions {
    flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
    .col-xl-5th {
        width: 25%;
    }
}

@media (max-width: 991.98px) {
    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .header-pill,
    .cart-pill {
        flex: 1 1 calc(33.333% - 0.5rem);
        text-align: center;
        justify-content: center;
        padding: 0.68rem 0.75rem;
        font-size: 0.95rem;
    }

    .product-card-title {
        font-size: 0.96rem;
        min-height: 2.6rem;
    }

    .product-image,
    .placeholder-card {
        aspect-ratio: 1 / 1.02;
    }
}

@media (max-width: 575.98px) {
    .sale-topbar {
        padding: 0.55rem 0;
        font-size: 0.86rem;
    }

    .sale-topbar .container {
        justify-content: center !important;
        text-align: center;
    }

    .site-header .container.py-3 {
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
    }

    .brand-wrap {
        width: 100%;
        justify-content: center;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .brand-subtitle {
        display: none;
    }

    .search-box .form-control,
    .search-box .btn-search {
        min-height: 46px;
        font-size: 0.95rem;
    }

    .search-box .btn-search {
        min-width: 84px;
    }

    .header-actions {
        gap: 0.5rem !important;
    }

    .header-pill,
    .cart-pill {
        font-size: 0.9rem;
        padding: 0.62rem 0.45rem;
    }

    .category-nav {
        gap: 0.35rem !important;
    }

    .category-nav-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }

    .section-space {
        padding: 0.8rem 0 1.5rem;
    }

    .product-card {
        border-radius: 1.2rem;
    }

    .product-card-body {
        padding: 0.8rem 0.8rem 0.9rem;
    }

    .product-image,
    .placeholder-card {
        aspect-ratio: 1 / 1.05;
    }

    .product-card-title {
        font-size: 0.92rem;
        min-height: 2.4rem;
    }

    .product-price {
        font-size: 1.18rem;
    }

    .product-card .btn {
        font-size: 0.88rem;
        padding: 0.52rem 0.65rem;
    }

    .hero-banner,
    .statement-card,
    .listing-hero-box {
        padding: 1.1rem;
        border-radius: 1.2rem;
    }

    .hero-title {
        font-size: 1.45rem;
        line-height: 1.45;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .hero-stat {
        min-width: calc(50% - 0.4rem);
        padding: 0.8rem;
    }
}


/* ===== v9 compact product grid + mobile fixes ===== */
.products-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.product-grid-item{min-width:0;}
.product-card{
    border-radius:1.15rem;
    max-width:240px;
    margin-inline:auto;
    width:100%;
}
.product-image,
.placeholder-card{
    aspect-ratio:1/0.88;
}
.product-card-body{
    padding:0.62rem 0.62rem 0.72rem;
}
.product-card-title{
    font-size:0.93rem;
    line-height:1.4;
    min-height:2.35rem;
    margin-bottom:0.35rem !important;
}
.product-card-desc{
    font-size:0.83rem;
    line-height:1.55;
    min-height:2.55rem;
    margin-bottom:0.45rem !important;
}
.product-price-row{margin-bottom:0.38rem !important;}
.product-price{
    font-size:1.1rem;
    line-height:1;
}
.product-card-meta{
    font-size:0.75rem;
    min-height:1rem;
    margin-bottom:0.45rem !important;
}
.product-floating-badges{
    inset:0.55rem 0.55rem auto auto;
    gap:0.3rem;
}
.product-floating-badges .badge{
    font-size:0.68rem;
    padding:0.3rem 0.42rem;
}
.product-card .btn{
    font-size:0.83rem;
    padding:0.48rem 0.55rem;
    border-radius:0.75rem;
}
.product-card-actions{gap:0.35rem !important;}

@media (min-width: 576px){
    .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
    .product-card{max-width:260px;}
}
@media (min-width: 768px){
    .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
    .product-card{max-width:none;}
}
@media (min-width: 1200px){
    .products-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (min-width: 1400px){
    .products-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
}

@media (max-width: 767.98px){
    .container{padding-inline:14px;}
    .site-header .container.py-3{padding-top:0.8rem !important;padding-bottom:0.8rem !important;}
    .search-box{margin-top:0.5rem;}
    .header-actions{display:grid !important;grid-template-columns:repeat(3,1fr);width:100%;gap:8px !important;}
    .header-pill,.cart-pill{min-width:0;padding:0.62rem 0.3rem;font-size:0.84rem;}
    .category-nav{overflow:auto;display:flex !important;flex-wrap:nowrap !important;padding-bottom:0.25rem;}
    .category-nav-link{font-size:0.84rem;padding:0.55rem 0.7rem;}
    .section-header{align-items:center;}
}
@media (max-width: 480px){
    .products-grid{gap:12px;}
    .product-card{max-width:none;border-radius:1rem;}
    .product-image,.placeholder-card{aspect-ratio:1/0.95;}
    .product-card-body{padding:0.55rem;}
    .product-card-title{font-size:0.84rem;min-height:2.15rem;}
    .product-card-desc{display:none;}
    .product-price{font-size:0.96rem;}
    .product-card .btn{font-size:0.74rem;padding:0.42rem 0.4rem;}
    .brand-wrap{width:auto;justify-content:flex-start;}
    .brand-name{font-size:1rem;}
    .search-box .form-control,.search-box .btn-search{min-height:42px;font-size:0.9rem;}
}


/* ===== v12 user friendly ux improvements ===== */
.main-shell { min-height: 60vh; }
.quick-filter-strip{
    display:flex;
    gap:.6rem;
    overflow:auto;
    padding-bottom:.25rem;
    margin-bottom:1rem;
}
.quick-filter-strip::-webkit-scrollbar{height:6px;}
.quick-filter-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.7rem 1rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--ms-border);
    text-decoration:none;
    white-space:nowrap;
    font-weight:800;
    color:var(--ms-primary-dark);
}
.quick-filter-chip.active,
.quick-filter-chip:hover{background:var(--ms-primary-dark);color:#fff;border-color:var(--ms-primary-dark);}
.mobile-toolbar{display:flex;gap:.65rem;align-items:center;}
.offcanvas.offcanvas-end{width:min(92vw,390px);}
.mobile-bottom-nav{
    position:fixed;
    inset:auto 0 0 0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--ms-border);
    display:grid;
    grid-template-columns:repeat(5,1fr);
    z-index:1040;
    box-shadow:0 -10px 25px rgba(16,35,65,.08);
}
.mobile-bottom-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.2rem;
    min-height:60px;
    padding:.45rem .2rem;
    text-decoration:none;
    color:var(--ms-muted);
    font-size:.7rem;
    font-weight:800;
    text-align:center;
}
.mobile-bottom-link.active{color:var(--ms-primary-dark);}
.mobile-bottom-icon{font-size:1.1rem;line-height:1;}
.trust-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:.7rem;
}
.trust-item{
    background:#f7f9ff;
    border:1px solid var(--ms-border);
    border-radius:1rem;
    padding:.8rem .65rem;
    font-size:.82rem;
    font-weight:700;
    text-align:center;
}
.mobile-sticky-buy,
.mobile-sticky-cart{
    position:fixed;
    left:12px;
    right:12px;
    bottom:72px;
    z-index:1035;
    background:#fff;
    border:1px solid var(--ms-border);
    border-radius:1rem;
    box-shadow:0 18px 40px rgba(16,35,65,.12);
    padding:.8rem;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
}
.mobile-sticky-buy .btn,
.mobile-sticky-cart .btn{padding:.72rem 1rem;border-radius:.9rem;white-space:nowrap;}
.mobile-sticky-label{font-size:.72rem;color:var(--ms-muted);font-weight:700;}
.mobile-sticky-price{font-size:1.05rem;color:var(--ms-primary-dark);font-weight:900;line-height:1.2;}
.checkout-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.75rem;
}
.checkout-step{
    background:#fff;
    border:1px solid var(--ms-border);
    border-radius:1rem;
    padding:.9rem .7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    font-weight:800;
    color:var(--ms-muted);
}
.checkout-step span{
    width:28px;height:28px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:#eef2f8;color:var(--ms-primary-dark);font-size:.84rem;
}
.checkout-step.active{border-color:#cfe0ff;background:#f6faff;color:var(--ms-primary-dark);}
@media (max-width: 991.98px){
    body{padding-bottom:72px;}
    .mobile-sticky-buy,.mobile-sticky-cart{display:flex;}
}
@media (max-width: 767.98px){
    .checkout-steps{grid-template-columns:1fr;}
    .trust-list{grid-template-columns:1fr;}
    .listing-hero-box{padding:1.15rem;}
    .offcanvas-body{padding:1rem;}
    .filter-card{box-shadow:none !important;}
}
@media (max-width: 480px){
    .quick-filter-chip{padding:.58rem .85rem;font-size:.82rem;}
    .mobile-bottom-link{font-size:.64rem;}
    .mobile-sticky-buy,.mobile-sticky-cart{left:10px;right:10px;bottom:70px;padding:.7rem;}
}



.whatsapp-chat-float{
    position:fixed !important;
    right:18px;
    left:auto;
    bottom:24px;
    z-index:1085;
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.82rem 1rem;
    border-radius:999px;
    background:linear-gradient(135deg,#1ec95b 0%, #12a748 100%);
    color:#fff !important;
    text-decoration:none;
    box-shadow:0 16px 30px rgba(18,167,72,.28);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    max-width:min(88vw, 300px);
    border:1px solid rgba(255,255,255,.22);
}
.whatsapp-chat-float:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 36px rgba(18,167,72,.34);
    color:#fff !important;
}
.whatsapp-chat-float:focus-visible{
    outline:3px solid rgba(30,201,91,.22);
    outline-offset:3px;
}
.whatsapp-chat-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.17);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    font-weight:900;
    flex:0 0 44px;
    line-height:1;
}
.whatsapp-chat-content{
    display:flex;
    flex-direction:column;
    line-height:1.12;
}
.whatsapp-chat-content strong{
    font-size:.94rem;
    font-weight:900;
}
.whatsapp-chat-content small{
    font-size:.71rem;
    opacity:.95;
    margin-top:.16rem;
}
.whatsapp-hide-mobile{display:inline-flex;}
.whatsapp-hide-desktop{display:none;}
@media (min-width: 768px){
    .whatsapp-hide-desktop{display:none !important;}
}
@media (max-width: 767.98px){
    .whatsapp-chat-float{
        right:14px;
        left:auto;
        bottom:calc(env(safe-area-inset-bottom, 0px) + 78px);
        width:58px;
        height:58px;
        max-width:58px;
        padding:0;
        gap:0;
        border-radius:50%;
        justify-content:center;
        box-shadow:0 12px 28px rgba(18,167,72,.34);
    }
    .whatsapp-chat-icon{
        width:58px;
        height:58px;
        flex-basis:58px;
        font-size:1.35rem;
        background:transparent;
    }
    .whatsapp-chat-content{display:none;}
    .whatsapp-hide-mobile{display:none !important;}
    .whatsapp-hide-desktop{display:inline-flex !important;}
}


/* Robust WhatsApp floating button override */
.whatsapp-fab,
.whatsapp-fab:visited{
    position: fixed !important;
    right: 18px !important;
    left: auto !important;
    bottom: 18px !important;
    z-index: 99999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 58px !important;
    height: 58px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #25D366 !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(37,211,102,.34) !important;
    border: 0 !important;
    direction: rtl;
    line-height: 1;
}
.whatsapp-fab:hover{color:#fff !important;transform: translateY(-2px);}
.whatsapp-fab__icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;}
.whatsapp-fab__icon svg{width:100%;height:100%;display:block;}
.whatsapp-fab__label{font-weight:800;font-size:.95rem;white-space:nowrap;line-height:1;}
@media (max-width: 767.98px){
    .whatsapp-fab,.whatsapp-fab:visited{
        width:58px !important;min-width:58px !important;height:58px !important;padding:0 !important;
        right:14px !important;bottom:84px !important;border-radius:50% !important;
    }
    .whatsapp-fab__label{display:none !important;}
}
@media (min-width: 768px){
    .whatsapp-fab,.whatsapp-fab:visited{bottom:22px !important;}
}
.whatsapp-hide-mobile{display:inline-flex;}
.whatsapp-hide-desktop{display:none;}
@media (max-width: 767.98px){
    .whatsapp-hide-mobile{display:none !important;}
    .whatsapp-hide-desktop{display:inline-flex !important;}
}
@media (min-width: 768px){
    .whatsapp-hide-desktop{display:none !important;}
}


/* v32 WhatsApp image button hard fix */
.whatsapp-fab__icon{width:26px !important;height:26px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;overflow:hidden !important;flex:0 0 26px !important;}
.whatsapp-fab__icon img{width:26px !important;height:26px !important;max-width:26px !important;max-height:26px !important;display:block !important;object-fit:contain !important;border:0 !important;}
@media (max-width: 767.98px){.whatsapp-fab__icon,.whatsapp-fab__icon img{width:24px !important;height:24px !important;max-width:24px !important;max-height:24px !important;}}


/* v34 fixed WhatsApp icon only */
.whatsapp-fab,
.whatsapp-fab:visited{
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
    right: 18px !important;
    left: auto !important;
    bottom: 18px !important;
}
.whatsapp-fab__label{display:none !important;}
@media (max-width: 767.98px){
    .whatsapp-fab,
    .whatsapp-fab:visited{
        right: 14px !important;
        bottom: 84px !important;
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
    }
}


/* v36 right-side floating WhatsApp button */
@keyframes whatsappFabPulseOnly {
    0%, 100% { box-shadow: 0 12px 28px rgba(37,211,102,.34), 0 0 0 0 rgba(37,211,102,.18); }
    70% { box-shadow: 0 14px 32px rgba(37,211,102,.38), 0 0 0 12px rgba(37,211,102,0); }
}
.whatsapp-fab,
.whatsapp-fab:visited{
    position: fixed !important;
    right: 18px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 99999 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: #25D366 !important;
    color: #fff !important;
    text-decoration: none !important;
    border: 0 !important;
    animation: whatsappFabPulseOnly 2.8s ease-in-out infinite !important;
    transition: box-shadow .2s ease, opacity .2s ease !important;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible{
    transform: translateY(-50%) !important;
    box-shadow: 0 16px 34px rgba(37,211,102,.42) !important;
    opacity: 1 !important;
}
.whatsapp-fab__label{display:none !important;}
@media (max-width: 767.98px){
    .whatsapp-fab,
    .whatsapp-fab:visited{
        top: auto !important;
        bottom: 86px !important;
        right: 14px !important;
        transform: none !important;
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
    }
    .whatsapp-fab:hover,
    .whatsapp-fab:focus-visible{
        transform: none !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .whatsapp-fab,
    .whatsapp-fab:visited{
        animation: none !important;
    }
}


/* v37 better WhatsApp icon asset */
.whatsapp-fab__icon img{border-radius:50% !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));}

/* v42 compact site live chat widget */
.live-chat-widget{direction:rtl}
.live-chat-trigger{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#4da3ff);
    color:#fff;
    box-shadow:0 16px 32px rgba(13,110,253,.28);
    z-index:99998;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.35rem;
}
.live-chat-trigger:hover{filter:brightness(1.03)}
.live-chat-trigger__icon{line-height:1;display:inline-flex;align-items:center;justify-content:center}
.live-chat-panel{
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    width:320px;
    max-width:calc(100vw - 32px);
    background:#fff;
    border:1px solid #e8edf5;
    border-radius:20px;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    z-index:99998;
    overflow:hidden;
}
.live-chat-panel__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem .8rem;background:#0f172a;color:#fff}
.live-chat-panel__header strong{display:block;font-size:.98rem}
.live-chat-panel__header small{display:block;color:rgba(255,255,255,.78);margin-top:.15rem;font-size:.76rem}
.live-chat-close{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem;line-height:1;flex:0 0 auto}
.live-chat-status{padding:.6rem .85rem;font-size:.82rem;border-bottom:1px solid #eef3f9;background:#f8fbff;color:#3b4a5e;line-height:1.6}
.live-chat-status.is-success{background:#ebfbf1;color:#136b3a}
.live-chat-status.is-warning{background:#fff7e9;color:#8b5a06}
.live-chat-status.is-danger{background:#fff0f0;color:#b42318}
.live-chat-status.is-info{background:#f5f8ff;color:#284b84}
.live-chat-messages{height:220px;overflow:auto;padding:.85rem;background:#f7f9fc;display:flex;flex-direction:column;gap:.65rem}
.live-chat-panel:not(.live-chat-panel--started) .live-chat-messages{display:none}
.live-chat-message{display:flex}
.live-chat-message--visitor{justify-content:flex-start}
.live-chat-message--admin,.live-chat-message--system{justify-content:flex-end}
.live-chat-message__bubble{max-width:84%;padding:.72rem .85rem;border-radius:16px;background:#fff;color:#0f172a;box-shadow:0 8px 18px rgba(15,23,42,.06);line-height:1.7;font-size:.92rem}
.live-chat-message--admin .live-chat-message__bubble{background:#0d6efd;color:#fff}
.live-chat-message--system .live-chat-message__bubble{background:#eaf4ff;color:#0f172a;border:1px dashed #bfd8ff}
.live-chat-message__bubble small{display:block;margin-top:.28rem;font-size:.7rem;opacity:.72}
.live-chat-start-form,.live-chat-compose{padding:.85rem;border-top:1px solid #eef3f9;background:#fff}
.live-chat-start-form .form-label{font-size:.8rem;font-weight:700;margin-bottom:.28rem}
.live-chat-start-form .form-control,.live-chat-compose textarea{border-radius:14px !important}
.live-chat-start-form .form-control{padding:.65rem .8rem;font-size:.92rem}
.live-chat-intro{margin-bottom:.65rem}
.live-chat-intro__title{font-weight:800;color:#0f172a;margin-bottom:.25rem;font-size:.98rem}
.live-chat-intro p{margin:0;color:#64748b;font-size:.84rem;line-height:1.65}
.live-chat-compose textarea{resize:none;min-height:58px}
.live-chat-compose .btn{border-start-end-radius:14px !important;border-end-end-radius:14px !important;min-width:68px}
@media (max-width: 767.98px){
    .live-chat-trigger{right:14px;bottom:88px;top:auto;transform:none;width:54px;height:54px}
    .live-chat-panel{right:14px;left:14px;top:auto;bottom:150px;transform:none;width:auto;max-width:none;border-radius:18px}
    .live-chat-messages{height:200px}
}


/* Local Bootstrap fallback helpers */
.input-group > .btn { z-index: 2; }
.dropdown-menu { text-align: right; }
.me-auto { margin-left: auto !important; margin-right: 0 !important; }
.ms-auto { margin-right: auto !important; margin-left: 0 !important; }
.text-start { text-align: right !important; }
.text-end { text-align: left !important; }
@media (min-width: 992px) {
  .category-nav { white-space: nowrap; }
}