:root {
  --bg:        #080C18;
  --bg2:       #0F1629;
  --bg3:       #162040;
  --card:      #1A2540;
  --card2:     #1E2D50;
  --border:    #243058;
  --gold:      #F0A500;
  --gold-d:    #C68A00;
  --gold-l:    #FFD166;
  --blue:      #4F80FF;
  --text:      #EEF2FF;
  --text2:     #A8B4CF;
  --text3:     #6B7A99;
  --green:     #22C55E;
  --red:       #EF4444;
  --orange:    #F97316;
  --purple:    #A855F7;
  --radius:    12px;
  --shadow:    0 4px 24px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* "clip" corta o que vaza para os lados sem virar contêiner de rolagem.
   Com "hidden" no html E no body, o body virava um contêiner que nunca rola
   e todo position:sticky (cabeçalho, abas de marca) parava de grudar. */
html { overflow-x: hidden; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,12,24,.99);
  transform: translateZ(0);
  padding: 0 16px;
  border-bottom: 1px solid transparent;
  box-shadow:
    0 1px 0 0 rgba(240,165,0,.25),
    0 4px 24px rgba(0,0,0,.4);
  overflow: hidden;
}

.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 16px;
}

/* BRAND */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
/* Selo do logo: galo recortado sobre fundo azul-noite, borda dourada fina e
   sombra contida (sem brilho exagerado). O tamanho muda por tela mais abaixo. */
.brand-logo-wrap {
  --logo: 52px;
  width: var(--logo); height: var(--logo); flex-shrink: 0;
  border-radius: calc(var(--logo) * .3);
  overflow: hidden; position: relative; z-index: 1;
  background: radial-gradient(circle at 50% 28%, #26355f 0%, #141e38 52%, #0a1020 100%);
  border: 1px solid rgba(240,165,0,.6);
  box-shadow:
    0 0 0 3px rgba(240,165,0,.08),
    0 6px 16px rgba(0,0,0,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* reflexo sutil de vidro no alto do selo */
.brand-logo-wrap::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 42%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.brand-link:hover .brand-logo-wrap {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(240,165,0,.16),
    0 8px 20px rgba(0,0,0,.55);
}
.brand-logo-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block;
}
.brand-logo-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-size: 18px; font-weight: 900;
  background: linear-gradient(90deg, #FFD166 0%, #F0A500 55%, #e08800 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15; letter-spacing: -.4px;
}
.brand-sub { font-size: 11px; color: var(--text3); line-height: 1.2; }
/* cidade da adega, ao lado do logo (embaixo do nome no computador) */
.brand-place {
  font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: .3px;
  color: #8E9AB8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ENTREGAR EM — seletor de endereço dentro do cabeçalho (abre o assets/js/address.js) */
.hdr-addr {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 280px; min-width: 0; height: 48px; padding: 0 14px 0 7px;
  border-radius: 14px; text-align: left; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .15s, background .15s;
}
.hdr-addr:hover, .hdr-addr:focus-visible {
  border-color: rgba(240,165,0,.5); background: rgba(240,165,0,.06); outline: none;
}
.ha-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(240,165,0,.12); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(240,165,0,.22);
}
.ha-ico svg { width: 18px; height: 18px; }
.ha-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ha-lbl {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .7px; text-transform: uppercase;
  color: #8E9AB8; white-space: nowrap;
}
.ha-pin { display: none; width: 11px; height: 11px; flex-shrink: 0; color: var(--gold); }
.ha-chev { width: 13px; height: 13px; flex-shrink: 0; color: var(--gold); transition: transform .2s; }
.hdr-addr:hover .ha-chev { transform: translateY(1px); }
.ha-val {
  font-size: 14px; font-weight: 700; line-height: 1.25; color: #F4F6FB;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-addr.empty .ha-val { color: var(--gold-l); }
/* ACTIONS */
.header-actions { display: flex; align-items: center; gap: 10px; }

/* MEU PERFIL — ícone redondo; com o nome salvo mostra as iniciais (assets/js/profile.js) */
.btn-profile {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #E8ECF6;
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(255,255,255,.14);
  transition: border-color .15s, background .15s, transform .15s;
}
.btn-profile svg { width: 22px; height: 22px; }
.btn-profile:hover, .btn-profile:focus-visible { border-color: rgba(240,165,0,.6); background: rgba(240,165,0,.08); outline: none; }
.btn-profile:active { transform: scale(.95); }
.btn-profile.has-name {
  color: #1a1100; border-color: rgba(255,209,102,.7);
  background: linear-gradient(135deg, #FFD166, #F0A500);
}
.btn-profile .pb-ini { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
/* perfil incompleto: pontinho dourado que pulsa 3 vezes e fica parado */
.btn-profile.incomplete::after {
  content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: #FFC233; box-shadow: 0 0 0 2.5px #0d1528;
}
.btn-profile.incomplete::before {
  content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,194,51,.55); animation: pbPing 1.6s cubic-bezier(0,0,.2,1) 1.2s 3 both;
}
@keyframes pbPing { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn-profile.incomplete::before { animation: none; opacity: 0; } }

/* Balão "Deixe seu perfil pronto" apontando para o ícone */
.pf-coach {
  position: fixed; z-index: 140; width: min(330px, calc(100vw - 24px));
  padding: 16px 16px 14px; border-radius: 16px;
  background: #142039; border: 1px solid rgba(240,165,0,.4);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 4px rgba(240,165,0,.06);
  color: var(--text); opacity: 0; transform: translateY(-6px);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1);
}
.pf-coach.show { opacity: 1; transform: none; }
.pf-coach::before {
  content: ''; position: absolute; top: -7px; right: var(--arrow-right, 18px); width: 13px; height: 13px;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg);
}
.pf-coach-x {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text3);
}
.pf-coach-x svg { width: 17px; height: 17px; }
.pf-coach-x:hover, .pf-coach-x:focus-visible { background: rgba(255,255,255,.07); color: var(--text); outline: none; }
.pf-coach-head { display: flex; gap: 12px; padding-right: 22px; }
.pf-coach-ico {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #FFD166, #F0A500); color: #1a1100;
}
.pf-coach-ico svg { width: 21px; height: 21px; }
.pf-coach-head b { display: block; font-size: 15.5px; font-weight: 800; }
.pf-coach-head div > span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--text2); }
.pf-coach-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 14px; }
.pf-coach-step {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--text2);
  background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.18);
}
.pf-coach-step i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.pf-coach-step svg { width: 14px; height: 14px; }
.pf-coach-step.done { color: #4ade80; border: 1px solid rgba(74,222,128,.3); background: rgba(74,222,128,.08); }
.pf-coach-actions { display: flex; gap: 8px; }
.pf-coach-actions button { height: 42px; border-radius: 11px; font-size: 14px; font-weight: 800; }
.pf-coach-later { flex: 0 0 auto; padding: 0 14px; color: var(--text3); }
.pf-coach-later:hover { color: var(--text2); }
.pf-coach-go { flex: 1; background: linear-gradient(135deg, #FFD166, #F0A500); color: #1a1100; }

/* CART BUTTON */
.btn-cart {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 100%);
  color: #000; font-weight: 800; font-size: 14px;
  padding: 10px 20px; border-radius: 50px;
  box-shadow: 0 2px 12px rgba(240,165,0,.35);
  transition: opacity .18s, transform .15s;
}
.btn-cart:hover {
  opacity: .9;
  transform: translateY(-1px);
}
.btn-cart:active { transform: translateY(0) scale(.97); }
.btn-cart .cart-count {
  position: absolute; top: -7px; right: -7px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; min-width: 20px; height: 20px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid var(--bg);
  transition: transform .2s;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
}
.btn-cart .cart-count.bump { transform: scale(1.45); }

/* ── HERO BANNER ── */
.hero {
  background: linear-gradient(160deg, #0a0f20 0%, #0d1f44 55%, #080c18 100%);
  padding: 40px 24px 44px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(240,165,0,.09) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(79,128,255,.05) 0%, transparent 50%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(240,165,0,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* sempre centralizado — mobile e desktop */
.hero-inner {
  max-width: 860px; margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-content { width: 100%; }

@media (min-width: 768px) {
  .hero { padding: 22px 24px 26px; }
  .hero-logo-frame { width: 110px; height: 110px; border-radius: 20px; }
  .hero-logo-glow  { width: 182px; height: 182px; }
  .hero-logo-wrap  { margin-bottom: 14px; }
  .hero h1         { font-size: 36px; }
  .hero-sub        { font-size: 13px; margin-top: 6px; }
  .hero-meta       { margin-top: 14px; gap: 6px; }
  .hero-badge      { padding: 8px 12px; }
  .hb-icon         { font-size: 18px; }
  .hb-val          { font-size: 12px; }
  .hb-label        { font-size: 10px; }
}

/* HERO LOGO */
.hero-logo-wrap {
  display: flex; justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
/* O FRAME é quem controla o tamanho — overflow:hidden impede qualquer vazamento */
.hero-logo-frame {
  width: 170px;
  height: 170px;
  border-radius: 26px;
  overflow: hidden;
  border: 2px solid rgba(240,165,0,.4);
  box-shadow:
    0 0 0 1px rgba(240,165,0,.1),
    0 10px 44px rgba(240,165,0,.35);
  position: relative; z-index: 1;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.hero-logo-frame:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow:
    0 0 0 2px rgba(240,165,0,.5),
    0 16px 56px rgba(240,165,0,.5);
}
.hero-logo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-logo-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240,165,0,.3) 0%, rgba(240,165,0,.06) 55%, transparent 75%);
  z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 6px; opacity: .85;
}
.hero h1 {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(36px, 7vw, 64px); font-weight: 700; line-height: 1.15;
  background: linear-gradient(135deg, #fff 25%, #FFD166 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 span { color: var(--gold); }
.hero-sub {
  color: var(--text3); margin-top: 10px; font-size: 15px; line-height: 1.55;
}

/* BADGES GRID */
.hero-meta {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
}
.hero-badge { flex: 0 1 auto; }

.hero-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 10px 14px;
  transition: background .2s, border-color .2s;
}
.hero-badge:hover {
  background: rgba(240,165,0,.07);
  border-color: rgba(240,165,0,.2);
}
.hb-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.hb-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hb-val  { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.hb-label{ font-size: 11px; color: var(--text3); white-space: nowrap; }

/* ── SEARCH ── */
/* a busca acompanha a rolagem logo abaixo do cabeçalho (abas de marca grudam embaixo dela) */
.search-bar {
  max-width: 1200px; margin: 0 auto; padding: 8px 16px;
  position: sticky; top: var(--hdr-h, 0px); z-index: 40;
  background: var(--bg);
  transition: box-shadow .2s ease;
}
.search-bar.is-stuck { box-shadow: 0 10px 16px -12px rgba(0,0,0,.85); }
.search-sentinel { height: 1px; margin-bottom: -1px; }
.search-bar::before {
  content: '';
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236B7A99' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.search-bar:focus-within::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23F0A500' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}
.search-input {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 13px 20px 13px 46px;
  color: var(--text); font-size: 14px; font-weight: 500;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}
.search-input::placeholder { color: var(--text3); font-weight: 400; }
.search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,165,0,.12);
  background: rgba(255,255,255,.03);
}

/* ── CATEGORIES ── */
.categories-wrap {
  max-width: 1200px; margin: 20px auto 0;
  position: relative;
}

/* fade edges */
.categories-wrap::before,
.categories-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 14px;
  width: 52px; pointer-events: none; z-index: 2;
  transition: opacity .3s;
}
.categories-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 20%, transparent 100%);
}
.categories-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 20%, transparent 100%);
}
.categories-wrap.at-start::before { opacity: 0; }
.categories-wrap.at-end::after    { opacity: 0; }

.categories-scroll {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 6px 16px 14px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-x: contain;
}
.categories-scroll::-webkit-scrollbar { display: none; }
.categories-scroll.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* ── cor única por posição ── */
.categories-scroll > :nth-child(1)  { --cat-clr: #F0A500; }
.categories-scroll > :nth-child(2)  { --cat-clr: #f59e0b; }
.categories-scroll > :nth-child(3)  { --cat-clr: #fb923c; }
.categories-scroll > :nth-child(4)  { --cat-clr: #a855f7; }
.categories-scroll > :nth-child(5)  { --cat-clr: #14b8a6; }
.categories-scroll > :nth-child(6)  { --cat-clr: #ef4444; }
.categories-scroll > :nth-child(7)  { --cat-clr: #3b82f6; }
.categories-scroll > :nth-child(8)  { --cat-clr: #22c55e; }
.categories-scroll > :nth-child(9)  { --cat-clr: #ec4899; }
.categories-scroll > :nth-child(10) { --cat-clr: #f97316; }
.categories-scroll > :nth-child(n+11) { --cat-clr: #F0A500; }

.cat-btn {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  width: 80px; min-height: 80px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-top: 3px solid var(--cat-clr, var(--gold));
  border-radius: 14px;
  color: var(--text2); font-size: 10.5px; font-weight: 700;
  padding: 10px 6px;
  transition: border-color .22s, background .22s, color .18s, transform .22s cubic-bezier(.34,1.4,.64,1);
  cursor: pointer;
  letter-spacing: .2px;
  position: relative;
}
.cat-btn:hover {
  border-color: var(--cat-clr, var(--gold));
  border-top-color: var(--cat-clr, var(--gold));
  color: #fff;
  background: rgba(255,255,255,.05);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 1px var(--cat-clr, var(--gold)) inset;
}
.cat-btn.active {
  border-color: var(--cat-clr, var(--gold));
  border-top-color: var(--cat-clr, var(--gold));
  background: color-mix(in srgb, var(--cat-clr, var(--gold)) 14%, var(--card));
  color: #fff; font-weight: 800;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px var(--cat-clr, var(--gold)) inset,
              0 0 18px color-mix(in srgb, var(--cat-clr, var(--gold)) 30%, transparent);
}
.cat-icon {
  width: 32px; height: 32px; display: block; flex-shrink: 0;
  transition: transform .22s;
}
.cat-icon path,
.cat-icon rect,
.cat-icon line,
.cat-icon circle,
.cat-icon ellipse {
  fill: none;
  stroke: var(--cat-clr, #F0A500);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-btn:hover .cat-icon,
.cat-btn.active .cat-icon {
  transform: scale(1.08);
}
.cat-btn .cat-name { text-align: center; line-height: 1.25; white-space: normal; }

.cat-btn .cat-img-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── BARRA COMPACTA DE CATEGORIAS ──
   Fica escondida atrás do cabeçalho e desliza para baixo dele quando os ícones
   grandes saem da tela (controle em index.php → "FILTROS QUE ACOMPANHAM A ROLAGEM"). */
.cat-sticky {
  position: fixed; left: 0; right: 0; top: calc(var(--hdr-h, 0px) + var(--search-h, 0px)); z-index: 35; /* desliza por trás da busca */
  background: rgba(8,12,24,.97);
  border-bottom: 1px solid rgba(240,165,0,.18);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.85);
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.cat-sticky.show { transform: none; opacity: 1; pointer-events: auto; }
.cs-scroll {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 9px 16px;
  overscroll-behavior-x: contain;
}
.cs-scroll::-webkit-scrollbar { display: none; }
.cs-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--border);
  color: var(--text2); font-size: 12px; font-weight: 700; white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s;
}
.cs-chip .cat-icon { width: 16px; height: 16px; }
.cs-chip:hover { border-color: rgba(240,165,0,.4); color: var(--text); }
.cs-chip.active { border-color: var(--gold); background: rgba(240,165,0,.12); color: var(--gold); }

/* ── BUSCA SEM RESULTADO ── */
.search-empty { text-align: center; padding: 44px 16px 28px; color: var(--text2); }
.search-empty[hidden] { display: none; }
.search-empty p { font-size: 14px; margin-bottom: 14px; }
.search-empty strong { color: var(--text); }
.search-empty-btn {
  padding: 9px 20px; border-radius: 999px;
  border: 1.5px solid rgba(240,165,0,.45); background: rgba(240,165,0,.08);
  color: var(--gold); font-size: 13px; font-weight: 700;
}

/* ── PRODUCTS ── */
.products-section { max-width: 1200px; margin: 16px auto; padding: 0 16px 100px; }

/* ── CATEGORY SECTION ── */
.cat-section {
  margin-bottom: 48px;
}

.cat-section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(240,165,0,.1) 0%, rgba(240,165,0,.03) 100%);
  border: 1px solid rgba(240,165,0,.25);
  border-left: 4px solid var(--gold);
  border-radius: 0 12px 12px 0;
}
.csh-icon { font-size: 22px; line-height: 1; }
.csh-name {
  font-size: 13px; font-weight: 900;
  letter-spacing: 3px; color: var(--gold);
  text-transform: uppercase;
}
.csh-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(240,165,0,.35), transparent);
}

/* Título da vitrine, logo abaixo do banner — busca e filtros vêm embaixo dele */
.page-title-wrap { max-width: 1200px; margin: 22px auto 0; padding: 0 16px; }
.page-title-wrap .cat-section-header { margin-bottom: 0; }
/* com uma seção só na tela, o título da vitrine já diz qual é a categoria */
.products-section.solo .cat-section-header { display: none; }
.products-section.solo .bt-sentinel { margin-top: 0; }
@media (max-width: 767px) {
  .page-title-wrap { margin-top: 16px; }
}

/* ── BRAND GROUP ── */
.brand-group { margin-bottom: 32px; }

.brand-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.bh-line {
  flex: 1; height: 1px;
}
.bh-line-left  { background: linear-gradient(to right, transparent, rgba(255,255,255,.12)); }
.bh-line-right { background: linear-gradient(to left,  transparent, rgba(255,255,255,.12)); }
.bh-tag {
  flex-shrink: 0;
  font-size: 10px; font-weight: 900;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.55);
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  text-transform: uppercase;
}

/* ── BRAND TABS ── */
/* Abas grudam logo abaixo do cabeçalho (ou da barra de categorias) enquanto a
   seção rola, e rolam de lado numa linha só em vez de quebrar. */
.brand-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
  margin: 0 -16px 14px;
  padding: 8px 16px 10px;
  position: sticky; top: var(--sticky-top, 0px); z-index: 30;
  background: var(--bg);
  transition: box-shadow .2s ease, top .3s cubic-bezier(.2,.8,.2,1);
}
.brand-tabs::-webkit-scrollbar { display: none; }
.brand-tabs.is-stuck {
  box-shadow: 0 1px 0 rgba(240,165,0,.16), 0 10px 18px -10px rgba(0,0,0,.85);
}
/* puxa as abas para colar no título da categoria (que tem 22px de margem embaixo) */
.bt-sentinel { height: 1px; margin: -20px 0 -1px; }
body.searching .brand-tabs,
body.searching .bt-sentinel { display: none; }
.brand-tab {
  flex-shrink: 0; white-space: nowrap;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.brand-tab:hover {
  border-color: rgba(240,165,0,.4);
  color: var(--text);
}
.brand-tab.active {
  border-color: var(--gold);
  background: rgba(240,165,0,.1);
  color: var(--gold);
}
/* quando há abas, esconde o separador interno de cada brand-group */
.brand-tabs ~ .brand-group .brand-header { display: none; }

/* ── FLAVOR GROUP ── */
.flavor-group { margin-bottom: 32px; }

.flavor-header {
  display: flex; align-items: center; gap: 16px;
  margin: 20px 0 12px;
}
.flavor-header::before,
.flavor-header::after {
  content: ''; flex: 1; height: 1px;
}
.flavor-header::before {
  background: linear-gradient(to right, transparent, rgba(240,165,0,.3));
}
.flavor-header::after {
  background: linear-gradient(to left, transparent, rgba(240,165,0,.3));
}
.fh-pill {
  flex-shrink: 0;
  padding: 5px 20px;
  background: linear-gradient(135deg, rgba(240,165,0,.13) 0%, rgba(240,165,0,.04) 100%);
  border: 1px solid rgba(240,165,0,.35);
  border-radius: 20px;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: .5px;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(240,165,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── FLAVOR ROW: scroll horizontal estilo Netflix ── */
.flavor-row-wrap {
  position: relative;
}
.flavor-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 0 16px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  overscroll-behavior-x: contain;
}
.flavor-row::-webkit-scrollbar { display: none; }
.flavor-row.dragging { cursor: grabbing; scroll-behavior: auto; }
/* Espaço fantasma no final: garante que o último card passe pela área do fade */
.flavor-row::after {
  content: '';
  min-width: 64px;
  flex-shrink: 0;
}

/* fade right indicando mais conteúdo */
.flavor-row-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 16px;
  width: 60px; pointer-events: none;
  background: linear-gradient(to left, var(--bg) 10%, transparent 100%);
  border-radius: 0 18px 18px 0;
}

/* cards dentro do row: largura fixa e altura mínima para padronizar entre marcas */
.flavor-row .product-card {
  flex-shrink: 0;
  width: 200px;
  min-height: 400px;
}

/* ── setas de navegação ── */
.fr-arrow {
  display: none;
  position: absolute; top: 50%;
  z-index: 4;
  cursor: pointer;
}
.fr-arrow.hidden { opacity: 0 !important; pointer-events: none !important; }

/* Desktop: botão circular sempre visível */
@media (min-width: 768px) {
  .fr-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(8,12,24,.80);
    border: 1.5px solid rgba(240,165,0,.45);
    color: var(--gold);
    font-size: 22px;
    transform: translateY(-50%);
    opacity: 0.7;
    transition: opacity .18s ease, background .18s ease, color .15s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 18px rgba(0,0,0,.55);
  }
  .fr-arrow:not(.hidden):hover {
    opacity: 1;
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
  }
  .fr-arrow.hidden { display: none !important; }
  .fr-arrow-left  { left: 8px; }
  .fr-arrow-right { right: 8px; }
}

/* Mobile: setas simples sempre visíveis */
@media (max-width: 767px) {
  .flavor-row .product-card { width: 158px; min-height: 360px; }
  .flavor-row { gap: 10px; }
  .fr-arrow {
    display: block;
    background: none; border: none;
    color: var(--gold);
    font-size: 20px; line-height: 1;
  }
  .fr-arrow-left  { left: 2px; opacity: .75; }
  .fr-arrow-right { right: 2px; opacity: .75; }
}

/* Toque: o dedo arrasta e o card encaixa no começo ao parar; setas não fazem falta */
@media (hover: none) {
  .flavor-row { scroll-snap-type: x proximity; }
  .flavor-row .product-card { scroll-snap-align: start; }
  .fr-arrow { display: none !important; }
}

/* Cards entram suavemente quando a fileira aparece (controle em index.php) */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
}
.flavor-row.pre .product-card { opacity: 0; }
.flavor-row.reveal .product-card {
  animation: cardIn .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@media (prefers-reduced-motion: reduce) {
  .flavor-row.pre .product-card { opacity: 1; }
  .flavor-row.reveal .product-card { animation: none; }
}

.section-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0 24px; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}

.product-card {
  background: linear-gradient(170deg, #1c2845 0%, #0f1628 100%);
  border: 1px solid rgba(240,165,0,.22);
  border-top: 2px solid rgba(240,165,0,.55);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  position: relative;
  contain: layout style;
}
@media (hover: hover) {
  .product-card {
    transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .3s ease;
  }
  .product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(240,165,0,.65);
    border-top-color: rgba(240,165,0,.9);
    z-index: 2;
    box-shadow:
      0 0 0 1px rgba(240,165,0,.3),
      0 20px 52px rgba(0,0,0,.55),
      0 6px 24px rgba(240,165,0,.22),
      inset 0 1px 0 rgba(255,255,255,.07);
  }
}

.product-img {
  position: relative; width: 100%; aspect-ratio: 4/3;
  background: radial-gradient(ellipse at 50% 80%, rgba(240,165,0,.07) 0%, #0f1629 65%);
}
/* só uma faixa fina de transição para o corpo do card — antes escurecia metade da foto */
.product-img::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 18%;
  background: linear-gradient(to bottom, transparent 0%, rgba(15,22,40,.9) 100%);
  z-index: 2; pointer-events: none;
}
.product-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
}
@media (hover: hover) {
  .product-img img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .product-card:hover .product-img img { transform: scale(1.06); }
}

.product-img .no-img {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  font-size: 46px; position: relative; z-index: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(240,165,0,.07) 0%, transparent 70%);
}

.featured-badge {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  font-size: 18px; line-height: 1;
  animation: featuredGlow 2.5s ease-in-out infinite;
}
@keyframes featuredGlow {
  0%, 100% { opacity: .75; }
  50%       { opacity: 1; }
}

.badge-cold {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  font-size: 18px; line-height: 1;
}

.badge-hot {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  font-size: 18px; line-height: 1;
}

/* pill de categoria sobreposto na imagem */
.product-cat-tag {
  position: absolute; bottom: 8px; left: 8px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(240,165,0,.3);
  border-radius: 20px; padding: 3px 9px 3px 6px;
  font-size: 12px; line-height: 1;
}
.product-cat-tag span {
  font-size: 10px; font-weight: 700; color: #f5c842;
  letter-spacing: .3px; white-space: nowrap;
}

.product-body { padding: 12px 13px 7px; flex: 1; display: flex; flex-direction: column; }
.product-name {
  font-size: 14px; font-weight: 800; line-height: 1.3; color: #ffffff;
  min-height: calc(14px * 1.3 * 2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word; word-break: break-word;
}

/* separador abaixo do título */
.product-name-line {
  height: 1px; margin: 7px 0 8px; flex-shrink: 0;
  background: linear-gradient(90deg, rgba(240,165,0,.45) 0%, rgba(240,165,0,.06) 60%, transparent 100%);
}

.product-desc {
  font-size: 11.5px; color: #ffffff; line-height: 1.5;
  padding: 7px 10px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,.3);
  border-left: 2px solid rgba(240,165,0,.4);
  overflow-wrap: break-word; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.product-price-row {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(240,165,0,.14);
}
.product-price {
  font-size: 18px; font-weight: 900;
  letter-spacing: -.3px;
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.product-footer { padding: 0 10px 12px; }
.btn-add {
  width: 100%;
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 55%, #e07800 100%);
  color: #000; font-weight: 800; font-size: 13px;
  padding: 10px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .18s, transform .15s;
  box-shadow: 0 3px 14px rgba(240,165,0,.35);
}
.btn-add:hover {
  opacity: .88;
  transform: translateY(-2px);
}
.btn-add:active { transform: scale(.97); opacity: .75; }

@keyframes cardFlash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
.product-card.card-added::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 17px;
  border: 3px solid rgba(34,197,94,.85);
  pointer-events: none;
  z-index: 100;
  animation: cardFlash .75s ease-out forwards;
}

/* ── CARD EM PROMOÇÃO ── */
.product-card.promo {
  background: linear-gradient(170deg, #160f00 0%, #0d0800 100%);
  border-color: rgba(255,107,0,.65);
  border-top: 2.5px solid #FF6B00;
  box-shadow: 0 4px 28px rgba(0,0,0,.65);
}
.product-card.promo:hover {
  border-color: rgba(255,107,0,.9);
  box-shadow: 0 20px 52px rgba(0,0,0,.6), 0 6px 30px rgba(255,107,0,.22);
}
.product-card.promo .badge-cold { display: none; }
.product-card.promo .product-name-line {
  background: linear-gradient(90deg, rgba(255,107,0,.55) 0%, rgba(255,107,0,.06) 65%, transparent 100%);
}

/* banner no topo da imagem */
.promo-banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  height: 34px;
  display: flex; align-items: center; padding: 0 12px; gap: 7px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.72) 0%,
    rgba(30,12,0,.68) 55%,
    transparent 100%);
  border-bottom: 1px solid rgba(255,107,0,.35);
  pointer-events: none;
}
.promo-banner-icon {
  width: 9px; height: 13px; flex-shrink: 0;
}
.promo-banner-label {
  font-size: 9.5px; font-weight: 800; color: rgba(255,255,255,.92);
  letter-spacing: 2px; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255,107,0,.5);
}

