:root{
  --text:#f2f2f2;
  --search:#e7dfd3;
  --searchText:#6c6c6c;
  --badge:#e53935;
  --card:#ffffff;
  --stroke:#e2e2e2;
  --cacaos:#8f1f1f;
  --green:#5d9657;
  --blue:#1f66ff;
}

*{box-sizing:border-box}
body{margin:0;background:#0f0f0f;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}

.topbar{
  background:linear-gradient(#2a2a2a,#1b1b1b);
  padding:10px 14px 12px;
}

.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:12px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.brand__mark{
  width:26px;height:26px;display:grid;place-items:center;
  border:2px solid #e9e9e9;border-radius:999px;font-weight:800;line-height:1;
}
.brand__text{font-size:18px;font-weight:600;white-space:nowrap}

.actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  position:relative;width:38px;height:38px;border:0;background:transparent;padding:0;
  display:grid;place-items:center;border-radius:10px;cursor:pointer;
}
.icon-btn svg{width:24px;height:24px;fill:#f2f2f2;opacity:.95}
.badge{
  position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--badge);color:#fff;font-size:11px;line-height:16px;text-align:center;font-weight:700;
}

.search{
  margin-top:10px;display:flex;align-items:center;gap:10px;
  background:var(--search);border-radius:10px;padding:10px 12px;
}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:15px;color:var(--searchText)}
.search__btn{border:0;background:transparent;width:28px;height:28px;display:grid;place-items:center;cursor:pointer}
.search__btn svg{width:22px;height:22px;fill:#8c6f60}

.store{
  margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#1b1b1b;border:1px solid #2a2a2a;border-radius:10px;padding:10px 12px;color:#eaeaea;
}
.store__line1{display:flex;align-items:center;gap:8px}
.pin svg{width:18px;height:18px;fill:#d7d7d7}
.store__name{font-size:14px}
.store__change{margin-top:6px;background:transparent;border:0;color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}
.store__enter{
  display:flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:10px 14px;
  background:#8f6f60;color:#fff;font-weight:800;cursor:pointer;
}
.user-ico svg{width:18px;height:18px;fill:#fff}

/* PAGE */
.page{padding:14px}
.grid{display:grid;gap:14px}

/* CARD */
.p-card{background:var(--card);border:1px solid var(--stroke);border-radius:10px;overflow:hidden}
.p-card__media{
  position:relative;background:#fff;height:190px;
  display:flex;align-items:center;justify-content:center;
}
.p-card__media img{
  width:78%;
  max-height:175px;
  object-fit:contain;
}
.fav{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;background:#fff;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.fav svg{width:20px;height:20px;fill:#2a66ff}
.fav.is-on svg{fill:var(--blue)}
.pre{
  position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;
  background:#fff;border:1px solid #c8d7ff;color:#1a57ff;padding:6px 10px;border-radius:999px;
}

.p-card__body{padding:12px 12px 10px}
.p-title{margin:0 0 10px;font-size:16px;font-weight:500;color:#111;line-height:1.25}

.p-badges{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.cacaos{
  display:inline-flex;align-items:center;gap:6px;background:var(--cacaos);
  color:#fff;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;
}
.cacaos::before{content:"";width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-block}

.p-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.p-price .old{font-size:13px;color:#8a8a8a;text-decoration:line-through;margin-bottom:4px}
.p-price .new{display:flex;align-items:baseline;gap:6px}
.p-price .val{font-size:24px;font-weight:800;color:#111}
.p-price .unit{font-size:12px;color:#6f6f6f}

.one{
  width:54px;height:44px;border:1px solid #e6e6e6;border-radius:8px;
  display:grid;place-items:center;font-weight:900;color:#111;background:#fff;
}

/* ADD BUTTON (sem ícone de carrinho por produto) */
.add{
  width:100%;border:0;background:var(--green);color:#fff;font-weight:900;
  letter-spacing:.2px;padding:14px 16px;cursor:pointer;
  display:flex;justify-content:center;align-items:center;
}
.add.is-added{background:#3f7a3a;opacity:.95}
.add[disabled]{cursor:not-allowed;filter:saturate(.9)}


/* PROMO */
.promo{
  background:#ffffff;
  border:2px solid #1f66ff22;
  border-radius:14px;
  padding:12px 12px 10px;
  margin-bottom:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  position:sticky;
  top:8px;
  z-index:5;
}
.promo__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.promo__pill{
  background:linear-gradient(90deg,#ff3b30,#ff9500);
  color:#fff;font-weight:950;letter-spacing:.4px;
  padding:7px 10px;border-radius:999px;
  font-size:13px;
  box-shadow:0 10px 18px rgba(255,59,48,.18);
}
.promo__text{color:#111;font-weight:700;font-size:13px}
.promo__mid{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.promo__items{display:flex;gap:8px;flex-wrap:wrap}
.promo__item{
  font-size:12px;font-weight:700;color:#222;
  background:#f6f7fb;border:1px solid #e9ecff;
  padding:6px 8px;border-radius:999px;
}
.promo__timer{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:8px 10px;border-radius:12px;
  border:1px solid #ffe2c8;background:linear-gradient(180deg,#fff4ea,#ffffff);
  min-width:110px;
}
.promo__timerLabel{font-size:11px;color:#7a5a3d;font-weight:800}
.promo__time{
  font-size:18px;font-weight:950;color:#111;letter-spacing:.5px;
}
.promo__bottom{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.promo__hint{font-size:12px;font-weight:800;color:#0f172a;opacity:.85}

/* CARD emphasis */
.p-card{
  border:2px solid #ececec;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.p-card__media{background:linear-gradient(180deg,#ffffff,#fafafa)}
.ribbon{
  position:absolute;
  top:10px;left:10px;
  font-size:11px;font-weight:950;
  padding:7px 10px;border-radius:999px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.3px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.ribbon.hot{background:linear-gradient(90deg,#7c3aed,#1f66ff)}
.ribbon.flash{background:linear-gradient(90deg,#ff3b30,#ff9500)}
.save{margin-top:6px;font-size:12px;color:#1b5e20;font-weight:800}
.save strong{color:#0a7a22}

/* Button aggressive */
.add{
  background:linear-gradient(90deg,#3f7a3a,#5d9657);
  position:relative;
  overflow:hidden;
  text-transform:uppercase;
}
.add::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-60%);
  animation:shine 2.1s infinite;
}
@keyframes shine{
  0%{transform:translateX(-70%)}
  60%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}
.add{
  animation:pulse 1.35s infinite;
}
@keyframes pulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}
.add.is-added{animation:none}

.add{ text-decoration:none !important; color:#fff !important; }