/* ==========================================================================
   Kwiki 2026 — texture, depth, glass & fluid-type enhancement layer
   --------------------------------------------------------------------------
   Additive only. Load AFTER kwiki-main.min.css and after the page's inline
   <style> so it wins on source order. Remove the single <link> that points
   here to fully revert — no markup changes are required anywhere.
   Built on existing tokens: --bg, --emerald(-l), --purple(-l), --gold,
   --glass-bg, --glass-bdr, --radius-lg, --font-display/-body.
   ========================================================================== */

:root{
  /* Consistent elevation system (use instead of one-off box-shadows) */
  --elev-1: 0 2px 8px rgba(0,0,0,.28);
  --elev-2: 0 10px 30px -12px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.30);
  --elev-3: 0 26px 60px -22px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.34);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* Fluid type scale — single source of truth for sizing going forward */
  --fs-eyebrow: clamp(.72rem, .68rem + .18vw, .82rem);
  --fs-body:    clamp(1rem,   .97rem + .20vw, 1.12rem);
  --fs-lead:    clamp(1.06rem, .98rem + .55vw, 1.32rem);
  --fs-h3:      clamp(1.30rem, 1.12rem + .90vw, 1.90rem);
  --fs-h2:      clamp(2.20rem, 1.60rem + 3.0vw, 3.60rem);
  --fs-display: clamp(3.20rem, 2.00rem + 6.0vw, 6.00rem);
}

/* 1) AMBIENT DEPTH ----------------------------------------------------------
   Faint emerald / purple / gold light behind the whole page. Painted as the
   body background so it always sits behind content (zero stacking risk) and
   uses NO fixed-attachment, so there is no mobile scroll jank. */
body{
  background:
    radial-gradient(58% 48% at 14% -2%,  rgba(22,163,74,.12),  rgba(22,163,74,0) 60%),
    radial-gradient(52% 42% at 102% 6%,  rgba(124,58,237,.12), rgba(124,58,237,0) 58%),
    radial-gradient(60% 50% at 50% 120%, rgba(245,158,11,.06), rgba(245,158,11,0) 60%),
    var(--bg,#060f09);
}

/* 2) FILM GRAIN -------------------------------------------------------------
   Barely-there tactile texture across the page (the trend you hadn't used).
   pointer-events:none so it never intercepts clicks; z-index keeps it under
   the nav and any modal. Inline SVG = no extra request. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.05; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* 3) EVOLVED FROSTED GLASS --------------------------------------------------
   Keeps the existing translucency, adds a top sheen, a 1px inset highlight and
   a layered shadow so cards read as real frosted glass instead of flat panels. */
.glass-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%),
    var(--glass-bg, rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), var(--elev-2);
}

/* 4) ONE MOTION LANGUAGE ----------------------------------------------------
   A single, consistent hover-lift for interactive cards. */
.glass-card, .step-card, .product-card, .cat-card-overlay,
.reward-card, .review-card, .ref-card, .city-tile{
  transition: transform .28s var(--ease-out),
              box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out);
}
.glass-card:hover, .step-card:hover, .product-card:hover,
.cat-card-overlay:hover, .city-tile:hover{
  transform: translateY(-4px);
  box-shadow: var(--elev-3);
  border-color: rgba(34,197,94,.32);
}

/* 5) TYPOGRAPHY POLISH ------------------------------------------------------
   Fluid lead text, balanced multi-line headlines, and a small editorial rule
   on eyebrows. Headlines already use clamp() in the base sheet, so we only add
   wrapping refinements there. */
