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

        :root {
            --orange:      #e8622a;
            --orange-lt:   #fff3ee;
            --orange-dk:   #c44d1a;
            --dark:        #1a1a1a;
            --mid:         #555;
            --light:       #888;
            --border:      #e8e8e8;
            --bg:          #f7f5f2;
            --white:       #ffffff;
            --green:       #2e7d32;
            --green-lt:    #e8f5e9;
            --new-badge:   #1565c0;
            --new-lt:      #e3f2fd;
        }

        body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--dark); }

        /* ── Hero Banner ─────────────────────────── */
        .hero {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d1f0e 60%, #e8622a22 100%);
            padding: 48px 24px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .hero-tag {
            display: inline-block;
            font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--orange);
            border: 1px solid var(--orange); padding: 4px 14px;
            border-radius: 20px; margin-bottom: 14px;
        }
        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(28px, 5vw, 52px);
            color: var(--white); font-weight: 900; line-height: 1.1;
            margin-bottom: 12px;
        }
        .hero h1 span { color: var(--orange); }
        .hero p { font-size: 14px; color: #aaa; max-width: 480px; margin: 0 auto 24px; }

        /* Search bar */
        .search-wrap {
            max-width: 480px; margin: 0 auto;
            position: relative;
        }
        .search-wrap input {
            width: 100%; padding: 13px 50px 13px 18px;
            border-radius: 50px; border: none;
            font-family: 'DM Sans', sans-serif; font-size: 14px;
            background: rgba(255,255,255,0.1); color: white;
            backdrop-filter: blur(10px);
            outline: none;
            transition: background 0.2s;
        }
        .search-wrap input::placeholder { color: #888; }
        .search-wrap input:focus { background: rgba(255,255,255,0.15); }
        .search-wrap i {
            position: absolute; right: 18px; top: 50%;
            transform: translateY(-50%); color: var(--orange);
        }

        /* ── Filter Tabs ─────────────────────────── */
        .filter-bar {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .filter-inner {
            max-width: 1280px; margin: 0 auto;
            padding: 0 16px;
            display: flex; align-items: center;
            gap: 0; overflow-x: auto;
            scrollbar-width: none;
        }
        .filter-inner::-webkit-scrollbar { display: none; }
        .filter-tab {
            flex-shrink: 0;
            padding: 14px 20px;
            font-size: 13px; font-weight: 500;
            color: var(--light); cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s; white-space: nowrap;
            background: none; border-top: none;
            border-left: none; border-right: none;
            font-family: 'DM Sans', sans-serif;
        }
        .filter-tab:hover { color: var(--orange); }
        .filter-tab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
        .filter-tab .tab-count {
            display: inline-block;
            background: var(--orange-lt); color: var(--orange);
            font-size: 10px; font-weight: 700;
            padding: 1px 6px; border-radius: 10px; margin-left: 5px;
        }
        .filter-tab.active .tab-count { background: var(--orange); color: white; }

        /* Sort right side */
        .sort-wrap {
            margin-left: auto; flex-shrink: 0;
            padding: 8px 0 8px 16px;
            border-left: 1px solid var(--border);
        }
        .sort-select {
            font-family: 'DM Sans', sans-serif;
            font-size: 12px; color: var(--mid);
            border: 1px solid var(--border);
            padding: 6px 10px; border-radius: 6px;
            background: var(--bg); cursor: pointer;
            outline: none;
        }

        /* ── Section Wrapper ─────────────────────── */
        .page-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 16px 60px; }

        /* ── Section Header ──────────────────────── */
        .section-hdr {
            display: flex; align-items: center;
            justify-content: space-between;
            margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
        }
        .section-hdr-left { display: flex; align-items: center; gap: 12px; }
        .section-icon {
            width: 38px; height: 38px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
        }
        .icon-offer { background: #fff3ee; color: var(--orange); }
        .icon-new   { background: var(--new-lt); color: var(--new-badge); }
        .section-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(18px, 3vw, 24px);
            font-weight: 700; color: var(--dark);
        }
        .section-sub { font-size: 12px; color: var(--light); margin-top: 1px; }
        .view-all-btn {
            font-size: 12px; color: var(--orange); font-weight: 600;
            text-decoration: none; display: flex; align-items: center; gap: 4px;
            padding: 7px 16px; border: 1px solid var(--orange);
            border-radius: 20px; transition: all 0.2s; white-space: nowrap;
        }
        .view-all-btn:hover { background: var(--orange); color: white; }

        /* ── Product Grid ────────────────────────── */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 40px;
        }

        /* ── Product Card ────────────────────────── */
        .product-card {
            background: var(--white);
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            position: relative;
            display: flex; flex-direction: column;
            text-decoration: none; color: inherit;
        }
        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.10);
        }

        /* Image */
        .card-img-wrap {
            position: relative;
            aspect-ratio: 1/1;
            overflow: hidden;
            background: var(--bg);
        }
        .card-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .product-card:hover .card-img-wrap img { transform: scale(1.06); }

        /* Badges */
        .badge {
            position: absolute; top: 10px; left: 10px;
            font-size: 10px; font-weight: 700;
            padding: 3px 8px; border-radius: 4px;
            text-transform: uppercase; letter-spacing: 0.04em;
            z-index: 2;
        }
        .badge-offer  { background: var(--orange); color: white; }
        .badge-new    { background: var(--new-badge); color: white; }
        .badge-sold   { background: #555; color: white; }
        .badge-hot    { background: #c62828; color: white; }

        /* Wishlist btn */
        .wish-btn {
            position: absolute; top: 10px; right: 10px;
            width: 32px; height: 32px; border-radius: 50%;
            background: white; border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; color: var(--light); cursor: pointer;
            transition: all 0.2s; z-index: 2;
        }
        .wish-btn:hover { color: #e53935; border-color: #e53935; }

        /* Quick add */
        .quick-add {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: rgba(26,26,26,0.85);
            color: white; font-size: 12px; font-weight: 600;
            text-align: center; padding: 10px;
            transform: translateY(100%);
            transition: transform 0.25s ease;
            backdrop-filter: blur(4px);
            letter-spacing: 0.04em; text-transform: uppercase;
            cursor: pointer; border: none; width: 100%;
            font-family: 'DM Sans', sans-serif;
        }
        .product-card:hover .quick-add { transform: translateY(0); }

        /* Card body */
        .card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
        .card-name {
            font-size: 13px; font-weight: 500; color: var(--dark);
            line-height: 1.4; margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .card-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
        .price-new  { font-size: 15px; font-weight: 700; color: var(--dark); }
        .price-old  { font-size: 12px; color: var(--light); text-decoration: line-through; }
        .price-off  {
            font-size: 10px; font-weight: 700;
            background: var(--orange-lt); color: var(--orange);
            padding: 2px 6px; border-radius: 4px;
        }

        /* Stars */
        .card-stars { display: flex; align-items: center; gap: 3px; margin-bottom: 6px; }
        .card-stars i { font-size: 9px; color: #f5a623; }
        .card-stars span { font-size: 10px; color: var(--light); margin-left: 2px; }

        /* ── Divider ─────────────────────────────── */
        .section-divider {
            border: none;
            border-top: 2px dashed var(--border);
            margin: 8px 0 36px;
        }

        /* ── Empty State ─────────────────────────── */
        .empty-state {
            text-align: center; padding: 60px 20px;
            color: var(--light);
        }
        .empty-state i { font-size: 48px; margin-bottom: 14px; display: block; opacity: 0.3; }
        .empty-state p { font-size: 15px; }

        /* ── No results (search) ─────────────────── */
        #no-results {
            display: none; text-align: center;
            padding: 48px 20px; color: var(--light);
        }

        /* ── Scroll to top ───────────────────────── */
        .scroll-top {
            position: fixed; bottom: 24px; right: 20px;
            width: 42px; height: 42px; border-radius: 50%;
            background: var(--orange); color: white;
            border: none; cursor: pointer; font-size: 16px;
            box-shadow: 0 4px 16px rgba(232,98,42,0.4);
            display: none; align-items: center; justify-content: center;
            z-index: 999; transition: all 0.2s;
        }
        .scroll-top:hover { background: var(--orange-dk); transform: translateY(-2px); }
        .scroll-top.show { display: flex; }

        /* ── Responsive ──────────────────────────── */
        @media (max-width: 768px) {
            .hero { padding: 36px 16px 32px; }
            .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .card-body { padding: 10px 10px 12px; }
            .card-name { font-size: 12px; }
            .price-new { font-size: 13px; }
            .filter-tab { padding: 12px 14px; font-size: 12px; }
            .section-hdr { margin-bottom: 14px; }
        }

        @media (max-width: 400px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .card-img-wrap { aspect-ratio: 3/4; }
            .hero h1 { font-size: 24px; }
        }

        /* ── Animate in ──────────────────────────── */
        .product-card {
            animation: fadeUp 0.4s ease both;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .product-card:nth-child(1) { animation-delay: 0.05s; }
        .product-card:nth-child(2) { animation-delay: 0.10s; }
        .product-card:nth-child(3) { animation-delay: 0.15s; }
        .product-card:nth-child(4) { animation-delay: 0.20s; }
        .product-card:nth-child(5) { animation-delay: 0.25s; }
        .product-card:nth-child(6) { animation-delay: 0.30s; }