/* =============================================================
   Vitrine Sorriso — Desktop Marketplace Theme
   Arquivo: css/vitrine-desktop-marketplace.css
   Versão: 20260604-2
   ─────────────────────────────────────────────────────────────
   REGRA ABSOLUTA: TODAS as regras de layout usam min-width
   ≥ 1024px. Nenhuma linha altera o mobile.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   BLOCOS INSTITUCIONAIS — ocultar (global, sem media query)
   Seletores diretos (sem ancestral .page-home) para máxima
   confiabilidade, independente de nesting.
   ───────────────────────────────────────────────────────────── */
.home-quick-benefit,
.home-reservas-card,
.home-how-it-works,
.how-it-works-section,
.home-support-sections,
.vs-how-it-works,
.vs-local-callout,
/* seletores com ancestral (fallback) */
.page-home .home-quick-benefit,
.page-home .home-reservas-card,
.page-home .vs-how-it-works,
.page-home .vs-local-callout,
.page-home section[aria-label="Como funciona"],
.page-home section[aria-label="Minhas reservas"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ═════════════════════════════════════════════════════════════
   1. CABEÇALHO DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .market-header {
        background: #071D33 !important;
        box-shadow: 0 4px 22px rgba(15, 23, 42, 0.18) !important;
    }

    /* container alinhado ao grid de 1360px */
    .header-top .container,
    .header-top__inner.container {
        max-width: 1360px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .header-top {
        padding: 0 !important;
    }

    /* grade de 3 colunas: marca | busca | ações */
    .header-top__inner {
        display: grid !important;
        grid-template-columns: 230px minmax(0, 1fr) 270px !important;
        align-items: center !important;
        gap: 20px !important;
        min-height: 88px !important;
        max-height: 88px !important;
    }

    /* hambúrguer invisível no desktop — ocupa a 1.ª célula
       com display:none, o grid salta direto para a 2.ª */
    .mobile-menu-toggle {
        display: none !important;
    }

    /* ── coluna 1: logo + localização ─────────────────────── */
    .header-brand-stack {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .header-logo {
        min-width: auto !important;
        width: auto !important;
    }

    .header-logo a {
        display: flex !important;
        align-items: center !important;
    }

    .header-logo img {
        max-height: 58px !important;
        max-width: 190px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .header-location-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 28px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #A7F3D0 !important;
        white-space: nowrap !important;
    }

    /* ── coluna 2: busca ───────────────────────────────────── */
    .header-search {
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
    }

    .header-mid {
        display: none !important; /* busca mobile oculta no desktop */
    }

    .header-search-form {
        height: 56px !important;
        min-height: 56px !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        border: none !important;
        box-shadow: 0 8px 22px rgba(2, 8, 23, 0.14) !important;
        padding: 6px 8px 6px 48px !important;
    }

    .header-search-form > i.fa-search {
        left: 18px !important;
        font-size: 17px !important;
        color: #94A3B8 !important;
    }

    .header-search-form input[type="text"] {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #0F172A !important;
        height: 44px !important;
    }

    .header-search-form button {
        width: 50px !important;
        height: 44px !important;
        border-radius: 14px !important;
        background: #16A34A !important;
        margin-right: 0 !important;
    }

    .header-search-form button:hover {
        background: #15803D !important;
        transform: none !important;
    }

    .header-search-form button i {
        color: #FFFFFF !important;
        font-size: 16px !important;
    }

    /* ── coluna 3: login + carrinho ────────────────────────── */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
    }

    .header-actions .action-link {
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .header-login-link {
        min-width: auto !important;
        padding: 0 14px !important;
        gap: 8px !important;
    }

    .header-login-link span {
        display: inline !important;
        font-size: 13px !important;
    }

    .cart-link {
        min-width: 80px !important;
        background: #16A34A !important;
        border-color: #16A34A !important;
        color: #FFFFFF !important;
        justify-content: space-between !important;
    }

    .cart-link:hover,
    .cart-link:focus {
        background: #15803D !important;
        border-color: #15803D !important;
        color: #FFFFFF !important;
    }

    .cart-link .cart-count {
        background: #FFFFFF !important;
        color: #0F172A !important;
    }

} /* end min-width: 1024px — cabeçalho */


/* ═════════════════════════════════════════════════════════════
   2. BARRA DE NAVEGAÇÃO DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .header-nav {
        display: block !important;
        background: #FFFFFF !important;
        border-top: 1px solid #E2E8F0 !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .nav-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        max-width: 1360px !important;
        margin: 0 auto !important;
        padding: 9px 24px !important;
        gap: 8px !important;
        scrollbar-width: none !important;
    }

    .nav-pill {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        color: #0F172A !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: background 0.16s ease, border-color 0.16s ease,
                    color 0.16s ease, transform 0.16s ease !important;
    }

    .nav-pill:hover,
    .nav-pill:focus {
        background: #F0FDF4 !important;
        border-color: #86EFAC !important;
        color: #15803D !important;
        transform: translateY(-1px) !important;
        text-decoration: none !important;
    }

    .nav-pill i {
        font-size: 14px !important;
    }

} /* end min-width: 1024px — navegação */


/* ═════════════════════════════════════════════════════════════
   3. CONTAINER GLOBAL E FUNDO DA HOME
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .page-home {
        background: #F3F6FB !important;
    }

    /* max-width unificado em todas as seções */
    .home-first-fold .container,
    .home-benefits-strip .container,
    .home-stores-highlight .container,
    .product-section .container,
    .home-sponsored-showcase .container,
    .home-products-grid-section .container {
        max-width: 1360px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

} /* end min-width: 1024px — container */


/* ═════════════════════════════════════════════════════════════
   4. HERO / PRIMEIRA DOBRA
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .home-first-fold {
        padding: 22px 0 0 !important;
        background: transparent !important;
    }

    .home-first-fold .container {
        max-width: 1360px !important;
    }

    .home-first-fold__grid {
        display: grid !important;
        grid-template-columns: 370px minmax(0, 1fr) !important;
        gap: 22px !important;
        align-items: stretch !important;
    }

    /* coluna esquerda: busca */
    .home-search-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .home-search-form {
        min-height: 62px !important;
        height: 62px !important;
        border-radius: 20px !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10) !important;
        padding: 7px 8px 7px 50px !important;
        background: #FFFFFF !important;
    }

    .home-search-form > i {
        left: 19px !important;
        font-size: 18px !important;
        color: #94A3B8 !important;
    }

    .home-search-form input {
        font-size: 16px !important;
        font-weight: 700 !important;
        height: 48px !important;
    }

    .home-search-form button {
        width: 50px !important;
        height: 48px !important;
        border-radius: 16px !important;
        background: #16A34A !important;
    }

    .home-search-form button i {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    /* coluna direita: hero banner */
    .home-main-hero {
        display: block !important;
        min-height: 300px !important;
        height: 100% !important;
        border-radius: 26px !important;
        background:
            radial-gradient(circle at 84% 18%, rgba(34, 197, 94, 0.36), transparent 28%),
            linear-gradient(135deg, #071D33 0%, #0B2E59 58%, #0E7A33 100%) !important;
        box-shadow: 0 20px 44px rgba(8, 33, 63, 0.22) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .home-main-hero__content {
        padding: 32px 36px !important;
        max-width: 680px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .home-main-hero h1,
    .home-main-hero .home-hero-title {
        font-size: 42px !important;
        line-height: 1.04 !important;
        letter-spacing: -1px !important;
        color: #FFFFFF !important;
        margin-bottom: 12px !important;
    }

    .home-main-hero p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        max-width: 500px !important;
        color: #C7DCF2 !important;
    }

    .home-main-hero__eyebrow {
        display: none !important; /* remove badge — fica mais clean */
    }

    .home-main-hero__actions {
        margin-top: 22px !important;
        display: flex !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    .home-hero-cta,
    .home-hero-secondary {
        width: auto !important;
        min-height: 46px !important;
        padding: 0 18px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    .home-hero-cta {
        background: #16B43B !important;
        color: #FFFFFF !important;
        box-shadow: 0 12px 24px rgba(22, 180, 59, 0.26) !important;
    }

    /* visual do hero ocultado — evita imagem gigante/transparente */
    .home-main-hero__visual {
        display: none !important;
    }

} /* end min-width: 1024px — hero */


/* ═════════════════════════════════════════════════════════════
   5. FAIXA DE BENEFÍCIOS
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .home-benefits-strip {
        max-width: 1360px !important;
        margin: 18px auto 0 !important;
        padding: 0 24px !important;
    }

    .home-benefits-strip .container {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
        max-width: none !important;
    }

    .home-benefit-card {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .home-benefit-card i {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
        background: #DCFCE7 !important;
        color: #16A34A !important;
        font-size: 17px !important;
        flex: 0 0 40px !important;
    }

    .home-benefit-card strong {
        font-size: 14px !important;
        color: #0F172A !important;
    }

    .home-benefit-card span {
        font-size: 12px !important;
        color: #64748B !important;
    }

} /* end min-width: 1024px — benefícios */


/* ═════════════════════════════════════════════════════════════
   6. BANNERS DO MARKETING HOME (vs-news-carousel-section)
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* exibe a seção no desktop (por padrão fica display:none) */
    .vs-news-carousel-section {
        display: block !important;
        background: transparent !important;
        padding: 18px 0 0 !important;
        overflow: hidden !important;
    }

    .vs-news-carousel {
        max-width: 1360px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        padding: 0 24px !important;
    }

    .vs-news-track {
        display: flex !important;
        gap: 16px !important;
        padding: 0 0 4px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        transform: none !important; /* reseta JS do mobile */
    }

    .vs-news-track::-webkit-scrollbar {
        display: none !important;
    }

    .vs-news-slide {
        flex: 0 0 calc(50% - 8px) !important;
        width: calc(50% - 8px) !important;
        min-width: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }

    .vs-news-card {
        height: 240px !important;
        border-radius: 20px !important;
        background-size: cover !important;
        background-position: center !important;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12) !important;
        position: relative !important;
    }

    /* sem máscara/texto sobre as imagens no desktop */
    .vs-news-overlay,
    .vs-news-content {
        display: none !important;
    }

    /* dots do carrossel desnecessários no desktop */
    .vs-news-dots {
        display: none !important;
    }

} /* end min-width: 1024px — banners */


/* ═════════════════════════════════════════════════════════════
   7. CATEGORIAS DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .vs-home-categories-v2 {
        max-width: 1360px !important;
        margin: 24px auto 0 !important;
        padding: 0 24px !important;
    }

    .vs-home-categories-v2__container {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 24px !important;
        padding: 22px 20px !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
        width: auto !important;
    }

    /* título visível no desktop */
    .vs-home-categories-v2__head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 16px !important;
        min-height: auto !important;
    }

    .vs-home-categories-v2__head h2,
    #vs-home-categories-title {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        overflow: visible !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 22px !important;
        font-weight: 950 !important;
        color: #0F172A !important;
        letter-spacing: -0.3px !important;
        display: block !important;
    }

    .vs-home-categories-v2__all {
        color: #16A34A !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
        margin-left: auto !important;
    }

    /* grade de 6 colunas */
    .vs-home-categories-v2__rail {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .vs-home-categories-v2__card {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 148px !important;
        max-height: none !important;
        height: auto !important;
        padding: 16px 10px !important;
        border-radius: 18px !important;
        background: #F8FAFC !important;
        border: 1px solid #E8EEF5 !important;
        transition: background 0.18s ease, border-color 0.18s ease,
                    transform 0.18s ease, box-shadow 0.18s ease !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        scroll-snap-align: none !important;
        text-decoration: none !important;
    }

    .vs-home-categories-v2__card:hover {
        background: #F0FDF4 !important;
        border-color: #86EFAC !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 26px rgba(22, 163, 74, 0.12) !important;
    }

    .vs-home-categories-v2__image {
        width: 74px !important;
        height: 74px !important;
        max-width: 74px !important;
        max-height: 74px !important;
        border-radius: 18px !important;
        background: #EEF4FF !important;
        border: 1px solid #E2E8F0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .vs-home-categories-v2__image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 74px !important;
        max-height: 74px !important;
        object-fit: cover !important;
        padding: 0 !important;
    }

    .home-category-icon-fallback {
        width: 74px !important;
        height: 74px !important;
        border-radius: 18px !important;
        background: #EEF4FF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 28px !important;
        color: #1e40af !important;
        margin: 0 auto !important;
    }

    .vs-home-categories-v2__card strong {
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        color: #0F172A !important;
        text-align: center !important;
        max-width: 100% !important;
        word-break: normal !important;
        display: block !important;
    }

} /* end min-width: 1024px — categorias */


/* ═════════════════════════════════════════════════════════════
   8. LOJAS EM DESTAQUE
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .home-stores-highlight {
        max-width: 1360px !important;
        margin: 24px auto 0 !important;
        padding: 0 24px !important;
    }

    .home-stores-highlight .container {
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 24px !important;
        padding: 22px 20px !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07) !important;
        max-width: none !important;
    }

    .marketplace-block-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
    }

    .marketplace-block-title {
        font-size: 22px !important;
        font-weight: 950 !important;
        color: #0F172A !important;
        letter-spacing: -0.3px !important;
        margin: 0 !important;
    }

    .marketplace-block-subtitle {
        color: #64748B !important;
        font-size: 13px !important;
        margin-top: 3px !important;
    }

    /* grade de 4 lojas por linha */
    .home-stores-row {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .home-store-card {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
        min-height: 106px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 15px !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 18px !important;
        background: #F8FAFC !important;
        color: #0F172A !important;
        text-decoration: none !important;
        transition: background 0.18s ease, border-color 0.18s ease,
                    transform 0.18s ease, box-shadow 0.18s ease !important;
    }

    .home-store-card:hover {
        transform: translateY(-3px) !important;
        background: #FFFFFF !important;
        border-color: #86EFAC !important;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10) !important;
        color: #0F172A !important;
        text-decoration: none !important;
    }

    .home-store-card img {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        border-radius: 16px !important;
        object-fit: cover !important;
        background: #EEF2F7 !important;
    }

    .home-store-card__initials {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        border-radius: 16px !important;
        background: #0B223D !important;
        color: #FFFFFF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        flex: 0 0 58px !important;
    }

    .home-store-card strong {
        display: block !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        color: #0F172A !important;
        margin: 0 0 3px !important;
    }

    .home-store-card span {
        display: block !important;
        font-size: 12px !important;
        color: #16A34A !important;
        font-weight: 800 !important;
    }

    .home-store-card__badges {
        margin-top: 6px !important;
        display: flex !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }

    .home-store-card__badges em {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-style: normal !important;
        font-size: 10px !important;
        padding: 3px 7px !important;
        border-radius: 999px !important;
        background: #ECFDF5 !important;
        color: #166534 !important;
        font-weight: 900 !important;
    }

    .home-store-card__cta {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-top: 8px !important;
        color: #0E8F2E !important;
        font-size: 12px !important;
        font-weight: 900 !important;
    }

    /* link "Ver todas" */
    .section-link {
        color: #16A34A !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .section-link:hover {
        color: #15803D !important;
        text-decoration: none !important;
    }

} /* end min-width: 1024px — lojas */


/* ═════════════════════════════════════════════════════════════
   9. DESTAQUES PATROCINADOS — COVERFLOW → GRID NO DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .home-sponsored-showcase {
        max-width: 1360px !important;
        margin: 24px auto 0 !important;
        padding: 0 24px !important;
    }

    .home-sponsored-showcase > .container {
        max-width: none !important;
        padding: 0 !important;
    }

    .home-sponsored-showcase .section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }

    .home-sponsored-showcase .section-title {
        font-size: 22px !important;
        font-weight: 950 !important;
        color: #0F172A !important;
        letter-spacing: -0.3px !important;
        margin: 0 !important;
    }

    .home-sponsored-showcase .section-subtitle {
        display: block !important;
        font-size: 13px !important;
        color: #64748B !important;
    }

    /* desmonta o coverflow e vira grid */
    .sponsored-carousel-3d {
        overflow: visible !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .sponsored-carousel-viewport {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .sponsored-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
        transform: none !important;
        transition: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    /* todos os slides visíveis no desktop */
    .sponsored-slide {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        left: auto !important;
        top: auto !important;
        filter: none !important;
        z-index: auto !important;
        display: block !important;
    }

    .sponsored-slide.is-hidden,
    .sponsored-slide.is-prev,
    .sponsored-slide.is-next,
    .sponsored-slide.is-active {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        filter: none !important;
        display: block !important;
    }

    .sponsored-carousel-dots {
        display: none !important;
    }

    /* fallback slides sem imagem: fundo azul em vez de quadrado transparente */
    .sponsored-card .default-image-wrap,
    .sponsored-card-default .default-image-wrap {
        background: linear-gradient(135deg, #071D33 0%, #0B2E59 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* imagem transparente/checkerboard dentro dos slides: ocultar */
    .sponsored-card img[src="sistema/img/logo.png"],
    .sponsored-card img[src$="logo.png"],
    .sponsored-card img[src$="sem-foto.png"] {
        opacity: 0.15 !important;
        mix-blend-mode: screen !important;
    }

    /* card dentro do slide */
    .sponsored-card {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 310px !important;
        border-radius: 18px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
        overflow: hidden !important;
        color: #0F172A !important;
        text-decoration: none !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease,
                    border-color 0.18s ease !important;
    }

    .sponsored-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
        border-color: #86EFAC !important;
    }

    .sponsored-card .card-image,
    .sponsored-card .product-image-wrap,
    .sponsored-card .default-image-wrap {
        position: relative !important;
        padding-top: 78% !important;
        height: auto !important;
        max-height: none !important;
        background: #F8FAFC !important;
        overflow: hidden !important;
        flex: none !important;
    }

    .sponsored-card .card-image img,
    .sponsored-card .product-image-wrap img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 8px !important;
    }

    .sponsored-card .card-body,
    .sponsored-card .product-card-content,
    .sponsored-card .default-card-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 12px 14px !important;
        gap: 5px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .sponsored-card .card-store {
        font-size: 11px !important;
        color: #64748B !important;
        font-weight: 800 !important;
        margin: 0 !important;
    }

    .sponsored-card .card-title,
    .sponsored-card .product-title {
        font-size: 13px !important;
        line-height: 1.26 !important;
        min-height: 33px !important;
        max-height: 33px !important;
        font-weight: 900 !important;
        color: #0F172A !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .sponsored-card .price-new {
        font-size: 17px !important;
        color: #16A34A !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .sponsored-card .price-old {
        font-size: 11px !important;
        color: #94A3B8 !important;
    }

    .sponsored-card .pickup-badge,
    .sponsored-card .sponsored-label {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .sponsored-card .card-button,
    .sponsored-card .reserve-button,
    .sponsored-card .default-button {
        margin-top: auto !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: #16A34A !important;
        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border: 0 !important;
    }

    .sponsored-card .card-button:hover,
    .sponsored-card .reserve-button:hover {
        background: #15803D !important;
    }

} /* end min-width: 1024px — destaques patrocinados */

/* 5 colunas em telas ≥ 1360px */
@media (min-width: 1360px) {
    .sponsored-carousel-track {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}


/* ═════════════════════════════════════════════════════════════
   10. GRID DE PRODUTOS COMUNS
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .home-products-grid-section {
        max-width: 1360px !important;
        margin: 24px auto 0 !important;
        padding: 0 24px !important;
    }

    .home-products-grid-section > .container {
        max-width: none !important;
        padding: 0 !important;
    }

    .home-products-grid-section .section-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }

    .home-products-grid-section .section-title {
        font-size: 22px !important;
        font-weight: 950 !important;
        color: #0F172A !important;
        letter-spacing: -0.3px !important;
        margin: 0 !important;
    }

    .regular-offers-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin: 14px 0 12px !important;
        padding: 0 !important;
    }

    .regular-offers-title {
        font-size: 17px !important;
        font-weight: 900 !important;
        color: #0F172A !important;
    }

    /* abas Novidades / Mais vendidos */
    .section-tabs {
        display: flex !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .product-section .tab-chip {
        height: 38px !important;
        border-radius: 999px !important;
        padding: 0 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        transition: background 0.16s ease, border-color 0.16s ease,
                    color 0.16s ease !important;
    }

    .product-section .tab-chip.active {
        background: #0F172A !important;
        border-color: #0F172A !important;
        color: #FFFFFF !important;
    }

    .product-section .tab-chip:hover:not(.active) {
        background: #F0FDF4 !important;
        border-color: #86EFAC !important;
        color: #15803D !important;
    }

    /* grid 4 colunas — seletor pelo ID para máxima especificidade */
    #listar_produtos,
    .page-home #listar_produtos,
    .page-home #listar_produtos.product-grid,
    .page-home .product-grid.products-ml-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* card de produto */
    .page-home .product-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        border: 1px solid #E2E8F0 !important;
        background: #FFFFFF !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease,
                    border-color 0.18s ease !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .page-home .product-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12) !important;
        border-color: #86EFAC !important;
    }

    .page-home .card-image {
        position: relative !important;
        padding-top: 82% !important;
        background: #F8FAFC !important;
        overflow: hidden !important;
        flex: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .page-home .card-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 8px !important;
        background: #F8FAFC !important;
    }

    .page-home .card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 12px 14px !important;
        gap: 5px !important;
        min-height: 0 !important;
        height: auto !important;
        position: static !important;
    }

    .page-home .card-store {
        font-size: 11px !important;
        color: #64748B !important;
        font-weight: 800 !important;
        margin: 0 !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .page-home .card-title {
        font-size: 13px !important;
        line-height: 1.26 !important;
        min-height: 33px !important;
        max-height: 33px !important;
        overflow: hidden !important;
        font-weight: 900 !important;
        color: #0F172A !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        text-transform: none !important;
        margin: 0 !important;
    }

    .page-home .price-new {
        font-size: 17px !important;
        line-height: 1 !important;
        color: #16A34A !important;
        font-weight: 950 !important;
    }

    .page-home .price-old {
        font-size: 11px !important;
        color: #94A3B8 !important;
    }

    .page-home .product-urgency-row {
        display: flex !important;
        margin: 3px 0 !important;
    }

    .page-home .pickup-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        width: max-content !important;
        max-width: 100% !important;
        font-size: 10px !important;
        padding: 4px 8px !important;
        border-radius: 999px !important;
    }

    .page-home .sale-badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }

    .page-home .card-button {
        margin-top: auto !important;
        width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: #0F172A !important;
        color: #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        border: 0 !important;
        cursor: pointer !important;
    }

    .page-home .card-button:hover {
        background: #16A34A !important;
        color: #FFFFFF !important;
    }

} /* end min-width: 1024px — produtos comuns */

