/* Products Section */

        .filters-bar { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: center; }
        .tab-pill { padding: 0.55rem 1.2rem; border-radius: 60px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); color: var(--text-2); font-weight: 600; font-size: 0.82rem; transition: all .25s; font-family: inherit; }
        .tab-pill:hover { color: var(--accent); border-color: var(--accent); }
        .tab-pill.active { background: linear-gradient(135deg, var(--accent), #FF6B00); color: #000; border-color: transparent; box-shadow: 0 6px 20px -6px var(--accent-glow); }
        .filter-spacer { flex: 1; }

        .theme-select-wrap { position: relative; display: inline-block; }
        .theme-select-wrap::after { content: ''; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--accent); pointer-events: none; z-index: 2; }
        .form-input, .sort-select, .category-select, select.form-input, .sort-select, .category-select, select, input.form-input[type="date"], input.form-input[type="number"] {
            padding: 0.7rem 2.5rem 0.7rem 1rem !important;
            border-radius: 10px !important;
            background-color: rgba(30, 41, 59, 0.95) !important;
            color: var(--text-1) !important;
            border: 1px solid var(--glass-border) !important;
            font-family: inherit !important;
            font-size: 0.9rem !important;
            font-weight: 500 !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            background-image: none !important;
            background: rgba(30, 41, 59, 0.95) !important;
            width: 100%;
            transition: all .2s;
        }
        input.form-input[type="date"] { padding-right: 1.1rem !important; }
        .form-input:focus, .sort-select:focus, .category-select:focus, select.form-input:focus, select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255,165,0,0.15) !important; }
        .form-input::-ms-expand, .sort-select::-ms-expand, .category-select::-ms-expand, select::-ms-expand { display: none; }
        .form-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
        .form-input option, .sort-select option, .category-select option, select option { background-color: #1E293B !important; color: var(--text-1) !important; padding: 0.5rem !important; font-weight: 500; }
        .form-input option:checked, .sort-select option:checked, .category-select option:checked, select option:checked { background: linear-gradient(135deg, var(--accent), #FF6B00) !important; background-color: var(--accent) !important; color: #000 !important; }
        @-moz-document url-prefix() { .form-input, .sort-select, .category-select, select { text-indent: 0.01px; text-overflow: ''; } }
        .form-input.text-input, input.form-input[type="text"], input.form-input[type="number"], input.form-input[type="password"], input.form-input[type="email"], input.form-input[type="search"], input.form-input[type="date"], textarea.form-input { background-image: none !important; background: rgba(30, 41, 59, 0.95) !important; padding-right: 1.1rem !important; }
        textarea.form-input { min-height: 100px; resize: vertical; }

        .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
        .product-card { position: relative; border-radius: 1.2rem; padding: 1.3rem; transition: all .35s cubic-bezier(.2,.9,.4,1.1); overflow: hidden; animation: fadeInScale .5s ease backwards; animation-delay: calc(var(--card-index, 0) * 0.04s); }
        @keyframes fadeInScale { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
        .product-image, .product-img { height: 160px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; margin-bottom: 1rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(168,85,247,0.1)); background-size: cover; background-position: center; }
        .product-image.fruits, .product-img.fruits { background: linear-gradient(135deg, rgba(248,113,113,0.2), rgba(255,165,0,0.2)); }
        .product-image.raids, .product-img.raids { background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(99,102,241,0.2)); }
        .product-image.boosts, .product-img.boosts { background: linear-gradient(135deg, rgba(96,165,250,0.25), rgba(59,130,246,0.2)); }
        .product-image.bounty, .product-img.bounty { background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.2)); }
        .product-image.mastery, .product-img.mastery { background: linear-gradient(135deg, rgba(74,222,128,0.25), rgba(34,197,94,0.2)); }
        .product-image.service, .product-img.service { background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(96,165,250,0.2)); }
        .product-image.ability, .product-img.ability { background: linear-gradient(135deg, rgba(236,72,153,0.25), rgba(168,85,247,0.2)); }
        .product-img img { width: 100%; height: 100%; object-fit: cover; }
        .product-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 0.3rem; flex-direction: column; z-index: 2; }
        .p-badge { padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
        .p-badge.new { background: var(--green); color: #000; }
        .p-badge.hot { background: var(--red); color: #fff; }
        .p-badge.sale { background: var(--accent); color: #000; }
        .p-badge.epic { background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff; }
        .p-badge.leg { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; }
        .fav-btn { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border); color: var(--text-2); transition: all .25s; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; }
        .fav-btn:hover { color: var(--red); transform: scale(1.1); }
        .fav-btn.active { color: var(--red); background: rgba(248,113,113,0.2); }
        .product-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.3rem; }
        .product-desc { font-size: 0.8rem; color: var(--text-3); margin-bottom: 0.8rem; line-height: 1.4; min-height: 2.2em; }
        .product-rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; font-size: 0.75rem; color: var(--text-3); }
        .product-rating .stars { color: var(--accent); }
        .product-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 0.8rem; }
        .price-block { display: flex; flex-direction: column; }
        .old-price { text-decoration: line-through; color: var(--text-3); font-size: 0.7rem; }
        .current-price { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
        .buy-btn-direct { background: linear-gradient(135deg, var(--accent), #FF6B00); color: #000; border: none; padding: 0.6rem 1rem; border-radius: 10px; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; transition: all .2s; font-family: inherit; }
        .buy-btn-direct:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 8px 20px -4px var(--accent-glow); }
        .buy-btn-direct:disabled { opacity: 0.5; cursor: not-allowed; }
        .stock-info { font-size: 0.68rem; margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem; }
        .stock-info.in { color: var(--green); }
        .stock-info.out { color: var(--red); }

        .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
        .review-card { padding: 1.5rem; border-radius: 1.2rem; transition: all .3s; position: relative; }
        .review-stars { color: var(--accent); margin-bottom: 0.8rem; font-size: 0.9rem; }
        .review-text { color: var(--text-2); margin-bottom: 1.2rem; line-height: 1.5; font-size: 0.9rem; }
        .review-author { display: flex; align-items: center; gap: 0.7rem; }
        .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #FF6B00); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000; font-size: 0.95rem; }
        .author-name { font-weight: 700; font-size: 0.88rem; }
        .author-role { font-size: 0.72rem; color: var(--text-3); }

        /* ── Listings ─────────────────────────── */
        .listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
        .listing-card { border-radius: 1.2rem; padding: 1.3rem; transition: all .35s cubic-bezier(.2,.9,.4,1.1); animation: fadeInScale .5s ease backwards; animation-delay: calc(var(--card-index, 0) * 0.05s); }
        .listing-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
        .listing-icon { font-size: 2.5rem; width: 60px; height: 60px; border-radius: 0.8rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(168,85,247,0.1)); }
        .listing-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.3rem; }
        .listing-desc { font-size: 0.82rem; color: var(--text-3); margin-bottom: 0.8rem; line-height: 1.4; min-height: 2em; }
        .listing-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 0.8rem; }
        .listing-price { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
        .listing-meta { font-size: 0.75rem; color: var(--text-3); display: flex; align-items: center; gap: 0.3rem; }
        .listing-image { width: 100%; height: 180px; border-radius: 1rem; overflow: hidden; margin-bottom: 0.8rem; }
        .listing-image img { width: 100%; height: 100%; object-fit: cover; }