/* ===== MiniMe: estilos da loja ===== */
:root {
  /* Paleta da logo MiniMe */
  --marinho: #01214e;
  --coral: #ec7c91;
  --logo-azul: #6e9dc4;
  --logo-rosa: #e5abc4;
  --logo-menta: #b6e1d5;
  --logo-amarelo: #faedad;
  /* Tons derivados, escurecidos para o texto ficar legível */
  --rosa: #c94b67;
  --rosa-escuro: #a93a54;
  --rosa-claro: #fbe9ef;
  --verde: #01214e;
  --verde-escuro: #0d3b78;
  --verde-claro: #eaf1f8;
  --amarelo: #f2c94c;
  --texto: #4a4a4a;
  --texto-forte: #262626;
  --texto-suave: #8a8a8a;
  --borda: #e6e6e6;
  --fundo: #ffffff;
  --fundo-suave: #f6f6f6;
  --raio: 10px;
  --largura: 1220px; /* antes: 1140px */
  --sombra: 0 4px 18px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* impede o Safari do iPhone de aumentar o texto sozinho */
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { color: var(--texto-forte); line-height: 1.2; margin: 0 0 .5em; }

.container { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- faixa "loja em desenvolvimento" ---------- */
.dev-banner {
  background: var(--logo-amarelo);
  color: var(--marinho);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(1, 33, 78, .08);
}
.dev-banner a { color: var(--marinho); font-weight: 800; text-decoration: underline; }

/* ---------- faixa de aviso ---------- */
.announce {
  background: var(--logo-menta);
  color: var(--marinho);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 7px 16px;
}
.announce span + span::before { content: '•'; margin: 0 12px; opacity: .6; }

/* ---------- cabeçalho ---------- */
.header { background: var(--marinho); color: #fff; }
.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 10px 16px;
}
.logo { display: block; line-height: 0; }
.logo img { height: 76px; width: auto; }

.search { position: relative; max-width: 420px; width: 100%; justify-self: center; }
.search input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 255, .45);
  padding: 10px 40px 10px 4px;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
}
.search input::placeholder { color: rgba(255, 255, 255, .7); }
.search input:focus { border-color: var(--coral); }
.search button {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: 6px; color: #fff;
}

