/*
 * Store location page — pairs with template-store-location.php. Only
 * enqueued on pages using that template (see functions-enqueue-snippet.php).
 *
 * Rebuilt against the byte-exact approved source for the Idaho Falls /
 * Channing Way pilot, committed as
 * reference-designs/store-location-pilot-1047.html — class names, colors,
 * and behavior below carry over from that file; only store-specific
 * content (text, links) is parameterized in the PHP template.
 */

/* AutoOps scheduler buttons (see inc/autoops-scheduler.php) are real
   <button> elements now, not <a> links — JS-triggered, no navigation.
   Resets browser default button chrome (border/appearance/cursor) so they
   still match the .gm-btn/.gm-btn-primary look exactly. Lower specificity
   than every .gm-btn rule below (single class vs. two), so this only fills
   gaps those rules leave (e.g. .gm-cta .gm-btn-primary sets no border of
   its own) and never overrides anything already styled there. */
.autoops-button {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* Page background change, 2026-08-07 handoff — targets `body`, not
   `.gm-store-page` directly, because that element is a centered
   max-width: 1100px column (below), not a full-bleed layer; a background
   set on it alone would only color that 1100px column, leaving a white
   gutter outside it on wide viewports instead of an edge-to-edge grey
   page background. `:has()` keeps this scoped to pages that render this
   template only, without touching the global `body` rule other
   templates rely on. header.php's `.gm-header` and footer.php both set
   their own explicit backgrounds already (#fff / #000), so they're
   unaffected by this. */
body:has(.gm-store-page) {
	background: #eaeef1;
}
.gm-store-page {
	--gm-red: #ed2e38;
	--gm-navy: #000000;
	--gm-gray: #595959;
	--gm-light: #f7f7f7;
	/* Real coupon-card red from greasemonkey.com's own resolved CSS variable
	   (--button-primary-light-default), deliberately separate from --gm-red
	   above — the coupon card is the one place this project already had a
	   real, extractable source value to check against, so it's used
	   verbatim rather than assumed close enough to the brand red. */
	--coupon-red: #d6131d;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1a1a1a;
	max-width: 1100px;
	margin: 0 auto;
}
.gm-store-page a {
	color: inherit;
}

/* Hero — full-bleed edge-to-edge (100vw technique) independent of the
   centered .gm-store-page content wrapper. Pure CSS, no JS needed: replaces
   the earlier getBoundingClientRect()-based negative-margin approach, which
   left a brief flash of non-full-bleed layout before JS ran on first paint. */
.gm-hero2 {
	display: grid;
	grid-template-columns: 35% 65%;
	gap: 0;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 40px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background: linear-gradient(180deg, #000 0%, #000 40%, #210202 55%, #450808 75%, #651010 95%);
}
.gm-hero2-left {
	background: transparent;
	color: #fff;
	padding: 40px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.gm-hero2-crumbs {
	font-size: 0.8rem;
	margin: 0 0 18px;
	opacity: 0.85;
}
.gm-hero2-crumbs a {
	color: #fff;
	text-decoration: underline;
}
.gm-hero2-crumbs span {
	opacity: 0.5;
	margin: 0 6px;
}
/* Minor size correction, 2026-08-05 — measured live at 54.28px, this was
   2.6rem (~41.6px); rest of the hero (map, buttons, rows) already matched
   closely, this was the one real gap found. */
.gm-hero2-left h1 {
	font-family: 'Rubik', sans-serif;
	font-size: 3.375rem;
	font-weight: 700;
	margin: 0 0 4px;
	line-height: 1;
	color: #fff;
}
.gm-hero2-sub {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 1;
	margin: 0 0 14px;
}
/* Whole rating block is now the link to the GBP reviews profile (the
   handoff's replacement for a separate "Read Reviews ->" text link). */
.gm-hero2-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	margin-bottom: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	flex-wrap: wrap;
	font-family: 'DM Sans', sans-serif;
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
	transition: opacity 0.2s linear;
}
.gm-hero2-rating:hover {
	text-decoration: underline;
	opacity: 1;
}
.gm-hero2-rating .stars {
	color: #fff;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.gm-hero2-rating .stars i {
	font-size: 0.95rem;
}
.gm-hero2-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.85rem;
	font-family: 'DM Sans', sans-serif;
}
.gm-hero2-row > span {
	display: flex;
	align-items: center;
	gap: 10px;
}
.gm-hero2-row i {
	color: #fff;
	font-size: 0.95rem;
	width: 16px;
	text-align: center;
}
.gm-hero2-row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	color: #fff;
	text-decoration: none;
}
.gm-hero2-row a span {
	display: flex;
	align-items: center;
	gap: 10px;
}
.gm-hero2-row a .gm-row-arrow {
	opacity: 0.7;
	transition: opacity 0.2s linear;
	transform: rotate(-45deg);
	font-size: 0.8rem;
}
.gm-hero2-row a:hover span {
	text-decoration: underline;
}
.gm-hero2-row a:hover .gm-row-arrow {
	opacity: 1;
}
/* Filled pill — colored background + white bold text, not the earlier
   outline treatment (transparent background, colored border/text). */
.gm-hero2-status {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 64px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: 'Rubik', sans-serif;
	margin-right: 8px;
	vertical-align: middle;
	color: #fff;
}
.gm-status-open {
	background: #00cc44;
}
.gm-status-closed {
	background: var(--gm-red);
}
.gm-hero2-ctas {
	margin-top: 22px;
}
.gm-hero2-ctas .gm-btn {
	display: block;
	text-align: center;
	width: 100%;
	padding: 14px;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 10px;
	font-size: 1.05rem;
	box-sizing: border-box;
	font-family: 'DM Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}
.gm-hero2-ctas .gm-btn-primary {
	background: var(--gm-red);
	border-color: var(--gm-red);
	color: #fff;
}
.gm-hero2-ctas .gm-btn-primary:hover {
	background: #ad1017;
	border-color: #ad1017;
	color: #fff;
}
/* Pricing / View Coupons / Contact Us — unified font-size across the
   standalone Pricing button and the 2-col View Coupons/Contact Us row
   (previously Pricing was 1.05rem while the row was 0.9rem with
   letter-spacing zeroed out; both now inherit uppercase + letter-spacing
   from the base .gm-btn rule above instead of overriding it). */
.gm-hero2-ctas .gm-btn-outline {
	background: transparent;
	color: #fff;
	border-color: var(--gm-red);
	font-size: 0.9rem;
}
.gm-hero2-ctas .gm-btn-outline:hover {
	background: var(--gm-red);
	border-color: var(--gm-red);
	color: #fff;
}
.gm-hero2-btn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.gm-hero2-btn-row .gm-btn {
	padding: 14px 6px;
}
.gm-hero2-map {
	min-height: 420px;
	padding: 72px;
	box-sizing: border-box;
	background: transparent;
}
.gm-hero2-map iframe {
	width: 100%;
	height: 100%;
	min-height: 276px;
	border: 0;
	display: block;
}

/* Hours accordion — rounded card with a subtle background, distinct from
   the flat address/phone rows above it. Exact color/radius values are a
   best-effort default (not pulled from the DC file, which this session
   can't reach) — revisit if that turns out to matter pixel-for-pixel. */
.gm-hero2-hours-wrap {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 2px 16px;
	margin: 4px 0;
}
.gm-hero2-hours-wrap .gm-hero2-hours-toggle {
	border-bottom: none;
}
.gm-hero2-hours-toggle {
	cursor: pointer;
}
.gm-hero2-hours-toggle .gm-hours-chevron {
	color: #fff;
	font-size: 0.85rem;
	opacity: 0.8;
	margin-left: 14px;
	transition: transform 0.2s linear;
}
.gm-hero2-hours-wrap.gm-hours-open .gm-hours-chevron {
	transform: rotate(180deg);
}
.gm-hero2-hours-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.gm-hero2-hours-wrap.gm-hours-open .gm-hero2-hours-list {
	max-height: 300px;
}
.gm-hero2-hours-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 8px 0 8px 26px;
	font-size: 0.9rem;
	font-family: 'DM Sans', sans-serif;
	color: #fff;
	opacity: 0.85;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gm-hero2-hours-row span:first-child {
	width: 64px;
	flex-shrink: 0;
}
.gm-hero2-hours-row:last-child {
	border-bottom: none;
}
.gm-hero2-hours-row.gm-hours-today {
	opacity: 1;
	font-weight: 700;
}

/* Quick Links nav (added 2026-08-05) — matches greasemonkey.com's own
   sticky jump-nav (`block-quick-links`), confirmed reading the real
   page's markup + its inline CSS directly. Real site uses `position:
   fixed` + a `body.past-hero` class toggled by JS to slide the bar in
   once the hero scrolls out of view; built here with `position: sticky`
   instead — simpler (no scroll-listener needed just to decide
   visibility) and gives the same practical result: inert while the hero
   is on screen, pinned under the header once the user scrolls past it.
   `top` values below are the real header height, measured live against
   the running site at both breakpoints (72px desktop / 110px mobile,
   where the header wraps to 2 rows) — see .gm-site-header in
   site-header.css, no header-height custom property exists to reference
   instead. */
.gm-quick-links {
	position: sticky;
	top: 110px;
	z-index: 40;
	background: #eaeef1; /* matches the page background above, 2026-08-07 handoff — was #fff */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 44px;
}
.gm-quick-links-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
/* Mobile: collapsible combobox behind a button showing the current
   in-view section's label (kept in sync by store-location.js's
   IntersectionObserver) — matches the real site's mobile behavior. */
/* :hover/:focus states repeated explicitly, not just the bare selector —
   GeneratePress's own global `button:focus`/`button:hover` rules (theme
   default, styles every plain <button> dark-on-dark) are one specificity
   point higher than a single class alone (element+pseudo beats class),
   so they silently win after this button is clicked and keeps focus —
   confirmed live via a real click + getComputedStyle before this fix
   (background rgb(63,64,71), text white, unreadable against this bar's
   own white background). */
.gm-quick-links-toggle,
.gm-quick-links-toggle:hover,
.gm-quick-links-toggle:focus {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 14px 4px;
	background: transparent;
	border: none;
	appearance: none;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--gm-navy);
	cursor: pointer;
}
.gm-quick-links-toggle i {
	transition: transform 0.2s linear;
	font-size: 0.8rem;
}
.gm-quick-links-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}
.gm-quick-links-content {
	display: none;
	padding-bottom: 14px;
}
.gm-quick-links-content.is-open {
	display: block;
}
.gm-quick-links-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
/* Corrected 2026-08-05 — measured live: uppercase, weight 700, 16px, was
   plain-case/600/0.9rem here. */
