/* =====================================================================
   AE. Modern pass (owner 2026-11-12: "THIS WEBSITE IS NOT MODERN ENOUGH").
   Loads after style.css and mirror-pages.css. Same brand (Dream Violet
   shell, the six JOY category gradients, lime action colour, ink navy,
   all-round-gothic lowercase, style-B press buttons); the dated layer goes:
   - the bokeh bubbles baked into the gradient images -> the same colour
     ramps as clean CSS gradients (stops sampled from the Drive kit files)
   - scalloped wave edges -> rounded panels inset from the screen edge
   - one rainbow band per section -> violet shell + ink, lime, white panels
   - frosted stat circles + curved "keep scrolling" text -> storefront bento
   - tracked caps eyebrows -> a plain sentence-case lead-in
   ===================================================================== */
:root {
	--m-inset: clamp(8px, 1.1vw, 18px);
	--m-panel-r: clamp(28px, 3vw, 48px);
	--m-card-r: clamp(22px, 2vw, 30px);
	--m-tile-r: clamp(18px, 1.6vw, 24px);
	--m-ink: #1d3b4c;
	--m-ink-deep: #16303f;
	--m-lime: #e1f651;
	--m-soft: #f6f1fa;
	/* inner padding of an inset panel: the page gutter minus the inset, never under 20px on phones */
	--m-pad: max(20px, calc(var(--gutter) - var(--m-inset)));
	--radius: 14px;
	--radius-lg: 24px;
	--card-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 48px -32px rgba(44, 22, 74, .55);
	/* the Drive kit's JOY gradients, bubbles removed (top / bottom stops of each file) */
	--g-dream-violet: linear-gradient(180deg, #e17fb7 0%, #a96da8 52%, #6f5d97 100%);
	--g-fresh-green: linear-gradient(180deg, #a4d55e, #82c445);
	--g-sunburst-orange: linear-gradient(180deg, #ff6f33, #fea01b);
	--g-sky-blue: linear-gradient(180deg, #5bc5dc, #42c6f0);
	--g-coral-pink: linear-gradient(180deg, #ff85a7, #ff6b6b);
	--g-emerald-green: linear-gradient(180deg, #3dbf7c, #2a7c70);
	--m-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 1. Shell: Dream Violet as a soft mesh, no bubbles ---------- */
body { background: #9b6aa8; }
body::before {
	background:
		radial-gradient(70vmax 55vmax at 0% 0%, rgba(236, 136, 192, .7), transparent 62%),
		radial-gradient(60vmax 50vmax at 100% 100%, rgba(96, 80, 150, .75), transparent 60%),
		linear-gradient(165deg, #c97ab4 0%, #a06ca9 46%, #7b609d 100%);
}
body::after {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background: var(--m-grain); opacity: .07; mix-blend-mode: soft-light;
}
body:is(.blog, .single-post, .archive, .page-template-page-events, .single-event)::after { content: none; }
.preloader, .agegate__backdrop { background: linear-gradient(165deg, #c97ab4 0%, #a06ca9 46%, #7b609d 100%); }
/* /brands/ + /blog/ keep their darker journal tint, over the same clean mesh (style.css still points them at the bubble file) */
html body.jnl-page::before {
	background:
		linear-gradient(180deg, rgba(29, 20, 50, .45), rgba(29, 20, 50, .3) 50%, rgba(29, 20, 50, .14)),
		radial-gradient(70vmax 55vmax at 0% 0%, rgba(236, 136, 192, .7), transparent 62%),
		radial-gradient(60vmax 50vmax at 100% 100%, rgba(96, 80, 150, .75), transparent 60%),
		linear-gradient(165deg, #c97ab4 0%, #a06ca9 46%, #7b609d 100%);
}

/* the gradient files everywhere else become the same clean ramps */
[data-grad="fresh-green"]     { --grad: var(--g-fresh-green); --grad-ink: var(--m-ink); }
[data-grad="sunburst-orange"] { --grad: var(--g-sunburst-orange); --grad-ink: var(--m-ink); }
[data-grad="sky-blue"]        { --grad: var(--g-sky-blue); --grad-ink: var(--m-ink); }
[data-grad="coral-pink"]      { --grad: var(--g-coral-pink); --grad-ink: var(--m-ink-deep); }
[data-grad="dream-violet"]    { --grad: var(--g-dream-violet); --grad-ink: #fff; }
[data-grad="emerald-green"]   { --grad: var(--g-emerald-green); --grad-ink: #fff; }
.store-card__media--art, .store-art-circle { background: var(--g-emerald-green); }
.store-card__media--soon { background: var(--g-fresh-green); }
.post-card__placeholder { background: var(--g-coral-pink); }

/* bubble clusters drawn in CSS */
.hero__stripes, .site-footer__stripes, .agegate__stripes { display: none; }
.page-hero::before, .cta-band::after, .rewards-band::before, .happy::after, .happy.is-on::after { content: none; background: none; }
.deal::before { content: none; }

/* ---------- 2. Waves -> rounded panels ---------- */
.deli, .rewards-band, .cta-band, .blog-band, .site-footer, .jnl-close { -webkit-mask: none; mask: none; }
html :is(.deli, .rewards-band, .brands-band, .cta-band, .jnl-close) {
	margin-inline: var(--m-inset);
	border-radius: var(--m-panel-r);
	overflow: hidden;
	isolation: isolate;
}
html :is(.deli, .rewards-band, .brands-band, .cta-band, .jnl-close) + :is(.deli, .rewards-band, .brands-band, .cta-band, .jnl-close) { margin-top: var(--m-inset); }
html :is(.deli, .rewards-band, .brands-band, .cta-band, .jnl-close) > .container { padding-inline: var(--m-pad); }

/* ---------- 3. Type ---------- */
.section-title {
	font-size: clamp(2.3rem, 5vw, 4.6rem);
	letter-spacing: -.028em;
	line-height: .94;
	text-wrap: balance;
}
.section-intro { max-width: 52ch; font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.5; color: #fff; }
.page-title:not(.page-title--post) { letter-spacing: -.028em; line-height: .94; text-wrap: balance; }
/* the lead-in above a heading: plain sentence case, no tracked caps, no bubble */
.eyebrow {
	gap: 8px; margin-bottom: 12px;
	font-size: clamp(.92rem, 1vw, 1.02rem); font-weight: 600; letter-spacing: 0; text-transform: none;
	color: #fff;
}
.eyebrow__bar { display: none; }
.eyebrow--light { color: #fff; }
.section-head { margin-bottom: clamp(26px, 3.4vw, 46px); }
.section-head .section-title + .section-intro { margin-top: 16px; }
.text-link { gap: 8px; }
.text-link:hover { gap: 12px; border-color: transparent; }

/* ---------- 4. Hero: copy left, the stores right ---------- */
html .hero--split { padding: clamp(26px, 4.2vw, 72px) 0 clamp(28px, 3.6vw, 60px); text-align: left; }
.hero__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 40px); align-items: center; }
/* justify-items also aligns block children in current Chrome: the old centred grid value must go too */
html .hero--split .hero__inner { display: block; justify-items: normal; max-width: 680px; }
html .hero--split .hero__inner > * { justify-self: auto; }
html .hero--split .hero__kicker {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 2.4vw, 30px); padding: 5px 16px 5px 5px;
	border-radius: 999px; background: rgba(29, 59, 76, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html .hero--split .hero__pin { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50%; }
html .hero--split .hero__pin .icon { width: 16px; height: 16px; }
html .hero--split .hero__title { justify-items: start; gap: clamp(10px, 1.2vw, 18px); margin: 0 0 clamp(16px, 2vw, 24px); }
html .hero--split .hero__wordmark { width: min(520px, 100%); filter: none; }
html .hero--split .hero__tag { font-weight: 700; font-size: clamp(2.2rem, 4.3vw, 4.4rem); letter-spacing: -.03em; line-height: .95; text-wrap: balance; }
html .hero--split .hero__sub { max-width: 46ch; margin: 0 0 clamp(22px, 2.6vw, 32px); font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.5; color: #fff; }
html .hero--split :is(.hero__actions, .hero__facts) { justify-content: flex-start; }
html .hero--split .hero__facts { margin-top: clamp(20px, 2.4vw, 28px); gap: 10px 22px; font-size: .95rem; }
html .hero--split .hero__facts .status-pill { background: rgba(255, 255, 255, .16); }

.hero__bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); }
.hero__tile { position: relative; display: block; overflow: hidden; border-radius: var(--m-card-r); isolation: isolate; aspect-ratio: 1; box-shadow: 0 30px 60px -40px rgba(30, 14, 56, .8); }
.hero__tile--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9.4; }
.hero__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.hero__tile--store::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18, 24, 40, .35)); pointer-events: none; }
.hero__chip {
	position: absolute; left: 14px; bottom: 14px; z-index: 1;
	display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
	border-radius: 999px; background: #fff; color: var(--m-ink);
	font-weight: 700; font-size: .95rem; white-space: nowrap;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}
.hero__chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--closed); }
.hero__chip-dot.is-open { background: var(--open); box-shadow: 0 0 0 4px rgba(31, 157, 77, .18); }
.hero__chip-state { font-weight: 600; color: #4b6573; }
.hero__tile--brands { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 1.8vw, 26px); background: var(--m-lime); color: var(--m-ink); }
.hero__tile-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 5.4vw, 5.6rem); line-height: .82; letter-spacing: -.04em; }
.hero__tile-label { margin-top: 8px; font-weight: 700; font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.2; }
.hero__tile-go { position: absolute; top: clamp(14px, 1.4vw, 20px); right: clamp(14px, 1.4vw, 20px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--m-ink); color: var(--m-lime); transition: transform .35s var(--ease-out); }
.hero__tile-go .icon { width: 20px; height: 20px; }
.hero__tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.hero__tile:hover img { transform: scale(1.04); }
	.hero__tile--brands:hover .hero__tile-go { transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: no-preference) {
	.hero__bento > * { animation: m-rise .9s var(--ease-out) both; }
	.hero__bento > :nth-child(2) { animation-delay: .08s; }
	.hero__bento > :nth-child(3) { animation-delay: .16s; }
	.hero__tile:active { transform: scale(.985); transition: transform 60ms; }
}
@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } }
/* tablets: the three tiles share one row under the copy instead of stacking full width */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero__bento { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
	.hero__tile--wide { grid-column: auto; aspect-ratio: auto; }
	.hero__tile--wide img { object-position: 6% 50%; }
	.hero__bento > :not(.hero__tile--wide) { aspect-ratio: 3 / 4; }
	.hero__tile:not(.hero__tile--wide) .hero__chip-state { display: none; }
}
@media (min-width: 1024px) {
	.hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* 1024-1099: the small tile is too narrow for "Lake Orion · Open now" */
@media (min-width: 1024px) and (max-width: 1099px) {
	.hero__tile:not(.hero__tile--wide) .hero__chip-state { display: none; }
}
/* wide screens keep the page's left edge (no centred cap) and lay the bento out sideways;
   the copy column hugs the copy so no empty violet gap opens before the bento */
@media (min-width: 1600px) {
	.hero__split { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: clamp(56px, 4vw, 96px); }
	.hero__bento { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; }
	.hero__tile--wide { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
	.hero__tile--wide img { object-position: 6% 50%; } /* keeps the Mt. Clemens sign and rainbow door in the tall crop */
	.hero__bento > :not(.hero__tile--wide) { aspect-ratio: 4 / 3; }
}
@media (min-width: 1900px) {
	.hero__bento > :not(.hero__tile--wide) { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
	html .hero--split .hero__kicker { font-size: .84rem; }
	html .hero--split .hero__wordmark { width: min(300px, 80vw); }
	html .hero--split .hero__tag { font-size: clamp(2rem, 9.6vw, 2.6rem); }
	html .hero--split .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	html .hero--split .hero__actions .btn { width: 100%; padding-inline: 12px; }
	html .hero--split .hero__facts { display: grid; gap: 8px; }
	.hero__tile--wide { aspect-ratio: 16 / 10.5; }
	.hero__chip { left: 10px; bottom: 10px; min-height: 32px; padding: 0 12px; font-size: .86rem; }
	.hero__tile:not(.hero__tile--wide) .hero__chip-state { display: none; }
	.hero__tile-go { width: 38px; height: 38px; }
}

/* ---------- 5. The ticker: one calm lime line ---------- */
html .marquee--yellow { border-block: 0; }
html .marquee--yellow .marquee__track li {
	gap: 20px; padding: 14px 10px;
	font-family: var(--font-display); font-style: normal; font-weight: 700; font-stretch: 100%;
	font-size: clamp(1.05rem, 1.4vw, 1.35rem); letter-spacing: -.01em; text-transform: lowercase;
}
html .marquee--yellow .marquee__dot { color: var(--m-ink); }
html .marquee--yellow .marquee__dot::before { width: 7px; height: 7px; opacity: .5; }
.marquee-wrap:has(.marquee--yellow)::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--gutter) + 90px); background: linear-gradient(90deg, rgba(225, 246, 81, 0), var(--m-lime) 55%); pointer-events: none; z-index: 1; }

/* ---------- 6. Today at Joyology: a calm bento ---------- */
html .today__grid { gap: clamp(12px, 1.2vw, 18px); }
html :is(.happy, .today-deal, .today-card) { border-radius: var(--m-card-r); box-shadow: none; }
html .happy { padding: clamp(22px, 2.2vw, 32px); }
html .happy__tag, html .today-deal__tag { font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
html .happy__what { font-family: var(--font-display); font-style: normal; font-weight: 700; font-stretch: 100%; text-transform: lowercase; font-size: 1.5rem; letter-spacing: -.01em; }
html .happy__num { letter-spacing: -.04em; }
html .happy__window { border-width: 0; background: rgba(29, 59, 76, .1); opacity: 1; }
html .today-deal { padding: clamp(22px, 2.2vw, 32px); background: var(--m-ink); }
html .today-deal__big { color: var(--m-lime); text-transform: lowercase; letter-spacing: -.03em; line-height: .9; }
html .today-deal__title { font-family: var(--font-display); font-size: 1.35rem; text-transform: lowercase; }
html .today-card { border: 0; }
html .today-card .eyebrow { color: #7a4b8c; }
html .today-card__title { letter-spacing: -.02em; }

/* ---------- 7. Shop by category: photo tile on its own gradient ---------- */
html .aisles .aisle__link[data-grad] {
	position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
	gap: 0; padding: 10px; border-radius: var(--m-card-r); text-align: left;
	background: var(--grad); color: var(--grad-ink, var(--m-ink));
	box-shadow: none; transition: transform .45s var(--ease-out);
}
html .aisles .aisle__link[data-grad] .aisle__media {
	position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--m-tile-r);
	background: rgba(255, 255, 255, .22); box-shadow: none; animation: none; overflow: hidden;
}
html .aisles .aisle__link[data-grad] .aisle__media img { transition: transform .9s var(--ease-out); }
html .aisles .aisle__link[data-grad] .aisle__sign { display: block; padding: 16px 64px 10px 10px; color: inherit; }
html .aisles .aisle__link[data-grad] .aisle__name {
	display: block; padding: 0; border-radius: 0; background: none; color: inherit;
	font-size: clamp(1.45rem, 2vw, 2.1rem); letter-spacing: -.025em; line-height: 1;
}
html .aisles .aisle__link[data-grad] .aisle__arrow {
	position: absolute; top: auto; right: 16px; bottom: 14px; display: grid; place-items: center; opacity: 1;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--m-ink);
	transform: none; /* style.css nudges the old hover-reveal arrow by translate(6px,-6px) */
	transition: transform .35s var(--ease-out), background-color .2s;
}
html .aisles .aisle__link[data-grad] .aisle__arrow .icon { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
	html .aisles .aisle__link[data-grad]:hover { transform: translateY(-4px); box-shadow: none; }
	html .aisles .aisle__link[data-grad]:hover .aisle__media img { transform: scale(1.05); }
	html .aisles .aisle__link[data-grad]:hover .aisle__arrow { background: var(--m-lime); transform: rotate(-45deg); }
}
html .aisles .aisle__link[data-grad]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* style.css tilts the photo -3deg on keyboard focus (made for the old round photos) */
html .aisles .aisle__link[data-grad]:focus-visible .aisle__media { transform: none; }
/* white names on emerald: a deeper foot under the name keeps them at 5:1+ */
html .aisles .aisle__link[data-grad="emerald-green"] { --grad: linear-gradient(180deg, #3dbf7c 0%, #2a7c70 70%, #226a5f 100%); }
/* phone/tablet rail: the arrow moves onto the photo corner so the name keeps the full tile width */
@media (max-width: 1023px) {
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] { gap: 0; padding: 8px; border-radius: 22px; }
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__media { width: 100%; border-radius: 16px; box-shadow: none; }
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__sign { padding: 12px 6px 6px; }
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__name { padding: 0; font-size: clamp(1rem, 12cqi, 1.3rem); white-space: nowrap; }
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__arrow { top: 14px; right: 14px; bottom: auto; width: 32px; height: 32px; }
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__arrow .icon { width: 16px; height: 16px; }
}
/* phones under 360px: "concentrates" at 16px is wider than the tile */
@media (max-width: 359px) {
	html .aisles .aisle-grid[data-rail] .aisle__link[data-grad] .aisle__name { font-size: .8rem; }
}
/* six-up home grid on wide screens: the names step down so "concentrates" clears the arrow */
@media (min-width: 1600px) {
	html .aisles .aisle__link[data-grad] .aisle__name { font-size: clamp(1.2rem, 1.2vw, 1.75rem); }
	/* the name row is shorter here: a smaller arrow keeps clear of the photo */
	html .aisles:not(.joy-lochub__cats) .aisle-grid .aisle__link[data-grad] .aisle__arrow { width: 38px; height: 38px; bottom: 10px; }
}

/* ---------- 8. Deli: an ink panel ---------- */
html .deli { background: var(--m-ink); }
html .deli .section-title { color: #fff; }
html .deli .section-title em { color: var(--m-lime); }
/* the deli photo is cut to a circle in the file itself: frame it as one clean white disc */
html .deli__media { width: min(100%, 520px); aspect-ratio: 1; padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .08); animation: none; overflow: hidden; }
html .deli__media img, html .deli__media img:not([class]) { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
html .deli .tiers { border-top-color: rgba(255, 255, 255, .14); }
html .deli .tier { border-bottom-color: rgba(255, 255, 255, .14); }
html .deli .tier__n { color: var(--m-lime); font-size: 1.3rem; }
html .deli .tier__body strong { font-family: var(--font-display); font-style: normal; font-weight: 700; font-stretch: 100%; text-transform: lowercase; font-size: 1.35rem; letter-spacing: -.01em; }
html .deli .tier__body span { color: rgba(255, 255, 255, .78); }
html .deli .tier__off { color: var(--m-lime); font-style: normal; }

/* ---------- 9. Each store's board: two clean cards ---------- */
html .week__stores { gap: clamp(12px, 1.2vw, 18px); }
html .week .deal { padding: clamp(24px, 2.4vw, 36px); border: 0; border-radius: var(--m-card-r); box-shadow: none; }
html .week .deal__tag { align-self: start; justify-self: start; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--m-soft); color: #6a3f7e; font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
html .week .deal__headline { margin: 0 0 14px;  font-size: clamp(2rem, 3vw, 3rem); text-transform: lowercase; letter-spacing: -.03em; color: var(--m-ink); }
html .week .deal__link { color: var(--m-ink); font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { html .week .deal:hover { transform: translateY(-4px); box-shadow: none; } }

/* ---------- 10. Rewards: a lime panel ---------- */
html .rewards-band { background: var(--m-lime); color: var(--m-ink); }
html .rewards-band :is(.eyebrow, .section-title, .section-intro) { color: var(--m-ink); }
html .rewards-band .section-title em { color: #6a3f7e; }
html .rewards-band .section-intro { opacity: .88; }
html .rewards-band :focus-visible { outline-color: var(--m-ink); }

/* ---------- 11. Brands: a white panel of real logos ---------- */
html .brands-band { background: #fff; color: var(--m-ink); }
html .brands-band :is(.section-title, .eyebrow) { color: var(--m-ink); }
html .brands-band .eyebrow { color: #6a3f7e; }
html .brands-band .marquee-wrap--brands { display: none; }
html .brands-band .brand-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; }
html .brands-band .brand-card > a:first-child { box-shadow: none; display: grid; align-content: space-between; gap: 10px; height: 100%; padding: 14px 14px 16px; border-radius: var(--m-tile-r); background: var(--m-soft); color: var(--m-ink); transition: transform .35s var(--ease-out), background-color .2s; }
html .brands-band .brand-card__logo { display: grid; place-items: center; aspect-ratio: 4 / 3; }
html .brands-band .brand-card__logo img { top: 8%; left: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
html .brands-band .brand-card__name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
html .brands-band .brand-card--all > a:first-child { align-content: end; background: var(--m-lime); }
@media (hover: hover) and (pointer: fine) { html .brands-band .brand-card > a:first-child:hover { transform: translateY(-3px); background: #efe4f6; } html .brands-band .brand-card--all > a:first-child:hover { background: #d8f03a; } }
html .brands-band :focus-visible { outline-color: var(--m-ink); }
html .brands-band .section-head__link { --edge: var(--btn-edge-soft); background: var(--m-soft); }
/* fixed column counts so the grid always closes on a full row (11 brands + "See every brand") */
@media (min-width: 768px) {
	html .brands-band .brand-card:not(.brand-card--all):nth-child(n+12) { display: none; }
	html .brands-band .brand-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	html .brands-band .brand-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 2080px) {
	html .brands-band .brand-rail { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	html .brands-band .brand-rail { display: flex; grid-template-columns: none; gap: 10px; margin: -8px calc(-1 * var(--m-pad)) 0; padding: 8px var(--m-pad) 18px; scroll-padding-inline: var(--m-pad); }
	html .rewards-band__inner .member-card:not(.member-card--hero) { width: min(340px, 100%); }
	html .brands-band .rail-ui__count { background: var(--m-ink); }
	html .brands-band .rail-ui__bar { background: rgba(29, 59, 76, .15); }
	html .brands-band .rail-ui__bar i { background: var(--m-ink); }
}

/* ---------- 12. Visit ---------- */
html .visit__media { border-radius: var(--m-card-r); overflow: hidden; box-shadow: 0 40px 70px -50px rgba(30, 14, 56, .9); }
html .visit__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
html .visit__addr { font-size: 1.02rem; line-height: 1.7; }

/* ---------- 13. Joyitudes: white cards on the shell ---------- */
html .blog-band { background: transparent; }
html .blog-band :is(.section-title, .eyebrow) { color: #fff; }
html .blog-band .section-intro { color: rgba(255, 255, 255, .9); }
html .blog-band .rail-ui__bar { background: rgba(255, 255, 255, .3); }
html .blog-band .rail-ui__bar i { background: var(--m-lime); }
html .blog-band :focus-visible { outline-color: #fff; }
/* single post date line: one wrapping line of text, dates kept whole (was four squeezed flex columns on phones) */
html .page-hero--post .eyebrow { display: block; text-wrap: balance; }
html .page-hero--post .eyebrow time { white-space: nowrap; }
html .post-card { border: 0; border-radius: var(--m-card-r); overflow: hidden; box-shadow: none; }
html .post-card :is(.post-card__date, time, .post-card__meta) { color: #6b6f86; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
html .post-card :is(.text-link, .post-card__more) { color: var(--m-ink); }

/* ---------- 14. Closing call: a coral panel ---------- */
html .cta-band { background: var(--g-coral-pink); color: var(--m-ink); }
html .cta-band__title { font-size: clamp(2.4rem, 5.4vw, 5rem); letter-spacing: -.03em; line-height: .92; text-transform: lowercase; }
html .cta-band__inner { justify-content: space-between; align-items: flex-end; row-gap: 24px; }
html .cta-band__copy { margin-top: 12px; font-size: clamp(1.02rem, 1.2vw, 1.15rem); color: var(--m-ink-deep); }
html .cta-band :focus-visible { outline-color: var(--m-ink); }

/* ---------- 15. Legal + footer ---------- */
/* the cannabis warnings keep full-strength ink on frost (5:1+ anywhere on the shell), now as an inset panel */
html .legal { margin: clamp(24px, 3vw, 40px) var(--m-inset) 0; border-top: 0; border-radius: var(--m-panel-r); background: rgba(255, 255, 255, .55); }
/* stacked under another panel it keeps the panel rhythm (same gap as between panels) */
html :is(.deli, .rewards-band, .brands-band, .cta-band, .jnl-close) + .legal { margin-top: var(--m-inset); }
html .legal > .container { padding-inline: var(--m-pad); }
html .legal :is(p, .muted), html .legal .legal__title { color: var(--m-ink); }
html .legal .legal__title { font-size: .95rem; letter-spacing: 0; text-transform: none; }
html .site-footer { margin-top: clamp(8px, 1vw, 16px); padding-top: clamp(40px, 4.4vw, 64px); border-radius: var(--m-panel-r) var(--m-panel-r) 0 0; }
html .site-footer__inner { padding-top: 0; }
html .site-footer__h { letter-spacing: .02em; text-transform: none; font-size: 1rem; }
html .site-footer__legal { color: rgba(255, 255, 255, .7); }
/* closing bands on coral: the deeper ink keeps the store-switch link above 4.5:1 */
html .jnl-close, html .jnl-close :is(.eyebrow, .jnl-close__change) { color: var(--m-ink-deep); }
/* phones: the Shop / Joyology accordion buttons match the "Our stores" heading */
@media (max-width: 767px) {
	html.js .site-footer__toggle { font-size: 1rem; letter-spacing: .02em; text-transform: none; }
}

/* ---------- 16. Inner-page heroes + cards ---------- */
html :is(.store-card, .joy-sb__steps li, .joy-sb__card, .joy-sb__nearby-body) { border-radius: var(--m-card-r); }
html .joy-catrow[data-grad], html .joy-cathero[data-grad], html .referral__art[data-grad] { border-radius: var(--m-panel-r); box-shadow: none; }
html :is(.joy-catrow, .joy-cathero)[data-grad] :is(.joy-catrow__img, .joy-cathero__img) { border: 0; border-radius: var(--m-card-r); }
/* category titles take each gradient's own ink: navy on the light ramps, white on emerald / violet */
html :is(.joy-catrow, .joy-cathero)[data-grad] :is(.joy-catrow__title, .joy-cathero__title) { color: var(--grad-ink, #fff); text-shadow: none; }
html :is(.joy-catrow, .joy-cathero):is([data-grad="emerald-green"], [data-grad="dream-violet"]) :is(.joy-catrow__title, .joy-cathero__title) { text-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
html :is(.joy-catrow, .joy-cathero)[data-grad] :focus-visible { outline-color: var(--grad-ink, #fff); }
/* long bare URLs in guide copy (privacy policy) wrap instead of scrolling the page sideways */
html .joy-seo__body a { overflow-wrap: anywhere; }

/* ---------- 17. Mirrored inner pages (locations, store pages, deals, SEO pages) ---------- */
html .joy-page__title, html .joy-lochub__hero-text h1, html .joy-title {
	text-transform: lowercase; letter-spacing: -.03em; line-height: .95; text-wrap: balance;
}
html .joy-page__title { margin: 8px 0 clamp(28px, 3.4vw, 44px); font-size: clamp(2.6rem, 6vw, 5rem); }
html .joy-page__inner h2, html .joy-lochub__cats h2 { text-transform: lowercase; letter-spacing: -.02em; line-height: 1; text-wrap: balance; }
html .joy-page__inner h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
html .joy-lochub__hero-img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--m-card-r); box-shadow: 0 40px 70px -50px rgba(30, 14, 56, .9); }
html .joy-lochub__hero-img.store-art-circle { border-radius: var(--m-card-r); box-shadow: none; }
/* store pages: the city card heading + card labels follow the same type as the hero */
html .joy-lochub__city-text :is(h2, h3, .h2) { text-transform: lowercase; letter-spacing: -.02em; line-height: 1; }
html .joy-sb__eyebrow { font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
/* /daily-deals/ pairs with /locations/: same lowercase titles (scoped: .joy-seo__title is shared with the brand + strain guides) */
html .joy-deals .joy-seo__title, html .joy-deals__card h2 { text-transform: lowercase; letter-spacing: -.03em; line-height: .95; text-wrap: balance; }
html .joy-deals .joy-seo__title { font-size: clamp(2.6rem, 6vw, 5rem); }

/* /locations/: a pill row to jump to a store, then each store as card + map side by side */
html .page-locations .joy-page__inner { max-width: 1240px; }
html .joy-storebars { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(36px, 4.4vw, 60px); }
html .joy-storebars li {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 22px 0 8px;
	border-radius: 999px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); text-transform: lowercase;
}
html .joy-storebars .joy-storebars__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--m-lime); color: var(--m-ink); -webkit-text-stroke: 0; font-size: 1rem; }
html .joy-storebars li:has(> a) { padding: 0; }
html .joy-storebars li:has(> a) .joy-storebars__num { margin-left: 8px; }
html .joy-storebars li > a { display: inline-flex; align-items: center; align-self: stretch; padding-right: 22px; }
html .joy-storebars li > a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
html .joy-storebars li { position: relative; }
/* "(coming soon)": the template's inline 0.6em was too small on the pill */
html .joy-storebars li > span[style] { opacity: 1; color: #4b6573; font-size: .8rem !important; font-weight: 600; }
/* keyboard focus rings the whole pill, not a square around the text */
html .joy-storebars li > a:focus-visible { outline: none; }
html .joy-storebars li > a:focus-visible::after { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
html .joy-storedetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(36px, 4vw, 56px); }
html .joy-storedetail h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.9rem, 3.2vw, 3rem); text-transform: lowercase; letter-spacing: -.03em; line-height: .95; }
html .joy-storedetail__card { padding: clamp(24px, 2.4vw, 36px); border-radius: var(--m-card-r); }
html .joy-storedetail__card address { font-size: 1.1rem; line-height: 1.5; }
html .joy-storedetail__card td { padding: 4px 18px 4px 0; font-size: 1rem; }
html .joy-storedetail .joy-map { height: 100%; min-height: 300px; margin: 0; border-radius: var(--m-card-r); }
@media (min-width: 900px) {
	html .joy-storedetail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
	html .joy-storedetail h2 { grid-column: 1 / -1; }
}
/* the areas + coming-soon copy keep an 860px line but start on the store sections' left edge */
html .joy-areas { max-width: 860px; margin-left: 0; margin-right: auto; text-align: left; }
html .joy-page__inner .joy-areas h2 { text-align: left; }
html .joy-page__inner .joy-areas p { color: #fff; }
html .joy-page__inner .joy-areas a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* a store page's six category tiles share one row on desktop: smaller name, arrow on the photo corner so long names fit */
@media (min-width: 1024px) {
	html .joy-lochub__cats .aisle__link[data-grad] .aisle__sign { padding: 12px 6px 6px; }
	html .joy-lochub__cats .aisle__link[data-grad] .aisle__name { font-size: clamp(1rem, 1.15vw, 1.4rem); white-space: nowrap; }
	html .joy-lochub__cats .aisle__link[data-grad] .aisle__arrow { top: 16px; right: 16px; bottom: auto; width: 34px; height: 34px; }
	html .joy-lochub__cats .aisle__link[data-grad] .aisle__arrow .icon { width: 16px; height: 16px; }
}
html .page-locations .joy-page__inner > h2 { text-align: left; max-width: 860px; margin-left: 0; margin-right: auto; }
html .page-locations .joy-page__inner > p[style] { text-align: left !important; max-width: 860px; margin-left: 0; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
	.hero__bento > *, .hero__tile img, .hero__tile-go, html .aisles .aisle__link[data-grad], html .aisles .aisle__link[data-grad] .aisle__media img, html .aisles .aisle__link[data-grad] .aisle__arrow { animation: none; transition: none; }
	.hero__tile:hover img, html .aisles .aisle__link[data-grad]:hover .aisle__media img { transform: none; }
}