/* Neelu storefront shared chrome. Extracted from the approved public index.php design. */

        :root {
            --purple: #6f50b4;
            --purple-dark: #3a2265;
            --red: #ef2d2d;
            --orange: #f35a17;
            --yellow: #f7c313;
            --green: #5fc77a;
            --green-soft: #b8f08b;
            --cyan: #bceffc;
            --ink: #11131b;
            --muted: #8d95a8;
            --line: #e5e7ed;
            --soft: #f5f5f7;
            --promo: #f3efeb;
            --footer: #f3f4f7;
            --card: #ffffff;
            --max: 1372px;
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            font-family: "Inter", Arial, sans-serif;
            color: var(--ink);
            background: #fff;
            font-size: 14px;
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button,
        input {
            font: inherit
        }

        .container {
            width: min(var(--max), calc(100% - 64px));
            margin: auto
        }

        .announcement {
            height: 46px;
            background: var(--purple);
            color: white;
            font-size: 12px;
            font-weight: 600;
        }

        .announcement .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .sale-count {
            display: flex;
            align-items: center;
            gap: 11px;
            color: #e9e2fb
        }

        .sale-count b {
            color: #fff;
            font-size: 19px
        }

        .topbar {
            border-bottom: 1px solid var(--line);
            height: 47px
        }

        .topbar .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .toplinks,
        .topright {
            display: flex;
            align-items: center;
            gap: 21px;
            color: #4b5262;
            font-size: 12px
        }

        .delivery-note {
            padding-left: 16px;
            border-left: 1px solid var(--line)
        }

        .delivery-note strong {
            color: var(--orange)
        }

        .head-main {
            height: 92px;
            border-bottom: 1px solid var(--line)
        }

        .head-main .container {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 24px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 160px
        }

        .logo-mark {
            width: 42px;
            height: 42px;
            border: 4px solid var(--purple);
            border-radius: 50% 50% 46% 46%;
            position: relative;
            border-top-color: var(--yellow);
        }

        .logo-mark:before,
        .logo-mark:after {
            content: "";
            position: absolute;
            background: var(--purple);
            border-radius: 8px
        }

        .logo-mark:before {
            width: 27px;
            height: 4px;
            left: 3px;
            top: 12px
        }

        .logo-mark:after {
            width: 19px;
            height: 4px;
            left: 7px;
            top: 21px
        }

        .logo-text {
            font-size: 31px;
            font-weight: 800;
            color: #3c226d;
            letter-spacing: -1.5px
        }

        .deliver {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 110px;
            color: #596071
        }

        .pin {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #f2f2f6;
            display: grid;
            place-items: center;
            font-size: 21px
        }

        .deliver small {
            display: block;
            font-size: 11px
        }

        .deliver b {
            font-size: 12px;
            color: #222
        }

        .search {
            flex: 1;
            height: 52px;
            background: #f3f3f6;
            border-radius: 10px;
            display: flex;
            align-items: center;
            padding: 0 18px
        }

        .search input {
            border: 0;
            outline: 0;
            background: transparent;
            width: 100%;
            font-size: 14px;
            color: #667
        }

        .search .magnify {
            font-size: 29px;
            line-height: 1
        }

        .account-area {
            display: flex;
            gap: 23px;
            align-items: center
        }

        .icon-item {
            text-align: center;
            min-width: 48px;
            font-size: 11px;
            font-weight: 600;
            position: relative
        }

        .ico {
            font-size: 26px;
            display: block;
            line-height: 1.15
        }

        .badge {
            position: absolute;
            right: 4px;
            top: -8px;
            background: var(--red);
            color: #fff;
            border-radius: 12px;
            min-width: 18px;
            height: 18px;
            display: grid;
            place-items: center;
            font-size: 10px;
        }

        .navbar {
            height: 55px;
            border-bottom: 1px solid var(--line)
        }

        .navbar .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 600
        }

        .nav-left,
        .nav-right {
            display: flex;
            gap: 31px;
            align-items: center
        }

        .nav-right .almost {
            color: var(--red)
        }

        .sale-pill {
            background: var(--red);
            color: #fff;
            font-size: 10px;
            padding: 5px 8px;
            border-radius: 4px;
            margin-left: 4px
        }

        .section {
            padding: 26px 0 0
        }

        .hero {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            background: #f2efec;
            min-height: 590px;
            display: grid;
            grid-template-columns: 1.02fr 1.28fr;
            align-items: center;
        }

        .hero-copy {
            padding: 65px 0 65px 60px;
            z-index: 2
        }

        .eyebrow {
            display: inline-block;
            background: linear-gradient(90deg, #89d4a7, #fff0);
            color: #187543;
            font-weight: 600;
            padding: 8px 12px;
            border-radius: 7px;
            font-size: 12px;
            margin-bottom: 18px;
        }

        .hero h1 {
            font-size: 54px;
            line-height: 1.12;
            letter-spacing: -2.2px;
            margin: 0 0 18px;
            color: #3a2265
        }

        .hero p {
            font-size: 17px;
            line-height: 1.35;
            max-width: 560px;
            margin: 0 0 42px
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 18px
        }

        .btn-primary {
            background: var(--purple);
            color: #fff;
            border: 0;
            border-radius: 8px;
            padding: 15px 21px;
            font-weight: 700;
            display: inline-flex;
            gap: 12px;
            align-items: center
        }

        .hero-price strong {
            font-size: 27px;
            color: var(--red);
            margin-right: 8px
        }

        .hero-price s {
            font-size: 14px
        }

        .hero-price small {
            display: block;
            color: #777
        }

        .hero-visual {
            padding: 24px 24px 24px 0
        }

        .ph {
            background:
                linear-gradient(135deg, rgba(111, 80, 180, .06), rgba(243, 90, 23, .05)),
                repeating-linear-gradient(45deg, #f3f1ee 0 18px, #ece9e5 18px 36px);
            border: 1px dashed #c7c3c0;
            border-radius: 10px;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 12px;
        }

        .hero-ph {
            width: 100%;
            aspect-ratio: 1.18/1;
            min-height: 500px;
            background:
                radial-gradient(circle at 72% 26%, #fff 0 80px, transparent 82px),
                radial-gradient(circle at 68% 65%, #ede7dc 0 118px, transparent 120px),
                linear-gradient(135deg, #eee9e3, #f8f6f3 62%, #e6e2dc);
            border: 0;
            font-size: 16px;
            color: #9c948d
        }

        .slider-dot {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin-top: -8px;
            position: relative;
            z-index: 3
        }

        .slider-dot span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd
        }

        .slider-dot span:first-child {
            background: var(--purple)
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 17px
        }

        .heading-left {
            display: flex;
            align-items: baseline;
            gap: 16px
        }

        .section-heading h2 {
            font-size: 18px;
            margin: 0;
            letter-spacing: -.4px
        }

        .section-heading p {
            font-size: 12px;
            color: #969dae;
            margin: 0
        }

        .view-all {
            padding: 10px 16px;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: #fff;
            font-weight: 600;
            font-size: 11px
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden
        }

        .category {
            min-height: 180px;
            border-right: 1px solid var(--line);
            padding: 20px 12px 17px;
            text-align: center;
            background: #fff;
        }

        .category:last-child {
            border-right: 0
        }

        .cat-ph {
            aspect-ratio: 1.35/1;
            border: 0;
            background: linear-gradient(180deg, #fff, #f0f0f0);
            margin-bottom: 10px
        }

        .category b {
            font-size: 12px;
            font-weight: 600
        }

        .safety-banner {
            margin-top: 27px;
            min-height: 86px;
            border-radius: 8px;
            background: #fff4e7;
            display: flex;
            align-items: center;
            padding: 22px 32px;
            overflow: hidden;
            position: relative
        }

        .safety-banner h3 {
            margin: 0;
            color: var(--orange);
            font-size: 20px
        }

        .safety-banner p {
            margin: 3px 0 0;
            color: #6f7686
        }

        .safety-banner:after {
            content: "Image Placeholder • panoramic";
            position: absolute;
            right: 0;
            top: 0;
            width: 54%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #b98e71;
            background: linear-gradient(135deg, #fff0df, #ffd7bd);
            font-size: 12px
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden
        }

        .product-card {
            border-right: 1px solid var(--line);
            padding: 18px 14px 14px;
            min-height: 400px;
            background: #fff;
            position: relative
        }

        .product-card:last-child {
            border-right: 0
        }

        .discount {
            position: absolute;
            left: 14px;
            top: 18px;
            background: var(--red);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            padding: 7px 8px;
            border-radius: 6px
        }

        .heart {
            position: absolute;
            right: 18px;
            top: 20px;
            font-size: 22px
        }

        .product-ph {
            height: 175px;
            margin-top: 10px;
            border: 0;
            background: linear-gradient(180deg, #fff 10%, #f3f3f3 100%);
            border-radius: 4px
        }

        .tag {
            display: inline-block;
            margin: 0 0 9px;
            padding: 5px 9px;
            border-radius: 6px;
            background: var(--green-soft);
            font-size: 9px;
            font-weight: 700;
            color: #207341
        }

        .tag.cold {
            background: var(--cyan);
            color: #26738a
        }

        .plus {
            position: absolute;
            right: 14px;
            top: 188px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--purple);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 24px
        }

        .stars {
            color: #f7c312;
            font-size: 13px;
            letter-spacing: -1px
        }

        .stars em {
            font-style: normal;
            color: #9aa1ad;
            margin-left: 5px;
            font-size: 11px
        }

        .product-card h3 {
            font-size: 13px;
            line-height: 1.32;
            margin: 8px 0 13px;
            min-height: 35px;
            font-weight: 500
        }

        .price {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-bottom: 13px
        }

        .price strong {
            font-size: 20px;
            color: var(--red)
        }

        .price strong.black {
            color: #111
        }

        .price s {
            font-size: 11px;
            color: #555
        }

        .stock-note {
            border-top: 1px solid var(--line);
            padding-top: 10px;
            color: #9a9fa9;
            font-size: 10px
        }

        .stock-bar {
            height: 6px;
            border-radius: 5px;
            background: #e8eaee;
            margin: 7px 0;
            overflow: hidden
        }

        .stock-bar span {
            display: block;
            height: 100%;
            width: 74%;
            background: linear-gradient(90deg, #ffd400, var(--orange), var(--red));
            border-radius: 5px
        }

        .available {
            font-size: 10px;
            color: #888
        }

        .available b {
            font-size: 15px;
            color: #111;
            margin-left: 5px
        }

        .promo-three {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            margin: 12px 0 28px
        }

        .promo-card {
            min-height: 220px;
            background: var(--promo);
            border-radius: 7px;
            overflow: hidden;
            position: relative;
            padding: 30px 20px;
        }

        .promo-card .promo-text {
            width: 55%;
            position: relative;
            z-index: 2
        }

        .promo-card .small {
            font-size: 11px;
            color: var(--orange);
            font-weight: 600
        }

        .promo-card h3 {
            font-size: 20px;
            line-height: 1.25;
            margin: 10px 0 8px
        }

        .promo-card p {
            font-size: 12px;
            color: #7e8593;
            margin: 0 0 17px
        }

        .small-btn {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 23px;
            padding: 9px 13px;
            font-size: 11px;
            font-weight: 600
        }

        .promo-image {
            position: absolute;
            right: 0;
            top: 0;
            width: 48%;
            height: 100%;
            border: 0;
            border-radius: 0;
            background: linear-gradient(135deg, #f0eee8, #fff)
        }

        .arrivals-grid {
            display: grid;
            grid-template-columns: 1.55fr repeat(5, 1fr);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden
        }

        .vendor-panel {
            border-right: 1px solid var(--line);
            position: relative;
            min-height: 340px;
            background: #fff
        }

        .vendor-top {
            padding: 20px
        }

        .vendor-head {
            display: flex;
            align-items: center;
            gap: 14px
        }

        .store-circle {
            width: 75px;
            height: 75px;
            border: 1px solid #aaa;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 36px;
            color: #777
        }

        .vendor-panel h3 {
            margin: 0;
            font-size: 15px
        }

        .vendor-panel .muted {
            font-size: 11px;
            color: #9298a7
        }

        .vendor-desc {
            border-top: 1px solid var(--line);
            margin-top: 14px;
            padding-top: 14px;
            font-size: 11px;
            line-height: 1.45
        }

        .vendor-banner {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 155px;
            background: #f1eee9;
            padding: 20px
        }

        .vendor-banner .vb-text {
            width: 56%;
            position: relative;
            z-index: 2
        }

        .vendor-banner .ph {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .vendor-banner h4 {
            font-size: 18px;
            line-height: 1.22;
            margin: 8px 0
        }

        .arrivals-grid .product-card {
            min-height: 340px
        }

        .arrivals-grid .product-ph {
            height: 140px
        }

        .arrivals-grid .plus {
            top: 170px
        }

        .instock {
            color: #24a85a;
            font-size: 10px;
            font-weight: 700
        }

        .promo-two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            margin: 24px 0 30px
        }

        .wide-promo {
            min-height: 280px;
            background: var(--promo);
            border-radius: 7px;
            position: relative;
            overflow: hidden;
            padding: 35px 30px
        }

        .wide-promo .copy {
            width: 44%;
            position: relative;
            z-index: 2
        }

        .wide-promo h3 {
            font-size: 28px;
            line-height: 1.15;
            margin: 12px 0 8px
        }

        .wide-promo .ph {
            position: absolute;
            right: 0;
            top: 0;
            width: 57%;
            height: 100%;
            border: 0;
            border-radius: 0
        }

        .featured-grid {
            display: grid;
            grid-template-columns: 1.3fr repeat(4, 1fr);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden
        }

        .featured-ad {
            position: relative;
            min-height: 355px;
            padding: 25px 20px;
            background: #f1eee9;
            border-right: 1px solid var(--line);
            overflow: hidden
        }

        .featured-ad h3 {
            font-size: 20px;
            line-height: 1.2;
            width: 60%;
            margin: 12px 0 8px
        }

        .featured-ad .ph {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 75%;
            height: 58%;
            border: 0;
            border-radius: 0
        }

        .featured-grid .product-card {
            min-height: 355px
        }

        .service-strip {
            margin-top: 36px;
            padding: 25px 0 26px;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

        .service-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 26px
        }

        .service {
            display: flex;
            gap: 15px;
            align-items: flex-start
        }

        .service-icon {
            width: 58px;
            height: 58px;
            border-radius: 14px;
            background: linear-gradient(135deg, #fff7cc, #eee7ff);
            display: grid;
            place-items: center;
            font-size: 30px;
            flex: 0 0 auto
        }

        .service h4 {
            font-size: 15px;
            margin: 2px 0 5px
        }

        .service p {
            font-size: 11px;
            color: #7e8594;
            line-height: 1.5;
            margin: 0
        }

        footer {
            background: var(--footer);
            margin-top: 0;
            padding: 50px 0 35px
        }

        .newsletter {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            padding-bottom: 55px;
            border-bottom: 1px solid #d9dce4
        }

        .newsletter h3 {
            font-size: 20px;
            margin: 0 0 7px
        }

        .newsletter p {
            font-size: 11px;
            color: #6d7483;
            line-height: 1.45;
            max-width: 400px
        }

        .subscribe {
            align-self: center
        }

        .subscribe-row {
            display: flex
        }

        .subscribe input {
            height: 52px;
            flex: 1;
            border: 1px solid #d5d8e0;
            border-radius: 9px 0 0 9px;
            padding: 0 15px;
            background: #fff
        }

        .subscribe button {
            width: 80px;
            border: 0;
            background: var(--purple);
            color: #fff;
            border-radius: 0 9px 9px 0;
            font-weight: 700
        }

        .subscribe small {
            display: block;
            color: #757d8d;
            font-size: 9px;
            margin-top: 8px
        }

        .footer-main {
            display: grid;
            grid-template-columns: 1.15fr repeat(3, 1fr) 1fr;
            gap: 60px;
            padding: 47px 0
        }

        .foot-col h4 {
            font-size: 13px;
            margin: 0 0 21px
        }

        .foot-col p,
        .foot-col a {
            font-size: 11px;
            color: #687080;
            line-height: 1.9;
            display: block
        }

        .support {
            font-size: 11px;
            color: #747b89;
            line-height: 1.5
        }

        .support strong {
            font-size: 20px;
            color: #13213a;
            display: block;
            margin-top: 2px
        }

        .support-row {
            display: flex;
            gap: 14px;
            margin: 26px 0
        }

        .support-ico {
            font-size: 25px
        }

        .app-badge {
            background: #111;
            color: #fff;
            border-radius: 5px;
            padding: 8px 12px;
            display: inline-block;
            margin-bottom: 8px;
            font-size: 11px
        }

        .socials {
            display: flex;
            gap: 8px;
            margin-top: 12px
        }

        .socials span {
            width: 34px;
            height: 34px;
            background: #fff;
            border-radius: 6px;
            display: grid;
            place-items: center
        }

        .footer-bottom {
            border-top: 1px solid #d9dce4;
            padding-top: 30px;
            display: flex;
            justify-content: space-between;
            gap: 25px;
            align-items: center;
            font-size: 10px;
            color: #717989
        }

        .payments {
            margin-top: 20px;
            font-size: 16px;
            font-weight: 800;
            word-spacing: 8px
        }

        .copyright .purple {
            color: var(--purple)
        }

        .bottom-links {
            display: flex;
            gap: 13px;
            color: #202431
        }

        .backtop {
            position: fixed;
            right: 24px;
            bottom: 20px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 3px 15px #0001;
            display: grid;
            place-items: center;
            z-index: 10;
        }

        @media (max-width:1200px) {
            .container {
                width: min(var(--max), calc(100% - 34px))
            }

            .account-area {
                gap: 10px
            }

            .nav-left {
                gap: 18px
            }

            .hero h1 {
                font-size: 45px
            }

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

            .category:nth-child(5) {
                border-right: 0
            }

            .products-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            .product-card {
                border-bottom: 1px solid var(--line)
            }

            .arrivals-grid {
                grid-template-columns: 1.5fr repeat(3, 1fr)
            }

            .arrivals-grid .product-card:nth-last-child(-n+2) {
                display: none
            }

            .featured-grid {
                grid-template-columns: 1.2fr repeat(3, 1fr)
            }

            .featured-grid .product-card:last-child {
                display: none
            }

            .footer-main {
                gap: 30px
            }
        }

        @media (max-width:820px) {
            .announcement {
                height: auto;
                padding: 9px 0
            }

            .announcement .container {
                align-items: flex-start
            }

            .sale-count {
                display: none
            }

            .topbar {
                display: none
            }

            .head-main {
                height: auto;
                padding: 14px 0
            }

            .head-main .container {
                flex-wrap: wrap
            }

            .logo {
                min-width: 130px
            }

            .logo-text {
                font-size: 25px
            }

            .deliver {
                display: none
            }

            .search {
                order: 3;
                flex-basis: 100%
            }

            .account-area {
                margin-left: auto
            }

            .navbar {
                overflow: auto
            }

            .navbar .container {
                width: max-content;
                min-width: 100%;
                padding: 0 18px
            }

            .nav-right {
                display: none
            }

            .section {
                padding-top: 16px
            }

            .hero {
                grid-template-columns: 1fr;
                min-height: auto
            }

            .hero-copy {
                padding: 40px 28px
            }

            .hero h1 {
                font-size: 38px
            }

            .hero-visual {
                padding: 0 20px 20px
            }

            .hero-ph {
                min-height: 300px
            }

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

            .safety-banner:after {
                display: none
            }

            .safety-banner h3 {
                font-size: 16px
            }

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

            .promo-three,
            .promo-two {
                grid-template-columns: 1fr
            }

            .arrivals-grid {
                grid-template-columns: 1fr 1fr
            }

            .vendor-panel {
                grid-column: 1/-1
            }

            .featured-grid {
                grid-template-columns: 1fr 1fr
            }

            .featured-ad {
                grid-column: 1/-1
            }

            .service-grid {
                grid-template-columns: 1fr 1fr
            }

            .newsletter {
                grid-template-columns: 1fr;
                gap: 25px
            }

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

            .foot-col:first-child,
            .foot-col:last-child {
                grid-column: 1/-1
            }

            .footer-bottom {
                flex-direction: column;
                align-items: flex-start
            }
        }

        @media (max-width:520px) {
            .container {
                width: calc(100% - 22px)
            }

            .logo-mark {
                width: 34px;
                height: 34px
            }

            .account-area .icon-item:first-child {
                display: none
            }

            .hero-copy {
                padding: 30px 20px
            }

            .hero h1 {
                font-size: 32px
            }

            .hero-actions {
                align-items: flex-start;
                flex-direction: column
            }

            .hero-ph {
                min-height: 230px
            }

            .heading-left {
                display: block
            }

            .section-heading p {
                margin-top: 5px
            }

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

            .products-grid {
                grid-template-columns: 1fr
            }

            .product-card {
                border-right: 0
            }

            .promo-card {
                min-height: 190px
            }

            .promo-card .promo-text {
                width: 62%
            }

            .arrivals-grid {
                grid-template-columns: 1fr
            }

            .arrivals-grid .product-card:nth-last-child(-n+2) {
                display: block
            }

            .featured-grid {
                grid-template-columns: 1fr
            }

            .featured-grid .product-card:last-child {
                display: block
            }

            .service-grid {
                grid-template-columns: 1fr
            }

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

            .foot-col {
                grid-column: 1/-1 !important
            }

            .announcement .container {
                font-size: 10px
            }

            .hero p {
                font-size: 14px
            }
        }
    


        /* Neelu brand and responsive overrides */
        :root {
            --purple: #0a6417;
            --purple-dark: #054d10;
            --red: #f29a00;
            --orange: #ffad17;
            --yellow: #ffc24a;
            --green: #0a6417;
            --green-soft: #dff2d7;
            --cyan: #e8f6de;
            --ink: #101710;
            --muted: #7f897f;
            --line: #e6ebe4;
            --soft: #f7f9f5;
            --promo: #f7f6f0;
            --footer: #f3f6f1;
        }

        body {
            overflow-x: hidden
        }

        .announcement {
            background: var(--purple-dark)
        }

        .delivery-note strong,
        .almost,
        .promo-card .small {
            color: var(--orange) !important
        }

        .logo {
            min-width: 190px;
            display: flex;
            align-items: center
        }

        .brand-logo-img {
            display: block;
            width: 168px;
            max-height: 55px;
            object-fit: contain;
            object-position: left center;
            position: relative;
            top: -5px;
        }

        .pin {
            color: var(--purple);
            background: #eef6eb
        }

        .search:focus-within {
            outline: 2px solid rgba(10, 100, 23, .16);
            background: #fff
        }

        .navbar a:hover,
        .topbar a:hover {
            color: var(--purple)
        }

        .btn-primary {
            background: var(--purple);
            transition: .2s ease
        }

        .btn-primary:hover {
            background: var(--purple-dark);
            transform: translateY(-1px)
        }

        .hero h1 {
            color: var(--purple-dark)
        }

        .hero-price strong {
            color: var(--orange)
        }

        .eyebrow {
            background: linear-gradient(90deg, #d9efd2, rgba(255, 255, 255, 0));
            color: var(--purple)
        }

        .discount {
            background: var(--orange);
            color: #1a1507
        }

        .plus {
            background: var(--purple)
        }

        .tag {
            background: #dcf0d6;
            color: var(--purple-dark)
        }

        .tag.cold {
            background: #fff0cf;
            color: #8a5a00
        }

        .stars {
            color: var(--orange)
        }

        .stock-bar span {
            background: linear-gradient(90deg, #ffc83f, var(--orange), #0a6417)
        }

        .safety-banner {
            background: #fff7e7
        }

        .safety-banner h3 {
            color: var(--purple-dark)
        }

        .safety-banner:after {
            background: linear-gradient(135deg, #fff6dc, #f5edd8);
            color: #9b7f36
        }

        .product-card,
        .category,
        .promo-card,
        .wide-promo,
        .featured-ad,
        .vendor-panel {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .product-card:hover,
        .category:hover,
        .promo-card:hover,
        .wide-promo:hover,
        .featured-ad:hover,
        .vendor-panel:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 26px rgba(31, 76, 29, .09);
            z-index: 2
        }

        .inline-icon {
            width: 15px;
            height: 15px;
            vertical-align: -2px;
            stroke-width: 2
        }

        .tag-icon {
            width: 12px;
            height: 12px;
            vertical-align: -2px
        }

        .ico svg,
        .magnify svg,
        .pin svg {
            width: 24px;
            height: 24px;
            stroke-width: 1.8
        }

        .heart svg {
            width: 22px;
            height: 22px
        }

        .plus svg {
            width: 20px;
            height: 20px
        }

        .service-icon svg {
            width: 30px;
            height: 30px;
            color: var(--purple)
        }

        .store-circle svg {
            width: 34px;
            height: 34px
        }

        .support-ico svg {
            width: 25px;
            height: 25px;
            color: var(--purple)
        }

        .socials svg {
            width: 17px;
            height: 17px;
            color: var(--purple)
        }

        .view-all,
        .small-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px
        }

        .view-all:hover,
        .small-btn:hover {
            border-color: #c8d9c5;
            color: var(--purple);
            background: #f8fbf7
        }

        /* Working hero carousel */
        .hero-carousel {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: var(--promo)
        }

        .hero-track {
            display: flex;
            width: 100%;
            transition: transform .55s cubic-bezier(.22, .61, .36, 1);
            will-change: transform
        }

        .hero-slide {
            flex: 0 0 100%;
            width: 100%;
            border-radius: 0;
            min-height: 590px
        }

        .hero-ph-one {
            background: linear-gradient(135deg, #f3f7ed, #fff9e9 62%, #e9f4df)
        }

        .hero-ph-two {
            background: linear-gradient(135deg, #edf6e9, #f4f9ee 60%, #fff1c9)
        }

        .hero-ph-three {
            background: linear-gradient(135deg, #fff4d8, #f5f8ef 62%, #e3f0dd)
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border: 1px solid rgba(10, 100, 23, .18);
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            display: grid;
            place-items: center;
            color: var(--purple);
            z-index: 8;
            cursor: pointer;
            box-shadow: 0 4px 18px rgba(0, 0, 0, .06)
        }

        .carousel-arrow svg {
            width: 19px;
            height: 19px
        }

        .carousel-prev {
            left: 18px
        }

        .carousel-next {
            right: 18px
        }

        .carousel-dots {
            position: absolute;
            left: 50%;
            bottom: 14px;
            transform: translateX(-50%);
            display: flex;
            gap: 7px;
            z-index: 9
        }

        .carousel-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: #ccd6c9;
            cursor: pointer;
            transition: .2s ease
        }

        .carousel-dot.is-active {
            width: 24px;
            background: var(--purple)
        }

        /* Mobile menu */
        .mobile-nav-toggle {
            display: none;
            border: 0;
            background: transparent;
            color: var(--ink);
            padding: 8px;
            cursor: pointer
        }

        .mobile-nav-toggle svg {
            width: 24px;
            height: 24px
        }

        /* Better image placeholders */
        .ph {
            border-color: #bfd2ba;
            color: #72806f;
            background: linear-gradient(135deg, #f7faf5, #f5f2e8)
        }

        @media(max-width:1100px) {
            .head-main .container {
                gap: 16px
            }

            .logo {
                min-width: 155px
            }

            .brand-logo-img {
                width: 145px
            }

            .toplinks {
                gap: 13px
            }

            .delivery-note {
                display: none
            }

            .account-area {
                gap: 10px
            }

            .hero-slide {
                min-height: 520px
            }

            .hero h1 {
                font-size: 44px
            }

            .hero-copy {
                padding-left: 48px
            }
        }

        @media(max-width:820px) {
            .container {
                width: calc(100% - 28px)
            }

            .announcement .container {
                justify-content: center;
                text-align: center
            }

            .sale-count {
                display: none
            }

            .head-main {
                padding: 12px 0
            }

            .head-main .container {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 12px
            }

            .logo {
                min-width: 0
            }

            .brand-logo-img {
                width: 132px;
                max-height: 54px
            }

            .account-area {
                justify-self: end
            }

            .account-area .icon-item {
                min-width: 38px;
                font-size: 0
            }

            .account-area .ico {
                font-size: 0
            }

            .badge {
                right: -1px;
                top: -5px
            }

            .search {
                grid-column: 1/-1;
                order: unset;
                width: 100%;
                height: 48px
            }

            .navbar {
                height: auto;
                overflow: visible
            }

            .navbar .container {
                width: 100%;
                display: block;
                padding: 6px 14px
            }

            .mobile-nav-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: auto
            }

            .nav-left {
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 8px 0 12px
            }

            .nav-left.is-open {
                display: flex
            }

            .nav-left a {
                padding: 11px 4px;
                border-top: 1px solid var(--line)
            }

            .nav-right {
                display: none
            }

            .hero-carousel {
                border-radius: 7px
            }

            .hero-slide {
                grid-template-columns: 1fr;
                min-height: auto
            }

            .hero-copy {
                padding: 38px 26px 18px
            }

            .hero h1 {
                font-size: 37px;
                line-height: 1.08
            }

            .hero p {
                font-size: 14px;
                margin-bottom: 24px
            }

            .hero-visual {
                padding: 0 18px 34px
            }

            .hero-ph {
                min-height: 260px;
                aspect-ratio: 16/9
            }

            .carousel-arrow {
                width: 36px;
                height: 36px;
                top: auto;
                bottom: 10px;
                transform: none
            }

            .carousel-prev {
                left: 16px
            }

            .carousel-next {
                right: 16px
            }

            .carousel-dots {
                bottom: 24px
            }

            .category-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr))
            }

            .category {
                min-height: 150px;
                padding: 14px 8px
            }

            .cat-ph {
                aspect-ratio: 1.2/1
            }

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

            .product-card {
                min-width: 0;
                min-height: 390px
            }

            .promo-three,
            .promo-two {
                grid-template-columns: 1fr
            }

            .promo-card,
            .wide-promo {
                min-height: 220px
            }

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

            .vendor-panel {
                grid-column: 1/-1;
                min-height: 320px
            }

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

            .featured-ad {
                grid-column: 1/-1;
                min-height: 300px
            }

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

            .newsletter {
                grid-template-columns: 1fr;
                gap: 24px
            }

            .footer-main {
                grid-template-columns: repeat(2, 1fr)
            }

            .foot-col:first-child,
            .foot-col:last-child {
                grid-column: 1/-1
            }
        }

        @media(max-width:560px) {
            .container {
                width: calc(100% - 20px)
            }

            .announcement {
                font-size: 10px
            }

            .brand-logo-img {
                width: 116px
            }

            .account-area {
                gap: 4px
            }

            .account-area .icon-item {
                min-width: 34px
            }

            .hero-copy {
                padding: 30px 20px 14px
            }

            .hero h1 {
                font-size: 31px;
                letter-spacing: -1.2px
            }

            .hero-actions {
                flex-direction: column;
                gap: 13px
            }

            .hero-price strong {
                font-size: 22px
            }

            .hero-visual {
                padding: 0 12px 42px
            }

            .hero-ph {
                min-height: 210px
            }

            .carousel-arrow {
                bottom: 8px
            }

            .carousel-dots {
                bottom: 22px
            }

            .section-heading {
                align-items: flex-start;
                gap: 12px
            }

            .section-heading .heading-left {
                display: block
            }

            .section-heading p {
                margin-top: 5px
            }

            .view-all {
                white-space: nowrap
            }

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

            .category {
                min-height: 138px
            }

            .category b {
                font-size: 11px
            }

            .safety-banner {
                padding: 18px
            }

            .safety-banner h3 {
                font-size: 15px
            }

            .products-grid {
                grid-template-columns: 1fr
            }

            .product-card {
                min-height: 390px;
                border-right: 0
            }

            .product-ph {
                height: 190px
            }

            .promo-card {
                min-height: 205px;
                padding: 23px 15px
            }

            .promo-card .promo-text {
                width: 62%
            }

            .promo-image {
                width: 46%
            }

            .arrivals-grid {
                grid-template-columns: 1fr
            }

            .arrivals-grid .product-card {
                display: block !important
            }

            .vendor-panel {
                grid-column: auto
            }

            .wide-promo {
                min-height: 225px;
                padding: 26px 18px
            }

            .wide-promo .copy {
                width: 56%
            }

            .wide-promo h3 {
                font-size: 22px
            }

            .wide-promo .ph {
                width: 46%
            }

            .featured-grid {
                grid-template-columns: 1fr
            }

            .featured-ad {
                grid-column: auto
            }

            .featured-grid .product-card {
                display: block !important
            }

            .service-grid {
                grid-template-columns: 1fr
            }

            .service-strip {
                padding: 18px 0
            }

            .footer-main {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .foot-col {
                grid-column: auto !important
            }

            .newsletter {
                padding-bottom: 35px
            }

            .subscribe-row {
                width: 100%
            }

            .footer-bottom {
                align-items: flex-start
            }

            .bottom-links {
                flex-wrap: wrap
            }
        }
    


        /* Product menu, image badges, quantity stepper and toast interactions */
        .topright {
            margin-left: auto
        }

        .navbar {
            position: relative;
            z-index: 40;
            overflow: visible
        }

        .navbar .container {
            overflow: visible
        }

        .nav-right {
            position: relative
        }

        .nav-products-trigger {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap
        }

        .nav-chevron {
            width: 16px;
            height: 16px;
            stroke-width: 2;
            transition: transform .18s ease
        }

        .nav-products-trigger.is-open .nav-chevron {
            transform: rotate(180deg)
        }

        .nav-products-popover {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 10px);
            width: min(var(--max), calc(100% - 64px));
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: 0 16px 35px rgba(20, 38, 20, .16);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .18s ease, transform .18s ease, visibility .18s;
            z-index: 80;
            padding: 20px 20px 18px;
        }

        .nav-products-popover.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0)
        }

        .nav-products-panel { display:none; }
        .nav-products-panel.is-active { display:block; }
        .popover-empty { border-top:1px solid var(--line); padding:30px 12px; text-align:center; color:#8c94a2; font-size:12px; }

        .popover-head {
            display: flex;
            align-items: baseline;
            gap: 14px;
            padding: 0 2px 14px
        }

        .popover-head strong {
            font-size: 15px
        }

        .popover-head span {
            font-size: 11px;
            color: #8c94a2
        }

        .popover-products {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            border-top: 1px solid var(--line);
            border-left: 1px solid var(--line)
        }

        .popover-product {
            min-height: 385px !important;
            padding: 14px 14px 12px !important;
            border-right: 1px solid var(--line) !important;
            border-bottom: 1px solid var(--line);
            box-shadow: none !important;
            transform: none !important
        }

        .popover-product .product-ph {
            height: 155px !important
        }

        .popover-product h3 {
            font-size: 12px;
            min-height: 48px
        }

        .popover-product .price strong {
            font-size: 19px
        }

        .product-media {
            position: relative;
            margin: 0 0 10px;
            isolation: isolate
        }

        .product-media .product-ph {
            margin: 0;
            width: 100%
        }

        .product-media .discount {
            left: 0;
            top: 0;
            z-index: 4
        }

        .product-media .heart {
            right: 8px;
            top: 8px;
            z-index: 5;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .88);
            cursor: pointer;
            transition: .18s ease
        }

        .product-media .heart:hover {
            background: #fff;
            transform: scale(1.05)
        }

        .product-media .heart.is-wishlisted {
            background: #fff3d9;
            color: var(--orange)
        }

        .product-media .heart.is-wishlisted svg {
            fill: var(--orange);
            stroke: var(--orange)
        }

        .product-media .tag {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 5;
            margin: 0;
            border-radius: 0 7px 0 0;
            padding: 6px 10px;
            display: inline-flex;
            align-items: center;
            gap: 4px
        }

        .product-media .cart-control {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 6;
            height: 38px;
            min-width: 38px;
            border-radius: 20px;
            background: var(--purple);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
            transition: .2s ease;
            padding: 0 10px
        }

        .product-media .cart-control svg {
            width: 19px;
            height: 19px
        }

        .product-media .cart-control.is-active {
            min-width: 106px;
            gap: 8px;
            background: var(--purple-dark)
        }

        .qty-btn {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(255, 255, 255, .15);
            font-weight: 800;
            font-size: 17px;
            line-height: 1;
            user-select: none
        }

        .qty-count {
            min-width: 18px;
            text-align: center;
            font-weight: 700;
            font-size: 12px
        }

        .product-card {
            overflow: visible
        }

        .product-card .price strong {
            color: var(--orange)
        }

        .toast-stack {
            position: fixed;
            right: 20px;
            top: 20px;
            z-index: 10020;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            width: min(360px, calc(100vw - 32px))
        }

        .toast {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            background: #fff;
            border: 1px solid #dce8d8;
            border-radius: 9px;
            padding: 12px 14px;
            box-shadow: 0 12px 30px rgba(17, 47, 16, .18);
            opacity: 0;
            transform: translateY(-10px);
            animation: toastIn .2s ease forwards;
            font-size: 12px;
            color: #29322a
        }

        .toast.toast-warning {
            border-color: #f2dfb9
        }

        .icon-action {
            border: 0;
            background: transparent;
            color: inherit;
            padding: 0;
            cursor: pointer;
            font-family: inherit
        }

        .icon-action:hover {
            color: var(--purple)
        }

        body.drawer-open {
            overflow: hidden
        }

        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(12, 18, 12, .52);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .22s ease, visibility .22s ease;
            z-index: 9990
        }

        .drawer-overlay.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto
        }

        .side-drawer {
            position: fixed;
            top: 0;
            right: 0;
            width: min(390px, 100vw);
            height: 100dvh;
            background: #fff;
            z-index: 9995;
            box-shadow: -12px 0 35px rgba(0, 0, 0, .12);
            transform: translateX(105%);
            transition: transform .28s cubic-bezier(.22, .61, .36, 1);
            display: flex;
            flex-direction: column;
            color: #171b17
        }

        .side-drawer.is-open {
            transform: translateX(0)
        }

        .drawer-head {
            height: 54px;
            min-height: 54px;
            padding: 0 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--line)
        }

        .drawer-head h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 500
        }

        .drawer-close {
            width: 34px;
            height: 34px;
            border: 0;
            background: transparent;
            border-radius: 50%;
            display: grid;
            place-items: center;
            cursor: pointer;
            color: #222
        }

        .drawer-close:hover {
            background: var(--soft);
            color: var(--purple)
        }

        .drawer-close svg {
            width: 20px;
            height: 20px
        }

        .shipping-notice {
            padding: 16px 18px;
            text-align: center;
            background: #eef6eb;
            color: #3b5f3d;
            font-size: 11px;
            border-bottom: 1px solid #dce9d8
        }

        .shipping-notice strong {
            color: var(--purple)
        }

        .shipping-progress {
            height: 4px;
            background: #dfeadf;
            overflow: hidden;
            margin-top: 9px;
            border-radius: 999px
        }

        .shipping-progress span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--orange), var(--purple));
            transition: width .25s ease
        }

        .drawer-body {
            flex: 1;
            overflow: auto;
            padding: 0 16px
        }

        .drawer-empty {
            min-height: 260px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #7d857d;
            padding: 35px 18px
        }

        .drawer-empty svg {
            width: 42px;
            height: 42px;
            margin-bottom: 14px;
            color: #b6c2b4
        }

        .drawer-empty b {
            font-size: 14px;
            color: #252b25;
            margin-bottom: 5px
        }

        .drawer-empty span {
            font-size: 11px;
            line-height: 1.5
        }

        .drawer-item {
            display: grid;
            grid-template-columns: 20px 58px minmax(0, 1fr);
            gap: 10px;
            padding: 18px 0;
            border-bottom: 1px solid var(--line);
            align-items: start
        }

        .drawer-remove {
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 50%;
            background: #ed3b4e;
            color: #fff;
            display: grid;
            place-items: center;
            cursor: pointer;
            padding: 0;
            margin-top: 2px
        }

        .drawer-remove svg {
            width: 12px;
            height: 12px;
            stroke-width: 3
        }

        .drawer-thumb {
            width: 58px;
            height: 70px;
            border: 1px solid #e7ece5;
            border-radius: 6px;
            background: linear-gradient(145deg, #f9fbf7, #f2f4ed);
            display: grid;
            place-items: center;
            color: #9ca89a;
            font-size: 9px;
            text-align: center;
            padding: 5px
        }

        .drawer-thumb svg {
            width: 24px;
            height: 24px;
            color: #aeb9ac
        }

        .drawer-info {
            min-width: 0
        }

        .drawer-item-title {
            font-size: 11px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0 0 12px;
            color: #232823
        }

        .drawer-item-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap
        }

        .drawer-qty {
            display: grid;
            grid-template-columns: 30px 35px 30px;
            height: 32px;
            border: 1px solid #cfd6cf;
            border-radius: 6px;
            overflow: hidden;
            background: #fff
        }

        .drawer-qty button {
            border: 0;
            background: #fff;
            cursor: pointer;
            font-size: 16px;
            color: #333
        }

        .drawer-qty button:hover {
            background: #f3f7f1;
            color: var(--purple)
        }

        .drawer-qty span {
            display: grid;
            place-items: center;
            font-size: 11px;
            font-weight: 600;
            border-left: 1px solid #edf0ed;
            border-right: 1px solid #edf0ed
        }

        .drawer-price {
            font-size: 13px;
            font-weight: 700;
            color: var(--purple)
        }

        .drawer-wishlist-action {
            border: 1px solid #cfd9cc;
            border-radius: 6px;
            background: #fff;
            color: var(--purple-dark);
            font-size: 10px;
            font-weight: 700;
            padding: 8px 10px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px
        }

        .drawer-wishlist-action:hover {
            background: #f2f8ef;
            border-color: #b8ceb2
        }

        .drawer-wishlist-action svg {
            width: 14px;
            height: 14px
        }

        .drawer-footer {
            border-top: 1px solid var(--line);
            padding: 13px 16px 16px;
            background: #fff
        }

        .drawer-subtotal {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 15px
        }

        .drawer-subtotal strong {
            font-size: 15px;
            color: #171b17
        }

        .drawer-actions {
            display: grid;
            gap: 9px
        }

        .drawer-btn {
            height: 44px;
            border-radius: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            text-decoration: none
        }

        .drawer-btn-outline {
            border: 1px solid #cfd5cf;
            background: #fff;
            color: var(--purple-dark)
        }

        .drawer-btn-primary {
            border: 1px solid var(--purple);
            background: var(--purple);
            color: #fff
        }

        .drawer-btn-primary:hover {
            background: var(--purple-dark)
        }

        .drawer-bottom-note {
            min-height: 43px;
            padding: 13px 15px;
            text-align: center;
            background: #f5f7f5;
            border-top: 1px solid var(--line);
            font-size: 10px;
            font-weight: 600;
            color: #4b534b
        }

        .wishlist-drawer .drawer-body {
            padding-top: 4px
        }

        .wishlist-drawer .drawer-item {
            grid-template-columns: 20px 58px minmax(0, 1fr)
        }

        .wishlist-drawer .drawer-price {
            color: var(--orange)
        }

        @media(max-width:560px) {
            .side-drawer {
                width: 100vw
            }

            .drawer-head {
                padding: 0 14px
            }

            .drawer-body {
                padding: 0 14px
            }

            .drawer-item {
                grid-template-columns: 20px 52px minmax(0, 1fr);
                gap: 8px
            }

            .drawer-thumb {
                width: 52px;
                height: 64px
            }

            .drawer-item-title {
                font-size: 11px
            }

            .drawer-footer {
                padding: 12px 14px 14px
            }
        }

        .toast svg {
            width: 18px;
            height: 18px;
            color: var(--purple);
            flex: 0 0 auto
        }

        .toast-warning svg {
            color: var(--orange)
        }

        .toast b {
            display: block;
            color: #111;
            margin-bottom: 2px;
            font-size: 12px
        }

        .toast small {
            color: #788178;
            font-size: 11px
        }

        .toast.is-leaving {
            animation: toastOut .2s ease forwards
        }

        @keyframes toastIn {
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes toastOut {
            to {
                opacity: 0;
                transform: translateY(-8px)
            }
        }

        @media(max-width:1200px) {
            .nav-products-popover {
                width: calc(100% - 34px)
            }

            .popover-products {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media(max-width:820px) {
            .nav-products-popover {
                display: none !important
            }

            .product-media .product-ph {
                height: 190px
            }

            .product-media .tag {
                font-size: 9px
            }

            .toast-stack {
                top: 12px;
                right: 12px
            }
        }
    


        /* Compact mobile header and floating cart */
        .mobile-search-toggle {
            display: none;
            width: 40px;
            height: 40px;
            border: 0;
            background: transparent;
            color: var(--ink);
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            flex: 0 0 auto
        }

        .mobile-search-toggle:hover {
            background: #f3f7f1;
            color: var(--purple)
        }

        .mobile-search-toggle svg {
            width: 22px;
            height: 22px;
            stroke-width: 2
        }

        .mobile-header-menu {
            flex: 0 0 auto
        }

        .floating-cart {
            position: fixed;
            right: 24px;
            bottom: 88px;
            width: 58px;
            height: 58px;
            border: 0;
            border-radius: 50%;
            background: var(--purple);
            color: #fff;
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 1200;
            box-shadow: 0 10px 28px rgba(5, 77, 16, .28);
            transition: transform .18s ease, background .18s ease
        }

        .floating-cart:hover {
            background: var(--purple-dark);
            transform: translateY(-2px)
        }

        .floating-cart svg {
            width: 25px;
            height: 25px;
            stroke-width: 2
        }

        .floating-cart-count {
            position: absolute;
            right: -2px;
            top: -4px;
            min-width: 21px;
            height: 21px;
            padding: 0 5px;
            border-radius: 999px;
            background: var(--orange);
            color: #17120a;
            border: 2px solid #fff;
            display: grid;
            place-items: center;
            font-size: 10px;
            font-weight: 800;
            line-height: 1
        }

        @media(max-width:820px) {
            .announcement {
                height: 25px;
                padding: 0;
                font-size: 8px;
                line-height: 1.15
            }

            .announcement .container {
                width: 100%;
                padding: 0 10px;
                justify-content: center;
                text-align: center;
                white-space: nowrap;
                overflow: hidden
            }

            .announcement .sale-count {
                display: none
            }

            .topbar {
                display: none
            }

            .head-main {
                height: auto;
                padding: 0;
                background: #fff;
                border-bottom: 1px solid var(--line);
                position: relative;
                z-index: 80
            }

            .head-main .container {
                width: 100%;
                height: 66px;
                padding: 0 10px;
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: nowrap
            }

            .mobile-nav-toggle.mobile-header-menu {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                width: 38px;
                height: 38px;
                padding: 7px;
                border-radius: 50%;
                order: 1
            }

            .mobile-nav-toggle.mobile-header-menu:hover {
                background: #f3f7f1;
                color: var(--purple)
            }

            .mobile-nav-toggle.mobile-header-menu svg {
                width: 23px;
                height: 23px
            }

            .logo {
                order: 2;
                min-width: 0;
                margin-right: auto;
                display: flex;
                align-items: center
            }

            .brand-logo-img {
                width: 88px;
                max-height: 43px;
                object-fit: contain
            }

            .deliver {
                display: none
            }

            .mobile-search-toggle {
                display: flex;
                order: 3;
                width: 36px;
                height: 36px
            }

            .account-area {
                order: 4;
                display: flex;
                align-items: center;
                gap: 2px;
                margin: 0;
                justify-self: auto
            }

            .account-area>.icon-item:first-child {
                display: none
            }

            .account-area .icon-item {
                min-width: 36px;
                width: 36px;
                height: 38px;
                padding: 7px 5px;
                display: grid;
                place-items: center;
                font-size: 0;
                border-radius: 50%
            }

            .account-area .icon-item:hover {
                background: #f3f7f1
            }

            .account-area .ico {
                display: grid;
                place-items: center;
                line-height: 1;
                font-size: 0
            }

            .account-area .ico svg {
                width: 22px;
                height: 22px;
                stroke-width: 2
            }

            .account-area .badge {
                right: -1px;
                top: -4px;
                min-width: 17px;
                height: 17px;
                padding: 0 4px;
                background: var(--orange);
                color: #17120a;
                border: 2px solid #fff;
                font-size: 8px
            }

            .head-main .search {
                display: none;
                position: absolute;
                left: 10px;
                right: 10px;
                top: 66px;
                z-index: 85;
                width: auto;
                height: 46px;
                background: #f3f5f2;
                border: 1px solid #e2e9df;
                border-radius: 9px;
                box-shadow: 0 8px 22px rgba(20, 38, 20, .10);
                grid-column: auto;
                order: unset
            }

            .head-main .search.is-mobile-open {
                display: flex
            }

            .head-main .search input {
                font-size: 12px
            }

            .head-main .search .magnify svg {
                width: 20px;
                height: 20px
            }

            .navbar {
                height: auto;
                min-height: 0;
                border-bottom: 0;
                overflow: visible;
                position: relative;
                z-index: 70
            }

            .navbar .container {
                width: 100%;
                padding: 0;
                display: block;
                min-height: 0
            }

            .nav-left {
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 4px 12px 12px;
                background: #fff;
                border-bottom: 1px solid var(--line);
                box-shadow: 0 10px 22px rgba(20, 38, 20, .08)
            }

            .nav-left.is-open {
                display: flex
            }

            .nav-left a {
                padding: 12px 8px;
                border-top: 1px solid var(--line);
                font-size: 13px
            }

            .nav-left a:first-child {
                border-top: 0
            }

            .nav-right {
                display: none
            }

            main .section:first-child {
                padding-top: 14px
            }

            .floating-cart {
                right: 14px;
                bottom: 16px;
                width: 54px;
                height: 54px;
                z-index: 1300
            }

            .floating-cart svg {
                width: 23px;
                height: 23px
            }

            .floating-cart-count {
                min-width: 20px;
                height: 20px;
                font-size: 9px
            }

            .backtop {
                right: 16px;
                bottom: 82px;
                width: 44px;
                height: 44px
            }

            .toast-stack {
                top: 10px;
                right: 10px;
                width: min(320px, calc(100vw - 20px))
            }
        }

        @media(max-width:390px) {
            .head-main .container {
                padding: 0 7px;
                gap: 3px;
                height: 62px
            }

            .brand-logo-img {
                width: 80px;
                max-height: 35px
            }

            .mobile-nav-toggle.mobile-header-menu {
                width: 35px;
                height: 35px;
                padding: 6px
            }

            .mobile-search-toggle {
                width: 34px;
                height: 34px
            }

            .account-area .icon-item {
                width: 34px;
                min-width: 34px;
                height: 36px;
                padding: 6px 4px
            }

            .head-main .search {
                top: 62px;
                left: 7px;
                right: 7px
            }
        }
    


        /* ================================================================
         * Reusable horizontal card navigation
         * Used by the CMS-driven card sections requested by the storefront.
         * ================================================================ */
        .content-slider{
            position:relative;
            width:100%;
        }
        .content-slider-track{
            overflow-x:auto !important;
            overflow-y:hidden;
            scroll-behavior:smooth;
            scroll-snap-type:x mandatory;
            overscroll-behavior-x:contain;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:none;
        }
        .content-slider-track::-webkit-scrollbar{display:none}
        .content-slider-track > *{scroll-snap-align:start}

        .content-nav{
            position:absolute;
            top:50%;
            z-index:20;
            width:40px;
            height:40px;
            border-radius:50%;
            border:1px solid rgba(15,23,42,.14);
            background:#fff;
            color:var(--purple-dark);
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            box-shadow:0 6px 18px rgba(15,23,42,.13);
            transform:translateY(-50%);
            transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease;
        }
        .content-nav:hover:not(:disabled){
            transform:translateY(-50%) scale(1.06);
            box-shadow:0 9px 24px rgba(15,23,42,.18);
            background:#f8fff6;
        }
        .content-nav:focus-visible{
            outline:3px solid rgba(10,100,23,.22);
            outline-offset:2px;
        }
        .content-nav:disabled{
            opacity:.32;
            cursor:not-allowed;
            box-shadow:none;
        }
        .content-nav svg{width:20px;height:20px;stroke-width:2.25}
        .content-nav-prev{left:-19px}
        .content-nav-next{right:-19px}

        /* Header dropdown products: six cards per desktop viewport, using the same
         * reusable left/right slider behaviour as the homepage product sections. */
        .nav-popover-slider{
            margin:0;
        }
        .nav-popover-slider .content-nav-prev{left:-14px}
        .nav-popover-slider .content-nav-next{right:-14px}
        .popover-products.content-slider-track{
            display:flex !important;
            grid-template-columns:none !important;
            gap:0;
        }
        .popover-products.content-slider-track > .popover-product{
            flex:0 0 16.666667%;
            min-width:0;
        }

        /* Top Categories: preserve the original nine-card desktop density. */
        .category-grid.content-slider-track{
            display:flex !important;
            gap:0;
        }
        .category-grid.content-slider-track > .category{
            flex:0 0 11.111111%;
            min-width:0;
        }

        /* New Products: six cards remain visible on wide desktop. */
        .products-grid.content-slider-track{
            display:flex !important;
            gap:0;
        }
        .products-grid.content-slider-track > .product-card{
            flex:0 0 16.666667%;
            min-width:0;
        }

        /* Promotions: three promotion cards per desktop viewport. */
        .promo-three.content-slider-track{
            display:flex !important;
            gap:28px;
        }
        .promo-three.content-slider-track > .promo-card{
            flex:0 0 calc((100% - 56px) / 3);
            min-width:0;
        }

        /* Wide Promotions: preserve the original two-card desktop layout,
         * while allowing additional wide promotion cards to scroll horizontally. */
        .promo-two.content-slider-track{
            display:flex !important;
            gap:28px;
        }
        .promo-two.content-slider-track > .wide-promo{
            flex:0 0 calc((100% - 28px) / 2);
            min-width:0;
        }

        /* New Arrivals: keep the vendor panel wider than product cards. */
        .arrivals-grid.content-slider-track{
            display:flex !important;
            gap:0;
        }
        .arrivals-grid.content-slider-track > .vendor-panel{
            flex:0 0 25.4%;
            min-width:0;
        }
        .arrivals-grid.content-slider-track > .product-card{
            flex:0 0 14.92%;
            min-width:0;
            display:block !important;
        }

        /* Featured: banner stays wider while product cards continue in a row. */
        .featured-grid.content-slider-track{
            display:flex !important;
            gap:0;
        }
        .featured-grid.content-slider-track > .featured-ad{
            flex:0 0 24.6%;
            min-width:0;
        }
        .featured-grid.content-slider-track > .product-card{
            flex:0 0 18.85%;
            min-width:0;
            display:block !important;
        }

        /* Service Highlights */
        .service-grid.content-slider-track{
            display:flex !important;
            gap:26px;
        }
        .service-grid.content-slider-track > .service{
            flex:0 0 calc((100% - 78px) / 4);
            min-width:0;
        }

        /* Safety and Newsletter are full-width slides. */
        .safety-slider{margin-top:27px}
        .safety-slider-track{
            display:flex;
            gap:16px;
        }
        .safety-slider-track > .safety-banner{
            flex:0 0 100%;
            min-width:100%;
            margin-top:0;
        }
        .newsletter-slider-track{
            display:flex;
            gap:24px;
        }
        .newsletter-slider-track > .newsletter{
            flex:0 0 100%;
            min-width:100%;
            box-sizing:border-box;
        }

        @media (max-width:1200px){
            .popover-products.content-slider-track > .popover-product{flex-basis:33.333333%}
        }
        @media (max-width:1100px){
            .category-grid.content-slider-track > .category{flex-basis:25%}
            .products-grid.content-slider-track > .product-card{flex-basis:33.333333%}
            .promo-three.content-slider-track > .promo-card{flex-basis:calc((100% - 28px) / 2)}
            .promo-two.content-slider-track > .wide-promo{flex-basis:calc((100% - 28px) / 2)}
            .arrivals-grid.content-slider-track > .vendor-panel{flex-basis:44%}
            .arrivals-grid.content-slider-track > .product-card{flex-basis:28%}
            .featured-grid.content-slider-track > .featured-ad{flex-basis:40%}
            .featured-grid.content-slider-track > .product-card{flex-basis:30%}
            .service-grid.content-slider-track > .service{flex-basis:calc((100% - 26px) / 2)}
        }
        @media (max-width:620px){
            .content-nav{
                width:36px;
                height:36px;
            }
            .content-nav-prev{left:6px}
            .content-nav-next{right:6px}
            .category-grid.content-slider-track > .category{flex-basis:50%}
            .products-grid.content-slider-track > .product-card{flex-basis:88%}
            .promo-three.content-slider-track{gap:14px}
            .promo-three.content-slider-track > .promo-card{flex-basis:88%}
            .promo-two.content-slider-track{gap:14px}
            .promo-two.content-slider-track > .wide-promo{flex-basis:88%}
            .arrivals-grid.content-slider-track > .vendor-panel,
            .arrivals-grid.content-slider-track > .product-card{flex-basis:88%}
            .featured-grid.content-slider-track > .featured-ad,
            .featured-grid.content-slider-track > .product-card{flex-basis:88%}
            .service-grid.content-slider-track{gap:14px}
            .service-grid.content-slider-track > .service{flex-basis:88%}
        }