/* ==========================================================================
   ADEGA HITECH — Design System (cores: bordô + dourado)
   Tipografia: Archivo (display/headings) + Inter (corpo/UI)
   ========================================================================== */


:root {
  color-scheme: light;
  /* ---- Modo claro (padrão) ---- */
  --bg: #FFFFFF;
  --surface: #F7F7F7;
  --surface-2: #F1F1F1;
  --ink: #1A1416;
  --ink-soft: #5E5759;
  --ink-faint: #9A9395;
  --border: #E9E7E8;
  --primary: #7B1E34;
  --primary-dark: #5E1426;
  --primary-ink: #FFFFFF;
  --success: #1E8E4F;
  --danger: #D6392B;
  --warning: #C77C00;
  --shadow: 0 1px 2px rgba(22,20,16,.04);
  --radius: 6px;
  --radius-lg: 14px;
  --maxw: 1280px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #100A0B;
  --surface: #1B1113;
  --surface-2: #251719;
  --ink: #FBF6EF;
  --ink-soft: #DCCFC4;
  --ink-faint: #A7958B;
  --border: rgba(255,255,255,.20);
  --primary: #D4A95E;
  --primary-dark: #E2BE7A;
  --primary-ink: #1A0E10;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto-escuro"] {
    color-scheme: dark;
    --bg: #100A0B;
    --surface: #1B1113;
    --surface-2: #251719;
    --ink: #FBF6EF;
    --ink-soft: #DCCFC4;
    --ink-faint: #A7958B;
    --border: rgba(255,255,255,.20);
    --primary: #D4A95E;
    --primary-dark: #E2BE7A;
    --primary-ink: #1A0E10;
  }
}

/* Bordas de campos/botões um pouco mais fortes no escuro, pra ficar bem visível */
[data-theme="dark"] .size-btn,
[data-theme="dark"] .color-swatch,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .qty-stepper,
[data-theme="dark"] .pay-method label {
  border-color: rgba(255,255,255,.32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .size-btn,
  :root:not([data-theme="light"]) .color-swatch,
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea,
  :root:not([data-theme="light"]) .qty-stepper,
  :root:not([data-theme="light"]) .pay-method label {
    border-color: rgba(255,255,255,.32);
  }
}

* { box-sizing: border-box; overflow-wrap: break-word; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: background-color .2s ease, color .2s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }

h1, h2, h3, h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------------- Botões ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius); border: 1.5px solid transparent;
  font-weight: 700; font-size: .95rem; transition: all .15s ease; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink); padding: 8px 14px; }
.btn-ghost:hover { background: var(--surface); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 24px; height: 76px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.logo-link { display: flex; align-items: center; height: 40px; flex-shrink: 0; }
.logo-link img { height: 34px; width: auto; }
.logo-clara-img { display: block; }
.logo-escura-img { display: none; }
[data-theme="dark"] .logo-clara-img { display: none; }
[data-theme="dark"] .logo-escura-img { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-clara-img { display: none; }
  :root:not([data-theme="light"]) .logo-escura-img { display: block; }
}

.main-nav { display: flex; gap: 28px; margin-right: auto; }
.main-nav a { font-weight: 600; font-size: .95rem; color: var(--ink); position: relative; }
.main-nav a:hover { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: transparent; border: none; color: var(--ink);
  position: relative;
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.theme-toggle-track {
  width: 52px; height: 30px; border-radius: 30px; background: var(--surface-2); border: 1px solid var(--border);
  position: relative; flex-shrink: 0;
}
.theme-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); transition: transform .2s ease; display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(22px); background: var(--primary); }
.theme-toggle-thumb svg { width: 14px; height: 14px; color: var(--bg); }

.menu-toggle { display: none; }

/* Busca overlay */
.search-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200;
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.search-overlay.active { display: flex; }
.search-box {
  background: var(--bg); width: min(600px, 92vw); border-radius: var(--radius-lg); padding: 8px;
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--border);
}
.search-box input { flex: 1; border: none; background: transparent; padding: 14px; color: var(--ink); outline: none; font-size: 1.05rem; }
.search-close { padding: 10px; }

/* Menu mobile (off-canvas) */
.mobile-menu {
  position: fixed; inset: 0 15% 0 0; background: var(--bg); z-index: 300;
  transform: translateX(-100%); transition: transform .25s ease; padding: 24px 22px; overflow-y: auto;
  border-right: 1px solid var(--border);
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 290; display: none;
}
.mobile-menu-overlay.active { display: block; }
.mobile-menu a { display: block; padding: 14px 4px; font-weight: 700; font-size: 1.1rem; border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------------- Hero ---------------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 56px; }
.hero-eyebrow { color: var(--primary); font-weight: 800; letter-spacing: .04em; font-size: .85rem; margin-bottom: 14px; }
.hero-copy h1 { max-width: 12ch; }
.hero-copy p { font-size: 1.1rem; max-width: 46ch; margin-bottom: 1.6em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; overflow: hidden; min-height: 420px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-tag {
  position: absolute; left: 24px; bottom: 24px; background: var(--bg); padding: 12px 18px; border-radius: var(--radius);
  font-weight: 700; font-size: .85rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 40px 22px; order: 2; }
  .hero-media { min-height: 320px; order: 1; }
}

/* ---------------- Seções ---------------- */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 20px; }
.section-head h2 { margin: 0; }
.section-head .btn { flex-shrink: 0; }

/* ---------------- Grid de produtos ---------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.product-card { display: block; }
.product-card-media {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--surface);
  margin-bottom: 12px; border: 1px solid var(--border);
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease; }
.product-card:hover .product-card-media img { transform: scale(1.045); }
.product-card-media img.img-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.product-card:hover .product-card-media img.img-alt { opacity: 1; }
.badge {
  position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--bg);
  font-size: .7rem; font-weight: 800; padding: 5px 10px; border-radius: 30px; text-transform: uppercase; letter-spacing: .03em;
}
.product-card-title { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.product-card-price { font-weight: 800; color: var(--primary); font-size: 1rem; }
.product-card-colors { display: flex; gap: 5px; margin-top: 8px; }
.swatch-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }

/* ---------------- Categorias ---------------- */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
.category-card {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px; background: var(--surface); border: 1px solid var(--border);
}
.category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .9; }
.category-card::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%); }
.category-card span { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: .95rem; }

/* ---------------- Rodapé ---------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 32px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .footer-grid ul { align-items: center; justify-content: center; }
  .footer-logo { display: flex; flex-direction: column; align-items: center; }
}
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; color: var(--ink-faint); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid li { max-width: 100%; word-break: break-word; }
.footer-grid a:hover { color: var(--primary); }
.footer-logo img { height: 32px; margin-bottom: 14px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 20px 0; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--ink-faint);
}
@media (max-width: 560px) {
  .footer-bottom { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
}

/* ---------------- WhatsApp flutuante ---------------- */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.07); }
.whatsapp-float svg { width: 30px; height: 30px; }

/* ---------------- Página de produto ---------------- */
.product-page { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; padding: 40px 0 70px; }
@media (max-width: 900px) { .product-page { grid-template-columns: 1fr; gap: 24px; } }

