/* =========================================================
   RESPONSIVO - TABLET
========================================================= */

@media (max-width: 1100px) {
    .home-products-grid,
    .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .header-content {
        grid-template-columns: 1fr;
        padding: 18px 0;
    }

    .home-hero-content {
        grid-template-columns: 1fr;
    }

    .home-hero-highlight {
        max-width: 520px;
    }

    .home-section-title {
        align-items: start;
        flex-direction: column;
    }

    .home-benefits-grid {
        grid-template-columns: 1fr;
    }

    .home-products-grid,
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail {
        grid-template-columns: 1fr;
    }

    .home-whatsapp-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RESPONSIVO - MOBILE
========================================================= */

@media (max-width: 620px) {
    body {
        background: #f8f6f1;
    }

    .container {
        width: calc(100% - 24px);
    }

    /* =====================================================
       TOPO MOBILE
    ===================================================== */

    .top-bar {
        font-size: 12px;
    }

    .top-bar-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3px;
        padding: 7px 0;
    }

    .main-header {
        position: sticky;
        top: 0;
        z-index: 20;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    .header-content {
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 14px 0;
        align-items: center;
    }

    .logo {
        min-width: 0;
    }

    .logo-main {
        font-size: 25px;
    }

    .logo-sub {
        font-size: 13px;
    }

    .cart-link {
        padding: 10px 12px;
        font-size: 0;
        min-width: 54px;
    }

    .cart-link::before {
        content: "🛒";
        font-size: 18px;
        vertical-align: middle;
    }

    .cart-link span {
        min-width: 22px;
        height: 22px;
        margin-left: 4px;
        font-size: 12px;
        vertical-align: middle;
    }

    .search-form {
        grid-column: 1 / -1;
        width: 100%;
        border-radius: 14px;
    }

    .search-form input {
        padding: 13px 14px;
        font-size: 14px;
    }

    .search-form button {
        padding: 0 15px;
        font-size: 13px;
    }

    .category-nav {
        position: sticky;
        top: 86px;
        z-index: 19;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .category-nav-content {
        gap: 10px;
        padding: 10px 0;
        scroll-snap-type: x mandatory;
    }

    .category-nav-content a {
        scroll-snap-align: start;
        background: #f7f5f0;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 9px 13px;
        font-size: 13px;
    }

    /* =====================================================
       HOME HERO MOBILE
    ===================================================== */

    .home-hero {
        padding: 28px 0 34px;
    }

    .home-hero-content {
        gap: 22px;
    }

    .home-hero-tag {
        font-size: 12px;
        padding: 7px 12px;
        margin-bottom: 12px;
    }

    .home-hero-text h1 {
        font-size: 32px;
        line-height: 1.06;
        letter-spacing: -0.8px;
    }

    .home-hero-text p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.55;
    }

    .home-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .home-hero-actions .btn {
        width: 100%;
        padding: 14px 18px;
    }

    .home-hero-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .home-hero-benefits div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border-radius: 15px;
    }

    .home-hero-benefits strong {
        margin-bottom: 0;
        font-size: 14px;
    }

    .home-hero-benefits span {
        font-size: 12px;
        text-align: right;
    }

    .highlight-card-main {
        min-height: auto;
        padding: 22px;
        border-radius: 22px;
    }

    .highlight-card-main h2 {
        font-size: 25px;
    }

    .highlight-card-main p {
        font-size: 14px;
    }

    .highlight-card-main a {
        width: 100%;
        justify-content: center;
        margin-top: 18px;
    }

    .highlight-card-small {
        position: static;
        margin-top: 12px;
        padding: 16px 18px;
        border-radius: 18px;
    }

    .highlight-card-small strong {
        font-size: 21px;
    }

    /* =====================================================
       HOME SEÇÕES MOBILE
    ===================================================== */

    .home-section {
        padding: 36px 0;
    }

    .home-section-title {
        gap: 8px;
        margin-bottom: 18px;
    }

    .home-section-title span {
        font-size: 12px;
    }

    .home-section-title h2 {
        font-size: 25px;
    }

    .home-section-title p {
        font-size: 14px;
    }

    /* =====================================================
       CATEGORIAS COMO CARROSSEL HORIZONTAL
    ===================================================== */

    .home-category-grid {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding: 2px 2px 10px;
        margin: 0 -2px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-category-grid::-webkit-scrollbar {
        display: none;
    }

    .home-category-card {
        min-width: 220px;
        min-height: 88px;
        padding: 16px;
        border-radius: 18px;
        scroll-snap-align: start;
    }

    .home-category-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
        font-size: 19px;
    }

    .home-category-card strong {
        font-size: 15px;
    }

    /* =====================================================
       BENEFÍCIOS MOBILE
    ===================================================== */

    .home-benefits-bar {
        padding: 24px 0;
    }

    .home-benefits-grid {
        gap: 18px;
    }

    .home-benefit-item strong {
        font-size: 15px;
    }

    .home-benefit-item span {
        font-size: 13px;
    }

    /* =====================================================
       PRODUTOS DA HOME COMO CARROSSEL HORIZONTAL
       Somente a home vira carrossel.
       A tela de categoria/busca continua em lista vertical.
    ===================================================== */

    .home-products-grid {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        padding: 2px 2px 14px;
        margin: 0 -2px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .home-products-grid::-webkit-scrollbar {
        display: none;
    }

    .home-product-card {
        min-width: 78%;
        max-width: 78%;
        border-radius: 20px;
        scroll-snap-align: start;
    }

    .home-product-image {
        height: 230px;
    }

    .home-product-image img {
        object-fit: contain;
        padding: 22px;
        background: #f3f4f6;
    }

    .home-product-info {
        padding: 16px;
    }

    .home-product-info h3 {
        font-size: 16px;
    }

    .home-product-info p {
        min-height: 0;
        font-size: 13px;
    }

    .home-current-price {
        font-size: 24px;
    }

    .home-pix-price {
        font-size: 14px;
    }

    .home-buy-button {
        padding: 15px 16px;
        border-radius: 14px;
        font-size: 15px;
    }

    /* =====================================================
       LISTAGEM DE CATEGORIA/BUSCA MOBILE
       Aqui continua vertical, porque é melhor para catálogo.
    ===================================================== */

    .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card {
        border-radius: 20px;
    }

    .product-image {
        height: 240px;
    }

    .product-info {
        padding: 16px;
    }

    .product-info h3 {
        font-size: 16px;
    }

    .product-description {
        min-height: 0;
        font-size: 13px;
    }

    .product-price {
        font-size: 24px;
    }

    .pix-price {
        font-size: 14px;
    }

    .btn-buy {
        padding: 15px 16px;
        border-radius: 14px;
        font-size: 15px;
    }

    /* =====================================================
       WHATSAPP MOBILE
    ===================================================== */

    .home-whatsapp-section {
        padding: 36px 0;
    }

    .home-whatsapp-box {
        padding: 24px;
        border-radius: 22px;
        gap: 18px;
    }

    .home-whatsapp-box h2 {
        font-size: 24px;
    }

    .home-whatsapp-box p {
        font-size: 14px;
    }

    .home-whatsapp-button {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 14px 18px;
    }

    /* =====================================================
       PÁGINAS INTERNAS MOBILE
    ===================================================== */

    .section {
        padding: 36px 0;
    }

    .section-title h2 {
        font-size: 25px;
    }

    .section-title p {
        font-size: 14px;
    }

    .product-detail {
        gap: 18px;
    }

    .product-detail-image {
        padding: 14px;
        border-radius: 20px;
    }

    .product-detail-info {
        padding: 22px;
        border-radius: 20px;
    }

    .product-detail-info h1 {
        font-size: 25px;
    }

    .product-price-large {
        font-size: 32px;
    }

    .buy-form {
        grid-template-columns: 1fr;
    }

    .buy-form input {
        width: 100%;
    }

    .cart-box {
        padding: 18px;
        border-radius: 20px;
    }

    .cart-item {
        flex-direction: column;
        gap: 10px;
    }

    .cart-item-right {
        text-align: left;
    }

    .cart-total {
        font-size: 21px;
    }

    .site-footer {
        padding: 34px 0;
        margin-top: 28px;
    }

    .footer-grid {
        gap: 18px;
    }
}

/* =========================================================
   RESPONSIVO - CELULARES PEQUENOS
========================================================= */

@media (max-width: 390px) {
    .container {
        width: calc(100% - 20px);
    }

    .logo-main {
        font-size: 23px;
    }

    .home-hero-text h1 {
        font-size: 29px;
    }

    .home-product-card {
        min-width: 84%;
        max-width: 84%;
    }

    .home-product-image {
        height: 210px;
    }

    .home-product-image img {
        object-fit: contain;
        padding: 20px;
        background: #f3f4f6;
    }

    .product-image {
        height: 220px;
    }

    .home-category-card {
        min-width: 205px;
    }

    .search-form button {
        padding: 0 12px;
    }
}