.hero-sub{ font-size: var(--fs-lead); text-wrap: pretty; }
.hero-h1, .section-title{ text-wrap: balance; }
.section-eyebrow{
  font-size: var(--fs-eyebrow);
  display:inline-flex; align-items:center; gap:.55rem;
}
.section-eyebrow::before{
  content:""; width:20px; height:1px;
  background:linear-gradient(90deg, var(--emerald-l,#22c55e), transparent);
}

/* Accessibility: honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .glass-card, .step-card, .product-card, .cat-card-overlay,
  .reward-card, .review-card, .ref-card, .city-tile{ transition:none; }
  .glass-card:hover, .step-card:hover, .product-card:hover,
  .cat-card-overlay:hover, .city-tile:hover{ transform:none; }
}

/* ==========================================================================
   Kwiki 2026 — Daily deal banners  (homepage #deals)  — 2026-09-16
   Seven 1400×400 "<day> website" banners (images/daily-<day>.webp|.jpg).
   The lead (.dd-hero, set by the section script = today in Pacific time) spans
   the full row; the other six sit three-up in week order. Tap opens the full
   banner in the shared deal modal, widened by .dd-wide while it is open.
   Replaces the 2026-08 square-tile mosaic (TUESDAY-1 … SUNDAY-1 flyers).
   ========================================================================== */
#deals .dd-wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1180px; margin:0 auto;
}
#deals .dd-item{
  position:relative; display:block; width:100%; padding:0; margin:0; border:1px solid var(--glass-bdr, rgba(255,255,255,.1));
  border-radius:16px; overflow:hidden; background:#0d1a10; cursor:pointer; text-align:left; color:inherit;
  box-shadow:var(--elev-2); transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), border-color .26s var(--ease-out);
}
#deals .dd-item picture, #deals .dd-item img{ display:block; width:100%; height:auto; aspect-ratio:1400/400; object-fit:cover; }
#deals .dd-item:hover, #deals .dd-item:focus-visible{ transform:translateY(-3px); box-shadow:var(--elev-3); border-color:rgba(245,158,11,.55); outline:none; }
#deals .dd-item:focus-visible{ outline:3px solid var(--gold,#f59e0b); outline-offset:3px; }
#deals .dd-day{
  position:absolute; top:10px; left:10px; z-index:2; font-family:var(--font-body,'Plus Jakarta Sans',sans-serif); font-weight:800;
  font-size:.66rem; letter-spacing:1.2px; text-transform:uppercase; color:#eafff0; background:rgba(6,15,9,.72);
  border:1px solid rgba(255,255,255,.14); padding:5px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
#deals .dd-hero{ grid-column:1 / -1; border-color:rgba(245,158,11,.55); border-radius:20px; }
#deals .dd-hero .dd-day{
  font-size:.74rem; color:#1a1200; background:linear-gradient(90deg, var(--gold-l,#fcd34d), var(--gold,#f59e0b)); border-color:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
#deals .dd-hero picture, #deals .dd-hero img{ border-radius:20px; }

