/* ============================================================================
   wdr.css — Weed Delivery Redlands theme (sample v1, 2026-10-10)
   "The citrus crate": warm white and parchment, grove green, brick red buttons,
   one sunburst orange. Alfa Slab One for display, Libre Franklin for the rest.
   The memorable element is the crate label in the hero; it settling into place
   (its sunburst turning a few degrees) is the only motion that isn't an answer
   to a tap. Loaded after css/engine.css.
   ============================================================================ */
:root {
  --cw-bg: #FFFBF2; --cw-bg-2: #FFFFFF; --cw-bg-3: #F3E7CB; --cw-line: #E0D0A8;
  --cw-brand: #A6372A; --cw-brand-2: #8A2C21; --cw-brand-soft: #F6DED8; --cw-on-brand: #FFFFFF;
  --cw-accent: #EE7B22; --cw-accent-soft: #FCE6D2; --cw-on-accent: #1E2A23;
  --cw-ink: #1E2A23; --cw-ink-2: #3E4A41; --cw-ink-3: #59625A;
  --cw-focus: #1F4D3A;
  --cw-font-display: 'Alfa Slab One', Georgia, serif; --cw-font-body: 'Libre Franklin', system-ui, sans-serif;
  --cw-display-weight: 400; --cw-display-tracking: .005em; --cw-display-lh: 1.06;
  --cw-r-pill: 999px; --cw-r-btn: 6px; --cw-r-input: 6px; --cw-r-card: 10px; --cw-r-tile: 8px;
  --cw-shadow: 0 14px 30px rgba(30, 42, 35, .16);
  --wdr-grove: #1F4D3A; --wdr-orange: #EE7B22; --wdr-cream: #FFFBF2;
}
body { font-size: 17px; }
h1 { font-size: clamp(32px, 4.8vw, 56px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-family: var(--cw-font-body); font-weight: 800; font-size: 20px; letter-spacing: -.005em; }
.lede { font-size: 18px; max-width: 56ch; }
.eyebrow { color: var(--cw-brand); font-weight: 800; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
a { color: var(--cw-ink); text-decoration-color: var(--cw-brand); text-underline-offset: 3px; }
a:hover { color: var(--cw-brand); }
.btn, .nav-brand, .nav-links a, .chip, .brand-chip, .cw-card a, .footer-col a, .footer-phones a, .kwc-card, .cw-actionbar a, .nav-phone, .route-card { text-decoration: none; }
.btn { font-weight: 800; letter-spacing: .02em; }
.btn--ghost { color: var(--wdr-grove); box-shadow: inset 0 0 0 2px var(--wdr-grove); }
.btn--ghost:hover { background: var(--wdr-grove); color: #fff; }
.input { border-color: var(--wdr-grove); }
.input:focus { border-color: var(--cw-brand); }

/* nav: a grove-green band with an orange pinstripe, like a crate label's edge */
.site-nav { border-top: 6px solid var(--wdr-grove); box-shadow: inset 0 2px 0 var(--wdr-orange); border-bottom: 1px solid var(--cw-line); background: var(--cw-bg); }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
.nav-brand svg { height: 36px; width: 36px; }
.nav-word { display: flex; flex-direction: column; line-height: 1; }
.nav-word span { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cw-brand); }
.nav-word strong { font-family: var(--cw-font-display); font-weight: 400; font-size: 23px; letter-spacing: .01em; color: var(--wdr-grove); margin-top: 3px; text-transform: uppercase; }
.nav-links a { font-weight: 700; }
.nav-phone { background: var(--wdr-grove); color: #fff; }
.nav-phone:hover { background: var(--cw-brand); color: #fff; }
.nav-phone .dot { background: var(--wdr-orange); }
.footer-mark { display: flex; align-items: center; gap: 10px; }
.footer-mark svg { height: 36px; width: 36px; }
.footer-mark .nav-word span { color: var(--wdr-orange); }
.footer-mark .nav-word strong { color: var(--wdr-cream); }
.site-footer { background: var(--wdr-grove); color: var(--wdr-cream); border-top: 4px solid var(--wdr-orange); }
.site-footer a { text-decoration: none; }

/* hero: copy left, the crate label right */
.hero { padding: 34px 0 28px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 980px) { .hero { padding: 60px 0 48px; } .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; } }
.hero-copy h1 { margin: 16px 0 18px; }
.hero-copy h1 em { font-style: normal; color: var(--cw-brand); }
.hero .zip-form { margin-top: 22px; }
.hero .zip-form .input { max-width: 200px; }
.hero-tags { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--cw-bg-3); border-radius: 4px; font-size: 14px; color: var(--cw-ink-2); }
.hero-tags li b { color: var(--cw-ink); }
.hero-fine { font-size: 13px; color: var(--cw-ink-3); margin-top: 16px; }
.pill--outline { box-shadow: inset 0 0 0 2px var(--wdr-grove); color: var(--wdr-grove); }
.dot { background: var(--wdr-orange); }

/* the crate label */
.crate { padding: 10px; background: var(--wdr-cream); border: 3px solid var(--wdr-grove); border-radius: 6px; box-shadow: var(--cw-shadow);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.crate-frame { position: relative; overflow: hidden; aspect-ratio: 5 / 4; container-type: inline-size; border: 2px solid var(--wdr-grove); border-radius: 3px; background: #F7E3B5; }
.crate-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crate-rays { transform-box: view-box; transform-origin: 300px 262px; }
.crate-type { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
.crate-top { width: 100%; padding: 10px 12px; background: var(--wdr-grove); color: var(--wdr-orange); font-family: var(--cw-font-body); font-weight: 800; font-size: clamp(12px, 1.6vw, 16px); letter-spacing: .32em; text-transform: uppercase; }
.crate-name { display: block; width: 100%; margin-top: auto; padding: 10px 8px 6px; background: var(--cw-brand); color: var(--wdr-cream); font-family: var(--cw-font-display); font-size: min(15cqi, calc(112cqi / var(--n, 8))); line-height: 1; white-space: nowrap; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 3px 0 #6E2219; }
.crate-name { transform: none; }
.crate-name::first-line { letter-spacing: .02em; }
.crate-ribbon { width: 100%; padding: 6px 10px 9px; background: var(--cw-brand); color: #FCE6D2; font-family: var(--cw-font-body); font-weight: 700; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .18em; text-transform: uppercase; border-top: 2px dashed rgba(255, 251, 242, .5); }
.hero-label--city { max-width: 460px; justify-self: end; width: 100%; }
/* the one load moment: the label settles, its sunburst turns */
.motion .crate { animation: wdr-settle 700ms var(--cw-ease) both; }
.motion .crate-rays { animation: wdr-turn 1800ms var(--cw-ease) both; }
@keyframes wdr-settle { from { opacity: 0; transform: translateY(8px) scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes wdr-turn { from { transform: rotate(-9deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .crate, .crate-rays { animation: none !important; } }

/* the routes: city cards as small labels */
.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .route-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.route-card { display: flex; flex-direction: column; gap: 4px; min-height: 120px; padding: 16px 14px; background: var(--cw-bg-3); border: 2px solid var(--wdr-grove); border-radius: 6px; box-shadow: inset 0 0 0 4px var(--cw-bg-3), inset 0 0 0 5px rgba(31, 77, 58, .35); color: var(--cw-ink); }
.route-card:hover { background: #fff; }
.route-card:hover .rc-name { color: var(--cw-brand); }
.rc-route { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-brand); }
.rc-name { font-family: var(--cw-font-display); font-weight: 400; font-size: 22px; line-height: 1.05; color: var(--wdr-grove); }
.rc-meta { margin-top: auto; font-size: 13px; color: var(--cw-ink-3); font-variant-numeric: tabular-nums; }
.route-also { margin: 16px 0 0; font-size: 15px; color: var(--cw-ink-2); }

/* how it works: three numbered labels */
.labels3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .labels3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.mini-label { position: relative; padding: 22px; background: var(--cw-bg-2); border: 2px solid var(--wdr-grove); border-radius: 6px; box-shadow: inset 0 0 0 5px var(--cw-bg-2), inset 0 0 0 6px rgba(31, 77, 58, .3); }
.ml-no { display: inline-block; padding: 4px 10px; background: var(--cw-brand); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-radius: 3px; }
.mini-label h3 { margin: 12px 0 8px; font-family: var(--cw-font-display); font-weight: 400; font-size: 24px; color: var(--wdr-grove); }
.mini-label p { margin: 0; color: var(--cw-ink-2); font-size: 15px; }
.mini-label--card h3 { font-family: var(--cw-font-body); font-weight: 800; font-size: 20px; color: var(--cw-ink); }

/* city pages */
.city-hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 980px) { .city-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; } }
.city-hero h1 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 14px; }
.label-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.label-list li { padding: 7px 12px; background: var(--cw-bg-2); border: 1px solid var(--wdr-grove); border-radius: 4px; font-weight: 600; font-size: 15px; }
@media (min-width: 900px) { .city-copy { grid-template-columns: 1.2fr 1fr; gap: 28px; } }
.city-fact b { color: var(--cw-brand); font-family: var(--cw-font-display); font-weight: 400; }

/* cards, deals, menu */
.cw-card .cw-price { font-family: var(--cw-font-display); font-weight: 400; font-size: 20px; color: var(--wdr-grove); }
.cw-card .cw-add { background: var(--cw-brand); border-radius: 6px; }
.cw-card .cw-add:hover { background: var(--wdr-grove); }
.chip.active, .chip[aria-pressed="true"] { background: var(--wdr-grove); border-color: var(--wdr-grove); color: #fff; }
.chip:hover { border-color: var(--wdr-grove); color: var(--cw-ink); }
.deal { border-radius: 8px; border: 2px solid var(--cw-line); }
.deal--today { border: 2px solid var(--wdr-grove); box-shadow: inset 0 0 0 4px var(--cw-bg-2), inset 0 0 0 5px rgba(31, 77, 58, .35); }
.deal-val { color: var(--cw-brand); }
.pill--accent { background: var(--wdr-orange); color: var(--cw-ink); }
.step-num { background: var(--wdr-grove); }
.faq summary::after { color: var(--cw-brand); }
.kc-minbar-fill { background: var(--cw-brand) !important; }
.cw-actionbar [data-cart-open] { background: var(--cw-brand); }

/* the call band */
.section--grove { background: var(--wdr-grove); color: var(--wdr-cream); }
.section--grove h2 { color: var(--wdr-cream); }
.section--grove .lede { color: rgba(255, 251, 242, .86); }
.section--grove .eyebrow { color: var(--wdr-orange); }
.section--grove .btn { background: var(--wdr-orange); color: var(--cw-ink); }
.section--grove .btn:hover { background: var(--wdr-cream); color: var(--cw-ink); }
.section--grove .btn--ghost { background: transparent; color: var(--wdr-cream); box-shadow: inset 0 0 0 2px rgba(255, 251, 242, .6); }
.section--grove .btn--ghost:hover { background: rgba(255, 251, 242, .12); color: var(--wdr-cream); }
.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; }

/* nav: labels on one line; the phone menu button and cart never shrink */
.nav-links { gap: 18px; }
.nav-links a { white-space: nowrap; }
.nav-burger, .kc-fab.kc-innav, .nav-phone { flex-shrink: 0; }
.nav-brand { min-width: 0; }

/* phones: a smaller wordmark so the menu button keeps its size */
@media (max-width: 419px) { .nav-word strong { font-size: 18px; } .nav-word span { font-size: 9px; letter-spacing: .14em; } .nav-brand svg { width: 30px; height: 30px; } }
.city-fact b { font-size: 22px; white-space: nowrap; }