/* ===================================================================
   FarmaVizinha — Design System
   Farmácia de bairro, estilo app de delivery. Mobile-first.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root{
  /* Marca */
  --brand-red: #E8342B;
  --brand-red-dark: #C41F1F;
  --brand-red-light: #FDEBEA;
  --brand-green: #0FA968;
  --brand-green-dark: #0B7F4F;
  --brand-green-light: #E4F8EF;
  --brand-amber: #FFB020;
  --brand-amber-light: #FFF4DF;

  /* Neutros */
  --ink-900: #16181D;
  --ink-800: #23262D;
  --ink-700: #3A3E47;
  --ink-500: #6B7280;
  --ink-400: #9AA0AC;
  --ink-300: #C7CBD1;
  --ink-200: #E4E7EB;
  --ink-100: #F0F2F5;
  --ink-50:  #F7F8FA;
  --white: #FFFFFF;

  /* Semântico */
  --bg-app: #F5F6F8;
  --surface: #FFFFFF;
  --border: #EAECEF;
  --success: #0FA968;
  --danger: #E8342B;
  --warning: #FFB020;
  --info: #2E7BF6;

  /* Tipografia */
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Poppins', 'Inter', ui-sans-serif, sans-serif;

  /* Espaçamento / raio */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(22,24,29,0.06), 0 1px 1px rgba(22,24,29,0.04);
  --shadow-md: 0 8px 24px rgba(22,24,29,0.08);
  --shadow-lg: 0 16px 40px rgba(22,24,29,0.14);
  --shadow-card: 0 2px 10px rgba(22,24,29,0.06);

  --topbar-h: 64px;
  --bottomnav-h: 66px;
  --app-max: 1240px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg-app);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bottomnav-h) + 10px);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.2; }
p{ margin:0; }
input, select, textarea{ font-family: inherit; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--ink-300); border-radius:3px; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.container{
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* ===================== Skip link / a11y ===================== */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink-900); color:#fff;
  padding:10px 16px; border-radius: 0 0 10px 0; z-index:999;
}
.skip-link:focus{ left:0; }

/* ===================== Topbar ===================== */
.topbar{
  position: sticky; top:0; z-index:40;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: var(--app-max);
  margin:0 auto;
  padding: 10px 16px;
  display:flex; align-items:center; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:800; font-size:19px;
  color: var(--ink-900); white-space:nowrap;
}
.brand .brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(145deg, var(--brand-red), var(--brand-red-dark));
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  box-shadow: 0 4px 10px rgba(232,52,43,.35);
}
.brand .brand-mark svg{ width:19px; height:19px; }
.brand small{ display:block; font-family: var(--font-body); font-weight:500; font-size:11px; color: var(--ink-500); }

.delivery-pill{
  display:flex; align-items:center; gap:6px;
  background: var(--brand-green-light); color: var(--brand-green-dark);
  font-size:12.5px; font-weight:700; padding:7px 12px; border-radius: var(--radius-full);
  white-space:nowrap;
}
.delivery-pill svg{ width:14px; height:14px; flex-shrink:0; }

.topbar-search{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  background: var(--ink-100); border-radius: var(--radius-full);
  padding: 10px 16px; color: var(--ink-500); font-size:14px;
}
.topbar-search svg{ width:17px; height:17px; flex-shrink:0; }
.topbar-search input{ border:0; background:transparent; outline:0; width:100%; color:var(--ink-900); font-size:14px; }
.topbar-search input::placeholder{ color: var(--ink-400); }

.icon-btn{
  position:relative;
  width:40px; height:40px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background: var(--ink-100); border:0; color: var(--ink-800); flex-shrink:0;
  transition: background .15s ease, transform .15s ease;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background: var(--ink-200); transform: translateY(-1px); }
.icon-btn .badge-dot{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px;
  background: var(--brand-red); color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--surface);
}