.gm-quick-links-link {
	display: block;
	padding: 10px 4px;
	color: var(--gm-gray);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.gm-quick-links-link.is-active {
	color: var(--coupon-red);
}
.gm-quick-links-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Scoped outline-button treatment, same reasoning as
   .gm-store-teaser/.gm-store-nearby-card above — this file's own
   .gm-btn-outline is styled white-on-dark for .gm-cta/.gm-hero2-ctas,
   this nav sits on a white background instead. */
.gm-quick-links .gm-btn {
	display: inline-block;
	text-align: center;
	padding: 10px 20px;
	/* Corrected 2026-08-05 — real buttons measured border-radius: 4px. */
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	/* Corrected 2026-08-05 — real buttons are upper-cased via CSS. */
	text-transform: uppercase;
}
.gm-quick-links .gm-btn-outline {
	background: transparent;
	color: var(--coupon-red);
	border: 2px solid var(--coupon-red);
}
.gm-quick-links .gm-btn-outline:hover {
	background: var(--coupon-red);
	color: #fff;
}

@media (min-width: 992px) {
	.gm-quick-links {
		top: 72px;
	}
	.gm-quick-links-toggle {
		display: none;
	}
	.gm-quick-links-content {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 14px 0;
	}
	.gm-quick-links-list {
		display: flex;
		flex-direction: row;
		gap: 28px;
		margin: 0;
	}
	.gm-quick-links-link {
		padding: 0;
		border-bottom: none;
		position: relative;
	}
	.gm-quick-links-link::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -6px;
		width: 100%;
		height: 2px;
		background: var(--coupon-red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s linear;
	}
	.gm-quick-links-link.is-active::after {
		transform: scaleX(1);
	}
	.gm-quick-links-buttons {
		flex-direction: row;
		flex-shrink: 0;
	}
}

/* Sections */
.gm-section {
	margin-bottom: 44px;
}
/* Corrected 2026-08-05 — measured live against the real page
   (getComputedStyle, 1280px viewport): section H2s render at ~40.67px
   there (2.5rem+), not the 1.4rem this used to be — real headings read
   noticeably bigger/bolder than what this file had. Real value is fluid
   (clamp()-based, viewport-dependent) — 2.5rem is a fixed, close
   approximation, not a byte-exact replication of their clamp() formula. */
.gm-section h2 {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 6px;
	color: var(--gm-navy);
}
@media (max-width: 760px) {
	/* Real site measured at ~30px at this width (still fluid/clamped) —
	   scaled down from desktop's 2.5rem here too, same reasoning. */
	.gm-section h2 {
		font-size: 1.875rem;
	}
}
.gm-section .gm-sub {
	color: var(--gm-gray);
	font-size: 0.92rem;
	margin: 0 0 20px;
}

/* Two-tone headings — "Car Maintenance {You Can Count On}", "Your FAQ,
   {Answered}" — matching greasemonkey.com's real heading treatment for
   these two sections (verified 2026-08-05). */
.highlight-text {
	color: var(--gm-red);
}

/* Services — real icon-card grid, matching greasemonkey.com's per-store
   Services section exactly (icon + title + description side by side,
   "Most Popular" banner + double-height card for the featured entry)
   rather than the flat text-pill list this used to be, and rather than
   the icon-above-text single-column card this went through as a first
   pass — confirmed 2026-08-05 against the real page's rendered layout.
   `grid-auto-flow: dense` + a fixed `grid-auto-rows` let the featured
   card's `grid-row: span 2` (below) actually mean something and let
   other cards backfill any gap it leaves, instead of just pushing
   everything down a row. */
.gm-store-services {
	display: grid;
	/* 3 fixed columns, not auto-fill — Carlos's explicit call, 2026-08-05:
	   4 columns at desktop widths made the cards too narrow/text too
	   small; 3 wider columns read better even though it's a step away
	   from the real page's own (also auto-fill-based) column count. */
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(120px, auto);
	grid-auto-flow: dense;
	gap: 16px;
}
.gm-store-service-card {
	display: flex;
	flex-direction: column;
	background: var(--gm-light);
	border-radius: 8px;
	padding: 20px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.gm-store-service-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
/* Icon + heading/description side by side (not stacked) — see the
   template's own .gm-store-service-row wrapper comment for why this is a
   nested row rather than a rule on .gm-store-service-card itself. */
.gm-store-service-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	flex: 1;
	min-height: 0;
}
.gm-store-service-icon {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
}
.gm-store-service-text {
	min-width: 0;
}
.gm-store-service-card h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--gm-navy);
	margin: 0 0 6px;
}
.gm-store-service-card p {
	font-size: 0.95rem;
	color: var(--gm-gray);
	margin: 0;
}
.gm-store-service-card.is-featured {
	/* Occupies the vertical space of two normal cards — real site's own
	   layout, confirmed 2026-08-05 (the banner sits above the same
	   icon+text row every other card has, so the whole card needs roughly
	   double a normal card's height to fit both). */
	grid-row: span 2;
	/* positioning context for .gm-store-service-featured-label below — the real
	   markup has the label as a sibling of the banner image, not nested
	   inside it, so it's positioned relative to the whole card rather
	   than clipped to the image's own box (confirmed 2026-08-05 reading
	   the live page directly; the label used to be nested in
	   .gm-store-service-banner here, positioned relative to that instead). */
	position: relative;
}
.gm-store-service-banner {
	width: 100%;
	margin: -20px -20px 14px;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}
