/* MOBILE COMPACTO NOBREGA CELL - INICIO
   Corrige layout gigante no celular sem remover funcoes existentes.
*/

html, body{
  max-width:100% !important;
  overflow-x:hidden !important;
}

@media (max-width: 768px){
  body{
    padding-bottom:68px !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  .shell{
    width:calc(100% - 20px) !important;
  }

  .topbar{
    height:30px !important;
    min-height:30px !important;
    padding:4px 36px !important;
    gap:8px !important;
    font-size:10.5px !important;
    line-height:1.1 !important;
    overflow:hidden !important;
  }

  .topbar strong{
    gap:5px !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .topbar button{
    font-size:16px !important;
    line-height:1 !important;
  }

  .header{
    top:30px !important;
  }

  .header-main{
    height:auto !important;
    min-height:64px !important;
    grid-template-columns:54px minmax(0,1fr) 40px 40px !important;
    gap:7px !important;
    padding:7px 0 !important;
  }

  .brand img{
    width:50px !important;
    height:42px !important;
  }

  .search{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    height:36px !important;
    border-radius:9px !important;
  }

  .search input{
    font-size:13px !important;
    padding:0 12px !important;
  }

  .search button{
    width:42px !important;
    font-size:22px !important;
  }

  .whatsapp-head{
    display:none !important;
  }

  .mobile-menu-toggle,
  #mobileMenuBtn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    border-radius:11px !important;
    gap:3px !important;
  }

  .mobile-menu-toggle span{
    width:18px !important;
  }

  .mobile-menu-toggle b{
    display:none !important;
  }

  .cart-head,
  .header .cart-head{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:11px !important;
    display:grid !important;
    place-items:center !important;
    gap:0 !important;
  }

  .cart-head strong,
  .header .cart-head strong{
    display:none !important;
  }

  .cart-icon,
  .header .cart-head .cart-icon{
    font-size:21px !important;
  }

  .cart-head b,
  .header .cart-head b{
    width:18px !important;
    height:18px !important;
    font-size:10px !important;
    top:-7px !important;
    right:-5px !important;
    left:auto !important;
  }

  .header .nav,
  .nav{
    font-size:13px !important;
  }

  body.nobrega-menu-open .header .nav{
    max-height:330px !important;
    padding:9px !important;
  }

  .header .nav a,
  .header .nav button{
    min-height:38px !important;
    padding:9px 11px !important;
    font-size:13px !important;
    border-radius:10px !important;
  }

  .section{
    padding:14px 0 !important;
  }

  .section-head{
    margin-bottom:10px !important;
    gap:8px !important;
    align-items:center !important;
  }

  .section-head h2{
    font-size:13px !important;
    letter-spacing:.07em !important;
  }

  .section-head button{
    font-size:11px !important;
  }

  .hero,
  .hero.banner2360,
  .hero.banner-simples-ativo,
  .hero.hero-clean-banner-active,
  .hero.hero-image-banner-active,
  .hero.force-banner-active,
  .hero.banner-stable-active{
    height:150px !important;
    min-height:0 !important;
    max-height:170px !important;
    margin:10px auto 14px !important;
    border-radius:12px !important;
  }

  .hero-slide{
    padding:18px 28px 18px 18px !important;
  }

  .hero h1{
    font-size:22px !important;
    line-height:1.05 !important;
    margin:6px 0 !important;
  }

  .hero p{
    font-size:12px !important;
    line-height:1.3 !important;
    max-width:210px !important;
    margin-bottom:12px !important;
  }

  .hero button:not(.hero-arrow){
    padding:10px 14px !important;
    font-size:12px !important;
  }

  .hero-product{
    font-size:58px !important;
  }

  .hero-dots{
    bottom:9px !important;
    gap:7px !important;
  }

  .hero-dots button{
    width:7px !important;
    height:7px !important;
  }

  .benefits{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
    padding:12px 0 !important;
  }

  .benefits div{
    grid-template-columns:30px 1fr !important;
    column-gap:8px !important;
  }

  .benefits span{
    width:30px !important;
    height:30px !important;
    font-size:14px !important;
  }

  .benefits strong{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .benefits small{
    font-size:9.5px !important;
    line-height:1.15 !important;
  }

  .promo-grid,
  .products,
  #productsGrid,
  #promocoesGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .combo-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .categories,
  #categories,
  #categoriesGrid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:7px !important;
    padding:8px !important;
  }

  .product-card,
  .promo-card,
  .combo-card,
  .category-card{
    border-radius:10px !important;
  }

  .product-card:hover,
  .promo-card:hover,
  .combo-card:hover,
  .category-card:hover{
    transform:none !important;
  }

  .pimg,
  .product-card .pimg,
  .promo-card .pimg,
  .product-card .prod-img,
  .product-card .product-img,
  .product-card .product-image{
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
    aspect-ratio:auto !important;
    padding:6px !important;
    font-size:42px !important;
    border-radius:10px 10px 4px 4px !important;
  }

  .pimg img,
  .product-card img,
  .promo-card img{
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  .pbody,
  .product-card .prod-body,
  .product-card .product-body,
  .product-card .card-body{
    padding:9px !important;
  }

  .pname,
  .product-card h3,
  .product-card h4,
  .product-card .prod-name,
  .product-card .product-name{
    font-size:12px !important;
    line-height:1.2 !important;
    min-height:30px !important;
    margin-bottom:5px !important;
  }

  .old{
    font-size:10px !important;
    margin-top:5px !important;
  }

  .price,
  .product-card .price,
  .product-card .prod-price{
    font-size:17px !important;
    line-height:1.05 !important;
  }

  .installment,
  .product-card .parcel,
  .product-card small{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  .stars{
    font-size:11px !important;
    margin-top:5px !important;
  }

  .discount-tag,
  .promo-tag{
    left:7px !important;
    top:7px !important;
    padding:3px 6px !important;
    font-size:9px !important;
    border-radius:5px !important;
  }

  .add{
    right:7px !important;
    bottom:7px !important;
    width:28px !important;
    height:28px !important;
    font-size:16px !important;
  }

  .category-card{
    padding:8px 4px !important;
    gap:6px !important;
  }

  .category-card span{
    width:32px !important;
    height:32px !important;
    font-size:17px !important;
  }

  .category-card strong{
    font-size:9.5px !important;
    line-height:1.1 !important;
    text-align:center !important;
  }

  .combo-card{
    padding:11px !important;
  }

  .combo-icons{
    height:62px !important;
    font-size:34px !important;
    gap:8px !important;
  }

  .combo-icons span{
    font-size:20px !important;
  }

  .combo-card .combo-icons.combo-photo,
  .combo-card.has-combo-photo .combo-icons.combo-photo,
  .combo-card .combo-visual.combo-photo{
    height:116px !important;
    min-height:116px !important;
    max-height:116px !important;
    padding:7px !important;
    margin-bottom:9px !important;
    border-radius:12px !important;
  }

  .combo-card h3{
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .combo-card small{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  .combo-prices{
    margin-top:8px !important;
  }

  .combo-prices strong{
    font-size:16px !important;
    margin-right:5px !important;
  }

  .combo-prices del,
  .combo-prices p{
    font-size:10px !important;
  }

  .combo-builder{
    padding:16px !important;
    border-radius:12px !important;
    display:block !important;
  }

  .combo-builder h2{
    font-size:22px !important;
  }

  .combo-builder p{
    font-size:12px !important;
  }

  .combo-info{
    margin-top:12px !important;
    padding:11px 12px !important;
  }

  .review-area,
  .budget-box,
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  input, select, textarea{
    padding:10px !important;
    font-size:13px !important;
    border-radius:8px !important;
  }

  .review-form,
  .budget-box form{
    padding:14px !important;
    gap:8px !important;
  }

  .budget-box{
    padding:16px !important;
  }

  .footer{
    padding:24px 0 78px !important;
    margin-top:16px !important;
  }

  .footer img{
    width:68px !important;
    height:68px !important;
  }

  .footer p,
  .footer span,
  .footer a{
    font-size:12px !important;
  }

  .footer-rights{
    width:calc(100% - 20px) !important;
    margin-top:16px !important;
    padding-top:12px !important;
    font-size:11px !important;
    gap:6px !important;
  }

  .cart{
    width:100% !important;
    max-width:100% !important;
    height:84vh !important;
    top:auto !important;
    bottom:0 !important;
    border-radius:18px 18px 0 0 !important;
  }

  .cart-header{
    padding:12px 14px !important;
  }

  .cart-header h3{
    font-size:18px !important;
  }

  .cart-items{
    padding:10px !important;
    gap:8px !important;
  }

  .cart-row{
    grid-template-columns:50px 1fr 66px !important;
    gap:8px !important;
    padding:9px !important;
    border-radius:12px !important;
  }

  .cart-row .mini,
  .cart-row .mini.mini--photo{
    width:50px !important;
    height:50px !important;
    font-size:28px !important;
    border-radius:10px !important;
  }

  .cart-product-info strong{
    font-size:12px !important;
    line-height:1.2 !important;
    padding-right:24px !important;
  }

  .cart-product-info small{
    font-size:10px !important;
  }

  .cart-row-right b{
    font-size:12px !important;
    padding:5px 6px !important;
  }

  .qty button{
    width:24px !important;
    height:24px !important;
  }

  .remove-cart{
    width:24px !important;
    height:24px !important;
    font-size:18px !important;
  }

  .cart-footer{
    padding:10px !important;
    max-height:42vh !important;
    overflow:auto !important;
  }

  .cart-footer input{
    height:38px !important;
    padding:9px !important;
    font-size:12px !important;
  }

  #superfreteBox,
  .superfrete-box{
    padding:10px !important;
    border-radius:12px !important;
  }

  .retirada-loja-btn{
    padding:10px !important;
    border-radius:12px !important;
  }

  .retirada-loja-btn strong{
    font-size:12px !important;
  }

  .retirada-loja-btn small{
    font-size:10px !important;
  }

  .checkout{
    min-height:46px !important;
    padding:11px !important;
    font-size:13px !important;
    border-radius:11px !important;
  }

  .checkout span{
    font-size:17px !important;
  }

  .mobile-checkout{
    height:60px !important;
    grid-template-columns:1fr 86px 96px !important;
    gap:6px !important;
    padding:7px 9px !important;
  }

  .mobile-checkout button{
    min-height:42px !important;
    padding:8px !important;
    font-size:11px !important;
    border-radius:10px !important;
  }

  #nobregaFloatWhatsapp,
  .nobrega-floating-whatsapp{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    padding:0 !important;
    right:12px !important;
    bottom:68px !important;
    border-radius:999px !important;
  }

  #nobregaFloatWhatsapp .nfw-text,
  .nobrega-floating-whatsapp .nfw-text{
    display:none !important;
  }

  #nobregaFloatWhatsapp svg{
    width:26px !important;
    height:26px !important;
  }

  #nobregaSidebarFloatBtn{
    top:76px !important;
    left:8px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:0 !important;
    border-radius:12px !important;
  }

  #nobregaSidebarFloatBtn small,
  #nobregaSidebarFloatBtn strong{
    display:none !important;
  }

  #nobregaSidebarFloatBtn .nobrega-side-lines{
    width:18px !important;
    height:14px !important;
  }

  #nobregaSidebarPanel{
    width:min(300px, calc(100vw - 24px)) !important;
  }

  .nobrega-sidebar-head{
    padding:14px 13px 12px !important;
  }

  .nobrega-sidebar-brand img{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    padding:4px !important;
  }

  .nobrega-sidebar-brand small{
    font-size:9px !important;
  }

  .nobrega-sidebar-brand strong{
    font-size:15px !important;
  }

  .nobrega-sidebar-close{
    width:32px !important;
    height:32px !important;
    font-size:22px !important;
    right:12px !important;
    top:12px !important;
  }

  .nobrega-sidebar-body{
    padding:10px !important;
  }

  .nobrega-side-link{
    min-height:40px !important;
    padding:9px 10px !important;
    margin:5px 0 !important;
    border-radius:12px !important;
    gap:9px !important;
    font-size:12px !important;
  }

  .nobrega-side-link .ico{
    width:28px !important;
    height:28px !important;
    font-size:14px !important;
    border-radius:10px !important;
  }

  .nobrega-side-link em{
    display:none !important;
  }

  .nobrega-sidebar-group-title{
    margin:10px 6px 6px !important;
    font-size:9px !important;
  }

  .nobrega-sidebar-cats{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  .nobrega-sidebar-cats .nobrega-side-cat{
    min-height:34px !important;
    padding:7px !important;
    font-size:10px !important;
    border-radius:10px !important;
  }

  .nobrega-sidebar-whats{
    min-height:42px !important;
    border-radius:12px !important;
    font-size:12px !important;
  }

  .product-modal{
    padding:8px !important;
  }

  .product-modal-card{
    max-height:90vh !important;
    border-radius:14px !important;
  }

  .modal-media,
  .product-modal .modal-media{
    min-height:150px !important;
    font-size:72px !important;
  }

  .modal-info{
    padding:18px 14px !important;
    gap:10px !important;
  }

  .modal-info h2{
    font-size:20px !important;
  }

  .modal-price-row strong{
    font-size:25px !important;
  }

  .modal-actions button{
    padding:11px !important;
    font-size:12px !important;
  }
}

@media (max-width: 430px){
  .shell{
    width:calc(100% - 16px) !important;
  }

  .topbar{
    height:28px !important;
    min-height:28px !important;
    padding:4px 32px !important;
    font-size:9.5px !important;
  }

  .header{
    top:28px !important;
  }

  .header-main{
    grid-template-columns:50px minmax(0,1fr) 38px 38px !important;
    min-height:58px !important;
    gap:6px !important;
  }

  .brand img{
    width:47px !important;
    height:39px !important;
  }

  .search{
    height:34px !important;
  }

  .mobile-menu-toggle,
  #mobileMenuBtn,
  .cart-head,
  .header .cart-head{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .hero,
  .hero.banner2360,
  .hero.banner-simples-ativo,
  .hero.hero-clean-banner-active,
  .hero.hero-image-banner-active,
  .hero.force-banner-active,
  .hero.banner-stable-active{
    height:132px !important;
    max-height:145px !important;
  }

  .hero h1{
    font-size:19px !important;
  }

  .hero p{
    display:none !important;
  }

  .promo-grid,
  .products,
  #productsGrid,
  #promocoesGrid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .combo-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .categories,
  #categories,
  #categoriesGrid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:6px !important;
    padding:7px !important;
  }

  .pimg,
  .product-card .pimg,
  .promo-card .pimg,
  .product-card .prod-img,
  .product-card .product-img,
  .product-card .product-image{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
    font-size:36px !important;
  }

  .pbody,
  .product-card .prod-body,
  .product-card .product-body,
  .product-card .card-body{
    padding:8px !important;
  }

  .pname,
  .product-card h3,
  .product-card h4,
  .product-card .prod-name,
  .product-card .product-name{
    font-size:11px !important;
    min-height:28px !important;
  }

  .price,
  .product-card .price,
  .product-card .prod-price{
    font-size:15.5px !important;
  }

  .category-card span{
    width:29px !important;
    height:29px !important;
    font-size:15px !important;
  }

  .category-card strong{
    font-size:8.8px !important;
  }

  .combo-card .combo-icons.combo-photo,
  .combo-card.has-combo-photo .combo-icons.combo-photo,
  .combo-card .combo-visual.combo-photo{
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
  }

  .combo-card{
    padding:9px !important;
  }

  .combo-card h3{
    font-size:11px !important;
  }

  .cart-row{
    grid-template-columns:46px 1fr 58px !important;
  }

  .cart-row .mini,
  .cart-row .mini.mini--photo{
    width:46px !important;
    height:46px !important;
  }

  #nobregaSidebarPanel{
    width:min(292px, calc(100vw - 18px)) !important;
  }

  .mobile-checkout{
    grid-template-columns:1fr 80px 90px !important;
  }
}
/* MOBILE COMPACTO NOBREGA CELL - FIM */