/* --- RESET & VARIÁVEIS --- */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --olx-purple:   #4a1a7a;
            --olx-purple2:  #6a0dad;
            --olx-orange:   #f28c00;
            --olx-yellow:   #f5c518;
            --olx-green:    #27ae60;
            --olx-gray-bg:  #f5f5f5;
            --olx-gray-brd: #e0e0e0;
            --olx-gray-txt: #666;
            --olx-dark:     #222;
            --olx-white:    #fff;
            --olx-red:      #c0392b;
            --radius:       8px;
            --shadow:       0 2px 8px rgba(0,0,0,0.10);
        }

        body {
            font-family: 'Nunito', Arial, sans-serif;
            background: var(--olx-gray-bg);
            color: var(--olx-dark);
            min-height: 100vh;
        }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button { cursor: pointer; border: none; background: none; font-family: inherit; }
        input { font-family: inherit; }

        /* ======================================================
           TOPBAR (FAIXA TOPO ROXA) - COMEÇA AQUI
           ====================================================== */
        .topbar {
            background: var(--olx-purple);
            color: var(--olx-white);
            text-align: center;
            font-size: 13px;
            font-weight: 700;
            padding: 7px 16px;
            letter-spacing: 0.01em;
        }
        .topbar a {
            color: var(--olx-yellow);
            text-decoration: underline;
            font-weight: 800;
        }
        /* TOPBAR - TERMINA AQUI */

        /* ======================================================
           HEADER (BARRA DE NAVEGAÇÃO PRINCIPAL) - COMEÇA AQUI
           ====================================================== */
        .header {
            background: var(--olx-white);
            border-bottom: 1px solid var(--olx-gray-brd);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow);
        }
        .header-inner {
            max-width: 1576px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 24px;
        }

        /* --- LOGO --- */
        .logo {
            display: flex;
            align-items: center;
            font-size: 30px;
            font-weight: 900;
            letter-spacing: -1px;
            flex-shrink: 0;
            user-select: none;
        }
        .logo span.o { color: #000; }
        .logo span.l { color: var(--olx-orange); }
        .logo span.x { color: var(--olx-purple2); }
        /* Obs: substitua por <img src="logo.png"> se tiver a imagem */

        /* --- BARRA DE BUSCA --- */
        .search-bar-wrap {
            flex: 1;
            position: relative;
        }
        .search-bar {
            display: flex;
            align-items: center;
            border: 2px solid var(--olx-gray-brd);
            border-radius: 6px;
            background: var(--olx-white);
            transition: border-color 0.2s;
            width: 100%;
            /* SEM overflow:hidden aqui - o dropdown precisa sair para fora */
        }
        .search-bar:focus-within { border-color: var(--olx-purple2); }

        .search-location {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 0 12px;
            border-right: 1px solid var(--olx-gray-brd);
            font-size: 13px;
            font-weight: 700;
            color: var(--olx-purple2);
            white-space: nowrap;
            cursor: pointer;
        }
        .search-location .pin { font-size: 15px; }

        .search-bar input {
            flex: 1;
            padding: 10px 14px;
            font-size: 14px;
            border: none;
            outline: none;
            background: transparent;
            color: var(--olx-dark);
        }
        .search-bar input::placeholder { color: #aaa; }

        .search-btn {
            padding: 0 18px;
            height: 42px;
            background: var(--olx-purple2);
            color: var(--olx-white);
            font-size: 18px;
            display: flex;
            align-items: center;
            transition: background 0.2s;
            border-radius: 0 4px 4px 0; /* arredonda só o lado direito */
            flex-shrink: 0;
        }
        .search-btn:hover { background: var(--olx-purple); }

        /* --- MENU DIREITO DO HEADER --- */
        .header-nav {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            font-weight: 700;
            color: var(--olx-dark);
            padding: 6px 9px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s;
            white-space: nowrap;
        }
        .nav-item:hover { background: var(--olx-gray-bg); }
        .nav-item .icon { font-size: 17px; }

        /* --- AVATAR USUÁRIO --- */
        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--olx-purple2), var(--olx-orange));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            font-size: 14px;
        }

        /* --- BOTÃO ANUNCIAR --- */
        .btn-anunciar {
            background: var(--olx-orange);
            color: var(--olx-white) !important;
            font-weight: 800;
            font-size: 14px;
            padding: 10px 18px;
            border-radius: 25px;
            display: flex;
            align-items: center;
            gap: 7px;
            transition: background 0.2s, transform 0.1s;
            white-space: nowrap;
        }
        .btn-anunciar:hover { background: #d97a00; transform: scale(1.03); }
        /* HEADER - TERMINA AQUI */

        /* ======================================================
           NAVBAR DE CATEGORIAS (MENU HORIZONTAL) - COMEÇA AQUI
           ====================================================== */
        .cat-nav {
            background: var(--olx-white);
            border-bottom: 1px solid var(--olx-gray-brd);
        }
        .cat-nav-inner {
            max-width: 1576px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: none;
            padding: 0 24px;
            gap: 0;
        }
        .cat-nav-inner::-webkit-scrollbar { display: none; }

        .cat-item {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 13px;
            font-size: 13px;
            font-weight: 400;
            color: #333;
            white-space: nowrap;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            transition: color 0.18s, border-color 0.18s;
            letter-spacing: 0.01em;
            line-height: 1;
        }
        .cat-item:hover {
            color: var(--olx-purple2);
            border-bottom-color: var(--olx-purple2);
        }

        /* Ícone do item de categoria: círculo colorido com emoji pequeno */
        .cat-icon-wrap {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        /* Cores individuais por categoria (igual ao OLX real) */
        .cat-item:nth-child(1)  .cat-icon-wrap { background: #f0e6ff; }
        .cat-item:nth-child(2)  .cat-icon-wrap { background: #ffe6e6; }
        .cat-item:nth-child(3)  .cat-icon-wrap { background: #fff0d6; }
        .cat-item:nth-child(4)  .cat-icon-wrap { background: #e8f4ff; }
        .cat-item:nth-child(5)  .cat-icon-wrap { background: #e6f7e6; }
        .cat-item:nth-child(6)  .cat-icon-wrap { background: #f5f5f5; }
        .cat-item:nth-child(7)  .cat-icon-wrap { background: #e6f0ff; }
        .cat-item:nth-child(8)  .cat-icon-wrap { background: #fff3e0; }
        .cat-item:nth-child(9)  .cat-icon-wrap { background: #fffde6; }
        .cat-item:nth-child(10) .cat-icon-wrap { background: #e8f5e9; }
        .cat-item:nth-child(11) .cat-icon-wrap { background: #e3f2fd; }
        .cat-item:nth-child(12) .cat-icon-wrap { background: #fce4ec; }
        .cat-item:nth-child(13) .cat-icon-wrap { background: #f1f8e9; }
        .cat-item:nth-child(14) .cat-icon-wrap { background: #fbe9e7; }
        .cat-item:nth-child(15) .cat-icon-wrap { background: #ede7f6; }

        /* Seta de scroll das categorias */
        .cat-arrow {
            margin-left: auto;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1.5px solid var(--olx-gray-brd);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #555;
            cursor: pointer;
            flex-shrink: 0;
            background: var(--olx-white);
            transition: box-shadow 0.2s;
        }
        .cat-arrow:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.13); }
        /* NAVBAR DE CATEGORIAS - TERMINA AQUI */

        /* ======================================================
           ÁREA PRINCIPAL (CONTEÚDO) - COMEÇA AQUI
           ====================================================== */
        .main-content {
            max-width: 1576px;
            margin: 0 auto;
            padding: 0 24px 40px;
        }

        /* ======================================================
           BANNER / CARROSSEL - COMEÇA AQUI
           ====================================================== */
        .banner-section {
            position: relative;
            margin: 18px 0 0;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        .banner-slide {
            display: flex;
            align-items: stretch;
            min-height: 220px;
            background: linear-gradient(120deg, var(--olx-purple2) 55%, #c8a96e 100%);
            border-radius: var(--radius);
            overflow: hidden;
        }
        .banner-content {
            flex: 1;
            padding: 36px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }
        .banner-content h2 {
            color: var(--olx-white);
            font-size: 28px;
            font-weight: 900;
            line-height: 1.25;
            max-width: 480px;
        }
        .banner-btn {
            display: inline-flex;
            align-items: center;
            background: var(--olx-yellow);
            color: var(--olx-dark);
            font-weight: 800;
            font-size: 15px;
            padding: 12px 28px;
            border-radius: 25px;
            width: fit-content;
            transition: background 0.2s, transform 0.15s;
        }
        .banner-btn:hover { background: #e6b800; transform: scale(1.04); }

        .banner-partners {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }
        .banner-partners span {
            color: var(--olx-white);
            font-size: 14px;
            font-weight: 700;
            opacity: 0.9;
            background: rgba(255,255,255,0.18);
            padding: 5px 14px;
            border-radius: 20px;
        }

        .banner-img {
            width: 42%;
            object-fit: cover;
            flex-shrink: 0;
            /* Substitua por <img src="banner.jpg"> */
            background: linear-gradient(160deg, #c8a96e 0%, #8b6914 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 70px;
        }

        /* Setas do carrossel */
        .banner-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: background 0.2s;
            z-index: 2;
        }
        .banner-arrow:hover { background: #fff; }
        .banner-arrow.left  { left: 12px; }
        .banner-arrow.right { right: 12px; }

        /* Indicadores do carrossel */
        .banner-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 10px 0 4px;
        }
        .banner-dots span {
            width: 32px;
            height: 4px;
            border-radius: 2px;
            background: var(--olx-gray-brd);
            cursor: pointer;
            transition: background 0.2s;
        }
        .banner-dots span.active { background: var(--olx-orange); }
        /* BANNER - TERMINA AQUI */

        /* ======================================================
           BLOCO DE PROPAGANDA / AD BANNER - COMEÇA AQUI
           ====================================================== */
        .ad-banner {
            background: var(--olx-white);
            border: 1px solid var(--olx-gray-brd);
            border-radius: var(--radius);
            margin: 18px 0;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: var(--shadow);
            position: relative;
        }
        .ad-badge {
            font-size: 10px;
            color: var(--olx-gray-txt);
            position: absolute;
            top: 8px;
            right: 36px;
        }
        .ad-close {
            position: absolute;
            top: 8px;
            right: 10px;
            color: var(--olx-gray-txt);
            font-size: 14px;
            cursor: pointer;
        }
        .ad-logo {
            font-size: 28px;
            font-weight: 900;
            color: var(--olx-green);
            flex-shrink: 0;
        }
        .ad-img-placeholder {
            width: 50px;
            height: 70px;
            background: linear-gradient(135deg, #1a3a5c, #2980b9);
            border-radius: 4px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 22px;
        }
        .ad-info { flex: 1; }
        .ad-info .ad-title { font-size: 13px; color: var(--olx-dark); font-weight: 600; }
        .ad-info .ad-price { font-size: 12px; color: var(--olx-gray-txt); margin-top: 3px; }
        .ad-cta {
            background: var(--olx-green);
            color: #fff !important;
            font-size: 13px;
            font-weight: 700;
            padding: 9px 20px;
            border-radius: 6px;
            white-space: nowrap;
            cursor: pointer;
            transition: background 0.2s;
        }
        .ad-cta:hover { background: #219a52; }
        /* AD BANNER - TERMINA AQUI */

        /* ======================================================
           SEÇÃO DE ANÚNCIOS / LISTAGEM DE PRODUTOS - COMEÇA AQUI
           ====================================================== */
        .section-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--olx-dark);
            margin: 24px 0 16px;
        }

        /* Container com scroll horizontal (igual ao OLX) */
        .cards-wrapper {
            position: relative;
        }
        .cards-scroll {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 6px;
        }
        .cards-scroll::-webkit-scrollbar { display: none; }

        /* Seta de navegação dos cards */
        .cards-arrow {
            position: absolute;
            top: 50%;
            right: -16px;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--olx-white);
            box-shadow: 0 2px 10px rgba(0,0,0,0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            z-index: 2;
            transition: box-shadow 0.2s;
        }
        .cards-arrow:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.22); }

        /* --- CARD DE ANÚNCIO --- */
        .card {
            min-width: 200px;
            max-width: 220px;
            background: var(--olx-white);
            border-radius: var(--radius);
            border: 1px solid var(--olx-gray-brd);
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            transition: box-shadow 0.2s, transform 0.15s;
            position: relative;
        }
        .card:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.13);
            transform: translateY(-2px);
        }

        /* Imagem do card: quadrada e sem corte */
        .card-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            height: auto;
            object-fit: contain;
            object-position: center;
            display: block;
            background: #fff;
            padding: 6px;
        }

        /* Botão favoritar */
        .card-fav {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            background: rgba(255,255,255,0.88);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            cursor: pointer;
            transition: background 0.2s;
            z-index: 1;
        }
        .card-fav:hover { background: #fff; }
        .card-fav.active { color: var(--olx-red); }

        /* Corpo do card */
        .card-body { padding: 10px 12px 12px; }
        .card-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--olx-dark);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .card-price {
            font-size: 16px;
            font-weight: 800;
            color: var(--olx-dark);
            margin: 6px 0 4px;
        }

        /* Tags: Entrega Fácil, Garantia da OLX */
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }
        .tag {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            border: 1.5px solid;
        }
        .tag-entrega {
            color: var(--olx-purple2);
            border-color: var(--olx-purple2);
        }
        .tag-garantia {
            color: var(--olx-green);
            border-color: var(--olx-green);
        }

        /* Localização e data */
        .card-meta {
            font-size: 11px;
            color: var(--olx-gray-txt);
            margin-top: 6px;
            display: flex;
            justify-content: space-between;
            gap: 4px;
        }
        /* SEÇÃO DE ANÚNCIOS - TERMINA AQUI */

        /* ======================================================
           FOOTER - COMEÇA AQUI
           ====================================================== */
        .footer {
            background: var(--olx-white);
            border-top: 1px solid var(--olx-gray-brd);
            margin-top: 40px;
        }
        .footer-inner {
            max-width: 1576px;
            margin: 0 auto;
            padding: 32px 24px 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 24px;
        }
        .footer-col h4 {
            font-size: 13px;
            font-weight: 800;
            color: var(--olx-dark);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .footer-col ul li {
            margin-bottom: 7px;
        }
        .footer-col ul li a {
            font-size: 13px;
            color: var(--olx-gray-txt);
            transition: color 0.2s;
        }
        .footer-col ul li a:hover { color: var(--olx-purple2); }

        .footer-bottom {
            border-top: 1px solid var(--olx-gray-brd);
            padding: 16px 20px;
            text-align: center;
            font-size: 12px;
            color: var(--olx-gray-txt);
        }
        /* FOOTER - TERMINA AQUI */

        /* ======================================================
           DROPDOWN DE ESTADOS - COMEÇA AQUI
           ====================================================== */

        /* O posicionamento é feito pelo .search-bar-wrap (position:relative acima) */
        .loc-arrow {
            font-size: 11px;
            transition: transform 0.2s;
        }
        .search-location.aberto .loc-arrow { transform: rotate(180deg); }

        .estados-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            width: 220px;
            background: var(--olx-white);
            border: 1px solid var(--olx-gray-brd);
            border-radius: var(--radius);
            box-shadow: 0 8px 24px rgba(0,0,0,0.14);
            z-index: 999;
            max-height: 430px;
            overflow-y: auto;
            scrollbar-width: thin;
        }
        .estados-dropdown.visivel { display: block; }

        .estado-item {
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 9px 16px;
            font-size: 13px;
            font-weight: 700;
            color: var(--olx-dark);
            cursor: pointer;
            transition: background 0.15s;
            text-decoration: none;
        }
        .estado-item:hover { background: var(--olx-gray-bg); }
        .estado-item.ativo {
            background: var(--olx-purple2);
            color: var(--olx-white);
        }
        .estado-item small {
            font-size: 11px;
            font-weight: 400;
            opacity: 0.75;
        }
        /* DROPDOWN DE ESTADOS - TERMINA AQUI */


        /* ======================================================
           OVERLAY (FUNDO ESCURECIDO) - COMEÇA AQUI
           ====================================================== */
        /* Overlay escuro: só para o drawer do usuário */
        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 250;   /* acima do header(100), abaixo do drawer(300) */
            cursor: pointer;
        }
        .overlay.visivel { display: block; }

        /* Quando dropdown de estados está aberto, o overlay NÃO é mostrado
           — o fechamento é feito via document click no JS */
        /* OVERLAY - TERMINA AQUI */

        /* O dropdown de estados fica acima de tudo */
        .estados-dropdown { z-index: 9999 !important; }


        /* ======================================================
           MENU LATERAL DO USUÁRIO (DRAWER) - COMEÇA AQUI
           ====================================================== */
        .user-btn {
            background: none;
            border: none;
            font-family: inherit;
        }

        .user-drawer {
            position: fixed;
            top: 0;
            right: -360px;         /* começa fora da tela */
            width: 320px;
            height: 100vh;
            background: var(--olx-white);
            z-index: 300;
            box-shadow: -4px 0 24px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
            scrollbar-width: thin;
        }
        .user-drawer.aberto { right: 0; }

        /* Cabeçalho do drawer */
        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--olx-gray-brd);
            position: sticky;
            top: 0;
            background: var(--olx-white);
            z-index: 2;
        }
        .drawer-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--olx-dark);
        }
        .drawer-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--olx-gray-txt);
            cursor: pointer;
            transition: background 0.15s;
            background: none;
            border: none;
        }
        .drawer-close:hover { background: var(--olx-gray-bg); }

        /* Card de perfil */
        .drawer-perfil {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--olx-gray-brd);
            text-decoration: none;
            transition: background 0.15s;
        }
        .drawer-perfil:hover { background: var(--olx-gray-bg); }
        .drawer-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--olx-purple2), var(--olx-orange));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 800;
            font-size: 20px;
            flex-shrink: 0;
        }
        .drawer-username {
            font-size: 15px;
            font-weight: 700;
            color: var(--olx-dark);
        }
        .drawer-link-sub {
            font-size: 13px;
            color: var(--olx-purple2);
            font-weight: 600;
            margin-top: 2px;
        }

        /* Títulos dos grupos do menu */
        .drawer-group-title {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.08em;
            color: var(--olx-gray-txt);
            padding: 14px 20px 4px;
            text-transform: uppercase;
        }

        /* Links do drawer */
        .drawer-nav { display: flex; flex-direction: column; }
        .drawer-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--olx-dark);
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            border-left: 3px solid transparent;
        }
        .drawer-item:hover {
            background: var(--olx-gray-bg);
            border-left-color: var(--olx-purple2);
            color: var(--olx-purple2);
        }
        .drawer-item-icon { font-size: 15px; }

        /* Link de sair com cor vermelha */
        .drawer-sair { color: var(--olx-red); }
        .drawer-sair:hover { border-left-color: var(--olx-red); color: var(--olx-red); }
        /* MENU LATERAL DO USUÁRIO - TERMINA AQUI */


        /* ======================================================
           RESPONSIVIDADE - COMEÇA AQUI
           ====================================================== */
        @media (max-width: 768px) {
            .header-inner { gap: 8px; padding: 8px 12px; }
            .nav-item span { display: none; }
            .nav-item .icon { font-size: 20px; }
            .banner-content h2 { font-size: 18px; }
            .banner-content { padding: 24px 20px; }
            .banner-img { display: none; }
            .main-content { padding: 0 10px 30px; }
            .card { min-width: 160px; max-width: 180px; }
            .card-img { height: auto; }
        }
        @media (max-width: 480px) {
            .logo { font-size: 22px; }
            .btn-anunciar span { display: none; }
        }
        /* RESPONSIVIDADE - TERMINA AQUI */

    

        /* Ajustes da integração real Vipcom/OLX */

        .olx-icon-svg { width:18px; height:18px; display:inline-block; vertical-align:middle; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
        .search-btn .olx-icon-svg { width:21px; height:21px; stroke-width:2.4; }
        .pin .olx-icon-svg, .loc-arrow .olx-icon-svg { width:16px; height:16px; }
        .btn-anunciar .olx-icon-svg { width:17px; height:17px; fill:none; }
        .card-fav .olx-icon-svg { width:16px; height:16px; }
        .card-fav.active .olx-icon-svg { fill:currentColor; }
        .drawer-close .olx-icon-svg, .ad-close .olx-icon-svg { width:16px; height:16px; }
        .cat-arrow .olx-icon-svg, .cards-arrow .olx-icon-svg { width:18px; height:18px; }
        .nav-item .icon { display:inline-flex; align-items:center; justify-content:center; color:var(--olx-dark); }

        .banner-section.olx-banner-restaurado { background:#fff; }
        .banner-section.olx-banner-restaurado .banner-slide { min-height:228px; background:linear-gradient(120deg,#7b00d9 0%,#8b00e8 55%,#6f00c7 100%); position:relative; overflow:hidden; }
        .banner-section.olx-banner-restaurado .banner-slide:before { content:""; position:absolute; inset:auto 34% 0 auto; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.10); transform:translateY(42%); }
        .promo-chip { display:inline-flex; width:max-content; padding:4px 13px; border-radius:8px; background:rgba(0,0,0,.25); color:#fff; font-weight:900; font-size:15px; }
        .banner-coupon { position:absolute; right:70px; top:86px; min-width:320px; display:flex; align-items:center; justify-content:space-between; border:2px solid #ff9700; border-radius:999px; overflow:hidden; color:#fff; font-weight:900; box-shadow:0 12px 28px rgba(0,0,0,.10); }
        .banner-coupon span { background:#ff8900; padding:13px 26px; font-size:17px; }
        .banner-coupon strong { padding:13px 28px; font-size:20px; letter-spacing:.03em; }
        .banner-visual { position:absolute; right:36%; bottom:26px; width:280px; height:150px; pointer-events:none; }
        .device-monitor { position:absolute; left:72px; top:0; width:150px; height:96px; border-radius:10px; background:#111; box-shadow:0 15px 30px rgba(0,0,0,.25); }
        .device-monitor:before { content:""; position:absolute; inset:8px; border-radius:6px; background:linear-gradient(135deg,#00d5ff,#ff00a8 48%,#6b00ff); }
        .device-monitor:after { content:""; position:absolute; left:58px; bottom:-36px; width:34px; height:36px; background:#ddd; box-shadow:0 36px 0 18px #eee; clip-path:polygon(35% 0,65% 0,80% 100%,20% 100%); }
        .device-phone { position:absolute; right:5px; top:52px; width:54px; height:92px; border-radius:18px; background:#fafafa; border:5px solid #fff; box-shadow:0 10px 24px rgba(0,0,0,.22); }
        .device-phone:before { content:""; position:absolute; top:8px; left:8px; width:9px; height:9px; border-radius:50%; background:#111; box-shadow:15px 0 0 #111, 0 15px 0 #111; }
        .device-camera { position:absolute; left:4px; top:62px; width:72px; height:72px; border-radius:20px; background:#ffd6e7; box-shadow:0 10px 24px rgba(0,0,0,.18); }
        .device-camera:before { content:""; position:absolute; left:19px; top:22px; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle,#111 0 28%,#f8f8f8 30% 55%,#111 57%); }
        .device-camera:after { content:""; position:absolute; left:8px; top:-11px; width:32px; height:18px; border-radius:8px 8px 0 0; background:#ffc7dd; }
        .banner-section.olx-banner-restaurado .banner-dots { background:#fff; }
        .ad-banner.olx-ad-restaurado { max-width:940px; margin:18px auto 24px; min-height:84px; border-radius:0; box-shadow:none; }
        .ad-banner.olx-ad-restaurado .ad-logo { min-width:125px; color:#00856b; font-size:24px; }
        .ad-banner.olx-ad-restaurado .ad-img-placeholder { background:linear-gradient(145deg,#d8f7ff,#0b6688); color:#0b4f63; font-size:0; position:relative; }
        .ad-banner.olx-ad-restaurado .ad-img-placeholder:before { content:""; width:18px; height:54px; border-radius:6px; background:linear-gradient(#0b4162,#27b7d7); box-shadow:0 0 0 4px rgba(255,255,255,.65); }

        @media (max-width: 1080px) {
            .banner-visual { right:30%; transform:scale(.86); transform-origin:right bottom; }
            .banner-coupon { right:32px; min-width:280px; }
        }
        @media (max-width: 820px) {
            .banner-section.olx-banner-restaurado .banner-slide { display:block; padding-bottom:22px; }
            .banner-visual { display:none; }
            .banner-coupon { position:relative; top:auto; right:auto; width:calc(100% - 40px); min-width:0; margin:0 20px; }
            .banner-coupon span, .banner-coupon strong { padding:11px 16px; font-size:15px; }
        }

        body#page1 { background: var(--olx-gray-bg); }
        .olx-logo-img { display:flex; align-items:center; min-width:120px; text-decoration:none; }
        .olx-logo-img img { max-height:49px; max-width:150px; object-fit:contain; display:block; }
        .olx-search-form { flex:1; display:block; }
        .search-bar-wrap { flex: 1; }
        .search-bar input { width:100%; }
        .cat-icon-wrap img { width:24px; height:24px; object-fit:contain; display:block; }
        .cat-item small { display:block; color:inherit; font-size:12px; }
        .section-head-line { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
        .section-link { color: var(--olx-purple2); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
        .section-link:hover { text-decoration:underline; }
        .card-link { color:inherit; text-decoration:none; display:block; height:100%; }
        .card-link:hover .card-title { color: var(--olx-purple2); }
        .card-img.sem-foto { object-fit:contain; background:#fafafa; }
        .empty-section { background:#fff; border:1px solid var(--olx-gray-brd); border-radius:16px; padding:22px; color:var(--olx-gray-txt); font-size:14px; }

        /* Categorias e blog no mesmo padrão visual dos cards: menores, quadrados e sem corte */
        .featured-cats-grid, .blog-grid {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
            gap:14px;
        }
        .featured-cat-card, .blog-card {
            background:#fff;
            border:1px solid var(--olx-gray-brd);
            border-radius:var(--radius);
            overflow:hidden;
            text-decoration:none;
            color:var(--olx-dark);
            box-shadow:0 2px 8px rgba(0,0,0,.04);
            transition:.2s ease;
        }
        .featured-cat-card:hover, .blog-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
        .featured-cat-card img, .blog-card img {
            width:100%;
            aspect-ratio:1 / 1;
            height:auto;
            object-fit:contain;
            object-position:center;
            display:block;
            background:#fff;
            padding:6px;
        }
        .featured-cat-card strong, .blog-card strong { display:block; padding:10px 12px 12px; font-size:15px; line-height:1.25; color:var(--olx-purple2); }
        .olx-footer-social { display:flex; gap:10px; flex-wrap:wrap; }
        .olx-footer-social a { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border-radius:999px; background:#fff; border:1px solid var(--olx-gray-brd); text-decoration:none; }
        .olx-footer-social img { width:20px; height:20px; object-fit:contain; }
        .drawer-login-warning { display:block; margin:12px 18px 0; padding:12px; border-radius:12px; background:#f7f0ff; color:var(--olx-purple); font-size:13px; font-weight:600; }
        @media (max-width: 900px) {
            .featured-cats-grid, .blog-grid { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
        }
        @media (max-width: 520px) {
            .featured-cats-grid, .blog-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .section-head-line { align-items:flex-start; flex-direction:column; }
            .olx-logo-img { min-width:auto; }
            .olx-logo-img img { max-width:112px; }
        }

/* Ajustes dos blocos separados */
.olx-home-tips { display:none; }
.blog-desc { color:var(--olx-gray-txt); font-size:14px; margin-top:-8px; }


/* ============================================================
   DRAWER DE LOCALIZAÇÃO - HEADER OLX MAX
   ============================================================ */
.search-location {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--olx-gray-brd);
    font-family: inherit;
    text-align: left;
}
.search-location .pin,
.search-location .loc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.location-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    max-width: 150px;
}
.location-text small {
    color: var(--olx-gray-txt);
    font-size: 10px;
    font-weight: 700;
}
.location-text strong {
    color: var(--olx-purple2);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.location-drawer {
    position: fixed;
    top: 0;
    right: -430px;
    width: 400px;
    max-width: calc(100vw - 28px);
    height: 100vh;
    background: var(--olx-white);
    z-index: 310;
    box-shadow: -5px 0 28px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    transition: right .28s cubic-bezier(.4,0,.2,1);
}
.location-drawer.aberto { right: 0; }
.location-drawer-header {
    min-height: 72px;
    padding: 0 22px;
    border-bottom: 1px solid var(--olx-gray-brd);
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--olx-white);
}
.location-drawer-header h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--olx-dark);
    margin: 0;
}
.location-back {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--olx-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}
.location-back:hover { background: var(--olx-gray-bg); }
.location-back .olx-icon-svg { transform: rotate(180deg); }
.location-drawer-body {
    padding: 22px;
    overflow-y: auto;
}
.location-current-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--olx-dark);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}
.location-clear {
    color: var(--olx-dark);
    text-decoration: underline;
    font-size: 13px;
    font-weight: 700;
}
.location-current-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--olx-purple2);
    color: var(--olx-purple2);
    font-size: 13px;
    font-weight: 800;
    background: #fbf7ff;
    margin-bottom: 18px;
}
.location-separator {
    height: 1px;
    background: var(--olx-gray-brd);
    margin: 0 0 20px;
}
.location-label {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--olx-dark);
    margin-bottom: 10px;
}
.location-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--olx-gray-brd);
    border-radius: 10px;
    padding: 0 12px;
    height: 46px;
    background: var(--olx-white);
    margin-bottom: 14px;
}
.location-search-box:focus-within { border-color: var(--olx-purple2); }
.location-search-box span {
    display: inline-flex;
    color: var(--olx-gray-txt);
}
.location-search-box input {
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: var(--olx-dark);
    background: transparent;
}
.location-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
.location-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 10px;
    color: var(--olx-dark);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.location-option:hover {
    background: var(--olx-gray-bg);
    color: var(--olx-purple2);
}
.location-option.ativo {
    background: #f4eaff;
    color: var(--olx-purple2);
}
.location-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2f2f2;
    flex-shrink: 0;
}
.location-option span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.location-option strong {
    font-size: 14px;
    font-weight: 800;
}
.location-option small {
    font-size: 12px;
    color: var(--olx-gray-txt);
    margin-top: 2px;
}
@media (max-width: 768px) {
    .location-text small { display: none; }
    .location-text strong { max-width: 64px; }
    .location-drawer { width: 360px; }
}

/* ============================================================
   Drawer localização: busca de cidades com sugestões
   ============================================================ */
.location-city-results {
    margin-top: 10px;
}
.location-results-title {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 14px 0 7px;
}
.location-city-option {
    width: 100%;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    color: #222;
    margin-bottom: 8px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.location-city-option:hover {
    background: #faf7ff;
    border-color: #8a00e6;
    box-shadow: 0 4px 12px rgba(106, 13, 173, .08);
}
.location-city-option strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #222;
    line-height: 1.25;
}
.location-city-option small {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}
.location-loading,
.location-empty {
    font-size: 13px;
    color: #666;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f7f7;
    margin-top: 10px;
}

.banner-single-image {
    margin: 18px 0 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #5b009c;
    height: 272px;
}

.banner-image-link {
    display: block;
    width: 100%;
    height: 272px;
    text-decoration: none;
}

.banner-single-img {
    display: block;
    width: 100%;
    height: 272px;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: #5b009c;
}