@charset "UTF-8";
/* =====================================================================
   Tema Universo Mercosul para Tray Commerce
   Marca: Binário Elo · Azul Universo #3340FF · Mercosul Infinita
   Ordem: fontes, tokens, base, componentes, cabeçalho, home, vitrines,
   listagem, produto, Clube, Assistência, rodapé, carrinho lateral,
   blocos gerados pela plataforma, responsivo.
   ===================================================================== */

/* ---------- fontes (WOFF2 com TTF de reserva) ---------- */
@font-face { font-family: 'Mercosul Infinita'; src: url('fonts/MercosulInfinita-Regular.woff2') format('woff2'), url('fonts/MercosulInfinita-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mercosul Infinita'; src: url('fonts/MercosulInfinita-Italic.woff2') format('woff2'), url('fonts/MercosulInfinita-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mercosul Infinita'; src: url('fonts/MercosulInfinita-SemiBold.woff2') format('woff2'), url('fonts/MercosulInfinita-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mercosul Infinita'; src: url('fonts/MercosulInfinita-Bold.woff2') format('woff2'), url('fonts/MercosulInfinita-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mercosul Infinita'; src: url('fonts/MercosulInfinita-Light.woff2') format('woff2'), url('fonts/MercosulInfinita-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }

/* ---------- tokens (as cores principais podem ser trocadas no editor do tema) ---------- */
:root {
  --azul: #3340FF; --azul-hover: #2A36E6; --noite: #0B1233; --noite-2: #141C45; --ceu: #8F96FF; --nevoa: #EBECFF;
  --grafite: #3A4258; --aco: #8A93A8; --inox: #DDE1EA; --gelo: #F4F6FB; --branco: #FFFFFF;
  --sucesso: #12A15A; --sucesso-bg: #E5F6EC; --atencao: #F5A524; --atencao-bg: #FEF4E2; --erro: #E5484D; --erro-bg: #FDEBEC;
  --ink: var(--noite); --ink-2: #3A4258; --ink-3: #69718A; --line: #E3E6EF; --line-2: #EEF0F6; --bg: #F4F6FB; --card: #FFFFFF;
  /* fonte do texto: Montserrat por padrão (o layout carrega do Google Fonts e o variaveis-css troca);
     a Mercosul Infinita da marca fica disponível no editor */
  --f: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-marca: 'Mercosul Infinita', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --r-xs: 8px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --pill: 999px;
  --sh-1: 0 0 #0000;
  --sh-2: 0 0 #0000;
  --sh-3: 0 0 0 1px var(--line);
  --sh-azul: 0 0 #0000;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --hdr-h: 0px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr-h); overflow-x: hidden; overflow-x: clip; } /* nada rola para o lado, nem no celular */
body { margin: 0; font-family: var(--f); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; max-width: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
html body :is(h1, h2, h3, h4, h5, h6, p) { margin-top: 0; margin-bottom: 0; } /* ganha das margens do Bootstrap da loja; as classes do tema continuam valendo */
:focus-visible { outline: 2.5px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }
.tray-hide { display: none !important; }
[hidden] { display: none !important; }

.wrap { max-width: 1496px; margin: 0 auto; padding: 0 28px; } /* 1440 px de conteúdo + 28 px de cada lado */
.page { max-width: 1496px; margin: 0 auto; padding: 22px 28px 72px; }
.main { min-height: 60vh; outline: none; display: block; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 120; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { top: 10px; }
/* aviso de loja em implantação (bloco snippets/infobox_implantation da Tray): faixa fixa embaixo, que fecha */
.aviso-loja { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 12px 56px 12px 20px; background: var(--noite); color: #fff; font-size: 14px; font-weight: 550; line-height: 1.4; text-align: center; }
.aviso-loja:has(> :not(.aviso-loja-x)) { display: block; }
.aviso-loja .infobox, .aviso-loja .danger { margin: 0; padding: 0; border: 0; background: none !important; color: inherit !important; }
.aviso-loja a { color: var(--ceu); text-decoration: underline; }
.aviso-loja-x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; cursor: pointer; }
.aviso-loja-x:hover { background: rgba(255, 255, 255, .14); }
.aviso-loja-check:checked + .aviso-loja { display: none !important; }
.preview-bar { background: var(--atencao-bg); color: #9A5B00; text-align: center; font-size: 13px; padding: 8px 16px; }
.preview-bar a { font-weight: 600; text-decoration: underline; }

/* ---------- componentes ---------- */
.btn { --bh: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--bh); padding: 0 22px; border-radius: var(--pill);
  font-weight: 550; font-size: 15px; letter-spacing: .005em; white-space: nowrap; cursor: pointer; transition: background .18s var(--ease), color .18s, box-shadow .18s, transform .12s;
  /* a Tray carrega o Bootstrap 3: zera o que ele define em .btn e o tema não */
  border: 0; line-height: 1; vertical-align: middle; background-image: none; text-decoration: none; font-family: var(--f); outline-offset: 2px; }
.btn:focus, .btn:active:focus { outline: 0; }
.btn:focus-visible { outline: 2.5px solid var(--azul); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--azul); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--azul-hover); box-shadow: var(--sh-azul); }
.btn-dark { background: var(--noite); color: #fff; }
.btn-dark:hover { background: var(--noite-2); }
.btn-white { background: #fff; color: var(--azul); }
.btn-white:hover { background: var(--nevoa); }
.btn-outline { background: #fff; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--azul); }
.btn-outline:hover { background: var(--nevoa); }
.btn-ghost { color: var(--azul); padding: 0 12px; }
.btn-ghost:hover { background: var(--nevoa); }
.btn-line-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn-line-white:hover { background: rgba(255, 255, 255, .12); }
.btn-sm { --bh: 36px; padding: 0 16px; font-size: 14px; }
.btn-lg { --bh: 54px; padding: 0 28px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--azul); font-weight: 550; }
.link:hover { text-decoration: underline; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; flex: none; }
.round-btn:hover { background: var(--nevoa); box-shadow: inset 0 0 0 1px var(--ceu); }
.kicker { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 550; letter-spacing: .02em; }
.kicker-dark { background: var(--nevoa); color: var(--azul); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--pill); font-size: 12px; font-weight: 550; line-height: 1; white-space: nowrap; min-width: 0; vertical-align: middle; }
.badge-azul { background: var(--azul); color: #fff; }
.badge-nevoa { background: var(--nevoa); color: var(--azul); }
.badge-noite { background: var(--noite); color: #fff; }
.badge-ok { background: var(--sucesso-bg); color: #0B7A43; }
.badge-line { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.input { height: 46px; padding: 0 14px; border-radius: var(--r); border: 1.5px solid var(--line); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; }
.input:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(51, 64, 255, .12); }
.hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }

/* cashback: o planeta em órbita */
.cb { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); font-weight: 550; }
.orbit-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex: none; display: inline-block; }
.orbit-dot::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; right: -2px; top: -2px; box-shadow: 0 0 0 2px var(--orbit-halo, #fff); }
.cb-pct { font-size: 11px; padding: 2px 6px; border-radius: var(--pill); background: var(--nevoa); }
.orbit-spin { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--nevoa); animation: spin 1.1s linear infinite; }
.orbit-spin::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--azul); top: -3px; left: calc(50% - 5.5px); }
@keyframes spin { to { transform: rotate(360deg); } }

.stars { display: inline-flex; gap: 1px; color: #F5A524; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.price-old { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.ok { color: var(--sucesso); }

.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--pill); background: var(--noite); color: #fff; font-size: 14px; font-weight: 500; box-shadow: var(--sh-3); animation: toast-in .35s var(--ease); pointer-events: auto; }
.toast .ico { color: var(--ceu); }
.toast.err .ico { color: #FF9EA1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------- cabeçalho (layout aprovado em 19/10/2026) ---------- */
/* faixa de ofertas */
.promo { background: #EEF0F5; color: var(--noite); }
.promo-track { position: relative; min-height: 44px; overflow: hidden; }
.promo-slide { position: absolute; top: 0; bottom: 0; left: 28px; right: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.promo-slide.on, .promo:not(.is-ready) .promo-slide:first-child { opacity: 1; visibility: visible; transform: none; }
.promo-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 18px; border-radius: var(--pill); background: var(--azul); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex: none; transition: background .15s; }
.promo-pill:hover { background: var(--azul-hover); }
.promo-text { font-size: 13.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.promo-text b { color: var(--azul); }
/* barra de avisos */
.topbar { background: var(--noite); color: #fff; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.topbar .wrap { display: flex; align-items: center; gap: 22px; min-height: 40px; }
.tb-msg { font-weight: 400; }
.tb-msg b { font-weight: 600; }
.topbar nav { margin-left: auto; display: flex; gap: 26px; }
.topbar nav a { opacity: .92; white-space: nowrap; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
/* topo azul: o azul desce até o meio da barra de categorias */
.hdr { position: relative; z-index: 40; background: linear-gradient(var(--azul) 0 calc(100% - 28px), transparent 0); }
.hdr-in { display: flex; align-items: center; gap: 16px; padding-top: 26px; padding-bottom: 22px; }
.hdr-menu { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; color: #fff; flex: none; }
.hdr-menu:hover { background: rgba(255, 255, 255, .14); }
.logo { width: 196px; flex: none; margin-right: 6px; }
.logo img { width: 100%; height: auto; }
.hdr-circle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; flex: none; --orbit-halo: var(--azul); }
.hdr-circle .orbit-dot { color: #fff; }
.hdr-circle-line { width: 34px; height: 34px; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.hdr-txt { display: grid; line-height: 1.15; white-space: nowrap; }
.hdr-txt small { font-size: 11px; font-weight: 500; }
.hdr-txt b { font-size: 14px; font-weight: 600; }
/* CEP */
.hdr-cep { position: relative; flex: none; }
.hdr-cep-btn { display: flex; align-items: center; gap: 8px; color: #fff; text-align: left; padding: 6px 8px 6px 4px; border-radius: var(--r); }
.hdr-cep-btn:hover { background: rgba(255, 255, 255, .1); }
.hdr-cep-btn .hdr-txt b { font-size: 12.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hdr-cep-btn .hdr-txt small { font-size: 10.5px; opacity: .85; }
.cep-pop { position: absolute; left: 0; top: calc(100% + 10px); z-index: 70; width: 300px; padding: 18px; border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--sh-3); }
.cep-pop label { font-weight: 600; font-size: 14px; }
.cep-row { display: flex; gap: 8px; margin-top: 8px; }
.cep-row .input { height: 42px; }
.cep-hint { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.cep-hint.err { color: var(--erro); }
/* busca */
.search { position: relative; flex: 1; display: flex; align-items: center; height: 54px; min-width: 200px; border-radius: var(--pill); background: #fff; transition: box-shadow .15s; }
.search:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.search input[type="search"] { flex: 1; height: 100%; border: 0; background: transparent; outline: none; padding: 0 12px 0 26px; font-size: 15px; min-width: 0; color: var(--ink); -webkit-appearance: none; appearance: none; }
.search input[type="search"]::placeholder { color: #9AA1B5; }
.search input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-btn { width: 42px; height: 42px; margin-right: 6px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; flex: none; }
.search-btn:hover { background: var(--azul-hover); }
/* sugestões da busca: o script da Tray (autocomplete) troca a caixa vazia [data-container="suggestion"] pela
   resposta dele, um div.suggestion com .suggestion-words (termos) e .suggestion-products (produtos), títulos em
   <strong class="suggestion-title">. Por isso o estilo vale para qualquer [data-container="suggestion"] da busca. */
.search [data-container="suggestion"] { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 10px) !important; bottom: auto !important; z-index: 70; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: min(72vh, 560px) !important; overflow: auto !important; margin: 0 !important; padding: 8px !important; border: 0 !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--sh-3) !important; color: var(--ink); text-align: left; font: 400 14px/1.4 var(--f); scrollbar-width: thin; scrollbar-color: var(--ceu) transparent; }
.search [data-container="suggestion"]:empty, .search [data-container="suggestion"].is-hidden, .search [data-container="suggestion"]:not(:has(a, span, img)) { display: none !important; }
.search [data-container="suggestion"] .idp, .search [data-container="suggestion"] .cl { display: none !important; }
.search [data-container="suggestion"] .suggestion-title { display: block !important; flex-basis: 100%; width: 100%; margin: 0 !important; padding: 8px 4px 4px !important; border: 0 !important; background: none !important; color: var(--azul) !important; font: 600 12px/1.2 var(--f) !important; letter-spacing: .06em; text-transform: uppercase; text-indent: 0 !important; }
.search [data-container="suggestion"] .suggestion-words { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; width: auto !important; margin: 0 !important; padding: 4px 8px 14px !important; border: 0 !important; background: none !important; font-size: 13.5px !important; }
.search [data-container="suggestion"] .suggestion-words span { display: inline-flex !important; align-items: center; height: 34px; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: var(--pill); background: var(--gelo) !important; color: var(--ink-2) !important; font-size: 13.5px !important; line-height: 1 !important; cursor: pointer; transition: background .15s, color .15s; }
.search [data-container="suggestion"] .suggestion-words span:hover, .search [data-container="suggestion"] .suggestion-words span.slcted { background: var(--nevoa) !important; color: var(--azul) !important; }
.search [data-container="suggestion"] .suggestion-words span strong, .search [data-container="suggestion"] .titlep strong { background: none !important; color: inherit !important; padding: 0 !important; font-weight: 600; }
.search [data-container="suggestion"] .suggestion-words + .suggestion-products { border-top: 1px solid var(--line-2) !important; padding-top: 6px !important; }
.search [data-container="suggestion"] .suggestion-products { width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.search [data-container="suggestion"] .suggestion-products .suggestion-title { padding-left: 12px !important; }
.search [data-container="suggestion"] .suggestion-product { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 14px !important; }
.search [data-container="suggestion"] .suggestion-product a { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 8px 12px !important; border: 0 !important; border-radius: 14px; background: none !important; color: var(--ink) !important; font-size: 14px; text-decoration: none !important; }
.search [data-container="suggestion"] .suggestion-product a:hover, .search [data-container="suggestion"] .suggestion-product a:focus-visible { background: var(--gelo) !important; }
.search [data-container="suggestion"] .suggestion-img { flex: none; float: none !important; width: 56px !important; height: 56px !important; margin: 0 !important; display: grid; place-items: center; border-radius: 12px; background: var(--gelo); overflow: hidden; }
.search [data-container="suggestion"] .suggestion-img img { width: 88% !important; height: 88% !important; object-fit: contain; mix-blend-mode: multiply; }
.search [data-container="suggestion"] .suggestion-desc { min-width: 0; display: grid; gap: 2px; }
.search [data-container="suggestion"] .titlep { font: 550 14px/1.3 var(--f) !important; color: var(--ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search [data-container="suggestion"] .suggestion-product a:hover .titlep { color: var(--azul) !important; }
.search [data-container="suggestion"] .price, .search [data-container="suggestion"] .preco { font-size: 13px; font-weight: 600; color: var(--noite); }
/* pílula branca: cashback, conta e carrinho */
.hdr-pill { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 7px; border-radius: var(--pill); background: #fff; color: var(--noite); flex: none; }
.hdr-item { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 1px; border-radius: var(--pill); transition: background .15s; }
.hdr-item:hover { background: var(--gelo); }
.hdr-cb { margin-right: 18px; }
.hdr-cb .hdr-txt b { color: var(--azul); }
.hdr-acc .hdr-txt small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hdr-cart { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--noite); color: #fff; flex: none; transition: background .15s; }
.hdr-cart:hover { background: var(--noite-2); }
.cart-n { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--pill); background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2.5px #fff; }
.cart-n:empty, .cart-n.is-zero { display: none; }
/* barra branca de categorias */
.cats-bar { position: relative; display: flex; align-items: center; min-height: 56px; padding: 6px 7px 6px 10px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.cn-link { flex: 1 1 0; display: flex; align-items: center; min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 550; line-height: 1.08; color: var(--noite); text-wrap: balance; position: relative; border-radius: 12px; }
.cn-lista > .cn-item > .cn-link::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
.cn-link:hover, .cn-link.on, .cn-link[aria-expanded="true"] { color: var(--azul); }
/* as categorias principais (até 5), com o nome numa linha só: a que não cabe na largura desce para a 2ª linha, que
   fica escondida (os painéis abrem presos à barra, fora deste corte) */
.cn-lista { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; height: 40px; overflow: hidden; }
.cn-item { flex: 1 0 auto; display: flex; }
.cn-item > .cn-link { flex: 1 1 auto; }
.cn-link .cat-ico { flex: none; margin-right: 8px; color: var(--azul); }
.cn-link > span, .cn-all-btn > span { white-space: nowrap; }
.cn-all { flex: none; display: flex; }
.cn-all > .cn-all-btn { flex: none; width: auto; }
.cn-all-btn { width: 100%; display: flex; align-items: center; text-align: left; font: inherit; font-size: 14px; font-weight: 550; line-height: 1.08; cursor: pointer; }
.cn-club { flex: none; display: grid; place-items: center; height: 42px; min-width: 176px; margin-left: 10px; padding: 0 22px; border-radius: var(--pill); background: var(--noite); color: #fff; font-size: 14.5px; font-weight: 550; transition: background .15s; }
.cn-club:hover, .cn-club.on { background: var(--noite-2); }
.cn-club img { display: block; width: 130px; height: auto; }
/* todas as categorias */
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 65; padding: 24px 26px 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-3); }
.mega-cats { display: flex; flex-direction: column; min-width: 0; }
.mega-cats .mega-foot { margin-top: auto; }
.mega-cats:only-child { grid-column: 1 / -1; } /* sem produto em destaque, as categorias ocupam a largura toda */
.mega-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 24px; }
.mega-col { display: grid; gap: 6px; align-content: start; }
.mega-col a { font-size: 14px; color: var(--ink-2); }
.mega-col a:hover { color: var(--azul); }
.mega-col .mega-cat { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--noite); font-size: 15px; margin-bottom: 2px; }
.mega-col .mega-cat .cat-ico { flex: none; color: var(--azul); }
.mega-foot { display: flex; gap: 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 550; }
.mega-foot a { color: var(--azul); }
.mega-foot a:hover { text-decoration: underline; }
.mega { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* ponte invisível: o mouse passa da barra para o menu sem fechar */
.mega-dest { display: grid; gap: 10px; align-content: start; padding-left: 24px; border-left: 1px solid var(--line-2); }
.mega-dest-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.mega-slides { position: relative; }
.mega-prod { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.mega-prod.on { position: relative; opacity: 1; visibility: visible; }
.mega-prod-img { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: var(--r); background: var(--gelo); overflow: hidden; }
.mega-prod-img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.mega-prod-name { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-prod:hover .mega-prod-name { color: var(--azul); }
.mega-prod-price { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; }
.mega-prod .cb { font-size: 13px; margin-top: 2px; }
.mega-prod-cta { align-self: flex-start; margin-top: 12px; }
.mega-dots { display: flex; gap: 6px; }
.mega-dots button { width: 8px; height: 8px; border-radius: var(--pill); background: var(--line); transition: width .2s, background .2s; }
.mega-dots button[aria-current="true"] { width: 22px; background: var(--azul); }
/* mega menu de cada categoria: subcategorias e destaque daquela categoria, alinhado embaixo dela (o theme.js posiciona) */
.mega-cat-pan { right: auto; width: 660px; max-width: 100%; grid-template-columns: minmax(0, 1fr) 240px; padding: 20px 22px 16px; }
.mega-cat-pan.sem-destaque { width: 400px; grid-template-columns: minmax(0, 1fr); }
.mcp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.mcp-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); }
.mcp-head b { display: block; font-size: 17px; line-height: 1.2; color: var(--noite); }
.mcp-head small { font-size: 13px; font-weight: 550; color: var(--azul); }
.mcp-head:hover b { color: var(--azul); }
.mcp-subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-bottom: 14px; }
.mega-cat-pan.sem-destaque .mcp-subs { grid-template-columns: minmax(0, 1fr); }
.mcp-subs a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.mcp-subs a .ico { flex: none; color: var(--ceu); }
.mcp-subs a:hover { background: var(--nevoa); color: var(--azul); }
.mcp-subs a:hover .ico { color: var(--azul); }
.mega-cat-pan .mega-foot { margin-top: auto; }
.mega-cat-pan .mega-dest { padding-left: 20px; }
@media (max-width: 1280px) { .cn-link .cat-ico { display: none; } }

/* menu do celular */
.mm-wrap { position: fixed; inset: 0; z-index: 95; }
.mm-bg { position: absolute; inset: 0; background: rgba(11, 18, 51, .4); opacity: 0; transition: opacity .25s; }
.mm { position: absolute; top: 0; left: 0; bottom: 0; width: min(360px, 88%); background: #fff; display: grid; grid-template-rows: auto 1fr; transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--sh-3); }
.mm-wrap.open .mm-bg { opacity: 1; }
.mm-wrap.open .mm { transform: none; }
.mm-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.mm-body { overflow: auto; padding: 12px 12px 28px; display: grid; gap: 2px; align-content: start; }
.mm-club { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 8px; border-radius: var(--r); background: var(--noite); color: #fff; --orbit-halo: var(--noite); }
.mm-club .orbit-dot { color: var(--ceu); }
.mm-club b { display: block; }
.mm-club small { color: #C9CDEA; }
.mm-link, .mm-group summary { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r); font-weight: 550; color: var(--ink-2); cursor: pointer; list-style: none; }
.mm-group summary::-webkit-details-marker { display: none; }
.mm-group summary .ico { margin-left: auto; color: var(--aco); transition: transform .2s; }
.mm-group[open] summary .ico { transform: rotate(180deg); }
.mm-link:hover, .mm-group summary:hover { background: var(--gelo); color: var(--azul); }
.mm-link.hot { color: var(--azul); }
.mm-group > a { display: block; padding: 9px 12px 9px 24px; font-size: 14px; color: var(--ink-3); border-radius: var(--r); }
.mm-group > a:hover { background: var(--gelo); color: var(--azul); }
.mm-body hr { border: 0; border-top: 1px solid var(--line-2); margin: 10px 4px; }

/* ---------- cabeçalhos de seção ---------- */
:where(section, .banner-wide).block { margin-top: 56px; } /* só as seções do tema: a Tray usa "block" em spans e labels das páginas dela */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.sec-head h2 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.sec-head p { color: var(--ink-3); margin-top: 4px; }
.row-nav { display: flex; gap: 8px; }
.countdown { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--noite); color: #fff; font-size: 14px; white-space: nowrap; }
.countdown .ico { color: var(--ceu); }
.countdown b { font-variant-numeric: tabular-nums; letter-spacing: .04em; min-width: 66px; }

/* ---------- destaque da home ---------- */
.hero { position: relative; height: 420px; border-radius: var(--r-xl); overflow: hidden; background: var(--azul); color: #fff; isolation: isolate; }
.hero-mark { position: absolute; right: -60px; bottom: -110px; width: 640px; color: #fff; opacity: .07; z-index: -1; pointer-events: none; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 0 56px; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.slide.on, .hero:not(.is-ready) .slide:first-of-type { opacity: 1; visibility: visible; }
.slide-text { max-width: 560px; }
.slide-title { font-size: 50px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 16px 0 14px; }
.slide p { font-size: 17px; color: rgba(255, 255, 255, .86); max-width: 470px; }
.slide-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.slide-art { position: relative; height: 100%; }
.orb { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orb-1 { width: 380px; height: 380px; }
.orb-2 { width: 250px; height: 250px; border-style: dashed; border-color: rgba(255, 255, 255, .16); }
.moon { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--ceu); }
.moon.m1 { left: calc(50% + 170px); top: 30%; }
.moon.m2 { left: calc(50% - 150px); top: 76%; width: 10px; height: 10px; background: #fff; }
.planet { position: absolute; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: none; }
.planet img { width: 82%; height: 82%; object-fit: contain; }
.p-main { width: 240px; height: 240px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.p-a { width: 118px; height: 118px; left: calc(50% + 105px); top: 7%; }
.p-b { width: 104px; height: 104px; left: calc(50% - 205px); top: 58%; }
.slide.on .planet { animation: float 6s ease-in-out infinite; }
.slide.on .p-a { animation-delay: -2s; }
.slide.on .p-b { animation-delay: -4s; }
@keyframes float { 50% { translate: 0 -8px; } }
.hero-dots { position: absolute; left: 56px; bottom: 28px; display: flex; gap: 10px; }
.hero-dots button { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s, transform .2s; }
.hero-dots button[aria-selected="true"] { background: #fff; transform: scale(1.25); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.hero-banners { background: var(--noite); }
.slide-img { display: block; padding: 0; }
.slide-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-banners .hero-dots { left: 50%; transform: translateX(-50%); }

/* banners do topo da home: principal à esquerda e dois à direita (proporções do layout: 742 × 382 e 344 × 183) */
.banners { display: grid; grid-template-columns: minmax(0, 742fr) minmax(0, 344fr); gap: 16px; }
.banners-solo { grid-template-columns: minmax(0, 1fr); }
.banner-main { min-width: 0; }
.banner-main .hero { height: auto; aspect-ratio: 742 / 382; min-height: 360px; border-radius: 24px; }
.banners-solo .banner-main .hero { aspect-ratio: auto; height: 420px; }
.banners .slide { padding: 0 44px; grid-template-columns: 1.15fr .85fr; }
.banners .slide-title { font-size: 42px; margin: 14px 0 12px; }
.banners .slide p { font-size: 15.5px; }
.banners .slide-ctas { margin-top: 22px; }
.banners .slide-ctas .btn-lg { --bh: 48px; padding: 0 22px; font-size: 15px; }
.banners .orb-1 { width: 300px; height: 300px; }
.banners .orb-2 { width: 200px; height: 200px; }
.banners .p-main { width: 190px; height: 190px; }
.banners .p-a { width: 96px; height: 96px; left: calc(50% + 78px); top: 9%; }
.banners .p-b { width: 84px; height: 84px; left: calc(50% - 168px); top: 60%; }
.banners .moon.m1 { left: calc(50% + 138px); }
.banners .moon.m2 { left: calc(50% - 122px); }
.banners .hero-dots { left: 44px; bottom: 24px; }
.banners .hero-mark { width: 520px; right: -70px; bottom: -100px; }
.banner-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; }
.side-banner { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; min-height: 0; padding: 22px 26px; border-radius: 24px; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), box-shadow .2s; }
.side-banner:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.side-img { padding: 0; background: var(--noite); }
.side-img img { width: 100%; height: 100%; object-fit: cover; }
.side-logo { width: 178px; height: auto; }
.side-banner p { font-size: 17px; font-weight: 600; line-height: 1.22; max-width: 62%; }
.side-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 550; }
.side-club { background: var(--noite); color: #fff; }
.side-club p { max-width: 80%; }
.side-club .side-cta { color: var(--ceu); }
.side-club::before { content: ''; position: absolute; z-index: -1; width: 320px; height: 178px; right: -70px; top: -40px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.side-help { background: var(--nevoa); color: var(--ink); }
.side-help .side-cta { color: var(--azul); }
.side-art { position: absolute; right: -18px; bottom: -22px; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(51, 64, 255, .06); }
.side-art img { width: 78%; height: 78%; object-fit: contain; }

/* vantagens */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.perk { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.perk-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--nevoa); color: var(--azul); display: grid; place-items: center; flex: none; }
.perk b { display: block; font-size: 15px; }
.perk span { font-size: 13px; color: var(--ink-3); }

/* categorias */
.cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.cat { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 16px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); transition: transform .2s var(--ease), box-shadow .2s; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--ceu); }
.cat-img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--gelo); margin-bottom: 6px; overflow: hidden; }
.cat-img img { width: 100%; height: 100%; object-fit: contain; }
.cat b { font-size: 15px; }
.cat span { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }

/* ---------- cartão de produto e vitrines ---------- */
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vitrine-linha { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 8px; margin: -6px -2px -4px; }
.vitrine-linha::-webkit-scrollbar { display: none; }
.vitrine-linha > * { scroll-snap-align: start; }
.pc { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); overflow: hidden; transition: box-shadow .2s, transform .2s var(--ease); }
.pc:hover { box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--ceu); transform: translateY(-2px); }
.pc-img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--gelo); margin: 8px 8px 0; border-radius: var(--r); overflow: hidden; }
.pc-img img { width: 92%; height: 92%; object-fit: contain; transition: transform .35s var(--ease); mix-blend-mode: multiply; }
.pc:hover .pc-img img { transform: scale(1.04); }
.pc-badges { position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 32px); }
.pc-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 16px; flex: 1; }
.pc-brand { font-size: 12px; font-weight: 550; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pc-name { font-size: 15px; font-weight: 550; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-name:hover { color: var(--azul); }
.pc-prices { margin-top: 6px; }
.pc-price { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.pc-price small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pc-pix { font-size: 13.5px; color: var(--sucesso); font-weight: 550; }
.pc-inst { font-size: 12.5px; color: var(--ink-3); }
.pc-msg { font-size: 14px; font-weight: 550; color: var(--ink-3); padding: 8px 0; }
.pc .cb { font-size: 13px; margin: 6px 0 10px; flex-wrap: wrap; row-gap: 2px; }
.cb-v { white-space: nowrap; }
.pc-add { margin-top: auto; }

/* kits */
.kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kit { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, transform .2s var(--ease); }
.kit:hover { transform: translateY(-2px); box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--ceu); }
.kit-top { display: flex; gap: 14px; align-items: center; }
.kit-top h3 { font-size: 19px; line-height: 1.2; }
.kit-top p { font-size: 13.5px; color: var(--ink-3); }
.kit-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; flex: none; }
.kit-img { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r); background: var(--gelo); overflow: hidden; }
.kit-img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.kit-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kit-price { font-size: 22px; font-weight: 600; }

/* faixa do Clube */
.club-band { margin-top: 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 44px 48px; border-radius: var(--r-xl); background: var(--noite); color: #fff; overflow: hidden; position: relative; }
.club-band > * { position: relative; z-index: 1; }
.club-band::after { content: ''; position: absolute; width: 620px; height: 344px; right: -150px; top: -90px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.club-logo { width: 240px; height: auto; margin-bottom: 18px; }
.club-band h2 { font-size: 36px; line-height: 1.1; letter-spacing: -.01em; }
.club-band p { color: rgba(255, 255, 255, .78); margin-top: 12px; max-width: 470px; }
.club-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; z-index: 1; }
.ct { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 20px 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ct.you { background: rgba(51, 64, 255, .3); box-shadow: inset 0 0 0 1.5px var(--ceu); }
.ct-planet { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), inset 0 0 0 2px rgba(255, 255, 255, .35); margin-bottom: 10px; }
.ct b { font-size: 15px; }
.ct strong { font-size: 40px; line-height: 1; margin-top: 8px; }
.ct span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.ct small { margin-top: 10px; font-size: 13px; color: var(--ceu); font-weight: 550; }
.ct em { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--pill); background: var(--ceu); color: var(--noite); }

/* faixa da Assistência */
.assist-band { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px; border-radius: var(--r-xl); background: var(--nevoa); }
.assist-band h2 { font-size: 40px; line-height: 1.08; letter-spacing: -.015em; margin: 14px 0 12px; }
.assist-band p { color: var(--ink-2); max-width: 470px; }
.assist-art { position: relative; height: 300px; }
.assist-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 26px rgba(51, 64, 255, .06), 0 0 0 54px rgba(51, 64, 255, .04); }
.assist-disc img { width: 80%; height: 80%; object-fit: contain; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-2); }
.float-card .ico { color: #fff; background: var(--azul); width: 36px; height: 36px; padding: 8px; border-radius: 50%; }
.float-card b { display: block; font-size: 14px; }
.float-card span { font-size: 12.5px; color: var(--ink-3); }
.fc-1 { left: 0; top: 24px; animation: float 5s ease-in-out infinite; }
.fc-2 { right: 0; bottom: 26px; animation: float 5s ease-in-out -2.5s infinite; }
.fc-2 .ico { background: var(--sucesso); }
.banner-wide { border-radius: var(--r-xl); overflow: hidden; }
.banner-wide img { width: 100%; height: auto; }

/* ---------- migalhas e listagem ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: var(--azul); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 550; }
.list-head { margin-bottom: 20px; }
.list-head h1, .page-title { font-size: 32px; letter-spacing: -.01em; line-height: 1.15; }
.list-head p { color: var(--ink-3); }
.list-desc { margin-top: 10px; max-width: 820px; color: var(--ink-2); }
.page-title { margin-bottom: 18px; }
.list-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.list-layout > * { min-width: 0; }
.filters { padding: 8px 18px; position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow: auto; }
.filters-head { display: none; }
.f-group { padding: 14px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; }
.f-group:last-of-type { border-bottom: 0; }
.f-group h3 { font-size: 14px; margin-bottom: 4px; }
.f-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2); }
.f-link:hover { background: var(--gelo); color: var(--azul); }
.f-link.on { background: var(--nevoa); color: var(--azul); font-weight: 550; }
.f-sub { display: grid; gap: 2px; padding-left: 12px; margin: 2px 0 6px; border-left: 2px solid var(--nevoa); }
.f-opt { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 3px 0; cursor: pointer; }
.f-opt input { width: 18px; height: 18px; accent-color: var(--azul); flex: none; }
.f-opt small { color: var(--ink-3); }
.f-actions { display: flex; gap: 8px; padding: 12px 0 8px; }
.js .f-actions .btn-primary { display: none; }
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; min-height: 40px; }
.filters-open { display: none; margin-right: auto; }
/* ordenação gerada pela plataforma (snippets/filter) */
.sort form { display: flex; flex-wrap: wrap; gap: 10px; }
.sort label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.sort select { height: 40px; border-radius: var(--pill); border: 1.5px solid var(--line); padding: 0 34px 0 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; font-weight: 550; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 56px 24px; }
.empty h2 { font-size: 22px; }
.empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--nevoa); color: var(--azul); display: grid; place-items: center; }
.empty p { color: var(--ink-3); max-width: 380px; }
/* paginação */
.pager { margin-top: 28px; display: flex; justify-content: center; }
.pagination { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; border-radius: 0; }
.pagination li { min-width: 42px; height: 42px; border-radius: var(--pill); display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 550; font-size: 14px; }
.pagination li a { width: 100%; height: 100%; display: grid; place-items: center; padding: 0 12px; border-radius: inherit; float: none; margin: 0; border: 0; background: none; color: inherit; line-height: 1; }
.pagination li a:hover { background: var(--nevoa); color: var(--azul); }
.pagination li.current { background: var(--azul); color: #fff; box-shadow: none; padding: 0 12px; }

/* ---------- página do produto ---------- */
.pdp-promo img { border-radius: var(--r-lg); margin-bottom: 18px; }
/* 3 colunas, como as páginas de catálogo do Mercado Livre: fotos | marca, nome, estoque e ficha | compra.
   O meio tem duas peças (topo e ficha) para o celular poder pôr a compra entre elas. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 384px; grid-template-rows: auto auto auto 1fr; grid-template-areas: "gal head buy" "gal oferta buy" "gal ficha buy" "info info buy"; gap: 22px 16px; align-items: start; }
.pdp.pdp-sem-ficha { grid-template-rows: auto auto 1fr; grid-template-areas: "gal head buy" "gal oferta buy" "info info buy"; }
/* fotos, coluna do meio e conteúdo de baixo num contêiner branco só; a compra fica à parte, à direita */
.pdp-fundo { grid-column: 1 / 3; grid-row: 1 / 5; align-self: stretch; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.pdp.pdp-sem-ficha .pdp-fundo { grid-row: 1 / 4; }
.pdp-head { padding: 26px 26px 0 0; }
/* o preço, o cashback e "o que você precisa saber" no meio, abaixo do estoque */
.pdp-oferta { grid-area: oferta; display: grid; gap: 14px; min-width: 0; padding: 0 26px 0 0; }
.pdp-ficha { padding: 0 26px 26px 0; }
.pdp-info.card { margin: 0 26px; padding: 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--line-2); }
/* a foto fica grudada na tela só dentro da coluna dela: para quando chega no bloco de baixo */
.pdp-gal { grid-area: gal; align-self: stretch; min-width: 0; padding: 26px 0 26px 26px; }
.gallery { position: sticky; top: calc(var(--hdr-h) + 16px); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.g-main { grid-column: 2; grid-row: 1; position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.g-main:only-child { grid-column: 1 / -1; }
.g-main > img { width: 86%; height: 86%; object-fit: contain; }
.g-main iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-badges { position: absolute; left: 16px; top: 16px; right: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.g-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; max-height: 100%; overflow: auto; scrollbar-width: none; }
.g-thumb { display: grid; gap: 2px; padding: 4px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); text-align: center; flex: none; }
.g-thumb > span { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-xs); background: var(--gelo); overflow: hidden; color: var(--azul); }
.g-thumb img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.g-thumb small { font-size: 11px; font-weight: 550; color: var(--ink-3); }
.g-thumb[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--azul); }

/* coluna do meio: topo */
.pdp-head { grid-area: head; display: grid; gap: 14px; min-width: 0; }
.pdp-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding-top: 8px; font-size: 13px; color: var(--ink-3); }
.pdp-kicker > * + *::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 10px; background: var(--line); vertical-align: -1px; }
.buy-brand { font-size: 13px; font-weight: 600; color: var(--azul); text-transform: uppercase; letter-spacing: .08em; }
.pdp-head h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; margin: -6px 0 0; }
.pdp-fav { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--azul); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s, transform .15s; }
.pdp-fav:hover { background: var(--nevoa); box-shadow: inset 0 0 0 1px var(--ceu); }
.pdp-fav:active { transform: scale(.92); }
.pdp-fav .fav-on, .pdp-fav[aria-pressed="true"] .fav-off { display: none; }
.pdp-fav[aria-pressed="true"] .fav-on { display: block; animation: fav-pop .35s var(--ease); }
@keyframes fav-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.fav-tray { display: none; }
.buy-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--ink-3); }
.buy-meta b { color: var(--ink); }
.pdp-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 15px; color: var(--azul); }
.pdp-stock b { color: var(--ink); }
.pdp-stock span { font-size: 14px; color: var(--ink-3); }
.pdp-stock span::before { content: '·'; margin-right: 8px; }
.pdp-stock.is-low, .pdp-stock.is-low b { color: #B86E00; }
.pdp-stock.is-off { color: var(--ink-3); }
.buy-short { color: var(--ink-2); margin: 0; }
.pdp-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pdp-share > span { font-size: 13px; font-weight: 550; color: var(--ink-3); margin-right: 4px; }
.share-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: color .15s, background .15s, box-shadow .15s; }
.share-ico:hover { color: var(--azul); background: var(--nevoa); box-shadow: inset 0 0 0 1px var(--ceu); }
.share-ico[hidden] { display: none; }

/* coluna do meio: ficha técnica */
.pdp-ficha { grid-area: ficha; min-width: 0; }
.pdp-ficha > h2 { font-size: 19px; margin: 0 0 12px; }
.ficha { position: relative; display: grid; gap: 10px; }
.ficha h3 { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ficha.is-fechada { max-height: 440px; overflow: hidden; }
.ficha.is-fechada::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.ficha-tabela, .ficha-carac table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; }
.ficha-tabela th, .ficha-tabela td, .ficha-carac th, .ficha-carac td { padding: 10px 14px; text-align: left; vertical-align: top; border: 0; }
.ficha-tabela th, .ficha-carac th, .ficha-carac td:first-child:not(:only-child) { width: 46%; font-weight: 550; color: var(--ink-2); background: var(--gelo); }
.ficha-tabela tr:nth-child(even) th, .ficha-carac tr:nth-child(even) th, .ficha-carac tr:nth-child(even) td:first-child:not(:only-child) { background: #EBEEF6; }
.ficha-tabela tr:nth-child(even) td, .ficha-carac tr:nth-child(even) td { background: #FAFBFD; }
.ficha-tabela td small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
/* a plataforma pode entregar as características em lista: vira a mesma tabela */
.ficha-carac ul, .ficha-carac dl { list-style: none; margin: 0; padding: 0; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; font-size: 14px; }
.ficha-carac li, .ficha-carac dl > div { padding: 10px 14px; }
.ficha-carac li:nth-child(odd), .ficha-carac dl > div:nth-child(odd) { background: var(--gelo); }
.ficha-carac dt { font-weight: 550; color: var(--ink-2); }
.ficha-carac dd { margin: 0; }
.ficha-carac h1, .ficha-carac h2, .ficha-carac h3 { font-size: 14px; margin: 8px 0 6px; }
.ficha-mais { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 550; color: var(--azul); }
.ficha-mais:hover { text-decoration: underline; }
.ficha-mais[aria-expanded="true"] .ico { transform: rotate(180deg); }
.ficha-mais[hidden] { display: none; }

/* coluna da direita: compra */
.pdp-buy { grid-area: buy; display: grid; gap: 14px; min-width: 0; position: sticky; top: var(--topo-coluna, 16px); z-index: 2; }
.buybox { padding: 22px 22px 20px; display: grid; gap: 16px; }
.buy-form { display: grid; gap: 16px; }
.bx-price { position: relative; display: grid; gap: 6px; }
.bx-off { position: absolute; right: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--pill); background: var(--nevoa); color: var(--azul); font-size: 13px; font-weight: 600; }
.buybox .tray-pricing .PrecoPrincipal { font-size: 34px; }
.buy-off { display: grid; gap: 6px; }
.price-pix { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--sucesso); font-weight: 550; margin: 0; }
.price-pix > span:last-child { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.bx-entrega { display: grid; gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--line-2); }
.bx-ent-res { display: grid; gap: 10px; }
.bx-ent-line { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; }
.bx-ent-line > .ico { flex: none; color: var(--azul); margin-top: 1px; }
.bx-ent-line > span { display: grid; gap: 1px; min-width: 0; }
.bx-ent-line b { font-size: 15px; }
.bx-ent-line b.is-gratis { color: var(--azul); }
.bx-ent-line small { font-size: 13px; color: var(--ink-3); }
.bx-ent-line.is-rapida > .ico { color: var(--noite); }
.bx-ent-acoes { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-left: 30px; font-size: 13px; }
.bx-ent-acoes button { color: var(--azul); font-weight: 550; }
.bx-ent-acoes button:hover { text-decoration: underline; }
.bx-ent-lista { list-style: none; margin: 0 0 0 30px; padding: 0; display: grid; font-size: 13px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.bx-ent-lista[hidden] { display: none; }
.bx-ent-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 12px; }
.bx-ent-lista li + li { border-top: 1px solid var(--line-2); }
.bx-ent-lista li small { grid-column: 1 / -1; color: var(--ink-3); }
.bx-ent-lista b { font-weight: 550; }
.bx-ent-form { display: flex; gap: 8px; padding-left: 30px; }
.bx-ent-form[hidden] { display: none; }
.bx-ent-form .input { height: 42px; max-width: 150px; text-align: center; font-weight: 550; letter-spacing: .04em; }
.bx-ent-form .btn { --bh: 42px; padding: 0 18px; }
.bx-ent-load { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--nevoa); border-top-color: var(--azul); animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
.bx-add { --bh: 52px; }
.cb-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--nevoa); color: var(--azul); --orbit-halo: var(--nevoa); }
.cb-box .orbit-dot { flex: none; margin-top: 3px; width: 18px; height: 18px; }
.cb-box b { display: block; font-size: 15px; }
.cb-box > div > span { font-size: 13px; color: var(--ink-2); }
.bx-trust { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 10px; font-size: 13px; color: var(--ink-3); }
.bx-trust li { display: flex; gap: 10px; align-items: flex-start; }
.bx-trust .ico { flex: none; color: var(--azul); margin-top: 1px; }
.bx-trust b { color: var(--ink); font-weight: 550; }
.opt-label { font-size: 14px; color: var(--ink-3); margin-bottom: 8px; }
.buy-note { padding: 14px 16px; border-radius: var(--r); background: var(--atencao-bg); font-size: 14px; }
.buy-note ul { margin: 6px 0 0; padding-left: 18px; }
.buy-msg { font-size: 14px; color: var(--ink-2); padding: 12px 14px; border-radius: var(--r); background: var(--gelo); margin: 0; }
.ship { padding: 4px 0 0; display: grid; gap: 12px; }
.ship[hidden] { display: none; }
.ship-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; }
.ship-title .ico { color: var(--azul); }

