/*=========================================================
    MOBILE / APP-LIKE  —  ÁREA DO CLIENTE (vitrine)
    Carregado DEPOIS de style.css.
    Tudo que muda layout está dentro de @media (max-width: 767px).
===========================================================*/

/* Caixa do nome do produto (substitui o antigo style inline) */
.product-name-box { height: 38px; overflow: hidden; }

/* Elementos exclusivos do mobile ficam ocultos no desktop */
@media only screen and (min-width: 768px) {
    .mobile-only { display: none !important; }
}

@media only screen and (max-width: 767px) {

    /*------------------------------------------------------
        Base
    ------------------------------------------------------*/
    body {
        /* espaço para a tab bar fixa (respeita o notch do iOS) */
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        -webkit-tap-highlight-color: rgba(0, 0, 0, .06);
        /* impede o "arrasto" lateral causado pelos drawers fora da tela */
        overflow-x: hidden;
    }

    .container { padding-left: 12px; padding-right: 12px; }

    .section { padding-top: 16px; padding-bottom: 16px; }

    .section-title { margin-top: 0; margin-bottom: 12px; }
    .section-title .title { font-size: 16px; }
    .section-title .section-nav { display: none; } /* setas do slick: swipe basta */

    /*------------------------------------------------------
        Header compacto
    ------------------------------------------------------*/
    /* barra de telefone/endereço/login some: vai para o menu e o rodapé */
    #top-header { display: none !important; }

    #header { padding-top: 8px; padding-bottom: 8px; }

    .main-header-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-left: -6px;
        margin-right: -6px;
    }
    .main-header-row > div { padding-left: 6px; padding-right: 6px; }

    /* botão do menu (hambúrguer) */
    .mobile-menu-btn {
        order: 1;
        flex: 0 0 auto;
    }
    .mobile-menu-btn > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #fff;
        font-size: 20px;
    }

    /* logo */
    .header-col-logo {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }
    .header-logo { float: none; text-align: center; margin: 0; }
    .header-logo .logo img {
        height: 44px !important;
        max-height: 44px !important;
        max-width: 170px !important;
        width: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    /* favoritos/carrinho/menu do desktop: substituídos pela tab bar */
    .header-col-ctn { display: none !important; }

    /* busca ocupa a linha inteira, formato "pílula" */
    .header-col-search {
        order: 4;
        flex: 0 0 100%;
        width: 100%;
    }
    .header-search { padding: 8px 0 2px; }
    .header-search form { position: relative; }
    .header-search form .input-select { display: none; }
    .header-search form .input {
        width: 100%;
        height: 42px;
        margin-right: 0;
        padding: 0 52px 0 16px;
        border: none;
        border-radius: 40px;
        font-size: 15px; /* >=16px evita zoom no iOS, 15 já é confortável */
    }
    .header-search form .search-btn {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
    }
    .header-search form .search-btn:after {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 15px;
    }

    /*------------------------------------------------------
        Faixa de categorias (chips) — fixa no topo ao rolar
    ------------------------------------------------------*/
    .mobile-cat-strip {
        position: sticky;
        top: 0;
        z-index: 900;
        display: flex;
        gap: 8px;
        padding: 8px 12px;
        overflow-x: auto;
        white-space: nowrap;
        background: #fff;
        border-bottom: 1px solid #e4e7ed;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mobile-cat-strip::-webkit-scrollbar { display: none; }
    .mobile-cat-strip .chip {
        flex: 0 0 auto;
        padding: 7px 14px;
        border: 1px solid #e4e7ed;
        border-radius: 20px;
        background: #f7f8fa;
        color: #4a5568;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }
    .mobile-cat-strip .chip.active {
        background: var(--primary_color);
        border-color: var(--primary_color);
        color: #fff;
    }

    /* a barra branca do menu desktop não precisa ocupar espaço */
    #navigation { border-bottom: none; border-top: none; }

    /*------------------------------------------------------
        Menu lateral (drawer)
    ------------------------------------------------------*/
    #mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1055;
        display: none;
    }
    #mobile-nav-backdrop.open { display: block; }

    /* fundo claro: independe da cor da marca, sempre legível */
    #responsive-nav {
        max-width: 285px;
        padding-top: 56px;
        overflow-y: auto;
        background: #fff;
        z-index: 1060;
        box-shadow: 2px 0 16px rgba(0, 0, 0, .18);
    }
    #responsive-nav.active { width: 285px; }
    .mobile-nav-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: #f1f5f9;
        color: #475569;
        font-size: 16px;
        line-height: 36px;
        padding: 0;
    }
    .mobile-drawer-title {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 14px 16px 6px;
        margin: 0;
    }
    #responsive-nav .main-nav > li > a {
        padding: 13px 16px;
        font-size: 14px;
        color: #2b2d42;
    }
    #responsive-nav .main-nav > li.active > a { color: var(--primary_color); }
    #responsive-nav .main-nav > li + li { border-top: 1px solid #f1f5f9; }
    .mobile-drawer-extra { border-top: 1px solid #e2e8f0; }
    .mobile-drawer-extra > li > a > i { width: 22px; color: var(--primary_color); }

    /*------------------------------------------------------
        Tab bar inferior (estilo app)
    ------------------------------------------------------*/
    #mobile-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        background: #fff;
        border-top: 1px solid #e4e7ed;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #mobile-tabbar .tab-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 2px 6px;
        text-align: center;
        color: #8d99ae;
        text-decoration: none;
        font-size: 10px;
        line-height: 1.2;
    }
    #mobile-tabbar .tab-item > i { display: block; font-size: 19px; margin-bottom: 3px; }
    #mobile-tabbar .tab-item > span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #mobile-tabbar .tab-item.active { color: var(--primary_color); }
    #mobile-tabbar .tab-badge {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 4px;
        min-width: 17px;
        height: 17px;
        line-height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--primary_color);
        color: #fff;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
    }
    #mobile-tabbar .tab-badge.empty { display: none; }

    /*------------------------------------------------------
        Card de produto compacto (2 por linha)
    ------------------------------------------------------*/
    .product {
        margin: 0 0 12px;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    }

    /* a imagem fica dentro de .product-img > div > a > img, por isso o seletor solto */
    .product .product-img img {
        width: 100%;
        height: 150px !important;
        object-fit: contain;
        padding: 6px;
    }
    .product .product-img > div { height: auto !important; }

    .product .product-img .product-label { top: 6px; right: 6px; left: 6px; text-align: right; }
    .product .product-img .product-label > span {
        display: inline-block;
        border-width: 1px;
        padding: 1px 6px;
        font-size: 10px;
        border-radius: 4px;
    }

    .product .product-body { padding: 8px 10px 6px; text-align: left; }
    .product .product-body .product-category { font-size: 10px; margin-bottom: 2px; }
    .product .product-body .product-name { font-size: 12px; line-height: 1.35; margin: 0; }
    .product .product-body .product-price { font-size: 15px; margin: 4px 0 2px; }
    .product .product-body p { font-size: 11px; margin: 0; color: #8d99ae; }
    .product-name-box { height: 34px; }

    /* botão comprar deixa de flutuar sobre o card e vira bloco fixo do card */
    .product .add-to-cart,
    .product:hover .add-to-cart {
        position: static;
        padding: 0 10px 10px;
        background: transparent;
        transform: none;
    }
    .product .add-to-cart .add-to-cart-btn,
    .product .add-to-cart .add-to-cart-btn:hover {
        display: block;
        width: 100%;
        height: 36px;
        padding: 0;
        font-size: 11px;
        line-height: 34px;
        border-radius: 8px;
    }
    .product .add-to-cart .add-to-cart-btn > i { display: none; }

    /*------------------------------------------------------
        Grades: sempre 2 colunas, gutter menor
    ------------------------------------------------------*/
    #product-grid,
    .mobile-grid { margin-left: -5px; margin-right: -5px; }
    #product-grid > [class*="col-"],
    .mobile-grid > [class*="col-"] { padding-left: 5px; padding-right: 5px; }

    /* carrossel: 2 itens visíveis com espaçamento curto */
    .products-slick .product.slick-slide { margin: 0 5px 10px; }
    .products-slick .slick-list { padding-bottom: 0; margin-bottom: 0; }
    .products-tabs > .tab-pane { padding-bottom: 0; margin-bottom: 0; }

    /*------------------------------------------------------
        Banner e categorias em destaque
    ------------------------------------------------------*/
    .products-widget-slick img { max-height: 190px !important; }

    .shop { margin: 0 0 10px; border-radius: 10px; }
    .shop .shop-img > img { height: 96px !important; }
    .shop .shop-img > div { height: 96px !important; }
    .shop .shop-body { padding: 12px; width: 85%; }
    .shop .shop-body h6 { font-size: 12px; font-weight: 700; margin: 0; }

    /* listas "Mais vendidos / Top produtos" ocupam a largura toda */
    .list-dash-col { width: 100% !important; float: none; }
    .product-widget + .product-widget { margin: 16px 0; }

    /*------------------------------------------------------
        Listagem de produtos: filtros recolhíveis
    ------------------------------------------------------*/
    #breadcrumb { padding: 12px 0; margin-bottom: 12px; }
    #breadcrumb .breadcrumb-tree li { font-size: 11px; }

    .store-filter { margin: 0 0 10px; }
    .store-filter h4 { font-size: 15px; margin: 0; }
    .store-grid { display: none; }

    .mobile-filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 42px;
        margin-bottom: 12px;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        background: #fff;
        color: #2b2d42;
        font-size: 14px;
        font-weight: 600;
    }
    #aside { display: none; }
    /* o botao Filtrar herda .add-to-cart-btn, que só ganha cor dentro do card */
    #aside .add-to-cart-btn {
        height: 42px;
        border: none;
        border-radius: 8px;
        background: var(--primary_color);
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
    }
    #aside.open { display: block; margin-bottom: 16px; }
    .aside > .aside-title { font-size: 15px; margin: 10px 0 12px; }
    .checkbox-filter { max-height: 210px; overflow-y: auto; }

    /*------------------------------------------------------
        Página do produto
    ------------------------------------------------------*/
    #product-imgs { margin-bottom: 30px; }
    .product-details { margin-top: 10px; }
    .product-details .product-name { font-size: 18px; }
    .product-details .product-price { font-size: 22px; }
    .product-details .add-to-cart { display: flex; align-items: flex-end; gap: 10px; }
    .product-details .add-to-cart .qty-label { flex: 0 0 110px; margin: 0; }
    .product-details .add-to-cart .add-to-cart-btn { flex: 1 1 auto; height: 44px; border-radius: 8px; }

    /*------------------------------------------------------
        Modal de quantidade
        O layout mobile (bottom sheet) mora no <style> do
        layouts/app_cliente.blade.php, junto com o resto do
        componente. Aqui fica só o que depende de mobile.css.
    ------------------------------------------------------*/

    /*------------------------------------------------------
        Login / cadastro
    ------------------------------------------------------*/
    .login-divider .login-divider-line { display: none; }
    .login-divider p {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 6px 0 14px;
        color: #94a3b8;
        font-weight: 700;
        font-size: 12px;
    }
    .login-divider p:before,
    .login-divider p:after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e2e8f0;
    }

    /*------------------------------------------------------
        Página do carrinho
    ------------------------------------------------------*/
    .cart-body .table { font-size: 12px; margin-bottom: 12px; }
    .cart-body .table td { padding: 8px 6px; vertical-align: middle; }
    .cart-body .table img { height: 36px !important; }
    .cart-body .table span { font-size: 12px !important; }
    .cart-body a.btn,
    .cart-body a.btn-lg {
        display: block;
        width: 100%;
        float: none !important;
        margin: 0 0 8px;
        padding: 12px;
        border-radius: 8px;
        font-size: 14px;
    }
    .cart-body a.btn-dark { background: #2b2d42; color: #fff; }
    .cart-body .col-12 { padding: 0; }

    /*------------------------------------------------------
        Carrinho lateral, newsletter e rodapé
    ------------------------------------------------------*/
    /* `body` na frente porque o <style> do layout vem depois deste arquivo */
    body #cart-drawer { width: 100%; max-width: 100%; }
    body #cart-drawer .drawer-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    body #cart-toast {
        left: 12px;
        right: 12px;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        max-width: none;
    }

    #newsletter.section { padding: 20px 0; }
    .newsletter p { font-size: 15px; }
    .newsletter form .input { width: 100%; margin-bottom: 8px; }
    .newsletter form .newsletter-btn { width: 100%; }

    #footer .section { padding: 20px 0; }
    .footer { margin-top: 14px; }
    .footer-title { font-size: 14px; margin-bottom: 10px; }
    .footer-links li { font-size: 12px; }
}

/* Telas bem estreitas: a regra original do template jogava tudo para 100%.
   Produtos, categorias e rodapé continuam em 2 colunas. */
@media only screen and (max-width: 480px) {
    .col-xs-6 { width: 50%; }
    .list-dash-col { width: 100% !important; }
    .product .product-img img { height: 135px !important; }
}