.gm-store-service-banner img {
	width: 100%;
	height: auto;
	display: block;
}
.gm-store-service-featured-label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	background: var(--gm-red);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 4px;
}

.gm-store-additional-services {
	/* Own full-width row, separate from the card columns — confirmed
	   2026-08-05 against the real page's layout. Title-left/list-right
	   split, and the list itself reuses .gm-amenities-list verbatim (the
	   same class "Our Discounts"/"Why Our Customers Love Us" use) rather
	   than keeping a second, separately-maintained copy of the same
	   color/size/icon rules — Carlos's explicit ask, 2026-08-05, after the
	   two had drifted apart once already. */
	/* grid-column: 1 / -1 removed 2026-08-07 (DESIGN code audit, finding
	   #2) — this element is a sibling of .gm-store-services (the actual
	   grid), not a child of it, so the property had no effect; dead CSS. */
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	align-items: start;
	margin-top: 12px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}
/* Corrected 2026-08-05 — same section-heading measurement/fix as
   .gm-section h2 above; on the real page "Additional Services" reads at
   the same size as "Our Discounts"/"Why Our Customers Love Us", but this
   was still 1.05rem since it's an <h3>, not covered by that shared rule. */
.gm-store-additional-services h3 {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--gm-navy);
	margin: 0;
}
@media (max-width: 760px) {
	.gm-store-additional-services h3 {
		font-size: 1.875rem;
	}
}