/* 5 colunas em telas ≥ 1360px */
@media (min-width: 1360px) {
    #listar_produtos,
    .page-home #listar_produtos.product-grid,
    .page-home .product-grid.products-ml-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}


/* ═════════════════════════════════════════════════════════════
   11. ESPAÇAMENTOS E CORREÇÕES GERAIS DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* padding-bottom da home (sem menu fixo inferior no desktop) */
    body.page-is-home,
    body.res {
        padding-bottom: 0 !important;
    }

    /* rodapé ocupa o lugar do menu mobile */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* paginação / load more */
    .pager {
        margin-top: 20px !important;
        margin-bottom: 32px !important;
    }

    .load-more-products {
        height: 48px !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;
        border: 1px solid #16A34A !important;
        color: #16A34A !important;
        font-weight: 900 !important;
        padding: 0 32px !important;
    }

    .load-more-products:hover {
        background: #F0FDF4 !important;
    }

    /* ── Hero: remove qualquer espaço vazio do eyebrow/badge ─── */
    .home-main-hero__eyebrow {
        display: none !important;
    }

    /* ── Garante que o hero ocupa altura razoável ────────────── */
    .home-main-hero {
        min-height: 280px !important;
    }

    /* ── Oculta elementos de mobile que persistem em desktop ─── */
    .vs-news-carousel-section .vs-news-dots {
        display: none !important;
    }

    /* ── Produto card: imagem não ultrapassa proporção ────────── */
    .page-home .card-image {
        overflow: hidden !important;
    }

    /* ── Evita espaço vazio de elementos ocultos ─────────────── */
    .home-quick-benefit + *,
    .home-reservas-card + * {
        margin-top: 0 !important;
    }

    /* ── Oculta search nas páginas internas (não home) ─────────
       A busca mobile `.header-mid` só aparece em páginas internas,
       o `.header-search.desktop-only` resolve no desktop. */
    .header-mid {
        display: none !important;
    }

} /* end min-width: 1024px — espaçamentos */


