:root{--cu-blue:var(--color-primary);--cu-ink:var(--color-ink);--cu-soft:var(--color-soft);--cu-line:var(--color-line);--cu-success:var(--color-success);--cu-warning:var(--color-warning);--cu-danger:#c0392b;--cu-danger-bg:#fdf1f0;--cu-muted:#687486}
.product,.cat,.banner-art,.brand-logo{transition:transform .3s ease,box-shadow .3s ease}.product:hover{transform:translateY(-5px)}.cat:hover,.brand-logo:hover{transform:translateY(-3px)}
.home-skeleton{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;transition:opacity .35s ease,visibility .35s ease}.home-skeleton.is-hidden{opacity:0;visibility:hidden}.home-skeleton-inner{width:min(1000px,88vw)}.skeleton-line,.skeleton-card{overflow:hidden;background:#edf2f7;position:relative}.skeleton-line::after,.skeleton-card::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffffb8,transparent);animation:skeletonShimmer 1.15s infinite}.skeleton-line{height:26px;width:230px;margin:0 auto 30px}.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.skeleton-card{aspect-ratio:1/1.18}@keyframes skeletonShimmer{to{transform:translateX(100%)}}

/* Produto: ações, zoom, lightbox, entrega e conteúdo */
.product-main-image{position:relative;cursor:zoom-in}.product-main-image::after{content:"Clique para ampliar";position:absolute;right:16px;bottom:16px;padding:8px 12px;background:#fff;border:1px solid var(--cu-line);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s}.product-main-image:hover::after{opacity:1;transform:none}.product-main-image img{transition:transform .45s ease}.product-main-image:hover img{transform:scale(1.035)}
.product-utility-bar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.product-utility-button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--cu-line);background:#fff;color:var(--cu-ink);padding:10px 14px;font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.22s}.product-utility-button:hover{border-color:var(--cu-blue);color:var(--cu-blue);transform:translateY(-1px)}
.product-trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:22px 0;background:var(--cu-line);border:1px solid var(--cu-line)}.product-trust-strip div{padding:16px;background:#fff}.product-trust-strip strong{display:block;font-size:12px}.product-trust-strip span{display:block;margin-top:4px;color:#687486;font-size:11px;line-height:1.4}
.shipping-estimator{margin:22px 0;padding:18px;border:1px solid var(--cu-line);background:var(--cu-soft)}.shipping-estimator h3{margin:0 0 6px;font:500 17px Oswald,sans-serif;text-transform:uppercase}.shipping-estimator p{margin:0 0 14px;color:#677486;font-size:12px}.shipping-form{display:flex;gap:8px}.shipping-form input{min-width:0;flex:1;border:1px solid #d7e0ea;background:#fff;padding:12px 14px;font:500 13px "DM Sans",sans-serif}.shipping-form button{border:0;background:var(--cu-ink);color:#fff;padding:0 18px;font-size:10px;font-weight:700;text-transform:uppercase;cursor:pointer}.shipping-result{display:none;margin-top:13px;padding-top:13px;border-top:1px solid #dce5ef;font-size:12px;line-height:1.6}.shipping-result.show{display:block}.shipping-result strong{color:var(--cu-success)}
.product-faq{padding:65px 40px;max-width:1180px;margin:auto}.product-faq h2{text-align:center;font:500 28px Oswald,sans-serif;text-transform:uppercase}.product-faq-list{max-width:820px;margin:30px auto 0;border-top:1px solid var(--cu-line)}.product-faq-item{border-bottom:1px solid var(--cu-line)}.product-faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;padding:20px 0;border:0;background:none;text-align:left;color:var(--cu-ink);font-weight:700;cursor:pointer}.product-faq-answer{max-height:0;overflow:hidden;color:#647184;font-size:13px;line-height:1.7;transition:max-height .3s ease,padding .3s ease}.product-faq-item.open .product-faq-answer{max-height:180px;padding:0 0 20px}
.product-lightbox{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:28px;background:#07152de8}.product-lightbox.open{display:grid}.product-lightbox img{max-width:min(1000px,90vw);max-height:86vh;object-fit:contain;background:#fff}.lightbox-close,.lightbox-nav{position:absolute;border:1px solid #ffffff4a;background:#081b3bbb;color:#fff;display:grid;place-items:center;cursor:pointer}.lightbox-close{top:24px;right:24px;width:44px;height:44px;font-size:25px}.lightbox-nav{top:50%;width:48px;height:48px;font-size:31px;transform:translateY(-50%)}.lightbox-prev{left:24px}.lightbox-next{right:24px}

/* Carrinho evoluído */
.cart-progress{margin:0 0 18px}.cart-progress-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#687486;font-size:11px}.cart-progress-head strong{color:var(--cu-ink)}.cart-progress-track{height:7px;overflow:hidden;background:#e8edf3}.cart-progress-track i{display:block;height:100%;background:var(--cu-blue);transition:width .35s ease}.cart-benefit-reached{color:var(--cu-success)!important;font-weight:700}
.cart-coupon{display:flex;gap:8px;margin:18px 0 12px}.cart-coupon input{min-width:0;flex:1;padding:11px 12px;border:1px solid var(--cu-line);font-size:12px;text-transform:uppercase}.cart-coupon button{border:1px solid var(--cu-ink);background:#fff;color:var(--cu-ink);padding:0 14px;font-size:10px;font-weight:700;text-transform:uppercase;cursor:pointer}.cart-coupon-code{flex:1;display:flex;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--cu-ink)}.cart-coupon-status{margin:0 0 12px;font-size:11px;line-height:1.5;color:#687486}.cart-coupon-message{margin:0 0 12px;font-size:11px;line-height:1.5;color:#a32b2b}.cart-discount{display:flex;justify-content:space-between;color:var(--cu-success);font-size:12px;margin:8px 0}.cart-summary-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0;font-size:13px}.cart-summary-row.total{padding-top:14px;margin-top:13px;border-top:1px solid var(--cu-line);font-size:16px}.cart-summary-row.total strong{font-size:20px}

/* Carrinho agrupado por categoria (Task 6b — CSS das classes que
   frontend-upgrades.js passou a desenhar em renderItemGroups()/renderItemCard():
   .cart-group (a <section> de cada categoria), .cart-group-title (h3),
   .cart-group-items (a lista) e .cart-item-select (o <label> da seleção,
   dentro de .cart-item-actions). Mesmo idioma do bloco "Carrinho evoluído"
   acima e de .cart-item em styles.css:2578 — tokens --cu-*, Oswald só em
   título, DM Sans no corpo, divisor de 1px em --cu-line. */

/* Título do grupo: Oswald maiúsculo, escala de subtítulo (entre os 11px dos
   rótulos de campo e os 17px de .shipping-estimator h3, que são contextos
   parecidos — um cabeçalho curto dentro de um painel estreito).

   Propriedade 1 (não pode depender só de cor): o texto do rótulo já muda
   ("Uniforme" / "Material Escolar" — CATEGORY_GROUPS no JS), e a MESMA
   marca — em círculo aqui e em quadrado arredondado no outro grupo — usa a
   cor ÚNICA --cu-ink nos dois; quem não distingue cor vê a forma mudar do
   mesmo jeito que quem distingue. Não introduzi uma segunda cor de destaque
   porque --cu-success/--cu-warning já têm significado fixo neste mesmo
   carrinho (benefício atingido, aviso) — usar uma delas aqui faria a cor
   mentir categoria por cima de mentir estado. */
.cart-group{padding-top:14px}
.cart-group+.cart-group{margin-top:4px;border-top:1px solid var(--cu-line)}
.cart-group-title{display:flex;align-items:center;gap:8px;margin:0;padding:0 0 10px;font:500 13px/1.3 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--cu-ink)}
.cart-group-title::before{content:"";flex:none;width:9px;height:9px;background:var(--cu-ink)}
[data-grupo-categoria="uniforme"] .cart-group-title::before{border-radius:50%}
[data-grupo-categoria="material"] .cart-group-title::before{border-radius:2px}
.cart-group-items{display:flex;flex-direction:column}
.cart-group-items .cart-item:last-child{border-bottom:0}

/* Caixa de seleção do item: alvo de toque de 44px (mesma régua de
   .product-cta/.favorites-filter neste arquivo) cobrindo o rótulo inteiro,
   não só o quadradinho — e foco pelo teclado com o MESMO outline usado no
   resto do site (ver "10. Acessibilidade" mais abaixo neste arquivo:
   outline #1f6feb, 3px, offset 2px), reescrito aqui para não alterar a lista
   de seletores existente por uma classe que nasceu depois dela.

   O input em si fica do tamanho de .checkout-terms input (18px), não do
   tamanho mínimo do navegador — controle real, não enfeite. */
.cart-item-select{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;padding:4px 2px;font-size:11px;line-height:1.4;color:var(--cu-muted);cursor:pointer}
/* Item que o cliente mandou remover e o servidor ainda não confirmou: fica no lugar (o card de
   baixo não sobe para debaixo do dedo), esmaecido e com os botões travados (ecommerce.js,
   `removing`). */
.cart-item--removing{opacity:.5;transition:opacity .15s ease}
.cart-item--removing button,.cart-item--removing .cart-item-select{cursor:default}
.cart-item-select input{width:18px;height:18px;flex:none;accent-color:var(--cu-blue);cursor:pointer}
.cart-item-select input:focus-visible{outline:3px solid #1f6feb;outline-offset:2px;border-radius:4px}
.cart-item:has(.cart-item-select input:checked) .cart-item-select{color:var(--cu-ink);font-weight:700}

/* Item DESMARCADO: guardado para a próxima compra, de propósito — o
   carrinho nunca esvazia sozinho (regra de negócio). Por isso ele não some,
   não encolhe a quase nada e não usa o MESMO tratamento visual de
   "esgotado" (.product--sold-out mais abaixo, que é grayscale total): aqui
   é fundo --cu-soft + borda tracejada + opacidade parcial na foto, sinal
   claro de "fora da compra agora" sem apagar o item nem confundir com
   "sem estoque". Nome e preço continuam com contraste total — só a foto e a
   borda mudam. */
.cart-item:has(.cart-item-select input:not(:checked)){background:var(--cu-soft);border-radius:var(--radius-sm);border-bottom-style:dashed;border-bottom-color:#c9d3e0}
.cart-item:has(.cart-item-select input:not(:checked)) img{opacity:.6;filter:grayscale(.3)}

@media(max-width:400px){
  .cart-group-title{font-size:12px;gap:7px}
  .cart-item-select{font-size:10.5px;gap:7px}
}

/* Checkout */
.checkout-body{background:#f7f9fc}.checkout-shell{max-width:1280px;margin:0 auto;padding:50px 40px 90px}.checkout-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:36px}.checkout-header .brand{position:static;transform:none}.checkout-secure{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#597087}.checkout-progress{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:32px;border:1px solid var(--cu-line);background:#fff}.checkout-progress-step{padding:15px;text-align:center;color:#8090a2;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-right:1px solid var(--cu-line)}.checkout-progress-step:last-child{border-right:0}.checkout-progress-step.active,.checkout-progress-step.done{color:var(--cu-blue)}.checkout-progress-step.active{box-shadow:inset 0 -3px var(--cu-blue)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:28px;align-items:start}.checkout-card{background:#fff;border:1px solid var(--cu-line);padding:28px}.checkout-card h1,.checkout-card h2{margin:0;font:500 27px/1.15 Oswald,sans-serif;text-transform:uppercase}.checkout-card-intro{margin:8px 0 26px;color:#687486;font-size:13px;line-height:1.6}.checkout-step{display:none}.checkout-step.active{display:block}.checkout-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.checkout-field{display:flex;flex-direction:column;gap:7px}.checkout-field.full{grid-column:1/-1}.checkout-field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.checkout-field input,.checkout-field select{width:100%;padding:13px 14px;border:1px solid #dbe3ec;background:#fff;font:500 13px "DM Sans",sans-serif}.delivery-options,.payment-options{display:grid;gap:12px}.choice-card{display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid var(--cu-line);cursor:pointer}.choice-card:has(input:checked){border-color:var(--cu-blue);box-shadow:inset 3px 0 var(--cu-blue);background:#f6faff}.choice-card input{margin-top:3px}.choice-card strong{display:block;font-size:13px}.choice-card span{display:block;margin-top:4px;color:#687486;font-size:12px;line-height:1.5}.checkout-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.checkout-actions button{padding:13px 20px;border:0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer}.checkout-back{background:#eef2f6;color:var(--cu-ink)}.checkout-next{margin-left:auto;background:var(--cu-ink);color:#fff}.checkout-summary{position:sticky;top:92px}.checkout-items{display:grid;gap:16px;margin:22px 0}.checkout-item{display:grid;grid-template-columns:68px 1fr auto;gap:12px;align-items:center}.checkout-item img{width:68px;height:82px;object-fit:cover;background:#f2f5f8}.checkout-item strong{display:block;font-size:12px;line-height:1.35}.checkout-item span{color:#718096;font-size:11px}.checkout-totals{border-top:1px solid var(--cu-line);padding-top:15px}.checkout-total-row{display:flex;justify-content:space-between;margin:9px 0;font-size:13px}.checkout-total-row.grand{margin-top:15px;padding-top:15px;border-top:1px solid var(--cu-line);font-size:17px;font-weight:700}.checkout-empty{text-align:center;padding:50px 20px}.order-success{text-align:center;padding:30px 10px}.success-mark{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#e8f7ef;color:var(--cu-success);font-size:34px}.order-number{display:inline-block;margin:18px 0;padding:10px 16px;background:var(--cu-soft);font-weight:700}.checkout-note{margin-top:18px;padding:14px;background:#fff8e8;color:#75531c;font-size:11px;line-height:1.6}
@media(max-width:900px){.skeleton-grid{grid-template-columns:repeat(2,1fr)}.checkout-layout{grid-template-columns:1fr}.checkout-summary{position:static}.product-trust-strip{grid-template-columns:1fr}.checkout-progress{grid-template-columns:repeat(2,1fr)}.checkout-progress-step:nth-child(2){border-right:0}}
@media(max-width:700px){.product-faq{padding:45px 20px}.product-utility-bar{display:grid;grid-template-columns:1fr 1fr}.shipping-form{flex-direction:column}.shipping-form button{min-height:43px}.checkout-shell{padding:28px 18px 70px}.checkout-header{align-items:flex-start}.checkout-progress{grid-template-columns:1fr 1fr}.checkout-form-grid{grid-template-columns:1fr}.checkout-field.full{grid-column:auto}.checkout-card{padding:21px}.lightbox-nav{display:none}}

.checkout-address{margin-top:20px}/* O <fieldset> NÃO desenha mais caixa (2026-09-21). Ele continua existindo — é o agrupamento
   semântico do bloco de cartão e o que a suíte conta para provar "uma categoria, um bloco" —
   mas a moldura dele ficava DENTRO da moldura do .payment-panel, e caixa dentro de caixa não é
   o padrão do painel do Mercado Pago, que é uma só. Zerar aqui tira o quadrado sem tocar na
   semântica nem no HTML. */
.payment-category{min-width:0;margin:0;padding:0;border:0}.payment-category legend{padding:0 8px;color:var(--cu-ink);font:500 19px Oswald,sans-serif;text-transform:uppercase}.payment-category>p{margin:0 0 18px;color:#687486;font-size:12px;line-height:1.6}.checkout-security-note{margin-top:18px;padding:14px;border-left:3px solid var(--cu-blue);background:var(--cu-soft);color:#526174;font-size:12px;line-height:1.6}.checkout-feedback{min-height:20px;margin:18px 0 0;color:#a32b2b;font-size:12px;font-weight:700;line-height:1.6}.checkout-next:disabled{cursor:not-allowed;opacity:.58}.checkout-discount{color:var(--cu-success)}.authorization-list{max-width:560px;margin:24px auto}.authorization-list>div{background:#f0f7ff}
.checkout-terms{display:flex;align-items:flex-start;gap:10px;margin-top:22px;color:#526174;font-size:12px;line-height:1.6}.checkout-terms input{width:18px;height:18px;margin-top:1px}.checkout-terms a{color:var(--cu-blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.checkout-shell{padding-inline:12px}.checkout-header{flex-direction:column}.checkout-secure{line-height:1.5}.checkout-progress-step{padding:12px 6px;font-size:8px}.checkout-card{padding:18px 14px}.checkout-actions{flex-direction:column-reverse}.checkout-actions button{width:100%;min-height:46px}.checkout-next{margin-left:0}.checkout-item{grid-template-columns:54px 1fr}.checkout-item>b{grid-column:2}.checkout-item img{width:54px;height:66px}.product-utility-bar{grid-template-columns:1fr}}
.cookie-consent{position:fixed;z-index:10020;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:980px;margin:auto;padding:18px 20px;background:#14203a;color:#fff;box-shadow:0 12px 40px #001a3f55}.cookie-consent p{margin:0;line-height:1.5;font-size:13px}.cookie-consent a{color:#fff;text-decoration:underline}.cookie-consent div{display:flex;gap:8px;flex:none}.cookie-consent button{border:1px solid #fff;background:transparent;color:#fff;padding:10px 12px;font-weight:700;cursor:pointer}.cookie-consent button:last-child{background:#fff;color:#14203a}@media(max-width:700px){.cookie-consent{align-items:stretch;flex-direction:column}.cookie-consent div{display:grid;grid-template-columns:1fr}.cookie-consent button{min-height:44px}}
.cep-status{min-height:18px;margin:-4px 0 0;font-size:12px;color:#667386}.cep-status.full{grid-column:1/-1}.cep-status--error{color:#a20f21}.cep-status--success{color:#14733b}.cep-status--loading{color:#1457b8}

/* Cards de materiais: imagem sem borda e ocupando corretamente o quadrado. */
.catalog-grid .product-art,.materials-products .product-art{border:0;background:#fff;overflow:hidden}
.catalog-grid .product-photo,.materials-products .product-photo{padding:0;object-fit:contain}

/* Padronização solicitada: somente a área fotográfica, sem alterar os arquivos originais. */
.product-art,.product-art--photo,.product-main-image,.product-thumb,.related-image,.cart-item-image,.combo-item-image{background:#fff!important;border-color:transparent!important;box-shadow:none!important;}
.product-art img,.product-main-image img,.product-thumb img,.related-image img{object-fit:contain;}
.faq-all-link{margin-top:18px;display:inline-flex;}

/* =========================================================================
   Correções de layout, responsividade e acessibilidade da home (QA 2026-09-02)
   Carregado depois de styles.css em todas as 38 páginas.
   ========================================================================= */

/* 1. Cabeçalho fixo e trava de rolagem.
   styles.css:2970 usa `html,body{overflow-x:hidden}`. `overflow-x:hidden` no
   <html> transforma o elemento raiz em contêiner de rolagem: o `position:sticky`
   do cabeçalho para de grudar (media-se -262px depois de rolar 1500px) e o
   `overflow:hidden` do body deixa de propagar para a viewport, o que anulava
   `body.mobile-menu-lock` — a página rolava atrás do menu aberto.
   `clip` corta o transbordo horizontal sem criar contêiner de rolagem. */
html, body { overflow-x: clip; }
html:has(body.mobile-menu-lock),
html:has(body.commerce-lock),
html:has(body.marie-chat-open) { overflow: hidden; }

/* 2. Barra de cookies x carrinho.
   A barra tem z-index 10020 e ficava por cima do rodapé da gaveta do carrinho,
   cobrindo "Finalizar pedido" em qualquer largura até 768px. */
body.commerce-lock .cookie-consent,
body.mobile-menu-lock .cookie-consent { display: none; }

@media (max-width: 768px) {
  .cookie-consent { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* 2b. A barra é fixed e não ocupa espaço no fluxo: sem este respiro ela cobre o
   último CTA de páginas curtas. `:has()` segue o elemento que o JS insere e remove. */
body:has(.cookie-consent) { padding-bottom: 96px; }
@media (min-width: 769px) {
  .cookie-consent { gap: 18px; padding: 12px 18px; }
}
@media (max-width: 700px) {
  .cookie-consent { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); }
  .cookie-consent p { font-size: 12px; line-height: 1.45; }
  .cookie-consent div { grid-template-columns: 1fr 1fr; }
  .cookie-consent button { padding: 8px 10px; }
  body:has(.cookie-consent) { padding-bottom: 160px; }
}

/* 4. Indicadores em duas linhas no celular: quatro colunas em 375px reduziam o
   rótulo a 6,9px. */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-inline: 14px !important;
  }
  .stats-item {
    min-height: 86px !important;
    padding: 14px 8px !important;
    border-right: 1px solid #e7edf3 !important;
    border-bottom: 1px solid #e7edf3 !important;
  }
  .stats-item:nth-child(2n) { border-right: 0 !important; }
  .stats-item:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .stat-text {
    max-width: none !important;
    font-size: clamp(10px, 3vw, 11.5px) !important;
    line-height: 1.3 !important;
  }
}

/* 5. [REMOVIDA em 2026-09-18, opção C do banner do celular — decisão do dono.]
   O `min-height:340px` forçava `.hero`/`.slides`/`.slide` a uma altura fixa
   maior que a foto: no slide 1 (com texto) a caixa tinha 340px "ocupável"; nos
   slides 2 e 3 (só foto, ~130px de altura real) o excesso virava ~105px de
   azul vazio acima e abaixo da imagem, porque os três slides são itens de um
   flex `.slides` com `align-items:stretch` e esticam para a altura do maior
   irmão. A opção C exige o oposto — a caixa do carrossel do tamanho exato da
   foto, sem sobra — então a regra teria que ser removida, não sobreposta por
   outra: mantê-la e empilhar um `min-height:0` por cima só adicionaria uma
   terceira camada competindo pela mesma propriedade. O layout do celular
   (imagem inteira, texto do slide 1 recortado, pontinhos numa faixa abaixo da
   foto) está inteiro em `styles.css`, no mesmo `@media (max-width: 700px)`
   que já existia para `.slide--uniformes`. As duas declarações que forçavam
   `.hero-content .lead`/`.btn` de volta a `display:block` também saíram daqui
   pelo mesmo motivo: na opção C os dois somem visualmente no celular. */

/* 6. Controles do carrossel com alvo de toque de 24px (media 6x6px). */
.hero .dots button, .hero .dot, .slider-dots button {
  min-width: 24px;
  min-height: 24px;
  padding: 9px;
  background-clip: content-box;
}

/* 8. Widgets flutuantes não podem cobrir o último card da grade. */
.footer { padding-bottom: 96px; }

@media (max-width: 600px) {
  .marie-launcher { bottom: 14px; right: 14px; }
}

/* 10. Acessibilidade: pular para o conteúdo, foco visível e movimento reduzido. */
.skip-to-content {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10050;
  padding: 12px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--ink, #12263f);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-to-content:focus { top: 0; }

.product-cta:focus-visible,
.heart:focus-visible,
.favorites-filter:focus-visible,
.option-pill:focus-visible,
.option-swatch:focus-visible,
.site-search input:focus-visible,
.header-action:focus-visible,
.nav a:focus-visible,
.product-card-link:focus-visible,
.buy:focus-visible,
.faq-question:focus-visible,
.cookie-consent button:focus-visible {
  outline: 3px solid #1f6feb;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .brands-track, .announcement-track { animation: none !important; transform: none !important; }
}

/* 11. Fachada do mapa (clique para carregar o embed do Google). */
.store-map-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  padding: 0;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
  background: #eef2f7;
}
.store-map-facade img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.82); }
.store-map-facade__cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 22px;
  border-radius: 24px;
  background: var(--ink, #12263f);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.store-map-facade__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* 12. FAQ: a resposta fechada agora sai do DOM acessível com [hidden], então o
   corte por max-height não faz mais sentido — e truncava respostas longas. */
.faq .open .answer { max-height: none !important; overflow: visible; }
.answer[hidden] { display: none; }


/* =========================================================================
   CARD DE PRODUTO — componente de vitrine
   =========================================================================
   O card antigo posicionava o botão com `position:absolute; bottom:12px;
   opacity:0` dentro de `.product`, que não tem altura própria: de 761px para
   cima o botão ficava POR CIMA DO PREÇO e só aparecia no hover. Em toda tela
   com hover — inclusive tablets e notebooks com touch — a única ação de compra
   do card era invisível até o mouse passar, e quando aparecia escondia o valor.

   O componente abaixo segue o que funciona nas vitrines de referência
   (Mercado Livre, Amazon, Shopify Dawn, Nike): coluna de altura igual, imagem
   em moldura quadrada, hierarquia nome → preço → apoio → ação, e CTA sempre
   visível na base, alinhado entre os cards da mesma linha.
   ========================================================================= */

.products,
.materials-products,
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 22vw, 250px), 1fr));
  gap: 24px 18px;
  align-items: stretch;
}

/* Estrutura do card ------------------------------------------------------ */

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  /* Sem contorno: quem separa o card do fundo branco da página é uma sombra
     suave em repouso. A borda de 1px em cada card era a origem direta da queixa
     de "poluído" — 26 retângulos riscados na mesma tela.
     A primeira tentativa foi tingir a moldura da foto, mas as fotos do catálogo
     já vêm com fundo branco assado: o tom da moldura encostava no branco da
     imagem e desenhava uma emenda cinza dentro do card — exatamente o contorno
     que se queria remover. Com sombra, a moldura fica branca e não há emenda. */
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 42, 82, .05), 0 6px 18px rgba(16, 42, 82, .06);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16, 42, 82, .07), 0 14px 34px rgba(16, 42, 82, .13);
}

.product-media {
  position: relative;
  background: #fff;
}

.product-media .product-card-link { display: block; }

.product-art,
.product-art--photo,
.catalog-grid .product-art,
.materials-products .product-art {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  /* Branco, igual ao fundo das fotos do catálogo: qualquer tom aqui desenha uma
     emenda visível onde a imagem encosta. A separação do card vem da sombra. */
  background: #fff !important;
  overflow: hidden;
}

/* `contain` em vez de `cover`: são recortes em fundo claro e o corte cortava
   gola, cadarço e embalagem. */
.product-photo,
.materials-products .product-photo,
.catalog-grid .product-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Sem respiro interno: as fotos do catálogo já vêm com fundo branco assado, e
     um pouco mais claro que o branco puro do card. Com 12px de padding a borda
     desse fundo era desenhada como um retângulo cinza dentro do card — o
     contorno que a limpeza estava justamente tirando. Encostada nas bordas, a
     emenda cai no canto arredondado do card e desaparece. */
  padding: 0;
  box-sizing: border-box;
  transition: opacity .3s ease, transform .4s ease;
}

/* Blob azul borrado herdado do plano em degradê antigo (styles.css:217). Sobre
   moldura branca ele vira uma mancha azulada atrás de cada produto. */
.product-art::after,
.product-art--photo::after { display: none !important; }

/* styles.css:1469/1479 pinta `.materials-products .product-photo` e
   `.catalog-grid .product-photo` de branco. Como a foto ocupa a moldura inteira,
   esse branco cobria o plano claro que substituiu a borda do card: uniformes
   ficavam com o plano e materiais/catálogo com uma caixa branca e uma emenda
   visível na borda do preenchimento. A foto não precisa de fundo — quem pinta a
   moldura é `.product-art`. */
.product-photo,
.materials-products .product-photo,
.catalog-grid .product-photo,
.product-photo--front,
.product-photo--back {
  background-color: transparent !important;
}

.product:hover .product-photo { transform: scale(1.04); }

.product-art--empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #f1f5fa 0 12px, #e8eef6 12px 24px);
  color: #7a8798;
  font-size: 12px;
}

/* Selos e favorito ------------------------------------------------------- */

.badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  margin: 0;
  max-width: calc(100% - 62px);
  padding: 4px 7px;
  border-radius: 5px;
  background: #f0f4f9;
  color: #55647c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge--sold-out {
  left: 10px;
  top: 40px;
  background: #b3261e;
  color: #fff;
}

.heart {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #ffffffee;
  box-shadow: 0 2px 8px rgba(16, 42, 82, .14);
  color: #5c6c82;
  font-size: 15px;
  line-height: 1;
  /* Sempre visível: em telas de toque o hover nunca acontece. */
  opacity: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.product:hover .heart { opacity: 1; }
.heart:hover { color: #b3261e; background: #fff; }

/* Corpo: nome, preço, apoio e ação --------------------------------------- */

.product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
}

.product-name,
.product h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #17233c;
  /* Duas linhas fixas mantêm preço e botão alinhados entre os cards. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.product-name a { color: inherit; text-decoration: none; }
.product-name a:hover { text-decoration: underline; }

.price {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f2544;
  letter-spacing: -.01em;
}

.product-meta {
  margin: 0;
  color: #67768c;
  font-size: 11.5px;
  line-height: 1.3;
}

.product--sold-out .product-meta { color: #b3261e; }
.product--sold-out .product-photo { filter: grayscale(1); opacity: .55; }

/* A ação fica sempre visível, na base, com a mesma linha em todos os cards. */
.product-cta,
.product .buy {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 12px;
  min-height: 44px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--ink, #12263f);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: background .18s ease;
  box-sizing: border-box;
  padding: 12px 10px;
}

.product-cta:hover,
.product .buy:hover { background: #0a1c31; }

.product-cta--link { text-decoration: none; }

.product-cta.is-unavailable,
.product-cta:disabled {
  background: #eef1f6;
  color: #7b8798;
  cursor: not-allowed;
}

.product-cta.added { background: #167c4a; }

/* Rótulo curto só entra quando o card fica estreito demais para o completo. */
.product-cta__short { display: none; }

@media (max-width: 480px) {
  .product-cta__full { display: none; }
  .product-cta__short { display: inline; }
  /* Selo de categoria some: em card de 170px "Materiais Escolares" trunca e a
     seção já diz de que categoria é. O selo de esgotado continua. */
  .product-media > .badge:not(.badge--sold-out) { display: none; }
  .badge--sold-out { top: 10px; }
}

/* Esqueleto -------------------------------------------------------------- */

.product--placeholder { pointer-events: none; }
.product--placeholder .product-art { background: #eef2f7 !important; }
.product--placeholder .product-name,
.product--placeholder .price,
.product--placeholder .product-meta,
.product--placeholder .product-cta {
  min-height: 0;
  background: #eef2f7;
  border-radius: 6px;
  color: transparent;
}
.product--placeholder .product-name { height: 34px; }
.product--placeholder .price { height: 22px; width: 55%; }
.product--placeholder .product-meta { height: 14px; width: 40%; }
.product--placeholder .product-cta { height: 44px; background: #f3f6fa; }

.products-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 16px;
  border: 0;
  border-radius: 16px;
  background: #f5f7fb;
  color: #5b6b80;
  text-align: center;
}

/* Larguras --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .products, .materials-products, .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .products, .materials-products, .catalog-grid,
  .products:not(.materials-products) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 12px !important;
  }
  .product-body { padding: 12px 12px 14px; gap: 5px; }
  .product-name, .product h3 { font-size: 13px !important; min-height: 2.7em; }
  .price { font-size: 17px !important; }
  .product-cta, .product .buy {
    min-height: 44px !important;
    padding: 11px 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  .product-body { padding: 10px 10px 12px; }
  .product-name, .product h3 { font-size: 12px !important; }
  .price { font-size: 15px !important; }
  .product-cta, .product .buy { font-size: 10px !important; letter-spacing: 0 !important; }
}

/* =========================================================================
   CABEÇALHO COMPACTO AO ROLAR
   =========================================================================
   A pilha do topo ocupa 208px (avisos 40 + cabeçalho 112 + navegação 56).
   Ao rolar, ela encolhe para ~102px: a barra promocional recolhe e as duas
   linhas do cabeçalho diminuem. O cabeçalho continua fixo, visível e ocupando
   100% da largura — nenhum controle sai da tela, tudo apenas diminui.
   ========================================================================= */

.announcement,
.header,
.site-header-main,
.nav,
.brand small,
.brand b,
.brand::after,
.header-action,
.site-search input {
  transition:
    height .28s cubic-bezier(.4, 0, .2, 1),
    min-height .28s cubic-bezier(.4, 0, .2, 1),
    padding .28s cubic-bezier(.4, 0, .2, 1),
    font-size .28s cubic-bezier(.4, 0, .2, 1),
    width .28s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease,
    top .28s cubic-bezier(.4, 0, .2, 1),
    transform .28s cubic-bezier(.4, 0, .2, 1);
}

/* Barra promocional recolhe (volta ao subir) */
.cdu-scrolled .announcement {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.cdu-scrolled .header {
  top: 0;
  box-shadow: 0 6px 24px rgba(16, 47, 93, .12);
}

/* Linha principal: de 112px para 62px */
.cdu-scrolled .site-header-main {
  min-height: 62px;
  padding-top: 8px;
  padding-bottom: 8px;
  column-gap: 22px;
}

.cdu-scrolled .brand small { font-size: 10.5px; letter-spacing: .14em; }
.cdu-scrolled .brand b { font: 21px/13px Oswald, sans-serif; }
.cdu-scrolled .brand::after { width: 40px; height: 36px; }
.cdu-scrolled .header-brand { transform: scale(.98); }

.cdu-scrolled .header-action {
  min-width: 66px;
  font-size: 10.5px;
  gap: 3px;
}

.cdu-scrolled .header-actions { gap: 18px; }
.cdu-scrolled .site-search input { height: 40px; }

/* Linha da navegação: de 56px para 40px */
.cdu-scrolled .nav {
  height: 40px;
  font-size: 11px;
}

/* No celular a navegação vive no menu lateral e a linha principal já é curta:
   quem libera espaço de verdade é a barra promocional (38px → 0). Ainda assim a
   linha do logo encolhe um pouco, para o gesto ficar perceptível.
   Os !important respondem aos !important de styles.css:3889 e 3895. */
@media (max-width: 900px) {
  .cdu-scrolled .header { min-height: 48px !important; }
  .cdu-scrolled .site-header-main {
    min-height: 48px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .cdu-scrolled .header-brand { transform: scale(.9); }
  .cdu-scrolled .nav { height: 36px; }
}

/* Âncoras acompanham a altura real do cabeçalho nos dois estados. */
[id] { scroll-margin-top: 210px; }
.cdu-scrolled [id] { scroll-margin-top: 110px; }

/* Fio de progresso da leitura, na base do cabeçalho. */
.header-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #0d4b91, #3b85df);
  will-change: transform;
  pointer-events: none;
}

/* =========================================================================
   MENU PRINCIPAL: A PÁGINA ATUAL
   =========================================================================
   ecommerce.js marca com aria-current="page" o item da seção em que o cliente
   está (Início, Uniformes ou Materiais). Antes os quatro itens tinham a mesma
   aparência em qualquer página. A cor não vai sozinha: o traço carrega a mesma
   informação pela forma, para quem não distingue o azul.
   ========================================================================= */

.nav a { transition: color .18s ease; }

.nav a:hover,
.nav a[aria-current="page"] { color: var(--blue); }

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.mobile-menu-nav a[aria-current="page"] {
  padding-left: 12px;
  color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
}

.mobile-menu-nav a[aria-current="page"]::after { color: var(--blue); }

/* =========================================================================
   ANIMAÇÕES DE ROLAGEM
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms),
    transform .55s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(26px); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .announcement, .header, .site-header-main, .nav,
  .brand small, .brand b, .brand::after, .header-action, .site-search input {
    transition: none !important;
  }
  .header-progress { display: none; }
}

/* =========================================================================
   OPÇÕES NO CARD, FAVORITOS E FILTRO
   ========================================================================= */

/* O filtro esconde os cards com o atributo [hidden]. Uma regra de autor com
   `display` vence o `[hidden] { display: none }` do navegador, e `.product` tem
   `display: flex` — o filtro marcava 7 de 8 cards como escondidos e nenhum
   sumia da tela. Esta linha devolve ao atributo o poder que ele deveria ter. */
[hidden] { display: none !important; }

/* Faixa de tamanhos e cores ---------------------------------------------- */

/* Uma linha só, sempre: a faixa desliza em vez de quebrar e desalinhar a base
   dos cards da mesma linha. */
.product-options {
  display: flex;
  gap: 5px;
  margin: 2px 0 0;
  min-height: 24px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-options::-webkit-scrollbar { display: none; }
.product-options > * { scroll-snap-align: start; flex: 0 0 auto; }

/* A borda esfumaçada só entra quando a faixa realmente transborda. */
.product-options.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  padding-right: 10px;
}

.option-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background: #eff3f8;
  color: #46566d;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}

.option-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #cfd8e3;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff;
  color: #46566d;
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.option-swatch--sem-cor { background: #eef2f7; box-shadow: none; }

.option-pill:hover { color: #0d4b91; background: #e2ecfa; }
.option-swatch:hover { transform: scale(1.12); box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #0d4b91; }

/* Favorito ---------------------------------------------------------------- */

.heart {
  font-size: 16px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.heart.is-favorite {
  color: #d92d20;
  border-color: #f4c4c0;
  background: #fff5f4;
  animation: favoritePop .32s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes favoritePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* Um só path, alternado por `fill` — o traço herda a mesma cor, então hover e
   estado marcado governam os dois com um único valor. */
.heart .heart-icon,
.favorites-filter .heart-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill .18s ease;
}

/* Cheio significa "ligado". O filtro com favoritos guardados mas desligado fica
   só com o contorno vermelho — senão desligado e ligado pareceriam o mesmo. */
.heart.is-favorite .heart-icon,
.favorites-filter.is-active .heart-icon { fill: currentColor; }

/* Filtro de favoritos ------------------------------------------------------ */

.favorites-filter {
  /* Botão redondo de 38px com um ícone de 19px: sem `justify-content` o ícone
     encosta na borda esquerda em vez de ficar no meio. A pílula antiga não
     precisava, porque o conteúdo preenchia a largura toda. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eff3f8;
  color: #5c6c82;
  font: 700 11px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.favorites-filter:hover { background: #e2ecfa; color: #0d4b91; }
.favorites-filter.has-favorites { color: #d92d20; }
/* Ativo precisa de um sinal forte: sem a borda, um rosa claro sozinho não
   distingue ligado de desligado. Fundo cheio, ícone branco. */
.favorites-filter.is-active {
  background: #d92d20;
  color: #fff;
  box-shadow: 0 3px 10px rgba(217, 45, 32, .32);
}

.favorites-filter .heart-icon { width: 19px; height: 19px; }

/* Linha do título: styles.css:1469 põe o link "Ver todos" em position:absolute
   com right:0. Ao acrescentar o filtro, os dois passaram a ocupar o mesmo canto
   — o filtro cobria o link e o clique caía na navegação, o que fazia o filtro
   parecer quebrado. Agora as ações vivem juntas numa faixa própria à direita,
   montada por favorites-filter.js. */
.section-title-row:has(.section-actions) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.section-title-row:has(.section-actions) .section-title { grid-column: 2; }

.section-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Dentro da faixa o link volta ao fluxo. A regra original é
   `.section-title-row > a` (combinador de filho direto), então mover o link para
   dentro da faixa desligava cor, caixa alta e sublinhado — repetidos aqui. */
.section-actions > a {
  position: static !important;
  flex: none;
  color: #0252c5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid #0252c5;
  padding-bottom: 5px;
  white-space: nowrap;
}

.section-actions > a:hover { color: #0d4b91; border-bottom-color: #0d4b91; }

/* No celular a linha vira uma coluna: título em cima, ações centralizadas
   embaixo — três colunas em 390px faziam o título passar por cima das ações. */
@media (max-width: 760px) {
  .section-title-row:has(.section-actions) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 14px;
  }
  .section-title-row:has(.section-actions) .section-title {
    grid-column: 1;
    text-align: center;
  }
  .section-actions {
    grid-column: 1;
    justify-content: center;
    gap: 12px;
  }
  .section-actions > a { font-size: 11px; }
  .favorites-filter { width: 34px; height: 34px; }
  .product-options { min-height: 22px; }
}



/* =========================================================================
   LIMPEZA DE CONTORNO NA PÁGINA
   =========================================================================
   Fora do card, a home ainda acumulava filetes de 1px que somados deixavam a
   tela riscada: quatro indicadores separados por hairline logo acima da grade,
   duas faixas contornadas que já têm fundo próprio, três filetes empilhados no
   rodapé e uma moldura em cada cartão da loja física.

   Onde a borda separava dois blocos, quem separa agora é o próprio fundo ou o
   espaçamento. Contorno de foco (:focus-visible) e sublinhado de link ficam:
   um é acessibilidade, o outro é a marca de que aquilo é clicável.
   ========================================================================= */

/* Indicadores: a grade era desenhada com filetes. Espaçamento basta. */
.stats-item,
.stats-item:nth-child(2n),
.stats-item:last-child,
.stats-item:nth-last-child(-n+2) {
  border: 0 !important;
}

.stats-grid { gap: 4px 0; }

/* Faixas que já têm fundo próprio não precisam de moldura por cima e por baixo
   — a mudança de cor já marca o começo e o fim do bloco. */
.benefits,
.store-section {
  border-top: 0;
  border-bottom: 0;
}

/* Cabeçalho: a sombra já separa as duas linhas. */
.nav { border-top: 0; }

/* Busca: uma caixa azul de 1px fixa no topo de toda página puxa mais atenção
   que o próprio conteúdo. Fundo suave no lugar; o azul volta no foco. */
.site-search input {
  border-color: transparent;
  background: #f3f6fa;
  transition: background .18s ease, box-shadow .18s ease;
}

.site-search input:hover { background: #eef2f8; }

.site-search input:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(20, 87, 184, .35);
}

/* Rodapé: três filetes horizontais em ~200px viravam um só assunto. */
.footer-credenciado,
.copyright { border-top: 0; }

/* Cartões da loja física: fundo próprio já os separa da seção. */
.store-photo-card,
.store-map-card {
  border: 0;
  box-shadow: 0 6px 20px rgba(16, 42, 82, .07);
}

/* Barra de cookies: contorno branco de 1px flutuando por cima dos cards. */
.cookie-consent button {
  border: 0;
  background: #ffffff1f;
}

.cookie-consent button[data-cookie-choice="all"] {
  background: #fff;
  color: #0d2b52;
}

/* Cupom no resumo do checkout */
.checkout-coupon{margin:14px 0 10px;padding:12px 0;border-top:1px solid #e6ebf2;border-bottom:1px solid #e6ebf2}
.checkout-coupon-field{display:grid;gap:6px}
.checkout-coupon-field>span:first-child{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7789}
.checkout-coupon-row{display:flex;gap:8px}
.checkout-coupon-row input{flex:1;min-width:0;height:42px;border:1px solid #d7dfea;border-radius:9px;padding:0 12px;font:inherit;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.checkout-coupon-row input:focus{outline:none;border-color:#8fb0dd;box-shadow:0 0 0 3px rgba(16,49,95,.12)}
.checkout-coupon-row button{height:42px;padding:0 16px;border:0;border-radius:9px;background:#0a2140;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.checkout-coupon-row button:hover:not(:disabled){background:#12325f}.checkout-coupon-row button:disabled{opacity:.6;cursor:progress}
.checkout-coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;background:#e9f6ef;color:#137b48;font-size:13px}
.checkout-coupon-applied strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.checkout-coupon-applied button{border:0;background:transparent;color:#137b48;font:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}
.checkout-coupon-msg{display:block;min-height:16px;margin-top:6px;font-size:12px;color:#6b7789}
.checkout-coupon-msg[data-kind=error]{color:#a2372a}.checkout-coupon-msg[data-kind=ok]{color:#137b48}

/* Seleção de variação por propriedade (Tamanho e Cor em grupos separados) */
.product-option+.product-option{margin-top:14px}
.option-label{display:flex;align-items:baseline;gap:8px}
.option-label span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b7789}
.option-label strong{font-size:13px;color:#0a2140}
.option-chip.sold-out{opacity:.45;text-decoration:line-through}

/* Índice estático de produtos: é o que o buscador (e quem está sem JavaScript)
   recebe no lugar da grade, que só existe depois de /api/catalog responder.
   O JavaScript troca o conteúdo do contêiner assim que carrega. */
.catalog-static-index {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .catalog-static-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.catalog-static-index a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f7fb;
  color: #17233c;
  font-size: 14px;
  text-decoration: none;
}

.catalog-static-index a:hover { background: #e9eef7; color: #0d4b91; }

/* Guias do benefício na central de ajuda. Vive FORA de [data-help-topics]:
   help-center.js reescreve aquele container com esc(), e qualquer link colocado
   lá dentro some no primeiro render — inclusive para o Google, que renderiza JS. */
.help-guides {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #e6ecf5;
}

.help-guides h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.help-guides p {
  margin: 0 0 14px;
  color: #5a6b83;
}

.help-guides ul {
  display: grid;
  gap: 10px;
}

/* ── Checkout — redesign de página única (2026-09-14) ──────────────────────
   Estende os tokens e classes já existentes (.checkout-body/.checkout-shell/
   .checkout-header/.checkout-card/.checkout-form-grid/.checkout-field/
   .delivery-options/.choice-card/.checkout-summary/.checkout-items/
   .checkout-totals/.checkout-coupon*/.order-success/.checkout-note) — não os
   substitui. As classes .checkout-progress/.checkout-step/.checkout-actions/
   .checkout-back/.checkout-next/.payment-category/.checkout-terms/
   .checkout-security-note/.checkout-feedback continuam definidas acima para
   quem ainda as usa (nenhum consumidor a mais além do checkout.js antigo,
   removido nesta mudança — mantidas por não terem custo de manter). */
.checkout-layout--single{align-items:start}
.checkout-main{display:grid;gap:0}
.checkout-section-head{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.checkout-section-head--mid{margin-top:34px;padding-top:30px;border-top:1px solid var(--cu-line)}
.checkout-section-num{width:26px;height:26px;flex:none;border-radius:50%;background:var(--cu-soft);color:var(--cu-blue);display:grid;place-items:center;font-size:12px;font-weight:700}
.checkout-section-head h1,.checkout-section-head h2{margin:0;font:500 21px/1.15 Oswald,sans-serif;text-transform:uppercase}
.checkout-field-error{display:block;min-height:15px;margin-top:1px;font-size:11px;font-weight:600;color:var(--cu-danger)}
.checkout-field input.checkout-field-input--error,.checkout-field-input--error{border-color:var(--cu-danger)!important;background:var(--cu-danger-bg)}
.checkout-hint,.checkout-hint-inline{margin:12px 0 0;color:var(--cu-muted);font-size:12px;line-height:1.6}
.checkout-hint{display:flex;gap:10px;padding:13px 15px;border-radius:10px;background:var(--cu-soft);color:#2c4a74}
.checkout-hint a{font-weight:700}

.payment-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:16px;padding:6px;border-radius:14px;background:var(--cu-soft)}
.payment-tab{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:13px 15px;border:0;border-radius:11px;background:transparent;cursor:pointer;text-align:left;font-family:inherit}
.payment-tab strong{font-size:14px;color:var(--cu-ink)}
.payment-tab span{font-size:11px;color:var(--cu-muted)}
.payment-tab[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(15,40,75,.16),0 0 0 1px var(--cu-blue) inset}
.payment-tab--disabled{opacity:.5;cursor:not-allowed}
.payment-panel{margin-top:20px;padding:22px;border:1px solid var(--cu-line);border-radius:14px;background:#fbfcfe}

.mp-subtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{padding:7px 14px;border-radius:8px;border:1px solid var(--cu-line);background:#fff;color:var(--cu-muted);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.chip[aria-selected="true"]{border-color:var(--cu-ink);background:var(--cu-ink);color:#fff}
/* A chave de categoria do cartão do benefício (2026-09-21) reusa .chip, mas os dois lados
   NÃO são controles — são <span> que informam a categoria que veio do carrinho. Por isso
   `cursor:default` nos dois: `cursor:pointer` prometeria um clique que não existe. */
.chip--on,.chip--off{cursor:default}
.chip--on{border-color:var(--cu-ink);background:var(--cu-ink);color:#fff}
.chip--off{opacity:.42}

.card-visual{position:relative;max-width:340px;margin:0 0 20px;border-radius:14px;overflow:hidden;aspect-ratio:1.586/1;color:#fff}
.card-visual-face{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.card-visual--duepay .card-visual-face{background:linear-gradient(135deg,#1b63c6 0%,#1457b8 48%,#0d3a80 100%)}
.card-visual--mp .card-visual-face{background:linear-gradient(135deg,#20365c 0%,#14203a 52%,#0c1526 100%)}
.card-visual-brand{font-size:13px;font-weight:700;letter-spacing:.04em}
.card-visual-tag{position:absolute;top:16px;right:16px;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.card-visual-number{font:400 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.card-visual-sub{max-width:calc(100% - 104px);font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* Botão de mostrar/ocultar: pílula com ícone + texto; o `max-width` de `.card-visual-sub`
   reserva o lugar dela (título da categoria ou nome do titular quebra em duas linhas em vez
   de passar por baixo do botão). O cartão NÃO gira ao revelar —
   o antigo rotateY(3deg) estreitava a face e o overflow:hidden cortava a borda direita
   (canto quadrado e degrau no topo), o que parecia defeito para o cliente. */
.card-visual-reveal{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:.01em;cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.card-visual-reveal:hover{background:rgba(255,255,255,.24)}
.card-visual-reveal:active{transform:scale(.96)}
.card-visual-reveal:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.card-visual-reveal-icon{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-visual-reveal-icon--hide,.card-visual--revealed .card-visual-reveal-icon--show{display:none}
.card-visual--revealed .card-visual-reveal-icon--hide{display:block}
@media (prefers-reduced-motion:reduce){.card-visual-reveal{transition:none}.card-visual-reveal:active{transform:none}}

.checkout-alert{margin-top:20px;padding:18px 20px;border-radius:12px;border:1px solid #f0dcae;background:#fff8e8;color:#75531c;font-size:13px}
.checkout-alert strong{display:block;font-size:14px;margin-bottom:6px}
.checkout-alert p{margin:0 0 14px;line-height:1.65}
.checkout-alert-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.checkout-pix-box{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:18px;border:1px solid var(--cu-line);border-radius:12px;background:#fff}
.checkout-pix-qr{width:120px;height:120px;flex:none;display:grid;place-items:center;background:repeating-conic-gradient(#14203a 0% 25%,#fff 0% 50%) 0 0/16px 16px;border:1px solid var(--cu-line);border-radius:8px;color:transparent}
.checkout-pix-code{display:block;padding:10px 12px;margin:8px 0;border:1px solid #dbe3ec;border-radius:8px;background:var(--cu-soft);font:400 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}

.checkout-terms-card{margin-top:26px;padding:26px}
.checkout-submit{position:relative;width:100%;margin-top:18px;padding:16px 20px;border:0;border-radius:10px;background:var(--cu-ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.checkout-submit:disabled{cursor:not-allowed;opacity:.6}
.checkout-submit:disabled::before{content:"";display:inline-block;width:14px;height:14px;margin-right:9px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:checkoutSpin .7s linear infinite}
.checkout-submit-note{margin:12px 0 0;text-align:center;font-size:11px;color:#8090a2;line-height:1.6}
.checkout-inline-link{color:var(--cu-blue);font-weight:700}
.checkout-feedback:empty{display:none}

/* Skeleton do carregamento inicial em data-checkout-app (checkout.html) — não é
   removido por JS: checkout.js substitui o conteúdo inteiro do container via
   innerHTML assim que o carrinho e a config de pagamento resolvem. */
.checkout-skeleton{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:340px;text-align:center;color:#687486;font-size:13px}
.checkout-skeleton-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--cu-line);border-top-color:var(--cu-blue);animation:checkoutSpin .8s linear infinite}
@keyframes checkoutSpin{to{transform:rotate(360deg)}}

@media(max-width:900px){.checkout-layout--single{grid-template-columns:1fr}.checkout-summary{position:static}}

/* Trava do pagamento (DESIGN-PAGAMENTO-v2 §5.2/§5.6) — canal SEPARADO do feedback: o
   feedback some ao digitar, a trava não. Ela é o que o cliente lê quando o resultado da
   cobrança é desconhecido, e por isso precisa ser a coisa mais visível do bloco. */
.checkout-lock{margin:12px 0;padding:14px 16px;border-radius:12px;border:1px solid #f0c98a;background:#fff8ec;color:#5a4108;font-size:13px;line-height:1.5}
.checkout-lock-message{margin:0;font-weight:600}
.checkout-lock-order{margin:6px 0 0;font-variant-numeric:tabular-nums;word-break:break-word}
.checkout-lock-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.checkout-lock-actions:empty{display:none}
/* Os botões da trava ficam todos no HTML e cada estado mostra os seus; sem nenhum à mostra, a fileira
   some, em vez de deixar 10px vazios embaixo da mensagem ("Criando o pedido", relato de 14/10). */
.checkout-lock-actions:not(:has(> :not([hidden]))){display:none}
/* O `.btn` base (styles.css) é o da vitrine: `margin-top:22px` e nenhuma borda própria. Aqui isso
   abria 30px entre os botões quando a fileira quebra no celular, e o <button> "Verificar novamente"
   ganhava a borda padrão do navegador e ficava mais alto que o <a> ao lado. Mesmo conserto do
   `.freight-modal-actions .btn`. Sem `display`: ele venceria o `hidden` de cada botão. */
.checkout-lock-actions .btn{margin:0;border:0;cursor:pointer}
/* Campos travados: `inert` já tira do teclado e do leitor de tela; isto é só o sinal visual. */
[data-payment-fields][inert]{opacity:.55;pointer-events:none}

/* Andamento do pagamento (relato de 16/09): E1, E2 e E7, montado por setPaymentProgress().
   A lista fica logo acima da trava e, com a trava em tom de andamento, as duas formam um
   cartão só: as etapas em cima, a mensagem embaixo. Azul de espera, não o âmbar de alerta,
   que continua valendo para conferência, bloqueio e limite de tentativas. A situação da
   etapa não depende só da cor: o ícone muda (círculo, giro, visto), e o leitor de tela, que
   não vê o ícone, ouve "Concluída", "Em andamento" ou "A seguir" antes do texto (.sr-only). */
.checkout-payprogress{display:grid;gap:12px;margin:12px 0 0;padding:16px 16px 6px;list-style:none;border:1px solid #cddcf0;border-bottom:0;border-radius:12px 12px 0 0;background:#f3f7fd}
.checkout-payprogress[hidden]{display:none}
.checkout-payprogress-step{position:relative;display:flex;align-items:flex-start;gap:10px;color:#5b6879;font-size:13px;line-height:1.4}
.checkout-payprogress-step:not(:last-child)::after{content:"";position:absolute;left:10px;top:22px;bottom:-12px;width:2px;background:#cddcf0}
.checkout-payprogress-step[data-step-status="done"]:not(:last-child)::after{background:var(--cu-success)}
.checkout-payprogress-icon{position:relative;flex:none;box-sizing:border-box;width:22px;height:22px;border:2px solid #7d8fa6;border-radius:50%;background:#fff}
.checkout-payprogress-label{padding-top:2px}
.checkout-payprogress-step[data-step-status="active"]{color:var(--cu-ink);font-weight:700}
.checkout-payprogress-step[data-step-status="active"] .checkout-payprogress-icon{border-color:#cfe0f7;border-top-color:var(--cu-blue);animation:checkoutSpin .8s linear infinite}
.checkout-payprogress-step[data-step-status="done"]{color:var(--cu-success);font-weight:600}
.checkout-payprogress-step[data-step-status="done"] .checkout-payprogress-icon{border-color:var(--cu-success);background:var(--cu-success)}
.checkout-payprogress-step[data-step-status="done"] .checkout-payprogress-icon::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checkout-lock[data-lock-tone="progress"]{margin-top:0;padding-top:10px;border-color:#cddcf0;border-top:0;border-radius:0 0 12px 12px;background:#f3f7fd;color:#1d3557}
/* A lista e a trava ocupam a LARGURA INTEIRA do cartão dos termos (relato de 14/10). O cartão é
   flex com `align-items:flex-start` (para o botão ter a largura do próprio texto), e isso encolhia
   cada filho à largura do próprio conteúdo: a lista ficava com a largura de "Criando o pedido", a
   mensagem embaixo com a da frase dela, e o "cartão só" virava duas caixas desencaixadas, com um
   degrau na emenda. A trava em tom de alerta também estica: é a coisa mais visível do bloco. */
.checkout-terms-card > .checkout-payprogress,.checkout-terms-card > .checkout-lock{align-self:stretch}
/* Sem animação, a etapa em andamento ganha um ponto no centro para não parecer "por vir". */
@media (prefers-reduced-motion: reduce){.checkout-payprogress-step[data-step-status="active"] .checkout-payprogress-icon{animation:none;border-color:var(--cu-blue);background:radial-gradient(circle,var(--cu-blue) 0 4px,#fff 5px)}}
/* Pop-up do frete pago no ato (regra do dono, 2026-09-18): o cartão paga o frete antes de o benefício ser debitado. */
.freight-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.freight-modal[hidden]{display:none}
.freight-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.freight-modal-dialog{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow-y:auto;padding:22px 20px;border-radius:16px;background:#fff;color:var(--cu-ink);box-shadow:0 24px 60px rgba(15,23,42,.28)}
.freight-modal-dialog:focus{outline:none}
.freight-modal-title{margin:0 0 6px;font-size:20px;line-height:1.25}
.freight-modal-intro{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--cu-muted)}
.freight-modal-summary{display:grid;gap:6px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--cu-line);border-radius:12px;background:var(--cu-soft)}
.freight-modal-summary div{display:flex;justify-content:space-between;gap:12px}
.freight-modal-summary dt{margin:0;font-size:14px}
.freight-modal-summary dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
/* ADR-023 (entrega 2): as linhas do resumo da confirmação final já existem no HTML e cada caso
   esconde as suas — o `display:flex` da regra acima venceria o `hidden` sem isto. */
.freight-modal-summary div[hidden]{display:none}
/* O aviso do PIN (vale 5 minutos, gerado no aplicativo): a MESMA caixa dos avisos do checkout,
   sem margem extra dentro do diálogo. */
.benefit-confirm__pin{margin:0 0 14px}
.benefit-confirm__pin:empty{display:none}
.freight-modal-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.freight-modal-methods .payment-tab{border:1px solid var(--cu-line);background:#fff}
.freight-modal-methods .payment-tab[aria-pressed="true"]{border-color:var(--cu-blue);box-shadow:inset 0 0 0 1px var(--cu-blue)}
.freight-modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;margin-top:14px}
.freight-modal-actions .checkout-submit{flex:1 1 220px;width:auto;margin-top:0}
.freight-modal-actions .btn{margin:0;align-self:stretch;display:inline-flex;align-items:center}
.freight-modal-actions .btn:disabled{cursor:not-allowed;opacity:.55}
.freight-modal-methods .payment-tab:disabled{cursor:not-allowed}
/* O andamento do próprio pop-up (2026-10-06): com o Pix do frete sendo gerado, a lista de etapas
   e a trava ficam ATRÁS do diálogo. Mesmo tom azul de espera do .pix-panel__status. */
.freight-modal-status{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--cu-soft);color:var(--cu-blue);font-size:13px;font-weight:700;line-height:1.5}
.freight-modal-status[hidden]{display:none}
@media (max-width:480px){.freight-modal{align-items:flex-end;padding:0}.freight-modal-dialog{max-width:none;max-height:92vh;padding:20px 16px;border-radius:16px 16px 0 0}}

/* ADR-016 — o painel da forma de pagamento "Pix" (spec §8). Correção do dono (2026-09-21): não é
   uma tela, é uma forma de pagamento selecionável, com o mesmo `.payment-panel` de Cartão e
   DuePay. Dentro dele, a ORDEM e o conteúdo que o cliente já conhece de um pagamento Pix (valor,
   pedido, QR, copia e cola, prazo, o que fazer, estado ao vivo), com a identidade visual do
   site. Só os tokens que este arquivo já define — nenhuma paleta nova. */
.pix-panel__payment{display:grid;gap:14px}
.pix-panel__payment[hidden],.pix-panel [data-pix-intro][hidden]{display:none}
.pix-panel__title{margin:0;font:500 19px/1.2 Oswald,sans-serif;text-transform:uppercase;color:var(--cu-ink)}
.pix-panel__amount{margin:0;font-size:13px;color:var(--cu-muted)}
.pix-panel__amount strong{display:block;font:600 26px/1.1 Oswald,sans-serif;color:var(--cu-ink)}
.pix-panel__order{margin:0;font-size:12px;color:var(--cu-muted)}
.pix-panel__body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:18px;border:1px solid var(--cu-line);border-radius:14px;background:#fff}
.pix-panel__body[hidden],.pix-panel__body>[hidden],.pix-panel__steps[hidden]{display:none}
.pix-panel__qr img{display:block;width:220px;height:220px;border-radius:10px;background:#fff;border:1px solid var(--cu-line);image-rendering:pixelated}
.pix-panel__copy{display:grid;gap:8px;min-width:0}
.pix-panel__label{font-size:11px;font-weight:700;color:var(--cu-muted);text-transform:uppercase;letter-spacing:.04em}
.pix-panel__code{width:100%;min-width:0;padding:10px 12px;border:1px solid var(--cu-line);border-radius:10px;background:#fff;font:12px/1.4 ui-monospace,Menlo,monospace;color:var(--cu-ink)}
.pix-panel__copy-button{justify-self:start}
.pix-panel__copied{min-height:16px;margin:0;font-size:12px;font-weight:700;color:var(--cu-success)}
.pix-panel__deadline{margin:0;font-size:13px;color:var(--cu-ink);font-variant-numeric:tabular-nums}
.pix-panel__steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:13px;color:var(--cu-ink)}
.pix-panel__status{margin:0;padding:12px 14px;border-radius:10px;background:var(--cu-soft);color:var(--cu-blue);font-weight:700}
/* Desfecho COM PROVA: o azul de espera não pode continuar valendo. Mesmo âmbar da trava
   (.checkout-lock) — atenção sem alarme, porque nada foi cobrado. */
.pix-panel__status[data-pix-tone="ended"]{border:1px solid #f0c98a;background:#fff8ec;color:#5a4108}
.pix-panel__missing{margin:0;padding:12px 14px;border-radius:10px;background:var(--cu-soft);color:var(--cu-ink);font-size:13px}
.pix-panel__missing[hidden]{display:none}
.pix-panel__actions{display:flex;flex-wrap:wrap;gap:10px}
.pix-panel__actions>[hidden]{display:none}
/* No celular, escanear o próprio aparelho não funciona: o "copiar" vem PRIMEIRO. */
@media(max-width:640px){
  .pix-panel__body{grid-template-columns:1fr}
  .pix-panel__copy{order:-1}
  .pix-panel__qr img{width:180px;height:180px;margin:0 auto}
  .pix-panel__copy-button{justify-self:stretch}
}

/* ---------------------------------------------------------------------------
   ADR-016 §14 (D11/D12) — a tela do Pix DENTRO do pop-up do frete.
   Só regras de ENCAIXE: nenhuma cor, fonte ou espaçamento novo. Tudo o que o QR
   usa já existe em `.pix-panel__*` acima; aqui só se ajusta o que muda por ele
   morar num diálogo estreito, e não na coluna larga do checkout.
   --------------------------------------------------------------------------- */
.freight-modal-pix[hidden]{display:none}
/* Dentro do diálogo o painel é o conteúdo, não um cartão sobre um cartão: sem
   borda, sem fundo e sem o respiro que ele tem entre as abas de pagamento. */
.freight-modal-pix .pix-panel{padding:0;border:0;background:none}
.freight-modal-pix .pix-panel[hidden]{display:none}
/* O diálogo tem 520px no máximo e 20px de respiro de cada lado: QR de 220px mais
   o copia e cola em duas colunas não cabe sem apertar o código. Uma coluna só,
   com o QR centrado — o mesmo layout que a coluna estreita do celular já usa. */
.freight-modal-pix .pix-panel__body{grid-template-columns:1fr;gap:14px;padding:14px}
.freight-modal-pix .pix-panel__qr img{width:180px;height:180px;margin:0 auto}
.freight-modal-pix .pix-panel__copy-button{justify-self:stretch}
.freight-modal-pix .pix-panel__title{font-size:17px}
.freight-modal-pix .pix-panel__amount strong{font-size:22px}
/* "Pagar de outro jeito" é a ÚNICA saída com um QR vivo (D4): ela ocupa a linha
   inteira, como o botão de ação do pop-up que ela substitui. */
.freight-modal-pix .pix-panel__actions .btn{flex:1 1 100%}
/* No celular (390x844, medido em 2026-09-21) o diálogo tem 92vh e a tela do Pix não cabe
   nele: o cliente rola por dentro para chegar ao fim. O que se corta aqui é DUPLICAÇÃO, não
   informação — o resumo do pop-up repete "Frete R$ 14,90" que o painel mostra logo abaixo,
   em corpo maior e com o número do pedido junto. Ele volta inteiro quando a forma volta a
   ser o cartão (`showFreightPixScreen(false)`).

   ⚠️ Tentado e DESCARTADO: prender a situação e o botão no rodapé com `position:sticky`.
   Funciona enquanto há rolagem, mas `bottom` EMPURRA o elemento para baixo quando não há —
   e é exatamente o que acontece nos desfechos, em que o painel encolhe (QR, passos e prazo
   saem): a faixa "Frete pago. Concluindo a compra…" descia e cobria o valor a pagar. */
@media (max-width:480px){
  .freight-modal-pix .pix-panel__qr img{width:160px;height:160px}
  .freight-modal-pix .pix-panel__body{padding:12px;gap:12px}
}
/* Acompanhamento do pedido: marcos e bloco da nota fiscal (spec 2026-09-21).
   Mesma paleta de .tracking-step (styles.css): #0252c5 aceso, #ccd5e2 apagado. */
.tracking-marks{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.tracking-mark{padding:5px 11px;border:1px solid #ccd5e2;border-radius:999px;color:#687589;font-size:12px;font-weight:600}
.tracking-mark.done{border-color:#0252c5;background:#0252c5;color:#fff}
.tracking-invoice{margin-top:18px;padding:16px;background:#f7faff;border:1px solid #dce7f5}
.tracking-invoice h4{margin:0 0 6px;color:#142442;font-size:14px}
.tracking-invoice p{margin:0 0 6px;color:#526174;font-size:13px;line-height:1.6}
.tracking-invoice-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;user-select:all}
.tracking-invoice .content-cta{margin-top:12px;min-height:42px}
@media (max-width:560px){.tracking-mark{flex:1 1 calc(50% - 8px);text-align:center}}

/* ── Checkout — validação e clareza de valor (2026-09-22) ──────────────────
   Três acréscimos ao redesign de 2026-09-14, todos no mesmo princípio que
   Stripe e Abacate seguem: o formulário responde enquanto se digita, e nenhum
   cartão é digitado sem o cliente saber quanto sai dele.

   1. .checkout-field-input--ok — o estado de campo VÁLIDO, que não existia. A
      tela só falava no erro; acertar não dava sinal nenhum, e num formulário
      com CPF, telefone, CEP, número, validade e CVV isso vira conferência
      campo a campo antes de pagar. A borda verde e o visto são discretos de
      propósito: confirmam sem competir com o erro, que continua sendo o único
      estado com texto.
   2. .checkout-confirm — a confirmação de que o cartão é o da categoria da
      compra (regra do dono, 2026-09-22). Desenhada como AFIRMAÇÃO, não como
      mais uma linha de formulário: fundo próprio e borda, para que a pessoa
      note que está declarando alguma coisa. O servidor não tem como conferir
      isso (ver categoryConfirmHtml em checkout.js), então a tela é o lugar.
   3. .complement-breakdown — a conta da diferença embaixo do campo de saldo:
      quanto sai do benefício, quanto sai do cartão e o frete quando entra na
      mesma cobrança. */
.checkout-field input.checkout-field-input--ok,.checkout-field-input--ok{border-color:#9dd4b3;background:#fbfffc}
.checkout-field{position:relative}
.checkout-field input.checkout-field-input--ok{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.checkout-field input:focus,.checkout-field select:focus{outline:none;border-color:var(--cu-blue);box-shadow:0 0 0 3px rgba(27,99,198,.14)}

.checkout-confirm{display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:14px 16px;border:1px solid #cfe0f5;border-radius:12px;background:#f4f9ff;color:#2c4a74;font-size:13px;line-height:1.6;cursor:pointer}
.checkout-confirm input{width:18px;height:18px;margin-top:2px;flex:none;cursor:pointer}
.checkout-confirm strong{font-weight:700;color:var(--cu-ink)}
.checkout-confirm:has(input:checked){border-color:#9dd4b3;background:#f4fdf7;color:#1f5f3c}
.checkout-confirm:has(.checkout-field-input--error){border-color:var(--cu-danger);background:var(--cu-danger-bg)}

.complement-breakdown{display:grid;gap:8px;margin:14px 0 0;padding:14px 16px;border:1px solid var(--cu-line);border-radius:12px;background:#fff}
.complement-breakdown-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;color:#526174}
.complement-breakdown-row strong{font-weight:600;color:var(--cu-ink);font-variant-numeric:tabular-nums}
.complement-breakdown-row--total{margin-top:2px;padding-top:10px;border-top:1px solid var(--cu-line);font-size:14px;color:var(--cu-ink);font-weight:600}
.complement-breakdown-row--total strong{font-size:17px;font-weight:700}

/* ── Checkout em TRÊS PASSOS (2026-09-22, pedido do dono) ──────────────────
   A tela deixa de mostrar identificação, entrega e pagamento de uma vez. O
   cartão fica com um assunto só por vez, e o que já ficou para trás vira uma
   linha de resumo com "Alterar" — que é o que torna o passo-a-passo limpo em
   vez de labiríntico: nada some, só encolhe.

   Nenhuma das classes antigas foi redefinida. .checkout-section-head continua
   valendo; o que sai dela é o círculo numerado (.checkout-section-num), que
   passou para a trilha do topo — ter o número em dois lugares faria a tela
   contar duas sequências diferentes ao mesmo tempo. */
/* A trilha é um BREADCRUWM, não uma fileira de pílulas numeradas (referência
   aprovada pelo dono, 2026-09-22): texto miúdo, separador em chevron, e o passo
   atual sublinhado. Ela informa onde se está e não disputa atenção com o
   conteúdo do passo — que é o que o número dentro de um círculo colorido fazia. */
.checkout-stepnav{margin:0 0 22px}
.checkout-stepnav__list{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.checkout-stepnav__item{display:flex;align-items:center;margin:0}
.checkout-stepnav__item+.checkout-stepnav__item::before{content:"";width:5px;height:5px;margin:0 4px;border-top:1.4px solid #c3ccd8;border-right:1.4px solid #c3ccd8;transform:rotate(45deg)}
.checkout-stepnav__button{display:inline-flex;align-items:center;padding:6px 6px;border:0;background:transparent;color:#93a1b2;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;cursor:default}
.checkout-stepnav__label{white-space:nowrap}
.checkout-stepnav__item[data-step-state="current"] .checkout-stepnav__button{color:var(--cu-ink);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.checkout-stepnav__item[data-step-state="done"] .checkout-stepnav__button{color:#5b6b7f;cursor:pointer}
.checkout-stepnav__item[data-step-state="done"] .checkout-stepnav__button:hover{color:var(--cu-ink);text-decoration:underline;text-underline-offset:4px}
.checkout-stepnav__button:disabled{cursor:default}
.checkout-stepnav__button:focus-visible{outline:2px solid var(--cu-blue);outline-offset:2px;border-radius:4px}

/* `.checkout-stage`, e NÃO `.checkout-step`: esta folha já tinha `.checkout-step`
   desde os quatro passos de 2026-08 (`display:none` + `.active`), e reusar o nome fez o
   passo 1 nascer invisível com `hidden=false` — a regra antiga ganhava, e a tela abria
   em branco. O nome velho fica onde está, intocado. */
.checkout-stage[hidden]{display:none}
.checkout-stepactions{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--cu-line)}
.checkout-stepactions--last{margin-top:18px;padding-top:18px}
.checkout-stepnext{margin-left:auto;padding:14px 26px;border:0;border-radius:10px;background:var(--cu-ink);color:#fff;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.checkout-stepnext:hover{background:#0d1b2f}
.checkout-stepback{padding:13px 4px;border:0;background:transparent;color:var(--cu-muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.checkout-stepback:hover{color:var(--cu-ink)}

/* O passo fechado: uma linha, sem borda pesada, com o "Alterar" discreto à
   direita. É o resumo que impede o passo-a-passo de esconder decisão — quem
   está no pagamento continua lendo para onde a compra vai. */
/* O RECAP: as colunas do que já ficou decidido, cada uma com o seu "Alterar" —
   a barra Contact / Ship to / Method da referência. Colunas, e não linhas
   empilhadas, porque assim o cliente lê o contexto inteiro de uma vez enquanto
   paga, em vez de rolar por avisos. */
.checkout-recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 26px;border:1px solid var(--cu-line);border-radius:12px;overflow:hidden}
.checkout-recap[hidden]{display:none}
.checkout-stepsummary{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;background:#fff}
.checkout-stepsummary+.checkout-stepsummary{border-left:1px solid var(--cu-line)}
.checkout-stepsummary[hidden]{display:none}
.checkout-stepsummary__text{margin:0;width:100%;color:var(--cu-ink);font-size:13px;line-height:1.5}
.checkout-stepsummary__edit{padding:0;border:0;background:transparent;color:#5b6b7f;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.checkout-stepsummary__edit:hover{color:var(--cu-ink)}
@media(max-width:700px){.checkout-stepsummary+.checkout-stepsummary{border-left:0;border-top:1px solid var(--cu-line)}}

@media(max-width:520px){
  /* No celular a trilha vira só os números: três rótulos lado a lado não cabem
     sem cortar palavra, e o rótulo continua no nome acessível do botão. */
  .checkout-stepnav__label{display:none}
  .checkout-stepnav__button{justify-content:center;padding:10px 6px}
  .checkout-stepactions{flex-direction:column-reverse;align-items:stretch}
  .checkout-stepnext{margin-left:0;width:100%;min-height:48px}
  .checkout-stepsummary__text{white-space:normal}
}

/* ── Formas de pagamento como CARTÕES DE RÁDIO (2026-09-22) ────────────────
   A referência aprovada pelo dono mostra as formas como opções de rádio lado a
   lado, com as bandeiras à direita — não como abas. A diferença não é só
   estética: aba sugere "conteúdo que troca", rádio diz "escolha uma", que é
   exatamente a regra desta tela (o benefício e o cartão não se combinam na
   mesma compra). Os elementos continuam sendo <button role="tab"> com
   `aria-selected`, porque é isso que o checkout.js e as suítes de tela leem; o
   que muda é a aparência e a marca de seleção. */
.payment-methods{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;padding:0;background:transparent}
.payment-tab{flex-direction:row;align-items:center;gap:12px;padding:15px 16px;border:1px solid var(--cu-line);border-radius:12px;background:#fff;transition:border-color .12s ease,box-shadow .12s ease}
.payment-tab__dot{position:relative;width:17px;height:17px;flex:none;border:1.5px solid #c3ccd8;border-radius:50%;background:#fff}
.payment-tab__text{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.payment-tab__brands{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}
/* Bandeiras pequenas e com `min-width:0` na coluna de texto: sem isso, três
   selos numa aba estreita empurram "Crédito ou débito" para duas linhas e a
   fileira de formas fica com alturas diferentes. */
.brand-badge{width:28px;height:18px;display:block;border-radius:3px}
.payment-tab__text strong{white-space:nowrap}
.payment-tab__text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payment-tab[aria-selected="true"]{border-color:var(--cu-ink);background:#fff;box-shadow:0 0 0 1px var(--cu-ink) inset}
.payment-tab[aria-selected="true"] .payment-tab__dot{border-color:var(--cu-ink)}
.payment-tab[aria-selected="true"] .payment-tab__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cu-ink)}
.payment-tab:not(.payment-tab--disabled):hover{border-color:#a9b6c6}
.payment-tab--disabled{background:#fbfcfe}

/* O botão de concluir, em pílula com a seta — a marca visual da referência. O
   disco da seta é um <span> vazio desenhado no ::after do próprio botão, para
   não exigir marcação nova (o checkout.js e as suítes leem [data-submit-order]
   pelo texto e pelo estado, e trocar o conteúdo dele quebraria as duas coisas). */
.checkout-submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:auto;min-width:min(100%,290px);border-radius:999px;padding:17px 26px;text-transform:none;letter-spacing:.01em;font-size:14px}
.checkout-submit::after{content:"";width:26px;height:26px;flex:none;border-radius:50%;background:#fff no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b2d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")}
/* Em espera o disco sai e entra o giro que já existia — nunca os dois juntos. */
.checkout-submit:disabled::after{display:none}
.checkout-terms-card{display:flex;flex-direction:column;align-items:flex-start}
.checkout-submit-note{text-align:left}
@media(max-width:520px){.checkout-submit{width:100%}}

/* ── Entrega em GRADE (2026-09-22, pedido do dono) ─────────────────────────
   "a parte de entrega ou retirada tá muito extenso para baixo, gerando muito
   scroll, deixe em grids". Duas mudanças, e as duas cortam linha:

   1. as duas opções (entrega / retirada) passam a ficar LADO A LADO. Elas são
      duas e curtas — empilhadas gastavam duas linhas para uma escolha binária;
   2. o endereço passa a uma grade de 12 colunas, com `span` por campo. Eram
      SEIS linhas (CEP sozinho, logradouro sozinho, estado sozinho); viram TRÊS,
      com cada campo na largura que o conteúdo pede.

   No celular tudo volta a uma coluna: largura proporcional em tela estreita
   produz campo de dois centímetros, que é pior do que rolar. */
.delivery-options{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.checkout-address{grid-template-columns:repeat(12,1fr);align-items:start}
.checkout-address .checkout-field--span2{grid-column:span 2}
.checkout-address .checkout-field--span3{grid-column:span 3}
.checkout-address .checkout-field--span4{grid-column:span 4}
.checkout-address .checkout-field--span6{grid-column:span 6}
.checkout-address .checkout-field--span8{grid-column:span 8}
.checkout-address .checkout-field--span9{grid-column:span 9}
.checkout-address .checkout-field.full{grid-column:1/-1}
/* A linha de status do CEP ocupava altura mesmo vazia, abrindo um buraco entre
   o CEP e o logradouro — justamente o tipo de espaço morto que o pedido do dono
   aponta. Vazia, ela some; com texto, continua ocupando a linha inteira. */
.cep-status:empty{display:none}
/* O DESMONTE DA GRADE É EM DOIS ESTÁGIOS, e nenhum deles volta a empilhar cedo.
   O que aperta primeiro não é a largura da tela: é o campo NÚMERO, que tem 2 de
   12 colunas e fica estreito demais para "1234" muito antes de os outros
   incomodarem. Então, até 820px, a grade cai para SEIS colunas e todo campo ocupa
   metade da linha — dois por linha, nenhum espremido. Só abaixo de 560px é que
   tudo vira uma coluna, porque aí não há largura para dois campos legíveis.
   Colapsar para uma coluna já aos 700px era o que fazia o endereço voltar a
   empilhar num monitor comum. */
@media(max-width:820px){
  .checkout-address{grid-template-columns:repeat(6,1fr)}
  .checkout-address .checkout-field--span2,
  .checkout-address .checkout-field--span3,
  .checkout-address .checkout-field--span4{grid-column:span 3}
  .checkout-address .checkout-field--span6,
  .checkout-address .checkout-field--span8,
  .checkout-address .checkout-field--span9{grid-column:span 3}
}
@media(max-width:560px){
  .checkout-address{grid-template-columns:1fr}
  .checkout-address [class*="checkout-field--span"]{grid-column:auto}
}

/* ── A linha de estado do CEP (2026-09-22) ─────────────────────────────────
   Ela já tinha os quatro estados (buscando / encontrado / erro / dica), mas
   aparecia como um texto miúdo solto — e, na grade de 12 colunas, espremido
   numa coluna de dois centímetros, quebrado em quatro linhas ao lado do campo
   Número. A causa raiz era o JS reescrever `className` e apagar a classe de
   largura (corrigido em cep-address.js); isto aqui é a outra metade: dar ao
   estado a forma de um aviso, com ícone, em vez de texto perdido.

   A largura de linha inteira é ancorada em `[data-cep-status]`, e não na classe
   `full`, justamente porque classe é o que se perde quando alguém reescreve
   `className` — o atributo sobrevive. */
.checkout-address [data-cep-status]{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-height:0;margin:-6px 0 2px;padding:10px 13px;border-radius:9px;border:1px solid transparent;font-size:12.5px;line-height:1.45}
.checkout-address [data-cep-status]:empty{display:none}
/* O ÍCONE É DESENHADO COM BORDA, não com imagem de fundo nem com glifo.
   As duas alternativas falharam nesta tela: o data-URI dentro do `background`
   composto não apareceu, e "✓" (U+2713) não existe na DM Sans, que é a fonte do
   site — nos dois casos sobrou um disco vazio, e um ícone que some deixa a linha
   parecendo o texto solto que este bloco veio consertar. Borda sempre desenha.
   `::before` é o disco; `::after` é o traço por cima dele. */
.checkout-address [data-cep-status]{position:relative}
.checkout-address [data-cep-status]::before{content:"";width:17px;height:17px;flex:none;border-radius:50%}
/* O traço fica sobre o disco: `left` é o padding da linha, `top:50%` centra na
   vertical, e cada estado acerta o resto com `margin`. O disco tem 17px, então
   um traço de 9px entra com 4px de margem à esquerda. */
.checkout-address [data-cep-status]::after{content:"";position:absolute;left:13px;top:50%;pointer-events:none}
.cep-status--idle::after{left:0}

/* Buscando: o giro, para o cliente ver que ALGO está acontecendo. Com
   `prefers-reduced-motion` o giro para e sobra o disco — o estado continua
   legível pela cor e pelo texto, que é o que importa. */
.cep-status--loading{border-color:#cfe0f5;background:#f4f9ff;color:#1457b8}
.cep-status--loading::before{background:transparent;border:2px solid rgba(20,87,184,.25);border-top-color:#1457b8;animation:checkoutSpin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.cep-status--loading::before{animation:none}}

.cep-status--success{border-color:#bfe6cf;background:#f4fdf7;color:#14733b}
.cep-status--success::before{background:#14733b}
/* O visto: duas bordas de um quadrado invisível, giradas 45°. */
.cep-status--success::after{width:9px;height:5px;margin:-5px 0 0 4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

.cep-status--error{border-color:#f0c9cf;background:#fdf5f6;color:#a20f21}
/* O "!" do erro: uma barra e um ponto, desenhados com borda pelo mesmo motivo. */
.cep-status--error::before{background:#a20f21}
.cep-status--error::after{width:2px;height:6px;margin:-5px 0 0 7.5px;background:#fff;box-shadow:0 8px 0 0 #fff}

/* A dica (ainda digitando) é a mais discreta das quatro: ela orienta, não
   relata um desfecho. Sem moldura e sem ícone colorido. */
.cep-status--idle{border-color:transparent;background:transparent;color:#667386;padding-left:0}
.cep-status--idle::before{background:#aab6c4}
.cep-status--idle::after{width:2px;height:6px;margin:-2px 0 0 7.5px;background:#fff;box-shadow:0 -6px 0 0 #fff}

/* ── O passo do pagamento, mais curto e mais direto (2026-09-22) ───────────
   Pedido do dono: "a parte do pagamento tá bem confusa, vamos deixar mais
   fácil de entender, e tá gerando scroll também; os botões estão estranhos,
   muito grandes e confusos".

   O que estava caro em altura, em ordem: o cartão visual (~230px) empilhado
   ACIMA dos campos, os três campos em duas linhas, a dica da categoria numa
   linha só dela, a caixa de dica azul no rodapé do painel, e o cartão dos
   termos com o mesmo respiro de uma seção inteira. Nada disso some — tudo
   muda de lugar ou de peso. */

/* 1. Cartão ao LADO dos campos. A coluna do cartão é fixa (o cartão tem
      proporção de cartão de crédito e não deve esticar), e os campos ficam com
      o resto. Abaixo de 820px volta a empilhar. */
.payment-card-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.payment-card-layout .card-visual{max-width:100%;margin:0}
.payment-card-fields{align-content:start}
@media(max-width:820px){.payment-card-layout{grid-template-columns:1fr}.payment-card-layout .card-visual{max-width:300px}}

/* 2. A dica da categoria na mesma linha dos chips. */
.mp-subtabs--labelled{align-items:center}
.mp-subtabs--labelled .checkout-hint-inline{margin:0 0 0 4px}

/* 3. O painel e o bloco da categoria perdem uma moldura. Eram três caixas
      aninhadas (painel > fieldset > campos), e caixa dentro de caixa é o que
      fazia a tela parecer confusa mesmo tendo pouca coisa. */
.payment-panel{padding:20px}
.payment-category{margin:0;padding:0;border:0}

/* 4. Os termos e o botão deixam de ser uma seção com respiro de seção. */
.checkout-terms-card{margin-top:18px;padding:18px 20px}
.checkout-terms{margin-top:0}

/* 5. O BOTÃO: era largo demais e a pílula gigante disputava com o resto.
      Agora tem a altura de um botão e a largura do próprio texto, alinhado à
      direita como o "Continuar" dos outros passos — a mesma gramática nos três
      passos, em vez de um controle diferente no último. */
.checkout-submit{min-width:0;width:auto;align-self:flex-end;padding:14px 22px;font-size:13px;gap:10px}
.checkout-submit::after{width:22px;height:22px}
.checkout-submit-note{align-self:flex-end;max-width:520px;text-align:right}
@media(max-width:560px){
  .checkout-submit{width:100%;align-self:stretch;justify-content:center}
  .checkout-submit-note{text-align:left;align-self:stretch}
}

/* ---------------------------------------------------------------------------
   RESUMO EM CORES (opção D, aprovada pelo dono em 2026-09-22 — ADR-021 §7.8).

   Carrinho misto pago pelo benefício: em vez do parágrafo amarelo explicando a
   regra, o cliente VÊ o efeito da escolha. A chave de categoria ganhou as fotos
   dos produtos, e o resumo marca cada item ("Benefício paga" / "Próxima
   compra") e separa a conta. Nada aqui existe no carrinho de uma categoria só
   nem com cartão ou Pix — o JS nem monta os elementos.
   --------------------------------------------------------------------------- */
.checkout-mixed-intro{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--cu-soft);border:1px solid var(--cu-line);color:var(--cu-ink);font-size:13px;line-height:1.55}

.checkout-category-choice{margin-bottom:18px}
.checkout-category-choice__title{display:block;font-size:13px;margin-bottom:10px;color:var(--cu-ink)}
.category-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--cu-line);border-radius:12px;background:var(--cu-soft);max-width:520px}
.category-seg__side{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--cu-muted);font:inherit;text-align:left;cursor:pointer;transition:background .15s,box-shadow .15s,color .15s}
.category-seg__side:hover{color:var(--cu-ink)}
.category-seg__side[aria-selected="true"]{background:#fff;color:var(--cu-ink);box-shadow:0 1px 4px rgba(20,32,58,.16)}
.category-seg__side:focus-visible{outline:3px solid var(--cu-blue);outline-offset:2px}
.category-seg__thumbs{display:flex;flex:none;padding-right:6px}
.category-seg__thumbs img{width:28px;height:28px;margin-right:-8px;border-radius:50%;border:2px solid #fff;object-fit:cover;background:#eef2f6;box-shadow:0 1px 2px rgba(20,32,58,.12)}
.category-seg__side[aria-selected="false"] .category-seg__thumbs img{filter:grayscale(1);opacity:.7}
.category-seg__text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.category-seg__text strong{font-size:13px}
.category-seg__text span{font-size:12px;font-variant-numeric:tabular-nums}
.checkout-category-choice [data-fica-no-carrinho]{margin:10px 0 0}
@media(max-width:420px){.category-seg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.category-seg__side{transition:none}}

.checkout-item-tag{display:block;width:fit-content;margin-top:5px;padding:2px 7px;border-radius:4px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.checkout-item-tag--paid{background:#e7f5ee;color:var(--cu-success)}
.checkout-item-tag--kept{background:#eef1f5;color:#586476}
.checkout-item--kept{opacity:.6}
.checkout-item--kept > b{text-decoration:line-through;text-decoration-color:#98a3b3}

.checkout-split{display:grid;gap:0;margin-top:2px}
.checkout-split__bar{display:flex;height:8px;margin-bottom:10px;border-radius:99px;background:#dde3eb;overflow:hidden}
.checkout-split__bar i{display:block;height:100%;background:var(--cu-blue)}
.checkout-split__row{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;font-size:12px}
.checkout-split__row strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.checkout-split__row--paid{border-radius:8px 8px 0 0;background:#eef5ff;color:#0d4b91;font-weight:700}
.checkout-split__row--kept{border-radius:0 0 8px 8px;background:#f5f7f9;color:#586476}

/* ---------------------------------------------------------------------------
   PIX: O BOTÃO NO LUGAR DO QR (opção B, escolhida pelo dono em 2026-09-22 —
   ADR-016 §15).

   Enquanto o Pix não foi gerado ([data-pix-ready] no [data-paybox]), o painel do
   Pix e o cartão dos termos viram UMA caixa em duas colunas: à esquerda o quadro
   onde o QR vai nascer (o lugar do cartão nas outras formas), à direita o valor,
   o aceite dos termos e o botão. Fora desse estado nada disto se aplica e os dois
   blocos voltam a ser o que eram — inclusive com o QR já gerado.
   --------------------------------------------------------------------------- */
.pix-panel__intro{display:grid;gap:10px;justify-items:start}
.pix-placeholder{display:grid;place-items:center;align-content:center;gap:8px;width:100%;max-width:220px;aspect-ratio:1;border:2px dashed #b7c6d6;border-radius:12px;background:#fff;color:#687486;font-size:12.5px;line-height:1.4;text-align:center}
.pix-placeholder svg{width:44px;height:44px;color:#1f8f84}
.pix-panel__intro .checkout-hint-inline{margin:0;max-width:220px}
.checkout-pix-amount{display:none}

.checkout-paybox[data-pix-ready]{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start;margin-top:20px;padding:20px;border:1px solid var(--cu-line);border-radius:14px;background:#fbfcfe}
.checkout-paybox[data-pix-ready] > .pix-panel{margin:0;padding:0;border:0;background:none}
.checkout-paybox[data-pix-ready] > .checkout-terms-card{margin:0;padding:0;border:0;background:none;align-items:stretch;gap:0}
.checkout-paybox[data-pix-ready] .checkout-pix-amount{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--cu-line);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cu-ink)}
.checkout-paybox[data-pix-ready] .checkout-pix-amount strong{font:600 24px/1 Oswald,Arial,sans-serif;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.checkout-paybox[data-pix-ready] .checkout-submit{width:100%;align-self:stretch;justify-content:center;background:#1f8f84}
.checkout-paybox[data-pix-ready] .checkout-submit-note{align-self:stretch;text-align:left;max-width:none}
@media(max-width:820px){
  .checkout-paybox[data-pix-ready]{grid-template-columns:1fr;gap:18px}
  .checkout-paybox[data-pix-ready] .pix-panel__intro{justify-items:center}
  .checkout-paybox[data-pix-ready] .pix-placeholder{max-width:170px}
  .checkout-paybox[data-pix-ready] .pix-panel__intro .checkout-hint-inline{text-align:center}
}

/* Conta obrigatória (Plano 3, D11): o e-mail do cliente logado é o da CONTA e não se edita.
   A pista é visual (fundo cinza, cursor comum) e a dica fica colada ao campo. Só a COR do
   fundo muda: o ícone de "válido" (background-image) continua. */
[data-checkout-form] input[name="email"][readonly]{background-color:#f2f5f8;color:#4a5568;cursor:default}
[data-checkout-form] input[name="email"][readonly]:focus{border-color:#dbe3ec;box-shadow:none}
.checkout-field-note{display:block;margin-top:-2px;color:var(--cu-muted);font-size:12px;line-height:1.5}

/* PÓS-COMPRA (opção A, 2026-09-25): a tela de sucesso diz o que foi pago e o que ficou no
   carrinho. `.order-success` centraliza o texto; os dois blocos novos voltam a alinhar à
   esquerda, porque são listas lidas linha a linha. As fotos seguem a chave de categoria
   (`.category-seg__thumbs`): redondas e sobrepostas, com a bolinha "+N" do que não coube. */
.paid-split{max-width:460px;margin:18px auto 0;border:1px solid var(--cu-line);border-radius:12px;overflow:hidden;text-align:left}
.paid-split__row{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:12px 14px}
.paid-split__row+.paid-split__row{border-top:1px dashed #d5dde8}
.paid-split__mark{font-weight:700;color:#8a96a8}
.paid-split__row--paid .paid-split__mark{color:var(--cu-success)}
.paid-split__row b{display:block;font-size:13px}
.paid-split__row small{display:block;color:var(--cu-muted);font-size:12px}
.paid-split__row strong{font-size:13px;color:var(--cu-muted);font-variant-numeric:tabular-nums}
.leftover-card{display:grid;gap:12px;max-width:460px;margin:14px auto 0;padding:16px;border:1.5px solid var(--cu-blue);border-radius:14px;background:linear-gradient(180deg,#f3f8ff,#fff 70%);text-align:left}
.leftover-card__title{margin:0;font:500 18px/1.15 Oswald,sans-serif;text-transform:uppercase}
.leftover-card__sub{margin:-6px 0 0;color:var(--cu-muted);font-size:13px;line-height:1.5}
.leftover-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.leftover-card__photos{display:flex;flex:none;align-items:center;padding-right:8px}
.leftover-card__photos img,.leftover-more{flex:none;box-sizing:border-box;width:44px;min-width:44px;height:44px;aspect-ratio:1/1;margin-right:-10px;border-radius:50%;border:2px solid #fff;background:#eef2f6;box-shadow:0 1px 3px rgba(20,32,58,.14)}
.leftover-card__photos img{max-width:none;object-fit:cover}
.leftover-more{display:grid;place-items:center;background:#dfeafd;color:var(--cu-blue);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.leftover-card__total{display:flex;flex-direction:column;align-items:flex-end;color:var(--cu-muted);font-size:12px}
.leftover-card__total strong{color:var(--cu-ink);font-size:17px;font-variant-numeric:tabular-nums}
.leftover-card .leftover-card__cta{display:block;margin-top:0;background:var(--cu-blue);text-align:center}
.leftover-card__fine{margin:0;color:#7b8799;font-size:11.5px;line-height:1.5}
/* O h1 geral (styles.css) tem max-width:580px e margin:auto; `.checkout-card h1{margin:0}` apaga o auto e o título encosta à esquerda no computador. */
.order-success h1{margin-inline:auto;text-wrap:balance}
.order-success .btn--quiet{background:transparent;color:var(--cu-ink);border:1px solid #cfd8e3}