:root {
  --wm-bg: #edfdf8;
  --wm-bg-2: #f7fbff;
  --wm-surface: #ffffff;
  --wm-surface-soft: #f7fffc;
  --wm-ink: #102030;
  --wm-muted: #6b7b88;
  --wm-line: #e7f0ef;
  --wm-primary: #18c58b;
  --wm-primary-2: #0ea978;
  --wm-primary-dark: #08765a;
  --wm-accent: #ffbd3d;
  --wm-danger: #ef4444;
  --wm-soft: #e8fff7;
  --wm-card: rgba(255,255,255,.94);
  --wm-shadow: 0 22px 70px rgba(16, 32, 48, .12);
  --wm-shadow-soft: 0 12px 30px rgba(16, 32, 48, .08);
  --wm-r-xl: 30px;
  --wm-r-lg: 24px;
  --wm-r-md: 18px;
  --wm-r-sm: 14px;
  --wm-container: 1180px;
  --wm-bottom: 84px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Tahoma, Arial, sans-serif;
  color: var(--wm-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(24, 197, 139, .20), transparent 360px),
    radial-gradient(circle at 95% 20%, rgba(144, 219, 255, .24), transparent 420px),
    linear-gradient(180deg, var(--wm-bg) 0%, #fbfffd 380px, #f5f8fb 100%);
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
  filter: blur(.2px);
}
body::before {
  width: 520px;
  height: 520px;
  right: -260px;
  bottom: -220px;
  background: linear-gradient(135deg, rgba(24,197,139,.18), rgba(255,255,255,0));
}
body::after {
  width: 340px;
  height: 340px;
  left: -170px;
  top: 25%;
  border: 36px solid rgba(24,197,139,.08);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { width: 100%; max-width: 100%; display: block; object-fit: cover; }
strong, b { font-weight: 950; }

.app-shell { min-height: 100vh; padding-bottom: var(--wm-bottom); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(248, 255, 253, .78);
  border-bottom: 1px solid rgba(231,240,239,.72);
  backdrop-filter: blur(18px);
}
.topbar__main {
  max-width: var(--wm-container);
  margin: 0 auto;
  padding: 12px 18px 10px;
  display: grid;
  grid-template-columns: auto minmax(250px, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand__logo {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, var(--wm-primary), #22d3ee);
  box-shadow: 0 14px 32px rgba(24,197,139,.28);
}
.brand__name { font-size: 22px; font-weight: 1000; letter-spacing: -.03em; }
.brand__name::first-letter { color: var(--wm-primary); }

.global-search {
  height: 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--wm-line);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--wm-shadow-soft);
}
.global-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 18px;
  color: var(--wm-ink);
}
.global-search input::placeholder { color: #9aa8b3; }
.primary-btn,
.global-search button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wm-primary), var(--wm-primary-2));
  color: #fff;
  padding: 12px 18px;
  font-weight: 950;
  box-shadow: 0 13px 28px rgba(24,197,139,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.primary-btn:hover,
.global-search button:hover { filter: brightness(.97); transform: translateY(-1px); }
.primary-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.secondary-btn,
.location-button,
.qty-control button,
.reactions button,
.mobile-tabs button,
.icon-button {
  border: 1px solid var(--wm-line);
  background: rgba(255,255,255,.96);
  color: var(--wm-ink);
  border-radius: 999px;
  padding: 11px 15px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(16,32,48,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}
.secondary-btn:hover,
.icon-button:hover { border-color: #bee9dd; background: #fff; }
.location-button { white-space: nowrap; }
.location-button__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--wm-primary); box-shadow: 0 0 0 6px rgba(24,197,139,.12); }
.customer-nav {
  max-width: var(--wm-container);
  margin: 0 auto;
  display: flex;
  gap: 8px;
  padding: 0 18px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.customer-nav::-webkit-scrollbar { display: none; }
.customer-nav a {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--wm-muted);
  font-weight: 950;
  white-space: nowrap;
}
.customer-nav a:hover,
.customer-nav a.active { color: var(--wm-primary-dark); background: #fff; box-shadow: 0 6px 18px rgba(16,32,48,.06); }

.front-view { max-width: var(--wm-container); margin: 0 auto; padding: 22px 18px 0; }
.hero,
.store-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) 390px; gap: 18px; align-items: stretch; }
.hero-main,
.hero-side,
.panel,
.store-card,
.product-card,
.offer-card,
.category-tile,
.store-info,
.loading-card,
.empty,
.cart-drawer,
.customer-order-card,
.app-card,
.reel-card {
  background: var(--wm-card);
  border: 1px solid rgba(231,240,239,.92);
  border-radius: var(--wm-r-xl);
  box-shadow: var(--wm-shadow-soft);
}
.hero-main {
  min-height: 430px;
  padding: 34px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 10% 15%, rgba(24,197,139,.20), transparent 260px),
    radial-gradient(circle at 96% 12%, rgba(255,189,61,.22), transparent 240px),
    linear-gradient(135deg, #fff, #effff9);
}
.hero-main::after {
  content: "";
  position: absolute;
  left: -52px;
  bottom: -72px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  border: 42px solid rgba(24,197,139,.08);
}
.hero-copy { position: relative; z-index: 1; max-width: 720px; }
.hero-copy h1 { margin: 14px 0 10px; font-size: clamp(38px, 6vw, 66px); line-height: 1.02; letter-spacing: -.055em; }
.hero-copy p { margin: 0; color: var(--wm-muted); font-size: 18px; line-height: 1.9; }
.hero-actions,
.hero-strip,
.card-actions,
.meta,
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.hero-actions { margin-top: 24px; }
.hero-strip { margin-top: 24px; }
.hero-side { padding: 18px; display: grid; gap: 14px; background: rgba(255,255,255,.76); }
.hero-promo {
  min-height: 210px;
  border-radius: 26px;
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.25), transparent 170px),
    linear-gradient(135deg, #00a878, #27d3a0 55%, #08a3c4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 22px 50px rgba(24,197,139,.28);
  overflow: hidden;
  position: relative;
}
.hero-promo::after { content: "🛍️"; position: absolute; left: 22px; top: 28px; font-size: 82px; opacity: .28; }
.hero-promo h2 { margin: 0; font-size: 31px; letter-spacing: -.03em; }
.hero-promo p { color: rgba(255,255,255,.86); line-height: 1.75; max-width: 270px; }
.metric-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.metric-card,
.feature-chip { background: #fff; border: 1px solid var(--wm-line); border-radius: 22px; padding: 17px; }
.metric-card strong { display: block; font-size: 30px; letter-spacing: -.04em; }
.metric-card span,
.feature-chip span { color: var(--wm-muted); font-weight: 850; font-size: 13px; }
.feature-chip { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.feature-chip i { width: 44px; height: 44px; border-radius: 16px; background: var(--wm-soft); display: grid; place-items: center; color: var(--wm-primary-dark); font-style: normal; font-size: 22px; }
.feature-chip strong { display: block; margin-bottom: 3px; }

.badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccefe5;
  color: var(--wm-primary-dark);
  background: #effff9;
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 950;
  font-size: 12px;
}
.badge.gold { border-color: #ffe2a8; color: #9a6400; background: #fff8e8; }
.badge.dark { border-color: #d7e1e4; color: #213242; background: #f8fbfc; }
.muted { color: var(--wm-muted); line-height: 1.75; }
.section-head { margin: 30px 0 13px; display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.section-head h1,
.section-head h2 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.035em; }
.section-head p { margin: 0; color: var(--wm-muted); }
.grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid-four { grid-template-columns: repeat(4,minmax(0,1fr)); }

.category-rail,
.story-rail,
.store-mini-rail { display: flex; gap: 11px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.category-rail::-webkit-scrollbar,
.story-rail::-webkit-scrollbar,
.store-mini-rail::-webkit-scrollbar { display: none; }
.category-pill,
.story-pill {
  flex: 0 0 auto;
  min-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: 24px;
  box-shadow: var(--wm-shadow-soft);
  font-weight: 950;
  text-align: center;
}
.category-pill span,
.story-pill span,
.category-tile__icon {
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #effff9, #f7fbff);
  border: 1px solid #def3ed;
  font-size: 24px;
}
.category-tile { min-height: 162px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .18s ease; }
.category-tile:hover,
.store-card:hover,
.product-card:hover { transform: translateY(-2px); }
.category-tile h3 { margin: 14px 0 4px; }
.category-tile p { margin: 0; color: var(--wm-muted); line-height: 1.7; }

.store-card,
.product-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.card-media {
  min-height: 164px;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.24), transparent 170px),
    linear-gradient(135deg, #18c58b, #16a4c7);
  font-size: 46px;
  font-weight: 950;
  overflow: hidden;
  position: relative;
}
.card-media img { height: 190px; }
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(16,32,48,.12));
  pointer-events: none;
}
.card-body { padding: 15px; display: grid; gap: 10px; }
.card-title { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.card-title h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.store-card .card-title h3 { min-height: 48px; }
.price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.price strong { color: var(--wm-ink); font-size: 20px; }
.price del { color: var(--wm-muted); }
.panel,
.loading-card,
.empty { padding: 20px; }
.filters,
.form-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; gap: 10px; align-items: end; }
.field { display: grid; gap: 7px; color: var(--wm-muted); font-weight: 900; font-size: 13px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--wm-line);
  border-radius: 17px;
  background: #fff;
  color: var(--wm-ink);
  outline: none;
  padding: 13px 14px;
  box-shadow: 0 7px 18px rgba(16,32,48,.04);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #9ee9d3; box-shadow: 0 0 0 4px rgba(24,197,139,.10); }
.field textarea { min-height: 110px; resize: vertical; }
.field.full { grid-column: 1 / -1; }

.store-cover { min-height: 390px; border-radius: var(--wm-r-xl); overflow: hidden; position: relative; background: linear-gradient(135deg,#0f7b62,#22c7a1); box-shadow: var(--wm-shadow); }
.store-cover img { position: absolute; inset: 0; height: 100%; opacity: .48; }
.store-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,32,28,.06),rgba(10,32,28,.78)); }
.store-cover__content { position: absolute; z-index: 1; inset: auto 0 0; padding: 28px; color: #fff; }
.store-cover__content h1 { margin: 12px 0 8px; font-size: clamp(34px,5vw,58px); letter-spacing: -.04em; }
.store-cover__content p { color: rgba(255,255,255,.86); line-height: 1.9; max-width: 730px; }
.store-logo-badge {
  width: 92px;
  height: 92px;
  border-radius: 30px;
  background: rgba(255,255,255,.94);
  color: var(--wm-primary-dark);
  display: grid;
  place-items: center;
  font-size: 35px;
  font-weight: 1000;
  box-shadow: 0 22px 48px rgba(16,32,48,.16);
  border: 6px solid rgba(255,255,255,.46);
}
.store-info { padding: 20px; align-self: start; position: sticky; top: 118px; }
.store-info h2 { margin-top: 0; }
.reactions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-card .card-media { min-height: 148px; font-size: 34px; background: linear-gradient(135deg, #f5fffb, #ecf8ff); color: var(--wm-primary-dark); }
.product-card .card-media img { height: 168px; }
.product-card.compact { grid-template-columns: 110px 1fr; grid-template-rows: auto; align-items: stretch; }
.product-card.compact .card-media { min-height: 100%; }
.qty-control { display: inline-grid; grid-template-columns: 38px 42px 38px; align-items: center; text-align: center; border: 1px solid var(--wm-line); border-radius: 999px; overflow: hidden; background: #fff; }
.qty-control button { border: 0; border-radius: 0; padding: 9px; box-shadow: none; min-height: auto; }
.offer-card { padding: 18px; }
.offer-card h3 { margin: 7px 0; }
.reel-frame,
.reel-card__media { min-height: 210px; display: grid; place-items: center; border-radius: 24px; color: #fff; background: linear-gradient(135deg,#102030,#18c58b); font-weight: 950; margin-bottom: 12px; overflow: hidden; position: relative; }
.reel-card__media::after { content: "▶"; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--wm-primary-dark); box-shadow: 0 16px 32px rgba(0,0,0,.18); }
.reel-card { padding: 12px; }
.reel-card h3 { margin: 0 0 5px; }

.cart-drawer {
  position: fixed;
  top: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 100;
  width: min(440px,calc(100vw - 28px));
  padding: 18px;
  transform: translateX(calc(-100% - 28px));
  transition: transform .24s ease;
  overflow-y: auto;
}
.cart-drawer.open { transform: translateX(0); }
.cart-row,
.order-item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--wm-line);
}
.customer-order-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.customer-order-form .card-actions { grid-column: 1/-1; }
.qr-mode-banner {
  margin-top: 12px;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--wm-primary-dark);
  font-weight: 950;
}
.store-cover__content .qr-mode-banner { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.24); }