.gallery-main {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); cursor: zoom-in; touch-action: pan-y;
}
.gallery-track { display: flex; height: 100%; width: 100%; transition: transform .3s ease; }
.gallery-slide { flex: 0 0 100%; height: 100%; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gallery-main.zoomed .gallery-slide img { object-fit: contain; }
.gallery-main.zoomed { cursor: zoom-out; }
.gallery-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.gallery-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; }
.gallery-dots button.active { background: var(--primary); width: 20px; border-radius: 6px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery-thumbs img { width: 68px; height: 90px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; opacity: .7; }
.gallery-thumbs img.active { border-color: var(--primary); opacity: 1; }
.gallery-hint { text-align:center; font-size:.78rem; color: var(--ink-faint); margin-top: 8px; }

.product-info .kicker { color: var(--primary); font-weight: 800; font-size: .82rem; letter-spacing: .04em; margin-bottom: 8px; }
.product-info h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 10px; }
.product-price { font-size: 1.7rem; font-weight: 800; color: var(--primary); margin-bottom: 18px; }
.product-desc { margin-bottom: 24px; line-height: 1.65; }

.variation-group { margin-bottom: 22px; }
.variation-label { font-weight: 700; font-size: .9rem; margin-bottom: 10px; display: flex; justify-content: space-between; }
.variation-label .selected-value { color: var(--ink-soft); font-weight: 500; }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
  min-width: 48px; height: 44px; padding: 0 12px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: transparent; color: var(--ink); font-weight: 700; font-size: .9rem;
}
.size-btn.active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.color-options { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border); padding: 2px; position: relative;
}
.color-swatch .fill { display:block; width:100%; height:100%; border-radius:50%; border: 1px solid rgba(0,0,0,.08); }
.color-swatch.active { border-color: var(--primary); }

.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius); }
.qty-stepper button { width: 40px; height: 44px; background: none; border: none; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.qty-stepper input { width: 44px; height: 44px; border: none; text-align: center; background: transparent; color: var(--ink); }

.product-actions { display: flex; gap: 12px; margin-top: 22px; }
.product-trust { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: .87rem; color: var(--ink-soft); }
.product-trust div { display: flex; gap: 10px; align-items: center; }
.product-trust svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }

/* ---------------- Varejo / Atacado ---------------- */
.venda-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 22px; }
@media (max-width: 360px) { .venda-tipo { grid-template-columns: 1fr; } }
.venda-tipo-opcao {
  display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; position: relative;
}
.venda-tipo-opcao input { position: absolute; opacity: 0; }
.venda-tipo-opcao.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.venda-tipo-info { display: flex; flex-direction: column; }
.venda-tipo-info strong { font-size: .95rem; }
.venda-tipo-info small { color: var(--ink-faint); font-size: .78rem; }
.venda-tipo-preco { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.venda-tipo-preco small { font-weight: 600; font-size: .72rem; color: var(--ink-faint); }

.atacado-pecas-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.atacado-peca-linha {
  display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); flex-wrap: wrap;
}
.atacado-peca-num { font-size: .78rem; font-weight: 700; color: var(--ink-faint); min-width: 58px; }
.atacado-peca-linha select {
  flex: 1; min-width: 90px; padding: 9px 10px; border-radius: 6px; border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); font-size: .85rem;
}

/* ---------------- Carrinho ---------------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 40px 0 70px; align-items: start; }
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); align-items: start; }
.cart-item img { width: 90px; height: 110px; object-fit: cover; object-position: top center; border-radius: 6px; }
.cart-item-details { min-width: 0; } /* evita que o texto empurre a coluna e vaze da grade */
.cart-item-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-item-meta { color: var(--ink-faint); font-size: .85rem; }
.cart-item-hint { font-size: .76rem; color: var(--ink-faint); margin: 6px 0 0; }
.cart-item-qty-form { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cart-item-total { font-weight: 800; white-space: nowrap; text-align: right; }
.badge-atacado {
  display: inline-block; background: var(--primary); color: var(--primary-ink); font-size: .68rem; font-weight: 800;
  padding: 3px 9px; border-radius: 30px; text-transform: uppercase; letter-spacing: .03em;
}
.qty-stepper-sm button { width: 32px; height: 36px; font-size: 1rem; }
.qty-stepper-sm input { width: 36px; height: 36px; }

@media (max-width: 560px) {
  .cart-item { grid-template-columns: 68px 1fr; grid-template-areas: "img details" "total total"; row-gap: 10px; }
  .cart-item img { width: 68px; height: 86px; grid-area: img; }
  .cart-item-details { grid-area: details; }
  .cart-item-total { grid-area: total; text-align: left; padding-top: 4px; border-top: 1px dashed var(--border); }
}

.cart-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: 96px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: .95rem; color: var(--ink-soft); }
.summary-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.remove-link { color: var(--danger); font-size: .82rem; font-weight: 600; background: none; border: none; padding: 0; text-decoration: underline; }

/* ---------------- Calculadora de frete (carrinho) ---------------- */
.frete-calc { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 16px; }
.frete-calc > label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 10px; }
.frete-calc-row { display: flex; gap: 8px; }
.frete-calc-row input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); outline: none; font-size: .92rem;
}
.frete-calc-row input:focus { border-color: var(--primary); }
#frete-opcoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.frete-opcao {
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .88rem;
}
.frete-opcao:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.frete-opcao span { flex: 1; }
.frete-opcao input { width: auto; }
.frete-escolhido-atual { color: var(--success); font-weight: 700; font-size: .85rem; margin: 10px 0 0; }

/* ---------------- Formulários (login, cadastro, checkout) ---------------- */
.auth-wrap { max-width: 440px; margin: 60px auto; padding: 0 20px 60px; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .85rem; color: var(--ink-faint); margin-top: 14px; text-align: center; }
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: .9rem; margin-bottom: 16px; }
.alert-error { background: rgba(214,57,43,.1); color: var(--danger); border: 1px solid rgba(214,57,43,.25); }
.alert-success { background: rgba(30,142,79,.1); color: var(--success); border: 1px solid rgba(30,142,79,.25); }

