/**
 * J24 chrome styles.
 *
 * These rules used to live only inside the dc app's <helmet>, so they shipped
 * with the app and nowhere else. An Elementor page has no app, which left the
 * desktop nav stuck at display:none and the mobile bar showing at every width.
 * They belong to the chrome, so they load on every page now.
 */

html, body {
	margin: 0;
	padding: 0;
	background: #FFFFFF;
	color: #1E1F1C;
	font-family: 'Source Serif 4', Georgia, serif;
	-webkit-font-smoothing: antialiased;
}

a { color: #1E1F1C; text-decoration: none; }
a:hover { color: #3E8A30; }

input, button { font-family: inherit; }
input::placeholder { font-size: 16px; color: #8A8C84; font-style: italic; }

/* ============================================================== brand strip */

@keyframes j24-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.j24-marquee {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px 0;
	width: 100%;
}

.j24-marquee__row {
	overflow: hidden;
	width: 100%;
}

.j24-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation-name: j24-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

.j24-marquee__track img {
	width: auto;
	display: block;
	flex: none;
	/* Elementor and theme resets both like to put a frame on images; the strip
	   is logos on a plain ground, nothing between them. */
	border: 0;
	outline: 0;
	box-shadow: none;
	background: none;
	max-width: none;
}

.j24-marquee--pause:hover .j24-marquee__track,
.j24-marquee__track:focus-within {
	animation-play-state: paused;
}

/* Drifting logos are decoration; hold them still for anyone who asks. */
@media (prefers-reduced-motion: reduce) {
	.j24-marquee__track { animation: none; }
	.j24-marquee__row   { overflow-x: auto; }
}

/* The desktop/mobile nav swap. Without this the header never appears. */
@media (min-width: 900px) {
	[data-desk-only]   { display: flex !important; }
	[data-mobile-only] { display: none !important; }
	[data-pad-bottom]  { padding-bottom: 0 !important; }

	/* Layout rules the app's own sections rely on. */
	[data-ru-two]   { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) !important; }
	[data-ru-map]   { order: 2; }
	[data-jt-row3]  { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
	[data-loc-map]  { grid-column: 2; grid-row: 1 / span 2; position: sticky !important; top: 12px; }
	[data-loc-search] { grid-column: 1; grid-row: 1; }
	[data-loc-result] { grid-column: 1; grid-row: 2; }
	[data-doors]      { grid-template-columns: repeat(3, 1fr) !important; }
	[data-doors] > a  { min-height: 62vh !important; }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.leaflet-container { font-family: 'Source Serif 4', Georgia, serif; }

/* ============================================================ site header */

/* Transparent over the hero, cream once it has cleared. Taps pass through while
   it is transparent so the hero stays clickable; the solid bar catches them. */
.j24-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 30;
	background: rgba(244,242,236,0);
	box-shadow: none;
	pointer-events: none;
	transition: background-color .28s ease,
	            transform .34s cubic-bezier(.22,.61,.36,1),
	            box-shadow .28s ease;
}

.j24-header.is-bar {
	background: #F4F2EC;
	box-shadow: 0 1px 0 #D6D3C9;
	pointer-events: auto;
}
.j24-header.is-hidden { transform: translateY(-100%); }

.j24-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	height: 61px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 900px) {
	.j24-header__inner { height: 72px; }
}

/* The hero carries its own lockup, so the bar's mark waits until it is past. */
.j24-header__logo {
	display: flex;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}
.j24-header.is-bar .j24-header__logo { opacity: 1; pointer-events: auto; }
.j24-header__logo img { height: 30px; width: auto; display: block; }

.j24-header__nav {
	display: none;
	gap: 35.2px;
	align-items: center;
	pointer-events: auto;
}

/* Over the hero the type is cream with a shadow; on the bar it is ink. */
.j24-header.is-bar .j24-header__nav a,
.j24-header.is-bar .j24-burger { color: #1E1F1C !important; }
.j24-header.is-bar .j24-header__nav a { text-shadow: none !important; }

.j24-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--j24-ink, #F4F2EC);
	cursor: pointer;
	pointer-events: auto;
	transition: color .28s ease;
}

@media (min-width: 900px) {
	.j24-header__nav { display: flex !important; }
	.j24-burger { display: none; }
}

/* ------------------------------------------------------------- the drawer */

.j24-scrim {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(30,31,28,.45);
	opacity: 0;
	transition: opacity .3s ease;
}
.j24-scrim.is-open { opacity: 1; }

.j24-drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	z-index: 41;
	width: min(84vw, 340px);
	box-sizing: border-box;
	padding: 22px 24px calc(28px + env(safe-area-inset-bottom));
	background: #F4F2EC;
	color: #1E1F1C;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
	pointer-events: none;
}
.j24-drawer.is-open {
	transform: translateX(0);
	pointer-events: auto;
}

.j24-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.j24-drawer__top img { height: 30px; width: auto; display: block; }

.j24-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1E1F1C;
	cursor: pointer;
}

