/* ============================================================================
SUA GARRAFEIRA · PDP KIT
Frente 2b-sua-garrafeira-ecom · spec kb/2b/clientes/sua-garrafeira/spec-pdp-2026-09-03.md
Referencia de mecanica: usealphaco.com.br (teardown medido 03/09/2026)
ONDE VAI: static/css/sg-pdp-kit.css, carregado no fim do
DEPOIS do CSS do tema (senao a marca vence por ordem de cascata,
gotcha ja pago na Bancada em 02/09).
PALETA: ✅ REAL, nao chutada. Lida em 03/09/2026 de
themes/amazonas/dart-style-colors-a2a3442b35dc7904171181813e06de7e.css
(publico, sem login). Contagem de uso no proprio arquivo entre parenteses.
A primeira versao deste kit chutou vinho #8C2140; a marca e AZUL-MARINHO.
Regra da casa confirmada na pratica: nao chutar hex
(gotcha-brand-json-hex-chutado).
============================================================================ */
:root{
/* --- vindos do tema, verbatim ------------------------------------------- */
--sg-ink:#041c38; /* primary (93x): .btn-primary, .text-primary, .bg-primary */
--sg-line:#e3e1e0; /* secondary (8x): .section-topbar, .tooltip, .label-secondary */
--sg-ok:#35b69f; /* accent (6x): .installment-no-interest, .bar-progress-active
↑ o tema JA usa este verde na propria barra de progresso,
entao a barra de frete deste kit nasce coerente */
--sg-sale:#cc4845; /* danger (3x): .alert-danger */
--sg-gold:#d27611; /* warning (2x): .alert-warning. E o unico ambar da paleta;
usado aqui para a estrela de avaliacao. Se a Ana quiser
um dourado proprio, e o unico hex deste bloco a trocar */
/* --- derivados do primary por conta, nao inventados --------------------- */
--sg-body:#65707f; /* fallback estatico */
--sg-body:color-mix(in srgb,var(--sg-ink) 62%,#fff);
--sg-soft:#f5f4f3; /* fallback estatico */
--sg-soft:color-mix(in srgb,var(--sg-line) 38%,#fff);
--sg-ink-hover:#0a3563; /* fallback estatico */
--sg-ink-hover:color-mix(in srgb,var(--sg-ink) 82%,#fff);
/* o tema NAO muda o fundo do botao no hover (.btn-primary:hover so mexe em
color). Como um botao de compra precisa responder ao mouse, o hover aqui e
DERIVADO do primary real, nao uma cor nova de marca. Se a Ana vetar, tirar
estas 2 linhas e o botao volta a ser chapado como no tema. */
--sg-radius:14px;
--sg-sticky-h:0px; /* o JS escreve a altura real aqui */
--sg-header-h:0px; /* altura do header sticky do tema. W1: medir e por
o valor real, senao a buybox sticky do desktop
escorrega por baixo do header. */
}
/* ---------------------------------------------------------------- 1. PRECO */
/* Riscado permanente no padrao da referencia (R$119,90 riscado contra R$79,90).
⚠️ O valor do riscado tem que ser preco que a loja pratica ou praticou.
Ver secao 6.2 do PRD: isso e requisito de execucao, nao opiniao. */
.sg-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 12px; margin:0 0 6px }
.sg-price__from{
color:var(--sg-body); font-size:15px; font-weight:500;
text-decoration:line-through; text-decoration-thickness:1.5px;
text-decoration-color:color-mix(in srgb,var(--sg-body) 55%,transparent);
}
.sg-price__now{ color:var(--sg-ink); font-size:clamp(26px,4vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1 }
.sg-price__off{
display:inline-flex; align-items:center; gap:4px;
background:var(--sg-sale); color:#fff;
font-size:12px; font-weight:800; letter-spacing:.02em;
padding:5px 9px; border-radius:999px; white-space:nowrap;
}
.sg-price__terms{ margin:2px 0 0; color:var(--sg-body); font-size:13px; line-height:1.5 }
.sg-price__terms b{ color:var(--sg-ink) }
.sg-price__pix{ color:var(--sg-ok); font-weight:700 }
/* selo na vitrine (a referencia poe estrela e % antes do clique) */
.sg-card__badge{
position:absolute; top:10px; left:10px; z-index:2;
background:var(--sg-sale); color:#fff;
font-size:11px; font-weight:800; padding:4px 8px; border-radius:999px;
}
/* -------------------------------------------------------------- 2. GALERIA */
/* 4 fotos na ordem do estudo: garrafa, contra-rotulo, taca, mesa. */
.sg-gallery{ display:grid; gap:10px }
.sg-gallery__main{
position:relative; aspect-ratio:1/1; background:var(--sg-soft);
border:1px solid var(--sg-line); border-radius:var(--sg-radius); overflow:hidden;
}
/* aspect-ratio no container e nao no : atributo width/height do img
sobrescreve aspect-ratio (gotcha-css-img-attrs-override-aspect-ratio) */
.sg-gallery__main img{ width:100%; height:100%; object-fit:contain; display:block }
/* auto-fit, nao repeat(4): o catalogo tem produto com 1 foto e produto com 14.
Travar em 4 colunas deixa 6 fotos como 4+2, que parece defeito. */
.sg-gallery__thumbs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(62px,1fr)); gap:8px }
.sg-gallery__thumb{
aspect-ratio:1/1; background:var(--sg-soft); border:1.5px solid var(--sg-line);
border-radius:10px; overflow:hidden; cursor:pointer; padding:0;
transition:border-color .15s ease;
}
.sg-gallery__thumb[aria-current="true"]{ border-color:var(--sg-ink) }
.sg-gallery__thumb img{ width:100%; height:100%; object-fit:contain; display:block }
.sg-gallery__cap{ color:var(--sg-body); font-size:11px; text-align:center; margin-top:3px }
/* ------------------------------------------------------- 3. PROVA (ESTRELA) */
.sg-rating{ display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:13px }
.sg-rating__stars{ color:var(--sg-gold); letter-spacing:1px; font-size:15px }
.sg-rating__n{ color:var(--sg-body) }
.sg-rating__n a{ color:var(--sg-body); text-decoration:underline }
/* estado "loja sem avaliacao". Ate 11/09 este bloco simplesmente SUMIA, e a
pagina nao dizia nada sobre avaliacao. Agora ele aparece apagado: estrela
na cor da linha, nao no dourado, e o texto do lado explicando. Estrela
dourada cheia sem avaliacao nenhuma seria prova social inventada. */
.sg-rating--vazio .sg-rating__stars{ color:var(--sg-line) }
.sg-rating--vazio .sg-rating__n{ font-size:12px }
.sg-rating[data-count="0"]:not(.sg-rating--vazio){ display:none }
/* --------------------------------------------------------- 4. COMPRA + BOX */
.sg-buybox{ display:grid; gap:14px }
.sg-buy{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%; padding:17px 22px; border:0; border-radius:999px;
background:var(--sg-ink); color:#fff;
font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
letter-spacing:1.5px; /* o .btn-primary do tema usa letter-spacing:2px em 14px;
aqui e 15px, entao 1.5px mantem a mesma densidade */
transition:background .18s ease, transform .12s ease;
}
.sg-buy:hover{ background:var(--sg-ink-hover) }
.sg-buy:active{ transform:translateY(1px) }
.sg-buy:focus-visible{ outline:3px solid var(--sg-ink-hover); outline-offset:3px }
.sg-buy[disabled]{ background:var(--sg-line); color:var(--sg-body); cursor:not-allowed }
/* opcao de compra: unidade x caixa de 6 x assinatura.
A caixa de 6 e PRE-REQUISITO de praca nova: o frete cai de 43% pra 11,5%
do pedido. Por isso ela e opcao visivel, nao produto escondido. */
.sg-opts{ display:grid; gap:8px }
.sg-opt{
display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:12px;
border:1.5px solid var(--sg-line); border-radius:var(--sg-radius);
padding:14px; cursor:pointer; background:#fff;
transition:border-color .15s ease, background .15s ease;
}
.sg-opt:hover{ border-color:color-mix(in srgb,var(--sg-ink) 35%,var(--sg-line)) }
.sg-opt[data-selected="true"]{ border-color:var(--sg-ink); background:var(--sg-soft) }
.sg-opt__radio{
width:20px; height:20px; border:1.5px solid var(--sg-line); border-radius:50%;
position:relative; flex:none;
}
.sg-opt[data-selected="true"] .sg-opt__radio{ border-color:var(--sg-ink) }
.sg-opt[data-selected="true"] .sg-opt__radio::after{
content:''; position:absolute; inset:4px; border-radius:50%; background:var(--sg-ink);
}
.sg-opt__t{ font-size:14px; font-weight:700; color:var(--sg-ink) }
.sg-opt__s{ font-size:12px; color:var(--sg-body); margin-top:2px }
.sg-opt__p{ font-size:14px; font-weight:800; color:var(--sg-ink); text-align:right; white-space:nowrap }
.sg-opt__tag{
display:inline-block; margin-left:6px; vertical-align:1px;
background:var(--sg-ok); color:#fff; font-size:10px; font-weight:800;
padding:2px 6px; border-radius:999px;
}
/* ------------------------------------------------------ 5. SELOS DE CONFIANCA */
/* As paginas de politica existem e vivem no rodape. O que faltava e elas
aparecerem NA HORA da decisao (bloco 7 do estudo). */
.sg-trust{
display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
background:var(--sg-line); border:1px solid var(--sg-line);
border-radius:var(--sg-radius); overflow:hidden;
}
.sg-trust__i{ background:#fff; padding:13px 14px; display:flex; gap:9px; align-items:flex-start }
.sg-trust__i svg{ width:17px; height:17px; flex:none; stroke:var(--sg-ink-hover); fill:none; stroke-width:2; margin-top:1px }
.sg-trust__i b{ display:block; font-size:12.5px; color:var(--sg-ink) }
.sg-trust__i span{ font-size:11.5px; color:var(--sg-body); line-height:1.4 }
.sg-age{
display:inline-flex; align-items:center; gap:7px; margin-top:12px;
border:1.5px solid var(--sg-line); border-radius:999px; padding:7px 13px;
font-size:11.5px; font-weight:600; color:var(--sg-body);
}
.sg-age__n{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%;
background:var(--sg-ink); color:#fff; font-size:10px; font-weight:800; flex:none;
}
/* --------------------------------------------------- 6. FICHA EM 2 CAMADAS */
/* O melhor ativo da loja (2.176 caracteres no Porto Ruby, mediana 734 no
catalogo) abre FECHADO no fim da pagina hoje. As duas camadas ficam abertas. */
.sg-sheet{ border-top:1px solid var(--sg-line); padding-top:24px; margin-top:28px }
.sg-sheet__lead{
display:grid; gap:8px; background:var(--sg-soft);
border:1px solid var(--sg-line); border-radius:var(--sg-radius); padding:16px;
}
.sg-sheet__lead dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13.5px }
.sg-sheet__lead dt{ color:var(--sg-body); font-weight:600 }
.sg-sheet__lead dd{ margin:0; color:var(--sg-ink); font-weight:700 }
.sg-sheet__full{ margin-top:18px }
.sg-sheet__full h3{ font-size:15px; font-weight:800; color:var(--sg-ink); margin:0 0 10px }
.sg-sheet__full table{ width:100%; border-collapse:collapse; font-size:13.5px }
.sg-sheet__full th,.sg-sheet__full td{ padding:9px 0; border-bottom:1px solid var(--sg-line); text-align:left }
.sg-sheet__full th{ color:var(--sg-body); font-weight:600; width:42%; }
.sg-sheet__full td{ color:var(--sg-ink); font-weight:600 }
/* a tabela nao empurra a pagina no mobile (gotcha-grid-1fr-nao-encolhe) */
.sg-sheet__wrap{ max-width:100%; overflow-x:auto }
/* -------------------------------------------------------------- 7. COPY */
.sg-copy{ border-top:1px solid var(--sg-line); margin-top:28px; padding-top:26px }
.sg-copy h3{ font-size:clamp(18px,2.4vw,21px); font-weight:800; color:var(--sg-ink); margin:0 0 12px; letter-spacing:-.01em }
.sg-copy p{ color:var(--sg-body); font-size:14.5px; line-height:1.65; margin:0 0 12px; max-width:62ch }
.sg-copy strong{ color:var(--sg-ink) }
.sg-copy__sign{
display:flex; align-items:center; gap:12px; margin-top:18px;
padding-top:16px; border-top:1px solid var(--sg-line);
}
.sg-copy__sign img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--sg-soft) }
.sg-copy__sign b{ display:block; font-size:13.5px; color:var(--sg-ink) }
.sg-copy__sign span{ font-size:12px; color:var(--sg-body) }
/* --------------------------------------------- 8. STICKY DE COMPRA (mobile) */
/* ⚠️ GOTCHA JA PAGO (2b-bancada-saas, 02/09): barra sticky no rodape cobre
justamente o botao que importa. Duas defesas aqui:
1. a barra so aparece quando o botao REAL saiu da tela (IntersectionObserver)
2. enquanto visivel, o JS escreve --sg-sticky-h e o body reserva esse espaco,
entao ela nunca cobre rodape nem botao clicavel. */
body{ padding-bottom:var(--sg-sticky-h) }
.sg-sticky{
position:fixed; left:0; right:0; bottom:0; z-index:900;
display:flex; align-items:center; gap:12px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.97);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-top:1px solid var(--sg-line);
box-shadow:0 -6px 24px -12px rgba(21,19,26,.22);
transform:translateY(110%); transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.sg-sticky[data-show="true"]{ transform:translateY(0) }
@media (prefers-reduced-motion:reduce){ .sg-sticky{ transition:none } }
.sg-sticky__img{ width:44px; height:44px; border-radius:8px; object-fit:contain; background:var(--sg-soft); flex:none }
.sg-sticky__txt{ min-width:0; flex:1 }
.sg-sticky__n{
font-size:12.5px; font-weight:700; color:var(--sg-ink); line-height:1.25;
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.sg-sticky__p{ font-size:13px; font-weight:800; color:var(--sg-ink); margin-top:2px }
.sg-sticky__p s{ color:var(--sg-body); font-weight:500; font-size:11.5px; margin-right:5px }
.sg-sticky .sg-buy{ width:auto; flex:none; padding:13px 20px; font-size:14px }
@media (min-width:900px){
/* no desktop o botao real quase sempre esta visivel; a barra fica so como
rede de seguranca em pagina longa */
.sg-sticky{ padding:10px 24px }
.sg-sticky__n{ -webkit-line-clamp:1 }
}
/* ------------------------------------------------ 9. BARRA DE FRETE (topo) */
/* A referencia poe isso em TODA pagina, com a copy "Faltam [valor] para o
frete gratis". A Nuvem Shop ja tem as primitivas no tema:
LS.calculateShippingAjax, LS.ShippingDiscountRow, LS.hasCartMinimumValue. */
.sg-ship{
background:var(--sg-ink); color:#fff;
font-size:12.5px; font-weight:600; text-align:center;
padding:9px 14px; line-height:1.4;
}
.sg-ship b{ color:#fff }
.sg-ship__bar{
display:block; max-width:260px; height:3px; margin:7px auto 0;
background:rgba(255,255,255,.24); border-radius:999px; overflow:hidden;
}
.sg-ship__bar i{ display:block; height:100%; background:var(--sg-ok); border-radius:999px; transition:width .3s ease }
.sg-ship--done{ background:var(--sg-ok) }
/* ------------------------------------------------------- 10. CTA DO HEADER */
/* Destino decidido em 03/09 (D9): o vinho que mais sai, ou o do hero.
Medido no Shopping (30d): Discordia Grande Reserva 2013 = 161 dos 471
cliques da conta. */
.sg-headcta{
display:inline-flex; align-items:center; gap:7px;
padding:10px 18px; border-radius:999px;
background:var(--sg-ink); color:#fff;
font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap;
transition:background .18s ease;
}
.sg-headcta:hover{ background:var(--sg-ink-hover); color:#fff }
.sg-headcta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2 }
@media (max-width:600px){
.sg-headcta{ padding:9px 14px; font-size:12px }
.sg-headcta__long{ display:none }
}
/* ------------------------------------------------------------ 11. LAYOUT */
.sg-pdp{ display:grid; gap:28px; align-items:start }
@media (min-width:900px){
.sg-pdp{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px }
.sg-pdp__buy{ position:sticky; top:calc(var(--sg-header-h) + 24px) }
}
.sg-pdp__title{ font-size:clamp(20px,3vw,26px); font-weight:800; color:var(--sg-ink); margin:0 0 4px; letter-spacing:-.015em; line-height:1.25 }
.sg-pdp__brand{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ink-hover); margin:0 0 10px }
/* ------------------------------------------------------------ 12. 404
Emendado em 10/09/2026. Mora aqui, e nao num CSS proprio, porque o layout
ja carrega este arquivo em TODA pagina: um arquivo novo exigiria mexer no
layout.tpl outra vez, e ele e o unico arquivo que derruba a loja inteira.
Tudo escopado em #sg-404, entao nao encosta na PDP.
Mobile-first de proposito: a medicao de 10/09 achou 51 font-size fixos em
px no CSS do tema, e nenhum deles ajuda em celular. Aqui e clamp(). */
#sg-404{ padding:clamp(24px,6vw,56px) 0 }
.sg-404__cod{
font-size:clamp(64px,18vw,132px); font-weight:800; line-height:.9;
letter-spacing:-.04em; margin:0 0 4px;
color:var(--sg-line);
color:color-mix(in srgb,var(--sg-ink) 16%,#fff);
}
.sg-404__titulo{
font-size:clamp(22px,4.5vw,32px); font-weight:800; color:var(--sg-ink);
letter-spacing:-.02em; line-height:1.2; margin:0 0 10px;
}
.sg-404__texto{
color:var(--sg-body); font-size:clamp(14px,2.6vw,16px); line-height:1.6;
max-width:52ch; margin:0 auto 22px;
}
/* busca: empilha no celular, lado a lado quando cabe */
.sg-404__busca{ display:flex; flex-wrap:wrap; gap:8px; margin:0 auto 20px; max-width:460px }
.sg-404__campo{ flex:1 1 100%; min-width:0 }
.sg-404__enviar{ flex:1 1 100% }
@media (min-width:520px){
.sg-404__campo{ flex:1 1 auto }
.sg-404__enviar{ flex:0 0 auto }
}
/* categorias em pilula: alvo de toque com 44px de altura, que e o minimo
pra dedo. Vem do {% for category in categories %}, entao nunca 404. */
.sg-404__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 24px }
.sg-404__chip{
display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
border:1px solid var(--sg-line); border-radius:999px;
background:var(--sg-soft); color:var(--sg-ink);
font-size:14px; font-weight:600; text-decoration:none; line-height:1;
transition:background .15s ease,border-color .15s ease;
}
.sg-404__chip:hover,.sg-404__chip:focus-visible{
background:#fff; border-color:var(--sg-ink); color:var(--sg-ink); text-decoration:none;
}
.sg-404__acoes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.sg-404__acoes .btn{ flex:1 1 100%; min-height:44px }
@media (min-width:520px){
.sg-404__acoes .btn{ flex:0 0 auto }
}
.sg-404__sub{
font-size:clamp(15px,2.8vw,18px); font-weight:700; color:var(--sg-ink);
margin:34px 0 0; letter-spacing:-.01em;
}
/* ------------------------------------------------------------ 13. AD BAR
A topbar do tema hoje e uma faixa clara com dois icones que quase nao se
veem: ela usa a cor "secondary" (#e3e1e0), que e quase branco, e o icone
herda contraste de cima dela.
Escopo em `.sg-adbar`, classe que o sg-theme-bridge.js poe SO quando acha o
.js-swiper-adbar. Ou seja: enquanto a barra de anuncio estiver desligada no
painel, nada aqui encosta na topbar. Nao rouba a cor de quem nao pediu.
Emendado em 10/09/2026. */
.section-topbar.sg-adbar{
background:var(--sg-ink); color:#fff;
border-bottom:1px solid color-mix(in srgb,var(--sg-ink) 70%,#fff);
}
.section-topbar.sg-adbar .adbar-message,
.section-topbar.sg-adbar .slide-container{
font-size:clamp(12px,2.6vw,13.5px); font-weight:600; letter-spacing:.01em;
line-height:1.35;
}
/* o tema poe .link-contrast no link da mensagem, calculado contra o fundo
claro. Com fundo escuro ele fica ilegivel, entao aqui a cor e explicita. */
.section-topbar.sg-adbar a,
.section-topbar.sg-adbar .link-contrast{
color:#fff; text-decoration:underline;
text-decoration-color:color-mix(in srgb,#fff 45%,transparent);
text-underline-offset:2px;
}
.section-topbar.sg-adbar a:hover,
.section-topbar.sg-adbar .link-contrast:hover{
color:#fff; text-decoration-color:#fff;
}
/* os icones sociais: eram o problema visual que o Matheus apontou */
.section-topbar.sg-adbar .social-icon svg,
.section-topbar.sg-adbar .svg-icon-text svg{ fill:currentColor; color:#fff }
.section-topbar.sg-adbar .social-icon{ color:#fff; opacity:.85 }
.section-topbar.sg-adbar .social-icon:hover{ opacity:1 }
/* altura de leitura no celular, onde a barra passa a aparecer quando a
ad_bar e ligada (o tema tira o d-none d-md-block nesse caso) */
.section-topbar.sg-adbar > .container-fluid{ padding-top:7px; padding-bottom:7px }
.section-topbar.sg-adbar .js-swiper-adbar{ min-height:20px }
/* as setas do carrossel, que no fundo escuro sumiam */
.section-topbar.sg-adbar .swiper-button-small{ color:#fff; opacity:.7 }
.section-topbar.sg-adbar .swiper-button-small:hover{ opacity:1 }
/* ===========================================================================
14. HERO DA HOME: reserva de espaco e botao de verdade
2B Growth - 10/09/2026
MEDIDO na loja em 10/09, nao suposto. Os 4 slides do desktop sao arquivos
1580x450 e os 4 do mobile sao 550x500 - conferido abrindo cada .webp da
maior variante do srcset e lendo a dimensao real do arquivo. Mas DOIS dos
slides do desktop sobem sem os atributos width/height (isso e campo de
painel, slide.width/slide.height), e sem eles o navegador nao sabe a altura
antes da imagem chegar: a home pula quando o hero carrega, que e CLS no pior
lugar possivel, o topo da pagina.
Por que o seletor tem :not([width]) - e a parte que importa. Quando o
atributo EXISTE, o proprio navegador ja calcula a proporcao a partir dele, e
uma regra de aspect-ratio ali seria no melhor caso redundante e no pior uma
briga com o valor do painel. Entao a regra so pega a imagem que esta sem o
atributo, que e exatamente o caso defeituoso.
E o height:auto nao e enfeite: atributo height numa img age como dica de
CSS height em pixel e ANULA o aspect-ratio. Sem o height:auto a imagem
renderiza na altura literal do atributo. Ja tomamos esse bug no site do
Santeli em 20/08.
=========================================================================== */
.js-home-slider .slider-image:not([width]){
aspect-ratio:1580 / 450; height:auto; width:100%;
}
.js-home-slider-mobile .slider-image:not([width]){
aspect-ratio:550 / 500; height:auto; width:100%;
}
/* O botao do hero. Ele passou a aparecer com so o link preenchido (ver o
comentario em snipplets/home/home-slider.tpl), entao agora vale garantir que
ele seja clicavel de dedo: o tema o desenha com btn-extra-small no mobile,
que fica abaixo do alvo de toque de 44px. */
.sg-hero-btn{
min-height:44px; display:inline-flex; align-items:center; justify-content:center;
font-weight:600; letter-spacing:.01em;
box-shadow:0 2px 10px rgba(4,28,56,.25);
}
@media (max-width:767px){
.sg-hero-btn{ min-height:44px; padding-left:18px; padding-right:18px; font-size:15px }
}
/* ===========================================================================
15. A BARRA DE AVISOS: linha corrida, icone, valor em destaque e fechar
2B Growth - 11/09/2026 (segunda versao)
A primeira versao trocava as frases com fade a cada 4,5s, e o retorno do
Matheus foi "ficou muito cru". As duas referencias que ele mandou (Smart
Shipping Bar e Essential Announcement Bar) fazem tres coisas que faltavam e
que sao CSS: a linha CORRE sem emenda, o icone fica colado na frase e o
VALOR aparece destacado dentro do texto (o `sb-highlight` deles).
Como a volta nao tem emenda: o JS monta a trilha com duas metades
identicas, e aqui ela anda de 0 a -50%. No fim da animacao o pixel na tela
e o mesmo do comeco, entao nao existe salto. A duracao vem do JS, calculada
pela largura, pra velocidade ficar constante independente do tamanho da
frase.
Continua valendo o que a versao anterior resolveu: a faixa passa a existir
no CELULAR. O tema marca a topbar com d-none d-md-block e so tira essa
classe quando a barra de anuncio nativa esta ligada no painel; como agora
ela sempre tem conteudo, ela sempre aparece. As colunas de rede social e de
idioma seguem escondidas no mobile, que e o certo.
=========================================================================== */
.section-topbar.sg-adbar{ display:block !important }
.section-topbar.sg-adbar.sg-adbar--off{ display:none !important }
.section-topbar.sg-adbar .row{ align-items:center }
/* as colunas vizinhas (rede social e idioma) sao `.col` do Bootstrap, ou seja
`flex:1 0 0%`: com tres colunas iguais a linha corrida recebia um TERCO da
largura (medido: 393px de 1366). Elas passam a ocupar so o proprio conteudo
e a faixa fica com o resto. */
.section-topbar.sg-adbar .row > .col.text-left,
.section-topbar.sg-adbar .row > .col.text-right{
flex:0 0 auto; width:auto; max-width:none;
}
/* o `min-width:0` e o que faz o overflow:hidden valer dentro de um flex item:
sem ele a coluna cresce junto com o conteudo e a linha nunca e recortada,
ou seja o marquee vira uma faixa larguissima com rolagem horizontal */
.section-topbar.sg-adbar .sg-adbar__col{
display:flex !important; align-items:center; gap:6px;
min-width:0; overflow:hidden;
}
.sg-adbar__vp{
flex:1 1 auto; min-width:0; overflow:hidden;
/* as pontas somem em degrade em vez de cortar a letra no meio */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
/* a trilha nasce INVISIVEL e so aparece montada. Sem isto, o visitante ve a
sequencia de frases numa posicao, o JS clona as copias que fazem a volta sem
emenda, e as frases mudam de lugar: medido na vitrine em 11/09, 0,0133 de CLS
com `A.sg-adbar__item` entre as fontes. `visibility` e nao `display` de
proposito: visibility nao mexe no layout, entao a altura ja reservada (secao
15.2) continua valendo e o que muda e so a hora de aparecer. As duas classes
que revelam sao postas pelo JS em TODOS os caminhos, inclusive quando ele
desiste de medir a largura. */
.sg-adbar__track{ display:flex; width:max-content; will-change:transform; visibility:hidden }
.sg-adbar__track--rola,
.sg-adbar__track--parada{ visibility:visible }
.sg-adbar__track--rola{ animation:sg-adbar-corre linear infinite }
.sg-adbar__track--parada{ width:100%; justify-content:center }
@keyframes sg-adbar-corre{
from{ transform:translateX(0) }
to{ transform:translateX(-50%) }
}
/* para de correr quando a pessoa vai ler, e quando o teclado chega num link */
.section-topbar.sg-adbar:hover .sg-adbar__track--rola,
.sg-adbar__track--rola:focus-within{ animation-play-state:paused }
.sg-adbar__seq{ display:flex; align-items:center; flex:0 0 auto }
.sg-adbar__item{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
font-size:clamp(12px,2.6vw,13.5px); font-weight:600; letter-spacing:.01em;
}
/* a secao 13 sublinha todo link da faixa, o que aqui sublinharia o icone
junto; o sublinhado volta no hover, que e quando ele informa algo */
.section-topbar.sg-adbar a.sg-adbar__item{ text-decoration:none }
.section-topbar.sg-adbar a.sg-adbar__item:hover{
text-decoration:underline; text-underline-offset:2px;
}
.sg-adbar__ico{ width:15px; height:15px; flex:0 0 auto; fill:currentColor; opacity:.9 }
.sg-adbar__forte{ font-weight:800; margin-left:4px }
.sg-adbar__sep{ opacity:.45; padding:0 16px; white-space:nowrap }
.sg-adbar__fechar{
flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:50%;
background:transparent; color:inherit; opacity:.6; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition:opacity .15s ease, background .15s ease;
}
.sg-adbar__fechar:hover{ opacity:1; background:rgba(255,255,255,.14) }
.sg-adbar__fechar:focus-visible{ outline:2px solid #fff; outline-offset:1px; opacity:1 }
.sg-adbar__fechar .sg-adbar__ico{ width:11px; height:11px }
/* quem pediu menos animacao no sistema recebe a faixa pronta e parada, com as
frases centradas: acessibilidade nao pede pagina pior, pede sem movimento */
@media (prefers-reduced-motion: reduce){
.sg-adbar__track--rola{ animation:none }
.sg-adbar__vp{ -webkit-mask-image:none; mask-image:none }
}
@media (max-width:767px){
.section-topbar.sg-adbar .sg-adbar__col{ padding-left:10px; padding-right:4px }
.sg-adbar__sep{ padding:0 12px }
}
/* ---------------------------------------------------------------------------
15.1 A cor da faixa: a tinta da marca sobre branco
2B Growth - 11/09/2026 (substitui o vinho de 10/09)
O retorno do Matheus foi direto: "muda essa cor pra ficar no padrao da
marca, pode ser ate preto no branco mas sem esse vermelho". O vinho que eu
tinha posto (#9e3738) saiu de amostragem das artes, mas amostrar pixel de
banner nao e o mesmo que respeitar o padrao da loja: no tema o vermelho
(--sg-sale, #cc4845) e reservado a preco e alerta. Barra que aparece em
TODA pagina nao e alerta, entao vermelho ali competia com o que precisa
chamar atencao de verdade.
Por que branco, e nao o azul da secao 13: o header da loja e exatamente
#041c38 - medido no navegador, rgb(4, 28, 56), a mesma variavel --sg-ink.
Faixa azul sobre header azul virava um bloco escuro de ~100px e a barra
deixava de parecer barra, que era a reclamacao de origem. Invertendo, a
faixa clara recorta em cima do header escuro sem inventar cor nenhuma: os
dois tons continuam sendo os da marca, so trocaram de lado.
Contraste #041c38 sobre #fff: ~15,9:1, contra os 4,5:1 que o AA pede. Texto
de faixa e pequeno, e e justamente onde contraste ruim machuca.
As regras daqui pra baixo desfazem, SO dentro da faixa, os brancos que a
secao 13 pintou pensando em fundo escuro: link, icone social e seta do
carrossel. Sem isso eles ficariam branco no branco, invisiveis.
--------------------------------------------------------------------------- */
.section-topbar.sg-adbar{
background:#fff; color:var(--sg-ink);
border-bottom:1px solid var(--sg-line);
}
.section-topbar.sg-adbar a,
.section-topbar.sg-adbar .link-contrast{
color:var(--sg-ink);
text-decoration-color:color-mix(in srgb,var(--sg-ink) 40%,transparent);
}
.section-topbar.sg-adbar a:hover,
.section-topbar.sg-adbar .link-contrast:hover{
color:var(--sg-ink); text-decoration-color:var(--sg-ink);
}
.section-topbar.sg-adbar .social-icon svg,
.section-topbar.sg-adbar .svg-icon-text svg{ fill:currentColor; color:var(--sg-ink) }
.section-topbar.sg-adbar .social-icon{ color:var(--sg-ink); opacity:.55 }
.section-topbar.sg-adbar .social-icon:hover{ opacity:1 }
.section-topbar.sg-adbar .swiper-button-small{ color:var(--sg-ink); opacity:.6 }
.section-topbar.sg-adbar .swiper-button-small:hover{ opacity:1 }
/* o botao de fechar e o realce do valor herdam a tinta; o hover do fechar era
um branco translucido feito pro fundo vinho e no claro nao aparecia */
.sg-adbar__fechar:hover{ background:color-mix(in srgb,var(--sg-ink) 10%,transparent) }
.sg-adbar__fechar:focus-visible{ outline-color:var(--sg-ink) }
.sg-adbar__forte{ color:var(--sg-ink) }
/* ---------------------------------------------------------------------------
15.2 A altura da faixa fica reservada ANTES do JS (conserta o CLS da home)
2B Growth - 11/09/2026
Medido na home, celular 390px com 4G lenta e CPU 4x (tmp/sg_olha_cls_hero.py
e tmp/sg_mede_topbar.py): o maior salto de layout da pagina era 0,0581 aos
2.915ms, e o dono era esta faixa. Com o bridge bloqueado a topbar mede 0px no
celular e 28px no desktop; com ele no ar, 49px nas duas larguras. Ou seja o
visitante via a home inteira descer 49px no celular e 21px no desktop, no
instante em que o script rodava. Empurrao depois da primeira pintura conta
CLS inteiro e, pior, e o classico do dedo que erra o link.
A reserva vale so quando `html.sg-adbar-reserva` existe, e essa classe e
posta por um script sincrono no head do layout que le a MESMA chave de sessao
do botao de fechar. Assim nao ha tarja branca pra quem fechou a barra.
O que eu aceito em troca: se o bridge nao chegar a rodar (bloqueador de
script, rede caindo no meio), sobra uma faixa branca de 49px sem conteudo.
Troquei um defeito raro e cosmetico por um defeito certo em 100% das visitas,
que era a pagina descer no dedo de quem ja estava mirando um link. As
desistencias PREVISIVEIS do bridge nao caem nesse caso: ele chama
soltaReserva() e o espaco volta antes de qualquer pintura importante.
Os 49px nao sao chute nem numero magico solto: a coluna da faixa e um flex
centrado cuja altura vem do botao de fechar (26px) + 7px do container-fluid
+ 4px de padding da secao, dos dois lados. O `min-height` no `.sg-adbar__col`
trava esse 26px na propria coluna, pra copy nova nao mudar a altura e
desalinhar a reserva. Se um dia a faixa precisar de duas linhas, os dois
numeros mudam JUNTOS - aqui e no head. --------------------------------- */
html.sg-adbar-reserva .js-topbar.section-topbar{
display:block !important;
min-height:49px;
}
.section-topbar.sg-adbar .sg-adbar__col{ min-height:26px }
/* a faixa fechada nao reserva nada: `--off` ganha da reserva */
html.sg-adbar-reserva .js-topbar.section-topbar.sg-adbar--off{
display:none !important; min-height:0;
}
/* ===========================================================================
16. O QUE ESTOURA A ALTURA DA JANELA NO DESKTOP (11/09, medido)
---------------------------------------------------------------------------
Reclamacao: "no desktop nao ficou muito legal o tamanho das imagens, parece
que tem coisa maior que 100vh". Medido com regua no navegador (1366x768 e
1920x1080, tmp/sg_mede_desktop.py), duas caixas de verdade passam da janela:
1. O POSTER DA SECAO DE VIDEO, 178% da janela.
O tema poe .video-image{position:absolute;top:50%;left:50%;width:100%;
height:auto;transform:translate(-50%,-50%)} dentro de uma caixa
.embed-responsive-16by9. Com height:auto, a imagem manda na altura:
- o placeholder e 1x1, entao vira um QUADRADO de 1366x1366 e vaza ~300px
pra cima e ~300px pra baixo da caixa de 768, por cima do que esta em
volta. E o que aparece enquanto o lazyload nao troca a imagem;
- depois que a miniatura do YouTube (1280x720) carrega, ela cai em
768px e fica certa. Ou seja o defeito e transitorio, e acontece
exatamente quando a pessoa rola ate a secao.
Conserto: a altura passa a ser a da caixa, e quem se ajusta e a imagem.
Escopo na secao da home de proposito: .product-video .video-image tem
regra propria no tema (width:auto) e nao entra aqui.
2. A FOTO DO PRODUTO, 101% da janela em notebook.
Medido no Fartote: container 758x778 num viewport de 768, e a imagem
dentro e um arquivo de 355x355 esticado pra 758 (2,1x). Grande E borrada
pelo mesmo motivo. Em 1920x1080 da 865 a partir de 500x500 (1,7x).
A causa de fundo e o acervo: a loja tem 1 foto pequena por produto, e as
fotos de 3456x5184 da producao estao esperando a subida. Enquanto isso,
parar de esticar e melhor que esticar: o teto em 60vh mantem a foto
dentro da tela em qualquer notebook e derruba o upscale pra ~1,3x.
Quando as fotos grandes subirem, este teto continua valendo como
composicao (foto que nao passa da tela), sem prejudicar a nitidez.
--------------------------------------------------------------------------- */
.section-video-home .video-image{ height:100%; object-fit:cover }
@media (min-width:768px){
/* NAO capar o container: testado contra o DOM real e a foto SAI CORTADA.
O Swiper grava `width:758px` inline no slide e o quadrado vem de um
`padding-bottom:100%` inline no ; com o container mais estreito que o
slide, o .swiper-container (overflow:hidden) corta a foto pela lateral.
Mexer na altura do nao briga com nenhum dos dois, e o object-fit
impede que a foto pequena estique pra preencher. */
.product-image-container .js-product-slide-link{
padding-bottom:0 !important;
height:60vh;
}
.product-image-container img.product-slider-image{ object-fit:contain }
}
/* ===========================================================================
17. A AREA DE CONTEUDO DA PAGINA DE PRODUTO
2B Growth - 11/09/2026
Quem monta o markup e o sg-pdp-conteudo.js, que le a ficha de dentro da
descricao. As classes sg-copy, sg-sheet e sg-rating ja existiam aqui (secoes
4, 5 e 6, portadas da mock) e continuam valendo sem mudanca: o que faltava
era markup pra elas. Esta secao cobre so o que e novo:
.sg-desc o container da descricao depois de reescrito
.sg-prosa o texto corrido que sobrou da ficha (historia do produtor)
.sg-legal o aviso de bebida alcoolica, que estava em CAIXA ALTA no meio
da descricao e agora e linha discreta no fim
.sg-reviews o enquadramento do #reviewsapp
.sg-copy__sign-ini o circulo com as iniciais, no lugar da foto
DETALHE QUE IMPORTA: a descricao vinha com
de largura fixa em "pt"
(colagem de Excel). Isso estourava a largura no celular. O JS troca o
markup, mas se um rotulo novo for colado do Excel amanha, a regra de tabela
aqui embaixo segura o estrago.
=========================================================================== */
.sg-desc{ font-size:15px; color:var(--sg-body) }
.sg-desc > section:first-child{ border-top:0; margin-top:0; padding-top:0 }
/* rede de seguranca pra colagem de planilha futura */
.sg-desc table{ max-width:100%; width:100% !important; height:auto !important }
.sg-desc td, .sg-desc th{ width:auto !important; height:auto !important }
.sg-prosa{ border-top:1px solid var(--sg-line); margin-top:28px; padding-top:24px }
.sg-prosa h3, .sg-prosa summary span{
font-size:15px; font-weight:800; color:var(--sg-ink); margin:0 0 10px;
display:inline-block;
}
.sg-prosa p{ color:var(--sg-body); font-size:14.5px; line-height:1.65; margin:0 0 12px; max-width:68ch }
.sg-prosa details > summary{
cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
}
.sg-prosa details > summary::-webkit-details-marker{ display:none }
.sg-prosa details > summary::after{
content:'+'; font-size:17px; font-weight:700; color:var(--sg-body);
line-height:1; margin-bottom:10px;
}
.sg-prosa details[open] > summary::after{ content:'–' }
.sg-legal{
margin:20px 0 0; padding-top:14px; border-top:1px solid var(--sg-line);
font-size:11.5px; line-height:1.5; color:var(--sg-body); opacity:.8;
}
/* o circulo de iniciais: a mock usava foto, e foto de pessoa e decisao dela.
Com inicial a assinatura sobe hoje e a foto entra depois sem mexer em CSS. */
.sg-copy__sign-ini{
width:44px; height:44px; border-radius:50%; flex:none;
background:var(--sg-soft); color:var(--sg-ink);
display:inline-flex; align-items:center; justify-content:center;
font-size:13px; font-weight:800; letter-spacing:.02em;
}
.sg-reviews{ margin:36px 0 8px; padding-top:28px; border-top:1px solid var(--sg-line) }
.sg-reviews[hidden]{ display:none !important }
.sg-reviews__t{
font-size:clamp(17px,2.2vw,20px); font-weight:800; color:var(--sg-ink);
margin:0 0 16px; letter-spacing:-.01em;
}
@media (max-width:767px){
.sg-sheet__lead dl{ grid-template-columns:1fr; gap:2px 0 }
.sg-sheet__lead dt{ margin-top:8px }
.sg-sheet__full th{ width:38% }
.sg-reviews{ margin-top:28px }
}
/* ===========================================================================
18. OS 12 SELOS DE PAGAMENTO DO RODAPE, QUE PULAVAM A PAGINA INTEIRA
2B Growth - 11/09/2026 (medido, nao suposto)
---------------------------------------------------------------------------
Na pagina de produto o CLS estava em 0,2742 e o maior salto, 0,1515, saia do
rodape: `js-footer-legal` inteiro descia quando os selos de meio de pagamento
acabavam de carregar. Amostrando a caixa do primeiro selo a cada 150ms com a
rede estrangulada (tmp/sg_amostra_icone.py) da pra ver o filme:
4.841ms caixa 25x25 natural 0x0 bloco 191px
5.597ms caixa 40x25 natural 150x93 bloco 224px
Ou seja o selo nasce QUADRADO e termina retangular, e o bloco cresce 33px
porque com 25px de largura cabem mais selos por linha do que com 40px: os 12
se reorganizam e empurram tudo que vem depois.
A causa nao e falta de dimensao no HTML - o tema escreve width="40"
height="25" em logos-icons.tpl. E o `aspect-ratio: auto 40 / 25` que sai
desses atributos: `auto` significa "prefira a proporcao NATURAL do arquivo".
O arquivo que esta la no comeco e o `empty-placeholder.png`, que mede 1x1 e
portanto tem proporcao 1:1 - a reserva do atributo perde para o placeholder
quadrado. Mesma familia do gotcha de 2026 sobre atributo de img x
aspect-ratio, so que ao contrario: aqui e o natural que atropela o atributo.
Conserto: caixa fixa nos 50px do selo MAIS LARGO (os dois de frete, 120x60)
com `object-fit:contain`. Assim nenhum selo diminui nem distorce - os de
cartao continuam desenhando 40,3x25 dentro de uma caixa de 50 - e a linha
nao tem mais motivo pra se reorganizar. Medido depois, mesma rede: caixa
50x25 desde o primeiro quadro, bloco constante em 224px, e o CLS da PDP caiu
de 0,2742 para 0,0736.
O seletor e longo de proposito: o tema pode ter regra propria de `.icon-logo`
em folha que eu nao consigo ler (cross-origin no navegador), e
`.footer-payments-shipping-logos img.icon-logo` ganha de qualquer coisa com
uma classe so, sem precisar de !important. -------------------------------- */
.footer-payments-shipping-logos img.icon-logo{
width:50px; height:25px; object-fit:contain;
}
/* ===========================================================================
19. O BLOCO DE VIDEO DA HOME AINDA PASSAVA DA JANELA NO DESKTOP
2B Growth - 11/09/2026 (fecha o pedido da secao 16)
---------------------------------------------------------------------------
A secao 16 consertou a IMAGEM do poster (o placeholder de 1x1 virava um
quadrado de 1366x1366 e vazava por cima dos vizinhos). Sobrou a CAIXA: o
video e 16:9 na largura inteira da tela, e 16:9 de tela cheia e, por
definicao, mais alto que a janela em qualquer monitor 16:9. Medido no ar:
1366x768 secao 967px = 126%vh (o video sozinho da 768, exato 100%vh)
1920x1080 secao 1258px = 117%vh
Ou seja o visitante de notebook precisa rolar pra ver o bloco inteiro, que e
exatamente a reclamacao "parece que tem coisa maior que 100vh".
Conserto pela LARGURA, nao pela altura: teto de 70vh de video (`70vh * 16/9`
de largura) com margem automatica. Assim a proporcao 16:9 continua exata, o
video fica centrado e o bloco inteiro cabe na tela. Medido depois de aplicar:
96%vh em 1366 e 87%vh em 1920, com o video em 956x538 e 1344x756.
Capar a altura direto seria pior: o tema usa `.embed-responsive-16by9`, que
e padding-bottom percentual, e altura fixa ali deixa a caixa e o iframe
discordando. So no desktop, porque no celular 16:9 da ~220px e nao estoura
nada. --------------------------------------------------------------------- */
@media (min-width:768px){
.section-video-home .col-12.js-home-video{
max-width:calc(70vh * 16 / 9);
margin-left:auto; margin-right:auto;
}
}
/* ===========================================================================
20. O VAZIO EMBAIXO DO BOTAO DE COMPRAR (11/09)
Medido na PDP do Fartote em 1366x900: a coluna da direita mede 1.882px de
altura e o formulario de compra termina aos 862px. Sao ~1.020px de branco
embaixo do botao COMPRAR, enquanto a coluna da esquerda segue com curadoria
e ficha. Foi o que o cliente apontou olhando a pagina.
O que entra ali e a area de avaliacao, que ate agora existia escondida. O
cartao usa a mesma caixa clara da ficha destaque pra nao competir com o
botao: o botao continua sendo a unica coisa escura da coluna.
=========================================================================== */
.sg-aval{
border:1px solid var(--sg-line); border-radius:10px;
background:var(--sg-soft); padding:16px 18px; margin:0 0 20px;
}
.sg-aval__t{
font-size:14px; font-weight:700; letter-spacing:.02em;
color:var(--sg-ink); margin:0 0 8px;
}
.sg-aval .sg-rating{ margin:0 0 8px }
.sg-aval__conv{ font-size:13px; line-height:1.5; color:var(--sg-body); margin:0 }
.sg-aval__acao{
display:inline-block; margin-top:12px; font-size:13px; font-weight:700;
color:var(--sg-ink); text-decoration:none;
border:1px solid var(--sg-ink); border-radius:999px; padding:8px 16px;
transition:background .15s ease, color .15s ease;
}
.sg-aval__acao:hover{ background:var(--sg-ink); color:#fff; text-decoration:none }
.sg-aval[data-estado="cheio"]{ background:#fff }
/* no celular o tema empilha as colunas, entao o cartao ja cai embaixo do
botao naturalmente; so aperto o respiro pra nao empurrar a ficha pra longe */
@media (max-width:767px){
.sg-aval{ padding:14px 16px; margin-bottom:16px }
}
/* ===========================================================================
21. AS AVALIACOES DO ECOM ANTERIOR (11/09)
360 avaliacoes migradas do e-commerce anterior da loja, liberadas pelo
cliente, nos 39 produtos. Media 4,83. Os dados vivem em dois assets gerados
por scripts/sg_gera_avaliacoes.py: o resumo (2,9 KB, sobe com a pagina porque
a estrela fica acima da dobra) e o texto (60 KB, buscado quando a secao
aproxima).
A ESTRELA PARCIAL. 4,83 nao e 5 e nao pode ser desenhado como 5. Sao duas
camadas de cinco estrelas: a de baixo na cor da linha, a de cima dourada e
recortada na largura da nota. Assim 4,83 aparece como 4,83 e nao arredondado
pra cima, que seria inflar a nota no desenho.
=========================================================================== */
.sg-stars{
position:relative; display:inline-block; white-space:nowrap;
letter-spacing:1px; line-height:1;
}
.sg-stars__base,
.sg-stars__fill{ font-style:normal; font-weight:400 }
.sg-stars__base{ color:var(--sg-line) }
.sg-stars__fill{
position:absolute; left:0; top:0; overflow:hidden;
width:var(--sg-p,0%); color:var(--sg-gold);
}
/* a linha embaixo do titulo */
.sg-rating__nota{ font-weight:700; color:var(--sg-ink) }
.sg-rating--cheio .sg-rating__n a{ text-decoration:underline }
/* o cartao da coluna da direita, no estado com avaliacao */
.sg-aval[data-estado="cheio"]{ background:#fff }
.sg-aval__topo{ display:flex; align-items:center; gap:12px; margin:0 0 10px }
.sg-aval__media{
font-size:30px; font-weight:800; line-height:1; color:var(--sg-ink);
}
.sg-aval__de5{ font-size:12px; color:var(--sg-body); display:block; margin-top:2px }
.sg-aval__barras{ display:grid; gap:3px; margin:0 0 12px }
.sg-aval__barra{
display:grid; grid-template-columns:26px 1fr 26px; align-items:center; gap:6px;
font-size:11px; color:var(--sg-body);
}
.sg-aval__trilho{ height:5px; border-radius:3px; background:var(--sg-line); overflow:hidden }
.sg-aval__cheio{ display:block; height:100%; background:var(--sg-gold) }
.sg-aval__qtd{ text-align:right }
/* a lista, na largura inteira embaixo da ficha */
.sg-reviews__t{
font-size:17px; font-weight:700; color:var(--sg-ink);
margin:32px 0 4px; letter-spacing:.01em;
}
.sg-reviews__sub{ font-size:13px; color:var(--sg-body); margin:0 0 18px }
.sg-reviews__lista{ display:grid; gap:0; margin:0; padding:0; list-style:none }
.sg-reviews__item{ border-top:1px solid var(--sg-line); padding:16px 0 }
.sg-reviews__item:last-child{ border-bottom:1px solid var(--sg-line) }
.sg-reviews__cab{
display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 6px;
}
.sg-reviews__quem{ font-weight:700; font-size:13px; color:var(--sg-ink) }
.sg-reviews__quando{ font-size:12px; color:var(--sg-body) }
.sg-reviews__tit{ font-size:14px; font-weight:700; color:var(--sg-ink); margin:0 0 3px }
.sg-reviews__txt{ font-size:14px; line-height:1.6; color:var(--sg-body); margin:0 }
.sg-reviews__mais{
margin:18px 0 0; font-size:13px; font-weight:700; color:var(--sg-ink);
background:none; border:1px solid var(--sg-ink); border-radius:999px;
padding:9px 18px; cursor:pointer;
}
.sg-reviews__mais:hover{ background:var(--sg-ink); color:#fff }
@media (max-width:767px){
.sg-reviews__t{ margin-top:24px }
.sg-aval__media{ font-size:26px }
}
/* ============================================================================
#RITMO VERTICAL (2B Growth, 14/09/2026)
A QUEIXA: "faixas brancas entre as divs, como se tivesse um respiro falso".
O QUE EU MEDI ANTES DE MEXER, na home do celular em 390px. Nao sao margens
grandes demais em abstrato - e que a pagina tem CINCO ritmos ao mesmo tempo:
hero -> faixa de servicos ......... 24 px
servicos -> "Os mais vendidos" .... 70 px
vendidos -> banner do Fartote ..... 71 px
banner -> banner (mesma secao) .... 35 px
banners -> marcas ................. 35 px
marcas -> banners promocionais .... 70 px
newsletter -> Instagram ........... 70 px
Instagram -> video ................ 69 px
Somando so os vaos de 40px pra cima: 862 px, ou 11% da pagina do celular, e
14% no desktop. O olho nao le "respiro", le "faltou alguma coisa aqui".
E A INVERSAO QUE E O CERNE DO DEFEITO: o vao ENTRE secoes era 70px e o vao
DENTRO da secao (titulo -> primeiro card) era 43px. Perto demais. Quando o
espaco acima de um titulo e quase igual ao de baixo, o titulo para de
pertencer ao conteudo dele e a pagina vira uma pilha de pedacos soltos. Por
isso nao basta encolher: tem que ficar HIERARQUICO.
O que fica:
entre secoes .............. 40 px no celular, 56 no desktop
entre banners empilhados .. 16 / 24 (imagem colada em imagem le como
sequencia; branco entre elas le
como erro de carregamento)
titulo -> conteudo ........ 12 / 20 (+15 do proprio card = 27 / 35)
O QUE EU NAO MEXI, de proposito: o padding de 50px das faixas de servicos e
de marcas. Eu ia cortar, e a medicao me impediu - as duas tem fundo
rgba(0,0,0,.1). Aquele espaco esta DENTRO do cinza, nao e faixa branca
nenhuma, e encolher mudaria o desenho em vez de consertar o defeito.
Mesma coisa com o padding da newsletter, que e a tarja azul.
========================================================================== */
:root{
--sg-vao:40px; /* entre secoes */
--sg-vao-imagem:16px; /* entre banners empilhados */
--sg-vao-titulo:12px; /* titulo -> conteudo da propria secao */
}
@media (min-width:768px){
:root{ --sg-vao:56px; --sg-vao-imagem:24px; --sg-vao-titulo:20px }
}
/* as faixas da home e da PDP, todas no mesmo compasso */
.section-informative-banners,
.section-featured-home,
.section-banners-home,
.section-brands-home,
.section-newsletter-home,
.section-instafeed-home,
.section-video-home,
.row.section-single-product{ margin-bottom:var(--sg-vao) }
/* banner colado em banner: passo curto, senao a sequencia se desmancha */
.section-banners-home .textbanner{ margin-bottom:var(--sg-vao-imagem) }
.section-banners-home .textbanner:last-child{ margin-bottom:0 }
/* titulo preso ao conteudo dele. Seletor pelas classes que eu LISTEI na
pagina, e nao por "h2.h1": essa e classe de tipografia e aparece em titulo
que nao e de secao, como o nome do produto na PDP. */
.js-products-featured-title,
.js-home-video-title,
.products-section-title{ margin-bottom:var(--sg-vao-titulo) }
/* o rodape ja tem 50px de respiro proprio DENTRO da tarja preta; os 20px de
margem em cima disso eram branco puro somado ao vao da ultima secao */
footer.js-hide-footer-while-scrolling{ margin-top:0 }
/* As avaliacoes ja se separam por uma linha (border-top). Com a margem do
bloco de compra ajustada acima, a margem propria daqui viraria vao dobrado. */
.sg-reviews{ margin-top:0 }
@media (max-width:767px){ .sg-reviews{ margin-top:0 } }
/* COMENTARIOS DO FACEBOOK: desligados, e isto e conserto e nao faxina.
Medido em tres PDPs diferentes: o bloco tem 18px de altura, o iframe tem
ZERO, o texto visivel e vazio - e ele carrega com margin-bottom de 70px.
Sao 88px de nada entre o botao de comprar e as avaliacoes, em toda pagina de
produto, mais uma chamada ao connect.facebook.net que ninguem le. O vao de
213px que eu media ali entre o bloco de compra e as avaliacoes era 70 da
secao + 18 do widget + 70 da margem dele + 28+28 das avaliacoes.
Isto esconde no CSS. O certo e desligar no painel, e esta anotado na lista
do web designer - enquanto nao desligam, o visitante para de ver o buraco e
o iframe continua sendo pedido. */
.fb-comments.section-fb-comments{ display:none }
/* DUAS CLASSES NO SELETOR, e isso nao e enfeite. Na primeira versao eu escrevi
`.section-fb-comments{display:none}` e o bloco continuou aparecendo: o
computado voltou `display: inline-block`. Causa: o SDK do Facebook injeta a
FOLHA DELE em tempo de execucao, com `.fb_iframe_widget{display:inline-block}`.
Mesma especificidade que a minha, e quem chega depois vence - e ele sempre
chega depois, porque e injetado por script. A regra da casa ("este arquivo e
concatenado por ultimo, entao vence sem !important") vale contra o CSS do
TEMA; contra folha injetada em runtime ela nao vale. Duas classes resolvem
sem !important. */
/* CARD DENTRO DE CARROSSEL nao tem linha embaixo dele, entao a margem que
separa as linhas da grade de categoria aqui e so buraco: eram 20px de margem
mais 15 de padding somados ao vao da secao. Na grade a margem continua,
porque la ela faz falta. */
.swiper-container .js-item-product{ margin-bottom:0; padding-bottom:0 }
/* O texto da secao de video vinha com .mb-5 do Bootstrap, 48px - MAIOR que o
vao entre secoes. Espaco dentro do bloco maior que o espaco entre blocos e
exatamente a inversao que faz a pagina parecer solta. */
.section-video-home .js-home-video-text{ margin-bottom:var(--sg-vao-imagem) !important }
/* O `!important` DAQUI PRA BAIXO tem motivo, e e sempre o mesmo. As classes
.mb-5 e .py-4 sao utilitarios do Bootstrap, e utilitario do Bootstrap ja
nasce `!important`. Contra o CSS do tema este arquivo vence por ordem, como
diz o comentario la em cima; contra um utilitario marcado nao vence, e sem
isto a regra e escrita, aplicada por ninguem e eu acharia que consertei.
Conferido lendo o computado, nao o arquivo. */
/* Dentro do carrossel o respiro de baixo do texto do card e o ultimo branco
antes da proxima secao - ele soma com o vao em vez de dividir alguma coisa.
No desktop o botao so aparece no hover, entao esse padding era literalmente
a ultima coisa da secao. */
.swiper-container .js-item-product .item-description{ padding-bottom:0 !important }
/* Os icones de compartilhar sao o fim da coluna de compra. A margem deles
somava com o vao da secao e empurrava a linha das avaliacoes pra baixo. */
.row.section-single-product .social-share{ margin-bottom:0 }
/* ---------------------------------------------------------- 14. FAVORITOS
Logica em static/js/sg-favoritos.js. Escopo em
clients/sua-garrafeira/escopo-favoritos.md
TRES REGRAS DE OURO DESTE BLOCO, e as tres sao sobre CLS:
1. o coracao do card e da PDP e ABSOLUTO dentro de container que o tema ja
entrega relativo. Elemento absoluto nao participa do fluxo, entao
entrar depois do carregamento nao empurra nada;
2. o coracao do CABECALHO nao esta aqui por acaso sem posicionamento: ele
nasce no header-utilities.tpl, servido pelo servidor. Injetar por JS
encolhia a coluna do logo e movia o logo 16px no celular (medido);
3. o contador e absoluto sobre o icone, no mesmo padrao do badge do
carrinho, entao escrever o numero depois nao muda caixa nenhuma.
Esta loja saiu de 0,2742 para 0,0736 de CLS na PDP. Nao e pra devolver. */
:root{
--sg-fav-toque:44px; /* area de toque minima, alvo de acessibilidade */
--sg-fav-ico:20px;
--sg-fav-off:0px; /* o JS escreve o afastamento real na PDP */
}
/* ...................................................... o botao, em qualquer lugar */
.sg-fav-btn{
position:absolute; top:8px; right:8px; z-index:3;
width:var(--sg-fav-toque); height:var(--sg-fav-toque);
display:flex; align-items:center; justify-content:center;
padding:0; margin:0; border:0; border-radius:50%;
background:rgba(255,255,255,.88); color:var(--sg-ink);
box-shadow:0 1px 4px rgba(4,28,56,.16);
cursor:pointer; -webkit-appearance:none; appearance:none;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.sg-fav-btn:hover{ background:#fff }
.sg-fav-btn:focus-visible{ outline:3px solid var(--sg-ink); outline-offset:2px }
.sg-fav-ico{
width:var(--sg-fav-ico); height:var(--sg-fav-ico);
fill:currentColor; pointer-events:none;
}
/* O #heart do sprite do tema e o coracao VAZADO do Font Awesome: o path tem o
contorno externo e o recorte interno, e nao existe versao cheia no sprite.
Em vez de copiar path de icone pra ca, o estado "salvo" enche o BOTAO de
tinta e deixa o coracao branco. Le igual e nao inventa asset. */
.sg-fav-btn--on{ background:var(--sg-ink); color:#fff }
.sg-fav-btn--on:hover{ background:var(--sg-ink-hover) }
@keyframes sg-fav-pulo{
0%{ transform:scale(1) } 40%{ transform:scale(1.22) } 100%{ transform:scale(1) }
}
.sg-fav-pulo{ animation:sg-fav-pulo .28s ease }
@media (prefers-reduced-motion:reduce){
.sg-fav-pulo{ animation:none }
}
/* O card de produto dentro de carrossel tem overflow controlado pelo swiper;
o container da foto ja e relative no tema (conferido no computado, nao no
arquivo). Esta classe so existe pro caso raro de um card sem .item-image. */
.js-item-product.sg-fav-ancora{ position:relative }
/* ................................................................ na PDP */
/* No desktop a foto (540px) mora centralizada num container de 758px. Grudar
no canto do container deixaria o botao boiando 109px longe da foto, entao o
JS mede e escreve --sg-fav-off. No celular a foto ocupa o container inteiro
e o valor da zero sozinho. */
.sg-fav-btn--pdp{
top:12px;
right:calc(var(--sg-fav-off, 0px) + 12px);
width:48px; height:48px;
}
.sg-fav-btn--pdp .sg-fav-ico{ width:22px; height:22px }
/* .................................................. o icone do cabecalho */
/* ANTES DE TUDO, O CONSERTO QUE O QUARTO ITEM EXIGIU.
O tema dá `width: 110.078px` a cada `.utilities-item`, que é um terço da
coluna. Com três itens (Atendimento, Minha conta, Carrinho) cabia exato. Com
o coração virou quatro, e o CARRINHO desceu pra uma segunda linha: o
cabeçalho do desktop dobrou de 79 pra 158px de altura. No celular não
aparecia, porque lá só dois itens são visíveis - foi por isso que passou
pela primeira medição e só apareceu no retrato depois do deploy. Fica a
lição: medir o cabeçalho nas DUAS larguras, sempre.
Largura de 25% não resolve: os itens são `inline-block` e o espaço em branco
do HTML entre eles soma ~4px cada, então 4x86 + 3 espaços estoura os 344.
Flex resolve de vez, porque `flex-wrap` nasce `nowrap` e o espaço em branco
entre filhos deixa de contar. Medido em 1366, 1200, 1024, 820 e 390: uma
linha em todos, e a altura volta ao que era.
Entre 768 e 1199px não existe espaço pra quatro rótulos - a coluna tem 259px
e os rótulos pedem 290. Nessa faixa ficam só os ícones. Não é escolha de
gosto: com rótulo, ou volta a quebrar linha, ou invade a caixa de busca. */
.utilities-container{
display:flex; align-items:flex-start; justify-content:flex-end; gap:14px;
}
.utilities-container > .utilities-item{ width:auto; flex:0 0 auto }
@media (min-width:768px) and (max-width:1199px){
.utilities-container{ gap:24px }
/* `!important` porque o rotulo carrega `d-md-block`, que e utilitario do
Bootstrap e ja nasce marcado. Sem isto a regra e escrita e aplicada por
ninguem - conferido no computado, nao no arquivo. */
.utilities-container .utility-name{ display:none !important }
}
/* Mesmo esqueleto do carrinho ao lado: .utilities-item > .utility-head > a.
O contador copia a cor do .badge-amount do tema de proposito - o numero do
carrinho e o numero dos favoritos tem que parecer a mesma familia (lido do
computado em 15/09: fundo #e3e1e0, tinta #041c38, 12px).
POSICAO POR PORCENTAGEM, e nao por pixel como o tema faz no carrinho: o
badge do carrinho usa right:28px, numero calibrado pra caixa que tem a
palavra "Mi carrito" do lado. A minha caixa muda de largura entre celular
(so o icone) e desktop (icone + a palavra Favoritos embaixo). Ancorando em
50% + meio icone, ele cai no canto do ICONE nas duas larguras. */
.sg-fav-topo{ position:relative; display:inline-block; text-decoration:none }
.sg-fav-topo:hover{ text-decoration:none }
.sg-fav-topo .js-sg-fav-contador{
position:absolute; top:-4px; left:calc(50% + 3px);
min-width:18px; height:18px; padding:0 5px;
border-radius:999px;
background:var(--sg-line); color:var(--sg-ink);
font-size:11px; font-weight:700; line-height:18px; text-align:center;
}
/* ......................................................... o aviso curto */
.sg-fav-aviso{
position:fixed; left:50%; bottom:22px; transform:translate(-50%,14px);
z-index:9999; max-width:min(92vw,420px);
padding:11px 18px; border-radius:999px;
background:var(--sg-ink); color:#fff;
font-size:14px; font-weight:600; line-height:1.3; text-align:center;
box-shadow:0 6px 20px rgba(4,28,56,.26);
opacity:0; pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.sg-fav-aviso--on{ opacity:1; transform:translate(-50%,0) }
@media (prefers-reduced-motion:reduce){
.sg-fav-aviso{ transition:none }
}
/* o aviso nao pode cobrir a barra de compra do celular, que e fixa embaixo */
@media (max-width:767px){
.sg-fav-aviso{ bottom:calc(22px + var(--sg-sticky-h,0px)) }
}
/* ................................................ a pagina /favoritos */
/* O endereco /favoritos ainda nao existe no painel, entao ele cai na pagina de
404 - que e arquivo meu. Esta marca e escrita por um script de UMA LINHA no
, antes da pintura, senao a pessoa veria "Essa pagina nao existe mais"
piscar antes da lista aparecer. Mesmo padrao da reserva da ad bar. */
.sg-e-favoritos #sg-404 > .container > *:not(#sg-favoritos),
.sg-e-favoritos .page-header,
.sg-e-favoritos #product-example{ display:none }
/* A MESMA LISTA, SOBRE A PAGINA ATUAL.
Motivo no cabecalho do sg-favoritos.js: a 404 tem cache proprio que deploy
de tema nao invalida, e e ela que hospeda /favoritos. Clicar no coracao do
cabecalho abre por cima da pagina atual, que ja esta nova, e escreve
/favoritos no endereco. Quem chega direto no endereco continua vendo a
versao de pagina. */
.sg-favs-sobre{
position:fixed; top:0; right:0; bottom:0; left:0; z-index:9998;
background:rgba(4,28,56,.55); display:none; overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.sg-favs-sobre--on{ display:block }
html.sg-favs-aberto{ overflow:hidden }
.sg-favs-sobre__caixa{
position:relative; background:#fff; min-height:100%;
max-width:760px; margin:0 auto; padding:6px 0 32px;
}
@media (min-width:768px){
.sg-favs-sobre__caixa{
min-height:0; margin:6vh auto; border-radius:var(--sg-radius);
}
}
.sg-favs-sobre__fechar{
position:absolute; top:10px; right:10px; z-index:2;
width:44px; height:44px;
display:flex; align-items:center; justify-content:center;
padding:0; border:0; border-radius:50%;
background:var(--sg-soft); color:var(--sg-ink); cursor:pointer;
}
.sg-favs-sobre__fechar:hover{ background:var(--sg-line) }
.sg-favs-sobre__fechar:focus-visible{ outline:3px solid var(--sg-ink); outline-offset:2px }
/* dentro da sobreposicao o titulo nao briga com o botao de fechar */
.sg-favs-sobre .sg-favs{ padding-top:14px }
.sg-favs-sobre .sg-favs__titulo{ padding-right:52px }
.sg-favs{ padding:clamp(20px,5vw,44px) 0 }
.sg-favs__titulo{
color:var(--sg-ink); font-size:clamp(22px,3.4vw,30px); font-weight:800;
letter-spacing:-.01em; margin:0 0 6px;
}
.sg-favs__conta{
display:inline-block; margin-left:8px; vertical-align:middle;
color:var(--sg-body); font-size:14px; font-weight:600;
}
.sg-favs__texto{ color:var(--sg-body); font-size:15px; line-height:1.6; margin:0 0 18px; max-width:52ch }
.sg-favs__cta{ display:inline-block }
.sg-favs--vazio{ text-align:center }
.sg-favs--vazio .sg-favs__texto{ margin-left:auto; margin-right:auto }
.sg-favs__lista{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px }
.sg-favs__item{
display:flex; align-items:center; gap:14px;
padding:10px; border:1px solid var(--sg-line); border-radius:var(--sg-radius);
background:#fff;
}
.sg-favs__foto{
flex:0 0 auto; width:84px; height:84px; border-radius:10px; overflow:hidden;
background:var(--sg-soft); display:flex; align-items:center; justify-content:center;
}
.sg-favs__foto img{ width:100%; height:100%; object-fit:contain }
.sg-favs__sem-foto{ display:block; width:100%; height:100% }
.sg-favs__corpo{ flex:1 1 auto; min-width:0 }
.sg-favs__nome{
display:block; color:var(--sg-ink); font-size:14px; font-weight:700;
line-height:1.35; text-decoration:none; margin-bottom:8px;
}
.sg-favs__nome:hover{ text-decoration:underline }
.sg-favs__acoes{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.sg-favs__ver{ white-space:nowrap }
.sg-fav-tirar{
padding:0; border:0; background:none; cursor:pointer;
color:var(--sg-body); font-size:13px; text-decoration:underline;
}
.sg-fav-tirar:hover{ color:var(--sg-sale) }
.sg-favs__nota{ color:var(--sg-body); font-size:12px; margin:18px 0 0 }
@media (min-width:768px){
.sg-favs__lista{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.sg-favs__foto{ width:96px; height:96px }
.sg-favs__nome{ font-size:15px }
}
/* ============================================================================
22. O BOTAO DE CHECKOUT E VERDE (2B Growth, 16/09/2026)
PEDIDO DO MATHEUS, e e convencao de e-commerce: "botao de checkout sempre
foi e sempre sera verde". Verde quer dizer "pode avancar", e nesta tela ele
tem um trabalho extra: o carrinho mostra DOIS botoes empilhados, o
"INICIAR COMPRA" da loja e o "Comprar com nuvem" azul do Checkout Acelerado
da plataforma. Os dois eram azuis, e o azul da plataforma e mais vivo que o
azul-marinho da marca, entao o botao de terceiro chamava mais atencao que o
da casa. Verde resolve a cor e a hierarquia de uma vez.
POR QUE #268372 E NAO UM VERDE QUALQUER. A loja ja declara dois verdes no
CSS que o painel gera (`dart-style-colors`):
#3caf65 .alert-success matiz 141 contraste com branco 2,80
#35b69f .svg-icon-accent matiz 169 contraste com branco 2,52
OS DOIS REPROVAM com texto branco por cima: a WCAG pede 4,5 pra texto
normal, e botao de pagar com texto que a pessoa nao le e pior do que botao
azul-marinho. Entao nenhum dos dois serve cru.
O que eu fiz foi manter o MATIZ e baixar a luminosidade em HSL ate passar,
partindo do #35b69f - que e o verde da barra "Frete gratis a partir de
R$300,00", logo ACIMA deste botao na mesma tela. Assim o carrinho fica com
um verde so. Usar o outro verde (141 graus) poria duas cores quase iguais e
diferentes lado a lado, que e o jeito mais barato de uma tela parecer
errada sem ninguem saber dizer por que.
L=46% (original) #35b69f 2,52
L=36% #298f7c 3,95
L=33% #268372 4,59 <- escolhido
L=28% #206f61 5,99 <- hover
ESCOPO: so `go_to_checkout`, que e o botao do carrinho e o do painel
lateral. O "Comprar" da pagina de produto continua azul-marinho de
proposito: ele adiciona ao carrinho, nao avanca pro pagamento. Se tudo
virar verde, o verde deixa de significar "ultimo passo" e vira so mais uma
cor de botao.
ESPECIFICIDADE, medida antes de escrever: o tema pinta com `.btn-primary`
(0,1,0) e SEM `!important`. Por isso aqui basta `.btn[name=...]` (0,2,0), que
ganha por especificidade e nao depende da ordem em que as folhas carregam -
detalhe que importa porque o CSS do painel pode vir depois do meu.
========================================================================= */
:root{
--sg-avanca:#268372;
--sg-avanca-fundo:#206f61;
}
.btn[name="go_to_checkout"],
input[name="go_to_checkout"],
button[name="go_to_checkout"]{
background-color:var(--sg-avanca);
border-color:var(--sg-avanca);
color:#fff;
}
.btn[name="go_to_checkout"]:hover,
.btn[name="go_to_checkout"]:focus,
.btn[name="go_to_checkout"]:active,
input[name="go_to_checkout"]:hover,
input[name="go_to_checkout"]:focus,
input[name="go_to_checkout"]:active,
button[name="go_to_checkout"]:hover,
button[name="go_to_checkout"]:focus,
button[name="go_to_checkout"]:active{
background-color:var(--sg-avanca-fundo);
border-color:var(--sg-avanca-fundo);
color:#fff;
}
/* Foco de teclado visivel. O tema tira o contorno padrao do navegador nos
botoes, e sem isto quem navega por Tab perde o botao mais importante da
loja de vista. */
.btn[name="go_to_checkout"]:focus-visible,
input[name="go_to_checkout"]:focus-visible,
button[name="go_to_checkout"]:focus-visible{
outline:3px solid var(--sg-avanca-fundo);
outline-offset:2px;
}
/* ============================================================================
23. A FAIXA DE CAMPANHA DIA DO CLIENTE (2B Growth, 16/09/2026)
A secao vive em snipplets/home/sg-campanha.tpl e entra logo abaixo do hero.
O comentario de la explica POR QUE ela existe fora do carrossel do painel;
aqui fica so o que a folha resolve.
ALTURA RESERVADA E O PONTO PRINCIPAL. Em 15/09 eu medi 0,2551 de CLS na
home ao rolar, e 0,2499 disso vinham dos banners de categoria, que sobem
sem altura declarada e empurram a pagina quando a imagem chega. Se esta
faixa nascesse do mesmo jeito, ela somaria ao mesmo defeito. Por isso o
aspect-ratio esta fixo nos dois tamanhos e nao depende do :
quando o troca de , o navegador pode nao reaproveitar as
medidas do , e ai a reserva evapora justo na troca.
3,51 NO COMPUTADOR, 0,77 NO CELULAR. Nao e capricho: 3,51 num telefone de
390px de largura da uma tira de 111px de altura, e o texto da arte, que foi
desenhado pra ocupar meio banner, fica com menos de 10px. Por isso o
celular recebe a arte vertical recortada.
O TRILHO E scroll-snap, NAO SLIDER DE BIBLIOTECA. Duas razoes: o dedo ja
arrasta de graca no celular, e se o JS nao rodar a faixa continua sendo uma
tira rolavel com as tres pecas, em vez de virar uma pilha quebrada. O JS em
sg-pdp-kit.js so acrescenta o giro automatico, as setas e os pontinhos.
========================================================================= */
.sg-dc{
margin:0 0 2rem;
}
.sg-dc-caixa{
position:relative;
}
.sg-dc-trilho{
display:flex;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
/* A barra de rolagem some porque o trilho ja se anuncia pelos pontinhos, e
uma barra horizontal atravessada na arte le como defeito de layout. */
scrollbar-width:none;
-ms-overflow-style:none;
}
.sg-dc-trilho::-webkit-scrollbar{ display:none; }
.sg-dc-slide{
flex:0 0 100%;
max-width:100%;
scroll-snap-align:center;
scroll-snap-stop:always;
display:block;
line-height:0;
}
/* Sem o border-radius o banner encosta quadrado no resto da home, que e
arredondada quando o tema esta com theme_rounded ligado. */
.sg-dc-img{
display:block;
width:100%;
height:auto;
aspect-ratio:1580 / 450;
object-fit:cover;
border-radius:6px;
}
@media (max-width:767px){
.sg-dc-img{ aspect-ratio:780 / 1012; }
.sg-dc{ margin-bottom:1.5rem; }
}
/* ---- setas, so no computador ---- */
.sg-dc-seta{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:2;
display:none;
align-items:center;
justify-content:center;
width:44px;
height:44px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.88);
color:#1c1c1c;
cursor:pointer;
transition:background .15s ease;
}
.sg-dc-seta:hover{ background:#fff; }
.sg-dc-seta:focus-visible{ outline:3px solid #1c1c1c; outline-offset:2px; }
.sg-dc-seta--ant{ left:12px; }
.sg-dc-seta--pro{ right:12px; }
@media (min-width:768px){
.sg-dc-seta{ display:flex; }
}
/* ---- pontinhos ---- */
.sg-dc-pontos{
display:flex;
justify-content:center;
gap:8px;
margin-top:10px;
}
.sg-dc-ponto{
width:9px;
height:9px;
padding:0;
border:0;
border-radius:50%;
/* Cinza, nao vermelho: nesta loja vermelho e preco e alerta, e um pontinho
vermelho embaixo de um banner de desconto viraria mais um sinal de oferta
competindo com o preco de verdade. */
background:#c9c9c9;
cursor:pointer;
transition:background .15s ease, transform .15s ease;
}
.sg-dc-ponto.is-ativo{
background:#1c1c1c;
transform:scale(1.2);
}
.sg-dc-ponto:focus-visible{ outline:2px solid #1c1c1c; outline-offset:3px; }
/* Quem pediu menos movimento no sistema nao leva giro automatico nem rolagem
animada. O JS tambem respeita isto e nem liga o relogio. */
@media (prefers-reduced-motion:reduce){
.sg-dc-trilho{ scroll-behavior:auto; }
.sg-dc-ponto{ transition:none; }
}