/* Walton BD Store — storefront styles
   Layout modeled on electronicsbangladesh.com · typography & product page modeled on evaly.com.bd
   Brand color: LM orange */
:root {
    --primary: #ff6a00;
    --primary-dark: #e05e00;
    --primary-darker: #c95400;
    --primary-light: #fff3ea;
    --accent: #ff5a0a;
    --brand-blue: #087ff5;
    --brand-navy: #071d4c;
    --brand-pale: #eaf3ff;
    --gradient: linear-gradient(135deg, #ff8c1a 0%, #ff6a00 55%, #f4530b 100%);
    --dark: #0f1623;
    --dark-2: #171b24;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #ededf0;
    --bg-alt: #f7f7f8;
    --green: #0f8c5a;
    --green-bg: rgba(15, 140, 90, .1);
    --star: #f59e0b;
    --amber: #b8860b;
    --radius: 12px;
    --font-head: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", Arial, sans-serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", Arial, sans-serif;
}

/* ============ Evaly-inspired storefront refresh ============ */
.nav-primary { font-weight: 700; }
.nav-link.active { color: var(--primary); }
.mobile-category-trigger,
.mobile-category-panel,
.mobile-bottom-nav { display: none; }

/* Sharper marketplace cards with quieter typography and stronger pricing. */
.p-card {
    border: 1px solid #eceef2;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .035);
}
.p-card:hover { border-color: #d7dce3; box-shadow: 0 8px 22px rgba(16, 24, 40, .09); transform: translateY(-2px); }
.p-card-img { overflow: hidden; border-radius: 6px; background: #fff; }
.p-card-img img { transition: transform .28s ease; }
.p-card:hover .p-card-img img { transform: scale(1.035); }
.p-card-title { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.p-price .now { color: #e42313; font-size: 18px; }
.p-badge { border-radius: 4px; background: #e42313; }

/* Product details: marketplace card composition and stable sticky gallery. */
.pd-layout {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #e8eaee;
    box-shadow: 0 3px 14px rgba(16, 24, 40, .04);
}
.pd-image { border: 1px solid #edf0f3; border-radius: 8px; }
.pd-title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.2px; }
.pd-price { color: #e42313; }
.pd-btn-buy { background: #e42313; border-radius: 6px; }
.pd-btn-buy:hover { background: #c91c0d; }
.pd-btn-cart { color: #e42313; border-color: #e42313; border-radius: 6px; }
.pd-btn-cart:hover { background: #fff4f2; border-color: #e42313; }
.pd-tab-panel { border: 1px solid #e8eaee; border-radius: 8px; }

@media (max-width: 767px) {
    body { padding-bottom: 72px; background: #f5f6f8; }
    body.category-panel-open { overflow: hidden; }
    .container { padding-left: 12px; padding-right: 12px; }

    .site-header { position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
    .header-inner { display: grid; grid-template-columns: 1fr auto; padding: 9px 12px 10px; }
    .logo-mark { width: 34px; height: 34px; }
    .logo-word strong { font-size: 15px; }
    .header-link, .account-menu { display: none; }
    .header-actions { grid-column: 2; grid-row: 1; gap: 4px; }
    .header-actions .icon-btn { background: rgba(255,255,255,.14); color: #fff; }
    .search-form { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-top: 1px; height: 40px; }
    .search-form input { min-width: 0; }

    .main-nav { box-shadow: none; }
    .nav-inner { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
    .nav-inner::-webkit-scrollbar { display: none; }
    .nav-item { display: block; flex:0 0 auto; }
    .nav-item .nav-link { display:flex; padding:9px 8px; font-size:12px; font-weight:500; }
    .nav-item .nav-caret, .nav-item .nav-dropdown { display:none; }
    .nav-primary { display: flex; font-size: 12px; font-weight: 600; padding: 9px 8px; }
    .mobile-category-trigger {
        display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
        border: 0; background: transparent; padding: 9px 8px;
        font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer;
    }

    .mobile-category-panel {
        display: block; position: fixed; inset: 0; z-index: 200;
        background: rgba(15, 23, 42, .48); padding-top: 18vh;
    }
    .mobile-category-panel[hidden] { display: none; }
    .mobile-category-head, .mobile-category-grid { background: #fff; }
    .mobile-category-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 18px 12px; border-radius: 18px 18px 0 0;
    }
    .mobile-category-head strong { font-size: 17px; }
    .mobile-category-head button { border: 0; background: #f1f3f5; width: 34px; height: 34px; border-radius: 50%; font-size: 24px; }
    .mobile-category-grid {
        max-height: calc(82vh - 62px); overflow-y: auto; padding: 4px 16px 28px;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    }
    .mobile-category-group { border: 1px solid #eceef2; border-radius: 10px; padding: 12px; }
    .mobile-category-group a { display: block; padding: 4px 0; font-size: 11.5px; color: var(--muted); }
    .mobile-category-group .mobile-category-root { color: var(--dark); font-weight: 700; font-size: 13px; padding-bottom: 6px; }

    .mobile-bottom-nav {
        position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
        left: 0; right: 0; bottom: 0; z-index: 150; height: 66px;
        background: rgba(255,255,255,.97); border-top: 1px solid #e6e8ec;
        box-shadow: 0 -5px 18px rgba(16, 24, 40, .08);
        padding: 6px 4px max(6px, env(safe-area-inset-bottom));
    }
    .mobile-bottom-nav a, .mobile-bottom-nav button {
        position: relative; border: 0; background: transparent; color: #727986;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; font: inherit; font-size: 10px; cursor: pointer;
    }
    .mobile-bottom-nav svg { width: 21px; height: 21px; }
    .mobile-bottom-nav .active { color: var(--primary); font-weight: 700; }
    .mobile-bottom-nav b {
        position: absolute; top: 0; left: 53%; min-width: 16px; height: 16px;
        border-radius: 9px; padding: 0 4px; background: #e42313; color: #fff;
        font-size: 9px; display: grid; place-items: center;
    }

    .hero-grid { margin-top: 10px; gap: 10px; }
    .hero-slider { min-height: 250px; border-radius: 8px; }
    .hero-slide { min-height: 250px; }
    .hero-slide-img img { max-height: 130px; }
    .hero-side { display: none; }
    .home-section { margin: 24px 0; }
    .featured-cats { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; scrollbar-width: none; }
    .featured-cat { min-width: 84px; border-radius: 8px; padding: 10px 6px; }
    .featured-cat figure { height: 48px; }
    .product-grid { gap: 8px; }
    .p-card { min-width: 0; padding: 8px; }
    .p-card-title { font-size: 12px; }
    .p-price { flex-wrap: wrap; gap: 3px 6px; }
    .p-price .now { font-size: 14px; }

    .page { padding-top: 12px; padding-bottom: 28px; }
    .breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; }
    .pd-layout { padding: 0; border: 0; box-shadow: none; gap: 0; background: transparent; }
    .pd-image { border: 0; border-radius: 8px 8px 0 0; padding: 14px; }
    .pd-thumbs { background: #fff; margin-top: 0; padding: 8px; }
    .pd-info { background: #fff; padding: 16px 14px; border-radius: 0 0 8px 8px; }
    .pd-title { font-size: 18px; line-height: 1.45; }
    .pd-cod { border-radius: 6px; padding: 8px 10px; }
    .pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pd-btn-wish { display: none; }
    .pd-trust { grid-template-columns: 1fr; }
    .pd-trust-card { display: grid; grid-template-columns: 32px 1fr; text-align: left; align-items: center; }
    .pd-trust-card .ti { grid-row: 1 / 3; margin: 0; }
    .pd-tabs { margin-top: 16px; background: #fff; padding: 0 4px; }
    .pd-tab-panel { border: 0; }
    .pd-section { margin-top: 28px; }
    .site-footer { margin-top: 32px; }
}

/* Image consistency: uploaded product/category artwork must stay fully visible,
   without the extra inner padding that previously made icons look undersized. */
.product-image img,
.p-card-img img,
.pd-image img,
.featured-cat img,
.mobile-category-icon img,
.mobile-subcategory-icon img {
    object-fit: contain;
    object-position: center;
}
.product-image img { padding: 0 !important; }
.featured-cat img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
.mobile-category-icon img,
.mobile-subcategory-icon img { padding: 0 !important; }

/* Official-warranty seal — product-level, editable from the admin product form. */
.official-warranty-badge {
    position: absolute;
    z-index: 3;
    top: clamp(10px, 1.6vw, 16px);
    right: auto;
    bottom: auto;
    left: clamp(10px, 1.6vw, 16px);
    width: clamp(70px, 8vw, 86px);
    aspect-ratio: 1;
    display: block;
    filter: drop-shadow(0 5px 8px rgba(9, 39, 87, .18));
    pointer-events: none;
}
.official-warranty-badge.below-product-badge {
    top: 58px;
}
.official-warranty-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Product-page placement: seal overlays the bottom-left corner of the gallery image. */
.official-warranty-badge.pd-warranty-bottom {
    top: auto;
    bottom: clamp(10px, 1.6vw, 16px);
    left: clamp(10px, 1.6vw, 16px);
}
@media (max-width: 767px) {
    .official-warranty-badge {
        top: 14px;
        right: auto;
        bottom: auto;
        left: 14px;
        width: 64px;
    }
    .official-warranty-badge.below-product-badge {
        top: 58px;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
    background: var(--bg);
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--dark); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
ul { list-style: none; }
button { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline:3px solid rgba(8,127,245,.45); outline-offset:3px; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:9999; background:#fff; color:var(--brand-navy); padding:10px 14px; border-radius:0 0 8px 8px; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.skip-link:focus { top:0; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

/* ============ Header (solid brand bar) ============ */
.site-header { background: var(--primary); }
.header-inner {
    display: flex; align-items: center; gap: 28px;
    padding: 14px 16px; min-height: 84px;
}

.logo { display: flex; align-items: center; gap: 10px; color: #fff; flex: 0 0 auto; font-family: var(--font-head); }
.logo-mark {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px; letter-spacing: -0.5px;
}
.logo-word { line-height: 1.15; }
.logo-word strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
.logo-word span { display: block; font-size: 13px; font-weight: 500; opacity: .95; }
.identity-lockup { display:block; min-width:140px; color:#073b7a; }
.identity-lockup strong { font-size:16px; letter-spacing:-.2px; white-space:nowrap; }
.identity-lockup span { margin-top:3px; color:#64748b; font-size:10px; white-space:nowrap; }
.site-logo-image { width:48px; height:48px; object-fit:contain; border-radius:8px; background:#fff; }
.store-text-logo { display:inline-flex; align-items:center; gap:11px; color:#fff; line-height:1; }
.store-text-logo-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--primary); font-size:27px; font-weight:900; box-shadow:0 5px 18px rgba(0,0,0,.14); }
.store-text-logo strong { display:block; font-size:24px; font-weight:850; letter-spacing:-.7px; white-space:nowrap; }
.store-text-logo small { display:block; margin-top:5px; color:#dff1ff; font-size:10px; font-weight:800; letter-spacing:4px; }
.site-footer .store-text-logo { margin-bottom:14px; }
.powered-strip { display:flex; justify-content:center; align-items:center; gap:9px; padding:7px 16px; color:#173b67; background:#fff7e6; border-bottom:1px solid #f1d7a1; font-size:12px; letter-spacing:.1px; }
.powered-strip strong { color:#07539a; }
.powered-credit { display:inline-flex; padding:7px 11px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:#dcecff!important; font-size:12px; }
.product-powered-note { margin-top:18px; padding:12px 14px; border-left:4px solid var(--accent); border-radius:8px; background:#f5f9ff; color:#24476b; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.site-announcement { background:var(--dark); color:#fff; text-align:center; padding:7px 12px; font-size:12px; font-weight:600; }
.cms-page { max-width:960px; background:#fff; margin-top:24px; margin-bottom:48px; padding:32px; border-radius:10px; }
.cms-page-wide { max-width:1320px; }
.cms-page h1 { font-size:30px; margin-bottom:22px; }
.cms-featured-image { width:100%; max-height:420px; object-fit:cover; border-radius:8px; margin-bottom:24px; }
.cms-content { font-size:15px; line-height:1.8; }
.cms-content h2,.cms-content h3 { margin:24px 0 10px; }
.cms-content p { margin-bottom:14px; }

.search-form {
    flex: 1; display: flex; align-items: center; min-width: 200px;
    background: #fff; border-radius: 10px; overflow: hidden; height: 48px;
}
.search-form input {
    flex: 1; height: 100%; padding: 0 20px; border: none; outline: none;
    font: inherit; font-size: 14px; color: var(--text);
}
.search-form input::placeholder { color: #9ca3af; }
.search-form button {
    background: transparent; border: none; cursor: pointer;
    height: 100%; padding: 0 18px; display: flex; align-items: center; color: #444;
}
.search-form button:hover { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 20px; color: #fff; flex: 0 0 auto; }
.header-link {
    display: flex; align-items: center; gap: 7px;
    color: #fff; font-family: var(--font-head); font-size: 15px; font-weight: 700;
}
.header-link .hl-icon { font-size: 22px; line-height: 1; }
.header-link:hover { opacity: .85; }

.icon-btn {
    position: relative; width: 48px; height: 48px; border-radius: 50%;
    background: #fff; color: var(--dark);
    display: flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { color: var(--primary); }
.cart-count {
    position: absolute; top: -2px; right: -2px;
    background: var(--dark); color: #fff; border: 2px solid #fff;
    border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px;
    font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* account dropdown */
.account-menu { position: relative; }
.account-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
    min-width: 185px; overflow: hidden; padding: 6px 0;
}
.account-menu:hover .account-dropdown { display: block; }
.account-dropdown a, .account-dropdown button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 9px 18px; font-size: 13.5px; font-weight: 500; color: var(--text);
}
.account-dropdown a:hover, .account-dropdown button:hover { background: var(--primary-light); color: var(--primary); }
.inline-form { display: inline; }
.as-button { background: none; border: none; cursor: pointer; font: inherit; }

/* ============ Category nav (white bar) ============ */
.main-nav { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); position: relative; z-index: 60; }
.nav-inner { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.general-nav { gap:12px; }
.general-nav > .nav-link,
.general-nav > .nav-item > .nav-link { padding-left:14px; padding-right:14px; }
.nav-item { position: relative; flex: 0 0 auto; }
.nav-link {
    display: flex; align-items: center; gap: 5px;
    padding: 12px 11px; font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
    color: var(--text); white-space: nowrap;
}
.nav-link:hover { color: var(--primary); }
.nav-caret { font-size: 9px; color: #9ca3af; transition: transform .15s; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0; z-index: 70;
    background: #fff; border-radius: 0 0 10px 10px; min-width: 225px;
    box-shadow: 0 14px 30px rgba(0,0,0,.14); padding: 6px 0;
}
.nav-item:hover .nav-dropdown { display: block; }
.nav-dropdown a { display: block; padding: 9px 18px; font-size: 13.5px; font-weight: 500; }
.nav-dropdown a:hover { color: var(--primary); background: var(--primary-light); }

/* ============ Alerts ============ */
.alert { padding: 12px 16px; border-radius: 10px; margin: 16px 0; font-size: 13.5px; }
.alert-success { background: #e8f7ee; color: #17693a; border: 1px solid #bfe8cf; }
.alert-error { background: #fdecec; color: #a12026; border: 1px solid #f5c2c4; }

/* ============ Hero (slider + side banners) ============ */
.hero-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px;
}
.hero-slider {
    position: relative; border-radius: 12px; overflow: hidden;
    min-height: 360px; background: var(--dark);
}
.hero-slide {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 34px 46px;
    opacity: 0; transition: opacity .6s; pointer-events: none;
    background: var(--gradient); color: #fff;
}
.hero-slide:nth-child(2n) { background: linear-gradient(120deg, #2b3040 0%, var(--dark-2) 100%); }
.hero-slide.active { opacity: 1; pointer-events: auto; }
/* CMS banner slides: the uploaded image IS the banner (full-bleed, clickable).
   Double-class selector outweighs the responsive .hero-slide padding overrides. */
.hero-slider.hero-slider-cms { min-height: 0; background: #fff; }
/* min-height: 0 matters — the responsive .hero-slide rules force a 250–300px
   min-height, which stretched a full-bleed slide past the slider's real height
   and made object-fit: cover crop (zoom) the banner on phones. */
.hero-slide.hero-slide-full { padding: 0; background: none; min-height: 0; }
.hero-slide.hero-slide-full picture { display: block; width: 100%; height: 100%; }
.hero-slide.hero-slide-full img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-slide-text { max-width: 55%; font-family: var(--font-head); }
.hero-slide-kicker {
    display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 14px; margin-bottom: 13px;
}
.hero-slide-title { font-size: 25px; line-height: 1.25; font-weight: 800; margin-bottom: 13px; color: #fff; }
.hero-slide-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.hero-slide-price .now {
    background: #fff; color: var(--dark); font-weight: 800; font-size: 22px;
    padding: 4px 15px; border-radius: 8px; transform: skewX(-8deg); display: inline-block;
}
.hero-slide-price .was { font-size: 15px; text-decoration: line-through; opacity: .85; font-weight: 600; }
.hero-slide-cta {
    display: inline-block; background: #fff; color: var(--primary);
    font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 10px;
}
.hero-slide:nth-child(2n) .hero-slide-cta { color: var(--dark); }
.hero-slide-cta:hover { opacity: .9; }
.hero-slide-img { max-width: 42%; display: flex; align-items: center; justify-content: center; }
.hero-slide-img img { max-height: 280px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,.28)); }

.hero-dots {
    position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5;
    display: flex; justify-content: center; gap: 7px;
}
.hero-dot {
    width: 9px; height: 9px; border-radius: 999px; border: none; cursor: pointer;
    background: rgba(255,255,255,.55); padding: 0; transition: all .25s;
}
.hero-dot.active { width: 26px; background: #fff; }

.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.side-banner {
    position: relative; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 22px; color: #fff; min-height: 160px; font-family: var(--font-head);
}
.side-banner-1 { background: linear-gradient(120deg, #232a3d 0%, #10131c 100%); }
.side-banner-2 { background: var(--gradient); }
.side-banner-text { position: relative; z-index: 2; }
.side-banner-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85; }
.side-banner-title { font-size: 16.5px; font-weight: 800; line-height: 1.3; margin: 6px 0 10px; color: #fff; }
.side-banner-offer {
    display: inline-block; background: #fff; color: var(--dark);
    font-size: 12px; font-weight: 800; border-radius: 6px; padding: 3px 11px;
}
.side-banner img { max-height: 120px; max-width: 45%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.3)); }
.side-banner:hover .side-banner-title { text-decoration: underline; }

/* ============ Feature strip ============ */
.features-strip {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 24px;
}
.feature-card {
    background: #fff; border-radius: 14px; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.feature-card h3 { font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.4; }
.feature-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.feature-icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.fi-1 { background: #e2f6ec; }
.fi-2 { background: #e5e9fb; }
.fi-3 { background: #fdeae3; }
.fi-4 { background: #ddf1fb; }
.fi-5 { background: #e2f6ec; }

/* ============ Home sections ============ */
.home-section { margin: 40px 0; }
.home-section .home-section-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 9px;
    color: #061e4c;
    background: linear-gradient(92deg, #061e4c 0%, #0c376f 48%, var(--accent, #ff5a0a) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(24px, 2.15vw, 34px);
    font-weight: 700;
    letter-spacing: -.75px;
    line-height: 1.18;
}
.home-section .home-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #061e4c 0 62%, var(--accent, #ff5a0a) 62% 100%);
}
@media (max-width: 767px) {
    .home-section .home-section-title {
        padding-bottom: 7px;
        font-size: 21px;
        font-weight: 650;
        letter-spacing: -.42px;
        line-height: 1.22;
    }
    .home-section .home-section-title::after { width: 46px; height: 2.5px; }
}
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-head h2, .section-title { font-size: 26px; font-weight: 800; color: var(--dark); line-height: 1.35; }
.all-products-link {
    font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--text);
    background: #fff; border-radius: 999px; padding: 8px 18px;
}
.all-products-link:hover { color: var(--primary); }

/* Featured categories */
.featured-cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 16px; }
.featured-cat {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; border-radius: 12px; padding: 16px 8px 12px;
    transition: box-shadow .25s;
}
.featured-cat:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.featured-cat figure { height: 72px; width: 100%; display: flex; align-items: center; justify-content: center; }
.featured-cat img { max-height: 100%; object-fit: contain; }
.featured-cat p { text-align: center; font-family: var(--font-head); font-size: 13px; font-weight: 500; margin-top: 10px; color: var(--text); }

/* ============ Product grid & cards ============ */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Main-site inspired category showcases: promo leads on desktop and stacks on mobile. */
.home-category-showcase { margin-block: 44px; }
.home-category-unified { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:stretch; }
.home-category-promo {
    display: block;
    grid-column:span 2;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 9px rgba(6,30,76,.06);
}
.home-category-promo picture,
.home-category-promo img { display: block; width: 100%; height: 100%; }
.home-category-promo picture { position:absolute; inset:0; }
.home-category-promo img { object-fit:var(--promo-fit, cover); object-position:var(--promo-position, center center); transition: transform .28s ease; }
.home-category-promo:hover img { transform: scale(1.012); }
.home-category-products { display:grid; gap:14px; min-width:0; }
.home-category-products-bottom { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:14px; }
.home-category-products-all { margin-top:0; }
.home-category-products > .p-card { min-width: 0; }
.home-category-unified > .p-card { min-width:0; height:auto; }
.home-category-view-all { display:flex; justify-content:flex-end; margin-top:16px; }
.home-category-view-all a {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-width:92px; min-height:34px; padding:7px 13px;
    border:1px solid var(--accent, #ff5a0a); border-radius:8px;
    color:#fff; background:var(--accent, #ff5a0a);
    font-family:var(--font-head); font-size:12px; font-weight:600;
    box-shadow:0 6px 14px rgba(255,82,13,.16); transition:.2s ease;
}
.home-category-view-all a:hover { background:#e94708; border-color:#e94708; transform:translateY(-1px); }
.home-category-view-all svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.p-card {
    background: #fff; border-radius: 12px; padding: 12px;
    display: flex; flex-direction: column; position: relative;
    border: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.p-card:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.p-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.p-badge {
    background: var(--primary); color: #fff; font-family: var(--font-head);
    font-size: 12px; font-weight: 700;
    height: 24px; padding: 0 9px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.p-badge-new { background: var(--green); }
.p-card-icons { display: flex; gap: 8px; margin-left: auto; }
.p-card-icons button {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; color: #555; display: grid; place-items: center; cursor: pointer;
}
.p-card-icons button:hover { color: var(--primary); border-color: var(--primary); }
.p-card-icons svg { width: 13px; height: 13px; }

.p-card-body { display: block; margin-top: 4px; }
.p-card-img { position: relative; padding-bottom: 100%; }
.p-card-img img, .p-card-img .no-image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.no-image { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12.5px; background: var(--bg-alt); border-radius: 8px; }
.p-card-title {
    font-family: var(--font-head); font-size: 13.5px; font-weight: 500;
    line-height: 1.5; color: var(--text);
    margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 40px;
}
.p-card-bottom { margin-top: auto; }
.p-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-family: var(--font-head); }
.p-price .now { font-size: 17px; font-weight: 800; color: var(--primary); }
.p-price .was { font-size: 12.5px; color: #9ca3af; text-decoration: line-through; }
.p-oos { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; color: #c0392b; margin-top: 8px; }
.p-rating { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.p-stars { display: inline-flex; gap: 2px; color: var(--star); }
.p-stars svg { width: 14px; height: 14px; fill: currentColor; }
.p-rating-count { font-size: 12px; color: var(--muted); }

/* ============ Marquee strip ============ */
.marquee-strip {
    background: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,.06);
    padding: 10px 24px; margin: 36px 0;
}
.marquee-strip span { font-family: var(--font-head); font-weight: 800; font-size: 19px; white-space: nowrap; color: var(--dark); }

/* ============ SEO article ============ */
.article { background: #fff; margin-top: 56px; }
.article-inner { padding: 40px 16px 52px; }
.article h1, .article h2 { font-size: 21px; font-weight: 800; line-height: 1.4; margin: 26px 0 10px; }
.article h1:first-child, .article h2:first-child { margin-top: 0; }
.article p { font-size: 14px; font-weight: 400; color: #4b5563; line-height: 1.75; }

/* ============ Footer (brand color) ============ */
.site-footer { background: var(--primary); color: #fff; margin-top: 72px; }
.article + .site-footer { margin-top: 0; }
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px;
    padding: 48px 16px 40px; font-size: 14px; font-weight: 400; line-height: 1.6;
}
.footer-brand .logo { margin-bottom: 14px; }
.footer-brand p { margin-bottom: 9px; }
.footer-brand a { font-weight: 500; }
.footer-brand a:hover { text-decoration: underline; }
.site-footer h3, .site-footer h4 {
    color: #fff; margin-bottom: 14px; font-size: 13px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
}
.site-footer li { padding: 4px 0; }
.site-footer li a:hover { text-decoration: underline; }
.footer-bottom {
    background: var(--primary-darker); padding: 15px 0; font-size: 13px; font-weight: 500; text-align: center;
}

/* ============ Inner pages ============ */
.page { padding: 24px 16px 48px; }
.page-title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.section { padding: 26px 0; }

.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.shop-sidebar .widget { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.widget h4 { margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.category-list > li { padding: 4px 0; font-size: 13.5px; }
.category-list li.active > a { color: var(--primary); font-weight: 700; }
.category-list ul { padding-left: 14px; }
.category-list a:hover { color: var(--primary); }
.price-inputs { display: flex; gap: 8px; margin-bottom: 10px; }
.price-inputs input { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }

.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.orderby-form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: inherit; background: #fff; }
.empty-state { padding: 40px 0; color: var(--muted); }

.pagination-wrap { margin-top: 24px; }
.pagination-wrap nav { display: flex; }

.breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--primary); }

/* Buttons */
.btn {
    display: inline-block; background: var(--dark); color: #fff; border: none;
    padding: 10px 20px; border-radius: 10px;
    font-family: var(--font-head); font-size: 14px; font-weight: 700; cursor: pointer;
    text-align: center;
}
.btn:hover { opacity: .92; }
.btn-primary { background: var(--gradient); }
.btn-primary:hover { background: var(--primary-dark); opacity: 1; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-small { padding: 6px 14px; font-size: 12.5px; }
.btn-block { display: block; width: 100%; }
.btn-add-cart { width: 100%; background: var(--primary-light); color: var(--primary-dark); }
.btn-add-cart:hover { background: var(--gradient); color: #fff; opacity: 1; }

/* Legacy product-card (non-home pages) */
.product-card {
    background: #fff; border: 1px solid transparent; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; transition: border-color .2s;
}
.product-card:hover { border-color: var(--primary); }
.product-image { position: relative; display: block; aspect-ratio: 1/1; background: #fff; }
.product-image img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 3px 10px; border-radius: 999px; font-family: var(--font-head);
    font-size: 12px; font-weight: 700; color: #fff;
}
.badge-sale { background: var(--primary); }
.badge-new { background: var(--green); }
.product-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-name { font-family: var(--font-head); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.product-name a:hover { color: var(--primary); }
.product-sku { font-size: 11.5px; color: var(--muted); }
.product-price { margin-top: auto; font-family: var(--font-head); font-size: 16px; }
.product-price del { color: #9ca3af; font-size: 12.5px; margin-right: 6px; }
.product-price ins { color: var(--primary); font-weight: 800; text-decoration: none; }
.product-price-lg { font-size: 24px; margin: 10px 0; }

/* ============ Product detail (evaly-style) ============ */
.pd-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: start; margin-bottom: 44px; }

.pd-gallery { position: sticky; top: 16px; }
.pd-image {
    position: relative; background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1/1; padding: 24px;
}
.pd-image img { max-height: 100%; object-fit: contain; }
.pd-image .badge { top: 14px; left: 14px; }
.pd-image:has(#pdMainImage) {
    aspect-ratio: auto;
    min-height: 0;
}
.pd-image #pdMainImage {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(720px, 72vh);
}
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumbs button {
    width: 66px; height: 66px; border-radius: 10px; border: 1.5px solid var(--border);
    background: #fff; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center;
}
.pd-thumbs button.active { border-color: var(--dark); }
.pd-thumbs img { max-height: 100%; object-fit: contain; }
.pd-thumbs .pd-spin-thumb {
    position: relative; flex-direction: column; gap: 0; overflow: hidden;
    border-color: #ff8a24; color: #0c2f67; background: linear-gradient(145deg,#fff8f0,#fff);
}
.pd-spin-thumb svg { width: 35px; height: 35px; fill: none; stroke: #ff5a0a; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-spin-thumb strong { margin-top: -4px; font-size: 10px; line-height: 1; letter-spacing: .2px; }
.pd-thumbs .pd-spin-thumb.active { border-color: #ff5a0a; box-shadow: 0 0 0 3px rgba(255,90,10,.15); }
.pd-image:has(#pdMainImage) { touch-action: pan-y; }
.pd-image.is-spin-active { cursor: grab; user-select: none; }
.pd-image.is-spin-dragging { cursor: grabbing; }
.pd-image.is-spin-active #pdMainImage { pointer-events: none; }
.pd-spin-hint {
    position: absolute; right: 12px; bottom: 12px; z-index: 5; display: none;
    grid-template-columns:auto auto; align-items:center; column-gap:6px; padding:7px 9px;
    border:1px solid rgba(12,47,103,.13); border-radius:10px; background:rgba(255,255,255,.9);
    color:#0c2f67; box-shadow:0 5px 18px rgba(12,47,103,.12); backdrop-filter:blur(7px); pointer-events:none;
}
.pd-image.is-spin-active .pd-spin-hint { display:grid; animation:pdSpinHint 2.8s both; }
.pd-spin-hint span { grid-row:1/3; font-size:21px; color:#ff5a0a; }
.pd-spin-hint strong { font-size:10px; line-height:1.05; }
.pd-spin-hint small { font-size:8px; line-height:1; color:#718096; }
@keyframes pdSpinHint { 0%{opacity:0;transform:translateY(5px)} 12%,75%{opacity:1;transform:none} 100%{opacity:0} }

.pd-seller-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pd-seller { font-family: var(--font-head); font-size: 14px; color: var(--dark); }
.pd-seller .tick { color: var(--green); font-weight: 700; }
.pd-seller strong { color: var(--primary); font-weight: 700; }
.pd-visit { font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--primary); }
.pd-visit:hover { text-decoration: underline; }

.pd-title { font-size: 26px; font-weight: 500; line-height: 1.3; margin-bottom: 10px; }

.pd-rating { font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--amber); margin-bottom: 16px; }

.pd-price-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-family: var(--font-head); }
.pd-price { font-size: 34px; font-weight: 800; color: var(--dark); letter-spacing: -0.5px; }
.pd-was { font-size: 18px; font-weight: 400; color: #9ca3af; text-decoration: line-through; }
.pd-save {
    background: var(--primary-light); color: var(--primary-dark);
    font-size: 12px; font-weight: 800; letter-spacing: .4px;
    border-radius: 999px; padding: 5px 13px;
}

.pd-cod {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--green-bg); color: var(--green); border: 1px solid rgba(15,140,90,.25);
    font-family: var(--font-head); font-size: 13px; font-weight: 600;
    border-radius: 999px; padding: 9px 18px; margin-bottom: 18px;
}

.pd-checklist { margin-bottom: 20px; }
.pd-checklist li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13.5px; color: var(--text); padding: 4px 0;
}
.pd-checklist .tick { color: var(--green); font-weight: 700; flex: 0 0 auto; }

.pd-qty-label {
    font-family: var(--font-head); font-size: 11.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.pd-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.pd-stepper {
    display: inline-flex; align-items: center; border: 1px solid var(--border);
    border-radius: 12px; background: #fff; overflow: hidden;
}
.pd-stepper button {
    width: 44px; height: 48px; border: none; background: none; cursor: pointer;
    font-size: 18px; color: var(--muted);
}
.pd-stepper button:hover { color: var(--dark); }
.pd-stepper input {
    width: 52px; height: 48px; border: none; text-align: center; outline: none;
    font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--dark);
    -moz-appearance: textfield;
}
.pd-stepper input::-webkit-outer-spin-button, .pd-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.pd-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pd-stock.oos .dot { background: #c0392b; }
.pd-stock.oos { color: #c0392b; }

.pd-actions { display: flex; gap: 12px; margin-bottom: 22px; }
.pd-btn {
    flex: 1; height: 52px; border-radius: 12px; cursor: pointer;
    font-family: var(--font-head); font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.pd-btn-cart { background: #fff; color: var(--dark); border: 1px solid var(--border); }
.pd-btn-cart:hover { border-color: var(--dark); }
.pd-btn-buy { background: var(--primary); color: #fff; border: none; }
.pd-btn-buy:hover { background: var(--primary-dark); }
.pd-btn-wish {
    flex: 0 0 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border);
    background: #fff; color: var(--dark); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pd-btn-wish:hover { color: var(--primary); border-color: var(--primary); }
.pd-btn[disabled] { opacity: .5; cursor: not-allowed; }

.pd-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-trust-card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 16px 14px; text-align: center;
}
.pd-trust-card .ti { font-size: 20px; display: block; margin-bottom: 8px; }
.pd-trust-card .pd-trust-title { display:block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.pd-trust-card p { font-size: 11.5px; color: var(--muted); }

/* Three dynamic promotional deal blocks directly after purchase actions. */
.pd-quick-deals { margin: 16px 0; padding: 12px; border: 1px solid #e7ebf1; border-radius: 12px; background: #fbfcfe; }
.pd-quick-deals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pd-quick-deals-head span { color: var(--dark); font-family: var(--font-head); font-size: 13px; font-weight: 600; }
.pd-quick-deals-head small { color: var(--muted); font-size: 10.5px; }
.pd-quick-deals-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-quick-deal { position: relative; display: flex; align-items: flex-start; min-width: 0; min-height: 88px; padding: 11px 9px 9px; overflow: hidden; border: 1px solid #e2e8f4; border-radius: 9px; background: linear-gradient(135deg, #f7f1ff, #fff 60%, #eef7ff); color: var(--text); transition: border-color .18s, transform .18s, box-shadow .18s; }
.pd-quick-deal::after { content: ""; position: absolute; right: -18px; bottom: -26px; width: 72px; height: 72px; border-radius: 50%; background: rgba(102, 34, 183, .08); }
.pd-quick-deal:hover { border-color: #8e50db; box-shadow: 0 5px 13px rgba(62, 30, 145, .12); transform: translateY(-1px); }
.pd-quick-deal-copy { position: relative; z-index: 1; display: block; }
.pd-quick-deal-copy b { display: -webkit-box; overflow: hidden; min-height: 28px; color: var(--text); font-size: 10.5px; font-weight: 500; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pd-quick-deal-copy small { display: block; margin-top: 8px; color: #7352a8; font-size: 7.5px; font-weight: 700; letter-spacing: .55px; }
.pd-quick-deal-copy strong { display: block; margin-top: 1px; color: #5816af; font-size: 15px; font-weight: 700; letter-spacing: -.35px; }
.pd-quick-deal em { position: absolute; z-index: 2; top: 5px; right: 5px; padding: 2px 4px; border-radius: 4px; background: #ff5b18; color: #fff; font-size: 8px; font-style: normal; font-weight: 700; }

/* Tabs */
.pd-tabs { border-bottom: 1px solid var(--border); display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; }
.pd-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--muted);
    padding: 12px 18px; white-space: nowrap;
}
.pd-tab.active { color: var(--dark); border-bottom-color: var(--dark); }
.pd-tab-panel { display: none; background: #fff; border-radius: 12px; padding: 24px; font-size: 14px; line-height: 1.75; color: var(--text); }
.pd-tab-panel.active { display: block; }
.pd-tab-panel h3 { font-size: 16px; margin-bottom: 10px; }
.pd-tab-panel p { margin-bottom: 10px; }

.pd-specs { width: 100%; border-collapse: collapse; }
.pd-specs td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.pd-specs td:first-child { color: var(--muted); width: 220px; }
.pd-specs tr:last-child td { border-bottom: none; }

.pd-section { margin-top: 44px; }

/* Product detail (legacy fallback) */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.product-detail-image { position: relative; background: #fff; border-radius: 12px; padding: 20px; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs img { width: 66px; height: 66px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.product-detail-info h1 { font-size: 24px; line-height: 1.3; margin-bottom: 8px; }
.stock-status { font-weight: 600; font-size: 13.5px; }
.in-stock { color: var(--green); }
.out-of-stock { color: var(--primary); }
.short-description { margin: 14px 0; color: #555; font-size: 13.5px; }
.add-to-cart-form { display: flex; gap: 10px; margin: 18px 0; }
.qty-input { width: 74px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font: inherit; }
.product-meta { margin-top: 18px; font-size: 13.5px; color: #444; background: var(--primary-light); border-radius: 10px; padding: 12px 16px; }
.product-meta li { padding: 3px 0; }
.product-description { margin: 26px 0; background: #fff; border-radius: 12px; padding: 22px; }
.product-description h2 { font-size: 18px; margin-bottom: 12px; }

/* Cart */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; background: #fff; border-radius: 12px; overflow: hidden; }
.cart-table th, .cart-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13.5px; }
.cart-product { display: flex; align-items: center; gap: 12px; }
.cart-product img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; }
.remove-btn { background: none; border: none; color: var(--primary); font-size: 20px; cursor: pointer; }
.cart-summary { max-width: 380px; margin-left: auto; background: #fff; border-radius: 12px; padding: 20px; }
.cart-summary h3 { margin-bottom: 12px; font-size: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.summary-row.total { font-weight: 700; font-size: 15px; }
.cart-summary .btn { margin-top: 14px; }
.cart-actions { margin-bottom: 20px; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.checkout-form { background: #fff; border-radius: 12px; padding: 22px; }
.checkout-form h3, .checkout-summary h3 { margin-bottom: 14px; font-size: 16px; }
.checkout-form label { display: block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }
.checkout-form input, .checkout-form textarea {
    display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; font: inherit; font-weight: 400;
}
.checkout-summary { background: #fff; border-radius: 12px; padding: 20px; }
.order-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.order-table td, .order-table th { padding: 9px 6px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: left; }
.total-row td { font-weight: 700; font-size: 14.5px; }
.payment-methods { margin-bottom: 16px; }
.payment-option { display: block; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: #fff; cursor: pointer; font-size: 13.5px; }

/* Order success */
.order-success { background: #fff; border-radius: 12px; padding: 26px; }
.order-success h1 { color: var(--green); font-size: 22px; margin-bottom: 18px; }
.order-meta { display: flex; gap: 26px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.order-success .btn { margin-top: 18px; }

/* Auth */
.auth-box { max-width: 420px; margin: 20px auto; background: #fff; border-radius: 12px; padding: 28px; }
.auth-box h1 { font-size: 20px; margin-bottom: 16px; }
.auth-box label { display: block; margin-bottom: 12px; font-size: 13.5px; font-weight: 600; }
.auth-box input:not([type=checkbox]) {
    display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.checkbox-label { font-weight: 400 !important; }
.auth-alt { margin-top: 14px; font-size: 13.5px; }
.auth-alt a { color: var(--primary); font-weight: 600; }

/* Status labels & admin tables (shared) */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: left; }
.status { padding: 3px 10px; border-radius: 12px; font-size: 11.5px; font-weight: 700; }
.status-pending { background: #fff4d6; color: #8a6d00; }
.status-processing { background: #e0edff; color: #1d4ed8; }
.status-shipped { background: #ede9fe; color: #6d28d9; }
.status-delivered { background: #e8f7ee; color: #17693a; }
.status-cancelled { background: #fdecec; color: #a12026; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .featured-cats { grid-template-columns: repeat(4, 1fr); }
    .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .home-category-unified { grid-template-columns:repeat(5,minmax(0,1fr)); }
    .home-category-products-bottom { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .section-head h2, .section-title { font-size: 22px; }
}
@media (max-width: 1023px) {
    /* Reference site hides the feature strip below lg */
    .features-strip { display: none; }
    .pd-layout { grid-template-columns: 1fr; gap: 22px; }
    .pd-gallery { position: static; }
}
@media (max-width: 900px) {
    .header-inner { flex-wrap: wrap; gap: 12px; min-height: 0; }
    .search-form { order: 3; flex-basis: 100%; height: 44px; }
    .header-link .hl-label { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-slider { min-height: 300px; }
    .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .home-category-showcase { margin-block: 32px; }
    .home-category-unified { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .home-category-promo { grid-column:span 2; aspect-ratio: var(--promo-mobile-ratio, var(--promo-ratio, 2 / 1)); border-radius: 10px; margin-bottom:0; }
    .home-category-promo img { object-fit:var(--promo-mobile-fit, var(--promo-fit, cover)); object-position:var(--promo-mobile-position, var(--promo-position, center center)); }
    .home-category-products { gap:8px; }
    .home-category-products-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .home-category-products-bottom { margin-top:8px; }
    .home-category-products-all { margin-top:0; }
    .home-category-unified > .p-card:nth-of-type(n+7),
    .home-category-products-all > .p-card:nth-child(n+7) { display:none !important; }
    .home-category-view-all { margin-top:11px; }
    .home-category-view-all a { width:auto; min-width:88px; min-height:33px; padding:6px 12px; font-size:11.5px; border-radius:8px; }
    .home-deals-grid > .p-card:nth-child(n+7) { display:none !important; }
    .featured-cats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .featured-cat figure { height: 40px; }
    .featured-cat p { font-size: 11px; margin-top: 4px; }
    .hero-side { grid-template-columns: 1fr; }
    .hero-slide { padding: 18px 18px 34px; }
    .hero-slide-kicker { font-size: 10px; padding: 4px 11px; margin-bottom: 8px; }
    .hero-slide-title { font-size: 18px; margin-bottom: 10px; }
    .hero-slide-price { margin-bottom: 12px; }
    .hero-slide-price .now { font-size: 17px; }
    .hero-slide-price .was { font-size: 12px; }
    .hero-slide-cta { padding: 9px 18px; font-size: 12.5px; }
    .hero-slide-img img { max-height: 165px; }
    .hero-slider { min-height: 340px; }

    /* Compact header */
    .header-inner { padding: 10px 12px; gap: 10px; }
    .logo { gap: 7px; }
    .logo-word strong { font-size: 14.5px; }
    .logo-word span { font-size: 10px; }
    .logo-mark { width: 30px; height: 30px; font-size: 11px; }
    .icon-btn { width: 36px; height: 36px; }
    .icon-btn svg { width: 17px; height: 17px; }
    .cart-count { min-width: 17px; height: 17px; font-size: 9.5px; padding: 0 4px; border-width: 1.5px; }
    .header-link { font-size: 12px; }
    .header-link .hl-icon { font-size: 17px; }
    .header-actions { gap: 10px; margin-left: auto; }
    .search-form { height: 38px; border-radius: 8px; }
    .search-form input { font-size: 12.5px; padding: 0 13px; }
    .search-form button { padding: 0 12px; }
    .search-form button svg { width: 17px; height: 17px; }

    /* Category nav: all categories visible, small thin text */
    .nav-inner { padding: 4px 0; }
    .nav-link { font-size: 11.5px; font-weight: 400; padding: 5px 7px; gap: 3px; }
    .nav-caret { font-size: 7px; }
    .nav-dropdown a { font-size: 12px; padding: 8px 14px; }

    .section-head { margin-bottom: 14px; }
    .section-head h2, .section-title { font-size: 18px; }
    .featured-title { font-size: 20px !important; }
    .all-products-link { padding: 5px 12px; font-size: 11px; }
    .p-card { padding: 10px; }
    .p-badge { font-size: 10.5px; height: 20px; padding: 0 8px; }
    .p-card-icons button { width: 24px; height: 24px; }
    .p-card-icons svg { width: 12px; height: 12px; }
    .p-card-title { font-size: 12.5px; line-height: 1.45; min-height: 36px; }
    .p-price { gap: 7px; }
    .p-price .now { font-size: 15px; }
    .p-price .was { font-size: 11px; }
    .p-rating-count { font-size: 11px; }
    .p-stars svg { width: 12px; height: 12px; }
    .marquee-strip span { font-size: 15px; }
    .article h1, .article h2 { font-size: 17px; }
    .footer-grid { grid-template-columns: 1fr; gap: 22px; font-size: 13px; }
    .site-footer h3, .site-footer h4 { font-size: 12px; }
    .footer-bottom { font-size: 12px; }

    /* Product detail mobile */
    .pd-title { font-size: 19px; }
    .pd-price { font-size: 26px; }
    .pd-was { font-size: 15px; }
    .pd-actions { flex-wrap: wrap; }
    .pd-btn { font-size: 14px; height: 48px; }
    .pd-btn-wish { flex-basis: 48px; height: 48px; }
    .pd-trust { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pd-trust-card { padding: 12px 8px; }
    .pd-trust-card .pd-trust-title { font-size: 11.5px; }
    .pd-trust-card p { font-size: 10.5px; }
    .pd-tab { padding: 10px 13px; font-size: 13px; }
    .pd-tab-panel { padding: 16px; }
    .pd-specs td:first-child { width: 130px; }
}

/* Keep the marketplace refresh after the legacy rules so the cascade is deterministic. */
.nav-primary { font-weight: 700; }
.nav-link.active { color: var(--primary); }
.mobile-category-trigger, .mobile-category-panel, .mobile-bottom-nav { display: none; }
.p-card { border: 1px solid #eceef2; border-radius: 8px; padding: 10px; box-shadow: 0 2px 8px rgba(16,24,40,.035); }
.p-card:hover { border-color: #d7dce3; box-shadow: 0 8px 22px rgba(16,24,40,.09); transform: translateY(-2px); }
.p-card-img { overflow: hidden; border-radius: 6px; }
.p-card-img img { transition: transform .28s ease; }
.p-card:hover .p-card-img img { transform: scale(1.035); }
.p-card-title { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.p-price .now { color: #e42313; font-size: 18px; }
.p-badge { border-radius: 4px; background: #e42313; }
.pd-layout { background: #fff; border-radius: 10px; padding: 24px; border: 1px solid #e8eaee; box-shadow: 0 3px 14px rgba(16,24,40,.04); }
.pd-image { border: 1px solid #edf0f3; border-radius: 8px; }
.pd-title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.2px; }
.pd-price { color: #e42313; }
.pd-btn-buy { background: #e42313; border-radius: 6px; }
.pd-btn-buy:hover { background: #c91c0d; }
.pd-btn-cart { color: #e42313; border-color: #e42313; border-radius: 6px; }
.pd-btn-cart:hover { background: #fff4f2; border-color: #e42313; }
.pd-tab-panel { border: 1px solid #e8eaee; border-radius: 8px; }

@media (max-width: 767px) {
    body { padding-bottom: 72px; background: #f5f6f8; }
    body.category-panel-open { overflow: hidden; }
    .container { padding-left: 12px; padding-right: 12px; }
    .site-header { position: sticky; top: 0; z-index: 90; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
    .header-inner { display: grid; grid-template-columns: 1fr auto; padding: 9px 12px 10px; }
    .logo-mark { width: 34px; height: 34px; }
    .header-link, .account-menu { display: none; }
    .header-actions { grid-column: 2; grid-row: 1; gap: 4px; }
    .header-actions .icon-btn { background: rgba(255,255,255,.14); color: #fff; }
    .search-form { grid-column: 1/-1; grid-row: 2; width: 100%; margin-top: 1px; height: 40px; }
    .nav-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
    .nav-inner::-webkit-scrollbar { display: none; }
    .nav-item { display: block; flex: 0 0 auto; }
    .nav-item .nav-link { display: flex; padding: 9px 8px; font-size: 12px; font-weight: 500; }
    .nav-item .nav-caret, .nav-item .nav-dropdown { display: none; }
    .nav-primary { display: flex; font-size: 12px; font-weight: 600; padding: 9px 8px; }
    .mobile-category-trigger { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; border: 0; background: transparent; padding: 9px 8px; font-size: 12px; font-weight: 600; }
    .mobile-category-panel { display: flex; position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.48); padding-top: 14vh; flex-direction:column; overscroll-behavior:contain; }
    .mobile-category-panel[hidden] { display: none; }
    .mobile-category-head, .mobile-category-grid { background: #fff; }
    .mobile-category-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 12px; border-radius: 18px 18px 0 0; }
    .mobile-category-head strong { font-size: 17px; }
    .mobile-category-head button { border: 0; background: #f1f3f5; width: 34px; height: 34px; border-radius: 50%; font-size: 24px; }
    .mobile-category-grid { max-height: calc(86vh - 62px); overflow-y: auto; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .mobile-category-group { border: 1px solid #eceef2; border-radius: 10px; padding: 12px; }
    .mobile-category-group a { display: block; padding: 4px 0; font-size: 11.5px; color: var(--muted); }
    .mobile-category-group .mobile-category-root { color: var(--dark); font-weight: 700; font-size: 13px; padding-bottom: 6px; }
    .mobile-bottom-nav { position: fixed; display: grid; grid-template-columns: repeat(5,1fr); left: 0; right: 0; bottom: 0; z-index: 150; height: 66px; background: rgba(255,255,255,.97); border-top: 1px solid #e6e8ec; box-shadow: 0 -5px 18px rgba(16,24,40,.08); padding: 6px 4px max(6px,env(safe-area-inset-bottom)); }
    .mobile-bottom-nav a, .mobile-bottom-nav button { position: relative; border: 0; background: transparent; color: #727986; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 10px; }
    .mobile-bottom-nav svg { width: 21px; height: 21px; }
    .mobile-bottom-nav .active { color: var(--primary); font-weight: 700; }
    .mobile-bottom-nav b { position: absolute; top: 0; left: 53%; min-width: 16px; height: 16px; border-radius: 9px; padding: 0 4px; background: #e42313; color: #fff; font-size: 9px; display: grid; place-items: center; }
    .hero-slider, .hero-slide { min-height: 250px; }
    .hero-side { display: none; }
    .featured-cats { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; }
    .featured-cat { min-width: 84px; }
    .page { padding-top: 12px; padding-bottom: 28px; }
    .pd-layout { padding: 0; border: 0; box-shadow: none; gap: 0; background: transparent; }
    .pd-image { border: 0; border-radius: 8px 8px 0 0; padding: 14px; }
    .pd-thumbs { background: #fff; margin-top: 0; padding: 8px; }
    .pd-info { background: #fff; padding: 16px 14px; border-radius: 0 0 8px 8px; }
    .pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pd-btn-wish { display: none; }
    .pd-trust { grid-template-columns: 1fr; }
    .pd-trust-card { display: grid; grid-template-columns: 32px 1fr; text-align: left; align-items: center; }
    .pd-trust-card .ti { grid-row: 1/3; margin: 0; }
    .cms-page { margin-top:12px; padding:18px 14px; border-radius:8px; }
    .cms-page h1 { font-size:23px; }
    .cart-table { display:block; overflow-x:auto; white-space:nowrap; }
    .checkout-form,.checkout-summary,.auth-box { padding:16px; }
}

/* Skip layout/paint work for below-the-fold homepage content until needed. */
.home-section, .article { content-visibility:auto; contain-intrinsic-size:1px 620px; }

/* Final mobile navigation/footer layout. Keep the top bar short and predictable. */
@media (max-width: 767px) {
    .main-nav { position: relative; z-index: 80; }
    .nav-inner {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        padding: 0 8px;
        gap: 0;
    }
    .nav-inner > .nav-item { display: none; }
    .nav-inner > .nav-primary { display: none; }
    .nav-primary, .mobile-category-trigger {
        width: 100%;
        min-width: 0;
        height: 44px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
    .mobile-category-trigger { border-left: 0; justify-content:flex-start; gap:9px; padding:0 14px; }
    .browse-category-icon { font-size:17px; line-height:1; }
    .browse-category-caret { margin-left:auto; transition:transform .2s ease; }
    .mobile-category-trigger[aria-expanded="true"] .browse-category-caret { transform:rotate(180deg); }
    .mobile-category-trigger[aria-expanded="true"] { color: var(--primary); background: var(--primary-light); }

    .mobile-category-panel {
        padding-top: 0;
        justify-content: flex-end;
    }
    .mobile-category-head {
        padding: 14px 16px 10px;
        border-radius: 18px 18px 0 0;
    }
    .mobile-category-head strong { font-size: 18px; }
    .mobile-category-grid {
        width: 100%;
        max-height: 70vh;
        display: block;
        padding: 4px 12px calc(18px + env(safe-area-inset-bottom));
    }
    .mobile-category-group { display: none; }
    .mobile-category-card {
        min-width: 0;
        min-height: 112px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 5px;
        padding: 10px 5px 8px;
        border: 1px solid #e8ebef;
        border-radius: 10px;
        background: #fff;
        color: var(--dark);
    }
    .mobile-category-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: #f6f7f9;
        overflow: hidden;
        color: var(--primary);
        font-weight: 800;
    }
    .mobile-category-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
    .mobile-category-card strong { font-size: 11px; line-height: 1.25; }
    .mobile-category-card small { font-size: 8.5px; color: var(--muted); line-height: 1.15; }
    .mobile-category-list-item { border-bottom:1px solid #eceef2; }
    .mobile-category-row { display:flex; align-items:center; min-height:64px; }
    .mobile-category-parent { min-width:0; flex:1; display:flex; align-items:center; gap:11px; padding:8px 0; color:var(--dark); }
    .mobile-category-parent .mobile-category-icon { width:46px; height:46px; flex:0 0 46px; border-radius:9px; }
    .mobile-category-parent > span:last-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
    .mobile-category-parent strong { font-size:13px; line-height:1.25; }
    .mobile-category-parent small { font-size:9.5px; color:var(--muted); }
    .mobile-subcategory-toggle { width:38px; height:38px; display:grid; place-items:center; border:1px solid #e5e9f0; border-radius:10px; background:#fff; color:#6b7585; transition:border-color .2s, color .2s, transform .2s; }
    .mobile-subcategory-toggle svg { width:19px; height:19px; transition:transform .2s ease; }
    .mobile-subcategory-toggle[aria-expanded="true"] { border-color:color-mix(in srgb, var(--primary) 30%, #fff); color:var(--primary); background:var(--primary-light, #fff5ed); }
    .mobile-subcategory-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
    .mobile-category-arrow { width:38px; height:38px; display:grid; place-items:center; color:#9aa4b2; }
    .mobile-category-arrow svg { width:19px; height:19px; }
    .mobile-subcategory-list { margin:0 0 8px 57px; padding:4px 0 5px; border-left:2px solid var(--primary-light, #fff0e5); }
    .mobile-subcategory-list[hidden] { display:none; }
    .mobile-subcategory-list a { display:flex; align-items:center; gap:10px; min-height:46px; margin-left:10px; padding:6px 8px; color:#344257; font-size:12.5px; font-weight:600; border-radius:9px; }
    .mobile-subcategory-list a:hover { background:#f7f9fc; color:var(--primary); }
    .mobile-subcategory-list a b { margin-left:auto; color:#a3a8b0; font-size:16px; }
    .mobile-subcategory-icon {
        width:32px; height:32px; flex:0 0 32px; border-radius:7px; overflow:hidden;
        background:#f4f5f7; display:flex; align-items:center; justify-content:center;
        font-size:9.5px; font-weight:700; color:var(--muted); letter-spacing:.3px;
    }
    .mobile-subcategory-icon img { width:100%; height:100%; object-fit:contain; padding:3px; }

    .site-footer { margin-top: 28px; }
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 20px;
        padding: 24px 16px 20px;
        font-size: 11px;
        line-height: 1.4;
    }
    .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; }
    .footer-brand .logo { grid-row: 1 / span 4; margin: 0; }
    .footer-brand p { margin: 2px 0; }
    .footer-brand .logo-word strong { font-size: 14px; }
    .footer-brand .logo-word span { font-size: 9px; }
    .site-footer h3, .site-footer h4 { font-size: 10px; margin-bottom: 7px; letter-spacing: .8px; }
    .site-footer li { padding: 2px 0; }
    .footer-bottom { padding: 10px 0; font-size: 10px; }
}

@media (max-width: 360px) {
    .nav-inner { grid-template-columns: 1fr; }
    .mobile-category-trigger { font-size: 11px; padding: 0 12px; }
    .footer-grid { gap: 16px 12px; padding-left: 12px; padding-right: 12px; }
    .mobile-category-grid { padding-left:10px; padding-right:10px; }
}

/* ============ LM logo palette & live-site mobile header ============ */
.site-header { background:#fff; border-bottom:1px solid #edf0f4; }
.header-inner { min-height:78px; padding-top:10px; padding-bottom:10px; }
.header-inner .logo { width:280px; }
.site-header .site-logo-image { width:100%; height:68px; max-height:68px; object-fit:cover; object-position:center; background:transparent; border-radius:0; }
.search-form { border:1px solid #dfe3e9; box-shadow:0 2px 8px rgba(7,29,76,.04); }
.search-form button { width:50px; justify-content:center; background:var(--accent); color:#fff; }
.search-form button:hover { color:#fff; background:#e94d00; }
.header-actions { color:var(--brand-navy); }
.header-link { color:var(--brand-navy); }
.icon-btn { background:var(--brand-pale); color:var(--brand-navy); }
.cart-count { background:var(--accent); }
.main-nav { background:var(--brand-pale); box-shadow:0 1px 0 #dce9f9; }
.nav-link { color:var(--brand-navy); }
.nav-link:hover,.nav-link.active { color:var(--accent); }
.nav-primary:first-child { color:var(--accent); }
.mobile-category-trigger { color:var(--brand-navy); }
.mobile-category-trigger .browse-category-icon { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; }
.p-price .now,.pd-price { color:var(--accent); }
.p-badge,.pd-btn-buy { background:var(--accent); }
.pd-btn-cart { color:var(--accent); border-color:var(--accent); }
.site-footer { background:var(--brand-navy); }
.footer-bottom { background:#041432; }
.site-footer .site-logo-image { width:260px; height:125px; object-fit:cover; object-position:center; background:transparent; border-radius:0; }
.lm-ai-float {
    position:fixed; right:20px; bottom:20px; z-index:145;
    width:82px; height:82px; padding:0;
    display:grid; place-items:center;
    border:0; border-radius:50%; background:transparent;
    color:#fff; cursor:pointer;
    filter:drop-shadow(0 10px 18px rgba(7,29,76,.25));
    transition:transform .2s ease,filter .2s ease;
}
.lm-ai-float:hover { transform:translateY(-3px) scale(1.03); filter:drop-shadow(0 14px 22px rgba(7,29,76,.34)); }
.lm-ai-avatar { display:block; width:100%; height:100%; object-fit:contain; }
.lm-ai-panel { position:fixed; inset:0; z-index:320; }
.lm-ai-panel[hidden] { display:none; }
.lm-ai-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(5,16,39,.34); backdrop-filter:blur(2px); }
.lm-ai-dialog {
    position:absolute; right:20px; bottom:84px; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto;
    width:min(390px,calc(100vw - 32px)); height:min(590px,calc(100dvh - 120px));
    overflow:hidden; border:1px solid rgba(7,29,76,.12); border-radius:20px; background:#fff;
    box-shadow:0 24px 70px rgba(7,29,76,.28); transform-origin:right bottom;
    animation:lmAiOpen .2s ease-out both;
}
@keyframes lmAiOpen { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.lm-ai-head {
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:13px 14px; color:#fff;
    background:linear-gradient(135deg,#071d4c 0%,#0b4290 72%,#087ff5 100%);
}
.lm-ai-head-brand { display:flex; align-items:center; gap:10px; }
.lm-ai-head-brand .lm-ai-avatar { flex:0 0 46px; width:46px; height:46px; filter:drop-shadow(0 3px 7px rgba(0,0,0,.2)); }
.lm-ai-head-brand strong,.lm-ai-head-brand small { display:block; }
.lm-ai-head-brand strong { color:#fff; font-size:15px; }
.lm-ai-head-brand small { display:flex; align-items:center; gap:5px; margin-top:2px; color:#cbdcf8; font-size:10.5px; }
.lm-ai-head-brand small i { width:7px; height:7px; border-radius:50%; background:#38d985; box-shadow:0 0 0 3px rgba(56,217,133,.16); }
.lm-ai-head-actions { display:flex; align-items:center; gap:6px; }
.lm-ai-reset,.lm-ai-close {
    display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%;
    background:rgba(255,255,255,.13); color:#fff; cursor:pointer;
}
.lm-ai-reset { font-size:17px; }
.lm-ai-reset:hover,.lm-ai-close:hover { background:rgba(255,255,255,.22); }
.lm-ai-close {
    font-size:25px; line-height:1;
}
.lm-ai-body { overflow:auto; overscroll-behavior:contain; padding:18px 15px; background:linear-gradient(#f4f8ff,#fff); scrollbar-width:thin; scrollbar-color:#c4d5ed transparent; }
.lm-ai-message-row { display:flex; align-items:flex-end; gap:7px; margin:0 0 10px; }
.lm-ai-message-row.user { justify-content:flex-end; }
.lm-ai-message-avatar { flex:0 0 27px; width:27px; height:27px; object-fit:contain; border-radius:50%; filter:drop-shadow(0 2px 5px rgba(7,29,76,.14)); }
.lm-ai-message {
    width:88%; padding:13px 14px; border:1px solid #dce8f8; border-radius:5px 16px 16px 16px;
    background:#fff; color:#2b3a50; box-shadow:0 5px 18px rgba(7,29,76,.06);
}
.lm-ai-message-row.user .lm-ai-message { width:auto; max-width:82%; border-color:#0b65c9; border-radius:16px 5px 16px 16px; background:linear-gradient(135deg,#087ff5,#0b5abb); }
.lm-ai-message-row.user .lm-ai-message p { color:#fff; }
.lm-ai-message strong { display:block; margin-bottom:5px; color:#071d4c; font-size:13.5px; }
.lm-ai-message p { margin:0; color:#526176; font-size:12.5px; line-height:1.58; white-space:pre-line; }
.lm-ai-message .lm-ai-follow-up { margin-top:8px; padding-top:8px; border-top:1px dashed #d9e4f2; color:#174b90; font-weight:600; }
.lm-ai-products { display:grid; gap:7px; margin:0 0 10px 34px; }
.lm-ai-product {
    display:grid; grid-template-columns:68px minmax(0,1fr); gap:10px; align-items:center;
    min-width:0; padding:7px; border:1px solid #dce6f3; border-radius:13px; background:#fff;
    color:#24324a; text-decoration:none; box-shadow:0 4px 14px rgba(7,29,76,.05);
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.lm-ai-product:hover { border-color:#ff9f6f; transform:translateY(-1px); box-shadow:0 7px 18px rgba(7,29,76,.09); }
.lm-ai-product-media { display:grid; place-items:center; width:68px; height:68px; overflow:hidden; border-radius:9px; background:#f7f9fc; }
.lm-ai-product-media img { display:block; width:100%; height:100%; object-fit:contain; }
.lm-ai-product-info { display:block; min-width:0; }
.lm-ai-product-info strong { display:-webkit-box; overflow:hidden; color:#17243a; font-size:11.5px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.lm-ai-product-price { display:flex; align-items:center; gap:7px; margin-top:5px; }
.lm-ai-product-price b { color:var(--accent); font-size:14px; }
.lm-ai-product-price del { color:#9099a8; font-size:10px; }
.lm-ai-product-info small { display:block; margin-top:3px; color:#128b59; font-size:9.5px; text-transform:none; }
.lm-ai-product-info small.out-of-stock { color:#c43e3e; }
.lm-ai-feedback { display:flex; justify-content:flex-start; gap:4px; margin:-6px 0 10px 34px; }
.lm-ai-feedback button { width:28px; height:25px; padding:0; border:1px solid #dde5ef; border-radius:8px; background:#fff; font-size:12px; cursor:pointer; }
.lm-ai-feedback button:hover,.lm-ai-feedback button.selected { border-color:#91bdf2; background:#eaf4ff; }
.lm-ai-feedback button:disabled { cursor:default; opacity:.7; }
.lm-ai-typing { display:flex; align-items:center; gap:4px; width:auto; padding:12px 14px; }
.lm-ai-typing i { width:6px; height:6px; border-radius:50%; background:#4e78ab; animation:lmAiTyping 1.05s ease-in-out infinite; }
.lm-ai-typing i:nth-child(2) { animation-delay:.14s; }
.lm-ai-typing i:nth-child(3) { animation-delay:.28s; }
@keyframes lmAiTyping { 0%,60%,100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-4px); opacity:1; } }
.lm-ai-error { margin:0 0 10px 34px; padding:9px 11px; border:1px solid #ffd4c4; border-radius:10px; background:#fff5f1; color:#b83b0c; font-size:11px; line-height:1.45; }
.lm-ai-quick { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.lm-ai-quick button {
    padding:7px 10px; border:1px solid #ceddf1; border-radius:999px; background:#fff;
    color:#174b90; font:600 11px/1.3 var(--font-body); cursor:pointer;
}
.lm-ai-quick button:hover { border-color:#ff7a32; color:#d84a00; background:#fff7f1; }
.lm-ai-compose {
    display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px;
    padding:11px 12px 7px; border-top:1px solid #edf1f6; background:#fff;
}
.lm-ai-compose input {
    min-width:0; height:42px; padding:0 13px; border:1px solid #d7e0ec; border-radius:12px;
    outline:none; color:#24324a; font:inherit; font-size:12.5px;
}
.lm-ai-compose input:focus { border-color:#087ff5; box-shadow:0 0 0 3px rgba(8,127,245,.1); }
.lm-ai-compose button {
    display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:12px;
    background:#ff5a0a; color:#fff; cursor:pointer;
}
.lm-ai-compose button:hover { background:#e94d00; }
.lm-ai-compose input:disabled,.lm-ai-compose button:disabled { cursor:wait; opacity:.62; }
.lm-ai-compose button svg { width:19px; height:19px; }
.lm-ai-note { margin:0; padding:0 13px 10px; color:#8a95a5; background:#fff; font-size:9px; text-align:center; }
.lm-ai-note a { color:#607087; text-decoration:underline; }
body.lm-ai-open { overflow:hidden; }

@media (max-width: 767px) {
    .site-header { background:#fff; }
    .header-inner {
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-rows:46px 40px;
        gap:7px 8px;
        padding:7px 12px 9px;
    }
    .header-inner .logo { width:min(205px, 100%); height:44px; }
    .site-header .site-logo-image { width:100%; height:50px; max-height:50px; object-fit:cover; object-position:center; }
    .header-actions { grid-column:2; grid-row:1; gap:6px; }
    .header-actions .header-link { display:none; }
    .header-actions .icon-btn { display:flex; width:38px; height:38px; background:var(--brand-pale); color:var(--brand-navy); }
    .account-menu { display:block; }
    .account-menu .account-dropdown { display:none; }
    .search-form { grid-column:1/-1; grid-row:2; height:40px; margin:0; border-radius:22px; background:#f7f9fc; }
    .search-form input { background:transparent; padding-left:16px; font-size:12px; }
    .search-form button { width:44px; padding:0; border-radius:50%; flex:0 0 40px; }
    .main-nav { background:var(--brand-pale); }
    .nav-inner { padding:5px 12px; }
    .mobile-category-trigger { height:38px; border-radius:20px; background:#fff; padding:0 12px 0 6px; box-shadow:0 1px 4px rgba(7,29,76,.08); }
    .mobile-category-trigger[aria-expanded="true"] { background:#fff; color:var(--accent); }
    .mobile-category-trigger .browse-category-icon { width:29px; height:29px; font-size:15px; }
    .mobile-category-head { border-top:4px solid var(--accent); }
    .mobile-category-icon { background:var(--brand-pale); }
    .mobile-category-parent strong { color:var(--brand-navy); }
    .mobile-subcategory-toggle[aria-expanded="true"] { color:var(--accent); }
    .mobile-bottom-nav .active { color:var(--brand-blue); }
    .lm-ai-float { right:12px; bottom:88px; width:66px; height:66px; z-index:160; }
    .lm-ai-dialog { right:8px; bottom:78px; width:calc(100vw - 16px); height:min(620px,calc(100dvh - 94px)); border-radius:18px; }
    .lm-ai-body { padding:14px 12px; }
    .lm-ai-products,.lm-ai-feedback,.lm-ai-error { margin-left:33px; }
    .site-footer .site-logo-image { width:190px; height:auto; max-height:48px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}


/* Mobile filter drawer */
.mobile-filter-drawer, .shop-mobile-toolbar-actions { display: none; }
/* The HTML hidden attribute must always win over the mobile drawer layout rule. */
.mobile-filter-drawer[hidden] { display: none !important; }

@media (max-width: 767px) {
    .page { padding-top: 14px; }
    .shop-layout { display: block; }
    .shop-sidebar { display: none; }
    body.filter-drawer-open { overflow: hidden; }
    .shop-toolbar { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; margin-bottom:14px; }
    .shop-toolbar .page-title { grid-column:1 / -1; font-size:25px; margin:0; }
    .shop-mobile-toolbar-actions { display:block; }
    .mobile-filter-trigger { display:flex; align-items:center; justify-content:center; gap:7px; min-width:122px; height:40px; border:0; border-radius:999px; background:#111827; color:#fff; font:inherit; font-size:13px; font-weight:700; }
    .mobile-filter-trigger svg { width:17px; height:17px; }
    .orderby-form select { height:40px; min-width:142px; padding:0 30px 0 13px; border-radius:999px; font-size:13px; }
    .mobile-filter-drawer { display:block; position:fixed; z-index:500; inset:0; }
    .mobile-filter-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(15,23,42,.48); }
    .mobile-filter-sheet { position:absolute; inset:0 auto 0 0; width:min(87vw,360px); overflow-y:auto; background:#fff; box-shadow:8px 0 30px rgba(0,0,0,.2); }
    .mobile-filter-sheet-head { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid #e9edf2; font-size:20px; color:#151b27; }
    .mobile-filter-sheet-head button { width:34px; height:34px; border:0; border-radius:50%; background:#f3f4f6; color:#111827; font-size:28px; line-height:1; }
    .mobile-filter-form { padding-bottom:88px; }
    .filter-group { border-bottom:1px solid #e9edf2; }
    .filter-group summary { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 20px; color:#161b25; font-size:16px; font-weight:750; list-style:none; cursor:pointer; }
    .filter-group summary::-webkit-details-marker { display:none; }
    .filter-group summary span { font-size:20px; font-weight:400; transition:transform .2s ease; }
    .filter-group:not([open]) summary span { transform:rotate(180deg); }
    .filter-group-body { padding:0 20px 20px; }
    .filter-price-inputs { display:grid; grid-template-columns:1fr 14px 1fr; align-items:center; gap:6px; }
    .filter-price-inputs input { min-width:0; height:45px; padding:0 12px; border:1px solid #d9dde3; border-radius:8px; font:inherit; font-size:14px; }
    .filter-price-inputs i { color:#98a0ac; font-style:normal; text-align:center; }
    .filter-price-note { margin:11px 0 0; color:#647084; font-size:12px; }
    .filter-brand-list { display:grid; gap:13px; }
    .filter-brand-list label { display:flex; align-items:center; gap:10px; color:#1f2937; font-size:15px; }
    .filter-brand-list input { width:20px; height:20px; margin:0; accent-color:var(--primary); }
    .mobile-filter-actions { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-top:1px solid #e9edf2; background:#fff; }
    .mobile-filter-actions a { color:#667085; font-size:13px; font-weight:700; }
    .mobile-filter-actions .btn { min-height:42px; padding:0 18px; font-size:13px; }
}

/* Final mobile-home polish: never clip category cards and keep campaign badges compact. */
@media (max-width: 767px) {
    .featured-cats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }
    .featured-cat {
        min-width: 0;
        min-height: 108px;
        padding: 10px 5px 8px;
        border-radius: 10px;
    }
    .featured-cat figure { height: 46px; }
    .featured-cat p { font-size: 10.5px; line-height: 1.28; margin-top: 6px; }
    .hero-slide-kicker {
        max-width: 100%;
        white-space: nowrap;
        font-size: 8.5px;
        letter-spacing: .45px;
        padding: 5px 10px;
        margin-bottom: 9px;
    }
}

/* Shop controls: restrained, compact hierarchy on phone and tablet widths. */
@media (max-width: 900px) {
    .shop-toolbar {
        gap: 9px;
        margin-bottom: 12px;
    }
    .shop-toolbar .page-title {
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 1.22;
        letter-spacing: -.55px;
    }
    .mobile-filter-trigger {
        min-width: 104px;
        height: 36px;
        padding: 0 15px;
        gap: 6px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
    }
    .mobile-filter-trigger svg {
        width: 15px;
        height: 15px;
        stroke-width: 1.8;
    }
    .orderby-form select {
        height: 36px;
        min-width: 136px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .shop-toolbar .page-title { font-size: 19px !important; }
}


/* Product copy hierarchy: readable regular-weight title and description. */
.pd-title { font-weight: 500; letter-spacing: -.35px; }
.pd-tab-panel { color: #4b5563; font-size: 14px; font-weight: 400; line-height: 1.75; }
.pd-tab-panel p { font-weight: 400; }
.pd-tab-panel strong { font-weight: 500; color: #273244; }
@media (max-width: 767px) {
    .pd-title { font-size: 18px; font-weight: 500; line-height: 1.4; }
    .pd-tab-panel { font-size: 13.5px; line-height: 1.7; }
}

/* Force lighter product copy after legacy CSS overrides. */
.pd-info .pd-title { font-weight: 400 !important; }
.pd-tab-panel, .pd-tab-panel p { font-weight: 400 !important; }
@media (max-width: 767px) {
    .pd-info .pd-title { font-size: 17px; font-weight: 400 !important; letter-spacing: -.2px; }
    .pd-seller-row, .pd-rating { font-weight: 400; }
}

/* Premium floating mobile navigation dock. */
@media (max-width: 767px) {
    body { padding-bottom: 84px; }
    .mobile-bottom-nav {
        left: 12px;
        right: 12px;
        /* iOS Chrome over-reports safe-area-inset-bottom while its own bottom toolbar is shown,
           which lifted the dock too high and left a gap. JS (visual-viewport pin) keeps it glued
           to the visible bottom on iOS; this is the fallback base offset. */
        bottom: max(6px, calc(env(safe-area-inset-bottom) - 20px));
        height: 68px;
        padding: 5px 7px;
        border: 1px solid rgba(220, 225, 234, .92);
        border-radius: 22px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 12px 32px rgba(15, 27, 51, .18), 0 2px 7px rgba(15, 27, 51, .08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        min-width: 0;
        border-radius: 14px;
        color: #737b89;
        font-size: 10px;
        font-weight: 600;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .mobile-bottom-nav a > svg,
    .mobile-bottom-nav button > svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.15;
        transition: transform .2s ease;
    }
    .mobile-bottom-nav a > span,
    .mobile-bottom-nav button > span { margin-top: 2px; }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: var(--primary);
        background: var(--primary-light);
        font-weight: 750;
    }
    .mobile-bottom-nav a.active > svg { transform: translateY(-1px); }
    .mobile-bottom-nav a:nth-child(3) {
        position: relative;
        align-self: start;
        width: 58px;
        height: 58px;
        margin: -24px auto 0;
        padding-top: 7px;
        border: 5px solid #f5f6f8;
        border-radius: 50%;
        background: #fff;
        color: #687283;
        box-shadow: 0 5px 14px rgba(15, 27, 51, .14);
    }
    .mobile-bottom-nav a:nth-child(3) > svg { width: 25px; height: 25px; }
    .mobile-bottom-nav a:nth-child(3) > span { position: absolute; top: 63px; left: 50%; transform: translateX(-50%); color: #737b89; white-space: nowrap; }
    .mobile-bottom-nav a:nth-child(3).active {
        background: var(--gradient);
        color: #fff;
        border-color: #f5f6f8;
        box-shadow: 0 8px 19px rgba(255, 106, 0, .35);
    }
    .mobile-bottom-nav a:nth-child(3).active > span { color: var(--primary); font-weight: 750; }
    .mobile-bottom-nav b {
        top: -5px;
        left: 58%;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid #fff;
        background: #ff4c18;
        box-shadow: 0 2px 5px rgba(0,0,0,.14);
        font-size: 9px;
    }
    .whatsapp-float { bottom: 92px; right: 18px; }
}


/* Compact, legible mobile footer. */
@media (max-width: 767px) {
    .site-footer { margin-top: 34px; }
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
        padding: 28px 20px 22px;
        font-size: 12px;
        line-height: 1.5;
    }
    .footer-brand {
        grid-column: 1 / -1;
        display: block;
        padding: 0 0 20px;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .footer-brand .logo { display: block; margin: 0 0 12px; }
    .site-footer .site-logo-image { width: 170px; max-height: none; }
    .footer-brand p { margin: 4px 0; color: rgba(255,255,255,.82); }
    .footer-brand p:last-child { display: none; }
    .footer-links { min-width: 0; }
    .site-footer h3, .site-footer h4 { margin-bottom: 8px; color: #ffb57d; font-size: 10px; letter-spacing: 1px; }
    .site-footer li { padding: 3px 0; }
    .footer-about { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); }
    .footer-about ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .footer-about li { padding: 0; }
    .footer-bottom { padding: 13px 18px 84px; font-size: 10.5px; line-height: 1.4; }
    .whatsapp-float { bottom: 94px; }
}

/* Final mobile footer polish: no empty navy block; keep the brand mark readable. */
@media (max-width: 767px) {
    .footer-brand .logo {
        display: inline-flex;
        width: fit-content;
        padding: 6px 8px;
        border-radius: 10px;
        background: #fff;
    }
    .site-footer .site-logo-image { width: 166px; }
    .footer-bottom { padding: 14px 18px 18px; }
}
.pd-language-block{padding:16px 0;border-bottom:1px solid #e7ebf1}.pd-language-block:last-child{border-bottom:0}.pd-language-block h3{margin:0 0 9px;font-size:17px;color:#17233b}.pd-language-block div{color:#4b5563;line-height:1.8;white-space:normal}@media(max-width:767px){.pd-language-block{padding:13px 0}.pd-language-block h3{font-size:15px}}
.product-as-low-offer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:32px;margin:7px 7px -2px;padding:4px 7px;border-radius:7px 7px 11px 11px;overflow:hidden;background:linear-gradient(100deg,#47129a,#8b1ed1 52%,#142ca9);box-shadow:0 4px 9px rgba(82,22,155,.23);color:#fff;text-align:center}.product-as-low-offer:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(255,208,28,.92) 25% 28%,transparent 28% 72%,rgba(0,255,224,.6) 72% 75%,transparent 75%);opacity:.6}.product-as-low-offer>*{position:relative;z-index:1}.product-as-low-offer span{font-size:8px;font-weight:800;letter-spacing:.4px}.product-as-low-offer strong{font-size:18px;line-height:1;color:#ffe932;font-weight:900;letter-spacing:-.5px}.product-as-low-offer small{display:none}.pd-as-low-offer{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 11px;border-radius:8px;background:linear-gradient(105deg,#5215a5,#8b20cc,#172cac);color:#fff;box-shadow:0 6px 14px rgba(72,20,146,.22)}.pd-as-low-offer span{font-size:10px;font-weight:800;letter-spacing:.7px}.pd-as-low-offer strong{font-size:21px;color:#fff228;line-height:1}.pd-as-low-offer small{font-size:10px;opacity:.85}@media(max-width:767px){.product-as-low-offer{min-height:29px;margin:5px 5px -1px}.product-as-low-offer strong{font-size:14px}.product-as-low-offer span{font-size:7px}.pd-as-low-offer{padding:6px 9px;margin-bottom:10px}.pd-as-low-offer strong{font-size:17px}}
/* Dynamic offer ribbon — product-card promotional artwork */
.product-as-low-offer{width:72%;min-height:54px;margin:17px auto -5px;padding:7px 13px 7px 15px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:0;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);background:linear-gradient(100deg,#6813ba 0%,#4613a4 42%,#061f90 100%);box-shadow:none;overflow:visible;isolation:isolate}.product-as-low-offer:before{inset:auto auto auto -5%;width:112%;height:100%;background:linear-gradient(105deg,transparent 0 4%,#ff7b17 4% 5%,transparent 5% 11%,#ed28ff 11% 12%,transparent 12% 83%,#14e6cf 83% 86%,transparent 86%);opacity:1;z-index:-1}.product-as-low-offer:after{content:"";position:absolute;right:-12px;bottom:-6px;width:0;height:0;border-left:12px solid #ff6d00;border-top:9px solid transparent;border-bottom:9px solid transparent;transform:rotate(-18deg)}.product-as-low-offer span{font-size:10px;font-weight:900;letter-spacing:.25px;white-space:nowrap;color:#fff}.product-as-low-offer strong{font-size:28px;line-height:.9;font-weight:950;letter-spacing:-1.2px;color:#fff22c;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.12)}.product-as-low-offer strong em{font-size:12px;font-style:normal;letter-spacing:0;margin-right:2px;vertical-align:middle}.product-as-low-offer small{display:none}@media(max-width:767px){.product-as-low-offer{width:82%;min-height:38px;margin:10px auto -3px;padding:5px 8px;gap:4px}.product-as-low-offer span{font-size:7px}.product-as-low-offer strong{font-size:19px;letter-spacing:-.8px}.product-as-low-offer strong em{font-size:8px}}
/* Place automatic offer artwork on top of the product image, never above the image area. */
.p-card-img .product-as-low-offer{position:absolute;z-index:3;top:7%;left:50%;transform:translateX(-50%);width:72%;min-height:54px;margin:0}.p-card-img .product-as-low-offer:before{z-index:-1}@media(max-width:767px){.p-card-img .product-as-low-offer{top:7%;width:82%;min-height:38px}}
/* Final product-card offer placement: reserve clear image space, then place the ribbon there. */
.p-card-img.has-as-low-offer img{inset:12% 0 auto!important;width:100%!important;height:88%!important;object-fit:contain!important}.p-card-img.has-as-low-offer .product-as-low-offer{top:3%;width:64%;min-height:34px;padding:4px 8px 4px 15px;gap:5px;clip-path:polygon(2% 0,100% 0,97% 100%,0 100%)}.p-card-img.has-as-low-offer .product-as-low-offer span{font-size:8px}.p-card-img.has-as-low-offer .product-as-low-offer strong{font-size:19px;letter-spacing:-.7px}.p-card-img.has-as-low-offer .product-as-low-offer strong em{font-size:9px}.p-card-img.has-as-low-offer .product-as-low-offer:after{right:-8px;bottom:-4px;border-left-width:8px;border-top-width:6px;border-bottom-width:6px}@media(max-width:767px){.p-card-img.has-as-low-offer img{inset:11% 0 auto!important;height:89%!important}.p-card-img.has-as-low-offer .product-as-low-offer{top:2.5%;width:67%;min-height:27px;padding:3px 5px 3px 10px;gap:3px}.p-card-img.has-as-low-offer .product-as-low-offer span{font-size:6px}.p-card-img.has-as-low-offer .product-as-low-offer strong{font-size:15px;letter-spacing:-.55px}.p-card-img.has-as-low-offer .product-as-low-offer strong em{font-size:7px}}
/* LM premium offer ribbon — original brand treatment. */
.p-card-img.has-as-low-offer .product-as-low-offer{top:4%;width:66%;min-height:37px;padding:6px 10px 5px 17px;gap:6px;clip-path:polygon(3% 0,100% 0,96% 100%,0 100%);background:linear-gradient(105deg,#6d16c5 0%,#3d168e 46%,#092b7f 100%);border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 16px rgba(31,18,102,.22)}.p-card-img.has-as-low-offer .product-as-low-offer:before{inset:0;width:100%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,.14),transparent 31%,rgba(0,238,219,.22) 100%);z-index:0}.p-card-img.has-as-low-offer .product-as-low-offer:after{content:"";right:5%;bottom:-7px;width:28%;height:5px;border:0;background:linear-gradient(90deg,#13e0c7,#48f1e2);transform:skewX(-32deg)}.p-card-img.has-as-low-offer .product-as-low-offer>*{z-index:2}.p-card-img.has-as-low-offer .product-as-low-offer i{display:block;position:absolute;top:-9px;left:10px;padding:2px 6px;border-radius:3px;background:#ff5b18;color:#fff;font-size:6px;font-style:normal;font-weight:900;letter-spacing:.55px;line-height:1.2;box-shadow:0 3px 7px rgba(208,55,5,.28)}.p-card-img.has-as-low-offer .product-as-low-offer span{text-transform:uppercase;font-size:8px;font-weight:900;letter-spacing:.45px}.p-card-img.has-as-low-offer .product-as-low-offer strong{font-size:20px;color:#fff12d;letter-spacing:-.9px}.p-card-img.has-as-low-offer .product-as-low-offer strong em{font-size:8px;color:#fff;font-weight:800;margin-right:2px}.p-card-img.has-as-low-offer .product-as-low-offer small{display:none}@media(max-width:767px){.p-card-img.has-as-low-offer .product-as-low-offer{top:4%;width:68%;min-height:28px;padding:4px 6px 4px 12px;gap:3px}.p-card-img.has-as-low-offer .product-as-low-offer i{top:-7px;left:7px;font-size:5px;padding:1px 4px}.p-card-img.has-as-low-offer .product-as-low-offer span{font-size:6px;letter-spacing:.15px}.p-card-img.has-as-low-offer .product-as-low-offer strong{font-size:16px;letter-spacing:-.65px}.p-card-img.has-as-low-offer .product-as-low-offer strong em{font-size:6px}.p-card-img.has-as-low-offer .product-as-low-offer:after{bottom:-5px;height:3px}}
/* Mobile: compact offer art with enough horizontal room for every price. */
@media(max-width:767px){
  .p-card-img.has-as-low-offer img{inset:10% 0 auto!important;height:90%!important}
  .p-card-img.has-as-low-offer .product-as-low-offer{top:3%;width:76%;min-height:23px;padding:3px 5px 3px 9px;gap:2px}
  .p-card-img.has-as-low-offer .product-as-low-offer i{top:-6px;left:6px;padding:1px 3px;font-size:4.5px}
  .p-card-img.has-as-low-offer .product-as-low-offer span{font-size:5.4px;letter-spacing:0;white-space:nowrap}
  .p-card-img.has-as-low-offer .product-as-low-offer strong{font-size:13px;letter-spacing:-.45px;white-space:nowrap}
  .p-card-img.has-as-low-offer .product-as-low-offer strong em{font-size:5.5px;margin-right:1px}
  .p-card-img.has-as-low-offer .product-as-low-offer:after{bottom:-4px;height:2px;width:23%}
}

/* Genuine verified-purchase reviews. */
.pd-rating-live{display:inline-flex;align-items:center;gap:6px;color:#8a6200;text-decoration:none}.pd-rating-live span{color:#f59e0b;letter-spacing:1px}.p-stars svg.empty{opacity:.22}.pd-reviews{margin-top:25px;padding:21px;border:1px solid #e1e7ef;border-radius:14px;background:#fff}.pd-reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.pd-reviews-kicker{color:#176fd1;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.pd-reviews h2{margin:3px 0 0;font-size:21px;font-weight:600}.pd-review-score{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 8px}.pd-review-score strong{grid-row:1/3;font-size:28px}.pd-review-score span{color:#f59e0b;letter-spacing:1px}.pd-review-score small{color:#8894a4;font-size:9px}.pd-review-form{margin-bottom:16px;padding:15px;border:1px solid #dce7f7;border-radius:11px;background:#f8fbff}.pd-review-form-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:12px}.pd-review-form-head h3{margin:0;font-size:14px}.pd-review-form-head p{margin:3px 0 0;color:#748197;font-size:9px}.pd-review-form-head>span{align-self:flex-start;padding:5px 7px;border-radius:99px;background:#e7f8ef;color:#12884a;font-size:8px;font-weight:800;white-space:nowrap}.pd-review-fields{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;margin-bottom:10px}.pd-review-fields label{display:grid;gap:5px;color:#4f5e73;font-size:9px;font-weight:700}.pd-review-fields .full{grid-column:1/-1}.pd-review-fields input,.pd-review-fields select,.pd-review-fields textarea{width:100%;box-sizing:border-box;border:1px solid #d3dce7;border-radius:7px;background:#fff;font:inherit;font-size:11px}.pd-review-fields input,.pd-review-fields select{height:37px;padding:0 9px}.pd-review-fields textarea{min-height:94px;padding:9px;resize:vertical}.pd-review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pd-review-card{padding:14px;border:1px solid #e5eaf0;border-radius:10px;background:#fff}.pd-review-card-top{display:flex;justify-content:space-between;gap:10px}.pd-review-card-top strong{font-size:11px}.pd-review-card-top span{display:block;margin-top:3px;color:#168a4d;font-size:7.5px;font-weight:750}.pd-review-card-top time{color:#929cac;font-size:8px}.pd-review-stars{margin-top:8px;color:#f59e0b;letter-spacing:1px}.pd-review-card h3{margin:6px 0 3px;font-size:12px}.pd-review-card p{margin:0;color:#586579;font-size:10px;line-height:1.6}.pd-review-status,.pd-review-empty,.pd-review-alert{margin-bottom:14px;padding:11px 13px;border-radius:9px;background:#f6f8fb;color:#667286;font-size:10px}.pd-review-status a{color:#176fd1;font-weight:700}.pd-review-empty{display:grid;gap:3px;text-align:center}.pd-review-empty strong{color:#344054}.pd-review-alert.error{background:#fff1f1;color:#b42318}@media(max-width:767px){.pd-reviews{margin-top:16px;padding:14px;border-radius:11px}.pd-reviews-head{align-items:flex-start}.pd-reviews h2{font-size:17px}.pd-review-score strong{font-size:21px}.pd-review-score small{font-size:7.5px}.pd-review-fields{grid-template-columns:1fr}.pd-review-fields .full{grid-column:auto}.pd-review-list{grid-template-columns:1fr}.pd-review-form-head{display:block}.pd-review-form-head>span{display:inline-flex;margin-top:7px}}
/* Render off-screen catalogue cards later to keep scrolling and first paint responsive. */
@supports (content-visibility:auto){.product-grid .p-card{content-visibility:auto;contain-intrinsic-size:0 430px}}
/* Compact pagination: replaces unstyled framework pagination SVGs. */
.pagination-wrap{display:flex;justify-content:center;margin:26px 0 8px}.lm-pagination{display:flex!important;align-items:center;justify-content:center;gap:7px}.lm-page{display:grid;place-items:center;min-width:36px;height:36px;padding:0 9px;border:1px solid #dce2eb;border-radius:9px;background:#fff;color:#475569;font-size:14px;font-weight:750;line-height:1;text-decoration:none;transition:.18s}.lm-page:hover:not(.disabled):not(.active){border-color:var(--primary);color:var(--primary);background:#fff8f3}.lm-page.active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 12px rgba(255,106,0,.22)}.lm-page.disabled{color:#cbd5e1;background:#f8fafc;cursor:not-allowed}.lm-page.next,.lm-pagination .lm-page:first-child{font-size:24px;font-weight:400;padding-bottom:3px}.lm-ellipsis{color:#94a3b8;padding:0 1px}@media(max-width:767px){.pagination-wrap{margin:20px 0 4px}.lm-pagination{gap:5px}.lm-page{min-width:32px;height:32px;padding:0 7px;font-size:12px}.lm-page.next,.lm-pagination .lm-page:first-child{font-size:21px}}

/* Refined marketplace typography: clean, airy system sans (fast; no external font request). */
:root {
    --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
}
body {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: -.08px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Keep the visual hierarchy, but remove the unnecessarily heavy catalogue copy. */
.nav-primary, .nav-link, .mobile-category-trigger { font-weight: 500; }
.section-head h2, .section-title, .page-title { font-weight: 600; letter-spacing: -.55px; }
.p-card-title, .product-name {
    font-weight: 400;
    letter-spacing: -.12px;
    line-height: 1.48;
}
.p-card-title { font-size: 13.5px; }
.product-name { font-size: 14px; }
.p-rating-count, .product-sku, .p-price .was, .product-price del { font-weight: 400; }
.p-price .now, .product-price ins { font-weight: 700; letter-spacing: -.25px; }
.pd-info .pd-title, .product-detail-info h1 {
    font-weight: 400 !important;
    letter-spacing: -.62px;
    line-height: 1.32;
}
.pd-seller, .pd-visit, .pd-rating, .pd-checklist li, .pd-tab-panel { font-weight: 400; }
.pd-seller strong, .pd-visit { font-weight: 500; }
.pd-price { font-weight: 700; letter-spacing: -.7px; }
.pd-checklist .tick, .pd-seller .tick { font-weight: 600; }
@media (max-width: 767px) {
    .nav-primary, .nav-link, .mobile-category-trigger { font-weight: 500; }
    .section-head h2, .section-title, .page-title { font-weight: 600; letter-spacing: -.45px; }
    .p-card-title, .product-name { font-size: 12.5px; line-height: 1.46; }
    .pd-info .pd-title, .product-detail-info h1 { font-weight: 400 !important; letter-spacing: -.42px; }
}

/* Mobile page-heading scale — compact and light, with room for filters and long category names. */
@media (max-width: 767px) {
    .page-title,
    .shop-toolbar .page-title {
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.26;
        letter-spacing: -.55px;
    }
    .cms-page > h1,
    .auth-box h1,
    .order-success h1,
    .article h1 {
        font-size: 19px;
        font-weight: 400;
        line-height: 1.32;
        letter-spacing: -.45px;
    }
    .pd-info .pd-title,
    .product-detail-info h1 {
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 1.34;
    }
}

/* Compact, clean mobile banner type — no slanted/italic treatment. */
.hero-slide-text,
.hero-slide-kicker,
.hero-slide-title,
.hero-slide-price,
.hero-slide-cta { font-family: var(--font-body); font-style: normal; }
.hero-slide-price .now { transform: none; font-style: normal; }
@media (max-width: 767px) {
    .hero-slide { padding: 18px 20px 32px; gap: 10px; }
    .hero-slide-text { max-width: 53%; }
    .hero-slide-kicker {
        font-size: 8px;
        font-weight: 600;
        letter-spacing: .55px;
        padding: 4px 9px;
        margin-bottom: 8px;
    }
    .hero-slide-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.27;
        letter-spacing: -.28px;
        margin-bottom: 9px;
    }
    .hero-slide-price { gap: 8px; margin-bottom: 11px; }
    .hero-slide-price .now {
        font-size: 16px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 7px;
    }
    .hero-slide-price .was { font-size: 11px; font-weight: 400; }
    .hero-slide-cta {
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        padding: 9px 15px;
        border-radius: 8px;
        letter-spacing: 0;
    }
    .hero-slide-img { max-width: 43%; }
}

/* Final compact mobile hero: lower height, tighter top/bottom spacing and a smaller CTA. */
@media (max-width: 767px) {
    .hero-grid { margin-top: 10px; }
    .hero-slider { min-height: 250px; border-radius: 11px; }
    .hero-slide { padding: 12px 16px 26px; gap: 7px; }
    .hero-slide-text { max-width: 54%; }
    .hero-slide-kicker { font-size: 7px; padding: 3px 8px; margin-bottom: 6px; }
    .hero-slide-title { font-size: 13.5px; line-height: 1.25; margin-bottom: 7px; }
    .hero-slide-price { gap: 6px; margin-bottom: 8px; }
    .hero-slide-price .now { font-size: 14px; padding: 3px 8px; border-radius: 6px; }
    .hero-slide-price .was { font-size: 9.5px; }
    .hero-slide-cta { font-size: 10.5px; padding: 8px 12px; border-radius: 7px; }
    .hero-slide-img { max-width: 42%; }
    .hero-slide-img img { max-height: 145px; }
    .hero-dots { bottom: 9px; gap: 5px; }
    .hero-dot { width: 7px; height: 7px; }
    .hero-dot.active { width: 25px; }
}

/* Product assurance cards: two useful promises, side by side on mobile. */
@media (max-width: 767px) {
    .pd-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .pd-trust-card {
        display: grid;
        grid-template-columns: 25px minmax(0, 1fr);
        align-items: center;
        min-width: 0;
        padding: 10px 8px;
        text-align: left;
    }
    .pd-trust-card .ti { grid-row: 1 / 3; margin: 0; font-size: 17px; }
    .pd-trust-card .pd-trust-title { margin: 0 0 2px; font-size: 10.5px; line-height: 1.2; font-weight: 600; }
    .pd-trust-card p { font-size: 9.5px; line-height: 1.25; }
}

/* Compact category tiles — return to the simple original look with tighter spacing. */
@media (max-width: 767px) {
    .featured-cats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .featured-cat {
        position: static;
        isolation: auto;
        min-height: 94px;
        padding: 7px 4px 8px;
        justify-content: flex-start;
        overflow: hidden;
        border: 0;
        border-radius: 11px;
        background: #fff;
        box-shadow: none;
        transition: box-shadow .2s ease;
    }
    .featured-cat::before { content: none; }
    .featured-cat:active { transform: none; }
    .featured-cat figure {
        position: static;
        height: 46px;
        width: 46px;
        flex: 0 0 46px;
        margin: 0 0 5px;
        padding: 0;
    }
    .featured-cat img {
        width: 48px;
        max-width: 48px;
        max-height: 48px;
        height: 48px;
        object-fit: contain;
        filter: none;
    }
    .featured-cat p {
        position: static;
        margin: 0;
        display: -webkit-box;
        width: 100%;
        overflow: hidden;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.16;
        letter-spacing: -.18px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* Rich product description content */
.pd-language-block>div{line-height:1.75}.pd-language-block>div h2{margin:22px 0 10px;font-size:24px;font-weight:650}.pd-language-block>div h3{margin:18px 0 9px;font-size:20px;font-weight:650}.pd-language-block>div p{margin:0 0 13px}.pd-language-block>div ul,.pd-language-block>div ol{margin:10px 0 15px;padding-left:25px}.pd-language-block>div blockquote{margin:15px 0;padding:13px 16px;border-left:4px solid var(--primary);border-radius:0 8px 8px 0;background:#f5f8fc;color:#4d5b70}.pd-language-block>div img{display:block;max-width:100%;height:auto;margin:18px auto;border-radius:10px}.pd-language-block>div figure{margin:20px 0;text-align:center}.pd-language-block>div figcaption{margin-top:6px;color:#7c8798;font-size:12px}.pd-language-block>div table{width:100%;margin:15px 0;border-collapse:collapse}.pd-language-block>div th,.pd-language-block>div td{padding:10px;border:1px solid #e0e5eb;text-align:left}@media(max-width:600px){.pd-language-block>div h2{font-size:20px}.pd-language-block>div h3{font-size:17px}}

/* SEO catalogue landing architecture: category, brand and brand/category pages. */
.catalog-breadcrumb{display:flex;align-items:center;gap:7px;margin:0 0 13px;color:#7c8798;font-size:12px}.catalog-breadcrumb a{color:#526176;text-decoration:none}.catalog-breadcrumb a:hover{color:var(--primary)}
.catalog-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:13px;padding:24px 27px;overflow:hidden;border:1px solid #e3e9f2;border-radius:18px;background:linear-gradient(135deg,#fff 0,#f6f9ff 68%,#edf5ff 100%);box-shadow:0 12px 30px rgba(31,55,91,.06)}.catalog-hero:after{content:"";position:absolute;right:-60px;top:-90px;width:230px;height:230px;border:44px solid rgba(21,119,255,.055);border-radius:50%}.catalog-hero-copy{position:relative;z-index:1;max-width:790px}.catalog-eyebrow{display:block;margin-bottom:6px;color:#1475e8;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.catalog-hero h1{margin:0 0 8px;color:#111b2e;font-size:30px;line-height:1.16;font-weight:650;letter-spacing:-.025em}.catalog-hero p{max-width:760px;margin:0;color:#68758a;font-size:13px;line-height:1.6}.catalog-hero-stat{position:relative;z-index:1;display:flex;flex-direction:column;min-width:135px;padding:14px 17px;border:1px solid rgba(255,255,255,.9);border-radius:13px;background:rgba(255,255,255,.75);box-shadow:0 8px 22px rgba(35,66,108,.07);backdrop-filter:blur(10px)}.catalog-hero-stat strong{font-size:25px;line-height:1;color:#111b2e}.catalog-hero-stat span{margin-top:6px;color:#7e8998;font-size:10px}.catalog-related-links{display:flex;align-items:center;gap:7px;margin:0 0 13px;padding:10px 12px;overflow-x:auto;border:1px solid #e4e9f1;border-radius:12px;background:#fff;white-space:nowrap}.catalog-related-links>span{color:#8590a0;font-size:10px;font-weight:700;text-transform:uppercase}.catalog-related-links a{padding:7px 10px;border-radius:8px;background:#f2f6fb;color:#26364e;font-size:11px;font-weight:600;text-decoration:none}.catalog-related-links a:hover{background:#e8f2ff;color:#0875ed}.catalog-intro{margin:0 0 14px;padding:13px 16px;border-left:3px solid var(--primary);border-radius:4px 11px 11px 4px;background:#fff;color:#59677a;font-size:12px;line-height:1.65}.shop-result-summary{color:#7a8798;font-size:12px}.shop-result-summary strong{color:#18263b;font-size:14px}
.brand-directory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.brand-directory-card{display:grid;grid-template-columns:58px minmax(0,1fr) 18px;align-items:center;gap:13px;padding:13px;border:1px solid #e2e8f1;border-radius:14px;background:#fff;color:#17243a;text-decoration:none;box-shadow:0 8px 22px rgba(31,55,91,.045);transition:.18s ease}.brand-directory-card:hover{transform:translateY(-2px);border-color:#bcd8fb;box-shadow:0 13px 28px rgba(31,85,150,.1)}.brand-directory-logo{display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border-radius:11px;background:linear-gradient(135deg,#eff6ff,#f8f5ff);color:#1475e8;font-size:16px;font-weight:800}.brand-directory-logo img{width:100%;height:100%;object-fit:contain}.brand-directory-copy{min-width:0}.brand-directory-copy strong,.brand-directory-copy small{display:block}.brand-directory-copy strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.brand-directory-copy small{margin-top:4px;color:#8a96a7;font-size:10px}.brand-directory-arrow{color:#a3adba;font-size:22px}
.pd-product-meta{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 8px}.pd-product-meta>a,.pd-product-meta>span{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #e1e7ef;border-radius:8px;background:#fafbfd;color:#223149;text-decoration:none}.pd-product-meta span span{color:#8994a4;font-size:9px;text-transform:uppercase}.pd-product-meta strong{font-size:10px;font-weight:650}.pd-product-meta a:hover{border-color:#b7d6fb;color:#0875ed}.pd-brand-category-link{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px;padding:9px 11px;border-radius:9px;background:#eef6ff;color:#146fd2;font-size:11px;font-weight:650;text-decoration:none}.pd-brand-category-link span{font-size:18px;line-height:1}
@media(max-width:1000px){.brand-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.catalog-breadcrumb{margin-bottom:9px;font-size:10px}.catalog-hero{align-items:flex-start;margin-bottom:10px;padding:16px;border-radius:13px}.catalog-eyebrow{font-size:8px}.catalog-hero h1{font-size:20px;font-weight:600}.catalog-hero p{font-size:10.5px;line-height:1.5}.catalog-hero-stat{min-width:82px;padding:10px}.catalog-hero-stat strong{font-size:18px}.catalog-hero-stat span{font-size:8px}.catalog-related-links{margin-bottom:10px;padding:7px}.catalog-related-links a{padding:6px 8px;font-size:9px}.catalog-intro{margin-bottom:10px;padding:10px 12px;font-size:10px}.brand-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.brand-directory-card{grid-template-columns:42px minmax(0,1fr) 12px;gap:8px;padding:9px;border-radius:11px}.brand-directory-logo{width:42px;height:42px;border-radius:8px}.brand-directory-copy strong{font-size:11px}.brand-directory-copy small{font-size:8px}.pd-product-meta{gap:5px}.pd-product-meta>a,.pd-product-meta>span{padding:6px 7px}}
@media(max-width:420px){.catalog-hero-stat{display:none}.brand-directory-grid{grid-template-columns:1fr 1fr}}

/* Homepage brand directory shell. Card/image rules are consolidated with the gallery rules below. */
.home-brands-section{position:relative;padding:18px;border:1px solid #e2e7ee;border-radius:11px;background:#f7f9fc;box-shadow:none}
.home-brands-head{display:block;margin:0 0 13px}
.home-brands-head h2{margin:0;white-space:nowrap}
.home-brand-grid{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
@media(max-width:1100px){.home-brand-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:820px){.home-brands-section{padding:12px 10px;border-radius:8px}.home-brands-head{margin-bottom:9px}.home-brand-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}}
@media(max-width:420px){.home-brand-grid{gap:4px}}

/* Compact product identity chips — equal height with LM orange/navy accents. */
.pd-product-meta{
    gap:6px;
    margin:8px 0 9px;
}
.pd-product-meta>.pd-meta-chip{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    min-height:29px;
    padding:5px 8px;
    gap:5px;
    border-width:1px;
    border-style:solid;
    border-radius:7px;
    box-shadow:none;
    line-height:1;
    white-space:nowrap;
}
.pd-product-meta>.pd-meta-chip>span{
    font-size:8px;
    font-weight:650;
    letter-spacing:.05em;
    line-height:1;
    text-transform:uppercase;
}
.pd-product-meta>.pd-meta-chip>strong{
    max-width:190px;
    overflow:hidden;
    font-size:10px;
    font-weight:650;
    letter-spacing:-.05px;
    line-height:1.1;
    text-overflow:ellipsis;
}
.pd-product-meta>.pd-meta-brand{
    border-color:#ffd3b8;
    background:#fff5ed;
    color:#a54108;
}
.pd-product-meta>.pd-meta-brand>span{color:#e55c0b}
.pd-product-meta>.pd-meta-model{
    border-color:#cfdef2;
    background:#f2f7ff;
    color:#16345d;
}
.pd-product-meta>.pd-meta-model>span{color:#55779f}
.pd-product-meta>.pd-meta-category{
    border-color:#d8dff0;
    background:#f6f7fc;
    color:#263757;
}
.pd-product-meta>.pd-meta-category>span{color:#687a9a}
.pd-product-meta>a.pd-meta-chip:hover{
    transform:none;
    border-color:var(--primary);
    background:var(--primary-light);
    color:#a54108;
}
@media(max-width:767px){
    .pd-product-meta{gap:5px;margin:7px 0 8px}
    .pd-product-meta>.pd-meta-chip{min-height:27px;padding:4px 7px;gap:4px;border-radius:6px}
    .pd-product-meta>.pd-meta-chip>span{font-size:7.5px}
    .pd-product-meta>.pd-meta-chip>strong{max-width:145px;font-size:9.5px}
}

/* Four compact product-detail tabs, including verified reviews. */
.pd-tabs{scrollbar-width:none}
.pd-tabs::-webkit-scrollbar{display:none}
.pd-tab{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:11px 15px;font-size:13px;outline:none}
.pd-tab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#eaf3ff;color:#176fd1;font-size:9px;font-weight:750}
.pd-tab-panel-reviews{padding:0;border:0;background:transparent}
.pd-tab-panel-reviews .pd-reviews{margin-top:0}
@media(max-width:767px){
    .pd-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:12px;overflow:visible}
    .pd-tab{min-width:0;padding:10px 3px;font-family:var(--font-body);font-size:10.5px;font-weight:650;letter-spacing:-.1px}
    .pd-tab-count{min-width:15px;height:15px;padding:0 4px;font-size:7px}
    .pd-tab-panel-reviews{padding:0}
    .pd-tab-panel-reviews .pd-reviews{margin-top:0}
}

.hot-deals-sort-note{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid #dce4ef;border-radius:8px;background:#fff;color:#536176;font-size:11px;font-weight:600;white-space:nowrap}
@media(max-width:767px){.hot-deals-sort-note{min-height:32px;padding:0 9px;font-size:9px}}

/* ============ Scroll reveal (subtle, direction-aware) ============ */
@media (prefers-reduced-motion: no-preference) {
    .sr-item { transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
    .sr-item.sr-below { opacity: 0; transform: translateY(26px); }
    .sr-item.sr-above { opacity: 0; transform: translateY(-26px); }
}


/* 5-per-row sections: mobile grid is 2 columns, so the odd 5th card is hidden to keep rows even (desktop 5, mobile 4). */
@media (max-width: 767px) {
    .product-grid.grid-5 > :nth-child(5):last-child { display: none; }
}

/* Homepage side-by-side banner row (admin: Promo Banners -> Homepage banner row).
   Fixed 2:1 box on every device so both banners always match in size. */
.home-banner-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
/* aspect-ratio defaults to 2/1 but is overridden inline with each banner's own shape,
   so object-fit: cover has nothing left to crop at any screen width. */
.home-pair-banner { display: block; overflow: hidden; border-radius: 11px; aspect-ratio: 2 / 1; background: #fff; }
.home-banner-pair { background: transparent; }
.home-pair-banner img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.home-pair-banner:hover img { transform: scale(1.02); }
@media (max-width: 767px) {
    .home-banner-pair { gap: 8px; margin: 12px 0; }
    .home-pair-banner { border-radius: 8px; }
}

/* Product page tabs: original underline style — larger/lighter type, centered, even gaps */
.pd-tabs { justify-content: center; gap: 10px; }
.pd-tab { font-size: 16px; font-weight: 500; flex: 0 0 auto; }
@media (max-width: 767px) {
    /* Flex + space-between: identical visual gap between every tab, whatever the label width. */
    .pd-tabs { display: flex; justify-content: space-between; gap: 0; }
    .pd-tab { font-size: 15px; padding: 10px 2px; }
}

/* Product page: larger trust-card text + deal discount badge moved to bottom-right */
.pd-trust-card .pd-trust-title { font-size: 15px; }
.pd-trust-card p { font-size: 13.5px; }
@media (max-width: 767px) {
    .pd-trust-card .pd-trust-title { font-size: 12.5px; }
    .pd-trust-card p { font-size: 11.5px; }
}

/* Best-selling deals: 3 cards on desktop, 2 even cards on mobile */
@media (max-width: 767px) {
    .pd-quick-deals-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-quick-deals-list .pd-quick-deal:nth-child(3) { display: none; }
}

/* Featured category names: slightly larger, weight stays light */
.featured-cat p { font-size: 15px; font-weight: 500; }
@media (max-width: 767px) {
    .featured-cat p { font-size: 12px; }
}

/* Cart table: keep the product cell a real table-cell (flex on <td> broke column layout and
   made the price overlap the title); the flex row lives on an inner wrapper instead. */
.cart-product { display: table-cell; }
.cart-product-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; min-width: 240px; }
.cart-product-inner img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; flex: 0 0 auto; }
/* Title sits beside the image and wraps to at most two lines instead of overlapping. */
.cart-product-inner a { flex: 1 1 auto; min-width: 0; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4; }

/* Mobile categories: left slide-in drawer layout (logo header, section label, clean list rows) */
.mobile-category-logo { display: none; }
.mobile-category-label { display: none; }
@media (max-width: 767px) {
    .mobile-category-panel { padding: 0; justify-content: flex-start; align-items: stretch; }
    .mobile-category-head, .mobile-category-grid { width: min(330px, 88vw); }
    .mobile-category-head { border-radius: 0; border-bottom: 1px solid #eef0f4; padding: 12px 16px; }
    .mobile-category-head strong { display: none; }
    .mobile-category-logo { display: block; }
    .mobile-category-logo img { display: block; width: 156px; height: auto; }
    .mobile-category-grid { flex: 1; max-height: none; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); }
    .mobile-category-label { display: block; margin: 10px 0 2px; color: #9aa3b1; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
    .mobile-category-row { min-height: 56px; }
    .mobile-category-parent .mobile-category-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 6px; }
    .mobile-category-parent strong { font-size: 14.5px; font-weight: 550; }
    .mobile-category-parent small { display: none; }
    .mobile-subcategory-toggle { border: 0; background: transparent; }
    .mobile-subcategory-toggle[aria-expanded="true"] { border: 0; background: transparent; }
    .mobile-subcategory-list { margin-left: 48px; }
}

/* Mobile header: hamburger + centered logo + search & call icons (desktop unchanged) */
.mobile-header-menu, .mobile-header-actions { display: none; }
@media (max-width: 767px) {
    .header-inner { display: grid; grid-template-columns: 84px 1fr 84px; grid-template-rows: auto; align-items: center; gap: 0 6px; min-height: 0; padding: 8px 12px; }
    .mobile-header-menu { justify-self: start; }
    /* Categories live in the hamburger drawer + bottom nav, so the Browse Categories bar goes away. */
    .main-nav { display: none; }
    .mobile-header-menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--dark); padding: 0; }
    .mobile-header-menu svg { width: 24px; height: 24px; }
    .header-inner .logo { justify-self: center; }
    .mobile-header-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
    .mobile-header-actions button, .mobile-header-actions a { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--dark); padding: 0; }
    .mobile-header-actions svg { width: 21px; height: 21px; }
    .header-actions { display: none; }
    .search-form { display: none; grid-column: 1 / -1; grid-row: 2; }
    .search-form.mobile-search-open { display: flex; }
}

/* Inter (self-hosted variable font, latin) — Bengali text falls back to Noto Sans Bengali/system. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    /* The variable font is instanced to exactly this range — the site never renders
       lighter than 400 or heavier than 700, and dropping the unused 100-300/800-900
       axis data took the file from 48KB to 36KB. */
    font-weight: 400 700;
    /* optional, not swap: with swap the page paints in the fallback and then repaints
       when Inter lands ~1s later, and that late repaint is exactly what Speed Index
       measures. optional gives the preloaded font a short window to arrive — it is used
       when it makes it, and otherwise the fallback is kept for the whole page load with
       no second repaint at all. Repeat visits have it cached and always get Inter. */
    font-display: optional;
    src: url('/fonts/inter/inter-var-2.woff2') format('woff2');
    /* Latin only: the font contains no Bengali, so Bengali text goes straight to
       Noto Sans Bengali instead of waiting on this download. */
    unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF, U+2190-21BB, U+2212;
}
:root {
    --font-head: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
}

/* Mobile body text sized like the reference (14px, light 400, roomy line-height) */
@media (max-width: 767px) {
    body { font-size: 14px; }
    .pd-tab-panel { font-size: 14px; font-weight: 400; line-height: 1.8; }
    .pd-tab-panel p { font-size: 14px; }
    .article p { font-size: 14px; font-weight: 400; line-height: 1.8; }
}

/* ============ Typography scale matched to the reference site (Inter, 14px base, thin weights) ============ */
body { font-size: 14px; line-height: 1.8; }
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 24px; font-weight: 600; }
.page-title, .pd-title { font-size: 28px; font-weight: 600; }
.section-head h2 { font-size: 24px; font-weight: 600; }
.main-nav .nav-link { font-size: 14px; font-weight: 400; }
.p-card-title { font-size: 14px; font-weight: 400; }
.pd-tab-panel, .pd-tab-panel p { font-size: 14px; line-height: 1.8; }
.article p { font-size: 14px; font-weight: 400; line-height: 1.8; }
.footer-grid, .site-footer li { font-size: 14px; }
.btn { font-size: 14px; font-weight: 500; }
@media (max-width: 767px) {
    h1, .page-title, .pd-title { font-size: 24px; }
    h2, .section-head h2 { font-size: 20px; }
    .main-nav .nav-link { font-size: 14px; }
    .p-card-title { font-size: 13px; }
}

/* One family everywhere: form controls don't fall back to UA fonts */
input, textarea, select, button { font-family: var(--font-body); }

/* Auth: social login buttons + divider */
.auth-sub { margin: -6px 0 14px; color: var(--muted); font-size: 13px; }
.social-login { display: grid; gap: 9px; margin-bottom: 4px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; color: #1c2533; font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s; }
.social-btn:hover { border-color: #b9c4d4; background: #f8fafc; }
.social-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.social-facebook:hover { background: #1466d4; border-color: #1466d4; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #98a1af; font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e7ebf1; }

/* Account dashboard grid */
.account-hello { margin: -8px 0 16px; color: var(--muted); }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.account-card { background: #fff; border: 1px solid #e7ebf1; border-radius: 12px; padding: 20px; }
.account-card h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.account-card label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: #3d4a5c; }
.account-card input, .account-card textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid #dde3ec; border-radius: 8px; font: inherit; font-size: 14px; }
.account-card .btn { margin-top: 4px; }
.account-orders { grid-column: 1 / -1; }
.account-table-scroll { overflow-x: auto; }
@media (max-width: 767px) {
    .account-grid { grid-template-columns: 1fr; gap: 12px; }
    .account-card { padding: 14px; }
}

/* District dropdown styled like the reference: large rounded select with a custom chevron */
.district-select, .checkout-form select, .account-card select {
    display: block; width: 100%; margin-top: 5px;
    min-height: 48px; padding: 12px 44px 12px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6575' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
    font: inherit; font-size: 15px; font-weight: 400; color: #1c2533;
    appearance: none; -webkit-appearance: none; cursor: pointer;
}
.district-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 106, 0, .12); }
.district-select:invalid, .district-select option[value=""] { color: #8b95a5; }

/* Daraz-style cart layout */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.chk-card { background: #fff; border: 1px solid #eceff4; border-radius: 12px; padding: 18px; }
.cart-items { padding: 6px 18px; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #f1f3f7; }
.cart-row:first-child { border-top: 0; }
.cart-row > img { width: 72px; height: 72px; object-fit: contain; border: 1px solid #edf0f4; border-radius: 8px; flex: 0 0 auto; background: #fff; }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-info a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #1c2533; font-size: 14px; line-height: 1.45; }
.cart-row-price { display: block; margin-top: 4px; color: var(--accent, #ff5a0a); font-size: 14px; font-weight: 700; }
.cart-row-side { display: grid; justify-items: end; gap: 7px; }
.qty-stepper { display: flex; align-items: center; border: 1px solid #dde3ec; border-radius: 8px; overflow: hidden; }
.qty-stepper .qty-btn { width: 32px; height: 34px; border: 0; background: #f5f7fa; color: #3d4a5c; font-size: 17px; cursor: pointer; }
.qty-stepper .qty-btn:hover { background: #ebeff5; }
.qty-stepper .qty-input { width: 46px; height: 34px; border: 0; text-align: center; font: inherit; font-size: 14px; -moz-appearance: textfield; }
.qty-stepper .qty-input::-webkit-outer-spin-button, .qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-row-total { font-size: 13.5px; font-weight: 600; color: #1c2533; }
.cart-remove { border: 0; background: none; color: #98a1af; cursor: pointer; padding: 3px; }
.cart-remove:hover { color: #e04444; }
.cart-summary.chk-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.cart-summary .sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; color: #4d5a6b; }
.cart-summary .sum-row b { font-weight: 500; color: #1c2533; }
.cart-summary .sum-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid #eef1f5; font-size: 15px; }
.cart-summary .sum-total b { color: var(--accent, #ff5a0a); font-size: 18px; font-weight: 700; }
.cart-summary .btn { margin-top: 12px; }
@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-row { flex-wrap: wrap; }
    .cart-row-side { grid-auto-flow: column; align-items: center; width: 100%; justify-content: space-between; justify-items: start; }
}

/* Deleted (strikethrough) prices: black at 70% everywhere */
.p-price .was, .pd-was, .hero-slide-price .was { color: rgba(0, 0, 0, .7); opacity: 1; }

/* Product short description (replaces the checklist when set) */
.pd-short-desc { margin: 10px 0 16px; color: #4d5a6b; font-size: 14px; line-height: 1.8; }

/* Featured categories: all in one row on desktop, 4 per row on mobile */
.featured-cats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 990px) {
    .featured-cats { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow: visible; }
}

/* Discount badge: reference layout — tag flush to the card's top-left corner,
   rounded only where it meets the content (bottom-right). Original orange/white colors. */
.p-card { position: relative; padding: 6px; }
.p-card .p-badge:not(.p-badge-new) { position: absolute; top: 0; left: 0; z-index: 4; height: 18px; padding: 0 8px; border-radius: 6px 0 10px 0; font-size: 9.5px; }
.pd-image .badge.badge-sale { top: 0; left: 0; border-radius: 8px 0 10px 0; padding: 4px 10px; font-size: 10px; }
/* Cart icon overlays the image corner so the old header row no longer adds empty space */
.p-card-top { min-height: 0; }
.p-card .p-card-icons { position: absolute; top: 6px; right: 6px; z-index: 4; }

/* Product promotion row: limited-time offer with official warranty beside it. */
.pd-promo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 12px; }
.pd-promo-row .pd-as-low-offer { flex: 0 1 auto; width: auto; max-width: calc(100% - 74px); margin: 0; padding-inline: 10px; }
.pd-offer-warranty-badge { flex: 0 0 62px; width: 62px; height: 62px; display: grid; place-items: center; filter: drop-shadow(0 5px 8px rgba(9, 39, 87, .18)); pointer-events: none; }
.pd-offer-warranty-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Match the orange discount badge used by homepage product cards. */
.pd-image .badge.badge-sale { background: var(--accent) !important; color: #fff; }
@media (max-width: 767px) {
    .pd-promo-row { gap: 8px; margin-bottom: 10px; }
    .pd-promo-row .pd-as-low-offer { flex: 0 1 auto; width: auto; max-width: calc(100% - 58px); min-width: 0; padding-inline: 8px; }
    .pd-offer-warranty-badge { flex-basis: 50px; width: 50px; height: 50px; }
}

/* Single-product gallery: let the product artwork use the full media frame. */
.pd-image { padding: 0 !important; }
.pd-image #pdMainImage { border-radius: 0 0 14px 14px; }
/* Desktop product galleries use one stable square media canvas. Wide artwork
   (AC, TV, soundbar, etc.) remains centered instead of collapsing the whole
   left column to the source image's short intrinsic height. */
@media (min-width: 901px) {
    .pd-gallery { min-width: 0; }
    .pd-image:has(#pdMainImage) { aspect-ratio: 1 / 1; }
    .pd-image #pdMainImage {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }
}
@media (max-width: 767px) {
    .pd-image #pdMainImage { border-radius: 0 0 10px 10px; }
}

/* Price-row SAVE pill: smaller, orange */
.pd-save { display: inline-flex; align-items: center; min-height: 22px; background: var(--accent, #ff5a0a); color: #fff; border-radius: 7px; font-size: 10px; line-height: 1; font-weight: 700; padding: 3px 8px; letter-spacing: .2px; }

/* Mobile category drawer: keep child categories close to their parent. */
@media (max-width: 767px) {
    .mobile-subcategory-list { margin-left: 26px; }
    .mobile-subcategory-list a { margin-left: 6px; }
}

/* ========================================================================== 
   Sumash Tech typography system
   Reference values were taken from the live storefront at sumashtech.com:
   Inter, 14px/1.8 body copy, 400–700 weights and responsive display headings.
   Keep this block last so older component-specific typography cannot override it.
   ========================================================================== */
html,
body,
button,
input,
select,
textarea {
    font-family: 'Inter', sans-serif;
}

body {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
.btn,
.pd-btn {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

/* Store navigation and small interface copy. */
.main-nav .nav-link,
.nav-primary,
.header-link,
.mobile-bottom-nav,
.breadcrumb,
.breadcrumbs {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.main-nav .nav-link,
.nav-primary { font-size: 14px; }
.breadcrumb,
.breadcrumbs { font-size: 12px; line-height: 16px; }

/* Sumash desktop heading scale. */
h1,
.page-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: normal;
}
.section-head h2,
.section-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: normal;
}

/* Product details. */
.pd-info .pd-title,
.pd-title,
.product-detail-info h1 {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600 !important;
    line-height: 36px;
    letter-spacing: normal;
}
.pd-price {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: normal;
}
.pd-was {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
}
.pd-short-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
}
.pd-tab {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}
.pd-tab-panel,
.pd-tab-panel p,
.article p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}
.pd-tab-panel h2,
.pd-tab-panel h3,
.pd-reviews h2,
.pd-section h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: normal;
}

/* Product cards use Sumash's restrained marketplace scale. */
.p-card,
.p-card-title,
.product-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
}
.p-card-title,
.product-name { line-height: 21px; }
.p-price .now,
.product-price ins {
    font-size: 16px;
    /* The price is the number a shopper scans for — at 400 it read thinner than the
       product name next to it, so it keeps a proper bold here. */
    font-weight: 700;
    line-height: 24px;
    letter-spacing: normal;
}
.p-price .was,
.product-price del {
    font-size: 12.8px;
    font-weight: 400;
    line-height: 24px;
}
.p-badge,
.badge,
.pd-save { font-weight: 400; }

/* Tablet hierarchy. */
@media (min-width: 768px) and (max-width: 1023px) {
    h1,
    .page-title { font-size: 28px; line-height: 36px; }
    .section-head h2,
    .section-title { font-size: 28px; line-height: 36px; }
    .pd-info .pd-title,
    .pd-title,
    .product-detail-info h1 { font-size: 28px; line-height: 36px; }
}

/* Sumash mobile scale: the body remains 14px while headings step down cleanly. */
@media (max-width: 767px) {
    body { font-size: 14px; font-weight: 400; line-height: 1.8; }
    h1,
    .page-title,
    .shop-toolbar .page-title { font-size: 28px !important; font-weight: 600; line-height: 36px; }
    .section-head h2,
    .section-head .featured-title,
    .featured-title,
    .section-title { font-size: 24px !important; font-weight: 600; line-height: 32px; }
    .pd-info .pd-title,
    .pd-title,
    .product-detail-info h1 {
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 32px;
        letter-spacing: normal;
    }
    .pd-price { font-size: 22px; font-weight: 700; line-height: 25.2px; }
    .pd-was { font-size: 15px; font-weight: 500; line-height: 25.2px; }
    .pd-short-desc { font-size: 15px; font-weight: 400; line-height: 21px; }
    .pd-tab-panel h2,
    .pd-tab-panel h3,
    .pd-reviews h2,
    .pd-section h2 { font-size: 24px; font-weight: 400; line-height: 32px; }
    .p-card-title,
    .product-name { font-size: 14px; font-weight: 400; line-height: 21px; }
    .p-price .now,
    .product-price ins { font-size: 16px; font-weight: 700; line-height: 24px; }
    .p-price .was,
    .product-price del { font-size: 12.8px; font-weight: 400; line-height: 24px; }
    .btn,
    .pd-btn,
    button { font-size: 14px; font-weight: 400; }
}

/* Homepage brand directory: edge-to-edge logos with a consistent card footprint. */
.home-brand-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.home-brand-card {
    position: relative;
    display: block;
    aspect-ratio: 5 / 3;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border-radius: 7px;
    background: #fff;
}
.home-brand-visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: calc(100% - 18px);
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #fff;
}
.home-brand-visual img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}
.home-brand-visual b {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #176fd1;
    background: linear-gradient(135deg, #f8fbff, #eaf3ff);
    font-size: clamp(18px, 2vw, 28px);
}
.home-brand-card small {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6f7e92;
    font-size: 8px;
    font-weight: 450;
    height: 18px;
    line-height: 18px;
    letter-spacing: .01em;
    text-align: center;
    backdrop-filter: none;
}
.home-brand-card small strong { font-weight: 700; }
@media(max-width: 820px) {
    .home-brand-card {
        aspect-ratio: 5 / 3;
        padding: 0;
        border-radius: 5px;
    }
    .home-brand-card small {
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        height: 16px;
        font-size: 7px;
        line-height: 16px;
    }
    .home-brand-visual { height: calc(100% - 16px); }
}

/* Sumash-style homepage information cards; copy remains unchanged. */
.article {
    margin-top: 56px;
    background: #fff;
}
.article-inner {
    padding: 40px 21px 52px;
}
.article-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.article-grid-single {
    grid-template-columns: minmax(0, 1fr);
}
.article-column {
    display: grid;
    gap: 24px;
    min-width: 0;
}
.article-card {
    min-width: 0;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.article-card-gray { background: #f9fafb; }
.article-card-green { background: #f0fdf4; }
.article-card-yellow { background: #fefce8; }
.article-card-blue { background: #eff6ff; }
.article-card-purple { background: #faf5ff; }
.article .article-card h1,
.article .article-card h2 {
    margin: 0 0 16px;
    color: #111827;
    letter-spacing: normal;
}
.article .article-card h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}
.article .article-card h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}
.article .article-card p,
.article .article-card > div {
    margin: 0;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
}
@media(max-width: 767px) {
    .article {
        margin-top: 20px;
    }
    .article-inner {
        padding: 20px 21px 32px;
    }
    .article-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .article-column {
        gap: 24px;
    }
    .article-card {
        padding: 24px;
        border-radius: 12px;
    }
    .article .article-card h1 {
        font-size: 18px !important;
        font-weight: 600;
        line-height: 29px;
    }
    .article .article-card h2 {
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
    }
    .article .article-card p,
    .article .article-card > div {
        font-size: 14px;
        font-weight: 400;
        line-height: 25.2px;
    }
}

/* AJAX search suggestions dropdown */
.site-header .search-form { position: relative; }
.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
    max-height: 420px; overflow-y: auto;
    background: #fff; border: 1px solid #e5eaf1; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 28, 55, .16);
}
.search-suggest-item { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-bottom: 1px solid #f2f4f8; color: #1c2533; }
.search-suggest-item:hover { background: #f7f9fc; }
.search-suggest-item img, .search-suggest-noimg { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; border: 1px solid #eef1f5; border-radius: 7px; background: #fff; }
.search-suggest-info { min-width: 0; display: grid; gap: 1px; }
.search-suggest-info b { overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-info small { color: var(--accent, #ff5a0a); font-size: 12px; font-weight: 700; }
.search-suggest-info small s { margin-left: 6px; color: rgba(0,0,0,.55); font-weight: 400; }
.search-suggest-all { display: block; padding: 10px 13px; color: #176fd1; font-size: 12.5px; font-weight: 600; text-align: center; }
.search-suggest-all:hover { background: #f7f9fc; }

/* Mobile header icons: brand orange on a soft tint circle */
@media (max-width: 767px) {
    .mobile-header-menu,
    .mobile-header-actions button,
    .mobile-header-actions a {
        color: var(--accent, #ff5a0a);
        background: #fff3ea;
        border-radius: 50%;
    }
}

/* ============ Footer: minimal, compact, futuristic on soft orange tint ============ */
.site-footer { position: relative; background: #fff3ea; color: #44536a; border-top: 0; }
.site-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #ff8c1a 0%, #ff5a0a 45%, rgba(255, 90, 10, 0) 90%);
}
.footer-grid { padding-top: 30px; padding-bottom: 20px; }
.site-footer .site-logo-image { background: transparent; border-radius: 0; box-shadow: none; }
.footer-brand p { color: #5d6b80; font-size: 13px; margin-bottom: 6px; }
.footer-brand a { color: #44536a; }
.footer-brand a:hover { color: var(--accent, #ff5a0a); text-decoration: none; }
.site-footer h3, .site-footer h4 {
    color: var(--accent, #ff5a0a); font-size: 10.5px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px;
}
.site-footer li { padding: 3px 0; font-size: 13.5px; }
.site-footer li a { color: #44536a; transition: color .15s ease, padding-left .15s ease; }
.site-footer li a:hover { color: var(--accent, #ff5a0a); padding-left: 3px; text-decoration: none; }
.footer-bottom {
    background: transparent; border-top: 1px solid #ffe0c9;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
    color: #8a7a6d; font-size: 12px; font-weight: 500;
}
@media (max-width: 767px) {
    .footer-grid { padding-top: 24px; gap: 16px; }
    .site-footer h3, .site-footer h4 { color: var(--accent, #ff5a0a); }
    .footer-bottom { padding-bottom: 16px; }
}

/* Footer: live-site content layout — 3 columns, social row, payment strip */
.footer-grid { grid-template-columns: 1.7fr 1fr 1fr; }
.footer-about-text { max-width: 420px; line-height: 1.7; }
.footer-social { margin-top: 14px; }
.footer-social strong { display: block; margin-bottom: 8px; color: var(--accent, #ff5a0a); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer-social-icons { display: flex; gap: 8px; }
.footer-social-icons a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffe4d0; color: #d84a00; transition: background .15s ease, color .15s ease, transform .15s ease; }
.footer-social-icons a:hover { background: var(--accent, #ff5a0a); color: #fff; transform: translateY(-2px); }
.footer-social-icons svg { width: 16px; height: 16px; }
.footer-social-icons .footer-android-app { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; }
.footer-social-icons .footer-android-app:hover { background: transparent; color: inherit; transform: translateY(-2px) scale(1.05); }
.footer-social-icons .footer-android-app.is-disabled { opacity: .72; cursor: default; }
.footer-social-icons .footer-google-play-mark { width: 25px; height: 29px; }

.footer-payments { padding: 4px 16px 18px; }
.footer-payments img { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; border-radius: 10px; }
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .footer-brand { display: block; }
    .footer-brand .logo { margin-bottom: 10px; }
    /* One-line payment strip, scaled to fit — same as the main site */
    .footer-payments { padding: 0 14px 12px; }
    .footer-payments img { width: 100%; height: auto; max-width: 100%; border-radius: 6px; }
}

/* ============ Footer color: deep navy #061e4c with matched light logo ============ */
.site-footer { background: #061e4c; color: #c3cfe6; }
.site-footer::before { background: linear-gradient(90deg, #ff8c1a 0%, #ff5a0a 45%, rgba(255, 90, 10, 0) 90%); }
.site-footer .site-logo-image { background: transparent; }
.footer-brand p, .footer-about-text { color: #aebbd6; }
.footer-brand a, .site-footer li a { color: #d7e0f2; }
.footer-brand a:hover, .site-footer li a:hover { color: #ff8c3a; }
.footer-social-icons a { background: rgba(255, 255, 255, .1); color: #ffb27d; }
.footer-social-icons a:hover { background: var(--accent, #ff5a0a); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: #8b99b8; }
.footer-payments img { background: #fff; }

/* Navy footer: no white card behind the light logo */
.site-footer .logo { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }

/* Walton Distributor Experience — deliberately distinct from the multi-brand storefront */
:root {
    --wd-blue:#005bac;
    --wd-deep:#021c3d;
    --wd-navy:#03142d;
    --wd-sky:#eaf5ff;
    --wd-orange:#ff8a00;
    --wd-ink:#101d2f;
}
body { background:#fff; color:var(--wd-ink); }
.site-header { background:#fff; border:0; box-shadow:none; }
.header-inner { min-height:84px; }
.header-inner .logo { width:245px; }
.site-header .site-logo-image { height:72px; max-height:72px; object-fit:cover; }
.search-form { border:1px solid #d7e3ef; background:#f5f9fc; border-radius:4px; box-shadow:none; }
.search-form:focus-within { border-color:var(--wd-blue); box-shadow:0 0 0 3px rgba(0,91,172,.1); }
.search-form button { background:var(--wd-blue); border-radius:0 3px 3px 0; }
.header-actions .header-link,.header-actions .icon-btn { color:var(--wd-deep); }
.site-announcement { background:var(--wd-deep); padding:8px 14px; letter-spacing:.2px; }
.powered-strip { display:none; }
.main-nav { background:var(--wd-blue); box-shadow:none; }
.nav-inner { justify-content:center; gap:0; }
.main-nav .nav-link { color:#fff; padding:15px 18px; font-size:13px; font-weight:650; border-left:1px solid rgba(255,255,255,.1); }
.main-nav .nav-item:last-child .nav-link { border-right:1px solid rgba(255,255,255,.1); }
.main-nav .nav-link:hover { background:rgba(0,0,0,.13); color:#fff; }

.walton-home { overflow:hidden; background:#fff; }
.wd-hero { position:relative; color:#fff; background:
    radial-gradient(circle at 82% 16%,rgba(0,127,231,.45),transparent 25%),
    linear-gradient(120deg,#02142f 0%,#03295b 50%,#005bac 100%); }
.wd-hero::after { content:""; position:absolute; inset:0; opacity:.22; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent 25%,#000 100%); }
.wd-hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; min-height:650px; align-items:center; gap:40px; padding-top:58px; padding-bottom:74px; }
.wd-hero-copy { max-width:720px; }
.wd-kicker { display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; color:#9fd5ff; font-size:12px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; }
.wd-kicker i { width:26px; height:2px; background:var(--wd-orange); }
.walton-home .wd-hero h1 { margin:0; max-width:760px; color:#fff; font-family:var(--font-head); font-size:clamp(48px,5vw,78px); line-height:.98; letter-spacing:-3px; font-weight:820; }
.wd-hero h1 em { color:#83c7ff; font-style:normal; }
.wd-hero-copy>p { max-width:650px; margin:28px 0 32px; color:#c9dff5; font-size:16px; line-height:1.75; }
.wd-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.wd-btn { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 22px; border:1px solid rgba(255,255,255,.34); color:#fff; font-size:13px; font-weight:750; border-radius:3px; transition:.2s ease; }
.wd-btn-primary { background:var(--wd-orange); border-color:var(--wd-orange); color:#142033; }
.wd-btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.17); }
.wd-hero-proof { display:flex; gap:0; margin-top:48px; border-top:1px solid rgba(255,255,255,.18); }
.wd-hero-proof div { min-width:150px; padding:20px 24px 0 0; }
.wd-hero-proof div+div { padding-left:24px; border-left:1px solid rgba(255,255,255,.18); }
.wd-hero-proof strong,.wd-hero-proof span { display:block; }
.wd-hero-proof strong { color:#fff; font-size:19px; }
.wd-hero-proof span { margin-top:5px; color:#a9c8e6; font-size:11px; }
.wd-hero-product { position:relative; display:grid; place-items:center; min-height:530px; }
.wd-product-stage { position:relative; z-index:3; display:block; width:min(100%,560px); aspect-ratio:1/1; }
.wd-product-stage::before { content:""; position:absolute; inset:13% 4% 4% 12%; border-radius:50%; background:radial-gradient(circle,#fff 0%,#d9efff 48%,rgba(255,255,255,0) 71%); filter:blur(2px); }
.wd-product-stage>img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 32px 35px rgba(0,0,0,.35)); transition:transform .35s ease; }
.wd-product-stage:hover>img { transform:scale(1.035) translateY(-5px); }
.wd-stage-label { position:absolute; z-index:4; top:4%; right:2%; padding:7px 10px; color:#102240; background:var(--wd-orange); font-size:10px; font-weight:850; letter-spacing:1px; text-transform:uppercase; }
.wd-stage-card { position:absolute; z-index:4; right:0; bottom:2%; width:min(330px,75%); padding:18px 20px; color:var(--wd-ink); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-left:4px solid var(--wd-orange); box-shadow:0 20px 45px rgba(0,0,0,.22); }
.wd-stage-card>* { display:block; }
.wd-stage-card small { color:var(--wd-blue); font-size:10px; font-weight:800; text-transform:uppercase; }
.wd-stage-card strong { margin:5px 0 9px; font-size:15px; line-height:1.35; }
.wd-stage-card span { color:var(--wd-blue); font-size:18px; font-weight:850; }
.wd-circuit { position:absolute; border:1px solid rgba(255,138,0,.7); }
.wd-circuit-one { width:280px; height:160px; top:7%; right:-15%; border-left:0; border-bottom:0; }
.wd-circuit-two { width:330px; height:190px; bottom:7%; left:-16%; border-right:0; border-top:0; }
.wd-hero-brandline { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:24px; padding:15px 20px; color:#174474; background:#fff; border-bottom:1px solid #dce8f4; }
.wd-hero-brandline span { color:var(--wd-blue); font-size:21px; font-weight:900; letter-spacing:5px; }
.wd-hero-brandline b { font-size:12px; font-weight:600; }

.wd-trust { background:#f2f7fb; border-bottom:1px solid #dce7f1; }
.wd-trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.wd-trust article { display:flex; gap:15px; min-height:138px; padding:30px 24px; border-right:1px solid #d8e3ed; }
.wd-trust article:first-child { border-left:1px solid #d8e3ed; }
.wd-trust article>span { color:#9db6cd; font-size:12px; font-weight:800; }
.wd-trust strong { display:block; margin-bottom:7px; color:var(--wd-deep); font-size:14px; }
.wd-trust p { margin:0; color:#63768a; font-size:11px; line-height:1.55; }
.wd-section { padding-top:88px; padding-bottom:88px; }
.wd-section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:34px; }
.wd-section-head span { display:block; margin-bottom:10px; color:var(--wd-blue); font-size:11px; font-weight:850; letter-spacing:1.8px; text-transform:uppercase; }
.wd-section-head h2 { margin:0; color:var(--wd-deep); font-size:clamp(28px,3vw,42px); letter-spacing:-1.3px; }
.wd-section-head>a { color:var(--wd-blue); font-size:12px; font-weight:750; }
.wd-category-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid #dce5ed; border-left:1px solid #dce5ed; }
.wd-category-card { position:relative; min-width:0; padding:18px; color:var(--wd-deep); background:#fff; border-right:1px solid #dce5ed; border-bottom:1px solid #dce5ed; transition:.25s ease; }
.wd-category-card:hover { z-index:2; background:var(--wd-sky); box-shadow:0 18px 45px rgba(0,65,122,.12); transform:translateY(-4px); }
.wd-category-index { position:absolute; top:15px; left:16px; color:#a5b9ca; font-size:10px; font-weight:800; }
.wd-category-card figure { height:150px; display:grid; place-items:center; margin:10px 0 12px; }
.wd-category-card figure img { width:100%; height:100%; object-fit:contain; transition:.25s ease; }
.wd-category-card:hover figure img { transform:scale(1.07); }
.wd-category-card h3 { margin:0; font-size:14px; line-height:1.3; }
.wd-category-card p { margin:4px 0 0; color:#73879a; font-size:10px; }
.wd-category-arrow { position:absolute; right:15px; bottom:18px; color:var(--wd-blue); }

.wd-featured { padding:86px 0; color:#fff; background:var(--wd-deep); }
.wd-section-head-light h2 { color:#fff; }
.wd-section-head-light span { color:#7ec7ff; }
.wd-section-head-light>a { color:#fff; }
.wd-featured-grid { grid-template-columns:repeat(4,1fr); gap:14px; }
.wd-featured .p-card { border:0; border-radius:2px; box-shadow:none; }
.wd-featured .p-card:hover { transform:translateY(-5px); box-shadow:0 22px 45px rgba(0,0,0,.25); }

.wd-story-panel { display:grid; grid-template-columns:1fr .92fr; min-height:520px; background:#eef6fc; border:1px solid #dbe8f2; }
.wd-story-copy { padding:64px; }
.wd-kicker-dark { color:var(--wd-blue); }
.wd-story-copy h2 { margin:0; color:var(--wd-deep); font-size:clamp(31px,3.5vw,49px); line-height:1.08; letter-spacing:-1.7px; }
.wd-story-copy>p { max-width:660px; margin:24px 0; color:#526b80; font-size:14px; line-height:1.8; }
.wd-story-copy ul { display:grid; grid-template-columns:1fr 1fr; gap:13px 20px; margin:25px 0 30px; padding:0; list-style:none; }
.wd-story-copy li { position:relative; padding-left:20px; color:#193753; font-size:12px; font-weight:700; }
.wd-story-copy li::before { content:""; position:absolute; left:0; top:5px; width:8px; height:8px; background:var(--wd-orange); }
.wd-text-link { color:var(--wd-blue); font-size:13px; font-weight:800; }
.wd-story-visual { position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#032452,#0067bc); }
.wd-story-visual::before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.wd-story-visual img { position:relative; z-index:2; width:92%; height:65%; object-fit:cover; }
.wd-authorized-seal { position:absolute; z-index:3; right:25px; bottom:25px; width:190px; padding:18px; color:#fff; background:rgba(2,20,47,.88); border-left:4px solid var(--wd-orange); }
.wd-authorized-seal>* { display:block; }
.wd-authorized-seal strong { letter-spacing:2px; }
.wd-authorized-seal span { margin:5px 0 9px; font-size:10px; }
.wd-authorized-seal small { color:#8bcaff; font-size:9px; }

.wd-collection { border-top:1px solid #dce5ed; }
.wd-collection-head { display:grid; grid-template-columns:minmax(260px,1fr) auto; align-items:end; gap:20px; margin-bottom:28px; }
.wd-collection-head>div { display:grid; grid-template-columns:58px 1fr; }
.wd-collection-head>div>span { grid-row:1/5; color:#c8d6e2; font-size:42px; font-weight:900; }
.wd-collection-head p { margin:0 0 4px; color:var(--wd-blue); font-size:10px; font-weight:850; letter-spacing:1.5px; text-transform:uppercase; }
.wd-collection-head h2 { margin:0; color:var(--wd-deep); font-size:34px; }
.wd-collection-head small { max-width:700px; margin-top:7px; color:#687d90; line-height:1.5; }
.wd-collection-head>a { color:var(--wd-blue); font-size:12px; font-weight:800; }
.wd-collection-grid { grid-template-columns:repeat(4,1fr); }
.wd-collection-alt { background:#f7fafc; box-shadow:0 0 0 100vmax #f7fafc; clip-path:inset(0 -100vmax); }
.wd-collection .p-card { border:1px solid #e1e8ef; border-radius:2px; box-shadow:none; }

.wd-support { color:#fff; background:linear-gradient(120deg,var(--wd-blue),#0084d8); }
.wd-support-inner { display:grid; grid-template-columns:1.15fr .8fr .65fr; align-items:center; gap:45px; min-height:310px; }
.wd-support span { color:#aaddff; font-size:11px; font-weight:850; letter-spacing:1.5px; text-transform:uppercase; }
.walton-home .wd-support h2 { margin:10px 0 0; color:#fff; font-size:35px; line-height:1.13; }
.wd-support p { color:#d6eeff; font-size:13px; line-height:1.8; }
.wd-support-actions { display:grid; gap:12px; }
.wd-support-actions a { padding:14px 17px; color:#fff; border:1px solid rgba(255,255,255,.42); font-size:12px; font-weight:750; }
.wd-support-actions a:first-child { color:var(--wd-deep); background:#fff; }
.wd-support-actions a:last-child:hover { color:var(--wd-deep); background:#fff; border-color:#fff; }
.wd-about { max-width:920px; padding-top:96px; padding-bottom:110px; text-align:center; }
.wd-about>span { color:var(--wd-blue); font-size:11px; font-weight:850; letter-spacing:2px; text-transform:uppercase; }
.wd-about h2 { margin:12px 0 22px; color:var(--wd-deep); font-size:40px; letter-spacing:-1.4px; }
.wd-about p { color:#64788b; font-size:14px; line-height:1.9; }

.site-footer { background:var(--wd-navy); }
.site-footer .site-logo-image { width:260px; height:120px; object-fit:cover; }
.footer-bottom { background:#010d1e; }

@media(max-width:1100px) {
    .wd-hero-inner { grid-template-columns:1fr 1fr; min-height:590px; }
    .wd-hero h1 { font-size:52px; }
    .wd-category-grid { grid-template-columns:repeat(4,1fr); }
    .wd-trust-grid { grid-template-columns:repeat(2,1fr); }
    .wd-featured-grid,.wd-collection-grid { grid-template-columns:repeat(3,1fr); }
    .wd-story-copy { padding:45px; }
}
@media(max-width:767px) {
    .header-inner { min-height:62px; }
    .header-inner .logo { width:168px; }
    .site-header .site-logo-image { height:50px; max-height:50px; }
    .site-announcement { font-size:10px; }
    .wd-hero-inner { display:block; min-height:0; padding-top:48px; padding-bottom:45px; }
    .wd-hero-copy { text-align:left; }
    .wd-kicker { font-size:9px; letter-spacing:1px; }
    .wd-hero h1 { font-size:42px; line-height:1.02; letter-spacing:-1.8px; }
    .wd-hero-copy>p { margin:20px 0 24px; font-size:13px; line-height:1.65; }
    .wd-hero-actions { display:grid; grid-template-columns:1fr; }
    .wd-btn { min-height:46px; }
    .wd-hero-proof { margin-top:30px; }
    .wd-hero-proof div { min-width:0; flex:1; padding:14px 10px 0 0; }
    .wd-hero-proof div+div { padding-left:10px; }
    .wd-hero-proof strong { font-size:13px; }
    .wd-hero-proof span { font-size:8px; }
    .wd-hero-product { min-height:390px; margin-top:15px; }
    .wd-product-stage { width:100%; }
    .wd-stage-card { right:3%; bottom:0; }
    .wd-hero-brandline { gap:12px; padding:11px 12px; }
    .wd-hero-brandline span { font-size:14px; letter-spacing:2px; }
    .wd-hero-brandline b { font-size:9px; }
    .wd-trust-grid { grid-template-columns:1fr 1fr; }
    .wd-trust article { min-height:130px; padding:20px 14px; gap:9px; }
    .wd-trust article:nth-child(odd) { border-left:0; }
    .wd-trust strong { font-size:11px; }
    .wd-trust p { font-size:9px; }
    .wd-section { padding-top:58px; padding-bottom:58px; }
    .wd-section-head { align-items:start; margin-bottom:25px; }
    .wd-section-head h2 { font-size:28px; }
    .wd-section-head>a { max-width:95px; text-align:right; }
    .wd-category-grid { grid-template-columns:repeat(2,1fr); }
    .wd-category-card { padding:13px; }
    .wd-category-card figure { height:118px; }
    .wd-featured { padding:58px 0; }
    .wd-featured-grid,.wd-collection-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .wd-featured-grid>:nth-child(n+7) { display:none; }
    .wd-story-panel { grid-template-columns:1fr; }
    .wd-story-copy { padding:34px 22px; }
    .wd-story-copy h2 { font-size:30px; }
    .wd-story-copy ul { grid-template-columns:1fr; }
    .wd-story-visual { min-height:320px; }
    .wd-story-visual img { height:70%; width:100%; }
    .wd-authorized-seal { width:175px; right:16px; bottom:16px; }
    .wd-collection-head { grid-template-columns:1fr auto; }
    .wd-collection-head>div { grid-template-columns:42px 1fr; }
    .wd-collection-head>div>span { font-size:28px; }
    .wd-collection-head h2 { font-size:25px; }
    .wd-collection-head small { display:none; }
    .wd-support-inner { display:block; padding-top:45px; padding-bottom:45px; }
    .wd-support h2 { font-size:29px; }
    .wd-support p { margin:22px 0; }
    .wd-about { padding:70px 22px 85px; }
    .wd-about h2 { font-size:30px; }
    .site-footer .site-logo-image { width:200px; height:92px; }
}

/* ============ Account dashboard: sidebar layout (reference style, our palette) ============ */
.account-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.account-side { background: #fff; border: 1px solid #eceff4; border-radius: 12px; overflow: hidden; }
.account-hero {
    display: grid; justify-items: center; gap: 4px; padding: 26px 16px 20px;
    background: linear-gradient(135deg, #ff8c1a 0%, #ff5a0a 60%, #e84a00 100%); color: #fff; text-align: center;
}
.account-avatar {
    display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px;
    border: 3px solid rgba(255,255,255,.55); border-radius: 50%;
    background: rgba(255,255,255,.18); font-size: 26px; font-weight: 700;
}
.account-hero strong { font-size: 15.5px; font-weight: 600; }
.account-hero small { font-size: 11.5px; opacity: .85; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
.account-menu { padding: 6px 0; }
.account-menu form { margin: 0; }
.account-menu-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 12px 18px; border: 0; border-bottom: 1px solid #f2f4f8;
    background: none; color: #44536a; font: inherit; font-size: 14px; font-weight: 500;
    text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.account-menu-item svg { width: 18px; height: 18px; flex: 0 0 auto; }
.account-menu-item:hover { background: #fff7f1; color: var(--accent, #ff5a0a); }
.account-menu-item.is-active { background: #fff3ea; color: var(--accent, #ff5a0a); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent, #ff5a0a); }
.account-menu-logout { color: #b0392f; border-bottom: 0; }
.account-menu-logout:hover { background: #fdf1f0; color: #b0392f; }
.account-content { min-width: 0; }
.account-panel h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.account-empty { display: grid; justify-items: center; gap: 8px; padding: 44px 16px; text-align: center; color: #5d6b80; }
.account-empty strong { font-size: 16px; color: #1c2533; }
.account-empty a { color: var(--accent, #ff5a0a); font-weight: 600; }
@media (max-width: 900px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-hero { padding: 20px 14px 16px; }
    .account-menu { display: flex; padding: 4px; overflow-x: auto; scrollbar-width: none; }
    .account-menu::-webkit-scrollbar { display: none; }
    .account-menu form { flex: 0 0 auto; }
    .account-menu-item { flex: 0 0 auto; width: auto; padding: 10px 14px; border-bottom: 0; border-radius: 9px; font-size: 13px; }
    .account-menu-item.is-active { box-shadow: none; }
}

/* Account panels: reference-style headers, labels, footers and empty state */
.account-panel-head { margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid #eef1f5; }
.account-panel-head h2 { margin-bottom: 3px; font-size: 20px; }
.account-panel-sub { color: #7b8798; font-size: 13px; }
.account-card form { max-width: 760px; }
.account-card form > label { text-transform: uppercase; font-size: 11px; letter-spacing: .07em; font-weight: 700; color: #4d5a6b; }
.account-card form > label input, .account-card form > label select, .account-card form > label textarea { text-transform: none; letter-spacing: normal; font-weight: 400; }
.account-form-foot { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.account-empty-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #f4f6fa; }
.account-empty strong { font-size: 17px; }
.account-empty p { color: #7b8798; font-size: 13px; }
.account-empty .btn { margin-top: 6px; }

/* Orders table: review action buttons */
.review-btn-stack { display: grid; gap: 5px; justify-items: start; }
.review-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--accent, #ff5a0a); border-radius: 8px;
    color: var(--accent, #ff5a0a); font-size: 12px; font-weight: 600; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.review-btn:hover { background: var(--accent, #ff5a0a); color: #fff; }
.review-done { display: inline-flex; padding: 6px 10px; border-radius: 8px; background: #eaf9f0; color: #15934b; font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* Checkout: shipping address cards (reference style) */
.chk-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent, #ff5a0a); vertical-align: 2px; }
.addr-cards { display: grid; gap: 12px; margin-bottom: 14px; }
.addr-card { position: relative; display: block; padding: 14px 16px; border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.addr-card input { position: absolute; opacity: 0; pointer-events: none; }
.addr-card-body { display: grid; gap: 3px; }
.addr-label { justify-self: start; padding: 4px 10px; border-radius: 8px; background: #eef1f6; color: #55627a; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.addr-card strong { font-size: 15px; color: #1c2533; }
.addr-phone { color: #1c2533; font-size: 13.5px; font-weight: 600; }
.addr-line { color: #5b6575; font-size: 13px; line-height: 1.5; }
.addr-check { position: absolute; top: 12px; right: 12px; display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #ff5a0a); color: #fff; font-size: 12px; }
.addr-card.is-selected, .addr-card:has(input:checked) { border-color: var(--accent, #ff5a0a); background: #fff5ee; }
.addr-card.is-selected .addr-label, .addr-card:has(input:checked) .addr-label { background: var(--accent, #ff5a0a); color: #fff; }
.addr-card.is-selected .addr-check, .addr-card:has(input:checked) .addr-check { display: grid; place-items: center; }
.addr-card-new { padding: 22px 16px; border-style: dashed; text-align: center; }
.addr-new-inner { display: grid; justify-items: center; gap: 7px; color: #1c2533; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.addr-new-plus { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d6dde8; border-radius: 50%; background: #fff; font-size: 21px; font-weight: 400; color: #3d4a5c; }
.checkout-notes-open { margin: 6px 0 4px; }
.checkout-notes-open label strong { display: block; margin-bottom: 7px; font-size: 14.5px; color: #1c2533; }
.checkout-notes-open textarea { display: block; width: 100%; padding: 12px 14px; border: 1px solid #dde3ec; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; resize: vertical; }
.checkout-notes-open textarea:focus { outline: none; border-color: var(--accent, #ff5a0a); box-shadow: 0 0 0 3px rgba(255, 90, 10, .12); }

/* Cart summary: full width inside the cart layout (old 380px right-float rule neutralised) */
.cart-layout .cart-summary { max-width: none; margin-left: 0; width: 100%; }

/* The hidden attribute must always win — author display rules (grid/flex) were overriding it */
[hidden] { display: none !important; }

/* Homepage section "View All" buttons: orange */
.all-products-link {
    background: var(--accent, #ff5a0a); color: #fff; border: 0;
    border-radius: 9px; font-weight: 600;
}
.all-products-link:hover { background: #e84e00; color: #fff; }

/* Bottom-nav Hot Deals medallion — layered flame badge matching the supplied reference. */
@media (max-width: 767px) {
    .mobile-bottom-nav a:nth-child(3).mobile-hot-deals,
    .mobile-bottom-nav a:nth-child(3).mobile-hot-deals.active {
        width: 56px;
        height: 56px;
        margin-top: -12px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        box-shadow: none;
        overflow: visible;
    }
    .mobile-bottom-nav a:nth-child(3).mobile-hot-deals > img.hot-deals-icon,
    .mobile-bottom-nav a:nth-child(3).mobile-hot-deals.active > img.hot-deals-icon {
        display: block;
        width: 54px;
        height: 54px;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 50%;
        object-fit: cover;
        background: transparent;
        transform: none;
        filter: drop-shadow(0 6px 9px rgba(210, 80, 0, .40));
    }
    .mobile-bottom-nav a:nth-child(3).mobile-hot-deals:active > img.hot-deals-icon {
        transform: translateY(1px) scale(.97);
    }

}

/* Contact Us page: white map card + brand-navy office/contact cards (matches footer navy + accent). */
.contact-hero{margin-bottom:16px}
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:stretch}
.contact-map-card{position:relative;overflow:hidden;min-height:420px;border:1px solid #e3e9f2;border-radius:16px;background:#eef2f7;box-shadow:0 12px 30px rgba(31,55,91,.06)}
.contact-map-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact-info-cards{display:flex;flex-direction:column;gap:16px}
.contact-card{padding:22px;border-radius:16px;background:#061e4c;color:#dbe6f7;box-shadow:0 14px 34px rgba(6,30,76,.22)}
.contact-card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.contact-card-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.contact-card-icon svg{width:19px;height:19px}
.contact-card-head h2{margin:0;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em}
.contact-center-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06)}
.contact-center-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:rgba(255,255,255,.12);color:var(--accent)}
.contact-center-icon svg{width:15px;height:15px}
.contact-center-label{font-size:11px;font-weight:700;color:#a9bcdc;text-transform:uppercase;letter-spacing:.04em}
.contact-center-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:700}
.contact-center-numbers a{color:#fff;text-decoration:none}
.contact-center-numbers a:hover{color:var(--accent)}
.contact-center-numbers i{color:#4a5f87;font-style:normal}
.contact-address{margin:0 0 10px;color:#c3d1e8;font-size:13px;line-height:1.6}
.contact-detail-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.contact-detail-list li{font-size:13px;color:#c3d1e8}
.contact-detail-list li strong{margin-right:5px;color:#8fa5cc;font-weight:600}
.contact-detail-list a{color:#fff;text-decoration:none}
.contact-detail-list a:hover{color:var(--accent)}
.contact-card-extra{padding-bottom:8px}
.contact-extra-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.contact-extra-row:last-child{border-bottom:0}
.contact-extra-row strong{color:#fff;font-size:12.5px;font-weight:600}
.contact-extra-row span{color:var(--accent);font-size:12.5px;font-weight:700;text-align:right}
@media(max-width:900px){
    .contact-grid{grid-template-columns:1fr}
    .contact-map-card{min-height:280px}
}
@media(max-width:560px){
    .contact-card{padding:16px}
    .contact-card-head h2{font-size:14.5px}
    .contact-center-box{padding:10px}
    .contact-center-numbers{font-size:12px}
    .contact-extra-row{flex-direction:column;align-items:flex-start;gap:2px}
    .contact-extra-row span{text-align:left}
}

/* Slider dots: keep the small visual dot but give it a 24px tappable area
   (Lighthouse "Touch targets do not have sufficient size or spacing"). */
.hero-dots { gap: 0; }
.hero-dot {
    width: 24px; height: 24px; min-width: 24px; min-height: 24px;
    padding: 0; border-radius: 999px; background: transparent !important;
    display: grid; place-items: center; position: relative;
}
.hero-dot::before {
    content: ""; width: 9px; height: 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .55); transition: width .25s, background .25s;
}
.hero-dot.active { width: 34px; min-width: 34px; }
.hero-dot.active::before { width: 22px; background: #fff; }
@media (max-width: 767px) {
    .hero-dots { bottom: 6px; gap: 0; }
    .hero-dot { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
    .hero-dot::before { width: 7px; height: 7px; }
    .hero-dot.active { width: 30px; min-width: 30px; }
    .hero-dot.active::before { width: 18px; }
}

/* Accessibility: mobile bottom-nav labels failed the 4.5:1 contrast minimum.
   Inactive #737b89 on the near-white dock was 4.27:1 -> #5f6773 gives ~5.7:1.
   The active label used --primary on the pale --primary-light (3.89:1), so it is
   darkened via color-mix — still theme-aware, but ~6.9:1. */
@media (max-width: 767px) {
    .mobile-bottom-nav a,
    .mobile-bottom-nav button { color: #5f6773; }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active { color: color-mix(in srgb, var(--primary) 70%, #000); }
}

/* ============ WCAG AA contrast ============
   The brand orange #ff5a0a is 3.13:1 against white. That clears the 3:1 bar for large
   display text, but every small label built from it — the price, the discount badge,
   the "View All" pill — needs 4.5:1. #cf4908 is the same hue at 4.57:1, so those
   elements pass while the larger brand furniture keeps the original orange. */
:root { --accent-ink: #cf4908; }

.p-price .now,
.pd-price,
.product-price ins,
.cart-row-price,
.cart-summary .sum-total b { color: var(--accent-ink); }

.p-badge,
.pd-btn-buy,
.all-products-link,
.product-as-low-offer > i { background: var(--accent-ink); }

/* 4.14:1 before — the product count under each brand card sits just under the bar. */
.home-brand-card small,
.brand-directory-copy small { color: #69788b; }

/* These two carry their own orange from more specific rules further up, so they need
   to be restated here rather than picked up from the shared selectors above. */
.home-category-view-all a { background: var(--accent-ink); border-color: var(--accent-ink); }
.home-category-view-all a:hover { background: #b03d06; border-color: #b03d06; }
.p-card-img.has-as-low-offer .product-as-low-offer i { background: #cf4a13; }

/* Shop / catalog: muted greys and the pagination blue all sat between 2.4:1 and 4.2:1.
   Each is nudged to the nearest shade that clears 4.5:1 — visually the same palette. */
.catalog-breadcrumb { color: #687180; }
.shop-result-summary { color: #667180; }
.lm-ellipsis { color: #687281; }
.lm-page.disabled { color: #6b7480; }
.lm-page.active { background: #0975e3; border-color: #0975e3; }

/* Product page: the meta chips, breadcrumb and sale badges were all just under 4.5:1. */
.breadcrumb { color: #6a717f; }
.pd-meta-chip.pd-meta-brand { color: #c04d09; }
.pd-meta-chip.pd-meta-model { color: #52739a; }
.pd-meta-chip.pd-meta-category { color: #627391; }
.badge.badge-sale { background: var(--accent-ink); }
.pd-btn.pd-btn-cart { color: var(--accent-ink); }

/* Walton BD Store — light, minimal distributor theme */
.site-announcement { background:#155fa8; }
.main-nav { background:#fff; border-top:1px solid #e5edf4; border-bottom:1px solid #dbe6ef; }
.main-nav .nav-link { color:#25445f; border:0; padding:13px 18px; font-weight:600; }
.main-nav .nav-item:last-child .nav-link { border:0; }
.main-nav .nav-link:hover,.main-nav .nav-link.active { background:#f1f7fc; color:#1168ae; }
.nav-dropdown { border:1px solid #dfe8f0; border-radius:8px; box-shadow:0 14px 34px rgba(26,65,98,.12); }
.btn,.pd-btn,.wd-btn,.all-products-link { border-radius:7px; }
.btn-primary,.pd-btn-buy,.wd-btn-primary,.all-products-link { background:#1971b9; border-color:#1971b9; color:#fff; }
.btn-primary:hover,.pd-btn-buy:hover,.wd-btn-primary:hover,.all-products-link:hover { background:#125d99; border-color:#125d99; color:#fff; }
.pd-btn-cart { color:#1971b9; border-color:#91b8d7; background:#fff; }

/* Product purchase actions: keep both labels readable over the translucent
   product panel on mobile and desktop. This final, component-scoped rule also
   prevents older glass-theme declarations from washing out the primary CTA. */
.pd-actions .pd-btn-cart {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid #1971b9 !important;
    color: #0f5f9f !important;
}
.pd-actions .pd-btn-buy {
    background: #1971b9 !important;
    border: 1px solid #1971b9 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(25, 113, 185, .22);
}
.pd-actions .pd-btn-cart:hover,
.pd-actions .pd-btn-cart:focus-visible {
    background: #edf7ff !important;
    border-color: #125d99 !important;
    color: #0b4f86 !important;
}
.pd-actions .pd-btn-buy:hover,
.pd-actions .pd-btn-buy:focus-visible {
    background: #125d99 !important;
    border-color: #125d99 !important;
    color: #fff !important;
}
.walton-home { background:#fff; }
.walton-home .wd-hero {
    color:#18324d;
    background:linear-gradient(135deg,#f8fbff 0%,#eaf4fd 58%,#dceeff 100%);
    border-bottom:1px solid #d8e7f4;
}
.walton-home .wd-hero::after {
    opacity:.38;
    background-image:linear-gradient(rgba(25,104,172,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(25,104,172,.07) 1px,transparent 1px);
}
.walton-home .wd-hero h1 { color:#12385e; }
.walton-home .wd-hero h1 em { color:#1872bd; }
.walton-home .wd-kicker { color:#2872ad; }
.walton-home .wd-hero-copy>p { color:#526b82; }
.walton-home .wd-btn-ghost { color:#195b94; border-color:#8eb7d8; background:rgba(255,255,255,.55); }
.walton-home .wd-hero-proof { border-color:#c6daeb; }
.walton-home .wd-hero-proof div+div { border-color:#c6daeb; }
.walton-home .wd-hero-proof strong { color:#153e65; }
.walton-home .wd-hero-proof span { color:#647f98; }
.walton-home .wd-product-stage::before { background:radial-gradient(circle,#fff 0%,#eaf5fd 55%,rgba(255,255,255,0) 73%); }
.walton-home .wd-product-stage>img { filter:drop-shadow(0 24px 26px rgba(31,83,126,.18)); }
.walton-home .wd-circuit { border-color:rgba(33,116,184,.22); }
.wd-trust { background:#fbfdff; }
.wd-trust article { min-height:120px; }
.wd-category-card,.wd-collection .p-card,.wd-featured .p-card { border-radius:10px; }
.wd-category-card:hover { box-shadow:0 12px 30px rgba(27,91,144,.09); }
.walton-home .wd-featured {
    color:#173552;
    background:#f3f8fc;
    border-top:1px solid #deebf4;
    border-bottom:1px solid #deebf4;
}
.walton-home .wd-section-head-light h2 { color:#153e65; }
.walton-home .wd-section-head-light span,.walton-home .wd-section-head-light>a { color:#2474b8; }
.walton-home .wd-featured .p-card:hover { box-shadow:0 14px 32px rgba(27,91,144,.12); }
.wd-story-panel { background:#f7fbfe; border-radius:14px; overflow:hidden; }
.wd-story-visual { background:linear-gradient(145deg,#e9f4fc,#d4e9f8); }
.wd-story-visual::before { border-color:rgba(20,100,166,.12); }
.wd-authorized-seal { background:rgba(23,84,137,.93); }
.walton-home .wd-support {
    color:#173b5c;
    background:linear-gradient(120deg,#e8f4fd,#d7ecfb);
    border-top:1px solid #cfe4f3;
}
.walton-home .wd-support span { color:#2474b8; }
.walton-home .wd-support h2 { color:#153e65; }
.walton-home .wd-support p { color:#526e85; }
.walton-home .wd-support-actions a { color:#195b94; border-color:#80acd0; background:rgba(255,255,255,.48); border-radius:6px; }
.walton-home .wd-support-actions a:first-child { color:#fff; background:#1769ae; border-color:#1769ae; }
.walton-home .wd-support-actions a:last-child:hover { color:#fff; background:#1769ae; border-color:#1769ae; }
.site-footer { background:#124b7d; }
.footer-bottom { background:#0d3d68; }

/* Minimal storefront refinement */
.walton-home .wd-hero::after,.walton-home .wd-circuit { display:none; }
.wd-hero-inner { min-height:540px; padding-top:44px; padding-bottom:48px; }
.walton-home .wd-hero h1 { font-size:clamp(43px,4.5vw,66px); letter-spacing:-2.4px; }
.walton-home .wd-hero-copy>p { max-width:590px; margin:22px 0 26px; line-height:1.65; }
.wd-hero-proof { margin-top:34px; }
.wd-hero-brandline { padding:11px 20px; }
.wd-hero-brandline span { font-size:17px; letter-spacing:4px; }
.wd-trust article { min-height:104px; padding:23px 20px; }
.wd-section { padding-top:68px; padding-bottom:68px; }
.wd-section-head { margin-bottom:26px; }
.wd-category-grid { gap:12px; border:0; }
.wd-category-card {
    display:flex;
    min-height:238px;
    padding:18px 14px 16px;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    border:1px solid #e5edf4;
    border-radius:12px;
    text-align:center;
}
.wd-category-card:hover { transform:translateY(-2px); }
.wd-category-index,.wd-category-arrow { display:none; }
.wd-category-card figure {
    width:156px;
    max-width:100%;
    height:156px;
    margin:0 auto 14px;
    overflow:hidden;
    border-radius:14px;
    background:#f6f9fc;
}
.wd-category-card figure img { display:block; width:100%; height:100%; object-fit:contain; }
.wd-category-card>div { width:100%; margin-top:auto; }
.wd-category-card h3 { min-height:20px; color:#173b5c; font-size:13px; line-height:1.35; }
.wd-category-card p { margin-top:3px; color:#8293a2; font-size:9px; }
.wd-featured { padding:68px 0; }
.wd-story-panel { min-height:460px; }
.wd-story-copy { padding:48px; }
.wd-collection-head { margin-bottom:22px; }
.wd-collection-head>div>span { font-size:34px; }
.wd-support-inner { min-height:260px; }
.wd-about { padding-top:74px; padding-bottom:82px; }

@media(max-width:767px) {
    .wd-hero-inner { padding-top:36px; padding-bottom:35px; }
    .walton-home .wd-hero h1 { font-size:36px; letter-spacing:-1.4px; }
    .wd-hero-product { min-height:330px; }
    .wd-hero-brandline span { font-size:12px; }
    .wd-section { padding-top:48px; padding-bottom:48px; }
    .wd-section-head { display:block; }
    .wd-section-head>a { display:inline-block; max-width:none; margin-top:10px; text-align:left; }
    .wd-category-grid { gap:8px; }
    .wd-category-card { min-height:190px; padding:11px 9px 12px; }
    .wd-category-card figure { width:124px; height:124px; margin-bottom:10px; border-radius:11px; }
    .wd-category-card h3 { font-size:11px; }
    .wd-category-card p { font-size:8px; }
    .wd-featured { padding:48px 0; }
    .wd-story-copy { padding:30px 20px; }
}
.pd-quick-deal em { background: #cf4a13; }
.pd-product-faq{margin-top:38px}.pd-faq-list{display:grid;gap:10px}.pd-faq-item{border:1px solid #dbe7f3;border-radius:14px;background:rgba(255,255,255,.82);overflow:hidden}.pd-faq-item summary{position:relative;padding:17px 48px 17px 18px;color:#102544;font-size:15px;font-weight:750;cursor:pointer;list-style:none}.pd-faq-item summary::-webkit-details-marker{display:none}.pd-faq-item summary:after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;color:#0757a8;font-size:22px;font-weight:500}.pd-faq-item[open] summary:after{content:"−"}.pd-faq-item p{margin:0;padding:0 18px 18px;color:#52677f;line-height:1.7}@media(max-width:640px){.pd-product-faq{margin-top:28px}.pd-faq-item summary{padding:15px 42px 15px 15px;font-size:14px}.pd-faq-item p{padding:0 15px 15px;font-size:13px}}