/* the shared deal modal, widened for a 3.5:1 banner */
.deal-modal-overlay.dd-wide .deal-modal-box{ max-width:min(1100px, 96vw); }
.deal-modal-overlay.dd-wide .deal-modal-img{ max-height:none; aspect-ratio:1400/400; object-fit:contain; background:#0d1a10; }

@media (max-width: 900px){
  #deals .dd-wrap{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width: 640px){
  #deals .dd-wrap{ grid-template-columns:1fr; gap:12px; }
  #deals .dd-item, #deals .dd-hero{ border-radius:14px; }
  #deals .dd-day{ font-size:.62rem; padding:4px 8px; }
}
@media (prefers-reduced-motion: reduce){
  #deals .dd-item{ transition:none; }
  #deals .dd-item:hover{ transform:none; }
}

/* ==========================================================================
   Kwiki 2026 — "Order on Weedmaps" CTA band (homepage #weedmaps)
   ========================================================================== */
.wm-cta{padding:4rem 6%;}
.wm-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;
  background:linear-gradient(135deg, rgba(0,188,212,.10), rgba(124,58,237,.08)), var(--bg-2,#0d1a10);
  border:1px solid var(--glass-bdr,rgba(255,255,255,.12));border-radius:var(--radius-xl,28px);padding:32px;
  box-shadow:var(--elev-2);}
.wm-text .section-eyebrow{color:#22d3ee}
.wm-title{font-family:var(--font-display,sans-serif);font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:1px;color:#fff;margin:.3rem 0 .8rem}
.wm-word{color:#00bcd4}
.wm-text p{color:var(--text-muted,#9cc09c);line-height:1.65;margin-bottom:1.3rem;max-width:46ch}
.wm-btn{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:800;text-decoration:none;
  background:linear-gradient(90deg,#00bcd4,#0097a7);color:#04222a;transition:transform .2s var(--ease-out,ease),box-shadow .2s}
.wm-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,188,212,.3)}
.wm-card{position:relative;display:block;border-radius:var(--radius-lg,20px);overflow:hidden;border:1px solid var(--glass-bdr,rgba(255,255,255,.12));
  aspect-ratio:16/10;transition:transform .3s var(--ease-out,ease),box-shadow .3s}
.wm-card img{width:100%;height:100%;object-fit:cover;display:block}
.wm-card:hover{transform:translateY(-4px);box-shadow:var(--elev-3)}
.wm-pin{position:absolute;left:14px;bottom:14px;background:#00bcd4;color:#04222a;font-weight:800;font-size:13px;
  padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.35)}
@media(max-width:760px){.wm-inner{grid-template-columns:1fr;padding:22px}.wm-card{order:-1}}

/* ==========================================================================
   Kwiki 2026 — Floating widget layout v2 (de-clutter the corners)
   Chat is natively bottom-LEFT, so keep it there and balance the 6 widgets:
     LEFT  (bottom -> up): Kiki chat | WhatsApp | Kiki promo bubble
     RIGHT (bottom -> up): Cart | Back-to-top | "ASAP Delivery" schedule pill
   Position-only !important. The old .whatsapp-float "!important" rules use an
   invalid "\!important" token (dead), so single-class overrides win by source
   order. Reverts cleanly by deleting this block.
   ========================================================================== */
/* ---- LEFT column ---- */
.chatbot-fab    { left:1.25rem !important; right:auto !important; bottom:1.25rem !important; }
.chatbot-window { left:1.25rem !important; right:auto !important; bottom:6rem !important; }
.kiki-live-float{ left:1.25rem !important; right:auto !important; bottom:11rem !important; max-width:300px !important; }
/* ---- RIGHT column ---- */
.kc-fab:not(.kc-innav) { left:auto !important; right:1.25rem !important; bottom:1.25rem !important; }
/* #212: the in-nav cart is position:relative inside .nav-right — the floating
   placement above must not touch it, or `bottom` lifts it out of alignment. */
.kc-fab.kc-innav{ position:relative !important; top:auto !important; right:auto !important;
                  bottom:auto !important; left:auto !important; align-self:center !important; }
.btt-btn        { left:auto !important; right:1.25rem !important; bottom:6rem !important; }
.kw-sched-btn   { left:auto !important; right:1.25rem !important; bottom:10.5rem !important; }
.float-call     { left:1.25rem !important; right:auto !important; bottom:11rem !important; } /* mobile-only (shows <768px) */

/* 🐞 issue reporter (staff note #101, supersedes #95 placement): bottom-RIGHT,
   just left of the 🛒 cart fab (.kc-fab, 60px @ right:20px). !important beats
   the inline style. */
#wg-fab { left:auto !important; right:calc(1.25rem + 72px) !important; bottom:1.4rem !important; }

/* staff note #96: no floating chat bubble bottom-right (panel still opens via
   "Ask Kiki" links), and no white open-hours pill behind the Ask Kiki fab. */
#kw-chat-fab      { display:none !important; }
#kwiki-hours-badge{ display:none !important; }

/* staff note #97: no live delivery-time promises — nav clock→ETA chip + hero
   "Delivering to your area in ~NN min" badge (per Andy's marked screenshot). */
.live-clock-pill  { display:none !important; }
.hero-eta-badge   { display:none !important; }

@media (max-width:600px){
  .chatbot-fab    { left:0.75rem !important; bottom:0.75rem !important; }
  .chatbot-window { left:0.75rem !important; bottom:5rem !important; width:min(340px,calc(100vw - 1.5rem)) !important; }
  .kc-fab:not(.kc-innav) { right:0.75rem !important; bottom:0.75rem !important; }
  .btt-btn        { right:0.75rem !important; bottom:5.25rem !important; }
  .kw-sched-btn   { right:0.75rem !important; bottom:9.75rem !important; }
  .float-call     { left:0.75rem !important; bottom:9.75rem !important; }
  .kiki-live-float{ display:none !important; }
  #wg-fab         { left:auto !important; right:calc(0.75rem + 68px) !important; bottom:0.85rem !important; }
}

/* ==========================================================================
   Kiki hero → real iPhone frame (images/iphone-frame.svg overlay, transparent
   screen; the photo — or a future welcome <video class="kiki-screen"> — sits
   underneath). Live chip ABOVE the phone, caption BELOW it. Countdown removed.
   Screen cutout in the SVG: 7.73% sides / 2.67% top+bottom of the 440x900 box.
   ========================================================================== */
.hero-countdown-wrap{ display:none !important; }   /* owner request: no arrival counter */

.kiki-callwrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.kiki-live-chip{
  background:rgba(6,15,9,.72); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); color:#eafff0; font-size:.78rem; font-weight:700;
  letter-spacing:.04em; padding:.32rem .85rem; border-radius:999px; white-space:nowrap;
}
.kiki-phone2{
  position:relative; width:min(82%,330px); aspect-ratio:440/900; margin:0 auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55));
}
.kiki-phone2 .kiki-screen{
  position:absolute !important; top:2.3% !important; left:7.2% !important;
  bottom:auto !important; right:auto !important;
  width:85.6% !important; height:95.4% !important;
  max-width:none !important; max-height:none !important;   /* beats .hero-kiki-img{max-height:340px} */
  object-fit:cover !important; object-position:center top !important;
  border-radius:14% / 6.8% !important;                      /* ~cutout curve at any size */
  filter:none !important; display:block;
}
.kiki-phone2 .kiki-frame{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  pointer-events:none; display:block; filter:none;
}
/* caption sits OUTSIDE the phone, back in normal flow */
.kiki-callwrap .glass-badge{
  position:static; text-align:center; border-radius:16px; padding:.55rem 1.2rem;
}
@media (max-width:600px){ .kiki-phone2{ width:min(88%,300px); } }

/* ==========================================================================
   Customer account UI (account.html — kwiki-account.js)
   ========================================================================== */
.acct-oauth{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.acct-obtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:.8rem;border-radius:12px;border:1px solid rgba(255,255,255,.15);font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;transition:transform .15s}
.acct-obtn:hover{transform:translateY(-1px)}
.acct-google{background:#fff;color:#1f1f1f}
.acct-oico{font-weight:800;font-size:1.05rem}
.acct-divider{display:flex;align-items:center;gap:10px;margin:1rem 0;color:var(--text-muted,#9cc09c);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.acct-divider::before,.acct-divider::after{content:"";flex:1;height:1px;background:var(--glass-bdr,rgba(255,255,255,.12))}
.acct-lbl{display:block;font-size:.78rem;color:var(--text-muted,#9cc09c);margin:.6rem 0 .25rem;font-weight:600}
.acct-in{width:100%;box-sizing:border-box;padding:.75rem .9rem;border-radius:10px;border:1px solid var(--glass-bdr,rgba(255,255,255,.15));background:rgba(0,0,0,.3);color:var(--text,#e8f0e8);font:inherit}
.acct-in:focus{outline:none;border-color:#22c55e}
.acct-btn{display:block;width:100%;margin-top:.8rem;padding:.85rem;border:none;border-radius:12px;background:var(--emerald,#16a34a);color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;font-family:inherit}
.acct-btn:hover{filter:brightness(1.08)}
.acct-btn-2{background:none;border:1px solid var(--emerald,#16a34a);color:var(--emerald-l,#3cb865)}
.acct-btn-ghost{background:none;border:1px solid var(--glass-bdr,rgba(255,255,255,.2));color:var(--text-muted,#9cc09c)}
.acct-msg{font-size:.82rem;min-height:1.1em;margin-top:.5rem}
.acct-id-slot{border:1px dashed var(--glass-bdr,rgba(255,255,255,.2));border-radius:10px;padding:.8rem;font-size:.82rem;color:var(--text-muted,#9cc09c);text-align:center;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.acct-id-slot.on{border-style:solid;border-color:rgba(34,197,94,.5);color:#4ade80;background:rgba(22,163,74,.07)}

/* ============================================================================
   INSIDE KWIKI — media gallery            (replaced .kiki-hq-banner 2026-08-20)
   Content lives in js/kwiki-gallery.js. Empty state renders placeholder tiles.
   Mobile-first: 1 column under 560px, 2 up to 900px, 3 above. Tiles hold a
   fixed 4:3 box so the grid never reflows as lazy images arrive (no CLS).
   ========================================================================== */
.kw-gallery{ padding:2.5rem 1.5rem 1rem; max-width:1240px; margin:0 auto;
  /* the site nav is sticky — without this an anchor to #gallery lands under it */
  scroll-margin-top:110px; }
.kw-gallery-head{ text-align:center; margin-bottom:1.25rem; }
.kw-gallery-sub{ color:var(--text-dim,#9fb8a6); font-size:14px; margin:.35rem 0 0; }

.kw-gallery-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:560px){ .kw-gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .kw-gallery-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }

.kw-g-tile{ margin:0; }
.kw-g-media{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:18px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 44px rgba(0,0,0,.38); background:rgba(255,255,255,.03);
}
.kw-g-cap{ margin:.55rem .25rem 0; font-size:13px; line-height:1.5; color:var(--text-dim,#9fb8a6); }

/* video tiles: click to play, nothing downloads until then */
.kw-g-videobtn{
  position:relative; padding:0; border:0; background:none; cursor:pointer;
  width:100%; display:block; border-radius:18px;
}
.kw-g-videobtn video{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:18px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 44px rgba(0,0,0,.38); background:#0b1410;
}
.kw-g-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,14,.72); color:#fff; backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.22); transition:transform .18s ease;
}
.kw-g-videobtn:hover .kw-g-play{ transform:translate(-50%,-50%) scale(1.06); }
.kw-g-videobtn.is-playing .kw-g-play{ display:none; }
.kw-g-videobtn.is-playing video{ cursor:default; }

/* empty state — visible, deliberate, obviously a slot rather than a bug */
.kw-g-empty-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; width:100%; aspect-ratio:4/3; border-radius:18px;
  border:1.5px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.025);
  color:var(--text-dim,#9fb8a6);
}
.kw-g-empty-label{ font-size:12.5px; font-weight:600; letter-spacing:.2px; }
.kw-gallery-grid.is-empty .kw-g-tile{ opacity:.85; }

@media (prefers-reduced-motion:reduce){
  .kw-g-videobtn:hover .kw-g-play{ transform:translate(-50%,-50%); }
}

/* ============================================================================
   MOBILE READABILITY & TAP TARGETS — added 2026-08-20
   ----------------------------------------------------------------------------
   Measured in a real 390x844 iPhone viewport with headless Chromium:
     • legal / footer copy rendered at 10.9–11.5px (below the 12px readable floor)
     • 30+ links & buttons were under Apple's 44px minimum tap target —
       the footer "Terms of Service" link measured 86x12px
   Scoped to <=480px so desktop layout is untouched.
   ========================================================================== */
@media (max-width: 480px) {
  /* 1. nothing legal drops below 12px */
  .ag-fine,
  .ag-license,
  .footer-prop65,
  .site-footer small,
  .foot-legal { font-size: 12px !important; line-height: 1.6 !important; }

  /* 2. legal + footer links get a real tap target.
        NOTE: an earlier version used `margin:-11px 0` to keep the line rhythm.
        That worked visually but made adjacent link BOXES overlap each other,
        which turns into mis-taps — measurably worse than the small target it
        replaced. Padding + roomier line-height instead: the footer grows a few
        px, and every target is genuinely separate. */
  .ag-fine,
  .ag-license,
  .footer-prop65,
  .site-footer { line-height: 2.1 !important; }

  .ag-fine a,
  .ag-license a,
  .footer-prop65 a,
  .site-footer a {
    display: inline-block;
    padding: 9px 6px;
    text-underline-offset: 3px;
  }

  /* 3. filter / category chips reach 44px so they're comfortably tappable */
  .menu-cat-chip,
  .chip,
  [class*="filter-chip"] { min-height: 44px !important; display: inline-flex !important; align-items: center; }

  /* 4. floating widgets keep clear of the iOS home indicator */
  .float-call, .chatbot-fab, .btt-btn { bottom: calc(var(--fab-bottom, 0.75rem) + env(safe-area-inset-bottom, 0px)) !important; }
}