@import url("/ez-brand.css");
:root {
  color-scheme: light;
  --bg: #faf9f7; --card: #fff; --ink: #1b1b1f; --on-ink: #fff; --muted: #6b6b73; --line: #e7e4df;
  --brand: #5b3df5; --brand-ink: #fff; --ok: #1f8a4c; --warn: #b26b00; --bad: #c0392b; --radius: 14px;
  --header: #fffffff2; --photo: #f3f1ee; --input: #fff; --swatch-line: #0002;
  --brand-soft: #f4f1ff; --ok-soft: #e9fbef; --ok-line: #bfe8cf; --bad-soft: #fdecea; --shadow: #0000000f;
}
/* Modo noturno: segue o sistema, a menos que o cliente tenha escolhido o diurno */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121216; --card: #1c1c22; --ink: #ececf1; --on-ink: #121216; --muted: #a0a0ab; --line: #2e2e37;
    --brand: #8b74ff; --ok: #4cc283; --warn: #f0a63a; --bad: #ff6b5e;
    --header: #121216f2; --photo: #26262e; --input: #16161b; --swatch-line: #fff4;
    --brand-soft: #8b74ff1f; --ok-soft: #4cc2831f; --ok-line: #4cc28355; --bad-soft: #ff6b5e1f; --shadow: #0006;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121216; --card: #1c1c22; --ink: #ececf1; --on-ink: #121216; --muted: #a0a0ab; --line: #2e2e37;
  --brand: #8b74ff; --ok: #4cc283; --warn: #f0a63a; --bad: #ff6b5e;
  --header: #121216f2; --photo: #26262e; --input: #16161b; --swatch-line: #fff4;
  --brand-soft: #8b74ff1f; --ok-soft: #4cc2831f; --ok-line: #4cc28355; --bad-soft: #ff6b5e1f; --shadow: #0006;
}
.theme-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; flex-shrink: 0 }
* { box-sizing: border-box }
body { margin: 0; font: 15px/1.5 var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); background: var(--bg); color: var(--ink) }
/* Temas (public/themes.css) trocam estas variáveis; sem tema fica o visual clássico */
.logo, .hero h1, .pdp h1, .panel h2 { font-family: var(--font-title, inherit); text-transform: var(--title-case, none) }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px }

.topbar { background: var(--ink); color: var(--on-ink); text-align: center; font-size: 13px; padding: 6px 16px }
header.site { position: sticky; top: 0; z-index: 20; background: var(--header); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
header.site .wrap { display: flex; align-items: center; gap: 16px; height: 64px }
.logo { font-weight: 800; font-size: 22px; letter-spacing: -.5px }
.logo span { color: var(--brand) }
.search { flex: 1; max-width: 380px; margin-left: auto }
.search input { width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink) }
.cart-btn { position: relative; border: 0; background: var(--ink); color: var(--on-ink); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600 }
.cart-btn b { background: var(--brand); color: #fff; border-radius: 999px; padding: 0 7px; margin-left: 6px; font-size: 12px }

.cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 }
.chip { border: 1px solid var(--line); background: var(--card); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 14px }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }

.hero { margin-top: 24px; border-radius: var(--hero-radius, 22px); padding: var(--hero-pad, 40px 32px); background: var(--hero-bg, linear-gradient(120deg, #5b3df5, #9b6bff)); color: var(--hero-ink, #fff); text-align: var(--hero-align, left) }
.hero h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, var(--hero-size, 40px)); letter-spacing: var(--title-spacing, -1px) }
.hero p { margin: 0; opacity: .9 }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 220px), 1fr)); gap: var(--grid-gap, 20px); margin-bottom: 60px }
.card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: var(--card-border, 1px solid var(--line)); transition: transform .15s, box-shadow .15s; display: block }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--shadow) }
.card .img { aspect-ratio: var(--card-ratio, 4/5); background: var(--photo) center/cover }
.card .info { padding: 12px 14px 16px }
.card .name { font-weight: 600 }
.price { font-weight: 700; font-size: 17px }
.price s { color: var(--muted); font-weight: 400; font-size: 13px; margin-right: 6px }
.dots { display: flex; gap: 4px; margin-top: 6px }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--swatch-line) }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok) }
.badge.off { background: var(--bad-soft); color: var(--bad) }