/* vendedor */
.seller-card { padding: 18px 20px; display: grid; gap: 14px; }
.sc-head { display: flex; gap: 12px; align-items: center; }
.sc-logo { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); }
.sc-logo svg { width: 32px; height: auto; }
.sc-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.sc-head small { flex-basis: 100%; font-size: 12.5px; color: var(--ink-3); }
.sc-head b { font-size: 16px; }
.sc-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.sc-stats > div { display: grid; gap: 1px; padding: 10px 8px; border-radius: var(--r-sm); background: var(--gelo); text-align: center; }
.sc-stats b { font-size: 16px; color: var(--azul); }
.sc-stats small { font-size: 12px; color: var(--ink-3); line-height: 1.25; }
.sc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.sc-points li { display: flex; gap: 8px; align-items: flex-start; }
.sc-points .ico { flex: none; color: var(--azul); margin-top: 2px; }
.sc-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sc-actions .link { font-size: 14px; }
.services { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.services li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
.services .ico { flex: none; color: var(--azul); }
.services b { display: block; font-size: 14px; }
.services small { font-size: 12.5px; color: var(--ink-3); }
/* meios de pagamento (coluna da direita) */
.pay-card { padding: 18px 20px; display: grid; gap: 12px; }
.pay-card h2 { font-size: 16px; margin: 0; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pay-list li { display: flex; gap: 12px; align-items: center; }
.pay-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); }
.pay-list span:last-child { display: grid; gap: 1px; min-width: 0; }
.pay-list b { font-size: 14px; }
.pay-list small { font-size: 12.5px; color: var(--ink-3); }
.pay-mais { border-top: 1px solid var(--line-2); padding-top: 10px; }
.pay-mais summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 550; color: var(--azul); }
.pay-mais summary::-webkit-details-marker { display: none; }
.pay-mais summary:hover { text-decoration: underline; }
.pay-mais[open] summary .ico { transform: rotate(180deg); }
.pay-tray { margin-top: 12px; font-size: 13px; }
.pay-tray table { font-size: 13px; }