/* ---------------- Checkout steps ---------------- */
.checkout-steps { display: flex; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.checkout-step { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-weight: 700; font-size: .9rem; }
.checkout-step .num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.checkout-step.active { color: var(--ink); }
.checkout-step.active .num { background: var(--primary); border-color: var(--primary); color: #fff; }
.pay-method { display: flex; gap: 12px; margin-bottom: 20px; }
.pay-method label {
  flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center;
  font-weight: 700; cursor: pointer;
}
.pay-method input { display: none; }
.pay-method input:checked + span { color: var(--primary); }
.pay-method label:has(input:checked) { border-color: var(--primary); }

/* ---------------- Utilidades ---------------- */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state svg { width: 64px; height: 64px; color: var(--ink-faint); margin-bottom: 16px; }
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@media (max-width: 560px) {
  .footer-grid p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------- Carteira do afiliado (minha-conta.php) ---------------- */
.carteira-card {
  background: linear-gradient(135deg, var(--ink), #2a2620);
  color: #fff; border-radius: 14px; padding: 24px; margin-top: 20px;
}
[data-theme="dark"] .carteira-card { background: linear-gradient(135deg, var(--primary), #b8420f); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carteira-card { background: linear-gradient(135deg, var(--primary), #b8420f); } }
.carteira-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.carteira-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-bottom: 6px; }
.carteira-valor { font-family: 'Archivo'; font-size: 2rem; font-weight: 800; }
.carteira-selo { background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 30px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.carteira-card .form-note { color: rgba(255,255,255,.8); }

/* ---------------- Cupom (checkout.php) ---------------- */
.cupom-box { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 14px 0; padding: 14px 0; }
.cupom-input-row { display: flex; gap: 8px; }
.cupom-input-row input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg); color: var(--ink); outline: none; font-size: .92rem; text-transform: uppercase;
}
.cupom-input-row input:focus { border-color: var(--primary); }
.cupom-aplicado-atual { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--success); font-weight: 700; font-size: .9rem; flex-wrap: wrap; }

/* ---------------- Pop-up de boas-vindas ---------------- */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.popup-overlay.ativo { opacity: 1; pointer-events: auto; }
.popup-card {
  background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 18px;
  max-width: 420px; width: 100%; padding: 36px 30px 30px; text-align: center; position: relative;
  transform: translateY(14px) scale(.97); transition: transform .25s ease; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.popup-overlay.ativo .popup-card { transform: translateY(0) scale(1); }
.popup-fechar {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.popup-fechar:hover { background: var(--surface-2); }
.popup-card img { height: 34px; margin: 0 auto 18px; }
.popup-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.popup-card p { margin-bottom: 20px; }
.popup-card .btn { width: 100%; }

/* ==========================================================================
   V2 — Slider do início, checkout (entrega/retirada/cupom), preços promocionais
   ========================================================================== */

/* ---------------- Slider da página inicial ---------------- */
.hero-slider {
  position: relative; overflow: hidden; background: #08080A; color: #fff;
  aspect-ratio: 1920 / 800; max-height: min(calc(100vh - 90px), 860px); min-height: 300px;
  border-bottom: 1px solid var(--border); isolation: isolate; user-select: none;
}
.hero-slider-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity .9s cubic-bezier(.4,0,.2,1), visibility 0s linear .9s;
}
.hero-slide.ativo { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s cubic-bezier(.4,0,.2,1), visibility 0s; }
.hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* object-position top: se precisar cortar, corta embaixo — nunca a cabeça */
.hero-slide img { object-fit: cover; object-position: center top; transform-origin: 70% 0%; transform: scale(1.06); transition: transform 4.5s cubic-bezier(.2,.6,.2,1); }
.hero-slide.ativo img { transform: scale(1); }
.hero-slide::after { /* reforço de contraste pro texto, em cima da imagem */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,6,8,.55) 0%, rgba(6,6,8,.25) 38%, transparent 60%);
}
.hero-slide-conteudo {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
}
.hero-slide-texto { max-width: min(46%, 580px); }
.hero-slide-eyebrow { font-weight: 800; letter-spacing: .14em; font-size: clamp(.68rem, .9vw, .82rem); color: #D9B26A; margin-bottom: 14px; text-transform: uppercase; }
.hero-slide-titulo { color: #fff; font-size: clamp(1.9rem, 4.1vw, 4.1rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .35em; max-width: 13ch; }
.hero-slide-desc { color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.15vw, 1.12rem); max-width: 44ch; margin-bottom: 1.5em; }
.hero-slide-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-hero-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.85); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-hero-outline:hover { background: #fff; color: #0A0A0B; }
.hero-slide .btn-primary { box-shadow: 0 10px 30px -10px rgba(212,169,94,.7); }

/* texto entrando junto com o slide */
.hero-slide-texto > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.hero-slide.ativo .hero-slide-texto > * { opacity: 1; transform: none; }
.hero-slide.ativo .hero-slide-texto > *:nth-child(2) { transition-delay: .08s; }
.hero-slide.ativo .hero-slide-texto > *:nth-child(3) { transition-delay: .16s; }
.hero-slide.ativo .hero-slide-texto > *:nth-child(4) { transition-delay: .24s; }
.hero-slide.ativo .hero-slide-texto > *:nth-child(5) { transition-delay: .32s; }

.hero-dots { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots button { width: 34px; height: 18px; padding: 7px 0; background: none; border: 0; cursor: pointer; }
.hero-dots button span { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.32); overflow: hidden; position: relative; }
.hero-dots button span::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-dots button.ativo span::after { animation: hero-progresso 4s linear forwards; }
.hero-slider.pausado .hero-dots button.ativo span::after { animation-play-state: paused; }
@keyframes hero-progresso { to { transform: scaleX(1); } }
.hero-seta {
  position: absolute; z-index: 5; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.hero-seta svg { width: 20px; height: 20px; }
.hero-seta:hover { background: rgba(255,255,255,.2); transform: scale(1.06); }
.hero-seta-ant { left: 18px; } .hero-seta-prox { right: 18px; }
.hero-slider:hover .hero-seta, .hero-seta:focus-visible { opacity: 1; }
.hero-tag-envio {
  position: absolute; z-index: 5; right: 22px; bottom: 16px; font-size: .78rem; font-weight: 700; color: #fff;
  padding: 8px 14px; border-radius: 30px; background: rgba(10,10,12,.45); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 1000px) {
  .hero-slide-desc { display: none; }
  .hero-tag-envio { display: none; }
}
/* celular: imagem própria em pé (4:5) e texto embaixo */
@media (max-width: 760px) {
  .hero-slider { aspect-ratio: 1080 / 1350; max-height: none; min-height: 0; }
  .hero-slide::after { background: linear-gradient(0deg, rgba(6,6,8,.7) 0%, rgba(6,6,8,.2) 38%, transparent 55%); }
  .hero-slide img { transform-origin: 50% 0%; }
  .hero-slide-conteudo { align-items: flex-end; padding: 0 20px 52px; }
  .hero-slide-texto { max-width: 100%; }
  .hero-slide-titulo { font-size: clamp(1.75rem, 8.4vw, 2.6rem); max-width: 14ch; }
  .hero-slide-desc { display: block; font-size: .92rem; margin-bottom: 1.1em; }
  .hero-slide-cta .btn { padding: 12px 20px; font-size: .9rem; }
  .hero-seta { display: none; }
  .hero-dots { bottom: 14px; }
}

/* ---------------- Preço promocional (riscado) ---------------- */
.preco-antigo { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; font-size: .82em; margin-right: 4px; }
.product-price .preco-antigo { font-size: .6em; vertical-align: middle; }
.bf-selo {
  position: absolute; top: 10px; right: 10px; z-index: 2; overflow: hidden;
  background: #0A0A0B; color: #fff; border: 1px solid rgba(255,255,255,.22);
  font-size: .66rem; font-weight: 800; letter-spacing: .05em; padding: 5px 9px; border-radius: 30px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
}
.bf-selo b { color: #D9B26A; }
.bf-selo::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: bf-brilho-selo 3.2s ease-in-out infinite;
}
@keyframes bf-brilho-selo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.badge-bf {
  display: inline-block; background: #0A0A0B; color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: .66rem; font-weight: 800;
  padding: 3px 9px; border-radius: 30px; text-transform: uppercase; letter-spacing: .04em;
}

/* ---------------- Checkout ---------------- */
.checkout-card { margin-bottom: 20px; }
.checkout-subtitulo { font-weight: 800; font-size: .88rem; margin: 18px 0 10px; color: var(--ink); }
.msg-erro { color: var(--danger) !important; text-align: left; }
.msg-ok { color: var(--success) !important; text-align: left; }
.cupom-boasvindas { color: var(--success); font-size: .88rem; margin: -4px 0 12px; }
.cupom-aplicado-atual.cupom-pendente { color: var(--warning); }
#cupom-mensagem .form-note { margin-top: 10px; }

.entrega-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
@media (max-width: 480px) { .entrega-opcoes { grid-template-columns: 1fr; } }
.entrega-opcao {
  display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  cursor: pointer; position: relative; background: var(--bg); transition: border-color .15s ease, background .15s ease;
}
.entrega-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.entrega-opcao:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); }
.entrega-opcao:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.entrega-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink); }
.entrega-opcao:has(input:checked) .entrega-icone { background: var(--primary); color: var(--primary-ink); }
.entrega-icone svg { width: 22px; height: 22px; }
.entrega-texto { display: flex; flex-direction: column; }
.entrega-texto strong { font-size: .95rem; }
.entrega-texto small { color: var(--ink-faint); font-size: .8rem; }

