/* ════════════════════════════════════════════════════════════════════════════════════════
   ZapDelivery v6 — Universal Premium Storefront
   Template universal premium: header + banner + benefícios + categorias +
   produtos + menu inferior. Adapta cor/segmento/conteúdo por loja.
   Mobile-first (320 → 480 → tablet → desktop).
   ════════════════════════════════════════════════════════════════════════════════════════ */

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

:root{
  /* Cor da marca (sobrescrita via JS com theme_color da loja) */
  --brand:#FF5C2B;--brand-d:#E23E0C;--brand-l:#FFF1EA;--brand-m:#FFC3AC;
  --grad-brand:linear-gradient(135deg,#FF8A4C 0%,#FF5C2B 48%,#E23E0C 100%);

  /* Neutros */
  --ink:#171310;--ink2:#4A3F38;--ink3:#8A7D75;--ink4:#C2B8B2;
  --bg:#F6F3EF;--surf:#FFFFFF;--line:#EAE3DC;

  /* Status */
  --green:#16A34A;--green-bg:#DCFCE7;--green-d:#25D366;
  --amber:#D97706;--amber-bg:#FEF3C7;
  --blue:#2563EB;--blue-bg:#DBEAFE;
  --violet:#7C3AED;--violet-bg:#EDE9FE;
  --red:#DC2626;--red-bg:#FEE2E2;

  --nav-h:66px;--cart-h:76px;
  --r:16px;--rsm:12px;--rxs:9px;
  --sh:0 2px 10px rgba(23,19,16,.06);
  --sh-md:0 12px 30px rgba(23,19,16,.12);
  --sh-lg:0 24px 60px rgba(23,19,16,.2);

  --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.55;
  padding-top:0;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
button{font-family:inherit}

/* Páginas internas mantêm o header e o menu inferior; barra de carrinho é só da loja */
body:not([data-page="page-store"]) .cart-bar { display:none!important; }
body:not([data-page="page-store"]){padding-top:64px;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
body:not([data-page="page-store"]) .co-top{ top:64px; }
/* Header sólido e legível nas páginas internas (fundo claro) */
body:not([data-page="page-store"]) .app-header{
  background:var(--c-header, rgba(255,255,255,.95));
  border-bottom-color:var(--line);
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
body:not([data-page="page-store"]) .app-header .hdr-btn{ background:#fff; border-color:var(--line); color:var(--ink); }
body:not([data-page="page-store"]) .app-header .hdr-name{ color:var(--ink); text-shadow:none; }
body:not([data-page="page-store"]) .app-header .hdr-sub{ color:var(--brand-d); }

/* ══ HEADER ═════════════════════════════════════════════ */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:120;height:64px;
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.app-header.scrolled{
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(23,19,16,.06);
}
.hdr-btn{
  width:42px;height:42px;flex-shrink:0;border:1.5px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;position:relative;transition:background .2s,border-color .2s,color .2s,transform .12s;
}
.hdr-btn:hover{background:rgba(255,255,255,.28)}
.hdr-btn:active{transform:scale(.95)}
.hdr-btn svg{width:20px;height:20px}
.app-header.scrolled .hdr-btn{background:#fff;border-color:var(--line);color:var(--ink)}
.app-header.scrolled .hdr-btn:hover{background:var(--brand-l);border-color:var(--brand-m)}
.hdr-cart{color:#fff}
.app-header.scrolled .hdr-cart{color:var(--brand-d)}

.hdr-brand{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0}
.hdr-logo{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:var(--grad-brand);color:#fff;font-size:19px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
}
.hdr-logo img{width:100%;height:100%;object-fit:cover}
.hdr-txt{min-width:0}
.hdr-name{
  font-family:var(--font-display);font-size:16.5px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.4);transition:color .25s;
}
.hdr-sub{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .25s;
}
.app-header.scrolled .hdr-name{color:var(--ink);text-shadow:none}
.app-header.scrolled .hdr-sub{color:var(--brand-d)}

.hdr-badge{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  background:var(--brand);color:#fff;border:2px solid #fff;border-radius:20px;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* ══ DRAWER ═════════════════════════════════════════════ */
.drawer-backdrop{
  position:fixed;inset:0;z-index:180;background:rgba(15,10,6,.5);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s;
}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:280px;max-width:84vw;z-index:190;
  background:linear-gradient(180deg,#1B140F 0%,#2A1C12 100%);
  transform:translateX(-102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:14px 0 44px rgba(0,0,0,.35);
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;gap:12px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer-head .hdr-logo{width:46px;height:46px;border-radius:14px;font-size:22px;background:rgba(255,255,255,.14);box-shadow:none}
.drawer-name{font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff}
.drawer-sub{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-m)}
.drawer-nav{flex:1;padding:14px 12px;overflow-y:auto}
.drawer-nav a{
  display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:13px;
  color:rgba(255,255,255,.72);text-decoration:none;font-weight:600;font-size:14.5px;
  margin-bottom:4px;transition:background .16s,color .16s;
}
.drawer-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.drawer-nav a svg{width:19px;height:19px;flex-shrink:0}
.drawer-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);font-size:11.5px;font-weight:600}

/* ══ HERO / BANNER ══════════════════════════════════════ */
.hero{position:relative;overflow:hidden;min-height:330px;display:flex;align-items:flex-end}
.hero-cover{position:absolute;inset:0;background:var(--grad-brand);background-size:cover;background-position:center;transform:scale(1.02)}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(12,7,4,.92) 0%,rgba(12,7,4,.55) 42%,rgba(12,7,4,.12) 100%);
}
.hero-body{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:26px 18px 22px}
.hero-logo{
  width:62px;height:62px;border-radius:18px;border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;font-size:29px;overflow:hidden;
  margin-bottom:12px;box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.hero-logo img{width:100%;height:100%;object-fit:cover}
.hero-name{
  font-family:var(--font-display);font-size:38px;font-weight:800;color:#fff;
  line-height:.98;letter-spacing:-.025em;text-transform:uppercase;
  text-shadow:0 4px 28px rgba(0,0,0,.5);margin-bottom:8px;
}
.hero-desc{font-size:13.5px;color:rgba(255,255,255,.85);max-width:560px;margin-bottom:13px;line-height:1.5}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap}
.hero-pill{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:22px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:12px;font-weight:700;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-pill.open{background:rgba(37,211,102,.26);border-color:rgba(37,211,102,.6);color:#B9FFD6;animation:pillPulse 2.4s ease-in-out infinite}
.hero-pill.closed{background:rgba(220,38,38,.3);border-color:rgba(248,113,113,.6);color:#FECACA}
@keyframes pillPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}50%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}

/* ══ BENEFÍCIOS ═════════════════════════════════════════ */
.benefits{
  max-width:1080px;margin:-22px auto 0;position:relative;z-index:3;
  padding:0 12px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;align-items:stretch;
}
.benefit{
  background:var(--surf);border:1px solid var(--line);border-radius:14px;
  padding:11px 10px;display:flex;align-items:flex-start;gap:8px;
  box-shadow:var(--sh);height:100%;overflow:hidden;
}
.benefit svg{width:19px;height:19px;flex-shrink:0;color:var(--brand);margin-top:1px}
.benefit > div{min-width:0;flex:1}
.benefit strong{display:block;font-size:11px;font-weight:800;line-height:1.18;letter-spacing:-.015em}
.benefit span{display:block;font-size:9.5px;color:var(--ink3);font-weight:600;line-height:1.28;margin-top:3px;overflow-wrap:anywhere}

/* ══ SEÇÕES ═════════════════════════════════════════════ */
.container{max-width:1080px;margin:0 auto;padding:6px 14px 24px}
.section-head{
  max-width:1080px;margin:0 auto;padding:22px 16px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.section-head h2{font-family:var(--font-display);font-size:21px;font-weight:800;letter-spacing:-.02em}
.link-more{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--brand-d);font-size:13.5px;font-weight:800;padding:6px 2px;
}
.link-more svg{width:15px;height:15px;transition:transform .18s}
.link-more:hover svg{transform:translateX(3px)}

/* ══ CATEGORIAS ═════════════════════════════════════════ */
.cat-bar{display:flex;flex-wrap:wrap;gap:9px;padding-bottom:4px}
.cat-btn{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:24px;
  border:1.5px solid var(--line);background:var(--surf);color:var(--ink2);
  font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:var(--sh);transition:all .18s;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.cat-btn svg{width:18px;height:18px;flex-shrink:0;color:var(--c,var(--brand));transition:color .16s}
.cat-btn:hover{border-color:var(--brand-m);color:var(--brand-d);transform:translateY(-1px)}
.cat-btn.active{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.cat-btn.active svg{color:#fff}

/* ══ PRODUTOS ═══════════════════════════════════════════ */
.prod-list{display:flex;flex-direction:column;gap:13px}
.cat-label{
  font-size:11.5px;font-weight:800;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em;
  padding:16px 2px 2px;display:flex;align-items:center;gap:10px;
}
.cat-label::after{content:'';flex:1;height:1px;background:var(--line)}

.pr{
  position:relative;display:flex;gap:13px;padding:12px;background:var(--surf);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);cursor:pointer;
  transition:box-shadow .22s,transform .18s,border-color .18s;
  animation:riseIn .4s ease both;
}
.pr:hover{box-shadow:var(--sh-md);transform:translateY(-3px);border-color:var(--brand-m)}
.pr:active{transform:scale(.994)}

.pr-img{
  position:relative;width:104px;height:104px;flex-shrink:0;border-radius:15px;overflow:hidden;
  background:linear-gradient(135deg,#FBF7F4,#F1EAE4);
  display:flex;align-items:center;justify-content:center;font-size:44px;
}
.pr-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pr:hover .pr-img img{transform:scale(1.07)}

.pr-badge{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--grad-brand);color:#fff;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:15px 0 12px 0;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.pr-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:2px 0}
.pr-name{font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.pr-desc{
  font-size:12px;color:var(--ink3);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pr-price{
  font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--brand-d);
  margin-top:9px;letter-spacing:-.01em;
}

.pr-side{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}
.pr-fav{
  width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink4);
  transition:all .16s;
}
.pr-fav svg{width:17px;height:17px}
.pr-fav:hover{border-color:#FCA5A5;color:#F87171}
.pr-fav.on{background:#FEE2E2;border-color:#FCA5A5;color:#EF4444}
.btn-add{
  width:46px;height:46px;border-radius:50%;border:none;background:var(--grad-brand);color:#fff;
  font-size:25px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.2);transition:filter .14s,transform .12s;
}
.btn-add:hover{filter:brightness(.95)}
.btn-add:active{transform:scale(.88)}
.pr-qty{
  font-family:var(--font-display);font-size:13px;font-weight:800;color:#fff;
  background:var(--brand);border-radius:20px;padding:1px 9px;
}

/* ══ RODAPÉ ═════════════════════════════════════════════ */
.store-footer{
  max-width:1080px;margin:0 auto;padding:22px 16px 34px;text-align:center;
  color:var(--ink3);font-size:12px;line-height:1.9;
}
.store-footer strong{color:var(--ink2);font-weight:800}
.store-footer .secure{display:inline-flex;align-items:center;gap:6px;background:var(--green-bg);color:#166534;font-weight:700;padding:5px 12px;border-radius:20px;margin-top:8px}
/* No rodapé global, garantir espaço para o menu inferior e a barra de carrinho */
body[data-page="page-store"] .store-footer{padding-bottom:calc(34px + var(--nav-h))}
body.has-cart[data-page="page-store"] .store-footer{padding-bottom:calc(34px + var(--nav-h) + var(--cart-h))}
body:not([data-page="page-store"]) .store-footer{padding-bottom:calc(34px + var(--nav-h) + env(safe-area-inset-bottom))}

/* ══ BARRA DE CARRINHO ══════════════════════════════════ */
.cart-bar{
  position:fixed;left:12px;right:12px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);
  z-index:130;min-height:var(--cart-h);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--line);border-radius:20px;box-shadow:0 16px 44px rgba(23,19,16,.22);
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  animation:cartUp .3s ease;
}
@keyframes cartUp{from{transform:translateY(60px);opacity:.4}to{transform:translateY(0);opacity:1}}
.cart-left{display:flex;align-items:center;gap:11px;min-width:0}
.cart-icon-wrap{position:relative;width:44px;height:44px;border-radius:14px;background:var(--brand-l);color:var(--brand-d);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cart-icon-wrap svg{width:21px;height:21px}
.cart-badge{
  position:absolute;top:-6px;right:-6px;background:var(--brand);color:#fff;min-width:20px;height:20px;
  padding:0 5px;border-radius:20px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.cart-qty{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-price{font-size:12.5px;color:var(--brand-d);font-weight:700}
.btn-cart-cta{
  background:var(--grad-brand);color:#fff;border:none;border-radius:14px;padding:14px 22px;
  font-size:14.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.2);transition:filter .15s,transform .12s;
}
.btn-cart-cta:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-cart-cta:active{transform:scale(.98)}

/* ══ MENU INFERIOR ══════════════════════════════════════ */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:140;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(23,19,16,.08);
  display:flex;align-items:center;justify-content:space-around;
}
.bn-item{
  flex:1;height:100%;background:none;border:none;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink3);font-size:10.5px;font-weight:700;font-family:var(--font-sans);
  transition:color .16s;
}
.bn-item svg{width:22px;height:22px}
.bn-item.active,.bn-item:hover{color:var(--brand-d)}
.bn-cart{
  flex:0 0 auto;background:none;border:none;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink3);font-size:10.5px;font-weight:700;font-family:var(--font-sans);
  padding:0 12px;margin-top:-24px;
}
.bn-cart-circle{
  width:58px;height:58px;border-radius:50%;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.28);border:4px solid #fff;transition:transform .15s;
}
.bn-cart:active .bn-cart-circle{transform:scale(.93)}
.bn-cart.active{color:var(--brand-d)}
.bn-cart.active .bn-cart-circle{box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 3px var(--brand-m)}
.bn-cart-circle svg{width:25px;height:25px}
.bn-badge{
  position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 5px;
  background:#fff;color:var(--brand-d);border-radius:20px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.2);
}

/* ══ CHECKOUT ═══════════════════════════════════════════ */
.co-top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.co-top h2{font-family:var(--font-display);font-size:17px;font-weight:800}
.co-back{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  font-size:17px;cursor:pointer;color:var(--ink2);display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .12s;
}
.co-back:hover{background:var(--bg);transform:translateX(-2px)}
.co-body{max-width:620px;margin:0 auto;padding:16px 14px 44px}

.co-card{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:var(--sh)}
.co-card h3{font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:15px;display:flex;align-items:center;gap:10px}
.co-ico{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;background:var(--brand-l);color:var(--brand-d);
  display:inline-flex;align-items:center;justify-content:center;
}
.co-ico svg{width:17px;height:17px}

.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.fg input{display:block;width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:13px;font-size:15px;font-family:var(--font-sans);color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.fg input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.fg input::placeholder{color:var(--ink4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.label-hint{font-size:10.5px;font-weight:600;color:var(--ink3);text-transform:none;letter-spacing:normal}

.ci{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:none}
.ci-l{display:flex;align-items:center;gap:11px;min-width:0}
.ci-thumb{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,#FBF7F4,#F1EAE4);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;flex-shrink:0}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-name{font-size:14px;font-weight:800;line-height:1.3}
.ci-each{font-size:11.5px;color:var(--ink3)}
.ci-r{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ctrl{width:31px;height:31px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--ink2);transition:all .15s}
.ctrl:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-l)}
.ci-qty{font-size:15px;font-weight:800;min-width:20px;text-align:center}
.ci-sub{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--brand-d);min-width:66px;text-align:right}

.co-totals{border-top:1.5px solid var(--line);padding-top:13px;margin-top:8px}
.tr{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2);margin-bottom:7px}
.tr.grand{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--ink);border-top:1.5px solid var(--line);padding-top:13px;margin-top:13px}
.tr.grand span:last-child{color:var(--brand-d)}

.secure-note{text-align:center;font-size:12px;color:var(--ink3);font-weight:600;margin:6px 0 12px}
.form-err{background:var(--red-bg);color:var(--red);border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:12px;border:1px solid #FCA5A5;font-weight:600}

.payment-methods{display:flex;flex-direction:column;gap:10px}
.payment-method{
  display:flex;align-items:center;gap:13px;padding:14px;margin:0;cursor:pointer;
  border:2px solid var(--line);border-radius:15px;background:#fff;
  text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:inherit;color:inherit;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.payment-method:hover{border-color:var(--brand-m)}
.payment-method.selected{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 4px var(--brand-ring)}
.payment-method input[type="radio"]{margin:0;width:20px;height:20px;padding:0;border:none;background:none;box-shadow:none;accent-color:var(--brand);flex-shrink:0;cursor:pointer}
.payment-method-icon{width:48px;height:48px;border-radius:14px;background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--brand-d);transition:all .18s}
.payment-method-icon svg{width:23px;height:23px}
.payment-method.selected .payment-method-icon{background:var(--grad-brand);border-color:transparent;color:#fff}
.payment-method-info{flex:1;min-width:0}
.payment-method-name{font-weight:800;font-size:14.5px;margin-bottom:2px;color:var(--ink)}
.payment-method-desc{font-size:12px;color:var(--ink3);line-height:1.4}

.btn-wpp-order{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#2BE07A,#25D366 45%,#1DA851);color:#fff;border:none;border-radius:16px;
  padding:17px;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 14px 32px rgba(37,211,102,.4);transition:filter .15s,transform .12s;margin-top:6px;
}
.btn-wpp-order:hover{filter:brightness(.96);transform:translateY(-1px)}

/* Cliente / histórico */
.customer-badge{background:var(--brand-l);border:1.5px solid var(--brand-m);border-radius:14px;padding:13px 15px;font-size:13px;font-weight:700;color:var(--brand-d);margin-bottom:13px;line-height:1.45}
.customer-badge small{font-weight:500;color:var(--ink2);font-size:11.5px;display:block;margin-top:2px}
.customer-orders-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.customer-orders-header h4{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:8px}
.btn-refresh-orders{background:var(--bg);border:none;cursor:pointer;padding:8px;border-radius:10px;color:var(--brand-d);display:inline-flex}
.btn-refresh-orders svg{width:16px;height:16px}
.btn-refresh-orders:hover{background:var(--line)}
.current-order-card{background:var(--brand-l);border:1.5px solid var(--brand-m);border-radius:16px;padding:16px;margin-bottom:13px}
.order-status-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.order-status-badge{color:#fff;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--ink3)}
.order-status-badge.new{background:var(--amber)}
.order-status-badge.accepted{background:var(--blue)}
.order-status-badge.prep{background:var(--violet)}
.order-status-badge.ready{background:var(--green)}
.order-status-badge.done{background:var(--ink2)}
.order-status-badge.cancelled{background:var(--red)}
.order-number{font-size:13.5px;font-weight:800}
.order-summary{font-size:13px;color:var(--ink2);margin-bottom:12px;line-height:1.5}
.order-actions{display:flex;gap:8px}
.btn-track-order{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand-d);
  border:1.5px solid var(--brand-m);border-radius:13px;padding:12px 22px;font-size:14px;font-weight:800;
  text-decoration:none;transition:background .15s,transform .12s;
}
.btn-track-order:hover{background:var(--brand-l);transform:translateY(-1px)}
.btn-track-order svg{width:16px;height:16px;flex-shrink:0}
.orders-history-list{display:flex;flex-direction:column;gap:8px}
.history-order-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;transition:border-color .15s,box-shadow .15s}
.history-order-item:hover{border-color:var(--brand-m);box-shadow:var(--sh)}
.history-order-info{flex:1;min-width:0}
.history-order-number{font-size:13px;font-weight:800}
.history-order-status{font-size:11px;color:var(--ink3);margin-top:2px}
.history-order-date{font-size:11px;color:var(--ink3)}
.history-order-link{font-size:12.5px;color:var(--brand-d);text-decoration:none;font-weight:800;white-space:nowrap}

.cep-row{display:flex;align-items:center;gap:10px}
.cep-input{flex:1}
.cep-link{font-size:12px;color:var(--brand-d);text-decoration:none;white-space:nowrap;font-weight:800}
.cep-status{font-size:12.5px;font-weight:700;padding:9px 12px;border-radius:11px;margin-top:6px}
.cep-status.loading{background:var(--blue-bg);color:var(--blue)}
.cep-status.ok{background:var(--green-bg);color:#166534}
.cep-status.error{background:var(--red-bg);color:var(--red)}

/* ══ SUCESSO / 404 ══════════════════════════════════════ */
.success-pg{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px 20px;position:relative;overflow:hidden;
  background:
    radial-gradient(620px 320px at 50% -10%, rgba(255,92,43,.13), transparent 65%),
    radial-gradient(520px 300px at 100% 105%, rgba(37,211,102,.10), transparent 60%),
    var(--bg);
}
.success-ring{
  position:relative;width:112px;height:112px;border-radius:50%;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 30px;
  box-shadow:0 22px 58px rgba(0,0,0,.2);animation:pop .55s cubic-bezier(.34,1.56,.64,1);
}
.success-ring::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(0,0,0,.12);animation:halo 2s ease-out infinite}
.success-ring svg{width:52px;height:52px}
.success-ring.muted{background:linear-gradient(135deg,#94A3B8,#475569)}
@keyframes halo{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.28);opacity:0}}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-pg h1{font-family:var(--font-display);font-size:32px;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.success-pg p{font-size:14.5px;color:var(--ink3);max-width:360px;line-height:1.65;margin-bottom:22px}
.success-num{background:#fff;color:var(--brand-d);font-size:15px;font-weight:800;padding:11px 26px;border-radius:24px;margin-bottom:26px;border:1.5px solid var(--brand-m);display:inline-block;box-shadow:var(--sh)}
.success-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin:0 auto}
.btn-open-wpp{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,#2BE07A,#25D366 45%,#1DA851);color:#fff;text-decoration:none;border-radius:15px;padding:16px 24px;font-size:16px;font-weight:800;box-shadow:0 14px 34px rgba(37,211,102,.4);transition:filter .15s,transform .15s}
.btn-open-wpp:hover{filter:brightness(.96);transform:translateY(-1px)}
.success-actions .btn-track-order{width:100%;justify-content:center;margin:0;padding:15px 24px;border-radius:15px;font-size:15px}
.btn-new-order{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:15px;padding:15px 24px;font-size:14.5px;font-weight:700;cursor:pointer;color:var(--ink2);transition:background .15s}
.btn-new-order:hover{background:var(--bg)}
.btn-new-order svg{width:16px;height:16px}
.success-note{margin-top:24px;font-size:12px;color:var(--ink3);font-weight:600}

/* ══ MODAL MEUS PEDIDOS ═════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(20,10,5,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
}
.orders-modal{
  background:var(--surf);width:100%;max-width:540px;max-height:88vh;
  border-radius:22px 22px 0 0;box-shadow:var(--sh-lg);display:flex;flex-direction:column;overflow:hidden;
  animation:sheetUp .3s cubic-bezier(.22,1,.36,1);
}
@keyframes sheetUp{from{transform:translateY(46px);opacity:.5}to{transform:translateY(0);opacity:1}}
.om-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.om-head h3{font-family:var(--font-display);font-size:17px;font-weight:800;display:flex;align-items:center;gap:9px;margin:0}
.om-close{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);transition:background .15s,color .15s;flex-shrink:0}
.om-close:hover{background:var(--red-bg);color:var(--red);border-color:transparent}
.om-close svg{width:16px;height:16px}
.om-body{padding:18px;overflow-y:auto}
.om-desc{font-size:13px;color:var(--ink3);margin-bottom:14px;line-height:1.55}
.om-phone-row{display:flex;gap:10px}
.om-phone-row input{flex:1;min-width:0;padding:14px;border:1.5px solid var(--line);border-radius:13px;font-size:16px;font-family:var(--font-sans);color:var(--ink);background:#fff}
.om-phone-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.om-btn{display:inline-flex;align-items:center;gap:7px;background:var(--grad-brand);color:#fff;border:none;border-radius:13px;padding:0 20px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18);white-space:nowrap;transition:filter .15s}
.om-btn:hover{filter:brightness(.95)}
.om-btn:disabled{opacity:.6;cursor:default}
.om-btn svg{width:15px;height:15px}
.om-msg{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.5}
.om-msg.err{background:var(--red-bg);color:var(--red)}
.om-msg.info{background:var(--amber-bg);color:#92400E}
.om-list{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.om-hello{font-size:13px;color:var(--ink2)}
.om-order{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px;border:1.5px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.om-order:hover{border-color:var(--brand-m);box-shadow:var(--sh-md);transform:translateY(-1px)}
.om-order-main{min-width:0;flex:1}
.om-order-id{font-size:13.5px;font-weight:800}
.om-order-items{font-size:11.5px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.om-order-date{font-size:11px;color:var(--ink3);margin-top:2px}
.om-order-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.om-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;background:var(--bg);color:var(--ink3)}
.om-status.new{background:var(--amber-bg);color:var(--amber)}
.om-status.accepted{background:var(--green-bg);color:var(--green)}
.om-status.prep{background:var(--amber-bg);color:var(--amber)}
.om-status.ready{background:var(--brand-l);color:var(--brand-d)}
.om-status.done{background:var(--green-bg);color:var(--green)}
.om-status.cancelled{background:var(--red-bg);color:var(--red)}
.om-order-total{font-size:13.5px;font-weight:800;color:var(--brand-d)}

/* ══ FLUTUANTES ═════════════════════════════════════════ */
.whatsapp-float{position:fixed;right:14px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);z-index:135}
body.has-cart .whatsapp-float{bottom:calc(var(--nav-h) + var(--cart-h) + env(safe-area-inset-bottom) + 18px)}
.whatsapp-float a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--green-d);color:#fff;border-radius:50%;box-shadow:0 12px 28px rgba(37,211,102,.45);text-decoration:none;transition:transform .22s,box-shadow .22s}
.whatsapp-float a:hover{transform:scale(1.08) rotate(4deg)}
.whatsapp-float a:active{transform:scale(.94)}

.push-notification-btn{
  position:fixed;left:14px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);z-index:135;
  display:flex;align-items:center;gap:8px;padding:13px 18px;border:none;border-radius:30px;
  background:var(--grad-brand);color:#fff;font-size:13px;font-weight:800;cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.22);transition:filter .15s,transform .15s;
}
body.has-cart .push-notification-btn{bottom:calc(var(--nav-h) + var(--cart-h) + env(safe-area-inset-bottom) + 18px)}
.push-notification-btn:hover{filter:brightness(.95);transform:translateY(-2px)}
.push-notification-btn.subscribed{background:linear-gradient(135deg,#2BE07A,#1DA851)}

/* ══ ANIMAÇÕES / SCROLL ═════════════════════════════════ */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.cat-label{animation:riseIn .4s ease both}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--ink4);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--brand-m)}
::selection{background:var(--brand-m);color:var(--ink)}

/* ══ RESPONSIVO ═════════════════════════════════════════ */

/* 320–360px */
@media(max-width:360px){
  .hdr-name{font-size:14.5px}
  .hero{min-height:290px}
  .hero-name{font-size:27px}
  .benefits{grid-template-columns:1fr;gap:7px}
  .benefit{padding:10px 12px;align-items:center}
  .benefit svg{width:21px;height:21px;margin-top:0}
  .benefit strong{font-size:12px}
  .benefit span{font-size:10.5px}
  .pr-img{width:88px;height:88px;font-size:38px}
  .pr-name{font-size:14px}
  .pr-price{font-size:17px}
  .btn-add{width:42px;height:42px;font-size:23px}
  .cat-btn{padding:10px 14px;font-size:12.5px}
  .section-head h2{font-size:18px}
  .bn-item span{font-size:9.5px}
  .bn-cart-circle{width:54px;height:54px}
  .cart-bar{left:8px;right:8px}
  .btn-cart-cta{padding:12px 16px;font-size:13.5px}
}

/* 361–480px */
@media(min-width:361px) and (max-width:480px){
  .pr-img{width:98px;height:98px;font-size:42px}
}

/* Tablet */
@media(min-width:640px){
  body{font-size:16px}
  .app-header{height:66px;padding:0 20px;gap:14px}
  body{padding-top:66px}
  .hero{min-height:400px}
  .hero-name{font-size:44px}
  .hero-body{padding:34px 28px 28px}
  .benefits{padding:0 26px;gap:14px}
  .benefit{padding:15px 16px}
  .benefit strong{font-size:13px}
  .benefit span{font-size:11px}
  .container{padding:8px 26px 30px}
  .section-head{padding:26px 28px 12px}
  .section-head h2{font-size:24px}
  .prod-list{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}
  .cat-label{grid-column:1/-1}
  .cart-bar{max-width:640px;margin:0 auto;left:0;right:0}
  .orders-modal{border-radius:22px}
  .modal-overlay{align-items:center;padding:20px}
}

/* Desktop */
@media(min-width:1024px){
  .hero{min-height:440px}
  .hero-name{font-size:52px}
  .hdr-logo{width:44px;height:44px;font-size:21px}
  .hdr-name{font-size:18px}
  .prod-list{grid-template-columns:1fr 1fr;gap:18px}
  .pr-img{width:118px;height:118px}
}

/* --------------------------------------------------------------
   CHECKOUT PREMIUM (stepper, itens, campos com �cones)
   -------------------------------------------------------------- */
.co-top h2{font-size:18px}
.co-back{border:none;background:#fff;box-shadow:var(--sh)}
.co-back svg{width:18px;height:18px}

/* Stepper */
.co-steps{
  display:flex;align-items:flex-start;justify-content:center;gap:4px;
  max-width:620px;margin:0 auto;padding:16px 14px 4px;
}
.cs{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto;width:66px}
.cs-dot{
  width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink4);transition:all .25s;
}
.cs-dot svg{width:16px;height:16px}
.cs-lbl{font-size:11px;font-weight:700;color:var(--ink4);white-space:nowrap;transition:color .25s}
.cs.done .cs-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.cs.done .cs-lbl{color:var(--ink2)}
.cs.active .cs-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--brand-ring)}
.cs.active .cs-lbl{color:var(--brand-d);font-weight:800}
.cs-line{flex:1;height:2px;background:var(--line);border-radius:2px;margin-top:18px;min-width:10px}
.cs-line.done{background:var(--brand)}

/* Cabe�alho do card com chip */
.co-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.co-card-head h3{margin-bottom:0}
.chip-ok{
  display:inline-flex;align-items:center;gap:5px;background:var(--green-bg);color:#166534;
  font-size:10.5px;font-weight:800;padding:6px 10px;border-radius:20px;white-space:nowrap;
}
.chip-ok svg{width:13px;height:13px;flex-shrink:0}

/* Inputs com �cone e check */
.inp{position:relative;display:flex;align-items:center}
.inp-ico{position:absolute;left:13px;display:flex;color:var(--ink3);pointer-events:none}
.inp-ico svg{width:17px;height:17px}
.inp input{padding-left:41px;padding-right:40px}
.inp-ok{position:absolute;right:12px;display:none;color:var(--green)}
.inp-ok svg{width:18px;height:18px}

/* Itens do pedido */
.ci{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:none}
.ci-thumb{
  width:62px;height:62px;border-radius:14px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#FBF7F4,#F1EAE4);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.ci-thumb img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:14px;font-weight:800;line-height:1.3}
.ci-each{font-size:11.5px;color:var(--ink3);margin-top:2px}
.ci-qtybox{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ctrl{
  width:31px;height:31px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink2);font-size:17px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.ctrl:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-l)}
.ci-qty{
  min-width:32px;height:31px;border-radius:10px;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.ci-sub{font-family:var(--font-display);font-size:15.5px;font-weight:800;color:var(--brand-d);min-width:72px;text-align:right;flex-shrink:0}

/* Cupom de desconto */
.coupon-input-row{display:flex;gap:9px;margin-top:14px}
.coupon-input-row .inp{flex:1}
.btn-coupon{
  background:var(--brand-l);color:var(--brand-d);border:1.5px solid var(--brand-m);
  border-radius:13px;padding:0 18px;font-size:13.5px;font-weight:800;cursor:pointer;
  font-family:var(--font-sans);white-space:nowrap;transition:background .15s;
}
.btn-coupon:hover{background:var(--brand-m)}
.coupon-msg{margin-top:10px;padding:11px 14px;border-radius:12px;font-size:12.5px;font-weight:700}
.coupon-msg.ok{background:var(--green-bg);color:#166534}
.coupon-msg.err{background:var(--red-bg);color:var(--red)}

/* Totais */
.co-totals{border-top:1.5px solid var(--line);margin-top:6px;padding-top:14px}
.co-totals .tr{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2);margin-bottom:8px}
.co-totals .tr.grand{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--brand-l);border-radius:14px;padding:14px 16px;margin:12px 0 0;
  font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink);border-top:none;
}
.co-totals .tr.grand span:last-child{font-size:23px;color:var(--brand-d)}

/* Nota de seguran�a */
.secure-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--ink3);font-weight:600;margin:8px 0 12px}
.secure-note svg{width:15px;height:15px;flex-shrink:0}

