/*
 * PRIMEUP SITE FLUID WIDTH V1 | 2026-11-02
 * A referencia de largura é o hero: secoes em largura total, conteudo com
 * gutters proporcionais de 5.1vw alinhados ao texto do slider.
 * Escopo: homepage, header/rodape e templates internos. Nao altera
 * integracoes, dados Woo, carrinho ou URLs.
 */
:root{
  --primeup-page-gutter:clamp(20px,4.5vw,90px);
  --primeup-page-inline-size:calc(100% - var(--primeup-page-gutter) - var(--primeup-page-gutter));
}
/* O tamanho do container deixa de ser limitado a 1240 / 1280 px.
 * A area de fundo das secoes continua ocupando toda a viewport. */
body.ref17 .container,
body.primeup-inner-page .container,
body.ref17 .ref-departments > .container,
body.ref17 .pu-discovery .container,
body .pu-site-footer .container,
body.ref17 .pu-purpose__container{
  box-sizing:border-box;
  width:var(--primeup-page-inline-size)!important;
  max-width:none!important;
  min-width:0;
  margin-inline:auto!important;
  padding-inline:0!important;
}
/* WooCommerce e paginas de conteudo passam a usar o mesmo alinhamento.
 * A tipografia de textos longos permanece limitada para leitura confortavel. */
body.primeup-inner-page .primeup-wp-content,
body.primeup-inner-page .pu-contact-page__wrap{
  box-sizing:border-box;
  width:var(--primeup-page-inline-size);
  max-width:none!important;
  min-width:0;
  margin-inline:auto;
  padding-inline:0!important;
}
body.primeup-inner-page .primeup-wp-content{
  padding-block:clamp(30px,3.6vw,70px);
}
body.primeup-inner-page .pu-contact-page__wrap{
  padding-block:clamp(25px,3vw,55px) clamp(45px,5vw,95px);
}
body.primeup-inner-page .primeup-wp-content .entry-content > p,
body.primeup-inner-page .primeup-wp-content .entry-content > ul,
body.primeup-inner-page .primeup-wp-content .entry-content > ol{
  max-width:90ch;
}
/* Impede que layouts de grid min-content ampliem a pagina horizontalmente. */
body.ref17 #principal,
body.primeup-inner-page #principal,
body.ref17 #principal .container,
body.ref17 #principal .pu-purpose__container,
body .pu-site-footer .container{
  min-width:0;
}
body.ref17 #principal .ref-dept-grid > *,
body.ref17 #principal .ref-product-grid > *,
body.ref17 #principal .pu-collection__grid > *,
body.ref17 #principal .pu-purpose__grid > *{
  min-width:0;
}
/* O grid da vitrine e as categorias crescem junto com o conteudo disponivel,
 * sem produzir cards excessivamente baixos em monitores grandes. */
@media(min-width:1400px){
  body.ref17 .ref-departments .ref-dept-grid{
    grid-auto-rows:clamp(188px,11.7vw,250px);
    column-gap:clamp(14px,1.25vw,23px);
    row-gap:clamp(14px,1.25vw,23px);
  }
  body.ref17 .ref-products .ref-product-grid{
    gap:clamp(17px,1.4vw,28px);
  }
  body.ref17 .ref-products .ref-product-photo{
    height:clamp(239px,18vw,345px);
  }
  body.ref17 .ref-products .ref-product-photo img{
    max-height:clamp(208px,15.5vw,300px);
  }
  body.ref17 .pu-collection__grid{gap:clamp(16px,1.5vw,28px)}
  body.ref17 .pu-discovery-card__media{aspect-ratio:1.65}
  body.ref17 .pu-discovery-card__media img{max-height:310px}
  body.ref17 .pu-purpose__grid{gap:clamp(14px,1.2vw,24px)}
}
/* O hero ja é full bleed. Nao aplicar gutter ou max-width ao slider. */
body.ref17 .primeup-premium-hero,
body.ref17 .primeup-premium-hero .primeup-premium-carousel{
  width:100%!important;
  max-width:none!important;
}
/* Ajustes responsivos para que a largura fluida nunca produza scroll lateral. */
@media(max-width:800px){
 :root{--primeup-page-gutter:clamp(16px,3.5vw,24px)}
 body.ref17 .ref-departments .ref-dept-grid{grid-auto-rows:170px}
 body.ref17 .ref-products .ref-product-grid{gap:12px}
 body.ref17 .pu-purpose__grid{gap:12px}
 body.ref17 .primeup-editorial-layout,
 body.ref17 .primeup-value-layout{min-width:0}
}
@media(max-width:600px){
 :root{--primeup-page-gutter:clamp(16px,4.3vw,22px)}
 body.ref17 .ref-departments .ref-dept-grid{grid-auto-rows:170px}
 body.ref17 .ref-products .ref-product-grid{gap:10px}
 body.ref17 .ref-departments .ref-dept-grid{gap:10px}
 body.primeup-inner-page .primeup-wp-content{padding-block:27px 45px}
 body.primeup-inner-page .pu-contact-page__wrap{padding-block:24px 50px}
}


