/*
Theme Name: Joyology Mirror
Theme URI: https://joyology.com
Author: AIO Media
Description: Mirror of joyology.com for the Kinsta migration. Every colour, font and layout value in this theme was MEASURED from the live site (see the SDK theme's BRAND_DECISIONS.md for the full provenance record) — do not restyle from taste or from the 2021 brand book without reading that file first.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: joyology-mirror
*/

/* ------------------------------------------------------------------ *
 * Design tokens — measured on joyology.com, byte-identical to the
 * Ecom Pro storefront theme so the two surfaces cannot drift apart.
 * ------------------------------------------------------------------ */
:root {
  /* palette */
  --joy-orange: #EE4405;       /* nav bar */
  --joy-ink: #285066;          /* titles, core text accents */
  --joy-lime: #E1F651;         /* CTAs — ALWAYS a fill carrying ink, never text */
  --joy-lime-hover: #D6EC3C;
  --joy-savings: #527810;      /* the only green legible as TEXT on white */
  --joy-muted-ink: #6B7178;    /* AA-passing muted text (4.93:1) */
  --joy-muted-fill: #969EA5;   /* the live muted — fills/borders only (2.72:1) */
  --joy-hairline: #E3E4E8;
  --joy-text: #222222;
  --joy-white: #ffffff;
  --joy-error: #D81E00;

  /* the shell gradient, measured stop-for-stop */
  --joy-gradient: linear-gradient(180deg, #7EB59B 0%, #4788A1 50%, #A1CC5F 100%);

  /* type — served by the AIO-owned Adobe kit (wen6vzs) */
  --joy-font-body: "fieldwork", Helvetica, Arial, sans-serif;
  --joy-font-display: "all-round-gothic", Helvetica, Arial, sans-serif;

  /* geometry */
  --joy-radius: 9px;
  --joy-radius-card: 13px;
  --joy-max-width: 1240px;
}

/* ---- reset-lite ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--joy-font-body);
  font-size: 16.8px;
  line-height: 1.6;
  color: var(--joy-text);
  /* LIVE HAS TWO THEMES, chosen BY THE CLOCK (see parts/theme-toggle.php):
     night/green before 08:00 and after 18:30, day/sunset in between, with a
     session-scoped manual override. NO background-attachment: fixed — iOS
     mangles it. */
  background-color: #EE4405; /* first day stop — paints before the image */
  background-image: linear-gradient(#EE4405, #F14FAB 50%, #F25E88 80%, #F25E88);
}
body.joy-night {
  background-color: #7EB59B;
  background-image: var(--joy-gradient);
}

/* Live does NOT run one ramp down the whole document: `.gradient-top` covers
   everything above the specials band and `.gradient-bottom` paints the
   joyitudes band separately. Scoping it to the top region is what makes the
   ramp reach orange (#f68020) and then YELLOW (#ebf001) before the specials
   photo — on `body` the same stops stretch and never leave pink. */
body.home .joy-gradienttop {
  background-image: linear-gradient(180deg, #EE4405 8%, #F14FAB 50%, #F68020 75%, #EBF001 100%);
}
body.home.joy-night .joy-gradienttop {
  background-image: linear-gradient(180deg, #7EB59B 0, #4788A1 100%);
}
/* The ramp lives on the wrapper, which starts BELOW the chrome — so the band
   the header occupies paints the body colour. It must be the gradient's FIRST
   stop, continuing the ramp upward the way live's does (live starts its
   gradient at the very top of the document). Setting it to the LAST stop put
   a 117px yellow slab behind the nav on every screen. */
body.home { background-image: none; background-color: #EE4405; }
body.home.joy-night { background-color: #7EB59B; }
img { max-width: 100%; height: auto; }
a { color: var(--joy-ink); }

.joy-container {
  max-width: var(--joy-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------------ *
 * Utility bar — orange row: search, ORDER ONLINE, cart. On the live
 * site this row also carries the store-context pill + live hours (menu
 * SPA territory; arrives with the Ecom Pro storefront).
 * ------------------------------------------------------------------ */
/* Chrome swaps with the theme (live day-mode capture 2026-08-20):
   DAY topbar + bottom bar = ink; NIGHT topbar = orange, bottom = white. */
.joy-utility { background: var(--joy-ink); padding: 5px 0; }
body.joy-night .joy-utility { background: var(--joy-orange); }
.joy-utility__inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: none;
  margin: 0 auto;
  padding: 10px;
}
.joy-utility__info {
  display: flex;
  flex: 0 1 515.36px;
  min-width: 250px;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}
.joy-utility__search { flex: 1; margin-right: 15px; }
.joy-utility__search input { width: 100%; }
.joy-utility__search { flex: 1 1 auto; min-width: 0; }
.joy-utility__search input {
  width: 100%;
  max-width: none;
  min-height: 53.8px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--joy-white);
  color: var(--joy-white);
  font: inherit;
  padding: 15px 0 10px;
}
.joy-utility__search input::placeholder { color: var(--joy-white); opacity: 0.95; }
.joy-utility__order,
.joy-utility__cart {
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--joy-radius);
  white-space: nowrap;
  min-height: 49.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.joy-utility__cart { display: inline-flex; padding: 12px 14px; margin-left: 10px; }
.joy-utility__order:hover,
.joy-utility__cart:hover { background: var(--joy-lime-hover); }

/* ------------------------------------------------------------------ *
 * Nav row — sticky, brand ink, uppercase links around the centre mark.
 * ------------------------------------------------------------------ */
.joy-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Transparent over the gradient at the top; ink once stuck — live's
     scroll behaviour (verified in the 2026-08-20 side-by-side). White
     surfaces (blog/events) override to white by body-class specificity. */
  background: transparent;
  transition: background 0.25s ease;
}
.joy-nav.is-stuck { background: var(--joy-ink); }
/* Live overlays the initial nav on the homepage gradient. It becomes fixed
   once the page moves, while other templates keep the normal sticky row. */
body.home .joy-nav { position: absolute; top: auto; left: 0; right: 0; width: 100%; }
body.home .joy-nav.is-stuck { position: fixed; top: 0; }
.joy-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  max-width: 1760px;
  margin: 0 auto;
  padding: 8px 24px;
}
.joy-nav__menu { display: contents; }
.joy-nav__links { display: flex; align-items: center; gap: 6px; }
.joy-nav__links--left { grid-column: 1; grid-row: 1; justify-self: start; }
.joy-nav__home { grid-column: 2; grid-row: 1; }
.joy-nav__links--right { grid-column: 3; grid-row: 1; justify-self: end; }
/* Store-microsite groups hug the centre mark, as live. */
.joy-locnav .joy-nav__group--left { grid-column: 1; grid-row: 1; justify-self: end; }
.joy-locnav .joy-nav__group--right { grid-column: 3; grid-row: 1; justify-self: start; }
.joy-locnav .joy-nav__group { display: flex; align-items: center; gap: 6px; }
/* Live steps the nav link scale by breakpoint — 17px base, 18px/1px tracking
   below xl, 19px/1px from 1400 up. The mirror held 17px with no tracking at
   every width, which is why the bar read tighter than live's on a wide screen. */
.joy-nav__inner a {
  color: var(--joy-white);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 17px;
  padding: 10px 15px;
  border-radius: var(--joy-radius);
  white-space: nowrap;
}
@media (max-width: 1199.98px) {
  .joy-nav__inner a { font-size: 18px; letter-spacing: 1px; }
}
@media (min-width: 1400px) {
  .joy-nav__inner a { font-size: 19px; letter-spacing: 1px; }
}
.joy-nav__inner a:hover { background: rgba(255, 255, 255, 0.13); }
/* Current page renders in lime, as measured on the live nav. Lime on the
   ink nav bar is 8.6:1 — the one context where lime text is legal. */
.joy-nav__inner a[aria-current="page"] { color: var(--joy-lime); }
.joy-nav__home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 8px 16px !important;
}
.joy-nav__homeword { font-size: 16.8px; font-weight: 700; margin-top: 8px; transition: font-size 0.25s ease; }
/* The REAL logo marks (live: 50px logo-white.webp on the gradient; the
   colored blog-logo.png on white surfaces). Shrinks when the bar sticks,
   like live's shrink-on-scroll header. */
.joy-nav__mark {
  display: block;
  width: 50px;
  height: 50px;
  transition: width 0.25s ease, height 0.25s ease;
}
.joy-nav__mark--dark { display: none; }
.joy-nav.is-stuck .joy-nav__mark { width: 30px; height: 30px; }
.joy-nav.is-stuck .joy-nav__homeword { font-size: 12px; margin-top: 4px; }

/* Hover dropdowns — white panels, measured live (radius 4.2, deep soft
   shadow, #191919 14px/600 uppercase links). */
.joy-nav__item { position: relative; display: inline-flex; }
.joy-nav__drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--joy-white);
  border-radius: 4.2px;
  box-shadow: rgba(0, 0, 0, 0.65) 0px 15px 30px -15px;
  padding: 6px 0;
  z-index: 120;
}
.joy-nav__item--has-children:hover .joy-nav__drop,
.joy-nav__item--has-children:focus-within .joy-nav__drop { display: block; }
.joy-nav__drop a {
  display: block;
  color: #191919;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 12.6px 25.2px;
  border-radius: 0;
  white-space: nowrap;
}
.joy-nav__drop a:hover { background: rgba(0, 0, 0, 0.05); }

/* ------------------------------------------------------------------ *
 * Homepage hero — measured from live at 1900x1060 and 390x844 on
 * 2026-08-24. The three SVGs below are byte-identical live assets; live uses
 * them as full-page SimpleParallax layers, not as invented CSS circles.
 * ------------------------------------------------------------------ */