.j24-drawer__nav { display: flex; flex-direction: column; }

@media (min-width: 900px) {
	.j24-drawer, .j24-scrim { display: none !important; }
}

body.j24-drawer-open { overflow: hidden; }

/* ================================================== store story (the editor) */

/* The story comes from the block editor, so it has to style whatever is in it -
   paragraphs, headings, images, embedded video, quotes - without the author
   having to think about layout. */
.j24-story {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 96px) 24px clamp(56px, 8vw, 112px);
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.55;
	color: #1E1F1C;
}

.j24-story > * { margin: 0 0 1.1em; }
.j24-story > *:last-child { margin-bottom: 0; }

.j24-story h2,
.j24-story h3,
.j24-story h4 {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1;
	margin: 1.8em 0 .5em;
}
.j24-story h2 { font-size: clamp(28px, 3.4vw, 46px); }
.j24-story h3 { font-size: clamp(22px, 2.4vw, 32px); color: #3E8A30; }
.j24-story h4 { font-size: clamp(19px, 1.8vw, 24px); }

.j24-story a { color: #3E8A30; text-decoration: underline; text-underline-offset: 3px; }

.j24-story blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 24px;
	border-left: 3px solid #4DAA3B;
	font-size: clamp(21px, 2vw, 28px);
	line-height: 1.3;
	font-style: italic;
	color: #3A3B36;
}

/* Media breaks out of the text column - that is the point of putting it here. */
.j24-story img,
.j24-story video,
.j24-story iframe {
	display: block;
	width: 100%;
	height: auto;
	margin: 1.6em 0;
}

.j24-story figure { margin: 1.8em 0; }
.j24-story figure img { margin: 0; }
.j24-story figcaption {
	margin-top: 10px;
	font-size: 15px;
	font-style: italic;
	color: #5D5F58;
	text-align: center;
}

/* Full-bleed and wide alignments, so a photo can run past the text column. */
.j24-story .alignwide,
.j24-story .alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}
.j24-story .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; width: auto; }

.j24-story .wp-block-embed__wrapper,
.j24-story .wp-block-video { margin: 1.6em 0; }

/* Keep 16:9 embeds (YouTube, Vimeo) from collapsing. */
.j24-story .wp-block-embed iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* ============================================== site shell and shared pieces */

.j24-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.j24-main { flex: 1; }

/* Visible only once focused, for keyboard users. */
.j24-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: #1E1F1C;
	color: #F4F2EC;
	padding: 14px 20px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.j24-skip:focus { left: 0; }

