/*!
 * Plugin Energia · mobile.css
 * Overrides responsivos. Sempre enfileirado (carrega todas as páginas).
 * Portado de project/b-mobile.jsx — valores literais (hex, px) sem CSS vars
 * exceto `--pe-subheader-top` que o mobile.js calcula em runtime.
 *
 * Breakpoints:
 *   md  @media (max-width: 879px)  — tablet vertical e abaixo
 *   sm  @media (max-width: 599px)  — phone (xs)
 *
 * Contrato BEM consumido (não criado aqui):
 *   .pe-header, .pe-promo, .pe-utility, .pe-tabbar, .pe-hero,
 *   .pe-shop-*, .pe-product-*, .pe-cart-*, .pe-checkout-*,
 *   .pe-account-*, .pe-article-*, .pe-footer, .pe-newsletter,
 *   .pe-scrollx, .pe-sticky-cta-mobile, .pe-btn
 */

/* ==========================================================================
   1) DESKTOP (default) — tabbar oculta
   ========================================================================== */
@media (min-width: 880px)
{
    .pe-tabbar
    {
        display: none !important;
    }

    .pe-sticky-cta-mobile
    {
        display: none !important;
    }

    /* Trigger de filtros é exclusivo do mobile/tablet */
    .pe-shop-filters-trigger,
    .pe-shop-filters-backdrop,
    .pe-shop-filters__mobile-header
    {
        display: none !important;
    }
}

/* ==========================================================================
   2) md — TABLET VERTICAL E ABAIXO (≤ 879px)
   ========================================================================== */
