/* WeedBuddy PWA — JARS light theme, built to match the native app */
:root {
    --white: #FFFFFF;
    --black: #000000;
    --ink-50: rgba(0, 0, 0, 0.5);
    --surface: #F2F2F7;
    --orange: #FF5003;
    --teal: #2BBDB1;
    --lime: #D4FF00;
    --indica: #9B30FF;
    --sativa: #FF6600;
    --hybrid: #00CC44;
    --btn: #1A1A1A;
    --border: rgba(0, 0, 0, 0.12);
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --cat-size: clamp(62px, 18.5vw, 94px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--white); }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--black); line-height: 1.4; -webkit-font-smoothing: antialiased;
}
img { display: block; }
button { font-family: inherit; cursor: pointer; color: inherit; }  /* color:inherit stops iOS Safari tinting button text blue */

.app { max-width: 520px; margin: 0 auto; min-height: 100dvh; }
.view { padding-bottom: calc(24px + var(--safe-bottom)); }

/* ---------------- HOME (front page) ---------------- */
/* Home fills exactly one viewport, no scroll: fixed header on top, the body
   block centered in whatever space is left. Big blocks use clamp(min, vh, max)
   so the whole page scales down to fit shorter phones instead of overflowing. */
#homeView { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
.home__share { position: fixed; top: calc(8px + var(--safe-top)); right: 8px; z-index: 30; padding: 4px 10px; border: none; border-radius: 999px; background: var(--btn); color: var(--white); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.home__share:active { transform: scale(0.96); }
.home__head { text-align: center; padding: calc(8px + var(--safe-top)) 20px 2px; flex: 0 0 auto; }
.home__brand { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 5px; }
.home__tagline { margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; }
.home__stamp { margin: 4px 0 0; font-size: 11px; font-weight: 500; color: var(--ink-50); }
.home__states { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.state { height: 34px; padding: 0 18px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; }
.state.is-active { background: var(--black); color: var(--white); }
/* One-tap "you're physically in another covered state" suggestion (under the state pills) */
.state-suggest { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 8px; }
.state-suggest__go { border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 12px; font-weight: 700; padding: 7px 14px; }
.state-suggest__go b { text-decoration: underline; }
.state-suggest__x { border: none; background: none; color: var(--ink-50); font-size: 14px; font-weight: 700; padding: 7px 8px; }

.home__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 8px 20px calc(10px + var(--safe-bottom));
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: clamp(6px, 1.2vh, 16px);
}

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1.3 1 auto; }
.hero {
    position: relative; min-height: clamp(78px, 12vh, 168px); border: none; border-radius: 16px; overflow: hidden;
    background-image: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)), url('assets/deal_flower_single.png');
    background-size: 170%; background-position: center 38%;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    color: #fff; padding: 8px;
}
.hero__title { font-size: 18px; font-weight: 800; line-height: 1.15; text-shadow: 0 4px 16px rgba(0,0,0,.8); }
.hero__sub { font-size: 12px; font-weight: 600; margin-top: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }

.home__section { text-align: center; font-size: 18px; font-weight: 800; margin: 2px 0; flex: 0 0 auto; }
/* Shared category circle (used by Home grid AND Shop-by-Store landing row). */
.cat { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cat__img { width: 100%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cat__label { font-size: 13px; font-weight: 700; text-align: center; }
/* Shop-by-Store landing: horizontal scrolling row of circles. */
.cat-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-row .cat { flex: 0 0 auto; width: var(--cat-size); }
/* Home "Browse Deals by Category" — 3 on top, 2 centered below, matching the
   app's shared CategoryCircleGrid (all circles the same size). */
.cat-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 18px); flex: 0.7 1 auto; }
.cat-grid__row { display: flex; justify-content: center; gap: clamp(16px, 6vw, 28px); width: 100%; }
.cat-grid__row--bottom { width: 100%; }  /* 3 columns, aligned under the top row (Mike 2026-07-03) */
.cat-grid .cat { flex: 1 1 0; min-width: 0; max-width: var(--cat-size); }
/* Home circles ONLY, drawn ~12% bigger into their own whitespace (Mike 2026-07-07).
   transform is paint-only: zero layout impact — cannot move/resize ANYTHING else.
   Same art, same colors, same tap target (the button). Shop-by-Store rows untouched. */
.cat-grid .cat__img { transform: scale(1.12); }

.tool-row { display: flex; gap: 10px; flex: 1.1 1 auto; }
/* Matches the app's BlurredPhotoCard: photo cropped to fill, bottom-only
   gradient, label anchored at the bottom (NOT a flat dark tint). */
.tool {
    flex: 1; min-height: clamp(86px, 13vh, 168px); border: none; border-radius: 16px; overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
    color: #fff; padding: 14px;
}
.tool__title { font-size: 18px; font-weight: 900; line-height: 1.15; text-shadow: 0 4px 16px rgba(0,0,0,.8); }
.tool__sub { font-size: 14px; font-weight: 700; margin-top: 6px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }

/* ---------------- SHOP (deals browser) ---------------- */
.shopbar {
    position: sticky; top: 0; z-index: 50; background: var(--white);
    display: flex; align-items: center; gap: 8px;
    padding: calc(10px + var(--safe-top)) 12px 8px; border-bottom: 1px solid var(--border);
}
.shopbar__back { font-size: 26px; line-height: 1; background: none; border: none; color: var(--black); width: 36px; }
.shopbar__title { flex: 1; text-align: center; font-size: 18px; font-weight: 800; }
.shopbar__over { font-size: 12px; font-weight: 700; background: none; border: none; color: var(--black); }

.shop__controls { padding: 10px 16px 4px; }
.search { position: relative; margin-bottom: 10px; }
.search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-50); }
/* Applies to EVERY search bar (deals #search, store #storeSearch, research #rSearch, strains
   #sbSearch/#blSearch) — the left padding used to be #search-only, so the other bars' text sat
   UNDER the magnifying glass (Mike 2026-07-06). */
.search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 2px solid var(--black); border-radius: 24px; font-size: 16px; background: var(--white); color: var(--black); }
.search input:focus { outline: none; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--toggle { margin-top: 8px; }
.chip { flex: 0 0 auto; height: 36px; padding: 0 14px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.chip.is-active { font-weight: 800; }
.chip.is-active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--black); }
.chip--deal.is-on { background: var(--orange); color: #fff; border-color: var(--orange); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
/* Research Bud: one grouped card per row (lean answer front-and-centre), reusing the .r-prod card. */
.grid--rb { grid-template-columns: 1fr; }
/* Native ResultsCountRow mirror: black count left (ellipsizes), verified toggle right (never shrinks) */
.count { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--black); font-size: 12px; font-weight: 600; padding: 12px 2px; }
.count__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }
.vtog__lbl { font-size: 12px; color: var(--black); font-weight: 500; white-space: nowrap; }
.vtog--on .vtog__lbl { font-weight: 700; }
.vtog__sw { width: 36px; height: 20px; border-radius: 10px; border: 1.5px solid var(--black); background: #F2F2F7; position: relative; flex: none; }
.vtog--on .vtog__sw { background: var(--black); }
.vtog__knob { position: absolute; top: 2.5px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--black); transition: left .15s; }
.vtog--on .vtog__knob { left: 18px; background: var(--white); }
.vtog--wait { opacity: .4; pointer-events: none; }
.sentinel { height: 1px; }

.card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; }
/* 3:2 landscape photo (native CleanProductCardCompact aspectRatio 1.5) — a square photo made the
   card too tall for the first result row to fit on screen at load (native rule #9, 2026-07-03) */