/* Blocos da página inicial e do catálogo (public/home.js); cada estilo ajusta em themes.css */
a.chip { display: inline-block }
.sec { margin: 36px 0 }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.sec-head h2 { margin: 0; font-size: 22px; font-family: var(--font-title, inherit); text-transform: var(--title-case, none); letter-spacing: var(--title-spacing, -.3px) }
.sec-head .more { font-size: 14px; font-weight: 700; border-bottom: 2px solid currentColor }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: var(--grid-gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin }
.rail .card { scroll-snap-align: start }
.card .img { position: relative; overflow: hidden }
/* foto em <img loading="lazy">: o quadro com proporção fixa reserva o espaço (a página não pula) */
.card .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.card .img2 { position: absolute; inset: 0; background: center/cover; opacity: 0; transition: opacity .3s }
.card:hover .img2 { opacity: 1 }
.flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px }
.badge.sale { background: var(--brand); color: var(--brand-ink) }
.card-cta { display: none }
.btn.pill { border-radius: 999px; padding: 12px 22px; display: inline-block }
.btn.sm { padding: 8px 14px; font-size: 13px }
.btn.light { background: #fff; color: #111 }
.btn.ghost.pill { border: 1.5px solid var(--ink) }
.promo { background: var(--promo-bg, var(--ink)); color: var(--promo-ink, var(--on-ink)); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; padding: 12px 16px; text-align: center; margin: 0 }
.promo .count { display: flex; gap: 6px }
.promo .count span { display: flex; flex-direction: column; align-items: center; background: #0003; border-radius: 6px; padding: 2px 8px; font-size: 10px; text-transform: uppercase; line-height: 1.2 }
.promo .count b { font-size: 18px }
.catalog { padding-bottom: 20px }
.catalog h1 { margin: 6px 0 0; font-size: clamp(24px, 4vw, 34px); font-family: var(--font-title, inherit); text-transform: var(--title-case, none) }
.crumbs { margin-top: 22px; font-size: 13px; color: var(--muted) }
.crumbs a:hover { text-decoration: underline }
.filters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: -8px 0 20px; font-size: 14px }
.filters select { margin-left: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--input); color: var(--ink) }

/* Produto */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin: 32px 0 60px }
.gallery .main { aspect-ratio: 4/5; border-radius: var(--radius); background: var(--photo) center/cover; border: 1px solid var(--line) }
.thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
.thumbs div { width: 64px; height: 80px; border-radius: 8px; background: var(--photo) center/cover; cursor: pointer; border: 2px solid transparent }
.thumbs div.on { border-color: var(--ink) }
.pdp h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.5px }
.opt-label { font-size: 13px; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .5px }
.info-block { border-top: 1px solid var(--line); padding: 12px 0 } .info-block:last-child { border-bottom: 1px solid var(--line) }
.info-block summary { cursor: pointer; font-weight: 600 } .info-block p { margin: 8px 0 0; color: var(--muted) }
.swatches { display: flex; gap: 10px; flex-wrap: wrap }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; outline-offset: 2px }
.swatch.on { outline: 2px solid var(--ink) }
.sizes { display: flex; gap: 8px; flex-wrap: wrap }
.size { min-width: 48px; padding: 9px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; cursor: pointer; font-weight: 600 }
.size.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed }
.btn { border: 0; background: var(--brand); color: var(--brand-ink); padding: 14px 22px; border-radius: var(--btn-radius, 12px); font-weight: 700; cursor: pointer; font-size: 16px }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn.block { width: 100%; margin-top: 20px }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.muted { color: var(--muted) }

/* Drawer carrinho */
.drawer-bg { position: fixed; inset: 0; background: #0006; opacity: 0; pointer-events: none; transition: .2s; z-index: 40 }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100%); background: var(--card); z-index: 41; transform: translateX(100%); transition: .25s; display: flex; flex-direction: column }
.drawer.open { transform: none } .drawer-bg.open { opacity: 1; pointer-events: auto }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line) }
.drawer .items { flex: 1; overflow: auto; padding: 8px 20px }
.drawer footer { padding: 18px 20px; border-top: 1px solid var(--line) }
.line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center }
.line .thumb { width: 56px; height: 70px; border-radius: 8px; background: var(--photo) center/cover; flex-shrink: 0 }
.line .grow { flex: 1; min-width: 0 }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.qty button { border: 0; background: none; width: 28px; cursor: pointer } .qty span { padding: 0 8px; line-height: 28px }
.x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 18px }
.progress { height: 6px; background: var(--line); border-radius: 9px; overflow: hidden; margin: 6px 0 14px }
.progress div { height: 100%; background: var(--ok) }
.row { display: flex; justify-content: space-between; margin: 4px 0 }
.row.total { font-size: 18px; font-weight: 800 }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin: 32px 0 60px }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px }
.panel h2 { margin: 0 0 14px; font-size: 18px }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
.fields label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; grid-column: span 6 }
.fields label.s1 { grid-column: span 1 } .fields label.s2 { grid-column: span 2 } .fields label.s3 { grid-column: span 3 } .fields label.s4 { grid-column: span 4 }
.fields input, .fields select { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--input) }
.opts label { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer }
.opts label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) }
.err { color: var(--bad); margin-top: 10px }

/* Acompanhamento */
.timeline { list-style: none; padding: 0; margin: 0; position: relative }
.timeline li { position: relative; padding: 0 0 18px 26px }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--line) }
.timeline li:last-child::before { display: none }
.timeline li::after { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--line) }
.timeline li.done::after { background: var(--ok) }
.steps { display: flex; justify-content: space-between; margin: 20px 0 6px; position: relative }
.steps::before { content: ''; position: absolute; top: 14px; left: 8%; right: 8%; height: 3px; background: var(--line) }
.step { position: relative; text-align: center; flex: 1; font-size: 12px; color: var(--muted) }
.step i { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 50%; background: var(--line); font-style: normal; position: relative }
.step.done { color: var(--ink); font-weight: 600 } .step.done i { background: var(--ok); color: var(--on-ink) }

