/* ==========================================================================
   Ajustes responsivos do site (carregado por último, depois de store-vitrine.css)
   - Cabeçalho em uma linha só: o logo deixa a faixa separada e o menu não
     depende mais de margens negativas, então nada se sobrepõe.
   - Seção "Encontre a solução ideal" sem itens cortados.
   - Botões flutuantes (orçamento, WhatsApp, Instagram) empilhados no canto
     inferior, sem cobrir títulos.
   - Galeria do produto com quadro de tamanho fixo.
   ========================================================================== */

/* ---------- Cabeçalho ---------- */
.top-bar.top-style-two{display:none!important}
nav.navbar.validnavs.navbar-sticky,
nav.navbar.validnavs .navbar-brand-left,
nav.navbar.validnavs #navbar-menu,
nav.navbar.validnavs .cs-cart-slot{margin-top:0!important}

nav.navbar.validnavs{background:#fff;padding:0!important;min-height:0}
nav.navbar.validnavs>.container-fluid{padding-left:24px!important;padding-right:24px!important}
nav.navbar.validnavs .header-inner{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:20px;min-height:96px;max-width:1520px}
nav.navbar.validnavs .navbar-brand-left{display:contents!important}

/* Botão do painel lateral (informações da empresa) */
nav.navbar.validnavs .navbar-brand-left .attr-right{grid-column:1;grid-row:1;position:static!important;float:none!important;padding:0!important;margin:0!important;right:auto!important}
nav.navbar.validnavs .navbar-brand-left .attr-right .attr-nav{display:block!important;margin:0!important;padding:0!important}
nav.navbar.validnavs .navbar-brand-left .attr-right .attr-nav ul{margin:0;padding:0}
nav.navbar.validnavs .navbar-brand-left .attr-right .attr-nav li.side-menu a{margin:0!important;position:relative}

/* Logo + botão do menu no celular */
nav.navbar.validnavs .navbar-header{grid-column:2;grid-row:1;display:flex!important;align-items:center;gap:14px;float:none!important;margin:0!important;padding:0!important;min-width:0}
nav.navbar.validnavs .navbar-header .navbar-brand{display:block!important;float:none!important;margin:0!important;padding:8px 0!important;height:auto!important}
nav.navbar.validnavs .navbar-header .navbar-brand img.logo{display:block!important;height:72px;width:auto;max-width:100%;object-fit:contain}
nav.navbar.validnavs .navbar-toggle{display:none!important;padding:8px 4px!important;line-height:1;color:#1f3f2c}

/* Menu */
nav.navbar.validnavs #navbar-menu{grid-column:3;grid-row:1;display:flex!important;justify-content:flex-end!important;align-items:center;min-width:0;padding:0!important;margin:0!important;float:none!important;width:auto!important;height:auto!important;border:0!important}
nav.navbar.validnavs #navbar-menu ul.nav{display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;margin:0!important;padding:0!important;float:none!important}
nav.navbar.validnavs #navbar-menu ul.nav>li{float:none!important}
nav.navbar.validnavs #navbar-menu ul.nav>li>a{padding:30px 15px!important;font-size:16px;white-space:nowrap;transition:color .3s ease!important}

/* Meu orçamento */
nav.navbar.validnavs .cs-cart-slot{grid-column:4;grid-row:1;margin-left:0!important;position:relative}

/* Telas grandes: logo centralizado, menu à direita (visual original) */
@media (min-width:1400px){
  nav.navbar.validnavs .header-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
  nav.navbar.validnavs .navbar-brand-left .attr-right{justify-self:start}
  nav.navbar.validnavs .navbar-header{justify-self:center}
}

/* Notebooks: logo à esquerda, menu mais compacto */
@media (min-width:1024px) and (max-width:1399px){
  nav.navbar.validnavs .navbar-header .navbar-brand img.logo{height:62px}
  nav.navbar.validnavs #navbar-menu ul.nav>li>a{padding:28px 11px!important;font-size:15px}
}
@media (min-width:1024px) and (max-width:1149px){
  nav.navbar.validnavs .header-inner{column-gap:14px}
  nav.navbar.validnavs #navbar-menu ul.nav>li>a{padding:26px 8px!important;font-size:14px}
}

/* Cabeçalho fixo ao rolar (desktop) */
@media (min-width:1024px){
  header{min-height:96px}
  /* Entre 1024 e ~1040 px o script do menu ainda acha que é celular (desconta a
     barra de rolagem); aqui o menu continua sempre na linha do cabeçalho. */
  nav.navbar.validnavs.mobile-sidenav #navbar-menu.collapse-mobile{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important;background:none!important;transition:none!important;animation:none!important;z-index:auto!important}
  .overlay-screen.opened{display:none!important}
  nav.navbar.validnavs.sticked{position:fixed!important;top:0;left:0;right:0;width:100%}
  nav.navbar.validnavs.sticked .header-inner{min-height:72px}
  nav.navbar.validnavs.sticked .navbar-header .navbar-brand img.logo{height:50px}
  nav.navbar.validnavs.sticked #navbar-menu ul.nav>li>a{padding-top:22px!important;padding-bottom:22px!important}
}

/* Celular e tablet: botão do menu + logo + orçamento */
@media (max-width:1023px){
  nav.navbar.validnavs .header-inner{grid-template-columns:auto minmax(0,1fr) auto;min-height:76px;column-gap:12px}
  nav.navbar.validnavs .navbar-brand-left .attr-right .attr-nav{display:none!important}
  nav.navbar.validnavs .navbar-header{display:contents!important}
  nav.navbar.validnavs .navbar-toggle{grid-column:1;grid-row:1;display:inline-flex!important;align-items:center;font-size:24px}
  nav.navbar.validnavs .navbar-header .navbar-brand{grid-column:2;grid-row:1;justify-self:center}
  nav.navbar.validnavs .navbar-header .navbar-brand img.logo{height:54px}
  nav.navbar.validnavs .cs-cart-slot{grid-column:3}
  /* o menu vira gaveta lateral (controlada pelo validnavs) */
  nav.navbar.validnavs #navbar-menu{grid-column:auto;grid-row:auto}
  nav.navbar.validnavs #navbar-menu:not(.collapse-mobile){display:none!important}
  nav.navbar.validnavs.mobile-sidenav #navbar-menu.collapse-mobile{display:block!important;padding:28px 26px!important;box-shadow:0 0 40px rgba(0,0,0,.18)}
  nav.navbar.validnavs #navbar-menu ul.nav{display:block!important}
  nav.navbar.validnavs #navbar-menu ul.nav>li>a{padding:15px 4px!important;font-size:17px;font-weight:600;white-space:normal}
}
@media (max-width:767px){
  nav.navbar.validnavs>.container-fluid{padding-left:15px!important;padding-right:15px!important}
  nav.navbar.validnavs .header-inner{min-height:68px}
  nav.navbar.validnavs .navbar-header .navbar-brand img.logo{height:46px}
}
@media (max-width:359px){
  nav.navbar.validnavs .navbar-header .navbar-brand img.logo{height:40px}
}

/* ---------- Home: "Encontre a solução ideal" ---------- */
.product-list-box{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-list-item a{text-align:center}
.product-list-item a img{max-width:100%;object-fit:contain}
.product-list-item h5{overflow-wrap:break-word;hyphens:auto;line-height:1.3}
.product-cat-area .mask-text{max-width:100%;overflow-wrap:break-word}
@media (min-width:992px){
  .product-cat-area .mask-text{font-size:clamp(36px,3.7vw,55px);margin-right:0}
}
@media (min-width:992px) and (max-width:1399px){
  .product-cat-lists{padding-left:0}
  .product-list-box{grid-column-gap:18px;grid-row-gap:45px}
  .product-list-item a img{height:90px}
  .product-list-item h5{font-size:15px;letter-spacing:.3px}
}
@media (min-width:992px) and (max-width:1199px){
  .product-cat-area .mask-text{font-size:36px}
  .product-cat-items .col-lg-6.offset-lg-2{margin-left:8.333%;width:58.333%}
  .product-cat-items .col-lg-4{width:33.333%}
  .product-cat-area::after{width:55%}
}
@media (max-width:991px){
  .product-cat-area .mask-text{font-size:clamp(28px,6vw,48px);line-height:1.2;margin:0 0 30px;-webkit-text-fill-color:var(--color-primary);color:var(--color-primary)}
  .product-list-box{grid-template-columns:repeat(3,minmax(0,1fr));grid-column-gap:16px;grid-row-gap:16px}
  .product-list-item,.product-list-item a{height:100%}
  .product-list-item a{padding:22px 12px!important}
  .product-list-item a img{height:80px}
  .product-list-item h5{font-size:15px;letter-spacing:.3px;margin-top:8px}
}
@media (max-width:600px){
  .product-list-box{grid-template-columns:repeat(2,minmax(0,1fr));grid-column-gap:12px;grid-row-gap:12px}
  .product-list-item a{padding:18px 8px!important}
  .product-list-item a img{height:64px}
  .product-list-item h5{font-size:13px}
}

/* ---------- Botões flutuantes ----------
   O "Meu orçamento" flutuante desce para a pilha do WhatsApp/Instagram,
   assim nunca cobre o título de um produto. */
.cs-cart-launch.is-floating{top:auto!important;bottom:136px;right:21px}
@media (max-width:600px){
  .cs-cart-launch.is-floating{bottom:112px;right:10px}
}

/* ---------- Detalhe do produto: imagem em quadro fixo ----------
   O quadro é sempre quadrado (como o do misturador) e a foto aparece inteira
   dentro dele, seja horizontal, vertical ou de qualquer tamanho. As miniaturas
   quebram linha em vez de alargar a coluna, então muitas fotos não empurram
   mais o título e os botões para fora da tela. */
.cs-product-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.cs-gallery,.cs-product-info{min-width:0}
.cs-store .cs-main-image{aspect-ratio:1/1;width:100%;height:auto}
.cs-store .cs-main-image img{width:100%;height:100%;object-fit:contain;object-position:center}
.cs-store .cs-thumbnails{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px;overflow:visible;padding:0}
.cs-store .cs-thumbnails button{width:auto;height:auto;aspect-ratio:1/1;min-width:0}
.cs-product-info h1{overflow-wrap:break-word}
@media (min-width:992px){
  .cs-product-info{position:sticky;top:96px;align-self:start}
}
@media (max-width:991px){
  .cs-product-layout{grid-template-columns:minmax(0,1fr)}
  .cs-store .cs-main-image{max-width:560px;margin:0 auto}
  .cs-store .cs-thumbnails{max-width:560px;margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .cs-store .cs-main-image img{padding:18px}
  .cs-store .cs-thumbnails{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
}

/* ---------- Rodapé ----------
   No tablet/celular as ilustrações do rodapé ficam abaixo do copyright,
   e sobra espaço para os botões flutuantes não cobrirem o texto. */
@media (max-width:991px){
  footer{background-size:auto 80px!important}
  footer .shape-right-bottom{max-width:130px}
  footer .footer-bottom{padding-bottom:96px!important}
  footer .footer-bottom p{padding-right:56px;padding-left:56px}
}
@media (max-width:600px){
  footer{background-size:auto 64px!important}
  footer .shape-right-bottom{max-width:100px}
  footer .footer-bottom{padding-bottom:80px!important}
  footer .footer-bottom p{padding-right:48px;padding-left:0;text-align:left}
}