/* ═════════════════════════════════════════════════════════════
   12. RODAPÉ DESKTOP
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .footer-container.typefooter-1 {
        background: #071D33 !important;
        color: #E2E8F0 !important;
        margin-top: 48px !important;
    }

    .typefooter-1 .footer-top {
        display: none !important;
    }

    .typefooter-1 .footer-middle {
        padding: 38px 0 24px !important;
    }

    .typefooter-1 .footer-middle .container {
        max-width: 1360px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    /* 4 colunas no rodapé */
    .typefooter-1 .footer-middle .row {
        display: grid !important;
        grid-template-columns: 1.5fr 0.8fr 0.8fr 1fr !important;
        gap: 32px !important;
        align-items: start !important;
    }

    /* remove floats do Bootstrap */
    .typefooter-1 .footer-middle .row::before,
    .typefooter-1 .footer-middle .row::after {
        display: none !important;
    }

    .typefooter-1 .footer-middle [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* marca */
    .footer-brand-title {
        display: block !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        color: #FFFFFF !important;
        margin-bottom: 5px !important;
    }

    .footer-brand-subtitle {
        display: block !important;
        color: #86EFAC !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        margin-bottom: 14px !important;
    }

    /* contato */
    .typefooter-1 .infos-footer ul.menu li {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 5px !important;
        color: #94A3B8 !important;
    }

    /* títulos de coluna */
    .typefooter-1 .modtitle {
        color: #FFFFFF !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        margin: 0 0 12px !important;
        padding: 0 0 8px !important;
        border-bottom: 2px solid #16A34A !important;
        display: inline-block !important;
    }

    /* links do rodapé */
    .typefooter-1 ul.menu {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .typefooter-1 ul.menu li {
        margin-bottom: 8px !important;
        color: #94A3B8 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .typefooter-1 ul.menu li a {
        color: #94A3B8 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        transition: color 0.16s ease !important;
    }

    .typefooter-1 ul.menu li a:hover {
        color: #22C55E !important;
    }

    .typefooter-1 ul.menu li.phone,
    .typefooter-1 ul.menu li.mail {
        color: #CBD5E1 !important;
    }

    .typefooter-1 ul.menu li.mail a {
        color: #CBD5E1 !important;
    }

    /* barra de copyright */
    .typefooter-1 .footer-bottom {
        background: #031225 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 14px 0 !important;
    }

    .typefooter-1 .footer-bottom .container {
        max-width: 1360px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .typefooter-1 .copyright {
        color: #64748B !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

} /* end min-width: 1024px — rodapé */