.frete-opcoes-checkout { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.frete-opcoes-checkout:empty { display: none; }
.frete-opcoes-checkout .frete-opcao { background: var(--bg); }
.frete-carregando { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-faint); padding: 12px 0; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: girar-spinner .7s linear infinite; display: inline-block; }
@keyframes girar-spinner { to { transform: rotate(360deg); } }
.cep-status { text-align: left; margin: -6px 0 12px; }
.cep-status:empty { display: none; }

.enderecos-salvos { margin-bottom: 16px; }
.enderecos-salvos-titulo { display: block; font-weight: 800; font-size: .85rem; margin-bottom: 8px; }
.enderecos-salvos-lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.endereco-chip {
  flex: 0 0 auto; max-width: 260px; text-align: left; padding: 10px 12px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.endereco-chip strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.endereco-chip small { font-size: .75rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.endereco-chip:hover, .endereco-chip.ativo { border-color: var(--primary); }

.loja-info { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--border); font-size: .9rem; color: var(--ink-soft); }
.loja-info-linha { display: flex; gap: 12px; align-items: flex-start; }
.loja-info-linha svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.retirada-pagamento { display: flex; flex-direction: column; gap: 8px; }
.retirada-pag-opcao {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--radius);
  cursor: pointer; background: var(--bg);
}
.retirada-pag-opcao input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.retirada-pag-opcao:has(input:checked) { border-color: var(--primary); }
.retirada-pag-opcao span { display: flex; flex-direction: column; gap: 2px; }
.retirada-pag-opcao small { color: var(--ink-faint); font-size: .82rem; }

