/* Ponte minima entre o template estatico e o motor real da loja. */
:root{
  --s-primary:var(--cy);
  --s-accent:var(--bl);
}

.backdrop.show{opacity:1;visibility:visible}
.drawer.open{transform:translateX(0)}
.drawer-foot{display:flex;flex-direction:column;gap:14px}
.drawer[aria-hidden="false"]{transform:translateX(0)}

.ci-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;margin-top:7px}
.ci-qty button{width:30px;height:30px;background:rgba(255,255,255,.04);border:0;color:var(--txt);cursor:pointer;font-size:16px}
.ci-qty button:hover{background:rgba(34,211,238,.12)}
.ci-qty span{width:34px;text-align:center;font-size:14px;font-weight:700}

.toasts .toast.ok{border-color:rgba(52,211,153,.38)}
.toasts .toast.err{border-color:rgba(251,94,140,.45)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.cep-row{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:end}
.hint{color:var(--muted);font-size:13.5px;margin:0 0 16px}

#prodSearchClear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:9px;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer}
#prodSearchClear:hover{color:var(--txt);background:rgba(34,211,238,.12)}

.sum-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.sum-item{display:flex;gap:12px;align-items:center}
.sum-item img,.sum-item .ci-ph{width:56px;height:56px;border-radius:11px;object-fit:cover;background:#0a1224;flex:none}
.sum-item .ci-ph{display:grid;place-items:center;color:#2a3a5e}
.sum-item .ci-ph svg{width:28px;height:28px}
.sum-item .si-info{flex:1;min-width:0}
.sum-item .si-info b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-item .si-info span{font-size:12px;color:var(--muted)}
.coupon-msg{font-size:12.5px;min-height:18px;color:var(--muted)}
.coupon-msg.ok{color:#6ee7b7}
.coupon-msg.err{color:#fb7185}

.center-card{max-width:640px;margin:48px auto;text-align:center}
.cc-icon{width:88px;height:88px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.14)}
.cc-icon svg{width:46px;height:46px;stroke:#6ee7b7;fill:none;stroke-width:2.2}
.cc-icon.wa{background:rgba(37,211,102,.14)}
.cc-icon.wa svg{stroke:#25d366}
.code-pill{display:inline-flex;margin:16px 0;padding:8px 14px;border-radius:999px;background:rgba(34,211,238,.12);color:var(--cy-2);font-weight:800;font-family:'Space Grotesk'}
.cc-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.empty-state{text-align:center;padding:54px 20px;color:var(--muted)}
.empty-state h3{color:var(--txt);font-size:22px;margin-bottom:8px}
.empty-state svg{width:54px;height:54px;fill:none;stroke:var(--line-2);stroke-width:1.4;margin:0 auto 14px}

.color-dots{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.color-dots button{position:relative;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}

/* Alvos de toque: em telas sem mouse (pointer:coarse), sobe pra ~40-44px
   os botões pequenos de quantidade/cor pra ficar dentro da recomendação
   de acessibilidade (mínimo 44px), sem engordar a UI de quem usa mouse. */
@media (pointer:coarse){
  .qty button{width:40px;height:40px;font-size:17px}
  .qty span{min-width:38px}
  .ci-qty button{width:40px;height:40px;font-size:17px}
  .ci-qty span{width:42px}
  .color-dots button{width:36px;height:36px}
}
.color-dots button:hover{transform:scale(1.08)}
.color-dots button.on{border-color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cy)}
.color-dots button.on::after{content:"";position:absolute;inset:0;display:flex;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5L20 7' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}

.pd-main iframe,.pd-main video{width:100%;height:100%;border:0;object-fit:cover;background:#05070f}
.qsel input{width:52px;height:46px;border:0;background:transparent;color:var(--txt);text-align:center;font-weight:800;font-size:16px;appearance:textfield}
.qsel input::-webkit-outer-spin-button,.qsel input::-webkit-inner-spin-button{appearance:none;margin:0}
.pd-vars.need .vopts{animation:varShake .4s ease}
@keyframes varShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.pay input{position:absolute;opacity:0;pointer-events:none}
.pay-opt.sel{border-color:var(--cy);background:rgba(34,211,238,.07)}
.btn-sm{padding:9px 14px;font-size:13px;border-radius:10px}

/* Sugestao de cupom de 1a compra */
.coupon-suggest{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:11px 12px;border:1px dashed var(--line-2);border-radius:12px;background:rgba(34,211,238,.05);cursor:pointer;font-size:12.5px;color:var(--txt-2);line-height:1.45}
.coupon-suggest input{position:absolute;opacity:0;width:0;height:0}
.coupon-suggest .cs-box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;background:var(--panel);transition:.18s}
.coupon-suggest .cs-box svg{width:13px;height:13px;fill:none;stroke:#04111f;stroke-width:3.2;opacity:0}
.coupon-suggest input:checked + .cs-box{background:var(--cy);border-color:var(--cy)}
.coupon-suggest input:checked + .cs-box svg{opacity:1}
.coupon-suggest b{color:var(--cy-2);letter-spacing:.04em}
.coupon-suggest .cs-min{color:var(--muted)}

/* Barra de acumulo de EGGYS COINS */
.coin-earn{margin:12px 0 4px;padding:12px 13px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(139,92,246,.05))}
.coin-earn[hidden]{display:none}
.coin-earn .ce-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
.coin-earn .ce-head b{color:var(--cy-2)}
.coin-earn .ce-ic{flex:0 0 auto;width:22px;height:22px;color:var(--cy-2)}
.coin-earn .ce-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.coin-earn .ce-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:9px 0 7px}
.coin-earn .ce-bar i{display:block;height:100%;border-radius:999px;background:var(--grad);width:0;transition:width .4s cubic-bezier(.2,.7,.3,1)}
.coin-earn .ce-foot{font-size:11.5px;color:var(--muted);line-height:1.4}

/* Area do cliente: nome/email sem vazar + abas (cada coisa na sua aba) */
.acct-user > div{min-width:0;flex:1 1 auto}
.acct-user b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-user span{font-size:12.5px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;border-radius:11px;color:var(--txt-2);font-size:14px;font-weight:600;transition:.15s;cursor:pointer;background:none;border:0;font-family:inherit}
.acct-nav button svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}
.acct-nav button:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.acct-nav button.on{background:rgba(34,211,238,.1);color:var(--cy-2)}
.acct-panel{display:none}
.acct-panel.on{display:block;animation:acctFade .25s ease}
@keyframes acctFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Carteira de EGGYS COINS (area do cliente) */
.coin-wallet{display:flex;align-items:center;gap:16px;margin-top:16px;padding:18px;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(120deg,rgba(34,211,238,.12),rgba(59,130,246,.08) 50%,rgba(139,92,246,.12))}
.coin-wallet .eg-coin{flex:0 0 auto;filter:drop-shadow(0 6px 16px rgba(34,211,238,.32));animation:egCoinFloat 4s ease-in-out infinite}
@keyframes egCoinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.coin-wallet .cw-info{min-width:0}
.cw-label{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.cw-amount{display:block;font-family:'Space Grotesk';font-size:34px;font-weight:800;line-height:1.06;color:var(--txt)}
.cw-amount small{font-size:14px;font-weight:600;color:var(--cy-2)}
.cw-sub{display:block;font-size:12.5px;color:var(--cy-2);font-weight:600;margin-top:2px}

/* Alerta de EGGYS COINS recebidas por transferencia (toast destacado) */
.toast.coin-alert{border-color:rgba(34,211,238,.5);background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(139,92,246,.10))}
.toast.coin-alert .ca-coin{flex:0 0 auto;width:32px;height:32px;display:block;animation:egCoinFloat 3.2s ease-in-out infinite}
.toast.coin-alert .ca-coin svg{width:32px;height:32px}
.toast.coin-alert b{color:var(--cy-2)}

/* Sucesso ao entrar no Clube (efeito de moedas entrando) */
.club-joined{border-color:rgba(34,211,238,.45)!important}
.club-success{text-align:center;padding:6px 4px 4px}
.cs-coin-stage{position:relative;height:118px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.cs-badge{position:relative;z-index:2;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 32%,rgba(34,211,238,.28),rgba(139,92,246,.16));box-shadow:0 0 0 6px rgba(34,211,238,.10),0 16px 44px -12px rgba(34,211,238,.65);animation:csPop .6s cubic-bezier(.2,1.35,.4,1) both}
.cs-badge svg{width:56px;height:56px}
.cs-fly{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;z-index:1;opacity:0;animation:csFly 1s ease-out forwards}
.cs-fly svg{width:26px;height:26px}
@keyframes csPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes csFly{0%{transform:translate(var(--fx,0),var(--fy,-60px)) scale(.4) rotate(0);opacity:0}25%{opacity:1}100%{transform:translate(0,0) scale(1) rotate(220deg);opacity:0}}
.cs-title{margin:6px 0 2px;font-size:22px}
.cs-msg{color:var(--muted);font-size:13.5px;margin:0 auto;max-width:340px}
.cs-coins-count{font-family:'Space Grotesk';font-weight:800;font-size:42px;line-height:1.1;margin:12px 0 2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cs-coins-count small{font-size:14px;font-weight:700;color:var(--cy-2);-webkit-text-fill-color:var(--cy-2)}
.cs-balance{color:var(--txt-2);font-size:13.5px;margin:0 0 16px}
.cs-balance b{color:var(--cy-2);font-weight:800}

/* Pedido cancelado = apenas historico (sem acao de pagamento) */
.order-card.is-cancelled{opacity:.82}
.order-card.is-cancelled:hover{opacity:1}
.order-card.is-cancelled .oc-code{color:var(--muted)}

/* Historico de EGGYS COINS (area do cliente, com paginacao) */
.coin-ledger{margin-top:14px;display:flex;flex-direction:column}
.cl-row{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.cl-row:last-child{border-bottom:0}
.cl-delta{flex:0 0 auto;min-width:54px;text-align:center;font-family:'Space Grotesk';font-weight:800;font-size:15px;padding:5px 8px;border-radius:9px}
.cl-delta.pos{color:#86efac;background:rgba(52,211,153,.12)}
.cl-delta.neg{color:#fca5a5;background:rgba(248,113,113,.12)}
.cl-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-desc{font-size:13.5px;color:var(--txt);overflow-wrap:anywhere}
.cl-date{font-size:11.5px;color:var(--muted)}
.cl-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cl-pager button{min-width:34px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel);color:var(--txt-2);font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
.cl-pager button:hover:not(:disabled){border-color:var(--cy);color:var(--txt)}
.cl-pager button.on{background:var(--grad);color:#04121f;border-color:transparent}
.cl-pager button:disabled{opacity:.4;cursor:default}

/* Transferencia de coins entre clientes (area do cliente) */
.coin-transfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.coin-transfer h4{margin:0 0 4px;font-size:15px;color:var(--txt)}

.buybar{display:none}
/* Menu do burger. Breakpoint em sincronia com store-template.css e store-visual.js.
   Ancorado no .head-in (que e position:relative): top:100% acompanha a altura real
   da barra em vez do antigo top:84px fixo, e left/right:0 deixa o painel alinhado
   com as bordas do header — antes sobrava 41px de um lado e 33px do outro. */
@media (max-width:1260px){
  /* margin-left:0 anula o recuo de 8px da .nav em barra, que deslocava o painel
     inteiro pra direita (sobrava 9px de um lado e 1px do outro). */
  .nav.is-open{display:flex!important;position:absolute;top:calc(100% + 10px);left:0;right:0;margin-left:0;flex-direction:column;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:10px;gap:2px;box-shadow:var(--shadow);z-index:80;max-height:calc(100vh - var(--hd) - 40px);overflow-y:auto;overscroll-behavior:contain}
  /* 44px e o alvo de toque minimo recomendado (WCAG 2.5.5 / HIG) */
  .nav.is-open a{display:flex;align-items:center;width:100%;min-height:44px}
}
@media (max-width:680px){
  .grid-2,.grid-3,.cep-row{grid-template-columns:1fr}
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:62px;z-index:115;gap:12px;align-items:center;background:rgba(5,7,15,.94);border-top:1px solid var(--line-2);padding:12px 14px}
  .buybar .bp .now{font-family:'Space Grotesk';font-weight:800;font-size:20px;color:var(--txt);display:block;line-height:1.05}
  .buybar .bp .lbl{font-size:10.5px;color:var(--muted)}
  .buybar .btn-primary{flex:1;padding:14px}
  body.has-buybar .mobnav{display:none}
  body.has-buybar .buybar{bottom:0}
  body.has-buybar .pd-buy-inline{display:none}
  /* store-template.css só reserva 64px de padding-bottom (altura do .mobnav);
     a .buybar é mais alta que isso (preço + botão), então sem este ajuste
     ela cobre o fim da página no mobile. */
  body.has-buybar{padding-bottom:88px}
}

/* Painel de filtros de /produtos vira gaveta lateral em tablet/mobile em vez
   de empilhar inline (o que empurrava a grade de produtos pra baixo). */
.shop-filter-toggle{display:none}
.filters-close{display:none}
.filters-backdrop{display:none}
@media (max-width:920px){
  .shop-filter-toggle{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
    padding:11px 18px;border-radius:var(--radius-pill);border:1px solid var(--line-2);
    background:var(--panel);color:var(--txt);font-weight:700;font-size:14px;cursor:pointer;
  }
  .shop-filter-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  .filters{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(340px,86vw);height:100%;
    margin:0;border-radius:0;transition:transform .25s ease;
    z-index:110;overflow-y:auto;box-shadow:var(--shadow);
  }
  /* .filters também carrega as classes "reveal in" (animação de entrada ao
     rolar a página, já "revelada" desde o primeiro paint) — .reveal.in tem
     mais especificidade (0,2,0) que .filters sozinho (0,1,0) e venceria o
     transform abaixo, deixando a gaveta sempre visível. Por isso os
     seletores aqui encadeiam .reveal.in também, pra ganhar a especificidade. */
  .filters.reveal.in{transform:translateX(100%)}
  .filters.reveal.in.open{transform:translateX(0)}
  .filters-close{
    display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    margin-left:auto;border-radius:50%;border:1px solid var(--line-2);background:transparent;
    color:var(--txt);cursor:pointer;
  }
  .filters-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  .filters-backdrop{
    display:block;position:fixed;inset:0;background:rgba(4,6,14,.66);backdrop-filter:blur(3px);
    z-index:109;opacity:0;visibility:hidden;transition:.25s;
  }
  .filters-backdrop.open{opacity:1;visibility:visible}

  /* Endereço do checkout: 3 colunas (Número/Complemento/Bairro) ficavam
     apertadas em tablet (681-980px) — antes só colapsava em 680px, direto
     de 3 pra 1 coluna. Agora passa por um estágio intermediário de 2. */
  .grid-3{grid-template-columns:1fr 1fr}
}

/* Aba "Meus orçamentos" da área do cliente (MINI ME / MINI PET criados em /criar) */
.cm-quotes{display:flex;flex-direction:column;gap:12px}
.cm-quote{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cm-quote.is-ready{border-color:var(--cy);box-shadow:var(--glow-cy)}
.cm-quote-head{display:flex;align-items:center;gap:14px}
.cm-quote-img{flex:0 0 auto;width:72px;height:72px;border-radius:11px;overflow:hidden;background:var(--card-2);display:grid;place-items:center}
.cm-quote-img img{width:100%;height:100%;object-fit:cover}
.cm-quote-img span{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-align:center;padding:4px}
.cm-quote-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-quote-info b{font-size:14px}
.cm-quote-info span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-quote-status{color:var(--cy-2)!important;font-weight:600}
.cm-quote-total{flex:0 0 auto;text-align:right}
.cm-quote-total b{display:block;font-family:'Space Grotesk';font-size:17px}
.cm-quote-total span{font-size:11px;color:var(--muted)}
@media (max-width:560px){
  .cm-quote-head{flex-wrap:wrap}
  .cm-quote-total{width:100%;text-align:left;padding-left:86px}
}

/* Bloco de aprovação do orçamento (área do cliente) */
.cm-quote-approve{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--grad-soft)}
.cm-quote-approve p{margin:0;flex:1 1 220px;font-size:13px;color:var(--txt-2)}
.cm-quote-approve .btn{flex:0 0 auto}
.cm-quote-note{margin:0;padding:10px 12px;border-radius:11px;background:var(--card-2);
  font-size:12.5px;color:var(--muted);line-height:1.45}
.cm-quote-note.is-ok{color:#6ee7b7}
.cm-quote-note b{color:var(--txt)}
@media (max-width:560px){
  .cm-quote-approve{flex-direction:column;align-items:stretch}
  .cm-quote-approve .btn{width:100%;justify-content:center}
}

/* No menu do burger o icone aparece (a barra esconde — ver store-template.css) */
@media (max-width:1260px){
  /* No menu vertical cabe tudo: Sobre e Contato voltam, e o icone respira mais. */
  .nav.is-open > a.nav-extra{display:flex}
  .nav.is-open > a > svg{width:17px;height:17px;margin-right:10px;opacity:.7}
  .nav.is-open > a.active > svg{opacity:1;color:var(--cy-2)}
}