.j24-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 28px;
	background: #4DAA3B;
	color: #fff;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 17px;
	text-decoration: none;
}
.j24-btn:hover { background: #3E8A30; color: #fff; }

/* ------------------------------------------------ 404, search and the like */

.j24-simple {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(96px, 16vh, 200px) 24px clamp(72px, 10vw, 140px);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
}
.j24-simple--left { text-align: left; align-items: flex-start; max-width: 900px; }

.j24-simple__eyebrow {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #3E8A30;
}
.j24-simple__title {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(38px, 6vw, 84px);
	line-height: .95;
}
.j24-simple__body { margin: 0; font-size: clamp(18px, 1.5vw, 22px); color: #3A3B36; }

.j24-results { list-style: none; margin: 20px 0 0; padding: 0; width: 100%; }
.j24-results li { padding: 20px 0; border-top: 1px solid #E7E4DC; }
.j24-results a {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1;
}
.j24-results p { margin: 8px 0 0; color: #5D5F58; }

/* ------------------------------------------------------ the store hero/story */

.j24-story-hero {
	position: relative;
	min-height: 100vh;
	background: #1E1F1C;
	color: #F4F2EC;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}
/* Scoped to the background only. An unscoped `.j24-story-hero img` also caught
   the lockup inside the heading, and the !important there blew it up to fill
   the hero. */
.j24-story-hero__bg {
	position: absolute;
	left: 0; right: 0;
	top: -12%;
	width: 100% !important;
	height: 124% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
/* Clear at the top, deep at the bottom, so the stack of type below reads
   against it without the photograph being flattened. */
.j24-story-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(30,31,28,.2) 0%,
		rgba(30,31,28,0) 25%,
		rgba(30,31,28,.9) 75%,
		rgba(30,31,28,.97) 100%);
}
.j24-story-hero__inner {
	position: relative;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 0 24px 56px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.j24-story-hero__back {
	font-size: 15px;
	color: #A9AB9F;
	font-style: italic;
	text-decoration: none;
}
.j24-story-hero__back:hover { color: #fff; }

.j24-story-hero__title {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(44px, 7.6vw, 150px);
	line-height: .9;
	letter-spacing: .005em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .18em;
	text-shadow: 0 2px 28px rgba(30,31,28,.7);
}
/* In em, so the mark scales with the name rather than fighting it. */
.j24-story-hero__logo {
	height: 1.3em;
	width: auto;
	display: block;
	max-width: none !important;
}

.j24-story-hero__owners {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: clamp(24px, 2.8vw, 44px);
	line-height: 1;
}
.j24-story-hero__meta {
	margin: 0;
	font-size: 16px;
	color: #A9AB9F;
	font-style: italic;
}

.j24-more { max-width: 1400px; margin: 0 auto; padding: 0 24px clamp(72px, 10vw, 140px); }
.j24-more__label {
	margin: 0 0 28px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700; font-size: 17px; letter-spacing: .14em;
	text-transform: uppercase; color: #3E8A30;
}
.j24-more__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 16px;
}
.j24-more__card {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 36vh; overflow: hidden;
	background: #1E1F1C; color: #F4F2EC; text-decoration: none;
}
.j24-more__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.j24-more__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,31,28,0) 40%, rgba(30,31,28,.88) 100%); }
.j24-more__name {
	position: relative; padding: 18px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1;
}

/* --------------------------------------------------------- footer widgets */

.j24-footer-widgets { background: #F4F2EC; border-top: 1px solid #E7E4DC; }
.j24-footer-widgets__inner {
	max-width: 1400px; margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 32px 48px;
}
.j24-fw__title {
	margin: 0 0 12px;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700; font-size: 17px; letter-spacing: .12em;
	text-transform: uppercase; color: #1E1F1C;
}
.j24-footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.j24-footer-widgets li { margin: 0 0 8px; font-size: 16px; }
.j24-footer-widgets a { color: #3A3B36; }
.j24-footer-widgets a:hover { color: #3E8A30; }

/* ================================================================= footer */

.j24-footer { background: #FFFFFF; border-top: 1px solid #E7E4DC; }

/* Two layouts, swapped at 900px. A single grid that re-flowed was tried and
   rejected because it changed desktop as well. */
.j24-foot-desk { display: none; }
.j24-foot-mob  { display: block; }

@media (min-width: 900px) {
	.j24-foot-desk { display: block; }
	.j24-foot-mob  { display: none; }
}

.j24-foot__brand { display: flex; align-items: center; gap: 16px; }

.j24-foot__copy { font-size: 14px; color: #5D5F58; }
/* A fixed size cannot know the viewport, and the line needs ~29.5em, so it
   wrapped on small phones at every size tried. The floor only engages below a
   320px screen. */
.j24-foot__copy--mob { font-size: clamp(8px, 2.5vw, 14px); white-space: nowrap; }

.j24-foot__group { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.j24-foot__heading {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1E1F1C;
}

/* ------------------------------------------------------------ desktop */

.j24-foot-desk__top {
	max-width: 1400px; margin: 0 auto;
	padding: 32px 24px 24px;
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between;
	gap: 16px 32px;
}
.j24-foot-desk__nav { display: flex; flex-wrap: wrap; gap: 16px 36px; }
.j24-foot-desk__nav a:hover { color: #3E8A30; }

.j24-foot-desk__base {
	max-width: 1400px; margin: 0 auto;
	padding: 20px 24px 32px;
	border-top: 1px solid #E1DED4;
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between;
	gap: 12px 32px;
}
.j24-foot-desk__small { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.j24-foot-desk__small a:hover { color: #1E1F1C; }

/* -------------------------------------------------------------- phone */

.j24-foot-mob__grid {
	max-width: 1400px; margin: 0 auto;
	padding: 40px 24px 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 20px;
}
.j24-foot-mob__brand {
	grid-column: 1 / -1;
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.j24-foot-mob__stack { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.j24-foot-mob__base {
	max-width: 1400px; margin: 0 auto;
	padding: 0 24px 28px;
}
.j24-foot-mob a:hover { color: #1E1F1C; }

/* ========================================================== giant stories */

.j24-stores {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 112px) 24px;
}

.j24-stores__grid {
	display: grid;
	gap: 32px 20px;
}

.j24-store-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: #1E1F1C;
	text-decoration: none;
}
.j24-store-card:hover { color: #3E8A30; }

/* The photo is a fixed 4:5 frame so every card lines up however tall the
   caption beneath it runs. */
.j24-store-card__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #1E1F1C;
}
/* Elementor ships `.elementor img { height: auto }`, which beats a plain
   height:100% and leaves the photo floating in the frame with black beneath
   it. This has to win. */
.j24-store-card__frame img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

/* The green plate sits on the photo's bottom edge, not over the whole image. */
/* A common minimum height, so a one-word name and a four-word one still give
   plates that read as the same object across the grid. */
.j24-store-card__plate {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	min-height: 78px;
	box-sizing: border-box;
	background: #4DAA3B;
	color: #fff;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: .92;
}

/* The design was drawn against names like "Lashwik". Real ones run to
   "Sri Annapoorneshwari", so the type scales with the name's own length and
   long ones are allowed to break rather than burst the plate. */
.j24-store-card__name {
	display: block;
	width: 100%;
	font-size: clamp(20px, 2.2vw, 32px);
	overflow-wrap: anywhere;
	hyphens: auto;
}
.j24-store-card__name[data-len="long"]  { font-size: clamp(17px, 1.7vw, 25px); }
.j24-store-card__name[data-len="xlong"] { font-size: clamp(15px, 1.4vw, 20px); }
.j24-store-card__sub {
	font-size: 12px;
	letter-spacing: .2em;
}

/* Under 900px the grid drops to one column - minmax(240px, 1fr) cannot fit a
   second - so the card roughly doubles in width while the name shrinks to the
   clamp minimum, because 2.2vw of a 390px screen is 8.6px. The plate ended up
   with desktop's smallest type on its widest card.

   These sizes are not a new scale: they hold the proportion the desktop design
   already sets, where the name is about a tenth of the card's width. One
   column means the card is 100vw minus the section's 24px gutters, so the vw
   figures are that proportion expressed against the viewport. Only the grid is
   touched - the single store page reuses these classes on a full-bleed hero,
   where the desktop sizes are already right. */
@media (max-width: 899px) {
	.j24-stores__grid .j24-store-card__plate {
		min-height: 92px;
		padding: 12px 14px;
	}
	.j24-stores__grid .j24-store-card__name                   { font-size: clamp(24px, 9.5vw, 40px); }
	.j24-stores__grid .j24-store-card__name[data-len="long"]  { font-size: clamp(21px, 7.6vw, 34px); }
	.j24-stores__grid .j24-store-card__name[data-len="xlong"] { font-size: clamp(18px, 6.3vw, 28px); }
	/* "Essentials" scales with the card too, rather than sitting at a fixed
	   size under a name that grew. Every store on the page uses this one word,
	   so there is no longer label to burst the plate. The tracking eases off
	   slightly because .22em of a 19px word is a lot of air on a phone. */
	.j24-stores__grid .j24-store-card__sub {
		font-size: clamp(16px, 4.6vw, 22px);
		letter-spacing: .18em;
	}
}

.j24-store-card__why {
	font-size: 18px;
	line-height: 1.35;
	text-wrap: pretty;
}
.j24-store-card__meta {
	font-size: 15px;
	color: #5D5F58;
	font-style: italic;
	margin-top: -8px;
}

.j24-stores__note {
	margin: 32px 0 0;
	font: 12px/1.6 ui-monospace, Menlo, monospace;
	color: #5D5F58;
}

/* ------------------------------------------------------ find your giant */

.j24-locator {
	position: relative;
	min-height: 90vh;
	background: repeating-linear-gradient(135deg, #2C2D29 0 16px, #262723 16px 32px);
	color: #F4F2EC;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.j24-locator__note {
	position: absolute;
	right: 24px;
	top: 28px;
	font: 12px/1.6 ui-monospace, Menlo, monospace;
	color: #A9AB9F;
	letter-spacing: .04em;
	text-align: right;
}

/* Store map. Fills the empty upper half of the locator, which the title and
   list leave open because the section pins its content to the bottom. */
.j24-locator__map {
	position: relative;
	width: 100%;
	/* .j24-locator is a flex column, so this is a flex item: without flex:0 0
	   auto it shrinks to fit alongside the title and the 36-row list, and a
	   zero-height container is a blank map - Google paints nothing into it. */
	flex: 0 0 auto;
	height: clamp(320px, 42vh, 520px);
	background: #2C2D29;
}

/* Taller on desktop: the section is min-height 90vh and the pins spread across
   the whole city, so a short box wastes the room and crowds the markers. */
@media (min-width: 900px) {
	.j24-locator__map {
		height: clamp(460px, 62vh, 760px);
	}
}

/* Left blank on purpose while the map builds: an empty dark panel reads as
   part of the section, where a spinner over a striped background does not. */
.j24-locator__map[data-state="error"]::after,
.j24-locator__map[data-state="unconfigured"]::after {
	content: "Map unavailable.";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 13px/1.6 ui-monospace, Menlo, monospace;
	color: #A9AB9F;
}

/* The pin, identical in shape to the home page's: a rounded square turned 45
   degrees so one corner is the point, mark counter-rotated upright. The 8px
   bottom margin lifts it so the point, not the box, sits on the coordinate. */
.j24-map-pin {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 8px;
	background: #fff;
	border: 1.5px solid #1e1f1c;
	border-radius: 50% 50% 50% 0;
	box-shadow: 2px 2px 5px rgb(0 0 0 / 25%);
	transform: rotate(-45deg);
}

.j24-map-pin img {
	display: block;
	width: 25px;
	height: auto;
	transform: rotate(45deg);
}

.j24-locator__inner {
	position: relative;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	padding: 96px 24px 64px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 40px 80px;
	align-items: end;
}

.j24-locator__title {
	margin: 0;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(52px, 8vw, 130px);
	line-height: .9;
	letter-spacing: .005em;
}

.j24-locator__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 60vh;
	overflow-y: auto;
}
.j24-locator__list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	color: #F4F2EC;
	text-decoration: none;
}
.j24-locator__list a:hover { color: #8FD47F; }

.j24-locator__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.j24-locator__area {
	color: #A9AB9F;
	font-style: italic;
	font-size: 16px;
	white-space: nowrap;
}

/* Previous / next Giant on a single store page. Mirrors the static site's
   story footer: a rule across the top, prev left and next right, wrapping to
   one column on narrow screens. */
.j24-storenav { max-width: 1400px; margin: 0 auto; padding: 0 24px clamp(40px, 6vw, 72px); }
.j24-storenav__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 16px;
	border-top: 2px solid #1E1F1C;
	padding-top: 24px;
}
.j24-storenav__link {
	display: flex; flex-direction: column; gap: 6px;
	color: #1E1F1C; min-height: 44px; text-decoration: none;
}
.j24-storenav__link:hover { color: #3E8A30; }
.j24-storenav__link--next { text-align: right; align-items: flex-end; }
.j24-storenav__kicker {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700; font-size: 13px; letter-spacing: .14em;
	text-transform: uppercase; color: #3E8A30;
}
.j24-storenav__name {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800; text-transform: uppercase;
	font-size: clamp(24px, 2.4vw, 36px); line-height: .95;
}
.j24-storenav__area { font-size: 15px; color: #5D5F58; }

/* Seller details, matching the static site's footer: a hairline above, small
   muted type, one line per span. */
.j24-foot__legal {
	max-width: 1400px;
	margin: 0 auto;
	padding: 18px 24px 20px;
	border-top: 1px solid #E1DED4;
	font-size: 13px;
	line-height: 1.65;
	color: #5D5F58;
}

.j24-foot__legal span {
	display: block;
}

/* Ordinary WordPress pages (Privacy Policy, Terms of Service). The app pages
   are full-bleed compositions; these are documents, so they get a reading
   column and the body serif the rest of the site uses for prose. */
.j24-page {
	max-width: 820px;
	margin: 0 auto;
	/* The header is position:fixed, so a document page has to reserve its height
	   or the title renders underneath it. The old top padding was
	   clamp(48px, 6vw, 96px), which bottoms out at 48px on a phone against a
	   61px header - so "Privacy Policy" and "Terms of Use" sat 13px behind the
	   bar. It only worked on a desktop because 6vw of 1350px happens to clear
	   72px. Reserving the height explicitly makes that not a coincidence. */
	--j24-header-h: 61px;
	padding: calc(var(--j24-header-h) + clamp(24px, 3vw, 32px)) 24px clamp(56px, 7vw, 104px);
}

@media (min-width: 900px) {
	/* Keep in step with .j24-header__inner, which is 72px from this width up. */
	.j24-page { --j24-header-h: 72px; }
}

.j24-page__title {
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(36px, 5vw, 72px);
	line-height: .95;
	letter-spacing: .005em;
	color: #1E1F1C;
}

.j24-page__body {
	font-size: 18px;
	line-height: 1.6;
	color: #3A3B36;
}

.j24-page__body h2 {
	margin: 2em 0 .6em;
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 26px;
	letter-spacing: .03em;
	color: #1E1F1C;
}

.j24-page__body h3 { margin: 1.6em 0 .5em; font-size: 20px; color: #1E1F1C; }
.j24-page__body p,
.j24-page__body ul,
.j24-page__body ol { margin: 0 0 1.1em; }
.j24-page__body ul,
.j24-page__body ol { padding-left: 1.3em; }
.j24-page__body li { margin-bottom: .45em; }
.j24-page__body a { color: #3E8A30; }