.lembrar-dados { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 20px; padding: 0 4px; }
.check-linha { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; cursor: pointer; color: var(--ink-soft); }
.check-linha input { width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.check-linha small { color: var(--ink-faint); }
.link-esquecer { background: none; border: 0; padding: 0; color: var(--ink-faint); font-size: .8rem; text-decoration: underline; cursor: pointer; }

.summary-item span:first-child { min-width: 0; }
.summary-row small { display: block; font-size: .76rem; color: var(--ink-faint); font-weight: 500; }
.summary-row > span:last-child { text-align: right; white-space: nowrap; }
.summary-desconto { color: var(--success); }
.summary-bf { color: var(--primary); font-weight: 700; }
.summary-gratis { color: var(--success); }
.summary-pendente { color: var(--ink-faint); font-style: normal; font-size: .85rem; }
.pix-codigo { font-size: .8rem; word-break: break-all; background: var(--surface-2); padding: 10px; border-radius: 8px; color: var(--ink-soft); }

/* ---------------- Código de coleta (retirada na loja) ---------------- */
.coleta-box {
  margin: 22px auto 0; max-width: 420px; padding: 18px; border-radius: var(--radius-lg);
  border: 1.5px dashed var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--bg)); text-align: center;
}
.coleta-label { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.coleta-codigo { font-family: 'Archivo', monospace; font-weight: 900; font-size: 2rem; letter-spacing: .18em; color: var(--ink); margin-top: 4px; }
.coleta-loja { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .88rem; color: var(--ink-soft); }
.coleta-loja span { display: block; margin-top: 6px; color: var(--ink-faint); font-size: .82rem; }


/* ==========================================================================
   ADEGA HITECH — ajustes para fotos de garrafas (fundo transparente)
   (fundo branco e limpo; mix-blend-mode some com o fundo branco de fotos que não são PNG transparente)
   As fotos de vinho são verticais e sem fundo: mostramos a garrafa inteira,
   centralizada, num fundo creme/bordô suave.
   ========================================================================== */
.product-card-media { background: #FFFFFF; }
[data-theme="dark"] .product-card-media { background: #FFFFFF; }
.product-card-media img { object-fit: contain; object-position: center; padding: 6% 8%; mix-blend-mode: multiply; }
.product-card:hover .product-card-media img { transform: scale(1.06) translateY(-2px); }
.gallery-main { background: #FFFFFF; }
.gallery-slide img { object-fit: contain; object-position: center; padding: 4%; mix-blend-mode: multiply; }
.gallery-thumbs img { object-fit: contain; background: var(--surface); }
.cart-item img { object-fit: contain; background: #fff; padding: 4px; mix-blend-mode: multiply; }
/* categorias: foto inteira, centralizada, sem fundo colorido, nome embaixo */
.category-card { background: #FFFFFF; flex-direction: column; justify-content: flex-end; align-items: center; padding: 14px 12px 16px; }
.category-card::after { display: none; }
.category-card img { position: absolute; inset: 10px 10px 48px; width: calc(100% - 20px); height: calc(100% - 58px); object-fit: contain; object-position: center; padding: 0; opacity: 1; mix-blend-mode: multiply; transition: transform .3s ease; }
.category-card:hover img { transform: scale(1.05); }
.category-card span { color: var(--ink); font-weight: 800; text-align: center; }
.category-card:hover { border-color: var(--primary); }
.product-desc { white-space: normal; }

/* barra de frete grátis no carrinho */
.frete-gratis-barra { margin: 14px 0 6px; font-size: .86rem; color: var(--ink-soft); }
.frete-gratis-trilho { height: 6px; border-radius: 6px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.frete-gratis-trilho i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #D4A95E); border-radius: 6px; }
.summary-gratis { color: var(--success); font-weight: 800; }

/* Pix */
.pix-qr { display: flex; justify-content: center; margin: 0 auto 14px; }
.pix-qr svg { width: 230px; height: 230px; border-radius: 10px; background: #fff; padding: 6px; }
.pix-valor { font-size: 1rem; margin-bottom: 10px; }
.pix-codigo { word-break: break-all; font-family: ui-monospace, monospace; font-size: .74rem; background: var(--surface); border: 1px dashed var(--border); padding: 10px; border-radius: 8px; color: var(--ink-soft); }

/* aviso de idade (+18) */
.idade-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(12,6,8,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.idade-card { background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 16px; max-width: 380px; width: 100%; padding: 30px 26px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.idade-card img { height: 46px; margin: 0 auto 16px; }
.idade-card h3 { margin-bottom: 8px; }
.idade-card .idade-botoes { display: flex; gap: 10px; margin-top: 18px; }
.idade-card .idade-botoes .btn { flex: 1; }
@media (min-width: 901px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }

/* menu com vários itens: não quebra linha e esconde os últimos em telas médias */
.main-nav { gap: 22px; }
.main-nav a { white-space: nowrap; }
@media (max-width: 1250px) { .main-nav a:nth-child(n+7):not(:last-child) { display: none; } }
@media (max-width: 1080px) { .main-nav { gap: 16px; } .main-nav a:nth-child(n+5):not(:last-child) { display: none; } }
/* logo da Adega é mais larga: ajusta o cabeçalho no celular pra caber tudo */
@media (max-width: 520px) {
  .header-inner { gap: 8px; padding: 0 12px; }
  .logo-link img { height: 27px; }
  .header-actions { gap: 2px; margin-left: auto; }
  .header-actions .icon-btn { width: 38px; height: 38px; }
}
@media (max-width: 370px) { .logo-link img { height: 22px; } }

/* ---------------- Checkout em 3 etapas ---------------- */
.checkout-steps { display: flex; gap: 8px; margin: 18px 0 22px; }
button.checkout-step { flex: 1; border: 1px solid var(--border); background: var(--bg); color: var(--ink-faint); border-radius: 30px; padding: 10px 12px; font-weight: 700; font-size: .88rem; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
button.checkout-step .num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
button.checkout-step.active { color: var(--ink); border-color: var(--primary); }
button.checkout-step.active .num { background: var(--primary); color: #fff; }
@media (max-width: 520px) { button.checkout-step { font-size: .78rem; padding: 9px 6px; gap: 5px; } }
.etapa { transition: opacity .2s ease; }
.etapa-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.etapa-topo h3 { margin: 0; display: flex; align-items: center; gap: 10px; }
.etapa-num { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-family: inherit; }
.etapa.aberta .etapa-num, .etapa.feita .etapa-num { background: var(--primary); color: #fff; }
.etapa-alterar { display: none; background: none; border: 0; color: var(--primary); font-weight: 700; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.etapa.feita .etapa-alterar { display: inline; }
.etapa .etapa-corpo { margin-top: 18px; }
.etapa:not(.aberta) .etapa-corpo { display: none; }
.etapa-resumo { display: none; margin-top: 10px; font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.etapa.feita .etapa-resumo { display: block; }
.etapa.bloqueada { opacity: .55; }
.etapa-continuar { margin-top: 18px; }
.etapa .lembrar-dados { margin-top: 14px; }

.formas-pagamento { display: flex; flex-direction: column; gap: 10px; }
.forma-pagamento { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.forma-pagamento:hover { border-color: var(--ink-faint); }
.forma-pagamento input { position: absolute; opacity: 0; pointer-events: none; }
.forma-pagamento.ativa { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.forma-icone { width: 42px; height: 42px; border-radius: 10px; background: #E8F7F4; color: #32BCAD; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.forma-icone svg { width: 24px; height: 24px; }
.forma-texto { display: flex; flex-direction: column; flex: 1; }
.forma-texto small { color: var(--ink-faint); font-size: .8rem; }
.forma-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
.forma-pagamento.ativa .forma-check { border-color: var(--primary); }
.forma-pagamento.ativa .forma-check::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--primary); }
#area-pix { margin-top: 18px; }
.pix-explica { display: grid; gap: 8px; font-size: .88rem; color: var(--ink-soft); margin-bottom: 14px; }
.pix-explica b { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: .74rem; align-items: center; justify-content: center; margin-right: 8px; }
.pix-total-linha { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); margin-bottom: 12px; }
.pix-total-linha strong { font-size: 1.2rem; }
.checkout-lateral { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 96px; }
.checkout-lateral .cart-summary { position: static; }
.cupom-lateral h3 small { font-weight: 500; color: var(--ink-faint); font-size: .8rem; }
@media (max-width: 860px) { .checkout-lateral { position: static; } }
/* faixa da Black Friday no topo em bordô (mais clean que o preto) */
.bf-barra { background: #7B1E34 !important; }
.bf-barra::before { background: linear-gradient(90deg, #7B1E34, transparent) !important; }
.bf-barra::after { background: linear-gradient(-90deg, #7B1E34, transparent) !important; }
.bf-barra-grupo i { color: #F0D9A8 !important; }

/* ==========================================================================
   V5 — leitura no tema claro (letras mais pretas, bordas visíveis)
   ========================================================================== */
html:not([data-theme="dark"]) {
  --ink: #111010;
  --ink-soft: #3A3435;
  --ink-faint: #6A6365;
  --border: #D9D5D6;
  --border-forte: #B9B2B4;
  --surface: #F6F5F5;
  --surface-2: #ECEAEA;
}
[data-theme="dark"] { --ink-faint: #B9A99F; --border: rgba(255,255,255,.22); --border-forte: rgba(255,255,255,.38); }
body { color: var(--ink); }
p { color: var(--ink-soft); }
.product-card-title { color: var(--ink); font-weight: 600; }
.product-card-media { border: 1px solid var(--border); }
.section-head h2, h1, h2, h3 { color: var(--ink); }
.field label { color: var(--ink); font-size: .88rem; }
.field input, .field select, .field textarea { border: 1.5px solid var(--border-forte); background: var(--bg); color: var(--ink); font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #8C8587; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8F8789; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.field input.campo-erro { border-color: var(--danger); }
.btn-outline { border-width: 1.5px; }
.form-card, .cart-summary { border: 1.5px solid var(--border); background: var(--bg); }
.form-note { color: var(--ink-faint); }

/* ==========================================================================
   Slides (banners 1920×560 no computador, 828×994 no celular)
   ========================================================================== */
.hero-slider { aspect-ratio: 1920 / 560; max-height: none; min-height: 0; background: var(--surface); color: var(--ink); }
.hero-slide-img { display: block; color: inherit; }
.hero-slide-img img { object-fit: cover; object-position: center; transform: none !important; transition: none; }
.hero-slide-img::after, .hero-slide-bf::after { display: none; }
.hero-img-btn {
  position: absolute; z-index: 3; left: var(--l); top: var(--t);
  display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.4em; border-radius: 999px;
  font-weight: 800; font-size: clamp(.78rem, .95vw, 1rem); letter-spacing: .01em; white-space: nowrap;
  background: #7B1E34; color: #fff; box-shadow: 0 10px 26px -10px rgba(0,0,0,.55); transition: transform .2s, background .2s;
}
.hero-img-btn svg { width: 1.1em; height: 1.1em; transition: transform .2s; }
.hero-slide-img:hover .hero-img-btn { background: #5E1426; transform: translateY(-2px); }
.hero-slide-img:hover .hero-img-btn svg { transform: translateX(3px); }
.hero-img-texto-mobile { display: none; }
.hero-seta { background: rgba(255,255,255,.88); color: #111; border: 1px solid rgba(0,0,0,.12); }
.hero-seta:hover { background: #fff; }
.hero-dots { bottom: 12px; }
.hero-dots button span { background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.hero-dots button.ativo span::after { animation-duration: 5.5s; }
@media (max-width: 760px) {
  .hero-slider { aspect-ratio: 828 / 994; }
  .hero-img-btn.so-desktop { display: none; }
  .hero-img-btn.com-mobile { left: var(--lm); top: var(--tm); transform: translateX(-50%); font-size: .9rem; padding: .8em 1.5em; }
  .hero-slide-img:hover .hero-img-btn.com-mobile { transform: translateX(-50%); }
  .hero-img-texto-mobile { display: block; position: absolute; z-index: 3; left: 0; right: 0; top: 72%; text-align: center; color: #fff; padding: 0 20px; }
  .hero-img-texto-mobile strong { display: block; font-family: 'Archivo', sans-serif; font-size: 1.2rem; line-height: 1.15; }
  .hero-img-texto-mobile small { display: block; font-size: .82rem; color: rgba(255,255,255,.8); margin-top: 4px; }
}

/* ---------- Slide da Black Friday (feito em código; muda no tema escuro) ---------- */
.hero-slide-bf { background: #FFFFFF; overflow: hidden; }
[data-theme="dark"] .hero-slide-bf { background: #120A0C; }
.bfs-fundo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 90% at 85% 50%, rgba(212,169,94,.22), transparent 70%),
              radial-gradient(40% 80% at 0% 100%, rgba(123,30,52,.10), transparent 70%),
              linear-gradient(180deg, #FFFFFF, #FBF6F2); }
[data-theme="dark"] .bfs-fundo { background: radial-gradient(45% 90% at 85% 50%, rgba(212,169,94,.20), transparent 70%), radial-gradient(40% 80% at 0% 100%, rgba(163,48,76,.35), transparent 70%), linear-gradient(180deg, #160B0E, #0E0809); }
.bfs-fundo i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(123,30,52,.12); }
[data-theme="dark"] .bfs-fundo i { border-color: rgba(233,201,140,.14); }
.bfs-fundo i:nth-child(1) { width: 38vw; height: 38vw; right: 4vw; top: 50%; margin-top: -19vw; animation: bfs-gira 40s linear infinite; border-style: dashed; }
.bfs-fundo i:nth-child(2) { width: 28vw; height: 28vw; right: 9vw; top: 50%; margin-top: -14vw; }
.bfs-fundo i:nth-child(3) { width: 9vw; height: 9vw; left: -3vw; top: -3vw; background: rgba(123,30,52,.05); border: 0; }
@keyframes bfs-gira { to { transform: rotate(360deg); } }
.bfs-conteudo { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  padding: 0 max(4vw, calc((100vw - var(--maxw)) / 2 + 20px)); gap: 2vw; }
.bfs-texto { min-width: 0; }
.bfs-eyebrow { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; letter-spacing: .14em; font-size: max(.66rem, .72vw); color: #7B1E34; margin-bottom: 1.1vw; }
[data-theme="dark"] .bfs-eyebrow { color: #E9C98C; }
.bfs-ao-vivo { width: .7em; height: .7em; border-radius: 50%; background: #D6392B; animation: bf-pulso-v 1.4s ease-out infinite; }
@keyframes bf-pulso-v { 0% { box-shadow: 0 0 0 0 rgba(214,57,43,.55); } 100% { box-shadow: 0 0 0 .8em rgba(214,57,43,0); } }
.bfs-titulo { margin: 0 0 1vw; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 5.6vw; line-height: .92; letter-spacing: -.03em; color: #111010; white-space: nowrap; }
[data-theme="dark"] .bfs-titulo { color: #FBF6EF; }
.bfs-titulo-cor { background: linear-gradient(90deg, #7B1E34, #B8863E, #7B1E34); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bfs-brilho-texto 4s linear infinite; }
[data-theme="dark"] .bfs-titulo-cor { background-image: linear-gradient(90deg, #E9C98C, #FFF3D6, #D4A95E, #E9C98C); }
@keyframes bfs-brilho-texto { to { background-position: -200% 0; } }
.bfs-pill { display: inline-flex; align-items: baseline; gap: .45em; padding: .45em 1.1em; border-radius: 999px; background: #7B1E34; color: #fff; font-weight: 800; font-size: max(.8rem, 1.05vw); letter-spacing: .1em; margin-bottom: 1.1vw; box-shadow: 0 12px 26px -12px rgba(123,30,52,.7); }
.bfs-pill b { font-family: 'Archivo', sans-serif; font-size: 2.1em; font-weight: 900; letter-spacing: 0; line-height: 1; }
[data-theme="dark"] .bfs-pill { background: #E9C98C; color: #1A0E10; }
.bfs-desc { color: #3A3435; font-size: max(.85rem, 1.02vw); max-width: 44ch; margin: 0 0 1.4vw; }
[data-theme="dark"] .bfs-desc { color: #DCCFC4; }
.bfs-acoes { display: flex; align-items: center; gap: 1.4vw; flex-wrap: wrap; }
.bfs-btn { font-size: max(.85rem, 1vw); padding: .95em 2em; }
.bfs-contador { display: flex; gap: .45vw; }
.bfs-contador span { display: flex; flex-direction: column; align-items: center; min-width: 3.4vw; padding: .45vw .3vw; border-radius: .6vw; background: #fff; border: 1.5px solid #D9D5D6; }
[data-theme="dark"] .bfs-contador span { background: #1F1215; border-color: rgba(255,255,255,.2); }
.bfs-contador b { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: max(.95rem, 1.35vw); line-height: 1; color: #111010; font-variant-numeric: tabular-nums; }
[data-theme="dark"] .bfs-contador b { color: #FBF6EF; }
.bfs-contador small { font-size: max(.55rem, .6vw); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6A6365; }
[data-theme="dark"] .bfs-contador small { color: #B9A99F; }
.bfs-visual { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.bfs-anel { position: absolute; width: 21vw; height: 21vw; border-radius: 50%; background: radial-gradient(circle, rgba(212,169,94,.35), rgba(212,169,94,0) 70%); animation: bfs-respira 3.5s ease-in-out infinite; }
@keyframes bfs-respira { 50% { transform: scale(1.12); opacity: .7; } }
.bfs-garrafas { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 80%; }
.hero-slide .bfs-garrafas img { position: relative; inset: auto; transform: none; transition: none; height: 100%; width: auto; max-width: none; object-fit: contain; margin: 0 -3.4vw; filter: drop-shadow(0 1.4vw 1.4vw rgba(60,10,20,.25)); animation: bfs-flutua 5s ease-in-out infinite; }
.hero-slide .bfs-garrafas img:nth-child(1), .hero-slide .bfs-garrafas img:nth-child(3) { height: 84%; }
.bfs-garrafas img:nth-child(2) { position: relative; z-index: 2; animation-delay: -1.6s; }
.bfs-garrafas img:nth-child(3) { animation-delay: -3.2s; }
@keyframes bfs-flutua { 50% { transform: translateY(-.8vw); } }
.bfs-selo { position: absolute; z-index: 3; top: 6%; right: 3%; width: 8.6vw; height: 8.6vw; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #7B1E34; color: #fff; box-shadow: 0 1vw 2vw -1vw rgba(123,30,52,.8); animation: bfs-carimbo .9s .3s cubic-bezier(.34,1.56,.64,1) both, bfs-balanca 4s 1.2s ease-in-out infinite; }
.bfs-selo::before { content: ''; position: absolute; inset: .4vw; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.55); animation: bfs-gira 14s linear infinite; }
.bfs-selo small { font-size: max(.5rem, .62vw); font-weight: 800; letter-spacing: .16em; }
.bfs-selo strong { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.2vw; line-height: 1; }
[data-theme="dark"] .bfs-selo { background: #E9C98C; color: #1A0E10; }
[data-theme="dark"] .bfs-selo::before { border-color: rgba(26,14,16,.4); }
@keyframes bfs-carimbo { 0% { opacity: 0; transform: scale(2) rotate(-20deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes bfs-balanca { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(4deg) scale(1.04); } }
.bfs-tag { position: absolute; z-index: 3; padding: .4em .8em; border-radius: .5em; font-weight: 800; font-size: max(.62rem, .82vw); background: #fff; color: #7B1E34; border: 1.5px solid rgba(123,30,52,.25); box-shadow: 0 .6vw 1.4vw -.6vw rgba(0,0,0,.3); animation: bfs-flutua 4s ease-in-out infinite; }
[data-theme="dark"] .bfs-tag { background: #1F1215; color: #E9C98C; border-color: rgba(233,201,140,.35); }
.bfs-tag-1 { left: 3%; top: 16%; animation-delay: -1s; }
.bfs-tag-2 { left: 0; top: 58%; animation-delay: -2.2s; }
.bfs-tag-3 { right: 0; bottom: 20%; animation-delay: -.4s; }
.hero-slide-bf .bfs-texto > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.hero-slide-bf.ativo .bfs-texto > * { opacity: 1; transform: none; }
.hero-slide-bf.ativo .bfs-texto > *:nth-child(2) { transition-delay: .08s; }
.hero-slide-bf.ativo .bfs-texto > *:nth-child(3) { transition-delay: .16s; }
.hero-slide-bf.ativo .bfs-texto > *:nth-child(4) { transition-delay: .24s; }
.hero-slide-bf.ativo .bfs-texto > *:nth-child(5) { transition-delay: .32s; }
@media (max-width: 1100px) { .bfs-desc { display: none; } }
@media (max-width: 760px) {
  .bfs-conteudo { grid-template-columns: 1fr; grid-template-rows: 47% 53%; padding: 0 5vw 9vw; gap: 0; align-items: stretch; }
  .bfs-visual { order: -1; height: 100%; }
  .bfs-texto { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
  .bfs-eyebrow { font-size: 2.6vw; margin-bottom: 2.6vw; }
  .bfs-titulo { font-size: 11.4vw; margin-bottom: 3vw; }
  .bfs-pill { font-size: 3.4vw; margin-bottom: 4vw; }
  .bfs-acoes { flex-wrap: nowrap; gap: 2.6vw; justify-content: center; }
  .bfs-btn { font-size: 3.6vw; padding: .95em 1.4em; white-space: nowrap; }
  .bfs-contador { gap: 1.6vw; }
  .bfs-contador span { min-width: 10.6vw; padding: 1.4vw .8vw; border-radius: 2vw; }
  .bfs-contador b { font-size: 4.2vw; }
  .bfs-contador small { font-size: 2.2vw; }
  .bfs-anel { width: 60vw; height: 60vw; }
  .bfs-garrafas { height: 86%; margin-top: 4vw; }
  .hero-slide .bfs-garrafas img { margin: 0 -8vw; }
  .bfs-selo { width: 21vw; height: 21vw; top: 10%; right: 6%; }
  .bfs-selo strong { font-size: 5.6vw; } .bfs-selo small { font-size: 2vw; }
  .bfs-tag { font-size: 2.8vw; }
  .bfs-tag-1 { left: 5%; top: 16%; } .bfs-tag-2 { left: 4%; bottom: 8%; } .bfs-tag-3 { display: none; }
  .bfs-fundo i:nth-child(1) { width: 90vw; height: 90vw; right: 5vw; top: 2vw; margin-top: 0; }
  .bfs-fundo i:nth-child(2) { width: 66vw; height: 66vw; right: 17vw; top: 14vw; margin-top: 0; }
  .hero-dots { bottom: 2.4vw; }
}
@media (prefers-reduced-motion: reduce) { .bfs-fundo i, .bfs-anel, .bfs-garrafas img, .bfs-selo, .bfs-selo::before, .bfs-tag, .bfs-titulo-cor { animation: none !important; } }

/* ---------- Banners duplos (espumantes / tintos) ---------- */
.banners-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .banners-duplos { grid-template-columns: 1fr; } }
.banner-duplo { position: relative; display: block; min-height: 270px; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--border); background: #1A0E11; }
.banner-duplo-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-garrafas { position: absolute; right: 4%; bottom: 0; top: 10%; width: 50%; display: flex; align-items: flex-end; justify-content: center; z-index: 1; pointer-events: none; }
.banner-garrafas img { height: 112%; width: auto; max-width: none; object-fit: contain; object-position: center bottom; margin: 0 -9% -4%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.45)); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.banner-garrafas img:nth-child(1), .banner-garrafas img:nth-child(3) { height: 96%; }
.banner-garrafas img:nth-child(2) { position: relative; z-index: 2; }
.banner-duplo:hover .banner-garrafas img { transform: translateY(-6px); }
.banner-duplo-texto { position: absolute; z-index: 2; left: 26px; bottom: 24px; max-width: 46%; color: #fff; }
.banner-duplo-texto strong { display: block; font-family: 'Archivo', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: #fff; }
.banner-duplo-texto span { display: block; color: rgba(255,255,255,.86); font-size: .92rem; margin: 6px 0 12px; }
.banner-duplo-texto em { font-style: normal; display: inline-block; background: #fff; color: #111; font-weight: 800; font-size: .84rem; padding: 8px 14px; border-radius: 999px; }

/* ---------- Categorias: garrafa inteira, centralizada, sem fundo ---------- */
.category-card { aspect-ratio: 3 / 4; background: var(--bg); border: 1.5px solid var(--border); padding: 12px 10px 14px; }
[data-theme="dark"] .category-card { background: #FFFFFF; }
[data-theme="dark"] .category-card span { color: #111010; }
.category-card img { inset: 12px 12px 46px; width: calc(100% - 24px); height: calc(100% - 58px); mix-blend-mode: normal; }
.category-card span { font-size: .95rem; }
.product-card-media img { padding: 0; mix-blend-mode: normal; }
.gallery-slide img { padding: 0; mix-blend-mode: normal; }

/* ==========================================================================
   Checkout — campos com borda, passos claros, cupom no topo, Pix profissional
   ========================================================================== */
.checkout-page h1 { margin-bottom: 14px; }
.cupom-topo { border: 1.5px dashed var(--border-forte); border-radius: 12px; padding: 10px 14px; background: var(--bg); margin-bottom: 16px; }
.cupom-topo .cupom-boasvindas { margin: 2px 0 8px; font-size: .86rem; color: var(--success); font-weight: 700; }
.cupom-abrir { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink-soft); font-size: .92rem; text-align: left; }
.cupom-abrir svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.cupom-abrir u { color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
.cupom-abrir small { color: var(--ink-faint); }
.cupom-topo .cupom-input-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.cupom-topo .cupom-input-row input { flex: 1; min-width: 0; padding: 11px 12px; border: 1.5px solid var(--border-forte); border-radius: 8px; background: var(--bg); color: var(--ink); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.cupom-topo .cupom-input-row input:focus { outline: none; border-color: var(--primary); }
.cupom-topo .cupom-aplicado-atual { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .9rem; color: var(--success); font-weight: 600; }
.cupom-topo #cupom-mensagem .form-note { text-align: left; margin: 6px 0 0; }

button.checkout-step { border: 1.5px solid var(--border-forte); color: var(--ink-soft); font-size: .9rem; min-height: 46px; }
button.checkout-step .num { background: var(--surface-2); color: var(--ink); font-weight: 800; }
button.checkout-step.active { color: var(--ink); border-color: var(--primary); border-width: 2px; background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }
button.checkout-step.feito { color: var(--ink); border-color: var(--success); }
button.checkout-step.feito .num { background: var(--success); color: #fff; }
.etapa.form-card { border: 1.5px solid var(--border); }
.etapa.aberta.form-card { border: 2px solid var(--primary); box-shadow: 0 14px 30px -24px rgba(60,10,20,.5); }
.etapa-topo h3 { font-size: 1.15rem; }
.etapa-num { background: var(--surface-2); color: var(--ink); font-weight: 800; }
.etapa.bloqueada { opacity: .7; }
.etapa.bloqueada .etapa-topo h3 { color: var(--ink-soft); }
.etapa-continuar { min-height: 52px; font-size: 1rem; }
.etapa-resumo { color: var(--ink); }
.checkout-subtitulo { font-weight: 800; color: var(--ink); }

.forma-pagamento { border: 2px solid var(--border-forte); background: var(--bg); padding: 18px; min-height: 76px; }
.forma-pagamento:hover { border-color: var(--primary); }
.forma-pagamento strong { font-size: 1.05rem; color: var(--ink); }
.forma-texto small { color: var(--ink-soft); font-size: .84rem; }
.forma-check { width: 24px; height: 24px; border: 2px solid var(--border-forte); }
.forma-pagamento.ativa { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.forma-icone { background: #E3F6F3; color: #1F9C8E; }
.forma-pagamento::after { content: 'Toque para escolher'; font-size: .72rem; font-weight: 700; color: var(--primary); position: absolute; right: 54px; display: none; }
.forma-pagamento { position: relative; }
.formas-pagamento:not(:has(.ativa)) .forma-pagamento { animation: pix-chama 2.2s ease-in-out infinite; }
@keyframes pix-chama { 0%, 100% { box-shadow: 0 0 0 0 rgba(123,30,52,0); } 50% { box-shadow: 0 0 0 5px rgba(123,30,52,.12); } }

.pix-pre { margin-top: 16px; border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface); }
.pix-pre-linha { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.pix-pre-linha span { font-weight: 700; color: var(--ink-soft); }
.pix-pre-linha strong { font-family: 'Archivo', sans-serif; font-size: 1.6rem; color: var(--ink); }
.pix-vantagens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pix-vantagens li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--ink-soft); }
.pix-vantagens li::before { content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat; }
.btn-gerar-pix { min-height: 56px; font-size: 1.08rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-gerar-pix svg { width: 22px; height: 22px; }
.btn-gerar-pix.carregando { opacity: .85; cursor: wait; }
.btn-gerar-pix.carregando svg { animation: bfs-gira 1s linear infinite; }

.pix-tela { margin-top: 6px; border: 2px solid var(--border); border-radius: 18px; padding: 22px; background: var(--bg); text-align: left; animation: pix-entra .5s cubic-bezier(.16,1,.3,1); }
@keyframes pix-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pix-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #FFF6E5; border: 1px solid #F0D49A; }
[data-theme="dark"] .pix-status { background: #2A2010; border-color: #6B5320; }
.pix-status strong { display: block; color: #8A5A00; font-size: .98rem; }
[data-theme="dark"] .pix-status strong { color: #F0C060; }
.pix-status small { color: var(--ink-soft); font-size: .8rem; }
.pix-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #F0D49A; border-top-color: #C77C00; animation: bfs-gira .9s linear infinite; flex-shrink: 0; }
.pix-tempo { margin: 12px 0 0; font-size: .86rem; color: var(--ink-soft); text-align: center; }
.pix-tempo b { font-variant-numeric: tabular-nums; color: var(--danger); font-size: 1rem; }
.pix-valor-grande { text-align: center; margin: 14px 0 18px; }
.pix-valor-grande small { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.pix-valor-grande strong { font-family: 'Archivo', sans-serif; font-size: 2.2rem; color: var(--ink); line-height: 1.1; }
.pix-grid { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
@media (max-width: 640px) { .pix-grid { grid-template-columns: 1fr; } }
.pix-qr-box { border: 1.5px solid var(--border); border-radius: 14px; padding: 12px; text-align: center; background: #fff; }
.pix-qr-box .pix-qr { margin: 0 auto 6px; }
.pix-qr-box .pix-qr svg { width: 220px; height: 220px; padding: 0; }
.pix-qr-box img { width: 220px; margin: 0 auto 6px; }
.pix-qr-box span { font-size: .78rem; color: #3A3435; font-weight: 600; }
.pix-copia label { display: block; font-weight: 800; font-size: .88rem; margin-bottom: 6px; color: var(--ink); }
.pix-codigo-campo input { width: 100%; padding: 13px 12px; border: 1.5px solid var(--border-forte); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: .8rem; text-overflow: ellipsis; }
.btn-copiar-pix { margin-top: 10px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; }
.btn-copiar-pix svg { width: 20px; height: 20px; }
.btn-copiar-pix.copiado { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.pix-passos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.pix-passos li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.pix-passos b { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.pix-passos strong { color: var(--ink); }
#btn-ja-paguei { margin-top: 18px; min-height: 48px; }
.pix-seguro { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .8rem; color: var(--ink-faint); }
.pix-seguro svg { width: 16px; height: 16px; color: var(--success); }

/* ==========================================================================
   Painel ADM sempre escuro
   ========================================================================== */
.admin-body { background: #0D0809; }
.admin-nav a.active { color: #1A0E10; }
.admin-sidebar { border-right: 1px solid rgba(255,255,255,.08); }
.adq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .adq-grid { grid-template-columns: 1fr; } }
.adq-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.adq-topo h3 { margin: 0; }
.adq-sep { border: 0; border-top: 1px solid var(--border); margin: 20px 0 16px; }
.adq-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.adq-form .field { margin-bottom: 10px; }
.adq-log { background: #070405; color: #D8CFC9; border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: .74rem; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-all; }

@media (max-width: 520px) {
  .bf-selo { font-size: .56rem; padding: 4px 6px; gap: 4px; white-space: nowrap; letter-spacing: .03em; top: 8px; left: 8px; }
  .bf-selo b { font-size: .62rem; padding: 1px 4px; }
}

/* pontinhos do slide ficam numa faixa embaixo da imagem (nunca por cima da arte) */
.hero-slider { aspect-ratio: auto; height: calc(100vw * 560 / 1920 + 30px); background: var(--bg); border-bottom: 1px solid var(--border); }
.hero-slider-track { bottom: 30px; }
.hero-dots { bottom: 9px; }
.hero-dots button span { background: var(--border-forte, #B9B2B4); box-shadow: none; }
.hero-dots button span::after { background: var(--primary); }
.hero-seta { margin-top: -38px; }
@media (max-width: 760px) {
  .hero-slider { height: calc(100vw * 994 / 828 + 28px); }
  .hero-slider-track { bottom: 28px; }
  .hero-dots { bottom: 8px; }
}
#pix-resultado, #etapa-1, #etapa-2, #etapa-3 { scroll-margin-top: 110px; }

/* passos do checkout: sempre em 1 linha no celular */
button.checkout-step { white-space: nowrap; border-width: 1.5px; }
@media (max-width: 420px) {
  .checkout-steps { gap: 6px; }
  button.checkout-step { font-size: .74rem; padding: 9px 4px; gap: 4px; letter-spacing: -.01em; }
  button.checkout-step .num { width: 18px; height: 18px; font-size: .68rem; }
}