/* círculo de desconto */
.promo-circle {
  position: absolute; top: 36px; right: 10px; z-index: 5;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ffaa44 0%, #e05c00 65%);
  border: 2px solid rgba(255,255,255,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 5px 20px rgba(224,92,0,.85);
}
.promo-circle::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid rgba(255,107,0,.35);
  animation: circleGlow 2.4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes circleGlow {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0; transform: scale(1.18); }
}
.promo-circle-pct { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.5px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.promo-circle-off { font-size: 8px;  font-weight: 800; color: rgba(255,255,255,.85); letter-spacing: 1px; }

/* seção de preços em promoção */
.product-price-row.is-promo {
  flex-direction: column; align-items: flex-start; gap: 3px;
  padding-top: 10px; border-top: 1px solid rgba(255,107,0,.22);
}
.price-was {
  font-size: 11px; color: rgba(255,255,255,.36);
  text-decoration: line-through;
  text-decoration-color: rgba(255,107,0,.6);
  text-decoration-thickness: 1.5px;
  letter-spacing: .2px;
}
.price-promo {
  font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -1px;
  color: #FF6B00;
  -webkit-text-fill-color: #FF6B00;
  text-shadow: 0 0 24px rgba(255,107,0,.55);
}
.price-saving {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: #4ade80;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.22);
  padding: 2px 9px; border-radius: 10px; margin-top: 2px;
}
.price-saving::before { content: '✓'; font-weight: 900; }

/* botão de promoção */
@keyframes btnJelly {
  0%   { transform: scaleX(1)    scaleY(1);    }
  12%  { transform: scaleX(.88)  scaleY(1.12); }
  24%  { transform: scaleX(1.12) scaleY(.90);  }
  36%  { transform: scaleX(.93)  scaleY(1.07); }
  48%  { transform: scaleX(1.07) scaleY(.95);  }
  60%  { transform: scaleX(.97)  scaleY(1.03); }
  75%  { transform: scaleX(1.03) scaleY(.98);  }
  100% { transform: scaleX(1)    scaleY(1);    }
}
.btn-add.btn-add-promo {
  font-weight: 900;
}
.product-card.promo .product-footer {
  position: relative;
  z-index: 99;
}

.product-qty-ctrl {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg3); border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border);
}
.qty-btn {
  width: 38px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold); font-weight: 700; transition: background .15s;
}
.qty-btn:hover { background: rgba(240,165,0,.15); }
.qty-val { font-weight: 700; font-size: 15px; }

/* ── CART SIDEBAR ──
   A ideia: a comanda que sai da térmica da adega vira o resumo do carrinho, um ticket picotado com o nome da casa,
   que sobe como se estivesse sendo impresso. O dourado fica só no nome da casa e o âmbar só no botão de finalizar,
   para ele ser a primeira coisa que o olho procura. As superfícies se separam por um degrau de tom, sem borda.
   Movimento (guia da taste-skill): sem quique, curvas de saída rápida, cada conteúdo entra do seu jeito, e todo
   estado escondido fica em prefers-reduced-motion: no-preference. Animação sem fim só com transform/opacity. */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(4,7,15,.7);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
/* o desfoque é caro: só a partir de 768px, quando a gaveta deixa a vitrine à vista (no celular ela cobre tudo) */
@media (min-width: 768px) { .cart-overlay { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } }

/* celular: tela inteira (como o "Meu perfil"); gaveta de 420px só a partir de 768px.
   Com min(420px, 100vw), celulares largos (Moto Edge 70 Pro ≈ 455px) ficavam com uma faixa da página à esquerda.
   Fechado sai de verdade da página (visibility): antes o Tab entrava nos botões escondidos. */
.cart-sidebar {
  --c-ground: #0E1528; --c-raised: #18223B; --c-ticket: #1F2B49; --c-ink: #F5F7FF; --c-muted: #B4BED6;
  --c-amber: #D97706; --c-amber-d: #C26A05; --c-amber-fill: #B45F06; --c-track: #2A3756;
  /* a bebida sob a luz fria da geladeira: é o que tira a lata preta do fundo escuro (âmbar sobre azul ficava marrom) */
  --c-spot: radial-gradient(78% 68% at 50% 46%, #4A5F96 0%, #2A3756 80%);
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-expo: cubic-bezier(.16,1,.3,1); --ease-travel: cubic-bezier(.76,0,.24,1);
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%;
  background: var(--c-ground); color: var(--c-ink);
  z-index: 201; display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform 240ms var(--ease-travel), visibility 0s linear 240ms;
  box-shadow: -10px 0 44px rgba(0,0,0,.55);
}
.cart-sidebar.open { transform: translateX(0); visibility: visible; transition: transform 380ms var(--ease-out), visibility 0s; }
@media (min-width: 768px) { .cart-sidebar { width: 420px; border-left: 1px solid rgba(240,165,0,.25); } }
.cart-sidebar :focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.cart-sidebar button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* topo: o galo da casa + "Meu carrinho" + quantos itens */
.cart-header {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
}
.cart-h-logo {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center;
  background: #0A0F1D; border: 1.5px solid rgba(240,165,0,.65); color: var(--gold);
}
.cart-h-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-h-txt { flex: 1; min-width: 0; }
.cart-header h2 { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.cart-h-txt span { display: block; font-size: 13px; font-weight: 600; color: var(--c-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.btn-close-cart {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.07); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 180ms ease, transform 240ms var(--ease-out);
}
.btn-close-cart svg { width: 18px; height: 18px; }
.btn-close-cart:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .btn-close-cart:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } }

.cart-items { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 16px; scrollbar-width: none; }
.cart-items::-webkit-scrollbar { display: none; }

/* carrinho vazio: o galo espera o primeiro pedido */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52%; gap: 6px; padding: 24px 20px 20px; text-align: center;
}
.cart-empty-icon {
  width: 96px; height: 96px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; margin-bottom: 12px;
  background: #0A0F1D; border: 2px solid rgba(240,165,0,.65); color: var(--gold);
}
.cart-empty-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-empty-icon svg { width: 36px; height: 36px; }
.cart-empty b { font-size: 20px; font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; }
.cart-empty p { font-size: 15px; color: var(--c-muted); max-width: 260px; line-height: 1.45; }
.cart-empty-btn {
  margin-top: 14px; min-height: 48px; padding: 10px 28px; border-radius: 999px;
  background: var(--c-amber); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.cart-empty-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .cart-empty-btn:hover { background: var(--c-amber-d); } }