/* Bot�o confirmar com total */
.btn-wpp-order{gap:9px}
.btn-wpp-order > svg{width:19px;height:19px;flex-shrink:0}
.co-btn-total{font-size:15px;font-weight:800}

@media(max-width:400px){
  .cs{width:56px}
  .cs-lbl{font-size:10px}
  .cs-dot{width:32px;height:32px}
  .cs-line{margin-top:16px}
  .ci-thumb{width:54px;height:54px;font-size:24px}
  .ci-sub{min-width:62px;font-size:14px}
  .chip-ok{font-size:9.5px;padding:5px 8px}
}

/* ══ Cores extras configuráveis por loja (Aparência) ═════════ */
body[data-page="page-store"]{
  background:var(--c-bg, var(--bg));
  color:var(--c-text, var(--ink));
}
.app-header.scrolled{ background:var(--c-header, rgba(255,255,255,.95)); }
.btn-add,
.btn-cart-cta,
.bn-cart-circle,
.cat-btn.active{ background:var(--c-btn, var(--grad-brand)); }
.pr-price,
.ci-sub,
.tr.grand span:last-child,
.co-totals .tr.grand span:last-child{ color:var(--c-price, var(--brand-d)); }
.pr-badge{ background:var(--c-secondary, var(--grad-brand)); }
.cep-link,
.history-order-link,
.link-more,
.btn-coupon{ color:var(--c-link, var(--brand-d)); }
.btn-coupon{ border-color:var(--c-link, var(--brand-m)); }

/* Botão de ativação das notificações push (cliente) */
.push-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:10px 16px; border:1.5px solid rgba(255,255,255,.55); border-radius:999px; background:rgba(0,0,0,.38); color:#fff; font:600 13px/1 'Plus Jakarta Sans',system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s,transform .2s; }
.push-btn:hover{ background:rgba(0,0,0,.55); transform:translateY(-1px); }
.push-btn svg{ width:16px; height:16px; }
.push-btn.subscribed{ background:rgba(22,163,74,.9); border-color:rgba(255,255,255,.4); }
.push-btn:disabled{ opacity:.65; cursor:wait; }