footer.site { border-top: 1px solid var(--line); padding: 30px 0; color: var(--muted); font-size: 14px }

/* Editor de loja: logo, menu, banner com foto, rodapé com páginas e redes, botão do WhatsApp */
.logo img { display: block; max-height: 44px; max-width: 180px; object-fit: contain }
/* Tamanho e posição da logo (store.js, EzLogo): zoom cresce o topo junto; a posição só desloca (pode passar por cima do banner) */
header.site .logo.ez-logo-custom { zoom: var(--ez-logo-k, 1); translate: var(--ez-logo-x, 0px) var(--ez-logo-y, 0px); position: relative; z-index: 2 }
header.site .wrap:has(.ez-logo-custom) { height: auto; min-height: 64px }
/* no celular o topo é outro (busca embaixo): tamanho limitado e sem deslocar, para não cobrir a busca nem cortar o nome */
@media (max-width: 720px) { header.site .logo.ez-logo-custom { zoom: min(var(--ez-logo-k, 1), 1.4); translate: none; overflow: visible; max-width: none } }
.acct-btn { display: grid; place-items: center; text-decoration: none }
header.site .acct-btn { margin-left: 0 } /* os estilos empurram só o botão de modo noturno para a direita */
.store-menu { border-top: 1px solid var(--line) }
.store-menu .wrap { height: auto; display: flex; gap: 22px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; font-size: 14px; font-weight: 600 }
.store-menu a { white-space: nowrap } .store-menu a:hover { color: var(--brand) }
html:has(.feed) .store-menu, html[data-store-theme="atelier"]:has(.catbar) .store-menu { display: none } /* esses estilos mostram o menu na barra própria */
.hero.has-img { background: linear-gradient(90deg, #000b, #0003), var(--hero-img) center/cover; color: #fff; min-height: 280px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start }
.foot { display: flex; flex-direction: column; gap: 12px }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px } .foot-links a:hover { color: var(--brand) }
.foot-links.social a { font-weight: 600; color: var(--ink) }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 24px #0004 }
.wa-float:hover { transform: scale(1.06) }
.page-text { max-width: 760px; margin: 32px auto 60px }
.page-text h1 { font-family: var(--font-title, inherit); text-transform: var(--title-case, none) }
.page-text p { white-space: pre-line; line-height: 1.7 }

/* Conta do cliente */
.account { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 60px; align-items: start }
.account .wide { grid-column: 1 / -1 }
.order-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line) }
.order-row:first-of-type { border-top: 0 }
.order-row .grow { flex: 1; min-width: 180px }
.addr { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line) }
.addr:first-of-type { border-top: 0 }
.addr .grow { flex: 1 }
.link-btn { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 0; font-weight: 600 }
.saved-addr { margin-bottom: 12px }
.saved-addr select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink) }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: 10px; z-index: 99 }

/* Carregando: esqueleto cinza piscando no lugar do conteúdo (some quando os dados chegam) */
.skel { background: linear-gradient(90deg, var(--photo) 30%, var(--line) 50%, var(--photo) 70%) 0 0 / 300% 100%; animation: skel 1.2s linear infinite; border-radius: 8px }
@keyframes skel { from { background-position: 100% 0 } to { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none } }
.skel-head { height: 64px; border-bottom: 1px solid var(--line) }
.skel-hero { height: 160px; margin: 24px 0; border-radius: var(--hero-radius, 22px) }
.skel-line { height: 14px; margin: 6px 0 } .skel-line.short { width: 55% }
.card.skel-card { pointer-events: none } .card.skel-card .img { animation: skel 1.2s linear infinite; background: linear-gradient(90deg, var(--photo) 30%, var(--line) 50%, var(--photo) 70%) 0 0 / 300% 100% }
.skel-panel { height: 220px; border-radius: var(--radius) }

@media (max-width: 800px) {
  .pdp, .checkout { grid-template-columns: 1fr; gap: 20px }
  .search { display: none }
  .theme-btn { margin-left: auto }
  .account { grid-template-columns: 1fr }
  .hero { padding: 28px 20px }
  .fields label.s2, .fields label.s3, .fields label.s4 { grid-column: span 6 }
  .fields label.s3:has(+ .s1) { grid-column: span 4 } .fields label.s1 { grid-column: span 2 } /* Cidade + UF na mesma linha */
  .checkout aside .panel { position: static !important }
  .panel { padding: 18px 16px }
}