.desktop-nav{ display:none; align-items:center; gap:22px; margin-left:8px; }
.desktop-nav a{ font-size:14px; font-weight:600; color:var(--ink-600,#4b5563); padding:6px 2px; border-bottom:2px solid transparent; }
.desktop-nav a.active, .desktop-nav a:hover{ color:var(--brand-red); border-color: var(--brand-red); }

/* ===================== Bottom Nav (mobile app) ===================== */
.bottom-nav{
  position: fixed; left:0; right:0; bottom:0; z-index:50;
  height: var(--bottomnav-h);
  background: var(--surface);
  border-top:1px solid var(--border);
  display:flex; align-items:stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -6px 20px rgba(22,24,29,.05);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color: var(--ink-400); font-size:11px; font-weight:600; position:relative;
}
.bottom-nav a svg{ width:22px; height:22px; transition: transform .15s ease; }
.bottom-nav a.active{ color: var(--brand-red); }
.bottom-nav a.active svg{ transform: translateY(-2px); }
.bottom-nav a .nav-badge{
  position:absolute; top:2px; right:calc(50% - 18px);
  background: var(--brand-red); color:#fff; font-size:9px; font-weight:800;
  min-width:15px; height:15px; border-radius:999px; display:flex; align-items:center; justify-content:center;
}

@media (min-width: 900px){
  .bottom-nav{ display:none; }
  .desktop-nav{ display:flex; }
  body{ padding-bottom:0; }
}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius: var(--radius-full);
  font-weight:700; font-size:14.5px; padding:13px 22px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background: var(--brand-red); color:#fff; box-shadow: 0 8px 18px rgba(232,52,43,.28); }
.btn-primary:hover{ background: var(--brand-red-dark); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-primary:disabled{ opacity:.5; box-shadow:none; cursor:not-allowed; transform:none; }
.btn-secondary{ background: var(--ink-100); color: var(--ink-900); }
.btn-secondary:hover{ background: var(--ink-200); }
.btn-outline{ background: transparent; border:1.5px solid var(--border); color: var(--ink-900); }
.btn-outline:hover{ border-color: var(--brand-red); color: var(--brand-red); }
.btn-ghost{ background: transparent; color: var(--brand-red); }
.btn-green{ background: var(--brand-green); color:#fff; box-shadow: 0 8px 18px rgba(15,169,104,.28); }
.btn-green:hover{ background: var(--brand-green-dark); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; }
.btn-icon-only{ width:44px; height:44px; padding:0; border-radius:var(--radius-full); }

/* ===================== Chips / Badges ===================== */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius: var(--radius-full);
  background: var(--surface); border:1.5px solid var(--border);
  font-size:13.5px; font-weight:600; color: var(--ink-700);
  white-space:nowrap; transition: all .15s ease;
}
.chip img, .chip .chip-emoji{ width:18px; height:18px; }
.chip.active{ background: var(--ink-900); color:#fff; border-color: var(--ink-900); }
.chip:hover{ border-color: var(--ink-900); }

.badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.2px; }
.badge-red{ background: var(--brand-red-light); color: var(--brand-red-dark); }
.badge-green{ background: var(--brand-green-light); color: var(--brand-green-dark); }
.badge-amber{ background: var(--brand-amber-light); color:#92600A; }
.badge-ink{ background: var(--ink-100); color: var(--ink-700); }

/* ===================== Sections ===================== */
.section{ padding: 22px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-head h2{ font-size:19px; font-weight:800; }
.section-head a{ font-size:13px; font-weight:700; color: var(--brand-red); }
.eyebrow{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--brand-green-dark); }

.scroll-row{ display:flex; gap:10px; overflow-x:auto; padding: 2px 16px 10px; margin: 0 -16px; }
.scroll-row.no-scrollbar{ scrollbar-width:none; }

/* ===================== Hero ===================== */
.hero{
  position:relative; margin: 12px 16px 0; border-radius: var(--radius-lg);
  overflow:hidden; min-height:230px; display:flex; align-items:flex-end;
  box-shadow: var(--shadow-md);
}
.hero-content{ position:relative; z-index:2; padding:22px; color:#fff; }
.hero-content .badge-amber{ margin-bottom:10px; }
.hero-content h1{ font-size:24px; font-weight:800; margin-bottom:8px; max-width:320px; }
.hero-content p{ font-size:13.5px; color:rgba(255,255,255,.85); max-width:320px; margin-bottom:16px; }

@media (min-width:700px){
  .hero{ min-height:320px; }
  .hero-content h1{ font-size:32px; max-width:440px; }
  .hero-content p{ font-size:15px; max-width:420px; }
}

/* ===================== Category tiles ===================== */
.cat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.cat-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.cat-tile .cat-ico{
  width:60px; height:60px; border-radius: 18px; overflow:hidden;
  background: var(--ink-100); box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s ease;
}
.cat-tile:hover .cat-ico{ transform: translateY(-3px) scale(1.03); }
.cat-ico img{ width:100%; height:100%; object-fit:cover; }
.cat-tile span{ font-size:11.5px; font-weight:700; color: var(--ink-700); line-height:1.2; }

@media (min-width:520px){ .cat-grid{ grid-template-columns: repeat(6,1fr); } }
@media (min-width:900px){ .cat-grid{ grid-template-columns: repeat(8,1fr); } .cat-tile .cat-ico{ width:72px; height:72px; } }

/* ===================== Product cards ===================== */
.product-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
@media (min-width:560px){ .product-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width:900px){ .product-grid{ grid-template-columns: repeat(4,1fr); gap:16px; } }
@media (min-width:1180px){ .product-grid{ grid-template-columns: repeat(5,1fr); } }

.product-card{
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow:hidden; position:relative;
  display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid var(--border);
}
.product-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-card .pc-media{ position:relative; aspect-ratio: 1/1; background: var(--ink-50); overflow:hidden; }
.product-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.product-card:hover .pc-media img{ transform: scale(1.05); }
.product-card .pc-media span{ transition: transform .3s ease; }
.product-card:hover .pc-media span{ transform: scale(1.12); }
.product-card .pc-fav{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px); border:0;
  display:flex; align-items:center; justify-content:center; color: var(--ink-500);
  box-shadow: var(--shadow-sm);
}
.product-card .pc-fav svg{ width:16px; height:16px; }
.product-card .pc-fav.active{ color: var(--brand-red); }
.product-card .pc-badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; }
.product-card .pc-body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1; }
.product-card .pc-cat{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-400); }
.product-card .pc-name{ font-size:13.5px; font-weight:700; color: var(--ink-900); line-height:1.3; min-height:34px; }
.product-card .pc-rating{ display:flex; align-items:center; gap:4px; font-size:11.5px; color: var(--ink-500); }
.product-card .pc-rating svg{ width:12px; height:12px; color: var(--brand-amber); }
.product-card .pc-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
.product-card .pc-price{ display:flex; flex-direction:column; }
.product-card .pc-old{ font-size:11px; color: var(--ink-400); text-decoration: line-through; }
.product-card .pc-now{ font-size:16px; font-weight:800; color: var(--ink-900); }
.product-card .pc-add{
  width:36px; height:36px; border-radius:999px; background: var(--brand-red); color:#fff; border:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: 0 6px 14px rgba(232,52,43,.3);
  transition: transform .15s ease, background .15s ease;
}
.product-card .pc-add svg{ width:17px; height:17px; }
.product-card .pc-add:hover{ background: var(--brand-red-dark); transform: scale(1.08); }
.product-card .pc-add.added{ background: var(--brand-green); }
.product-card .pc-stock-out{ position:absolute; inset:0; background:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; z-index:3; }

.qty-stepper{ display:flex; align-items:center; gap:0; background: var(--brand-red); border-radius:999px; box-shadow: 0 6px 14px rgba(232,52,43,.3); }
.qty-stepper button{ width:30px; height:30px; border:0; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; }
.qty-stepper button svg{ width:14px; height:14px; }
.qty-stepper span{ min-width:18px; text-align:center; color:#fff; font-weight:800; font-size:13px; }

/* ===================== Promo banner ===================== */
.promo-banner{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:130px;
  display:flex; align-items:center; box-shadow: var(--shadow-md);
}
.promo-banner .promo-content{ position:relative; z-index:2; padding:20px 22px; color:#fff; max-width:70%; }
.promo-banner h3{ font-size:18px; font-weight:800; margin-bottom:4px; }
.promo-banner p{ font-size:12.5px; opacity:.9; }

/* ===================== Cards genéricos ===================== */
.card{ background: var(--surface); border-radius: var(--radius-md); border:1px solid var(--border); box-shadow: var(--shadow-card); }
.card-pad{ padding:18px; }

/* ===================== Forms ===================== */
.form-group{ margin-bottom:16px; }
.form-label{ display:block; font-size:13px; font-weight:700; color: var(--ink-800); margin-bottom:7px; }
.form-input{
  width:100%; padding:13px 15px; border-radius: var(--radius-sm); border:1.5px solid var(--border);
  background: var(--ink-50); font-size:14.5px; color: var(--ink-900); outline:0;
  transition: border-color .15s ease, background .15s ease;
}
.form-input:focus{ border-color: var(--brand-red); background: var(--surface); }
.form-input::placeholder{ color: var(--ink-400); }
.form-hint{ font-size:12px; color: var(--ink-500); margin-top:6px; }
.form-error{ font-size:12px; color: var(--danger); margin-top:6px; display:none; font-weight:600; }
.form-group.has-error .form-input{ border-color: var(--danger); background: var(--brand-red-light); }
.form-group.has-error .form-error{ display:block; }
select.form-input{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right:38px; }

.otp-inputs{ display:flex; gap:9px; justify-content:center; margin: 6px 0 4px; }
.otp-inputs input{
  width:44px; height:52px; text-align:center; font-size:20px; font-weight:800;
  border-radius: var(--radius-sm); border:1.5px solid var(--border); background: var(--ink-50); outline:0;
}
.otp-inputs input:focus{ border-color: var(--brand-red); background:#fff; }

.check-row{ display:flex; align-items:center; gap:10px; padding:14px 16px; border:1.5px solid var(--border); border-radius: var(--radius-md); cursor:pointer; transition: border-color .15s ease, background .15s ease; }
.check-row.selected{ border-color: var(--brand-red); background: var(--brand-red-light); }
.check-row input{ accent-color: var(--brand-red); width:18px; height:18px; flex-shrink:0; }
.check-row .cr-icon{ width:38px; height:38px; border-radius:10px; background: var(--ink-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.check-row .cr-icon svg{ width:19px; height:19px; }
.check-row .cr-text strong{ display:block; font-size:14px; }
.check-row .cr-text span{ font-size:12px; color: var(--ink-500); }

/* ===================== Steps / Tabs ===================== */
.tabs{ display:flex; background: var(--ink-100); border-radius: var(--radius-full); padding:4px; gap:2px; }
.tabs button{ flex:1; border:0; background:transparent; padding:10px; border-radius: var(--radius-full); font-weight:700; font-size:13.5px; color: var(--ink-500); transition: all .15s ease; }
.tabs button.active{ background:#fff; color: var(--ink-900); box-shadow: var(--shadow-sm); }

.stepper-track{ display:flex; align-items:center; margin: 18px 0 26px; }
.stepper-step{ display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; flex:1; }
.stepper-step .dot{ width:34px; height:34px; border-radius:999px; background: var(--ink-100); color: var(--ink-400); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; border:2px solid var(--ink-100); z-index:2; }
.stepper-step span{ font-size:11px; font-weight:700; color: var(--ink-400); text-align:center; }
.stepper-step.done .dot{ background: var(--brand-green); color:#fff; border-color: var(--brand-green); }
.stepper-step.done span{ color: var(--brand-green-dark); }
.stepper-step.current .dot{ background: var(--brand-red); color:#fff; border-color: var(--brand-red); box-shadow: 0 0 0 5px var(--brand-red-light); }
.stepper-step.current span{ color: var(--brand-red); }
.stepper-step:not(:last-child)::after{ content:''; position:absolute; top:17px; left:calc(50% + 22px); width:calc(100% - 20px); height:2px; background: var(--ink-100); z-index:1; }
.stepper-step.done:not(:last-child)::after{ background: var(--brand-green); }

/* ===================== Toast ===================== */
.toast-wrap{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(92vw,380px); pointer-events:none; }
.toast{
  display:flex; align-items:center; gap:10px; background: var(--ink-900); color:#fff; padding:13px 16px;
  border-radius: var(--radius-md); font-size:13.5px; font-weight:600; box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease both; pointer-events:auto;
}
.toast svg{ width:18px; height:18px; flex-shrink:0; }
.toast.success{ background: var(--brand-green-dark); }
.toast.error{ background: var(--brand-red-dark); }
@keyframes toastIn{ 0%{ opacity:0; transform: translateY(-14px) scale(.96);} 100%{ opacity:1; transform: translateY(0) scale(1);} }
.toast.leaving{ animation: toastOut .2s ease forwards; }
@keyframes toastOut{ to{ opacity:0; transform: translateY(-10px) scale(.96);} }

/* ===================== Skeletons (loading state) ===================== */
.skel{ background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%, var(--ink-100) 63%); background-size: 400% 100%; animation: skel-loading 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skel-loading{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.skel-card{ height:0; padding-bottom:100%; border-radius: var(--radius-md); position:relative; overflow:hidden; }
.skel-line{ height:12px; border-radius:6px; margin-bottom:8px; }
.skel-circle{ border-radius:999px; }

/* ===================== Empty states ===================== */
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 50px 24px; gap:14px; }
.empty-state .es-ico{ width:88px; height:88px; border-radius:999px; background: var(--ink-100); display:flex; align-items:center; justify-content:center; color: var(--ink-400); }
.empty-state .es-ico svg{ width:40px; height:40px; }
.empty-state h3{ font-size:17px; font-weight:800; }
.empty-state p{ font-size:13.5px; color: var(--ink-500); max-width:280px; }

/* ===================== Cart mini bar ===================== */
.cart-fab-bar{
  position: fixed; left:16px; right:16px; z-index:60;
  bottom: calc(var(--bottomnav-h) + 12px);
  background: var(--brand-red); color:#fff; border-radius: var(--radius-full);
  padding: 13px 18px; display:none; align-items:center; justify-content:space-between; gap:12px;
  box-shadow: 0 12px 28px rgba(232,52,43,.4);
  transform: translateY(140%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.cart-fab-bar.visible{ transform: translateY(0); }
.cart-fab-bar .cfb-left{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:13.5px; }
.cart-fab-bar .cfb-count{ background: rgba(255,255,255,.25); width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; }
.cart-fab-bar .cfb-right{ display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; }
.cart-fab-bar .cfb-right svg{ width:16px; height:16px; }

@media (min-width:900px){ .cart-fab-bar{ left:auto; right:32px; bottom:32px; max-width:340px; } }

/* ===================== Page header (inner pages) ===================== */
.page-head{ display:flex; align-items:center; gap:12px; padding: 14px 16px; background: var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
.page-head h1{ font-size:17px; font-weight:800; }
.page-head .back-btn{ width:38px; height:38px; border-radius:999px; background: var(--ink-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-head .back-btn svg{ width:19px; height:19px; }

/* ===================== Auth screens ===================== */
.auth-wrap{ min-height:calc(100vh - var(--bottomnav-h)); display:flex; flex-direction:column; justify-content:center; padding: 30px 20px 40px; max-width:440px; margin:0 auto; width:100%; }
.auth-logo{ display:flex; justify-content:center; margin-bottom:22px; }
.auth-logo .brand-mark{ width:56px; height:56px; border-radius:18px; }
.auth-logo .brand-mark svg{ width:30px; height:30px; }
.auth-title{ text-align:center; font-size:23px; font-weight:800; margin-bottom:6px; }
.auth-sub{ text-align:center; font-size:13.5px; color: var(--ink-500); margin-bottom:26px; }

/* ===================== Footer (desktop) ===================== */
.site-footer{ display:none; }
@media (min-width:900px){
  .site-footer{
    display:block; background: var(--ink-900); color: var(--ink-300); margin-top:40px; padding: 44px 0 24px;
  }
  .footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
  .footer-grid h4{ color:#fff; font-size:14px; margin-bottom:14px; }
  .footer-grid ul li{ margin-bottom:9px; font-size:13px; }
  .footer-grid ul a:hover{ color:#fff; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
}

/* ===================== Utilities ===================== */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{ text-align:center; }
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-8{gap:8px;} .gap-12{gap:12px;}
.fade-up{ animation: fadeUp .5s ease both; }
@keyframes fadeUp{ 0%{ opacity:0; transform: translateY(14px);} 100%{ opacity:1; transform:translateY(0);} }
.stagger > *{ animation: fadeUp .45s ease both; }
.stagger > *:nth-child(1){animation-delay:.03s;} .stagger > *:nth-child(2){animation-delay:.07s;} .stagger > *:nth-child(3){animation-delay:.11s;}
.stagger > *:nth-child(4){animation-delay:.15s;} .stagger > *:nth-child(5){animation-delay:.19s;} .stagger > *:nth-child(6){animation-delay:.23s;}
.stagger > *:nth-child(7){animation-delay:.27s;} .stagger > *:nth-child(8){animation-delay:.31s;}

.divider{ height:8px; background: var(--ink-100); margin: 0 -16px; }
@media (min-width:900px){ .divider{ display:none; } }

.cart-summary-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; color: var(--ink-700); }
.cart-summary-row.total{ font-size:16px; font-weight:800; color: var(--ink-900); border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }

.rating-stars{ display:inline-flex; gap:2px; color: var(--brand-amber); }
.rating-stars svg{ width:14px; height:14px; }

.locked-banner{ display:flex; gap:12px; align-items:flex-start; background: var(--brand-amber-light); border:1px solid #F5D68C; border-radius: var(--radius-md); padding:14px 16px; }
.locked-banner svg{ width:20px; height:20px; color:#92600A; flex-shrink:0; margin-top:1px; }
.locked-banner p{ font-size:13px; color:#6B4A0C; }
.locked-banner strong{ display:block; font-size:13.5px; color:#4A3305; margin-bottom:2px; }

/* ===================== Media tiles (ilustração por categoria, sem fotos) ===================== */
.media-tile{ display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.media-tile::after{ content:''; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size:14px 14px; opacity:.5; }
.media-tile span{ position:relative; z-index:1; display:flex; }
.media-tile span svg{ filter: drop-shadow(0 3px 5px rgba(0,0,0,.1)); }
.media-tile.mt-cat span svg{ width:24px; height:24px; }
.media-tile.mt-sm span svg{ width:24px; height:24px; }
.media-tile.mt-md span svg{ width:34px; height:34px; }
.media-tile.mt-lg span svg{ width:64px; height:64px; }
.media-tile.mt-xl span svg{ width:84px; height:84px; }

.cat-medicamentos{ background: linear-gradient(135deg,#FFDAD6,#FDEDEC); color:#C6362D; }
.cat-dermocosmeticos{ background: linear-gradient(135deg,#F6D9EE,#FCEFF8); color:#A63D8C; }
.cat-higiene{ background: linear-gradient(135deg,#D6E9FD,#EDF6FE); color:#1D6FC2; }
.cat-bebe{ background: linear-gradient(135deg,#FFEFB8,#FFF9E2); color:#92600A; }
.cat-vitaminas{ background: linear-gradient(135deg,#CDF3E1,#E9FAF1); color:#0B7F4F; }
.cat-perfumaria{ background: linear-gradient(135deg,#E6DAF8,#F4EEFC); color:#6B3FA0; }
.cat-conveniencia{ background: linear-gradient(135deg,#FFE1C2,#FFF3E5); color:#B5590E; }

/* ===================== Ilustrações CSS (hero, promo, sobre, mapa) ===================== */
.illus-pattern{ position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px); background-size:20px 20px; }
.illus-icon-big{ opacity:.16; }
.illus-icon-big svg{ width:100%; height:100%; }

.about-avatar{ width:100%; aspect-ratio:1/1; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--brand-red), var(--brand-red-dark)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow: var(--shadow-md); }
.about-avatar .aa-initials{ font-family: var(--font-display); font-weight:800; font-size:64px; color:#fff; position:relative; z-index:1; }

.map-illustration{ position:relative; background: linear-gradient(150deg,#E9F9F0,#F5FBF8); border-radius: var(--radius-lg); overflow:hidden; min-height:220px; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md); }
.map-illustration .map-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(15,169,104,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15,169,104,.08) 1px, transparent 1px); background-size:28px 28px; }
.map-illustration .map-ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:999px; border:2px dashed rgba(15,169,104,.35); }
.map-illustration .map-pin{ position:relative; z-index:2; width:56px; height:56px; border-radius:999px; background: var(--brand-red); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(232,52,43,.4); }
.map-illustration .map-pin svg{ width:26px; height:26px; }
.map-illustration .map-dot{ position:absolute; width:9px; height:9px; border-radius:999px; background: var(--brand-green-dark); box-shadow:0 0 0 4px rgba(15,169,104,.18); }