/* ============================================================
   Additional sections
   Loaded after style.css — everything here is additive.
   ============================================================ */

/* ============================================================
   COUNTDOWN PROMO
   The clock is the point: it says the offer is real and it is
   leaving. Digits are boxed and tabular so they don't jitter
   as the seconds tick.
   ============================================================ */

.promo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 20px;
  padding: clamp(24px, 3.4vw, 42px);
  margin-block: clamp(20px, 3vw, 34px);
}
.promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 88% 12%, color-mix(in srgb, var(--volt) 55%, transparent), transparent 62%),
    linear-gradient(115deg, #0F1115 32%, #191E28 100%);
  z-index: -2;
}
.promo__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: -1;
}

.promo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pulse);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  margin-bottom: 13px;
}
.promo__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: promo-pulse 1.6s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.promo h2 {
  color: #fff;
  font-size: clamp(24px, 3.6vw, 38px);
  margin-bottom: 8px;
}
.promo p {
  color: rgba(255,255,255,.76);
  font-size: 15px;
  margin-bottom: 20px;
  max-width: 42ch;
}

.promo__clock {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.promo__unit {
  min-width: 68px;
  padding: 12px 8px;
  border-radius: var(--r);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  text-align: center;
  backdrop-filter: blur(6px);
}
.promo__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.promo__unit small {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.promo--ended .promo__clock { display: none; }

@media (max-width: 820px) {
  .promo { grid-template-columns: 1fr; }
  .promo__clock { justify-content: flex-start; }
}

/* ============================================================
   CATEGORY TILES WITH IMAGES
   Grouped under their parent, because "Power & Charging — 4"
   tells you more than four loose tiles do.
   ============================================================ */

.cat-group { margin-bottom: 30px; }
.cat-group:last-child { margin-bottom: 0; }

.cat-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 13px;
}
.cat-group__head h3 { font-size: 17px; }
.cat-group__count {
  font-size: 12.5px;
  color: var(--ink-3);
}

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

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  display: block;
}
.tile:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.tile__media {
  aspect-ratio: 4 / 3;
  background: var(--haze);
  overflow: hidden;
  position: relative;
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.tile:hover .tile__media img { transform: scale(1.06); }

/* fallback when a category has no image yet */
.tile__media--blank {
  display: grid;
  place-items: center;
  color: var(--volt);
  background: var(--volt-haze);
}

.tile__body {
  padding: 11px 13px 13px;
}
.tile__body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.tile__body span {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ============================================================
   WHATSAPP FEEDBACK
   Screenshots of real chats. In Lebanon this carries more
   weight than a five-star widget, because it is unfakeable in
   a way star ratings are not — you can see the timestamps.
   ============================================================ */

.reviews__score {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--haze);
  border: 1px solid var(--line);
  font-size: 13.5px;
  margin-top: 10px;
}
.reviews__score strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.reviews__stars { color: #F5A524; letter-spacing: -1px; }
.reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #14A44D;
  font-weight: 600;
  font-size: 12.5px;
}

.chats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(198px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.chats > * { scroll-snap-align: start; }
@media (min-width: 1000px) {
  .chats {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}

.chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.chat:hover {
  border-color: #25D366;
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.chat__shot {
  position: relative;
  background: #E5DDD5;          /* the WhatsApp chat backdrop */
  overflow: hidden;
}
.chat__shot img {
  width: 100%;
  display: block;
  max-height: 300px;
  object-fit: cover;
  object-position: top;
}
.chat__wa {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.chat__foot {
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat__foot span {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat__foot svg { color: var(--ink-3); flex-shrink: 0; }

/* ============================================================
   STORE MAP
   ============================================================ */

.store-map {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.store-map__info { padding: clamp(22px, 3vw, 36px); }
.store-map__info h2 { margin-bottom: 10px; }
.store-map__info > p { color: var(--ink-2); margin-bottom: 22px; }

.store-map__row {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.store-map__row svg { color: var(--volt); flex-shrink: 0; margin-top: 2px; }
.store-map__row strong { display: block; font-size: 14px; margin-bottom: 2px; }
.store-map__row span { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

.store-map__frame {
  min-height: 320px;
  background: var(--haze);
  position: relative;
}
.store-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.store-map__frame--blank {
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 14px;
  text-align: center;
  padding: 30px;
}

@media (max-width: 860px) {
  .store-map { grid-template-columns: 1fr; }
  .store-map__frame { min-height: 260px; }
}

/* ============================================================
   STICKY BOTTOM BAR (mobile)
   Thumb-reachable. Hidden on desktop where the header does
   the same job better.
   ============================================================ */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  display: none;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tabbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 8px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color .15s;
  min-height: 54px;
}
.tabbar a.is-on { color: var(--volt); }
.tabbar a:active { background: var(--haze); }
.tabbar__count {
  position: absolute;
  top: 4px;
  left: calc(50% + 7px);
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--pulse);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
}

@media (max-width: 760px) {
  .tabbar { display: block; }
  /* keep the floating WhatsApp button clear of the bar */
  .wa-float { bottom: 74px; }
  /* and stop the footer hiding behind it */
  .footer { padding-bottom: 82px; }
  .toast { bottom: 76px; }
}


/* ============================================================
   QUICK DEAL PILLS
   Two wide shortcuts sitting above the category grid. They earn
   the space because "what's cheap right now" and "what do other
   people buy" are the two questions that actually start a
   shopping session.
   ============================================================ */

.deal-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.deal-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.deal-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.deal-pill__tag {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.deal-pill__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.deal-pill__body span { font-size: 13px; opacity: .82; }

.deal-pill__go {
  margin-left: auto;
  flex-shrink: 0;
  opacity: .55;
  transition: transform .2s, opacity .2s;
}
.deal-pill:hover .deal-pill__go { transform: translateX(3px); opacity: 1; }

/* hot — warm, because a discount is an urgent thing */
.deal-pill--hot {
  background: linear-gradient(115deg, #FFF1EC 0%, #FFE4DA 100%);
  border-color: #FFD2C2;
  color: #8A2C12;
}
.deal-pill--hot .deal-pill__tag { background: var(--pulse); color: #fff; }

/* top — calm, because popularity is reassurance, not pressure */
.deal-pill--top {
  background: var(--ink);
  color: #fff;
}
.deal-pill--top .deal-pill__tag { background: rgba(255,255,255,.14); color: #fff; }
.deal-pill--top .deal-pill__body span { opacity: .68; }


/* ============================================================
   PHOTO-FORWARD HERO
   The banner image carries the offer, the way a shop window
   does. Text sits on a scrim at the bottom so it stays legible
   over whatever photo gets uploaded.
   ============================================================ */

.hero__promo { min-height: 380px; }
.hero__promo img { opacity: 1; }        /* let the photo actually read */

.hero__promo::after {
  background: linear-gradient(
    to top,
    rgba(12,14,18,.94) 0%,
    rgba(12,14,18,.72) 34%,
    rgba(12,14,18,.16) 68%,
    rgba(12,14,18,.04) 100%
  );
}

.hero__promo h1 {
  font-size: clamp(25px, 4.4vw, 42px);
  text-wrap: balance;
}

.hero__promo .btn { box-shadow: 0 6px 20px rgba(0,0,0,.28); }

/* A banner with no photo still needs to look deliberate. */
.hero__promo--noimg {
  background:
    radial-gradient(120% 130% at 82% 8%, color-mix(in srgb, var(--volt) 62%, transparent), transparent 60%),
    linear-gradient(140deg, #14171D 30%, #23282F 100%);
}

@media (max-width: 920px) {
  .hero__promo { min-height: 300px; }
}