@media (max-width: 760px) {
	.gm-store-additional-services {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Coupons — layout/values below extracted 2026-08-05 from the real
   greasemonkey.com page's own compiled CSS (already embedded inline in the
   HTML we'd fetched, under .coupon-card/.coupon-card__* — not a fresh
   hand-designed approximation as the first pass here was). Real DOM
   grouping also corrected to match: amount + code sit in the red top
   section (with the logo and background graphic); the service name +
   expiry/description sit in the white bottom section — the reverse of
   what this file had before. */
/* Carousel wrapper (added 2026-08-05) — prev/next arrows either side of the
   scrollable card track, matching the real site's Swiper layout without
   the Swiper library itself (native scroll-snap + JS scrollBy instead —
   see assets/js/store-location.js). */
/* Grid, not flex (changed 2026-08-08, CORRECTION-9) — .gm-coupons-dots
   moved in as a full sibling of the two nav buttons and the track (was a
   separate element below .gm-coupons-carousel entirely, in a different
   parent). Named areas let all four be freely rearranged per breakpoint
   without reparenting anything, which CSS can't do across different DOM
   parents — see the mobile override below for why this was necessary
   rather than a plain position tweak. */
/* Nav position, made the default at every width 2026-08-08 (CORRECTION-13)
   — was @media (max-width: 760px)-only from CORRECTION-9 (PR #54), which
   fixed only the mobile case (arrows floating mid-card at 1-card-per-view)
   and left desktop with the pre-fix layout (arrows vertically centered
   beside the 3-card row). John's ask: identical treatment everywhere.
   grid-template-columns: 36px 1fr 36px (not auto 1fr auto) matters here,
   not just at mobile — auto columns let .gm-coupons' unscrolled intrinsic
   width feed into the spanning "track" row's sizing and blow the grid
   wider than its container (the exact bug CORRECTION-9's own PR caught at
   375px). .gm-coupons already carries min-width: 0 for this, which
   contains it at desktop widths where there's slack to spare, but the
   fixed-width columns remove the ambiguity entirely rather than relying
   on that alone — verified in a real browser at both breakpoints below. */
.gm-coupons-carousel {
	position: relative;
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	grid-template-areas:
		"track track track"
		"prev dots next";
	align-items: center;
	column-gap: 10px;
	row-gap: 14px;
}
.gm-coupons-nav--prev {
	grid-area: prev;
}
.gm-coupons-nav--next {
	grid-area: next;
}
.gm-coupons-carousel > .gm-coupons {
	grid-area: track;
	min-width: 0; /* without this, a grid item defaults to min-width: auto,
	                 which can fight the intended overflow-x: auto scroll
	                 by trying to size the column to the unscrolled content */
}
.gm-coupons-carousel > .gm-coupons-dots {
	grid-area: dots;
	margin-top: 0; /* was 14px from the base .gm-coupons-dots rule further
	                   below — this grid's own row-gap provides that
	                   spacing now, at every width (CORRECTION-13; used to
	                   be zeroed only inside the ≤760px media block) */
}
/* :focus repeated explicitly — same GeneratePress-theme-default collision
   as .gm-quick-links-toggle above (its own comment has the full
   explanation): a plain <button> with no :focus rule of its own falls
   back to the theme's global button:focus (dark grey bg, white text),
   confirmed live via a real focus + getComputedStyle before this fix —
   this one predates today's session but is the same bug class, fixed
   alongside it. */
.gm-coupons-nav,
.gm-coupons-nav:focus {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	color: var(--gm-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}
.gm-coupons-nav:hover,
.gm-coupons-nav:focus:hover {
	border-color: var(--coupon-red);
	color: var(--coupon-red);
}
.gm-coupons-nav:disabled {
	opacity: 0.3;
	cursor: default;
}
/* Nothing to scroll (e.g. a store with only 1-2 coupons that already fit)
   — hide the arrows entirely rather than show a permanently-disabled pair. */
.gm-coupons-carousel--no-scroll .gm-coupons-nav {
	display: none;
}
.gm-coupons-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}
.gm-coupons-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #d5d5d5;
	cursor: pointer;
}
.gm-coupons-dot.is-active {
	background: var(--coupon-red);
}

.gm-coupons {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	/* hide the scrollbar (still keyboard/swipe/arrow-button scrollable) —
	   the real site's Swiper has its own pagination dots instead of a
	   visible native scrollbar, matched here the same way */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gm-coupons::-webkit-scrollbar {
	display: none;
}
.gm-coupon {
	position: relative;
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 2 * 16px) / 3);
	min-width: 240px;
	border-radius: 16px;
	/* overflow: hidden removed (CORRECTION-11) — it was being used to force
	   .gm-coupon-head's square top corners to visually clip round, but the
	   seam notches are children of .gm-coupon-head too and straddle this
	   card's own left/right edges on purpose (left:-14px / right:-14px).
	   The same clip that rounded the header also cut the outer half off
	   every notch, rendering it as a flat-edged half-moon instead of a
	   smooth circle. Corners are rounded explicitly per-section instead
	   now (.gm-coupon-head below, .gm-coupon-body further down) — matches
	   how the corporate reference actually does it (.coupon-card__bottom
	   rounds its own corners, not via a parent-level clip). The card's own
	   background-color still respects border-radius: 16px without
	   overflow: hidden — that property was never needed for the card's
	   own shape, only (incorrectly) for its children's. */
	background: #fff; /* CORRECTION-6 spot-check — was never set anywhere on
	                      the card, so .gm-coupon-body (which has no
	                      background of its own either) was silently
	                      showing the page's #eaeef1 grey through instead
	                      of the "white body" the brief specified. */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease;
}
.gm-coupon:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.gm-coupon:hover .gm-coupon-name {
	color: var(--coupon-red);
}
/* Head, rebuilt 2026-08-07 (CORRECTION-6) as a single element with a
   2-layer background (solid red pinned to the top 44px + the checkered
   art beneath, full cover) — replaces the earlier .gm-coupon-strip +
   .gm-coupon-panel split. That split is what caused two straight wrong
   guesses at .gm-coupon-logo's position: this element's own padding-top
   is what's supposed to place the logo straddling the seam, and a
   two-element split has no single "top" for a logo padded from to work
   against. This is coupon-redesign-handoff.md file ID
   1jVGGCTbTexwOC58ffrzSHRkOi5VS4Yop's .gm-coupon-art rule, adapted only
   where a static reference can't be (the checkered layer's URL is
   per-coupon and dynamic, set inline from PHP, so it's combined with the
   red gradient in the same inline background-image rather than hardcoded
   here). overflow: visible is required, not incidental — the seam
   notches are positioned relative to this element and need to spill past
   its own left/right edges to render as a full circle (CORRECTION-11) —
   see .gm-coupon's own comment above for why the card itself no longer
   clips them either. */
