/* =========================================================
   MOBILE OPTIMIZATIONS — Facilitá Utilidades
   Refinamentos pra screens < 768px, inspirado no Magazine Luiza mobile
   Carregado em TODAS as páginas (sempre depois dos CSS específicos)
   ========================================================= */

/* ===============================================================
   OVERRIDE FORTE: todos os grids do WC viram 1 coluna no mobile.
   Usa seletores com alta especificidade pra vencer regras desktop.
   =============================================================== */
@media (max-width: 900px) {
    body.woocommerce-cart .woocommerce,
    body.woocommerce-checkout form.checkout,
    body.woocommerce-account .woocommerce {
        grid-template-columns: 1fr !important;
        grid-auto-columns: 0 !important;
    }
    /* Força TODOS os filhos do grid pra coluna 1 */
    body.woocommerce-cart .woocommerce > *,
    body.woocommerce-checkout form.checkout > *,
    body.woocommerce-account .woocommerce > *,
    body.woocommerce-checkout form.checkout > div.order-review-wrapper,
    body.woocommerce-checkout form.checkout > .order-review-wrapper,
    body.woocommerce-cart .woocommerce > .cart-collaterals {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        position: static !important;
    }
}

/* =========================================================
   HEADER MOBILE (compacto)
   ========================================================= */