.joy-gradienttop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.joy-gradienttop > :not(.joy-parallax) { position: relative; z-index: 1; }
.joy-parallax {
  position: absolute;
  /* Live's full main-layer box measured 6548.17px at the target viewport;
     its top sits behind the 85.38px utility chrome. */
  top: -85.38px;
  right: 0;
  bottom: auto;
  left: 0;
  height: 6548.17px;
  z-index: 0;
  min-height: 100vh;
  overflow: hidden;
  pointer-events: none;
}
.joy-parallax__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: joy-layer-reveal 1s ease 1.25s both;
}
.joy-parallax__layer--one {
  background-image: url("assets/media/layer1.svg");
  transform: scale(1.05);
  transition: transform 0.25s cubic-bezier(0, 0, 0, 1);
}
.joy-parallax__layer--two {
  background-image: url("assets/media/layer2.svg");
  transform: scale(1.10);
  transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
}
.joy-parallax__layer--three {
  background-image: url("assets/media/layer3.svg");
  transform: scale(1.30);
  transition: transform 1s cubic-bezier(0, 0, 0, 1);
}
@keyframes joy-layer-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes joy-hero-rise {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.joy-hero {
  position: relative;
  color: var(--joy-white);
  text-align: center;
  padding: 108px 15px 0;
  overflow: visible;
}
.joy-hero__wordmark {
  display: block;
  width: min(780px, 90vw);
  height: auto;
  margin: 0 auto 24px;
  animation: joy-hero-rise 0.75s ease 0.5s both;
}
.joy-hero__copy { animation: joy-hero-rise 0.75s ease 1.5s both; }
.joy-hero__title {
  margin: 0 0 72px;
  font-family: var(--joy-font-display);
  font-weight: 400;
  font-size: 48.832px;
  line-height: 1.2;
}
.joy-hero__ctas {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.joy-hero__pill {
  background: rgba(255, 255, 255, 0.4);
  color: var(--joy-white);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(16px, 1vw, 19.2px);
  padding: 1.25em 1.5em 1em;
  border-radius: 999px;
}
.joy-hero__pill:hover { background: rgba(255, 255, 255, 0.55); }
.joy-hero__cue {
  width: calc(100% + 24px);
  height: 106px;
  margin: 6px 0 0 -12px;
  overflow: hidden;
  animation: joy-hero-rise 0.75s ease 1.5s both;
}
.joy-hero__cue svg {
  display: block;
  width: 100%;
  height: 100px;
  overflow: visible;
}
.joy-hero__cue path { fill: transparent; }
.joy-hero__cue text {
  fill: var(--joy-white);
  font-family: var(--joy-font-body);
  font-size: 29px;
  font-weight: 400;
}
@media (min-width: 768px) {
  .joy-hero { padding: 217px 75px 0; }
  .joy-hero__wordmark { margin-bottom: 28.8px; }
  .joy-hero__title {
    margin-bottom: 43.2px;
    font-size: clamp(48.832px, 3.1vw, 58.5984px);
  }
  .joy-hero__ctas { flex-direction: row; gap: 7.2px; }
  .joy-hero__pill { font-size: 19.2px; }
  .joy-hero__cue {
    width: calc(100% + 28.8px);
    height: 193.58px;
    margin: 86.4px 0 0 -14.4px;
    padding-top: 7.2px;
  }
  .joy-hero__cue text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .joy-parallax__layer,
  .joy-hero__wordmark,
  .joy-hero__copy,
  .joy-hero__cue,
  .joy-hero__cue svg { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Homepage sections — 88px lowercase white titles, measured live.
 * ------------------------------------------------------------------ */
/* Live's vertical rhythm (store state): content-bottom → next title 67-82px,
   title-bottom → content 49-64px. 36px section pads + the title's 20.16
   margin land inside both ranges. */
.joy-section { padding: 36px 0; }
.joy-section > .joy-circles,
.joy-section > .joy-prodrail { margin-top: 28px; }
/* live .display-1: 88px / 105.6px leading / 18.48px below. The mirror's
   tighter leading and looser gap compounded over nine headings into most of
   the page-height difference against live. */
.joy-title {
  /* live (hydrated store state, 1900w): 96px / 115.2 leading / 20.16 below */
  margin: 0 0 20.16px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.1vw, 96px);
  line-height: 1.2;
  color: var(--joy-white);
  text-align: center;
}
/* Live's .display-1 is a FIXED 88px, not a vw ramp. The clamp only reaches
   88px above ~1443px wide, so at 1440 it resolved to 87.84px and every
   heading sat 0.19px short — visible only in aggregate, but it also made the
   specials band 18.65px shorter than live's. */
@media (min-width: 992px) {
  .joy-title { font-size: 96px; }
}

/* Category photo circles. */
/* Live's tiles are .headless-category-card (hydrated store state, measured
   2026-08-24): 308×338 cards, 15px pad, radius 9, 250×250 artwork, 28.8px
   labels, ~20px gaps. */
.joy-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1660px;
}
.joy-circles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 308px;
  padding: 15px;
  border-radius: 9px;
  box-sizing: border-box;
  text-decoration: none;
  transition: background 120ms ease;
}
.joy-circles a:hover { background: rgba(255, 255, 255, 0.12); }
.joy-circles img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  transition: transform 120ms ease;
}
.joy-circles a:hover img { transform: scale(1.04); }
.joy-circles span {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 28.8px;
  color: var(--joy-white);
}

/* Carousel slot CTA — stands in for the live-inventory carousel until the
   Ecom Pro embed mounts post-proxy. */
.joy-shopcta { text-align: center; }
.joy-shopcta__btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
  color: var(--joy-ink);
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 999px;
}
.joy-shopcta__btn:hover { background: var(--joy-lime); }

/* Fixed bottom strip — white 44px. Live lays it out as a 3-column bootstrap
   row: toggle left, offer CENTRED ON THE VIEWPORT, View Cart flush right
   (the mirror previously centred the offer and cart together as a pair). */
.joy-bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  min-height: 44px;
  background: var(--joy-white);
  padding: 12px 15px;
}
.joy-bottombar__left { justify-self: start; display: flex; align-items: center; }
.joy-bottombar__offer {
  grid-column: 2;
  justify-self: center;
  color: var(--joy-orange);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
}
.joy-bottombar__offer:hover { text-decoration: underline; }
.joy-bottombar__cart {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--joy-orange);
  font-weight: 400;                /* live: cart is 400, the offer is 700 */
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
}
.joy-bottombar__cart svg { flex: 0 0 auto; }
@media (max-width: 1199px) {
  /* live hides the offer text below xl (d-none d-xl-flex) */
  .joy-bottombar__offer { display: none; }
}
/* The bar covers the page bottom — keep the footer reachable. */
body { padding-bottom: 56px; }

/* The mobile stand-in for the live store-context pill: desktop hides it. */
.joy-utility__storepill { display: none; }

/* Burger: desktop hides it. */
.joy-nav__burger { display: none; }

/* ------------------------------------------------------------------ *
 * Mobile drawer — live collapses the bar at 1200px (navbar-expand-xl),
 * not 768, and opens a 400px LEFT drawer rather than a dropdown under
 * the bar. Its contents are live's primary-navigation tree, which is a
 * different menu from the desktop bar (see header.php).
 * ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
  .joy-nav__menu { display: none; }
  .joy-nav__inner { display: flex; justify-content: space-between; align-items: center; }
  .joy-nav__burger { display: flex; }
}
@media (min-width: 1200px) {
  .joy-drawer, .joy-drawer__scrim { display: none; }
}

.joy-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  max-width: 86vw;
  z-index: 300;
  /* live's drawer is CHARCOAL (background-dark background-gradient), not the
     brand gradient — and it is theme-invariant. */
  background: #222;
  background-image: linear-gradient(145deg, #222222, #484848);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.joy-drawer-open .joy-drawer { transform: translateX(0); }
.joy-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.4);
}
body.joy-drawer-open { overflow: hidden; }

.joy-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.joy-drawer__title {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--joy-white);
}
.joy-drawer__close {
  background: none;
  border: 0;
  color: var(--joy-white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.joy-drawer__nav { padding: 8px 24px 40px; }
.joy-drawer__item > a,
.joy-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  color: var(--joy-white);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.joy-drawer__toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.joy-drawer__toggle span { transition: transform 0.2s ease; font-size: 22px; }
/* live drops its sub-menus onto a flat #505050 panel */
.joy-drawer__sub { background: #505050; border-radius: 6px; padding: 4px 0; margin-bottom: 8px; }
.joy-drawer__sub[hidden] { display: none; }
.joy-drawer__sub a {
  display: block;
  padding: 10px 18px;
  color: var(--joy-white);
  text-decoration: none;
  font-size: 15px;
}
.joy-drawer__sub a:hover { background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------------------ *
 * Mobile — measured on the live site at the same clamped viewport:
 * reduced utility bar, HOME + hamburger nav, stacked hero pills,
 * one-per-view category rail, offers text dropped from the bottom bar.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Live mobile topbar: 390x71.19, with a 193.25px selector and a wrapping
     154.25px open/closed column. */
  .joy-utility { padding: 0; }
  .joy-utility__inner {
    display: grid;
    grid-template-columns: minmax(0, 193.25px) minmax(0, 1fr);
    column-gap: 22.5px;
    padding: 7.5px 10px;
  }
  .joy-utility__search,
  .joy-utility__order,
  .joy-utility__cart { display: none; }
  .joy-utility .joy-locutility__pill {
    width: auto;
    height: 56.19px;
    margin: 0;
    padding: 6px 12px;
    gap: 0;
  }
  .joy-utility .joy-locutility__icon { display: none; }
  .joy-utility .joy-locutility__pill-label { font-size: 11px; }
  .joy-locutility__select { font-size: 16px; }
  .joy-utility__info {
    display: flex;
    min-width: 0;
    width: auto;
    justify-content: center;
  }
  .joy-utility .joy-locutility__address { display: none; }
  .joy-utility .joy-utility__state {
    font-size: 16px;
    line-height: 1;
    overflow-wrap: normal;
  }

  .joy-nav__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--joy-white);
    font: inherit;
    font-weight: 700;
    font-size: 14px;              /* live's MENU label is 14px/700 */
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 10px;
  }
  .joy-nav__burger-lines,
  .joy-nav__burger-lines::before,
  .joy-nav__burger-lines::after {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--joy-white);
  }
  .joy-nav__burger-lines { position: relative; margin: 8px 0; }
  .joy-nav__burger-lines::before { position: absolute; top: -8px; }
  .joy-nav__burger-lines::after { position: absolute; top: 8px; }

  /* Hero pills stack, matching the live vertical layout. */
  .joy-hero__ctas { flex-direction: column; align-items: center; }
  /* live's pills hug their text (ORDER NOW 165px, DEALS 109px); forcing an
     equal 200px min-width made them read as a matched pair live never has */
  .joy-hero__pill { text-align: center; }

  /* Category circles: the live mobile shows one per view with chevrons —
     the mirror's no-JS equivalent is a swipeable snap rail. */
  .joy-circles {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0;
  }
  .joy-circles::-webkit-scrollbar { display: none; }
  .joy-circles li {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    scroll-snap-align: center;
  }

  /* Bottom bar drops the offers copy on mobile (measured live). */
  .joy-bottombar__offer { display: none; }
  .joy-bottombar { justify-content: flex-end; padding-right: 24px; }
}

/* ------------------------------------------------------------------ *
 * Store cards — hours are AUTHORITATIVE (harvested from Dutchie admin).
 * ------------------------------------------------------------------ */
.joy-stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.joy-store {
  background: var(--joy-white);
  border: 1px solid var(--joy-hairline);
  border-radius: var(--joy-radius-card);
  padding: 24px;
}
.joy-store h3 {
  margin: 0 0 8px;
  font-family: var(--joy-font-display);
  font-size: 20px;
  color: var(--joy-ink);
}
.joy-store address { font-style: normal; margin: 0 0 8px; }
.joy-store__phone { display: inline-block; margin: 0 0 12px; font-weight: 700; }
.joy-store table { border-collapse: collapse; margin: 0 0 16px; }
.joy-store td { padding: 2px 12px 2px 0; font-size: 15px; }
.joy-store td:first-child { font-weight: 700; }
.joy-store__shop {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
}
.joy-store__shop:hover { background: var(--joy-lime-hover); }

/* ------------------------------------------------------------------ *
 * Joyitudes teasers.
 * ------------------------------------------------------------------ */
/* (teaser card styles moved to the joy-joyband block — live card design) */

/* ------------------------------------------------------------------ *
 * Footer.
 * ------------------------------------------------------------------ */
/* Live's footer, measured from its own stylesheet + DOM (2026-08-21): an ink
   panel carved off the section above by a radial-gradient wave mask, a large
   white wordmark with four lime glyphs, and two link columns. */
/* Full-bleed like live's .container-fluid — NOT boxed to the 1240px page
   container; live's side padding steps 15 / 25 / 75px and its vertical
   padding scales with the responsive root size (72px mobile, 118.8px @1440). */
.joy-footer {
  position: relative;
  background: var(--joy-ink);
  color: var(--joy-white);
  padding: 72px 15px;
}
@media (min-width: 768px) { .joy-footer { padding: 72px 25px; } }
@media (min-width: 992px) { .joy-footer { padding: 108px 25px; } }
@media (min-width: 1200px) { .joy-footer { padding: 113.4px 25px; } }
@media (min-width: 1400px) { .joy-footer { padding: 129.6px 75px; } }
.joy-footer a { color: var(--joy-white); text-decoration: none; font-size: 19.2px; }

/* The credit strip live closes with — same ink, lime link. */
.joy-copyright {
  background: var(--joy-ink);
  color: var(--joy-white);
  text-align: center;
  padding: 13.2px 15px;
  font-size: 16px;
}
.joy-copyright a { color: var(--joy-lime); text-decoration: none; }
.joy-copyright a:hover { text-decoration: underline; }

/* The wave: live's exact technique — a 200px band lifted above the footer,
   flipped, its ink fill cut by two radial-gradient masks meeting at centre. */