.header-actions { display: flex; align-items: center; gap: 22px; }
.contact { font-size: 13px; line-height: 1.6; }
.contact a { display: flex; align-items: center; gap: 6px; }
.contact a:hover, .icon-btn:hover { color: var(--coral); }
.contact svg { width: 14px; height: 14px; }
.icon-btn { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; text-transform: uppercase; position: relative; }
.icon-btn svg { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ---------- barra de categorias ---------- */
.catbar { background: var(--logo-rosa); }
.catbar ul {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
}
.catbar li + li { border-left: 1px solid rgba(1, 33, 78, .18); }
.catbar a {
  display: block;
  color: var(--marinho);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 14px;
  transition: background .15s;
}
.catbar a:hover, .catbar a.active { background: #d993b3; }
/* Coleções no menu: Premium em azul-marinho, Outlet em coral */
.catbar a.catbar-premium { background: var(--marinho); color: #fff; }
.catbar a.catbar-premium:hover, .catbar a.catbar-premium.active { background: #0d3b78; }
.catbar a.catbar-outlet { background: var(--coral); color: #fff; }
.catbar a.catbar-outlet:hover, .catbar a.catbar-outlet.active { background: var(--rosa); }

/* ---------- banner principal ---------- */
.hero { position: relative; overflow: hidden; }
.hero-track { display: flex; transition: transform .6s ease; }
.hero-slide {
  flex: 0 0 100%;
  /* Altura segue a proporção dos banners (4:1), entre 320 e 480 px */
  height: clamp(320px, 25vw, 480px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px max(24px, calc((100% - var(--largura)) / 2 + 16px));
  color: var(--texto-forte);
}
.hero-slide h2 {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 600;
  margin-bottom: 12px;
}
.hero-slide p { font-size: clamp(15px, 1.6vw, 19px); margin: 0 0 22px; max-width: 460px; }
/* Slide de banner em imagem: preenche a área do carrossel sem distorcer (corta um pouco as bordas se precisar) */
.hero-slide.hero-slide-img { padding: 0; display: block; background: #fbe9ef; }
.hero-slide-img picture, .hero-slide-img img { display: block; width: 100%; height: 100%; }
.hero-slide-img img { object-fit: cover; object-position: center; }
.hero-art { display: flex; justify-content: center; gap: 12px; }
.hero-art a { width: min(44%, 230px, calc((clamp(320px, 25vw, 480px) - 80px))); display: block; transition: transform .25s; }
.hero-art a:hover { transform: translateY(-4px) rotate(-1deg); }
.hero-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 6px solid #fff; box-shadow: 0 14px 30px rgba(1, 33, 78, .15); }
.hero-art a:nth-child(2) { margin-top: 24px; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .8); color: var(--texto-forte);
  font-size: 22px; display: grid; place-items: center;
  box-shadow: var(--sombra);
}
.hero-arrow.prev { left: 14px; }
.hero-arrow.next { right: 14px; }
.hero-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.hero-dots { gap: 2px; }
/* área de toque de 24px com o pontinho de 10px desenhado no meio */
.hero-dots button { width: 24px; height: 24px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.hero-dots button::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: rgba(1, 33, 78, .3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); transition: width .2s; }
.hero-dots button.active::before { background: var(--marinho); width: 22px; border-radius: 5px; }
.hero { touch-action: pan-y; }

.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--borda);
}
.trust div { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.trust svg { width: 30px; height: 30px; flex: none; color: var(--rosa); }
.trust b { display: block; color: var(--texto-forte); font-size: 14px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 6px;
  padding: 13px 26px;
  font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .4px;
  background: var(--verde); color: #fff;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--verde-escuro); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-rosa { background: var(--rosa); }
.btn-rosa:hover { background: var(--rosa-escuro); }
.btn-outline { background: #eef8f5; color: var(--marinho); border: 1px solid var(--logo-menta); }
.btn-outline:hover { background: #dff2ec; }
.btn-block { width: 100%; }

/* ---------- carrossel horizontal ---------- */
.rail { position: relative; }
.rail-track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 2px 8px;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; flex: none; }
.rail-arrow {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
  border: 0; background: none; font-size: 30px; color: var(--texto-forte);
  width: 32px; height: 48px; padding: 0;
}
.rail-arrow.prev { left: -34px; }
.rail-arrow.next { right: -34px; }
.rail-arrow[hidden] { display: none; }

/* ---------- categorias em círculos ---------- */
.circles { padding: 22px 0 8px; }
.circle { width: 112px; text-align: center; font-size: 13px; font-weight: 700; color: var(--texto-forte); }
.circle-img {
  width: 96px; height: 96px; margin: 0 auto 8px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--logo-rosa), var(--sombra);
  background: var(--rosa-claro);
  transition: transform .2s;
}
.circle-img img { width: 100%; height: 100%; object-fit: cover; }
.circle:hover .circle-img { transform: translateY(-3px); }

/* ---------- seções da home ---------- */
.section { padding-top: 28px; padding-bottom: 28px; } /* laterais: as do .container (16px) */
.section-title { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 22px; }
.section-title a:hover { color: var(--rosa); }
.section-sub { text-align: center; margin: -12px auto 22px; max-width: 560px; color: var(--texto-suave); }
.line-sec-premium .section-title a { color: var(--marinho); }
.line-sec-outlet .section-title a { color: var(--rosa); }
.section-more { text-align: center; margin-top: 10px; }
.section-more a { color: var(--rosa); font-weight: 700; font-size: 14px; }
.cta-strip {
  background: var(--rosa-claro);
  text-align: center;
  padding: 16px;
  font-weight: 800;
  color: var(--rosa-escuro);
  font-size: 18px;
  letter-spacing: .3px;
}

/* ---------- card de produto ---------- */
.card { width: 200px; text-align: center; position: relative; }
.grid .card { width: auto; }
.card-img { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #fff6ee; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.card:hover .card-img img { transform: scale(1.05); }
.badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--rosa); color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 6px 7px; border-radius: 50% 50% 50% 4px;
  min-width: 38px; text-align: center;
}
.line-tag { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; }
.line-premium { background: var(--marinho); color: var(--logo-amarelo); }
.line-outlet { background: var(--coral); color: #fff; }
.line-hero { border-radius: var(--raio); padding: 22px 24px; margin: 20px 0 6px; }
.line-hero h1 { margin: 0 0 6px; font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 30px; }
.line-hero p { margin: 0; }
.line-hero.premium { background: var(--marinho); color: #fff; }
.line-hero.premium h1 { color: var(--logo-amarelo); }
.line-hero.outlet { background: #fde7ec; color: var(--texto-forte); }
.line-hero.outlet h1 { color: var(--rosa); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--borda); background: #fff; border-radius: 20px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--marinho); }
.chip.active { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.card-name { font-size: 14px; color: var(--texto-forte); margin: 14px 4px 10px; min-height: 42px; }
.price-old { color: var(--texto-suave); text-decoration: line-through; font-size: 12px; margin-right: 4px; }
.price { color: var(--texto-forte); font-weight: 800; font-size: 16px; }
.installments { font-size: 13px; color: var(--texto); }
.installments b { color: var(--texto-forte); }
.installments-note { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.price-soon { color: var(--rosa); font-weight: 800; font-size: 14px; }
.card .soldout { font-size: 12px; color: var(--rosa-escuro); font-weight: 700; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 22px;
}

/* ---------- avaliações ---------- */
.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.review { text-align: center; font-size: 13px; color: var(--texto); padding: 0 6px; }
.review b { display: block; color: var(--rosa); margin-bottom: 6px; font-size: 14px; }
.stars { color: var(--amarelo); font-size: 16px; letter-spacing: 2px; margin-top: 6px; }

/* ---------- listagem / categoria ---------- */
.listing-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0 26px; flex-wrap: wrap; }
.breadcrumb { font-size: 13px; color: var(--texto-suave); }
.breadcrumb a:hover { color: var(--rosa); }
.breadcrumb b { color: var(--texto-forte); }
.sort { display: flex; gap: 8px; }
.sort button {
  border: 1px solid var(--borda); background: #fff; border-radius: 6px;
  padding: 8px 14px; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.sort button.active { background: #e3e3e3; font-weight: 700; }
.empty { text-align: center; padding: 60px 16px; color: var(--texto-suave); }

/* ---------- página de produto ---------- */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 18px 0 28px; }
.gallery-main { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #fff6ee; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease-out; }
.gallery-main { cursor: zoom-in; }
.gallery-main.zooming img { transform: scale(2); }
.gallery-main:focus-visible { outline: 3px solid var(--logo-azul); outline-offset: 2px; }
.zoom-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.9);
  color: var(--marinho); font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 20px; box-shadow: var(--sombra); pointer-events: none; transition: opacity .2s; }
.gallery-main.zooming .zoom-hint { opacity: 0; }

/* Foto em tela cheia */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(1, 20, 48, .97); display: flex; align-items: center; justify-content: center; }
.lb-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 64px; overflow: hidden; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; transition: transform .2s ease-out; user-select: none; }
.lightbox.zoomed .lb-stage img { transform: scale(2.2); cursor: zoom-out; }
.lb-close, .lb-nav { position: absolute; z-index: 2; border: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 50%; display: grid; place-items: center; }
.lb-close { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 20px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 560px) {
  .lb-stage { padding: 60px 8px; }
  .lb-nav { width: 40px; height: 40px; font-size: 24px; background: rgba(255,255,255,.2); }
}
.gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.gallery-thumbs button { width: 72px; height: 72px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; background: none; }
.gallery-thumbs button.active { border-color: var(--rosa); }
.product-info h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.product-price { margin-bottom: 4px; }
.product-price .price { font-size: 22px; }
.product-code { font-size: 12px; color: var(--texto-suave); margin: 8px 0 18px; }
.opt-label { font-weight: 800; font-size: 14px; color: var(--texto-forte); margin: 16px 0 8px; display: flex; justify-content: space-between; }
.opt-label a { font-weight: 700; color: var(--rosa); font-size: 13px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  min-width: 46px; height: 42px; padding: 0 12px;
  border: 1.5px solid var(--borda); border-radius: 6px; background: #fff;
  font-weight: 700; font-size: 14px;
}
.opt:hover:not(:disabled) { border-color: var(--rosa); }
.opt.active { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); }
.opt:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.opt.is-out:not(.active) { opacity: .5; } /* cor esgotada: ainda dá para clicar e ver os tamanhos */
.swatch { display: flex; align-items: center; gap: 8px; }
.swatch i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.stock-note { font-size: 13px; margin-top: 8px; min-height: 20px; color: var(--rosa-escuro); font-weight: 700; }

.cep-box { display: flex; gap: 8px; }
.cep-box input { flex: 1; }
.cep-result { font-size: 13px; margin-top: 8px; }
.cep-result b { color: var(--verde); }

.buy-row { display: grid; grid-template-columns: 110px 1fr 140px; gap: 10px; margin-top: 22px; }
.qty { display: flex; align-items: center; justify-content: space-around; border: 1px solid var(--borda); border-radius: 6px; height: 58px; }
.qty button { border: 0; background: none; font-size: 18px; width: 30px; height: 100%; }
.qty span { font-weight: 700; min-width: 20px; text-align: center; }
.qty-input { width: 40px; border: 0; background: none; font: inherit; font-weight: 700; font-size: 16px; text-align: center; color: inherit; padding: 4px 0; border-radius: 6px; }
.qty-input:focus { outline: 2px solid var(--rosa-claro, #e3edf8); background: #fff; }
.buy-row .btn { height: 58px; }
.btn-whats { flex-direction: column; gap: 2px; font-size: 12px; }
.btn-whats svg { width: 20px; height: 20px; flex: none; }

.panel { border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; margin-bottom: 12px; }
.panel h2 { font-size: 20px; }
.panel p { margin: 0 0 8px; }
.size-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.size-table th, .size-table td { border: 1px solid var(--borda); padding: 7px 10px; text-align: center; }
.size-table th { background: var(--fundo-suave); }
.below { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 24px 0 36px; } /* relacionados e vistos em linhas separadas; minmax(0,…): o carrossel rola por dentro em vez de alargar a página */
.below h3 { font-size: 18px; font-weight: 700; }
.below .card { width: 180px; }
.price-old-none { display: none; } /* sem preço antigo: só ocupa a linha nas vitrines de baixo (preços alinhados) */
.below .price-old-none { visibility: hidden; }
.below .card-name { font-size: 13px; min-height: 36px; margin: 10px 2px 6px; }
.below .price { font-size: 15px; }
.below .price-old { display: block; margin: 0 0 1px; min-height: 16px; } /* preço "de" riscado em cima do preço com desconto (o card é estreito) */
.below .installments { display: none; }
@media (max-width: 600px) { .below .card { width: 42vw; max-width: 180px; } } /* celular: 2 cards e um pedaço do 3º (mostra que rola) */
.card-rating { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px 0 0; font-size: 12px; color: var(--texto-suave); }
.stars.sm i { width: 13px; height: 13px; }
.stars.sm i::after { -webkit-mask-size: 13px 13px; mask-size: 13px 13px; }

/* ---------- formulários ---------- */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--texto-forte); }
.field input, .field select, .field textarea, .input {
  border: 1px solid #d5d5d5; border-radius: 6px; padding: 11px 12px;
  font-weight: 400; font-size: 15px; background: #fff; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-claro); }
.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.form-grid .c2 { grid-column: span 2; }
.form-grid .c3 { grid-column: span 3; }
.form-grid .c4 { grid-column: span 4; }
.form-grid .c6 { grid-column: span 6; }
.alert { padding: 12px 14px; border-radius: 6px; font-size: 14px; margin: 12px 0; }
.alert-erro { background: #fdecec; color: #a33; }
.alert-ok { background: var(--verde-claro); color: var(--verde-escuro); }
.alert-info { background: #fff6dd; color: #7a5b00; }

/* ---------- carrinho e checkout ---------- */
.page-title { font-size: 26px; margin: 26px 0 20px; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin-bottom: 40px; }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--borda); align-items: center; }
.cart-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; background: #fff6ee; }
.cart-item h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.cart-item .meta { font-size: 13px; color: var(--texto-suave); }
.cart-item .qty { height: 38px; width: 104px; margin-top: 8px; }
.cart-item .right { text-align: right; }
.link-remove { border: 0; background: none; color: var(--rosa-escuro); font-size: 13px; padding: 0; margin-top: 8px; }
.summary { background: var(--fundo-suave); border-radius: var(--raio); padding: 20px; position: sticky; top: 16px; }
.summary h2 { font-size: 18px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin: 8px 0; }
.summary-total { border-top: 1px solid #ddd; padding-top: 12px; margin-top: 12px; font-size: 18px; font-weight: 800; color: var(--texto-forte); }
.summary .btn { margin-top: 16px; }
.summary .free-note { font-size: 13px; color: var(--verde); font-weight: 700; margin-top: 8px; }
.mini-items { font-size: 13px; }
.mini-items div { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; }

.status-pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; }
.st-aguardando_pagamento { background: #fff6dd; color: #7a5b00; }
.st-pago { background: var(--verde-claro); color: var(--verde-escuro); }
.st-enviado { background: #e6f0fb; color: #2c5d9a; }
.st-entregue { background: #ece6fb; color: #5a3aa0; }
.st-cancelado { background: #fdecec; color: #a33; }
.st-estornado { background: #f1ecfb; color: #6a4bb0; } /* estornado: dinheiro devolvido */

/* ---------- páginas de texto ---------- */
.prose { max-width: 760px; margin: 0 auto 50px; }
.prose h1 { font-size: 30px; margin: 30px 0 18px; }
.prose h2 { font-size: 20px; margin-top: 26px; }
.prose p, .prose li { font-size: 15px; }

.prose .lead { font-size: 19px; font-weight: 700; color: var(--marinho); line-height: 1.45; }
.prose .signature { text-align: center; margin: 36px 0 10px; padding-top: 26px; border-top: 1px solid var(--borda); }
.prose .signature img { margin: 0 auto 10px; height: auto; }
.prose .signature p { font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 18px; color: var(--rosa); font-weight: 600; margin: 0; }

/* ---------- rodapé ---------- */
.footer { background: var(--fundo-suave); border-top: 1px solid var(--borda); padding: 30px 0 20px; text-align: center; font-size: 12px; }
.ssl { display: inline-flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 800; font-size: 14px; line-height: 1.1; text-align: left; margin-bottom: 18px; }
.ssl svg { width: 46px; height: 52px; }
.footer-links { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-weight: 800; text-transform: uppercase; font-size: 11px; color: var(--texto-forte); padding: 2px 12px; display: block; }
.footer-links li + li { border-left: 1px solid #bbb; }
.footer-links a:hover { color: var(--rosa); }
.social { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.social a { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.social svg { width: 18px; height: 18px; }
.social a:hover { color: var(--rosa); }
.footer-logo { display: block; width: fit-content; margin: 22px auto 10px; }
.footer-logo img { display: block; width: 150px; height: auto; }
.footer-info p { margin: 3px 0; }
.footer-copy { margin-top: 12px; color: var(--texto-suave); }

.whats-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transition: transform .2s;
}
.whats-float:hover { transform: scale(1.07); }
.whats-float svg { width: 30px; height: 30px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px);
  background: var(--texto-forte); color: #fff; padding: 12px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 700; z-index: 60; transition: transform .3s;
  display: flex; gap: 14px; align-items: center;
}
.toast.show { transform: translate(-50%, 0); }
.toast a { color: var(--amarelo); text-decoration: underline; }

.skeleton { background: linear-gradient(90deg, #f1f1f1 25%, #e9e9e9 50%, #f1f1f1 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- minha conta ---------- */
.account-login { max-width: 460px; margin: 40px auto 60px; }
.account-login h1 { font-size: 24px; }
.google-btn { display: flex; justify-content: center; min-height: 44px; margin: 4px 0 0; } /* botão oficial do Google, centralizado */
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--texto-suave); font-size: 13px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
#google-err .alert { margin-top: 10px; }
.btn-google { width: 100%; max-width: 400px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #dadce0; border-radius: 6px;
  background: #fff; color: #1f1f1f; font: 500 15px/1 'Nunito', system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-google:hover { background: #f8faff; border-color: #c6dafc; }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.account-note, .panel .account-note { font-size: 13px; color: var(--texto-suave); margin-top: 14px; line-height: 1.5; } /* afastado do botão (o .panel p zerava) */
.code-input { font-size: 28px !important; letter-spacing: 10px; text-align: center; font-weight: 800 !important; }
.link-btn { border: 0; background: none; padding: 0; color: var(--rosa); font-weight: 700; font-size: inherit; }
.link-btn:disabled { color: var(--texto-suave); cursor: default; }
.account { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin: 26px auto 50px; align-items: start; }
.account-nav { background: var(--fundo-suave); border-radius: var(--raio); padding: 18px; position: sticky; top: 16px; }
.account-hello { margin: 0 0 14px; line-height: 1.4; }
.account-hello small { color: var(--texto-suave); word-break: break-all; }
.account-nav nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a, .account-nav button { text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 6px; font-weight: 700; color: var(--marinho); font-size: 14px; }
.account-nav a:hover, .account-nav button:hover { background: #fff; }
.account-nav a.active { background: var(--logo-rosa); }
.account-nav .logout-ico { display: none; width: 20px; height: 20px; }
@media (max-width: 560px) { .account-nav .logout-ico { display: block; } }
.account-body .page-title { margin-top: 0; }
.order-card { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 12px; background: #fff; }
.order-card summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.order-card summary::-webkit-details-marker { display: none; }
.order-card[open] summary { border-bottom: 1px solid var(--borda); }
.order-thumbs { display: flex; }
.order-thumbs img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 2px solid #fff; margin-left: -10px; background: #fff6ee; }
.order-thumbs img:first-child { margin-left: 0; }
.order-summary { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.order-summary span { color: var(--texto-suave); font-size: 13px; }
.order-detail-body { padding: 16px; }
.order-detail-body .mini-items a { color: var(--marinho); text-decoration: underline; }
.order-detail-body .btn { margin-top: 12px; }
.timeline { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: step; }
.timeline li { position: relative; padding-top: 30px; font-size: 13px; color: var(--texto-suave); text-align: center; }
.timeline li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--borda); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; z-index: 1; }
.timeline li::after { content: ''; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: var(--borda); }
.timeline li:first-child::after { display: none; }
.timeline li.done { color: var(--texto-forte); }
.timeline li.done::before { content: '✓'; background: var(--marinho); }
.timeline li.done::after { background: var(--marinho); }
.timeline li.current::before { box-shadow: 0 0 0 4px var(--logo-rosa); }
.timeline li.cancel::before { content: '✕'; background: #c0392b; }
.timeline li.refund::before { content: ''; background: #6a4bb0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") center / 13px no-repeat; } /* seta desenhada (a fonte deixava o ↩ fora do centro) */ /* estornado: dinheiro devolvido (roxo, igual à etiqueta) */
.timeline b { display: block; font-size: 13px; }
.timeline span { font-size: 11px; }
.tracking { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef8f5; border: 1px solid var(--logo-menta); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 16px; }
.tracking span { display: block; font-size: 12px; color: var(--texto-suave); }
.tracking b { font-size: 17px; letter-spacing: 1px; color: var(--marinho); }
.tracking-actions { display: flex; gap: 8px; }
.btn-sm { padding: 8px 12px; font-size: 12px; }
.addr { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.addr-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13px; }
.danger-zone { margin-top: 20px; }
.danger-zone h2 { font-size: 16px; }
.danger-zone p { font-size: 13px; color: var(--texto-suave); }
.checkout-login { background: #eef8f5; border: 1px solid var(--logo-menta); border-radius: var(--raio); padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.checkout-login a, .checkout-login button { color: var(--marinho); font-weight: 800; text-decoration: underline; }

/* ---------- aviso de cookies ---------- */
.cookie-banner {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  max-width: 420px; background: #fff; border-radius: var(--raio);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 18px 20px;
  font-size: 14px; border-top: 4px solid var(--logo-rosa);
}
.cookie-banner p { margin: 0 0 14px; }
.cookie-banner a { color: var(--rosa); font-weight: 700; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-actions .btn { padding: 10px 18px; }
.link-cookies { border: 0; background: none; padding: 0; font-size: inherit; color: inherit; text-decoration: underline; }

/* ---------- responsivo ---------- */
@media (max-width: 1240px) {
  .rail-arrow.prev { left: 0; }
  .rail-arrow.next { right: 0; }
  .rail-arrow { background: rgba(255, 255, 255, .85); border-radius: 50%; width: 36px; height: 36px; font-size: 22px; box-shadow: var(--sombra); }
}
@media (max-width: 900px) {
  .account { grid-template-columns: 1fr; gap: 16px; }
  .account-nav { position: static; }
  .account-nav nav { flex-direction: row; flex-wrap: wrap; }
  .header-main { grid-template-columns: auto auto; gap: 14px; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .contact { display: none; }
  .catbar ul { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .catbar a { white-space: nowrap; }
  .hero-slide { grid-template-columns: 1fr; height: auto; min-height: 0; padding: 30px 50px 46px; text-align: center; }
  .hero-slide.hero-slide-img { padding: 0; }
  .hero-slide p { margin-inline: auto; }
  .hero-art { display: none; }
  .hero-arrow { width: 34px; height: 34px; font-size: 20px; top: 50%; background: rgba(255, 255, 255, .85); }
  .hero-arrow.prev { left: 8px; }
  .hero-arrow.next { right: 8px; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .product { grid-template-columns: 1fr; gap: 18px; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .card { width: 160px; }
}
/* Celular: as 3 abas e o ícone de sair na mesma linha */
@media (max-width: 560px) {
  .account-nav { padding: 14px 12px; }
  .account-nav nav { flex-wrap: nowrap; align-items: center; gap: 2px; }
  .account-nav nav a { padding: 8px 8px; font-size: 13px; white-space: nowrap; }
  .account-nav #logout { margin-left: auto; padding: 8px; display: grid; place-items: center; }
  .account-nav .logout-txt { display: none; }
}
@media (max-width: 360px) {
  .account-nav { padding: 12px 10px; }
  .account-nav nav a { padding: 7px 5px; font-size: 12px; }
  .account-nav #logout { padding: 6px; }
}
@media (max-width: 560px) {
  .timeline b { font-size: 11px; }
  /* Meus pedidos no celular: foto à esquerda; à direita o pedido, os dados e o status logo abaixo (sempre no mesmo lugar) */
  .order-card summary { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px 14px; }
  .order-card summary .order-thumbs { grid-row: 1 / span 2; }
  .order-card summary .status-pill { grid-column: 2; justify-self: start; font-size: 12px; padding: 3px 10px; }
  .addr { flex-direction: column; }
  .addr-actions { flex-direction: row; align-items: flex-start; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .cookie-actions .btn { flex: 1; }
  .logo img { height: 60px; }
  .trust { gap: 14px 8px; }
  .buy-row { grid-template-columns: 96px 1fr; }
  .buy-row .btn-whats { grid-column: 1 / -1; height: 46px; flex-direction: row; }
  .reviews { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .c2, .form-grid .c3, .form-grid .c4 { grid-column: span 2; }
  .form-grid .c6 { grid-column: span 2; }
  .cart-item { grid-template-columns: 72px 1fr; }
  .cart-item img { width: 72px; height: 72px; }
  .cart-item .right { grid-column: 2; text-align: left; }
  .section-title { font-size: 23px; }
}

/* Rodapé no celular: grade de 2 colunas sem os pipes (que sobravam soltos no começo das linhas).
   Fica no fim do arquivo para vir depois das regras normais do rodapé. */
@media (max-width: 560px) {
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 0 auto 18px; }
  .footer-links li + li { border-left: 0; }
  .footer-links a { padding: 11px 8px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; height: 100%; display: grid; place-items: center; line-height: 1.25; }
  .footer-links li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Carrossel no celular: pontinhos abaixo do banner (não cobrem o texto da arte e aparecem com qualquer cor de fundo) */
@media (max-width: 600px) {
  .hero-dots { position: static; padding: 6px 0 2px; background: #fff; }
  .hero-dots button::before { box-shadow: none; }
}

/* ===== Banner "Comemoração da Criançada" em HTML (medidas proporcionais à arte original de 1920 px) ===== */
.hero-slide.hero-event { position: relative; display: block; padding: 0; overflow: hidden; background: #15244f; color: #fff; font-family: 'Fredoka', 'Nunito', sans-serif; }
.ev-decor { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.ev-decor svg { height: 100%; width: auto; display: block; }
.ev-left { left: 0; }
.ev-right { right: 0; }
.ev-inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 3.6vw; padding: 0 12vw; text-transform: uppercase; }
.ev-main, .ev-when { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ev-kicker { font-weight: 700; font-size: clamp(18px, 2.4vw, 46px); line-height: 1.1; }
.ev-title { display: flex; font-weight: 700; font-size: clamp(44px, 6.875vw, 132px); line-height: 1; margin: .08em 0 .12em; letter-spacing: .01em; }
.ev-letter { display: inline-block; transform: rotate(var(--r)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-position: center; }
.ev-letter.solid-amarelo { color: #f8c24b; -webkit-text-fill-color: #f8c24b; }
.ev-letter.solid-coral { color: #e2583a; -webkit-text-fill-color: #e2583a; }
.ev-letter.solid-rosa { color: #f37fb6; -webkit-text-fill-color: #f37fb6; }
.ev-sub { font-weight: 600; font-size: clamp(12px, 1.46vw, 28px); }
.ev-list { font-weight: 600; font-size: clamp(10px, 1.1vw, 21px); opacity: .85; margin-top: .9em; line-height: 1.4; }
.ev-date { display: flex; align-items: center; gap: .35em; font-weight: 700; color: #f8c24b; font-size: clamp(16px, 2.05vw, 39.5px); }
.ev-date b { color: #e2583a; font-size: 4.56em; line-height: .9; font-weight: 700; }
.ev-lined { border-top: .13em solid #f8c24b; border-bottom: .13em solid #f8c24b; padding: .45em .5em; min-width: 4.8em; }
.ev-addr { font-weight: 700; font-size: clamp(18px, 2.2vw, 42px); margin-top: .5em; }
.ev-place { font-weight: 600; font-size: clamp(11px, 1.25vw, 24px); }

/* Celular e tablet: conteúdo empilhado, enfeites menores nos cantos */
@media (max-width: 900px) {
  .hero-slide.hero-event { height: auto; }
  .ev-inner { flex-direction: column; gap: 14px; padding: 26px 18px 30px; }
  /* Enfeites viram textura suave ao fundo, sem competir com o texto */
  .ev-decor svg { height: 100%; opacity: .22; }
  .ev-kicker { font-size: clamp(18px, 5.4vw, 30px); }
  .ev-title { font-size: clamp(40px, 12.5vw, 84px); }
  .ev-sub { font-size: clamp(12px, 3.4vw, 18px); }
  .ev-list { font-size: clamp(10px, 2.9vw, 15px); margin-top: .5em; }
  .ev-date { font-size: clamp(15px, 4.6vw, 26px); }
  .ev-addr { font-size: clamp(17px, 5vw, 28px); margin-top: .3em; }
  .ev-place { font-size: clamp(11px, 3.2vw, 16px); }
}

/* Estampas das letras de CRIANÇADA (as mesmas da arte original), aplicadas no texto com background-clip */
.ev-letter.pat-dots { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Crect width=%2216%22 height=%2216%22 fill=%22%23f37fb6%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%223.2%22 fill=%22%23ffc3df%22/%3E%3C/svg%3E"); background-size: 0.1212em 0.1212em; }
.ev-letter.pat-stripe { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22%3E%3Crect width=%2216%22 height=%2216%22 fill=%22%23f8c24b%22/%3E%3Cpath d=%22M-4,4 L4,-4 M0,16 L16,0 M12,20 L20,12%22 stroke=%22%23fff1c9%22 stroke-width=%224%22/%3E%3C/svg%3E"); background-size: 0.1212em 0.1212em; }
.ev-letter.pat-zig { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2214%22%3E%3Crect width=%2222%22 height=%2214%22 fill=%22%23e2583a%22/%3E%3Cpath d=%22M0,10 L5.5,4 L11,10 L16.5,4 L22,10%22 stroke=%22%23f8c24b%22 stroke-width=%222.6%22 fill=%22none%22/%3E%3C/svg%3E"); background-size: 0.1667em 0.1061em; }
.ev-letter.pat-diam { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2218%22 height=%2218%22%3E%3Crect width=%2218%22 height=%2218%22 fill=%22%23f37fb6%22/%3E%3Cpath d=%22M9,2 L15,9 L9,16 L3,9Z%22 fill=%22%23f8c24b%22/%3E%3C/svg%3E"); background-size: 0.1364em 0.1364em; }
.ev-letter.pat-circ { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22%3E%3Crect width=%2214%22 height=%2214%22 fill=%22%23e2583a%22/%3E%3Cpath d=%22M3,9 a4,4 0 0 1 8,0%22 stroke=%22%23f8c24b%22 stroke-width=%222%22 fill=%22none%22/%3E%3C/svg%3E"); background-size: 0.1061em 0.1061em; }

/* Tablet: os pontinhos do carrossel ficam sobre o banner, então reservamos espaço embaixo */
@media (min-width: 601px) and (max-width: 900px) {
  .ev-inner { padding-bottom: 50px; }
}

/* ===== Menu hambúrguer da loja (só no celular/tablet): painel de tela cheia ===== */
.menu-toggle { display: none; width: 42px; height: 42px; padding: 11px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent;
  flex-direction: column; justify-content: space-between; }
.menu-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.m-menu { display: none; }
@media (max-width: 900px) {
  .header-main { grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: flex; }
  .logo { justify-self: start; }
  .catbar { display: none; }
  .catbar.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 90; background: #fff; overflow-y: auto; animation: menu-in .18s ease-out; }
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } } /* só fade: sem deslizar, o topo não pula */
  html.menu-aberto, html.menu-aberto body { overflow: hidden; }
  .catbar.open .m-menu { display: flex; }
  /* Topo do menu com a mesma geometria do cabeçalho (padding, gap e altura do logo): ✕ e logo abrem exatamente no lugar do ☰ e do logo */
  .menu-head { align-items: center; justify-content: flex-start; gap: 14px; background: var(--marinho); padding: 10px 16px; position: sticky; top: 0; z-index: 1; }
  .catbar .menu-head a.logo, .catbar .menu-extra a { background: none; padding: 0; }
  .catbar .menu-head a.logo::after, .catbar .menu-extra a::after { content: none; }
  .menu-close { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: #fff; font-size: 20px; }
  .catbar ul { flex-direction: column; flex-wrap: nowrap; overflow: visible; padding: 8px 0; margin: 0; max-width: none; }
  .catbar li + li { border-left: 0; }
  .catbar li { border-bottom: 1px solid var(--borda); }
  .catbar li > a { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; font-size: 18px; color: var(--marinho); background: #fff; white-space: normal; }
  .catbar li > a::after { content: '›'; font-size: 24px; line-height: 1; opacity: .5; }
  .catbar li > a:hover, .catbar li > a.active { background: var(--rosa-claro); }
  .catbar a.catbar-premium { background: var(--marinho); color: #fff; margin: 10px 16px 0; border-radius: 10px; }
  .catbar a.catbar-outlet { background: var(--coral); color: #fff; margin: 10px 16px 0; border-radius: 10px; }
  .catbar li:has(.catbar-line) { border-bottom: 0; }
  .menu-extra { flex-direction: column; margin-top: auto; padding: 18px 20px 28px; gap: 4px; background: var(--fundo-suave); border-top: 1px solid var(--borda); }
  .catbar .menu-extra a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 11px 0; font-weight: 700; color: var(--marinho); font-size: 15px; }
  .menu-extra svg { width: 20px; height: 20px; flex: none; }
}
/* Celulares estreitos (≤380px): logo menor para caber sem ser espremido; vale para o cabeçalho e o topo do menu */
@media (max-width: 380px) { .logo img { height: 52px; } }
/* Mobile: vitrines com 16px de respiro nas laterais (do .container); títulos um pouco mais para dentro */
@media (max-width: 900px) {
  .section-title, .section-sub, .section-more { padding-left: 8px; padding-right: 8px; }
  .cta-strip { padding-left: 24px; padding-right: 24px; }
  .card > :not(.card-img) { padding-left: 4px; padding-right: 4px; }
  .card-name { margin-left: 0; margin-right: 0; }
}

/* ===== Busca que abre pelo ícone "Buscar" (celular e computador) ===== */
.search-toggle { display: flex; border: 0; background: none; color: inherit; font: inherit; font-size: 11px; font-weight: 700; padding: 0; cursor: pointer; }
.search-toggle[aria-expanded="true"] { color: var(--coral); }
.search { display: none; }
.search.open { display: block; grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 620px; margin-bottom: 6px; animation: menu-in .15s ease-out; }
.header-actions { grid-column: -2; grid-row: 1; justify-self: end; } /* sempre na última coluna, com a busca aberta ou fechada */

/* ===== Celular: faixa de categorias rolável (MOBILE_NAV = 'barra') ===== */
@media (max-width: 900px) {
  .header-main.nav-strip { grid-template-columns: 1fr auto; }
  .search.open { max-width: none; margin-bottom: 0; }
  .header-actions { gap: 16px; }

  .catbar.catbar-strip { display: block; position: relative; background: var(--rosa-claro); border-bottom: 1px solid #f3d5df; }
  .catbar-strip ul { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 0 10px; margin: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .catbar-strip ul::-webkit-scrollbar { display: none; }
  .catbar-strip li, .catbar-strip li + li { border: 0; flex: none; }
  .catbar-strip li > a { display: block; padding: 14px 12px 13px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--marinho); background: none; white-space: nowrap; }
  .catbar-strip li > a::after { content: none; }
  .catbar-strip li > a:hover { background: none; color: var(--rosa); }
  .catbar-strip li > a.active { background: none; color: var(--rosa); box-shadow: inset 0 -3px 0 var(--rosa); }
  .catbar-strip a.catbar-premium, .catbar-strip a.catbar-outlet { background: none; margin: 0; border-radius: 0; }
  .catbar-strip a.catbar-premium { color: var(--marinho); }
  .catbar-strip a.catbar-outlet { color: var(--rosa); }
  /* Esfumado na borda direita: indica que dá para arrastar para o lado */
  .catbar-strip::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none;
    background: linear-gradient(to right, rgba(251, 233, 239, 0), var(--rosa-claro)); }
  .catbar-strip.at-end::after { display: none; } /* chegou ao fim da faixa: sem esfumado */
  /* Linha Premium e Outlet ativos (ou ao tocar): fundo da cor da linha e letra branca */
  .catbar.catbar-strip a.catbar-premium.active, .catbar.catbar-strip a.catbar-premium:hover { background: var(--marinho); color: #fff; box-shadow: none; }
  .catbar.catbar-strip a.catbar-outlet.active, .catbar.catbar-strip a.catbar-outlet:hover { background: var(--rosa); color: #fff; box-shadow: none; }
}

/* iPhone: campos com letra menor que 16px fazem o Safari dar zoom ao tocar. No celular, todo campo de digitação fica com 16px
   (não bloqueamos o zoom da página: quem precisa continua podendo ampliar com os dedos) */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .field select, .field textarea { font-size: 16px; }
}

/* Computador: ícones na ordem Buscar · Minha conta · Carrinho · WhatsApp/Instagram (contato no canto direito),
   e a busca abre na mesma linha, à esquerda do ícone Buscar, sem aumentar a altura do cabeçalho */
@media (min-width: 901px) {
  .header-actions .contact { order: 3; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .22); }
  .search.open { grid-column: 2; grid-row: 1; justify-self: end; max-width: 540px; width: 100%; margin: 0; /* antes: 420px */
    animation: search-in .34s cubic-bezier(.2, .8, .2, 1); }
}
/* Busca no computador: surge a partir do ícone, da direita para a esquerda (e recolhe de volta ao fechar) */
@keyframes search-in { from { clip-path: inset(0 0 0 100%); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes search-out { from { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 0 0 100%); opacity: 0; } }
@keyframes menu-out { to { opacity: 0; } }
.search.open.closing { animation: menu-out .12s ease-in forwards; } /* celular: some com um fade rápido */
@media (min-width: 901px) { .search.open.closing { animation: search-out .22s ease-in forwards; } }
@media (prefers-reduced-motion: reduce) { .search.open, .search.open.closing { animation: none; } }

/* Busca no celular: desce do cabeçalho (de cima para baixo) e sobe ao fechar; a altura cresce aos poucos, sem empurrar a página de uma vez */
@keyframes search-down { from { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-8px); } to { max-height: 46px; margin-top: 14px; opacity: 1; transform: none; } }
@keyframes search-up { from { max-height: 46px; margin-top: 14px; opacity: 1; transform: none; } to { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-8px); } }
@media (max-width: 900px) {
  .header-main { row-gap: 0; }
  .search.open { margin-top: 14px; overflow: hidden; animation: search-down .3s cubic-bezier(.2, .8, .2, 1); }
  .search.open.closing { animation: search-up .22s ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) { .search.open, .search.open.closing { animation: none; } }

/* Moldura das fotos dos produtos (opção D): cantos arredondados, filete branco e contorno rosa da marca.
   O contorno (outline de 2px) cabe no respiro de 2px do carrossel, então não é cortado; o zoom da foto fica dentro do filete. */
.card-img { border-radius: 18px; border: 4px solid #fff; outline: 2px solid var(--logo-rosa); outline-offset: 0; box-shadow: 0 8px 12px -8px rgba(1, 33, 78, .22); }
.rail-track { padding: 4px 3px 12px; scroll-padding-inline: 3px; } /* o encaixe do carrossel respeita o respiro: contorno 100% visível */
.gallery-main { border-radius: 22px; border: 5px solid #fff; outline: 2px solid var(--logo-rosa); outline-offset: 0; box-shadow: 0 10px 18px -10px rgba(1, 33, 78, .25); }
.gallery-main:focus-visible { outline: 3px solid var(--logo-azul); outline-offset: 2px; }
.gallery-thumbs button { border-radius: 12px; }

/* Ícones do cabeçalho só com o desenho (sem texto embaixo), no celular e no computador; o texto fica só para leitores de tela */
.icon-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon-btn svg { width: 25px; height: 25px; stroke-width: 2; }
.icon-btn .cart-count { top: -9px; right: -12px; min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; }
.header-actions { gap: 30px; }
@media (max-width: 900px) { .header-actions { gap: 24px; } }

/* Busca já aberta ao carregar a página de resultados: aparece parada, sem deslizar */
.search.open.no-anim { animation: none; }

/* Círculos das categorias: respiro em cima para o anel não ser cortado quando o círculo sobe no hover */
.circles .rail-track { padding-top: 12px; margin-top: -8px; }

/* Carrinho: "Continuar comprando" e "Limpar carrinho" na mesma linha, abaixo dos itens */
.cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cart-continue { color: var(--rosa); font-weight: 700; }
.cart-actions .link-remove { margin-top: 0; font-weight: 700; }
.clear-confirm { font-size: 13px; color: var(--texto); }
.clear-confirm .link-btn { font-size: 13px; }

/* Opções de frete (produto, carrinho e checkout) */
.ship-opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ship-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; font-size: 14px; }
label.ship-opt { cursor: pointer; }
label.ship-opt:has(input:checked) { border-color: var(--marinho); box-shadow: 0 0 0 1px var(--marinho); background: var(--verde-claro); }
.ship-opt input { accent-color: var(--marinho); width: 18px; height: 18px; flex: none; margin: 0; }
.ship-name { flex: 1; color: var(--texto-forte); font-weight: 700; line-height: 1.3; }
.ship-name small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 12.5px; }
.ship-opt b { color: var(--marinho); white-space: nowrap; }
.ship-free { color: var(--verde-escuro) !important; }
.ship-arrange { color: #1d7a4c; white-space: nowrap; } /* motoboy / Uber Flash: valor combinado pelo WhatsApp */
.courier-box { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0; padding: 16px 18px; border-radius: 14px; background: #e9f8ef; border: 1px solid #bfe6cd; }
.courier-box > svg { width: 28px; height: 28px; flex: none; color: #1d7a4c; margin-top: 2px; }
.courier-box > div { flex: 1; min-width: 0; }
.courier-box b { color: #1d7a4c; } .courier-box p { margin: 4px 0 12px; }
.courier-box .btn-wpp { background: #25d366; border-color: #25d366; color: #fff; }
@media (max-width: 600px) { .courier-box .btn-wpp { display: block; box-sizing: border-box; width: calc(100% + 42px); margin-left: -42px; text-align: center; white-space: normal; } } /* celular: botão na largura toda do quadro (42px = ícone + espaço) */
.ship-note { font-size: 13px; color: var(--texto-suave); margin: 8px 0 0; }
.summary .cep-box { margin: 6px 0 4px; }
.summary .ship-opt { font-size: 13px; padding: 8px 10px; }

/* CEP + botão: o campo encolhe e o botão fica do tamanho do texto, na mesma altura (resumo do carrinho é estreito) */
/* CEP + OK sempre na mesma linha (qualquer largura/navegador) */
.cep-box { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px; align-items: stretch; }
.cep-box input { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0; }
.cep-box .btn { flex: 0 0 auto !important; width: auto !important; padding: 0 18px; margin: 0; height: auto; min-height: 44px; }
.summary .cep-box .btn { padding: 0 14px; font-size: 13px; }
.cart-layout > * { min-width: 0; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }

/* Preço no Pix (produto e carrinho) e cupom no checkout */
.pix-price { font-size: 14px; color: var(--texto); margin: 4px 0 2px; }
.pix-price b { color: var(--marinho); font-size: 16px; }
.pix-price span { color: var(--texto-suave); font-size: 12.5px; }
.coupon-box { margin: 12px 0 4px; }
.coupon-box input { text-transform: uppercase; }
.coupon-box input::placeholder { text-transform: none; }

/* Filtros da listagem (tamanho, cor, preço) */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -8px 0 24px; }
.list-filters select { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--borda); border-radius: 20px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2301214e' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding: 8px 32px 8px 14px; font-size: 13px; font-weight: 700; color: var(--marinho); cursor: pointer; max-width: 100%; }
.list-filters select.on { background-color: var(--marinho); color: #fff; border-color: var(--marinho);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.list-filters .link-btn { font-size: 13px; }
@media (max-width: 900px) { .list-filters select { font-size: 16px; padding: 7px 30px 7px 12px; } }

/* Favoritos: coração no canto da foto do card e ao lado do nome do produto */
.fav-btn { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  display: grid; place-items: center; color: var(--marinho); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); cursor: pointer; z-index: 1; transition: transform .15s; }
.fav-btn svg { width: 18px; height: 18px; }
.fav-btn:hover { transform: scale(1.08); }
.fav-btn.on { color: #e0567c; }
.fav-btn.on svg path { fill: currentColor; }
.fav-btn:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fav-btn.fav-big { position: static; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--borda); box-shadow: none; }
.fav-btn.fav-big svg { width: 22px; height: 22px; }
.title-actions { display: flex; gap: 8px; flex: none; }
.share-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho);
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.share-btn svg { width: 21px; height: 21px; }
.share-btn:hover { transform: scale(1.08); }
.share-btn:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.fav-count { background: #e0567c; }

/* Checkout: presente e lembrete */
.gift-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; font-size: 14px; }
.gift-opt:has(input:checked) { border-color: var(--marinho); box-shadow: 0 0 0 1px var(--marinho); background: var(--verde-claro); }
.gift-opt input { accent-color: var(--marinho); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.gift-opt small { display: block; color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }
.gift-price { color: var(--marinho); font-weight: 700; }
.gift-msg { margin-top: 10px; }
.remind-note { font-size: 12px; color: var(--texto-suave); text-align: center; margin: 4px 0 0; }
.remind-note a { color: inherit; text-decoration: underline; }

/* Elemento escondido (atributo hidden) fica escondido mesmo quando a classe dele define display (ex.: linhas do resumo, campo de mensagem do presente) */
[hidden] { display: none !important; }

/* Pop-up de compras recentes (canto inferior esquerdo) */
.sp-pop { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 12px; width: 340px; max-width: calc(100vw - 32px);
  padding: 10px 34px 10px 10px; background: #fff; border: 2px solid var(--logo-rosa); border-radius: 16px; box-shadow: 0 10px 28px rgba(1, 33, 78, .18);
  color: var(--texto); text-decoration: none; opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease; }
.sp-pop.show { opacity: 1; transform: none; }
.sp-pop img { width: 60px; height: 60px; flex: none; object-fit: cover; border-radius: 12px; border: 3px solid #fff; outline: 2px solid var(--logo-rosa); background: #fff6ee; }
.sp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.3; }
.sp-txt b { color: var(--marinho); font-size: 14px; }
.sp-what { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-what em { font-style: normal; font-weight: 700; color: var(--texto-forte); }
.sp-txt small { color: var(--texto-suave); font-size: 11.5px; }
.sp-ok { color: #1d7a4f; font-weight: 700; }
.sp-x { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: 0; background: none; color: var(--texto-suave); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; }
.sp-x:hover { background: var(--fundo-suave); color: var(--marinho); }
@media (max-width: 600px) {
  .sp-pop { left: 10px; bottom: 10px; max-width: calc(100vw - 96px); padding: 8px 30px 8px 8px; gap: 10px; } /* não cobre o botão do WhatsApp */
  .sp-pop img { width: 48px; height: 48px; }
  .sp-txt { font-size: 12px; }
  .sp-txt b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sp-pop { transition: none; } }

/* Lápis "Editar no admin" ao lado do nome do produto (só aparece para admins logados neste navegador) */
.admin-edit { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; vertical-align: middle; border-radius: 50%;
  border: 1.5px solid var(--borda); color: var(--marinho); background: #fff; transition: background .15s, color .15s; }
.admin-edit:hover { background: var(--marinho); color: #fff; }
.admin-edit svg { width: 17px; height: 17px; }

/* Selo do PagBank no rodapé, ao lado do selo de compra segura */
.footer .container > .ssl, .footer .container > .pay-seal { vertical-align: middle; }
.pay-seal { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px 28px; padding-left: 28px; border-left: 1px solid var(--borda);
  color: var(--texto-forte); font-weight: 800; font-size: 12px; line-height: 1.15; text-align: left; text-transform: uppercase; }
.pay-seal img { height: 30px; width: auto; }
@media (max-width: 600px) { /* os dois selos na mesma linha no celular */
  .footer .ssl { font-size: 12px; gap: 6px; } .footer .ssl svg { width: 36px; height: 40px; }
  .pay-seal { margin-left: 10px; padding-left: 10px; gap: 6px; font-size: 10.5px; } .pay-seal img { height: 22px; } }

/* Celular: ícones do cabeçalho um pouco menores (busca, conta, favoritos, carrinho) */
@media (max-width: 600px) {
  .icon-btn svg { width: 22px; height: 22px; }
  .icon-btn .cart-count { top: -8px; right: -10px; min-width: 19px; height: 19px; border-radius: 10px; font-size: 11px; }
  .header-actions { gap: 20px; }
}

/* ===== Pagamento dentro do site (checkout transparente; ver checkout-transparente.js) ===== */
.pay-layout { margin-top: 24px; }
.pay-layout h1 { margin-bottom: 4px; }
.pay-hi { color: var(--texto-suave); margin: 0 0 18px; }
.pay-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pay-tabs button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1.5px solid var(--borda); border-radius: 12px; background: #fff;
  font: inherit; font-weight: 800; font-size: 13.5px; color: var(--texto-forte); cursor: pointer; transition: border-color .15s, background .15s; }
.pay-tabs button svg { width: 26px; height: 26px; color: var(--marinho); }
.pay-tabs button:hover { border-color: var(--marinho); }
.pay-tabs button.active { border-color: var(--marinho); background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--marinho); }
.pay-only { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--marinho); margin-bottom: 12px; }
.pay-only svg { width: 24px; height: 24px; }
.pay-only small { font-weight: 700; color: var(--verde-escuro, #1d7a4f); }
.pay-panel { background: #fff; min-height: 160px; }
.pay-form { display: grid; gap: 14px; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-num { position: relative; display: block; }
.card-num input { width: 100%; padding-right: 96px; }
.card-num em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 800; color: var(--marinho); }
.card-num em img { display: block; height: 24px; width: auto; -webkit-user-drag: none; user-select: none; } /* logo da bandeira */
.card-num input { padding-right: 70px; }
.pix-box { display: grid; justify-items: center; gap: 14px; text-align: left; }
.pix-box img { width: 220px; height: 220px; border: 6px solid #fff; outline: 2px solid var(--borda); border-radius: 12px; image-rendering: pixelated; }
.pix-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; justify-self: stretch; }
.pix-copy { display: flex; gap: 8px; width: 100%; }
.pix-copy input { flex: 1 1 0; min-width: 0; font-size: 13px; }
.pix-copy .btn { flex: none; }
.pay-wait { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-suave); margin: 0; }
.spin { width: 16px; height: 16px; border: 2.5px solid var(--borda); border-top-color: var(--marinho); border-radius: 50%; display: inline-block; flex: none; animation: spin .8s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spin { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.boleto-box p { margin-top: 0; }
.pay-done { text-align: center; padding: 20px 0; }
.pay-done b { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25a567; color: #fff; font-size: 30px; }
.pay-done h2 { margin: 12px 0 4px; }
.pay-secure { font-size: 12.5px; color: var(--texto-suave); margin: 14px 0 0; line-height: 1.5; }
.pay-back { font-size: 13px; margin-top: 10px; }
.pay-back a { color: var(--marinho); font-weight: 700; }
@media (max-width: 900px) { .pay-layout .summary { position: static; } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
/* Pagamento no celular: campos nunca passam da largura da tela */
.pay-layout > section { min-width: 0; }
.pay-form { grid-template-columns: minmax(0, 1fr); }
.pay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pay-form .input, .pay-form input, .pay-form select { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 600px) {
  .pay-panel { padding: 16px 14px; }
  .pay-tabs button { padding: 10px 6px; font-size: 12.5px; }
  .pix-box img { width: 190px; height: 190px; }
  .pix-copy { flex-direction: column; }
}

/* ===== Avaliações dos produtos (public/js/avaliacoes.js) ===== */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars i { position: relative; width: 16px; height: 16px; display: inline-block; }
.stars i svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #e3e6ec; }
.stars i::after { content: ''; position: absolute; inset: 0; width: var(--f); overflow: hidden;
  background: #f5b301; -webkit-mask: var(--star) left / 16px 16px no-repeat; mask: var(--star) left / 16px 16px no-repeat; }
.stars { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1 6.3 20.2l1.2-6.3-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E"); }
.stars.big i { width: 22px; height: 22px; }
.stars.big i::after { -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }
.rating-line { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 14px; color: var(--texto-suave); }
.rating-line b { color: var(--texto-forte); }
.rating-line:hover span { text-decoration: underline; }
.reviews-panel h2 { display: flex; align-items: center; gap: 8px; }
.rv-demo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: #fff3cd; color: #8a6100; padding: 3px 8px; border-radius: 10px; }
.rv-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 6px 0 18px; border-bottom: 1px solid var(--borda); }
.rv-avg { display: grid; justify-items: center; gap: 4px; min-width: 120px; }
.rv-avg > b { font-size: 40px; line-height: 1; color: var(--marinho); }
.rv-avg span { font-size: 12.5px; color: var(--texto-suave); }
.rv-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-width: 360px; width: 100%; }
.rv-dist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--texto-suave); }
.rv-dist i { height: 8px; border-radius: 4px; background: #eef0f4; overflow: hidden; }
.rv-dist i b { display: block; height: 100%; background: #f5b301; border-radius: 4px; }
.rv-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 6px; }
.rv-empty p { margin: 0; color: var(--texto-suave); }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-item { padding: 16px 0; border-bottom: 1px solid var(--borda); }
.rv-item:last-child { border-bottom: 0; }
.rv-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 14px; }
.rv-head b { color: var(--texto-forte); }
.rv-head time { margin-left: auto; font-size: 12.5px; color: var(--texto-suave); }
.rv-verified { font-size: 12px; font-weight: 800; color: #1d7a4f; }
.rv-item > p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; }
.rv-reply { margin-top: 10px; padding: 10px 14px; background: var(--fundo-suave); border-left: 3px solid var(--marinho); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.rv-reply b { color: var(--marinho); font-size: 12.5px; }
.rv-reply p { margin: 4px 0 0; }
.rv-more { margin-top: 12px; }
.rv-form { margin: 18px 0 6px; padding: 18px; border: 1.5px solid var(--borda); border-radius: 12px; display: grid; gap: 14px; background: #fff; }
.rv-form h3 { margin: 0; font-size: 17px; color: var(--marinho); }
.rv-pick { display: flex; align-items: center; gap: 4px; }
.rv-pick button { border: 0; background: none; padding: 2px; cursor: pointer; width: 38px; height: 38px; }
.rv-pick button svg { width: 100%; height: 100%; fill: #e3e6ec; transition: fill .12s, transform .12s; }
.rv-pick button.on svg { fill: #f5b301; }
.rv-pick button:hover svg { transform: scale(1.08); }
.rv-pick span { margin-left: 8px; font-size: 13.5px; font-weight: 700; color: var(--texto-suave); }
.rv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rv-form .field small { font-weight: 400; color: var(--texto-suave); }
.rv-form textarea { resize: vertical; min-height: 96px; font: inherit; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rv-actions { display: flex; gap: 12px; align-items: center; }
.btn-ghost-link { background: none; border: 0; color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 6px 4px; }
.btn-ghost-link:hover { color: var(--marinho); }
.rv-note, .rv-as { margin: 0; font-size: 12.5px; color: var(--texto-suave); }
.rv-thanks { margin: 18px 0 6px; padding: 16px 18px; border-radius: 12px; background: #eefbf2; border: 1px solid #cdeed8; }
.rv-thanks p { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 700px) {
  .rv-summary { grid-template-columns: auto minmax(0, 1fr); }
  .rv-summary .rv-write { grid-column: 1 / -1; width: 100%; }
  .rv-avg { min-width: 0; }
  .rv-row { grid-template-columns: minmax(0, 1fr); }
  .rv-head time { margin-left: 0; width: 100%; }
}
/* Estrelas do formulário de avaliação: tamanho fixo (não encolhem quando o texto ao lado muda) */
.rv-pick { flex-wrap: wrap; }
.rv-pick button { flex: none; }
.rv-pick button:focus { outline: none; }
.rv-pick button:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; border-radius: 6px; }
.rv-pick span { min-height: 1.4em; }
@media (max-width: 600px) { .rv-pick span { flex-basis: 100%; margin: 4px 0 0 4px; } }
/* Estrelas e texto na mesma linha, centralizados (linha de nota e cabeçalho dos comentários) */
.stars { align-items: center; line-height: 0; }
.stars i { display: block; }
.rating-line { line-height: 1; }
.rating-line > b, .rating-line > span:not(.stars) { display: inline-block; line-height: 16px; }
.rating-line .stars, .rv-head .stars, .rv-avg .stars { margin: 0; }

/* Etiquetas da foto (Premium, Outlet, desconto): empilhadas no canto superior esquerdo, sem se sobrepor */
.card-tags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
:root .card-tags .line-tag, :root .card-tags .badge { position: static; display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin: 0;
  padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(1, 33, 78, .14); }
:root .card-tags .line-premium { background: var(--marinho); color: var(--logo-amarelo); }
:root .card-tags .line-outlet { background: #fff; color: #c2410c; border: 1.5px solid #fdba8c; }
:root .card-tags .badge { background: #e0567c; color: #fff; letter-spacing: .2px; }
.card-tags.big { top: 14px; left: 14px; gap: 6px; }
:root .card-tags.big .line-tag, :root .card-tags.big .badge { font-size: 13px; padding: 7px 13px; }
@media (max-width: 600px) { .card-tags { top: 8px; left: 8px; gap: 4px; } :root .card-tags .line-tag, :root .card-tags .badge { font-size: 10px; padding: 4px 8px; } }

/* Rodapé: formas de pagamento e envio (logos) */
.footer-brands { display: flex; justify-content: center; gap: 22px 56px; flex-wrap: wrap; margin: 4px auto 22px; max-width: 900px; text-align: left; }
.footer-brands h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--texto-forte); text-transform: uppercase; letter-spacing: .5px; }
.brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; }
.brand-list li { display: grid; place-items: center; height: 34px; min-width: 50px; padding: 0 6px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; }
.brand-list img { height: 22px; width: auto; display: block; }
.brand-list.ship img { height: 18px; }
.brand-list li.pickup { font-size: 11px; font-weight: 800; color: var(--marinho); padding: 0 10px; }
@media (max-width: 600px) {
  .footer-brands { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .brand-list { justify-content: center; }
}

/* Botão "Buscar" em texto no campo de busca do cabeçalho */
.search .search-go { padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: #fff; cursor: pointer; }
.search input { padding-right: 80px; }
/* Computador: círculos das categorias centralizados (no celular continuam roláveis a partir da esquerda) */
@media (min-width: 901px) { .circles .rail-track { justify-content: safe center; } }

/* Submenu das coleções (Outlet/Premium) ao passar o mouse, só no computador */
.catbar-sub { display: none; }
@media (min-width: 901px) {
  .catbar li.has-sub { position: relative; }
  .catbar li.has-sub > .catbar-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 45; min-width: 170px;
    display: flex; flex-direction: column; list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 24px rgba(1, 33, 78, .14); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
  .catbar li.has-sub:hover > .catbar-sub, .catbar li.has-sub:focus-within > .catbar-sub { opacity: 1; visibility: visible; }
  .catbar .catbar-sub li { border: 0 !important; }
  .catbar .catbar-sub a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--marinho); background: none; white-space: nowrap; text-align: left; }
  .catbar .catbar-sub a:hover { background: var(--fundo-suave); }
}
/* Títulos "Formas de pagamento" e "Envio": centralizados sobre os logos e no mesmo tamanho dos links do rodapé */
.footer-brands > div { text-align: center; }
.footer-brands h4 { font-size: 11px; font-weight: 800; letter-spacing: normal; color: var(--texto-forte); margin-bottom: 8px; }
.footer-brands .brand-list { justify-content: center; }
/* Celular: o submenu das coleções não aparece (a faixa de categorias rola e o Outlet abre a página com os filtros) */
@media (max-width: 900px) { .catbar .catbar-sub, .catbar-strip ul.catbar-sub { display: none !important; } }

/* Banner da Criançada e logos (topo e rodapé da loja, Quem somos, topo do admin e do msg.): não selecionam ao clicar/arrastar */
.hero-event, .logo, .footer-logo, .signature, .adm-brand, .m-brand { -webkit-user-select: none; user-select: none; }

/* ===== Rodapé largo (computador a partir de 1200px): FOOTER_WIDE em app.js. Para voltar ao centralizado, basta false lá. =====
   Esquerda: logo, dados e Instagram · centro: pagamento e envio · direita: selos · embaixo: links e copyright */
@media (min-width: 1200px) {
  .footer-wide { padding: 28px 0 16px; text-align: left; }
  .footer-wide .container { display: grid; grid-template-columns: minmax(330px, 1fr) auto auto; column-gap: 40px; align-items: start;
    grid-template-areas: "logo brands ssl" "info brands pay" "links links links" "copy copy copy"; }
  .footer-wide .footer-id { grid-area: logo; justify-content: flex-start; margin: 0 0 10px; }
  .footer-wide .footer-logo img { width: 124px; }
  .footer-wide .footer-info { grid-area: info; }
  .footer-wide .footer-brands { grid-area: brands; flex-wrap: nowrap; gap: 32px; margin: 0; max-width: none; }
  .footer-wide .footer-brands > div { text-align: left; }
  .footer-wide .footer-brands .brand-list { justify-content: flex-start; max-width: 270px; }
  .footer-wide .ssl { grid-area: ssl; margin: 0 0 16px; }
  .footer-wide .pay-seal { grid-area: pay; margin: 0; padding-left: 0; border-left: 0; }
  .footer-wide .footer-links { grid-area: links; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--borda); justify-content: center; }
  .footer-wide .footer-copy { grid-area: copy; text-align: center; margin-top: 10px; }
  /* Linhas divisórias entre os blocos (dados | pagamento | envio | selos), de cima a baixo da área */
  .footer-wide .container { column-gap: 0; }
  .footer-wide :is(.footer-id, .footer-info) { padding-right: 28px; }
  .footer-wide .footer-brands { align-self: stretch; gap: 0; border-left: 1px solid var(--borda); }
  .footer-wide .footer-brands > div { padding: 0 28px; flex: none; }
  .footer-wide .footer-brands .brand-list { width: 252px; max-width: none; } /* 4 ícones de pagamento por linha */
  .footer-wide .container { grid-template-columns: minmax(280px, 1fr) auto auto; }
  .footer-wide .footer-brands > div + div { border-left: 1px solid var(--borda); }
  .footer-wide :is(.ssl, .pay-seal) { align-self: stretch; border-left: 1px solid var(--borda); padding-left: 28px; }
  .footer-wide .ssl { margin: 0; padding-bottom: 16px; display: flex; }
  .footer-wide .pay-seal { display: flex; align-items: flex-start; }
}

/* ===== Rodapé compacto (celular): FOOTER_COMPACT em app.js. Para voltar aos botões de antes, basta false lá. ===== */
@media (max-width: 560px) {
  .footer-compact { padding-top: 24px; }
  .footer-compact .footer-brands { gap: 12px; margin-bottom: 16px; }
  .footer-compact .footer-brands h4 { margin-bottom: 6px; }
  .footer-compact .brand-list { flex-wrap: nowrap; gap: 4px; max-width: none; }
  .footer-compact .brand-list li { height: 28px; min-width: 36px; padding: 0 4px; border-radius: 5px; }
  .footer-compact .brand-list img { height: 16px; }
  .footer-compact .brand-list.ship img { height: 14px; }
  .footer-compact .brand-list li.pickup { font-size: 10px; padding: 0 7px; white-space: nowrap; }
  .footer-compact .footer-links { grid-template-columns: auto auto; justify-content: center; gap: 0 28px; max-width: none; margin-bottom: 14px; }
  .footer-compact .footer-links a { background: none; border: 0; border-radius: 0; padding: 6px 0; display: block; text-align: left; font-size: 11px; }
  .footer-compact .footer-links li:last-child:nth-child(odd) { grid-column: auto; }
  .footer-compact .social { margin-bottom: 4px; }
  .footer-compact .footer-logo { margin-top: 14px; }
}
@media (max-width: 350px) { .footer-compact .brand-list { flex-wrap: wrap; } } /* celulares bem estreitos: os ícones quebram a linha em vez de sair da tela */

/* Celular: botão do WhatsApp um pouco menor e respiro no fim do rodapé para ele não cobrir os dados e o copyright */
@media (max-width: 560px) {
  .whats-float { width: 48px; height: 48px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .whats-float svg { width: 26px; height: 26px; }
  .footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Logo e Instagram lado a lado (computador e celular) */
.footer-id { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 8px; }
.footer-id .footer-logo { margin: 0; }
.footer-id .social { margin: 0; }
.footer-wpp { color: inherit; text-decoration: underline; text-decoration-color: rgba(1, 33, 78, .3); text-underline-offset: 2px; }
.footer-wpp:hover { color: var(--rosa); text-decoration-color: currentColor; }
/* Onde fica a loja (Sobre a entrega): cartão com o mapa, endereço e botões Google Maps / Waze */
.store-card { margin: 12px 0 8px; border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(1, 33, 78, .08); }
.store-card .store-map { aspect-ratio: 16 / 7 !important; background: var(--fundo-suave); }
.store-card-info { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 14px 18px; flex-wrap: wrap; }
.store-card-info p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texto-suave); }
.store-card-info p b { display: block; color: var(--marinho); font-size: 15px; }
.store-dir { display: flex; gap: 10px; }
.dir-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--borda); border-radius: 12px;
  background: #fff; color: var(--marinho); font-weight: 800; font-size: 14px; white-space: nowrap; transition: border-color .15s, transform .15s; }
.dir-btn:hover { border-color: var(--marinho); transform: translateY(-1px); }
.dir-btn svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) {
  .store-card { margin-inline: -4px; border-radius: 18px; }
  .store-card .store-map { aspect-ratio: 1 / 1 !important; }
  .store-card-info { padding: 14px; }
  .store-dir { width: 100%; }
  .dir-btn { flex: 1 1 0; padding: 12px 8px; font-size: 13.5px; }
}

/* ===== Banner da Criançada animado (CRIANCADA_ANIMADO em home.js; false = parado) ===== */
@media (prefers-reduced-motion: no-preference) {
  .ev-anim .ev-letter { animation: ev-wave 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
  .ev-anim .ev-date b { display: inline-block; animation: ev-pulse 1.8s ease-in-out infinite; }
  .ev-anim .evd { transform-box: fill-box; transform-origin: center; }
  .ev-anim .evd-pipa { transform-origin: 70% 30%; animation: ev-sway 4s ease-in-out infinite; }
  .ev-anim .evd-urso { animation: ev-float 3.2s ease-in-out infinite; }
  .ev-anim .evd-bola { animation: ev-spin 16s linear infinite; }
  .ev-anim .evd-dino { animation: ev-float 4.4s ease-in-out infinite .6s; }
  .ev-anim .evd-cao { animation: ev-bounce 2.4s ease-in-out infinite; }
  .ev-anim .evd-cubos { transform-origin: 50% 100%; animation: ev-wobble 3.6s ease-in-out infinite; }
  .ev-anim .evd-trilha path, .ev-anim path.evd-trilha, .ev-anim .evd-trilha { animation: ev-march 1.4s linear infinite; }
}
@keyframes ev-wave { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 -12%; } 40% { translate: 0 2%; } }
@keyframes ev-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes ev-sway { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-8px); } }
@keyframes ev-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ev-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } 55% { transform: translateY(0); } 70% { transform: translateY(-4px); } }
@keyframes ev-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ev-spin { to { transform: rotate(360deg); } }
@keyframes ev-march { to { stroke-dashoffset: -44; } }
.toast-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--amarelo); margin-right: -4px; flex: none; } /* o .toast já tem gap de 14px */
.toast-ico svg { width: 17px; height: 17px; }
.toast { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; } /* centralizado com left:50% ficava espremido em metade da tela no celular */
.toast a { white-space: nowrap; }
.toast.toast-link { cursor: pointer; }
.toast.toast-link:hover { background: #333; }

/* Checkout: foto dos itens em "Seu pedido" */
.co-item { display: grid !important; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px !important; margin: 8px 0 !important; }
.co-item img, .co-noimg { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid var(--borda); display: block; }
.co-name { line-height: 1.3; }
.co-name small { display: block; color: var(--texto-suave); font-size: 12px; }
.co-price { font-weight: 700; white-space: nowrap; }
/* Checkout: formas de pagamento com ícone (PAY_VISUAL em checkout.js) */
.pay-opt { gap: 12px; }
.pay-ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.pay-pix .pay-ico { background: #e3f6f3; }
.pay-pix .pay-ico img { width: 24px; height: 24px; }
.pay-card .pay-ico { background: #e6eefa; color: var(--marinho); }
.pay-card .pay-ico svg { width: 24px; height: 24px; }
.pay-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #1f9d74; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .3px; vertical-align: 2px; }
.pay-brands { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.pay-brands img { height: 18px; width: auto; padding: 2px 4px; background: #fff; border: 1px solid var(--borda); border-radius: 4px; }
label.pay-pix:has(input:checked) { border-color: #1f9d74; box-shadow: 0 0 0 1px #1f9d74; background: #f1fbf8; } /* Pix escolhido: verde */

/* Cabeçalho reservado enquanto o JS não monta (faixa azul do tamanho certo): evita o "pulo" ao abrir a página.
   --ph-dev = faixa "Loja em desenvolvimento" (só com DEV_BANNER), --ph-hdr = cabeçalho, --ph-cat = barra de categorias */
#site-header.hdr-ph:empty { --ph-dev: 0px; --ph-hdr: 96px; --ph-cat: 46px; min-height: calc(var(--ph-dev) + var(--ph-hdr) + var(--ph-cat));
  background: linear-gradient(to bottom, #01214E 0 calc(var(--ph-dev) + var(--ph-hdr)), #e8f1fb calc(var(--ph-dev) + var(--ph-hdr))); box-shadow: inset 0 -1px #d6e6f7; }
#site-header.hdr-ph-dev:empty { --ph-dev: 35px; }
@media (max-width: 900px) { #site-header.hdr-ph:empty { --ph-cat: 47px; } #site-header.hdr-ph-dev:empty { --ph-dev: 53px; } }
@media (max-width: 560px) { #site-header.hdr-ph:empty { --ph-hdr: 80px; } #site-header.hdr-ph-dev:empty { --ph-dev: 72px; } }
@media (max-width: 380px) { #site-header.hdr-ph:empty { --ph-hdr: 72px; } }

/* Checkout: Pix e Cartão/Boleto lado a lado só quando a coluna do formulário tem espaço (cada cartão com ~340px);
   em telas menores (tablets, notebooks pequenos) ficam um embaixo do outro, como no celular. Só com PAY_VISUAL */
#form { container-type: inline-size; }
@container (min-width: 700px) {
  .ship-opts:has(.pay-opt) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ship-opts:has(.pay-opt) li { margin: 0; display: flex; }
  /* Linha de cima: bolinha · ícone · nome · preço; embaixo, na largura toda: descrição e bandeiras */
  .ship-opts:has(.pay-opt) .pay-opt { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "radio ico nome preco" "desc desc desc desc" "marcas marcas marcas marcas"; align-content: start; align-items: center; gap: 0 12px; padding: 16px; }
  .ship-opts:has(.pay-opt) .pay-opt input { grid-area: radio; }
  .ship-opts:has(.pay-opt) .pay-opt .pay-ico { grid-area: ico; }
  .ship-opts:has(.pay-opt) .pay-opt .ship-name { display: contents; }
  .ship-opts:has(.pay-opt) .pay-opt .pay-title { grid-area: nome; font-size: 15px; font-weight: 700; color: var(--texto-forte); }
  .ship-opts:has(.pay-opt) .pay-opt b { grid-area: preco; font-size: 17px; }
  .ship-opts:has(.pay-opt) .pay-opt small { grid-area: desc; margin-top: 12px; font-size: 13.5px; }
  .ship-opts:has(.pay-opt) .pay-opt .pay-brands { grid-area: marcas; margin-top: 8px; }
}

/* Checkout: campo que falta preencher */
.input.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #d64545 !important; background: #fff6f6; box-shadow: 0 0 0 3px rgba(214, 69, 69, .15); }
#ship-box.is-invalid { border-radius: 10px; box-shadow: 0 0 0 2px #d64545; background: #fff6f6; padding: 6px; }
.gift-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.gift-ico .gl { stroke: var(--gift-line, #01214E); stroke-width: 1.6; stroke-linejoin: round; }
html[data-theme="dark"] .gift-ico { --gift-line: #01214E; } /* modo escuro: o rosa desenha a silhueta e o azul separa tampa e fita */
.c-client .gift-ico { width: 18px; height: 18px; margin: 0 0 0 4px; vertical-align: -3px; }
/* Ícones do checkout (Pix, cartão, bandeiras, presente): não selecionam nem arrastam ao clicar/tocar */
.pay-ico, .pay-brands, .gift-ico { -webkit-user-select: none; user-select: none; }
.pay-ico img, .pay-brands img { -webkit-user-drag: none; pointer-events: none; }
/* Carrinho no computador/tablet: "Finalizar compra" sempre visível no fim do resumo (CART_STICKY_CTA).
   O botão fica preso ao fundo da tela, dentro do quadro do resumo */
@media (min-width: 901px) { .summary:has(.cart-cta-sticky) { padding-bottom: 0; } } /* no celular a barra fica fora do resumo: mantém o espaço normal */
@media (min-width: 901px) {
  .cart-cta-sticky { position: sticky; bottom: 0; z-index: 2; margin: 16px -20px 0; padding: 14px 20px 20px; background: var(--fundo-suave);
    box-shadow: 0 -10px 14px -10px rgba(1, 33, 78, .18); border-radius: 0 0 var(--raio) var(--raio); }
  .cart-cta-sticky .btn { margin-top: 0; }
}
.c-client .card-ico { margin-left: 2px; }

/* Checkout: botão "Ir para o pagamento" no resumo (SUMMARY_PAY_BTN) */
.summary-pay { margin-top: 16px; }
.summary-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--texto-suave); }
.summary-safe svg { width: 14px; height: 14px; }
.summary .remind-note { margin: 8px 0 0; text-align: center; font-size: 12px; }
/* Admin > Produtos: chips Ativos/Rascunhos ao lado da busca */
.p-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.p-tools .p-status { margin: 0; display: flex; gap: 6px; }
@media (max-width: 700px) {
  /* Celular: busca + "Novo produto" lado a lado em cima; Ativos / Rascunhos embaixo */
  .p-tools { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .p-tools #filter { grid-row: 1; grid-column: 1; min-width: 0; width: 100%; }
  .p-tools #new { grid-row: 1; grid-column: 2; white-space: nowrap; }
  .p-tools .p-status { grid-row: 2; grid-column: 1 / -1; }
  .p-tools .p-status .chip { flex: 1; }
}

/* Carrinho e checkout no celular: Total + botão fixos no rodapé da tela (deslizam para fora quando o botão do resumo aparece) */
.co-bar { display: none; }
@media (max-width: 900px) {
  .co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -6px 20px rgba(1, 33, 78, .12); border-top: 1px solid var(--borda);
    transition: transform .25s ease, opacity .25s ease; }
  .co-bar.co-bar-off { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .co-bar .cta-price { display: flex; flex-direction: column; line-height: 1.15; }
  .co-bar .cta-price small { font-size: 11px; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
  .co-bar .cta-price > b { font-size: 19px; color: var(--marinho); white-space: nowrap; }
  .co-bar .cta-price span { font-size: 11.5px; color: var(--texto-suave); white-space: nowrap; }
  .co-bar .cta-price span b { color: #1f9d74; }
  .co-bar .btn { flex: 1; margin: 0; padding: 14px 10px; }
  body:has(.co-bar:not(.co-bar-off)) .whats-float { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
/* Loja: seta própria nos dropdowns, afastada da borda (igual ao admin). Filtros de categoria (.list-filters) têm a deles */
.field select, select.input, .pay-form select { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2301214e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 11px 8px; }
.list-filters select { padding-right: 30px; }
.cpf-note { display: block; margin-top: 6px; color: #c03b3b; font-size: 12.5px; font-weight: 700; }

/* Seletor próprio (Parcelas, CUSTOM_SELECT em pagamento.js): lista abre embaixo do campo, igual em qualquer navegador */
.xsel { position: relative; }
.xsel-btn { width: 100%; text-align: left; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2301214e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 11px 8px; }
.xsel-btn[aria-expanded="true"] { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--rosa-claro); }
.xsel-btn:disabled { color: var(--texto-suave); cursor: default; }
.xsel-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff;
  border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 30px rgba(1, 33, 78, .16); max-height: 290px; overflow-y: auto; }
.xsel-list li { padding: 11px 12px 11px 34px; border-radius: 8px; cursor: pointer; position: relative; font-size: 15px; font-weight: 500; color: var(--texto-forte); }
.xsel-list li.on { background: var(--fundo-suave); }
.xsel-list li[aria-selected="true"] { font-weight: 800; color: var(--marinho); }
.xsel-list li[aria-selected="true"]::before { content: '✓'; position: absolute; left: 12px; color: var(--marinho); }
.xsel-list li[aria-disabled="true"] { color: var(--texto-suave); cursor: default; }
/* Carrinho no computador: itens presos no topo (CART_STICKY_ITEMS). Se a lista for mais alta que a tela, rola normal */
@media (min-width: 901px) { .cart-items-sticky { position: sticky; top: 16px; } }
/* Página do pedido: espaço reservado (o conteúdo chega depois via JS) */
.order-main { min-height: 600px; }
.save-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.saved-note { color: #1f9d74; font-weight: 800; font-size: 14px; }

/* Turnstile (verificação invisível): só aparece se o Cloudflare precisar de um clique; fica centralizado no pé da tela */
.ts-box { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; }

/* Google Pay no pagamento do cartão */
#gpay-btn { min-height: 48px; } #gpay-btn button { border-radius: 10px !important; }
.gpay-or { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; color: var(--texto-suave); font-size: 13px; }
.gpay-or::before, .gpay-or::after { content: ''; flex: 1; height: 1px; background: var(--borda); }