.gm-coupon-head {
	position: relative;
	border-radius: 16px 16px 0 0; /* explicit now that .gm-coupon no longer
	                                  clips this via overflow: hidden
	                                  (CORRECTION-11) */
	overflow: visible;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 14px 16px 34px;
	background-size: 100% 44px, cover;
	background-repeat: no-repeat, no-repeat;
	background-position: top, center;
}
/* Hover glow — a radial-gradient overlay on its own pseudo-element rather
   than literally adding a third background-image layer on hover (the
   reference CSS's own technique), since this element's background-image
   already carries a per-coupon dynamic URL set inline from PHP and can't
   be swapped wholesale by a static CSS hover rule. Same visual result. */
.gm-coupon-head::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 90% 70% at 50% 85%, rgba(214, 19, 29, 0.6), rgba(214, 19, 29, 0) 70%);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.gm-coupon:hover .gm-coupon-head::before,
.gm-coupon-head--glow::before {
	opacity: 1;
}
/* Verbatim from coupon-redesign-handoff.md file ID
   1jVGGCTbTexwOC58ffrzSHRkOi5VS4Yop's .gm-coupon-logo rule (CORRECTION-6)
   — no margin-top, no filter. Two prior fixes (CORRECTION-3, CORRECTION-5)
   each re-derived their own values instead of using this block directly;
   both were wrong. .gm-coupon-head's own padding-top: 14px above is what
   places this 44px-tall logo straddling the red/checkered seam (14px into
   the 44px red band above it, 30px still showing red, 14px dipping into
   the checkered art below) — not a margin on the logo itself. */
.gm-coupon-logo {
	position: relative;
	height: 44px;
	width: auto;
	display: inline-block;
	margin-bottom: 16px;
}
.gm-coupon-amount {
	position: relative;
	display: block;
	color: #fff;
	font-weight: 400;
	font-size: 2.5rem;
	margin-bottom: 14px;
	font-family: 'Rubik', sans-serif; /* CORRECTION-6 spot-check — missing
	                                      before, so this was silently
	                                      inheriting .gm-store-page's base
	                                      DM Sans instead. */
}
.gm-coupon-code {
	position: relative;
	display: inline-block;
	background: #f5a623;
	color: #000;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	padding: 6px 16px;
	border-radius: 3px;
}
/* Seam notches — circular "bites" straddling the checkered-panel/white-body
   boundary. bottom: -14px is relative to .gm-coupon-head (the seam), not
   the card overall, since the head's total height is content-driven, not
   a fixed value this brief specified. */
.gm-coupon-notch {
	position: absolute;
	bottom: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #eaeef1;
	z-index: 2;
}
.gm-coupon-notch--left {
	left: -14px;
}
.gm-coupon-notch--right {
	right: -14px;
}
.gm-coupon-body {
	padding: 20px 24px;
	text-align: center;
	border-radius: 0 0 16px 16px; /* explicit now that .gm-coupon no longer
	                                  clips this via overflow: hidden
	                                  (CORRECTION-11) — .gm-coupon-body has
	                                  a transparent background so this is a
	                                  visual no-op against the white card
	                                  behind it, kept for correctness rather
	                                  than relying on that coincidence */
}
.gm-coupon-name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--gm-navy);
	margin: 0 0 8px;
	font-family: 'Rubik', sans-serif; /* CORRECTION-6 spot-check — same
	                                      missing-Rubik gap as .gm-coupon-amount */
	transition: color 0.2s ease;
	/* CORRECTION-8 — two line-heights (22.4px font-size * 1.2 line-height *
	   2 lines, confirmed via live computed style), so a one-line name (e.g.
	   "Tire Rotation") reserves the same vertical space as a two-line one
	   (e.g. "Full Service Premium Oil Change") — keeps the Redeem By/See
	   Details line and the action-button row at the same y-position across
	   every card in the carousel, regardless of whether a given title
	   actually wraps. */
	min-height: 53.76px;
}
.gm-coupon-body p.gm-expiry-line {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gm-gray);
	margin: 6px 0 0;
}
.gm-coupon-body p.gm-expiry-line a.gm-coupon-details-link {
	color: var(--gm-navy);
	text-decoration: underline;
}
.gm-coupon-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.gm-coupon-action {
	flex: 1 1 0;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--gm-navy);
	padding: 8px 4px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
/* Added directly per chat request, no Drive handoff filed for this one —
   TEXT/EMAIL/PRINT had no hover state at all before this. Stroke-only:
   border color to the same red already used for these buttons' own
   icons below, no fill/shadow/size change requested.
   background/color added 2026-08-08 (CORRECTION-12) — .gm-coupon-action
   is a plain <button>, and GeneratePress ships a global button:hover
   rule (background-color: #3f4047; color: #fff;) that also matches it
   and won visually over the border-only intent above, filling the
   whole button dark gray with white text. Same category of bug as
   .gm-coupon-modal-close's :focus override above — a custom interactive
   element needs to explicitly override GeneratePress's global button
   hover fill, not just add its own rule alongside it. */
.gm-coupon-action:hover {
	border-color: #ed2e38;
	background: #fff;
	color: var(--gm-navy);
}
.gm-coupon-action i {
	color: #ed2e38;
}