@media (max-width: 768px) {
    /* Container do header com respiro lateral maior (Magalu mobile usa ~20px).
       Usa especificidade alta pra vencer regras .facilita-container genéricas. */
    .facilita-header,
    .facilita-header__main {
        padding: 0 !important;
        overflow: visible !important;
    }
    /* NÃO zerar o padding do container do row (ele É o container) */
    .facilita-header .facilita-container.facilita-header__row,
    .facilita-header__main .facilita-container.facilita-header__row,
    .facilita-header .facilita-header__row,
    body .facilita-header__row {
        padding: 12px 20px 16px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    /* Departamentos container — padding lateral */
    .facilita-header .facilita-container.facilita-header__departments-row,
    .facilita-header__departments .facilita-container {
        padding: 0 12px !important;
        max-width: 100% !important;
    }

    /* Logo menor */
    .facilita-header__logo-text {
        font-size: 1rem !important;
        max-width: 140px;
        display: inline-block;
        line-height: 1.1;
    }

    /* Ícones: SEM labels, mais compactos e com margem da borda */
    .facilita-header__icons {
        gap: 4px !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }
    .facilita-header__icon {
        padding: 6px !important;
        min-width: 36px !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }
    .facilita-header__icon-label {
        display: none !important;
    }
    .facilita-header__icon svg {
        width: 22px !important;
        height: 22px !important;
    }
    .facilita-header__cart-count {
        top: -2px !important;
        right: -4px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 0.65rem !important;
    }
    /* Barra de departamentos também com respiro lateral */
    .facilita-header__departments-row {
        padding: 0 !important;
    }
    .facilita-header__deps-toggle {
        padding: 10px 14px !important;
    }
    .facilita-header__deps-menu > li > a {
        padding: 10px 14px !important;
    }
    /* Busca também respira dos lados (herda padding do row) */
    .facilita-header__search {
        margin: 0 !important;
    }

    /* Busca: ocupar largura toda, espaçamento antes dos departamentos */
    .facilita-header__search {
        order: 10 !important;
        flex: 1 1 100% !important;
        max-width: none !important;
        margin-top: 4px;
        margin-bottom: 2px;
    }
    .facilita-header__search-input {
        padding: 11px 16px !important;
        font-size: 0.9rem !important;
    }
    .facilita-header__search-btn {
        width: 44px !important;
    }

    /* Sem separador branco — header único em vermelho */
    .facilita-header__departments {
        margin-top: 0;
        border-top: none;
    }

    /* Departamentos: scroll horizontal e botão compacto */
    .facilita-header__departments {
        position: relative;
    }
    .facilita-header__departments-row {
        padding: 0 !important;
    }
    .facilita-header__deps-toggle {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0;
    }
    .facilita-header__deps-menu {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex: 1;
    }
    .facilita-header__deps-menu::-webkit-scrollbar { display: none; }
    .facilita-header__deps-menu > li > a {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
}

/* =========================================================
   HOME — Hero, categorias, carrosseis
   ========================================================= */
@media (max-width: 768px) {
    .facilita-hero {
        min-height: 200px !important;
    }
    .facilita-hero__slide {
        padding: 28px 16px !important;
    }
    .facilita-hero__content h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    .facilita-hero__content p {
        font-size: 0.95rem !important;
        margin-bottom: 16px !important;
    }
    .facilita-hero__cta {
        padding: 12px 24px !important;
        font-size: 0.85rem !important;
    }

    /* Categorias circulares: 4 colunas, círculos um pouco menores */
    .facilita-cats-circle {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
        padding: 12px 0 !important;
    }
    .facilita-cat-circle__img {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 6px !important;
    }
    .facilita-cat-circle__name {
        font-size: 0.7rem !important;
    }

    /* Container reduzido */
    .facilita-container {
        padding: 0 12px !important;
    }
    .facilita-section {
        padding: 16px 0 !important;
    }

    /* Carrosseis: 2 produtos por linha + scroll horizontal native */
    .facilita-carousel {
        padding: 16px 12px !important;
    }
    .facilita-carousel__title {
        font-size: 1rem !important;
        padding-left: 12px !important;
    }
    .facilita-carousel__title::before {
        width: 4px !important;
        height: 18px !important;
    }
    .facilita-carousel__track {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .facilita-product-card__title {
        font-size: 0.78rem !important;
        min-height: 2.4em !important;
    }
    .facilita-product-card__price {
        font-size: 0.95rem !important;
    }
    .facilita-product-card__badge {
        font-size: 0.6rem !important;
        padding: 3px 7px !important;
    }

    /* Banner promo */
    .facilita-banner-promo {
        padding: 20px 16px !important;
    }
    .facilita-banner-promo__inner h2 {
        font-size: 1.1rem !important;
    }
    .facilita-banner-promo__inner h2 span {
        font-size: 0.9rem !important;
    }
}

/* =========================================================
   ARCHIVE / LOJA / CATEGORIA
   ========================================================= */
@media (max-width: 768px) {
    .woocommerce-products-header,
    .term-description {
        padding: 16px 14px !important;
        margin: 12px 0 !important;
    }
    .woocommerce-products-header__title {
        font-size: 1.1rem !important;
    }

    /* Grid 2 colunas */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .woocommerce ul.products li.product {
        padding: 8px !important;
    }
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.78rem !important;
        min-height: 2.4em !important;
    }
    .woocommerce ul.products li.product .price {
        font-size: 0.9rem !important;
    }
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button {
        font-size: 0.75rem !important;
        padding: 6px 8px !important;
    }
    .woocommerce ul.products li.product .onsale {
        top: 12px !important;
        left: 12px !important;
        font-size: 0.6rem !important;
        padding: 3px 7px !important;
    }

    /* Ordenação compacta */
    .woocommerce-result-count,
    .woocommerce-ordering {
        display: block !important;
        float: none !important;
        margin: 8px 0 !important;
        font-size: 0.85rem !important;
    }
    .woocommerce-ordering select {
        width: 100% !important;
    }

    /* Paginação */
    .woocommerce-pagination ul.page-numbers li .page-numbers {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 0.85rem !important;
    }
}

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
@media (max-width: 768px) {
    .single-product .single-product-wrapper {
        padding: 16px !important;
        gap: 20px !important;
        grid-template-columns: 1fr !important;
    }
    .single-product .woocommerce-product-gallery,
    .single-product .summary {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
    .single-product .product_title {
        font-size: 1.25rem !important;
        margin-bottom: 8px !important;
    }
    .single-product .summary .price {
        padding: 14px !important;
        margin: 12px 0 18px !important;
    }
    .single-product .summary .price .amount {
        font-size: 1.7rem !important;
    }
    .single-product .summary .single_add_to_cart_button {
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .single-product .summary form.cart {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .single-product .summary .quantity {
        width: 100% !important;
    }
    .single-product .summary .quantity input {
        width: 100% !important;
    }
    .single-product .woocommerce-tabs .panel {
        padding: 16px !important;
    }
    .single-product .woocommerce-tabs .tabs.wc-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .single-product .woocommerce-tabs .tabs.wc-tabs li a {
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }
    .single-product .related.products {
        padding: 16px !important;
    }
    .single-product .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================
   CARRINHO / CHECKOUT / CONTA
   ========================================================= */
@media (max-width: 768px) {
    /* Carrinho: empilhado */
    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .woocommerce-cart .woocommerce-cart-form,
    .woocommerce-cart .cart_totals {
        padding: 16px !important;
    }
    /* Carrinho mobile — limpa regras antigas que conflitam com layout Magalu.
       O cart-checkout.css já cuida do layout vertical do item. */
    .woocommerce-cart table.cart tbody td.product-price::before,
    .woocommerce-cart table.cart tbody td.product-quantity::before,
    .woocommerce-cart table.cart tbody td.product-subtotal::before,
    .woocommerce-cart table.cart tbody td.product-name::before { content: none !important; }

    /* Campo cupom: limita altura e largura pra não ficar gigante */
    .woocommerce-cart .coupon {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }
    .woocommerce-cart .coupon input[type="text"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 42px !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box;
    }
    .woocommerce-cart .coupon .button {
        height: 42px !important;
        padding: 0 16px !important;
        white-space: nowrap;
        line-height: 42px !important;
        font-size: 0.8rem !important;
    }
    /* Botão "Atualizar carrinho" logo abaixo (não em grid) */
    .woocommerce-cart table.cart .actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding-top: 14px !important;
    }
    .woocommerce-cart .actions .button[name="update_cart"] {
        width: 100% !important;
        padding: 10px !important;
    }

    /* =========================================================
       CARRINHO MOBILE — estilo Magalu (v2, limpo)
       Layout em 2 linhas:
         Linha 1: [img] Nome do produto .................... [×]
         Linha 2: [img] [qty]                      R$ preço
       ========================================================= */

    /* Reseta o grid antigo, usa flex-block-flex pra simplicidade */
    .woocommerce-cart table.cart {
        display: block !important;
        border-collapse: separate;
    }
    .woocommerce-cart table.cart thead,
    .woocommerce-cart table.cart colgroup {
        display: none !important;
    }
    .woocommerce-cart table.cart tbody {
        display: block !important;
        width: 100% !important;
    }
    .woocommerce-cart table.cart tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 68px 1fr !important;
        grid-template-areas:
            "img name"
            "img qtyrow" !important;
        column-gap: 14px !important;
        row-gap: 10px !important;
        padding: 14px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        align-items: start !important;
        position: relative !important;
    }

    /* Imagem */
    .woocommerce-cart table.cart tbody td.product-thumbnail,
    table.cart tbody td.product-thumbnail {
        grid-area: img !important;
        display: block !important;
        width: 68px !important;
        max-width: 68px !important;
        min-width: 68px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .woocommerce-cart table.cart tbody td.product-thumbnail img {
        width: 68px !important;
        height: 68px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
        display: block !important;
        border: 1px solid var(--facilita-border) !important;
    }

    /* Linha 1: Nome à esquerda, X à direita no canto absoluto */
    .woocommerce-cart table.cart tbody td.product-name {
        grid-area: name !important;
        padding: 0 !important;
        margin: 0 !important;
        padding-right: 30px !important; /* espaço pro X */
    }
    .woocommerce-cart table.cart tbody td.product-name > a {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        color: var(--facilita-text) !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Preço unitário escondido */
    .woocommerce-cart table.cart tbody td.product-price {
        display: none !important;
    }

    /* Linha 2: qty à esquerda + subtotal à direita (subtotal é abs ao .tr) */
    .woocommerce-cart table.cart tbody td.product-quantity {
        grid-area: qtyrow !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-right: 100px !important; /* reserva espaço pro subtotal absoluto */
    }
    .woocommerce-cart table.cart tbody td.product-quantity .quantity {
        width: auto !important;
        max-width: 72px !important;
        min-width: 0 !important;
        height: 34px !important;
        background: transparent !important;
        border: none !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    .woocommerce-cart table.cart tbody td.product-quantity .quantity input {
        width: 64px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
        padding: 0 6px !important;
        border: 1px solid var(--facilita-border) !important;
        border-radius: 6px !important;
        background: #fff !important;
        text-align: center !important;
        color: var(--facilita-text) !important;
        box-shadow: none !important;
    }
    .woocommerce-cart table.cart tbody td.product-quantity .quantity .screen-reader-text {
        position: absolute !important;
        left: -9999px !important;
    }

    /* Subtotal posicionado absoluto à direita na linha 2 */
    .woocommerce-cart table.cart tbody td.product-subtotal {
        position: absolute !important;
        right: 0 !important;
        bottom: 18px !important;
        color: var(--facilita-red) !important;
        font-weight: 800 !important;
        font-size: 1rem !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        white-space: nowrap !important;
    }
    .woocommerce-cart table.cart tbody td.product-subtotal::before {
        content: none !important;
    }

    /* Remove no canto superior direito — como ícone X pequeno */
    .woocommerce-cart table.cart tbody td.product-remove {
        position: absolute !important;
        top: 12px !important;
        right: 0 !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 2;
    }
    .woocommerce-cart table.cart tbody td.product-remove a.remove {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 0 !important;
        color: var(--facilita-muted) !important;
        background: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        text-decoration: none !important;
    }
    .woocommerce-cart table.cart tbody td.product-remove a.remove::before {
        content: "×" !important;
        font-size: 1.5rem !important;
        line-height: 1 !important;
        color: var(--facilita-muted) !important;
        font-weight: 300;
    }
    .woocommerce-cart table.cart tbody td.product-remove a.remove:hover::before {
        color: var(--facilita-red) !important;
    }

    /* Esconde linha de actions (cupom vai pro bottom fixed) */
    .woocommerce-cart table.cart .actions {
        border-top: none !important;
        padding: 12px 0 0 !important;
    }

    /* =========================================================
       STICKY BOTTOM — Total + Botão CONTINUAR
       Fica fixo acima do bottom-nav (56px)
       NOTA: especificidade alta para vencer regra de reset
       "body.woocommerce-cart .woocommerce > .cart-collaterals" (linha 24)
       ========================================================= */
    body.woocommerce-cart .woocommerce > .cart-collaterals,
    body.woocommerce-cart div.cart-collaterals {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 56px !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 16px rgba(0,0,0,0.08) !important;
        border: none !important;
        border-top: 1px solid var(--facilita-border) !important;
        z-index: 997 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        float: none !important;
        display: block !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals {
        position: static !important;
        padding: 12px 16px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* Título "Total no carrinho" compacto */
    .woocommerce-cart .cart_totals > h2 {
        display: none !important;
    }
    /* Shipping calculator escondido no sticky pra economizar espaço */
    .woocommerce-cart .cart_totals .woocommerce-shipping-calculator {
        display: none !important;
    }
    /* Tabela de totais compacta */
    .woocommerce-cart .cart_totals table.shop_table {
        margin: 0 !important;
        display: block !important;
    }
    .woocommerce-cart .cart_totals table.shop_table tbody,
    .woocommerce-cart .cart_totals table.shop_table tr,
    .woocommerce-cart .cart_totals table.shop_table th,
    .woocommerce-cart .cart_totals table.shop_table td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    .woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal,
    .woocommerce-cart .cart_totals table.shop_table tr.shipping,
    .woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
    .woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td,
    .woocommerce-cart .cart_totals table.shop_table tr.shipping th,
    .woocommerce-cart .cart_totals table.shop_table tr.shipping td {
        display: none !important;
    }
    /* Total grande em destaque — alta especificidade pra vencer table display:block */
    .woocommerce-cart .cart_totals table.shop_table tr.order-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        padding: 0 0 10px !important;
        width: 100% !important;
    }
    .woocommerce-cart .cart_totals table.shop_table tr.order-total th {
        display: inline-block !important;
        color: var(--facilita-text) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-align: left !important;
    }
    .woocommerce-cart .cart_totals table.shop_table tr.order-total td {
        display: inline-block !important;
        color: var(--facilita-red) !important;
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        text-align: right !important;
    }
    .woocommerce-cart .cart_totals .order-total .amount {
        color: var(--facilita-red) !important;
        font-size: 1.3rem !important;
        font-weight: 800 !important;
    }

    /* Botão "Continuar para finalização" — verde gigante full-width */
    .woocommerce-cart .wc-proceed-to-checkout {
        padding: 0 !important;
        margin: 0 !important;
    }
    .woocommerce-cart .wc-proceed-to-checkout .checkout-button,
    .woocommerce-cart .checkout-button {
        background: #16a34a !important;
        color: #fff !important;
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        padding: 14px 20px !important;
        border-radius: 8px !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        box-shadow: 0 4px 12px rgba(22,163,74,0.25) !important;
    }

    /* Sticky bottom (cart-collaterals 150px + bottom-nav 56px) — coloca o padding
       no footer pra conteúdo não ficar atrás do sticky SEM criar gap branco. */
    body.woocommerce-cart {
        padding-bottom: 0 !important;
    }
    body.woocommerce-cart .facilita-footer__bottom {
        padding-bottom: 220px !important; /* 20 + sticky 150 + bottom-nav 56 */
    }

    /* =========================================================
       CARRINHO MOBILE — remove wrappers aninhados pra aproveitar tela
       (antes tinha article > container > form, cada um com padding)
       ========================================================= */
    body.woocommerce-cart article.facilita-page-article {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    body.woocommerce-cart #facilita-content .facilita-container,
    body.woocommerce-cart #primary.content-area,
    body.woocommerce-cart .site-main.facilita-page-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    body.woocommerce-cart .facilita-page-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Card "Produtos" edge-to-edge (apenas 8px de margem lateral) */
    .woocommerce-cart .woocommerce-cart-form {
        padding: 14px 12px !important;
        border: none !important;
        border-top: 1px solid var(--facilita-border) !important;
        border-bottom: 1px solid var(--facilita-border) !important;
        border-radius: 0 !important;
        margin: 8px 0 !important;
        background: #fff !important;
    }
    .woocommerce-cart .woocommerce-cart-form::before {
        font-size: 0.85rem !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--facilita-muted);
        font-weight: 700;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    /* WhatsApp floating escondido no carrinho (sticky + bottom-nav já ocupam a área) */
    body.woocommerce-cart .facilita-whatsapp,
    body.woocommerce-checkout .facilita-whatsapp {
        display: none !important;
    }

    /* Cupom no sticky: compact */
    .woocommerce-cart .coupon {
        margin-bottom: 0 !important;
    }

    /* Checkout mobile — força 1 coluna (o desktop usa grid 2 cols com !important) */
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        display: grid !important;
    }
    .woocommerce-checkout form.checkout #customer_details,
    .woocommerce-checkout form.checkout > h3#order_review_heading,
    .woocommerce-checkout form.checkout > #order_review,
    .woocommerce-checkout form.checkout > .order-review-wrapper {
        padding: 16px !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        position: static !important;
    }
    /* Form-row Nome+Sobrenome empilham no mobile */
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
    }
    .woocommerce-checkout .form-row {
        margin-bottom: 12px !important;
    }
    /* Métodos de pagamento mobile */
    .woocommerce-checkout #payment ul.payment_methods li {
        padding: 10px !important;
    }
    .woocommerce-checkout #payment .payment_box {
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
    .woocommerce-checkout #place_order {
        font-size: 1rem !important;
        padding: 14px !important;
    }

    /* =========================================================
       MINHA CONTA MOBILE — remove wrappers aninhados pra aproveitar tela
       (mesma estratégia do carrinho)
       ========================================================= */
    body.woocommerce-account article.facilita-page-article {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    body.woocommerce-account #facilita-content .facilita-container,
    body.woocommerce-account #primary.content-area,
    body.woocommerce-account .site-main.facilita-page-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    body.woocommerce-account .facilita-page-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* WhatsApp escondido na minha conta (tela tem muita ação, evita poluir) */
    body.woocommerce-account .facilita-whatsapp {
        display: none !important;
    }

    /* Minha Conta mobile — nav vira scroll horizontal (tabs) no topo */
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        padding: 0 !important;
        margin: 0 !important;
        grid-column: 1 !important;
        border: none !important;
        border-bottom: 1px solid var(--facilita-border) !important;
        border-radius: 0 !important;
        background: #fff !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important; /* Firefox */
        position: relative !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar {
        display: none !important; /* Chrome/Safari */
    }
    /* Fade no canto direito indicando scroll horizontal — wrapper necessário */
    body.woocommerce-account .woocommerce {
        position: relative !important;
    }
    body.woocommerce-account .woocommerce::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 36px;
        height: 44px;
        background: linear-gradient(to right, rgba(255,255,255,0), #fff);
        pointer-events: none;
        z-index: 3;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: max-content !important;
        min-width: 100%;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        margin: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        border: none !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 12px 14px !important;
        font-size: 0.82rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        display: inline-block !important;
        width: auto !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        color: var(--facilita-muted) !important;
        font-weight: 600 !important;
        background: transparent !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
        color: var(--facilita-red) !important;
        border-bottom-color: var(--facilita-red) !important;
    }
    /* Endereços empilhados */
    .woocommerce-account .u-columns.col2-set,
    .woocommerce-account .woocommerce-Addresses.col2-set {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 16px 12px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Títulos internos compactos */
    .woocommerce-account .woocommerce-MyAccount-content h2,
    .woocommerce-account .woocommerce-MyAccount-content h3 {
        font-size: 1.1rem !important;
        margin: 0 0 10px !important;
    }
    /* Esconde "Painel" title e breadcrumb inútil */
    .woocommerce-account .woocommerce-breadcrumb {
        display: none !important;
    }
    /* Tabelas tornam-se scroll horizontal no mobile se tiverem muitas colunas */
    .woocommerce-account .woocommerce-MyAccount-content table.shop_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */
@media (max-width: 768px) {
    .facilita-footer__main {
        padding: 32px 0 24px !important;
    }
    .facilita-footer__cols {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .facilita-footer__brand {
        font-size: 1.2rem !important;
    }
    .facilita-footer__col-title {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }
    .facilita-footer__bottom-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .facilita-footer__copy {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
    }
    .facilita-footer__payments {
        gap: 4px !important;
    }
    .facilita-footer__payment {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }

    /* Espaço extra pro bottom-nav não cobrir conteúdo */
    .facilita-footer {
        margin-bottom: 60px;
    }
}

/* =========================================================
   PÁGINAS INSTITUCIONAIS
   ========================================================= */
@media (max-width: 768px) {
    .facilita-page-article {
        padding: 16px !important;
    }
    .facilita-page-title {
        font-size: 1.4rem !important;
    }
    .facilita-page-content h2 {
        font-size: 1.2rem !important;
    }
    .facilita-page-content h3 {
        font-size: 1.05rem !important;
    }
    .facilita-page-content,
    .facilita-page-content p {
        font-size: 0.95rem !important;
    }
}

/* =========================================================
   BOTTOM NAVIGATION (estilo Magalu mobile)
   Fixed bottom — só aparece em mobile
   ========================================================= */
.facilita-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid var(--facilita-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    z-index: 998;
    padding: 0;
    justify-content: space-around;
    align-items: stretch;
    height: 56px;
}
.facilita-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--facilita-text);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 6px 4px;
    transition: color .15s ease, background .15s ease;
}
.facilita-bottom-nav__item:hover,
.facilita-bottom-nav__item.is-active {
    color: var(--facilita-red);
    background: #fff5f5;
}
.facilita-bottom-nav__item svg {
    width: 22px;
    height: 22px;
}
.facilita-bottom-nav__cart-count {
    position: absolute;
    top: 6px;
    right: calc(25% - 30px);
    background: var(--facilita-red);
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 768px) {
    .facilita-bottom-nav {
        display: flex;
    }
    /* Empurra WhatsApp pra cima do bottom-nav */
    .facilita-whatsapp {
        bottom: 70px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }
    .facilita-whatsapp svg {
        width: 26px !important;
        height: 26px !important;
    }
    /* Reserva espaço pra bottom nav fixa SEM criar gap após o footer:
       padding no rodapé do footer absorve a altura da nav overlay. */
    body.facilita-body {
        padding-bottom: 0 !important;
    }
    .facilita-footer {
        margin-bottom: 0 !important;
    }
    .facilita-footer__bottom {
        padding-bottom: 76px !important; /* 20 originais + 56 bottom-nav */
    }
}

/* =========================================================
   DRAWER DEPARTAMENTOS (slide-in mobile)
   ========================================================= */
.facilita-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity .2s ease;
}
.facilita-drawer-backdrop.is-open {
    display: block;
    opacity: 1;
}

.facilita-drawer {
    position: fixed;
    top: 0; left: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #fff;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: 4px 0 16px rgba(0,0,0,0.15);
    display: none;
}
.facilita-drawer.is-open {
    transform: translateX(0);
    display: block;
}
.facilita-drawer__header {
    background: var(--facilita-red);
    color: #fff;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.facilita-drawer__title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.facilita-drawer__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 32px;
    height: 32px;
}
.facilita-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.facilita-drawer__menu li {
    border-bottom: 1px solid var(--facilita-border);
}
.facilita-drawer__menu li a {
    display: block;
    padding: 14px 16px;
    color: var(--facilita-text);
    text-decoration: none;
    font-weight: 600;
    transition: background .15s ease;
}
.facilita-drawer__menu li a:hover,
.facilita-drawer__menu li a:active {
    background: var(--facilita-red-soft);
    color: var(--facilita-red);
}


/* =========================================================
   TABLET (601-1024px) — pequenos refinos
   ========================================================= */
@media (min-width: 601px) and (max-width: 1024px) {
    .facilita-cats-circle {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    .facilita-carousel__track {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* =========================================================
   ULTRA-MOBILE (<= 360px) — telas pequenas
   ========================================================= */
@media (max-width: 360px) {
    .facilita-header__logo-text {
        font-size: 0.85rem !important;
        max-width: 100px;
    }
    .facilita-cats-circle {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .facilita-cat-circle__img {
        width: 56px !important;
        height: 56px !important;
    }
}