/* PRIMEUP MOCKUP FIDELITY V3 | 2026-11-02
 * Referencia aprovada: header somente azul-marinho, hero 49/51 e
 * alinhamento das demais secoes com a area textual da primeira dobra.
 * Preserva os ids e o comportamento das funcoes comerciais.
 */
/* Hero editorial: primeira coluna branca quase metade da tela. */
body.ref17 .primeup-premium-carousel .primeup-premium-slide{
  grid-template-columns:49% 51%;
}
body.ref17 .primeup-premium-copy{
  padding-left:var(--primeup-page-gutter);
  padding-right:clamp(22px,3.3vw,64px);
}
body.ref17 .primeup-premium-carousel .primeup-hero-pagination{
  left:var(--primeup-page-gutter);
}
body.ref17 .primeup-premium-carousel .primeup-hero-nav--prev{
  left:calc(49% + 15px);
}
body.ref17 .primeup-premium-visual{
  border-radius:0 0 0 76px;
}
/* Evitar que as secoes ganhem recuos adicionais além do gutter global. */
body.ref17 .ref-departments > .container,
body.ref17 .ref-products > .container,
body.ref17 .ref-quote-band > .container,
body.ref17 .ref-kits > .container,
body.ref17 .ref-faq > .container,
body.ref17 .ref-consulting > .container,
body.ref17 .pu-discovery > .container,
body.ref17 .primeup-value-section > .container,
body.ref17 .primeup-editorial-band > .container{
  width:var(--primeup-page-inline-size)!important;
  max-width:none!important;
  margin-inline:auto!important;
}
/* A referencia usa titulo editorial grande, sem esticar os paragrafos. */
body.ref17 .ref-section-head h2,
body.ref17 .pu-discovery__lead h2{
  max-width:900px;
}
body.ref17 .ref-section-head>div>p:not(.ref-eyebrow){
  max-width:740px;
}
@media(max-width:800px){
  :root{--primeup-page-gutter:clamp(16px,4.4vw,26px)}
  body.ref17 .primeup-premium-carousel .primeup-premium-slide{
    grid-template-columns:100%;
  }
  body.ref17 .primeup-premium-copy{
    padding-left:var(--primeup-page-gutter);
    padding-right:var(--primeup-page-gutter);
  }
  body.ref17 .primeup-premium-carousel .primeup-hero-pagination{
    left:var(--primeup-page-gutter);
  }
  body.ref17 .primeup-premium-carousel .primeup-hero-nav--prev{left:12px}
  body.ref17 .primeup-premium-visual{border-radius:0 0 0 58px}
}
@media(max-width:500px){
 :root{--primeup-page-gutter:clamp(16px,4.4vw,22px)}
}

/* PRIMEUP HEADER SEM BARRA SUPERIOR | ajuste solicitado */
body .ref17.ref-header.primeup-header--navy .ref-topbar{display:none!important}