/* "See Details" modal (net new, 2026-08-07 handoff) */
.gm-coupon-modal {
	position: fixed;
	inset: 0;
	/* 1001 (was 200, CORRECTION-4) — .gm-site-header is position: sticky
	   with z-index: 1000 (assets/css/site-header.css), so at 200 the
	   modal always rendered underneath it, permanently hiding the close
	   button and the top of the card art. Deliberately a plain z-index
	   raise rather than constraining the overlay to start below the
	   header's rendered height: that height changes between the
	   unscrolled and .is-scrolled states (and can wrap onto more rows at
	   narrow widths — .gm-header is flex-wrap: wrap), and this codebase
	   has already been bitten twice by hardcoding an assumed header
	   height elsewhere (assets/css/store-location.css's own
	   .gm-quick-links top offset, flagged in the 2026-08-07 DESIGN code
	   audit, findings #7/#8) — a z-index bump has no such fragility. 1001
	   is the only value above 1000 anywhere in this codebase's CSS, so
	   there's nothing else to leapfrog into.  */
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.gm-coupon-modal[hidden] {
	display: none;
}
.gm-coupon-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}
.gm-coupon-modal-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
}
/* :focus repeated explicitly — same GeneratePress-theme-default collision
   already documented and fixed twice elsewhere in this file
   (.gm-quick-links-toggle, .gm-coupons-nav): a plain <button> with no
   :focus rule of its own falls back to the theme's global button:focus
   (dark grey bg, white text), which would replace this white circle with
   an unreadable dark square the moment it's tabbed to or clicked. Also
   adds display: flex centering (a bare line-height on a <button> doesn't
   reliably center a glyph vertically across browsers) and a hover/focus
   color change, since this was the only icon-button on the card/modal
   with no interactive state at all. */
.gm-coupon-modal-close,
.gm-coupon-modal-close:focus {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 8px; /* was 50% (circle) — CORRECTION-10, pixel-sampled
	                        from John's reference screenshots as a rounded
	                        square, ~8px corner radius */
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	font-size: 1.2rem;
	line-height: 1;
	color: var(--gm-navy);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}
.gm-coupon-modal-close:hover,
.gm-coupon-modal-close:focus:hover {
	color: var(--coupon-red);
	background: #ced3d6; /* CORRECTION-10 — pixel-sampled from the hover
	                         state in John's reference screenshots; no
	                         existing token in this codebase matches it */
}
.gm-coupon-modal-body {
	padding: 20px 24px 28px;
	text-align: center;
}
.gm-coupon-modal-name {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--gm-navy);
	margin: 0 0 10px;
}
.gm-coupon-modal-expiry {
	font-size: 0.85rem;
	color: var(--gm-gray);
	margin: 0 0 16px;
}
.gm-coupon-modal-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}
.gm-coupon-modal-action {
	flex: 1 1 0;
	border: none;
	border-radius: 6px;
	background: #2c4a6e;
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	padding: 10px 4px;
	cursor: pointer;
}
.gm-coupon-modal-locations-heading {
	text-align: left;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--gm-navy);
	margin: 0 0 8px;
}
.gm-coupon-modal-locations {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	text-align: left;
}
.gm-coupon-modal-location a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}
.gm-coupon-modal-location.is-current a {
	background: #fdecee;
}
.gm-coupon-modal-location-name {
	flex: 0 0 110px;
	font-weight: 700;
	color: var(--gm-navy);
}
.gm-coupon-modal-location-address {
	flex: 1 1 auto;
	font-size: 0.85rem;
	color: var(--gm-gray);
}
.gm-coupon-modal-location a i {
	flex: 0 0 auto;
	color: var(--coupon-red);
}
.gm-coupon-modal-disclaimer {
	background: #eef1f3;
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 0.75rem;
	color: var(--gm-gray);
	text-align: left;
}

/* "Our Discounts" / "Why Our Customers Love Us" (added 2026-08-05) — real
   greasemonkey.com layout: heading in a narrow left column, a 2-column
   checklist in a wider right column, confirmed reading the live page's own
   CSS (.block-icon-amenities__container is a 12-col grid, heading spans
   1-4, list spans 5-12 — approximated below with a simpler 1fr/2fr split,
   same visual ratio without needing the full 12-col system). Checkmark
   icon reuses Font Awesome (already loaded site-wide) rather than the
   real page's own mask-image SVG, which isn't an asset available here. */
.gm-amenities-block {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	align-items: start;
}
.gm-amenities-block h2 {
	margin: 0;
}
.gm-amenities-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 32px;
}
/* Corrected 2026-08-05 — measured live at 20px/weight 700, was
   0.92rem/600 (~14.7px), noticeably smaller/lighter than the real list
   items (Discounts/Amenities/Additional Services all share this rule). */
.gm-amenities-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 1.25rem;
	color: var(--gm-navy);
	font-weight: 700;
	margin-bottom: 16px;
	break-inside: avoid;
}
.gm-amenities-list li i {
	color: var(--coupon-red);
	font-size: 1.1rem;
	margin-top: 1px;
	flex: 0 0 auto;
}

@media (max-width: 760px) {
	.gm-amenities-block {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.gm-amenities-list {
		columns: 1;
	}
}

/* FAQ — real "side heading" layout, confirmed 2026-08-05 reading the live
   page directly: heading + intro in a narrower left column, the accordion
   itself in a wider right column (same split as .gm-amenities-block
   above), rounded white cards per question rather than a plain bordered
   list, real button + [aria-expanded] toggle (assets/js/store-location.js)
   instead of native <details>/<summary> — the real plus/minus icon swap
   depends on [aria-expanded] specifically. */
.gm-faq {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	align-items: start;
}
.gm-faq-heading h2 {
	margin: 0;
}
.gm-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Corrected 2026-08-05 — measured live: box-shadow/radius were close but
   not exact (real: 0 4px 8px, radius 12px). */
.gm-faq-item {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(10, 10, 10, 0.06);
}
.gm-faq-item h3 {
	margin: 0;
}
/* Corrected 2026-08-05 — measured live at 19px/weight 600, was 0.95rem
   (~15.2px)/700 — real question text is bigger and slightly lighter. */
.gm-faq-toggle {
	position: relative;
	width: 100%;
	padding: 18px 44px 18px 20px;
	background: transparent;
	border: none;
	appearance: none;
	text-align: left;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--gm-navy);
	cursor: pointer;
}
.gm-faq-toggle:hover {
	color: var(--coupon-red);
}
/* Plus/minus icon pair — both absolutely positioned in the same spot,
   opacity+rotation swapped by [aria-expanded] (mirrors the real site's own
   --icon-maximize/--icon-minimize mask-image swap, using Font Awesome's
   plus/minus glyphs instead since that SVG mask isn't an asset available
   here). */
