/* ============================================================================
   wsd.css — Weed Store & Delivery IE theme (sample v1, 2026-10-07)
   "The weed store that comes to you": white and concrete, signal red, one
   sun-yellow tag, Bricolage Grotesque headlines, Archivo for everything else.
   The memorable element is the lit OPEN sign over today's shelf; the sign
   switching on is the only motion that isn't an answer to a tap.
   Loaded after css/engine.css.
   ============================================================================ */
:root {
  --cw-bg: #FFFFFF; --cw-bg-2: #FFFFFF; --cw-bg-3: #F1F1EC; --cw-line: #DADAD2;
  --cw-brand: #D7263D; --cw-brand-2: #B01E31; --cw-brand-soft: #FBE4E7; --cw-on-brand: #FFFFFF;
  --cw-accent: #FFC43D; --cw-accent-soft: #FFF1CC; --cw-on-accent: #121212;
  --cw-ink: #121212; --cw-ink-2: #3A3A37; --cw-ink-3: #6A6A66;
  --cw-focus: #121212;
  --cw-font-display: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif; --cw-font-body: 'Archivo', system-ui, sans-serif;
  --cw-display-settings: 'opsz' 96; --cw-display-weight: 800; --cw-display-tracking: -.035em; --cw-display-lh: .95;
  --cw-r-pill: 999px; --cw-r-btn: 8px; --cw-r-input: 8px; --cw-r-card: 12px; --cw-r-tile: 8px;
  --cw-shadow: 0 12px 30px rgba(18, 18, 18, .12);
}
body { font-size: 17px; }
h1 { font-size: clamp(42px, 6.2vw, 74px); }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 22px; font-variation-settings: 'opsz' 32; }
.lede { font-size: 19px; max-width: 54ch; }
.eyebrow { color: var(--cw-brand); font-weight: 700; }
a { color: var(--cw-ink); text-decoration: underline; text-decoration-color: var(--cw-line); text-underline-offset: 3px; }
a:hover { color: var(--cw-brand); text-decoration-color: var(--cw-brand); }
.btn, .nav-brand, .nav-links a, .chip, .brand-chip, .cw-card a, .zip-tile, .city-tile, .area, .footer-col a, .footer-phones a, .kwc-card, .cw-actionbar a, .nav-phone { text-decoration: none; }
.btn { font-weight: 700; }
.btn--ghost { color: var(--cw-ink); box-shadow: inset 0 0 0 2px var(--cw-ink); }
.btn--ghost:hover { background: var(--cw-ink); color: #fff; }
.input { border-color: var(--cw-ink); }
.input:focus { border-color: var(--cw-brand); }

/* a red rule along the top of every page, like a store's awning stripe */
.site-nav { border-top: 6px solid var(--cw-brand); border-bottom: 1px solid var(--cw-line); }
.nav-brand { color: var(--cw-brand); }
.nav-brand svg { height: 30px; }
.nav-brand .nav-word { display: flex; flex-direction: column; line-height: 1; }
.nav-brand .nav-word strong { font-family: var(--cw-font-display); font-variation-settings: 'opsz' 32; font-weight: 800; font-size: 22px; letter-spacing: -.03em; color: var(--cw-ink); }
.nav-brand .nav-word span { font-size: 11px; font-weight: 600; color: var(--cw-ink-3); margin-top: 3px; }
.nav-links a { font-weight: 600; }
.nav-phone { background: var(--cw-ink); color: #fff; }
.nav-phone:hover { background: var(--cw-brand); color: #fff; }
.nav-phone .dot { background: var(--cw-accent); }
.footer-mark { display: flex; align-items: center; gap: 10px; color: var(--cw-brand); }
.footer-mark svg { height: 30px; width: auto; }
.footer-mark .nav-word { display: flex; flex-direction: column; line-height: 1; color: #fff; }
.footer-mark .nav-word strong { font-family: var(--cw-font-display); font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.footer-mark .nav-word span { font-size: 11px; opacity: .7; margin-top: 3px; }
.site-footer { background: var(--cw-ink); color: #fff; }
.site-footer a { text-decoration: none; }

/* hero: headline + ZIP left, the OPEN sign right */
.hero { padding: 36px 0 20px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 960px) { .hero { padding: 64px 0 36px; } .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; } }
.hero-copy h1 { margin: 0 0 20px; }
.hero-copy h1 em { font-style: normal; color: var(--cw-brand); }
@media (min-width: 960px) { .hero-copy h1 em { white-space: nowrap; } }
@media (max-width: 419px) { .nav-brand .nav-word span { display: none; } }
.nav-brand .nav-word span { white-space: nowrap; }
.hero .zip-form { margin-top: 24px; }
.hero .zip-form .input { max-width: 200px; }
.hero-tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--cw-bg-3); border-radius: 6px; font-size: 14px; color: var(--cw-ink-2); }
.hero-tags li b { color: var(--cw-ink); }
.hero-sign { display: flex; flex-direction: column; gap: 14px; }
.open-sign { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; padding: 28px; border-radius: 14px; background: var(--cw-brand); color: #fff; box-shadow: var(--cw-shadow); }
.open-sign.is-closed { background: var(--cw-ink); }
.open-word { font-family: var(--cw-font-display); font-variation-settings: 'opsz' 96; font-weight: 800; font-size: clamp(64px, 9vw, 112px); line-height: .9; letter-spacing: .02em; }
.open-line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 14px; font-weight: 600; }
.open-line .dot { background: var(--cw-accent); }
.open-line .dot--off { background: rgba(255, 255, 255, .5); }
.sign-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sign-facts > div { padding: 14px 16px; border: 2px solid var(--cw-ink); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.sign-facts b { font-family: var(--cw-font-display); font-variation-settings: 'opsz' 48; font-weight: 800; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sign-facts span { font-size: 13px; color: var(--cw-ink-3); }
.hero-fine { font-size: 13px; color: var(--cw-ink-3); }
/* the one load moment: the sign switches on */
.motion .open-sign { animation: wsd-on 900ms steps(1, end) both; }
@keyframes wsd-on { 0% { background: var(--cw-ink); color: rgba(255, 255, 255, .35); } 18% { background: var(--cw-brand); color: #fff; } 26% { background: var(--cw-ink); color: rgba(255, 255, 255, .35); } 34% { background: var(--cw-brand); color: #fff; } 100% { background: var(--cw-brand); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .open-sign { animation: none !important; } }

/* the shelf: a rail under each row of cards */
.shelf .menu-grid { position: relative; padding: 0 0 6px; }
.shelf .cw-card { border: 0; border-radius: 10px 10px 4px 4px; background: var(--cw-bg-2); box-shadow: 0 0 0 1px var(--cw-line), 0 10px 0 -6px var(--cw-bg-3); }
.cw-card .cw-img { background: var(--cw-bg-3); }
.cw-card .cw-name { font-weight: 600; }
.cw-card .cw-price { font-family: var(--cw-font-display); font-variation-settings: 'opsz' 48; font-weight: 800; font-size: 20px; letter-spacing: -.02em; padding: 2px 8px; border-radius: 6px; background: var(--cw-accent); color: var(--cw-on-accent); }
.cw-card .cw-tier { background: var(--cw-accent-soft); color: var(--cw-ink); font-weight: 700; }
.cw-card .cw-add { background: var(--cw-ink); border-radius: 8px; }
.cw-card .cw-add:hover { background: var(--cw-brand); }
.chip.active, .chip[aria-pressed="true"] { background: var(--cw-ink); border-color: var(--cw-ink); color: #fff; }
.chip:hover { border-color: var(--cw-ink); color: var(--cw-ink); }

/* the city grid with the no-store badge */
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }
.city-tile { display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 14px 16px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 10px; color: var(--cw-ink); }
.city-tile b { font-family: var(--cw-font-display); font-variation-settings: 'opsz' 32; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.city-tile span { font-size: 13px; color: var(--cw-ink-3); margin-top: auto; }
a.city-tile:hover { border-color: var(--cw-ink); color: var(--cw-ink); }
a.city-tile:hover span { color: var(--cw-brand); }
.city-tile--plain { background: transparent; }
.city-badge { align-self: flex-start; padding: 4px 8px; border-radius: 4px; background: var(--cw-accent); color: var(--cw-on-accent); font-size: 11px; font-weight: 700; }

/* deals as tags */
.deal { border-radius: 12px; border: 1px solid var(--cw-line); }
.deal--today { border: 2px solid var(--cw-ink); }
.deal-val { font-variation-settings: 'opsz' 64; color: var(--cw-ink); background: var(--cw-accent); display: inline-block; padding: 6px 12px; border-radius: 8px; align-self: flex-start; font-size: 30px; }
.deal--today .deal-val { font-size: 44px; }
.pill--accent { color: var(--cw-on-accent); }
.pill--soft { background: var(--cw-bg-3); color: var(--cw-ink-2); }
.pill--outline { box-shadow: inset 0 0 0 2px var(--cw-ink); color: var(--cw-ink); }
.dot { background: var(--cw-brand); }

/* aisles */
.aisles { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .aisles { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.aisle { padding: 22px; background: var(--cw-bg-2); border: 1px solid var(--cw-line); border-radius: 12px; }
.aisle h3 { margin: 14px 0 8px; }
.aisle p { color: var(--cw-ink-2); font-size: 15px; }
.aisle-sign { display: inline-block; padding: 6px 10px; background: var(--cw-ink); color: #fff; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* sections */
.section--ink { background: var(--cw-ink); color: #fff; }
.section--ink h2, .section--ink .lede { color: #fff; }
.section--ink .eyebrow { color: var(--cw-accent); }
.section--ink .lede { opacity: .85; }
.section--ink .btn { background: var(--cw-brand); color: #fff; }
.section--ink .btn:hover { background: var(--cw-accent); color: var(--cw-ink); }
.section--ink .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.section--ink .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.call-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 900px) { .call-wrap { grid-template-columns: 1.4fr 1fr; } .call-btns { justify-self: end; } }
.call-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.city-fact b { color: var(--cw-brand); }
.step-num { background: var(--cw-ink); }
.faq summary::after { color: var(--cw-brand); }
.kc-minbar-fill { background: var(--cw-brand) !important; }
.kc-fab.kc-innav { box-shadow: inset 0 0 0 2px var(--cw-ink) !important; color: var(--cw-ink) !important; }
.kc-fab.kc-innav .kc-badge { color: var(--cw-ink) !important; }
.cw-actionbar [data-cart-open] { background: var(--cw-brand); }
.cw-actionbar a, .cw-actionbar button { color: var(--cw-ink); }

/* v8 (2026-10-08.1): the awning loop across the top of the hero, pinned to the top so the awning never crops; the middle
   stays white for the headline and the OPEN sign (still page HTML). The hero starts below the awning's scallops. */
.hero--loop { --hero-loop-pos: 50% 0%; --hero-loop-pos-phone: 50% 0%; padding-top: 84px; }
@media (min-width: 960px) { .hero--loop { padding-top: max(124px, calc(7.6vw + 30px)); } }
.hero--loop .hero-loop { background: #FFFFFF; }
/* round 2 (S-7, the same check as CallWeed's): the license / 21+ line keeps a solid white backing over the loop, so no
   frame of the awning can pull it under 4.5:1 (ink-3 on white reads 5.43:1, as on the static hero) */
.hero--loop .hero-fine { align-self: flex-start; padding: 3px 10px 3px 8px; margin-left: -8px; background: var(--cw-bg); border-radius: 4px; box-shadow: 0 0 0 2px var(--cw-bg); }
/* the sign's word was sized for OPEN; after hours it reads CLOSED and has to fit the same box */
.open-sign.is-closed .open-word { font-size: clamp(44px, 5.8vw, 72px); }