/* item: a bebida inteira, sem cortar | nome, preço da unidade, total + − qtd + */
.cart-item {
  position: relative; display: flex; gap: 12px; align-items: stretch;
  background: var(--c-raised);
  border-radius: 16px; padding: 10px 12px 10px 10px; margin-bottom: 10px;
  contain: layout style;
}
.ci-img {
  position: relative; width: 78px; min-height: 96px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
  background: var(--c-spot);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
/* foto inteira (miniaturas são verticais): a imagem ocupa a caixa e se encaixa sem cortar */
.ci-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ci-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-name { font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.3; padding-right: 30px; overflow-wrap: anywhere; text-wrap: pretty; }
.ci-unit { font-size: 13px; color: var(--c-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ci-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.ci-price { font-size: 19px; color: var(--c-ink); font-weight: 800; white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ci-price .cur { font-size: .66em; font-weight: 700; color: var(--c-muted); letter-spacing: 0; }
.ci-ctrl { display: flex; align-items: center; flex-shrink: 0; height: 40px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.08); }
.ci-qty-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: var(--c-ink); transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.ci-qty-btn svg { width: 17px; height: 17px; }
.ci-qty-btn:active:not(:disabled) { transform: scale(.86); }
.ci-qty-btn.inc { background: #fff; color: #10182B; }
.ci-qty-btn:disabled { opacity: .35; cursor: not-allowed; }
/* lixeira discreta: cinza apagado; só avermelha ao passar o mouse */
.ci-qty-btn.trash { color: var(--c-muted); }
@media (hover: hover) and (pointer: fine) {
  .ci-qty-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
  .ci-qty-btn.inc:hover:not(:disabled) { background: var(--gold-l); }
  .ci-qty-btn.trash:hover { color: #f87171; background: rgba(248,113,113,.12); }
  .ci-remove:hover { color: #f87171; background: rgba(248,113,113,.12); }
}
.ci-qty { display: block; min-width: 28px; height: 22px; line-height: 22px; overflow: hidden; font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ci-qty-n { display: block; }
/* remover de uma vez (útil com muitas unidades); com 1 unidade a lixeira já está no controle de quantidade */
.ci-remove {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--c-muted); background: transparent;
  transition: color 180ms ease, background-color 180ms ease, transform 140ms var(--ease-out);
}
.ci-remove[hidden] { display: none; }
.ci-remove svg { width: 15px; height: 15px; }
.ci-remove:active { transform: scale(.86); }

/* "Adicionar mais itens" + "Peça também" (sugestões para comprar mais) */
.cart-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px;
  border-radius: 12px; background: rgba(255,255,255,.05);
  color: var(--c-ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.cart-more svg { width: 16px; height: 16px; color: var(--c-muted); }
.cart-more:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .cart-more:hover { background: rgba(255,255,255,.1); } }
.cart-sug { margin-top: calc(18px + var(--sug-push, 0px)); }   /* --sug-push: cart.js (fitSugCards) */
.cart-sug-title { margin-bottom: 10px; font-size: 16px; font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; }
.cart-sug-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; scrollbar-width: none;
}
.cart-sug-row::-webkit-scrollbar { display: none; }
/* no computador dá para arrastar a faixa com o mouse (cart.js); durante o arrasto o encaixe desliga */
@media (hover: hover) and (pointer: fine) {
  .cart-sug-row { cursor: grab; user-select: none; }
  .cart-sug-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .cart-sug-row.is-dragging .sug-card { pointer-events: none; }
}
.sug-card {
  position: relative; flex: 0 0 146px; scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 8px; border-radius: 16px; cursor: pointer;
  background: var(--c-raised); transition: transform 140ms var(--ease-out), background-color 180ms ease;
  contain: layout style;
}
.sug-card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .sug-card:hover { background: #1F2B49; } }
.sug-open { display: block; width: 100%; padding: 0; text-align: left; color: inherit; border-radius: 10px; }
.sug-img {
  position: relative; display: grid; place-items: center; border-radius: 11px; overflow: hidden; font-size: 30px;
  height: calc(clamp(104px, 17.5vh, 156px) + var(--sug-img-d, 0px));   /* --sug-img-d: cart.js (fitSugCards) */
  background: var(--c-spot);
}
.sug-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sug-tag {
  position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 7px; border-radius: 6px;
  background: #E5481D; color: #fff; font-size: 11px; font-weight: 800;
}
.sug-name {
  margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--c-ink); line-height: 1.3; min-height: 2.6em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sug-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; }
.sug-price { display: flex; flex-direction: column; font-size: 15px; font-weight: 800; color: var(--c-ink); line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sug-price s { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.sug-add {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: #fff; color: #10182B;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.sug-add svg { width: 18px; height: 18px; stroke-width: 2.6; }
.sug-add:active { transform: scale(.86); }
@media (hover: hover) and (pointer: fine) { .sug-add:hover { background: var(--gold-l); } }
/* Cartão baixo, quando o alto não cabe acima da comanda (cart.js: fitSugCards): a foto fica num lugar fixo ao lado
   do nome e o "+" no alto à direita. Se a lista cortar o cartão, o que aparece já mostra o "+" inteiro. */
.cart-sug-row.is-compact .sug-card { flex-basis: 252px; }
.cart-sug-row.is-compact .sug-open { display: flex; align-items: flex-start; gap: 10px; }
.cart-sug-row.is-compact .sug-img { flex: 0 0 56px; height: 80px; border-radius: 10px; }
.cart-sug-row.is-compact .sug-img img { padding: 4px; }
.cart-sug-row.is-compact .sug-tag { top: 10px; left: 10px; padding: 2px 5px; }
.cart-sug-row.is-compact .sug-name { margin-top: 2px; padding-right: 44px; min-height: 0; }
.cart-sug-row.is-compact .sug-bottom {
  position: absolute; inset: 8px 8px 8px 74px; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  pointer-events: none;   /* o toque no espaço vazio abre o produto, como no cartão alto */
}
.cart-sug-row.is-compact .sug-price { flex-direction: row; align-items: baseline; gap: 6px; }
.cart-sug-row.is-compact .sug-add { position: absolute; top: 0; right: 0; pointer-events: auto; }

/* rodapé: pedido mínimo, a comanda (subtotal, entrega, total) e o botão */
.cart-footer {
  position: relative; z-index: 1;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  background: var(--c-ground);
  box-shadow: 0 -14px 22px -14px rgba(4,7,15,.85);
}
/* letra maior e contraste alto (fácil de ler pra quem enxerga pouco) */
.cart-summary { position: relative; padding: 10px 14px 12px; border-radius: 14px; background: var(--c-ticket); }
.cart-ticket-brand { font-family: 'Dancing Script', cursive; font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--gold); text-align: center; padding-bottom: 6px; }
/* telas baixas: a lista precisa do espaço */
@media (max-height: 760px) {
  .cart-ticket-brand { display: none; }
  .cart-summary { padding-top: 8px; padding-bottom: 8px; }
  .cart-summary-row.total .val { font-size: 26px; }
  .btn-checkout { min-height: 54px; font-size: 19px; }
  .bc-arrow { width: 40px; height: 40px; }
}
.cart-summary-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px;
  padding: 3px 0; font-size: 15px; color: #D5DCEC;
}
.cart-summary-row > span:nth-child(2) { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* dica embaixo do rótulo ("Sem taxa para retirada na loja"), na largura toda */
.cart-summary-row small { flex: 0 0 100%; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--c-muted); font-weight: 500; }
.cart-summary-row small[hidden] { display: none; }
.cart-summary-row .free { color: #4ade80; font-weight: 800; }
.cart-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #93c5fd; }
.cart-note svg { width: 15px; height: 15px; flex-shrink: 0; }
.cart-note[hidden] { display: none; }
/* o picote da comanda: tracejado com um recorte de cada lado (a cor do recorte é a do fundo do rodapé) */
.cart-tear { position: relative; margin: 9px -14px 7px; border-top: 2px dashed rgba(255,255,255,.2); }
.cart-tear::before, .cart-tear::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-ground); }
.cart-tear::before { left: -8px; }
.cart-tear::after { right: -8px; }
.cart-summary-row.total { align-items: center; padding: 0; font-size: 17px; font-weight: 800; color: #fff; }
/* total em branco neutro (dourado chama a "dor de pagar") e "R$" menor que o número */
.cart-summary-row.total .val { display: inline-block; font-size: 30px; font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.02em; transform-origin: right center; }
.cart-summary-row .cur { font-size: .55em; font-weight: 700; color: var(--c-muted); letter-spacing: 0; }

/* o botão: a única coisa âmbar da tela, em cor lisa (texto branco com 3,2:1 em letra grande) */
.btn-checkout {
  position: relative; overflow: hidden; z-index: 1;
  background: var(--c-amber);
  color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  border-radius: 999px; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 26px;
  transition: transform 140ms var(--ease-out), opacity 180ms ease;
}
.btn-checkout::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-170%) skewX(-18deg);
}
.bc-arrow { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.bc-arrow svg { width: 20px; height: 20px; stroke-width: 2.6; }
.btn-checkout:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .btn-checkout { transition: background-color 180ms ease, transform 140ms var(--ease-out), opacity 180ms ease; }
  .btn-checkout:hover { background: var(--c-amber-d); }
}
/* Texto do botão: "Finalizar pedido" e "Faltam R$ X" ficam na mesma célula, para a altura nunca mudar */
.btn-checkout > * { position: relative; z-index: 1; }
.bc-txt { display: grid; min-width: 0; text-align: left; }
.bc-txt > * { grid-area: 1 / 1; align-self: center; transition: opacity 120ms ease, transform 240ms var(--ease-out); }
.bc-go { transition-delay: 110ms; }   /* quem entra espera quem sai */
.btn-checkout.is-blocked .bc-go { transition-delay: 0s; }
.btn-checkout.is-blocked .bc-min { transition-delay: 110ms; }
.bc-min { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(8px); }
.bc-min b { display: block; font-size: 19px; font-weight: 800; line-height: 1.1; transform-origin: left center; }
.bc-min small { font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.bc-arrow::before { content: ''; grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 180ms ease; }
.bc-arrow > svg { grid-area: 1 / 1; position: relative; transition: opacity 180ms ease, transform 280ms var(--ease-out); }
.bc-arrow > svg + svg { color: #10182B; opacity: 0; transform: scale(.5); }

/* Abaixo do pedido mínimo o botão é a barra: chão azul, enchimento em âmbar escuro e cor lisa (branco com 4,6:1 até na letra
   pequena). O âmbar vivo fica guardado para quando ele puder ser tocado: ao chegar no mínimo, ele "acende". */
.btn-checkout:not(.btn-checkout--closed)::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--c-amber-fill);
  transform: translateX(calc((var(--cart-fill, 1) - 1) * 100%)); opacity: 0;
  transition: transform 420ms var(--ease-out), opacity 220ms ease 240ms;
}
.btn-checkout.is-blocked:not(.btn-checkout--closed) { background: var(--c-track); }
.btn-checkout.is-blocked:not(.btn-checkout--closed)::before { opacity: 1; transition: transform 420ms var(--ease-out), opacity 0s; }
.btn-checkout.is-blocked .bc-go { opacity: 0; transform: translateY(-8px); }
.btn-checkout.is-blocked .bc-min { opacity: 1; transform: none; }
/* o "+" branco é o mesmo dos cartões: quer dizer "adicione", e tocar leva até as sugestões */
.btn-checkout.is-blocked .bc-arrow::before { opacity: 1; }
.btn-checkout.is-blocked .bc-arrow > svg { opacity: 0; transform: scale(.5); }
.btn-checkout.is-blocked .bc-arrow > svg + svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .btn-checkout.is-blocked:not(.btn-checkout--closed):hover { background: #33426A; } }
@media (prefers-reduced-motion: reduce) {
  .btn-checkout::before, .bc-txt > *, .bc-arrow::before, .bc-arrow > svg { transition: none !important; }
}
.btn-checkout--closed {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  box-shadow: none !important;
  border: 1.5px solid rgba(239,68,68,.35) !important;
  cursor: not-allowed !important;
}
.btn-checkout--closed:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }
.btn-checkout--closed::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid rgba(239,68,68,.75); opacity: 0; pointer-events: none; }

/* "Desfazer": remover nunca é sem volta */
.cart-undo {
  position: absolute; left: 16px; right: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 6px 6px 6px 14px; border-radius: 12px;
  background: #F5F7FF; color: #10182B; font-size: 14px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.cart-undo span { min-width: 0; overflow-wrap: anywhere; }
.cart-undo button { flex-shrink: 0; min-height: 36px; padding: 6px 12px; border-radius: 8px; background: #10182B; color: #fff; font-size: 14px; font-weight: 700; transition: transform 140ms var(--ease-out); }
.cart-undo button:active { transform: scale(.96); }

/* A foto que voa de "Peça também" até o carrinho (fica fora da gaveta, por cima de tudo) */
.cart-fly { position: fixed; z-index: 300; pointer-events: none; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  /* Abrir: cada conteúdo entra do seu jeito, e tudo assenta em menos de 1,1 s.
     A lista vem linha a linha do lado da gaveta; a foto assenta de uma escala menor; as sugestões deslizam;
     o botão chega e a comanda sai de cima dele, como papel da impressora. No máximo 4 passos de atraso em cada grupo. */
  .cart-sidebar.is-opening .cart-item { animation: cartRowIn 460ms var(--ease-out) both; animation-delay: calc(90ms + min(var(--i, 0), 3) * 60ms); }
  .cart-sidebar.is-opening .ci-img img { animation: cartPicIn 620ms var(--ease-expo) both; animation-delay: calc(130ms + min(var(--i, 0), 3) * 60ms); }
  .cart-sidebar.is-opening .cart-more,
  .cart-sidebar.is-opening .cart-sug-title { animation: cartFade 300ms ease both; animation-delay: 240ms; }
  .cart-sidebar.is-opening .sug-card { animation: cartCardIn 520ms var(--ease-out) both; animation-delay: calc(260ms + min(var(--i, 0), 3) * 60ms); }
  .cart-sidebar.is-opening .cart-empty > * { animation: cartRiseIn 460ms var(--ease-out) both; animation-delay: calc(90ms + var(--i, 0) * 60ms); }
  .cart-sidebar.is-opening .btn-checkout { animation: cartCtaIn 380ms var(--ease-out) 100ms both; }
  /* A comanda sai da "impressora" (a linha do botão) em passos curtos, como papel de térmica */
  .cart-summary.is-printing { animation: cartPrint 560ms steps(12, end) 260ms both; }

  /* Um item acabou de entrar */
  .cart-item.is-new { animation: cartRowIn 380ms var(--ease-out) both; }
  .cart-undo { animation: cartRiseIn 280ms var(--ease-out) both; }
  /* Abrir abaixo do mínimo: o botão enche até onde o carrinho chegou */
  .cart-sidebar.is-opening .btn-checkout.is-blocked:not(.btn-checkout--closed)::before { animation: cartFillIn 760ms var(--ease-expo) 300ms both; }

  /* O botão chama a atenção só com o carrinho aberto e por uns 20 s (poupa bateria e não distrai quem está lendo) */
  .cart-sidebar.open .btn-checkout:not(.is-blocked):not(.btn-checkout--closed)::after { animation: cartCtaSheen 5s ease-in-out 1.4s 4; }
  .cart-sidebar.open .btn-checkout:not(.is-blocked) .bc-arrow svg:first-child { animation: cartNudge 2.4s ease-in-out 1.2s 8; }
  .cart-sidebar.open .btn-checkout--closed::before { animation: cartClosedPulse 2.5s ease-in-out 8; }
}
@keyframes mibIn       { from { opacity: 0; transform: translateY(8px); } }
@keyframes cartFillIn  { from { transform: translateX(-100%); } }
@keyframes cartRowIn   { from { opacity: 0; transform: translateX(28px); } }
@keyframes cartPicIn   { from { opacity: 0; transform: translateY(10px) scale(.84); } }
@keyframes cartCardIn  { from { opacity: 0; transform: translateX(40px); } }
@keyframes cartRiseIn  { from { opacity: 0; transform: translateY(14px); } }
@keyframes cartFade    { from { opacity: 0; } }
@keyframes cartCtaIn   { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes cartPrint   { from { transform: translateY(100%); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0); } }
@keyframes cartCtaSheen { 0%, 62% { transform: translateX(-170%) skewX(-18deg); } 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes cartNudge { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(3px); } }
@keyframes cartClosedPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ── FLOATING CART ── */
/* ── ORDER STATUS BAR ── */
.order-status-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--card);
  border-top: 2px solid var(--gold);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 16px;
  text-decoration: none; color: inherit;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.order-status-bar.show { transform: translateY(0); }

.osb-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; background: var(--gold);
  position: relative;
}
.osb-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--gold);
  animation: osb-pulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes osb-pulse {
  0%     { transform: scale(1);   opacity: .7; }
  100%   { transform: scale(2.5); opacity: 0; }
}
.osb-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.osb-info { flex: 1; min-width: 0; }
.osb-label {
  font-size: 13px; font-weight: 800; color: var(--text);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.osb-num { font-size: 11px; color: var(--text3); }
.osb-cta {
  font-size: 13px; font-weight: 800; color: var(--gold);
  flex-shrink: 0; white-space: nowrap;
}

/* Sobe o float-cart quando a barra de pedido está visível */
body.has-order-bar .float-cart { bottom: calc(24px + 62px); }
@media (max-width: 767px) { body.has-order-bar .float-cart { bottom: calc(16px + 62px); } }

.float-cart {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 52%, #e07800 100%);
  color: #000; border: none; cursor: pointer;
  padding: 7px 22px 7px 7px; border-radius: 50px;
  display: flex; align-items: center; gap: 14px;
  box-shadow:
    0 2px 8px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.22);
  z-index: 150;
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
  opacity: 0; pointer-events: none;
  white-space: nowrap;
}
.float-cart.show {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.float-cart:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.float-cart:active { transform: translateX(-50%) translateY(0) scale(.97); }
.float-cart-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,.16);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
}
.float-cart-icon svg {
  width: 19px; height: 19px;
  stroke: #000; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.float-cart-info { display: flex; flex-direction: column; gap: 0px; }
.float-cart-qty  { font-size: 10px; font-weight: 700; opacity: .6; text-transform: uppercase; letter-spacing: .5px; line-height: 1.3; }
.float-cart-val  { font-size: 17px; font-weight: 900; line-height: 1.15; letter-spacing: -.3px; }
.float-cart-arrow { font-size: 18px; font-weight: 900; opacity: .65; margin-left: -6px; }
.float-cart-sep { display: none; }

/* loja fechada: botão do carrinho centralizado, sem brilho */
.btn-checkout--closed { justify-content: center !important; padding: 15px !important; text-shadow: none; }
.btn-checkout--closed::after { display: none; }
.btn-checkout--closed svg { width: 18px; height: 18px; }

/* ── TOAST ── */
.toast-container {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  background: var(--card2); border: 1px solid var(--gold);
  color: var(--text); padding: 10px 18px; border-radius: 16px;
  font-size: 13px; font-weight: 600; text-align: center;
  white-space: normal; word-break: break-word; line-height: 1.5;
  animation: toastIn .3s ease, toastOut .3s ease 2.5s forwards;
}
@keyframes toastIn  { from { opacity:0; transform:translateY(12px); } }
@keyframes toastOut { to   { opacity:0; transform:translateY(-8px); } }


/* ── FAIXA DE SITUAÇÃO (topo) — aberta/fechada/pausada + quando fecha/abre; único lugar com a situação
   (sem selo no cabeçalho nem balão). Fundo preto; cor por --cb só na borda: verde aberta,
   vermelha fechada, âmbar pausada. Placa "ABERTO"/"FECHADO" balançando à esquerda (pausada: sem placa); mini mesa de sinuca
   animada à direita (SVG no index.php).
   Celular: 2 linhas alinhadas ao cabeçalho, mesa na ponta direita; PC: uma linha centralizada ── */
.store-bar {
  --cb: 248,113,113;
  padding: 12px 16px;
  background: #000;
  border-bottom: 1px solid rgba(var(--cb),.18);
}
.store-bar.open   { --cb: 74,222,128; }
.store-bar.paused { --cb: 251,191,36; }
.sb-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.sb-main { display: contents; } /* placa + texto, trocados juntos em tempo real (store-live.js) */
/* placa pendurada: balança presa no prego (topo, no meio da imagem) */
.sb-sign {
  display: block; width: 60px; height: auto; flex-shrink: 0;
  transform-origin: 50% 4%; animation: sb-swing 3s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
@keyframes sb-swing {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .sb-sign { animation: none; } }
.sb-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.2; }
.sb-title { font-size: 15px; font-weight: 800; color: #FFFFFF; letter-spacing: -.2px; }
.sb-sub { font-size: 13.5px; color: #AEB9D1; font-variant-numeric: tabular-nums; }
.sb-sub b { color: #FFFFFF; font-weight: 700; }
.sb-note { font-size: 12.5px; color: #F5D78E; }

/* (a mini mesa de sinuca animada saiu em 2026-11-08: no lugar dela há um vídeo real de sinuca ao fundo da faixa) */

@media (min-width: 768px) {
  .store-bar { padding: 10px 16px; }
  .sb-inner { justify-content: center; }
  .sb-txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0; }
  .sb-sub, .sb-note { font-size: 15px; }
  .sb-txt > * + *::before { content: "·"; margin: 0 12px; color: var(--text3); font-weight: 400; }
  .sb-sign { width: 52px; }
}

/* ── PRODUCT MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 250; display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s;
  touch-action: none;
}
.modal-box {
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 480px; overflow: hidden;
  max-height: 90vh; overflow-y: auto;
  opacity: 0; transition: opacity .18s;
}
.modal-overlay.open .modal-box { opacity: 1; }
.modal-box { position: relative; }
.modal-close-btn {
  position: absolute; top: 10px; right: 10px; z-index: 20;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: none; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.modal-close-btn:hover { background: rgba(0,0,0,.85); }
.modal-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px 16px 0 0; background: var(--bg3); }
.modal-no-img {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  font-size: 72px; background: var(--bg3); border-radius: 16px 16px 0 0;
}
/* vinheta lateral e superior */
.modal-img-wrap::before {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 22px  0 28px rgba(0,0,0,.55),
    inset -22px 0 28px rgba(0,0,0,.55),
    inset 0 16px 22px rgba(0,0,0,.35);
}
/* fade da imagem para o body */
.modal-img-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}

.modal-body { padding: 18px 22px 24px; }

/* pill de categoria */
.modal-cat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  background: rgba(240,165,0,.08); border: 1px solid rgba(240,165,0,.25);
  border-radius: 20px; padding: 2px 9px 2px 6px;
  font-size: 11px; margin-bottom: 8px; color: #f5c842; line-height: 1;
}
.modal-cat-pill span { font-size: 10px; font-weight: 600; letter-spacing: .3px; }

/* título */
.modal-title {
  font-size: 19px; font-weight: 800; line-height: 1.3; color: #ffffff;
  letter-spacing: -.2px;
}

/* linha separadora dourada */
.modal-title-line {
  height: 1px; margin: 13px 0;
  background: linear-gradient(90deg, rgba(240,165,0,.55) 0%, rgba(240,165,0,.08) 60%, transparent 100%);
}

/* descrição */
.modal-desc-wrap {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(240,165,0,.18);
  border-left: 3px solid #F0A500;
  border-radius: 0 10px 10px 0;
}
.modal-desc-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: #F0A500; margin-bottom: 6px;
}
.modal-desc { color: #ffffff; font-size: 13px; line-height: 1.65; overflow-wrap: break-word; word-break: break-word; }

.modal-alcohol-badge {
  display: inline-flex; align-items: center; gap: 5px;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 10px 3px 8px;
  background: rgba(0,210,255,.12);
  border: 1px solid rgba(0,210,255,.35);
  border-radius: 20px;
  font-size: 11px; letter-spacing: .2px;
  color: #00D2FF;
}
.modal-alcohol-badge strong { color: #00D2FF; font-weight: 700; }

/* preço */
.modal-price-row {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 18px; padding: 14px 18px;
  background: rgba(240,165,0,.06);
  border: 1px solid rgba(240,165,0,.18);
  border-radius: 12px;
}
.modal-price-label { font-size: 11px; color: var(--text3); font-weight: 500; }
.modal-price { font-size: 30px; font-weight: 900; color: var(--gold); letter-spacing: -.5px; }

.modal-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
}
.modal-qty-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  background: var(--bg3); border-radius: 10px; padding: 10px 16px; width: 100%;
}
.modal-qty-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--border); color: var(--gold); font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.modal-qty-btn:hover { background: var(--card2); }
.modal-qty-val { font-size: 18px; font-weight: 700; min-width: 28px; text-align: center; }
@keyframes btnShimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(250%)  skewX(-15deg); }
}
@keyframes btnPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .88; }
}

.modal-add-btn {
  width: 100%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #FFD166 0%, #F0A500 45%, #d97000 100%);
  color: #000; font-weight: 900; font-size: 16px;
  padding: 16px; border-radius: 12px;
  box-shadow: 0 4px 22px rgba(240,165,0,.45);
  animation: btnPulse 2.4s ease-in-out infinite;
  transition: transform .15s, opacity .15s;
}
.modal-add-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  animation: btnShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}
.modal-add-btn:hover  { transform: translateY(-2px); opacity: .9; }
.modal-add-btn:active { transform: scale(.98); opacity: .8; }