/* Celular: 2 produtos por linha em todas as listas (decisão do dono, 21/10/2026), em todos os estilos */
@media (max-width: 640px) {
  body { font-size: 15px }
  header.site .wrap { gap: 8px; height: 58px }
  .logo { font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .logo img { max-width: 130px; max-height: 38px }
  .theme-btn { width: 40px; height: 40px }
  .cart-btn { padding: 0 14px; height: 40px; white-space: nowrap }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px }
  .rail { grid-auto-columns: calc((100% - 10px) / 2.2); gap: 10px }
  .card .info { padding: 8px 10px 12px; font-size: 13.5px }
  .card .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3 }
  .price { font-size: 15px } .price s { font-size: 12px; margin-right: 4px }
  .flags { top: 6px; left: 6px; flex-wrap: wrap } .badge { padding: 2px 6px }
  .dot { width: 12px; height: 12px }
  .cats { margin: 18px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px }
  .chip { white-space: nowrap; padding: 9px 14px }
  .sec { margin: 28px 0 } .sec-head h2 { font-size: 19px }
  .skel-hero { height: 120px } .skel-head { height: 58px }
  /* campos com 16px: o iPhone não dá zoom ao tocar */
  input, select, textarea { font-size: 16px }
  .qty button { width: 40px; height: 36px } .qty span { line-height: 36px }
  .x { min-width: 40px; min-height: 40px }
  .link-btn { padding: 10px 0 }
  .pdp h1 { font-size: 24px }
  .drawer header, .drawer footer { padding: 14px 16px } .drawer .items { padding: 8px 16px }
  .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px }
  .order-row .grow { min-width: 100% }
  .filters { gap: 10px 14px }
}
/* Telas de toque: sem efeito de "passar o mouse" (e sem baixar a 2ª foto do card) */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none }
  .card .img2 { display: none }
}
/* CRO — camada visual do parquinho. Mantém os dados e cálculos existentes. */
.wrap { max-width: 1360px; padding-inline: 28px }
body { line-height: 1.6 }
h1,h2,h3,.name { overflow-wrap: anywhere }
button,a,input,select { -webkit-tap-highlight-color: transparent }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px }
.btn,.theme-btn,.cart-btn,.chip,.size,.swatch,.x,.qty button { min-height:44px }
.theme-btn,.swatch,.x,.qty button { min-width:44px }
.btn { transition: background .18s, box-shadow .18s; line-height:1.3 }
header.site .wrap { height:80px; gap:20px }
.logo { font-size:28px; letter-spacing:-1px }
.search { max-width:440px }
.search input { min-height:44px; border-radius:8px }
.cart-btn { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--ink); padding:8px 4px; border-radius:4px }
.cart-btn b { margin:0; background:var(--ink); color:var(--on-ink); min-width:22px; text-align:center }
.bag-icon { display:inline-block; position:relative; width:23px; height:23px; border:1.8px solid currentColor; border-radius:3px 3px 5px 5px; margin:5px 2px 0; flex-shrink:0; transform:perspective(30px) rotateX(5deg) }
.bag-icon::before { content:''; position:absolute; width:9px; height:11px; border:1.8px solid currentColor; border-bottom:0; border-radius:8px 8px 0 0; top:-9px; left:5px }
.store-menu .wrap { height:auto; min-height:48px }
.topbar { font-size:12px; letter-spacing:.03em; padding:8px 16px }
.sec { margin:56px 0 }
.sec-head h2 { font-size:clamp(24px,3vw,36px); line-height:1.2 }
.sec-head .more { min-height:44px; display:inline-flex; align-items:center; flex-shrink:0; border:0; text-decoration:underline; text-underline-offset:5px }
.grid { gap:24px }
.card { box-shadow:none; border:0; background:transparent }
.card:hover { transform:none; box-shadow:none }
.card .img { border-radius:var(--radius); overflow:hidden }
.card .info { padding:16px 2px 20px }
.card .name { font-size:16px; line-height:1.4; margin-bottom:5px }
.card .price { margin-top:5px }
.card-cta { display:flex; min-height:44px; align-items:center; justify-content:center; margin-top:14px; border:1px solid var(--line); border-radius:var(--btn-radius,8px); font-size:13px; font-weight:600; color:var(--ink); background:var(--card) }
.card:hover .card-cta { border-color:var(--ink) }
.dots { gap:7px; margin-top:10px }
.hero { padding:64px 48px; margin-top:28px; border-radius:var(--radius) }
.hero h1 { max-width:760px; line-height:1.06; font-size:clamp(32px,5vw,66px); font-weight:500 }
.hero p { max-width:520px; margin-top:18px; font-size:17px }
.hero .btn { margin-top:26px; display:inline-block }
.hero.has-img { min-height:440px }
.category-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin:28px 0 42px }
.category-card { position:relative; display:flex; align-items:flex-end; min-height:150px; padding:22px; border-radius:var(--radius); overflow:hidden; background:var(--photo) center/cover; color:#fff }
.category-card::before { content:''; position:absolute; inset:0; background:linear-gradient(transparent,#000b) }
.category-card span { position:relative; font-size:20px; font-weight:600 }
.category-card:hover span { text-decoration:underline; text-underline-offset:4px }
.rail { grid-auto-columns:minmax(220px,290px); gap:24px }
.pdp { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:56px; margin:42px 0 72px; align-items:start }
.gallery { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px }
.gallery .main { grid-column:2; grid-row:1; border:0 }
.gallery .thumbs { grid-column:1; grid-row:1; margin:0; flex-direction:column; flex-wrap:nowrap; max-height:700px; overflow:auto }
.thumbs div,.thumbs button { width:70px; height:88px; flex-shrink:0; background:var(--photo) center/cover; border:2px solid transparent; border-radius:6px; cursor:pointer }
.thumbs button.on { border-color:var(--ink) }
.pdp h1 { font-size:clamp(28px,3vw,42px); line-height:1.15; margin-bottom:20px }
.pdp .opt-label { margin-top:26px }
.size { color:var(--ink); min-width:48px }
.size:disabled { opacity:.65 }
.selection-summary { padding:12px 16px; margin-top:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); font-size:14px }
.product-description { border-top:1px solid var(--line); padding-top:24px; margin-top:28px }
.product-description h2 { font-size:18px; margin:0 0 12px }
.product-links { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px; font-size:13px }
.product-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px }
.drawer { width:min(460px,100%) }
.drawer header,.drawer footer { padding:24px }
.drawer .items { padding-inline:24px }
.drawer .line { padding-block:20px }
.panel { padding:28px }
footer.site { padding:44px 0 }
.ez-credit { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:11px }
.ez-wordmark { font:800 18px/1 system-ui,sans-serif; color:var(--ink); letter-spacing:-1px }
.ez-wordmark::after { content:''; display:inline-block; width:7px; height:7px; margin-left:3px; background:#efa900 }
@media(max-width:800px) {
 .wrap { padding-inline:18px }
 header.site .wrap { height:auto; min-height:72px; flex-wrap:wrap; gap:12px; padding-block:14px }
 header.site .logo { font-size:24px; max-width:calc(100% - 190px) }
 header.site .search { display:block; order:5; flex-basis:100%; max-width:none; margin:0 }
 header.site .store-menu .wrap { flex-wrap:nowrap; min-height:44px; padding-block:6px }
 .cart-btn { gap:6px }
 .bag-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
 .hero { padding:32px 24px; margin-top:18px }
 .hero.has-img { min-height:340px }
 .hero h1 { font-size:38px }
 .hero p { font-size:15px }
 .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
 .card .name { font-size:14px }
 .card .price { font-size:16px }
 .card .info { padding:12px 0 }
 .sec { margin:34px 0 }
 .category-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
 .category-card { min-height:120px; padding:16px }
 .category-card span { font-size:16px }
 .pdp { grid-template-columns:minmax(0,1fr); gap:28px; margin-top:24px }
 .gallery { display:flex; flex-direction:column }
 .gallery .thumbs { flex-direction:row; overflow:auto; max-height:none }
 .pdp h1 { font-size:30px }
 .panel { padding:20px }
 .checkout { gap:20px }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important } }

/* Interações CRO — componentes compartilhados pelos cinco estilos. */
[hidden] { display:none!important }
.card > a { display:block }
.card > .card-cta { width:100%; margin:0 0 18px; cursor:pointer; padding:10px }
.card { min-width:0 }
.modal-open { overflow:hidden }
.quick-dialog { width:min(560px,calc(100% - 32px)); max-height:85dvh; overflow:auto; border:1px solid var(--line); border-radius:18px; padding:32px; background:var(--card); color:var(--ink); box-shadow:0 24px 100px #0004 }
.quick-dialog::backdrop { background:#0008; backdrop-filter:blur(3px) }
.quick-close { position:absolute; top:12px; right:12px; color:var(--ink) }
.quick-heading { padding-right:26px }
.quick-heading h2 { font-family:var(--font-title,inherit); font-size:28px; line-height:1.2; margin:12px 0 }
.quick-options { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 }
.quick-options .size { width:auto; height:auto; padding:10px 14px; border-radius:8px }
.quick-status { min-height:26px; font-size:14px }
.quick-detail { display:block; padding:18px 0 0; text-align:center; text-decoration:underline; text-underline-offset:4px }
.product-crumbs { margin-top:22px; font-size:13px; color:var(--muted) }
.product-crumbs a { display:inline-flex; min-height:44px; align-items:center }
.product-crumbs + .pdp { margin-top:18px }
.product-info > .kicker { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.product-info .price { flex-wrap:wrap; font-weight:700; margin:18px 0 10px }
.product-info .price s { font-size:16px; font-weight:400 }
.product-info #add { margin-top:16px; min-height:54px; font-weight:650 }
.product-info .size { width:auto; padding-inline:16px; height:auto }
.product-info .size:disabled { text-decoration:line-through; opacity:1; color:var(--muted); background:var(--photo) }
.shipping-note { font-size:13px; color:var(--ink); margin:14px 0; padding:12px 0; border-block:1px solid var(--line) }
.gallery .main { touch-action:pan-y; background-size:contain; background-repeat:no-repeat; background-color:var(--photo) }
.mobile-buy { display:none }
.checkout-intro { padding:32px 0 8px }
.checkout-intro a { font-size:13px; min-height:44px; display:inline-flex; align-items:center }
.checkout-intro h1 { font-family:var(--font-title,inherit); font-size:clamp(28px,4vw,44px); line-height:1.15; margin:14px 0 }
.checkout-intro p { margin:12px 0 }
.checkout { margin-top:24px; margin-bottom:64px; align-items:start }
.checkout .panel { border:1px solid var(--line); box-shadow:none; border-radius:var(--radius) }
.checkout .panel h2 { font-size:21px; padding-bottom:16px; border-bottom:1px solid var(--line) }
.fields input { min-height:48px }
.fields label { font-size:13px; font-weight:550 }
.checkout .opts label { min-height:54px; align-items:center }
.checkout .coupon input { min-width:0 }
.checkout #go { min-height:54px }
.checkout aside .line .grow { min-width:0; overflow-wrap:anywhere }
.drawer { visibility:hidden; transition:transform .25s,visibility .25s }
.drawer.open { visibility:visible }
.drawer .grow { min-width:0; overflow-wrap:anywhere }
.drawer .qty button { min-width:44px; min-height:44px }
.drawer .x { color:var(--ink) }
.drawer .total { padding:14px 0 }
@media(min-width:1000px) { .product-info { padding:10px 0 0 } .gallery { position:sticky; top:160px } }
@media(max-width:800px) {
 .quick-dialog { width:100%; max-width:none; max-height:88dvh; margin:auto 0 0; border-radius:20px 20px 0 0; padding:28px 22px calc(24px + env(safe-area-inset-bottom)) }
 .quick-heading h2 { font-size:25px }
 .mobile-buy.visible { display:flex; position:fixed; z-index:25; bottom:0; inset-inline:0; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); gap:16px; align-items:center; justify-content:space-between; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -8px 30px #0001 }
 .mobile-buy > div { min-width:0; flex:1 }
 .mobile-buy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; font-size:11px }
 .mobile-buy strong { display:block; font-size:17px }
 .mobile-buy .btn { font-size:13px; padding-inline:18px; min-height:48px }
 body:has(.mobile-buy) { padding-bottom:92px }
 body:has(.mobile-buy) .wa-float { bottom:110px }
 .checkout { grid-template-columns:minmax(0,1fr) }
 .checkout .fields { gap:14px }
 .checkout .fields label { grid-column:span 6!important; min-width:0 }
 .product-info .swatches { gap:12px }
}

.payment-lines p { margin:4px 0; font-size:14px }

/* Identidade EZ Shop: semente + lilás. */
.ez-brand { display:inline-flex; align-items:center; gap:9px; color:var(--brand); text-decoration:none; flex-shrink:0 }
.ez-brand img { width:32px; height:48px; object-fit:contain }
.ez-brand span { font:500 21px/1 Georgia,serif; letter-spacing:3px; white-space:nowrap; color:inherit }
.ez-credit .ez-brand img { width:20px;height:30px }.ez-credit .ez-brand span {font-size:14px;letter-spacing:2px}
.ez-platform { --brand:#8054b3;--brand-ink:#fff;--brand-soft:#eee4f8;--bg:#faf7fd;--card:#fff;--ink:#302538;--muted:#6c5b78;--line:#e4d9ed;--input:#fff;--night:#f0e7f8;--night-2:#faf7fd;--night-line:#ddcde9;--header:#ffffffed;--photo:#eee4f8 }
.ez-platform .lp-nav {background:#faf7fdf0;color:var(--ink);border-color:var(--line)}
.ez-platform .lp-links,.ez-platform .lp-links a:hover {color:var(--ink)}
.ez-platform .dark,.ez-platform .lp-foot {background:var(--night);color:var(--ink)}
.ez-platform .hero-lp p,.ez-platform .hero-lp small,.ez-platform .channels .wrap,.ez-platform .dark.lp-sec h2+p,.ez-platform .tab-body p,.ez-platform .tab-body ul {color:var(--muted)}
.ez-platform .hero-lp h1 em {background:none;color:var(--brand)}
.ez-platform .hero-lp::before {background:radial-gradient(circle,#c8a4e955,transparent 65%)}
.ez-platform .cta {background:var(--brand);color:var(--brand-ink)}
.ez-platform .cta.out {background:transparent;color:var(--brand);border-color:var(--brand)}
.ez-platform .dark .kicker-lp {color:var(--brand)}
.ez-platform .tabs-lp button {color:var(--ink)}.ez-platform .tabs-lp button.on {background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.ez-platform .mock {background:var(--card)}.ez-platform .mock .pill {color:#23623f;background:#e6f3eb}.ez-platform .mock .pill.w {color:#795100;background:#fff0cf}
.ez-platform .tab-body li::before {color:var(--brand)}
:root[data-theme="dark"] .ez-platform {--brand:#ceacec;--brand-ink:#30203f;--brand-soft:#3e2b4d;--bg:#1d1724;--card:#292032;--ink:#f7effc;--muted:#c6b6d1;--line:#4c3c5b;--input:#292032;--night:#251c2e;--night-2:#30243b;--night-line:#4c3c5b}
:root[data-theme="dark"] .ez-platform .lp-nav {background:#251c2ef0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ez-platform {--brand:#ceacec;--brand-ink:#30203f;--brand-soft:#3e2b4d;--bg:#1d1724;--card:#292032;--ink:#f7effc;--muted:#c6b6d1;--line:#4c3c5b;--input:#292032;--night:#251c2e;--night-2:#30243b;--night-line:#4c3c5b}:root:not([data-theme="light"]) .ez-platform .lp-nav {background:#251c2ef0}}

/* Produto: economia, selo do Mercado Pago e frete por CEP (valores calculados pelo servidor) */
.save-line { margin:2px 0 6px; font-size:14px; font-weight:600; color:var(--ok, #1f7a4d) }
.trust-line { margin:10px 0 0; font-size:13px; color:var(--muted) }
.trust-line::before { content:'🔒 ' }
.cep-quote { margin:4px 0 8px; font-size:14px }
.cep-quote label { display:block; font-weight:600; margin-bottom:6px }
.cep-quote > div { display:flex; gap:8px }
.cep-quote input { flex:1; min-width:0; min-height:44px }
.cep-quote .btn { min-height:44px }
#cep-out:not(:empty) { margin-top:10px }
.cep-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line) }
#cep-out small { display:block; margin-top:6px }

/* Faixa de cookies (public/tracking.js): só aparece com o Pixel do Meta ou o Google Analytics ligados.
   Discreta, embaixo, acima da barra de compra do celular e do WhatsApp, abaixo da bolsa. Cores do estilo da loja. */
.ck-bar { position: fixed; z-index: 35; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 760px;
  display: flex; align-items: center; gap: 12px 16px; padding: 12px 14px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius, 14px); box-shadow: 0 10px 30px var(--shadow, #0002); font-size: 14px; line-height: 1.45 }
.ck-bar p { margin: 0; flex: 1; min-width: 0 }
.ck-bar a { color: var(--brand); text-decoration: underline }
.ck-act { display: flex; gap: 8px; flex-shrink: 0 }
.ck-act .btn { padding: 8px 16px; font-size: 14px; min-height: 40px }
.ck-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer }
.ck-link:hover { color: var(--brand) }
@media (max-width: 600px) {
  .ck-bar { flex-direction: column; align-items: stretch; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 13px }
  .ck-act .btn { flex: 1; min-height: 44px }
}

/* "Compre o conjunto" (produto): peças que combinam, cada uma com a própria variação; total = soma */
.set-box { margin:18px 0 6px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card) }
.set-box h2 { font-size:16px; margin:0 0 10px }
.set-row { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:14px }
.set-row:first-of-type { border-top:0 }
.set-row > span { display:flex; flex-direction:column; gap:4px; min-width:0 }
.set-row a { color:inherit; text-decoration:none }
.set-row small { color:var(--muted) }
.set-row select { min-height:40px; max-width:100% }
.set-ph { width:52px; height:52px; border-radius:8px; background:var(--line) center/cover no-repeat; display:block }
.set-total { display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:16px }

/* Refinamento da vitrine — sem impor paleta ou substituir escolhas de tema. */
.site .search input {font-size:16px;min-height:44px;line-height:1.5}
.site .theme-btn,.site .cart-btn,.store-menu a {min-height:44px}
.card .name {font-size:16px;line-height:1.5;text-wrap:pretty}
.card .info {padding:16px 16px 20px}
.card .muted,.card .installments,.card .pix {font-size:14px;line-height:1.5}
.btn {min-height:46px;line-height:1.45;transition:filter .4s ease,box-shadow .4s ease}
.btn:not(.ghost):not(.light):not(:disabled) {box-shadow:inset 0 1px 0 #ffffff30,0 3px 8px var(--shadow)}
.btn:hover:not(:disabled) {filter:brightness(1.035)}
.btn:focus-visible,.site button:focus-visible,.store-menu a:focus-visible {outline:2px solid var(--brand);outline-offset:4px}
.drawer .qty button,.drawer .x {min-width:44px;min-height:44px}
.hero p {font-size:16px;line-height:1.7;max-width:58ch}
@media(max-width:480px){.card .info{padding:12px 12px 16px}.site .search input{font-size:16px}.hero p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
/* Checkout: erro no campo e total sempre à vista no celular (PLANO-MVP 1.15) */
.field-err { display:block; color:var(--bad,#c62828); font-size:13px; font-weight:500; margin-top:4px }
[aria-invalid="true"] { border-color:var(--bad,#c62828)!important }
.mbar { display:none }
@media (max-width: 900px) {
 .mbar:not([hidden]) { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--card,#fff); border-top:1px solid var(--line) }
 .mbar-open { background:none; border:0; color:inherit; text-align:left; padding:0; font:inherit; cursor:pointer; min-height:44px }
 .mbar-open small { display:block; color:var(--muted); font-size:12px }
 .mbar-open b { font-size:18px }
 body:has(.mbar:not([hidden])) .checkout { margin-bottom:96px }
}

/* Cabeçalho que não acompanha a rolagem, sugestões da busca e "ver mais" do catálogo (PLANO-MVP 2.3) */
html[data-header-loose] header.site { position:static }
html[data-header-loose] .catbar { top:0 }
header.site form.search { position:relative }
.search-sug { position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; min-width:260px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px #0003; overflow:hidden }
.search-sug a { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px 10px; min-height:44px; font-size:14px }
.search-sug a:hover,.search-sug a[aria-selected="true"] { background:var(--brand-soft,#0000000f) }
.search-sug img { width:44px; height:44px; object-fit:cover; border-radius:6px }
.search-sug b { white-space:nowrap }
.filters input[type=number] { width:88px; padding:6px 8px; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px }
.cat-more { display:flex; justify-content:center; margin:24px 0 }
.rich h2,.rich h3 { margin:18px 0 8px } .rich p { margin:0 0 10px; line-height:1.6 } .rich ul,.rich ol { padding-left:22px; margin:0 0 10px } .rich a { color:var(--brand); text-decoration:underline } .rich blockquote { margin:0 0 10px; padding-left:12px; border-left:3px solid var(--line) }
/* Conversão (PLANO-MVP 2.5) */
.ez-promo-box { display:grid; gap:4px; margin:14px 0; padding:12px 14px; border:1px dashed var(--brand); border-radius:10px }
.ez-pdp-extras { margin-top:28px; margin-bottom:28px }
.ez-reviews article { padding:14px 0; border-bottom:1px solid var(--line) } .ez-reviews p { margin:6px 0 0; white-space:pre-line } .ez-reviews img { display:block; max-width:160px; margin-top:8px; border-radius:8px } .ez-reviews small { font-size:15px; font-weight:400; color:var(--muted) }
.ez-stars { color:var(--brand); letter-spacing:2px }
.ez-related-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px } .ez-related-row a { display:grid; gap:6px } .ez-related-row img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px }
.ez-bag-extra { display:grid; gap:8px; margin-bottom:10px; font-size:14px } .ez-bag-tools label { display:grid; gap:4px; margin-top:8px } .ez-bag-tools input { padding:10px; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px }
.ez-bag-also { display:grid; gap:6px } .ez-bag-also a { display:grid; grid-template-columns:44px 1fr auto; gap:8px; align-items:center } .ez-bag-also img { width:44px; height:44px; object-fit:cover; border-radius:6px }
.ez-bump { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; margin-top:12px; padding:10px; border:1px dashed var(--line); border-radius:10px } .ez-bump img { width:48px; height:48px; object-fit:cover; border-radius:6px } .ez-bump small { display:block }
.ez-popup { position:fixed; z-index:70; right:16px; bottom:16px; width:min(320px,calc(100vw - 32px)); box-sizing:border-box; padding:16px; display:grid; gap:8px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px #0004 }
.ez-popup .x { position:absolute; top:6px; right:8px; min-width:36px; min-height:36px; background:none; border:0; color:inherit; font-size:20px; cursor:pointer } .ez-popup p { margin:0 } .ez-popup form { display:grid; gap:8px } .ez-popup input[type=email] { padding:10px; font-size:16px; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px }
.ez-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.ez-blog-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px } .ez-blog-list a { display:grid; gap:6px } .ez-blog-list img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px } .ez-blog-list span,.ez-blog-list small,.ez-blog-post small { color:var(--muted) } .ez-blog-post img { width:100%; max-height:420px; object-fit:cover; border-radius:10px; margin:14px 0 } .ez-blog-post h1 { margin-bottom:4px }
/* Celular e fotos (PLANO-MVP 2.10) */
.card-pay { margin-top:4px; font-size:13px; color:var(--muted) } .card-pay b { color:var(--ink) }
.gallery { position:relative } .ez-zoom { position:absolute; right:10px; top:10px; z-index:2; min-height:40px; padding:6px 12px; border:0; border-radius:8px; background:#000a; color:#fff; font:600 14px/1.2 inherit; cursor:pointer }
.ez-zoom-box { max-width:96vw; max-height:96vh; padding:10px; border:0; border-radius:12px; background:var(--card) } .ez-zoom-box::backdrop { background:#000c } .ez-zoom-box img { display:block; max-width:100%; max-height:84vh; margin-top:8px; object-fit:contain }
@media(max-width:800px) {
  .gallery .main { aspect-ratio:auto; height:min(46svh,420px) }
  .gallery .thumbs { display:none }
  .pdp { gap:14px; margin-top:10px }
  .pdp h1 { font-size:24px; margin-bottom:8px }
  .pdp .opt-label { margin-top:14px }
}
.ssr-text { margin:24px 0; color:var(--muted) }