.joy-footer__wave {
  position: absolute;
  top: -195px;
  left: 0;
  width: 100%;
  height: 200px;
  transform: scaleY(-1);
  pointer-events: none;
}
.joy-footer__wave::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--joy-ink);
  -webkit-mask:
    radial-gradient(100% 80% at top, #fff 79.5%, transparent 80%) left,
    radial-gradient(100% 80% at bottom, transparent 79.5%, #fff 80%) right;
  mask:
    radial-gradient(100% 80% at top, #fff 79.5%, transparent 80%) left,
    radial-gradient(100% 80% at bottom, transparent 79.5%, #fff 80%) right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 50.22% 100%;
  mask-size: 50.22% 100%;
}

/* bootstrap col-xl-5 / offset-xl-1 col-xl-3 / col-xl-3 */
.joy-footer__inner {
  max-width: none;                 /* live's footer is full-bleed */
  padding: 0;
  display: grid;
  grid-template-columns: 5fr 1fr 3fr 3fr;
  align-items: start;
  gap: 0;
}
.joy-footer__brand { grid-column: 1; }
.joy-footer__menu:nth-of-type(1) { grid-column: 3; }
.joy-footer__menu:nth-of-type(2) { grid-column: 4; }

/* Live caps the wordmark by WIDTH only (85% of its column), so it grows with
   the viewport — 443x133 at 1440, ~604px at 1920. A max-height cap here was
   pinning it at 384px on every screen. */
.joy-footer__wordmark {
  display: block;
  max-width: 85%;
  width: auto;
  height: auto;
}
.joy-footer__socials {
  display: flex;
  gap: 12px;
  margin: 16px 0 0;
}
.joy-footer__socials a { color: var(--joy-lime); line-height: 0; }
.joy-footer__socials svg { width: 26.4px; height: 26.4px; display: block; }
.joy-footer__socials a:hover { color: var(--joy-white); }

.joy-footer__menu ul { list-style: none; margin: 0; padding: 0; }
.joy-footer__menu li { padding-bottom: 7.5px; }
.joy-footer__menu li:last-of-type { padding-bottom: 0; }
.joy-footer__menu a {
  font-family: var(--joy-font-body);
  font-size: 19.2px;                /* live: 19.2px/400 (2026-08-24) */
  font-weight: 400;
  line-height: 28.8px;
}
.joy-footer__menu a:hover { color: var(--joy-lime); }

/* Short pages (the 404/fallback) have less body than the wave is tall, so the
   curve painted over the only escape link. Reserve the wave's height plus the
   copy itself. */
.joy-fallback { min-height: 60vh; padding-bottom: 260px; }

/* The wave overlaps the section above by 195px — that section has to give it
   room, or the curve eats content (live's own band carries the same slack). */
.joy-joyband,
main.joy-page,
main.joy-seo,
main.joy-blog,
main.joy-events,
main.joy-event { padding-bottom: 230px; }

@media (max-width: 1199px) {
  .joy-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
  }
  .joy-footer__brand,
  .joy-footer__menu:nth-of-type(1),
  .joy-footer__menu:nth-of-type(2) { grid-column: 1; }
  .joy-footer__socials { justify-content: center; }
  .joy-footer__wordmark { margin: 0 auto; max-height: 85px; }
}

/* ------------------------------------------------------------------ *
 * Interior pages — GRADIENT-NATIVE, matching the live interiors
 * (measured 2026-08-20 across /faqs/, /careers/, /contact/, /locations/,
 * /about/): white display titles at 48–90px directly on the gradient,
 * white body copy, white/lime blocks only where functional. The earlier
 * card-and-band shell was this theme's invention and did not match.
 * ------------------------------------------------------------------ */
.joy-page { padding: 40px 20px 64px; }
.joy-page__inner { max-width: 900px; margin: 0 auto; }

.joy-page__eyebrow {
  margin: 0;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 90px);
  line-height: 1;
  color: var(--joy-white);
  text-align: center;
  text-transform: lowercase;
}
.joy-page__title {
  margin: 8px 0 32px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48.8px);
  line-height: 1.12;
  color: var(--joy-white);
  text-align: center;
}
.joy-page__inner > p,
.joy-page__body p {
  color: var(--joy-white);
  margin: 0 0 16px;
}
.joy-page__inner h2 {
  margin: 40px 0 16px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 30.4px;
  color: var(--joy-white);
  text-align: center;
}
/*
 * White links are for prose sitting DIRECTLY on the gradient. This rule used
 * to apply to every link inside .joy-page__inner and was then walked back
 * card by card — and it drew blood three separate times: the careers email,
 * the per-store "Shop this store" pill, and the store phone numbers on
 * /locations/, each rendered white-on-white or white-on-lime at contrast 1.00
 * with nothing visible on screen.
 *
 * Inverted now: any link inside a light surface (:not() the known white/lime
 * cards) keeps ink by default, so a NEW white card added later inherits the
 * safe colour instead of silently swallowing its own text.
 */
.joy-page__inner a { color: var(--joy-white); font-weight: 700; }
.joy-page__inner .joy-form a,
.joy-page__inner .joy-form h2,
.joy-page__inner .joy-form h3,
.joy-page__inner .joy-form label,
.joy-page__inner .joy-form p,
.joy-page__inner .joy-storedetail__card a,
.joy-page__inner .joy-storedetail__card strong,
.joy-page__inner .joy-storedetail__card p,
.joy-page__inner .joy-storedetail__card li,
.joy-page__inner .joy-storebars a,
.joy-page__inner .joy-faq a,
.joy-page__inner .joy-card a { color: var(--joy-ink); }
.joy-page__inner a.joy-store__shop,
.joy-page__inner a.joy-btn-lime { color: var(--joy-ink); }

/* FAQ accordion — the live pattern: white bars, lime open header,
 * 26.4px black display-font questions. Native details/summary. */
.joy-faq details {
  background: var(--joy-white);
  border-radius: var(--joy-radius-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.joy-faq summary {
  cursor: pointer;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 26.4px);
  color: #000;
  padding: 18px 22px;
  list-style: none;
  position: relative;
}
.joy-faq summary::-webkit-details-marker { display: none; }
.joy-faq summary::after {
  content: "▾";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.joy-faq details[open] summary { background: var(--joy-lime); }
.joy-faq details[open] summary::after { content: "▴"; }
.joy-faq details > p {
  margin: 0;
  padding: 16px 22px 20px;
  color: var(--joy-text);
}
/* The imported location FAQs wrap their answer in .joy-faq__body, which this
   rule never matched — so those answers inherited the page's WHITE text onto
   a white panel and were invisible at contrast 1.00. That hid the compliance
   copy: purchase limits, cash-only, veteran discounts. */
.joy-faq__body {
  padding: 16px 22px 20px;
  color: var(--joy-text);
}
/* Two classes deep on purpose: `.joy-seo__body p { color: white }` lives later
   in this file at equal specificity, so a single-class rule here loses on
   source order and the answers stay invisible. */
.joy-faq .joy-faq__body p,
.joy-faq .joy-faq__body li { color: var(--joy-text); }
.joy-faq .joy-faq__body p:first-child { margin-top: 0; }
.joy-faq .joy-faq__body p:last-child { margin-bottom: 0; }
/* Three deep, and repeated for the anchors nested in paragraphs and lists:
   fixing the <p> colour alone left every LINK inside an answer lime-on-white
   at contrast 1.20 — the possession-limit law link, the support and careers
   emails, and all five loyalty-card links. A .joy-seo__body a rule later in
   the file was winning. */
.joy-faq .joy-faq__body a,
.joy-faq .joy-faq__body p a,
.joy-faq .joy-faq__body li a,
.joy-faq .joy-faq__body strong a,
.joy-faq .joy-faq__body em a {
  color: var(--joy-ink);
  font-weight: 700;
  text-decoration: underline;
}

/* Numbered store bars — the live /locations/ list. */
.joy-storebars { list-style: none; margin: 0 0 32px; padding: 0; }
.joy-storebars li {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--joy-white);
  border-radius: var(--joy-radius-card);
  padding: 18px 24px;
  margin-bottom: 14px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 26.4px);
  color: var(--joy-ink);
}
.joy-storebars .joy-storebars__num {
  font-size: 1.25em;
  color: transparent;
  -webkit-text-stroke: 2px var(--joy-ink);
}
.joy-storebars a { color: var(--joy-ink); text-decoration: none; }
.joy-storebars a:hover { text-decoration: underline; }

/* Embedded map. */
.joy-map {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--joy-radius-card);
  margin-bottom: 40px;
  display: block;
}

/* Per-store detail sections — lime heading on the gradient (measured
 * 30.4px #E1F651; large display text passes AA on the mid-gradient). */
.joy-storedetail { margin-bottom: 40px; }
.joy-storedetail h2 {
  margin: 0 0 12px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 30.4px;
  color: var(--joy-lime);
  text-align: left;
}
.joy-storedetail__card {
  background: var(--joy-white);
  border-radius: var(--joy-radius-card);
  padding: 22px 24px;
}
.joy-storedetail__card address { font-style: normal; margin: 0 0 8px; }
.joy-storedetail__card table { border-collapse: collapse; margin: 8px 0 14px; }
.joy-storedetail__card td { padding: 2px 12px 2px 0; font-size: 15px; }
.joy-storedetail__card td:first-child { font-weight: 700; }

/* Forms (contact + careers) — white blocks on the gradient, marked
 * slots until the real handler is wired at content-migration time. */
.joy-form {
  background: var(--joy-white);
  border-radius: var(--joy-radius-card);
  padding: 28px 24px;
  display: grid;
  gap: 16px;
}
.joy-form label {
  display: block;
  font-weight: 700;
  color: var(--joy-ink);
  margin-bottom: 4px;
}
.joy-form input,
.joy-form select,
.joy-form textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--joy-hairline);
  border-radius: var(--joy-radius);
  background: var(--joy-white);
  color: var(--joy-text);
}
.joy-form textarea { min-height: 120px; resize: vertical; }
.joy-form__submit {
  justify-self: start;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 14px 36px;
  min-height: 44px;
  cursor: pointer;
}
.joy-form__submit:hover { background: var(--joy-lime-hover); }
.joy-form__note { font-size: 13px; color: var(--joy-muted-ink); margin: 0; }

/* ------------------------------------------------------------------ *
 * /about hero — diagonal circle collage left, left-aligned display
 * text + white pill right. Circle crops are baked into the PNGs.
 * Positions echo the measured live offsets (269/236/194px circles,
 * staggered down-right then down-left).
 * ------------------------------------------------------------------ */
.joy-about-hero {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr);
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 48px;
}
.joy-about-hero__art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
}
.joy-about-hero__art img { position: absolute; height: auto; }
.joy-about-hero__cat     { width: 48%; top: 0;   left: 4%; }
.joy-about-hero__breathe { width: 42%; top: 27%; left: 50%; }
.joy-about-hero__smoke   { width: 35%; top: 61%; left: 21%; }

.joy-about-hero__text h1 { margin: 0 0 28px; }
.joy-about-hero__eyebrow {
  display: block;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 90px);
  line-height: 1;
  color: var(--joy-white);
  text-transform: lowercase;
}
.joy-about-hero__title {
  display: block;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 48.8px);
  line-height: 1.12;
  color: var(--joy-white);
}
.joy-btn-white {
  display: inline-block;
  background: var(--joy-white);
  color: var(--joy-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
}
.joy-btn-white:hover { background: var(--joy-lime); }

.joy-about-body__lede {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 48.8px);
  line-height: 1.12;
  color: var(--joy-white);
  margin: 0 0 24px;
}
/* `max-width: 418px` is wider than a phone, and max-width beats the global
   img rule — so this ran 48px past the viewport at 390. */
.joy-about-wordmark { margin-top: 48px; width: 100%; max-width: 418px; height: auto; }

@media (max-width: 767px) {
  .joy-about-hero { grid-template-columns: 1fr; gap: 8px; }
  .joy-about-hero__art { max-width: 340px; margin: 0 auto; }
  .joy-about-hero__text { text-align: center; }
}

/* ------------------------------------------------------------------ *
 * Joyitudes blog — the one WHITE section of the site (measured live:
 * white page, white nav with ink links, stacked editorial entries with
 * a rainbow divider, tag chips, OUR PRODUCTS gradient sidebar).
 * ------------------------------------------------------------------ */
