:root {
            --ink: #282c3f;
            --muted: #535766;
            --soft: #94969f;
            --line: #eceef2;
            --accent: #ff3f6c;
            --green: #14958f;
            --paper: #ffffff;
            --page: #f7f7f9;
            --phone: 430px;
        }
        * { box-sizing: border-box; }
        html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--ink); }
        body {
            font-family: Assistant, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        button, input { font: inherit; }
        a { color: inherit; text-decoration: none; }
        .app-shell svg, .bottom-nav svg { max-width: 24px; max-height: 24px; }
        .app-shell {
            width: min(100%, var(--phone));
            min-height: 100vh;
            margin: 0 auto;
            background: var(--paper);
            box-shadow: 0 0 0 1px rgba(40,44,63,.04);
            padding-bottom: calc(68px + env(safe-area-inset-bottom));
        }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 30;
            height: 58px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
            background: rgba(255,255,255,.98);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(12px);
        }
        .icon-button {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--ink);
            cursor: pointer;
        }
        .icon-button:active { background: #f4f4f6; }
        .icon-button svg {
            width: 22px;
            height: 22px;
            display: block;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .brand-logo {
            width: 34px;
            height: 30px;
            flex: 0 0 34px;
            display: grid;
            place-items: center;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: visible;
        }
        .brand-logo img {
            width: 34px;
            height: 26px;
            display: block;
            object-fit: contain;
        }
        .topbar-copy { min-width: 0; flex: 1; }
        .topbar-title {
            margin: 0;
            font-size: 15px;
            line-height: 18px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .topbar-count {
            margin-top: 1px;
            color: var(--soft);
            font-size: 10.5px;
            line-height: 13px;
            font-weight: 600;
        }
        .topbar-actions { display: flex; align-items: center; gap: 1px; }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 8px;
            row-gap: 22px;
            padding: 12px 9px 22px;
            background: #fff;
        }
        .product-card {
            min-width: 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            content-visibility: auto;
            contain-intrinsic-size: 300px;
        }
        .product-card:active { opacity: .93; }
        .product-media {
            position: relative;
            aspect-ratio: 1 / 1.18;
            overflow: hidden;
            border-radius: 9px;
            background: linear-gradient(145deg,#fafafa,#f1f2f5);
        }
        .product-media img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        .rating-pill {
            position: absolute;
            left: 6px;
            bottom: 6px;
            min-height: 20px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 6px;
            border: 1px solid rgba(40,44,63,.08);
            border-radius: 5px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 1px 5px rgba(40,44,63,.08);
            color: var(--ink);
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
        }
        .rating-pill .star { color: var(--green); font-size: 10px; }
        .rating-pill .reviews {
            margin-left: 2px;
            padding-left: 5px;
            border-left: 1px solid #d4d5d9;
            color: var(--muted);
            font-weight: 600;
        }
        .product-copy { min-width: 0; padding: 7px 2px 0; }
        .brand-row {
            display: flex;
            align-items: flex-start;
            gap: 5px;
            min-width: 0;
        }
        .product-brand {
            min-width: 0;
            flex: 1;
            margin: 0;
            color: var(--ink);
            font-size: 13.5px;
            line-height: 17px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .wishlist {
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            display: grid;
            place-items: center;
            margin: -2px -1px 0 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--ink);
            cursor: pointer;
        }
        .wishlist svg {
            width: 19px;
            height: 19px;
            display: block;
            fill: transparent;
            stroke: currentColor;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .wishlist.active { color: var(--accent); }
        .wishlist.active svg { fill: var(--accent); }
        .product-title {
            margin: 1px 0 4px;
            color: var(--muted);
            font-size: 11.5px;
            line-height: 14px;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .deal-badge {
            display: inline-flex;
            align-items: center;
            min-height: 18px;
            margin-bottom: 4px;
            padding: 3px 5px;
            border-radius: 3px;
            background: var(--accent);
            color: #fff;
            font-size: 9px;
            line-height: 1;
            font-weight: 700;
        }
        .price-row {
            min-width: 0;
            display: flex;
            align-items: baseline;
            gap: 4px;
            white-space: nowrap;
        }
        .sale-price { color: var(--ink); font-size: 13px; line-height: 15px; font-weight: 800; }
        .mrp { color: var(--soft); font-size: 9.5px; line-height: 12px; text-decoration: line-through; }
        .discount { color: #ff5722; font-size: 9.5px; line-height: 12px; font-weight: 700; }
        .empty-state {
            grid-column: 1 / -1;
            padding: 64px 18px;
            text-align: center;
            color: var(--soft);
        }
        .empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 16px; }

        .bottom-nav {
            position: fixed;
            left: 50%;
            bottom: 0;
            z-index: 35;
            width: min(100%, var(--phone));
            height: calc(62px + env(safe-area-inset-bottom));
            transform: translateX(-50%);
            display: grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            padding-bottom: env(safe-area-inset-bottom);
            border-top: 1px solid var(--line);
            background: rgba(255,255,255,.98);
            backdrop-filter: blur(12px);
        }
        .nav-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            color: var(--muted);
            font-size: 10px;
            line-height: 12px;
            font-weight: 600;
        }
        .nav-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
        .nav-item.active { color: var(--accent); }
        .nav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            height: 3px;
            background: var(--accent);
        }
        .nav-fwd { font-size: 18px; line-height: 20px; font-weight: 900; letter-spacing: -.12em; }

        @media (min-width: 700px) {
            :root { --phone: 780px; }
            .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 12px; }
        }
        @media (min-width: 1050px) {
            :root { --phone: 1120px; }
            .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 14px; }
        }

        .listing-load,.listing-retry{display:block;margin:2px auto 24px;padding:10px 14px;border:0;background:transparent;color:var(--soft);font-size:11px;font-weight:700}.listing-retry{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}.listing-sentinel{height:1px}

        .desktop-nav { display: none; }
        @media (min-width: 900px) {
            html, body { background: #f5f6fa; }
            body { padding: 24px; }
            .app-shell {
                width: min(100%, 1280px);
                min-height: calc(100vh - 48px);
                border-radius: 24px;
                overflow: hidden;
                padding-bottom: 34px;
                box-shadow: 0 18px 55px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04);
            }
            .topbar { height: 72px; padding: 0 28px; gap: 12px; }
            .brand-logo { width: 42px; height: 38px; flex-basis: 42px; }
            .brand-logo img { width: 42px; height: 34px; }
            .topbar-title { font-size: 19px; line-height: 22px; }
            .topbar-count { font-size: 11px; }
            .desktop-nav { display: flex; align-items: center; gap: 6px; margin-left: 24px; margin-right: auto; }
            .desktop-nav a { height: 40px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 999px; color: #475467; font-size: 13px; font-weight: 800; }
            .desktop-nav a:hover, .desktop-nav a.active { background: #fff1f5; color: var(--accent); }
            .topbar-actions { margin-left: 0; gap: 4px; }
            .icon-button { width: 42px; height: 42px; flex-basis: 42px; }
            .topbar-actions .icon-button:hover { background: #fafafa; box-shadow: inset 0 0 0 1px var(--line); }
            .product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 20px; padding: 28px; }
            .product-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(16,24,40,.05); transition: transform .18s ease, box-shadow .18s ease; }
            .product-card:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(16,24,40,.10); }
            .product-media { aspect-ratio: 1 / 1.08; border-radius: 0; }
            .product-media img { padding: 10px; }
            .product-copy { padding: 12px 13px 15px; }
            .product-brand { font-size: 14px; line-height: 18px; }
            .product-title { margin: 4px 0 7px; font-size: 12px; line-height: 16px; }
            .deal-badge { min-height: 21px; padding: 4px 7px; font-size: 10px; }
            .sale-price { font-size: 15px; line-height: 18px; }
            .mrp, .discount { font-size: 10.5px; }
            .rating-pill { left: 10px; bottom: 10px; padding: 5px 7px; font-size: 10.5px; }
            .wishlist { width: 30px; height: 30px; flex-basis: 30px; }
            .bottom-nav { display: none; }
        }