/* conteúdo embaixo da foto e da ficha, ao lado da coluna de compra (como no Mercado Livre) */
.pdp-info { grid-area: info; min-width: 0; }
.pdp-sec { padding: 26px 0; min-width: 0; scroll-margin-top: 16px; }
.pdp-sec + .pdp-sec { border-top: 1px solid var(--line-2); }
.pdp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pdp-sec-head h2 { font-size: 21px; line-height: 1.2; margin: 0; }
.pdp-sec-head p { color: var(--ink-3); margin: 4px 0 0; font-size: 14px; }
.pdp-sec-head .round-btn { width: 36px; height: 36px; }
.pdp-info .vitrine-linha { grid-auto-columns: calc((100% - 32px) / 3); }
.pdp-sec .ficha-mais { margin-top: 12px; }
.rev-resumo { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; padding: 16px 20px; border-radius: var(--r); background: var(--gelo); }
.rev-nota { font-size: 44px; line-height: 1; font-weight: 600; color: var(--azul); letter-spacing: -.02em; }
.rev-resumo > div { display: grid; gap: 4px; }
.rev-resumo small { font-size: 13px; color: var(--ink-3); }

/* tablet: título e fotos à esquerda, compra à direita */
@media (max-width: 1180px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head buy" "gal buy" "oferta buy" "ficha buy" "info buy"; gap: 22px 16px; }
  .pdp.pdp-sem-ficha { grid-template-rows: auto auto auto 1fr; grid-template-areas: "head buy" "gal buy" "oferta buy" "info buy"; }
  .pdp-fundo { grid-column: 1; grid-row: 1 / 6; }
  .pdp.pdp-sem-ficha .pdp-fundo { grid-row: 1 / 5; }
  .pdp-head { padding: 24px 24px 0; }
  .pdp-gal, .pdp-oferta { padding: 0 24px; }
  .pdp-ficha { padding: 0 24px 24px; }
  .pdp-info.card { margin: 0 24px; }
  .gallery { position: static; }
  .g-main { aspect-ratio: 4 / 3; }
  .pdp-info .vitrine-linha { grid-auto-columns: calc((100% - 16px) / 2); }
}
/* celular: título, fotos, compra, ficha e o resto */
@media (max-width: 860px) {
  .pdp, .pdp.pdp-sem-ficha { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "gal" "oferta" "buy" "ficha" "info"; gap: 18px; }
  .pdp.pdp-sem-ficha { grid-template-areas: "head" "gal" "oferta" "buy" "info"; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .g-main { grid-column: 1; aspect-ratio: 4 / 3; }
  .g-thumbs { grid-row: 2; flex-direction: row; overflow-x: auto; }
  .g-thumb { width: 64px; }
  .pdp-head { gap: 12px; }
  .pdp-head h1 { font-size: 22px; }
  .pdp-fundo { display: none; }
  .pdp-head, .pdp-gal, .pdp-oferta { padding: 0; }
  .pdp-ficha { padding: 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); }
  .pdp-info.card { margin: 0; padding: 0 18px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line-2); border-top: 0; }
  .pdp-buy { position: static; }
}
@media (max-width: 520px) {
  .buybox { padding: 18px 16px; }
  .buybox .tray-pricing .PrecoPrincipal { font-size: 30px; }
  .ficha-tabela th, .ficha-tabela td, .ficha-carac th, .ficha-carac td { padding: 9px 10px; }
  .sc-actions .btn { width: 100%; }
  .pdp-info .vitrine-linha { grid-auto-columns: 78%; }
  .rev-nota { font-size: 36px; }
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.tab-loading { color: var(--ink-3); }

/* texto rico vindo do painel (descrição, páginas institucionais) */
.rte { color: var(--ink-2); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.rte > * + * { margin-top: 12px; }
.rte > :first-child { margin-top: 0; }
.rte h1, .rte h2, .rte h3, .rte h4 { color: var(--ink); line-height: 1.25; margin-top: 22px; }
.rte h2 { font-size: 22px; } .rte h3 { font-size: 18px; }
.rte a { color: var(--azul); text-decoration: underline; }
.rte img { height: auto; border-radius: var(--r); }
.rte ul, .rte ol { padding-left: 20px; }
.rte table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rte th, .rte td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.rte tr:nth-child(odd) td { background: var(--gelo); }
.rte [style*="font-family"] { font-family: inherit !important; }
.inst { padding: 28px 32px; }

/* ---------- Mercoclub ---------- */
.club-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 44px 48px; border-radius: var(--r-xl); background: var(--noite); color: #fff; }
.club-hero h1 { font-size: 42px; line-height: 1.08; letter-spacing: -.015em; }
.club-hero p { color: rgba(255, 255, 255, .78); margin-top: 12px; max-width: 480px; }
.member { padding: 22px; display: grid; gap: 18px; color: var(--ink); }
.member-card { position: relative; overflow: hidden; padding: 22px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(circle at 85% 10%, #4A55FF 0, var(--azul) 40%, #2730D9 100%); min-height: 190px; display: grid; align-content: space-between; box-shadow: var(--sh-azul); }
.member-card > * { position: relative; z-index: 1; }
.member-card::after { content: ''; position: absolute; width: 300px; height: 167px; right: -70px; bottom: -40px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-logo { width: 70px; color: #fff; --planet: var(--ceu); }
.mc-name { font-size: 20px; font-weight: 600; margin-top: 18px; }
.mc-biz { font-size: 14px; opacity: .85; }
.mc-id { font-size: 13px; letter-spacing: .14em; opacity: .75; margin-top: 6px; }
.tier-progress { display: grid; gap: 8px; }
.tp-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 550; color: var(--ink-3); }
.tp-bar { position: relative; height: 10px; border-radius: var(--pill); background: var(--line-2); }
.tp-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--pill); background: linear-gradient(90deg, var(--ceu), var(--azul)); }
.tp-bar i { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 5px var(--azul), var(--sh-1); }
.tier-progress p { font-size: 13.5px; color: var(--ink-2); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { padding: 24px; display: grid; gap: 12px; align-content: start; }
.tier.you { box-shadow: var(--sh-2), inset 0 0 0 2px var(--azul); }
.tier.top { background: var(--noite); color: #fff; box-shadow: var(--sh-2); }
.tier.top .ticks .ico { color: var(--ceu); }
.tier-head { display: flex; align-items: center; gap: 10px; }
.tier-head h3 { font-size: 21px; flex: 1; }
.tier-planet { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px rgba(143, 150, 255, .2); flex: none; }
.tier.top .tier-planet { background: #fff; }
.tier-cb strong { font-size: 44px; line-height: 1; margin-right: 6px; }
.tier-price { font-size: 18px; font-weight: 600; }
.tier .btn { margin-top: 8px; }
.tier.top .btn-primary { background: #fff; color: var(--azul); box-shadow: none; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.ticks .ico { color: var(--azul); flex: none; margin-top: 2px; }
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.partner { display: flex; align-items: center; gap: 14px; padding: 18px; }
.partner > div { flex: 1; display: grid; }
.partner span:not(.badge) { font-size: 13px; color: var(--ink-3); }
.partner-ico { width: 46px; height: 46px; border-radius: var(--r); background: var(--gelo); color: var(--azul); display: grid; place-items: center; flex: none; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.how-steps li { position: relative; display: grid; gap: 8px; padding: 24px; color: var(--azul); }
.how-steps b { color: var(--ink); font-size: 17px; }
.how-steps span { color: var(--ink-3); font-size: 14px; }
.how-n { position: absolute; top: 18px; right: 20px; font-size: 40px; font-weight: 600; color: var(--nevoa) !important; line-height: 1; }
.faq details { padding: 0 22px; margin-bottom: 10px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-weight: 550; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq summary .ico { transition: transform .2s; color: var(--azul); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); }

/* ---------- MercoHelp! ---------- */
.assist-hero { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: start; padding: 44px 48px; border-radius: var(--r-xl); background: var(--nevoa); }
.assist-logo { width: 260px; height: auto; margin-bottom: 20px; }
.assist-band-logo { width: 220px; height: auto; }
.assist-hero h1 { font-size: 46px; line-height: 1.05; letter-spacing: -.02em; }
.assist-hero > div > p { color: var(--ink-2); margin-top: 14px; max-width: 520px; }
.assist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.assist-stats:empty { display: none; }
.assist-stats div { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: #fff; }
.assist-stats strong { font-size: 28px; color: var(--azul); line-height: 1; }
.assist-stats span { font-size: 13px; color: var(--ink-3); }
.assist-form { padding: 24px; display: grid; gap: 14px; }
.assist-form h2 { font-size: 22px; }
.assist-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.assist-steps li { display: flex; gap: 12px; align-items: flex-start; }
.assist-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--nevoa); color: var(--azul); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.assist-steps b { display: block; font-size: 14.5px; }
.assist-steps small { font-size: 13px; color: var(--ink-3); }

/* ---------- rodapé ---------- */
.ftr { margin-top: 24px; background: var(--noite); color: #C3C8E8; }
.ftr .wrap { padding-top: 56px; padding-bottom: 28px; }
.ftr-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; }
.ftr-logo { width: 200px; height: auto; }
.ftr-brand p { margin: 14px 0 22px; color: #fff; font-size: 17px; }
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.social a { height: 32px; padding: 0 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .07); color: #fff; display: inline-flex; align-items: center; font-size: 13px; }
.social a:hover { background: rgba(255, 255, 255, .14); }
.ftr-col { display: grid; gap: 10px; align-content: start; }
.ftr-col h2 { color: #fff; font-size: 15px; margin-bottom: 4px; }
.ftr-col a { font-size: 14px; }
.ftr-col a:hover { color: #fff; }
.ftr-pay { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.ftr-pay .sp { flex: 1; }
.pay-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .07); color: #fff; }
.ftr-legal { margin-top: 18px; font-size: 12.5px; color: #8C92B8; display: grid; gap: 10px; }
.ftr-credits, .ftr-credits a { color: #8C92B8; }
.ftr-credits img { display: inline-block; vertical-align: middle; filter: grayscale(1) brightness(1.6); opacity: .7; }

/* ---------- carrinho lateral ---------- */
.drawer-wrap { position: fixed; inset: 0; z-index: 90; }
.drawer-bg { position: absolute; inset: 0; background: rgba(11, 18, 51, .4); opacity: 0; transition: opacity .25s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; display: grid; grid-template-rows: auto 1fr; transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: var(--sh-3); }
.drawer-wrap.open .drawer-bg { opacity: 1; }
.drawer-wrap.open .drawer { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.drawer-head h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.drawer-body { overflow: auto; display: grid; grid-template-rows: 1fr auto; }
.drawer-loading { display: grid; justify-items: center; align-content: center; gap: 14px; color: var(--ink-3); padding: 60px 20px; }
.drawer-items { padding: 8px 20px; }
.d-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.d-thumb { width: 84px; height: 63px; border-radius: var(--r-sm); background: var(--gelo); display: grid; place-items: center; overflow: hidden; flex: none; }
.d-thumb img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.d-item > div { display: grid; gap: 4px; justify-items: start; flex: 1; min-width: 0; }
.d-item b { font-size: 14px; line-height: 1.3; }
.d-item span { font-size: 13px; color: var(--ink-3); }
.d-actions { display: flex; align-items: center; gap: 10px; }
.qty { display: inline-flex; align-items: center; height: 36px; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; }
.qty button { width: 32px; height: 100%; display: grid; place-items: center; color: var(--azul); border-radius: var(--pill); }
.qty button:hover { background: var(--nevoa); }
.qty span { width: 28px; text-align: center; font-weight: 600; font-size: 14px; color: var(--ink) !important; }
.d-remove { font-size: 13px; color: var(--ink-3); text-decoration: underline; }
.d-remove:hover { color: var(--erro); }
.drawer-foot { padding: 18px 20px 22px; display: grid; gap: 10px; border-top: 1px solid var(--line-2); background: #fff; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.sum-row span { color: var(--ink-2); }
.sum-row b { font-size: 20px; }
.cb-earn { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: var(--nevoa); color: var(--azul); font-size: 13.5px; --orbit-halo: var(--nevoa); }
.cb-earn span:last-child { color: var(--ink-2); }
.cb-earn b { color: var(--azul); }
.drawer-note { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.drawer-empty { display: grid; justify-items: center; gap: 8px; padding: 70px 24px; text-align: center; color: var(--ink-3); }
.drawer-empty b { color: var(--ink); font-size: 17px; }
.drawer-empty .ico { color: var(--azul); }

/* ---------- página de erro ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.error-box { max-width: 520px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.error-logo { width: 200px; height: auto; margin-bottom: 18px; }
.error-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--nevoa); color: var(--azul); display: grid; place-items: center; --orbit-halo: var(--nevoa); }
.error-mark .orbit-dot { width: 26px; height: 26px; }
.error-box h1 { font-size: 30px; line-height: 1.15; }
.error-box p { color: var(--ink-2); }

/* =====================================================================
   Blocos gerados pela plataforma (productHelper.*, modal, páginas da Tray)
   Os seletores seguem o HTML que a Tray entrega; o tema só ajusta o visual.
   ===================================================================== */

/* preço: productHelper.pricing() */
.tray-pricing br { display: none; }
.tray-pricing .produto-preco { background: none !important; border: 0 !important; padding: 0; }
.tray-pricing #preco { display: grid; gap: 2px; }
.tray-pricing #produto_preco { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tray-pricing .txt-por { display: none; }
.tray-pricing #precoDe, .tray-pricing .precoDe { order: -1; font-size: 13px; color: var(--ink-3); }
.tray-pricing #precoDe:empty { display: none; }
.tray-pricing #precoDe strike, .tray-pricing #precoDe .preco-de { text-decoration: line-through; }
.tray-pricing .PrecoPrincipal { display: flex; align-items: baseline; gap: 6px; font-size: 38px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink) !important; }
.tray-pricing .PrecoPrincipal .currency { font-size: 22px; text-decoration: none; border: 0; cursor: default; }
.tray-pricing .produto-economize { margin: 2px 0 0; font-size: 13px; color: var(--sucesso); font-weight: 550; }
.tray-pricing .produto-economize:empty { display: none; }
.tray-pricing #info_preco { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
/* nome da forma de pagamento (ex.: "Cartão Diners - Vindi") fica fora; o theme.js deixa uma opção só */
.tray-pricing .txt-forma-pagamento, .pc-inst .txt-forma-pagamento { display: none; }
.tray-pricing #info_preco > br:first-child { display: none; }
.tray-pricing #info_preco strong, .tray-pricing #info_preco .preco-parc1, .tray-pricing #info_preco .preco-parc2 { color: var(--ink-2); font-weight: 550; }
.tray-pricing .precoAvista, .tray-pricing .preco-avista { color: var(--sucesso); font-weight: 550; }
.tray-pricing .color, .tray-pricing [class*="color-tone"] { color: inherit !important; }
.tray-pricing #info, .tray-pricing .produto-formas-pagamento { margin-top: 6px; font-size: 13px; }
.tray-pricing #info a, .tray-pricing #showPaymentMethods { color: var(--azul) !important; font-weight: 550; }
.tray-pricing #detalhes_formas:empty { display: none; }
.tray-bonus { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.tray-bonus strong { color: var(--azul); }

/* variações: productHelper.variants() */
.tray-block { min-width: 0; }
.buy-variants .texto_variacao h2, .buy-variants .texto_variacao h3 { font-size: 14px; font-weight: 550; color: var(--ink-3); margin-bottom: 8px; }
.buy-variants div[style*="clear:both"] { display: none; }
.buy-variants ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.buy-variants ul li { cursor: pointer; }
.buy-variants .lista_cor_variacao li img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--line); transition: box-shadow .15s; }
.buy-variants .lista_cor_variacao li:hover img { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ceu); }
.buy-variants .lista_cor_variacao li.cor_selecionada img, .buy-variants .lista_cor_variacao img.cor_selecionada { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--azul) !important; }
/* variações em texto (voltagem, gás, tamanho) viram pílulas, como no protótipo */
.buy-variants .lista_cor_variacao li > div { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 38px; padding: 0 16px; border-radius: var(--pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 550; color: var(--ink-2); transition: box-shadow .15s, background .15s, color .15s; }
.buy-variants .lista_cor_variacao li:hover > div { box-shadow: inset 0 0 0 1.5px var(--ceu); }
.buy-variants .lista_cor_variacao li.cor_selecionada > div, .buy-variants .lista_cor_variacao li > div.cor_selecionada { background: var(--nevoa); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.buy-variants #cor_nome { margin-left: 6px; color: var(--ink); font-weight: 550; }
.buy-variants .texto_variacao { display: flex; align-items: baseline; }
.buy-variants ul:not(.lista_cor_variacao) li { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 550; }
.buy-variants ul:not(.lista_cor_variacao) li:hover { box-shadow: inset 0 0 0 1.5px var(--ceu); }
.buy-variants ul:not(.lista_cor_variacao) li.cor_selecionada, .buy-variants ul:not(.lista_cor_variacao) li.selected { background: var(--nevoa); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.buy-variants .lista_radios li { background: none; box-shadow: none; padding: 0; gap: 8px; }
.buy-variants .lista_radios input { accent-color: var(--azul); width: 18px; height: 18px; }
.buy-variants select, .tray-block select, .page-tray select { height: 46px; border-radius: var(--r); border: 1.5px solid var(--line); padding: 0 14px; background: #fff; font-weight: 550; max-width: 100%; }
.blocoAlerta { display: block; padding: 10px 14px; border-radius: var(--r); background: var(--erro-bg); color: #B4232A; font-size: 14px; font-weight: 550; }

/* quantidade e comprar: productHelper.form() */
.tray-buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.tray-buy #product-form-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.tray-buy #quantidade { display: flex; align-items: center; gap: 8px; }
.tray-buy #quantidade label { display: inline-flex; align-items: center; gap: 8px; font-size: 0; color: transparent !important; }
.tray-buy .qty-wrap { display: inline-flex; align-items: center; height: 54px; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; }
.tray-buy .qty-wrap button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--azul); border-radius: var(--pill); }
.tray-buy .qty-wrap button:hover { background: var(--nevoa); }
.tray-buy #quant, .tray-buy input[name="quant"] { width: 46px; height: 54px; text-align: center; border: 0; outline: none; font-weight: 600; font-size: 16px; background: transparent; font-family: var(--f); color: var(--ink); }
.tray-buy #quantidade:not(:has(.qty-wrap)) #quant { width: 72px; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; }
.tray-buy #estoque_variacao { font-size: 13px; color: var(--ink-3); }
.tray-buy #bt_comprar { flex: 1; min-width: 200px; }
.tray-buy .botao-commerce, .tray-buy #button-buy, .botao-comprar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--azul) !important; color: #fff !important; font: 550 16px/1 var(--f) !important; cursor: pointer; box-shadow: none; transition: background .18s, box-shadow .18s; }
.tray-buy .botao-commerce:hover, .botao-comprar:hover { background: var(--azul-hover) !important; box-shadow: var(--sh-azul); }
.botao-commerce-img { background: none !important; padding: 0 !important; text-indent: 0 !important; width: auto !important; height: auto !important; font: inherit !important; color: inherit !important; }
.tray-buy #loading_btn { font-size: 13px; color: var(--ink-3); }
.tray-buy #loading_btn img { display: inline-block; width: 18px; vertical-align: middle; margin-right: 6px; }
/* na caixa de compra: quantidade numa linha, "Comprar agora" na linha de baixo */
.buybox .tray-buy #product-form-box { gap: 12px; }
.buybox .tray-buy #quantidade { flex: 1 1 100%; justify-content: space-between; }
.buybox .tray-buy #quantidade::before { content: "Quantidade"; font-size: 14px; font-weight: 550; color: var(--ink-2); }
.buybox .tray-buy .qty-wrap { height: 42px; }
.buybox .tray-buy .qty-wrap button { width: 38px; }
.buybox .tray-buy #quant, .buybox .tray-buy input[name="quant"] { height: 42px; width: 40px; }
.buybox .tray-buy #estoque_variacao { display: none; }
.buybox .tray-buy #bt_comprar { flex: 1 1 100%; min-width: 0; }
.buybox .tray-buy .botao-commerce, .buybox .tray-buy #button-buy { height: 52px; }

/* frete: productHelper.shipping() */
.tray-shipping .produto-calcular-frete { background: none !important; border: 0 !important; padding: 0; }
.tray-shipping .cepbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tray-shipping .cepbox-text, .tray-shipping .cepbox label { display: none; }
.tray-shipping input.text, .tray-shipping input[type="tel"], .tray-shipping input[type="text"] { height: 42px; border-radius: var(--r); border: 1.5px solid var(--line); padding: 0 12px; font-weight: 550; text-align: center; outline: none; }
.tray-shipping #cep1 { width: 86px; }
.tray-shipping #cep2 { width: 64px; }
.tray-shipping input:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(51, 64, 255, .12); }
.tray-shipping .botao-simular-frete, .tray-shipping .botao-commerce { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--pill); background: var(--noite) !important; color: #fff !important; font: 550 14px/1 var(--f) !important; border: 0; }
.tray-shipping .botao-simular-frete:hover { background: var(--noite-2) !important; }
/* resultado (#Page.page-simula-frete): sem a tabela do produto e sem as linhas; cada forma de envio é uma faixa clara */
.tray-shipping, .tray-shipping *:not(input) { border: 0 !important; box-shadow: none !important; }
.tray-shipping input.text, .tray-shipping input[type="tel"], .tray-shipping input[type="text"] { border: 1.5px solid var(--line) !important; }
.tray-shipping input:focus { border-color: var(--azul) !important; }
.tray-shipping .page-simula-frete > table:first-of-type { display: none; }
.tray-shipping .page-simula-frete > p { margin: 12px 0 2px !important; text-align: left !important; font-size: 12.5px; color: var(--ink-3); }
.tray-shipping .page-simula-frete > p .color { color: var(--ink-2) !important; font-weight: 550; }
.tray-shipping table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 6px !important; margin: 0 !important; font-size: 13.5px; background: none !important; }
.tray-shipping th { padding: 4px 10px 0 !important; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: left !important; background: none !important; }
.tray-shipping td { padding: 10px !important; background: var(--gelo) !important; text-align: left !important; vertical-align: middle; color: var(--ink-2); }
.tray-shipping td:first-child { border-radius: 12px 0 0 12px; }
.tray-shipping td:last-child { border-radius: 0 12px 12px 0; }
.tray-shipping td strong { color: var(--ink); }
.tray-shipping td img { max-width: 44px; height: auto; mix-blend-mode: multiply; }

/* compre junto, brindes, kit, lista de desejos e redes sociais */
.bundle-tray { padding: 22px; overflow-x: auto; }
.bundle-tray img { max-width: 140px; height: auto; border-radius: var(--r-sm); }
.bundle-tray .botao-compre-junto, .bundle-tray .botao-commerce { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: var(--pill); background: var(--azul) !important; color: #fff !important; font: 550 15px/1 var(--f) !important; border: 0; }
.buy-gifts, .buy-kit, .buy-extra { padding: 16px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; }
.buy-extra input, .buy-extra textarea { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin-top: 6px; }
.buy-wish, .buy-social { font-size: 13px; color: var(--ink-3); }
.buy-wish a, .buy-wish button { color: var(--azul); font-weight: 550; }

/* janelas da plataforma (frete calculado, formas de pagamento, avise-me) */
.modal-content { border-radius: var(--r-lg) !important; border: 0 !important; box-shadow: var(--sh-3) !important; font-family: var(--f); }
.modal-header { border-bottom-color: var(--line-2) !important; }
.modal-title { font-weight: 600; }

/* páginas da plataforma (central do cliente, contato, login, cadastro, notícias) */
.page-tray .tray-content { min-width: 0; }
.page-tray input[type="text"], .page-tray input[type="email"], .page-tray input[type="password"], .page-tray input[type="tel"], .page-tray textarea { border: 1.5px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-family: var(--f); }
.page-tray input:focus, .page-tray textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 4px rgba(51, 64, 255, .12); }
.page-tray .botao-commerce, .page-tray button[type="submit"], .page-tray input[type="submit"] { border-radius: var(--pill) !important; background: var(--azul) !important; color: #fff !important; border: 0 !important; font-family: var(--f) !important; font-weight: 550 !important; padding: 0 22px !important; min-height: 44px; cursor: pointer; }

/* ---------- responsivo ---------- */
/* ---------- pre-load da marca ao trocar de página ---------- */
.um-preload { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #fff; color: var(--azul); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--ease), visibility .3s; }
.um-preload svg { width: 120px; height: auto; }
.um-preload-azul { background: var(--azul); color: #fff; --um-pl: var(--ceu); }
.um-nav .um-preload, .um-preload.is-on { opacity: 1; visibility: visible; pointer-events: none; } /* só visual: nunca segura um toque */

/* ---------- vitrine de ofertas em faixa colorida (home) ---------- */
.vo { position: relative; isolation: isolate; overflow: hidden; margin: 56px 0; padding: 44px 0 40px; border-radius: 32px; background: var(--vo-bg); color: #fff; }
.vo::before { content: ''; position: absolute; z-index: -1; width: 640px; height: 356px; left: -170px; bottom: -90px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.vo-in { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 34px; padding: 0 40px; align-items: start; }
.vo-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.vo-lado h2 { margin: 0; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.vo-lado h2 a { color: inherit; }
.vo-pill { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: var(--pill); background: var(--vo-pill); color: var(--azul); font-size: 17px; font-weight: 600; box-shadow: none; }
.vo-arte { position: relative; display: block; width: 100%; aspect-ratio: 1 / .92; }
.vo-arte > img:only-child { width: 100%; height: 100%; object-fit: contain; }
.vo-il { position: absolute; height: auto; }
.vo-il-1 { right: -4%; top: 0; width: 62%; }
.vo-il-2 { left: -4%; bottom: 8%; width: 64%; }
.vo-il-3 { left: 34%; bottom: -2%; width: 46%; }
.vo-car { min-width: 0; }
.vo-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 8px; margin: -6px -2px 0; }
.vo-trilho::-webkit-scrollbar { display: none; }
.vo-trilho > * { scroll-snap-align: start; color: var(--ink); }
.vo-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.vo-nav .round-btn { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.vo-nav .round-btn:hover { background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 1px #fff; }
.vo-dots { display: flex; gap: 8px; }
.vo-dots button { width: 10px; height: 10px; border-radius: var(--pill); background: rgba(255, 255, 255, .42); transition: width .2s, background .2s; }
.vo-dots button[aria-current="true"] { width: 26px; background: #fff; }
.vo-circ { margin: 34px 40px 0; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .18); }
.vo-circ h3 { margin: 0 0 22px; text-align: center; font-size: 26px; font-weight: 550; color: #fff; }
.vo-circ-lista { display: flex; justify-content: center; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 4px; }
.vo-circ-lista::-webkit-scrollbar { display: none; }
.vo-circ-lista a { flex: 0 0 auto; width: 128px; display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff; }
.vo-bola { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #fff; transition: transform .2s var(--ease), box-shadow .2s; }
.vo-bola img { width: 80%; height: 80%; object-fit: contain; }
.vo-circ-lista a:hover .vo-bola { transform: translateY(-4px); box-shadow: none; }
.vo-circ-lista b { font-size: 15px; font-weight: 550; line-height: 1.25; }

/* ---------- mosaico de banners (home): 2 largos em cima, 3 embaixo, 1 alto à direita ---------- */
.mosaico { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: minmax(220px, auto) minmax(290px, auto); gap: 20px; }
.mo { position: relative; isolation: isolate; overflow: hidden; display: flex; border-radius: 24px; background: var(--azul); color: #fff; transition: transform .2s var(--ease), box-shadow .2s; }
.mo:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.mo-1 { grid-column: 1 / 4; grid-row: 1; }
.mo-2 { grid-column: 4 / 7; grid-row: 1; }
.mo-3 { grid-column: 1 / 3; grid-row: 2; }
.mo-4 { grid-column: 3 / 5; grid-row: 2; }
.mo-5 { grid-column: 5 / 7; grid-row: 2; }
.mo-6 { grid-column: 7 / 10; grid-row: 1 / 3; background: var(--noite); }
.mo-img { background: var(--gelo); }
.mo-img > img { width: 100%; height: 100%; object-fit: cover; }
.mo-orbita { position: absolute; z-index: -1; width: 270px; height: 150px; left: -90px; top: -46px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.mo-arte { display: grid; place-items: center; min-width: 0; }
.mo-arte img { width: 100%; height: 100%; max-height: 220px; object-fit: contain; }
.mo-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mo-txt b { font-size: 28px; line-height: 1.08; letter-spacing: -.01em; }
.mo-txt small { font-size: 15px; color: rgba(255, 255, 255, .82); }
.mo-cta { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 42px; margin-top: 14px; padding: 0 24px; border-radius: var(--pill); background: #fff; color: var(--azul); font-size: 15px; font-weight: 600; transition: background .15s; }
.mo:hover .mo-cta { background: var(--nevoa); }
.mo-1, .mo-2 { align-items: center; padding: 18px 26px 18px 10px; }
.mo-1 .mo-arte, .mo-2 .mo-arte { flex: 0 0 48%; height: 100%; }
.mo-3, .mo-4, .mo-5 { flex-direction: column; padding: 20px 22px 24px; text-align: center; }
.mo-3 .mo-arte, .mo-4 .mo-arte, .mo-5 .mo-arte { flex: 1; min-height: 140px; }
.mo-3 .mo-txt, .mo-4 .mo-txt, .mo-5 .mo-txt { align-items: center; }
.mo-3 .mo-txt b, .mo-4 .mo-txt b, .mo-5 .mo-txt b { font-size: 23px; }
.mo-3 .mo-cta, .mo-4 .mo-cta, .mo-5 .mo-cta { align-self: center; margin-top: 12px; }
.mo-6 { flex-direction: column-reverse; justify-content: flex-end; padding: 40px 32px 0; text-align: center; }
.mo-6 .mo-txt { align-items: center; gap: 10px; }
.mo-6 .mo-txt b { font-size: 50px; line-height: 1; letter-spacing: -.03em; }
.mo-6 .mo-txt small { max-width: 320px; font-size: 18px; }
.mo-6 .mo-cta { align-self: center; height: 48px; padding: 0 28px; background: var(--azul); color: #fff; }
.mo-6:hover .mo-cta { background: var(--azul-hover); }
.mo-6 .mo-orbita { left: auto; right: -110px; top: auto; bottom: 150px; width: 360px; height: 200px; }
.mo-6 .mo-arte { position: relative; flex: 1; min-height: 280px; margin: 20px -12px 0; display: block; }
.mo-6 .mo-arte img { position: absolute; bottom: 0; width: auto; max-height: none; }
.mo-6 .mo-il-a { left: 0; height: 84%; }
.mo-6 .mo-il-b { right: 0; height: 64%; }
.mo-6 .mo-il-c { left: 18%; height: 52%; }
/* foto PNG do editor no cartão alto: ocupa a área toda, apoiada embaixo */
.mo-6 .mo-arte img.mo-foto { left: 0; right: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* ---------- vitrine com banner do tamanho de um card (home) ---------- */
/* o banner fica parado na primeira coluna; só o trilho de produtos gira (theme.js, data-vo) */
.vb-grade { display: grid; grid-template-columns: calc((100% - 48px) / 4) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.vb-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 8px; margin: -6px -2px -8px; }
.vb-trilho::-webkit-scrollbar { display: none; }
.vb-trilho > * { scroll-snap-align: start; }
.vb-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--r-lg); background: var(--vb-bg); color: #fff; transition: transform .2s var(--ease), box-shadow .2s; }
.vb-banner:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.vb-img { padding: 0; background: var(--gelo); }
.vb-img img { width: 100%; height: 100%; object-fit: cover; }
.vb-orbita { position: absolute; z-index: -1; width: 270px; height: 150px; right: -90px; top: -36px; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.vb-txt { display: grid; gap: 8px; }
.vb-txt small { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.vb-txt b { font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.vb-txt span { font-size: 15px; color: rgba(255, 255, 255, .88); }
.vb-arte { flex: 1; display: grid; place-items: center; margin: 14px -8px; min-height: 150px; }
.vb-arte img { width: 100%; max-height: 220px; object-fit: contain; }
.vb-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--pill); background: #fff; color: var(--azul); font-weight: 600; }

@media (max-width: 1180px) {
  .vo-in { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 26px; padding: 0 28px; }
  .vo-lado h2 { font-size: 32px; }
  .vo-trilho { grid-auto-columns: calc((100% - 20px) / 2); }
  .vb-grade { grid-template-columns: calc((100% - 32px) / 3) minmax(0, 1fr); }
  .vb-trilho { grid-auto-columns: calc((100% - 16px) / 2); }
  .vo-circ { margin: 30px 28px 0; }
  .mo-txt b { font-size: 24px; }
  .mo-6 .mo-txt b { font-size: 40px; }
}
@media (max-width: 1040px) {
  .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; }
  .mo-6 { grid-column: 1 / -1; grid-row: 3; flex-direction: row-reverse; align-items: center; min-height: 260px; padding: 24px 32px; text-align: left; }
  .mo-6 .mo-txt { align-items: flex-start; flex: 1; }
  .mo-6 .mo-cta { align-self: flex-start; }
  .mo-6 .mo-arte { flex: 0 0 44%; align-self: stretch; margin: 0; min-height: 0; }
}
@media (max-width: 760px) {
  .vo { margin: 36px 0; padding: 28px 0; border-radius: 24px; }
  .vo-in { grid-template-columns: minmax(0, 1fr); padding: 0 18px; gap: 20px; }
  .vo-lado h2 { font-size: 28px; }
  .vo-arte { display: none; }
  .vo-trilho { grid-auto-columns: 78%; }
  .vb-grade { grid-template-columns: minmax(0, 1fr); }
  .vb-banner { padding: 22px 20px; }
  .vb-arte { display: none; }
  .vb-cta { margin-top: 16px; }
  .vb-img { aspect-ratio: 16 / 9; }
  .vb-trilho { grid-auto-columns: 78%; }
  .vo-circ { margin: 26px 18px 0; }
  .vo-circ h3 { font-size: 21px; }
  .vo-circ-lista { justify-content: flex-start; gap: 14px; }
  .vo-circ-lista a { width: 96px; }
  .vo-bola { width: 96px; height: 96px; }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mo-1, .mo-2, .mo-6 { grid-column: 1 / -1; grid-row: auto; }
  .mo-3, .mo-4 { grid-column: auto; grid-row: auto; }
  .mo-5 { grid-column: 1 / -1; grid-row: auto; }
  .mo-1, .mo-2 { min-height: 180px; }
  .mo-6 { flex-direction: column-reverse; text-align: center; padding: 28px 22px 0; }
  .mo-6 .mo-txt { align-items: center; }
  .mo-6 .mo-cta { align-self: center; }
  .mo-6 .mo-arte { flex: none; height: 220px; margin: 16px -12px 0; }
  .mo-6 .mo-txt b { font-size: 36px; }
  .mo-txt b { font-size: 21px; }
}

/* ---------- ofertas do dia: faixa de ponta a ponta do site, título e cronômetro sobre a moldura ---------- */
.od { position: relative; isolation: isolate; overflow: hidden; margin: 56px calc(50% - 50vw + var(--sbw, 0px) / 2) 0; padding: 56px 0 64px; background: var(--od-bg); color: #fff; }
.od-orbita { position: absolute; z-index: -1; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.od-orbita-1 { width: 680px; height: 378px; left: -230px; top: -110px; }
.od-orbita-2 { width: 460px; height: 256px; right: -130px; bottom: -70px; }
.od-in { max-width: 1496px; margin: 0 auto; padding: 0 28px; }
.od-topo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 34px; width: fit-content; max-width: 100%; margin: 0 auto -46px; padding: 0 30px; background: var(--od-bg); }
.od-titulo { text-align: right; }
.od-titulo h2 { margin: 0; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.od-titulo p { margin: 8px 0 0; font-size: 14px; color: rgba(255, 255, 255, .82); }
.od-relogio { display: grid; justify-items: center; gap: 8px; }
.od-relogio small { font-size: 15px; font-weight: 550; color: #fff; }
.od-relogio > div { display: flex; gap: 10px; }
.od-relogio span { display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; min-width: 84px; padding: 9px 14px 7px; border-radius: 18px; background: #fff; color: var(--noite); font-size: 20px; font-weight: 600; box-shadow: none; }
.od-relogio b { font-size: 34px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--azul); }
.od-moldura { position: relative; padding: 78px 40px 54px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 28px; }
.od-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 8px; margin: -6px -2px -8px; }
.od-trilho::-webkit-scrollbar { display: none; }
.od-trilho > * { scroll-snap-align: start; color: var(--ink); }
.od-nav { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--od-bg); }
.od-nav .round-btn { background: var(--od-bg); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.od-nav .round-btn:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px #fff; }
@media (max-width: 1180px) {
  .od-trilho { grid-auto-columns: calc((100% - 48px) / 3); }
  .od-titulo h2 { font-size: 38px; }
}
@media (max-width: 1040px) {
  .od-trilho { grid-auto-columns: calc((100% - 24px) / 2); }
  .od-moldura { padding: 78px 28px 54px; }
}
@media (max-width: 760px) {
  .od { margin-top: 40px; padding: 36px 0 44px; }
  .od-in { padding: 0 16px; }
  .od-topo { flex-direction: column; gap: 14px; margin: 0 auto 22px; padding: 0; background: none; }
  .od-titulo { text-align: center; }
  .od-titulo h2 { font-size: 32px; }
  .od-relogio span { min-width: 68px; padding: 8px 10px 6px; font-size: 16px; }
  .od-relogio b { font-size: 28px; }
  .od-moldura { padding: 18px 14px 40px; border-radius: 22px; }
  .od-trilho { grid-auto-columns: 80%; gap: 14px; }
}

/* ---------- Quem Somos ---------- */
.qs-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 30px; padding: 56px; border-radius: var(--r-xl); background: var(--azul); color: #fff; }
.qs-hero::before, .qs-cta::before, .inst-hero::before { content: ''; position: absolute; z-index: -1; background: url('../img/marca/simbolo-branco-total.svg') center / contain no-repeat; opacity: .08; pointer-events: none; }
.qs-hero::before { width: 760px; height: 422px; left: -220px; bottom: -170px; }
.qs-hero h1 { margin: 14px 0 12px; font-size: 48px; line-height: 1.05; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.qs-hero p { max-width: 560px; margin: 0; font-size: 17px; color: rgba(255, 255, 255, .88); }
.qs-hero .slide-ctas { margin-top: 24px; }
.qs-hero-arte { display: grid; place-items: center; }
.qs-disco { width: min(340px, 100%); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 26px rgba(255, 255, 255, .08), 0 0 0 56px rgba(255, 255, 255, .05); }
.qs-disco img { width: 80%; height: 80%; object-fit: contain; }
.qs-numeros { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.qs-numeros > div { display: grid; gap: 6px; padding: 22px 26px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.qs-numeros b { font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--azul); }
.qs-numeros span { font-size: 14px; color: var(--ink-3); }
.qs-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qs-eco { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.qs-valor, .qs-eco-card { display: grid; align-content: start; gap: 10px; padding: 26px; color: var(--ink); }
.qs-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--nevoa); color: var(--azul); }
.qs-valor h3, .qs-eco-card h3 { margin: 4px 0 0; font-size: 19px; }
.qs-valor p, .qs-eco-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
a.qs-eco-card { transition: box-shadow .15s, transform .15s var(--ease); }
a.qs-eco-card:hover { box-shadow: inset 0 0 0 1.5px var(--ceu); transform: translateY(-2px); }
.qs-eco-logo { width: auto; height: 26px; margin: 11px 0 15px; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.qs-chips .chip { height: 42px; padding: 0 18px; font-size: 15px; font-weight: 550; }
.qs-historia { padding: 36px 44px; scroll-margin-top: 16px; }
.qs-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding: 40px 48px; border-radius: var(--r-xl); background: var(--noite); color: #fff; }
.qs-cta::before { width: 560px; height: 311px; right: -140px; top: -90px; }
.qs-cta h2 { margin: 0; font-size: 30px; color: #fff; }
.qs-cta p { margin: 6px 0 0; color: rgba(255, 255, 255, .8); }
.qs-cta .slide-ctas { margin-top: 0; }

/* ---------- páginas institucionais e políticas ---------- */
.inst-hero { position: relative; isolation: isolate; overflow: hidden; padding: 28px 40px 36px; border-radius: var(--r-xl); background: var(--azul); color: #fff; }
.inst-hero::before { width: 560px; height: 311px; right: -120px; top: -70px; }
.inst-hero .crumbs { margin-bottom: 0; color: rgba(255, 255, 255, .78); }
.inst-hero .crumbs a:hover { color: #fff; text-decoration: underline; }
.inst-hero .crumbs [aria-current] { color: #fff; }
.inst-hero h1 { margin: 14px 0 6px; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.inst-hero p { margin: 0; color: rgba(255, 255, 255, .85); }
.inst-grade { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.inst-lado { position: sticky; top: 16px; display: grid; gap: 14px; }
.inst-menu { display: grid; padding: 12px; }
.inst-menu-tit { margin: 4px 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.inst-menu a { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.inst-menu a:hover { background: var(--gelo); color: var(--azul); }
.inst-menu a[aria-current="page"] { background: var(--nevoa); color: var(--azul); font-weight: 600; }
.inst-ajuda { display: grid; justify-items: start; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: var(--noite); color: #fff; }
.inst-ajuda .qs-ico { margin-bottom: 4px; background: rgba(255, 255, 255, .1); color: #fff; }
.inst-ajuda b { font-size: 17px; }
.inst-ajuda p { margin: 0 0 6px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.inst-ajuda .btn { width: 100%; }
.inst-doc { padding: 36px 44px 40px; min-width: 0; }
.inst-sumario { margin-bottom: 28px; padding: 18px 22px; border-radius: var(--r); background: var(--gelo); }
.inst-sumario[hidden] { display: none; }
.inst-sumario p { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.inst-sumario ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 14.5px; }
.inst-sumario li { break-inside: avoid; padding: 3px 0; }
.inst-sumario a { color: var(--azul); font-weight: 550; }
.inst-sumario a:hover { text-decoration: underline; }
.inst-doc .rte > p:first-child { font-size: 17px; color: var(--ink); }
.inst-doc .rte h2, .qs-historia h2 { scroll-margin-top: 16px; font-size: 22px; margin-top: 32px; }
.inst-doc .rte li + li { margin-top: 6px; }
/* trechos entre colchetes ([CNPJ], [E-MAIL]...) que ainda precisam ser trocados aparecem marcados */
.a-preencher { padding: 0 4px; border-radius: 4px; background: var(--atencao-bg); color: #9A5B00; font-weight: 550; }

@media (max-width: 1040px) {
  .qs-hero { grid-template-columns: minmax(0, 1fr); padding: 40px 36px; }
  .qs-hero-arte { display: none; }
  .qs-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inst-grade { grid-template-columns: minmax(0, 1fr); }
  .inst-lado { position: static; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .qs-hero { padding: 30px 22px; border-radius: 24px; }
  .qs-hero h1 { font-size: 32px; }
  .qs-numeros { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .qs-valores, .qs-eco { grid-template-columns: minmax(0, 1fr); }
  .qs-historia { padding: 24px 20px; }
  .qs-cta { margin-top: 40px; padding: 28px 22px; border-radius: 24px; }
  .qs-cta h2 { font-size: 24px; }
  .inst-hero { padding: 22px 20px 26px; border-radius: 24px; }
  .inst-hero h1 { font-size: 28px; }
  .inst-lado { grid-template-columns: minmax(0, 1fr); }
  .inst-doc { padding: 24px 18px 28px; }
  .inst-sumario ol { columns: 1; }
}

/* ---------- ajustes para a loja de verdade ---------- */
/* fotos sempre inteiras, em qualquer proporção: dentro de uma grade de altura automática a altura em %
   da imagem não vale, e fotos quadradas ou em pé estouravam a caixa e eram cortadas */
.pc-img, .cat-img, .kit-img, .mega-prod-img, .g-thumb > span, .side-art, .qs-disco, .assist-disc, .planet { position: relative; }
.pc-img img, .cat-img img, .kit-img img, .mega-prod-img img, .g-main > img, .g-thumb > span img,
.side-art img, .qs-disco img, .assist-disc img, .planet img { position: absolute; inset: 0; margin: auto; max-width: none; object-fit: contain !important; }
.side-art { position: absolute; }
.planet { position: absolute; }
.assist-disc { position: absolute; }
.vb-arte img, .mo-arte img:not(.mo-il-a):not(.mo-il-b):not(.mo-il-c) { min-height: 0; object-fit: contain !important; }

/* estilos antigos da loja (bordas pontilhadas e recuo em parágrafos, títulos e links) zerados nas áreas do tema */
:where(.main, .hdr, .ftr, .promo, .topbar, .cats-nav, .mm, .drawer, .mega) :where(p, h1, h2, h3, h4, h5, h6, a, span, small, b, strong, li) { border-top: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; }
html body :where(.main, .hdr, .ftr, .promo, .topbar, .cats-nav, .mm, .drawer, .mega) p { padding-left: 0; padding-right: 0; }
.tray-pricing, .tray-pricing *, .tray-shipping .produto-calcular-frete, #info, .produto-formas-pagamento { border: 0 !important; outline: 0 !important; }
.tray-pricing #info, .tray-pricing .produto-formas-pagamento { padding: 0 !important; background: none !important; }
/* bordas do próprio tema em links e itens, devolvidas depois do reset acima */
.mcp-head { border-bottom: 1px solid var(--line-2) !important; }
.bx-ent-lista li + li { border-top: 1px solid var(--line-2) !important; }

/* símbolo da marca antes dos títulos de vitrine */
.home .sec-head h2::before, .vb .sec-head h2::before, .pdp-sec:has(.pdp-linha) .pdp-sec-head h2::before, .od-titulo h2::before {
  content: ''; display: inline-block; width: 1.55em; height: .86em; margin-right: .38em; vertical-align: -.06em;
  background: url('../img/marca/simbolo-azul.svg') center / contain no-repeat;
}
.od-titulo h2::before { background-image: url('../img/marca/simbolo-branco-total.svg'); }

@media (max-width: 1240px) {
  .grid5 { grid-template-columns: repeat(4, 1fr); }
  .grid5 > :nth-child(5) { display: none; }
  .cats { grid-template-columns: repeat(4, 1fr); }
  .vitrine-linha { grid-auto-columns: calc((100% - 48px) / 4); }
  .hdr-cep-btn .hdr-txt { display: none; }
  .cn-link { padding: 0 11px; font-size: 13.5px; }
  .cn-club { min-width: 150px; }
}
@media (max-width: 1120px) {
  .hdr-acc .hdr-txt { display: none; }
  .hdr-acc { padding: 0 1px; }
}
@media (max-width: 1040px) {
  .promo-cta { display: none; }
  .topbar nav { display: none; }
  .topbar .wrap { justify-content: center; text-align: center; }
  .hdr { background: var(--azul); }
  .hdr-in { padding-top: 16px; padding-bottom: 16px; }
  .hdr-menu { display: grid; }
  .cats-nav { display: none; }
  .hdr-pill .hdr-txt { display: none; }
  .hdr-item { padding: 0 1px; }
  .hdr-cb { margin-right: 0; }
  .slide { grid-template-columns: 1fr; padding: 40px; }
  .banners { grid-template-columns: minmax(0, 1fr); }
  .banner-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .side-banner { min-height: 170px; }
  .banner-main .hero { aspect-ratio: auto; height: 380px; }
  .banners .slide { grid-template-columns: 1fr; padding: 36px; }
  .slide-art { display: none; }
  .perks { grid-template-columns: 1fr 1fr; }
  .grid4, .grid5 { grid-template-columns: repeat(3, 1fr); }
  .grid5 > :nth-child(5) { display: flex; }
  .grid5 > :nth-child(n + 4) { display: none; }
  .vitrine-linha { grid-auto-columns: calc((100% - 32px) / 3); }
  .kits, .tiers, .partners, .how-steps { grid-template-columns: 1fr 1fr; }
  .club-band, .assist-band, .club-hero, .assist-hero { grid-template-columns: 1fr; }
  .assist-art { display: none; }
  .list-layout { grid-template-columns: minmax(0, 1fr); }
  .ftr-top { grid-template-columns: 1fr 1fr; }
  /* filtros viram painel lateral */
  .filters { position: fixed; z-index: 96; top: 0; left: 0; bottom: 0; width: min(340px, 88%); max-height: none; border-radius: 0 var(--r-lg) var(--r-lg) 0; transform: translateX(-105%); transition: transform .3s var(--ease); box-shadow: var(--sh-3); padding-top: 0; }
  .filters.open { transform: none; }
  .filters-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: 14px 0; border-bottom: 1px solid var(--line-2); z-index: 1; }
  .filters-open { display: inline-flex; }
  .js .f-actions .btn-primary { display: inline-flex; }
}
@media (max-width: 760px) {
  .wrap, .page { padding-left: 16px; padding-right: 16px; }
  .promo-long { display: none; }
  .promo-slide { left: 16px; right: 16px; gap: 10px; }
  .topbar { font-size: 10.5px; }
  .hdr-in { flex-wrap: wrap; padding-top: 12px; padding-bottom: 14px; gap: 10px; }
  .logo { width: 150px; }
  .hdr-cep { display: none; }
  .search { order: 5; flex-basis: 100%; height: 48px; }
  .hdr-pill { margin-left: auto; height: 50px; padding: 0 5px; }
  .banner-main .hero { height: 440px; }
  .banners .slide { padding: 26px; align-items: start; }
  .banners .slide-title { font-size: 32px; }
  .banners .hero-dots { left: 26px; }
  .banner-side { grid-template-columns: 1fr; }
  .side-banner { min-height: 150px; }
  .hero { height: 460px; }
  .slide { padding: 28px; align-items: start; }
  .slide-title { font-size: 36px; }
  .hero-dots { left: 28px; }
  .grid4, .grid5, .kits, .tiers, .partners, .how-steps { grid-template-columns: 1fr 1fr; }
  .grid5 > :nth-child(n + 4) { display: flex; }
  .vitrine-linha { grid-auto-columns: calc((100% - 16px) / 2); }
  .club-band, .assist-band, .club-hero, .assist-hero { padding: 28px 22px; grid-template-columns: minmax(0, 1fr); }
  .assist-hero h1, .club-hero h1 { font-size: 32px; }
  .assist-band h2, .club-band h2 { font-size: 30px; }
  .assist-form, .member { padding: 18px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .assist-stats { grid-template-columns: 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
  .slide-ctas .btn-lg { --bh: 48px; padding: 0 20px; }
  .inst { padding: 20px; }
}
@media (max-width: 520px) {
  .grid4, .grid5, .kits, .tiers, .partners, .how-steps, .perks { grid-template-columns: 1fr; }
  .grid4, .grid5 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cats { grid-template-columns: 1fr 1fr; }
  .vitrine-linha { grid-auto-columns: 78%; }
  .logo { width: 128px; }
  .hdr-in { gap: 8px; }
  .hdr-menu { width: 40px; margin-left: -8px; }
  .hdr-pill { gap: 2px; }
  .hdr-circle { width: 38px; height: 38px; }
  .hdr-cart { width: 38px; height: 38px; }
  .promo-pill { font-size: 11.5px; padding: 0 12px; height: 28px; }
  .promo-text { font-size: 11.5px; }
  .sort label { font-size: 0; gap: 0; }
  .sort select { font-size: 14px; }
  .club-tiers { grid-template-columns: 1fr; }
  .pc-body { padding: 10px 12px 12px; }
  .pc-price { font-size: 18px; }
  .pc-name { font-size: 14px; }
  .pc .cb { font-size: 12px; }
  .cb-pct { display: none; }
  .tray-pricing .PrecoPrincipal { font-size: 32px; }
  .slide-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* =====================================================================================================
   Ajustes da loja (2026.10.19-3)
   ===================================================================================================== */

/* formas de pagamento refeitas pelo theme.js (montaFormas): à vista em lista e cartão em tabela de parcelas */
.fp { display: grid; gap: 18px; }
.fp-grupo { display: grid; gap: 8px; }
.fp-tit { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fp-avista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-avista li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--gelo); }
.fp-logo { flex: none; width: 42px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #fff; color: var(--azul); overflow: hidden; }
.fp-logo img { max-width: 34px; max-height: 22px; object-fit: contain; }
.fp-nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--ink); line-height: 1.25; }
.fp-avista b { flex: none; font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fp-bandeiras { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-bandeiras img { width: 46px; height: 30px; padding: 4px 6px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; }
.fp-parc { list-style: none; margin: 0; padding: 4px; border-radius: 14px; background: var(--gelo); display: grid; }
.fp-parc li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; }
.fp-parc li:nth-child(odd) { background: #fff; }
.fp-n { font-weight: 600; color: var(--ink); }
.fp-parc b { font-weight: 550; color: var(--ink); white-space: nowrap; }
.fp-parc small { font-size: 12px; color: var(--ink-3); text-align: right; white-space: nowrap; }
.fp-parc small.is-sj { color: var(--azul); font-weight: 550; }
.fp-min { font-size: 12px; color: var(--ink-3); }
.fp-cartao { border-radius: 14px; background: var(--gelo); }
.fp-cartao + .fp-cartao { margin-top: 6px; }
.fp-cartao summary { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; cursor: pointer; list-style: none; }
.fp-cartao summary::-webkit-details-marker { display: none; }
.fp-cartao summary small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.fp-cartao summary .ico { flex: none; color: var(--azul); transition: transform .2s; }
.fp-cartao[open] summary .ico { transform: rotate(180deg); }
.fp-cartao .fp-parc { margin: 0 6px 6px; background: #fff; }
.fp-cartao .fp-parc li:nth-child(odd) { background: var(--gelo); }
.fp-cartao .fp-min { padding: 0 12px 10px; }
/* sem o formato esperado, o HTML da Tray fica, só sem caixas, linhas e sombras */
.pay-tray:not(.is-montado) table, .pay-tray:not(.is-montado) td, .pay-tray:not(.is-montado) tr { border: 0 !important; box-shadow: none !important; background: none !important; }
.pay-tray:not(.is-montado) #atualizaFormas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pay-tray:not(.is-montado) #atualizaFormas li > a { display: block; font-weight: 600; color: var(--ink) !important; text-decoration: none !important; }
.pay-tray:not(.is-montado) .item-parcela { display: block; white-space: nowrap; }
.pay-tray #linkPagParcelado { display: none; }

/* carrinho rápido da Tray (modal "Meu Carrinho" depois de comprar): .cart-preview, montado pela plataforma;
   o theme.js marca os botões (cp-btn) e os cartões das recomendações (cp-card) pelo texto */
.cart-preview.modal { font-family: var(--f); }
.cart-preview .modal-dialog { width: min(780px, calc(100% - 32px)) !important; max-width: none !important; margin: 64px auto !important; }
.cart-preview .modal-content { border: 0 !important; border-radius: 28px !important; box-shadow: none !important; overflow: hidden; background: #fff !important; }
.cart-preview .modal-header { display: flex !important; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 12px; padding: 18px 20px 12px 26px !important; border: 0 !important; background: #fff !important; }
.cart-preview .modal-header::before, .cart-preview .modal-header::after { display: none !important; }
.cart-preview .modal-title { margin: 0 !important; font: 600 20px/1.2 var(--f) !important; color: var(--ink) !important; text-transform: none !important; }
.cart-preview .modal-title::before { content: ''; display: inline-block; width: 1.5em; height: .82em; margin-right: .4em; vertical-align: -.04em; background: url('../img/marca/simbolo-azul.svg') center / contain no-repeat; }
.cart-preview .close { float: none !important; flex: none; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; background: var(--gelo) !important; color: var(--ink) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1 !important; opacity: 1 !important; text-shadow: none !important; }
.cart-preview .close:hover { background: var(--nevoa) !important; color: var(--azul) !important; }
.cart-preview .modal-body { padding: 6px 26px 18px !important; color: var(--ink); font-size: 14px; max-height: none; }
.cart-preview .modal-body *, .cart-preview .modal-footer * { border-color: transparent !important; box-shadow: none !important; }
.cart-preview .modal-body :is(hr) { border: 0 !important; height: 1px; background: var(--line-2); }
.cart-preview .modal-footer { padding: 18px 26px 24px !important; border: 0 !important; background: var(--gelo) !important; text-align: left !important; }
.cart-preview img { max-width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; border: 0 !important; }
.cart-preview a { color: var(--ink); text-decoration: none; }
.cart-preview a:hover { color: var(--azul); }
.cart-preview [data-cart-preview-del] { color: var(--ink-3) !important; font-size: 13px !important; text-decoration: underline !important; }
.cart-preview .cart-preview-empty { margin: 8px 0 !important; font: 550 16px var(--f) !important; color: var(--ink-2); text-align: center; }
.cart-preview .cp-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 48px !important; width: auto; padding: 0 24px !important; border: 0 !important; border-radius: var(--pill) !important; background: #fff !important; background-image: none !important; color: var(--ink) !important; font: 550 15px/1 var(--f) !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; text-decoration: none !important; box-shadow: inset 0 0 0 1.5px var(--line) !important; cursor: pointer; transition: background .15s, color .15s; }
.cart-preview .cp-btn:hover { box-shadow: inset 0 0 0 1.5px var(--azul) !important; color: var(--azul) !important; }
.cart-preview .cp-btn-primario { background: var(--azul) !important; color: #fff !important; box-shadow: none !important; }
.cart-preview .cp-btn-primario:hover { background: var(--azul-hover) !important; color: #fff !important; box-shadow: none !important; }
.cart-preview .cp-btn-mini { height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; background: var(--nevoa) !important; color: var(--azul) !important; box-shadow: none !important; }
.cart-preview .cp-btn-mini:hover { background: var(--azul) !important; color: #fff !important; }
.cart-preview .cp-recs-tit { margin: 18px 0 10px !important; font: 600 17px/1.2 var(--f) !important; color: var(--ink) !important; }
.cart-preview .cp-card { display: flex !important; flex-direction: column; gap: 8px; padding: 10px !important; border: 0 !important; border-radius: 18px !important; background: var(--gelo) !important; text-align: left !important; }
.cart-preview .cp-card img { aspect-ratio: 4 / 3; width: 100%; padding: 6px; border-radius: 12px; background: #fff; }
.cart-preview .cp-card :is(a, p, span, div) { font-family: var(--f) !important; }
.cart-preview .cp-card .cp-btn { width: 100%; margin-top: auto; }

/* filtros: faixa de preço arrastável */
.f-preco { gap: 12px; }
.faixa { position: relative; height: 28px; margin: 2px 4px 0; }
.faixa-trilho { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: var(--line); }
.faixa-sel { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 4px; background: var(--azul); }
.faixa input[type="range"] { position: absolute; left: -4px; right: -4px; top: 0; z-index: 2; width: calc(100% + 8px); height: 28px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.faixa input[type="range"]::-webkit-slider-runnable-track { height: 28px; background: none; border: 0; }
.faixa input[type="range"]::-moz-range-track { height: 28px; background: none; border: 0; }
.faixa input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; border: 2.5px solid var(--azul); background: #fff; cursor: grab; transition: transform .15s; }
.faixa input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 19px; height: 19px; border-radius: 50%; border: 2.5px solid var(--azul); background: #fff; cursor: grab; }
.faixa input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.faixa input[type="range"]:focus { outline: none; }
.faixa input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(51, 64, 255, .18); }
.faixa input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(51, 64, 255, .18); }
.faixa-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.faixa-campos label { display: grid; gap: 4px; margin: 0; font-size: 11.5px; font-weight: 550; color: var(--ink-3); }
.faixa-campos label > span { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.faixa-campos label > span:focus-within { box-shadow: inset 0 0 0 1.5px var(--azul); }
.faixa-campos i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.faixa-campos input { width: 100%; min-width: 0; height: 36px; padding: 0; border: 0 !important; background: none; font: 550 14px var(--f); color: var(--ink); outline: none; }
.faixa-ate { padding-bottom: 11px; font-size: 12.5px; color: var(--ink-3); }

/* filtros: entrega e ofertas (chaves) */
.f-switch { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 4px 0; font-size: 14px; font-weight: 500 !important; color: var(--ink); cursor: pointer; }
.f-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.f-switch .sw { flex: none; position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--inox); transition: background .2s; }
.f-switch .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.f-switch input:checked + .sw { background: var(--azul); }
.f-switch input:checked + .sw::after { transform: translateX(16px); }
.f-switch input:focus-visible + .sw { outline: 2px solid var(--azul); outline-offset: 2px; }
.f-nota { font-size: 12.5px; color: var(--ink-3); }
.f-nota:empty { display: none; }
.f-nota button { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-weight: 550; text-decoration: underline; cursor: pointer; }
.f-cep { display: flex; gap: 6px; }
.f-cep[hidden] { display: none; }
.f-cep .input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: var(--pill); border: 1.5px solid var(--line); font: 550 14px var(--f); }
.f-cep .input:focus { border-color: var(--azul); outline: none; }
.f-res { margin: 0 auto 0 0; font-size: 13.5px; font-weight: 550; color: var(--ink-3); }
.f-res[hidden] { display: none; }
.pc[hidden] { display: none !important; }
.pc.is-checando { opacity: .5; }
.f-vazio[hidden] { display: none; }

/* ordenação com lista própria (o select da Tray fica escondido por baixo) */
.sel { position: relative; }
.sort .sel-nativo { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.sel-bt { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 18px; border: 0; border-radius: var(--pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 550 14px var(--f); color: var(--ink); cursor: pointer; white-space: nowrap; transition: box-shadow .15s; }
.sel-bt:hover, .sel-bt[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--azul); }
.sel-bt .ico { color: var(--azul); transition: transform .2s; }
.sel-bt[aria-expanded="true"] .ico { transform: rotate(180deg); }
.sel-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 100%; width: max-content; margin: 0; padding: 6px; list-style: none; border-radius: 20px; background: #fff; box-shadow: var(--sh-3); outline: none; }
.sel-lista[hidden] { display: none; }
.sel-lista li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border-radius: 14px; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sel-lista li.is-ativo { background: var(--gelo); color: var(--azul); }
.sel-lista li[aria-selected="true"] { color: var(--azul); font-weight: 550; }
.sel-lista li[aria-selected="true"]::after { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* busca sem resultado: página da Tray (.result-not-found, com estilo próprio embutido) no padrão do tema */
.main .result-not-found { display: grid !important; justify-items: center; gap: 14px !important; max-width: 680px; margin: 8px auto 0 !important; padding: 44px 32px 40px; border-radius: 28px; background: #fff; text-align: center; }
.main .result-not-found::before { content: ''; width: 72px; height: 72px; border-radius: 50%; background: var(--nevoa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / 30px no-repeat; }
.main .result-not-found .title { margin: 0 !important; font: 600 24px/1.25 var(--f) !important; color: var(--ink) !important; }
.main .result-not-found .sub-title { margin: 0 !important; font-size: 15px !important; color: var(--ink-3) !important; line-height: 1.5 !important; }
.main .result-not-found ul.info { width: 100% !important; max-width: 500px; display: grid !important; gap: 10px !important; margin: 4px 0 0 !important; padding: 18px 22px !important; border: 0 !important; border-radius: 18px !important; background: var(--gelo) !important; list-style: none; text-align: left; }
.main .result-not-found ul.info li { display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; }
.main .result-not-found .cicle { flex: none; width: 20px !important; height: 20px !important; margin-top: 1px; border-radius: 50% !important; background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat !important; }
.main .result-not-found .title-info { font-size: 14.5px !important; color: var(--ink-2) !important; line-height: 1.45; }
.main .result-not-found .history-back { display: inline-flex !important; align-items: center; gap: 8px !important; height: 48px; margin-top: 6px; padding: 0 24px !important; border-radius: var(--pill); background: var(--azul); color: #fff !important; font-weight: 550; font-size: 15px; text-decoration: none; }
.main .result-not-found .history-back:hover { background: var(--azul-hover); }
.main .result-not-found .history-back .arrow-back { font-size: 20px !important; color: #fff !important; }
.main .result-not-found .history-back .label-back { height: auto !important; color: #fff !important; font: 550 15px/1 var(--f) !important; }
.rnf-cats { display: grid; gap: 10px; justify-items: center; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line-2); width: 100%; }
.rnf-cats p { font-size: 13px; font-weight: 550; color: var(--ink-3); }
.rnf-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rnf-chips .chip { text-decoration: none; }
.rnf-chips .chip:hover { background: var(--nevoa); color: var(--azul); }

/* Quem Somos: o texto da página Empresa da Tray sem as caixas e sombras da loja */
.qs-historia :is(div, section, h1, h2, h3, h4, table, td) { border: 0 !important; box-shadow: none !important; background-color: transparent !important; }

@media (max-width: 640px) {
  .cart-preview .modal-dialog { margin: 16px auto !important; }
  .cart-preview .modal-body, .cart-preview .modal-footer { padding-left: 18px !important; padding-right: 18px !important; }
  .cart-preview .cp-btn { width: 100%; }
  .main .result-not-found { padding: 32px 18px; }
  .main .result-not-found .title { font-size: 20px !important; }
  .sel-lista { right: auto; left: 0; }
}

/* Fale com a gente (elements/contato): canais ao lado e o formulário da Tray num cartão */
.ct-grade { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.ct-canais { position: sticky; top: 16px; display: grid; gap: 10px; }
.ct-canal { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: #fff; color: var(--ink); text-decoration: none; }
.ct-canal[hidden] { display: none; }
.ct-canal > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ct-canal b { font-size: 15px; }
.ct-canal small { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.ct-canal small a { color: var(--ink-2); font-weight: 550; text-decoration: none; }
.ct-canal small a:hover, a.ct-canal:hover b { color: var(--azul); }
.ct-zap { background: var(--azul); color: #fff; }
.ct-zap .qs-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.ct-zap small { color: rgba(255, 255, 255, .82); }
a.ct-zap:hover b { color: #fff; }
.ct-canais .inst-ajuda { margin-top: 6px; }
.ct-form { padding: 32px 40px 36px; min-width: 0; }
.ct-form-head { display: grid; gap: 4px; margin-bottom: 18px; }
.ct-form-head h2 { font-size: 24px; }
.ct-form-head p { color: var(--ink-3); }
/* o que a Tray repete (título, mapa do site, texto de abertura, telefones e e-mail) sai: está nos cartões */
[data-contato] .Mapa, [data-contato] .bottom, [data-contato] .topBorder, [data-contato] .tit-contato,
[data-contato] .board:has(> h1), [data-contato] .board:has(> .contato-telefones), [data-contato] .board:has(> .email-texto), [data-contato] > .board:has(> p) { display: none !important; }
[data-contato] :is(.container3, .container2, .board) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; width: auto !important; }
[data-contato] .formulario-contato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0; }
[data-contato] .formulario-contato > br, [data-contato] .formulario-contato > input[type="hidden"] { display: none; }
[data-contato] .msg-obriga { grid-column: 1 / -1; font-size: 12.5px !important; color: var(--ink-3) !important; }
[data-contato] .obriga-barra { color: var(--azul) !important; font-weight: 600; }
[data-contato] .formulario-contato > label { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 10px; margin: 0 !important; font-size: 13.5px; font-weight: 550 !important; color: var(--ink-2); }
[data-contato] .formulario-contato > label > :not(span) , [data-contato] .formulario-contato > label > #spanTextarea { grid-column: 1 / -1; }
[data-contato] .formulario-contato > label > span.block:first-child { grid-row: 1; grid-column: 1; }
[data-contato] .formulario-contato > label:has(textarea), [data-contato] .formulario-contato > label:has(#assunto) { grid-column: 1 / -1; }
[data-contato] .formulario-contato > label > span.block:first-child { color: var(--ink-2) !important; }
[data-contato] .formulario-contato > label > span:not(.block):not(.table) { grid-row: 1; grid-column: 2; font-size: 12px; font-weight: 500; color: var(--ink-3) !important; }
[data-contato] input.text, [data-contato] textarea, [data-contato] select { width: 100% !important; max-width: none !important; height: 48px; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; font: 500 15px var(--f) !important; color: var(--ink) !important; outline: none; transition: border-color .15s, box-shadow .15s; }
[data-contato] textarea { height: 150px; padding: 12px 16px !important; resize: vertical; line-height: 1.5; }
[data-contato] #spanTextarea { display: block !important; width: 100%; }
[data-contato] input.text:focus, [data-contato] textarea:focus { border-color: var(--azul) !important; box-shadow: 0 0 0 4px rgba(51, 64, 255, .12) !important; }
[data-contato] .mensagensErro { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 550; color: #C62828; }
[data-contato] #div_erro:not(:empty) { margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; background: #FDECEC; color: #B71C1C; font-size: 14px; }
[data-contato] #btn_submit { grid-column: 1 / -1; justify-self: start; display: inline-flex !important; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: var(--pill); background: var(--azul); color: #fff !important; font: 550 16px/1 var(--f); text-decoration: none !important; cursor: pointer; transition: background .15s; }
[data-contato] #btn_submit:hover { background: var(--azul-hover); }
[data-contato] #btn_submit img { display: none !important; }
[data-contato] #btn_submit:not(.is-pronto)::after { content: 'Enviar mensagem'; }

/* páginas internas sem texto no painel (snippets/texto-padrao): Para Empresas e Trabalhe Conosco */
.inst-doc .rte .tp-lead { font-size: 18px; color: var(--ink); }
.tp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.tp-card { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: var(--gelo); }
.tp-card .qs-ico { margin-bottom: 6px; background: #fff; }
.tp-card b { font-size: 16px; color: var(--ink); }
.tp-card p { margin: 0 !important; font-size: 14px; color: var(--ink-3); }
.inst-doc .rte ol.tp-passos { list-style: none; counter-reset: passo; margin: 14px 0 6px; padding: 0; display: grid; gap: 10px; }
.inst-doc .rte ol.tp-passos li { counter-increment: passo; position: relative; display: grid; gap: 2px; margin: 0; padding: 4px 0 4px 54px; min-height: 40px; }
.inst-doc .rte ol.tp-passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 600; }
.tp-passos b { color: var(--ink); }
.tp-passos span { color: var(--ink-3); font-size: 14.5px; }
.tp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding: 28px 30px; border-radius: var(--r-xl, 28px); background: var(--noite); color: #fff; }
.tp-cta > div:first-child { display: grid; gap: 4px; }
.tp-cta b { font-size: 20px; }
.tp-cta span { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.tp-cta-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.inst-doc .rte .tp-cta a { text-decoration: none; }
.tp-breve { display: grid; justify-items: center; gap: 10px; padding: 30px 10px; text-align: center; }
.tp-breve b { font-size: 20px; color: var(--ink); }
.tp-breve p { margin: 0 !important; color: var(--ink-3); }

@media (max-width: 1040px) {
  .ct-grade { grid-template-columns: minmax(0, 1fr); }
  .ct-canais { position: static; }
  .ct-form { padding: 26px 22px 28px; }
}
@media (max-width: 640px) {
  [data-contato] .formulario-contato { grid-template-columns: minmax(0, 1fr); }
  [data-contato] #btn_submit { width: 100%; justify-content: center; }
  .tp-cta { padding: 24px 20px; }
}
/* a lista das formas de pagamento fica dentro de .rte: sem o recuo e o espaçamento das listas de texto */
.pay-tray .fp ul, .pay-tray .fp ol { margin: 0; padding: 0; list-style: none; }
.pay-tray .fp li { margin: 0; }
.pay-tray .fp .fp-parc { padding: 4px; }
.inst-doc .rte .tp-cta .btn-line-white { color: #fff; }
.inst-doc .rte .tp-cta .btn-white { color: var(--azul); }

/* preço dos cartões travado: a loja carrega o Bootstrap e outras folhas com margem e altura de linha em
   parágrafos (p { margin: 0 0 10px }), que abriam espaço entre preço, Pix e parcelas */
html body .pc .pc-prices > :is(p, span, div, small) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body .pc .pc-prices { margin-top: 6px !important; margin-bottom: 0 !important; }
html body .pc .pc-price { line-height: 1.15 !important; }
html body .pc :is(.pc-pix, .pc-inst, .price-old) { line-height: 1.4 !important; }
html body .pc .pc-brand, html body .pc .pc-name { margin-top: 0 !important; margin-bottom: 0 !important; }
html body .pc p.cb { margin: 6px 0 10px !important; line-height: 1.3 !important; }

/* produto sem estoque: o "Avise-me" da Tray (#produto_nao_disp > .botao-nao_indisponivel + #nao_disp com o
   e-mail, o botão #letMeKnow e o aviso) num cartão: título com sino, texto, campo e botão lado a lado */
html body #produto_nao_disp:has(#nao_disp, .botao-nao_indisponivel) { display: grid; gap: 12px; margin: 0; padding: 18px; border-radius: var(--r-lg); background: var(--gelo); }
html body #produto_nao_disp .botao-nao_indisponivel { display: flex !important; align-items: center; gap: 12px; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink) !important; font-size: 0 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: default; pointer-events: none; }
html body #produto_nao_disp .botao-nao_indisponivel::before { content: ''; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--nevoa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9'/%3E%3Cpath d='M10.3 20a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 20px no-repeat; }
html body #produto_nao_disp .botao-nao_indisponivel::after { content: 'Produto indisponível no momento'; font: 600 17px/1.25 var(--f); color: var(--ink); }
html body #nao_disp { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
html body #nao_disp > br { display: none; }
html body #nao_disp > .color { grid-row: 1; grid-column: 1 / -1; display: block !important; margin: 0 !important; font-size: 0 !important; color: var(--ink-2) !important; text-transform: none !important; }
html body #nao_disp > .color::after { content: 'Deixe o seu e-mail e a gente avisa assim que chegar.'; font: 400 14px/1.45 var(--f); }
html body #nao_disp > label { grid-row: 2; grid-column: 1; display: block !important; min-width: 0; margin: 0 !important; font-size: 0 !important; }
html body #nao_disp > label br { display: none; }
html body #nao_disp #email_avise { width: 100% !important; max-width: none !important; height: 48px !important; margin: 0 !important; padding: 0 18px !important; border: 1.5px solid var(--line) !important; border-radius: var(--pill) !important; background: #fff !important; box-shadow: none !important; font: 500 15px var(--f) !important; color: var(--ink) !important; outline: none; }
html body #nao_disp #email_avise:focus { border-color: var(--azul) !important; box-shadow: 0 0 0 4px rgba(51, 64, 255, .12) !important; }
html body #nao_disp #letMeKnow { grid-row: 2; grid-column: 2; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 48px; margin: 0 !important; padding: 0 22px !important; border: 0 !important; border-radius: var(--pill) !important; background: var(--azul) !important; color: #fff !important; font: 550 15px/1 var(--f) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .15s; }
html body #nao_disp #letMeKnow:hover { background: var(--azul-hover) !important; }
html body #nao_disp #letMeKnow::before { content: 'Avise-me'; }
html body #nao_disp #letMeKnow img { display: none !important; }
html body #nao_disp #div_erro { grid-column: 1 / -1; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-radius: 12px !important; background: #fff !important; color: var(--ink-2) !important; font: 500 13.5px/1.4 var(--f) !important; }
@media (max-width: 380px) {
  html body #nao_disp { grid-template-columns: minmax(0, 1fr); }
  html body #nao_disp #letMeKnow { grid-row: 3; grid-column: 1; width: 100%; }
}
/* o preço da Tray vem em caixas com recuo próprio (.produto-preco, #preco): zerado para o "Avise-me" e o preço
   ficarem na mesma linha dos outros blocos da coluna de compra */
html body .tray-pricing :is(#product-priceBox, .produto-preco, #preco, #produto_preco, #produto_nao_disp) { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; float: none !important; }
html body .tray-pricing :is(#product-priceBox, .produto-preco, #preco, #produto_preco) { padding-left: 0 !important; padding-right: 0 !important; }
html body #produto_nao_disp { margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box; }

/* cadastro de cliente (elements/cadastro + theme.js): formulário da Tray em etapas, num cartão, com as
   vantagens ao lado */
.cad-pg { padding-top: 28px; }
.cad-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; max-width: 1120px; margin: 0 auto; }
.cad-card { padding: 34px 40px 32px; min-width: 0; }
.cad-cab { display: grid; gap: 6px; margin-bottom: 22px; }
.cad-cab h1 { font-size: 30px; line-height: 1.15; }
.cad-cab > p { color: var(--ink-3); }
.cad-progresso { list-style: none; display: flex; gap: 6px; margin: 16px 0 0; padding: 0; }
.cad-progresso[hidden] { display: none; }
.cad-progresso li { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--gelo); font-size: 13px; font-weight: 550; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cad-progresso li span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.cad-progresso li.is-on { background: var(--nevoa); color: var(--azul); }
.cad-progresso li.is-on span { background: var(--azul); color: #fff; }
.cad-progresso li.is-feito { color: var(--ink-2); }
.cad-progresso li.is-feito span { background: var(--azul); color: #fff; font-size: 0; }
.cad-progresso li.is-feito span::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* o que a Tray repete ou enfeita: título em caixa, "Ambiente seguro", cantos e linhas */
.cad-tray .container3:first-child, .cad-tray .Seguro, .cad-tray .bottom, .cad-tray .topBorder, .cad-tray .carrinho-heading, .cad-tray .cad-escondido { display: none !important; }
.cad-tray :is(.container, .container2, .board, fieldset) { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; float: none !important; }
.cad-tray fieldset.cad-fs { display: block; min-width: 0; }
.cad-tray br { display: none; }
/* Pessoa física / jurídica: duas pílulas */
.cad-tipo { margin: 0 0 18px; }
.cad-tipo ul { list-style: none; display: inline-flex; gap: 4px; margin: 0; padding: 4px; border-radius: 999px; background: var(--gelo); }
.cad-tipo li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; float: none !important; }
.cad-tipo li a { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; color: var(--ink-2) !important; font: 550 14px var(--f) !important; text-transform: none !important; text-decoration: none !important; border: 0 !important; background: none !important; }
.cad-tipo li.aberta a { background: #fff !important; color: var(--azul) !important; box-shadow: inset 0 0 0 1.5px var(--azul); }
/* cada etapa: campos em duas colunas */
.cad-passo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.cad-passo[hidden] { display: none; }
.cad-passo > :is(.cad-tipo, .cad-nota, .cad-check, .termContainerRegister, .cad-nav) { grid-column: 1 / -1; }
.cad-passo :is(#fisica, #juridica), .cad-passo p { display: contents; }
.cad-tray label { margin: 0 !important; font-weight: 550 !important; }
.cad-campo { position: relative; display: grid; gap: 6px; align-content: start; font-size: 13.5px; color: var(--ink-2); }
.cad-campo.cad-largo { grid-column: 1 / -1; }
.cad-campo.is-opcional::after { content: "opcional"; position: absolute; top: 1px; right: 0; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.cad-tray :is(input.text, input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select) { width: 100% !important; max-width: none !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important; border: 1.5px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; font: 500 15px var(--f) !important; color: var(--ink) !important; outline: none; transition: border-color .15s, box-shadow .15s; }
.cad-tray :is(input, select):focus { border-color: var(--azul) !important; box-shadow: 0 0 0 4px rgba(51, 64, 255, .12) !important; }
.cad-tray input.is-erro { border-color: #D93025 !important; }
.cad-erro, .cad-tray .mensagensErro { display: block; font-size: 12.5px; font-weight: 550; color: #C62828; }
.cad-tray .mensagensErro[style*="none"] { display: none !important; }
.cad-nota { display: block; margin-top: 4px; font-size: 13px; font-weight: 550; color: var(--ink-2); }
.cad-check { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--gelo); font-size: 14px; font-weight: 500 !important; color: var(--ink-2); cursor: pointer; }
.cad-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
.termContainerRegister .termText { margin: 4px 0 0 !important; font-size: 13px; color: var(--ink-3); }
.termContainerRegister .termText a { color: var(--azul) !important; font-weight: 550; }
.cad-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.cad-nav .btn { min-width: 150px; }
.cad-tray .cad-enviar { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 52px !important; min-width: 220px; margin: 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: 999px !important; background: var(--azul) !important; background-image: none !important; color: #fff !important; font: 550 16px/1 var(--f) !important; text-transform: none !important; float: none !important; cursor: pointer; box-shadow: none !important; }
.cad-tray .cad-enviar:hover { background: var(--azul-hover) !important; }
.cad-tray .cad-enviar .botao-commerce-img { background: none !important; padding: 0 !important; color: inherit !important; font: inherit !important; }
/* lado: vantagens e entrar */
.cad-lado { position: sticky; top: 16px; display: grid; gap: 12px; }
.cad-vant { position: relative; display: grid; gap: 14px; padding: 26px 24px; border-radius: var(--r-lg); background: var(--azul); color: #fff; overflow: hidden; }
.cad-vant-marca { position: absolute; right: -26px; top: -18px; opacity: .12; }
.cad-vant-marca img { width: 170px; height: auto; }
.cad-vant b { font-size: 19px; }
.cad-vant ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cad-vant li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.cad-vant li .ico { flex: none; margin-top: 2px; color: #fff; }
.cad-vant li strong { display: block; font-size: 14.5px; color: #fff; }
.cad-entrar { display: grid; gap: 10px; padding: 20px 22px; }
.cad-seguro { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: var(--ink-3); }
.cad-seguro .ico { color: var(--azul); }
@media (max-width: 1000px) {
  .cad-grade { grid-template-columns: minmax(0, 1fr); }
  .cad-lado { position: static; }
}
@media (max-width: 640px) {
  .cad-card { padding: 24px 18px; }
  .cad-cab h1 { font-size: 24px; }
  .cad-passo { grid-template-columns: minmax(0, 1fr); }
  .cad-progresso li { justify-content: center; padding: 8px; font-size: 0; }
  .cad-progresso li span { font-size: 12px; }
  .cad-progresso li.is-on { font-size: 12.5px; flex: 2.5; }
  .cad-nav .btn, .cad-tray .cad-enviar { min-width: 0; flex: 1; }
}
.cad-cab .kicker { justify-self: start; color: var(--azul); background: var(--nevoa); }
/* cadastro: as vantagens vêm antes no HTML e ficam à direita; no celular, abaixo do formulário */
.cad-grade > .cad-card { grid-column: 1; grid-row: 1; }
.cad-grade > .cad-lado { grid-column: 2; grid-row: 1; }
/* caixas da Tray sem campos (título "Cadastro de novo cliente" e afins) saem; as abas PF/PJ sem linhas */
.cad-tray .container3:not(:has(input, select, textarea)), .cad-tray .cad-escondido, .cad-tray h1 { display: none !important; }
.cad-tray .container3 { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.cad-tray #CadastroAbas, .cad-tray #CadastroAbas ul, .cad-tray #CadastroAbas li { border: 0 !important; box-shadow: none !important; background-image: none !important; height: auto !important; }
.cad-tray #CadastroAbas { background: none !important; }
.cad-tray #CadastroAbas ~ div[style*="clear"] { display: none; }
/* CEP em duas partes (00000 - 000) e outros campos com mais de uma caixa */
.cad-tray .cad-campo.cad-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cad-tray .cad-campo.cad-multi > :is(input, select) { flex: 1 1 110px; width: auto !important; min-width: 0; }
.cad-tray .cad-campo.cad-multi > .cad-erro, .cad-tray .cad-campo.cad-multi > .mensagensErro { flex-basis: 100%; }
.cad-passo a:not(.btn) { color: var(--azul); font-weight: 550; font-size: 13px; }
@media (max-width: 1000px) {
  .cad-grade > .cad-card { grid-row: 1; }
  .cad-grade > .cad-lado { grid-column: 1; grid-row: 2; }
}
/* cadastro: blocos extras da Tray dentro das etapas (endereço de cobrança e afins) */
.cad-passo > .cad-extra { grid-column: 1 / -1; display: grid; gap: 12px; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-radius: 14px; background: var(--gelo) !important; height: auto !important; }
.cad-passo > .cad-extra :is(legend, h3, h4, h5, strong, b) { margin: 0 !important; padding: 0 !important; font: 550 14px/1.4 var(--f) !important; color: var(--ink) !important; }
.cad-passo > .cad-extra fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.cad-passo > .cad-extra fieldset > :is(legend, .cad-check, strong) { grid-column: 1 / -1; }
/* o bloco do Avise-me vazio (produto com estoque) não aparece */
html body #produto_nao_disp:not(:has(#nao_disp, .botao-nao_indisponivel)) { display: none !important; }
/* link "Ver todas as formas de pagamento" do preço da Tray: discreto, como o resto do bloco */
html body .tray-pricing #info a, html body .tray-pricing #showPaymentMethods, html body .tray-pricing a[href="#formasPagto"] { font-size: 13.5px !important; font-weight: 550 !important; }

/* carrinho rápido: a Tray centraliza o modal com posição e deslocamento próprios (largura de computador),
   que no celular jogam o modal para fora da tela; aqui ele fica no fluxo, centralizado pela margem */
.cart-preview.modal { overflow-x: hidden !important; overflow-y: auto !important; }
.cart-preview .modal-dialog { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; }
.cart-preview .modal-content, .cart-preview .modal-body, .cart-preview .modal-footer { min-width: 0 !important; max-width: 100% !important; }
.cart-preview .modal-body *, .cart-preview .modal-footer * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .cart-preview .modal-dialog { width: auto !important; max-width: none !important; margin: 12px !important; }
  .cart-preview .modal-content { border-radius: 22px !important; }
  .cart-preview .modal-header { padding: 14px 14px 10px 18px !important; }
  .cart-preview .modal-title { font-size: 18px !important; }
  .cart-preview .modal-body { padding: 4px 16px 14px !important; }
  .cart-preview .modal-footer { padding: 14px 16px 18px !important; }
  /* botões um embaixo do outro, Avançar em cima */
  .cart-preview .modal-footer :has(> .cp-btn-primario) { display: flex !important; flex-direction: column-reverse; gap: 8px; }
  .cart-preview .cp-btn { width: 100% !important; height: 46px !important; }
  /* recomendações: uma fileira que rola para o lado */
  .cart-preview :has(> .cp-card) { display: flex !important; gap: 10px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; grid-template-columns: none !important; }
  .cart-preview .cp-card { flex: 0 0 150px !important; width: 150px !important; scroll-snap-align: start; }
  .cart-preview .cp-card .cp-btn { height: 36px !important; }
  .cart-preview .cp-recs-tit { font-size: 15px !important; }
  /* item do carrinho: foto, nome e preço sem estourar */
  .cart-preview .modal-body img { max-width: 64px; }
  .cart-preview .cp-card img { max-width: 100%; }
}

/* migalhas: o "…" só existe no celular; lá fica "… › categoria atual" numa linha (o produto não entra) */
.crumbs-mais { display: none !important; }
.crumbs-mais button { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--nevoa); color: var(--azul); font: 600 14px/1 var(--f); letter-spacing: .05em; cursor: pointer; }
@media (max-width: 640px) {
  .crumbs { margin-bottom: 12px; }
  .crumbs ol { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .crumbs li { min-width: 0; flex: none; }
  .crumbs li:last-child, .crumbs .crumbs-atual { flex: 0 1 auto; }
  .crumbs :is(a, span[aria-current]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumbs li > a, .crumbs li > span { display: block; min-width: 0; }
  .crumbs.tem-meio:not(.is-aberto) :is(.crumbs-inicio, .crumbs-meio, .crumbs-produto) { display: none; }
  .crumbs.tem-meio:not(.is-aberto) .crumbs-mais { display: inline-flex !important; }
  .crumbs.tem-meio:not(.is-aberto) .crumbs-atual [aria-current], .crumbs.tem-meio:not(.is-aberto) .crumbs-atual a { color: var(--ink-2); font-weight: 550; }
  .crumbs.is-aberto ol { flex-wrap: wrap; }
  .crumbs.is-aberto :is(a, span[aria-current]) { white-space: normal; }
}

/* toque no celular: sem a espera do toque duplo de zoom, o primeiro toque já vale */
html { touch-action: manipulation; }
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: rgba(51, 64, 255, .12); }

/* cashback da própria Tray dentro do bloco de preço (o theme.js marca .tray-cashback): névoa e azul, numa linha só */
html body .tray-pricing .tray-cashback { display: block !important; width: auto !important; margin: 10px 0 0 !important; padding: 12px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--nevoa) !important; box-shadow: none !important; color: var(--azul) !important; font: 550 14px/1.4 var(--f) !important; text-align: left !important; }
html body .tray-pricing .tray-cashback * { display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; font: inherit !important; float: none !important; position: static !important; }
html body .tray-pricing .tray-cashback :is(svg, img, i) { display: inline-block !important; width: 18px !important; height: 18px !important; margin: 0 6px 0 0 !important; vertical-align: -4px; color: var(--azul) !important; fill: currentColor; }
html body .tray-pricing .tray-cashback :is(svg *, svg path) { display: initial !important; }

/* mega menu: listas longas sem esticar a página */
.mega { max-height: calc(100vh - var(--hdr-h, 160px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ceu) transparent; }
.mega-col .mega-mais, .mcp-subs .mega-mais { color: var(--azul) !important; font-weight: 550; font-size: 13.5px; }
.mega-col .mega-mais:hover { text-decoration: underline; }
.mega-cat-pan.mcp-muitas { width: 900px; }
.mega-cat-pan.mcp-muitas.sem-destaque { width: 680px; }
.mega-cat-pan.mcp-muitas .mcp-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-cat-pan.mcp-muitas.sem-destaque .mcp-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcp-subs .mega-mais { grid-column: 1 / -1; justify-content: flex-start; }
html body .tray-pricing .tray-cashback * + * { margin-left: .3em !important; } /* as partes do aviso vêm em elementos separados, sem espaço entre elas */

/* "Todas as categorias": menu dentro do mega menu — principais à esquerda em Azul Universo, subcategorias da
   escolhida ao lado (em colunas) e o destaque à direita; altura fixa, para não pular ao trocar de categoria */
.mega.mega-todas { grid-template-columns: 270px minmax(0, 1fr) 270px; gap: 0; padding: 0; overflow: hidden; height: min(560px, calc(100vh - var(--hdr-h, 160px) - 24px)); max-height: none; }
.mega-todas.sem-destaque, .mega-todas:not(:has(.mega-dest)) { grid-template-columns: 270px minmax(0, 1fr); }
.mt-lista { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; overflow-y: auto; background: var(--azul); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .4) transparent; }
.mt-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 12px; color: #fff; font-size: 14.5px; font-weight: 550; line-height: 1.25; transition: background .15s, color .15s; }
.mt-item .cat-ico { flex: none; color: rgba(255, 255, 255, .85); }
.mt-item span { flex: 1; min-width: 0; }
.mt-item .mt-seta { flex: none; opacity: .7; }
.mt-item:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mt-item.on { background: #fff; color: var(--azul); }
.mt-item.on .cat-ico, .mt-item.on .mt-seta { color: var(--azul); opacity: 1; }
.mt-paineis { padding: 22px 28px 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ceu) transparent; }
.mt-painel { display: grid; gap: 14px; align-content: start; }
.mt-painel[hidden] { display: none; }
.mt-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.mt-cab b { font-size: 19px; color: var(--noite); }
.mt-cab span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--azul); white-space: nowrap; }
.mt-cab:hover span { text-decoration: underline; }
.mt-subs { column-count: 3; column-gap: 24px; }
.mt-subs a { display: block; break-inside: avoid; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.mt-subs a:hover { background: var(--nevoa); color: var(--azul); }
.mt-vazio { font-size: 14px; color: var(--ink-3); }
.mega-todas .mega-foot { margin-top: auto; padding-top: 14px; }
.mega-todas .mt-painel:not([hidden]) { margin-bottom: 18px; }
.mega-todas .mega-dest { padding: 22px 22px 16px; border-left: 1px solid var(--line-2); overflow-y: auto; }
@media (max-width: 1240px) {
  .mega.mega-todas { grid-template-columns: 240px minmax(0, 1fr) 240px; }
  .mt-subs { column-count: 2; }
}

/* o aviso de cashback da própria Tray ("Ganhe 5% de cashback nesta compra") sai: a caixa de compra já tem o
   bloco de cashback do tema, com o valor e os níveis do Mercoclub */
html body .tray-pricing .tray-cashback { display: none !important; }

/* painel de cada categoria: subcategorias compactas, em colunas corridas (sem a seta e sem alinhar as linhas pela maior) */
.mega-cat-pan .mcp-subs { display: block; column-count: 2; column-gap: 22px; margin-bottom: 12px; }
.mega-cat-pan.mcp-muitas .mcp-subs, .mega-cat-pan.mcp-muitas.sem-destaque .mcp-subs { column-count: 3; }
.mega-cat-pan.sem-destaque:not(.mcp-muitas) .mcp-subs { column-count: 1; }
.mega-cat-pan .mcp-subs a { display: block; break-inside: avoid; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.3; }
.mega-cat-pan .mcp-subs a .ico { display: none; }
.mega-cat-pan .mcp-subs .mega-mais { column-span: all; margin-top: 6px; }
.mega-cat-pan .mcp-head { margin-bottom: 8px; }

/* "Todas as categorias": painel mais alto, coluna azul mais larga e categorias com mais respiro */
.mega.mega-todas { grid-template-columns: 310px minmax(0, 1fr) 270px; height: min(720px, calc(100vh - var(--hdr-h, 160px) - 20px)); }
.mt-lista { gap: 4px; padding: 18px 14px; }
.mt-item { min-height: 50px; padding: 11px 16px; font-size: 15px; gap: 12px; }
@media (max-width: 1240px) {
  .mega.mega-todas { grid-template-columns: 270px minmax(0, 1fr) 240px; }
}

/* vitrines com produtos escolhidos à mão: cartões provisórios enquanto a API da loja responde */
.pc.pc-esqueleto { min-height: 470px; box-shadow: none; background: linear-gradient(100deg, var(--nevoa) 40%, #fff 50%, var(--nevoa) 60%) 0 0 / 300% 100%; animation: esqueleto 1.4s linear infinite; }
@keyframes esqueleto { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .pc.pc-esqueleto { animation: none; } }

/* Ofertas do dia: botão para a lista completa de ofertas, embaixo da moldura (abaixo das setas, quando há) */
.od-pe { display: flex; justify-content: center; margin-top: 30px; }
.od-pe.com-nav { margin-top: 54px; }
.od-pe .btn { gap: 8px; }
@media (max-width: 760px) {
  .od-pe { margin-top: 22px; }
  .od-pe.com-nav { margin-top: 40px; }
}

/* selo de cashback do app da Tray ("Ganhe 5% de cashback nesta compra"): o script dela cria #cashback-pdp-badge
   com o conteúdo num shadow DOM, logo depois da caixa de preço. O tema já mostra o cashback do Mercoclub. */
#cashback-pdp-badge { display: none !important; }

/* negrito mais leve: títulos, <b>, <strong> e cabeçalhos de tabela sem peso definido ficam em 600 (o padrão do
   navegador é 700); os pesos do tema desceram um degrau (700 → 600, 600 → 550) */
:where(b, strong, th, h1, h2, h3, h4, h5, h6) { font-weight: 600; }

/* ficha técnica: linhas mais altas */
.ficha-tabela th, .ficha-tabela td, .ficha-carac th, .ficha-carac td { padding: 13px 16px; }
.ficha-carac li, .ficha-carac dl > div { padding: 13px 16px; }

/* meios de pagamento: mais espaço entre as formas e uma linha bem leve separando */
.pay-list { gap: 0; }
.pay-list li { padding: 13px 0; }
.pay-list li + li { border-top: 1px solid var(--line-2); }
.pay-list li:first-child { padding-top: 4px; }
.pay-list li:last-child { padding-bottom: 6px; }

/* página do produto: "O que você precisa saber sobre este produto" (Descrição simplificada, uma linha por item) */
.pdp-saiba { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pdp-saiba h2 { margin: 0; font-size: 16px; color: var(--noite); }
.pdp-saiba ul { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pdp-saiba li::marker { color: var(--azul); }
.pdp-saiba p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pdp-saiba > a { justify-self: start; font-size: 14px; font-weight: 550; color: var(--azul); }
.pdp-saiba > a:hover { text-decoration: underline; }

/* cabeçalho: a linha de cima da conta ("Olá, faça login" / "Olá, Nome") mais discreta que o "Minha conta" */
.hdr-acc .hdr-txt small, .hdr-cb .hdr-txt small { font-size: 12px; font-weight: 500; color: var(--ink-2); }

/* galeria do produto: miniaturas em carrossel vertical, presas à altura da foto principal (contain: size tira a
   coluna da conta da altura da linha, e o stretch a deixa do tamanho da foto); setas por cima, nas pontas */
.g-lista { grid-column: 1; grid-row: 1; position: relative; align-self: stretch; contain: size; min-height: 0; }
.g-lista .g-thumbs { height: 100%; max-height: none; overflow-y: auto; scroll-snap-type: y proximity; overscroll-behavior: contain; }
.g-lista .g-thumb { scroll-snap-align: start; }
.g-seta { position: absolute; left: 50%; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--azul); box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: background .15s; }
.g-seta:hover { background: var(--nevoa); }
.g-seta-cima { top: 2px; }
.g-seta-baixo { bottom: 2px; }
@media (max-width: 860px) {
  .g-lista { grid-row: 2; align-self: auto; contain: none; }
  .g-lista .g-thumbs { height: auto; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
  .g-seta { display: none !important; }
}

/* "O que você precisa saber": linhas mais altas */
.pdp-saiba ul { gap: 12px; line-height: 1.7; }
.pdp-saiba p { line-height: 1.7; }

/* ---------- ritmo das listas, igual no site todo ----------
   Listas de ícone + texto (compra segura, vendedor, Mercoclub, assistência, cadastro, busca sem resultado) e listas
   com marcador (O que você precisa saber, descrições, páginas institucionais): o mesmo espaço entre os itens e a
   mesma altura de linha. O ícone fica no meio da primeira linha. Os meios de pagamento têm linha divisória e
   seguem o próprio espaçamento. */
:root { --lista-gap: 14px; --lista-lh: 1.65; }
.bx-trust, .sc-points, .ticks, .assist-steps, .cad-vant ul, .pdp-saiba ul, .inst-doc .rte ol.tp-passos { gap: var(--lista-gap); }
.main .result-not-found ul.info { gap: var(--lista-gap) !important; }
.bx-trust li, .sc-points li, .ticks li, .assist-steps li, .cad-vant li, .pdp-saiba li, .main .result-not-found ul.info li, .buy-note li, .rte li { line-height: var(--lista-lh); }
.pdp-saiba ul, .pdp-saiba p { line-height: var(--lista-lh); }
.bx-trust li > .ico, .cad-vant li > .ico { --ico: 18px; }
.sc-points li > .ico, .ticks li > .ico { --ico: 16px; }
.bx-trust li > .ico, .sc-points li > .ico, .ticks li > .ico, .cad-vant li > .ico { margin-top: max(0px, calc((var(--lista-lh) * 1em - var(--ico)) / 2)); }
/* listas com marcador dentro de textos (descrição do produto, páginas institucionais) */
.rte li + li, .inst-doc .rte li + li, .buy-note li + li { margin-top: calc(var(--lista-gap) - 6px); }

/* cabeçalho no computador: frete e a bolha de cashback e conta maiores, ocupando o espaço e deixando tudo mais
   junto; a busca vai até 600px e acompanha a altura da bolha. Tablet e celular seguem as regras deles. */
@media (min-width: 1041px) {
  .hdr-in { gap: 18px; }
  .search { flex: 1 1 480px; max-width: 600px; height: 60px; margin: 0 auto; }
  .search-btn { width: 46px; height: 46px; margin-right: 7px; }
  .hdr-cep-btn { gap: 12px; padding: 6px 12px 6px 4px; }
  .hdr-cep-btn .hdr-circle-line { width: 46px; height: 46px; }
  .hdr-cep-btn .hdr-circle-line .ico { width: 21px; height: 21px; }
  .hdr-cep-btn .hdr-txt small { font-size: 13px; opacity: .9; }
  .hdr-cep-btn .hdr-txt b { font-size: 16.5px; max-width: 200px; }
  .hdr-txt { line-height: 1.2; }
  .hdr-pill { gap: 10px; height: 60px; padding: 0 7px; }
  .hdr-pill .hdr-circle { width: 46px; height: 46px; }
  .hdr-pill .hdr-circle .ico { width: 21px; height: 21px; }
  .hdr-pill .hdr-circle .orbit-dot { width: 19px; height: 19px; }
  .hdr-pill .hdr-circle .orbit-dot::after { width: 8px; height: 8px; }
  .hdr-cart .ico { width: 21px; height: 21px; }
  .hdr-item { height: 48px; }
  .hdr-acc .hdr-txt small, .hdr-cb .hdr-txt small { font-size: 13px; }
  .hdr-pill .hdr-txt b { font-size: 17px; }
  .hdr-acc .hdr-txt small { max-width: 180px; }
  .hdr-cb { margin-right: 2px; }
  .hdr-cart { width: 46px; height: 46px; }
}
@media (min-width: 1121px) {
  .hdr-item { gap: 12px; padding: 0 20px 0 1px; }
}

/* ---------- janela do CEP na primeira visita (elements/cep-modal) ---------- */
.cepm { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.cepm-bg { position: absolute; inset: 0; background: rgba(11, 18, 51, .55); opacity: 0; transition: opacity .22s; }
.cepm-box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 38px 34px 24px; border-radius: var(--r-xl); background: #fff; text-align: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s, transform .22s var(--ease); }
.cepm.open .cepm-bg { opacity: 1; }
.cepm.open .cepm-box { opacity: 1; transform: none; }
.cepm-x { position: absolute; top: 14px; right: 14px; }
.cepm-passo { display: grid; justify-items: center; gap: 14px; }
.cepm-ico { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--nevoa); color: var(--azul); }
.cepm-ico-ok { background: var(--azul); color: #fff; }
.cepm h2 { margin: 2px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.01em; color: var(--noite); text-wrap: balance; }
.cepm-txt { max-width: 370px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cepm-vant { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 4px; padding: 0; }
.cepm-vant li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--pill); background: var(--gelo); color: var(--azul); font-size: 13px; font-weight: 550; }
.cepm-form { display: flex; gap: 8px; width: 100%; padding: 6px; border-radius: var(--pill); background: var(--gelo); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s; }
.cepm-form:focus-within { box-shadow: inset 0 0 0 2px var(--azul); }
.cepm-form .input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; background: transparent; box-shadow: none; font-size: 17px; font-weight: 550; letter-spacing: .04em; }
.cepm-form .btn { flex: none; height: 50px; gap: 8px; }
.cepm-hint { min-height: 20px; margin: -4px 0 0; font-size: 13px; color: var(--ink-3); }
.cepm-hint.err { color: var(--erro); }
.cepm-pe { display: flex; justify-content: center; gap: 24px; font-size: 13.5px; }
.cepm-pe a, .cepm-pe button { padding: 4px; border: 0; background: none; font: inherit; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cepm-pe a:hover, .cepm-pe button:hover { color: var(--azul); }
.cepm-acoes { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
html.cepm-aberta { overflow: hidden; }
@media (max-width: 520px) {
  .cepm { align-items: end; padding: 0; }
  .cepm-box { width: 100%; padding: 34px 20px 22px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .cepm h2 { font-size: 22px; }
  .cepm-form { flex-direction: column; border-radius: 22px; }
  .cepm-form .input { flex: none; width: 100%; text-align: center; }
  .cepm-form .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cepm-bg, .cepm-box { transition: none; } }

/* paginação: os itens não podem herdar o contêiner .page (o tema usava a classe "page" nos números, e eles
   ganhavam o espaço da página inteira); o número atual e os outros têm o mesmo tamanho */
.pagination li, .pagination li.page { max-width: none; margin: 0; padding: 0; width: auto; }
.pagination li.current { padding: 0 12px; }
.pagination li a { min-width: 42px; }

/* ---------- frete no estilo do Mercado Livre, sem ícones ----------
   selos das vitrines em pílula de texto; na caixa de compra, a chegada em datas e o "grátis" no verde do Pix */
.badge-gratis { background: var(--sucesso); color: #fff; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }
.badge-rapida { background: var(--noite); color: #fff; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }
.bx-ent-line > span { gap: 2px; }
.bx-ent-line b { font-weight: 600; }
.bx-ent-acoes, .bx-ent-form { padding-left: 0; }
.bx-ent-lista { margin-left: 0; }
.ent-ml { display: grid; gap: 4px; }
.ent-tit { margin: 0; font-size: 15.5px; font-weight: 550; line-height: 1.4; color: var(--ink); }
.ent-tit-2 { margin-top: 6px; font-size: 14.5px; }
.ent-gratis { font-style: normal; font-weight: 600; color: var(--sucesso); }
.ent-valor { font-weight: 600; }
.ent-sub { margin: 0; font-size: 13px; color: var(--ink-3); }
.ent-para { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.ent-para button, .ent-mais { padding: 0; border: 0; background: none; font: inherit; font-weight: 550; color: var(--azul); cursor: pointer; }
.ent-para button:hover, .ent-mais:hover { text-decoration: underline; }
.ent-mais { justify-self: start; margin-top: 4px; font-size: 14px; }
.ent-ml .bx-ent-lista { margin-top: 8px; }
.bx-ent-lista b.ent-gratis { color: var(--sucesso); }

/* cartões: frete em texto embaixo do parcelamento, como no Mercado Livre ("Frete grátis" em verde). Vazia, a
   linha fica com altura zero mas continua na página, para o theme.js saber quando o cartão aparece na tela. */
.pc-frete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 11px 0 0; font-size: 14px; line-height: 1.35; }
.pc-frete:empty { margin: 0; }
.pc-frete-gratis { color: var(--sucesso); font-weight: 600; }
.pc-frete-rapida { color: var(--noite); font-weight: 600; }
.pc-frete-gratis + .pc-frete-rapida::before { content: '·'; margin-right: 8px; color: var(--ink-3); font-weight: 400; }

/* cartões com desconto no Pix: o preço no Pix é o destaque, maior que o preço normal, que vem menor embaixo */
.pc-prices.tem-pix .pc-pix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 13.5px; font-weight: 550; color: var(--sucesso); }
.pc-prices.tem-pix .pc-pix b { font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.pc-prices.tem-pix .pc-price { margin-top: 2px; font-size: 14.5px; font-weight: 550; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 760px) {
  .pc-prices.tem-pix .pc-pix b { font-size: 19px; }
  .pc-prices.tem-pix .pc-price { font-size: 13.5px; }
}

/* preço no Pix em Azul Universo (cartões, menu e página do produto); o verde fica só para o "Frete grátis" */
.pc-pix, .pc-prices.tem-pix .pc-pix, .price-pix { color: var(--azul); }
/* a linha do frete afastada do parcelamento (a regra de cima zera as margens dentro do bloco de preços) */
html body .pc .pc-prices > p.pc-frete:not(:empty) { margin-top: 11px !important; }

/* selo de Lançamento no padrão dos outros selos (pílula em caixa alta): fundo Névoa, texto em Azul Universo e o
   pontinho da órbita da marca na frente */
.badge-line { gap: 6px; background: var(--nevoa); color: var(--azul); box-shadow: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.badge-line::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 2px rgba(51, 64, 255, .18); }

/* ---------- cartões estreitos (2 colunas no celular, cerca de 170 px) ----------
   ajusta pelo tamanho do próprio cartão (container query), não pela tela: o mesmo cartão aparece largo no
   carrossel e estreito na grade/listagem */
.pc { container: pc / inline-size; }
@container pc (max-width: 240px) {
  .pc-body { padding: 10px 12px 14px; }
  .pc-prices.tem-pix .pc-pix { gap: 0 4px; font-size: 11px; }
  .pc-prices.tem-pix .pc-pix b { font-size: 16.5px; white-space: nowrap; }
  .pc-prices.tem-pix .pc-price { font-size: 13px; }
  .pc-inst { font-size: 11.5px; line-height: 1.35; }
  /* frete: uma informação por linha, sem o ponto separador */
  .pc-frete { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13px; }
  .pc-frete-gratis + .pc-frete-rapida::before { content: none; }
  /* cashback: ícone e valor na mesma linha; o percentual sai (o valor já diz tudo) */
  .pc .cb { flex-wrap: nowrap; gap: 5px; font-size: 11.5px; }
  .pc .cb .orbit-dot { flex: none; width: 14px; height: 14px; }
  .pc .cb-pct { display: none; }
  .pc .cb { max-width: 100%; }
  .pc .cb .cb-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pc .btn-sm { --bh: 38px; padding: 0 10px; font-size: 13.5px; }
}

/* vitrines em slide (home): o "Ver todos" ao lado das setas */
.vs .row-nav { align-items: center; }
.vs .row-nav .link { margin-right: 8px; }

/* selos dos cartões sem cobrir o produto: com selo, a foto ganha uma faixa livre em cima (o produto encolhe para
   baixo dela); nos cartões estreitos, selos menores e numa linha só */
.pc-badges { flex-wrap: nowrap; overflow: hidden; }
/* a foto é posicionada sobre a caixa inteira (position: absolute): com selo, ela começa abaixo da faixa dos selos */
.pc:has(.pc-badges > *) .pc-img img { top: 34px; bottom: 4%; height: calc(96% - 34px); margin: 0 auto; }
@container pc (max-width: 240px) {
  .pc-badges { top: 12px; left: 12px; gap: 4px; max-width: calc(100% - 24px); }
  .pc-badges .badge { height: 20px; padding: 0 7px; font-size: 10px; }
  .pc-badges .badge-line { gap: 4px; letter-spacing: .02em; }
  .pc-badges .badge-line::before { width: 5px; height: 5px; }
  .pc:has(.pc-badges > *) .pc-img img { top: 26px; height: calc(96% - 26px); }
}

/* círculos de categorias da vitrine de ofertas: centralizados quando cabem; quando passam da largura, começam na
   esquerda (com justify-content: center a rolagem não alcançava o primeiro círculo) */
.vo-circ-lista { justify-content: flex-start; }
.vo-circ-lista > :first-child { margin-left: auto; }
.vo-circ-lista > :last-child { margin-right: auto; }