.order-progress { margin: 15px 0; display: grid; gap: 9px; position: relative; }
.order-progress span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--wm-muted);
  font-weight: 900;
}
.order-progress span::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #d8e4e2;
  box-shadow: 0 0 0 4px #f3fbf8;
}
.order-progress span.done,
.order-progress span.active { color: var(--wm-primary-dark); }
.order-progress span.done::before,
.order-progress span.active::before { background: var(--wm-primary); }
.order-progress span.active { background: #effff9; padding: 10px; border-radius: 16px; }
.order-log { margin-top: 12px; display: grid; gap: 8px; }
.order-log div { display: flex; justify-content: space-between; gap: 10px; color: var(--wm-muted); border-top: 1px dashed var(--wm-line); padding-top: 8px; }
.order-log small { color: #98a8b2; }
.customer-orders-list { display: grid; gap: 14px; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 98px;
  z-index: 120;
  max-width: min(420px, calc(100vw - 36px));
  background: #102030;
  color: #fff;
  padding: 13px 16px;
  border-radius: 18px;
  box-shadow: var(--wm-shadow);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.mobile-tabs {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 90;
  width: min(560px, calc(100vw - 20px));
  min-height: 68px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 6px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(231,240,239,.92);
  border-radius: 28px;
  box-shadow: 0 18px 52px rgba(16,32,48,.18);
  backdrop-filter: blur(16px);
}
.mobile-tabs a,
.mobile-tabs button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wm-muted);
  border-radius: 20px;
  min-height: 52px;
  padding: 7px 3px;
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 950;
}
.mobile-tabs a span,
.mobile-tabs button span { font-size: 20px; line-height: 1; }
.mobile-tabs a.active,
.mobile-tabs a:hover,
.mobile-tabs button:hover { color: var(--wm-primary-dark); background: var(--wm-soft); }
.loading-card { min-height: 240px; display: grid; gap: 16px; align-content: center; }
.pulse-line,
.pulse-block { border-radius: 999px; background: linear-gradient(90deg,#eef5f3,#fff,#eef5f3); background-size: 280% 100%; animation: shimmer 1.4s infinite linear; }
.pulse-line { height: 20px; width: 45%; }
.pulse-block { height: 150px; border-radius: 26px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.product-detail-drawer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  background: rgba(16,32,48,.42);
  padding: 18px;
  align-items: center;
  justify-content: center;
}
.product-detail-drawer.open { display: flex; }
.product-detail-card {
  width: min(940px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: #fff;
  border-radius: 34px;
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
  display: grid;
  grid-template-columns: minmax(280px,.95fr) minmax(300px,1.05fr);
}
.product-detail-media { min-height: 520px; background: linear-gradient(135deg,#ecfff9,#eff8ff); display: grid; place-items: center; font-size: 84px; color: var(--wm-primary-dark); }
.product-detail-media img { height: 100%; max-height: 620px; }
.product-detail-body { padding: 26px; display: grid; gap: 14px; align-content: start; }
.product-detail-body h2 { margin: 0; font-size: 32px; letter-spacing: -.035em; }
.product-detail-note { border: 1px solid var(--wm-line); border-radius: 20px; padding: 14px; background: #fbfffd; }

@media (max-width: 980px) {
  .topbar__main { grid-template-columns: 1fr auto; }
  .global-search { grid-column: 1/-1; order: 3; }
  .customer-nav { display: none; }
  .hero,
  .store-hero { grid-template-columns: 1fr; }
  .store-info { position: static; }
  .grid,
  .grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filters .primary-btn { grid-column: 1/-1; }
}

@media (max-width: 620px) {
  :root { --wm-bottom: 96px; }
  body { background: linear-gradient(180deg,#ecfff8 0,#fbfffd 360px,#f4f8fb 100%); }
  .topbar { position: sticky; }
  .topbar__main { padding: 10px 12px; gap: 9px; }
  .brand__logo { width: 40px; height: 40px; border-radius: 15px; }
  .brand__name { font-size: 20px; }
  .location-button { padding: 9px 10px; min-height: 38px; font-size: 12px; }
  .global-search { height: 48px; padding: 5px; }
  .global-search input { padding: 0 12px; font-size: 13px; }
  .global-search button { padding: 10px 13px; min-height: 38px; }
  .front-view { padding: 14px 12px 0; }
  .hero-main { min-height: 365px; padding: 24px; border-radius: 28px; }
  .hero-copy h1 { font-size: 38px; }
  .hero-copy p { font-size: 15px; }
  .hero-side { border-radius: 28px; }
  .hero-promo { min-height: 180px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .grid,
  .grid-two,
  .grid-four { grid-template-columns: 1fr; }
  .section-head { align-items: start; flex-direction: column; margin-top: 24px; }
  .section-head h1,
  .section-head h2 { font-size: 23px; }
  .category-pill { min-width: 102px; font-size: 12px; padding: 10px 8px; border-radius: 22px; }
  .category-pill span { width: 40px; height: 40px; }
  .store-card { grid-template-columns: 112px 1fr; grid-template-rows: auto; border-radius: 24px; }
  .store-card .card-media { min-height: 100%; font-size: 30px; }
  .store-card .card-body { padding: 12px; gap: 8px; }
  .store-card .card-title { display: block; }
  .store-card .card-title h3 { min-height: auto; font-size: 16px; margin-bottom: 6px; }
  .store-card .meta { gap: 6px; }
  .badge { padding: 6px 8px; font-size: 11px; }
  .card-actions { gap: 7px; }
  .primary-btn,
  .secondary-btn { padding: 10px 12px; min-height: 40px; font-size: 13px; }
  .filters { grid-template-columns: 1fr; }
  .store-cover { min-height: 330px; }
  .store-cover__content { padding: 22px; }
  .store-cover__content h1 { font-size: 34px; }
  .store-logo-badge { width: 74px; height: 74px; border-radius: 24px; font-size: 28px; }
  .product-card { grid-template-columns: 112px 1fr; grid-template-rows: auto; border-radius: 24px; }
  .product-card .card-media { min-height: 100%; }
  .product-card .card-body { padding: 12px; }
  .product-card .card-title h3 { font-size: 16px; }
  .customer-order-form { grid-template-columns: 1fr; }
  .cart-drawer { top: auto; right: 10px; left: 10px; bottom: 10px; width: auto; max-height: min(82vh, 760px); transform: translateY(calc(100% + 24px)); border-radius: 30px 30px 24px 24px; }
  .cart-drawer.open { transform: translateY(0); }
  .product-detail-card { grid-template-columns: 1fr; border-radius: 28px; }
  .product-detail-media { min-height: 260px; }
  .product-detail-body { padding: 20px; }
  .mobile-tabs { width: calc(100vw - 16px); bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 25px; grid-template-columns: repeat(5,1fr); }
  .toast { right: 12px; bottom: 92px; }
}
button.card-media { width: 100%; border: 0; text-align: center; cursor: pointer; }
.app-card { display: grid; overflow: hidden; }


/* ========================================================================
   WizzMall v15 Home Screen Patch from Gemini handoff
   Source: Pasted markdown(3).md
   ======================================================================== */

/* ==========================================================================
   WizzMall Mobile-First Home UI (Overrides & Additions)
   ========================================================================== */

/* تقييد عرض الشاشة الرئيسية لتبدو كتطبيق موبايل حتى على الديسكتوب */
.front-view {
  max-width: 580px; 
  margin: 0 auto;
  padding: 12px 16px 0;
}

/* 1. Compact Promo Banner */
.mobile-promo-banner {
  background: linear-gradient(135deg, var(--wm-primary-dark), var(--wm-primary));
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 10px 24px rgba(24, 197, 139, 0.25);
  position: relative;
  overflow: hidden;
}
.banner-content { position: relative; z-index: 2; }
.banner-content h2 { margin: 0 0 4px; font-size: 20px; font-weight: 950; letter-spacing: -0.02em; }
.banner-content p { margin: 0 0 12px; font-size: 13px; opacity: 0.9; }
.banner-btn {
  background: #fff;
  color: var(--wm-primary-dark);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  display: inline-block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.banner-icon { 
  font-size: 64px; 
  line-height: 1; 
  opacity: 0.2; 
  position: absolute;
  left: 10px;
  bottom: -10px;
}

/* 2. Common Home Sections */
.home-section { margin-bottom: 28px; }
.section-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.section-header-compact h3 { margin: 0; font-size: 18px; color: var(--wm-ink); font-weight: 950; }
.view-all { 
  color: var(--wm-primary-dark); 
  font-size: 13px; 
  font-weight: 850; 
  background: none; 
  border: none; 
  padding: 0; 
  cursor: pointer;
}

/* 3. Horizontal Scroll Containers */
.horizontal-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }
.empty-compact { color: var(--wm-muted); font-size: 13px; padding: 10px; }

/* 4. Categories Icons */
.mobile-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 68px;
}
.cat-icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--wm-line);
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 4px 12px rgba(16,32,48,.03);
}
.cat-name { font-size: 12px; font-weight: 850; color: var(--wm-ink); text-align: center; }

/* 5. Horizontal Store Cards */
.mobile-store-card {
  min-width: 155px;
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 16px rgba(16,32,48,.04);
}
.store-img-wrapper {
  height: 100px;
  background: var(--wm-soft);
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--wm-primary);
}
.store-img-wrapper img { height: 100%; width: 100%; object-fit: cover; }
.store-info-compact { padding: 10px; }
.store-info-compact h4 { margin: 0 0 6px; font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-meta-compact { display: flex; justify-content: space-between; font-size: 12px; color: var(--wm-muted); font-weight: 850; }
.store-meta-compact .rating { color: #ffb822; }

/* 6. Mobile Offers/Reels Cards */
.mobile-offer-card {
  min-width: 135px;
  height: 180px;
  border-radius: 20px;
  background: linear-gradient(135deg, #102030, var(--wm-primary-dark));
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.offer-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  transition: transform 0.3s;
}
.mobile-offer-card:hover .offer-bg { transform: scale(1.05); }
.offer-overlay { position: relative; z-index: 1; width: 100%; }
.offer-overlay h4 { margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 900; }
.offer-overlay span { font-size: 11px; background: var(--wm-primary); color: #fff; padding: 4px 8px; border-radius: 8px; font-weight: 900; }

/* 7. Suggested Products Grid */
.suggested-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.mobile-product-card {
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(16,32,48,.03);
}
.prod-img { height: 80px; font-size: 44px; display: grid; place-items: center; margin-bottom: 10px; }
.prod-img img { height: 100%; border-radius: 12px; object-fit: cover; }
.mobile-product-card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--wm-ink); }
.price-badge { font-size: 12px; color: var(--wm-primary); font-weight: 900; }


/* Extra production polish: make the customer front behave like a phone app shell on desktop too. */
.topbar__main,
.customer-nav {
  max-width: 580px;
}

.topbar__main {
  grid-template-columns: auto 1fr auto;
  padding: 10px 16px 8px;
}

.brand__logo {
  width: 36px;
  height: 36px;
  border-radius: 14px;
}

.brand__name {
  font-size: 18px;
}

.global-search {
  height: 44px;
  box-shadow: 0 8px 22px rgba(16,32,48,.06);
}

.global-search input {
  padding: 0 12px;
  font-size: 13px;
}

.global-search button {
  min-height: 34px;
  padding: 8px 14px;
  font-size: 12px;
}

.location-button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
}

.customer-nav {
  margin: 0 auto;
  padding: 0 16px 8px;
  gap: 8px;
  justify-content: center;
}

.customer-nav a {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
}

.front-view > .hero,
.front-view .hero,
.front-view .hero-main,
.front-view .hero-side {
  display: none !important;
}

@media (max-width: 720px) {
  .topbar__main {
    grid-template-columns: auto 1fr;
  }

  .location-button {
    grid-column: 1 / -1;
    width: fit-content;
    justify-self: start;
  }

  .customer-nav {
    display: none;
  }
}

@media (min-width: 721px) {
  body {
    background:
      radial-gradient(circle at 8% 0%, rgba(24, 197, 139, .13), transparent 360px),
      radial-gradient(circle at 95% 20%, rgba(144, 219, 255, .16), transparent 420px),
      linear-gradient(180deg, #f6fffc 0%, #fbfffd 380px, #f5f8fb 100%);
  }

  .app-shell {
    max-width: 640px;
    margin: 0 auto;
    background: rgba(255,255,255,.28);
    min-height: 100vh;
    box-shadow: 0 0 0 1px rgba(231,240,239,.5);
  }
}

/* ========================================================================== 
   WizzMall v16 Customer Mobile App Screens
   Applied screens: home, categories, shop, store, cart whatsapp, offers, orders, account, product details
   ========================================================================== */

.front-view {
  max-width: 580px;
  margin: 0 auto;
  padding: 12px 16px calc(var(--wm-bottom) + 22px);
}

.mobile-app-layout {
  max-width: 580px;
  margin: 0 auto;
  width: 100%;
}

.topbar {
  background: rgba(248, 255, 253, .92);
}

.topbar__main {
  max-width: 580px;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  padding: 9px 14px;
}

.brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  font-size: 18px;
}

.brand__name {
  font-size: 17px;
}

.global-search {
  height: 42px;
  box-shadow: none;
  border-radius: 16px;
  padding: 4px;
}

.global-search input {
  padding: 0 12px;
  font-size: 12px;
}

.global-search button {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
  box-shadow: none;
}

.location-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 14px;
}

.location-button strong { display: none; }
.customer-nav { display: none; }

.primary-btn,
.secondary-btn,
.icon-button {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 13px;
}

.mobile-tabs {
  position: fixed;
  z-index: 120;
  right: 50%;
  transform: translateX(50%);
  bottom: 10px;
  width: calc(100% - 22px);
  max-width: 580px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(231,240,239,.9);
  background: rgba(255,255,255,.96);
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(16,32,48,.14);
  backdrop-filter: blur(16px);
}

.mobile-tabs a,
.mobile-tabs button {
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--wm-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 5px 2px;
  border-radius: 17px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-tabs a span,
.mobile-tabs button span { font-size: 18px; line-height: 1; }
.mobile-tabs a b,
.mobile-tabs button b { font-size: 10.5px; }
.mobile-tabs a.active {
  background: var(--wm-soft);
  color: var(--wm-primary-dark);
}

.floating-cart-button {
  position: fixed;
  left: calc(50% - 278px);
  bottom: 86px;
  z-index: 121;
  width: 54px;
  height: 54px;
  border-radius: 20px;
  border: 0;
  background: linear-gradient(135deg, var(--wm-primary), var(--wm-primary-dark));
  color: #fff;
  box-shadow: 0 14px 28px rgba(8,118,90,.28);
  display: grid;
  place-items: center;
  font-size: 22px;
}

@media (max-width: 620px) {
  .floating-cart-button { left: 14px; }
  .front-view { padding-inline: 12px; }
}

/* Home compact */
.mobile-promo-banner {
  background: linear-gradient(135deg, var(--wm-primary-dark), var(--wm-primary));
  border-radius: 20px;
  padding: 18px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  box-shadow: 0 10px 24px rgba(24, 197, 139, 0.25);
  position: relative;
  overflow: hidden;
}
.banner-content { position: relative; z-index: 2; }
.banner-content h2 { margin: 0 0 4px; font-size: 20px; font-weight: 950; letter-spacing: -0.02em; }
.banner-content p { margin: 0 0 12px; font-size: 13px; opacity: 0.9; }
.banner-btn { background: #fff; color: var(--wm-primary-dark); padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 900; display: inline-block; }
.banner-icon { font-size: 64px; line-height: 1; opacity: 0.20; position: absolute; left: 10px; bottom: -10px; }
.home-section,.mobile-home-section { margin-bottom: 26px; }
.section-header-compact,.section-head-mobile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.section-head-mobile { padding: 0 2px; }
.section-header-compact h3,.section-head-mobile h3 { margin: 0; font-size: 17px; color: var(--wm-ink); font-weight: 950; }
.view-all,.view-all-link { color: var(--wm-primary-dark); font-size: 13px; font-weight: 850; background: none; border: none; padding: 0; cursor: pointer; }
.horizontal-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.horizontal-scroll::-webkit-scrollbar,.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; }
.empty-compact { color: var(--wm-muted); font-size: 13px; padding: 10px; }
.empty-centered { text-align: center; padding: 36px 16px; background: #fff; border: 1px solid var(--wm-line); border-radius: 22px; }
.mobile-cat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 66px; }
.cat-icon-wrapper { width: 56px; height: 56px; border-radius: 20px; background: #fff; border: 1px solid var(--wm-line); display: grid; place-items: center; font-size: 25px; box-shadow: 0 4px 12px rgba(16,32,48,.03); }
.cat-name { font-size: 12px; font-weight: 850; color: var(--wm-ink); text-align: center; }
.mobile-store-card { min-width: 150px; background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 16px rgba(16,32,48,.04); }
.store-img-wrapper { height: 96px; background: var(--wm-soft); display: grid; place-items: center; font-size: 32px; color: var(--wm-primary); }
.store-img-wrapper img { height: 100%; width: 100%; object-fit: cover; }
.store-info-compact { padding: 10px; }
.store-info-compact h4 { margin: 0 0 6px; font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-meta-compact { display: flex; justify-content: space-between; font-size: 12px; color: var(--wm-muted); font-weight: 850; gap: 8px; }
.store-meta-compact .rating { color: #ffb822; }
.mobile-offer-card { min-width: 135px; height: 180px; border-radius: 20px; background: linear-gradient(135deg, #102030, var(--wm-primary-dark)); position: relative; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 14px; }
.offer-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .50; }
.offer-overlay { position: relative; z-index: 1; width: 100%; }
.offer-overlay h4 { margin: 0 0 6px; font-size: 14px; line-height: 1.3; font-weight: 900; }
.offer-overlay span { font-size: 11px; background: var(--wm-primary); color: #fff; padding: 4px 8px; border-radius: 8px; font-weight: 900; }
.suggested-products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.mobile-product-card { background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 12px rgba(16,32,48,.03); }
.prod-img { height: 80px; width: 100%; font-size: 42px; display: grid; place-items: center; margin-bottom: 10px; }
.prod-img img { height: 100%; border-radius: 12px; object-fit: cover; }
.mobile-product-card h4 { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--wm-ink); }
.price-badge { font-size: 12px; color: var(--wm-primary); font-weight: 900; }
.store-placeholder-logo { display: grid; place-items: center; }

/* Search, categories, shop */
.mobile-search-header { padding: 8px 0 12px; position: sticky; top: 56px; background: rgba(248,255,253,.94); backdrop-filter: blur(12px); z-index: 50; }
.mobile-search-form { display: block; width: 100%; }
.mobile-search-input { width: 100%; background: #fff; border: 1px solid var(--wm-line); border-radius: 16px; padding: 13px 16px; font-size: 14px; outline: none; box-shadow: 0 5px 14px rgba(16,32,48,.04); }
.mobile-search-input:focus { border-color: var(--wm-primary); box-shadow: 0 0 0 4px rgba(24,197,139,.1); }
.mobile-categories-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.mobile-cat-item-large { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; padding: 16px 8px; border-radius: 20px; border: 1px solid var(--wm-line); box-shadow: 0 6px 14px rgba(16,32,48,.03); }
.mobile-cat-item-large:active { transform: scale(.96); background: var(--wm-soft); }
.cat-icon-wrapper-large { width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, #f8fcff, var(--wm-bg)); border: 1px solid rgba(231,240,239,.8); display: grid; place-items: center; font-size: 30px; }
.cat-name-large { font-size: 13px; font-weight: 950; color: var(--wm-ink); text-align: center; line-height: 1.2; }
.filter-rail { padding: 2px 0 12px; margin-bottom: 0; }
.action-filter-rail { padding: 0 0 16px; }
.filter-chip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 15px; background: #f4f7f6; border: 1px solid transparent; color: var(--wm-muted); border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; }
.filter-chip.active { background: var(--wm-primary-dark); color: #fff; box-shadow: 0 4px 12px rgba(8,118,90,.2); }
.filter-action-chip { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; background: #fff; border: 1px solid var(--wm-line); color: var(--wm-ink); border-radius: 13px; font-size: 12px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.filter-action-chip.active { background: var(--wm-soft); border-color: var(--wm-primary); color: var(--wm-primary-dark); }
.mobile-list-section { padding-bottom: 24px; }
.small-count { color: var(--wm-muted); font-size: 12px; font-weight: 900; }
.mobile-stores-list-container { display: flex; flex-direction: column; gap: 12px; }
.mobile-list-store-card { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; padding: 12px; gap: 12px; box-shadow: 0 4px 12px rgba(16,32,48,.02); text-decoration: none; }
.mobile-list-store-card:active { transform: scale(.98); background: #fcfdfd; }
.store-list-img { width: 76px; height: 76px; border-radius: 14px; background: var(--wm-soft); overflow: hidden; display: grid; place-items: center; font-size: 30px; color: var(--wm-primary); flex-shrink: 0; }
.store-list-img img { width: 100%; height: 100%; object-fit: cover; }
.store-list-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden; }
.store-list-info h4 { margin: 0; font-size: 15px; font-weight: 950; color: var(--wm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-category-line { margin: 0; font-size: 12px; color: var(--wm-muted); }
.store-tags-compact { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850; color: var(--wm-ink); }
.store-tags-compact.muted-tags { color: var(--wm-muted); }
.rating-badge { color: #ffb822; }
.distance-badge { color: var(--wm-muted); }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-left: 4px; }
.status-dot.open { background: var(--wm-primary); }
.status-dot.closed { background: var(--wm-danger); }
.open-store-btn-mini { padding: 7px 11px; border-radius: 999px; background: var(--wm-soft); color: var(--wm-primary-dark); font-size: 12px; font-weight: 950; }
.store-list-action { display: flex; align-items: center; }

/* Store */
.mobile-store-header { height: 210px; background-color: var(--wm-primary); background-size: cover; background-position: center; position: relative; border-radius: 0 0 28px 28px; margin: -12px -12px 0; overflow: hidden; }
.mobile-store-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,32,48,.86) 0%, rgba(16,32,48,.1) 100%); }
.back-btn,.store-cart-btn { position: absolute; top: 16px; z-index: 10; min-height: 38px; height: 38px; background: rgba(255,255,255,.92); border: none; border-radius: 12px; color: var(--wm-ink); font-weight: 950; box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.back-btn { right: 16px; width: 40px; font-size: 24px; display: grid; place-items: center; }
.store-cart-btn { left: 16px; padding: 0 14px; }
.store-header-overlay { position: absolute; bottom: 20px; right: 20px; left: 20px; z-index: 10; color: #fff; }
.store-logo { width: 64px; height: 64px; background: #fff; border-radius: 18px; display: grid; place-items: center; font-size: 30px; color: var(--wm-primary-dark); font-weight: 900; margin-bottom: 12px; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 8px 16px rgba(0,0,0,.15); }
.store-header-overlay h2 { margin: 0 0 6px; font-size: 22px; font-weight: 950; letter-spacing: -.02em; }
.store-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 900; }
.store-stats span { background: rgba(255,255,255,.16); padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(8px); }
.store-action-tabs { display: flex; overflow-x: auto; gap: 8px; padding: 14px 0 10px; scrollbar-width: none; }
.store-action-tabs::-webkit-scrollbar { display: none; }
.store-action-tabs a,.store-action-tabs button { border: 0; background: #fff; padding: 9px 14px; border-radius: 999px; font-weight: 900; color: var(--wm-muted); white-space: nowrap; }
.store-action-tabs .active { background: var(--wm-primary-dark); color: #fff; }
.store-alert-bar,.qr-mode-banner { background: var(--wm-soft); color: var(--wm-primary-dark); border: 1px solid #ccefe5; border-radius: 16px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 900; margin-bottom: 14px; }
.store-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.quick-action { background: #fff; border: 1px solid var(--wm-line); border-radius: 16px; padding: 11px 8px; text-align: center; font-size: 12px; font-weight: 950; }
.quick-action.green { background: var(--wm-primary-dark); color: #fff; }
.compact-reactions { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; margin-bottom: 18px; }
.compact-reactions button { flex: 0 0 auto; box-shadow: none; padding: 8px 12px; font-size: 12px; }
.store-offer-mini { min-width: 220px; background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; padding: 14px; }
.store-offer-mini h4 { margin: 8px 0 4px; font-size: 15px; }
.store-offer-mini p { margin: 0; color: var(--wm-muted); font-size: 12px; }
.delivery-zone-list { display: flex; flex-direction: column; gap: 10px; }
.delivery-zone-card { background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; padding: 13px; }
.delivery-zone-card h4 { margin: 0 0 8px; }
.delivery-zone-card div { display: flex; gap: 8px; flex-wrap: wrap; color: var(--wm-muted); font-size: 12px; font-weight: 900; }
.report-card-mobile { background: #fff; border: 1px solid var(--wm-line); border-radius: 22px; padding: 16px; margin-bottom: 24px; }
.report-card-mobile h3 { margin-top: 0; }
.report-card-mobile form { display: grid; gap: 12px; }

/* Product list and detail */
#productsGrid.mobile-products-list,#productsGrid { display: flex; flex-direction: column; gap: 0; padding: 0; }
.mobile-store-product-card { display: flex; align-items: stretch; padding: 14px 0; background: transparent; border: none; border-bottom: 1px solid var(--wm-line); border-radius: 0; gap: 12px; box-shadow: none; cursor: pointer; }
.mobile-store-product-card:last-child { border-bottom: none; }
.product-card-img { width: 84px; height: 84px; border-radius: 16px; background: var(--wm-bg-2); display: grid; place-items: center; font-size: 38px; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.03); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.emoji-media { display: grid; place-items: center; font-size: inherit; }
.product-card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.product-card-info h3 { margin: 0 0 6px; font-size: 15px; font-weight: 950; color: var(--wm-ink); }
.muted-text { margin: 0 0 8px; font-size: 12px; color: var(--wm-muted); line-height: 1.4; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.current-price { font-size: 15px; font-weight: 950; color: var(--wm-primary-dark); }
.old-price { font-size: 12px; color: var(--wm-muted); }
.product-card-action { flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.add-btn-mini { width: 38px; height: 38px; border-radius: 12px; background: var(--wm-soft); color: var(--wm-primary-dark); font-weight: bold; font-size: 22px; border: 1px solid #ccefe5; display: grid; place-items: center; }
.qty-control-mini { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--wm-line); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(16,32,48,.03); }
.qty-control-mini button { width: 34px; height: 32px; background: var(--wm-bg-2); border: none; font-size: 18px; font-weight: bold; color: var(--wm-primary-dark); }
.qty-control-mini strong { font-size: 14px; padding: 6px 0; color: var(--wm-ink); }
.product-detail-drawer { position: fixed; inset: 0; z-index: 150; background: rgba(16,32,48,.4); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .35s ease; backdrop-filter: blur(4px); }
.product-detail-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-product-sheet { width: 100%; max-width: 580px; background: #fff; border-radius: 32px 32px 0 0; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.product-detail-drawer.open .mobile-product-sheet { transform: translateY(0); }
.sheet-header { position: relative; display: flex; justify-content: flex-end; padding: 16px 20px; }
.swipe-handle { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 5px; background: var(--wm-line); }
.close-sheet-btn { width: 36px; height: 36px; min-height: 36px; border-radius: 50%; background: var(--wm-bg-2); border: none; font-size: 14px; box-shadow: none; }
.sheet-content { flex: 1; overflow-y: auto; padding: 0 20px 20px; scrollbar-width: none; }
.sheet-content::-webkit-scrollbar { display: none; }
.product-cover-media { width: 100%; aspect-ratio: 1 / 1; border-radius: 24px; background: var(--wm-soft); display: grid; place-items: center; overflow: hidden; margin-bottom: 20px; font-size: 78px; }
.product-cover-media img { width: 100%; height: 100%; object-fit: cover; }
.product-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.product-title-row h2 { margin: 0 0 12px; font-size: 22px; font-weight: 950; }
.product-price-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.price-large { font-size: 22px; color: var(--wm-primary-dark); }
.price-old { color: var(--wm-muted); }
.product-meta-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.product-desc-text { color: var(--wm-muted); line-height: 1.8; margin: 0 0 18px; }
.product-notes-section textarea { min-height: 80px; }
.sheet-footer { border-top: 1px solid var(--wm-line); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: #fff; }
.product-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qty-control-large { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; border: 1px solid var(--wm-line); border-radius: 999px; overflow: hidden; }
.qty-control-large button { border: 0; height: 44px; background: var(--wm-soft); color: var(--wm-primary-dark); font-size: 20px; font-weight: 950; }
.qty-control-large strong { text-align: center; }

/* Cart bottom sheet */
.cart-drawer { position: fixed; top: auto; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 580px; height: 85vh; background: var(--wm-bg-2); border-radius: 30px 30px 0 0; z-index: 200; display: flex; flex-direction: column; padding: 0; box-shadow: 0 -10px 40px rgba(16,32,48,.15); transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; visibility: hidden; border: 1px solid rgba(231,240,239,.8); }
.cart-drawer.open { transform: translateX(-50%) translateY(0); visibility: visible; }
.cart-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border-radius: 30px 30px 0 0; border-bottom: 1px solid var(--wm-line); }
.cart-sheet-header h2 { margin: 0; font-size: 18px; font-weight: 950; }
.clear-cart-btn { background: none; border: none; color: var(--wm-danger); font-size: 13px; font-weight: 900; }
.cart-sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px; scrollbar-width: none; }
.cart-sheet-body::-webkit-scrollbar { display: none; }
.cart-mode-banner { justify-content: center; text-align: center; }
.mobile-cart-item { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 18px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--wm-line); box-shadow: 0 4px 10px rgba(16,32,48,.02); }
.cart-item-details { flex: 1; text-align: right; }
.cart-item-details h4 { margin: 0 0 4px; font-size: 14px; font-weight: 900; }
.cart-item-details .price { display: block; margin-bottom: 10px; font-size: 13px; color: var(--wm-muted); font-weight: 850; }
.cart-item-image { width: 64px; height: 64px; border-radius: 14px; background: var(--wm-soft); overflow: hidden; display: grid; place-items: center; margin-right: 12px; font-size: 28px; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.qty-control-compact { display: inline-flex; align-items: center; gap: 12px; background: var(--wm-bg-2); border-radius: 999px; padding: 4px; }
.qty-control-compact button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; color: var(--wm-primary-dark); font-size: 18px; font-weight: 950; }
.mobile-checkout-form { margin-top: 18px; }
.checkout-title { margin-top: 22px; }
.form-grid-compact { display: grid; gap: 12px; }
.form-grid-compact .full { grid-column: 1 / -1; }
.hidden-field { display: none; }
.cart-sheet-footer { background: #fff; border-top: 1px solid var(--wm-line); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.cart-summary-row strong { color: var(--wm-primary-dark); font-size: 18px; }
.cart-actions-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whatsapp-btn { background: linear-gradient(135deg, #25d366, #128c7e); }

/* Offers discovery */
.stories-rail { padding: 4px 0 8px; }
.story-chip { min-width: 78px; background: #fff; border: 1px solid var(--wm-line); border-radius: 18px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; font-weight: 950; color: var(--wm-ink); }
.story-chip span { font-size: 24px; }
.story-chip.active { background: var(--wm-soft); color: var(--wm-primary-dark); border-color: #ccefe5; }
.discover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.discover-card { height: 210px; border-radius: 22px; overflow: hidden; position: relative; background: #102030; color: #fff; box-shadow: 0 9px 20px rgba(16,32,48,.08); }
.discover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .62; }
.discover-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; background: linear-gradient(180deg, transparent 20%, rgba(16,32,48,.78)); }
.discover-overlay h3 { margin: 9px 0 4px; font-size: 15px; }
.discover-overlay p { margin: 0; font-size: 12px; opacity: .86; }

/* Orders */
.orders-search-card,.account-header,.account-menu,.profile-form-card { background: #fff; border: 1px solid var(--wm-line); border-radius: 24px; padding: 18px; box-shadow: 0 4px 16px rgba(16,32,48,.03); margin-bottom: 18px; }
.orders-search-card h2 { margin: 0 0 6px; }
.orders-search-form { display: grid; gap: 12px; margin-top: 14px; }
.mobile-order-card { background: #fff; border: 1px solid var(--wm-line); border-radius: 24px; padding: 16px; box-shadow: 0 4px 16px rgba(16,32,48,.03); margin-bottom: 14px; }
.order-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.order-card-top h3 { margin: 2px 0 0; }
.order-status-pill { background: var(--wm-soft); color: var(--wm-primary-dark); border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 950; }
.order-store-name { margin: 10px 0; color: var(--wm-muted); font-weight: 900; }
.order-progress-mobile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.order-progress-mobile span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--wm-muted); font-size: 10px; font-weight: 900; text-align: center; }
.order-progress-mobile i { width: 18px; height: 18px; border-radius: 50%; background: var(--wm-line); display: block; }
.order-progress-mobile .done i { background: var(--wm-primary); }
.order-progress-mobile .active { color: var(--wm-primary-dark); }
.order-items-list { display: grid; gap: 8px; margin: 12px 0; }
.order-item-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wm-line); }
.order-log-mobile { background: var(--wm-bg-2); border-radius: 16px; padding: 10px; display: grid; gap: 6px; }
.order-log-mobile div { display: flex; justify-content: space-between; font-size: 12px; color: var(--wm-muted); }

/* Account */
.account-header { display: flex; align-items: center; gap: 16px; padding: 22px 18px; }
.account-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--wm-primary-dark), var(--wm-primary)); color: #fff; font-size: 28px; display: grid; place-items: center; font-weight: 900; box-shadow: 0 8px 20px rgba(24,197,139,.25); flex-shrink: 0; }
.account-info { flex: 1; overflow: hidden; }
.account-info h2 { margin: 0 0 4px; font-size: 20px; font-weight: 950; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.account-info p { margin: 0; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.profile-form-card { display: grid; gap: 12px; }
.profile-form-card h3 { margin: 0; }
.account-menu { padding: 0; overflow: hidden; }
.account-menu + .account-menu { margin-top: 14px; }
.account-menu-item { display: flex; align-items: center; padding: 16px 18px; gap: 14px; border-bottom: 1px solid var(--wm-line); cursor: pointer; background: transparent; width: 100%; text-align: right; border-top: none; border-left: none; border-right: none; color: var(--wm-ink); }
.account-menu-item:last-child { border-bottom: 0; }
.menu-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--wm-bg-2); border-radius: 12px; font-size: 18px; }
.menu-text { flex: 1; font-size: 14px; font-weight: 950; }
.menu-arrow { color: var(--wm-muted); font-size: 24px; }
.text-danger { color: var(--wm-danger); }

.field { display: grid; gap: 7px; color: var(--wm-muted); font-size: 12px; font-weight: 900; }
.field input,.field select,.field textarea { width: 100%; border: 1px solid var(--wm-line); background: #fff; color: var(--wm-ink); border-radius: 14px; padding: 12px 13px; outline: 0; }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--wm-primary); box-shadow: 0 0 0 4px rgba(24,197,139,.1); }

@media (min-width: 480px) {
  .mobile-categories-page-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 390px) {
  .mobile-tabs a b,.mobile-tabs button b { font-size: 9px; }
  .mobile-tabs { gap: 2px; padding: 7px; }
  .product-actions-grid,.cart-actions-compact { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   WizzMall v17 Desktop Centering + Compact Report Controls
   ========================================================================== */

/* Desktop must still feel like a centered mobile app, not a stretched landing page. */
@media (min-width: 760px) {
  body {
    display: flex;
    justify-content: center;
    background:
      radial-gradient(circle at 18% 6%, rgba(24,197,139,.18), transparent 360px),
      radial-gradient(circle at 86% 16%, rgba(144,219,255,.20), transparent 420px),
      linear-gradient(180deg, #eefdf8 0%, #f7fbff 100%);
  }

  #customerApp.app-shell {
    width: 580px;
    max-width: 580px;
    min-height: 100dvh;
    margin: 0 auto;
    background: rgba(255,255,255,.58);
    box-shadow: 0 0 0 1px rgba(231,240,239,.75), 0 24px 80px rgba(16,32,48,.10);
    position: relative;
    overflow-x: clip;
  }

  .topbar {
    width: 580px;
    max-width: 580px;
    margin-inline: auto;
  }

  .front-view,
  .mobile-app-layout,
  .topbar__main,
  .customer-nav {
    width: 100%;
    max-width: 580px;
  }

  .mobile-tabs {
    width: 558px;
    max-width: 558px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .floating-cart-button {
    left: calc(50% - 266px) !important;
    right: auto !important;
  }

  .toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(14px);
  }

  .toast.show {
    transform: translateX(-50%) translateY(0);
  }
}

/* Cart must always open centered. Old sidebar styles used right/left together. */
.cart-drawer {
  right: auto !important;
  left: 50% !important;
  width: min(100vw - 24px, 520px) !important;
  max-width: 520px !important;
  height: min(85dvh, 760px) !important;
  max-height: min(85dvh, 760px) !important;
  transform: translateX(-50%) translateY(110%) !important;
  border-radius: 30px 30px 0 0 !important;
  overflow: hidden !important;
}

.cart-drawer.open {
  transform: translateX(-50%) translateY(0) !important;
}

@media (min-width: 760px) {
  .cart-drawer {
    top: 50% !important;
    bottom: auto !important;
    height: min(82dvh, 720px) !important;
    border-radius: 30px !important;
    box-shadow: 0 24px 90px rgba(16,32,48,.24) !important;
    transform: translateX(-50%) translateY(calc(-50% + 120%)) scale(.98) !important;
  }

  .cart-drawer.open {
    transform: translateX(-50%) translateY(-50%) scale(1) !important;
  }

  .cart-sheet-header {
    border-radius: 30px 30px 0 0 !important;
  }
}

@media (max-width: 759px) {
  .cart-drawer {
    width: 100% !important;
    max-width: 580px !important;
    height: 86dvh !important;
  }
}

/* Compact, correctly placed report UI. */
.store-action-tabs a[href="#reportArea"] {
  display: none !important;
}

.store-quick-actions {
  align-items: center;
}

.quick-action.report-mini-link,
.report-mini-link {
  flex: 0 0 auto;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--wm-danger) !important;
  background: #fff5f5 !important;
  border: 1px solid rgba(239,68,68,.18) !important;
  box-shadow: none !important;
}

.report-card-mobile.report-card-compact {
  margin: 10px 16px 24px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(16,32,48,.035) !important;
}

.report-card-compact summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  color: var(--wm-danger);
  font-size: 12.5px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-card-compact summary::-webkit-details-marker {
  display: none;
}

.report-card-compact summary::after {
  content: "فتح";
  color: var(--wm-muted);
  background: var(--wm-bg-2);
  border: 1px solid var(--wm-line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
}

.report-card-compact[open] summary::after {
  content: "إغلاق";
}

.report-card-compact form {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.report-card-compact .field {
  font-size: 12px;
}

.report-card-compact input,
.report-card-compact select,
.report-card-compact textarea {
  min-height: 38px;
  border-radius: 12px;
  font-size: 12.5px;
}

.report-card-compact textarea {
  min-height: 74px;
}

.report-submit-btn {
  width: max-content;
  justify-self: end;
  border: 0;
  border-radius: 999px;
  background: var(--wm-danger);
  color: #fff;
  padding: 9px 14px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 950;
  box-shadow: none;
}


/* ========================================================================== 
   WizzMall v18 Fullscreen Desktop + Smooth Swipe + Compact Store Icons
   ========================================================================== */

/* Desktop: full width website, not a narrow phone mockup. */
@media (min-width: 760px) {
  body {
    display: block !important;
    justify-content: initial !important;
    min-width: 0 !important;
    background:
      radial-gradient(circle at 7% 18%, rgba(24,197,139,.12), transparent 360px),
      radial-gradient(circle at 94% 78%, rgba(24,197,139,.15), transparent 420px),
      radial-gradient(circle at 88% 10%, rgba(144,219,255,.14), transparent 440px),
      linear-gradient(180deg, #f4fffb 0%, #fbfffd 52%, #f5f8fb 100%) !important;
  }

  #customerApp.app-shell,
  .app-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: clip !important;
    position: relative !important;
  }

  .topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: rgba(248,255,253,.84) !important;
  }

  .topbar__main,
  .customer-nav {
    width: min(100% - 48px, var(--wm-container)) !important;
    max-width: var(--wm-container) !important;
    margin-inline: auto !important;
  }

  .front-view {
    width: min(100% - 48px, var(--wm-container)) !important;
    max-width: var(--wm-container) !important;
    margin-inline: auto !important;
    padding: 24px 0 calc(var(--wm-bottom) + 32px) !important;
  }

  .mobile-app-layout {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .mobile-promo-banner {
    min-height: 160px !important;
  }

  .section-header-compact,
  .section-head-mobile {
    padding-inline: 0 !important;
  }

  .mobile-tabs {
    width: min(640px, calc(100vw - 40px)) !important;
    max-width: 640px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  .floating-cart-button {
    left: max(22px, calc((100vw - var(--wm-container)) / 2 + 22px)) !important;
    right: auto !important;
  }
}

/* Smooth horizontal rails on touch + mouse. */
.horizontal-scroll,
.customer-nav,
.stories-rail,
.hide-scrollbar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  scroll-behavior: smooth !important;
  user-select: none !important;
  cursor: grab;
}

.horizontal-scroll:active,
.customer-nav:active,
.stories-rail:active,
.hide-scrollbar:active {
  cursor: grabbing;
}

.horizontal-scroll > *,
.customer-nav > *,
.stories-rail > *,
.hide-scrollbar > * {
  flex-shrink: 0;
}

/* Compact category and store items. */
.mobile-cat-item {
  min-width: 58px !important;
  gap: 6px !important;
}

.cat-icon-wrapper {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  font-size: 22px !important;
}

.cat-name {
  font-size: 11px !important;
  line-height: 1.2 !important;
  max-width: 64px !important;
}

.mobile-store-card {
  min-width: 122px !important;
  max-width: 122px !important;
  border-radius: 16px !important;
}

.store-img-wrapper {
  height: 72px !important;
  font-size: 22px !important;
}

.store-info-compact {
  padding: 8px !important;
}

.store-info-compact h4 {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
}

.store-meta-compact {
  font-size: 10.5px !important;
  gap: 5px !important;
}

.mobile-list-store-card {
  border-radius: 16px !important;
  padding: 10px !important;
  gap: 10px !important;
}

.store-list-img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 13px !important;
  font-size: 22px !important;
}

.store-list-info h4 {
  font-size: 13px !important;
}

.store-tags-compact {
  font-size: 10.5px !important;
  gap: 7px !important;
}

.open-store-btn-mini {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
}

/* Desktop cart must open in exact screen center. */
@media (min-width: 760px) {
  .cart-drawer {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: min(100vw - 48px, 560px) !important;
    max-width: 560px !important;
    height: min(82dvh, 720px) !important;
    max-height: min(82dvh, 720px) !important;
    border-radius: 30px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -44%) scale(.96) !important;
    box-shadow: 0 30px 100px rgba(16,32,48,.26) !important;
  }

  .cart-drawer.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .cart-sheet-header {
    border-radius: 30px 30px 0 0 !important;
  }
}

@media (max-width: 759px) {
  .front-view {
    width: 100% !important;
    max-width: 580px !important;
    padding-inline: 12px !important;
  }

  .mobile-app-layout {
    max-width: 580px !important;
  }

  .cart-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    max-width: 580px !important;
    height: 86dvh !important;
    border-radius: 30px 30px 0 0 !important;
    transform: translateX(-50%) translateY(110%) !important;
  }

  .cart-drawer.open {
    transform: translateX(-50%) translateY(0) !important;
  }
}


/* ==========================================================================
   WizzMall Social Reels Fullscreen v19
   ========================================================================== */

.front-reels-mode {
  overflow: hidden;
  background: #05070a !important;
}

.front-reels-mode .topbar,
.front-reels-mode .mobile-tabs,
.front-reels-mode .floating-cart-button {
  display: none !important;
}

.front-reels-mode .app-shell {
  max-width: none !important;
  width: 100% !important;
  min-height: 100dvh !important;
  background: #05070a !important;
}

.front-reels-mode .front-view {
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
}

.reels-fullscreen-page {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: #05070a;
  overflow: hidden;
}

.reels-snap-feed {
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #05070a;
}

.reels-snap-feed::-webkit-scrollbar {
  display: none;
}

.social-reel-slide {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  scroll-snap-align: start;
  background: #05070a;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.social-reel-player {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #05070a;
}

.reel-embed,
.reel-native-video {
  width: min(100vw, 560px);
  height: 100dvh;
  border: 0;
  background: #000;
  object-fit: contain;
  border-radius: 0;
}

@media (min-width: 760px) {
  .reel-embed,
  .reel-native-video {
    width: min(100vw, 520px);
    height: min(100dvh, 920px);
    border-radius: 28px;
    box-shadow: 0 30px 110px rgba(0, 0, 0, .55);
  }

  .social-reel-slide {
    background:
      radial-gradient(circle at 15% 25%, rgba(24,197,139,.2), transparent 34%),
      radial-gradient(circle at 85% 80%, rgba(0,128,255,.16), transparent 32%),
      #05070a;
  }
}

.social-reel-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 52%, rgba(0,0,0,.82)),
    linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 35%, rgba(0,0,0,.55));
}

.social-reel-topbar {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 0;
  left: 0;
  width: min(100vw - 24px, 560px);
  margin: 0 auto;
  z-index: 130;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  pointer-events: none;
}

.social-reel-topbar > * {
  pointer-events: auto;
}

.reel-back-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18);
}

.social-reel-topbar strong {
  display: block;
  font-size: 15px;
  font-weight: 950;
}

.social-reel-topbar span {
  display: block;
  font-size: 12px;
  opacity: .78;
  margin-top: 2px;
}

.social-reel-actions {
  position: fixed;
  z-index: 130;
  right: max(14px, calc((100vw - 560px) / 2 + 14px));
  bottom: max(110px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reel-action-bubble {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.13);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(18px);
  font-size: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

.social-reel-caption {
  position: fixed;
  z-index: 130;
  right: 0;
  left: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(100vw - 24px, 560px);
  margin: 0 auto;
  color: #fff;
  padding-inline-end: 70px;
  pointer-events: none;
}

.social-reel-caption > * {
  pointer-events: auto;
}

.social-reel-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 10px;
}

.social-reel-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #19d69b, #08765a);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.75);
}

.social-reel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-reel-store b {
  font-size: 14px;
  font-weight: 950;
}

.social-reel-store small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #09120f;
  background: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 950;
}

.social-reel-caption h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}

.social-reel-caption p {
  margin: 0 0 14px;
  max-width: 430px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  text-shadow: 0 3px 18px rgba(0,0,0,.5);
}

.social-reel-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-reel-cta .primary-btn,
.social-reel-cta .secondary-btn {
  min-height: 42px;
  border-radius: 14px;
  padding-inline: 18px;
  font-size: 13px;
  font-weight: 950;
}

.social-reel-cta .secondary-btn {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
}

.reel-unsupported {
  width: min(100vw - 32px, 430px);
  min-height: 58dvh;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(24,197,139,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  backdrop-filter: blur(16px);
}

.reel-unsupported__icon {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #18c58b;
  color: #fff;
  font-size: 36px;
  margin-bottom: 14px;
}

.reel-unsupported h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 950;
}

.reel-unsupported p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

.reels-empty-page {
  min-height: 100dvh;
  padding: 24px;
  background: var(--wm-bg);
}

.reel-back-floating {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--wm-ink);
  box-shadow: 0 12px 28px rgba(16,32,48,.12);
  font-size: 30px;
  font-weight: 950;
}

.store-reels-section {
  overflow: hidden;
}

.store-reels-rail {
  align-items: stretch;
}

.store-reel-card {
  min-width: 160px;
  max-width: 160px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--wm-line);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16,32,48,.07);
  display: flex;
  flex-direction: column;
}

.store-reel-card__media {
  height: 210px;
  background:
    radial-gradient(circle at 50% 30%, rgba(24,197,139,.35), transparent 44%),
    linear-gradient(160deg, #102030, #0b7359);
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}

.store-reel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-reel-card__media span {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 25px;
  backdrop-filter: blur(12px);
}

.store-reel-card__body {
  padding: 11px 11px 0;
}

.store-reel-card__body b {
  display: block;
  color: var(--wm-ink);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-reel-card__body small {
  display: block;
  margin-top: 4px;
  color: var(--wm-muted);
  font-size: 11px;
  line-height: 1.35;
  min-height: 30px;
}

.store-reel-card__play {
  margin: 10px;
  min-height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--wm-primary-dark);
  font-size: 12px;
  font-weight: 950;
}

@media (max-width: 620px) {
  .social-reel-caption {
    padding-inline-end: 66px;
  }

  .social-reel-actions {
    right: 12px;
  }

  .social-reel-cta .primary-btn,
  .social-reel-cta .secondary-btn {
    padding-inline: 12px;
  }
}

/* ==========================================================================
   WizzMall Reels Autoplay + Sound UX v20
   ========================================================================== */
.reel-native-video {
  pointer-events: none;
}

.reel-sound-bubble {
  font-size: 18px;
}

.reel-sound-unlock {
  position: fixed;
  z-index: 134;
  top: max(72px, calc(env(safe-area-inset-top) + 72px));
  right: 0;
  left: 0;
  width: min(100vw - 32px, 420px);
  margin: 0 auto;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(8, 18, 24, .56);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  font-weight: 950;
  box-shadow: 0 20px 55px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.reel-sound-unlock span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25,214,155,.95);
  color: #04120e;
  font-size: 15px;
}

.reel-sound-unlock b {
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.reel-sound-unlock.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}

@media (min-width: 760px) {
  .reel-sound-unlock {
    top: 76px;
  }
}

/* WizzMall v23 storefront/menu polish */
.store-screen{background:#f7fbfa}.mobile-store-header{box-shadow:0 14px 36px rgba(16,32,48,.12)}.store-action-tabs{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 8px 20px rgba(16,32,48,.04)}
.products-section{background:#fff;border:1px solid #e8f1ef;border-radius:24px;padding:14px;margin-top:14px;box-shadow:0 10px 28px rgba(16,32,48,.04)}.products-section .section-head-mobile{padding:0 4px 10px}.mobile-store-product-card{background:#fff;border:1px solid #edf2f2;border-radius:18px;margin-bottom:10px;padding:12px;box-shadow:0 6px 18px rgba(16,32,48,.04)}.product-card-img{width:76px;height:76px;border-radius:16px}.product-card-info h3{font-size:15px}.add-btn-mini{background:#18c58b;color:#fff;border:none}.qty-control-mini{border-color:#bfeadb}.store-offer-mini,.delivery-zone-card{border-radius:18px;box-shadow:0 8px 20px rgba(16,32,48,.05)}.cart-actions-compact .whatsapp-btn{background:#18c58b}.cart-sheet-footer{box-shadow:0 -12px 30px rgba(16,32,48,.08)}
@media(min-width:900px){.store-screen{max-width:1180px;margin:0 auto}.products-section{padding:20px}.mobile-products-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}.mobile-store-product-card{margin:0}.cart-drawer{max-width:620px;left:50%!important;right:auto!important;transform:translateX(-50%) translateY(100%)}.cart-drawer.open{transform:translateX(-50%) translateY(0)}}


/* ==========================================================================
   WizzMall v25 — Product Variants UI Fix
   ========================================================================== */

.variant-mini-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e7fff5;
  color: var(--wm-primary-dark);
  border: 1px solid #bdebdc;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.choose-variant-btn {
  min-width: 54px;
  min-height: 34px;
  border: 1px solid #bdebdc;
  background: var(--wm-soft);
  color: var(--wm-primary-dark);
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
}

.variant-count-badge {
  background: #e7fff5;
  color: var(--wm-primary-dark);
  border-color: #bdebdc;
}

.product-variants-section {
  margin: 4px 0 18px;
  display: grid;
  gap: 14px;
}

.variant-group {
  background: #fbfefd;
  border: 1px solid var(--wm-line);
  border-radius: 18px;
  padding: 14px;
}

.variant-group-title {
  font-size: 14px;
  font-weight: 950;
  color: var(--wm-ink);
  margin-bottom: 10px;
}

.variant-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.variant-option-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--wm-line);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: .16s ease;
}

.variant-option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.variant-option-card:has(input:checked),
.variant-option-card.is-default:has(input:checked) {
  border-color: var(--wm-primary);
  background: #eafff7;
  box-shadow: 0 8px 18px rgba(24,197,139,.12);
}

.variant-option-name {
  font-size: 13px;
  color: var(--wm-ink);
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-option-card b {
  color: var(--wm-primary-dark);
  font-size: 12px;
  font-weight: 950;
}

.cart-variant-line {
  display: inline-flex;
  width: fit-content;
  margin: 2px 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eefaf6;
  color: var(--wm-primary-dark);
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 430px) {
  .variant-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}




/* ========================================================================== 
   WizzMall v26 - AJAX Live Search Dropdown
   ========================================================================== */

.live-search-wrap { position: relative; width: 100%; }
.live-search-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 9999;
  background: #fff; border: 1px solid var(--wm-line, #e5efec); border-radius: 18px;
  box-shadow: 0 18px 45px rgba(16,32,48,.12); overflow: hidden; max-height: 360px; overflow-y: auto;
}
.live-search-dropdown[hidden] { display: none !important; }
.live-search-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #eef5f3; color: var(--wm-ink, #102030); text-decoration: none; background: #fff; }
.live-search-row:last-child { border-bottom: 0; }
.live-search-row:hover, .live-search-row:active { background: var(--wm-soft, #eefbf6); }
.live-search-icon { width: 38px; height: 38px; border-radius: 14px; background: var(--wm-soft, #eefbf6); display: grid; place-items: center; font-size: 20px; flex: 0 0 38px; }
.live-search-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.live-search-text b { font-size: 14px; font-weight: 950; color: var(--wm-ink, #102030); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-search-text small, .live-search-empty { font-size: 12px; color: var(--wm-muted, #6b7b88); }
.live-search-empty { padding: 14px; text-align: center; }