.gm-faq-icon-plus,
.gm-faq-icon-minus {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
	font-size: 0.85rem;
}
.gm-faq-icon-minus {
	opacity: 0;
}
.gm-faq-toggle[aria-expanded="true"] .gm-faq-icon-plus {
	opacity: 0;
	transform: translateY(-50%) rotate(180deg);
}
.gm-faq-toggle[aria-expanded="true"] .gm-faq-icon-minus {
	opacity: 1;
}
.gm-faq-content {
	padding: 0 20px 18px;
}
/* Corrected 2026-08-05 — measured live at 19px, full-opacity black; was
   0.88rem (~14px) gray, noticeably smaller/lighter than the real answer
   text. */
.gm-faq-content p {
	color: var(--gm-navy);
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 760px) {
	.gm-faq {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Intro/warranty paragraph (added 2026-08-05) — the real page's `#about`
   section, centered prose block matching .gm-sub's treatment elsewhere in
   this file rather than a new typographic style. */
.gm-store-intro {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* Small red "overline" badge — reused by the intro H2 below AND each
   teaser's category label (.gm-store-teaser-overline). Corrected
   2026-08-05: measured live against the real page (getComputedStyle) —
   it's a solid background pill (bg rgb(214,19,29) = this file's own
   --coupon-red, padding 6px 8px, SQUARE corners, 15px uppercase white
   text), not the plain colored uppercase text this used to be. Screenshot
   comparison against the real page confirmed the visual directly, not
   just computed values. */
/* Scoped selectors, not the bare class — a bare .gm-overline-badge
   (specificity 0,1,0) loses to .gm-section h2 (0,1,1) when applied to
   the About h2, which has one extra type-selector point; confirmed live
   (badge rendered at the section-heading's 2.5rem instead of its own
   intended ~0.9rem) before this fix. */
.gm-store-intro .gm-overline-badge,
.gm-store-teaser-content .gm-overline-badge {
	display: inline-block;
	background: var(--coupon-red);
	color: #fff;
	padding: 6px 8px;
	font-size: 0.9375rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 16px;
}
.gm-store-intro p {
	color: var(--gm-navy);
	/* Corrected 2026-08-05 — measured 31.6px live (fluid/clamped, like the
	   section headings above); this was 0.98rem (~15.7px), roughly half
	   the real size. 1.75rem is a fixed, close approximation. */
	font-size: 1.75rem;
	line-height: 1.4;
	margin: 0 0 14px;
}
.gm-store-intro-footnote {
	/* Corrected 2026-08-05 — measured 16px, full-opacity black on the
	   real page, not the faded/smaller treatment this had before. */
	font-size: 1rem !important;
	color: var(--gm-navy);
	margin-bottom: 20px !important;
}
.gm-store-intro .gm-btn {
	display: inline-block;
	padding: 10px 22px;
	/* Corrected 2026-08-05 — real buttons measured border-radius: 4px. */
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	/* Corrected 2026-08-05 — real buttons are upper-cased via CSS, not
	   literal caps in the button text (keeps the PHP source readable). */
	text-transform: uppercase;
}
.gm-store-intro .gm-btn-outline {
	background: transparent;
	color: var(--coupon-red);
	border: 2px solid var(--coupon-red);
}
.gm-store-intro .gm-btn-outline:hover {
	background: var(--coupon-red);
	color: #fff;
}

/* Teasers (Fleet Maintenance / Careers / Follow the Fun + any store-
   specific extras, added 2026-08-05) — alternating image-left/image-right
   layout matching the real page's own `--right`/`--left` modifier
   pattern. Each teaser is its own .gm-section-spaced block (own margin,
   not .gm-section's default — these read as one continuous strip on the
   real page, not separated sections). */
.gm-store-teaser {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 44px;
}
.gm-store-teaser--left {
	flex-direction: row-reverse;
}
.gm-store-teaser-image {
	flex: 0 0 44%;
}
.gm-store-teaser-image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
.gm-store-teaser-content {
	flex: 1;
	min-width: 0;
}
/* .gm-store-teaser-overline replaced 2026-08-05 by the shared
   .gm-overline-badge rule above (real pill-badge style, not plain
   colored text) — no rule of its own needed here anymore. */
/* Corrected 2026-08-05 — measured live at ~40.67px (fluid/clamped),
   same finding/fix as .gm-section h2 above; was 1.3rem, noticeably
   smaller than the real page's teaser headings. */
.gm-store-teaser-content h2 {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--gm-navy);
	margin: 0 0 10px;
}
.gm-store-teaser-content p {
	color: var(--gm-gray);
	/* Corrected 2026-08-05 — measured 19px live, was 0.92rem (~14.7px). */
	font-size: 1.2rem;
	line-height: 1.6;
	margin: 0 0 16px;
}
@media (max-width: 760px) {
	.gm-store-teaser-content h2 {
		font-size: 1.6rem;
	}
}
/* Scoped outline-button treatment — this file's own .gm-btn-outline (see
   .gm-cta/.gm-hero2-ctas above) is styled white-on-dark for those two
   sections specifically; these teasers sit on the page's normal light
   background, so they need their own outline colors rather than
   inheriting that dark-context style. */
/* Teasers can have more than one button (added 2026-08-05 — see the
   template's own comment on $gm_teaser_button_icon for the real Careers/
   Follow the Fun multi-button finding) — wrap them in a row that can
   flow onto more than one line, rather than assuming exactly one. */
.gm-store-teaser-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.gm-store-teaser .gm-btn,
.gm-store-nearby-card .gm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	/* Corrected 2026-08-05 — real buttons measured border-radius: 4px. */
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	/* Corrected 2026-08-05 — real buttons are upper-cased via CSS. */
	text-transform: uppercase;
}
.gm-store-teaser .gm-btn i {
	font-size: 0.85rem;
}
.gm-store-teaser .gm-btn-outline,
.gm-store-nearby-card .gm-btn-outline {
	background: transparent;
	color: var(--coupon-red);
	border: 2px solid var(--coupon-red);
}
.gm-store-teaser .gm-btn-outline:hover,
.gm-store-nearby-card .gm-btn-outline:hover {
	background: var(--coupon-red);
	color: #fff;
}