/* ── MODAL TEMA PROMOÇÃO ── */
#productModal.modal-promo .modal-inner {
  background: #0a0600;
  border-color: rgba(255,107,0,.55);
  box-shadow: 0 0 0 1px rgba(255,107,0,.3), 0 32px 80px rgba(0,0,0,.75);
}
#productModal.modal-promo .modal-title-line { background: linear-gradient(90deg, rgba(255,107,0,.6), transparent); }
#productModal.modal-promo .modal-desc-wrap  { border-left-color: #FF6B00; border-color: rgba(255,107,0,.2); }
#productModal.modal-promo .modal-desc-label { color: #FF8C30; }

.modal-price-row-promo {
  background: rgba(255,107,0,.07);
  border-color: rgba(255,107,0,.3);
}
.modal-promo-tag {
  display: flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(255,140,50,.85);
  margin-bottom: 4px;
}
.modal-price-was {
  font-size: 12px; color: rgba(255,255,255,.38);
  text-decoration: line-through;
  text-decoration-color: rgba(255,107,0,.5);
}
.modal-price-fire {
  color: #FF6B00 !important;
  text-shadow: 0 0 20px rgba(255,107,0,.45);
}
.modal-add-btn-promo {
  background: linear-gradient(135deg, #ff8c1a 0%, #FF6B00 55%, #cc5500 100%) !important;
  box-shadow: 0 4px 22px rgba(255,107,0,.55) !important;
}
.modal-add-btn-promo:hover { box-shadow: 0 8px 30px rgba(255,107,0,.75) !important; }

/* ── IMAGE LIGHTBOX ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.lightbox-overlay.open { opacity: 1; pointer-events: all; }
.lightbox-img {
  max-width: 100vw; max-height: 100dvh;
  object-fit: contain;
  border-radius: 4px;
  transform: scale(.92);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  user-select: none; -webkit-user-drag: none;
}
.lightbox-overlay.open .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: fixed; top: 14px; right: 14px; z-index: 401;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }

/* botão de zoom sobre a imagem do modal */
.modal-img-wrap {
  position: relative; cursor: zoom-in; display: block;
}
.modal-img-wrap .modal-img { display: block; }
.modal-zoom-btn {
  position: absolute; bottom: 10px; right: 10px; z-index: 5;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.modal-zoom-btn:hover { background: rgba(0,0,0,.8); }

/* pausa animações de fundo com modal aberto */
body.modal-open .hero-logo-glow,
body.modal-open .featured-badge,
body.modal-open .badge-cold,
body.modal-open .promo-circle::after,
body.modal-open .osb-dot::after,
body.modal-open .slide-deco,
body.modal-open .slide-badge,
body.modal-open .radio-bars span {
  animation-play-state: paused;
}

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  .hero { padding: 32px 16px 36px; }
  .hero-logo-frame { width: 130px; height: 130px; border-radius: 22px; }
  .hero-logo-glow  { width: 215px; height: 215px; }
}

/* ── MODAL DESKTOP: 2 colunas ── */
@media (min-width: 600px) {
  .modal-box {
    max-width: 760px;
    max-height: 88vh;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  #modalContent {
    display: flex; flex-direction: row;
    flex: 1; overflow: hidden;
  }
  .modal-img-wrap {
    width: 300px; flex-shrink: 0;
    position: relative; overflow: hidden;
  }
  .modal-img-wrap::after {
    background: linear-gradient(to right, transparent 55%, var(--bg2) 100%);
    height: 100%; top: 0; bottom: auto;
  }
  .modal-img {
    width: 100%; height: 100%;
    aspect-ratio: unset;
    object-fit: cover;
    border-radius: 16px 0 0 16px;
  }
  .modal-no-img {
    width: 260px; flex-shrink: 0;
    aspect-ratio: unset; min-height: 360px;
    border-radius: 16px 0 0 16px;
  }
  .modal-body {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 24px 28px 26px;
    scrollbar-width: thin;
    scrollbar-color: rgba(240,165,0,.3) transparent;
  }
  .modal-actions { margin-top: auto; padding-top: 16px; }
  .modal-zoom-btn { bottom: 10px; right: auto; left: 10px; }
  .modal-title-line { margin: 10px 0 12px; }
}

/* ── MODAL MOBILE ── */
@media (max-width: 600px) {
  /* overlay mais escuro para esconder animações do fundo */
  .modal-overlay { padding: 20px 14px; background: rgba(0,0,0,.93); }

  .modal-box {
    border-radius: 18px;
    overflow: hidden;
    max-height: unset;
    width: 100%;
  }

  .modal-img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: var(--bg3);
    aspect-ratio: unset;
    border-radius: 0;
  }
  .modal-no-img {
    height: 110px;
    aspect-ratio: unset;
    font-size: 52px;
    border-radius: 0;
  }

  .modal-body        { padding: 14px 16px 20px; }
  .modal-cat-pill    { font-size: 12px; margin-bottom: 8px; }
  .modal-title       { font-size: 16px; }
  .modal-title-line  { margin: 10px 0; }
  .modal-desc-wrap   { margin-top: 10px; padding: 10px 12px; }
  .modal-desc-label  { font-size: 9px; margin-bottom: 4px; }
  .modal-desc        { font-size: 12px; line-height: 1.6; }
  .modal-price-row   { margin-top: 14px; padding: 12px 14px; border-radius: 10px; }
  .modal-price-label { font-size: 10px; }
  .modal-price       { font-size: 24px; }
  .modal-add-btn     { font-size: 15px; padding: 15px; border-radius: 11px; }

  .modal-actions  { flex-direction: column; gap: 10px; margin-top: 14px; }
  .modal-qty-ctrl { width: 100%; padding: 10px 16px; gap: 20px; border-radius: 10px; }
  .modal-qty-btn  { width: 36px; height: 36px; font-size: 20px; border-radius: 8px; }
  .modal-qty-val  { font-size: 16px; min-width: 24px; }
  .modal-add-btn  { width: 100%; padding: 14px; font-size: 15px; border-radius: 11px; }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .btn-cart span { display: none; }
  .float-cart { bottom: 16px; padding: 7px 20px 7px 7px; }
}
@media (max-width: 380px) {
  .hero-logo-frame { width: 110px; height: 110px; border-radius: 18px; }
  .hero-logo-glow  { width: 182px; height: 182px; }
}
@media (min-width: 768px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .products-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── SHIMMER LOADING ── */
.shimmer {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-card { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.skeleton-img  { aspect-ratio:1/1; }
.skeleton-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 12px; }
.skeleton-line.short { width: 60%; }
.skeleton-btn  { height: 36px; margin-top: 8px; border-radius: 8px; }

/* ── EMPTY STATE ── */
.empty-state {
  grid-column: 1/-1; text-align: center; padding: 60px 20px;
  color: var(--text3);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 15px; }

/* ── HERO: oculto em todas as telas (brand fica no header) ── */
.hero { display: none; }

/* ── MOBILE INFO BAR: só no mobile ── */
.mobile-info-bar { display: none; }

/* Ícone dos selos de informação do cabeçalho: traço dourado num quadradinho */
.info-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(240,165,0,.12);
  border: 1px solid rgba(240,165,0,.28);
  color: #F5B730;
}
.info-ico svg { display: block; }
@media (max-width: 767px) { .mobile-info-bar { display: grid; } }

/* ── MOBILE BRAND TITLE: abaixo do header, só mobile ── */
.mobile-title-row { display: none; }
.mobile-brand-title { display: none; }

@media (max-width: 767px) {
  .mobile-title-row {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 10px 16px 4px;
  }
  .mobile-brand-title {
    display: block; padding: 0; white-space: nowrap;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(30px, 8.5vw, 42px);
    font-weight: 700;
    color: #FFB800;
    text-shadow: 0 0 18px rgba(255,184,0,.45), 0 0 36px rgba(255,184,0,.18);
  }
}

/* ── RADIO PLAYER ── */
.radio-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(240,165,0,.1);
  border: 1.5px solid rgba(240,165,0,.35);
  color: #F0A500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.radio-btn:hover { background: rgba(240,165,0,.18); border-color: var(--gold); }
.radio-btn.playing {
  background: rgba(240,165,0,.2); border-color: var(--gold);
  box-shadow: 0 0 16px rgba(240,165,0,.25);
  position: relative;
}
.radio-btn.playing::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(240,165,0,.4);
  animation: radioPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes radioPulse {
  0%     { transform: scale(1);   opacity: .8; }
  100%   { transform: scale(1.5); opacity: 0;  }
}
.radio-btn svg { width: 13px; height: 13px; margin-left: 2px; }
.radio-bars {
  display: none; align-items: flex-end; gap: 2px; height: 16px;
}
.radio-btn.playing #radioIconPlay { display: none; }
.radio-btn.playing .radio-bars    { display: flex; }
.radio-bars span {
  width: 3px; border-radius: 2px; background: #F0A500;
  animation: barBounce .55s ease-in-out infinite alternate;
}
.radio-bars span:nth-child(1) { height: 7px;  animation-delay: 0s; }
.radio-bars span:nth-child(2) { height: 14px; animation-delay: .12s; }
.radio-bars span:nth-child(3) { height: 9px;  animation-delay: .24s; }
.radio-bars span:nth-child(4) { height: 5px;  animation-delay: .36s; }
@keyframes barBounce {
  from { transform: scaleY(.25); opacity: .7; }
  to   { transform: scaleY(1);   opacity: 1; }
}

/* ── DESKTOP RADIO BUTTON ── */
#desktopRadioBtn { display: none; }
#desktopRadioBtn.playing #desktopRadioIconPlay { display: none; }
#desktopRadioBtn.playing .radio-bars { display: flex; }
@media (min-width: 768px) { #desktopRadioBtn { display: flex; } }

/* base do brand-name — assinatura (vale para todas as telas) */
.brand-name {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  background: linear-gradient(130deg, #FFE97A 0%, #F0A500 38%, #E07800 68%, #FFD166 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: inline-block;
}

/* ══════════════════════════════════════════
   MOBILE  (< 768px)
══════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Header mobile ── */
  .site-header {
    background: linear-gradient(180deg, #0f1a30 0%, #080c18 100%);
    border-bottom: 1px solid rgba(240,165,0,.28);
    box-shadow: 0 1px 0 rgba(240,165,0,.12), 0 4px 20px rgba(0,0,0,.5);
  }
  .site-header { padding: 0 14px; }
  /* Duas linhas: logo + selo + carrinho em cima; "Entregar em" embaixo, na largura toda,
     para o endereço aparecer inteiro numa linha só */
  .header-inner {
    height: auto; min-height: 0;
    padding: 10px 0 12px; gap: 10px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  }
  .brand { display: contents; }
  .brand-link { gap: 14px; align-items: center; flex-shrink: 0; order: 0; }
  .header-actions { order: 1; }
  .brand-logo-wrap { --logo: 50px; }
  .brand-link { gap: 12px; min-width: 0; flex-shrink: 1; }
  .brand-text { min-width: 0; }
  .brand-place { font-size: 15px; color: #F4F6FB; }
  .hdr-addr { order: 2; flex: 1 0 100%; height: 50px; padding: 0 14px 0 8px; border-radius: 14px; }
  .ha-val { font-size: 15px; }
  /* Título vai abaixo do header no mobile */
  .brand-name { display: none; }
  .header-info-badges { display: none; }

  /* Cart mais compacto */
  .header-actions { gap: 8px; }
  .btn-cart { padding: 9px 14px; font-size: 13px; }

  /* ── Info bar mobile: uma barra só, parada, nas mesmas margens do "Entregar em". Sobe de tom em vez de ter borda,
     o ícone dourado sem quadradinho conversa com o nome da adega logo acima, e cada coluna quebra a linha em vez de cortar
     (horário com dois turnos, feriado com nome comprido). ── */
  .mobile-info-bar {
    grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    margin: 10px 14px 0; padding: 0; list-style: none;
    border-radius: 14px; background: #18223B;
  }
  .mobile-info-bar.mib-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mib {
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 4px; text-align: center;
  }
  .mib-val {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 14px; font-weight: 800; line-height: 1.25; color: #F5F7FF; font-variant-numeric: tabular-nums;
  }
  .mib-val > span { min-width: 0; text-wrap: balance; }
  .mib-val svg { flex: none; width: 15px; height: 15px; color: var(--gold); }
  .mib-label { max-width: 100%; font-size: 13px; font-weight: 500; line-height: 1.25; color: #B4BED6; text-wrap: balance; overflow-wrap: anywhere; }
  /* Entra uma vez ao abrir a loja e fica quieta */
  @media (prefers-reduced-motion: no-preference) {
    .mib { animation: mibIn 460ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
  }

  /* ── Carousel mobile ── */
  .carousel-slide { height: 250px; }
  .slide-content { padding: 0 20px; gap: 14px; }
  .slide-eyebrow { font-size: 9px; margin-bottom: 6px; }
  .slide-heading { font-size: clamp(18px, 5.5vw, 26px); margin-bottom: 4px; }
  .slide-desc { font-size: 11px; margin-bottom: 14px; }
  .slide-cta { font-size: 11px; padding: 8px 14px; }
  .slide-deco { font-size: clamp(44px, 12vw, 68px); }
  .slide-badge { width: 76px; height: 76px; font-size: 9px; }
  .slide-badge strong { font-size: 17px; }

  /* ── Search mobile ── */
  .search-bar { padding: 6px 16px; }
  .search-input { padding: 11px 16px 11px 40px; font-size: 13px; }

  /* ── Categories mobile ── */
  .categories-wrap { margin-top: 14px; }
  .cat-btn { width: 68px; min-height: 70px; font-size: 9.5px; padding: 8px 4px; gap: 5px; }
  .cat-icon { width: 26px; height: 26px; }
  .cat-btn .cat-img-icon { width: 28px; height: 28px; }

  /* ── Products mobile ── */
  .products-section { margin-top: 10px; padding: 0 16px 110px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-name { font-size: 13px; min-height: calc(13px * 1.3 * 2); }
  .product-desc { font-size: 11px; padding: 6px 9px; }
  .product-price { font-size: 16px; -webkit-text-fill-color: transparent; }
  .product-price-row { margin-top: 8px; padding-top: 7px; }
  .btn-add { font-size: 13px; padding: 10px; }

  /* ── Float cart ── */
  .float-cart { bottom: 16px; padding: 6px 18px 6px 6px; }

  /* ── Toast ── */
  .toast-container { bottom: 80px; }
}

/* ── Extra pequeno (< 390px) ── */
@media (max-width: 390px) {
  .brand-name { font-size: 22px; }
  /* cabeçalho: cidade + perfil + carrinho cabem até em 360px */
  .header-actions { gap: 6px; }
  .btn-profile { width: 42px; height: 42px; }
  .brand-place { font-size: 14px; }
  .slide-badge { width: 64px; height: 64px; }
  .slide-badge strong { font-size: 14px; }
  .slide-deco { display: none; }
  .products-grid { gap: 8px; }
}

/* ── HEADER INFO BADGES (mobile: oculto) ── */
.header-info-badges { display: none; }

/* ── HEADER DESKTOP UPGRADE ── */
@media (min-width: 768px) {
  /* Fundo premium com linha gold embaixo */
  .site-header {
    background: linear-gradient(180deg, #0f1a30 0%, #080c18 100%);
    border-bottom: 1px solid rgba(240,165,0,.32);
    box-shadow:
      0 1px 0 rgba(240,165,0,.14),
      0 6px 32px rgba(0,0,0,.6);
  }

  .header-inner {
    height: auto; min-height: 88px; padding: 10px 0;
    align-items: center;
  }

  /* Brand link: mais espaçamento */
  .brand-link { gap: 16px; align-items: center; }
  .brand-logo-wrap { --logo: 66px; }

  /* Título premium desktop */
  .brand-name {
    font-size: 36px; font-weight: 700;
    background: linear-gradient(130deg, #FFE97A 0%, #F0A500 38%, #E07800 68%, #FFD166 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 0 10px rgba(240,165,0,.45));
    display: inline-block;
  }

  /* Badges grandes com fundo preto */
  .header-info-badges {
    display: flex; align-items: center;
    flex-wrap: nowrap; gap: 8px; margin-top: 0;
  }
  .hib {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px; padding: 6px 14px 6px 6px;
    transition: border-color .2s ease;
    cursor: default;
  }
  .hib:hover { border-color: rgba(240,165,0,.35); }
  .hib-val   {
    display: block; font-size: 13px; font-weight: 700;
    color: #F4F6FB; white-space: nowrap; line-height: 1.3;
  }
  .hib-label {
    display: block; font-size: 10.5px; font-weight: 500;
    color: #8E9AB8; white-space: nowrap; line-height: 1.2;
  }

  /* Carrinho ligeiramente maior */
  .btn-cart    { font-size: 15px; padding: 12px 24px; }
  .header-actions { gap: 12px; }
}

/* ── NOME DA LOJA SEMPRE EM UMA LINHA ──
   O nome não encolhe nem quebra. Quando falta espaço, quem cede são os selos:
   os que não cabem descem para uma 2ª linha que fica fora da área visível
   (o selo some inteiro, nunca aparece cortado). */
@media (min-width: 768px) {
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-link, .header-actions { flex-shrink: 0; }
  .brand-link { gap: 16px; }
  .brand-name { white-space: nowrap; }
  .header-info-badges {
    min-width: 0;
    flex-wrap: wrap; align-content: flex-start;
    gap: 60px 6px; height: 60px; padding: 5px 0;
    overflow: hidden;
    overflow: clip; overflow-clip-margin: 14px; /* deixa o brilho do hover aparecer */
  }
  .hib { gap: 8px; padding: 6px 10px 6px 6px; }
  .header-actions { gap: 10px; }
  /* O "Entregar em" vem logo depois do nome e tem prioridade: os selos só usam o que sobrar */
  .brand { gap: 14px; }
  .hdr-addr { flex: 0 1 280px; min-width: 150px; }
  .header-info-badges { flex: 1 1 0; }
}
/* Telas menores: "Entrega rápida" é o primeiro selo a sair */
@media (min-width: 768px) and (max-width: 1279px) {
  .hib-promo { order: 1; }
}
/* Tablet: nome menor e carrinho só com o ícone, para o endereço caber */
@media (min-width: 768px) and (max-width: 1099px) {
  .brand-name { font-size: 28px; }
  .btn-cart { padding: 12px 15px; }
  .btn-cart > span:not(.cart-count) { display: none; }
}

/* ── PROMO CAROUSEL ── */
.promo-carousel {
  max-width: 1200px; margin: 20px auto 0;
  padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.carousel-wrapper {
  flex: 1; border-radius: 18px; overflow: hidden; position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  transition: height .45s cubic-bezier(.4,0,.2,1);
}
.carousel-track {
  display: flex;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.carousel-slide {
  min-width: 100%; height: 260px;
  position: relative; overflow: hidden;
}
.slide-content {
  width: 100%; height: 100%;
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px; position: relative;
}
/* ── Background picture (text slides with bg image) ── */
.slide-bg-picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 0;
}
.slide-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.slide-content { position: relative; z-index: 1; }

/* ── Image-only slides ── */
.slide-imgonly { background: #080C18; }
.slide-imgonly-picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.slide-imgonly-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.slide-imgonly-corner {
  position: absolute; bottom: 14px; left: 16px; z-index: 2;
}

/* ── SLIDE BACKGROUNDS ── */
.slide-beer {
  background: linear-gradient(118deg, #0d0500 0%, #321500 50%, #180a00 100%);
}
.slide-beer::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 52% 50%, rgba(240,165,0,.18) 0%, transparent 68%);
}
.slide-spirits {
  background: linear-gradient(118deg, #030610 0%, #0b1860 50%, #060f2e 100%);
}
.slide-spirits::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 52% 50%, rgba(79,128,255,.22) 0%, transparent 68%);
}
.slide-wine {
  background: linear-gradient(118deg, #09010a 0%, #4e0820 50%, #1e050e 100%);
}
.slide-wine::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 52% 50%, rgba(190,30,70,.24) 0%, transparent 68%);
}
.slide-energy {
  background: linear-gradient(118deg, #060e00 0%, #1a3d00 50%, #0c1e00 100%);
}
.slide-energy::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 52% 50%, rgba(100,200,0,.2) 0%, transparent 68%);
}

/* ── SLIDE CONTENT PARTS ── */
.slide-left { flex: 1; position: relative; z-index: 1; min-width: 0; }
.slide-eyebrow {
  display: inline-block;
  background: rgba(240,165,0,.12); border: 1px solid rgba(240,165,0,.3);
  color: var(--gold); font-size: 9px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; margin-bottom: 7px;
}
.slide-heading {
  font-size: clamp(19px, 3.8vw, 36px); font-weight: 900;
  line-height: 1.08; color: #fff; margin-bottom: 5px;
}
.slide-desc { font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.slide-cta {
  display: inline-flex; align-items: center;
  background: var(--gold); color: #000;
  font-weight: 800; font-size: 11px; font-family: inherit;
  padding: 8px 16px; border-radius: 50px;
  border: none; cursor: pointer;
  transition: opacity .18s, transform .15s;
}
.slide-cta:hover { opacity: .88; transform: translateY(-1px); }

.slide-deco {
  font-size: clamp(52px, 9.5vw, 96px); line-height: 1;
  flex-shrink: 0; z-index: 0;
  text-shadow: 0 10px 20px rgba(0,0,0,.5);
  animation: floatDeco 3.8s ease-in-out infinite;
  will-change: transform;
  user-select: none;
}
@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-7px) rotate(2deg); }
}

.slide-badge {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%;
  background: var(--gold); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  z-index: 1; color: #000; font-size: 9px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 6px 24px rgba(240,165,0,.5);
  animation: pulseBadge 2.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); }
}
.slide-badge strong {
  font-size: 18px; font-weight: 900; display: block;
  line-height: 1; margin: 2px 0;
}
.slide-badge-blue {
  background: var(--blue); color: #fff;
  box-shadow: 0 6px 24px rgba(79,128,255,.5);
}
.slide-badge-wine {
  background: #b5233d; color: #fff;
  box-shadow: 0 6px 24px rgba(181,35,61,.5);
}
.slide-badge-green {
  background: #16a34a; color: #fff;
  box-shadow: 0 6px 24px rgba(22,163,74,.5);
}

.float-cart.hide-footer { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(16px) !important; }

/* ── FOOTER (refeito em 2026-11-08, a pedido; o anterior está na tag rodape-antes-2026-11-08) ──
   Fecha a página no mesmo tom do cabeçalho: marca grande, endereço com "Ver no mapa", atendimento e pagamento,
   selos de confiança em linhas chapadas, links com área de toque de 44px. Sem degradê, linha dourada, sombra,
   ícone em quadradinho nem título em maiúsculas miúdas. Celular: uma coluna alinhada à esquerda; PC: 2 ou 4 colunas.
   Barra final: © + CNPJ + razão social (Decreto 7.962/2013), aviso de consumo e "Desenvolvido por". */
.site-footer { margin-top: 48px; background: #0C1428; }
@media (max-width: 767px) { .site-footer { margin-top: 20px; } }
.ft-main {
  max-width: 1168px; margin: 0 auto; padding: 28px 16px 4px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
}
.ft-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-title { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: #F4F6FB; }
.ft-title:not(:first-child) { margin-top: 12px; }
.ft-title--pc { display: none; }   /* "Atendimento" e "Institucional": só no computador */
.ft-title--pc + * { margin-top: 0; }
.ft-long { display: none; }       /* celular: nomes curtos dos links */

/* marca + endereço + redes */
.ft-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ft-logo { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.ft-mark-txt { display: flex; flex-direction: column; min-width: 0; }
.ft-mark-txt b { font-family: 'Dancing Script', cursive; font-size: 32px; font-weight: 700; line-height: 1.05; color: #FFBE2E; }
.ft-mark-txt span { margin-top: 2px; font-size: 14px; color: #AAB5CE; }
.ft-address {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 4px 0;
  font-size: 14.5px; line-height: 1.5; color: #DCE2EF; text-decoration: none;
}
.ft-address svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #FFBE2E; }
.ft-address > span { text-wrap: balance; }
.ft-address small { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: #FFBE2E; }
.ft-social { display: flex; gap: 10px; margin-top: 14px; }
.ft-soc {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #15203A; color: #F4F6FB; transition: background-color .15s, color .15s;
}
.ft-soc svg { width: 20px; height: 20px; }

/* Marca do rodapé: entra uma vez quando aparece (script no index.php troca .ft-wait por .ft-in).
   O galo sobe e "acena" (gira e assenta); o nome e o subtítulo deslizam da esquerda, um depois do outro.
   Só transform/opacity; sem o script ou com "menos movimento", nada fica escondido. */
@media (prefers-reduced-motion: no-preference) {
  .ft-mark.ft-wait .ft-logo, .ft-mark.ft-wait .ft-mark-txt > * { opacity: 0; }
  .ft-mark.ft-in .ft-logo { animation: ftGaloIn 950ms cubic-bezier(.22,1,.36,1) backwards; }
  .ft-mark.ft-in .ft-mark-txt b { animation: ftDesliza 600ms cubic-bezier(.22,1,.36,1) 160ms backwards; }
  .ft-mark.ft-in .ft-mark-txt span { animation: ftDesliza 600ms cubic-bezier(.22,1,.36,1) 270ms backwards; }
  .ft-logo { transition: transform .35s cubic-bezier(.22,1,.36,1); transform-origin: 50% 85%; }
}
@keyframes ftGaloIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.84) rotate(-12deg); }
  50%  { opacity: 1; transform: translateY(0) scale(1.05) rotate(6deg); }
  72%  { transform: scale(.99) rotate(-3deg); }
  88%  { transform: rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ftDesliza {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ft-mark:hover .ft-logo { transform: rotate(-7deg) scale(1.05); }   /* passar o mouse: o galo inclina */
}

/* WhatsApp (e e-mail): linha chapada; no celular nome e número na mesma linha */
.ft-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px 8px 10px;
  border-radius: 14px; background: #15203A; color: #F4F6FB; text-decoration: none;
  transition: background-color .15s;
}
.ft-row > svg { width: 22px; height: 22px; flex-shrink: 0; color: #FFBE2E; }
.ft-row-txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.ft-row-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ft-row-txt small { font-size: 15px; line-height: 1.3; color: #AAB5CE; overflow-wrap: anywhere; }
.ft-wa-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; }
.ft-wa-ico svg { width: 18px; height: 18px; }

/* pagamento numa frase, logo abaixo do WhatsApp */
.ft-pay-line { margin: 2px 0 0; font-size: 14px; color: #AAB5CE; }

/* links institucionais: no celular nomes curtos numa linha, 44px de altura para o dedo */
.ft-links { flex-direction: row; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
.ft-links a { display: flex; align-items: center; min-height: 44px; font-size: 14.5px; color: #DCE2EF; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .ft-address:hover { color: #fff; }
  .ft-soc:hover { background: #1C2A4A; color: #FFBE2E; }
  a.ft-row:hover { background: #1C2A4A; }
  .ft-links a:hover, .ft-cnpj:hover { color: #FFBE2E; }
}
.ft-mark:focus-visible, .ft-address:focus-visible, .ft-soc:focus-visible, .ft-row:focus-visible, .ft-links a:focus-visible, .ft-cnpj:focus-visible {
  outline: 2px solid #FFBE2E; outline-offset: 2px; border-radius: 10px;
}
a.ft-row:active, .ft-soc:active { transform: scale(.98); }
/* CNPJ da barra final: é o link para conferir na Receita */
.ft-cnpj { color: inherit; text-decoration: underline; text-decoration-color: rgba(170,181,206,.45); text-underline-offset: 3px; }

/* barra final: um tom mais escuro */
.ft-bottom { margin-top: 12px; background: #070B14; }
.ft-bottom-in {
  max-width: 1168px; margin: 0 auto; padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: #AAB5CE;
}
.ft-bottom-in p { margin: 0; }
.ft-id b { color: #F4F6FB; }
.ft-id-legal { white-space: nowrap; }
.ft-bottom-in .ft-warn { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #DCE2EF; }
/* "18+": marca que se entende sem ler (vermelho do galo, chapado) */
.ft-18 {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #C62828; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.2px;
}
.ft-id, .ft-dev { font-size: 12.5px; }
.footer-brand { color: #FFBE2E; font-weight: 700; }

@media (max-width: 600px) {   /* razão social na linha de baixo, sem o "·" */
  .ft-sep { display: none; }
  .ft-id-legal { display: block; white-space: normal; }
}

/* celular: tudo centralizado (a pedido do usuário, 2026-11-08); no PC segue em colunas */
@media (max-width: 767px) {
  .ft-main, .ft-bottom-in { text-align: center; }
  .ft-brand, .ft-col { display: flex; flex-direction: column; align-items: center; }
  /* logo e nome da adega encostados na esquerda (a pedido); o resto segue centralizado */
  .ft-brand .ft-mark { align-self: flex-start; text-align: left; }
  .ft-brand .ft-address { margin-top: 26px; }   /* uma linha de respiro entre a marca e o endereço */
  .ft-address { display: block; text-align: center; }
  .ft-address svg { display: inline-block; vertical-align: -4px; margin: 0 6px 0 0; }
  .ft-row { width: 100%; justify-content: center; }
  .ft-links, .ft-social { justify-content: center; }
  .ft-links { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ft-bottom-in { justify-items: center; }
  /* 18+ ao lado do aviso (o grupo fica no centro), barra mais baixa */
  .ft-bottom-in { padding-top: 14px; gap: 3px; }
  .ft-bottom-in .ft-warn { max-width: 360px; gap: 10px; margin-bottom: 4px; text-align: left; }
  .ft-18 { width: 32px; height: 32px; font-size: 11.5px; }
}

/* PC: 3 colunas — marca e endereço · atendimento e pagamento · institucional */
@media (min-width: 768px) {
  .ft-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 40px; padding: 48px 24px 16px; }
  .ft-title { font-size: 16px; }
  .ft-title--pc { display: block; }
  .ft-short { display: none; }
  .ft-long { display: inline; }
  .ft-logo { width: 64px; height: 64px; }
  .ft-mark-txt b { font-size: 36px; }
  .ft-row-txt { flex-direction: column; align-items: flex-start; }
  .ft-row-txt small { font-size: 14px; }
  .ft-links { flex-direction: column; flex-wrap: nowrap; }
  .ft-links a { min-height: 36px; font-size: 15px; }
  .ft-bottom-in {
    grid-template-columns: 1fr auto; column-gap: 24px; align-items: center;
    padding: 20px 24px 24px;
  }
  .ft-bottom-in .ft-warn { grid-column: 1; grid-row: 1; margin-bottom: 2px; }
  .ft-id { grid-column: 1; grid-row: 2; }
  .ft-dev { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .ft-main { gap: 64px; }
}

/* ── CAROUSEL BUTTONS ── */
.carousel-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--border);
  color: var(--text2); font-size: 22px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.carousel-btn:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(240,165,0,.08); transform: scale(1.07);
}

/* ── CAROUSEL DOTS ── */
.carousel-dots {
  position: absolute; bottom: 10px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 5px; z-index: 5;
}
.cdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.28); border: none;
  cursor: pointer; transition: width .25s, background .25s, border-radius .25s; padding: 0;
}
.cdot.active { width: 20px; border-radius: 3px; background: var(--gold); }

/* ── CAROUSEL RESPONSIVE ── */
@media (min-width: 640px) {
  .carousel-slide { height: 300px; }
  .slide-badge { width: 96px; height: 96px; font-size: 10px; }
  .slide-badge strong { font-size: 22px; }
  .slide-cta { font-size: 12px; padding: 9px 18px; }
  .slide-content { padding: 0 36px; gap: 20px; }
}
@media (min-width: 1024px) {
  .carousel-slide { height: 400px; }
  .slide-content { padding: 0 52px; gap: 28px; }
  .slide-badge { width: 120px; height: 120px; font-size: 12px; }
  .slide-badge strong { font-size: 28px; }
  .carousel-btn { width: 46px; height: 46px; font-size: 26px; }
  .slide-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .slide-desc { font-size: 13px; margin-bottom: 20px; }
  .slide-cta { font-size: 13px; padding: 10px 22px; }
}
@media (max-width: 460px) {
  .slide-deco { display: none; }
  .promo-carousel { gap: 0; padding: 0; }   /* mantém full-bleed */
  .slide-content { padding: 0 16px; }
}

/* ── DESKTOP PRODUCT GRID REFINEMENTS ── */
@media (min-width: 1024px) {
  .products-section { padding-bottom: 80px; }
  .product-card:hover {
    box-shadow:
      0 0 0 1px rgba(240,165,0,.45),
      0 24px 60px rgba(0,0,0,.55),
      0 6px 28px rgba(240,165,0,.22);
  }
}

/* ── DESKTOP SEARCH REFINEMENT ── */
@media (min-width: 1024px) {
  .search-bar { padding: 10px 16px; }
  .search-input { font-size: 15px; padding: 14px 20px 14px 48px; }
}

/* ── WHISKY SPLASH EFFECT ── */
@keyframes whiskyDrop {
  0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.08) rotate(var(--rot)); opacity: 0; }
}
@keyframes whiskyRing {
  0%   { transform: translate(-50%,-50%) scale(.25); opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(2.0);  opacity: 0; }
}
@keyframes whiskyFlash {
  0%,100% { opacity: 0; }
  30%      { opacity: 1; }
}
.whisky-drop {
  position: fixed; pointer-events: none; z-index: 9999;
  border-radius: 50%;
  animation: whiskyDrop var(--dur, 600ms) cubic-bezier(.15,.8,.35,1) forwards;
}
.whisky-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  border-radius: 50%;
  border: 3px solid rgba(240,165,0,.75);
  animation: whiskyRing 520ms ease-out forwards;
}
.whisky-flash {
  position: fixed; pointer-events: none; z-index: 9997;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,80,.7) 0%, rgba(240,165,0,0) 70%);
  animation: whiskyFlash 280ms ease-out forwards;
}

/* ── PRODUCT VARIANTS ── */
.product-price-from { font-size: 11px; color: var(--text3); display: block; line-height: 1.2; }
.modal-variants { margin: 14px 0 6px; }
.modal-variant-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #fff; margin-bottom: 8px; }
.modal-variant-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mvl-row {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px 10px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.07);
  transition: border-color .18s, background .18s;
  gap: 4px;
}
.mvl-row.mvl-row-active {
  border-color: var(--gold); background: rgba(240,165,0,.08);
}
.mvl-size { font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.mvl-price { color: var(--text3); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.mvl-qty-ctrl { display: flex; align-items: center; gap: 7px; }
.mvl-qty { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }
.mvl-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg2); border: 1.5px solid rgba(255,255,255,.12);
  color: var(--text1); font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.mvl-btn:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.mvl-row-active .mvl-price { color: var(--gold); }

/* ── MODAL IMAGE SWIPER ── */
.modal-img-swiper {
  position: relative; overflow: hidden;
  background: var(--bg3);
  aspect-ratio: 4/3; border-radius: 16px 16px 0 0;
}
.swiper-track {
  display: flex; height: 100%;
  transition: transform .36s cubic-bezier(.25,1,.5,1);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.swiper-track.swiping { cursor: grabbing; transition: none; }
.swiper-slide {
  min-width: 100%; height: 100%;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.swiper-slide img {
  width: 100%; height: 100%;
  object-fit: contain; display: block; pointer-events: none;
  background: var(--bg3);
}
.swiper-slide-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
}
.swiper-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(0,0,0,.42); border: none; color: #fff;
  font-size: 20px; font-weight: 700;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s; line-height: 1;
}
.swiper-arr-l { left: 8px; }
.swiper-arr-r { right: 8px; }
.swiper-arr:hover { background: rgba(0,0,0,.72); }
.swiper-dots-bar {
  position: absolute; bottom: 8px;
  left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  pointer-events: none;
}
.swiper-dots-bar .sdot { pointer-events: auto; }
.sdot {
  width: 7px; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.38); border: none; cursor: pointer; padding: 0;
  transition: background .22s, width .22s;
}
.sdot.active { background: var(--gold); width: 18px; }

/* Desktop: swiper same dims as .modal-img-wrap */
@media (min-width: 600px) {
  .modal-img-swiper {
    width: 300px; flex-shrink: 0;
    aspect-ratio: unset; align-self: stretch;
    border-radius: 16px 0 0 16px;
  }
  /* No gradient overlay on desktop — it was hiding the image and the next arrow */
  .modal-img-swiper::after { display: none; }
  .swiper-slide img { object-fit: cover; }
  /* Track fills swiper via absolute so height resolves independently of flex */
  .modal-img-swiper .swiper-track {
    position: absolute; inset: 0; height: auto;
    display: flex; flex-direction: row;
  }
  .modal-img-swiper .swiper-slide { min-width: 100%; height: 100%; }
}
/* Mobile */
@media (max-width: 600px) {
  .modal-img-swiper { height: 220px; aspect-ratio: unset; border-radius: 0; }
}

/* ── PERFORMANCE: desativa animações custosas em dispositivos fracos ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE CAROUSEL — Burger King style
   Estas regras ficam no FINAL para garantir que vençam
   as regras base definidas anteriormente no arquivo.
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .promo-carousel {
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
  .carousel-wrapper {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .promo-carousel .carousel-btn {
    display: none !important;
  }
}
@media (max-width: 460px) {
  .promo-carousel { padding: 0 !important; gap: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ENDEREÇO DE ENTREGA — seletor (assets/js/address.js); o botão "Entregar em"
   fica no cabeçalho (.hdr-addr, junto do CSS do HEADER)
   ══════════════════════════════════════════════════════════════════════════ */

/* toasts acima dos modais (checkout e endereço) */
.toast-container { z-index: 1400; }

/* ── seletor (mesmo fluxo do app cliente do RubiFood, visual da adega) ── */
.as-overlay {
  position: fixed; inset: 0; z-index: 1150;
  display: flex; align-items: stretch; justify-content: center;
  background: #0b1222;
  opacity: 0; transition: opacity .2s;
}
.as-overlay.show { opacity: 1; }
.as-overlay[hidden], .as-overlay [hidden] { display: none !important; }
.as-panel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #0C1428; color: var(--text);   /* chapado, no tom do cabeçalho e do rodapé */
}
@media (min-width: 768px) {
  .as-overlay { align-items: center; padding: 16px 24px; background: rgba(3,6,14,.74); }
  .as-panel {
    width: min(694px, calc(100vw - 48px));
    height: min(calc(100vh - 32px), max(520px, 84vh));
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);   /* taste-skill-ignore: janela que flutua sobre a loja */
    transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.2,.9,.3,1);
  }
  .as-overlay.show .as-panel { transform: none; }
}
/* X de fechar no canto do painel — só no PC e fora da tela inicial (lá já tem a seta de fechar).
   No celular a tela é inteira e o topo já tem a busca/voltar. */
.as-x { display: none; }
@media (min-width: 768px) {
  .as-x {
    position: absolute; top: 16px; right: 16px; z-index: 20;
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text2);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  }
  .as-x:hover, .as-x:focus-visible { background: rgba(240,165,0,.12); border-color: rgba(240,165,0,.4); color: var(--gold); outline: none; }
  .as-x svg { width: 20px; height: 20px; }
}

/* cada tela ocupa o painel inteiro; troca com fade (como o app no navegador) */
.as-screen { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.as-screen.as-enter { animation: asFade .2s ease; }
@keyframes asFade { from { opacity: 0; } }
.as-content {
  width: 100%; max-width: 520px; min-height: 100%; margin: 0 auto;
  padding: 18px 16px calc(40px + env(safe-area-inset-bottom));
}
.as-content-home { padding-top: 12px; }
@media (min-width: 768px) { .as-content-home { max-width: 694px; padding: 12px 30px 36px; } }

.as-topbar { height: 44px; display: flex; align-items: center; }
.as-icon-btn {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold); transition: background .15s;
}
.as-icon-btn:hover, .as-icon-btn:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.as-icon-btn svg { width: 28px; height: 28px; }
.as-back { margin-left: -8px; }
/* fechar (1ª tela): botão redondo chapado, fácil de achar */
.as-close { background: #15203A; }
.as-close svg { width: 24px; height: 24px; }
.as-close:hover, .as-close:focus-visible { background: #1C2A4A; }
@media (min-width: 768px) { .as-close { margin: 0 -12px 0 auto; color: var(--text2); } }

/* botão principal das outras telas (número, detalhes): dourado chapado, sem degradê nem brilho */
.as-primary {
  width: 100%; height: 52px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #F0A500;
  color: #1a1100; font-size: 16px; font-weight: 800;
  transition: transform .12s, opacity .15s, background-color .15s;
}
.as-primary:hover:not(:disabled) { background: #FFB82E; }
.as-primary:active:not(:disabled) { transform: scale(.98); }
.as-primary:disabled { opacity: .38; cursor: not-allowed; }
.as-primary:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }
.as-primary svg { width: 20px; height: 20px; }

.as-spinner {
  display: inline-block; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; opacity: .75;
  animation: asSpin .7s linear infinite;
}
@keyframes asSpin { to { transform: rotate(360deg); } }

/* 1 — onde receber + endereços salvos (refeito em 2026-11-08; o anterior está na tag endereco-antes-2026-11-08):
   pino dourado chapado com o galo, flutuando sobre uma sombra lisa; sem a "cidade" de barras nem pininhos soltos */
.as-hero { position: relative; width: 120px; height: 112px; margin: 2px auto 0; }
.as-ground {
  position: absolute; left: 50%; bottom: 6px; width: 56px; height: 10px; margin-left: -28px; border-radius: 50%;
  background: #15203A; animation: asShadow 3s ease-in-out infinite;
}
.as-bigpin {
  position: absolute; left: 50%; bottom: 22px; width: 66px; height: 66px; margin-left: -33px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #F0A500;
  animation: asFloat 3s ease-in-out infinite;
}
.as-bigpin-in {
  position: absolute; inset: 6px; border-radius: 50%; overflow: hidden; transform: rotate(45deg);
  display: grid; place-items: center; background: #0B1222;
}
.as-bigpin-in img { width: 100%; height: 100%; object-fit: cover; }
.as-bigpin-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
@keyframes asFloat { 50% { translate: 0 -7px; } }
@keyframes asShadow { 50% { transform: scale(.72); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .as-bigpin, .as-ground { animation: none; } }

.as-title { margin: 8px 0 0; font-size: 20px; line-height: 26px; font-weight: 800; text-align: center; letter-spacing: -.2px; }
.as-sub { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #AAB5CE; text-align: center; }
.as-search-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 56px; margin-top: 20px; padding: 0 16px;
  border-radius: 14px; background: #15203A; border: 0;
  color: #AAB5CE; font-size: 16px; text-align: left; transition: background-color .15s;
}
.as-search-btn svg { width: 23px; height: 23px; color: var(--gold); flex-shrink: 0; }
.as-search-btn:hover { background: #1C2A4A; }
.as-search-btn:focus-visible { background: #1C2A4A; outline: 2px solid var(--gold); outline-offset: 2px; }
.as-limit { margin-top: 12px; color: #f87171; font-size: 13px; line-height: 18px; }

.as-saved-title { margin: 26px 0 10px; font-size: 15px; font-weight: 700; color: #F4F6FB; }
.as-cards { position: relative; margin-top: 0; user-select: none; -webkit-user-select: none; }
.as-cards.sortable .as-card-wrap { touch-action: none; }
.as-card-wrap { position: relative; height: 92px; margin-bottom: 12px; transition: transform .12s ease; }
.as-cards:not(.reordering) .as-card-wrap { transition: none; }
.as-card-wrap.dragging { z-index: 20; transition: none; }
.as-card-wrap.dragging.settling { transition: transform .12s ease; }
/* cartão: um tom acima, sem borda parada; o escolhido ganha o contorno dourado */
.as-card {
  height: 100%; display: flex; align-items: center; padding: 0 6px 0 12px;
  border-radius: 14px; background: #15203A; border: 2px solid transparent;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.as-card:hover { background: #1A2747; }
.as-card.selected { border-color: var(--gold); background: #1A2747; }
.as-card-wrap.dragging .as-card { border-color: var(--gold); box-shadow: 0 10px 28px rgba(0,0,0,.5); cursor: grabbing; }   /* taste-skill-ignore: cartão sendo arrastado flutua */
.as-priority {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: rgba(255,255,255,.08);
  color: var(--text2); font-size: 14px; font-weight: 800;
}
.as-priority.primary { background: var(--gold); color: #1a1100; }
.as-card-actions { display: flex; align-items: center; height: 100%; }
.as-card-action, .as-card-more {
  width: 36px; height: 100%; flex-shrink: 0; display: grid; place-items: center; color: var(--gold);
}
.as-card-action svg, .as-card-more svg { width: 22px; height: 22px; }
.as-card-action:hover, .as-card-more:hover, .as-card-action:focus-visible, .as-card-more:focus-visible { color: var(--gold-l); outline: none; }
.as-card-press {
  flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px; text-align: left; color: var(--text); border-radius: 10px;
}
.as-card-press:focus-visible { outline: 2px solid rgba(240,165,0,.6); outline-offset: -4px; }
.as-card-press span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-card-title { font-size: 16px; line-height: 21px; font-weight: 700; }
.as-card-line { margin-top: 2px; font-size: 14px; line-height: 19px; color: #DCE2EF; }
.as-card-loc { margin-top: 1px; font-size: 13px; line-height: 18px; color: #AAB5CE; }
.as-card-handle { width: 28px; height: 100%; flex-shrink: 0; display: grid; place-items: center; color: rgba(168,180,207,.4); cursor: grab; }
.as-card-handle svg { width: 22px; height: 22px; }
.as-cards:not(.sortable) .as-card-handle { visibility: hidden; }

/* 2 — busca */
.as-searchbox {
  display: flex; align-items: center; height: 60px; padding: 0 12px 0 8px;
  border-radius: 12px; background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.12);
  transition: border-color .15s, box-shadow .15s;
}
.as-searchbox:focus-within { border-color: rgba(240,165,0,.6); box-shadow: 0 0 0 3px rgba(240,165,0,.08); }
.as-searchbox .as-back { margin-left: 0; width: 40px; }
.as-search-input {
  flex: 1; min-width: 0; height: 56px; padding: 0 6px; background: none; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: 16px;   /* 16px: o iPhone não dá zoom */
}
.as-search-input::placeholder { color: var(--text3); }
.as-searchbox-end { display: flex; align-items: center; justify-content: flex-end; min-width: 32px; color: var(--text3); }
.as-searchbox-end .as-spinner { width: 18px; height: 18px; }
.as-clear { width: 32px; height: 48px; display: flex; align-items: center; justify-content: flex-end; color: var(--text3); }
.as-clear svg { width: 19px; height: 19px; }
.as-clear:hover { color: var(--text2); }
.as-attribution { display: flex; align-items: center; justify-content: flex-end; gap: 5px; padding: 10px 10px 5px; color: var(--text3); font-size: 12px; }
.as-attribution img { width: 18px; height: 18px; object-fit: contain; }
.as-prediction {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; min-height: 70px; padding: 13px 18px;
  text-align: left; color: var(--text); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s;
}
.as-prediction:hover:not(:disabled), .as-prediction:focus-visible { background: rgba(255,255,255,.04); outline: none; }
.as-prediction:disabled { cursor: default; }
.as-prediction-ico { width: 25px; height: 25px; flex-shrink: 0; display: grid; place-items: center; color: var(--text3); }
.as-prediction-ico svg { width: 25px; height: 25px; }
.as-prediction-ico .as-spinner { color: var(--gold); }
.as-prediction-txt { min-width: 0; }
.as-prediction-txt b { display: block; font-size: 16px; line-height: 21px; font-weight: 500; color: var(--text2); }
.as-prediction-txt small { display: block; margin-top: 3px; font-size: 14px; line-height: 19px; color: var(--text3); }
.as-error { padding: 15px 18px 5px; color: #f87171; font-size: 14px; line-height: 20px; }
.as-empty { padding: 15px 18px 5px; color: var(--text3); font-size: 14px; }
.as-map-fallback {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; min-height: 70px; margin-top: 8px; padding: 13px 18px;
  text-align: left; border-radius: 12px; transition: background .15s;
}
.as-map-fallback:hover, .as-map-fallback:focus-visible { background: rgba(255,255,255,.04); outline: none; }
.as-map-fallback > svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--text3); }
.as-map-fallback b { display: block; font-size: 16px; line-height: 21px; font-weight: 600; color: var(--gold); }
.as-map-fallback small { display: block; margin-top: 3px; font-size: 14px; line-height: 19px; color: var(--text3); }

/* 3 — número */
.as-number-title { margin: 3px 12px 22px; font-size: 17px; line-height: 23px; font-weight: 600; }
.as-number-summary { min-height: 22px; margin: 0 12px; text-align: center; font-size: 14px; line-height: 20px; color: var(--text3); }
.as-number-field { display: block; width: 140px; margin: 30px auto 0; }
.as-number-field span { display: block; margin: 0 4px 4px; font-size: 15px; color: var(--text3); }
.as-number-input {
  width: 140px; height: 48px; padding: 0 10px; border-radius: 10px; outline: none;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.14);
  color: var(--text); font-family: inherit; font-size: 17px; font-weight: 700; text-transform: uppercase;
  transition: border-color .15s, box-shadow .15s;
}
.as-number-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,165,0,.12); }
.as-no-number {
  display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 34px auto 0; padding: 9px 16px;
  border-radius: 10px; border: 1px solid rgba(240,165,0,.7); text-align: left; transition: background .15s;
}
.as-no-number:hover, .as-no-number:focus-visible { background: rgba(240,165,0,.07); outline: none; }
.as-no-number > svg { width: 23px; height: 23px; flex-shrink: 0; color: var(--gold); }
.as-no-number b { display: block; font-size: 17px; line-height: 23px; color: var(--text2); }
.as-no-number small { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--text3); }
.as-number-submit { margin-top: 26px; }

/* modal "Usar minha localização atual" */
.as-modal-backdrop {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(3,6,14,.62); animation: asFade .18s ease;
}
.as-modal-card {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center;
  padding: 26px 22px 18px; border-radius: 16px; text-align: center;
  background: #131d35; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.as-modal-icon { width: 66px; height: 66px; margin-bottom: 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(240,165,0,.12); color: var(--gold); }
.as-modal-icon svg { width: 32px; height: 32px; }
.as-modal-title { margin-bottom: 10px; font-size: 19px; line-height: 25px; font-weight: 800; }
.as-modal-text { margin-bottom: 8px; font-size: 15px; line-height: 22px; color: var(--text2); }
.as-modal-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--text2); }
.as-modal-status .as-spinner { width: 18px; height: 18px; color: var(--gold); }
.as-modal-status svg { width: 18px; height: 18px; flex-shrink: 0; color: #f87171; }
.as-modal-status .err { color: #f87171; }
.as-modal-actions { width: 100%; margin-top: 20px; }
.as-modal-ghost { width: 100%; height: 46px; margin-top: 6px; color: var(--text3); font-size: 15px; font-weight: 700; }
.as-modal-ghost:hover { color: var(--text2); }

/* 4 — mapa */
.as-mapscreen { overflow: hidden; background: #15203a; }
.as-map-canvas { position: absolute; inset: 0; }
.as-map-error {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: 30px; background: #111a30; color: var(--text2); font-size: 15px; line-height: 21px; text-align: center;
}
.as-map-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 76px;
  display: flex; align-items: center; justify-content: center; padding: 12px 20px 0;
  background: rgba(11,18,34,.93); border-bottom: 1px solid rgba(255,255,255,.05);
}
.as-map-header .as-back { position: absolute; left: 20px; bottom: 8px; margin: 0; }
.as-map-header-title { margin-top: 10px; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text2); }
/* pino preso na coordenada (OverlayView): a ponta fica no ponto (0,0) da caixa */
.as-pin-ov { position: absolute; width: 0; height: 0; }
.as-bubble {
  position: absolute; left: 0; bottom: 70px; transform: translateX(-50%);
  min-width: 155px; padding: 13px 16px; border-radius: 10px; text-align: center; white-space: nowrap; pointer-events: none;
  background: rgba(11,18,34,.96); border: 1px solid rgba(240,165,0,.4); box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: opacity .15s;
}
.as-pin-ov.dragging .as-bubble { opacity: 0; }
.as-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg);
}
.as-bubble b { display: block; font-size: 15px; font-weight: 600; }
.as-bubble span { display: block; margin-top: 2px; font-size: 12px; color: var(--text2); }
.as-pin-hit {
  position: absolute; left: -30px; bottom: -8px; width: 60px; height: 72px; padding: 0 0 8px;
  display: flex; align-items: flex-end; justify-content: center; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.as-pin-hit:focus { outline: none; }
.as-pin-hit:focus-visible .as-pin-ring { opacity: .9; transform: none; }
.as-pin-ov.dragging .as-pin-hit { cursor: grabbing; }
.as-center-pin {
  position: relative; display: block; width: 40px; height: 52px; transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.as-center-pin svg { display: block; width: 100%; height: 100%; }
/* segurando: o anel dourado fecha em volta da cabeça do pino; arrastando: o pino sobe e mostra o ponto exato */
.as-pin-ring {
  position: absolute; left: 50%; bottom: 12px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
  border: 2.5px solid var(--gold); background: rgba(240,165,0,.12); opacity: 0; transform: scale(.45); pointer-events: none;
}
.as-pin-ov.holding .as-pin-ring { animation: asHold .32s ease-out forwards; }
@keyframes asHold { to { opacity: .95; transform: none; } }
.as-pin-ov.dragging .as-pin-ring { opacity: 0; transition: opacity .1s; }
.as-pin-ov.dragging .as-center-pin { transform: translateY(-18px) scale(1.08); }
.as-center-shadow {
  position: absolute; left: -7px; top: -3px; width: 14px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,.5); pointer-events: none; transition: transform .2s, opacity .2s;
}
.as-pin-ov.dragging .as-center-shadow { transform: scale(1.7); opacity: .55; }
.as-pin-dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: var(--gold-l); box-shadow: 0 0 0 3px rgba(11,18,34,.7); opacity: 0; transition: opacity .15s;
}
.as-pin-ov.dragging .as-pin-dot { opacity: 1; }
.as-recenter {
  position: absolute; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 6; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; white-space: nowrap;
  background: #131d35; border: 1px solid rgba(240,165,0,.45); box-shadow: 0 3px 12px rgba(0,0,0,.45);
  color: var(--text); font-size: 14px; font-weight: 700;
}
.as-recenter svg { width: 17px; height: 17px; color: var(--gold); }
.as-locate {
  position: absolute; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 6;
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: #131d35; border: 1px solid rgba(255,255,255,.12); color: var(--gold); box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.as-locate svg { width: 24px; height: 24px; }
.as-maptype {
  position: absolute; top: 86px; right: 12px; z-index: 6;
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 19px;
  background: #131d35; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2px 8px rgba(0,0,0,.4);
  color: var(--text); font-size: 14px; font-weight: 700;
}
.as-maptype svg { width: 18px; height: 18px; color: var(--gold); }
.as-maptype[aria-pressed="true"] { border-color: rgba(240,165,0,.5); }
.as-map-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 16px 20px calc(22px + env(safe-area-inset-bottom)); background: rgba(11,18,34,.94);
}
.as-map-footer .as-primary { max-width: 500px; margin: 0 auto; }

/* 5 — detalhes */
.as-details .as-content { padding-top: 12px; }
.as-details .as-topbar { height: 40px; }
.as-det-label { margin-top: 2px; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--text); }
.as-det-secondary { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text3); }
.as-fields-row { display: flex; gap: 14px; margin-top: 26px; }
.as-fields-row .as-field { flex: 1; min-width: 0; }
.as-field-full { margin-top: 26px; }
.as-field-ref { margin-top: 28px; }
.as-field label, .as-field-label { display: block; font-size: 12px; line-height: 18px; color: var(--text3); }
.as-field input {
  width: 100%; height: 38px; padding: 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.18);
  border-radius: 0; outline: none; color: var(--text); font-family: inherit; font-size: 16px;
  transition: border-color .15s;
}
.as-field input:focus { border-bottom-color: var(--gold); }
.as-field input::placeholder { color: rgba(238,242,255,.25); }
.as-field small { display: block; margin-top: 7px; font-size: 12px; line-height: 17px; color: var(--text3); }
.as-coord { display: flex; align-items: center; gap: 6px; min-height: 38px; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 14px; color: var(--text); }
.as-coord svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }
.as-fav-title { margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--text2); }
.as-fav-options { display: flex; gap: 20px; margin-top: 14px; }
.as-fav-btn {
  flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid transparent;
  color: var(--text2); font-size: 16px; transition: border-color .15s, background .15s, color .15s;
}
.as-fav-btn svg { width: 22px; height: 22px; }
.as-fav-btn[aria-pressed="true"] { border-color: var(--gold); background: rgba(240,165,0,.1); color: var(--gold-l); }
.as-save { margin-top: 21px; }

/* endereço salvo antes da trava de área e que fica fora dela: marcado e sem seleção */
.as-card.out { border-color: rgba(248,113,113,.35); background: rgba(239,68,68,.06); }
.as-card.out .as-card-title, .as-card.out .as-card-line { opacity: .65; }
.as-card.out .as-card-loc { display: flex; align-items: center; gap: 5px; color: #FCA5A5; font-weight: 700; }
.as-card.out .as-card-loc svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── AVISO "FORA DA ÁREA DE ENTREGA" (assets/js/address.js → showAreaBlock) ──
   mapinha animado: a área pulsa em volta da adega, o pino do cliente cai FORA dela e treme */
.as-area {
  position: absolute; inset: 0; z-index: 40; display: flex; padding: 18px; overflow-y: auto;
  background: rgba(5,9,20,.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: asFade .2s ease;
}
.ab-card {
  margin: auto; width: 100%; max-width: 420px; padding: 22px 22px 20px; text-align: center;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.09);
  background: radial-gradient(120% 70% at 50% 0%, rgba(239,68,68,.10), transparent 60%), linear-gradient(180deg, #17223f, #0e172c);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation: abIn .42s cubic-bezier(.2,.9,.3,1.15) both;
}
.ab-art { position: relative; width: 100%; max-width: 300px; aspect-ratio: 260 / 150; margin: -4px auto 10px; }
.ab-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ab-streets path { fill: none; stroke: #fff; stroke-width: 1; opacity: .07; }
.ab-zone {
  fill: rgba(240,165,0,.10); stroke: rgba(240,165,0,.8); stroke-width: 1.6; stroke-dasharray: 5 5;
  transform-box: fill-box; transform-origin: center; animation: abSpin 22s linear infinite;
}
.ab-zone-pulse {
  fill: none; stroke: rgba(240,165,0,.55); stroke-width: 2;
  transform-box: fill-box; transform-origin: center; animation: abPulse 2.4s ease-out infinite;
}
.ab-zone-lbl { fill: var(--gold); font-size: 8.5px; font-weight: 800; letter-spacing: 1.4px; }
.ab-route {
  fill: none; stroke: #F87171; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; opacity: 0;
  animation: abShow .35s .8s forwards, abFlow 1.1s linear 1.15s infinite;
}
.ab-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: abDrop .7s .2s cubic-bezier(.3,1.35,.5,1) both, abShake .45s 1.05s ease-in-out 2; }
.ab-pin path { fill: #EF4444; stroke: #0b1222; stroke-opacity: .35; }
.ab-pin circle { fill: #0b1222; }
.ab-pin-shadow { fill: rgba(0,0,0,.5); transform-box: fill-box; transform-origin: center; animation: abShadow .7s .2s both; }
.ab-xbadge { transform-box: fill-box; transform-origin: center; animation: abPop .38s 1s cubic-bezier(.3,1.7,.5,1) both; }
.ab-xbadge circle { fill: #EF4444; stroke: #0e172c; stroke-width: 2.4; }
.ab-xbadge path { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ab-store {
  position: absolute; left: 36.54%; top: 54.67%; width: 42px; height: 42px; transform: translate(-50%, -50%);
  display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: #0b1222; border: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(240,165,0,.14), 0 6px 18px rgba(0,0,0,.5);
}
.ab-store img { width: 100%; height: 100%; object-fit: cover; }
.ab-store svg { width: 24px; height: 30px; }
.ab-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.32); color: #FCA5A5;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ab-tag svg { width: 14px; height: 14px; }
.ab-title { margin-top: 12px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--text); }
.ab-text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text2); }
.ab-text b { color: var(--text); white-space: nowrap; }
.ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ab-stats > div { padding: 10px 12px; text-align: left; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.ab-stats small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.ab-stats b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; color: var(--gold-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-stats b.no { color: #F87171; }
.ab-sub { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text3); }
.ab-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ab-ghost {
  height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--text);
  font-size: 15px; font-weight: 700; transition: border-color .15s, background .15s, color .15s;
}
.ab-ghost:hover, .ab-ghost:focus-visible { border-color: rgba(240,165,0,.5); background: rgba(240,165,0,.08); color: var(--gold-l); outline: none; }
.ab-ghost svg { width: 20px; height: 20px; color: var(--gold); }
/* textos entram em sequência, depois da animação do mapinha começar */
.ab-tag, .ab-title, .ab-text, .ab-stats, .ab-sub, .ab-actions { animation: abUp .42s both; }
.ab-tag { animation-delay: .3s; } .ab-title { animation-delay: .38s; } .ab-text { animation-delay: .46s; }
.ab-stats { animation-delay: .54s; } .ab-sub { animation-delay: .6s; } .ab-actions { animation-delay: .66s; }
@keyframes abIn { from { opacity: 0; transform: translateY(22px) scale(.95); } }
@keyframes abUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abPulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.34); opacity: 0; } }
@keyframes abDrop { 0% { transform: translateY(-48px); opacity: 0; } 50% { opacity: 1; } 72% { transform: translateY(3px); } 88% { transform: translateY(-2px); } 100% { transform: none; opacity: 1; } }
@keyframes abShadow { 0% { transform: scale(.3); opacity: 0; } 72% { transform: scale(1.15); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes abShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes abPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes abShow { to { opacity: 1; } }
@keyframes abFlow { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) {
  .as-area, .as-area * { animation: none !important; }
  .ab-route { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEU PERFIL — painel aberto pelo ícone do cabeçalho (assets/js/profile.js)
   Mesma linguagem do carrinho e do checkout. A tela é da pessoa: o avatar e o nome são o que mais aparece, os atalhos vêm
   logo abaixo e o formulário só abre em "Editar dados" (quem falta preencher já chega com ele aberto). Degrau de tom em vez
   de borda, ícone dourado sem azulejo, âmbar cheio só no "Salvar" e o que é legal fica quieto no rodapé da tela.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-overlay {
  position: fixed; inset: 0; z-index: 1150;
  display: flex; align-items: stretch; justify-content: flex-end;
  background: rgba(3,6,14,.7); opacity: 0; transition: opacity 200ms ease;
}
.pf-overlay.show { opacity: 1; }
.pf-overlay[hidden], .pf-overlay [hidden] { display: none !important; }
.pf-panel {
  --c-ground: #0E1528; --c-raised: #18223B; --c-ticket: #1F2B49; --c-ink: #F5F7FF; --c-muted: #B4BED6;
  --c-amber: #D97706; --c-amber-d: #C26A05;
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-expo: cubic-bezier(.16,1,.3,1); --ease-travel: cubic-bezier(.76,0,.24,1);
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--c-ground); color: var(--c-ink);
  transform: translateX(100%); transition: transform 240ms var(--ease-travel);
}
.pf-overlay.show .pf-panel { transform: none; transition: transform 380ms var(--ease-out); }
/* computador: gaveta pela direita, que flutua de verdade */
@media (min-width: 768px) { .pf-panel { width: 420px; box-shadow: -10px 0 44px rgba(0,0,0,.55); } }
.pf-panel :focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.pf-panel button, .pf-panel a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pf-scroll {
  display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.pf-scroll::-webkit-scrollbar { display: none; }
.pf-scroll > * { flex: none; }

/* topo: o galo da casa + nome da adega + título */
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-brand { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: #0A0F1D; border: 1.5px solid rgba(240,165,0,.65); }
.pf-brand img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pf-top-txt { flex: 1; min-width: 0; }
.pf-kicker { display: block; font-family: 'Dancing Script', cursive; font-size: 17px; font-weight: 700; line-height: 1.05; color: var(--gold); }
.pf-heading { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--c-ink); }
.pf-close {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--c-ink);
  transition: background-color 180ms ease, transform 240ms var(--ease-out);
}
.pf-close svg { width: 20px; height: 20px; }
.pf-close:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .pf-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); } }

/* a pessoa: é o que mais aparece na tela */
.pf-hero { display: flex; flex-direction: column; align-items: center; padding: 18px 0 18px; text-align: center; }
.pf-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 29px; font-weight: 800; letter-spacing: -.01em; color: var(--c-muted); background: #2A3756;
}
.pf-avatar svg { width: 38px; height: 38px; }
.pf-avatar.has-name { color: #1A1100; background: var(--gold); }
.pf-hello { max-width: 100%; margin-top: 12px; font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.pf-sub { max-width: 100%; margin-top: 3px; font-size: 15px; line-height: 1.35; color: var(--c-muted); font-variant-numeric: tabular-nums; text-wrap: balance; }
.pf-ready { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 13px; font-style: normal; font-weight: 700; color: #86EFAC; }
.pf-ready svg { width: 15px; height: 15px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; margin-top: 13px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--c-ink); font-size: 14px; font-weight: 700;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.pf-chip svg { width: 15px; height: 15px; color: var(--c-muted); }
.pf-chip:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .pf-chip:hover { background: rgba(255,255,255,.14); } }

/* o que falta (só enquanto falta algo) */
.pf-progress { margin-bottom: 12px; padding: 14px; border-radius: 16px; background: var(--c-ticket); }
.pf-progress b { display: block; font-size: 16px; font-weight: 800; }
.pf-progress small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.pf-bars { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pf-bars > span { flex: none; }
.pf-bar-track { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pf-bar { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.14); }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c-ink); transform: scaleX(0); transform-origin: left center; }
.pf-bar i.on { transform: none; }

/* meus dados: abre em "Editar dados" e não tem botão apagado (salvar sem mudar nada só fecha) */
.pf-form { margin-bottom: 12px; padding: 14px; border-radius: 16px; background: var(--c-raised); }
.pf-field { margin-bottom: 12px; }
.pf-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.pf-field input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; outline: none; box-sizing: border-box;
  background: var(--c-ground); border: 1.5px solid rgba(255,255,255,.12);
  color: var(--c-ink); font-family: inherit; font-size: 16px;   /* 16px: o iPhone não dá zoom */
  transition: border-color 180ms ease;
}
.pf-field input::placeholder { color: #8E9AB8; }
.pf-field input:focus { border-color: var(--gold); }
.pf-panel .pf-field input:focus-visible { outline: none; }   /* o campo já marca o foco com a borda */
.pf-field.err input { border-color: #f87171; }
.pf-err { display: block; margin-top: 6px; font-size: 13px; color: #FCA5A5; }
.pf-hint { display: flex; align-items: flex-start; gap: 7px; margin: 2px 0 14px; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.pf-hint svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--c-muted); }
.pf-save {
  width: 100%; min-height: 56px; border-radius: 999px; background: var(--c-amber); color: #fff;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.pf-save:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .pf-save:hover { background: var(--c-amber-d); } }
.pf-cancel { display: block; width: 100%; min-height: 44px; margin-top: 4px; color: var(--c-muted); font-size: 14px; font-weight: 700; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .pf-cancel:hover { color: var(--c-ink); } }

/* os atalhos: linhas altas, fáceis de tocar, com um fio só entre os textos */
.pf-list { overflow: hidden; border-radius: 16px; background: var(--c-raised); }
.pf-row {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 68px; padding: 10px 14px;
  text-align: left; color: var(--c-ink); text-decoration: none; transition: background-color 150ms ease;
}
.pf-row + .pf-row::before { content: ''; position: absolute; top: 0; left: 51px; right: 0; height: 1px; background: rgba(255,255,255,.07); }
.pf-row:active { background: var(--c-ticket); }
.pf-row:focus-visible { outline-offset: -3px; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) { .pf-row:hover { background: var(--c-ticket); } }
.pf-row-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--gold); }
.pf-row-ico svg { width: 22px; height: 22px; }
.pf-row-txt { flex: 1; min-width: 0; }
.pf-row-txt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.pf-row-txt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--c-muted); overflow-wrap: anywhere; }
.pf-row > svg { flex: none; width: 18px; height: 18px; color: var(--c-muted); transition: transform 200ms var(--ease-out); }
.pf-row:active > svg { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .pf-row:hover > svg { transform: translateX(3px); } }
/* sem endereço: o mesmo "Adicionar" em branco do checkout */
.pf-add { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: #fff; color: #10182B; font-size: 13px; font-weight: 700; }

/* rodapé da tela: o que é legal, quieto. A lixeira é cinza e só fica vermelha ao passar o mouse */
.pf-end { margin-top: auto; padding-top: 18px; text-align: center; }
.pf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 7px; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.pf-links a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
.pf-note { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.pf-danger { margin-top: 3px; }
.pf-wipe {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  color: var(--c-muted); font-size: 13px; font-weight: 600; transition: color 180ms ease;
}
.pf-wipe svg { flex: none; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .pf-wipe:hover { color: #FCA5A5; } }
.pf-confirm { margin-top: 8px; padding: 14px; border-radius: 14px; background: var(--c-raised); text-align: left; }
.pf-confirm p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.pf-confirm p b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; color: var(--c-ink); }
.pf-confirm-actions { display: flex; gap: 8px; margin-top: 12px; }
.pf-confirm-actions button { flex: 1; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 800; transition: transform 140ms var(--ease-out); }
.pf-confirm-actions button:active { transform: scale(.97); }
.pf-confirm-no { background: rgba(255,255,255,.08); color: var(--c-ink); }
.pf-confirm-yes { background: #DC2626; color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  /* Abrir: em pouco mais de 1 s a ficha gira e assenta, e o resto entra em ordem. Nada anima sem fim */
  .pf-panel.is-opening .pf-avatar { animation: pfCoin 680ms var(--ease-expo) 120ms both; }
  .pf-panel.is-opening .pf-hello { animation: cartRiseIn 420ms var(--ease-out) 240ms both; }
  .pf-panel.is-opening .pf-sub, .pf-panel.is-opening .pf-ready { animation: cartRiseIn 420ms var(--ease-out) 300ms both; }
  .pf-panel.is-opening .pf-chip { animation: cartRiseIn 420ms var(--ease-out) 360ms both; }
  .pf-panel.is-opening .pf-progress, .pf-panel.is-opening .pf-form { animation: cartRiseIn 420ms var(--ease-out) 300ms both; }
  .pf-panel.is-opening .pf-bar i.on { animation: pfBarIn 560ms var(--ease-expo) 420ms both; }
  .pf-panel.is-opening .pf-row { animation: cartRowIn 440ms var(--ease-out) both; animation-delay: calc(380ms + var(--i, 0) * 60ms); }
  .pf-panel.is-opening .pf-end { animation: cartFade 320ms ease 600ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-overlay, .pf-panel, .pf-overlay.show .pf-panel { transition: none; }
}
@keyframes pfBarIn { from { transform: scaleX(0); } }
@keyframes pfCoin { from { opacity: 0; transform: perspective(420px) rotateY(-160deg) scale(.82); } }

/* endereço no checkout */
.co-addr-card { position: relative; }
.co-addr-change {
  margin-left: auto; align-self: center; flex-shrink: 0; min-height: 40px;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--c-ink); background: rgba(255,255,255,.08);
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.co-addr-change:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .co-addr-change:hover { background: rgba(255,255,255,.14); } }
/* sem endereço, adicionar é o que falta: o botão se destaca (branco, como os de adicionar do carrinho) */
.co-addr-card.empty .co-addr-change { background: #fff; color: #10182B; }
.co-addr-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left;
  border-radius: 14px; background: var(--c-raised); border: 1.5px solid transparent;
  color: var(--c-ink); transition: border-color 180ms ease, background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .co-addr-pick:hover { background: var(--c-ticket); } }
.co-addr-pick.error { border-color: #f87171; }
.co-addr-pick .cap-ico { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; color: var(--c-muted); }
.co-addr-pick .cap-ico svg { width: 22px; height: 22px; }
.co-addr-pick .cap-txt { flex: 1; min-width: 0; }
.co-addr-pick .cap-txt b, .co-addr-pick .cap-txt small { display: block; overflow-wrap: anywhere; }
.co-addr-pick .cap-txt b { font-size: 15px; font-weight: 700; }
.co-addr-pick .cap-txt small { font-size: 13px; color: var(--c-muted); margin-top: 2px; }
.co-addr-pick .cap-act { flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; background: #fff; color: #10182B; }
.co-addr-pick.has .cap-act { background: rgba(255,255,255,.08); color: var(--c-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   TOPO DA VITRINE — acabamento novo (2026-11-08, a pedido: "bonito, profissional, sem cara de IA")
   Mesma estrutura de antes; muda o acabamento: cores chapadas, superfícies separadas por um tom
   (sem borda fina, sem linha dourada, sem sombra parada, sem brilho), nome em dourado firme (sem
   degradê), ícones soltos (sem quadradinho) e rótulo em letra normal. No computador, as três
   informações (prazo e área, pedido mínimo, horário de hoje) ganham uma barra própria.
   PARA VOLTAR AO VISUAL ANTERIOR: apagar este bloco inteiro, ou
   git checkout vitrine-antes-2026-11-08 -- assets/css/style.css index.php
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --tp-head: #0C1428;     /* cabeçalho: um tom acima do fundo da página */
  --tp-raise: #15203A;    /* endereço, perfil, rádio e barra de informações */
  --tp-raise-h: #1C2A4A;  /* passar o mouse */
  --tp-gold: #FFBE2E;     /* nome da adega e ícones */
  --tp-ink: #F4F6FB;
  --tp-ink2: #AAB5CE;
  --tp-cart: #F0A500;     /* carrinho: o dourado da marca, chapado (texto escuro dá ~10:1 de contraste) */
  --tp-cart-h: #FFB82E;
}

/* faixa de situação (2026-11-08, a pedido): só a placa balançando, no centro, sobre um vídeo real de sinuca
   escurecido (fundo preto). Os textos ficam só para leitor de tela; na pausa (sem placa) eles aparecem. */
.store-bar {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: 0; padding: 10px 16px; background: #000;
}
.sb-video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;   /* a linha da mesa por onde as bolas passam */
}
.store-bar::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.66); }   /* escurece o vídeo por igual (ajustado com o usuário: 62% claro demais, "pouca coisa mais") */
.sb-inner { justify-content: center; gap: 14px; min-height: 58px; }
.sb-sign { width: 84px; }
.store-bar:not(.paused) .sb-txt {   /* texto só para leitor de tela (a placa já diz aberto/fechado) */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.store-bar.paused .sb-txt { text-align: center; align-items: center; }
.sb-title { font-size: 16px; letter-spacing: 0; }
.sb-sub { font-size: 14px; color: #D3DAE8; }
.sb-sub b { color: #FFFFFF; }
.sb-note { font-size: 13px; }
@media (min-width: 768px) {
  .store-bar { padding: 8px 16px; }
  .sb-inner { min-height: 50px; }
  .sb-sign { width: 72px; }
  .sb-title, .sb-sub, .sb-note { font-size: 15px; }
}

/* cabeçalho chapado */
.site-header { background: var(--tp-head); border-bottom: 0; box-shadow: none; } /* taste-skill-ignore: tira sombra/brilho antigo */

/* logo: sem anel de brilho nem reflexo de vidro */
.brand-logo-wrap { border: 0; box-shadow: none; background: #17223F; } /* taste-skill-ignore: tira sombra/brilho antigo */
.brand-logo-wrap::after { display: none; }
.brand-link:hover .brand-logo-wrap { box-shadow: none; } /* taste-skill-ignore: tira sombra/brilho antigo */

/* nome da adega: dourado firme, sem degradê nem brilho */
.brand-name, .mobile-brand-title {
  background: none; -webkit-text-fill-color: currentColor; color: var(--tp-gold);
  filter: none; text-shadow: none; /* taste-skill-ignore: tira sombra/brilho antigo */
}

/* "Entregar em": um tom acima, sem borda; pino dourado solto; rótulo em letra normal */
.hdr-addr { background: var(--tp-raise); border: 0; }
.hdr-addr:hover { background: var(--tp-raise-h); }
.hdr-addr:focus-visible { background: var(--tp-raise-h); outline: 2px solid var(--tp-gold); outline-offset: 2px; }
.ha-ico { width: 28px; height: 28px; border-radius: 0; background: none; box-shadow: none; color: var(--tp-gold); } /* taste-skill-ignore: tira sombra/brilho antigo */
.ha-ico svg { width: 22px; height: 22px; }
.ha-lbl { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tp-ink2); }
.ha-val { color: var(--tp-ink); }
.hdr-addr.empty .ha-val { color: var(--tp-gold); }

/* perfil, rádio e carrinho: chapados */
.btn-profile { background: var(--tp-raise); border: 0; }
.btn-profile:hover, .btn-profile:focus-visible { background: var(--tp-raise-h); border: 0; }
.btn-profile:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 2px; }
.btn-profile.has-name { background: var(--tp-gold); color: #1A1100; border: 0; }
.btn-profile.incomplete::after { box-shadow: 0 0 0 2.5px var(--tp-head); } /* taste-skill-ignore: recorte do pontinho de aviso, não é sombra */
/* rádio: botão com o nome escrito (antes era só um ▶ sem dizer o que tocava) */
.radio-btn {
  width: auto; height: 40px; padding: 0 16px 0 13px; gap: 8px; border-radius: 999px;
  background: var(--tp-raise); border: 0; color: var(--tp-gold);
}
.radio-btn svg { width: 14px; height: 14px; margin-left: 0; }
.radio-lbl { font-size: 14px; font-weight: 700; color: var(--tp-ink); white-space: nowrap; }
.radio-btn:hover { background: var(--tp-raise-h); border: 0; }
.radio-btn:active { transform: scale(.96); }
.radio-btn:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 2px; }
.radio-btn.playing { background: var(--tp-raise-h); border: 0; box-shadow: none; } /* taste-skill-ignore: tira sombra/brilho antigo */
.radio-btn.playing::after { display: none; }
.radio-bars span { background: var(--tp-gold); }
.btn-cart { background: var(--tp-cart); color: #1A1100; box-shadow: none; } /* taste-skill-ignore: tira sombra/brilho antigo */
.btn-cart:hover { background: var(--tp-cart-h); opacity: 1; }
.btn-cart:focus-visible { outline: 2px solid var(--tp-gold); outline-offset: 2px; }
.btn-cart .cart-count { box-shadow: none; border-color: var(--tp-head); } /* taste-skill-ignore: tira sombra/brilho antigo */

/* ── celular ── */
@media (max-width: 767px) {
  .site-header { padding: 0 16px; }
  .header-inner { padding: 12px 0 14px; gap: 12px; }
  .brand-logo-wrap { --logo: 52px; }
  .hdr-addr { height: 54px; padding: 0 14px 0 10px; gap: 10px; }
  .btn-cart { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .btn-cart svg { width: 20px; height: 20px; }

  .mobile-title-row { padding: 14px 16px 0; gap: 14px; }
  .mobile-brand-title { font-size: clamp(32px, 9vw, 42px); line-height: 1.15; }

  /* barra de informações: colunas do tamanho do conteúdo, o horário cabe numa linha */
  .mobile-info-bar {
    margin: 12px 16px 0; padding: 12px 10px; border-radius: 16px; background: var(--tp-raise);
    grid-template-columns: repeat(var(--n, 3), auto); justify-content: space-around; column-gap: 8px;
  }
  .mobile-info-bar.mib-4 { grid-template-columns: repeat(2, auto); row-gap: 12px; }
  .mib { padding: 0; gap: 3px; }
  .mib-val { font-size: 14.5px; color: var(--tp-ink); }
  .mib-val svg { width: 16px; height: 16px; color: var(--tp-gold); }
  .mib-label { font-size: 12.5px; font-weight: 500; color: var(--tp-ink2); }
}
@media (max-width: 374px) {
  .mobile-info-bar { padding: 12px 6px; column-gap: 4px; }
  .mib-val { font-size: 13.5px; gap: 4px; }
  .mib-label { font-size: 12px; }
}

/* ── computador: as mesmas três informações numa barra abaixo do cabeçalho
   (antes só cabiam duas lá em cima, e o pedido mínimo e o horário sumiam) ── */
@media (min-width: 768px) {
  .header-info-badges { display: none; }
  .brand-name { font-size: 34px; }
  .brand-place { color: var(--tp-ink2); letter-spacing: 0; }
  .hdr-addr { flex: 1 1 340px; max-width: 480px; height: 52px; padding: 0 16px 0 12px; }
  .btn-cart { font-size: 15px; }

  /* mesma largura da foto do carrossel logo abaixo (a foto fica entre as duas setas de 46px) */
  .mobile-info-bar {
    display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    width: min(1056px, calc(100% - 144px)); margin: 16px auto 0; padding: 14px 8px; list-style: none;
    border-radius: 16px; background: var(--tp-raise);
  }
  .mobile-info-bar.mib-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mib { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; }
  .mib-val {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 16px; font-weight: 800; color: var(--tp-ink); font-variant-numeric: tabular-nums;
  }
  .mib-val svg { width: 18px; height: 18px; color: var(--tp-gold); }
  .mib-label { font-size: 14px; color: var(--tp-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ══ VITRINE DE PRODUTOS — acabamento novo (2026-11-08; antes: tag vitrine-produtos-antes-2026-11-08) ══
   Cartão chapado um tom acima, foto em 4:5 (antes a lata esticava o cartão até 580px), selo escrito no lugar
   dos emojis, preço em branco com "R$" menor, botão dourado chapado; títulos e abas em letra normal. */
.cat-section-header { padding: 0; background: none; border: 0; border-radius: 0; gap: 10px; margin-bottom: 16px; }
.csh-icon .cat-icon { width: 24px; height: 24px; }
.csh-name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #F4F6FB; }
.csh-line { display: none; }
.cat-btn { background: #15203A; border: 2px solid transparent; border-top-width: 2px; box-shadow: none; font-size: 12px; letter-spacing: 0; }
.cat-btn:hover { background: #1C2A4A; transform: none; box-shadow: none; border-color: transparent; }
.cat-btn.active { background: #1C2A4A; border-color: var(--cat-clr, var(--gold)); transform: none; box-shadow: none; }
.categories-wrap::before, .categories-wrap::after { display: none; }
.search-input { background: #15203A; border: 2px solid transparent; border-radius: 14px; font-size: 15px; }
.search-input:focus { border-color: var(--gold); box-shadow: none; background: #15203A; } /* taste-skill-ignore: tira brilho antigo */
.brand-tab { background: #15203A; border: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 9px 16px; color: #DCE2EF; }
.brand-tab:hover { background: #1C2A4A; color: #fff; }
.brand-tab.active { background: #F0A500; color: #1A1100; }
.brand-tabs.is-stuck { box-shadow: none; } /* taste-skill-ignore: tira sombra antiga */
.bh-tag { text-transform: none; letter-spacing: 0; font-size: 13px; border: 0; }

.product-card, .product-card.promo { background: #121B31; border: 0; border-radius: 16px; box-shadow: none; } /* taste-skill-ignore: tira sombra antiga */
@media (hover: hover) {
  .product-card:hover, .product-card.promo:hover { transform: translateY(-2px); background: #16213B; border: 0; box-shadow: none; } /* taste-skill-ignore: tira brilho antigo */
}
.flavor-row .product-card { min-height: 0; }
.product-img { aspect-ratio: 4 / 5; min-height: 0; height: auto; overflow: hidden; background: #172241; }
.product-img::after { display: none; }
.product-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.pc-tag {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 4px 9px; border-radius: 999px;
  background: #0B1222; color: #FFBE2E; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.pc-tag--promo { background: #DC2626; color: #fff; }
.product-body { padding: 12px 12px 8px; }
.product-name { font-size: 14.5px; font-weight: 700; min-height: calc(14.5px * 1.3 * 2); -webkit-line-clamp: 2; }
.product-desc { margin-top: 4px; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13px; color: #AAB5CE; }
.product-price-row, .product-price-row.is-promo { border-top: 0; padding-top: 10px; }
.product-price, .price-promo {
  background: none; -webkit-text-fill-color: currentColor; color: #F4F6FB; text-shadow: none; /* taste-skill-ignore: tira brilho antigo */
  font-size: 19px; font-weight: 800; letter-spacing: -.2px; line-height: 1.1;
}
.pc-cur { font-size: 12px; font-weight: 700; margin-right: 3px; color: #AAB5CE; }
.price-was { color: #8E9AB8; text-decoration-color: currentColor; font-size: 12px; }
.btn-add {
  background: #F0A500; color: #1A1100; box-shadow: none; /* taste-skill-ignore: tira brilho antigo */
  border-radius: 12px; min-height: 42px; font-size: 14px; font-weight: 700;
}
.btn-add:hover { opacity: 1; transform: none; background: #FFB82E; }
.product-qty-ctrl { background: #1C2A4A; border: 0; border-radius: 12px; min-height: 42px; }
.qty-btn { height: 42px; width: 42px; }
.float-cart { background: #F0A500; }
@media (max-width: 767px) {
  .product-price { -webkit-text-fill-color: currentColor; font-size: 18px; }
  .flavor-row .product-card { min-height: 0; }
}
@media (min-width: 1024px) {
  .product-card:hover { box-shadow: none; } /* taste-skill-ignore: tira brilho antigo */
}
/* descrição sempre com 2 linhas reservadas: preço e botão alinhados entre os cartões vizinhos */
.product-desc { min-height: calc(13px * 1.5 * 2); }

/* avisos rápidos: chapados, sem a borda dourada; "deu certo" leva um ✓ dourado desenhado (antes era emoji) */
.toast { display: flex; align-items: center; justify-content: center; gap: 8px; background: #1C2A4A; border: 0; border-radius: 14px; font-size: 14px; }
.toast-ok { width: 18px; height: 18px; flex-shrink: 0; color: #FFBE2E; }

/* ══ CENA DA PLACA (2026-11-08) — tocar na faixa de situação abre o chope em câmera lenta com o horário de hoje
   (assets/js/cena-placa.js). Para tirar: apagar este bloco, o <button class="sb-tap"> e o script cena-placa.js. ══ */
.store-bar .sb-tap {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer;
}
.store-bar .sb-tap:focus-visible { outline: 2px solid #FFBE2E; outline-offset: -3px; }
body.cp-open { overflow: hidden; }
.cp {
  position: fixed; inset: 0; z-index: 1300; overflow: hidden;
  background: #140C05; color: #fff; cursor: pointer;   /* fundo marrom-escuro de bar: a moldura */
  opacity: 0; transition: opacity .45s ease;
}
.cp[hidden] { display: none; }
.cp.is-on { opacity: 1; }
/* a cena num quadro arredondado com borda âmbar suave (aconchegante), que cresce de leve ao abrir */
.cp-stage {
  position: absolute; inset: 14px; overflow: hidden; border-radius: 26px; background: #000;
  box-shadow: 0 0 0 1.5px rgba(255,190,46,.38), 0 0 46px rgba(255,150,40,.22);   /* taste-skill-ignore: moldura pedida pelo usuário */
  transform: scale(.94); transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.cp.is-on .cp-stage { transform: none; }
@media (min-width: 768px) { .cp-stage { inset: 28px; border-radius: 32px; } }
/* cor de cinema: contraste e saturação; o tom gelado vem da camada .cp-tone */
.cp-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.12) saturate(1.22) brightness(.95);
  transform: scale(1.06); transition: transform 12s cubic-bezier(.2,.6,.2,1);
}
.cp.is-on .cp-video { transform: scale(1); }   /* aproximação lenta de câmera */
/* gelado: azul-petróleo em luz suave esfria o vidro e o fundo, a cerveja continua dourada */
.cp-tone { position: absolute; inset: 0; background: #0B3A4D; mix-blend-mode: soft-light; opacity: .5; }
@media (max-aspect-ratio: 3/4) { .cp-video { object-position: 42% 50%; } }   /* celular em pé: o fio de chope e o copo no centro do recorte */
/* bordas escurecidas + escurecido embaixo para ler o texto (véu neutro sobre a filmagem) */
.cp-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, transparent 45%, rgba(0,0,0,.7) 100%),
    linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 38%, transparent 60%);   /* taste-skill-ignore: véu sobre a filmagem para ler o texto */
}
/* grão de película, bem leve; só mexe enquanto a cena está aberta (transform) */
.cp-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cp.is-on .cp-grain { animation: cpGrain .6s steps(6) infinite; }
@keyframes cpGrain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -6%); }
  60% { transform: translate(-4%, -3%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); }
}
/* o garçom da casa, de pé logo acima de "Aberto hoje" (1º item de .cp-txt): galo 3D com fundo transparente (vídeo
   WebM em repetição; no iPhone, WebP animado). Entra descendo de leve antes do texto; sombra de contato no chão
   e sombra curta do corpo, para ele "pisar" na cena em vez de flutuar */
.cp-txt > .cp-galo {
  position: relative; margin: 0 auto 4px; pointer-events: none;
  height: clamp(132px, 19vh, 184px); aspect-ratio: 440 / 605;   /* corpo inteiro, de pé */
  opacity: 0; transform: translateY(-14px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.cp-txt > .cp-galo.is-in { opacity: 1; transform: none; }
.cp-galo::before {   /* sombra no chão, embaixo dos pés */
  content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 12%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.78), rgba(0,0,0,.36) 55%, transparent);
}
.cp-galo > * {
  position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  transform: translateX(-3%);   /* centra o corpo: a asa que chama fica à esquerda do quadro */
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.42));
}
/* texto: entra deslizando da esquerda, como slide, uma linha depois da outra (mesmas fontes) */
.cp-txt { position: absolute; left: 0; right: 0; bottom: 9vh; padding: 0 24px; text-align: center; }
.cp-txt > * { margin: 0; opacity: 0; transform: translateX(-70px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.cp.is-on .cp-kicker { opacity: 1; transform: none; transition-delay: .8s; }
.cp.is-on .cp-big    { opacity: 1; transform: none; transition-delay: 1.15s; }
.cp.is-on .cp-small  { opacity: 1; transform: none; transition-delay: 1.5s; }
.cp-kicker { font-family: 'Dancing Script', cursive; font-size: clamp(34px, 9vw, 54px); font-weight: 700; line-height: 1.1; color: #FFBE2E; }
.cp-big { margin-top: 6px !important; font-size: clamp(32px, 9.5vw, 64px); font-weight: 800; line-height: 1.08; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cp-big span { display: block; }
.cp-small { margin-top: 10px !important; font-size: 16px; font-weight: 600; color: #DCE2EF; }
.cp-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; border: 0;
  opacity: 0; transition: opacity .4s ease .6s;
}
.cp.is-on .cp-x { opacity: 1; }
.cp-x svg { width: 22px; height: 22px; }
.cp-x:focus-visible { outline: 2px solid #FFBE2E; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cp, .cp-stage, .cp-video, .cp-txt > *, .cp-x, .cp-galo { transition: none; }
  .cp-stage, .cp-video { transform: none; }
  .cp-txt > * { opacity: 1; transform: none; }
  .cp.is-on .cp-grain { animation: none; }
}

/* ══ FICHA DO PRODUTO (2026-11-08, a pedido: "bem bonito"; antes: tag produto-antes-2026-11-08) ══
   Mesma linguagem do carrinho: a bebida grande sob a luz fria da geladeira (ou no "estúdio" claro, ou o cartaz
   sobre ele mesmo desfocado — pmFit() em cart.js escolhe pela foto), nome, preço em branco com "R$" menor,
   descrição em texto corrido e, embaixo, quantidade + "Adicionar · total". Sem caixas, linha dourada, brilho
   nem botão pulsando. No celular sobe de baixo, como folha; no PC, duas colunas. */
#productModal {
  --pm-ground: #0E1528; --pm-raised: #18223B; --pm-ink: #F5F7FF; --pm-muted: #B4BED6;
  --pm-spot: radial-gradient(78% 68% at 50% 46%, #4A5F96 0%, #2A3756 80%);
  --pm-ease: cubic-bezier(.22,1,.36,1);
  background: rgba(4,7,15,.78);
}
#productModal .modal-box {
  background: var(--pm-ground); color: var(--pm-ink); border: 0; border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: translateY(18px) scale(.985);
  transition: opacity .2s ease, transform .32s var(--pm-ease);
}
#productModal.open .modal-box { transform: none; }
#productModal .modal-close-btn {
  top: 12px; right: 12px; width: 40px; height: 40px; background: rgba(8,12,24,.72); color: #fff;
}
#productModal .modal-close-btn:hover { background: rgba(8,12,24,.9); }
#productModal :focus-visible { outline: 2px solid #FFBE2E; outline-offset: 2px; }
#productModal .modal-box:focus { outline: none; }   /* a janela recebe o foco ao abrir, sem contorno */

/* foto */
.pm-media { position: relative; overflow: hidden; background: var(--pm-spot); cursor: zoom-in; }
.pm-img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  object-fit: contain; padding: 26px 28px 10%;
  opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .5s var(--pm-ease);
}
.pm-media.is-ready .pm-img { opacity: 1; transform: none; }
/* sombra no chão, embaixo da bebida (recorte e estúdio) */
.pm-media--cutout::after, .pm-media--studio::after {
  content: ""; position: absolute; left: 50%; bottom: 7%; width: 46%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
.pm-media--studio::after { background: radial-gradient(closest-side, rgba(20,28,48,.28), transparent); }
/* estúdio claro: o branco da foto some no fundo (multiplicar) */
.pm-media--studio { background: radial-gradient(80% 70% at 50% 45%, #FFFFFF 0%, #E3E8F1 88%); }
.pm-media--studio .pm-img { mix-blend-mode: multiply; }
/* cartaz: inteiro, sobre ele mesmo desfocado e escurecido */
.pm-media--photo { background: #0B1222; }
.pm-media--photo::before {
  content: ""; position: absolute; inset: -40px; background: var(--pm-photo) center / cover no-repeat;
  filter: blur(26px) brightness(.5) saturate(1.15);
}
.pm-media--photo .pm-img { padding: 16px 0; }
.pm-media--empty { display: grid; place-items: center; }
.pm-emoji { font-size: 76px; line-height: 1; }
.pm-tags { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 80px); }
.pm-tag {
  padding: 5px 11px; border-radius: 999px; background: #0B1222; color: #FFBE2E;
  font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap;
}
.pm-tag--promo { background: #DC2626; color: #fff; }
.pm-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(8,12,24,.72); color: #fff; border: 0; cursor: zoom-in;
}
.pm-zoom:hover { background: rgba(8,12,24,.9); }

/* texto */
.pm-body { padding: 20px 20px 0; }
.pm-title { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px; color: var(--pm-ink); text-wrap: balance; }
.pm-price { margin: 8px 0 0; font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--pm-ink); font-variant-numeric: tabular-nums; }
.pm-price .pc-cur { font-size: 14px; margin-right: 3px; color: var(--pm-muted); }
.pm-was { margin-left: 8px; font-size: 15px; font-weight: 600; color: #8E9AB8; }
.pm-desc { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #D3DAEA; overflow-wrap: anywhere; }
.pm-spec { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 14px; color: var(--pm-muted); }
.pm-spec strong { color: var(--pm-ink); font-weight: 700; }

/* ação: quantidade + "Adicionar · total"; gruda embaixo se a descrição for longa */
.pm-actions {
  position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; gap: 10px;
  margin: 20px -20px 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--pm-ground);
}
.pm-qty { display: flex; align-items: center; height: 54px; border-radius: 16px; background: var(--pm-raised); }
.pm-qty-btn { width: 46px; height: 54px; display: grid; place-items: center; color: var(--pm-ink); border-radius: 16px; }
@media (hover: hover) { .pm-qty-btn:hover { color: #FFBE2E; } }
.pm-qty-val { min-width: 26px; text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-add {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 54px; padding: 0 7px 0 18px;
  border-radius: 16px; background: #F0A500; color: #1A1100; font-size: 17px; font-weight: 800;
  transition: background .15s, transform .12s;
  container-type: inline-size; min-width: 0;   /* o que vai dentro se ajusta à largura do botão (celular de 360px) */
}
.pm-add-label { min-width: 0; overflow: hidden; white-space: nowrap; }
#productModal button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pm-qty-btn:active { background: #22304F; }
@media (hover: hover) { .pm-add:hover { background: #FFB82E; } .pm-add:hover .pm-add-total { background: #E89E00; } }
.pm-add:active { transform: scale(.98); }
/* o total ganha peso: número grande numa pastilha um tom mais escura do próprio âmbar */
.pm-add-total {
  display: inline-flex; align-items: baseline; height: 40px; padding: 0 12px; border-radius: 11px;
  background: #D99400; font-size: 20px; font-weight: 900; line-height: 40px; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pm-add .pc-cur { font-size: 13px; font-weight: 800; margin-right: 3px; color: inherit; opacity: .8; letter-spacing: 0; }
@container (max-width: 228px) {
  .pm-add-label { font-size: 15px; }
  .pm-add-total { height: 38px; line-height: 38px; padding: 0 9px; font-size: 17px; }
  .pm-add .pc-cur { font-size: 12px; margin-right: 2px; }
}
@media (max-width: 400px) { .pm-qty-btn { width: 40px; } .pm-qty-val { min-width: 22px; } }

/* celular: folha que sobe de baixo, foto alta */
@media (max-width: 600px) {
  #productModal { padding: 0; align-items: flex-end; }
  #productModal .modal-box {
    max-width: none; width: 100%; max-height: 92dvh; overflow-y: auto; border-radius: 24px 24px 0 0;
    transform: translateY(100%); transition: opacity .2s ease, transform .36s var(--pm-ease);
  }
  #productModal #modalContent { display: block; }
  .pm-media { height: clamp(230px, 36dvh, 320px); }
}
/* PC: duas colunas, foto à esquerda; o texto rola sozinho e a ação fica no pé */
@media (min-width: 601px) {
  #productModal .modal-box { max-width: 820px; max-height: min(88vh, 620px); overflow: hidden; display: flex; }
  #productModal #modalContent { display: grid; grid-template-columns: 360px 1fr; flex: 1; min-height: 0; overflow: hidden; }
  .pm-media { min-height: 460px; }
  .pm-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 32px 32px 0; }
  .pm-title { font-size: 26px; padding-right: 40px; }
  .pm-price { font-size: 28px; }
  .pm-actions { margin: auto -32px 0; padding: 16px 32px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #productModal .modal-box, .pm-img { transition: none; }
  #productModal .modal-box, .pm-img { transform: none; }
}