:root {
            --primary: #087f5b;
            --primary-dark: #056347;
            --primary-soft: #e8f7f1;
            --accent: #ffb703;
            --ink: #15231e;
            --muted: #708078;
            --line: #e5ebe8;
            --surface: #fff;
            --bg: #f6f8f7;
            --danger: #e5484d;
            --radius: 22px;
            --shadow: 0 16px 45px rgba(22,48,38,.09)
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: "Vazirmatn",Tahoma,sans-serif;
            font-size: 14px;
            overflow-x: hidden
        }

        button, input {
            font: inherit
        }

        button, a {
            -webkit-tap-highlight-color: transparent
        }

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

        .container {
            width: min(1280px,calc(100% - 40px));
            margin: auto
        }

        .only-mobile {
            display: none
        }

        .topbar {
            background: #102c23;
            color: #d9eee7;
            padding: 8px 0;
            font-size: 12px
        }

        .topbar-row {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .top-links {
            display: flex;
            gap: 22px
        }

        .top-note b {
            color: #fff
        }

        .main-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255,255,255,.95);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229,235,232,.9)
        }

        .header-row {
            min-height: 82px;
            display: grid;
            grid-template-columns: auto minmax(280px,620px) auto;
            align-items: center;
            gap: 30px
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 11px
        }

        .logo-mark {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            background: var(--primary);
            display: grid;
            place-items: center;
            color: #fff;
            box-shadow: 0 9px 22px rgba(8,127,91,.25)
        }

            .logo-mark svg {
                width: 29px
            }

        .logo-copy strong {
            display: block;
            font-size: 24px;
            line-height: 1
        }

        .logo-copy small {
            font-size: 10px;
            color: var(--muted);
            letter-spacing: 1.8px
        }

        .search {
            height: 50px;
            display: flex;
            align-items: center;
            background: #f3f6f5;
            border: 1px solid transparent;
            border-radius: 16px;
            padding: 0 16px;
            transition: .2s
        }

            .search:focus-within {
                background: white;
                border-color: #82c7b1;
                box-shadow: 0 0 0 4px rgba(8,127,91,.08)
            }

            .search svg {
                width: 21px;
                color: var(--muted)
            }

            .search input {
                width: 100%;
                border: 0;
                outline: 0;
                background: transparent;
                padding: 0 11px;
                color: var(--ink)
            }

            .search kbd {
                direction: ltr;
                border: 1px solid #d7dfdb;
                background: #fff;
                color: #85928c;
                padding: 2px 7px;
                border-radius: 7px;
                font-size: 10px
            }

        .header-actions {
            display: flex;
            gap: 9px
        }

        .icon-btn {
            height: 48px;
            min-width: 48px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            color: var(--ink);
            position: relative
        }

            .icon-btn svg {
                width: 21px
            }

            .icon-btn.user {
                padding: 0 15px
            }

        .badge {
            position: absolute;
            top: -5px;
            left: -5px;
            background: var(--danger);
            color: #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 10px;
            display: grid;
            place-items: center;
            border: 2px solid #fff
        }

        .nav {
            background: #fff;
            border-bottom: 1px solid var(--line)
        }

        .nav-row {
            height: 56px;
            display: flex;
            align-items: center;
            gap: 30px
        }

        .cat-trigger {
            border: 0;
            background: var(--primary);
            color: #fff;
            border-radius: 13px;
            padding: 11px 18px;
            display: flex;
            gap: 9px;
            align-items: center;
            cursor: pointer;
            font-weight: 700
        }

            .cat-trigger svg {
                width: 20px
            }

        .nav-links {
            display: flex;
            gap: 27px;
            color: #485850;
            font-weight: 500
        }

            .nav-links a:hover {
                color: var(--primary)
            }

        .seller-link {
            margin-right: auto;
            color: var(--primary);
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 7px
        }

            .seller-link span {
                background: var(--primary-soft);
                padding: 4px 8px;
                border-radius: 8px;
                font-size: 10px
            }

        main {
            padding-bottom: 40px
        }

        .hero {
            padding: 25px 0 10px
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0,2fr) minmax(260px,.78fr);
            gap: 18px
        }

        .hero-main {
            min-height: 440px;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(120deg,#075f46,#0b9c70);
            color: #fff;
            padding: 55px 55px;
            isolation: isolate
        }

            .hero-main:before, .hero-main:after {
                content: "";
                position: absolute;
                border-radius: 50%;
                z-index: -1
            }

            .hero-main:before {
                width: 390px;
                height: 390px;
                background: rgba(255,255,255,.08);
                left: -80px;
                bottom: -170px
            }

            .hero-main:after {
                width: 220px;
                height: 220px;
                border: 35px solid rgba(255,183,3,.19);
                left: 19%;
                top: -130px
            }

        .eyebrow {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            background: rgba(255,255,255,.13);
            border: 1px solid rgba(255,255,255,.2);
            padding: 8px 12px;
            border-radius: 99px;
            font-size: 12px
        }

            .eyebrow i {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: var(--accent);
                box-shadow: 0 0 0 5px rgba(255,183,3,.17)
            }

        .hero h1 {
            font-size: 44px;
            line-height: 1.45;
            margin: 20px 0 10px;
            max-width: 630px
        }

            .hero h1 em {
                font-style: normal;
                color: #ffd166
            }

        .hero-main > p {
            font-size: 16px;
            line-height: 2;
            max-width: 570px;
            color: #daf3ea;
            margin: 0
        }

        .hero-actions {
            display: flex;
            gap: 11px;
            margin-top: 28px
        }

        .btn {
            border: 0;
            border-radius: 14px;
            padding: 13px 19px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px
        }

            .btn svg {
                width: 19px
            }

        .btn-light {
            background: #fff;
            color: var(--primary)
        }

        .btn-ghost {
            background: rgba(255,255,255,.1);
            color: #fff;
            border: 1px solid rgba(255,255,255,.25)
        }

        .hero-stats {
            display: flex;
            gap: 28px;
            margin-top: 34px
        }

            .hero-stats strong {
                display: block;
                font-size: 20px
            }

            .hero-stats small {
                color: #cbe7dd
            }

        .hero-visual {
            position: absolute;
            left: 35px;
            bottom: 20px;
            width: 280px;
            height: 230px;
            border: 2px dashed rgba(255,255,255,.55);
            border-radius: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #dff7ee;
            background: rgba(255,255,255,.07)
        }

        .placeholder svg {
            width: 44px;
            margin-bottom: 8px
        }

        .placeholder small {
            opacity: .8
        }

        .hero-side {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 18px
        }

        .mini-banner {
            border-radius: 26px;
            padding: 27px;
            position: relative;
            overflow: hidden;
            min-height: 210px
        }

            .mini-banner.yellow {
                background: #fff1bf
            }

            .mini-banner.mint {
                background: #def6ec
            }

            .mini-banner .mini-tag {
                font-size: 11px;
                font-weight: 800;
                color: var(--primary)
            }

            .mini-banner h3 {
                font-size: 21px;
                line-height: 1.6;
                margin: 9px 0 5px;
                max-width: 180px
            }

            .mini-banner p {
                margin: 0;
                color: #6d786e;
                font-size: 12px
            }

        .mini-img {
            position: absolute;
            left: 18px;
            bottom: 18px;
            width: 110px;
            height: 98px;
            border: 2px dashed rgba(21,35,30,.25);
            border-radius: 18px;
            display: grid;
            place-items: center;
            color: #77847d
        }

            .mini-img svg {
                width: 32px
            }

        .trust-strip {
            margin-top: 18px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 16px 22px;
            display: grid;
            grid-template-columns: repeat(4,1fr)
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 12px;
            border-left: 1px solid var(--line);
            justify-content: center
        }

            .trust-item:last-child {
                border: 0
            }

        .trust-icon {
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: var(--primary-soft);
            display: grid;
            place-items: center;
            color: var(--primary)
        }

            .trust-icon svg {
                width: 21px
            }

        .trust-item strong {
            display: block;
            font-size: 13px
        }

        .trust-item small {
            color: var(--muted)
        }

        .section {
            padding-top: 48px
        }

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

        .section-title span {
            color: var(--primary);
            font-weight: 800;
            font-size: 12px
        }

        .section-title h2 {
            margin: 5px 0 0;
            font-size: 26px
        }

        .view-all {
            color: var(--primary);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .categories {
            display: grid;
            grid-template-columns: repeat(8,1fr);
            gap: 13px
        }

        .category-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 16px 10px;
            text-align: center;
            cursor: pointer;
            transition: .25s
        }

            .category-card:hover, .category-card.active {
                border-color: #80c9b2;
                transform: translateY(-4px);
                box-shadow: 0 12px 30px rgba(17,76,57,.09)
            }

        .category-icon {
            width: 72px;
            height: 72px;
            margin: auto;
            border: 2px dashed #b9c8c1;
            border-radius: 19px;
            display: grid;
            place-items: center;
            background: #f8faf9;
            color: #7e8f87
        }

            .category-icon svg {
                width: 30px
            }

        .category-card strong {
            display: block;
            margin-top: 12px
        }

        .category-card small {
            color: var(--muted);
            font-size: 10px
        }

        .deal-panel {
            background: #0e3428;
            border-radius: 29px;
            padding: 25px;
            color: #fff
        }

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

        .deal-title {
            display: flex;
            align-items: center;
            gap: 13px
        }

        .deal-flash {
            width: 47px;
            height: 47px;
            border-radius: 15px;
            background: var(--accent);
            color: #2f2a17;
            display: grid;
            place-items: center
        }

            .deal-flash svg {
                width: 25px
            }

        .deal-title h2 {
            margin: 0;
            font-size: 24px
        }

        .deal-title p {
            margin: 2px 0 0;
            color: #a8cbc0;
            font-size: 12px
        }

        .countdown {
            display: flex;
            align-items: center;
            gap: 5px;
            direction: ltr
        }

            .countdown b {
                background: #fff;
                color: #173029;
                padding: 8px;
                border-radius: 9px;
                min-width: 39px;
                text-align: center
            }

            .countdown span {
                font-weight: 900
            }

        .products {
            display: grid;
            grid-template-columns: repeat(5,1fr);
            gap: 14px
        }

        .product-card {
            background: #fff;
            border-radius: 20px;
            padding: 11px;
            color: var(--ink);
            position: relative;
            transition: .2s;
            min-width: 0
        }

            .product-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow)
            }

        .product-img {
            height: 160px;
            border: 2px dashed #c6d1cc;
            border-radius: 15px;
            background: #f7f9f8;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #8a9992
        }

            .product-img svg {
                width: 38px
            }

            .product-img small {
                font-size: 10px
            }

        .discount {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--danger);
            color: #fff;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 800
        }

        .wish {
            position: absolute;
            top: 18px;
            left: 18px;
            width: 31px;
            height: 31px;
            border: 0;
            border-radius: 10px;
            background: #fff;
            color: #77847e;
            display: grid;
            place-items: center;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,.08)
        }

            .wish svg {
                width: 17px
            }

            .wish.active {
                color: var(--danger);
                background: #fff0f0
            }

        .product-meta {
            padding: 12px 4px 4px
        }

        .store-name {
            font-size: 10px;
            color: var(--primary);
            font-weight: 700
        }

        .product-name {
            font-size: 13px;
            margin: 5px 0 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .price-row {
            display: flex;
            align-items: end;
            justify-content: space-between
        }

        .old-price {
            display: block;
            text-decoration: line-through;
            color: #a4afa9;
            font-size: 10px
        }

        .price {
            font-size: 16px;
            font-weight: 900
        }

            .price small {
                font-size: 9px;
                font-weight: 500
            }

        .add-cart {
            width: 38px;
            height: 38px;
            border: 0;
            border-radius: 12px;
            background: var(--primary);
            color: #fff;
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: .2s
        }

            .add-cart:hover {
                background: var(--primary-dark);
                transform: scale(1.05)
            }

            .add-cart svg {
                width: 19px
            }

        .stock {
            font-size: 9px;
            color: #dd7b00;
            margin-top: 9px
        }

        .audiences {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 16px
        }

        .audience-card {
            border-radius: 25px;
            padding: 26px;
            min-height: 235px;
            position: relative;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--line)
        }

            .audience-card.featured {
                background: linear-gradient(135deg,#087f5b,#095f48);
                color: #fff;
                border: 0
            }

        .audience-no {
            font-size: 54px;
            line-height: 1;
            font-weight: 900;
            color: #edf2ef;
            position: absolute;
            left: 20px;
            top: 18px
        }

        .featured .audience-no {
            color: rgba(255,255,255,.1)
        }

        .audience-icon {
            width: 49px;
            height: 49px;
            border-radius: 15px;
            background: var(--primary-soft);
            color: var(--primary);
            display: grid;
            place-items: center
        }

        .featured .audience-icon {
            background: rgba(255,255,255,.13);
            color: #fff
        }

        .audience-icon svg {
            width: 24px
        }

        .audience-card h3 {
            font-size: 20px;
            margin: 19px 0 7px
        }

        .audience-card p {
            line-height: 1.9;
            color: var(--muted);
            margin: 0;
            max-width: 340px
        }

        .featured p {
            color: #c8e7dc
        }

        .audience-card a {
            display: inline-flex;
            margin-top: 17px;
            font-weight: 800;
            color: var(--primary)
        }

        .featured a {
            color: #ffd166
        }

        .market-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 18px
        }

        .market-intro {
            background: #fff4d7;
            border-radius: 26px;
            padding: 31px;
            position: relative;
            overflow: hidden
        }

            .market-intro h2 {
                font-size: 27px;
                margin: 10px 0
            }

            .market-intro p {
                line-height: 2;
                color: #6e705f
            }

            .market-intro .btn {
                background: #1c312a;
                color: #fff;
                margin-top: 14px
            }

        .market-placeholder {
            height: 130px;
            border: 2px dashed #bcb498;
            border-radius: 19px;
            margin-top: 22px;
            color: #8a846f;
            display: grid;
            place-items: center
        }

        .stores {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 14px
        }

        .store-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: 18px;
            display: flex;
            gap: 15px;
            align-items: center
        }

        .store-logo {
            width: 72px;
            height: 72px;
            border: 2px dashed #becbc5;
            border-radius: 18px;
            flex: none;
            display: grid;
            place-items: center;
            color: #7c8b84
        }

            .store-logo svg {
                width: 27px
            }

        .store-info {
            min-width: 0
        }

            .store-info h3 {
                margin: 0 0 4px;
                font-size: 15px
            }

        .verified {
            display: inline-block;
            color: var(--primary);
            font-size: 10px
        }

        .store-info p {
            margin: 6px 0;
            color: var(--muted);
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .store-stats {
            display: flex;
            gap: 12px;
            font-size: 10px;
            color: #56645d
        }

            .store-stats b {
                color: var(--ink)
            }

        .app-banner {
            margin-top: 50px;
            background: linear-gradient(120deg,#e3f7ef,#f5fbf8);
            border: 1px solid #cfebe0;
            border-radius: 30px;
            min-height: 280px;
            display: flex;
            align-items: center;
            padding: 42px 50px;
            position: relative;
            overflow: hidden
        }

        .app-copy {
            max-width: 600px
        }

            .app-copy h2 {
                font-size: 29px;
                margin: 0 0 9px
            }

            .app-copy p {
                color: var(--muted);
                line-height: 2
            }

        .app-points {
            display: flex;
            gap: 18px;
            margin-top: 20px
        }

            .app-points span {
                font-size: 12px;
                font-weight: 700
            }

                .app-points span:before {
                    content: "✓";
                    margin-left: 6px;
                    color: var(--primary)
                }

        .app-buttons {
            display: flex;
            gap: 10px;
            margin-top: 23px
        }

        .download-btn {
            background: #172721;
            color: #fff;
            border-radius: 13px;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 9px
        }

            .download-btn svg {
                width: 24px
            }

            .download-btn small, .download-btn b {
                display: block
            }

            .download-btn small {
                font-size: 8px;
                color: #b9c5c0
            }

        .phone {
            position: absolute;
            left: 85px;
            bottom: -70px;
            width: 210px;
            height: 355px;
            border: 8px solid #17352a;
            background: #fff;
            border-radius: 36px;
            box-shadow: 0 20px 50px rgba(7,65,46,.2);
            padding: 17px
        }

        .phone-notch {
            width: 70px;
            height: 12px;
            border-radius: 0 0 10px 10px;
            background: #17352a;
            margin: -17px auto 18px
        }

        .phone-box {
            height: 115px;
            background: var(--primary);
            border-radius: 17px
        }

        .phone-lines {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 7px;
            margin-top: 12px
        }

            .phone-lines i {
                height: 48px;
                border: 2px dashed #cad5d0;
                border-radius: 10px
            }

        .phone-row {
            height: 11px;
            background: #edf1ef;
            border-radius: 8px;
            margin-top: 10px
        }

        .newsletter {
            margin-top: 45px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 25px;
            padding: 27px 31px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px
        }

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

            .newsletter p {
                margin: 5px 0 0;
                color: var(--muted)
            }

        .subscribe {
            display: flex;
            width: min(470px,100%);
            background: #f3f6f5;
            border-radius: 15px;
            padding: 5px
        }

            .subscribe input {
                border: 0;
                background: transparent;
                outline: 0;
                padding: 0 13px;
                flex: 1;
                min-width: 0
            }

            .subscribe button {
                background: var(--primary);
                color: #fff;
                border: 0;
                border-radius: 11px;
                padding: 11px 18px;
                font-weight: 700
            }

        footer {
            background: #102c23;
            color: #d7e7e1;
            margin-top: 55px;
            padding: 52px 0 90px
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr repeat(3,1fr);
            gap: 55px
        }

        .footer-about p {
            color: #9eb9b0;
            line-height: 2;
            max-width: 360px
        }

        .footer-logo .logo-mark {
            background: #fff;
            color: var(--primary)
        }

        .footer-logo .logo-copy small {
            color: #8db0a5
        }

        .footer-col h4 {
            color: #fff;
            margin: 7px 0 16px
        }

        .footer-col a {
            display: block;
            color: #a8c0b8;
            margin: 11px 0;
            font-size: 12px
        }

            .footer-col a:hover {
                color: #fff
            }

        .licenses {
            display: flex;
            gap: 9px
        }

        .license {
            width: 64px;
            height: 69px;
            border: 1px dashed #658076;
            border-radius: 12px;
            display: grid;
            place-items: center;
            font-size: 9px;
            color: #9fb7af
        }

        .copyright {
            margin-top: 35px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.1);
            display: flex;
            justify-content: space-between;
            color: #83a096;
            font-size: 11px
        }

        .mobile-nav {
            display: none
        }

        .toast {
            position: fixed;
            right: 25px;
            bottom: 25px;
            z-index: 100;
            background: #17382d;
            color: #fff;
            padding: 13px 17px;
            border-radius: 13px;
            box-shadow: var(--shadow);
            transform: translateY(120px);
            opacity: 0;
            transition: .3s
        }

            .toast.show {
                transform: translateY(0);
                opacity: 1
            }

        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(10,27,21,.42);
            z-index: 89;
            opacity: 0;
            pointer-events: none;
            transition: .25s
        }

            .drawer-overlay.show {
                opacity: 1;
                pointer-events: auto
            }

        .cart-drawer {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            width: min(390px,92vw);
            background: #fff;
            z-index: 90;
            transform: translateX(-105%);
            transition: .3s;
            padding: 23px;
            box-shadow: 20px 0 60px rgba(0,0,0,.13)
        }

            .cart-drawer.show {
                transform: none
            }

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

            .drawer-head h3 {
                margin: 0
            }

        .close {
            border: 0;
            background: #f1f4f2;
            width: 36px;
            height: 36px;
            border-radius: 11px;
            cursor: pointer
        }

        .cart-empty {
            text-align: center;
            padding: 75px 15px;
            color: var(--muted)
        }

            .cart-empty svg {
                width: 60px;
                color: #a9b7b0
            }

            .cart-empty strong {
                display: block;
                color: var(--ink);
                margin: 12px 0 5px
            }

        .cart-list {
            padding: 15px 0
        }

        .cart-line {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid var(--line)
        }

        @media(max-width:1100px) {
            .header-row {
                grid-template-columns: auto 1fr auto;
                gap: 15px
            }

            .header-actions .user span {
                display: none
            }

            .hero-main {
                padding: 42px 35px
            }

            .hero-visual {
                width: 220px;
                height: 190px
            }

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

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

            .product-card:nth-child(n+4) {
                display: none
            }

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

            .footer-col:last-child {
                display: none
            }
        }

        @media(max-width:760px) {
            body {
                padding-bottom: 73px;
                background: #f7f9f8
            }

            .container {
                width: min(100% - 24px,600px)
            }

            .only-mobile {
                display: block
            }

            .topbar, .nav {
                display: none
            }

            .main-header {
                position: relative;
                background: #fff
            }

            .header-row {
                height: auto;
                min-height: 0;
                display: grid;
                grid-template-columns: 1fr auto;
                padding: 15px 0 12px
            }

            .logo-mark {
                width: 42px;
                height: 42px;
                border-radius: 14px
            }

            .logo-copy strong {
                font-size: 21px
            }

            .logo-copy small {
                font-size: 8px
            }

            .header-actions .user, .header-actions .cart-desktop {
                display: none
            }

            .mobile-location {
                display: flex !important;
                align-items: center;
                gap: 5px;
                color: var(--muted);
                font-size: 10px;
                margin-top: 6px
            }

            .search {
                grid-column: 1/-1;
                grid-row: 2;
                height: 46px;
                margin-top: 12px
            }

                .search kbd {
                    display: none
                }

            .hero {
                padding-top: 12px
            }

            .hero-grid {
                display: block
            }

            .hero-main {
                min-height: 410px;
                border-radius: 24px;
                padding: 28px 24px
            }

            .hero h1 {
                font-size: 28px;
                line-height: 1.55;
                margin-top: 15px
            }

            .hero-main > p {
                font-size: 13px;
                line-height: 1.8;
                max-width: 93%
            }

            .hero-actions {
                margin-top: 20px
            }

                .hero-actions .btn {
                    padding: 11px 14px;
                    font-size: 12px
                }

            .hero-stats {
                gap: 17px;
                margin-top: 25px
            }

                .hero-stats strong {
                    font-size: 16px
                }

            .hero-visual {
                width: 145px;
                height: 118px;
                left: 20px;
                bottom: 18px;
                border-radius: 20px
            }

                .hero-visual svg {
                    width: 30px
                }

                .hero-visual span {
                    font-size: 10px
                }

            .hero-side {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: none;
                margin-top: 12px;
                gap: 10px
            }

            .mini-banner {
                min-height: 160px;
                padding: 18px;
                border-radius: 19px
            }

                .mini-banner h3 {
                    font-size: 15px;
                    max-width: 115px
                }

                .mini-banner p {
                    font-size: 9px
                }

            .mini-img {
                width: 68px;
                height: 62px;
                left: 10px;
                bottom: 10px
            }

            .trust-strip {
                overflow: auto;
                display: flex;
                padding: 13px 10px;
                scrollbar-width: none
            }

            .trust-item {
                min-width: 175px;
                border-left: 1px solid var(--line)
            }

                .trust-item:last-child {
                    border-left: 0
                }

            .section {
                padding-top: 34px
            }

            .section-title h2 {
                font-size: 21px
            }

            .view-all {
                font-size: 11px
            }

            .categories {
                display: flex;
                overflow-x: auto;
                gap: 10px;
                padding: 3px 2px 14px;
                scroll-snap-type: x mandatory;
                scrollbar-width: none
            }

            .category-card {
                min-width: 104px;
                scroll-snap-align: start
            }

            .category-icon {
                width: 61px;
                height: 61px
            }

            .deal-panel {
                margin-inline: -12px;
                border-radius: 0;
                padding: 22px 12px
            }

            .deal-head {
                align-items: flex-end
            }

            .deal-title h2 {
                font-size: 19px
            }

            .deal-title p {
                display: none
            }

            .countdown b {
                min-width: 32px;
                padding: 6px;
                font-size: 11px
            }

            .products {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 10px;
                padding-bottom: 10px;
                scrollbar-width: none
            }

            .product-card, .product-card:nth-child(n+4) {
                display: block;
                min-width: 218px;
                scroll-snap-align: start
            }

            .product-img {
                height: 145px
            }

            .audiences {
                display: flex;
                overflow-x: auto;
                gap: 11px;
                scrollbar-width: none
            }

            .audience-card {
                min-width: 290px
            }

            .market-layout {
                display: block
            }

            .market-intro {
                padding: 25px
            }

            .stores {
                display: flex;
                overflow-x: auto;
                gap: 10px;
                margin-top: 12px;
                scrollbar-width: none
            }

            .store-card {
                min-width: 280px
            }

            .app-banner {
                min-height: 445px;
                padding: 29px 23px;
                align-items: flex-start
            }

            .app-copy h2 {
                font-size: 23px
            }

            .app-points {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px
            }

            .app-buttons {
                transform: scale(.85);
                transform-origin: right top
            }

            .phone {
                width: 175px;
                height: 290px;
                left: 50%;
                transform: translateX(-50%);
                bottom: -66px
            }

            .newsletter {
                display: block;
                padding: 22px
            }

            .subscribe {
                margin-top: 18px
            }

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

            .footer-about {
                grid-column: 1/-1
            }

            .copyright {
                display: block;
                line-height: 2
            }

            .mobile-nav {
                position: fixed;
                display: grid;
                grid-template-columns: repeat(5,1fr);
                right: 0;
                left: 0;
                bottom: 0;
                background: rgba(255,255,255,.97);
                backdrop-filter: blur(15px);
                z-index: 70;
                border-top: 1px solid var(--line);
                padding: 8px 6px calc(7px + env(safe-area-inset-bottom))
            }

                .mobile-nav a, .mobile-nav button {
                    border: 0;
                    background: transparent;
                    color: #73817a;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 3px;
                    font-size: 9px;
                    position: relative
                }

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

                .mobile-nav .active {
                    color: var(--primary);
                    font-weight: 800
                }

            .mobile-cart-badge {
                position: absolute;
                background: var(--danger);
                color: #fff;
                border-radius: 99px;
                font-size: 8px;
                padding: 1px 5px;
                top: -3px;
                margin-right: 23px
            }

            .toast {
                right: 12px;
                left: 12px;
                bottom: 88px;
                text-align: center
            }

            .section-head {
                align-items: center
            }
        }

        [hidden] {
            display: none !important
        }

        .plain-button {
            border: 0;
            background: none;
            color: inherit;
            cursor: pointer;
            font: inherit;
            padding: 0;
            text-align: inherit
        }

        .btn-primary {
            background: var(--primary);
            color: white
        }

        .empty-state {
            grid-column: 1/-1;
            text-align: center;
            color: var(--muted);
            padding: 25px
        }

        .product-img img, .store-logo img, .category-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: inherit
        }

        .hero-visual.has-image, .mini-img.has-image {
            border: 0;
            background: none
        }

        .has-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: inherit
        }

        button.category-card, button.store-card {
            font: inherit;
            color: inherit;
            cursor: pointer
        }

        button.store-card {
            text-align: right;
            width: 100%
        }

        .wholesale-buy {
            border: 1px solid var(--line);
            border-radius: 9px;
            padding: 8px;
            margin-top: 8px;
            background: var(--primary-soft);
            color: var(--primary);
            font-size: 11px;
            cursor: pointer;
            width: 100%
        }

        .cooperation {
            display: block;
            color: var(--primary);
            margin-top: 7px
        }

        .brand-list {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 20px
        }

        .brand-pill {
            border: 1px solid var(--line);
            background: white;
            color: var(--ink);
            border-radius: 99px;
            padding: 10px 18px;
            cursor: pointer
        }

        .cart-item {
            padding: 15px 0;
            border-bottom: 1px solid var(--line)
        }

            .cart-item > small {
                display: block;
                color: var(--muted);
                margin-top: 5px
            }

        .quantity-controls {
            display: flex;
            gap: 10px;
            align-items: center
        }

            .quantity-controls button {
                border: 1px solid var(--line);
                border-radius: 7px;
                background: white;
                padding: 5px 10px;
                cursor: pointer
            }

        .cart-summary {
            margin-top: 20px;
            padding: 15px;
            border-radius: 15px;
            background: var(--primary-soft)
        }

            .cart-summary .btn {
                margin-top: 15px
            }

        .error-text {
            color: var(--danger) !important
        }

        .load-error:empty {
            display: none
        }

        .load-error {
            padding: 18px;
            background: #fff1f1;
            color: #9b1c1c;
            border-radius: 12px;
            margin-top: 20px
        }

        .footer-col .plain-button {
            display: block;
            margin: 10px 0;
            color: var(--muted)
        }

        button:disabled {
            opacity: .5;
            cursor: not-allowed
        }

        #catalog {
            scroll-margin-top: 120px
        }

        #moreProducts {
            margin: 25px auto;
            display: block
        }

        .stock {
            font-size: 11px
        }

        .product-name {
            overflow-wrap: anywhere
        }
    
.load-error{white-space:pre-wrap;overflow-wrap:anywhere}
.content-page{padding-top:30px;padding-bottom:30px}