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

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(180deg, #0047AB 0%, #003785 100%);
            min-height: 100vh; color: white;
        }

        /* ── HEADER ── */
        .header {
            background: #003785; padding: 14px 20px;
            display: flex; justify-content: space-between; align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,.25);
            position: sticky; top: 0; z-index: 200; gap: 16px;
        }
        .header-left { display:flex; align-items:center; gap:14px; flex-shrink:0; }
        .back-btn, .cart-btn {
            font-size:22px; width:36px; height:36px;
            display:flex; align-items:center; justify-content:center;
            background:rgba(255,255,255,.12); border-radius:50%;
            text-decoration:none; color:white; border:none;
            transition:background .2s; position:relative; flex-shrink:0; cursor:pointer;
        }
        .back-btn:hover,.cart-btn:hover { background:rgba(255,255,255,.22); }
        .cart-badge {
            position:absolute; top:-5px; right:-5px;
            background:#FF4444; color:white; font-size:10px; font-weight:bold;
            padding:2px 5px; border-radius:10px; min-width:18px; text-align:center;
        }
        .header-title  { font-size:20px; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:8px; }
        .header-search { display:none; }

        /* banner desconto */
        .desconto-banner {
            display:none; background:linear-gradient(90deg,#FF4444,#FF6B35);
            padding:10px 20px; text-align:center; font-size:14px; font-weight:600;
            gap:8px; align-items:center; justify-content:center;
        }
        .desconto-banner.visible { display:flex; }
        .desconto-banner a { color:white; text-decoration:underline; margin-left:8px; font-size:12px; }

        /* ── BUSCA + FILTROS MOBILE ── */
        .search-container { padding:14px 20px; }
        .search-box {
            background:white; border-radius:50px; padding:12px 18px;
            display:flex; align-items:center; gap:10px;
        }
        .search-box input { border:none; outline:none; flex:1; font-size:15px; color:#555; }

        .filters-container { padding:4px 10px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
        .filters-container::-webkit-scrollbar { display:none; }
        .filter-chip {
            background:rgba(255,255,255,.18); color:white; border:none;
            padding:9px 18px; border-radius:50px; font-size:14px; font-weight:500;
            white-space:nowrap; cursor:pointer; transition:background .25s; flex-shrink:0;
        }
        .filter-chip.active { background:#4ECDC4; color:#003785; font-weight:700; }
        .filter-chip:hover:not(.active) { background:rgba(255,255,255,.28); }

        /* ── LAYOUT ── */
        .page-layout {
            display:flex; align-items:flex-start; max-width:1600px; margin:0 auto;
            padding:0 0 40px; gap:0;
        }
        .sidebar { display:none; }
        .content-area { flex:1; min-width:0; overflow:hidden; }

        /* ── LINHAS ── */
        .rows-container { display:flex; flex-direction:column; gap:10px; padding:14px 0 0; }

        .card-row {
            display:flex; gap:10px; overflow-x:auto; overflow-y:visible;
            scrollbar-width:none; -webkit-overflow-scrolling:touch;
            padding-left:20px; padding-right:20px;
            cursor:grab; user-select:none; -webkit-user-select:none;
        }
        .card-row::-webkit-scrollbar { display:none; }
        .card-row.dragging { cursor:grabbing; }

        /* ── CARD ── */
        .product-card {
            flex:0 0 calc(50% - 15px); min-width:130px; max-width:260px;
            background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
            border-radius:16px; overflow:hidden; cursor:pointer;
            transition:transform .2s, box-shadow .2s;
            position:relative; text-decoration:none; color:white; display:flex; flex-direction:column;
        }
        .product-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.3); }
        .product-card.is-afiliado { border:1.5px solid rgba(78,205,196,.35); }

        /* ── MÍDIA ── */
        .product-media {
            width:100%; height:160px;
            background:linear-gradient(135deg,#1E3A8A,#3B82F6);
            display:flex; align-items:center; justify-content:center;
            font-size:48px; position:relative; overflow:hidden;
        }
        .product-media img {
            width:100%; height:100%; object-fit:cover; object-position:center;
            position:absolute; top:0; left:0; opacity:0;
            transition:opacity .5s ease-in-out; pointer-events:none;
        }
        .product-media img.active { opacity:1; }
        .product-media video, .product-media iframe {
            width:100%; height:100%; object-fit:cover;
            position:absolute; top:0; left:0; border:none;
        }
        .card-overlay {
            position:absolute; inset:0; background:rgba(0,0,0,.45);
            display:flex; align-items:center; justify-content:center;
            opacity:0; transition:opacity .25s; z-index:30;
        }
        .card-overlay .overlay-btn {
            background:#4ECDC4; color:#003785; font-weight:700; font-size:13px;
            padding:10px 22px; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,.3);
        }
        .product-card:hover .card-overlay { opacity:1; }
        .product-card:hover .product-media img.active {
            transform:scale(1.05);
            transition:opacity .5s ease-in-out, transform .4s ease;
        }

        .carousel-arrow {
            position:absolute; top:50%; transform:translateY(-50%);
            width:30px; height:30px; background:rgba(0,0,0,.55); border:none;
            border-radius:50%; color:white; font-size:16px; font-weight:bold;
            cursor:pointer; display:flex; align-items:center; justify-content:center;
            z-index:25; opacity:0; transition:opacity .2s; pointer-events:none;
        }
        .carousel-arrow.prev { left:8px; }
        .carousel-arrow.next { right:8px; }
        .product-media:hover .carousel-arrow { opacity:1; pointer-events:auto; }

        .video-badge {
            position:absolute; top:8px; right:8px; background:rgba(0,0,0,.7); color:white;
            padding:5px 10px; border-radius:50px; font-size:11px; font-weight:700; z-index:25;
            display:flex; align-items:center; gap:4px;
        }
        .media-indicators {
            position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
            display:flex; gap:5px; z-index:20; pointer-events:none;
        }
        .indicator-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .3s; }
        .indicator-dot.active { width:16px; border-radius:3px; background:white; }

        .discount-badge {
            position:absolute; top:8px; left:8px; background:#FF4444; color:white;
            padding:5px 10px; border-radius:50px; font-size:12px; font-weight:700; z-index:10;
        }
        body.modo-desconto .discount-badge {
            font-size:14px; padding:6px 12px; box-shadow:0 2px 8px rgba(255,68,68,.6);
            animation:pulseBadge 2s ease-in-out infinite;
        }
        @keyframes pulseBadge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

        /* badge de tipo (livro / veiculo / servico) */
        .tipo-badge {
            position:absolute; bottom:8px; left:8px; z-index:10;
            background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
            color:white; font-size:10px; font-weight:700;
            padding:3px 9px; border-radius:50px;
            display:flex; align-items:center; gap:4px;
        }

        .stock-indicator {
            position:absolute; bottom:40px; right:8px; background:rgba(255,68,68,.95); color:white;
            padding:4px 10px; border-radius:50px; font-size:11px; font-weight:600; z-index:10;
            animation:pulse 2s ease-in-out infinite;
            display:flex; align-items:center; gap:4px;
        }
        @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

        /* ── INFO CARD ── */
        .product-info { padding:12px 14px; display:flex; flex-direction:column; flex:1; min-width:0; }
        .product-name {
            font-size:14px; font-weight:600; margin-bottom:4px;
            overflow:hidden; text-overflow:ellipsis;
            display:-webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient:vertical;
            line-height:1.35; min-height:38px;
        }
        .product-desc {
            font-size:11px; color:rgba(255,255,255,.55); margin-bottom:5px;
            overflow:hidden; text-overflow:ellipsis;
            display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; line-height:1.4;
            min-height:31px; max-height:31px;
        }
        .product-subtipo { font-size:11px; color:rgba(255,255,255,.5); margin-bottom:6px; min-height:16px; max-height:16px; overflow:hidden; }
        .product-price   { display:flex; align-items:baseline; gap:7px; margin-bottom:5px; flex-wrap:wrap; min-height:24px; }
        .current-price   { font-size:17px; font-weight:700; color:#4ECDC4; }
        .old-price       { font-size:12px; color:rgba(255,255,255,.5); text-decoration:line-through; }
        .full-price-row  { display:flex; align-items:center; gap:6px; margin-bottom:2px; flex-wrap:wrap; min-height:14px; max-height:14px; overflow:hidden; }
        .full-price-val  { font-size:12px; color:rgba(255,255,255,.55); text-decoration:line-through; }
        .product-stars   { font-size:11px; color:#FFD700; margin-bottom:4px; display:flex; align-items:center; gap:4px; min-height:16px; max-height:16px; overflow:hidden; }
        .product-meta-placeholder { visibility:hidden; pointer-events:none; }
        .store-distance { color:rgba(255,255,255,.55); white-space:nowrap; font-size:10px; }
        .stars-count     { color:rgba(255,255,255,.5); }
        .product-store   { font-size:11px; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:4px; }
        .product-store.is-af { color:#4ECDC4; }
        .verified-icon {
            display:inline-block; width:13px; height:13px;
            background:#4ECDC4; border-radius:50%; position:relative; flex-shrink:0;
        }
        .verified-icon .icon-check {
            position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%); width:9px; height:9px;
            filter:brightness(0) invert(1);
        }
        .empty-state { text-align:center; padding:60px 20px; }
        .empty-state .icon-big { width:48px; height:48px; margin-bottom:16px; }
        .loading-msg  { text-align:center; padding:40px 20px; font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
        .error-msg    { text-align:center; padding:40px 20px; color:rgba(255,80,80,.9); display:flex; align-items:center; justify-content:center; gap:8px; }

        /* ── RESPONSIVO ── */
        @media (min-width:480px) { .product-card { flex:0 0 calc(50% - 18px); } }
        @media (min-width:640px) {
            .product-card  { flex:0 0 calc(33.333% - 18px); }
            .product-media { height:175px; }
        }
        @media (min-width:1024px) {
            .header { padding:12px 30px; }
            .header-search {
                display:flex; flex:1; max-width:520px;
                background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
                border-radius:50px; padding:9px 18px; align-items:center; gap:10px;
            }
            .header-search:focus-within { background:rgba(255,255,255,.2); }
            .header-search input { border:none; outline:none; background:transparent; font-size:14px; color:white; flex:1; }
            .header-search input::placeholder { color:rgba(255,255,255,.55); }
            .search-container { display:none; }
            .filters-mobile   { display:none; }
            .page-layout      { padding:20px 0 50px; gap:0; }
            .sidebar {
                display:flex; flex-direction:column; width:230px; flex-shrink:0;
                position:sticky; top:72px; max-height:calc(100vh - 90px);
                overflow-y:auto; scrollbar-width:thin;
                scrollbar-color:rgba(255,255,255,.2) transparent;
                padding:0 0 0 30px; gap:20px;
            }
            .sidebar-title {
                font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px;
                color:rgba(255,255,255,.55); margin-bottom:10px; padding-bottom:8px;
                border-bottom:1px solid rgba(255,255,255,.12);
            }
            .sidebar-chip {
                display:block; width:100%; background:rgba(255,255,255,.1); color:white; border:none;
                padding:9px 14px; border-radius:10px; font-size:13px; font-weight:500;
                text-align:left; cursor:pointer; margin-bottom:5px; transition:background .2s;
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            }
            .sidebar-chip.active  { background:#4ECDC4; color:#003785; font-weight:700; }
            .sidebar-chip:hover:not(.active) { background:rgba(255,255,255,.2); }
            .product-card  { flex:0 0 calc(25% - 20px); max-width:260px; }
            .product-media { height:195px; }
            .card-row      { padding-left:16px; padding-right:16px; }
        }
        @media (min-width:1280px) { .product-card { flex:0 0 calc(20% - 18px); max-width:270px; } }
        @media (min-width:1600px) {
            .product-card  { flex:0 0 calc(16.666% - 16px); max-width:280px; }
            .product-media { height:210px; }
        }

        /* ── ÍCONE SVG (substitui emojis) ── */
        .icon{
            width:20px;
            height:20px;
            object-fit:contain;
            flex-shrink:0;
            vertical-align:middle;
        }
        .spin{
            animation:spin 1s linear infinite;
        }
        @keyframes spin{
            from{transform:rotate(0deg);}
            to{transform:rotate(360deg);}
        }