body.blog,
body.single-post,
body.archive {
  background-color: var(--joy-white);
  background-image: none;
}
/* CORRECTED 2026-08-21. `#site-topbar` on live is NOT the top utility bar —
   `.header-topbar{position:fixed;bottom:0}` — it is the white 44px strip at the
   BOTTOM holding the theme toggle, the offers link and View Cart. So live's
   `.single-post #site-topbar{display:none}` hides the BOTTOM bar on editorial
   pages (taking the toggle with it), and leaves the store-context bar visible.
   An earlier pass in this session read that rule as the top bar and hid the
   wrong element. Live's `#site-navigation` rules are dead CSS too: the <nav>
   carries a duplicate id and resolves to `fixed-nav`, so the white background
   and drop shadow those rules describe never actually paint. */
/* Same list as the burger: the events templates are white surfaces too. The
   bar was floating white-on-white over the article with an empty middle cell,
   and its theme toggle did nothing there (white pages ignore joy-night). */
body.blog .joy-bottombar,
body.single-post .joy-bottombar,
body.archive .joy-bottombar,
body.page-template-page-blog .joy-bottombar,
body.page-template-page-events .joy-bottombar,
body.single-event .joy-bottombar,
body.blog .joy-themetoggle,
body.single-post .joy-themetoggle,
body.archive .joy-themetoggle,
body.page-template-page-blog .joy-themetoggle,
body.page-template-page-events .joy-themetoggle,
body.single-event .joy-themetoggle { display: none; }

body.blog .joy-nav,
body.single-post .joy-nav,
body.archive .joy-nav {
  background: var(--joy-white);
}
body.blog .joy-nav__inner a,
body.single-post .joy-nav__inner a,
body.archive .joy-nav__inner a {
  color: var(--joy-ink);
}
body.blog .joy-nav__inner a[aria-current="page"],
body.single-post .joy-nav__inner a[aria-current="page"],
body.archive .joy-nav__inner a[aria-current="page"] {
  /* Lime fails on white — the ink nav rule inverts here: current page
     gets the savings green, the site's AA-legal green on white. */
  color: var(--joy-savings);
}
/* Every WHITE surface needs the ink burger. The events templates were left
   off this list, so on a phone their MENU button was white on white — the
   only way into the nav, invisible (it still worked, which made it worse). */
body.blog .joy-nav__burger,
body.single-post .joy-nav__burger,
body.archive .joy-nav__burger,
body.page-template-page-blog .joy-nav__burger,
body.page-template-page-events .joy-nav__burger,
body.single-event .joy-nav__burger { color: var(--joy-ink); }
body.blog .joy-nav__burger-lines,
body.blog .joy-nav__burger-lines::before,
body.blog .joy-nav__burger-lines::after,
body.single-post .joy-nav__burger-lines,
body.single-post .joy-nav__burger-lines::before,
body.single-post .joy-nav__burger-lines::after,
body.archive .joy-nav__burger-lines,
body.archive .joy-nav__burger-lines::before,
body.archive .joy-nav__burger-lines::after,
body.page-template-page-blog .joy-nav__burger-lines,
body.page-template-page-blog .joy-nav__burger-lines::before,
body.page-template-page-blog .joy-nav__burger-lines::after,
body.page-template-page-events .joy-nav__burger-lines,
body.page-template-page-events .joy-nav__burger-lines::before,
body.page-template-page-events .joy-nav__burger-lines::after,
body.single-event .joy-nav__burger-lines,
body.single-event .joy-nav__burger-lines::before,
body.single-event .joy-nav__burger-lines::after { background: var(--joy-ink); }
body.blog.is-open .joy-nav__links { background: var(--joy-white); }

.joy-blog { padding: 40px 20px 64px; }
/* Live runs the listing on a 3:1 split, fluid on the blog templates and
   capped at 1320 on archives — not the mirror's old 1240 + fixed 280px. */
.joy-blog__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 24px;
  max-width: var(--joy-max-width);
  margin: 0 auto;
}
/* Measured off live at 1440: 48px page gutter, a 75/25 split (main 1007,
   sidebar 336) and NO grid gap — the gutter between cards comes from padding
   INSIDE each card, which is also why live's artwork sits 13.2px in from the
   card edge. These are desktop numbers; at phone width a 48px gutter would
   eat a third of the screen, so it only applies once there is room. */
@media (min-width: 768px) {
  .joy-blog--fluid .joy-blog__grid {
    max-width: none;
    /* .joy-blog already contributes 20px, so 28 here lands live's 48px inset */
    padding: 0 28px;
    gap: 0;
  }
  .joy-blog--fluid .joy-cardgrid { padding: 0 13.2px; }
}
.joy-blog--archive .joy-blog__grid { max-width: 1320px; }
.joy-blog--archive .joy-archive__title,
.joy-blog--fluid .joy-archive__title { max-width: 1320px; margin-inline: auto; }

.joy-entry { margin-bottom: 56px; }
.joy-entry__media img { display: block; width: 100%; height: auto; }
.joy-entry__meta {
  display: flex;
  gap: 24px;
  margin: 16px 0 10px;
  color: var(--joy-muted-ink);
  font-size: 15px;
  font-weight: 700;
}
.joy-entry__rainbow {
  height: 3px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #EE3E80 0%, #F8A01B 35%, #F2E13B 65%, #5BC6C2 100%);
}
.joy-entry__title {
  margin: 0 0 12px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 30.4px);
  line-height: 1.2;
}
.joy-entry__title a { color: var(--joy-ink); text-decoration: none; }
.joy-entry__title a:hover { text-decoration: underline; }
.joy-entry__excerpt { margin: 0 0 16px; color: var(--joy-text); }
.joy-entry__excerpt a { color: var(--joy-ink); font-weight: 700; }
.joy-entry__content { color: var(--joy-text); }
.joy-entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.joy-entry__tags a {
  background: #EFEFEF;
  color: var(--joy-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 999px;
}
.joy-entry__tags a:hover { background: var(--joy-lime); color: var(--joy-ink); }

/* ------------------------------------------------------------------ *
 * Single post — live's hero band, breadcrumbs and body (measured
 * 2026-08-21). The featured image is the band's background, never an
 * inline image; there is no rainbow divider on singles.
 * ------------------------------------------------------------------ */
.joy-posthero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--joy-ink);
  padding: 264px 75px 118.8px;
  text-align: center;
  color: var(--joy-white);
}
/* Live steps this down on a phone: 240px 15px 108px. Holding the desktop
   75px side padding squeezed the title into a 240px box, so it broke one
   word per line; live gives it 360px and the same headline fits far better. */
@media (max-width: 767px) {
  .joy-posthero { padding: 240px 15px 108px; }
  /* two classes: the base .joy-posthero__title rule sits LATER in this file,
     so a single-class override here loses on source order */
  .joy-posthero .joy-posthero__title { font-size: 48.83px; line-height: 48.83px; }
}
.joy-posthero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.joy-posthero__inner { position: relative; max-width: 1000px; margin: 0 auto; }

.joy-posthero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 26.4px;
}
.joy-tag {
  background: rgba(255, 255, 255, 0.5);
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
  padding: 4px 10px;
  margin-right: 26.4px;     /* live spaces pills with a right margin, not gap */
  border-radius: 20px;
}
.joy-tag:last-child { margin-right: 0; }
.joy-tag:hover { background: var(--joy-white); }

.joy-posthero__title {
  margin: 0;
  padding: 6.6px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 53.72px;
  line-height: 53.72px;
  color: var(--joy-white);
}
.joy-posthero__meta {
  margin: 13.2px 0 0;
  font-style: italic;
  font-size: 17.6px;
  line-height: 26.4px;
  color: var(--joy-white);
}
.joy-posthero__meta span { display: block; }

/* Lives inside the post column so it aligns with the copy below it. */
.joy-crumbs { margin: 0 0 26.4px; font-size: 14px; }
.joy-crumbs a { color: #b3b3b3; font-weight: 400; text-decoration: none; }
.joy-crumbs a:hover { text-decoration: underline; }
.joy-crumbs span[aria-hidden] { padding: 0 5px; color: #b3b3b3; }

.joy-postpage { padding-bottom: 230px; }
/* Same spine as the footer: live runs both at 1290 starting x=75. */
.joy-postpage .joy-blog__grid { max-width: none; padding: 0 75px; }

/* The archive heading sits INSIDE the grid, so it has to span both columns —
   without this it eats the content column and pushes the cards under the
   sidebar's width. */
.joy-archive__title {
  grid-column: 1 / -1;
  margin: 0 0 28px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 34.37px;
  line-height: 41.25px;
  color: var(--joy-ink);
}

/* ------------------------------------------------------------------ *
 * Listing grid — live lays the cards TWO-UP with a 26.4px gutter, and
 * on the blog templates (not archives) the FIRST card spans the full
 * width. The mirror had been stacking them one per row.
 * ------------------------------------------------------------------ */
.joy-cardgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;                 /* the gutter is card padding, as on live */
  row-gap: 40px;
  align-items: start;
}
.joy-card { padding: 0 13.2px; }
.joy-cardgrid--lead > .joy-card:first-child { grid-column: 1 / -1; }
.joy-cardgrid .navigation { grid-column: 1 / -1; }

.joy-card__media { display: block; margin-bottom: 16px; }
.joy-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  cursor: pointer;
}

.joy-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 10px;
  color: #bcbcbc;
  font-size: 15px;
  font-weight: 700;
}
.joy-card__meta span { display: inline-flex; align-items: center; }
.joy-card__meta svg { width: 15px; height: 15px; margin-right: 6px; }

/* The gradient rule runs cyan -> pink, and only under the lead card. */
.joy-card__meta--rainbow::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 10px 0;
  background: linear-gradient(90deg, #50C7EA, #B8D663 25.99%, #F4E81C 67.7%, #F05D4C 87.13%, #E93794);
}
.joy-card__meta--rainbow { flex-wrap: wrap; }

.joy-card__title {
  margin: 0 0 18.48px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 34.37px;
  line-height: 41.25px;
}
.joy-card__title a { color: var(--joy-ink); text-decoration: none; }
.joy-card__title a:hover { text-decoration: underline; }

