/* ============================================================
   SUMMER'S BOAT · RESPONSIVE FINAL
   2026-09-22
   Mobile-first safety layer loaded after every legacy stylesheet.
   Goal: keep all sections inside the viewport without changing
   the desktop design or the brand palette.
   ============================================================ */

:root{
  --aio-mobile-gutter:12px;
  --aio-mobile-bottom-nav:74px;
  --aio-mobile-safe-bottom:env(safe-area-inset-bottom,0px);
}

html{
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
body{
  max-width:100%;
  overflow-x:clip;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}

/* Tablet safety: containers never exceed the viewport. */
@media (max-width:1024px){
  .container,
  .page-content>.container,
  .header .container,
  .footer .container{
    max-width:100%!important;
    min-width:0!important;
  }

  .page-home .aio-modern-showcase .container,
  .aio-category-mosaic .container,
  .aio-sensor3d-section .container,
  .aio-flash-shell.container,
  .aio-client-stories__shell.container{
    max-width:calc(100% - 24px)!important;
    width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ============================================================
   MOBILE · global layout
   ============================================================ */
@media (max-width:767px){
  :root{
    --aio-mobile-gutter:10px;
    --aio-mobile-bottom-nav:72px;
  }

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

  body,
  .application,
  .site-main,
  main,
  .page-content{
    min-width:0!important;
    max-width:100%!important;
  }

  .application{
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:calc(var(--aio-mobile-bottom-nav) + var(--aio-mobile-safe-bottom))!important;
  }

  .container,
  .page-content>.container,
  .footer .container{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:var(--aio-mobile-gutter)!important;
    padding-right:var(--aio-mobile-gutter)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* Never allow desktop widths or transforms to create lateral scroll. */
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide,
  .list-product,
  .product,
  .product-wrapper,
  .catalog-content,
  .showcase-catalog,
  .aio-modern-showcase,
  .aio-flash-sale,
  .aio-client-stories,
  .aio-category-mosaic,
  .aio-sensor3d-section,
  .aio-home-mini-promos{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  table{
    max-width:100%!important;
  }
  .rte,
  .board_htm,
  .aio-description-copy{
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .rte img,
  .board_htm img,
  .aio-description-copy img{
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
  }

  /* ==========================================================
     Header + freight + mobile menu
     ========================================================== */
  #aio-freight-topbar-root,
  #aio-freight-topbar-root .aio-freight-topbar{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  #aio-freight-topbar-root .aio-freight-progress{
    min-height:58px!important;
    padding:6px 0!important;
  }
  #aio-freight-topbar-root .aio-freight-progress-inner{
    width:calc(100% - 16px)!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px 8px!important;
  }
  #aio-freight-topbar-root .aio-freight-meter-wrap{
    min-width:0!important;
  }
  #aio-freight-topbar-root .aio-freight-meter{
    min-width:0!important;
  }
  #aio-freight-topbar-root .aio-freight-message{
    grid-column:1/-1!important;
    padding-left:0!important;
    text-align:center!important;
    font-size:10px!important;
  }
  #aio-freight-topbar-root .aio-freight-location{
    min-width:0!important;
  }
  #aio-freight-topbar-root .aio-freight-location-button{
    max-width:46vw!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
  }
  #aio-freight-topbar-root .aio-freight-location-popover{
    position:fixed!important;
    top:auto!important;
    right:10px!important;
    bottom:calc(var(--aio-mobile-bottom-nav) + 12px + var(--aio-mobile-safe-bottom))!important;
    left:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:70dvh!important;
    overflow:auto!important;
  }

  .header,
  .header>.bg,
  .header .line{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .header .bg .line.container,
  .header .line{
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    gap:8px!important;
    padding:9px 10px 11px!important;
  }
  .header .header-menu{
    width:42px!important;
    height:42px!important;
    padding:10px 9px!important;
    border-radius:12px!important;
  }
  .header .logo{
    max-width:min(52vw,188px)!important;
    min-width:0!important;
  }
  .header .logo img,
  .header .logo svg{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:52px!important;
    margin:auto!important;
  }
  .header .header-search-wrapper{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    margin-top:1px!important;
    padding-left:12px!important;
  }
  .header .header-search-wrapper .input-search{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    font-size:16px!important;
  }
  .header .header-search-wrapper .button-search{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
  }

  .menu-mobile.aio-mobile-menu{
    width:min(92vw,390px)!important;
    max-width:min(92vw,390px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0 18px 18px 0!important;
  }
  .aio-mobile-menu__header{
    padding:16px 14px!important;
  }
  .aio-mobile-menu__content{
    padding:12px 10px calc(18px + var(--aio-mobile-safe-bottom))!important;
    overscroll-behavior:contain!important;
  }
  .aio-mobile-menu__quick-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .aio-mobile-menu__quick-card{
    min-width:0!important;
    min-height:64px!important;
    padding:9px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  .aio-mobile-menu__quick-card .aio-mobile-menu__quick-icon{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    border-radius:10px!important;
  }
  .aio-mobile-menu__item{
    border-radius:14px!important;
  }
  .aio-mobile-menu__link{
    min-width:0!important;
    padding:10px 11px!important;
  }
  .aio-mobile-menu__label,
  .aio-mobile-menu__sublink,
  .aio-mobile-menu__third-level a{
    overflow-wrap:anywhere!important;
  }

  /* Fixed bottom navigation respects notches and narrow devices. */
  .menu-bar-mobile{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    min-height:64px!important;
    height:auto!important;
    padding:8px 8px calc(8px + var(--aio-mobile-safe-bottom))!important;
    gap:2px!important;
    box-sizing:border-box!important;
  }
  .menu-bar-mobile>div{
    flex:1 1 0!important;
    min-width:0!important;
    padding:0 2px!important;
  }
  .menu-bar-mobile a{
    width:100%!important;
    min-width:0!important;
  }
  .menu-bar-mobile svg{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
    margin-bottom:4px!important;
  }
  .menu-bar-mobile div>p,
  .menu-bar-mobile a p{
    max-width:100%!important;
    margin:0!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .search-bar-mobile{
    left:0!important;
    right:0!important;
    bottom:calc(64px + var(--aio-mobile-safe-bottom))!important;
    width:100%!important;
    max-width:100%!important;
  }

  /* ==========================================================
     Dynamic hero banner
     Mobile artwork is 1080x1350 by convention, so use 4:5.
     ========================================================== */
  .banner-home,
  .banner-home .swiper-container,
  .banner-home .swiper-wrapper,
  .banner-home .swiper-slide,
  .banner-home .slide__item,
  .banner-home .slide__item__image{
    max-width:100%!important;
    min-width:0!important;
  }

  .banner-home.aio-dynamic-home-banner{
    width:100%!important;
    height:clamp(400px,125vw,620px)!important;
    min-height:0!important;
    max-height:620px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .banner-home.aio-dynamic-home-banner .swiper-container,
  .banner-home.aio-dynamic-home-banner .swiper-wrapper,
  .banner-home.aio-dynamic-home-banner .swiper-slide,
  .banner-home.aio-dynamic-home-banner .slide__item,
  .banner-home.aio-dynamic-home-banner .slide__item__image{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
  }
  .banner-home.aio-dynamic-home-banner .slide__item__image img{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-position:center center!important;
  }
  .banner-home.aio-dynamic-home-banner[data-aio-dynamic-fit="cover"] .slide__item__image img{
    object-fit:cover!important;
  }
  .banner-home.aio-dynamic-home-banner[data-aio-dynamic-fit="contain"] .slide__item__image img{
    object-fit:contain!important;
  }
  .banner-home .swiper-button-prev,
  .banner-home .swiper-button-next{
    width:34px!important;
    height:34px!important;
  }
  .banner-home .swiper-button-prev{left:7px!important}
  .banner-home .swiper-button-next{right:7px!important}
  .banner-home .swiper-container .dots{
    bottom:8px!important;
    max-width:calc(100% - 20px)!important;
  }

  /* Hotspot product cards cannot escape the screen. */
  .aio-banner-hotspot-card{
    width:min(286px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
  }

  /* ==========================================================
     Mini banners: swipeable row instead of a very tall stack.
     ========================================================== */
  .aio-home-mini-promos{
    width:100%!important;
    padding:14px 0 8px!important;
    overflow:hidden!important;
  }
  .aio-home-mini-promos .container{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }
  .aio-mini-promos-grid{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(86vw,420px)!important;
    grid-template-columns:none!important;
    gap:10px!important;
    width:100%!important;
    padding:0 10px 7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:10px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .aio-mini-promos-grid::-webkit-scrollbar{display:none!important}
  .aio-mini-promo-card{
    min-width:0!important;
    width:100%!important;
    aspect-ratio:458/239!important;
    overflow:hidden!important;
    scroll-snap-align:center!important;
    border-radius:12px!important;
  }
  .aio-mini-promo-card a,
  .aio-mini-promo-card img{
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  .aio-mini-promo-card img{
    object-fit:cover!important;
    object-position:center!important;
  }

  /* ==========================================================
     3D / featured banner
     Uses its dedicated mobile artwork and fills the whole card.
     ========================================================== */
  .aio-sensor3d-section{
    width:100%!important;
    padding:12px 0 18px!important;
    overflow:hidden!important;
  }
  .aio-sensor3d-section>.container{
    width:calc(100% - 16px)!important;
    max-width:100%!important;
    padding:0!important;
  }
  .aio-sensor3d--image .aio-sensor3d__visual{
    width:100%!important;
    height:clamp(360px,112.5vw,610px)!important;
    min-height:0!important;
    max-height:610px!important;
    border-radius:14px!important;
  }
  .aio-sensor3d--video .aio-sensor3d__visual{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
    border-radius:14px!important;
  }
  .aio-sensor3d__picture,
  .aio-sensor3d__image,
  .aio-sensor3d__media{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
  }
  .aio-sensor3d[data-media-fit="cover"] .aio-sensor3d__image,
  .aio-sensor3d[data-media-fit="cover"] .aio-sensor3d__media{
    object-fit:cover!important;
  }
  .aio-sensor3d[data-media-fit="contain"] .aio-sensor3d__image,
  .aio-sensor3d[data-media-fit="contain"] .aio-sensor3d__media{
    object-fit:contain!important;
  }
  .aio-sensor3d__textblock{
    top:7%!important;
    left:6%!important;
    width:88%!important;
    max-width:88%!important;
  }
  .aio-sensor3d__text1{font-size:clamp(10px,3vw,13px)!important}
  .aio-sensor3d__text2{font-size:clamp(20px,6.4vw,30px)!important;line-height:1.03!important}
  .aio-sensor3d__text3{font-size:clamp(10px,3vw,13px)!important;max-width:88%!important}
  .aio-sensor3d__actions{
    left:6%!important;
    right:6%!important;
    bottom:10%!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    gap:7px!important;
  }
  .aio-sensor3d__button{
    min-width:0!important;
    min-height:42px!important;
    padding:0 10px!important;
    font-size:10.5px!important;
  }
  .aio-sensor3d__hint{
    bottom:1.8%!important;
  }

  /* ==========================================================
     Home showcase
     ========================================================== */
  .page-home .aio-modern-showcase{
    width:100%!important;
    padding:18px 0 24px!important;
  }
  .page-home .aio-modern-showcase .container{
    width:100%!important;
    max-width:100%!important;
    padding:0 10px!important;
  }
  .page-home .aio-showcase-heading{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .page-home .aio-modern-showcase .aio-showcase-heading .title-section{
    font-size:clamp(20px,6vw,25px)!important;
    line-height:1.08!important;
  }
  .page-home .aio-showcase-heading-copy p{
    font-size:11px!important;
  }
  .page-home .aio-showcase-see-all{
    flex:0 0 auto!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  .page-home .aio-featured-showcase-grid{
    display:block!important;
  }
  .page-home .aio-featured-showcase-banner{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:16/9!important;
    margin-bottom:10px!important;
  }
  .page-home .aio-modern-showcase .list-product>.item,
  .page-home .aio-modern-showcase .swiper-wrapper>.swiper-slide{
    width:min(82vw,330px)!important;
    max-width:min(82vw,330px)!important;
    flex:0 0 min(82vw,330px)!important;
  }
  .page-home .aio-modern-showcase .product{
    width:100%!important;
    max-width:100%!important;
  }
  .page-home .aio-modern-showcase .product>.image{
    width:100%!important;
    height:clamp(175px,52vw,215px)!important;
    min-height:clamp(175px,52vw,215px)!important;
    flex-basis:clamp(175px,52vw,215px)!important;
  }
  .page-home .aio-modern-showcase .product .space-image{
    height:calc(clamp(175px,52vw,215px) - 8px)!important;
  }
  .page-home .aio-modern-showcase .product .product-price .current-price,
  .page-home .aio-modern-showcase .product .product-price .aio-current-price{
    font-size:clamp(23px,7vw,28px)!important;
  }

  /* ==========================================================
     Catalog / search product grid
     2 columns where practical, 1 column on very narrow phones.
     ========================================================== */
  .page-catalog .catalog-cols,
  .page-search .catalog-cols,
  .page-catalog .catalog-cols .col-content,
  .page-search .catalog-cols .col-content,
  .page-catalog .catalog-content,
  .page-search .catalog-content,
  .page-catalog .showcase-catalog,
  .page-search .showcase-catalog{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .page-catalog .showcase-catalog .list-product,
  .page-search .showcase-catalog .list-product,
  .catalog-content .showcase-catalog .list-product{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin:0!important;
    padding:0 8px 14px!important;
  }
  .page-catalog .showcase-catalog .list-product>.item,
  .page-search .showcase-catalog .list-product>.item,
  .catalog-content .showcase-catalog .list-product>.item{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:unset!important;
    margin:0!important;
    padding:0!important;
  }
  .catalog-content .showcase-catalog .product{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .catalog-content .showcase-catalog .product>.image{
    height:clamp(140px,41vw,185px)!important;
    min-height:clamp(140px,41vw,185px)!important;
    flex-basis:clamp(140px,41vw,185px)!important;
    padding:7px 7px 0!important;
  }
  .catalog-content .showcase-catalog .product .space-image{
    height:calc(clamp(140px,41vw,185px) - 7px)!important;
  }
  .catalog-content .showcase-catalog .product>.product-info{
    min-height:132px!important;
    padding:8px 9px 6px!important;
  }
  .catalog-content .showcase-catalog .product .product-info .product-name{
    min-height:37px!important;
    max-height:37px!important;
    font-size:11.5px!important;
    line-height:1.4!important;
  }
  .catalog-content .showcase-catalog .product .product-price .current-price,
  .catalog-content .showcase-catalog .product .product-price .aio-current-price,
  .catalog-content .showcase-catalog .product .product-price .price .current-price,
  .catalog-content .showcase-catalog .product .product-price .price .aio-current-price{
    font-size:clamp(20px,6vw,24px)!important;
    letter-spacing:-.4px!important;
    white-space:nowrap!important;
  }
  .catalog-content .showcase-catalog .product>.plugoo-countdown{
    width:calc(100% - 16px)!important;
    margin:4px 8px 6px!important;
  }
  .catalog-content .showcase-catalog .product>.plugoo-countdown .pg-timer-title{
    display:none!important;
  }
  .catalog-content .showcase-catalog .product>.actions{
    padding:0 8px!important;
  }
  .catalog-content .showcase-catalog .product .actions .add-to-cart.botao,
  .catalog-content .showcase-catalog .product .actions .product-button,
  .catalog-content .showcase-catalog .product .actions .aio-card-buy{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 7px!important;
    font-size:10px!important;
  }
  .catalog-content .showcase-catalog .product>.aio-product-details{
    margin:6px 8px 9px!important;
    min-height:38px!important;
    height:38px!important;
    padding:0 6px!important;
    font-size:9.5px!important;
  }
  .aio-card-whatsapp .btn-pay-wp,
  .catalog-content .showcase-catalog .aio-card-whatsapp .btn-pay-wp{
    width:100%!important;
    min-width:0!important;
    font-size:9.5px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  /* ==========================================================
     Oferta relâmpago
     ========================================================== */
  .aio-flash-sale{
    width:100%!important;
    max-width:100%!important;
    margin:16px 0!important;
    padding:16px 0 18px!important;
  }
  .aio-flash-shell.container{
    width:100%!important;
    max-width:100%!important;
    padding:0 10px!important;
  }
  .aio-flash-heading-actions,
  .aio-flash-timer{
    width:100%!important;
    min-width:0!important;
  }
  .aio-flash-timer{
    gap:5px!important;
    padding:5px!important;
  }
  .aio-flash-timer-clock{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
  }
  .aio-flash-time-box{
    min-width:0!important;
    padding:6px 4px!important;
  }
  .aio-flash-time-box strong{
    font-size:20px!important;
  }
  .aio-flash-products-wrap{
    width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
  }
  .aio-flash-track{
    --aio-flash-mobile-card-width:min(78vw,300px)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* ==========================================================
     Benefits, mosaic and customer stories
     ========================================================== */
  .aio-benefits-v3,
  .aio-benefits-v3__inner{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .aio-benefits-v3__grid{
    padding-left:8px!important;
    padding-right:8px!important;
    scroll-padding-inline:8px!important;
  }
  .aio-benefits-v3__item{
    flex:0 0 min(76vw,235px)!important;
    min-width:min(76vw,235px)!important;
  }

  .aio-category-mosaic{
    width:100%!important;
    overflow:hidden!important;
  }
  .aio-category-mosaic .container{
    width:100%!important;
    max-width:100%!important;
    padding:0 8px!important;
  }
  .aio-category-mosaic__grid{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .aio-category-mosaic__item{
    min-width:0!important;
    max-width:100%!important;
  }

  .aio-client-stories{
    width:100%!important;
    overflow:hidden!important;
    padding:26px 0 28px!important;
  }
  .aio-client-stories__shell.container{
    width:100%!important;
    max-width:100%!important;
    padding:0 10px!important;
  }
  .aio-client-stories__intro{
    width:100%!important;
    max-width:100%!important;
  }
  .aio-client-stories__intro h2{
    font-size:clamp(25px,7.5vw,31px)!important;
  }
  .aio-client-stories__instagram-mini{
    width:100%!important;
    max-width:100%!important;
  }
  .aio-client-stories__instagram-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .aio-client-stories__track{
    padding-right:10px!important;
  }
  .aio-client-story{
    flex:0 0 min(78vw,290px)!important;
    min-width:min(78vw,290px)!important;
  }
  .aio-client-story__media-wrap{
    height:min(118vw,440px)!important;
  }

  /* ==========================================================
     Floating video / social buttons
     Keep the stack clear of the fixed bottom menu.
     ========================================================== */
  .plugoo-wp-float,
  .plugoo-wp-float[data-position="direita"]{
    right:10px!important;
    bottom:calc(84px + var(--aio-mobile-safe-bottom))!important;
  }
  .plugoo-insta-float,
  .plugoo-insta-float[data-position="direita"]{
    right:10px!important;
    bottom:calc(136px + var(--aio-mobile-safe-bottom))!important;
  }
  .aio-video-widget--home .aio-video-launcher,
  .aio-video-widget--home.aio-video-effect-premium .aio-video-launcher,
  .aio-video-widget--home.aio-video-launcher-circle .aio-video-launcher,
  .aio-video-widget--home.aio-video-launcher-card .aio-video-launcher{
    right:7px!important;
    bottom:calc(202px + var(--aio-mobile-safe-bottom))!important;
  }
  .aio-video-widget--home .aio-video-panel,
  .aio-video-widget--home.aio-video-format-horizontal .aio-video-panel,
  .aio-video-widget--home.aio-video-format-vertical .aio-video-panel{
    left:8px!important;
    right:auto!important;
    top:92px!important;
    bottom:auto!important;
    width:min(300px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 180px - var(--aio-mobile-safe-bottom))!important;
    overflow:auto!important;
  }

  /* ==========================================================
     Cart drawer
     ========================================================== */
  .aio-plus-cart-drawer{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
  .aio-plus-cart-header{
    min-height:68px!important;
    padding:12px 14px!important;
  }
  .aio-plus-cart-scroll{
    padding:8px 12px 18px!important;
  }
  .aio-plus-cart-footer{
    padding:12px 12px calc(13px + var(--aio-mobile-safe-bottom))!important;
  }
  .aio-plus-cart-item{
    grid-template-columns:62px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .aio-plus-cart-item-image{
    width:62px!important;
    height:62px!important;
  }
  .aio-plus-cart-item-name{
    font-size:13px!important;
  }
  .aio-plus-cart-item-actions{
    flex-wrap:wrap!important;
  }
  .aio-plus-qty{
    min-width:112px!important;
  }

  /* ==========================================================
     PDP
     ========================================================== */
  .aio-product-page,
  .aio-product-page .container,
  .aio-product-page .aio-product-hero,
  .aio-product-page .product-gallery,
  .aio-product-page .product-form{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .aio-product-page .aio-product-hero{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .aio-product-page .product-form{
    padding:14px!important;
    border-radius:12px!important;
  }
  .aio-product-page .product-form .product-name{
    font-size:clamp(21px,6.3vw,27px)!important;
    line-height:1.12!important;
  }
  .aio-product-page .product-price-tray .PrecoPrincipal{
    font-size:clamp(28px,8vw,34px)!important;
  }
  .aio-product-page .product-tabs .tabs-nav{
    width:100%!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .aio-product-page .product-tabs .tabs-nav::-webkit-scrollbar{display:none!important}
  .aio-product-page .product-tabs .tabs-nav .tab-link{
    font-size:13px!important;
  }
  .aio-product-page .aio-properties-card{
    width:100%!important;
    overflow-x:auto!important;
  }
  .aio-product-page .aio-properties-card table{
    min-width:0!important;
  }
  .aio-product-page .aio-product-know-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  /* ==========================================================
     Popups, B2B and newsletter
     ========================================================== */
  .aio-first-purchase,
  .aio-whatsapp-newsletter,
  .aio-news-backdrop,
  .aio-b2b-backdrop{
    max-width:100vw!important;
  }
  .aio-first-purchase__dialog,
  .aio-news-dialog,
  .aio-b2b-shell{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    margin:8px!important;
    overflow:auto!important;
  }
  .aio-news-dialog{
    grid-template-columns:1fr!important;
  }
  .aio-news-visual{
    display:none!important;
  }

  /* ==========================================================
     Footer
     ========================================================== */
  .footer,
  .footer .footer-main,
  .footer .cols{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .footer .footer-main .container,
  .footer .cols .container,
  .footer .copy .container{
    width:100%!important;
    max-width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .footer .box,
  .footer .newsletter,
  .footer .logo-box,
  .footer .social-media{
    width:100%!important;
    max-width:100%!important;
  }
  .footer .payment-list,
  .footer .security-seals{
    max-width:100%!important;
  }
}

/* Narrow phones: prioritize readability over squeezing. */
@media (max-width:380px){
  :root{--aio-mobile-gutter:8px}

  .header .bg .line.container,
  .header .line{
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .header .header-menu{
    width:40px!important;
    height:40px!important;
  }
  .header .logo{
    max-width:54vw!important;
  }
  .aio-mobile-menu__quick-links{
    grid-template-columns:1fr!important;
  }
  .menu-bar-mobile div>p,
  .menu-bar-mobile a p{
    font-size:9px!important;
  }

  .banner-home.aio-dynamic-home-banner{
    height:125vw!important;
    min-height:0!important;
  }

  .page-catalog .showcase-catalog .list-product,
  .page-search .showcase-catalog .list-product,
  .catalog-content .showcase-catalog .list-product{
    grid-template-columns:1fr!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .catalog-content .showcase-catalog .product>.image{
    height:min(68vw,230px)!important;
    min-height:min(68vw,230px)!important;
    flex-basis:min(68vw,230px)!important;
  }
  .catalog-content .showcase-catalog .product .space-image{
    height:calc(min(68vw,230px) - 7px)!important;
  }

  .aio-sensor3d--image .aio-sensor3d__visual{
    height:112.5vw!important;
  }
  .aio-sensor3d__actions{
    flex-direction:column!important;
    bottom:7%!important;
  }
  .aio-sensor3d__button{
    width:100%!important;
    min-height:38px!important;
  }
  .aio-sensor3d__hint{display:none!important}

  .aio-client-stories__instagram-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Landscape phones: keep critical UI usable. */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .menu-mobile.aio-mobile-menu{
    width:min(78vw,420px)!important;
  }
  .aio-video-widget--home .aio-video-panel,
  .aio-video-widget--home.aio-video-format-horizontal .aio-video-panel,
  .aio-video-widget--home.aio-video-format-vertical .aio-video-panel{
    top:10px!important;
    max-height:calc(100dvh - 20px)!important;
  }
  .aio-first-purchase__dialog,
  .aio-news-dialog,
  .aio-b2b-shell{
    max-height:calc(100dvh - 8px)!important;
  }
}

/* ============================================================
   SUMMER'S BOAT · MOBILE REFINEMENT 2026-09-22
   Compact categories + bottom-sheet navigation + blog palette
   + footer whitespace correction.
   ============================================================ */

/* Blog / Guia Summer's Boat: use the actual Summer's palette on desktop too. */
.aio-reviews-blog{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfc 100%)!important;
}
.aio-blog-card__heading strong{
  color:#252525!important;
}
.aio-blog-card__heading span{
  background:#007f95!important;
}
.aio-blog-card__heading a{
  color:#007f95!important;
}
.aio-blog-feature{
  border-color:#cfe5e9!important;
  box-shadow:0 14px 36px rgba(0,127,149,.10)!important;
  background:#ffffff!important;
}
.aio-blog-feature__media{
  background:linear-gradient(135deg,#073b45,#007f95)!important;
}
.aio-blog-feature__content{
  background:linear-gradient(145deg,#052e36 0%,#075665 58%,#007f95 100%)!important;
  color:#fff!important;
}
.aio-blog-feature__content small{
  color:#44e2d9!important;
}
.aio-blog-feature__content h3{
  color:#fff!important;
}
.aio-blog-feature__content p{
  color:rgba(255,255,255,.82)!important;
}
.aio-blog-feature__button{
  background:#007f95!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(0,127,149,.22)!important;
}
.aio-blog-feature__button:hover{
  background:#00697b!important;
  filter:none!important;
}
.aio-blog-feature__all{
  color:#fff!important;
  opacity:.9!important;
}

/* Footer: remove inherited empty vertical area before newsletter. */
.footer{
  margin-top:0!important;
}
.footer .footer-main.footer-padding,
.footer-main.footer-padding{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
}
.footer .footer-main .container{
  height:auto!important;
  min-height:0!important;
}
.footer .footer-main .newsletter{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
}

@media (max-width:767px){
  /* ----------------------------------------------------------
     Header: only logo + search. Account/orders/cart live below.
     ---------------------------------------------------------- */
  .header-mobile{
    display:none!important;
  }
  .header .bg{
    background:#fff!important;
    border-bottom:1px solid #dce9ec!important;
  }
  .header .bg .line.container,
  .header .line{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"logo" "search"!important;
    gap:8px!important;
    padding:10px 12px 11px!important;
    min-height:0!important;
  }
  .header .header-menu,
  .header .options-wrapper,
  .header .line>.cart-toggle{
    display:none!important;
  }
  .header .logo{
    grid-area:logo!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    max-width:190px!important;
    min-width:0!important;
    margin:0 auto!important;
  }
  .header .logo img,
  .header .logo svg{
    max-width:190px!important;
    max-height:52px!important;
  }
  .header .header-search-wrapper{
    grid-area:search!important;
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    border:1px solid #cfe2e6!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(0,127,149,.06)!important;
  }
  .header .header-search-wrapper .input-search{
    height:42px!important;
    min-height:42px!important;
    font-size:15px!important;
  }
  .header .header-search-wrapper .button-search{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    color:#007f95!important;
  }

  /* ----------------------------------------------------------
     Home categories: 2 columns x 4 rows (when eight are filled).
     ---------------------------------------------------------- */
  .summers-categories{
    padding:24px 0 22px!important;
  }
  .summers-section-heading{
    margin:0 auto 16px!important;
    padding:0 10px!important;
  }
  .summers-section-heading h2{
    font-size:23px!important;
    line-height:1.12!important;
  }
  .summers-section-heading p{
    font-size:12px!important;
    line-height:1.42!important;
  }
  .summers-categories .container{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .summers-categories__grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .summers-category-card{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto 1fr!important;
    align-items:start!important;
    gap:8px 9px!important;
    min-width:0!important;
    min-height:108px!important;
    height:108px!important;
    padding:11px!important;
    border-radius:15px!important;
    box-shadow:0 8px 20px rgba(0,127,149,.14)!important;
  }
  .summers-category-card:hover{
    transform:none!important;
  }
  .summers-category-card__icon{
    grid-column:1!important;
    grid-row:1!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex-basis:42px!important;
    border-radius:12px!important;
  }
  .summers-category-card__icon svg{
    width:24px!important;
    height:24px!important;
  }
  .summers-category-card__copy{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
    gap:3px!important;
    padding-right:2px!important;
  }
  .summers-category-card__copy strong{
    font-size:12.5px!important;
    line-height:1.18!important;
    font-weight:800!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  .summers-category-card__copy small{
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  .summers-category-card__arrow{
    position:absolute!important;
    right:8px!important;
    bottom:8px!important;
    width:27px!important;
    height:27px!important;
    font-size:15px!important;
    background:rgba(255,255,255,.15)!important;
  }

  /* ----------------------------------------------------------
     Bottom navigation: desktop-inspired fixed navigation.
     The category menu opens upward as a bottom sheet.
     ---------------------------------------------------------- */
  :root{
    --aio-mobile-bottom-nav:70px;
  }
  .menu-bar-mobile{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    align-items:center!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    min-height:70px!important;
    padding:6px 5px calc(6px + var(--aio-mobile-safe-bottom))!important;
    gap:0!important;
    background:rgba(255,255,255,.98)!important;
    border-top:3px solid #007f95!important;
    box-shadow:0 -10px 28px rgba(4,55,66,.12)!important;
    backdrop-filter:blur(12px)!important;
    z-index:100020!important;
  }
  .menu-bar-mobile>div{
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    min-width:0!important;
    padding:0 1px!important;
  }
  .menu-bar-mobile>div>a,
  .menu-bar-mobile>.menu-category,
  .menu-bar-mobile>.menu-search,
  .menu-bar-mobile>.menu-sales{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:54px!important;
    padding:4px 1px!important;
    border-radius:11px!important;
    color:#252525!important;
    text-decoration:none!important;
  }
  .menu-bar-mobile svg,
  .menu-bar-mobile .header-menu{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    min-height:23px!important;
    margin:0 auto 4px!important;
    color:#007f95!important;
    fill:#007f95!important;
    stroke:#007f95!important;
  }
  .menu-bar-mobile .header-menu{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:4px!important;
  }
  .menu-bar-mobile .header-menu div{
    width:22px!important;
    height:2px!important;
    margin:0!important;
    border-radius:99px!important;
    background:#007f95!important;
  }
  .menu-bar-mobile p{
    display:block!important;
    margin:0!important;
    max-width:100%!important;
    color:#252525!important;
    font-size:9px!important;
    line-height:1.05!important;
    font-weight:600!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .menu-bar-mobile .cart-quantity{
    top:1px!important;
    right:6px!important;
    min-width:17px!important;
    height:17px!important;
    line-height:17px!important;
    padding:0 4px!important;
    background:#007f95!important;
    color:#fff!important;
    font-size:9px!important;
    border:2px solid #fff!important;
  }

  /* Search rises above the fixed navigation instead of covering it. */
  .search-bar-mobile{
    bottom:calc(70px + var(--aio-mobile-safe-bottom))!important;
    border-top:1px solid #d6e8eb!important;
    box-shadow:0 -10px 26px rgba(4,55,66,.11)!important;
  }

  /* Convert the old side drawer into an upward-opening bottom sheet. */
  #menu-mobile.menu-mobile.aio-mobile-menu,
  .menu-mobile.aio-mobile-menu{
    position:fixed!important;
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:calc(70px + var(--aio-mobile-safe-bottom))!important;
    width:100%!important;
    max-width:100%!important;
    height:min(68dvh,610px)!important;
    max-height:min(68dvh,610px)!important;
    padding:0!important;
    border-radius:22px 22px 0 0!important;
    background:#fff!important;
    box-shadow:0 -24px 56px rgba(3,45,55,.20)!important;
    transform:translateY(calc(100% + 24px))!important;
    transition:transform .28s cubic-bezier(.2,.72,.2,1)!important;
    z-index:100019!important;
    overflow:hidden!important;
  }
  #menu-mobile.menu-mobile.aio-mobile-menu.show,
  .menu-mobile.aio-mobile-menu.show{
    transform:translateY(0)!important;
  }
  .menu-mobile-backdrop{
    z-index:100018!important;
  }
  .aio-mobile-menu__header,
  .aio-mobile-menu__quick-links,
  .aio-mobile-menu__track-content,
  .aio-mobile-menu__support-box,
  .aio-mobile-menu__b2b{
    display:none!important;
  }
  .aio-mobile-menu__close{
    display:block!important;
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:38px!important;
    height:38px!important;
    border-radius:50%!important;
    background:#eef8fa!important;
    z-index:4!important;
  }
  .aio-mobile-menu__close span{
    background:#007f95!important;
  }
  .aio-mobile-menu__content{
    height:100%!important;
    max-height:100%!important;
    padding:18px 12px 14px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .aio-mobile-menu__nav-wrap{
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
  }
  .aio-mobile-menu__title{
    margin:0 48px 12px 4px!important;
    padding:5px 0 10px!important;
    border-bottom:1px solid #dcebed!important;
    color:#252525!important;
    font-size:16px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }
  .aio-mobile-menu__list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .aio-mobile-menu__item{
    min-width:0!important;
    border:1px solid #d7e9ec!important;
    border-radius:13px!important;
    background:#f8fcfd!important;
    box-shadow:none!important;
  }
  .aio-mobile-menu__row{
    min-height:52px!important;
  }
  .aio-mobile-menu__link{
    gap:8px!important;
    padding:8px!important;
  }
  .aio-mobile-menu__icon{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:10px!important;
    background:#e6f5f7!important;
    color:#007f95!important;
  }
  .aio-mobile-menu__icon svg{
    width:18px!important;
    height:18px!important;
    stroke:#007f95!important;
  }
  .aio-mobile-menu__label{
    color:#252525!important;
    font-size:11.5px!important;
    line-height:1.15!important;
    font-weight:750!important;
  }
  .aio-mobile-menu__toggle{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
    margin-right:5px!important;
    background:#e6f5f7!important;
    color:#007f95!important;
  }
  .aio-mobile-menu__submenu{
    grid-column:1/-1!important;
    padding:0 8px 8px!important;
  }
  .aio-mobile-menu__submenu-list{
    max-height:240px!important;
    overflow:auto!important;
  }

  /* ----------------------------------------------------------
     Guia Summer's Boat: tighter mobile card, same brand colors.
     ---------------------------------------------------------- */
  .aio-reviews-blog{
    padding:18px 0 16px!important;
    margin:0!important;
  }
  .aio-reviews-blog__grid{
    gap:22px!important;
  }
  .aio-blog-card__heading{
    grid-template-columns:auto minmax(28px,1fr) auto!important;
    gap:10px!important;
  }
  .aio-blog-card__heading strong{
    font-size:22px!important;
    line-height:1.05!important;
  }
  .aio-blog-card__heading a{
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .aio-blog-feature{
    min-height:0!important;
    height:auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:170px auto!important;
    border-radius:15px!important;
  }
  .aio-blog-feature__media{
    height:170px!important;
  }
  .aio-blog-feature__content{
    padding:17px 18px 18px!important;
  }
  .aio-blog-feature__content h3{
    margin:6px 0 8px!important;
    font-size:20px!important;
    line-height:1.08!important;
  }
  .aio-blog-feature__content p{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .aio-blog-feature__actions{
    margin-top:14px!important;
    gap:11px!important;
  }
  .aio-blog-feature__button{
    min-height:39px!important;
    padding:0 14px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
  .aio-blog-feature__all{
    font-size:11px!important;
  }

  /* ----------------------------------------------------------
     Footer: eliminate the large blank slab seen before newsletter.
     ---------------------------------------------------------- */
  .footer{
    margin-top:0!important;
    padding-top:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .footer .footer-main.footer-padding,
  .footer-main.footer-padding{
    margin:0!important;
    padding:18px 0!important;
    min-height:0!important;
    height:auto!important;
    background:#f7fbfc!important;
    border-top:3px solid #007f95!important;
  }
  .footer .footer-main .container{
    margin:0 auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .footer .footer-main .newsletter{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }
  .footer .footer-main .newsletter .info{
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    justify-content:center!important;
  }
  .footer .footer-main .newsletter .text .first{
    margin:0 0 4px!important;
    color:#252525!important;
    font-size:20px!important;
    line-height:1.08!important;
    text-align:center!important;
    text-transform:none!important;
  }
  .footer .footer-main .newsletter .text .last{
    margin:0!important;
    color:#62747a!important;
    font-size:12px!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  .footer .footer-main .newsletter .form{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }
  .footer .footer-main .newsletter .form>.flex{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
  }
  .footer .footer-main .newsletter .field,
  .footer .footer-main .newsletter .news-button{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    border-radius:11px!important;
  }
  .footer .footer-main .newsletter .news-button{
    background:#007f95!important;
    border-color:#007f95!important;
    color:#fff!important;
  }
  .footer .cols{
    padding-top:12px!important;
  }
}

@media (max-width:360px){
  .summers-category-card{
    height:104px!important;
    min-height:104px!important;
    padding:9px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .summers-category-card__icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  .summers-category-card__copy strong{font-size:11.5px!important}
  .summers-category-card__copy small{font-size:9px!important}
  .menu-bar-mobile p{font-size:8.4px!important}
}


/* ============================================================
   SUMMER'S BOAT · MOBILE UX V2 2026-09-22
   Dedicated mobile logo + clearer bottom-sheet menu + reviews autoplay.
   ============================================================ */
.aio-mobile-brand-logo{display:none;}
.aio-review-nav{display:none!important;}

@media (max-width:767px){
  /* Brand is explicit on mobile, independent of legacy logo rules. */
  .header{
    display:block!important;
    position:relative!important;
    z-index:60!important;
  }
  .header>.bg{display:block!important;}
  .header .bg .line.container,
  .header .line{
    grid-template-columns:1fr!important;
    grid-template-areas:"mobilebrand" "search"!important;
    gap:7px!important;
    padding:8px 12px 10px!important;
    background:#fff!important;
  }
  .header .logo{display:none!important;}
  .header .aio-mobile-brand-logo{
    grid-area:mobilebrand!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:46px!important;
    margin:0!important;
    padding:0!important;
    text-decoration:none!important;
  }
  .header .aio-mobile-brand-logo img{
    display:block!important;
    width:min(180px,58vw)!important;
    height:auto!important;
    max-width:180px!important;
    max-height:44px!important;
    object-fit:contain!important;
  }
  .header .header-search-wrapper{
    grid-area:search!important;
  }

  /* Bottom navigation gets visible active feedback. */
  .menu-bar-mobile>.menu-category,
  .menu-bar-mobile>.menu-search{
    transition:background .18s ease,color .18s ease!important;
  }
  .menu-bar-mobile>.menu-category.is-active,
  .menu-bar-mobile>.menu-search.is-active{
    background:#e8f6f8!important;
  }
  .menu-bar-mobile>.menu-category.is-active p,
  .menu-bar-mobile>.menu-search.is-active p{
    color:#007f95!important;
    font-weight:800!important;
  }

  /* Menu sheet: familiar, vertical and readable instead of a 2-column accordion. */
  #menu-mobile.menu-mobile.aio-mobile-menu,
  .menu-mobile.aio-mobile-menu{
    height:min(74dvh,660px)!important;
    max-height:min(74dvh,660px)!important;
    border-radius:24px 24px 0 0!important;
  }
  .aio-mobile-menu__content{
    padding:15px 12px 18px!important;
  }
  .aio-mobile-menu__sheet-intro{
    display:block!important;
    margin:0 44px 10px 2px!important;
    padding:2px 0 11px!important;
    border-bottom:1px solid #dcebed!important;
  }
  .aio-mobile-menu__sheet-intro strong{
    display:block!important;
    color:#252525!important;
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:800!important;
  }
  .aio-mobile-menu__sheet-intro span{
    display:block!important;
    margin-top:3px!important;
    color:#718189!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }
  .aio-mobile-menu__close{
    top:12px!important;
    right:12px!important;
    width:36px!important;
    height:36px!important;
    border:1px solid #cfe5e9!important;
    background:#f2fafb!important;
  }

  /* Personalize remains obvious without dominating the whole sheet. */
  .aio-mobile-menu__b2b{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:44px!important;
    margin:0 0 9px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:13px!important;
    background:#007f95!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(0,127,149,.16)!important;
    font-size:11.5px!important;
    font-weight:800!important;
    text-decoration:none!important;
  }

  /* Two genuinely useful shortcuts inside the menu. */
  .aio-mobile-menu__quick-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin:0 0 11px!important;
  }
  .aio-mobile-menu__quick-card{
    display:none!important;
  }
  .aio-mobile-menu__quick-card--orders,
  .aio-mobile-menu__quick-card--support{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:46px!important;
    padding:7px 9px!important;
    border:1px solid #d8eaed!important;
    border-radius:12px!important;
    background:#f8fcfd!important;
    color:#252525!important;
    box-shadow:none!important;
    font-size:10px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  .aio-mobile-menu__quick-card .aio-mobile-menu__quick-icon{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    margin:0 7px 0 0!important;
    border-radius:9px!important;
    background:#e4f5f7!important;
    color:#007f95!important;
  }
  .aio-mobile-menu__quick-card .aio-mobile-menu__quick-icon svg{
    width:17px!important;
    height:17px!important;
    stroke:#007f95!important;
  }

  .aio-mobile-menu__nav-wrap{
    border:0!important;
  }
  .aio-mobile-menu__title{
    margin:0 0 7px!important;
    padding:4px 2px 7px!important;
    border:0!important;
    color:#007f95!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }
  .aio-mobile-menu__list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .aio-mobile-menu__item{
    width:100%!important;
    min-width:0!important;
    border:1px solid #d7e9ec!important;
    border-radius:13px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .aio-mobile-menu__item.is-open{
    border-color:#8dcbd5!important;
    box-shadow:0 8px 18px rgba(0,127,149,.08)!important;
  }
  .aio-mobile-menu__row{
    min-height:52px!important;
    display:flex!important;
    align-items:center!important;
  }
  .aio-mobile-menu__link{
    flex:1 1 auto!important;
    min-width:0!important;
    padding:7px 8px!important;
  }
  .aio-mobile-menu__icon{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:10px!important;
  }
  .aio-mobile-menu__label{
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
  }
  .aio-mobile-menu__toggle{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    margin-right:8px!important;
    border:1px solid #d1e7eb!important;
    background:#eef9fa!important;
  }
  .aio-mobile-menu__item.is-open>.aio-mobile-menu__row .aio-mobile-menu__toggle{
    background:#007f95!important;
    color:#fff!important;
    border-color:#007f95!important;
  }
  .aio-mobile-menu__submenu{
    padding:0 10px 10px!important;
    background:#fbfdfd!important;
    border-top:1px solid #e3eff1!important;
  }
  .aio-mobile-menu__submenu-all{
    min-height:40px!important;
    padding:9px 3px!important;
    color:#007f95!important;
    font-size:11px!important;
    font-weight:800!important;
  }
  .aio-mobile-menu__submenu-list{
    max-height:none!important;
    overflow:visible!important;
  }
  .aio-mobile-menu__submenu-item{
    border-top:1px solid #edf3f4!important;
  }
  .aio-mobile-menu__sublink{
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    color:#37434a!important;
    font-size:11px!important;
    font-weight:600!important;
  }

  /* Reviews: no side arrows; dots act only as progress/optional direct selection. */
  .aio-review-nav{display:none!important;}
  .aio-reviews-slider{
    padding-left:0!important;
    padding-right:0!important;
  }
  .aio-review-dots{
    margin-top:13px!important;
  }
  .aio-review-dots button{
    width:8px!important;
    height:8px!important;
    cursor:pointer!important;
  }
}

/* ============================================================
   SUMMER'S BOAT · MOBILE UX V3 2026-09-22
   Compact category cards, Android-safe bottom sheet, footer/newsletter
   height fix, B2B handoff and Pronta Entrega stacking correction.
   ============================================================ */
@media (max-width:767px){
  /* Home category cards: keep the 2x4 idea, but reduce vertical weight. */
  .summers-categories{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
  .summers-section-heading{
    margin-bottom:12px!important;
  }
  .summers-categories__grid{
    gap:8px!important;
  }
  .summers-category-card{
    height:94px!important;
    min-height:94px!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:6px 8px!important;
    padding:9px!important;
    border-radius:14px!important;
  }
  .summers-category-card__icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex-basis:38px!important;
    border-radius:11px!important;
  }
  .summers-category-card__icon svg{
    width:21px!important;
    height:21px!important;
  }
  .summers-category-card__copy{
    gap:2px!important;
    padding-right:1px!important;
  }
  .summers-category-card__copy strong{
    font-size:11.8px!important;
    line-height:1.14!important;
  }
  .summers-category-card__copy small{
    font-size:9px!important;
  }
  .summers-category-card__arrow{
    right:7px!important;
    bottom:7px!important;
    width:24px!important;
    height:24px!important;
    font-size:13px!important;
  }

  /* Android/Chrome safe bottom sheet.
     The JS moves #menu-mobile directly under BODY so position:fixed is
     never trapped by a transformed theme wrapper. */
  body>#menu-mobile.menu-mobile.aio-mobile-menu,
  #menu-mobile.menu-mobile.aio-mobile-menu,
  .menu-mobile.aio-mobile-menu{
    position:fixed!important;
    inset:auto 0 calc(70px + var(--aio-mobile-safe-bottom)) 0!important;
    width:100%!important;
    max-width:100%!important;
    height:min(68vh,580px)!important;
    height:min(calc(var(--aio-real-vh, 1vh) * 68),580px)!important;
    max-height:calc((var(--aio-real-vh, 1vh) * 100) - 82px)!important;
    border-radius:22px 22px 0 0!important;
    transform:translate3d(0,110%,0)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    will-change:transform!important;
    z-index:100019!important;
  }
  body>#menu-mobile.menu-mobile.aio-mobile-menu.show,
  #menu-mobile.menu-mobile.aio-mobile-menu.show,
  .menu-mobile.aio-mobile-menu.show{
    transform:translate3d(0,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .aio-mobile-menu__content{
    height:100%!important;
    max-height:100%!important;
    padding-bottom:max(16px,var(--aio-mobile-safe-bottom))!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Personalize should appear over the menu during the handoff, never behind it. */
  .aio-b2b-portal{
    z-index:100080!important;
  }

  /* Newsletter gap fix: old desktop rules had flex-basis 240/560px with !important.
     In a mobile column those values turned into a giant vertical blank slab. */
  .footer .footer-main,
  .footer .footer-main.footer-padding,
  .footer .footer-main .container,
  .footer .footer-main .newsletter,
  .footer .footer-main .newsletter .info,
  .footer .footer-main .newsletter .form,
  .footer .footer-main .newsletter .form>.flex,
  .footer .cols,
  .footer .cols .container,
  .footer .logo-box,
  .footer .box{
    min-height:0!important;
    height:auto!important;
  }
  .footer .footer-main .newsletter .info,
  .footer .footer-main .newsletter .form{
    flex:0 0 auto!important;
  }
  .footer .footer-main .newsletter .form>.flex{
    flex:0 0 auto!important;
    align-content:start!important;
  }
  .footer .footer-main.footer-padding{
    padding:16px 0!important;
  }
  .footer .footer-main .newsletter{
    gap:10px!important;
    padding:0!important;
  }
  .footer .cols{
    padding:12px 0 8px!important;
  }
  .footer .cols .container{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    gap:9px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .footer .logo-box{
    align-self:start!important;
    margin:0!important;
    padding-top:12px!important;
    padding-bottom:12px!important;
  }
  .footer .logo-box .logo{
    margin-bottom:8px!important;
  }

  /* Pronta Entrega must float above site content and social controls.
     When another full-screen mobile layer opens, it steps out of the way. */
  .aio-rp-drawer{
    z-index:100010!important;
    bottom:94px!important;
    transition:opacity .16s ease,visibility .16s ease!important;
  }
  .aio-rp-drawer.is-open{
    z-index:100060!important;
  }
  .aio-rp-drawer__tab{
    position:relative!important;
    z-index:5!important;
  }
  .aio-rp-drawer__panel,
  .aio-rp-drawer__overlay{
    z-index:4!important;
  }
  .aio-rp-drawer__panel{
    height:100dvh!important;
    max-height:100dvh!important;
  }
  body.aio-mobile-sheet-open .aio-rp-drawer,
  body.aio-b2b-lock .aio-rp-drawer{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (max-width:360px){
  .summers-category-card{
    height:88px!important;
    min-height:88px!important;
    grid-template-columns:35px minmax(0,1fr)!important;
    padding:8px!important;
  }
  .summers-category-card__icon{
    width:35px!important;
    height:35px!important;
    min-width:35px!important;
  }
  .summers-category-card__copy strong{font-size:11px!important}
  .summers-category-card__copy small{font-size:8.6px!important}
}