@media (max-width: 879px)
{
    /* ---------- BASE ---------- */
    html,
    body
    {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body
    {
        padding-bottom: 64px; /* reserva espaço para a tabbar */
    }

    /* ---------- HEADER ---------- */
    .pe-header
    {
        position: sticky;
        top: 0;
        z-index: 50;
        background: #ffffff;
        border-bottom: 1px solid #F1F3F5;
    }

    .pe-header__row
    {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .pe-header__burger
    {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid #E5E7EB;
        border-radius: 50%;
        background: #ffffff;
        color: #0B0D10;
    }

    .pe-header__nav
    {
        display: none;
    }

    .pe-header__brand
    {
        flex: 1 1 auto;
        text-align: center;
    }

    .pe-header__search
    {
        order: 99;
        flex: 1 0 100%;
        max-width: none;
        padding: 10px 14px;
        background: #F7F8FA;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
    }

    .pe-header__search kbd
    {
        display: none;
    }

    .pe-header__actions
    {
        gap: 4px;
    }

    .pe-iconbtn
    {
        width: 36px;
        height: 36px;
    }

    .pe-iconbtn__badge
    {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #1FB6FF;
        color: #ffffff;
        font-size: 9px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- PROMO STRIP ---------- */
    .pe-promo
    {
        font-size: 10.5px;
        gap: 14px;
        padding: 6px 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .pe-promo::-webkit-scrollbar
    {
        display: none;
    }

    /* ---------- UTILITY BAR ---------- */
    .pe-utility
    {
        display: none;
    }

    /* ---------- HERO (home) ---------- */
    .pe-hero
    {
        grid-template-columns: 1fr;
        padding: 24px 16px 28px;
        background: #F7F8FA;
        gap: 20px;
    }

    .pe-hero__copy
    {
        text-align: left;
    }

    .pe-hero__title
    {
        font-size: 36px;
        line-height: 1.02;
        font-weight: 400;
    }

    .pe-hero__title em
    {
        color: #1FB6FF;
        font-style: normal;
    }

    .pe-hero__sub
    {
        font-size: 14px;
        line-height: 1.5;
        color: #4B5563;
    }

    .pe-hero__ctas
    {
        flex-direction: column;
        gap: 10px;
    }

    .pe-hero__ctas .pe-btn
    {
        width: 100%;
    }

    .pe-hero__media
    {
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        overflow: hidden;
    }

    /* ---------- SHOP ---------- */
    .pe-shop-hero
    {
        padding: 18px 16px 8px;
    }

    .pe-shop-hero__title
    {
        font-size: 30px;
        line-height: 1.1;
    }

    .pe-shop-layout
    {
        grid-template-columns: 1fr;
        padding: 20px 16px;
        gap: 16px;
    }

    /* Botão sticky "Filtros" — só mobile */
    .pe-shop-filters-trigger
    {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 14px;
        margin: 0 0 12px;
        border: 1px solid #E5E7EB;
        border-radius: 999px;
        background: #ffffff;
        color: #0B0D10;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .pe-shop-filters-trigger__badge
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #1FB6FF;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    .pe-shop-filters-backdrop
    {
        display: none;
    }

    body.pe-shop-filters-open .pe-shop-filters-backdrop
    {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(11, 13, 16, 0.45);
        z-index: 90;
    }

    body.pe-shop-filters-open
    {
        overflow: hidden;
    }

    .pe-shop-filters
    {
        display: none;
    }

    .pe-shop-filters__mobile-header
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 16px;
        padding: 0 0 12px;
        border-bottom: 1px solid #F1F3F5;
    }

    .pe-shop-filters__mobile-title
    {
        font-family: 'Cambay', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #0B0D10;
    }

    .pe-shop-filters__close
    {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #E5E7EB;
        border-radius: 50%;
        background: #ffffff;
        color: #0B0D10;
        cursor: pointer;
    }

    .pe-shop-filters.is-open
    {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 88%;
        max-width: 340px;
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        z-index: 100;
        padding: 18px 18px 96px;
        overflow-y: auto;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
        -webkit-overflow-scrolling: touch;
    }

    .pe-shop-toolbar
    {
        position: sticky;
        top: var(--pe-subheader-top, 108px);
        background: #ffffff;
        border-bottom: 1px solid #F1F3F5;
        padding: 10px 12px;
        z-index: 40;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pe-shop-toolbar__filters-trigger
    {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        background: #ffffff;
        color: #0B0D10;
        font-size: 13px;
        font-weight: 600;
    }

    /* Grid de produtos: o container real é `ul.products` dentro de
       `.pe-shop-grid`. O desktop define repeat(4, 1fr) em shop.css; aqui
       force 2 colunas para evitar overflow horizontal a 390-879px. */
    .pe-shop-grid
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pe-shop-grid ul.products,
    .woocommerce ul.products
    {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .pe-shop-grid ul.products > li.product,
    .woocommerce ul.products > li.product
    {
        max-width: 100% !important;
    }

    .pe-shop-pagination
    {
        gap: 8px;
        padding: 20px 0;
    }

    .pe-shop-pagination__item
    {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 13px;
    }

    /* ---------- CARD MOBILE (BCardMobile twoCol) ---------- */
    .pe-product-card
    {
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #F1F3F5;
        overflow: hidden;
    }

    .pe-product-card__media
    {
        aspect-ratio: 1 / 1;
        background: #F7F8FA;
    }

    .pe-product-card__body
    {
        padding: 10px 12px 12px;
    }

    .pe-product-card__brand
    {
        font-size: 9.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #9CA3AF;
        margin-bottom: 4px;
    }

    .pe-product-card__title
    {
        font-size: 12px;
        font-weight: 500;
        line-height: 1.35;
        color: #0B0D10;
        min-height: 32px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .pe-product-card__price
    {
        font-family: 'Cambay', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #0B0D10;
        line-height: 1.1;
    }

    .pe-product-card__pix
    {
        font-size: 10px;
        color: #0E7FBF;
        margin-top: 2px;
    }

    /* ---------- PRODUCT SINGLE ---------- */
    .pe-product
    {
        grid-template-columns: 1fr;
        padding: 16px 16px 24px;
        gap: 20px;
    }

    .pe-product-gallery
    {
        grid-template-columns: 1fr;
        position: relative;
    }

    .pe-product-gallery__thumbs
    {
        display: none;
    }

    .pe-product-gallery__main
    {
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
    }

    .pe-product-gallery__dots
    {
        position: absolute;
        bottom: 14px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        z-index: 5;
    }

    .pe-product-gallery__dot
    {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        border: 0;
        padding: 0;
    }

    .pe-product-gallery__dot.is-active
    {
        background: #ffffff;
        width: 18px;
        border-radius: 3px;
    }

    .pe-product-info__title
    {
        font-size: 24px;
        line-height: 1.15;
        font-weight: 700;
    }

    .pe-product-info__price-block
    {
        background: #F7F8FA;
        border-radius: 14px;
        padding: 18px;
    }

    .pe-product-info__price-current
    {
        font-family: 'Cambay', sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: 1;
    }

    .pe-product-info__cta-row
    {
        flex-direction: column;
        gap: 10px;
    }

    .pe-product-info__cta-row .pe-btn
    {
        width: 100%;
    }

    .pe-product-tabs__nav
    {
        overflow-x: auto;
        scrollbar-width: none;
        gap: 18px;
        padding: 0 16px;
        border-bottom: 1px solid #F1F3F5;
    }

    .pe-product-tabs__nav::-webkit-scrollbar
    {
        display: none;
    }

    .pe-product-tabs__nav-item
    {
        flex: 0 0 auto;
        font-size: 13px;
        padding: 12px 0;
        white-space: nowrap;
    }

    .pe-product-tabs__content
    {
        grid-template-columns: 1fr;
        padding: 20px 16px;
    }

    .pe-product-specs details
    {
        border-bottom: 1px solid #F1F3F5;
        padding: 12px 0;
    }

    .pe-product-specs summary
    {
        font-size: 13px;
        font-weight: 600;
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .pe-product-specs summary::-webkit-details-marker
    {
        display: none;
    }

    .pe-product-related__grid
    {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---------- CART ---------- */
    .pe-cart-grid
    {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 14px;
    }

    .pe-cart-row
    {
        position: relative;
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 14px;
        border: 1px solid #F1F3F5;
        border-radius: 12px;
        background: #ffffff;
    }

    .pe-cart-row__media
    {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        background: #F7F8FA;
        overflow: hidden;
    }

    .pe-cart-row__remove
    {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        color: #9CA3AF;
    }

    .pe-cart-row__title
    {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

    .pe-cart-row__price
    {
        font-family: 'Cambay', sans-serif;
        font-size: 16px;
        font-weight: 700;
    }

    .pe-summary
    {
        position: static;
        padding: 18px;
        border: 1px solid #F1F3F5;
        border-radius: 14px;
        background: #ffffff;
    }

    /* ---------- CHECKOUT ---------- */
    .pe-checkout-layout,
    .pe-checkout__grid
    {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 18px;
    }

    .pe-summary--checkout
    {
        position: static;
    }

    .pe-checkout__customer .woocommerce-billing-fields__field-wrapper,
    .pe-checkout__shipping .woocommerce-shipping-fields__field-wrapper,
    .pe-checkout__shipping .woocommerce-additional-fields
    {
        grid-template-columns: 1fr;
    }

    .pe-checkout-stepper
    {
        padding: 12px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .pe-checkout-stepper::-webkit-scrollbar
    {
        display: none;
    }

    .pe-checkout-stepper__connector
    {
        width: 16px;
        min-width: 16px;
    }

    .pe-checkout-stepper__label
    {
        font-size: 11px;
    }

    .pe-checkout-step
    {
        padding: 16px;
        border: 1px solid #F1F3F5;
        border-radius: 14px;
        background: #ffffff;
    }

    .pe-checkout-form__row
    {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pe-checkout-payment-methods
    {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pe-checkout-pix
    {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pe-checkout-pix__qr-card
    {
        max-width: 280px;
        margin: 0 auto;
    }

    /* ---------- ACCOUNT ---------- */
    .pe-account-layout
    {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 18px;
    }

    .pe-account-sidebar
    {
        position: static;
    }

    .pe-account-sidebar__identity
    {
        padding: 16px 18px;
        background: #0B0D10;
        color: #ffffff;
        border-radius: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pe-account-sidebar__avatar
    {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #1FB6FF;
        font-family: 'Cambay', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pe-account-stats
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pe-loyalty-band
    {
        padding: 22px;
        border-radius: 14px;
        background: linear-gradient(135deg, #FFC829 0%, #D9A400 100%);
        color: #2A1F00;
    }

    .pe-loyalty-band__title
    {
        font-family: 'Cambay', sans-serif;
        font-size: 22px;
        font-weight: 700;
    }

    .pe-account-orders__row
    {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .pe-account-address-grid
    {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---------- ARTICLE (blog single) ---------- */
    .pe-article-layout
    {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 24px;
    }

    .pe-article-title
    {
        font-size: 32px;
        line-height: 1.1;
    }

    .pe-article-lead
    {
        font-size: 16px;
        line-height: 1.55;
    }

    .pe-article-toc
    {
        position: static;
        border: 1px solid #F1F3F5;
        border-radius: 12px;
        padding: 12px 14px;
    }

    .pe-article-toc__list
    {
        display: none;
    }

    .pe-article-toc.is-open .pe-article-toc__list
    {
        display: block;
    }

    .pe-article-toc__toggle
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        background: transparent;
        border: 0;
        font-size: 13px;
        font-weight: 700;
        color: #0B0D10;
    }

    .pe-article-share
    {
        gap: 8px;
        flex-wrap: wrap;
    }

    .pe-article-share__btn
    {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    /* ---------- FOOTER ---------- */
    .pe-footer__main
    {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 16px;
    }

    .pe-footer__bottom-row
    {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    .pe-footer__pay
    {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pe-newsletter__row
    {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 16px;
    }

    .pe-newsletter__form
    {
        flex-direction: column;
        gap: 10px;
    }

    .pe-newsletter__form input,
    .pe-newsletter__form .pe-btn
    {
        width: 100%;
    }

    /* ---------- TABBAR (5 itens) ---------- */
    .pe-tabbar
    {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid #F1F3F5;
        padding: 8px 4px 12px;
        z-index: 60;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    }

    .pe-tabbar__item
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 4px 0;
        color: #6B7280;
        font-size: 10px;
        font-weight: 500;
        text-decoration: none;
        position: relative;
        line-height: 1;
    }

    .pe-tabbar__item.is-active
    {
        color: #0E7FBF;
        font-weight: 700;
    }

    .pe-tabbar__item svg
    {
        width: 22px !important;
        height: 22px !important;
    }

    .pe-tabbar__badge
    {
        position: absolute;
        top: -2px;
        right: 28%;
        background: #1FB6FF;
        color: #ffffff;
        font-size: 8.5px;
        font-weight: 700;
        min-width: 15px;
        height: 15px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        line-height: 1;
    }

    /* ---------- SCROLLX util ---------- */
    .pe-scrollx
    {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 10px;
        padding-right: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .pe-scrollx::-webkit-scrollbar
    {
        display: none;
    }

    .pe-scrollx > *
    {
        flex: 0 0 auto;
    }

    .pe-scrollx--cat > *
    {
        flex: 0 0 130px;
    }

    .pe-scrollx--blog > *
    {
        flex: 0 0 240px;
    }

    .pe-scrollx--related > *
    {
        flex: 0 0 160px;
    }

    /* ---------- STICKY CTA bottom mobile ---------- */
    .pe-sticky-cta-mobile
    {
        position: sticky;
        bottom: 64px;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid #F1F3F5;
        padding: 10px 12px;
        z-index: 50;
        display: grid;
        gap: 8px;
    }

    .pe-sticky-cta-mobile.is-stuck
    {
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    }

    /* Product sticky bar — grid auto auto 1fr (heart, stepper, CTA) */
    .pe-sticky-cta-mobile--product
    {
        grid-template-columns: 42px auto 1fr;
        align-items: center;
        gap: 8px;
    }

    .pe-sticky-cta-mobile__wish
    {
        width: 42px;
        height: 46px;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        background: #ffffff;
        color: #0B0D10;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .pe-sticky-cta-mobile__wish.is-active
    {
        color: #E11D48;
        border-color: #E11D48;
    }

    .pe-sticky-cta-mobile__qty
    {
        height: 46px;
        display: inline-flex;
        align-items: center;
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        overflow: hidden;
    }

    .pe-sticky-cta-mobile__qty .pe-product-info__qty-btn
    {
        width: 36px;
        height: 46px;
        background: #ffffff;
        border: 0;
        font-size: 18px;
        color: #0B0D10;
        cursor: pointer;
    }

    .pe-sticky-cta-mobile__qty .pe-product-info__qty-input
    {
        width: 36px;
        height: 46px;
        border: 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        background: #ffffff;
    }

    .pe-sticky-cta-mobile__cta
    {
        height: 46px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Cart sticky bar — full-width CTA + trust */
    .pe-sticky-cta-mobile--cart
    {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: center;
    }

    .pe-sticky-cta-mobile__trust
    {
        font-size: 10px;
        color: #9CA3AF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    /* Checkout sticky bar */
    .pe-sticky-cta-mobile--checkout
    {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   3) sm — PHONE (≤ 599px) — overrides extras mais apertados
   ========================================================================== */
@media (max-width: 599px)
{
    .pe-header__row
    {
        padding: 10px 14px;
        gap: 8px;
    }

    .pe-hero
    {
        padding: 20px 14px 24px;
    }

    .pe-hero__title
    {
        font-size: 32px;
    }

    .pe-shop-hero__title
    {
        font-size: 26px;
    }

    .pe-shop-layout
    {
        padding: 16px 12px;
    }

    .pe-shop-grid
    {
        gap: 8px;
    }

    .pe-shop-grid ul.products,
    .woocommerce ul.products
    {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Cards mais compactos a 390px e abaixo */
    .pe-product-card__body
    {
        padding: 8px 10px 10px;
    }

    .pe-product-card__title,
    .woocommerce-loop-product__title
    {
        font-size: 13px;
        line-height: 1.3;
        min-height: 34px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .pe-product-card__price
    {
        font-size: 16px;
    }

    /* O drawer ocupa um pouco mais a viewport pequena */
    .pe-shop-filters.is-open
    {
        width: 92%;
        max-width: 320px;
    }

    .pe-product
    {
        padding: 14px 14px 20px;
    }

    .pe-product-info__title
    {
        font-size: 22px;
    }

    .pe-product-info__price-current
    {
        font-size: 32px;
    }

    .pe-cart-grid
    {
        padding: 14px;
        gap: 12px;
    }

    .pe-cart-row
    {
        grid-template-columns: 72px 1fr;
        padding: 12px;
        gap: 10px;
    }

    .pe-cart-row__media
    {
        width: 72px;
        height: 72px;
    }

    .pe-checkout-layout
    {
        padding: 14px;
    }

    .pe-account-layout
    {
        padding: 14px;
    }

    .pe-account-stats
    {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pe-loyalty-band
    {
        padding: 18px;
    }

    .pe-loyalty-band__title
    {
        font-size: 20px;
    }

    .pe-article-layout
    {
        padding: 14px;
    }

    .pe-article-title
    {
        font-size: 28px;
    }

    .pe-footer__main
    {
        padding: 28px 14px;
        gap: 20px;
    }

    .pe-tabbar__item
    {
        font-size: 9.5px;
    }

    .pe-tabbar__item svg
    {
        width: 20px !important;
        height: 20px !important;
    }

    .pe-sticky-cta-mobile
    {
        padding: 8px 10px;
    }

    .pe-sticky-cta-mobile__cta
    {
        font-size: 13px;
    }

    /* Tabs WC mais compactas no celular */
    .woocommerce-tabs ul.tabs li,
    .woocommerce-tabs ul.wc-tabs li,
    .pe-product-tabs ul.tabs li,
    .pe-product-tabs ul.wc-tabs li
    {
        padding: 12px 14px;
        font-size: 13px;
    }
}

/* ==========================================================================
   4) STICKY CTA MOBILE — single product (fixed acima da tabbar)
   O wp_footer renderiza a barra depois do tabbar, mas em mobile precisamos
   da barra "Comprar" fixa acima da tabbar de navegação (bottom: 0 / 64px).
   Por isso usamos position: fixed com bottom: 64px (altura do tabbar).
   ========================================================================== */
@media (max-width: 879px)
{
    .pe-sticky-cta-mobile--product
    {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px; /* altura do .pe-tabbar */
        z-index: 998;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }
}

@media (min-width: 880px)
{
    .pe-sticky-cta-mobile--product
    {
        display: none !important;
    }
}

/* ==========================================================================
   CART MOBILE FIX — Carrinho /carrinho/
   Reflow do grid + qty stepper + sticky CTA bottom.
   Append-only; não toca os blocos anteriores deste arquivo.
   ========================================================================== */
@media (max-width: 879px)
{
    /* Grid principal vira 1 coluna. Specificity 0,1,0 == regra base
     * em checkout.css mas mobile.css carrega depois -> last-wins. */
    .pe-cart-grid
    {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 12px 14px 96px;
    }

    /* Cart row vira card 3-col compacto + 2ª linha (qty | price).
     * Specificity 0,2,1 vence .pe-cart-grid .pe-cart-row do checkout.css. */
    .pe-cart-grid .pe-cart-row
    {
        display: grid;
        grid-template-columns: 72px 1fr 32px;
        grid-template-areas:
            "media body remove"
            "media qty   price";
        column-gap: 12px;
        row-gap: 10px;
        padding: 12px;
        border: 1px solid #F1F3F5;
        border-radius: 14px;
        background: #ffffff;
        align-items: center;
    }
    .pe-cart-grid .pe-cart-list
    {
        padding: 12px;
        border-radius: 14px;
    }
    .pe-cart-row__media   { grid-area: media; width: 72px; height: 72px; padding: 4px; }
    .pe-cart-row__media img { width: 100%; height: 100%; object-fit: contain; }
    .pe-cart-row__body    { grid-area: body; min-width: 0; overflow: hidden; }
    .pe-cart-row__qty     { grid-area: qty; justify-self: start; }
    /* Reset min-width 96px do theme.css; price ocupa só o slot do grid (right column) */
    .pe-cart-row__price
    {
        grid-area: price;
        text-align: right;
        min-width: 0;
        justify-self: end;
        align-self: center;
    }
    .pe-cart-row__price .pe-cart-row__subtotal
    {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.1;
    }
    .pe-cart-row__price .pe-cart-row__unit { display: none; }
    .pe-cart-row__remove  { grid-area: remove; justify-self: end; }
    .pe-cart-row__title
    {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pe-cart-row .pe-cart-row__title
    {
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;
    }

    /* Qty stepper no mobile — 124x40.
     * .pe-cart-row__qty no checkout.css é 120x38; aqui sobescreve com 124x40. */
    .pe-cart-row .pe-cart-row__qty
    {
        width: 124px;
        height: 40px;
        border-radius: 10px;
    }
    .pe-cart-row__qty .pe-qty-btn { width: 36px; }
    .pe-cart-row__qty .quantity input.qty,
    .pe-cart-row__qty input[type="number"] { width: 40px; font-size: 14px; }

    /* Summary perde sticky e ocupa full-width no mobile.
     * Em desktop o checkout.css define position:sticky para .pe-summary--checkout.
     * Aqui temos same-specificity (0,1,0) e mobile.css carrega depois -> wins. */
    .pe-summary,
    .pe-summary--cart,
    .pe-summary--checkout
    {
        position: static;
        width: 100%;
        margin: 0;
        top: auto;
    }

    /* CTA dentro do summary no mobile — altura reduzida.
     * Specificity (0,5,1) > regra desktop (0,5,1) só pela cascade interna
     * deste @media, que carrega DEPOIS de checkout.css. */
    a.checkout-button.pe-btn.pe-btn--brand.pe-summary__cta,
    .pe-summary a.checkout-button.pe-btn.pe-btn--brand
    {
        height: 50px;
        line-height: 1;
        font-size: 14px;
    }

    /* Bottom toolbar do cart (coupon + atualizar + continuar) reflowa */
    .pe-cart-list__bottom
    {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 12px;
    }
    .pe-cart-list__bottom .pe-cart-coupon__row
    {
        flex-direction: row;
        gap: 8px;
    }

    /* Sticky CTA bottom (acima do tabbar de 64px) */
    .pe-sticky-cta-mobile--cart
    {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px;
        padding: 12px 14px;
        background: #ffffff;
        border-top: 1px solid #F1F3F5;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        z-index: 998;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: center;
    }
    .pe-sticky-cta-mobile--cart .pe-sticky-cta-mobile__cta
    {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 1;
        background: #1FB6FF;
        color: #ffffff;
        border: 0;
        border-radius: 12px;
        font-weight: 700;
        font-size: 15px;
        text-align: center;
        text-decoration: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .pe-sticky-cta-mobile--cart .pe-sticky-cta-mobile__trust
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 10.5px;
        color: #9CA3AF;
    }
}
/* Desktop: esconde sticky CTAs mobile.
 * !important mantido porque pode haver display:flex/grid inline via JS. */
@media (min-width: 880px)
{
    .pe-sticky-cta-mobile--cart { display: none !important; }
}

/* ======================================================
 * CHECKOUT MOBILE — reflow 1-col + sticky CTA "Finalizar pedido"
 * Mobile.css carrega depois de checkout.css; selectors com mesma
 * specificity vencem por cascade order. Por isso !important só
 * é mantido onde compete com inline-style de plugins / JS.
 * ====================================================== */
@media (max-width: 879px)
{
    /* Grid 1-col + summary depois do form */
    .pe-checkout__grid,
    .pe-co__grid,
    .pe-checkout-grid
    {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 24px;
    }
    .pe-checkout__main
    {
        order: 1;
        min-width: 0;
    }
    .pe-checkout__grid > .pe-summary--checkout,
    .pe-summary--checkout
    {
        position: static;
        top: auto;
        width: 100%;
        order: 2;
    }

    /* Steps: padding interno reduzido pra dar respiro.
     * checkout.css ID FIX define .pe-checkout .pe-checkout-step
     * (0,2,1); aqui usamos .pe-checkout .pe-checkout-step para
     * vencer com same-specificity em cascade. */
    .pe-checkout .pe-checkout-step
    {
        padding: 16px;
    }
    .pe-checkout .pe-checkout-step__body
    {
        padding: 0;
    }

    /* Billing fields: 1-col mobile pra eliminar scroll horizontal */
    form.pe-checkout .woocommerce-billing-fields__field-wrapper,
    form.pe-checkout .pe-checkout__customer .woocommerce-billing-fields__field-wrapper,
    form.pe-checkout .pe-checkout__shipping .woocommerce-shipping-fields__field-wrapper,
    form.pe-checkout .pe-checkout__shipping .woocommerce-additional-fields__field-wrapper,
    form.pe-checkout .pe-checkout__shipping .woocommerce-additional-fields
    {
        grid-template-columns: 1fr;
        display: grid;
    }
    form.pe-checkout .form-row.form-row-first,
    form.pe-checkout .form-row.form-row-last
    {
        width: 100%;
        float: none;
    }

    /* Payment grid: força 1-col no mobile.
     * !important em display:grid mantido (compete com inline JS do WC). */
    ul.wc_payment_methods.payment_methods,
    .pe-checkout-payment-methods,
    .pe-checkout-payment .wc_payment_methods,
    .pe-checkout-review .wc_payment_methods
    {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    ul.wc_payment_methods.payment_methods > li.wc_payment_method:has(input[type="radio"]:checked)
    {
        grid-column: auto;
    }

    /* Sticky CTA "Finalizar pedido" no rodapé (acima da tabbar) */
    .pe-sticky-cta-mobile--checkout
    {
        display: block !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 64px;
        padding: 12px 14px;
        background: #fff;
        border-top: 1px solid #F1F3F5;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        z-index: 998;
    }
    .pe-sticky-cta-mobile--checkout .pe-sticky-cta-mobile__cta
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 50px;
        background: #0B0D10;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        border-radius: 12px;
        border: 0;
        cursor: pointer;
        text-decoration: none;
    }
    .pe-sticky-cta-mobile--checkout .pe-sticky-cta-mobile__trust
    {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 6px;
        font-size: 10.5px;
        color: #9CA3AF;
    }

    /* Padding-bottom extra no body pra não esconder conteúdo
       atrás do sticky CTA + tabbar mobile */
    body.woocommerce-checkout
    {
        padding-bottom: 160px !important;
    }
}

@media (min-width: 880px)
{
    .pe-sticky-cta-mobile--checkout { display: none !important; }
}

/* ==========================================================================
   CHROME HAMBURGER FIX — drawer mobile (header.php + theme.js / theme.css)
   Refinamentos exclusivos pro hambúrguer e drawer em viewports <1280.
   ========================================================================== */
@media (max-width: 1279px)
{
    /* Burger touch target — 40x40 mínimo recomendado, sem border default */
    .pe-header__burger
    {
        width: 40px;
        height: 40px;
        border: 1px solid #E5E7EB;
        background: #ffffff;
        border-radius: 10px;
    }

    .pe-header__burger:active
    {
        background: #F1F3F5;
    }

    /* Drawer aberto — cobre toda a viewport com altura 100dvh em iOS Safari */
    body.pe-menu-open .pe-header__nav
    {
        height: 100vh;
        height: 100dvh;
        max-width: 360px;
    }

    /* Drawer head fica colado no topo enquanto se rola a lista */
    body.pe-menu-open .pe-drawer__head
    {
        min-height: 64px;
    }

    /* Logo dentro do drawer head — wordmark reduzido pra caber junto do X */
    body.pe-menu-open .pe-drawer__brand .pe-logo__plugin
    {
        font-size: 22px;
    }

    body.pe-menu-open .pe-drawer__brand .pe-logo__energia
    {
        font-size: 11px;
    }

    /* Items do menu com touch target legível dentro do drawer */
    body.pe-menu-open .pe-menu__link
    {
        padding-top: 16px;
        padding-bottom: 16px;
        min-height: 48px;
    }

    /* Submenu dentro do drawer — indent leve + separador discreto */
    body.pe-menu-open .pe-submenu__link
    {
        padding-top: 12px;
        padding-bottom: 12px;
        min-height: 40px;
        color: #6B7280;
    }
}

/* Em phones muito estreitos, o drawer ocupa quase a viewport inteira */
@media (max-width: 480px)
{
    body.pe-menu-open .pe-header__nav
    {
        width: 88vw;
    }
}

/* CHROME / HAMBURGUER — esconde stickys mobile quando drawer aberto.
   Sem isso, os sticky-cta z:998 ficam em frente do drawer z:400 e backdrop z:380. */
body.pe-menu-open .pe-mobile-sticky-cta,
body.pe-menu-open .pe-sticky-cta-mobile,
body.pe-menu-open .pe-sticky-cta-mobile--product,
body.pe-menu-open .pe-mobile-sticky-cta--cart,
body.pe-menu-open .pe-mobile-sticky-cta--checkout
{
    display: none !important; /* última instância justificada: precisamos vencer o display:grid/block do estado normal */
}

/* CART CROSS-SELLS MOBILE
 * O bloco "Complementa seu pedido" reusa .pe-shop-grid ul.products,
 * que ja vira 2 colunas <=879px por shop-grid generico. Aqui apenas
 * ajustamos tipografia do header e gap especifico do cross-sells. */
@media (max-width: 879px)
{
    .pe-cart-crosssells
    {
        padding-top: 8px;
    }
    .pe-cart-crosssells .pe-section-head .pe-h2
    {
        font-size: 22px;
    }
    .pe-cart-crosssells .pe-section-head p
    {
        font-size: 13px;
    }
    .pe-cart-crosssells .pe-shop-grid ul.products
    {
        grid-template-columns: repeat(2, 1fr) !important; /* justificado: vence regra desktop especifica do cross-sells (specificity 0,3,1) */
        gap: 10px !important;
    }
}

/* ======================================================
 * SHOP PAGINATION MOBILE
 * Em telas <= 480 reduzimos gap e padding para evitar
 * quebra excessiva sem perder a tap target de 36px.
 * ====================================================== */
@media (max-width: 480px) {
    .pe-shop-pagination {
        gap: 4px;
        margin: 24px 0 32px;
    }
    .pe-shop-pagination__item .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
        border-radius: 8px;
    }
    .pe-shop-pagination__item .page-numbers.prev,
    .pe-shop-pagination__item .page-numbers.next {
        font-size: 16px;
    }
}