.joy-card__excerpt {
  margin: 0;
  color: #000;
  font-size: 16px;
  line-height: 24px;
}
/* live's "… Continued" is part of the excerpt text, not a styled link */
/* live drops archive excerpts to grey; the blog templates keep them black */
.joy-blog--archive .joy-card__excerpt { color: #606060; }

@media (max-width: 767px) {
  .joy-cardgrid { grid-template-columns: minmax(0, 1fr); }
  .joy-card__title { font-size: 26px; line-height: 32px; }
}
.joy-postbody { color: #606060; font-size: 17.6px; line-height: 26.4px; }
/* live's inline links are bold and undecorated, not underlined */
.joy-postbody p a { color: #53bee1; font-weight: 700; text-decoration: none; }
.joy-postbody p a:hover { text-decoration: underline; }
.joy-postbody img { border-radius: 6px; }
.joy-rule {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
  margin: 17.6px 0;
}
/* Closing chips are CATEGORIES on live — tags belong in the hero. */
.joy-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.joy-cats a {
  display: inline-flex;
  background: #d9d9d9;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  padding: 1px 12px;
  border-radius: 2rem;
}
.joy-cats a:hover { background: var(--joy-lime); }

/* Sidebar widgets (both variants) */
.joy-widget {
  border-bottom: 3px solid var(--joy-white);
  padding: 1rem 0;
  margin-bottom: 1rem;
}
.joy-widget:last-child { border-bottom: 0; margin-bottom: 0; }
.joy-widget--pill {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 13px;
}
/* live: full-width field with a LIME pill submit stacked beneath it */
.joy-widget--search { border-bottom: 0; }
.joy-widget--search form { display: flex; flex-direction: column; gap: 8px; }
.joy-widget--search input[type="search"] {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
}
.joy-widget--search button {
  width: 100%;
  border: 0;
  border-radius: 880px;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font: inherit;
  font-size: 17.6px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 20px;
  cursor: pointer;
}
.joy-widget--search button:hover { background: var(--joy-white); }

/* Live's own stylesheet carries this gradient exactly — the previous value
   here was a 4-stop eyeball approximation of a 5-stop ramp, so the middle of
   the panel read orange/yellow where live reads red then yellow then lime. */
.joy-blogside__panel {
  background: linear-gradient(180deg, #e93794, #f05d4c 25.99%, #f4e81c 67.7%, #b8d663 87.13%, #50c7ea);
  border-radius: var(--joy-radius-card);
  padding: 0.75rem 1rem;
  width: 98%;
  margin: 0 auto;
}
/* Measured off live: 2px tracking on the heading, no gap under it; list rows
   separated on the BOTTOM edge at .25 alpha (the mirror had them on the top
   edge at .4); links are inline weight-400 with no padding of their own. */
.joy-blogside__panel h2 {
  margin: 0;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--joy-white);
}
.joy-blogside__panel ul { list-style: none; margin: 0; padding: 0; }
.joy-blogside__panel { border-radius: 20px; }
.joy-blogside__panel li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.75rem 0;
  margin: 6px 0;
  text-transform: uppercase;
  font-size: 14px;
}
.joy-blogside__panel li:last-child { border-bottom: 0; }
/* The rules and the uppercase belong to the OUR PRODUCTS panel only — live's
   categories and recent-posts lists are plain sentence-case rows. */
.joy-widget:not(.joy-widget--pill) li {
  border-bottom: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
}
.joy-widget:not(.joy-widget--pill) a { text-transform: none; }
.joy-blogside__panel a {
  display: inline;
  color: var(--joy-white);
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  padding: 0;
}
.joy-blogside__panel a:hover { opacity: 0.65; }

/* Live stacks the blog sidebar below the content at Bootstrap's lg edge
   (<=991px), not at 768. Holding it beside the copy for another 224px left
   the two-up cards squeezed into a column a third too narrow. The CARD grid
   stays two-up here — live keeps it — only the sidebar drops. Gutters step
   down with it: live runs 48px at desktop, 25px at 768 and 15px on phones. */
@media (max-width: 991.98px) {
  .joy-blog__grid { grid-template-columns: minmax(0, 1fr); }
  .joy-blog { padding: 40px 12px 64px; }
  .joy-blog--fluid .joy-blog__grid { padding: 0; }
  .joy-postpage .joy-blog__grid { padding: 0 12px; }
}
@media (max-width: 575.98px) {
  .joy-blog { padding: 40px 15px 64px; }
  .joy-blog--fluid .joy-cardgrid,
  .joy-cardgrid { padding: 0; }
  .joy-postpage .joy-blog__grid { padding: 0 15px; }
}

@media (max-width: 767px) {
}

/* Lime step pills (how-to-order) — restyled for the gradient context. */
.joy-steps { list-style: none; counter-reset: joy-step; margin: 0; padding: 0; }
.joy-steps li {
  counter-increment: joy-step;
  background: var(--joy-white);
  border-radius: var(--joy-radius-card);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.joy-steps li::before {
  content: "step " counter(joy-step);
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
}
.joy-steps h3 { margin: 0 0 4px; font-family: var(--joy-font-display); font-size: 20px; color: var(--joy-ink); }
.joy-steps p { margin: 0; color: var(--joy-text); }

/* ------------------------------------------------------------------ *
 * Age gate — 21+, blocking, accessible.
 * ------------------------------------------------------------------ */
/* Full-bleed gate on the theme gradient — live's design (verified in the
 * day-mode captures): lowercase display title + translucent circles. */
.joy-agegate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  background-image: linear-gradient(#EE4405, #F14FAB 50%, #F25E88 80%, #F25E88);
  padding: 20px;
  text-align: center;
}
body.joy-night .joy-agegate { background-image: var(--joy-gradient); }
.joy-agegate[hidden] { display: none; }
.joy-agegate__card { display: contents; }
.joy-agegate__logo, .joy-agegate__card p { display: none; }
.joy-agegate__card h2 {
  margin: 0;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  text-transform: lowercase;
  color: var(--joy-white);
}
.joy-agegate__actions { display: flex; gap: 18px; justify-content: center; }
.joy-agegate__yes {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--joy-white);
  border-radius: 50%;
  width: 196px;
  height: 196px;
  font-family: var(--joy-font-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}
.joy-agegate__yes:hover { background: rgba(255, 255, 255, 0.45); }
.joy-agegate__no {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--joy-white);
  border-radius: 50%;
  width: 196px;
  height: 196px;
  font-family: var(--joy-font-display);
  font-size: 34px;
  font-weight: 700;
  text-transform: lowercase;
  cursor: pointer;
}
.joy-agegate__no:hover { background: rgba(255, 255, 255, 0.45); }
@media (max-width: 600px) {
  .joy-agegate__yes, .joy-agegate__no { width: 140px; height: 140px; font-size: 26px; }
}

/* The day/night toggle — live's slider, which lives INSIDE the bottom bar's
   left column (not floating above it). Measured live 1440x900: 55x28, radius
   34px, shadow 0 0 20px -10px #222; ORANGE in day, INK in night; the knob is
   WHITE in both states and slides 24px; exactly one glyph shows at a time. */
.joy-themetoggle {
  position: relative;
  flex: 0 0 auto;
  width: 55px;
  height: 28px;
  background: var(--joy-orange);
  border: 1px solid var(--joy-orange);
  border-radius: 34px;
  box-shadow: 0 0 20px -10px #222;
  cursor: pointer;
  padding: 0;
}
body.joy-night .joy-themetoggle {
  background: var(--joy-ink);
  border-color: var(--joy-ink);
}
/* `content: ;` here was invalid CSS, so the knob never painted at all and the
   pill read as broken. It needs an empty STRING. */
.joy-themetoggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: var(--joy-white);
  transition: transform 0.2s ease;
}
body.joy-night .joy-themetoggle::after { transform: translateX(24px); }

.joy-themetoggle span {
  position: absolute;
  top: 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--joy-white);
  transition: opacity 0.2s ease;
}
.joy-themetoggle .joy-themetoggle__moon { left: 6px; opacity: 0; }
.joy-themetoggle .joy-themetoggle__sun { right: 6px; opacity: 1; }
body.joy-night .joy-themetoggle .joy-themetoggle__moon { opacity: 1; }
body.joy-night .joy-themetoggle .joy-themetoggle__sun { opacity: 0; }

/* Joyitudes — live's white post cards on the mint band. */
/* Live's `.gradient-bottom` — mint fading to teal, not a flat mint. Bottom
   padding clears the footer wave, which is lifted 195px into whatever sits
   above it; without the slack the curve cuts through the post cards. */
.joy-joyband {
  background: linear-gradient(180deg, #CDEDB7 0, #84CAC8 100%);
  padding: 56px 20px 230px;
}
body.joy-night .joy-joyband {
  background: linear-gradient(180deg, #4788A1 0, #A1CC5F 65%);
}
.joy-joyband .joy-title { margin-bottom: 18.48px; }
/* Live's joyitudes cards (hydrated state, measured 2026-08-24): a carousel
   of 485×563 cards — radius 20, 30px soft shadow, 287px-tall art, 24px ink
   title, 19.2px black excerpt, 16.8px pill — and NO date/author meta. The
   mirror renders the at-rest frame: three full cards. */
.joy-posts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1513px;                /* 3×485 + 2×29 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 29px;
}
.joy-post {
  background: var(--joy-white);
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.joy-post__media img { width: 100%; display: block; aspect-ratio: 485 / 287; object-fit: cover; }
.joy-post__body { padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.joy-post h3 { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.3; }
.joy-post h3 a { color: var(--joy-ink); text-decoration: none; }
.joy-post h3 a:hover { text-decoration: underline; }
.joy-post p { margin: 0; color: #000; font-size: 19.2px; font-weight: 400; }
.joy-post__more {
  align-self: flex-start;
  margin-top: auto;
  background: var(--joy-orange);
  color: var(--joy-white);
  font-size: 16.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: 960px;
  padding: 19.2px 19.2px 13.44px;
}
.joy-post__more:hover { opacity: 0.9; }
@media (max-width: 1023px) {
  .joy-posts { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

/* ------------------------------------------------------------------
 * SEO landing pages (brands + strains) — measured live 2026-08-20 on
 * /brands/stiiizy/ and /sativa-cannabis-strains/: centred 51.3px title,
 * content column + 285px lime-outlined Our Products panel, 25px gap;
 * left-aligned 41px H2s, lime links, lime SHOP NOW pill (radius 9px).
 * ------------------------------------------------------------------ */
.joy-seo { padding: 40px 20px 80px; }
.joy-seo__title {
  max-width: 1240px;
  margin: 0 auto 56px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 51.3px);
  line-height: 1.2;
  color: var(--joy-white);
  text-align: center;
}
.joy-seo__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 25px;
  align-items: start;
}
.joy-seo__grid--wide { grid-template-columns: minmax(0, 1fr); }

.joy-seo__body { color: var(--joy-white); }
.joy-seo__body h2 {
  margin: 34px 0 17.6px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 41px);
  line-height: 1.2;
  color: var(--joy-white);
  text-align: left;
}
.joy-seo__body h2:first-child { margin-top: 0; }
.joy-seo__body h3 {
  margin: 28px 0 14px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--joy-white);
}
.joy-seo__body p,
.joy-seo__body li {
  font-size: 16.8px;
  line-height: 1.5;
  color: var(--joy-white);
}
.joy-seo__body p { margin: 0 0 21px; }
.joy-seo__body ul,
.joy-seo__body ol { margin: 0 0 21px; padding-left: 24px; }
.joy-seo__body li { margin-bottom: 6px; }
.joy-seo__body a:not(.btn) { color: var(--joy-lime); font-weight: 700; text-decoration: none; }
.joy-seo__body a:not(.btn):hover { text-decoration: underline; }

/* The imported "Shop Now" button (live .btn.btn-primary). */
.joy-seo__body .btn {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-family: var(--joy-font-body);
  font-size: 16.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 15px;
  border-radius: 9px;
}
.joy-seo__body .btn:hover { background: var(--joy-lime-hover); text-decoration: none; }

/* Imported inline images (jeeter/muha-meds product shots on the gradient). */
.joy-seo__body img { max-width: 100%; height: auto; }
.joy-seo__body img.aligncenter { display: block; margin: 24px auto; }
.joy-seo__body img.alignnone { margin: 12px 24px 12px 0; }
.joy-seo__body img.bodyimgright { float: right; margin: 0 0 20px 24px; max-width: 45%; }

/* Our Products panel — lime outline, translucent white fill. */
.joy-pageside__panel {
  border: 1px solid var(--joy-lime);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}
.joy-pageside__panel h2 {
  margin: 0;
  padding: 24px 16px 20px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 32.8px;
  color: var(--joy-white);
  text-align: center;
}
.joy-pageside__panel ul { list-style: none; margin: 0; padding: 0 0 8px; }
.joy-pageside__panel li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12.6px 10px;
  text-align: center;
}
.joy-pageside__panel li:last-child { border-bottom: 0; }
.joy-pageside__panel a {
  color: var(--joy-lime);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.joy-pageside__panel a:hover { text-decoration: underline; }

@media (max-width: 999px) {
  .joy-seo__grid { grid-template-columns: minmax(0, 1fr); }
  .joy-pageside { max-width: 420px; }
  .joy-seo__body img.bodyimgright { float: none; margin: 24px auto; display: block; max-width: 100%; }
  /* .alignnone keeps a 24px RIGHT margin from live's markup; on a full-width
     phone image that margin is what pushes the page past the viewport. */
  .joy-seo__body img.alignnone { display: block; margin: 12px auto; }
}

/* ------------------------------------------------------------------
 * Cannabis-products category pages — measured live 2026-08-20 on
 * /cannabis-products/ and /cannabis-products/flower/: alternating
 * circle rows, ghost pills (rgba-white .4, radius 840px, ls 2px),
 * 385px hero circle, soft-white Our Products panel (white 20px links).
 * ------------------------------------------------------------------ */
.joy-btn-ghost {
  display: inline-block;
  background: rgba(255, 255, 255, 0.4);
  color: var(--joy-white);
  font-family: var(--joy-font-body);
  font-size: 16.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 21px 25.2px 16.8px;
  border-radius: 840px;
}
.joy-btn-ghost:hover { background: rgba(255, 255, 255, 0.55); }

.joy-btn-limepill {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-family: var(--joy-font-body);
  font-size: 16.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 21px 25.2px 16.8px;
  border-radius: 840px;
}
.joy-btn-limepill:hover { background: var(--joy-lime-hover); }

/* Index rows — image circle one side, name + pills the other, alternating. */
.joy-catrows { max-width: 1240px; margin: 0 auto; }
.joy-catrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
}
.joy-catrow__img {
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  justify-self: center;
}
.joy-catrow:nth-child(even) .joy-catrow__img { order: 2; }
.joy-catrow__title {
  margin: 0 0 28px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 57px);
  color: var(--joy-white);
}
.joy-catrow__btns { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }

