/* Davaya — storefront styles (mobile-first, RTL). No frameworks. */

:root {
  --brand-navy: #2C5B80;
  --brand-cyan: #45A76C;
  --brand-red: #E53935;
  --navy-dark: color-mix(in srgb, var(--brand-navy) 55%, #000);
  --cyan-dark: color-mix(in srgb, var(--brand-cyan) 82%, #000);
  --cyan-50: color-mix(in srgb, var(--brand-cyan) 8%, #fff);
  --cyan-100: color-mix(in srgb, var(--brand-cyan) 16%, #fff);
  --cyan-200: color-mix(in srgb, var(--brand-cyan) 32%, #fff);
  --red-50: color-mix(in srgb, var(--brand-red) 8%, #fff);
  --red-200: color-mix(in srgb, var(--brand-red) 30%, #fff);
  /* neutrals and status colours come from /css/tokens.css (logo-tinted, shared with every area) */
  --bg: var(--color-bg);
  --s50: var(--n-50); --s100: var(--n-100); --s200: var(--n-200); --s300: var(--n-300); --s400: var(--n-400);
  --s500: var(--n-500); --s600: var(--n-600); --s700: var(--n-700); --s800: var(--n-800);
  --green: var(--color-success); --green-50: var(--color-success-tint); --green-200: var(--color-success-line);
  --wa: #25D366;
  --font: var(--font-body);
  --header-height: 150px;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-md: 0 4px 14px rgb(15 76 129 / .12);
  --shadow-xl: 0 20px 50px rgb(0 0 0 / .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--color-text-main); font-family: var(--font);
  font-size: 16px; line-height: 1.5; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
body.no-scroll { overflow: hidden; }
::selection { background: color-mix(in srgb, var(--brand-cyan) 25%, transparent); }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }

.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--s400); }
.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 16px; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s100); }
::-webkit-scrollbar-thumb { background: var(--s300); border-radius: 9999px; }
.hide-xs { display: none; } .hide-sm { display: none; } .hide-md { display: none; }
@media (min-width: 480px) { .hide-xs { display: inline; } }
@media (min-width: 640px) { .hide-sm { display: inline; } }
@media (min-width: 768px) { .hide-md { display: inline; } }
mark { background: color-mix(in srgb, var(--brand-cyan) 25%, #fff); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--s200); box-shadow: var(--shadow-xs); }
.offline-bar { display: flex; align-items: center; justify-content: center; gap: 6px; background: #f59e0b; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 16px; text-align: center; }
.topbar { background: var(--brand-navy); color: #fff; padding: 6px 0; font-size: 12px; font-weight: 700; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar-msg { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-text { color: #bfdbfe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
@media (min-width: 640px) { .topbar-text { display: inline; } }
.pill-live { display: inline-flex; align-items: center; gap: 4px; background: rgb(16 185 129 / .2); color: #6ee7b7; border: 1px solid rgb(52 211 153 / .3); padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.pill-live i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; animation: pulse 1.6s infinite; }
.topbar-btn { display: inline-flex; align-items: center; gap: 4px; color: #bfdbfe; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.topbar-btn:hover { color: #fff; }
.topbar-btn .ic { color: var(--brand-cyan); }

.header-main { padding-block: 10px 6px; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-actions { display: flex; align-items: center; gap: 6px; }

.logo { display: flex; align-items: center; gap: 10px; user-select: none; min-width: 0; }
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.logo-mark svg, .logo-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .1)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-title { font-size: 18px; font-weight: 900; color: var(--brand-navy); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-sub { font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--brand-navy) 70%, transparent); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.logo-sm .logo-mark { width: 36px; height: 36px; } .logo-sm .logo-title { font-size: 16px; } .logo-sm .logo-sub { font-size: 11px; }
@media (min-width: 768px) { .logo-md .logo-title { font-size: 20px; } .logo-sub { max-width: none; } }

.branch-pill { display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 16px; background: var(--s50); border: 1px solid var(--s200); text-align: right; max-width: 22rem; transition: background .15s; }
.branch-pill:hover { background: var(--s100); }
.branch-pill-ic { width: 32px; height: 32px; border-radius: 12px; background: var(--cyan-100); color: var(--brand-cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.branch-pill-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.branch-pill-lbl { font-size: 11.5px; font-weight: 800; color: var(--s500); }
.branch-pill-lbl b { color: var(--brand-cyan); background: var(--cyan-50); padding: 0 6px; border-radius: 999px; font-weight: 800; }
.branch-pill strong { font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .branch-pill { display: flex; } .branch-row-mobile { display: none; } }

.btn-pwa { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 16px; background: var(--cyan-50); color: var(--brand-navy); border: 1px solid var(--cyan-200); font-size: 12px; font-weight: 800; }
.btn-pwa .ic { color: var(--brand-cyan); }
.btn-orders { display: none; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 16px; background: var(--s100); font-size: 12px; font-weight: 800; }
.btn-orders:hover { background: var(--s200); }
.btn-orders .ic { color: var(--brand-cyan); }
@media (min-width: 640px) { .btn-orders { display: inline-flex; } }
.btn-cart { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: var(--brand-navy); color: #fff; font-size: 12px; font-weight: 800; box-shadow: var(--shadow-xs); transition: transform .1s, background .15s; }
.btn-cart:hover { background: var(--navy-dark); } .btn-cart:active { transform: scale(.96); }
.btn-cart .ic { color: var(--brand-cyan); }
.cart-total { font-family: ui-monospace, monospace; color: #a5f3fc; font-weight: 700; }
.cart-ic { position: relative; display: inline-flex; }
.cart-ic em { position: absolute; top: -10px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--brand-red); color: #fff; font-size: 10px; font-weight: 900; font-style: normal; display: flex; align-items: center; justify-content: center; animation: pop .25s; }

.branch-row-mobile { padding-top: 8px; }
.branch-mobile { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 12px; background: linear-gradient(90deg, var(--cyan-50), var(--s50)); border: 1px solid var(--cyan-200); text-align: right; }
.bm-ic { width: 24px; height: 24px; border-radius: 8px; background: var(--brand-cyan); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.bm-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bm-line { display: flex; align-items: center; gap: 6px; }
.bm-line small { font-size: 11.5px; font-weight: 800; color: var(--s500); flex-shrink: 0; }
.bm-line strong { font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-line .tag { font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: var(--brand-cyan); color: #fff; flex-shrink: 0; }
.bm-addr { font-size: 11.5px; color: var(--s500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-change { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--brand-cyan); font-size: 11px; font-weight: 800; background: #fff; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--cyan-200); }

.cat-nav { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--s100); }
.cat-scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scroll-behavior: smooth; }
.cat-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; font-size: 12px; font-weight: 900; background: rgb(241 245 249 / .9); color: var(--s700); transition: background .15s, color .15s; }
.cat-pill:hover { background: var(--s200); }
.cat-pill .ic { color: var(--brand-cyan); width: 14px; height: 14px; }
.cat-pill.active { background: var(--brand-cyan); color: #fff; box-shadow: var(--shadow-xs); }
.cat-pill.active .ic { color: #fff; }
.cat-pill.active-navy { background: var(--brand-navy); color: #fff; box-shadow: var(--shadow-xs); }

/* ---------- Main ---------- */
.main { flex: 1; padding-block: 16px 8px; }

/* Carousel */
.carousel { position: relative; overflow: hidden; border-radius: 24px; box-shadow: 0 1px 3px rgb(0 0 0 / .08); border: 1px solid rgb(226 232 240 / .6); margin-block: 16px; background: var(--brand-navy); }
.slide { display: none; position: relative; min-height: 200px; align-items: center; }
.slide.on { display: flex; animation: fade .4s; }
.slide-bg { position: absolute; inset: 0; z-index: 0; }
.slide-bg img { width: 100%; height: 100%; object-fit: cover; }
.slide-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to left, color-mix(in srgb, var(--brand-navy) 95%, transparent), color-mix(in srgb, var(--brand-navy) 80%, transparent), color-mix(in srgb, var(--brand-cyan) 70%, transparent)); mix-blend-mode: multiply; }
.slide-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent 60%); }
.slide-body { position: relative; z-index: 2; width: 100%; max-width: 56rem; padding: 24px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.slide-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--brand-red); font-size: 12px; font-weight: 800; }
.slide h2 { font-size: 20px; font-weight: 900; line-height: 1.25; text-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.slide p { font-size: 12px; color: #f1f5f9; max-width: 36rem; opacity: .95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 16px; background: #fff; color: var(--brand-navy); font-weight: 800; font-size: 12px; box-shadow: var(--shadow-md); margin-top: 4px; transition: all .15s; }
.slide-cta:hover { background: var(--brand-cyan); color: #fff; } .slide-cta:active { transform: scale(.96); }
.car-arrows { position: absolute; bottom: 16px; left: 16px; z-index: 5; display: none; gap: 8px; }
.car-arrows button { width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .2); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.car-arrows button:hover { background: rgb(255 255 255 / .4); }
.car-dots { position: absolute; bottom: 16px; right: 24px; z-index: 5; display: flex; gap: 6px; }
.car-dots button { height: 8px; width: 8px; border-radius: 999px; background: rgb(255 255 255 / .5); transition: all .2s; }
.car-dots button.on { width: 24px; background: var(--brand-cyan); }
@media (min-width: 640px) { .slide { min-height: 220px; } .slide-body { padding: 32px; } .slide h2 { font-size: 24px; } .slide p { font-size: 14px; } .slide-cta { font-size: 14px; } .car-arrows { display: flex; } }
@media (min-width: 768px) { .slide { min-height: 250px; } .slide h2 { font-size: 30px; } }

/* Quick order */
.quick { margin-block: 20px; }
.quick-head { margin-bottom: 12px; padding-inline: 4px; }
.quick-head h2 { font-size: 16px; font-weight: 900; }
.quick-head h2 small { font-size: 11px; font-weight: 400; color: var(--s500); display: none; }
.quick-head p { font-size: 12px; color: var(--s500); }
.quick-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .quick-head h2 { font-size: 18px; } .quick-head h2 small { display: inline; } .quick-grid { gap: 16px; } }
@media (min-width: 768px) { .quick-grid { grid-template-columns: 1fr 1fr; } }
.qcard { border-radius: 16px; padding: 16px; box-shadow: var(--shadow-xs); transition: all .15s; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 640px) { .qcard { border-radius: 24px; padding: 20px; } }
.qcard-rx { border: 2px solid color-mix(in srgb, var(--brand-cyan) 30%, transparent); background: linear-gradient(135deg, #fff, var(--cyan-50) 50%, color-mix(in srgb, var(--brand-cyan) 6%, #fff)); }
.qcard-rx:hover { border-color: var(--brand-cyan); box-shadow: var(--shadow-md); }
.qcard-browse { border: 2px solid var(--s200); background: #fff; cursor: pointer; }
.qcard-browse:hover { border-color: var(--brand-navy); box-shadow: var(--shadow-md); }
.qcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qcard-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.qcard-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qcard h3 { font-size: 16px; font-weight: 900; }
.qcard-browse:hover h3 { color: var(--brand-cyan); }
.qcard p { font-size: 12px; color: var(--s600); line-height: 1.7; }
.qcard-ic { width: 44px; height: 44px; border-radius: 16px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; box-shadow: var(--shadow-xs); }
.grad-cyan { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-navy)); }
.grad-navy { background: linear-gradient(135deg, var(--brand-navy), var(--navy-dark)); }
.tag-red, .tag-navy { padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 900; }
.tag-red { background: var(--brand-red); } .tag-navy { background: var(--brand-navy); }
.tag-green { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: #d1fae5; color: #065f46; font-size: 11.5px; font-weight: 800; }
.qcard-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cyan-100); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qbtn { padding: 8px 6px; border-radius: 12px; background: #fff; border: 1px solid; font-size: 11px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow-xs); transition: all .12s; }
.qbtn:active { transform: scale(.95); }
.qbtn-cyan { color: var(--brand-cyan); border-color: var(--cyan-200); } .qbtn-cyan:hover { background: var(--cyan-50); border-color: var(--brand-cyan); }
.qbtn-red { color: var(--brand-red); border-color: var(--red-200); } .qbtn-red:hover { background: var(--red-50); border-color: var(--brand-red); }
.qbtn-navy { color: var(--brand-navy); border-color: var(--s200); } .qbtn-navy:hover { background: var(--s50); border-color: var(--brand-navy); }
@media (min-width: 640px) { .qbtn { flex-direction: row; justify-content: center; gap: 6px; } .qcard-actions { gap: 8px; } .qcard-ic { width: 52px; height: 52px; font-size: 24px; } .qcard h3 { font-size: 18px; } }
.qcard-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--s100); display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; }
.ok-dot { color: var(--green); }
.go { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-cyan); font-weight: 900; transition: color .15s; }
.qcard-browse:hover .go { color: var(--brand-navy); }

/* Search + filters */
.catalog { padding-top: 8px; }
.search-wrap { position: relative; display: flex; align-items: center; margin-block: 16px 14px; }
.search-wrap input { width: 100%; padding: 12px 48px; border-radius: 16px; background: #fff; border: 2px solid var(--s200); outline: none; font-size: 14px; font-weight: 700; color: var(--brand-navy); box-shadow: var(--shadow-xs); transition: all .15s; -webkit-appearance: none; appearance: none; }
.search-wrap input::-webkit-search-cancel-button { display: none; }
.search-wrap input:hover { border-color: color-mix(in srgb, var(--brand-cyan) 50%, transparent); }
.search-wrap input:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cyan) 15%, transparent); }
.search-wrap input::placeholder { color: var(--s400); font-weight: 400; }
.search-ic { position: absolute; right: 16px; font-size: 20px; color: var(--brand-cyan); pointer-events: none; }
.search-clear { position: absolute; left: 12px; padding: 4px; border-radius: 50%; color: var(--s400); display: flex; }
.search-clear:hover { color: var(--s700); background: var(--s100); }
.filter-panel { background: #fff; border: 1px solid var(--s200); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-xs); margin-bottom: 16px; }
.filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.filter-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; }
.filter-title .ic { color: var(--brand-cyan); font-size: 16px; }
.filter-title b { color: var(--brand-cyan); }
.filter-meta { display: flex; align-items: center; gap: 8px; }
.q-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--brand-cyan); background: var(--cyan-50); border: 1px solid var(--cyan-200); padding: 2px 8px; border-radius: 999px; }
.q-chip span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-chip button { color: var(--s400); display: flex; } .q-chip button:hover { color: #ef4444; }
.count-chip { font-size: 12px; font-weight: 800; color: var(--s500); background: var(--s100); padding: 4px 10px; border-radius: 12px; }
.sub-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--s100); }
.sub-lbl { font-size: 11px; font-weight: 800; color: var(--s500); display: block; margin-bottom: 6px; }
.sub-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.sub-chip { flex-shrink: 0; font-size: 12px; padding: 6px 12px; border-radius: 12px; font-weight: 800; background: var(--s100); color: var(--s700); transition: background .15s; }
.sub-chip:hover { background: var(--s200); }
.sub-chip.on { background: var(--brand-cyan); color: #fff; }
.sub-chip.on-all { background: var(--brand-navy); color: #fff; }

/* Category sections + product grid */
.cat-section { scroll-margin-top: calc(var(--header-height) + 12px); content-visibility: auto; contain-intrinsic-size: auto 600px; margin-bottom: 40px; }
.cat-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid var(--s100); margin-bottom: 14px; }
.cat-head-l { display: flex; align-items: center; gap: 10px; }
.cat-head-ic { width: 32px; height: 32px; border-radius: 12px; background: var(--cyan-50); color: var(--brand-cyan); display: flex; align-items: center; justify-content: center; }
.cat-head h2 { font-size: 16px; font-weight: 900; }
.cat-head small { font-size: 11px; color: var(--s400); font-weight: 500; }
.cat-count { font-size: 12px; font-weight: 800; color: var(--brand-cyan); background: var(--cyan-50); border: 1px solid var(--cyan-200); padding: 2px 10px; border-radius: 999px; }
@media (min-width: 640px) { .cat-head h2 { font-size: 18px; } }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border: 1px solid rgb(226 232 240 / .9); border-radius: 24px; padding: 14px; box-shadow: var(--shadow-xs); transition: all .2s; cursor: pointer; text-align: right; }
.card:hover { border-color: color-mix(in srgb, var(--brand-cyan) 60%, transparent); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .card { padding: 16px; } }
.card-img { position: relative; aspect-ratio: 1; width: 100%; border-radius: 16px; overflow: hidden; background: var(--s50); border: 1px solid var(--s100); margin-bottom: 12px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-img img { transform: scale(1.05); }
.card-badges { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 2; }
.bdg { padding: 2px 8px; border-radius: 8px; color: #fff; font-size: 11.5px; font-weight: 900; box-shadow: var(--shadow-xs); }
.bdg-navy { background: var(--brand-navy); } .bdg-red { background: var(--brand-red); } .bdg-rose { background: #e11d48; }
.card-hover { position: absolute; inset: 0; background: rgb(0 0 0 / .2); opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card-hover span { background: rgb(255 255 255 / .9); color: var(--brand-navy); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
@media (hover: hover) { .card:hover .card-hover { opacity: 1; } }
.card-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.card-sub { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--brand-cyan); background: var(--cyan-50); padding: 2px 8px; border-radius: 6px; margin-bottom: 4px; }
.card h3 { font-size: 12px; font-weight: 800; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .unit { font-size: 11px; color: var(--s400); font-weight: 500; margin-top: 2px; }
@media (min-width: 640px) { .card h3 { font-size: 14px; } }
.card-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--s100); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { display: flex; flex-direction: column; }
.price-now { display: flex; align-items: baseline; gap: 4px; }
.price-now b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 900; font-size: 14px; }
.price-now small { font-size: 11px; font-weight: 800; color: var(--s500); }
.price-old { font-size: 11.5px; color: var(--s400); text-decoration: line-through; font-family: ui-monospace, monospace; }
@media (min-width: 640px) { .price-now b { font-size: 16px; } }

.add-btn { padding: 8px; border-radius: 12px; background: var(--brand-cyan); color: #fff; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-xs); transition: all .12s; }
.add-btn .ic { width: 16px; height: 16px; }
.add-btn:hover { background: var(--cyan-dark); } .add-btn:active { transform: scale(.94); }
.add-btn.done { background: var(--green); }
.add-btn span { display: none; }
@media (min-width: 640px) { .add-btn { padding: 8px 12px; } .add-btn span { display: inline; } }
.stepper { display: inline-flex; align-items: center; gap: 6px; background: var(--s100); padding: 4px; border-radius: 12px; border: 1px solid var(--s200); }
.stepper button { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--s700); box-shadow: var(--shadow-xs); }
.stepper button:hover { background: var(--s200); }
.stepper button.plus { background: var(--brand-cyan); color: #fff; } .stepper button.plus:hover { background: var(--cyan-dark); }
.stepper .ic { width: 12px; height: 12px; }
.stepper output { min-width: 16px; text-align: center; font-family: ui-monospace, monospace; font-weight: 800; font-size: 12px; }
.na-tag { padding: 6px 10px; border-radius: 12px; background: #fff1f2; color: #e11d48; font-size: 11.5px; font-weight: 800; border: 1px solid #fecdd3; white-space: nowrap; }
@media (min-width: 640px) { .na-tag { font-size: 12px; } }
.card.unavail .card-img img { filter: grayscale(.85); opacity: .7; }

.empty { margin-block: 48px; padding: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--s200); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--cyan-50); color: var(--brand-cyan); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.empty h3 { font-size: 16px; font-weight: 800; } .empty p { font-size: 12px; color: var(--s500); max-width: 24rem; }
.empty-actions { display: flex; gap: 8px; padding-top: 4px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 12px; font-size: 12px; font-weight: 800; transition: all .12s; box-shadow: var(--shadow-xs); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-cyan { background: var(--brand-cyan); color: #fff; } .btn-cyan:hover:not(:disabled) { background: var(--cyan-dark); }
.btn-navy { background: var(--brand-navy); color: #fff; } .btn-navy:hover:not(:disabled) { background: var(--navy-dark); }
.btn-light { background: var(--s100); color: var(--s700); box-shadow: none; } .btn-light:hover { background: var(--s200); }
.btn-wa { background: var(--wa); color: #fff; } .btn-wa:hover:not(:disabled) { background: #1ebe5b; }
.btn-full { width: 100%; }

/* ---------- Floating + mobile bar ---------- */
.mobile-bar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px; background: rgb(255 255 255 / .95); backdrop-filter: blur(12px); border-top: 1px solid var(--s200); box-shadow: 0 -4px 16px rgb(0 0 0 / .08); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.mb-rx { flex: 1; padding: 10px 8px; border-radius: 16px; background: var(--cyan-50); border: 1px solid var(--cyan-200); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .1s; }
.mb-rx .ic { color: var(--brand-cyan); font-size: 16px; }
.mb-cart { flex: 2; padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, var(--brand-navy), var(--navy-dark)); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-md); }
.mb-cart .ic { color: var(--brand-cyan); font-size: 16px; }
.mb-l { display: flex; align-items: center; gap: 6px; }
.mb-t { font-family: ui-monospace, monospace; color: #a5f3fc; }
.mb-rx:active, .mb-cart:active { transform: scale(.96); }
@media (min-width: 640px) { .mobile-bar { display: none; } }
.fab-wa { position: fixed; bottom: 84px; left: 16px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: #10b981; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--shadow-xl); transition: transform .15s; }
.fab-wa:hover { background: var(--green); transform: scale(1.06); } .fab-wa .ic { fill: #fff; }
.fab-top { position: fixed; bottom: 84px; right: 16px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--brand-navy); border: 1px solid var(--s200); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 20px; }
@media (min-width: 640px) { .fab-wa, .fab-top { bottom: 24px; } }

/* ---------- Footer ---------- */
.footer { background: #fff; border-top: 1px solid rgb(226 232 240 / .8); margin-top: 48px; padding-block: 20px; color: var(--s500); }
.footer-in { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; text-align: center; }
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-brand p { font-size: 12px; color: var(--s400); } .footer-brand .sep { display: none; color: var(--s300); }
.footer-links { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.footer-links button, .footer-links a { color: var(--s500); font-weight: 800; }
.footer-links button:hover { color: var(--brand-navy); }
.footer-links > span { color: var(--s300); }
.footer-links .admin-link { display: inline-flex; align-items: center; gap: 6px; color: var(--s400); font-weight: 500; }
.footer-links .admin-link:hover { color: var(--brand-navy); } .admin-link .ic { width: 12px; height: 12px; }
@media (min-width: 640px) { .footer-in { flex-direction: row; text-align: right; } .footer-brand { flex-direction: row; gap: 12px; } .footer-brand .sep { display: inline; } }

/* ---------- Modals ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgb(0 0 0 / .6); backdrop-filter: blur(3px); animation: fade .2s; }
@media (min-width: 640px) { .overlay { align-items: center; padding: 16px; } }
.overlay.center { align-items: center; padding: 8px; }
.overlay.drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.modal { width: 100%; max-width: 36rem; background: #fff; border-radius: 24px 24px 0 0; box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; border: 1px solid var(--s100); text-align: right; animation: sheet .25s ease-out; }
@media (min-width: 640px) { .modal { border-radius: 24px; max-height: 88vh; animation: zoom .2s ease-out; } }
.overlay.center .modal { border-radius: 24px; animation: zoom .2s ease-out; }
.modal.sm { max-width: 24rem; } .modal.md { max-width: 32rem; }
.drawer .modal { max-width: 32rem; height: 100%; max-height: none; border-radius: 0; animation: slide-l .3s ease-out; justify-content: space-between; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; color: #fff; flex-shrink: 0; box-shadow: var(--shadow-xs); }
.m-head.navy { background: var(--brand-navy); }
.m-head.grad { background: linear-gradient(90deg, var(--brand-navy), color-mix(in srgb, var(--brand-navy) 80%, var(--brand-cyan)), var(--cyan-dark)); }
.m-head.grad2 { background: linear-gradient(90deg, var(--brand-cyan), var(--brand-navy)); }
.m-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-head-ic { width: 38px; height: 38px; border-radius: 14px; background: rgb(255 255 255 / .18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.m-head h2 { font-size: 16px; font-weight: 900; line-height: 1.2; } .m-head p { font-size: 11px; color: #cffafe; }
.m-close { padding: 6px; border-radius: 12px; background: rgb(255 255 255 / .12); color: #fff; display: flex; font-size: 20px; }
.m-close:hover { background: rgb(255 255 255 / .25); }
.m-body { padding: 16px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.m-foot { padding: 12px 16px; background: var(--s50); border-top: 1px solid var(--s200); flex-shrink: 0; }
.m-title-plain { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--s100); flex-shrink: 0; }

/* Branch modal */
.seg { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); padding: 4px; gap: 4px; background: rgb(226 232 240 / .7); border-radius: 16px; }
.seg button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 900; color: var(--s600); }
.seg button.on { background: #fff; color: var(--brand-navy); box-shadow: 0 0 0 1px var(--s200), var(--shadow-xs); }
.seg button .ic { color: var(--s400); } .seg button.on .ic { color: var(--brand-cyan); }
.seg .num { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: rgb(203 213 225 / .8); color: var(--s700); } .seg .on .num { background: var(--brand-cyan); color: #fff; }
.m-tools { padding: 12px 16px; background: rgb(248 250 252 / .9); border-bottom: 1px solid rgb(226 232 240 / .8); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.mini-search { position: relative; display: flex; align-items: center; }
.mini-search .ic { position: absolute; right: 12px; color: var(--s400); pointer-events: none; }
.mini-search input { width: 100%; padding: 8px 34px; border-radius: 12px; background: #fff; border: 1px solid var(--s200); font-size: 12px; font-weight: 700; color: var(--brand-navy); outline: none; }
.mini-search input:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-cyan) 15%, transparent); }
.blist { display: flex; flex-direction: column; gap: 10px; }
.bcard { padding: 14px; border-radius: 16px; border: 1px solid rgb(226 232 240 / .9); background: #fff; transition: all .15s; }
.bcard:hover { border-color: color-mix(in srgb, var(--brand-cyan) 40%, transparent); }
.bcard.on { border-color: var(--brand-cyan); background: color-mix(in srgb, var(--brand-cyan) 5%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-cyan) 30%, transparent); }
.bcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.bcard-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bcard h3 { font-size: 14px; font-weight: 900; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.chip-cyan { color: #fff; background: var(--brand-cyan); } .chip-slate { color: var(--s500); background: var(--s100); }
.chip-green { color: #047857; background: var(--green-50); border: 1px solid var(--green-200); flex-shrink: 0; }
.chip-green i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: pulse 1.6s infinite; }
.bcard-addr { font-size: 12px; color: var(--s600); display: flex; gap: 6px; line-height: 1.6; font-weight: 700; }
.bcard-addr .ic { color: var(--brand-red); margin-top: 3px; }
.bcard-lm { font-size: 11px; color: var(--s500); padding-right: 20px; margin-bottom: 10px; }
.bcard-act { padding-top: 8px; border-top: 1px solid var(--s100); display: flex; flex-direction: column; gap: 8px; }
.quick-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ql { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; background: var(--s100); color: var(--s700); font-size: 11px; font-weight: 800; transition: transform .1s; }
.ql:hover { background: var(--s200); } .ql:active { transform: scale(.95); }
.ql-wa { background: var(--green-50); color: #047857; border: 1px solid var(--green-200); } .ql-wa:hover { background: #d1fae5; }
.bcard-act .btn { width: 100%; padding: 8px 16px; }
@media (min-width: 640px) { .bcard-act { flex-direction: row; align-items: center; justify-content: space-between; } .bcard-act .btn { width: auto; } }
.note { font-size: 11px; color: var(--s500); font-weight: 700; }

/* Product detail */
.detail-img { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--s50); border: 1px solid var(--s100); position: relative; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.detail-img .bdg { position: absolute; top: 12px; right: 12px; padding: 4px 12px; font-size: 12px; border-radius: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.alert-rose { padding: 12px; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 16px; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #be123c; font-weight: 800; line-height: 1.6; }
.alert-rose::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #f43f5e; flex-shrink: 0; margin-top: 5px; }
.d-title { font-size: 18px; font-weight: 900; line-height: 1.4; } .d-en { font-size: 12px; color: var(--s400); direction: ltr; text-align: right; } .d-unit { font-size: 12px; color: var(--s500); font-weight: 700; }
.price-box { padding: 14px; border-radius: 16px; background: var(--s50); border: 1px solid rgb(226 232 240 / .8); display: flex; align-items: center; justify-content: space-between; }
.price-box > span { font-size: 12px; font-weight: 800; color: var(--s600); }
.price-box b { font-size: 24px; font-weight: 900; font-family: ui-monospace, monospace; }
.price-box small { font-size: 12px; font-weight: 800; color: var(--s500); margin-inline: 4px; }
.price-box s { font-size: 12px; color: var(--s400); font-family: ui-monospace, monospace; }
.h-sm { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.desc { font-size: 12px; color: var(--s600); line-height: 1.8; background: #fff; padding: 12px; border-radius: 12px; border: 1px solid var(--s100); }
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11px; color: var(--s600); font-weight: 800; }
.assure div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px; border-radius: 12px; background: var(--s50); }
.assure .ic { font-size: 16px; }
.d-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.d-foot small { font-size: 11px; color: var(--s400); display: block; } .d-foot b { font-size: 18px; font-family: ui-monospace, monospace; font-weight: 900; }
.pill-note { padding: 10px 20px; border-radius: 16px; font-size: 12px; font-weight: 900; background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

/* Cart */
.c-section { padding-block: 12px; border-top: 1px solid var(--s100); display: flex; flex-direction: column; gap: 10px; }
.c-section:first-child { border-top: 0; padding-top: 0; }
.c-title { font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.c-title.big { font-weight: 900; }
.c-title .ic { color: var(--brand-cyan); margin-inline-end: 6px; font-size: 16px; }
.link-red { font-size: 11px; color: var(--brand-red); font-weight: 800; } .link-red:hover { text-decoration: underline; }
.rx-box { padding: 12px; border-radius: 16px; background: color-mix(in srgb, var(--brand-cyan) 5%, #fff); border: 1px solid var(--cyan-200); display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.rx-img { display: flex; align-items: center; gap: 10px; }
.rx-img img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; border: 1px solid var(--cyan-200); }
.rx-img p { font-weight: 800; } .rx-img span { font-size: 11.5px; color: var(--s500); }
.rx-line { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--cyan-100); font-weight: 700; color: var(--s700); }
.rx-line .ic { color: var(--brand-red); }
.rx-txt { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--cyan-100); color: var(--s600); } .rx-txt b { display: block; font-size: 11.5px; color: var(--s700); }
.ci { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid rgb(226 232 240 / .9); background: rgb(248 250 252 / .5); }
.ci img { width: 48px; height: 48px; object-fit: cover; border-radius: 12px; border: 1px solid var(--s200); background: #fff; flex-shrink: 0; }
.ci-body { flex: 1; min-width: 0; }
.ci-body h4 { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-line { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.ci-line span { color: var(--s600); font-weight: 700; } .ci-line small { font-size: 11.5px; color: var(--s400); } .ci-line strong { margin-inline-start: auto; font-weight: 900; }
.ci .stepper { background: #fff; }
.ci.gone { border-color: #fecdd3; background: #fff1f2; }
.warn { font-size: 11.5px; color: #be123c; font-weight: 800; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--s200); font-size: 12px; font-weight: 800; color: var(--s500); background: #fff; }
.opt .ic { color: var(--brand-cyan); font-size: 16px; }
.opt.on { border-color: var(--brand-cyan); background: color-mix(in srgb, var(--brand-cyan) 10%, #fff); color: var(--brand-navy); }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label { font-size: 11px; font-weight: 800; color: var(--s600); }
.inp { position: relative; }
.inp .ic { position: absolute; right: 12px; top: 11px; color: var(--s400); }
.fld input, .fld textarea, .fld select, .form-in { width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--s200); font-size: 13px; color: var(--s800); background: #fff; outline: none; }
.fld input:focus, .fld textarea:focus, .form-in:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--brand-cyan); }
.fld .inp input { padding-right: 36px; }
.fld textarea { resize: none; }
.ltr { direction: ltr; text-align: left; font-family: ui-monospace, monospace; }
.geo { width: 100%; padding: 8px 12px; border-radius: 12px; background: var(--s100); border: 1px solid var(--s200); font-size: 12px; font-weight: 800; color: var(--s700); display: flex; align-items: center; justify-content: center; gap: 6px; }
.geo:hover { background: var(--s200); } .geo.ok { background: var(--green-50); color: #047857; border-color: var(--green-200); }
.pay { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--s200); font-size: 12px; color: var(--s600); cursor: pointer; }
.pay:hover { background: var(--s50); } .pay.on { border-color: var(--brand-cyan); background: color-mix(in srgb, var(--brand-cyan) 6%, #fff); color: var(--brand-navy); font-weight: 800; }
.pay input { accent-color: var(--brand-cyan); }
.error-box { padding: 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; font-size: 12px; color: var(--brand-red); display: flex; align-items: flex-start; gap: 8px; font-weight: 800; }
.total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; }
.total-row span { color: var(--s500); font-weight: 800; } .total-row b { font-size: 22px; font-weight: 900; font-family: ui-monospace, monospace; } .total-row small { font-size: 12px; font-weight: 800; color: var(--s600); margin-inline-start: 4px; }
.btn-send { width: 100%; padding: 14px; border-radius: 16px; font-size: 13px; font-weight: 900; background: linear-gradient(90deg, #059669, #10b981); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-md); transition: transform .1s; }
.btn-send .ic { font-size: 20px; fill: #fff; }
.btn-send:active { transform: scale(.98); } .btn-send:disabled { background: var(--s300); color: var(--s500); box-shadow: none; cursor: not-allowed; }
.foot-note { font-size: 11.5px; text-align: center; color: var(--s400); margin-top: 10px; }
.cart-empty { padding: 32px 0; text-align: center; color: var(--s400); } .cart-empty p:first-child { font-size: 14px; font-weight: 800; color: var(--s600); } .cart-empty p:last-child { font-size: 12px; }
.spin { animation: spin 1s linear infinite; }
.success { text-align: center; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.success .big { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 34px; }
.success h3 { font-size: 18px; font-weight: 900; } .success p { font-size: 12px; color: var(--s600); line-height: 1.8; }
.success .oid { font-family: ui-monospace, monospace; font-weight: 900; font-size: 18px; background: var(--s100); padding: 4px 14px; border-radius: 12px; }

/* Coupons */
.coupon-row { display: flex; gap: 8px; } .coupon-row input { flex: 1; text-transform: uppercase; } .coupon-row .btn { flex-shrink: 0; }
.coupon-msg { font-size: 12px; font-weight: 800; padding: 8px 10px; border-radius: 10px; } .coupon-msg.ok { background: var(--green-50); color: #047857; border: 1px solid var(--green-200); } .coupon-msg.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.sum-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 6px; color: var(--s600); font-weight: 700; } .sum-row b { font-family: ui-monospace, monospace; }
.sum-row.disc { color: #047857; }

/* Prescription */
.tabs4 { background: rgb(241 245 249 / .9); padding: 6px; border-bottom: 1px solid var(--s200); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; flex-shrink: 0; }
.tabs4 button { position: relative; padding: 6px 4px; border-radius: 12px; font-size: 12px; font-weight: 800; color: var(--s600); display: flex; align-items: center; justify-content: center; gap: 4px; }
.tabs4 button.on { background: #fff; box-shadow: var(--shadow-xs); color: var(--brand-navy); }
.tabs4 .dot { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.rx-sec { display: flex; flex-direction: column; gap: 10px; }
.rx-sec + .rx-sec { padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--s100); }
.rx-lbl { font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.rx-lbl > span { display: flex; align-items: center; gap: 6px; } .rx-lbl .ic { font-size: 16px; }
.ok-tag { font-size: 11px; font-weight: 800; color: var(--green); display: inline-flex; align-items: center; gap: 4px; }
.pick-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .pick-grid { grid-template-columns: 1fr 1fr; } }
.pick { padding: 14px; border-radius: 16px; border: 2px dashed; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: right; transition: all .15s; }
@media (min-width: 640px) { .pick { flex-direction: column; text-align: center; } }
.pick b { display: block; font-size: 12px; font-weight: 800; color: var(--brand-navy); } .pick small { display: block; font-size: 11.5px; color: var(--s500); }
.pick-ic { width: 40px; height: 40px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-xs); }
.pick-cam { border-color: color-mix(in srgb, var(--brand-cyan) 50%, transparent); background: linear-gradient(135deg, var(--cyan-50), #fff); } .pick-cam:hover { border-color: var(--brand-cyan); } .pick-cam .pick-ic { background: var(--brand-cyan); }
.pick-file { border-color: var(--s300); background: var(--s50); } .pick-file:hover { border-color: var(--brand-navy); background: var(--s100); } .pick-file .pick-ic { background: var(--brand-navy); }
.preview { padding: 10px; border-radius: 16px; background: var(--s50); border: 1px solid var(--s200); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.preview img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; border: 1px solid var(--s200); flex-shrink: 0; }
.preview b { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview small { font-size: 11.5px; color: var(--green); font-weight: 700; }
.preview-r { display: flex; gap: 6px; flex-shrink: 0; }
.sm-btn { padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--s200); font-size: 12px; font-weight: 800; color: var(--brand-navy); }
.sm-btn:hover { background: var(--s100); } .sm-btn.danger { background: #fef2f2; color: var(--brand-red); border-color: #fee2e2; padding: 6px; display: flex; } .sm-btn.danger .ic { font-size: 16px; }
.rec-box { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgb(255 241 242 / .5), #fff, var(--s50)); border: 1px solid var(--s200); text-align: center; }
.rec-idle { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
@media (min-width: 640px) { .rec-idle { flex-direction: row; justify-content: space-between; text-align: right; } }
.rec-idle b { display: block; font-size: 13px; font-weight: 800; } .rec-idle small { font-size: 11px; color: var(--s500); }
.btn-rec { padding: 10px 16px; border-radius: 12px; background: linear-gradient(90deg, var(--brand-red), #dc2626); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-xs); width: 100%; justify-content: center; }
@media (min-width: 640px) { .btn-rec { width: auto; } }
.rec-live { display: flex; flex-direction: column; gap: 12px; padding-block: 4px; align-items: center; }
.wave { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; }
.wave i { width: 6px; border-radius: 999px; background: #ef4444; animation: bounce 1s infinite; } .wave i:nth-child(1) { height: 16px; } .wave i:nth-child(2) { height: 28px; animation-delay: .15s; } .wave i:nth-child(3) { height: 20px; animation-delay: .3s; } .wave i:nth-child(4) { height: 32px; animation-delay: .07s; } .wave i:nth-child(5) { height: 24px; animation-delay: .22s; }
.rec-live p { font-size: 13px; font-weight: 900; color: var(--brand-red); }
.timer { font-family: ui-monospace, monospace; font-weight: 800; font-size: 18px; } .timer small { font-size: 12px; color: var(--s400); font-family: var(--font); }
.bar { width: 100%; max-width: 20rem; height: 6px; background: var(--s200); border-radius: 999px; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--brand-red); transition: width .3s; }
.player { padding: 12px; border-radius: 16px; background: var(--s50); border: 1px solid var(--s200); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.player-l { display: flex; align-items: center; gap: 12px; }
.play-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-cyan); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-xs); }
.player b { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 6px; } .player b .ic { color: var(--brand-cyan); } .player small { font-size: 11px; color: var(--s500); font-family: ui-monospace, monospace; }
.tags-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tags-q > span { font-size: 11.5px; color: var(--s400); font-weight: 800; }
.tags-q button { padding: 2px 8px; border-radius: 8px; background: var(--s100); font-size: 11.5px; font-weight: 800; color: var(--s600); } .tags-q button:hover { background: var(--s200); }
.rx-text { width: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--s200); font-size: 13px; color: var(--s800); outline: none; resize: none; background: rgb(248 250 252 / .5); }
.rx-text:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-cyan) 20%, transparent); }
.rx-foot { display: flex; flex-direction: column; gap: 10px; }
.rx-foot-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--s500); } .rx-foot-note .ic { color: var(--brand-cyan); }
.rx-btns { display: flex; gap: 8px; } .rx-btns .btn { flex: 1; }
.quick-send { padding: 12px; border-radius: 16px; background: var(--green-50); border: 1px solid var(--green-200); display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .rx-foot { flex-direction: row; align-items: center; justify-content: space-between; } .rx-btns .btn { flex: none; } }

/* Orders history */
.oc { padding: 14px; border-radius: 16px; border: 1px solid var(--s200); background: rgb(248 250 252 / .6); display: flex; flex-direction: column; gap: 10px; }
.oc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oc-id { font-family: ui-monospace, monospace; font-weight: 900; font-size: 12px; } .oc-date { font-size: 11px; color: var(--s500); margin-inline-start: 8px; }
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.st-new { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .st-preparing { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.st-on_the_way { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; } .st-delivered { background: var(--green-50); color: #047857; border-color: var(--green-200); }
.st-cancelled { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.oc-meta { font-size: 12px; color: var(--s700); display: flex; flex-direction: column; gap: 4px; } .oc-meta span { color: var(--s400); font-weight: 700; }
.oc-items { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--s200); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.oc-items .r { display: flex; justify-content: space-between; color: var(--s600); } .oc-items .r span:last-child { font-family: ui-monospace, monospace; }
.oc-items .t { border-top: 1px solid var(--s100); padding-top: 4px; font-weight: 800; color: var(--brand-navy); }
.oc-rx { font-size: 12px; background: var(--cyan-50); padding: 8px; border-radius: 12px; border: 1px solid var(--cyan-100); font-weight: 600; }
.oc-act { display: flex; justify-content: flex-end; }
.empty-state { padding: 48px 0; text-align: center; color: var(--s400); display: flex; flex-direction: column; align-items: center; gap: 8px; } .empty-state .ic { font-size: 40px; color: var(--s300); } .empty-state b { font-size: 14px; color: var(--s600); } .empty-state small { font-size: 12px; }

/* QR + info */
.qr-frame { padding: 16px; background: var(--s50); border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--brand-cyan) 30%, transparent); display: inline-block; }
.qr-frame img { width: 192px; height: 192px; background: #fff; padding: 8px; border-radius: 12px; box-shadow: var(--shadow-xs); }
.center-txt { text-align: center; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-body { font-size: 12px; color: var(--s600); line-height: 1.9; white-space: pre-line; padding: 16px; overflow-y: auto; }

/* Toast */
#toast-root { position: fixed; inset-inline: 0; bottom: 84px; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding-inline: 16px; }
.toast { background: var(--brand-navy); color: #fff; font-size: 13px; font-weight: 800; padding: 10px 16px; border-radius: 14px; box-shadow: var(--shadow-xl); animation: toast-in .25s, toast-out .3s 2.6s forwards; max-width: 100%; }
.toast.err { background: #b91c1c; }
@media (min-width: 640px) { #toast-root { bottom: 24px; } }

.noscript { text-align: center; padding: 24px; }

/* ---------- Animations ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zoom { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes pulse { 50% { opacity: .4; } }
@keyframes pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 50% { transform: translateY(-6px); } }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* ---------- Phone: keyboard / search fixes ---------- */
@media (max-width: 639px) {
  /* iOS zooms the page when a focused field is < 16px, which broke the layout while searching */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select { font-size: 16px !important; }
  body.kb .topbar, body.kb .branch-row-mobile, body.kb .cat-nav,
  body.kb .mobile-bar, body.kb .fab-wa, body.kb .fab-top { display: none !important; }
  body.kb .header-main { padding-block: 6px; }
}
body.searching #catalog { min-height: 70vh; }   /* results never shrink the page under the reader's thumb */
.site-header, .mobile-bar { -webkit-transform: translateZ(0); }
.mobile-bar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* Uploaded logo replaces the name/subtitle text: show the image alone, sized by height */
.logo-only .logo-mark { width: auto; height: 52px; max-width: 46vw; }
.logo-only .logo-mark img { width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: none; }
.logo-sm.logo-only .logo-mark { height: 40px; }
@media (min-width: 768px) { .logo-only .logo-mark { height: 58px; max-width: 260px; } }

.quick { margin-block: 14px; } .quick-grid { grid-template-columns: 1fr !important; }

.filter-title { min-width: 0; } .filter-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-panel { min-height: 50px; }

.filter-row { flex-wrap: nowrap; } .filter-meta { flex-shrink: 0; } .filter-title { flex: 1; }

/* Logo height is set by the admin (Branding > logo size) via --logo-h */
.logo-only .logo-mark { height: min(var(--logo-h, 52px), 96px); max-width: 62vw; }
@media (min-width: 768px) { .logo-only .logo-mark { height: var(--logo-h, 52px); max-width: 320px; } }
.logo-sm.logo-only .logo-mark { height: min(calc(var(--logo-h, 52px) * .8), 64px); }

/* Image-only banners: square on phones (1080x1080), wide 16:5 on desktop (1920x600) */
.carousel.has-image { background: transparent; }
.slide.slide-image { min-height: 0; }
.slide-image.on { display: block; position: relative; }
.slide-image picture, .slide-image img { display: block; width: 100%; }
.slide-image picture { aspect-ratio: 1 / 1; background: var(--s100); }
.slide-image img { height: 100%; object-fit: cover; }
@media (min-width: 768px) { .slide-image picture { aspect-ratio: 16 / 5; } }
.slide-hit { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: transparent; cursor: pointer; }

.pay > span { display: flex; flex-direction: column; gap: 1px; } .pay > span > .ic { display: none; } .pay small { font-size: 11px; color: var(--s500); font-weight: 500; }

.store-notice { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; text-align: center; font-weight: 800; font-size: 13px; padding: 10px 16px; }

/* ---------- Header: pinned categories button + compact cart on phones ---------- */
.cat-nav { display: flex; align-items: center; gap: 8px; }
.cat-nav .cat-scroll { flex: 1; min-width: 0; }
.cat-menu-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; background: var(--brand-navy); color: #fff; font-size: 12px; font-weight: 900; box-shadow: var(--shadow-xs); }
.cat-menu-btn .ic { font-size: 16px; color: var(--brand-cyan); }
.cat-menu-btn:active { transform: scale(.96); }

@media (max-width: 639px) {
  .btn-cart { position: relative; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 16px; gap: 0; }
  .btn-cart .cart-ic { position: static; font-size: 22px; }
  .btn-cart .cart-ic em { top: -7px; right: -7px; box-shadow: 0 0 0 2px #fff; }
  .btn-cart .cart-total, .btn-cart .hide-xs { display: none; }
  .btn-pwa { padding: 12px; border-radius: 16px; } .btn-pwa span { display: none; }
}

/* ---------- Categories browser ---------- */
.cm-list { display: flex; flex-direction: column; gap: 8px; }
.cm-all { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, var(--brand-navy), var(--navy-dark)); color: #fff; font-weight: 900; font-size: 14px; }
.cm-all span { flex: 1; text-align: right; } .cm-all b, .cm-sub b { font-family: ui-monospace, monospace; font-size: 11px; background: rgb(255 255 255 / .2); padding: 1px 8px; border-radius: 999px; }
.cm-cat { border: 1px solid var(--s200); border-radius: 14px; overflow: hidden; background: #fff; }
.cm-cat.open { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-cyan) 25%, transparent); }
.cm-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: right; }
.cm-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--cyan-50); color: var(--brand-cyan); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.cm-name { flex: 1; font-weight: 900; font-size: 14px; }
.cm-n { font-size: 11px; font-weight: 800; color: var(--s500); background: var(--s100); padding: 1px 8px; border-radius: 999px; }
.cm-chev { color: var(--s400); transition: transform .2s; } .cm-cat.open .cm-chev { transform: rotate(180deg); }
.cm-subs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; border-top: 1px dashed var(--s200); padding-top: 12px; }
.cm-sub { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--s100); font-size: 12.5px; font-weight: 800; color: var(--s700); }
.cm-sub b { background: #fff; color: var(--s500); } .cm-sub:hover { background: var(--s200); } .cm-sub:active { transform: scale(.96); }
.cm-sub.all { background: var(--cyan-50); color: var(--brand-navy); border: 1px solid var(--cyan-200); width: 100%; justify-content: space-between; }

/* ---------- Phone header: pin only logo row + categories ---------- */
@media (max-width: 639px) {
  .site-header { top: calc(var(--hdr-collapse, 0px) * -1); }
  .header-main { padding-block: 8px 6px; }
  .cat-nav { margin-top: 6px; padding-top: 6px; }
}
/* ---------- Most-ordered sub-categories ---------- */
.pop-row { display: flex; align-items: center; gap: 10px; margin: 12px 0 -4px; }
.pop-lbl { flex-shrink: 0; font-size: 12px; font-weight: 900; color: var(--brand-red); }
.pop-chips { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px; min-width: 0; }
.pop-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--cyan-200); color: var(--brand-navy); font-size: 12.5px; font-weight: 800; box-shadow: var(--shadow-xs); transition: all .12s; }
.pop-chip:hover { background: var(--cyan-50); border-color: var(--brand-cyan); } .pop-chip:active { transform: scale(.95); }

.branch-row-mobile { padding-block: 8px 2px; } .branch-row-mobile .branch-mobile { margin: 0; }
@media (min-width: 640px) { .branch-row-mobile { display: none; } }

.skeleton-line { height: 46px; border-radius: 12px; background: linear-gradient(90deg, var(--s100), var(--s200), var(--s100)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Search suggestions + hint ---------- */
.search-wrap { position: relative; }
.sugg { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 35; background: #fff; border: 1px solid var(--s200); border-radius: 18px; box-shadow: 0 16px 40px rgb(15 76 129 / .18); overflow: hidden; max-height: min(60vh, 420px); overflow-y: auto; }
.sg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--s100); }
.sg:last-child { border-bottom: 0; } .sg:hover, .sg.on { background: var(--cyan-50); }
.sg img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--s100); flex-shrink: 0; }
.sg-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.35; display: flex; flex-direction: column; } .sg-t small { font-size: 11px; color: var(--s500); font-weight: 500; }
.sg-p { font-family: ui-monospace, monospace; font-size: 12px; color: var(--brand-navy); white-space: nowrap; }
.sg-cat { background: var(--s50); } .sg-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-navy); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-go { font-size: 11px; font-weight: 800; color: var(--brand-cyan); }
.q-hint { margin-top: 8px; font-size: 12.5px; font-weight: 800; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 6px 10px; }
.dym { font-weight: 900; color: var(--brand-navy); text-decoration: underline; padding: 0 4px; }

/* prev / next category navigation at the end of each section */
.sec-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin:14px 0 6px}
.sec-nav button{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #d6e6f2;border-radius:14px;background:#fff;color:var(--navy,#2C5B80);font:inherit;text-align:start;cursor:pointer;min-width:0}
.sec-nav button small{font-size: 11.5px;color:#64748b}
.sec-nav button b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-nav button:last-child:not(.sec-all){text-align:end}
.sec-nav .sec-all{flex-direction:row;align-items:center;justify-content:center;gap:6px;background:var(--navy,#2C5B80);color:#fff;border-color:transparent;font-weight:800;font-size:12px}
.sec-nav .sec-all svg{width:16px;height:16px}

/* <picture> is an auto-height flex item, so height:100% on the <img> never resolved and the width/height attrs won. Let the img be the flex item. */
.logo-mark picture { display: contents; }

/* breadcrumb + floating back button */
.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.crumb-home,.crumb{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;border:1px solid #cfe3f1;background:#fff;color:var(--brand-navy);font:inherit;font-weight:800;cursor:pointer}
.crumb-home{background:var(--brand-navy);color:#fff;border-color:transparent}
.crumb-home svg{width:15px;height:15px}
.crumb-sep{color:#94a3b8}.crumb-cur{color:var(--brand-navy);font-weight:900}
.back-all{position:fixed;z-index:40;inset-inline:0;margin-inline:auto;width:max-content;bottom:calc(96px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:999px;background:var(--brand-navy);color:#fff;font:inherit;font-weight:800;font-size:13px;box-shadow:0 8px 24px rgb(15 76 129/.35);cursor:pointer}
.back-all[hidden]{display:none}.back-all svg{width:16px;height:16px}
@media (min-width:768px){.back-all{bottom:24px}}

/* developer credit */
.dev-credit{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 4px;width:max-content;max-width:100%;color:#64748b;font:600 12px/1 system-ui,sans-serif;text-decoration:none;direction:ltr;opacity:.85;transition:opacity .15s}
.dev-credit:hover{opacity:1}
.dev-credit img{height:24px;width:auto;display:block}
.dev-heart{font-style:normal;color:#e11d48;display:inline-block;animation:dev-beat 1.6s ease-in-out infinite}
@keyframes dev-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.dev-heart{animation:none}}

/* prescription-only products */
.bdg-rx { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.rx-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 13px; line-height: 1.7; }

/* demo storefront notice: one line that scrolls away (not part of the sticky header), full text on tap */
.demo-notice { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; font-size: 12.5px; line-height: 1.7; text-align: center; }
.demo-notice summary { cursor: pointer; padding: 7px 16px; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-notice summary::-webkit-details-marker { display: none; }
.demo-notice summary b { font-weight: 800; }
.demo-notice summary::after { content: ' ▾'; }
.demo-notice[open] summary::after { content: ' ▴'; }
.demo-notice p { margin: 0 auto; padding: 0 16px 10px; max-width: 760px; }
.demo-notice a { color: #9a3412; font-weight: 800; text-decoration: underline; white-space: nowrap; }

/* footer: brand + links on one row, then legal lines, then the platform note — each on its own row */
.footer-in { flex-direction: column !important; align-items: stretch !important; gap: 14px; text-align: center !important; }
.footer-top { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-brand { flex-direction: column !important; gap: 6px !important; align-items: center; }
.footer-brand .logo-text { align-items: center; }
.footer-brand .logo-title, .footer-brand .logo-sub { white-space: normal; overflow: visible; max-width: none; }
.footer-links { flex-wrap: wrap; justify-content: center; gap: 6px 4px; }
.footer-links button { white-space: nowrap; padding: 8px 10px; border-radius: 10px; min-height: 40px; }
.footer-links button:hover { background: var(--s50); }
.footer-legal { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--s100); font-size: 12px; line-height: 1.8; color: var(--s500); }
.footer-legal p { margin: 0; }
.platform-terms { margin: 0 auto; max-width: 860px; font-size: 11px; line-height: 1.9; color: var(--s400); }
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-brand { flex-direction: row !important; gap: 12px !important; text-align: start; }
  .footer-brand .logo-text { align-items: flex-start; }
}

/* mobile header: the logo never grows taller than the header row, whatever height the pharmacy chose */
@media (max-width: 639px) {
  .logo-only .logo-mark { height: min(var(--logo-h, 52px), 46px); max-width: 58vw; }
  .logo-md:not(.logo-only) .logo-mark { width: 40px; height: 40px; }
  .header-row { min-height: 52px; }
}

/* touch targets (audit M2): nothing tappable under ~36px on phones */
.topbar-btn { min-height: 32px; min-width: 32px; padding: 6px 8px; justify-content: center; }
@media (pointer: coarse) {
  .cat-pill { min-height: 38px; }
  .tags-q button { min-height: 32px; padding: 4px 10px; }
  .qty button, .qty-btn { min-width: 36px; min-height: 36px; }
}

/* delivery code shown in my orders while the courier is on the way */
.oc-otp { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.oc-otp b { font-size: 20px; letter-spacing: 4px; font-family: ui-monospace, monospace; }
.oc-otp small { flex-basis: 100%; color: #047857; }