.card__imgwrap { position: relative; width: 100%; aspect-ratio: 3 / 2; background: var(--surface); }
.card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 900; color: rgba(0,0,0,.18); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.card__special { position: absolute; top: 6px; left: 6px; max-width: 86%; background: var(--orange); color: #fff; font-size: 9px; font-weight: 800; line-height: 1.1; padding: 3px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__body { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card__price { font-size: 14px; font-weight: 800; }
.card__name { font-size: 12px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 30px; }
.card__brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.card__meta { display: flex; align-items: center; gap: 6px; min-height: 14px; }
.card__strain { font-size: 10px; font-weight: 800; }
/* Indica/Sativa lean tag on product/store cards — colored dot + bright-black label (native DominanceTag) */
.card__lean { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.card__lean .ts-dot { width: 8px; height: 8px; }
.card__lean-t { font-size: 10px; font-weight: 800; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt__lean { margin-bottom: 6px; }
.dt__lean .ts-dot { width: 10px; height: 10px; }
.dt__lean .card__lean-t { font-size: 13px; }
.s-indica { color: var(--indica); } .s-sativa { color: var(--sativa); } .s-hybrid { color: var(--hybrid); }
.card__store { font-size: 10px; font-weight: 800; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Cross-store availability — a subtle secondary line under the store name (native "Available at N stores" parity). */
.card__stores { font-size: 10px; font-weight: 800; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.card__order { margin-top: 6px; display: flex; align-items: center; justify-content: center; background: var(--btn); color: #fff; text-decoration: none; border-radius: 8px; height: 34px; font-size: 11px; font-weight: 800; }
.card__order:active { opacity: .85; }

.footer { padding: 22px 16px calc(22px + var(--safe-bottom)); text-align: center; font-size: 11px; color: var(--ink-50); border-top: 1px solid var(--border); margin-top: 14px; }

/* ---------------- Shop hub: tabs + location ---------------- */
.tabs { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--white); z-index: 40; }
.tab { flex: 1; height: 44px; border: none; background: none; font-size: 15px; font-weight: 600; color: var(--ink-50); position: relative; }
.tab.is-active { color: var(--black); font-weight: 800; }
.tab.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--black); }

.loc { display: flex; align-items: center; gap: 6px; margin: 10px 16px 2px; height: 36px; padding: 0 14px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; }
.loc__chev { margin-left: 2px; font-size: 11px; }

/* category picker */
.cat-picker { padding: 8px 20px 0; }
.cat-picker__q { text-align: center; font-size: 19px; font-weight: 800; margin: 14px 0 18px; }
/* Deal category picker — 3 on top, 2 centered below (matches the app). */
.catpick-grid { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 22px); padding: 4px 8px 0; }
.catpick-grid__row { display: flex; justify-content: center; gap: clamp(12px, 5vw, 26px); width: 100%; }
.catpick-grid__row--bottom { width: 68%; }
.catpick { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.catpick-grid .catpick { flex: 1 1 0; min-width: 0; max-width: clamp(96px, 30vw, 132px); }
.catpick__img { width: 100%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.catpick__label { font-size: 15px; font-weight: 800; text-align: center; }

/* bucket head + chips */
.bucket__head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 4px; }
.bucket__back { background: none; border: none; font-size: 14px; font-weight: 700; color: var(--black); padding: 0; }
.bucket__title { font-size: 18px; font-weight: 800; }
/* ⭐ Save Search — right side of the results header; snapshots whatever filters are active. */
.bucket__save { margin-left: auto; background: var(--white, #fff); border: 2px solid var(--black);
  border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; color: var(--black);
  padding: 6px 10px; white-space: nowrap; cursor: pointer; }
.search--shop { margin: 4px 16px 8px; }
.fchips, .pchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px; scrollbar-width: none; }
.fchips::-webkit-scrollbar, .pchips::-webkit-scrollbar { display: none; }
.pchips { padding-top: 6px; padding-bottom: 4px; }
.fchip, .pchip { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fchip.is-on, .pchip.is-on { background: var(--black); color: #fff; }
.count__note { color: var(--orange); font-weight: 600; }
/* Find Bud distance-radius selector */
.fradius { padding: 8px 16px 2px; }
.fradius__label { font-size: 16px; font-weight: 800; color: var(--black); margin-bottom: 8px; }
.fradius__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fradius__chips::-webkit-scrollbar { display: none; }
.rchip { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 600; white-space: nowrap; }
.rchip.is-on { background: var(--black); color: #fff; }
.find-empty { text-align: center; padding: 48px 16px; }
.find-empty__t { font-weight: 700; color: var(--black); margin-bottom: 16px; }
.find-empty__all { background: none; border: none; color: var(--black); font-weight: 700; font-size: 15px; text-decoration: underline; }

.card__dist { font-size: 10px; font-weight: 700; color: var(--ink-50);  white-space: nowrap; flex: none; }

/* ---------------- Bottom sheet (filters / location) ---------------- */
.sheet { position: fixed; inset: 0; height: 100dvh; z-index: 800; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet__panel { position: relative; background: var(--white); border-radius: 18px 18px 0 0; max-height: 92dvh; display: flex; flex-direction: column; animation: sheetUp .2s ease; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.sheet__title { font-size: 17px; font-weight: 800; }
.sheet__clear { background: none; border: none; font-size: 14px; font-weight: 700; color: var(--orange); }
.sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px; }
.sheet__search { width: calc(100% - 8px); height: 42px; margin: 4px 4px 8px; padding: 0 14px; border: 2px solid var(--black); border-radius: 22px; font-size: 16px; }
.sheet__apply { flex: 0 0 auto; margin: 10px 16px calc(12px + var(--safe-bottom)); height: 50px; border: none; border-radius: 12px; background: var(--btn); color: #fff; font-size: 16px; font-weight: 800; }
.orow, .srow, .lstore { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 9px 6px; font-size: 15px; font-weight: 600; color: var(--black); border-bottom: 1px solid var(--border); }
.orow__box { width: 22px; height: 22px; border: 2px solid var(--black); border-radius: 6px; flex: 0 0 auto; position: relative; }
.orow.is-on .orow__box { background: var(--black); }
.orow.is-on .orow__box::after { content: "✓"; color: #fff; font-size: 14px; position: absolute; left: 3px; top: -2px; }
.srow.is-on, .lstore.is-on { font-weight: 800; }
.srow.is-on::after, .lstore.is-on::after { content: "✓"; margin-left: auto; }
.orow__empty { text-align: center; color: var(--ink-50); padding: 20px; }
.loc-use { width: 100%; height: 46px; margin: 4px 0 2px; border: 2px solid var(--black); border-radius: 12px; background: var(--black); color: #fff; font-size: 15px; font-weight: 800; }
.loc-have { padding: 8px 4px 2px; font-size: 13px; font-weight: 700; color: var(--hybrid); }
.loc-sec { font-size: 13px; font-weight: 800; color: var(--ink-50); padding: 14px 6px 8px; }
.loc-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.lbtn { height: 38px; padding: 0 16px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; }
.lbtn.is-on { background: var(--black); color: #fff; }
.loc-zip { display: flex; gap: 8px; padding: 6px 4px 2px; }
.loc-zipin { flex: 1; height: 46px; padding: 0 14px; border: 2px solid var(--black); border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--black); background: var(--white); }
.loc-zipgo { height: 46px; padding: 0 16px; border: none; border-radius: 12px; background: var(--black); color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
.loc-ziperr { color: #b00020; font-size: 13px; font-weight: 600; padding: 6px 6px 0; margin: 0; }
.loc-stores { max-height: 38vh; overflow-y: auto; margin-top: 4px; }

/* ---------------- Product detail ---------------- */
/* full page (one screen, like the native app) — not an overlay sheet */
.detail { position: fixed; inset: 0; z-index: 850; background: var(--white); }
.dt__page { display: flex; flex-direction: column; height: 100%; }
.dt__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px calc(20px + var(--safe-bottom)); }
/* Overlay scroll-isolation (Mike 2026-07-04): a full-screen overlay must NOT let a touch-scroll chain
   out to the page behind it (you'd drag past the top of the detail and the background would start
   moving up behind it). (1) contain the scroll at each overlay's own boundary; (2) lock the page
   behind whenever an overlay is open. All these overlays toggle via the [hidden] attribute; :has() is
   already relied on elsewhere in this file. */
.dt__scroll, .sheet__body, .ord__scroll, .share2__card { overscroll-behavior: contain; }
:is(html, body):has(#detail:not([hidden])),
:is(html, body):has(#sheet:not([hidden])),
:is(html, body):has(#modal:not([hidden])),
:is(html, body):has(#shareSheet:not([hidden])),
:is(html, body):has(.age-gate:not([hidden])) { overflow: hidden; }

/* --- Share sheet: our own big QR + copyable link (v136) --- */
.share2 { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.share2__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.share2__card { position: relative; width: 100%; max-width: 360px; max-height: 92dvh; overflow-y: auto; background: var(--white); border-radius: 22px; padding: 22px 20px calc(18px + var(--safe-bottom)); text-align: center; box-shadow: 0 14px 50px rgba(0,0,0,.45); animation: sheetUp .2s ease; }
.share2__x { position: absolute; top: 6px; right: 12px; background: none; border: none; font-size: 30px; line-height: 1; color: #9a9aa2; cursor: pointer; padding: 4px 6px; }
.share2__title { font-size: 21px; font-weight: 900; margin: 2px 0 2px; }
.share2__title span { color: var(--btn); }
.share2__scan { font-size: 13px; font-weight: 700; color: #6a6a70; margin: 0 0 16px; }
.share2__qr { width: min(72vw, 320px); aspect-ratio: 1; margin: 0 auto 18px; background: #fff; border: 8px solid #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.14); }
.share2__qrsvg { width: 100%; height: 100%; display: block; }
.share2__link { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #f1f1f6; border-radius: 999px; padding: 7px 7px 7px 16px; margin: 0 0 12px; }
.share2__url { font-size: 15px; font-weight: 800; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share2__copy { flex: 0 0 auto; background: var(--btn); color: #fff; border: none; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 800; cursor: pointer; }
.share2__send { width: 100%; height: 46px; border: 2px solid var(--black); border-radius: 12px; background: var(--white); color: var(--black); font-size: 15px; font-weight: 800; cursor: pointer; }
.dt__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--white); padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.08); }
.dt__back { font-size: 16px; font-weight: 700; background: none; border: none; color: var(--black); padding: 4px 2px; cursor: pointer; }
.dt__over { font-size: 13px; font-weight: 700; background: none; border: none; color: var(--black); padding: 4px 2px; cursor: pointer; }
.dt__alert { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: var(--black); color: #fff; border: none; border-radius: 12px; padding: 10px 14px; margin: 2px 0 10px; font-size: 15px; font-weight: 800; }
.dt__alert--on { background: rgba(27,94,32,.12); color: #1B5E20; }
.dt__alert-sub { font-size: 12px; font-weight: 500; opacity: .8; }
.dt__card { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.dt__thumb { width: 96px; height: 96px; flex: 0 0 auto; object-fit: contain; background: var(--surface); border-radius: 12px; }
.dt__info { flex: 1 1 auto; min-width: 0; }
.dt__brand { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-50); }
.dt__name { font-size: 19px; font-weight: 800; margin: 2px 0 6px; line-height: 1.2; }
.dt__strain { display: inline-block; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.dt__store { font-size: 13px; color: var(--ink-50); margin-bottom: 8px; }
.dt__special { font-size: 13px; font-weight: 700; color: var(--orange); margin-bottom: 8px; }
.dt__tiers { margin: 6px 0 14px; }
.dt__tier { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.dt__order { display: flex; align-items: center; justify-content: center; height: 52px; background: var(--btn); color: #fff; text-decoration: none; border-radius: 12px; font-size: 16px; font-weight: 800; }

.soon { padding: 40px 28px; text-align: center; color: var(--ink-50); font-size: 15px; line-height: 1.6; }
.soon b { color: var(--black); }

/* ---------------- Shop by Store ---------------- */
.store-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 4px; }
/* Let the title yield so the ⭐ Save Search button always fits on the row. */
.store-head .store-h-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-h-title { font-size: 18px; font-weight: 800; }
.store-h-title--sm { font-size: 15px; }
.alpha-row { display: flex; gap: 6px; padding: 6px 16px 2px; }
.alpha-chip { flex: 1; min-width: 0; height: 34px; padding: 0; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 12px; font-weight: 600; }
.alpha-chip.is-on { background: var(--black); color: #fff; font-weight: 800; }
.store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 0; }
.store-card { text-align: left; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 84px; justify-content: space-between; }
.store-card__n { font-size: 14px; font-weight: 800; line-height: 1.2; }
.store-card__c { align-self: flex-start; font-size: 11px; font-weight: 800; color: #fff; background: var(--black); border-radius: 20px; padding: 3px 10px; }
.store-card__c--plain { background: none; color: var(--black); padding: 0; font-weight: 700; }
.land { text-align: center; padding: 6px 20px 0; }
.land__name { font-size: 22px; font-weight: 900; }
.land__loc { font-size: 15px; font-weight: 700; color: var(--ink-50); margin-top: 2px; }
.land__addr { font-size: 13px; color: var(--ink-50); margin-top: 4px; }
.land__count { font-size: 13px; font-weight: 700; margin-top: 8px; }
.land__actions { display: flex; gap: 12px; padding: 16px 20px 4px; }
.land__act { flex: 1; background: var(--btn); color: #fff; border: none; border-radius: 14px; padding: 16px 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.land__act b { font-size: 15px; font-weight: 800; }
.land__act span { font-size: 12px; opacity: .8; }
.land__browse { text-align: center; font-size: 16px; font-weight: 800; padding: 18px 0 6px; }
.land__cats { padding: 4px 16px 0; }

/* ---------------- Age gate (21+ Yes/No) ---------------- */
.age-gate { position: fixed; inset: 0; z-index: 1000; background: var(--white); display: flex; align-items: center; justify-content: center; padding: 24px; }
.age-gate__card { max-width: 360px; text-align: center; width: 100%; }
.age-gate__brand { font-size: 30px; font-weight: 900; letter-spacing: 5px; margin: 0 0 18px; }
.age-gate__title { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.age-gate__sub { font-size: 14px; color: var(--ink-50); margin: 0 0 18px; }
.age-gate__btn { width: 100%; height: 52px; border: none; border-radius: 12px; background: var(--btn); color: #fff; font-size: 16px; font-weight: 800; }
.age-gate__btn--no { background: var(--white); color: var(--black); border: 2px solid var(--black); margin-top: 10px; }
.age-gate__legal { font-size: 11px; color: var(--ink-50); margin: 18px 0 0; line-height: 1.5; }
.geo-label { display: block; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-50); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px; }
.geo-zip { margin: 0 0 14px; }
.geo-zip .loc-zipin { width: 100%; height: 52px; text-align: center; letter-spacing: 2px; font-size: 18px; }
.geo-dismiss { width: 100%; height: 44px; margin-top: 10px; border: none; background: transparent; color: var(--ink-50); font-size: 14px; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1100; max-width: 88%; background: var(--black); color: #fff; font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,0.3); text-align: center; }

/* ---------------- Home: My Deal Alerts badge ---------------- */
/* Unread-style count bubble pinned to the tile corner (was a full-width orange
   bar over the photo — Mike 2026-07-07: looked slapped-on). Count is capped 99+. */
.hero__badge { position: absolute; top: 8px; right: 8px; margin: 0; background: #e53935; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; padding: 5px 8px; border-radius: 999px; min-width: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* ---------------- My Deal Alerts ---------------- */
.alerts-body { padding: 12px 16px calc(90px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 12px; }
.al-empty { text-align: center; padding: 70px 24px; }
.al-empty__icon { font-size: 48px; }
.al-empty__t { font-size: 18px; font-weight: 800; margin-top: 10px; }
.al-empty__s { font-size: 14px; color: var(--ink-50); margin-top: 6px; }
.al-info { font-size: 13px; color: var(--ink-50); margin: 0; }
/* Saved Searches (Alerts & Searches screen) — tap the card to re-run, 🗑 to delete. */
.ss-head { font-size: 15px; font-weight: 900; color: var(--black); margin: 0 0 10px; }
.ss-head--alerts { margin-top: 24px; }
.ss-card { display: flex; align-items: center; gap: 10px; border: 2px solid var(--black);
  border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; background: var(--white, #fff); }
.ss-card__main { flex: 1; min-width: 0; }
.ss-card__l { font-weight: 800; font-size: 14.5px; color: var(--black); }
.ss-card__s { font-size: 12px; color: var(--ink-50); margin-top: 2px; }
.al-card { border: 2px solid var(--black); border-radius: 18px; padding: 16px; }
.al-card.is-paused { border-color: var(--border); }
.al-card__top { display: flex; align-items: flex-start; gap: 10px; }
.al-card__main { flex: 1; min-width: 0; }
.al-card__label { font-size: 15px; font-weight: 800; line-height: 1.25; }
.al-card__status { font-size: 12px; color: var(--ink-50); margin-top: 4px; font-weight: 600; }
.al-card__status.is-on { color: #2E7D32; }
.al-card__ctl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.al-toggle { width: 46px; height: 28px; border-radius: 16px; border: none; background: var(--border); position: relative; padding: 0; transition: background .15s; }
.al-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.al-toggle.is-on { background: var(--black); }
.al-toggle.is-on::after { left: 21px; }
.al-del { background: none; border: none; font-size: 18px; color: var(--ink-50); width: 30px; }
.al-matchcount { font-size: 14px; font-weight: 800; color: var(--orange); margin-top: 14px; }
.al-match { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: none; border-radius: 14px; padding: 11px 12px; margin-top: 8px; }
.al-match__l { flex: 1; min-width: 0; }
.al-match__n { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-match__s { font-size: 12px; color: var(--ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-match__p { font-size: 14px; font-weight: 800; flex: 0 0 auto; }
.al-more { font-size: 12px; color: var(--ink-50); margin-top: 8px; }
.al-fab { position: fixed; right: calc(50% - 248px); bottom: calc(22px + var(--safe-bottom)); width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--black); color: #fff; font-size: 32px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.3); z-index: 60; }
@media (max-width: 540px) { .al-fab { right: 20px; } }

/* Push alerts status row (Alerts & Searches screen) */
.push-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; font-weight: 700; }
.push-row__l { color: var(--black); }
.push-row__link { background: none; border: none; color: var(--orange); font-size: 13px; font-weight: 800; padding: 0; }
.push-row--btn { width: 100%; text-align: left; border: none; color: var(--black); cursor: pointer; }
.push-row:disabled, .push-row--btn:disabled, .push-row__link:disabled { opacity: .6; }

/* Soft push-permission ask — small bottom sheet, non-blocking, dismissible */
.pushask { position: fixed; inset: 0; z-index: 950; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.pushask__panel { pointer-events: auto; margin: 0 12px calc(16px + var(--safe-bottom)); background: var(--white); border: 2px solid var(--black); border-radius: 18px; padding: 18px 18px calc(14px + var(--safe-bottom) * 0); box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: sheetUp .2s ease; max-width: 480px; margin-left: auto; margin-right: auto; }
.pushask__t { font-size: 15.5px; font-weight: 800; margin-bottom: 6px; }
.pushask__b { font-size: 13px; color: var(--ink-50); line-height: 1.5; margin-bottom: 14px; }
.pushask__ok, .pushask__no { width: 100%; height: 46px; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; }
.pushask__ok { background: var(--black); color: #fff; }
.pushask__no { background: none; color: var(--ink-50); margin-top: 6px; }
.pushask__ok:disabled { background: rgba(0,0,0,.4); }
/* iOS install guide steps (inside the .pushask sheet) — new selectors only, no ripple */
.iosg { margin: 0 0 4px; padding-left: 20px; text-align: left; }
.iosg li { font-size: 14px; line-height: 1.55; margin-bottom: 10px; color: var(--black); }
.iosg__u { display: inline-block; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; font-weight: 800; }
.iosg__n { color: var(--black); font-size: 12.5px; }
.iosg__w { text-align: left; font-size: 14px; margin: 0 0 10px; color: var(--black); }

/* wizard */
.al-q { text-align: center; font-size: 19px; font-weight: 800; margin: 8px 0 18px; }
.al-catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.al-cat { border: 1px solid var(--border); border-radius: 16px; background: var(--white); padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 120px; justify-content: center; }
.al-cat__img { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; }
.al-cat__img--any { display: flex; align-items: center; justify-content: center; font-size: 32px; background: var(--surface); }
.al-cat__label { font-size: 15px; font-weight: 800; }
.al-price { display: flex; align-items: center; border: 2px solid var(--black); border-radius: 14px; padding: 0 16px; height: 64px; margin-bottom: 18px; }
.al-price__d { font-size: 24px; font-weight: 800; }
.al-price__in { flex: 1; border: none; outline: none; font-size: 28px; font-weight: 800; color: var(--black); background: none; margin-left: 6px; width: 100%; }
.al-sec { font-size: 14px; font-weight: 800; color: var(--ink-50); margin: 6px 0 8px; }
.al-quickrow, .al-radrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.al-quick, .al-rad { height: 38px; padding: 0 18px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; }
.al-quick.is-on, .al-rad.is-on { background: var(--black); color: #fff; }
.al-deals { display: flex; align-items: center; width: 100%; background: var(--surface); border: none; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.al-deals__l { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.al-deals__l b { font-size: 15px; } .al-deals__l span { font-size: 12px; color: var(--ink-50); }
.al-sw { width: 46px; height: 28px; border-radius: 16px; background: var(--border); position: relative; flex: 0 0 auto; transition: background .15s; }
.al-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.al-deals.is-on .al-sw { background: var(--black); }
.al-deals.is-on .al-sw::after { left: 21px; }
.al-save { width: 100%; height: 54px; border: none; border-radius: 14px; background: var(--black); color: #fff; font-size: 16px; font-weight: 800; margin-top: 8px; }
.al-save:disabled { background: rgba(0,0,0,.2); }
/* Terpene Search "Search Products" button stays pinned to the bottom of the screen so it's always
   reachable while the terpene grid scrolls — matches the native screen's pinned button (a category
   like Vapes adds a sub-type row that used to push this button below the fold after a re-render). */
#tsSearch { position: sticky; bottom: calc(8px + var(--safe-bottom)); z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.18); }

/* ---------------- Save Deal dialog (modal) ---------------- */
.modal { position: fixed; inset: 0; z-index: 880; display: flex; flex-direction: column; justify-content: flex-end; }
.md__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.md__panel { position: relative; background: var(--white); border-radius: 18px 18px 0 0; max-height: 88vh; overflow-y: auto; padding: 20px 18px calc(16px + var(--safe-bottom)); animation: sheetUp .2s ease; }
.md__close { position: absolute; top: 12px; right: 14px; background: rgba(0,0,0,.06); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; }
.md__title { font-size: 19px; font-weight: 800; }
.md__sub { font-size: 13px; color: var(--ink-50); margin: 6px 0 16px; line-height: 1.5; }
.md__opt { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: var(--surface); border: none; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.md__opt--dark { background: var(--black); }
.md__opt-t { font-size: 15px; font-weight: 800; }
.md__opt--dark .md__opt-t { color: #fff; }
.md__opt-s { font-size: 12px; color: var(--ink-50); }
.md__opt-s--inv { color: rgba(255,255,255,.7); }
.md__radrow { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; }
.md__radrow .al-rad { background: var(--black); color: #fff; }
.md__stores { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.md__store { text-align: left; background: var(--surface); border: none; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--black); }
.md__store.is-on { background: var(--black); color: #fff; font-weight: 800; }
.md__cancel { width: 100%; background: none; border: none; color: var(--ink-50); font-size: 15px; font-weight: 700; padding: 12px; }

/* ---------------- Research Bud ---------------- */
.research-body { padding: 12px 16px calc(24px + var(--safe-bottom)); }
.r-q { text-align: center; font-size: 18px; font-weight: 800; margin: 6px 0 14px; }
.r-catrow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.r-catrow::-webkit-scrollbar { display: none; }
.r-cat { flex: 0 0 auto; border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; }
.r-cat__img { width: 72px; height: 72px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.r-cat.is-on .r-cat__img { border: 4px solid var(--black); }
.r-cat__label { font-size: 12px; font-weight: 700; }
.r-hint { text-align: center; color: var(--ink-50); padding: 50px 24px; font-size: 16px; font-weight: 700; display: flex; flex-direction: column; gap: 8px; }
.r-hint span { font-size: 13px; font-weight: 500; }
.r-h { font-size: 16px; font-weight: 800; margin: 18px 0 10px; }
.r-subs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.r-subs::-webkit-scrollbar { display: none; }
.r-sub { flex: 0 0 auto; height: 38px; padding: 0 16px; border: 1px solid var(--black); border-radius: 8px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; white-space: nowrap; }
.r-sub.is-on { background: var(--teal); border-color: var(--teal); }
.alpha-row + .r-brandgrid, .r-brandgrid { margin-top: 8px; }
.r-brandgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-brand { border: 1px solid var(--black); border-radius: 16px; background: var(--white); color: var(--black); padding: 16px 12px; font-size: 14px; font-weight: 700; text-align: center; }
.r-brandsel { width: 100%; background: var(--black); color: #fff; border: none; border-radius: 16px; padding: 16px; font-size: 15px; font-weight: 800; text-align: left; margin-top: 6px; }
.r-brandsel span { font-weight: 500; opacity: .7; font-size: 13px; }
.r-prodlist { display: flex; flex-direction: column; gap: 10px; }
.r-prod { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 2px solid var(--black); border-radius: 10px; padding: 14px; text-align: left; }
.r-prod__n { font-size: 15px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-prod__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.r-prod__strain { font-size: 10px; font-weight: 800; }
.r-prod__cnt { font-size: 11px; font-weight: 700; color: var(--ink-50); white-space: nowrap; }
#rSearch { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 2px solid var(--black); border-radius: 24px; font-size: 16px; background: var(--white); color: var(--black); }
#rSearch:focus { outline: none; }

/* product detail: other-store availability */
.dt__others { margin: 14px 0 4px; }
.dt__others-h { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
/* Native StoreRow parity: pin · store label + distance (+ special) · price · Order Online. */
.dt__other { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: none; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.dt__other .dtn__pin { width: 16px; height: 16px; }
.dt__other-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt__other-n { font-size: 13px; font-weight: 700; }
.dt__other-sp { font-size: 11px; font-weight: 700; color: var(--orange); }
.dt__other-p { font-size: 14px; font-weight: 800; flex: 0 0 auto; }
.dt__other-order { flex: 0 0 auto; background: #1A1A1A; color: #fff; font-weight: 800; font-size: 12px; padding: 8px 10px; border-radius: 10px; }
.dt__other-more { font-size: 12px; color: var(--ink-50); padding: 2px 4px; }

/* ---------------- Match by Effects ---------------- */
.match-body { padding: 12px 16px calc(24px + var(--safe-bottom)); }
.m-h { text-align: center; font-size: 22px; font-weight: 800; margin: 8px 0 4px; }
.m-sub { text-align: center; font-size: 14px; color: var(--ink-50); margin: 0 0 18px; }
.m-effgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.m-eff { position: relative; border: 2px solid var(--black); border-radius: 14px; background: var(--white); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.m-eff.is-on { background: var(--black); }
.m-eff__n { font-size: 15px; font-weight: 800; color: var(--black); }
.m-eff.is-on .m-eff__n { color: #fff; }
.m-eff__tp { font-size: 11px; font-weight: 600; color: var(--ink-50); }
.m-eff.is-on .m-eff__tp { color: rgba(255,255,255,.7); }
.m-eff__rank { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--black); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.m-radwrap { display: flex; justify-content: center; margin: 8px 0 24px; }
.m-radpill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; border: none; border-radius: 100px; background: rgba(0,0,0,.08); color: var(--black); font-size: 14px; font-weight: 700; }
.m-radpin { font-size: 14px; }
.sheet-sub { font-size: 14px; font-weight: 600; color: var(--black); margin: 0 0 14px; }
.m-slidewrap { margin-bottom: 22px; }
.m-slidelabel { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.m-sliderow { display: flex; justify-content: space-between; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.m-ind { color: var(--indica); } .m-sat { color: var(--sativa); }
.m-slider { width: 100%; height: 30px; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--indica), var(--sativa)); border-radius: 8px; outline: none; }
.m-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--black); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.m-count { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--black); margin: 4px 0 10px; }
.m-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.m-pills::-webkit-scrollbar { display: none; }
.m-pill { flex: 0 0 auto; background: var(--black); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.m-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.m-card { display: flex; gap: 12px; text-align: left; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 12px; align-items: stretch; }
.m-card__imgwrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 10px; background: var(--surface); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.m-card__img { width: 100%; height: 100%; object-fit: contain; }
.m-card__ph { font-size: 30px; font-weight: 900; color: rgba(0,0,0,.18); }
.m-card__score { position: absolute; top: 4px; left: 4px; background: var(--black); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 10px; }
.m-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-card__n { font-size: 14px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-card__b { font-size: 12px; font-weight: 700; }
.m-card__store { font-size: 11px; font-weight: 800; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card__dom { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.m-card__order { align-self: flex-end; margin-top: auto; background: var(--btn); color: #fff; font-size: 12px; font-weight: 800; padding: 7px 18px; border-radius: 18px; }
.m-card__seg { font-size: 12px; font-weight: 600; color: rgba(0,0,0,.7); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Match "How to Consume?" picker: expand-on-tap circles + 2-col sub-kind checkbox grid */
.catpick-grid--sm .catpick { max-width: 72px; }
.m-mcat.is-on .catpick__img { outline: 3px solid var(--black); outline-offset: 2px; }
.m-mcat .catpick__label { color: var(--ink-50); }
.m-mcat.is-on .catpick__label { color: var(--black); }
.m-subwrap { margin-top: 22px; }
.m-sub-h { text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.m-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-bottom: 16px; }
.m-sub { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; padding: 8px 4px; }
.m-sub__box { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid rgba(0,0,0,.4); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; }
.m-sub.is-on .m-sub__box { background: var(--black); border-color: var(--black); }
.m-sub__lbl { font-size: 14px; font-weight: 600; line-height: 1.2; }

/* ---------------- Cool Tools ---------------- */
.tools-body { padding: 12px 16px calc(24px + var(--safe-bottom)); display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
.tools-body > * { flex: 0 0 auto; }
#tsSearch { margin-top: auto; }  /* pin Search Products to the BOTTOM of the screen like the native tab layout (Mike 2026-07-03) */
.ct-hero { background: var(--black); color: #fff; text-align: center; font-size: 17px; font-weight: 800; padding: 18px; border-radius: 14px; margin-bottom: 16px; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-tile { border: 1px solid var(--border); border-radius: 16px; background: var(--white); box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 22px 14px; min-height: 120px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.ct-tile__t { font-size: 16px; font-weight: 800; }
.ct-tile__s { font-size: 12px; color: var(--ink-50); }
.ct-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ct-tab { flex: 1; height: 38px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); color: var(--black); font-size: 12px; font-weight: 700; }
.ct-tab.is-active { background: var(--black); color: #fff; }
.ct-instr { font-size: 14px; color: var(--ink-50); margin: 0 0 14px; }
.ts-terpgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }  /* 3 EQUAL chips per row, labels centered — exact native layout (chunked(3) + weight(1f)) */
/* App-consistent terpene chip: white fill + black border/text like every other chip, with the lean
   shown as the SAME small colored dot used on lean tags elsewhere, + a one-word effect sub-label.
   Selected = standard black fill + white text. */
.ts-terp { border: 2px solid var(--black); border-radius: 18px; background: var(--white); padding: 7px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; }
.ts-terp.is-on { background: var(--black); }
.ts-terp__top { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.ts-terp__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ts-terp__n { font-size: 12.5px; font-weight: 700; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-terp.is-on .ts-terp__n { color: #fff; }
.ts-terp__e { font-size: 10px; font-weight: 600; color: var(--ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-terp.is-on .ts-terp__e { color: rgba(255,255,255,.75); }
/* Terpene lean color-coding (Mike 2026-07-04): DEEP, saturated chip fills by sativa/indica/both with
   bright-black text — matches the app's bold black/white look, no pastels. Selected chip reverts to
   the app's standard black fill + white text (line 491), with a black border to match. */
.ts-terp--sativa .ts-terp__dot { background: var(--sativa); }
.ts-terp--indica .ts-terp__dot { background: var(--indica); }
.ts-terp--both   .ts-terp__dot { background: var(--hybrid); }
.ts-terp.is-on { border-color: var(--black); }
.ts-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; font-size: 12px; font-weight: 600; color: var(--ink-50); }
.ts-legend__hd { font-weight: 700; color: var(--black); }
.ts-legend__i { display: inline-flex; align-items: center; gap: 6px; }
.ts-legend__dot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; }
.ts-legend__dot--sativa { background: var(--sativa); }
.ts-legend__dot--indica { background: var(--indica); }
.ts-legend__dot--both   { background: var(--hybrid); }
.ts-chk { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--black); }
.ts-chk__box { width: 22px; height: 22px; border: 2px solid var(--black); border-radius: 6px; position: relative; }
.ts-chk.is-on .ts-chk__box { background: var(--black); }
.ts-chk.is-on .ts-chk__box::after { content: "✓"; color: #fff; position: absolute; left: 3px; top: -2px; font-size: 14px; }
.ts-classrow { display: flex; gap: 8px; margin-bottom: 12px; }
.ts-class { flex: 1; height: 40px; border: 2px solid var(--black); border-radius: 20px; background: var(--white); font-size: 12px; font-weight: 700; }
.ts-class.is-on { background: var(--black); color: #fff; }
.ts-classinfo { font-size: 12px; color: var(--ink-50); margin: 0 0 16px; }
.ts-cards { display: flex; flex-direction: column; gap: 10px; }
.ts-card { display: flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.ts-card__rank { font-size: 16px; font-weight: 900; color: rgba(0,0,0,.25); width: 24px; flex: 0 0 auto; text-align: center; }
.ts-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-card__n { font-size: 14px; font-weight: 800; line-height: 1.2; }
.ts-card__prof { font-size: 11px; color: var(--ink-50); }
.ts-card__avail { font-size: 11px; font-weight: 800; color: var(--black); margin-top: 2px; }
.ts-card__pct { font-size: 15px; font-weight: 800; flex: 0 0 auto; }
/* Terpene Search — native-parity chips / verified toggle / hero result cards */
.ts-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 8px; }
.ts-chips::-webkit-scrollbar { display: none; }
.ts-chips--sub { margin-top: 0; }
.ts-chip { flex: 0 0 auto; border: 2px solid var(--black); border-radius: 16px; background: var(--white); color: var(--black); font-size: 13px; font-weight: 700; padding: 7px 14px; white-space: nowrap; }
.ts-chip.is-on { background: var(--black); color: #fff; }
.ts-verify { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.ts-switch { flex: 0 0 auto; width: 46px; height: 28px; border-radius: 14px; border: none; background: rgba(0,0,0,.25); position: relative; transition: background .15s; }
.ts-switch.is-on { background: var(--teal); }
.ts-switch__k { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ts-switch.is-on .ts-switch__k { left: 21px; }
.ts-verify__t { display: flex; flex-direction: column; line-height: 1.3; }
.ts-verify__t b { font-size: 14px; }
.ts-verify__sub { font-size: 11px; color: var(--ink-50); }
/* Terpene Search result card — native ResultCard "hero" layout: badge top-right, image + name/brand/
   type/lean header, divider, labeled Terpene Profile list (★ dominant / ✓ rest, % right-aligned),
   then a full-width Order Online button at the bottom. */
.ts-hero { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.ts-hero__badgerow { display: flex; justify-content: flex-end; margin-bottom: 8px; min-height: 22px; }
.ts-hero__top { display: flex; align-items: flex-start; gap: 12px; }
.ts-hero__rank { font-size: 18px; font-weight: 900; color: rgba(0,0,0,.28); flex: 0 0 auto; line-height: 1.1; }
.ts-hero__img { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: #eee; }
.ts-hero__img--ph { background: linear-gradient(135deg,#e8e8ee,#d4d4dd); }
.ts-hero__hd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ts-hero__n { font-size: 18px; font-weight: 900; line-height: 1.15; }
.ts-hero__b { font-size: 15px; font-weight: 800; }
.ts-hero__type { font-size: 13px; color: var(--ink-50); }
.ts-hero__lean { margin-top: 2px; }
.ts-lean { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ts-badge { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
/* Crisp dark "Lab-Verified" text + a single clean-green check (no faded teal/lime). */
.ts-badge--lab { background: #fff; color: #111; border: 1.5px solid rgba(0,0,0,.16); }
.ts-badge__ck { color: #16a34a; font-weight: 900; }
.ts-badge--est { background: #fff; color: var(--ink-50); border: 1.5px solid var(--border); }
.ts-hero__divider { height: 1px; background: var(--border); margin: 14px 0 10px; }
.ts-prof__h { font-size: 14px; font-weight: 900; margin-bottom: 6px; }
.ts-prof__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ts-prof__i { width: 18px; text-align: center; font-size: 14px; flex: 0 0 auto; color: var(--black); }
.ts-prof__i--star { color: #111; }
.ts-prof__n { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.ts-prof__p { font-size: 15px; font-weight: 800; flex: 0 0 auto; }
.ts-hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ts-hero__avail { font-size: 13px; font-weight: 800; color: var(--black); }
.ts-hero__avail--none { color: var(--ink-50); font-weight: 600; }
.ts-hero__order { flex: 0 0 auto; border: none; background: var(--black); color: #fff; font-size: 15px; font-weight: 800; padding: 12px 22px; border-radius: 12px; }
.sb-detail { border: 2px solid var(--black); border-radius: 14px; padding: 16px; margin: 6px 0 4px; }
.sb-badge { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: var(--black); padding: 4px 12px; border-radius: 14px; margin-bottom: 10px; }
.sb-badge--indica { background: var(--indica); } .sb-badge--sativa { background: var(--sativa); } .sb-badge--hybrid { background: var(--hybrid); }
.sb-ratio { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.sb-row { font-size: 13px; margin-bottom: 6px; } .sb-row b { font-weight: 800; }
.sb-desc { font-size: 13px; color: var(--ink-50); margin: 8px 0 0; line-height: 1.5; }
.bl-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; background: var(--surface); border: 2px dashed var(--black); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.bl-pick.is-set { border-style: solid; }
.bl-pick b { font-size: 15px; } .bl-pick span { font-size: 12px; color: var(--ink-50); }
.coa-card { border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.coa-card__icon { font-size: 32px; }
.coa-card__t { font-size: 16px; font-weight: 800; margin: 6px 0 4px; }
.coa-card__i { font-size: 13px; color: var(--ink-50); margin: 0 0 8px; }
.coa-tip { font-size: 12px; color: var(--ink-50); background: var(--surface); padding: 10px; border-radius: 10px; margin: 0 0 12px; }
.coa-or { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-50); margin: 4px 0 14px; }
.coa-input { width: 100%; height: 46px; padding: 0 14px; border: 2px solid var(--black); border-radius: 12px; font-size: 15px; }
.coa-video { width: 100%; border-radius: 14px; margin-bottom: 14px; background: #000; }
.coa-msg { background: var(--surface); border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.coa-result { border: 2px solid var(--black); border-radius: 14px; padding: 16px; }
.coa-result__t { font-size: 16px; font-weight: 800; } .coa-result__s { font-size: 12px; color: var(--ink-50); word-break: break-all; margin: 4px 0 10px; }
/* COA actions are gated to the native app (browser can't run on-device OCR / lab resolution).
   Keep the button looking like the app's black CTA, just non-interactive. */
.coa-gate { width: 100%; opacity: 1; cursor: default; }
.coa-gate[disabled] { background: var(--btn); color: #fff; opacity: 1; }
.coa-input[disabled] { background: var(--surface); color: var(--ink-50); }

/* ---------------- iOS install hint ---------------- */
/* Slim full-width bar pinned to the top; pushes page content down (covers nothing).
   Only shown on iOS-in-Safari (not standalone), where safe-area-top inset is ~0. */
.ios-install { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: none; transform: none; bottom: auto; border-radius: 0; background: var(--btn); color: #fff; padding: 8px 38px 8px 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 1.2; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ios-install b { color: var(--lime); }
.ios-install button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 21px; line-height: 1; padding: 0 4px; }
.ios-install[data-kind="android"] { cursor: pointer; }
body.has-iosbar .app { padding-top: 34px; }
body.has-iosbar #homeView { min-height: calc(100dvh - 34px); }
/* The full-page product detail is position:fixed (ignores .app padding), so start it
   below the install bar too — otherwise the bar covers its Back / Start Over header. */
body.has-iosbar .detail { top: 34px; }
/* The banner eats ~34px of height; on shorter phones (e.g. S25) that clipped the
   bottom row (Match / Cool Tools). Lower the home's min-height FLOORS so it compresses
   to fit — only bites when space is tight, so roomier phones (A53) are unchanged. */
body.has-iosbar .home__head { padding-top: calc(4px + var(--safe-top)); }
/* Short viewports (e.g. Chrome with its address bar visible eats ~60-80px): use the
   SAME compressed home sizing the install-bar mode uses, banner or not — otherwise
   the bottom tile row (Match / Cool Tools) clips below the fold and the front page
   scrolls, which it must never do (Mike 2026-07-07). Both states fit, so the
   address-bar show/hide can't oscillate the page into overflow. */
@media (max-height: 900px) {
  .home__body { gap: clamp(4px, 0.9vh, 12px); }
  .hero { min-height: clamp(62px, 9vh, 168px); }
  .home__head { padding-top: calc(4px + var(--safe-top)); }
}
/* The Share pill is position:fixed top-right (added after the bar was retired, so it
   never got a shift rule) — drop it below the bar or the bar steals its taps. */
body.has-iosbar .home__share { top: calc(42px + var(--safe-top)); }
body.has-iosbar .home__body { gap: clamp(4px, 0.9vh, 12px); }
body.has-iosbar .hero { min-height: clamp(62px, 9vh, 168px); }
body.has-iosbar .tool { min-height: clamp(68px, 10vh, 168px); }

/* ===================== Pickup-order pilot (order.js — dormant unless ?order=1) ===================== */
.dt__addorder { display: block; width: 100%; padding: 14px; margin: 10px 0 0; background: #fff; color: #111;
  border: 2px solid #111; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; }
.ordbar { position: fixed; left: 10px; right: 10px; bottom: 12px; z-index: 60; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; padding: 13px 16px; background: #111; color: #fff; border: 0; border-radius: 14px;
  font-size: 14px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; }
.ordbar__sum { white-space: nowrap; }
.ord { position: fixed; inset: 0; z-index: 70; background: #fff; }
.ord__page { display: flex; flex-direction: column; height: 100%; }
.ord__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 2px solid #111; }
.ord__back { background: none; border: 0; font-size: 17px; font-weight: 700; cursor: pointer; }
.ord__title { font-weight: 900; letter-spacing: .3px; }
.ord__scroll { overflow-y: auto; padding: 14px 14px 30px; }
.ord__store { font-weight: 800; margin-bottom: 4px; }
.ord__paynote { display: block; font-size: 12px; font-weight: 500; color: #444; margin: 2px 0 10px; }
.ord-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #ddd; }
.ord-item__n { font-weight: 700; font-size: 14px; }
.ord-item__sub { font-size: 12px; color: #555; }
.ord-item__qty { display: flex; align-items: center; gap: 10px; }
.ord-item__qty button { width: 32px; height: 32px; border: 2px solid #111; background: #fff; border-radius: 9px; font-size: 17px; font-weight: 800; cursor: pointer; }
.ord__total { display: flex; justify-content: space-between; font-weight: 900; border-top: 2px solid #111; padding: 10px 0; margin-top: 4px; }
.ord__form label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.ord__form input, .ord__form select { width: 100%; padding: 12px; border: 2px solid #111; border-radius: 10px; font-size: 16px; background: #fff; }
.ord__legal { font-size: 11px; color: #555; margin: 14px 0 6px; }
.ord__submit { display: block; width: 100%; padding: 15px; margin-top: 8px; background: #111; color: #fff; border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 800; cursor: pointer; }
.ord__submit:disabled { opacity: .6; }
.ord__clear { display: block; width: 100%; padding: 10px; margin-top: 10px; background: none; border: 0; color: #777; font-size: 13px; cursor: pointer; }
.ord__done { text-align: center; padding: 40px 10px; }
.ord__done-big { font-size: 52px; }
.ord__done-code { font-size: 24px; font-weight: 900; margin: 10px 0; }
.ord__done-msg { color: #333; margin-bottom: 22px; }
.ord-tierpick { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; }
.ord-tierpick__panel { background: #fff; width: 100%; border-radius: 16px 16px 0 0; padding: 16px 16px 26px; }
.ord-tierpick__t { font-weight: 900; margin-bottom: 10px; }
.ord-tierpick__opt { display: flex; justify-content: space-between; width: 100%; padding: 13px 14px; margin-bottom: 8px;
  border: 2px solid #111; background: #fff; border-radius: 11px; font-size: 15px; font-weight: 700; cursor: pointer; }
.ord-tierpick__x { display: block; width: 100%; padding: 10px; background: none; border: 0; color: #777; cursor: pointer; }
/* When the pickup-order bar is visible, reserve its height so it never covers content */
body.wb-cartbar .view { padding-bottom: 78px; }
body.wb-cartbar .dt__scroll { padding-bottom: 98px; }
/* Pickup-order corner button (replaced the full-width bar, Mike 2026-07-03) */
.ordfab { position: fixed; right: 14px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #F2F2F7; color: #111; border: 1px solid rgba(0,0,0,.12); font-size: 25px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); }  /* light fill = consistent with the home My Order circle (Mike) */
.ordfab__badge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: #000; color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }  /* black, not orange — Mike 2026-07-03 */
/* The 🛒 emoji cart, recolored BLACK via filter (Mike 2026-07-03: keep the exact same cart
   drawing, just not blue — a plain solid SVG was rejected). grayscale+brightness turns the
   emoji's colored strokes black while transparent pixels stay transparent. */
.cart-emoji { filter: grayscale(1) brightness(0); line-height: 1; }

/* Home-grid cart slot (under Edibles). The floating corner FAB hides on Home. */
.cat__img--order { background: #F2F2F7; color: #111;  /* match the other category circles (Mike) */ display: flex; align-items: center; justify-content: center;
  font-size: clamp(24px, 8vw, 34px); position: relative; }
.cat__img--order .ordfab__badge { top: 0; right: 0; }
body:has(#homeView:not([hidden])) .ordfab { display: none; }
/* Terpene Search pins a Search Products button to the bottom — float the cart FAB above it */
body:has(#toolsView:not([hidden])) .ordfab { bottom: 96px; }
/* Cool Tools tiles — native parity (BudTenderBuddyScreen): tall bud-photo tiles,
   white bottom-centered text, bottom two closed out (washed photo + COMING SOON pill) */
.ct-tile--photo { position: relative; background-image: linear-gradient(to bottom, transparent 38%, rgba(0,0,0,.6)), url('assets/deal_flower_single.png'); background-size: cover; background-position: center; align-items: center; justify-content: flex-end; text-align: center; min-height: 200px; padding: 16px 10px 18px; gap: 2px; }
.ct-tile--photo .ct-tile__t { color: #fff; font-size: 17px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ct-tile--photo .ct-tile__s { color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ct-tile--soon { pointer-events: none; }
.ct-tile--soon.ct-tile--photo { background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), linear-gradient(to bottom, transparent 38%, rgba(0,0,0,.6)), url('assets/deal_flower_single.png'); }
.ct-tile__badge { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); background: #111; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 6px 13px; border-radius: 16px; }

.ts-verifixed { font-size: 13px; margin: 2px 0 10px; }
/* Product-detail Terpene Profile — native TerpeneProfileSection parity (2026-07-03) */
.dtp { margin: 14px 2px 6px; }
.dtp__hr { border-top: 1px solid rgba(0,0,0,.08); margin-bottom: 12px; }
.dtp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dtp__title { font-size: 15px; font-weight: 800; color: #000; }
.dtp__badge { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #000; border-radius: 10px;
  padding: 2px 10px; font-size: 11px; font-weight: 800; color: #000; }
.dtp__ck { font-size: 12px; }
.dtp__row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; }
.dtp__name { display: inline-flex; align-items: center; font-size: 14px; color: #000; }
.dtp__name--dom { font-weight: 800; }
.dtp__star { width: 16px; margin-right: 6px; font-size: 14px; color: #000; }
.dtp__ind { display: inline-block; width: 22px; }
.dtp__pct { font-size: 14px; font-weight: 800; color: #000; }
/* Native ProductDetailScreen card layout (2026-07-03, "make the PWA look like that") */
.dtn { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 12px 14px;
  margin: 10px 0; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.dtn__top { display: flex; gap: 12px; align-items: flex-start; }
/* 3:2 landscape photo (native aspectRatio 1.5) — a square photo made the card too tall, pushing the order buttons and store list below the fold on load */
.dtn__img { width: 38%; max-width: 170px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.dtn__info { flex: 1; min-width: 0; }
.dtn__price { font-size: 30px; font-weight: 900; color: #000; line-height: 1.1; margin-bottom: 2px; }
.dtn__name { font-size: 19px; font-weight: 800; color: #000; line-height: 1.25; }
.dtn__brand { font-size: 15px; color: rgba(0,0,0,.5); margin-top: 2px; }
.dtn__thc { font-size: 15px; font-weight: 700; color: #000; margin-top: 6px; }
.dtn__type { font-size: 15px; color: rgba(0,0,0,.55); margin-top: 2px; }
.dtn .dtp { margin-top: 12px; }
/* 💰 "Cheaper near you" callout — under the product info, above the terpene profile
   (Mike 2026-07-06). Tappable (jumps the detail to the cheaper store); the --best
   variant is a static confirmation, green-accented (--hybrid). */
.dtn__cheaper { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px;
  padding: 10px 12px; background: #F2F2F7; border: 2px solid #111; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 800; color: #111; text-align: left; cursor: pointer; }
.dtn__cheaper-t { flex: 1; min-width: 0; }
.dtn__cheaper-go { flex: 0 0 auto; font-size: 22px; font-weight: 900; line-height: 1; }
/* The --best variant is a STATEMENT, not a button: no border, no chevron, default cursor. */
.dtn__cheaper--best { background: #EDFBF1; border: 0; cursor: default; }
/* Bundle line ("2 for $20 · $10 ea") — normal bar look; the DEAL TEXT carries the app's
   special-orange (same color as .dtn__special), not the background (Mike 2026-07-06). */
.dtn__cheaper-deal { color: #FF5003; }
/* "Bundle at this store" statement variant: not tappable, so no button border. */
.dtn__cheaper--here { border: 0; cursor: default; }
.dtn__storerow { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08); padding-top: 10px; }
.dtn__pin { width: 20px; height: 20px; fill: #000; flex: 0 0 auto; }
.dtn__storecol { flex: 1; min-width: 0; }
/* Store label must stay READABLE — wrap up to 2 lines, never one-line ellipsis (a truncated
   "Lume Cannabis ..." told you nothing about WHICH location — Mike, 2026-07-04). */
.dtn__storename { font-size: 15px; font-weight: 700; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dtn__special { font-size: 14px; font-weight: 800; color: #FF5003; }
.dtn__order { flex: 0 0 auto; background: #1A1A1A; color: #fff; font-weight: 800; font-size: 14px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none; }