/* Collapsed read-more block at the foot of the index. */
.joy-catmore { max-width: 1240px; margin: 48px auto 0; text-align: center; }
.joy-catmore > div { text-align: left; margin-top: 32px; }
.joy-catmore p { color: var(--joy-white); font-size: 16.8px; line-height: 1.5; margin: 0 0 21px; }
.joy-catmore a { color: var(--joy-lime); font-weight: 700; text-decoration: none; }
.joy-catmore a:hover { text-decoration: underline; }

/* Builder-child hero — circle left, title + ghost pill right. */
.joy-cathero {
  max-width: 1240px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.joy-cathero__img {
  width: min(100%, 385px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  justify-self: center;
}
.joy-cathero__title {
  margin: 0 0 32px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 51.3px);
  line-height: 1.2;
  color: var(--joy-white);
  text-align: left;
}

/* Our Products panel, category variant — soft white card, white links. */
.joy-catside__panel {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  padding: 24px 22px;
}
.joy-catside__panel h2 {
  margin: 0 0 16px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 32.8px;
  color: var(--joy-white);
  text-align: left;
}
.joy-catside__panel ul { list-style: none; margin: 0; padding: 0; }
.joy-catside__panel li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 0;
}
.joy-catside__panel li:last-child { border-bottom: 0; }
.joy-catside__panel a {
  color: var(--joy-white);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}
.joy-catside__panel a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .joy-catrow,
  .joy-cathero { grid-template-columns: 1fr; gap: 20px; }
  .joy-catrow:nth-child(even) .joy-catrow__img { order: 0; }
  .joy-catrow__img { width: min(100%, 300px); }
  .joy-cathero__img { width: min(100%, 280px); }
}

/* ------------------------------------------------------------------
 * Cannabis 101 family (/cannabis/ + 6 children) — measured live
 * 2026-08-20: 50.8px left H2s, testimonial rail card with the gradient
 * logo bubble + review cycler, 3-up circle CTA band on every page.
 * ------------------------------------------------------------------ */
.joy-cann__body h2 { font-size: clamp(30px, 4vw, 50.8px); }
/* This family's rail is the Bootstrap col-4 (~385px), wider than the
 * 285px Our Products rail. */
.joy-cann__grid { grid-template-columns: minmax(0, 1fr) 385px; }
@media (max-width: 999px) { .joy-cann__grid { grid-template-columns: minmax(0, 1fr); } }