@media (max-width: 760px) {
	.gm-store-teaser,
	.gm-store-teaser--left {
		flex-direction: column;
		gap: 20px;
	}
	.gm-store-teaser-image {
		flex-basis: auto;
		width: 100%;
	}
}

/* Long-form local-SEO article + embedded local-FAQ (added 2026-08-05) —
   plain prose, no card/accordion styling. **Correction, same day**: the
   comment here used to say "no interactivity" — wrong, the real section
   DOES have one real interactive element, a "Read More" button
   (.block-read-more-content) collapsing everything after the first 2-3
   paragraphs; see the template's own comment + .gm-store-article-more/
   .gm-store-article-readmore below. Width-capped for readability, same
   convention as .gm-store-intro. */
.gm-store-article {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}
/* Corrected 2026-08-05 — same section-heading finding as .gm-section h2
   above (measured ~40px live); this file's own article title was still
   small (1.35rem) from before that measurement pass. */
.gm-store-article h2 {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--gm-navy);
	margin: 0 0 20px;
	text-align: center;
}
.gm-store-article-body p {
	color: var(--gm-gray);
	font-size: 0.95rem;
	line-height: 1.75;
	margin: 0 0 18px;
}
.gm-store-article-body strong {
	color: var(--gm-navy);
}
.gm-store-article-body img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0 0 18px;
}
.gm-store-article-body ul {
	margin: 0 0 18px;
	padding-left: 22px;
	color: var(--gm-gray);
}
/* "Read More" toggle, added 2026-08-05 — a real feature on the source
   page, mistakenly stripped as UI chrome in the first pass. `hidden`
   attribute (assets/js/store-location.js toggles it, same mechanism as
   the FAQ accordion) rather than a slide animation — the real button's
   own CSS shows a plain show/hide too (`display:none` swap), no
   transition on the content itself. */
.gm-store-article-more[hidden] {
	display: none;
}
/* :hover/:focus repeated explicitly — same GeneratePress
   button:focus/button:hover specificity collision documented on
   .gm-quick-links-toggle/.gm-coupons-nav above; same fix here. */
.gm-store-article-readmore,
.gm-store-article-readmore:hover,
.gm-store-article-readmore:focus {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 auto;
	padding: 0 0 2px;
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--coupon-red);
	color: var(--gm-navy);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	cursor: pointer;
}
.gm-store-article-readmore i {
	font-size: 0.75rem;
	transition: transform 0.2s linear;
}
.gm-store-article-readmore[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Nearby Locations (added 2026-08-05) — deliberately not a copy of FSA's
   real national-network version; a simple card grid over our own stores,
   same visual language as the services/discounts card grids above. */
.gm-store-nearby-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.gm-store-nearby-card {
	background: var(--gm-light);
	border-radius: 8px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gm-store-nearby-title {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--gm-navy);
	text-decoration: none;
}
.gm-store-nearby-sub {
	color: var(--gm-gray);
	font-size: 0.82rem;
	margin-bottom: 4px;
}
.gm-store-nearby-meta {
	color: var(--gm-gray);
	font-size: 0.85rem;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.gm-store-nearby-meta i {
	color: var(--coupon-red);
	flex: 0 0 auto;
}
.gm-store-nearby-card .gm-btn {
	align-self: flex-start;
	margin-top: 6px;
}

/* .gm-team removed 2026-08-05 — the "Meet Your Team" section it styled
   doesn't exist on the real page (see template's own removal comment) —
   no rule needed here anymore. */

/* Final CTA */
.gm-cta {
	text-align: center;
	background: var(--gm-navy);
	border-radius: 8px;
	padding: 36px;
	color: #fff;
}
.gm-cta h2 {
	color: #fff;
	margin: 0 0 16px;
}
.gm-cta .gm-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	font-size: 0.95rem;
	margin: 0 6px;
}
.gm-btn-primary {
	background: var(--gm-red);
	color: #fff;
}
.gm-btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
}

@media (max-width: 760px) {
	.gm-hero2 {
		grid-template-columns: 1fr;
		position: relative;
	}
	.gm-hero2-left {
		padding: 32px 24px 300px;
	}
	/* Map becomes an absolutely-positioned overlay flush with the hero's
	   bottom edge instead of its own grid row (desktop's 72px-padded,
	   420px-min-height treatment is unchanged above 760px) — hero content
	   padding-bottom above reserves space for it. */
	.gm-hero2-map {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 260px;
		min-height: 0;
		padding: 0;
	}
	.gm-hero2-map iframe {
		min-height: 0;
	}
	.gm-hero2-btn-row {
		grid-template-columns: 1fr;
	}
	/* Icon cards need more room than the old flat text pills did — a fixed
	   2-column grid left them cramped on narrow phones, so this switches to
	   the same auto-fill behavior as desktop (already responsive down to
	   ~220px per card) instead of forcing a column count. */
	.gm-store-services {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
	/* One card per view with a small peek of the next (matches the real
	   site's mobile carousel behavior) instead of the old single-column
	   grid — .gm-coupons is a flex scroller now, not a grid. */
	.gm-coupon {
		flex: 0 0 85%;
		min-width: 0;
	}
	/* Nav-arrow/dots grid-area rules removed here 2026-08-08 (CORRECTION-13)
	   — that arrangement (grid-template-columns: 36px 1fr 36px,
	   grid-template-areas: "track track track" / "prev dots next", dots
	   margin-top: 0) is the .gm-coupons-carousel default now, at every
	   width, not a ≤760px override. Duplicating it here would just repeat
	   the default with no effect. */
	/* CORRECTION-9 — TEXT+EMAIL two-up, PRINT full-width below, instead of
	   one cramped 3-across row at 85%-of-viewport card width. PRINT is
	   always the third of exactly 3 fixed buttons here (not a dynamic
	   loop), so :last-child is a safe, reliable target without a modifier
	   class. Desktop's 3-across flex row (above) is unaffected. */
	.gm-coupon-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.gm-coupon-actions .gm-coupon-action:last-child {
		grid-column: 1 / -1;
	}
}