/* CRS MOBILE FINAL - estilo Loja Virtual */
@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #eeeeee !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    * {
        box-sizing: border-box !important;
    }

    img,
    iframe {
        max-width: 100% !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* TOPO PRETO */
    .top-line {
        background: #2b2b2b !important;
        border-top: 4px solid #00569b !important;
        border-bottom: 0 !important;
        min-height: 34px !important;
        padding: 0 !important;
        color: #ffffff !important;
    }

    .top-line .container {
        min-height: 34px !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .top-links {
        display: none !important;
    }

    .top-contact {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        color: #ffffff !important;
    }

    .top-contact span {
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* HEADER BRANCO COM LOGO AZUL */
    .main-header {
        background: #ffffff !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .main-header .container {
        height: 84px !important;
        display: grid !important;
        grid-template-columns: 58px 1fr 96px !important;
        align-items: center !important;
        padding: 0 16px !important;
        gap: 0 !important;
    }

    .main-header .container::before {
        content: "☰" !important;
        color: #00569b !important;
        font-size: 38px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .logo-box {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .logo-box a,
    .logo-box {
        text-decoration: none !important;
    }

    .site-logo {
        content: url("/assets/imagens/logoazul.png") !important;
        width: auto !important;
        max-width: 160px !important;
        max-height: 60px !important;
        object-fit: contain !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .main-header form,
    .main-header .search-box {
        display: none !important;
    }

    .cart-box {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 96px !important;
        max-width: 96px !important;
        height: 84px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 17px !important;
        color: #00569b !important;
    }

    .cart-box strong,
    .cart-box div,
    .cart-box a {
        display: none !important;
    }

    .cart-box::before {
        content: "🛒" !important;
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .cart-box::after {
        content: "👤" !important;
        font-size: 30px !important;
        line-height: 1 !important;
    }

    /* MENU AZUL PRINCIPAL */
    .main-menu {
        background: #00569b !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .main-menu .container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .main-menu a {
        min-height: 68px !important;
        padding: 8px 5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: #ffffff !important;
        background: #00569b !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.12 !important;
        text-decoration: none !important;
        white-space: normal !important;
        border: 0 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .main-menu a:first-child {
        display: none !important;
    }

    .main-menu a:nth-child(n+6) {
        display: none !important;
    }

    /* BANNER HORIZONTAL */
    .hero,
    .hero-full,
    .hero-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #eeeeee !important;
        overflow: hidden !important;
    }

    .hero-card,
    .banner-image,
    .hero-picture {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: block !important;
    }

    .hero img,
    .banner-image img,
    .hero-picture img {
        content: url("/assets/imagens/banner-mobile.png") !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        border-radius: 0 !important;
        display: block !important;
    }

    /* CATEGORIAS GRANDES */
    .quick-categories {
        background: #eeeeee !important;
        padding: 36px 4px 8px !important;
    }

    .quick-categories::before {
        content: "MÁQUINAS DE SORVETE EXPRESSO" !important;
        display: block !important;
        color: #00569b !important;
        text-align: center !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        letter-spacing: .4px !important;
        margin: 0 0 36px !important;
        text-transform: uppercase !important;
    }

    .quick-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .quick-card {
        width: 100% !important;
        min-height: 145px !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 22px 12px !important;
        box-shadow: none !important;
        background:
            linear-gradient(90deg, rgba(0,45,80,.90), rgba(0,86,155,.45)),
            url("/assets/imagens/banner-mobile.png") center center / cover no-repeat !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .quick-card strong {
        color: #ffffff !important;
        font-size: 25px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: .3px !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.55) !important;
        margin: 0 0 15px !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .quick-card span {
        background: #00569b !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        border: 0 !important;
        padding: 12px 26px !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        box-shadow: 0 3px 8px rgba(0,0,0,.22) !important;
    }

    /* BENEFÍCIOS 2 COLUNAS */
    .benefits {
        background: #eeeeee !important;
        padding: 18px 10px 34px !important;
    }

    .benefits-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .benefit {
        background: #ffffff !important;
        min-height: 82px !important;
        border: 1px solid #d8d8d8 !important;
        border-radius: 0 !important;
        padding: 12px 8px !important;
        display: grid !important;
        grid-template-columns: 42px 1fr !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .benefit-icon {
        background: transparent !important;
        color: #00569b !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 33px !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .benefit strong {
        color: #00569b !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        line-height: 1.05 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .benefit span {
        color: #00569b !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        margin-top: 3px !important;
    }

    /* CONTEÚDO */
    .content-area,
    .page-wrap {
        background: #eeeeee !important;
        padding: 0 0 24px !important;
    }

    .content-grid,
    .page-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    aside {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .sidebar-box {
        background: #eeeeee !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 0 22px !important;
        overflow: hidden !important;
    }

    .sidebar-title {
        background: #00569b !important;
        color: #ffffff !important;
        padding: 17px 18px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        border-radius: 4px 4px 0 0 !important;
        text-transform: uppercase !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .sidebar-content {
        background: #eeeeee !important;
        padding: 18px 26px !important;
    }

    .category-list a {
        color: #444444 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #d8d8d8 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .login-input {
        height: 52px !important;
        border-radius: 0 !important;
        border: 1px solid #cccccc !important;
        background: #ffffff !important;
        font-size: 17px !important;
        padding: 0 14px !important;
        margin-bottom: 14px !important;
    }

    .small-btn {
        height: 52px !important;
        background: #00569b !important;
        border: 0 !important;
        border-radius: 7px !important;
        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 900 !important;
    }

    .section-title {
        background: transparent !important;
        border: 0 !important;
        margin: 28px 0 20px !important;
        padding: 0 18px !important;
    }

    .section-title h2 {
        background: transparent !important;
        color: #00569b !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        font-family: Arial, Helvetica, sans-serif !important;
        border-radius: 0 !important;
    }

    /* PRODUTOS 2 COLUNAS */
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0 12px !important;
        width: 100% !important;
    }

    .product-card {
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }

    .product-image {
        height: 190px !important;
        background: #ffffff !important;
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
    }

    .product-image img {
        max-width: 100% !important;
        max-height: 170px !important;
        object-fit: contain !important;
    }

    .product-info {
        padding: 10px 9px 18px !important;
        text-align: center !important;
    }

    .product-name {
        color: #1e1e1e !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.22 !important;
        text-transform: uppercase !important;
        min-height: 70px !important;
        margin: 0 0 14px !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .product-price {
        color: #00569b !important;
        font-size: 21px !important;
        font-weight: 900 !important;
        margin: 14px 0 0 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .product-buttons {
        display: none !important;
    }

    /* MAPA */
    .map-section {
        background: #eeeeee !important;
        padding: 22px 0 0 !important;
        margin: 0 !important;
    }

    .map-title {
        display: none !important;
    }

    .map-frame {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .map-frame iframe {
        width: 100% !important;
        height: 330px !important;
        display: block !important;
    }

    /* FOOTER */
    .footer-blue,
    .crs-footer-new,
    .crs-footer-pro {
        background: #004b87 !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .footer-grid-pro,
    .crs-footer-new-inner,
    .crs-footer-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 28px 18px 24px !important;
        text-align: left !important;
    }

    .footer-logo,
    .crs-footer-logo {
        content: url("/assets/imagens/logoazul.png") !important;
        background: #ffffff !important;
        border-radius: 4px !important;
        padding: 8px 10px !important;
        max-width: 190px !important;
        margin: 0 0 18px !important;
        display: block !important;
    }

    .footer-blue p,
    .footer-blue a,
    .crs-footer-new p,
    .crs-footer-new a,
    .crs-footer-pro p,
    .crs-footer-pro a {
        color: #ffffff !important;
        text-align: left !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .footer-blue strong,
    .crs-footer-new h4,
    .crs-footer-pro h4 {
        color: rgba(255,255,255,.62) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin: 0 0 22px !important;
        text-align: left !important;
    }

    .footer-shipping-logos,
    .footer-payment-logos,
    .payment-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 18px 24px !important;
        margin-top: 18px !important;
    }

    .copyright,
    .crs-footer-new-copy {
        background: #808080 !important;
        color: #ffffff !important;
        text-align: center !important;
        padding: 14px 18px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}