.joy-cannrail { padding-top: 85px; }
.joy-cannrail__card {
  position: relative;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 13px;
  padding: 100px 26px 30px;
}
.joy-cannrail__bubble {
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: linear-gradient(140deg, #A1CC5F 0%, #7EB59B 55%, #4788A1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.joy-cannrail__bubble img { width: 62%; height: auto; }
.joy-cannrail__slide { margin: 0; }
.joy-cannrail__slide p {
  color: var(--joy-white);
  font-size: 20.8px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.joy-cannrail__slide strong {
  display: block;
  color: var(--joy-white);
  font-size: 20.8px;
  text-align: center;
}
.joy-cannrail__arrow {
  position: absolute;
  top: 55%;
  background: transparent;
  border: 0;
  color: var(--joy-white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.joy-cannrail__arrow--prev { left: -4px; }
.joy-cannrail__arrow--next { right: -4px; }
.joy-cannrail__arrow:hover { color: var(--joy-lime); }

.joy-cannband {
  max-width: 1240px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.joy-cannband__item img {
  width: min(100%, 225px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.joy-cannband__item h2 {
  margin: 24px 0 20px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 41px);
  color: var(--joy-white);
}
.joy-cannband__item p { margin: 0; }

@media (max-width: 767px) {
  .joy-cannband { grid-template-columns: 1fr; gap: 48px; }
  .joy-cannrail { padding-top: 100px; max-width: 420px; }
}

/* ------------------------------------------------------------------
 * Daily Deals — measured live 2026-08-20: 50.8px white subtitle, white
 * location cards (20px radius, 31px padding, 40.6px ink names, 16px
 * line icons), lime btn-sm pills (18.2px, radius 1040), prose tail.
 * ------------------------------------------------------------------ */
.joy-deals__sub {
  max-width: 1240px;
  margin: -24px auto 48px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50.8px);
  color: var(--joy-white);
  text-align: center;
}
.joy-deals__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 34px;
  align-items: start;
}
.joy-deals__card {
  background: var(--joy-white);
  border-radius: 20px;
  padding: 31px 31px 16px;
}
.joy-deals__card h2 {
  margin: 0 0 12px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40.6px);
  color: var(--joy-ink);
}
.joy-deals__line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--joy-ink);
  font-size: 16.8px;
  line-height: 1.4;
}
.joy-deals__line svg { flex: 0 0 auto; margin-top: 3px; }
.joy-deals__line--phone { font-weight: 700; }
.joy-deals__cta { margin: 18px 0 8px; }
.joy-deals__btn {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-family: var(--joy-font-body);
  font-size: 18.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 20.8px 20.8px 14.56px;
  border-radius: 1040px;
}
.joy-deals__btn:hover { background: var(--joy-lime-hover); }
.joy-deals__prose { margin-top: 64px; }

/* ------------------------------------------------------------------
 * Location microsites (/location/<store>/...) — measured live
 * 2026-08-20: store topbar (pill + address), store nav, breadcrumb
 * bottom bar with lime action pills, store-card rail, hub layouts.
 * ------------------------------------------------------------------ */
.joy-locutility__pill {
  display: inline-flex;
  flex-direction: column;
  background: var(--joy-lime);
  border-radius: 10px;
  padding: 6px 26px 6px 12px;
  line-height: 1.2;
}
.joy-locutility__pill-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #3a5f18;
}
.joy-locutility__pill-name { font-weight: 700; color: var(--joy-ink); font-size: 15px; }
.joy-locutility__address { color: var(--joy-white); font-weight: 700; font-size: 15px; }

/* Homepage/global header store control. Live hydrates a native select inside
   the yellow pill; keeping it native preserves keyboard and mobile picker UX. */
.joy-utility .joy-locutility__pill {
  flex: 0 0 303.58px;
  width: 303.58px;
  height: 55.39px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-right: 27.5px;
  padding: 0 10px;
}
.joy-locutility__icon {
  display: inline-flex;
  flex: 0 0 35.39px;
  width: 35.39px;
  height: 32px;
  color: var(--joy-ink);
}
.joy-locutility__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.joy-locutility__control { display: block; flex: 1; min-width: 0; }
.joy-utility .joy-locutility__pill-label {
  display: block;
  font-size: clamp(11px, 0.65vw, 12.5px);
  line-height: 1.05;
  color: var(--joy-ink);
}
.joy-locutility__select {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0 3px 0 0;
  border: 0;
  outline-offset: 2px;
  background: transparent;
  color: var(--joy-ink);
  font: 700 clamp(16px, 1vw, 19.2px)/1.2 var(--joy-font-body);
  cursor: pointer;
}
.joy-utility .joy-locutility__address,
.joy-utility .joy-utility__state {
  display: block;
  color: var(--joy-white);
  font-size: clamp(16px, 1vw, 19.2px);
  font-weight: 700;
  line-height: 1.2;
}

.joy-locnav .joy-nav__group a { white-space: nowrap; }

.joy-btn-lime {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-family: var(--joy-font-body);
  font-size: 16.8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 21px 25.2px 16.8px;
  border-radius: 840px;
}
.joy-btn-lime:hover { background: var(--joy-lime-hover); }

/* Store-card rail (bubble-over-card, like the Cannabis-101 rail). */
.joy-locrail { padding-top: 95px; }
.joy-locrail__card {
  position: relative;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  padding: 110px 26px 24px;
}
.joy-locrail__bubble {
  position: absolute;
  top: -95px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
}
.joy-locrail__card h2 {
  margin: 0 0 14px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: 32.8px;
  color: var(--joy-white);
}
.joy-locrail__addr {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--joy-white);
  font-size: 16.8px;
  line-height: 1.45;
  margin: 0 0 18px;
}
.joy-locrail__addr svg { flex: 0 0 auto; margin-top: 3px; color: var(--joy-lime); }
.joy-locrail__addr a { color: var(--joy-white); font-weight: 700; }
.joy-locrail__card hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); margin: 16px 0; }
.joy-locrail__socials { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.joy-locrail__socials a { color: var(--joy-lime); font-weight: 700; font-size: 14px; text-decoration: none; }
.joy-locrail__socials a:hover { text-decoration: underline; }

/* Breadcrumb bottom bar — white, fixed, crumbs + action pills. */
.joy-locbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--joy-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 18px;
  font-size: 14px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.joy-locbar__crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.joy-locbar__crumbs a,
.joy-locbar__here {
  color: var(--joy-orange);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-size: 13px;
}
.joy-locbar__crumbs span[aria-hidden] { color: var(--joy-muted-ink); }
.joy-locbar__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.joy-locbar__shopping { color: var(--joy-orange); font-weight: 700; font-size: 13px; }
.joy-locbar__pill {
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-weight: 700;
  font-size: 12.6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
}
.joy-locbar__pill:hover { background: var(--joy-lime-hover); }
/* The store bar wraps to two rows on deeper pages (109px measured at 390 on
   /products/<cat>/), so the reserve has to clear the tallest variant, not the
   shortest — otherwise the last line of content hides beneath it. */
body.joy-locsite { padding-bottom: 52px; }
@media (max-width: 991px) { body.joy-locsite { padding-bottom: 124px; } }

/* Live carries NO theme toggle on the location microsites. The mirror added
   one, and the store bar grows past the page's fixed 92px bottom reserve on
   deeper pages (up to 186px at 320), so the toggle ended up buried under the
   bar with 100% overlap and un-tappable. Matching live removes the problem
   rather than papering over it. */
body.joy-locsite .joy-themetoggle { display: none; }

/* The "View Other Locations" pill is a phone-only control on live; above the
   breakpoint the breadcrumb trail does that job. */
.joy-locbar__pill--others { display: none; }

@media (max-width: 767px) {
  /* live hides these two on a phone, which is what keeps its bar to two rows */
  .joy-locbar__pill--review,
  .joy-locbar__pill--call { display: none; }
  /* and it drops the breadcrumb trail, swapping in the pill instead */
  .joy-locbar__crumbs { display: none; }
  .joy-locbar__pill--others { display: inline-flex; }
}

/* Microsite footer link columns. */
.joy-locfooter__cols { display: flex; gap: 64px; flex-wrap: wrap; margin-top: 24px; }
/* On a phone the two columns wrap onto one another and the 64px gap opens a
   hole mid-list that reads as a dropped link. Stack them as one column with
   normal row spacing instead. */
@media (max-width: 767px) {
  .joy-locfooter__cols { flex-direction: column; gap: 10px; }
}
.joy-locfooter__cols ul { list-style: none; margin: 0; padding: 0; }
.joy-locfooter__cols li { margin-bottom: 10px; }
.joy-locfooter__cols a { color: var(--joy-white); text-decoration: none; font-weight: 600; }
.joy-locfooter__cols a:hover { text-decoration: underline; }
.joy-locfooter__socials { margin-top: 24px; display: flex; gap: 16px; }
.joy-locfooter__socials a { color: var(--joy-lime); font-weight: 700; text-decoration: none; }

/* Hub. */
.joy-lochub__hero {
  max-width: 1240px;
  margin: 24px auto 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.joy-lochub__hero-text h1 {
  margin: 0 0 24px;
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 57px);
  color: var(--joy-white);
}
.joy-lochub__hero-text p { color: var(--joy-white); font-size: 16.8px; line-height: 1.5; margin: 0 0 21px; }
.joy-lochub__hero-img {
  width: min(100%, 500px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  justify-self: center;
}
.joy-lochub__cats { text-align: center; margin: 0 auto 56px; }
.joy-lochub__cats h2 {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  color: var(--joy-white);
  margin: 0 0 24px;
}
.joy-menu-slot a { font-weight: 700; }

/* White city card — INK text on white, maps embed right. */
.joy-lochub__city {
  max-width: 1240px;
  margin: 0 auto 72px;
  background: var(--joy-white);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: start;
}
.joy-lochub__city-text h2,
.joy-lochub__city-text h3,
.joy-lochub__city-text .h2 {
  font-family: var(--joy-font-display);
  font-weight: 700;
  color: var(--joy-ink);
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 18px;
}
.joy-lochub__city-text p { color: var(--joy-ink); font-size: 16.8px; line-height: 1.55; margin: 0 0 18px; }
.joy-lochub__city-text .collapse { display: none; }
.joy-lochub__city-text .collapse.show { display: block; }
.joy-lochub__city-text a.btn {
  display: inline-block;
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 16px 24px 13px;
  border-radius: 999px;
}
.joy-lochub__city-map iframe { width: 100%; height: 360px; border: 0; border-radius: 12px; }
.joy-lochub__banner {
  height: clamp(260px, 38vw, 460px);
  background-size: cover;
  background-position: center;
  margin-top: 24px;
}

/* Static Gravity Forms markup on contact pages (recorded divergence:
 * forms do not submit in the mirror). */
.joy-loc__body input[type=text],
.joy-loc__body input[type=email],
.joy-loc__body input[type=tel],
.joy-loc__body textarea {
  width: 100%;
  background: var(--joy-white);
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  font: inherit;
  color: var(--joy-ink);
}
.joy-loc__body label { color: var(--joy-white); font-weight: 700; font-size: 14.7px; }
.joy-loc__body input[type=submit], .joy-loc__body button[type=submit] {
  background: var(--joy-lime);
  color: var(--joy-ink);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 28px;
  cursor: pointer;
}

@media (max-width: 999px) {
  .joy-lochub__hero,
  .joy-lochub__city { grid-template-columns: minmax(0, 1fr); }
  .joy-locrail { max-width: 420px; }
  .joy-locbar { flex-direction: column; gap: 6px; }
  /* clears the TALLEST bar variant, not the shortest — the old 92px let the
     last line of content hide under it. The bar grows as the breadcrumb wraps,
     so the reserve steps with the width: 109px measured at 390, 140px at 320. */
  body.joy-locsite { padding-bottom: 124px; }
  .joy-locutility__address { display: none; }
}
@media (max-width: 575px) {
  /* deeper pages wrap the breadcrumb to a third row on a small phone */
  body.joy-locsite { padding-bottom: 156px; }
}

/* Location nav mobile collapse — groups hide, burger + dropdown serve. */
@media (max-width: 767px) {
  .joy-locnav .joy-nav__group { display: none; }
  .joy-locnav .joy-nav__mobile {
    display: flex;
    flex-direction: column;
    background: var(--joy-ink);
    padding: 8px 16px 16px;
  }
  .joy-locnav .joy-nav__mobile[hidden] { display: none; }
  .joy-locnav .joy-nav__mobile a {
    color: var(--joy-white);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 0;
  }
  /*
   * CORRECTED. An earlier probe concluded live drops this label on a phone
   * and I hid it. Live actually keeps it: its pill measures 201x56 at 390
   * reading "CURRENTLY SHOPPING / Lake Orion ▾" (146x69 at 320). The probe
   * had queried before live's headless bar hydrated.
   *
   * Restored at a legible 11px — and the pill no longer reserves 26px of
   * right padding for a caret it never drew, which was snapping "Lake Orion"
   * onto two lines at 320.
   */
  .joy-locutility__pill-label { display: block; font-size: 11px; }
  .joy-locutility__pill { padding: 6px 12px; }
}
@media (min-width: 768px) {
  .joy-locnav .joy-nav__burger,
  .joy-locnav .joy-nav__mobile { display: none; }
}

/* ------------------------------------------------------------------
 * Events — WHITE surface on live (archive + singles, verified in the
 * 2026-08-20 side-by-side): ink Events header, black titles, grey
 * notice box, hairline rows. The TEC pages drop the gradient like the
 * blog does.
 * ------------------------------------------------------------------ */
body.page-template-page-events,
body.single-event {
  background-color: var(--joy-white);
  background-image: none;
}
body.page-template-page-events .joy-nav,
body.single-event .joy-nav { background: var(--joy-white); }
body.page-template-page-events .joy-nav__inner a,
body.single-event .joy-nav__inner a { color: var(--joy-ink); }
body.page-template-page-events .joy-nav__inner a[aria-current="page"],
body.single-event .joy-nav__inner a[aria-current="page"] { color: var(--joy-savings); }

.joy-events__inner,
.joy-event__inner { max-width: 1180px; margin: 0 auto; }
.joy-events .joy-seo__title,
.joy-event__pagehead {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 51.3px);
  color: var(--joy-ink);
  text-align: center;
  margin: 24px auto 56px;
}
.joy-events__upcoming {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  color: #212121;
  margin: 0 0 16px;
}
.joy-events__count { color: #212121; font-weight: 700; margin: 0 0 6px; }
.joy-events__none {
  color: #333;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 16px 18px;
  text-align: center;
  margin: 0 0 32px;
}
/* wraps on a phone — the field plus a 117px pill does not fit 390 */
.joy-events__bar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 48px; }
.joy-events__bar input { min-width: 0; }
.joy-events__bar input {
  flex: 1;
  background: var(--joy-white);
  border: 1px solid var(--joy-hairline);
  border-radius: 8px;
  padding: 13px 20px;
  font: inherit;
  color: var(--joy-ink);
}
.joy-events__bar-btn {
  background: var(--joy-lime);
  color: var(--joy-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 13px 24px;
}
.joy-events__past-title {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  color: #212121;
  margin: 0 0 24px;
}
.joy-eventrow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  border-top: 1px solid var(--joy-hairline);
  padding: 28px 0;
}
.joy-eventrow__chip { text-align: center; color: #212121; line-height: 1.15; }
.joy-eventrow__chip-month { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.joy-eventrow__chip-day { display: block; font-weight: 700; font-size: 28px; }
.joy-eventrow__chip-year { display: block; font-size: 12px; color: var(--joy-muted-ink); }
.joy-eventrow__range { color: #212121; margin: 0 0 8px; font-size: 14.7px; }
.joy-eventrow__body h3 { margin: 0 0 10px; font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.25; }
.joy-eventrow__body h3 a { color: #212121; text-decoration: none; }
.joy-eventrow__body h3 a:hover { text-decoration: underline; }
.joy-eventrow__venue { color: #212121; margin: 0; font-size: 14.7px; }
.joy-eventrow__venue strong { margin-right: 6px; }
.joy-eventrow__media img { width: 100%; border-radius: 4px; display: block; }

.joy-event__back { margin: 0 0 20px; }
.joy-event__back a { color: var(--joy-savings); font-weight: 700; text-decoration: none; }
.joy-event__passed { color: #333; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--joy-hairline); }
.joy-event__title {
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.2;
  color: #212121;
  margin: 0 0 14px;
}
.joy-event__schedule { color: #212121; font-size: 16.8px; display: flex; gap: 18px; margin: 0 0 28px; }
.joy-event__cost { font-weight: 700; text-transform: uppercase; }
.joy-event__flyer { width: 100%; border-radius: 4px; margin: 0 0 32px; }
.joy-event__desc p { color: #212121; font-size: 16.8px; line-height: 1.6; margin: 0 0 18px; }
.joy-event__desc a { color: var(--joy-savings); font-weight: 700; }
.joy-event__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
  border-top: 1px solid var(--joy-hairline);
  padding-top: 32px;
}
.joy-event__meta h2 { font-weight: 700; font-size: 20px; color: #212121; margin: 0 0 12px; }
.joy-event__meta p, .joy-event__meta dd, .joy-event__meta dt { color: #212121; font-size: 15.75px; }
.joy-event__meta dl { margin: 0; }
.joy-event__meta dt { font-weight: 700; float: left; clear: left; margin-right: 6px; }
.joy-event__meta dd { margin: 0 0 6px; }

@media (max-width: 767px) {
  .joy-eventrow { grid-template-columns: 60px minmax(0, 1fr); }
  .joy-eventrow__media { grid-column: 1 / -1; }
  .joy-event__meta { grid-template-columns: minmax(0, 1fr); }
}


/* White surfaces (blog, events) use the colored blog-logo + ink label,
 * exactly as live's d-none brand swap. */
body.blog .joy-nav__mark--white,
body.single-post .joy-nav__mark--white,
body.archive .joy-nav__mark--white,
body.page-template-page-events .joy-nav__mark--white,
body.single-event .joy-nav__mark--white { display: none; }
body.blog .joy-nav__mark--dark,
body.single-post .joy-nav__mark--dark,
body.archive .joy-nav__mark--dark,
body.page-template-page-events .joy-nav__mark--dark,
body.single-event .joy-nav__mark--dark { display: block; }

/* /blog/ (the template-blog page) renders the same WHITE editorial
 * surface as the posts page. */
body.page-template-page-blog {
  background-color: var(--joy-white);
  background-image: none;
}
body.page-template-page-blog .joy-nav { background: var(--joy-white); }
body.page-template-page-blog .joy-nav__inner a { color: var(--joy-ink); }
body.page-template-page-blog .joy-nav__inner a[aria-current="page"] { color: var(--joy-savings); }
body.page-template-page-blog .joy-nav__mark--white { display: none; }
body.page-template-page-blog .joy-nav__mark--dark { display: block; }
body.page-template-page-blog .joy-nav__drop a { color: #191919; }

.joy-utility__state { color: var(--joy-white); font-weight: 700; font-size: clamp(16px, 1vw, 19.2px); }

/* Product rails — the live carousel's at-rest view: 3 white cards. */
/* Live's rail (Blaze slider at rest, measured 2026-08-24 @1900w): FOUR full
   372px cards on a 1548px track, 20px gaps. The snapshot renders that
   at-rest frame as a static 4-up grid. */
.joy-prodrail {
  max-width: 1588px;                /* 1548 track + own 20px side pads */
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.joy-prodcard {
  position: relative;               /* anchors the special-offer pill */
  display: flex;
  flex-direction: column;
  background: var(--joy-white);
  border: 1px solid var(--joy-hairline);
  border-radius: 13px;
  padding: 0 0 16px;
  text-decoration: none;
  overflow: hidden;
}
/* Live: a translucent white pill floating INSIDE the card top (8px inset,
   radius 9), 16px/400 lime text. */
.joy-prodcard__special {
  position: absolute;
  top: 11px;
  left: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 9px;
  color: var(--joy-lime);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Live: 211×150 art, top edge 42px below the card top. */
.joy-prodcard__media { display: block; padding: 42px 14px 0; text-align: center; }
.joy-prodcard__media img { height: 150px; max-width: 211px; width: auto; object-fit: contain; }
.joy-prodcard__brand { color: #969EA5; font-size: 16px; padding: 26px 11px 0; }
.joy-prodcard__name { color: var(--joy-ink); font-weight: 700; font-size: 17px; line-height: 22px; padding: 5px 11px 0; }
.joy-prodcard__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 11px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.joy-prodcard__cat { color: var(--joy-ink); }
/* Live's strain is a FILLED chip: white bold text on the strain colour. */
.joy-prodcard__strain {
  color: var(--joy-white);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
}
.joy-prodcard__strain--hybrid { background: #3E8E2F; }
.joy-prodcard__strain--indica { background: #7B4FA0; }
.joy-prodcard__strain--sativa { background: var(--joy-orange); }
.joy-prodcard__thc { color: #222; font-weight: 400; }
.joy-prodcard__variants { display: flex; gap: 8px; padding: 12px 16px 0; flex-wrap: wrap; }
.joy-prodcard__variant {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--joy-hairline);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 64px;
}
.joy-prodcard__variant em { color: var(--joy-savings); font-style: normal; font-size: 11px; font-weight: 700; }
.joy-prodcard__variant strong { color: var(--joy-ink); font-size: 12.6px; }
.joy-prodcard__variant b { color: var(--joy-savings); font-size: 14px; }

/* Current specials — photo band (live: /media/rainbow-deal.jpg). */
/* Live's specials band: full-bleed photo under a flat 35% black wash (the
   overlay is in the inline background-image), 264px of vertical padding, and
   a wave carved into BOTH edges — yellow above, mint below. It carries the
   title and nothing else. */
.joy-specialsband {
  position: relative;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 288px 75px;              /* live: 288px verticals (2026-08-24) */
  margin: 0;
  overflow: hidden;
}
/* live's specials heading keeps the same 18.48px below as every other title */
.joy-specialsband .joy-title { margin-bottom: 18.48px; }

/* Same radial-gradient mask technique live uses for every wave on the site. */
.joy-wave {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.joy-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask:
    radial-gradient(100% 80% at top, #fff 79.5%, transparent 80%) left,
    radial-gradient(100% 80% at bottom, transparent 79.5%, #fff 80%) right;
  mask:
    radial-gradient(100% 80% at top, #fff 79.5%, transparent 80%) left,
    radial-gradient(100% 80% at bottom, transparent 79.5%, #fff 80%) right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 50.22% 100%;
  mask-size: 50.22% 100%;
}
/* Live steps this band down on small screens — 180px/15px below 576 and
   180px/25px at 768. Holding 264px/75px at every width left 213px of empty
   photo on a phone and squeezed the title into a 240px box so it wrapped. */
@media (max-width: 767px) {
  .joy-specialsband { padding: 180px 15px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .joy-specialsband { padding: 180px 25px; }
}

.joy-wave--top { top: 0; height: 200px; }
.joy-wave--top::after { background: #EBF001; }      /* meets the yellow ramp */
.joy-wave--bottom { bottom: 0; height: 110px; transform: rotate(180deg); }
.joy-wave--bottom::after { background: #CDEDB7; }   /* meets the joyitudes band */
body.joy-night .joy-wave--top::after,
body.joy-night .joy-wave--bottom::after { background: #4788A1; }

/* 4-up needs ~1400px; step down through 3/2/1 like a slider narrowing. */
@media (max-width: 1439px) {
  .joy-prodrail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .joy-prodrail .joy-prodcard:nth-child(4) { display: none; }
}
@media (max-width: 1023px) {
  .joy-prodrail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .joy-prodrail .joy-prodcard:nth-child(4) { display: flex; }
}
@media (max-width: 767px) {
  .joy-prodrail { grid-template-columns: minmax(0, 1fr); }
  /* Live keeps the OPEN/CLOSED line on a phone and drops only the address
     (its address returns at 576). Hiding the status too left a shopper unable
     to tell whether the store was open. */
  .joy-locutility__address { display: none; }
}

a.joy-locutility__pill { text-decoration: none; }
a.joy-locutility__pill .joy-locutility__pill-label,
a.joy-locutility__pill .joy-locutility__pill-name { text-decoration: none; }

/* Final global-utility and homepage-mobile overrides intentionally sit after
   the location-site rules. Those generic rules otherwise win the cascade and
   widen the 193.25px live selector back to desktop size. */
@media (max-width: 767px) {
  .joy-utility {
    height: 71.19px;
    padding: 0;
  }
  .joy-utility__inner {
    display: grid;
    grid-template-columns: minmax(0, clamp(146px, calc(67.5vw - 70px), 193.25px)) minmax(0, 1fr);
    column-gap: 22.5px;
    width: 390px;
    max-width: 100%;
    height: 71.19px;
    padding: 7.5px 10px;
  }
  .joy-utility .joy-locutility__pill {
    flex: none;
    width: 100%;
    height: 56.19px;
    margin: 0;
    padding: 6px 8px;
    gap: 0;
  }
  .joy-utility .joy-locutility__icon,
  .joy-utility .joy-locutility__address { display: none; }
  .joy-utility__info {
    display: flex;
    width: auto;
    height: 56.19px;
    margin: 0;
    justify-content: center;
  }
  .joy-utility .joy-utility__state {
    display: block;
    font-size: 16px;
    line-height: 16px;
  }
  body.home .joy-nav { height: 110px; }
  body.home .joy-nav__inner {
    width: 390px;
    max-width: 100%;
    height: 110px;
    padding: 12px 24px 12px 15px;
  }
  body.home .joy-nav__home {
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
    padding: 0 !important;
  }
  body.home .joy-nav__homeword {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
  }
  body.home .joy-nav__burger {
    width: 44.22px;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
  }
  body.home .joy-nav__burger-lines,
  body.home .joy-nav__burger-lines::before,
  body.home .joy-nav__burger-lines::after { width: 36px; }
  body.home .joy-nav__burger-lines { margin: 9px 0 11px; }
  body.home .joy-hero { padding-top: 180.81px; }
  body.home .joy-hero__wordmark { width: min(780px, calc(100vw - 36px)); }
  body.home .joy-parallax { display: none; }
}

@media (min-width: 1800px) {
  body.home .joy-utility .joy-locutility__address,
  body.home .joy-utility .joy-utility__state,
  body.home .joy-locutility__select { font-size: 19.2px; }
}

/* ------------------------------------------------------------------ *
 * /shop/ holding page — the storefront slot until the proxy mounts.
 * Category tiles reuse the live 250px category art on the gradient.
 * ------------------------------------------------------------------ */
.joy-shophold { text-align: center; }
.joy-shophold__lede {
  max-width: 640px;
  margin: 0 auto 44px;
  color: var(--joy-white);
  font-size: 19.2px;
  line-height: 1.55;
}
.joy-shophold__tiles {
  list-style: none;
  margin: 0 auto 44px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.joy-shophold__tiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 9px;
  text-decoration: none;
}
.joy-shophold__tiles a:hover { background: rgba(255, 255, 255, 0.12); }
.joy-shophold__tiles img { width: 170px; height: 170px; display: block; }
.joy-shophold__tiles span {
  color: var(--joy-white);
  font-weight: 700;
  font-size: 22px;
}
.joy-shophold__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
@media (max-width: 767px) {
  .joy-shophold__tiles img { width: 120px; height: 120px; }
}

/* ------------------------------------------------------------------ *
 * Product-detail modal (live card-click behaviour, measured 2026-08-25:
 * 1200x760 white panel radius 9, pad 0 50 50; name 34/700; weights 70x47
 * radius 3 #efefef, selected 2px #0B99E6; desc head 46.87/700 uppercase).
 * ------------------------------------------------------------------ */
body.joy-pdp-open { overflow: hidden; }
.joy-pdp { position: fixed; inset: 0; z-index: 950; }
.joy-pdp__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.joy-pdp__panel {
  position: relative;
  width: min(1200px, 94vw);
  max-height: 90vh;
  margin: 5vh auto 0;
  background: var(--joy-white);
  border-radius: 9px;
  padding: 0 50px 50px;
  overflow-y: auto;
  color: #000;
}
.joy-pdp__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0 18px;
}
.joy-pdp__back, .joy-pdp__x {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--joy-font-body);
  font-size: 19.2px;
  color: #000;
  padding: 0;
}
.joy-pdp__x { font-size: 22px; color: #757575; }
.joy-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 50px;
}
.joy-pdp__media { margin: 0; text-align: center; }
.joy-pdp__media img { max-width: 330px; width: 100%; height: auto; margin: 24px auto 8px; }
.joy-pdp__media figcaption { font-size: 13px; color: #969EA5; }
.joy-pdp__chips { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.joy-pdp__cat {
  background: var(--joy-ink);
  color: var(--joy-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 9px;
  border-radius: 3px;
}
.joy-pdp__strain { font-size: 13px; font-weight: 700; }
.joy-pdp__strain--indica { color: #7B5EA7; }
.joy-pdp__strain--sativa { color: #EE4405; }
.joy-pdp__strain--hybrid { color: #527810; }
.joy-pdp__thc { font-size: 13px; color: #222; text-transform: uppercase; }
.joy-pdp__name {
  margin: 0 0 10px;
  font-family: var(--joy-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
}
.joy-pdp__brand { margin: 0 0 24px; font-size: 19.2px; }
.joy-pdp__brand strong { color: var(--joy-ink); }
.joy-pdp__weights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.joy-pdp__weight {
  min-width: 70px;
  height: 47px;
  padding: 10px;
  border-radius: 3px;
  background: #efefef;
  border: 1px solid #222;
  color: #222;
  font-family: var(--joy-font-body);
  font-size: 15px;
  cursor: pointer;
}
.joy-pdp__weight.is-active {
  border: 2px solid #0B99E6;
  color: #0B99E6;
  font-weight: 700;
}
.joy-pdp__price { margin: 0 0 22px; font-size: 26px; font-weight: 700; color: var(--joy-orange); }
.joy-pdp__buy { display: flex; gap: 16px; align-items: center; margin-bottom: 30px; }
.joy-pdp__qty {
  width: 70px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: var(--joy-font-body);
  font-size: 16px;
  padding: 0 10px;
}
.joy-pdp__add {
  display: inline-block;
  background: var(--joy-lime);
  color: #000;
  font-weight: 700;
  font-size: 19.2px;
  text-decoration: none;
  border-radius: 960px;
  padding: 13px 36px;
}
.joy-pdp__add:hover { filter: brightness(0.96); }
.joy-pdp__specialbox {
  background: #efefef;
  border-radius: 9px;
  padding: 22px 26px;
  margin-bottom: 30px;
}
.joy-pdp__specialbox p { margin: 0 0 6px; font-size: 16px; }
.joy-pdp__specialbox span { color: #0B99E6; }
.joy-pdp__desc h3 {
  margin: 10px 0 14px;
  font-family: var(--joy-font-display);
  font-size: 46.87px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  line-height: 1.2;
}
.joy-pdp__desc p { margin: 0; font-size: 19.2px; line-height: 1.5; color: #000; }
@media (max-width: 899px) {
  .joy-pdp__panel { padding: 0 20px 30px; }
  .joy-pdp__grid { grid-template-columns: 1fr; gap: 16px; }
  .joy-pdp__desc h3 { font-size: 32px; }
}

/* ------------------------------------------------------------------ *
 * Store menu pages — the Dutchie classic embed with site chrome.
 * ------------------------------------------------------------------ */
.joy-storemenu { padding-bottom: 0; }
.joy-storemenu__head { text-align: center; padding: 0 20px 8px; }
.joy-storemenu__title {
  font-family: var(--joy-font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--joy-white);
  margin: 0 0 10px;
}
.joy-storemenu__switch { display: flex; justify-content: center; gap: 18px; margin-bottom: 18px; }
.joy-storemenu__switch a, .joy-storemenu__switch span {
  color: var(--joy-white);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  opacity: 0.75;
}
.joy-storemenu__switch span[aria-current] { opacity: 1; border-bottom: 2px solid var(--joy-lime); }
.joy-storemenu__switch a:hover { opacity: 1; }
.joy-storemenu__embed {
  background: var(--joy-white);
  border-radius: 14px 14px 0 0;
  max-width: 1520px;
  margin: 0 auto;
  padding: 10px 10px 60px;
  min-height: 70vh;
}
/* store chooser cards on /shop/ */
.joy-shophold__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 48px;
  max-width: 1100px;
}
.joy-shophold__store {
  flex: 1 1 300px;
  max-width: 350px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--joy-white);
  border-radius: 12px;
  padding: 22px 24px;
  text-decoration: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.joy-shophold__store:hover { background: rgba(255, 255, 255, 0.5); }
.joy-shophold__store strong { color: var(--joy-white); font-size: 24px; font-weight: 700; }
.joy-shophold__store span { color: rgba(255, 255, 255, 0.92); font-size: 14px; }
.joy-shophold__store em { color: var(--joy-lime); font-style: normal; font-weight: 700; margin-top: 8px; }

/* ---- club-chrome guard: the club shell owns body + chrome on these pages ---- */
body { background-image: none; }
@media (min-width: 768px) { body { padding-bottom: 0; } }
@media (max-width: 767px) { body { padding-bottom: calc(var(--club-dock-h, 64px) + env(safe-area-inset-bottom)); } }
.topbar a, .topbar .topbar__label, .site-footer a, .drawer a { color: inherit; }