/* =============================================================
   Homesavers — Stores archive ("Find your local store")
   Loads on the stores post-type archive (and single store).
   Card grid built on the site design tokens in site.css.
   ============================================================= */

.hs-stores { padding-bottom: clamp(40px, 6vw, 80px); }

/* Page heading ---------------------------------------------------- */
.hs-stores__head { padding: 18px 0 6px; }
.hs-stores__title {
	margin: 0;
	font-family: var(--hs-font-bold);
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
	color: var(--hs-green);
}
.hs-stores__intro {
	margin: 8px 0 0;
	max-width: 720px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hs-muted);
}
.hs-stores__count {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--hs-muted);
}

/* Grid ------------------------------------------------------------ */
.hs-stores__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 24px);
	margin-top: 22px;
}
@media (max-width: 900px) {
	.hs-stores__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.hs-stores__grid { grid-template-columns: 1fr; }
}

/* Card ------------------------------------------------------------ */
.hs-store-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hs-line);
	border-radius: var(--hs-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hs-store-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
	transform: translateY(-3px);
	border-color: #d0d0d0;
}

.hs-store-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--hs-bg-grey);
	overflow: hidden;
}
.hs-store-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Placeholder when a store has no featured image */
.hs-store-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b7b7b7;
}
.hs-store-card__media--empty svg { width: 46px; height: 46px; }

.hs-store-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	flex: 1 1 auto;
}
.hs-store-card__name {
	margin: 0;
	font-family: var(--hs-font-semibold);
	font-size: 18px;
	line-height: 1.25;
	color: var(--hs-ink);
}
.hs-store-card__name a { color: inherit; text-decoration: none; }
.hs-store-card__name a:hover { color: var(--hs-green); }

/* Meta rows (address / hours / phone) with leading icon ----------- */
.hs-store-card__meta {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--hs-muted);
}
.hs-store-card__meta svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: var(--hs-green);
}
.hs-store-card__meta a { color: inherit; text-decoration: none; }
.hs-store-card__meta a:hover { text-decoration: underline; }
.hs-store-card__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--hs-muted);
}

/* Actions --------------------------------------------------------- */
.hs-store-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}
.hs-store-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 6px;
	font-family: var(--hs-font-semibold);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hs-store-btn--primary {
	background: var(--hs-green);
	color: #fff;
	border: 1px solid var(--hs-green);
}
.hs-store-btn--primary:hover { background: #1e7526; border-color: #1e7526; }
.hs-store-btn--ghost {
	background: #fff;
	color: var(--hs-green);
	border: 1px solid var(--hs-green);
}
.hs-store-btn--ghost:hover { background: #f1f8f2; }
.hs-store-btn svg { width: 14px; height: 14px; }

/* Empty state ----------------------------------------------------- */
.hs-stores__empty {
	margin: 30px 0;
	padding: 40px 20px;
	text-align: center;
	color: var(--hs-muted);
	background: var(--hs-bg-soft);
	border-radius: var(--hs-radius);
}

/* Pagination ------------------------------------------------------ */
.hs-stores .hs-pagination { margin: 30px 0 0; }
.hs-stores .hs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.hs-stores .hs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--hs-line);
	border-radius: 6px;
	font-size: 14px;
	color: var(--hs-ink);
	text-decoration: none;
}
.hs-stores .hs-pagination .page-numbers.current {
	background: var(--hs-green);
	border-color: var(--hs-green);
	color: #fff;
}
.hs-stores .hs-pagination a.page-numbers:hover {
	border-color: var(--hs-green);
	color: var(--hs-green);
}

/* =============================================================
   Store Finder (archive) — search, map, range/county links
   ============================================================= */

.hs-storefinder { padding-bottom: 0; }

/* Newsletter → footer gap: the newsletter's own margin + the site-wide
   .hs-footer margin-top (100px) were stacking to ~200px. Trim to ~60px to
   match the Figma (newsletter sits ~60px above the footer). */
.hs-storefinder .hs-newsletter { margin-block-end: 0; }
.hs-storefinder + .hs-footer { margin-top: 60px; }
/* Store page: Figma has ~130px between the CTA row and the newsletter bar,
   and ~72px between the newsletter bar and the footer. */
.hs-store .hs-newsletter { margin-top: clamp(70px, 9vw, 128px); margin-bottom: 0; }
.hs-store + .hs-footer { margin-top: 72px; }

.hs-storefinder__title {
	margin: 42px 0 33px;                 /* 42px gap from breadcrumb (Figma) */
	font-family: var(--hs-font-bold);
	font-size: clamp(30px, 3.4vw, 45px); /* Figma title 45px */
	line-height: 38.4px;                 /* Figma line height/38_4 */
	letter-spacing: 0;
	color: var(--hs-red);
}

/* Search row — label left, search group right (Figma) ------------- */
.hs-storefinder__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 62px;                 /* search block → map (Figma ~62px) */
}
.hs-storefinder__label {
	padding-top: 12px;                   /* centre against the 48px input */
	font-family: 'poppinslight', var(--hs-font);
	font-size: 20px;                     /* Figma 20px Light */
	line-height: 24px;
	color: #000;
}
.hs-storefinder__controls { flex: 0 1 760px; max-width: 760px; } /* Figma search group 760px */
.hs-storefinder__row { display: flex; gap: 8px; }
.hs-storefinder__row input[type="text"] {
	flex: 1;
	min-width: 0;
	height: 48px;                        /* Figma input 48px */
	padding: 0 12px;
	font-size: 16px;
	font-family: var(--hs-font);
	color: var(--hs-ink);
	border: 1px solid #9ca3af;           /* Figma input border */
	border-radius: 4px;
}
.hs-storefinder__row input[type="text"]::placeholder { color: #9ca3af; opacity: 1; }
.hs-storefinder__find {
	padding: 12px 24px;                  /* Figma button 12/24 → 48px tall */
	font-family: var(--hs-font-semibold);
	font-size: 16px;
	color: #fff;
	background: var(--hs-green);
	border: 0;
	border-radius: 6px;                  /* Figma button radius 6px */
	cursor: pointer;
	white-space: nowrap;
}
.hs-storefinder__find:hover { background: #1d7526; }

.hs-storefinder__geolocate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;                     /* Figma 8px below input */
	padding: 0;
	font-size: 15px;                     /* Figma 15px */
	color: var(--hs-green);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}
.hs-storefinder__geolocate:hover { text-decoration: underline; }
.hs-storefinder__geolocate svg { width: 18px; height: 18px; } /* Figma nav arrow ~19×18 */

/* Map ------------------------------------------------------------- */
.hs-storefinder__map-wrap {
	border: 1px solid rgba(60, 60, 67, 0.29); /* Figma map border */
	border-radius: 0;
	padding: 28px;                            /* Figma inner inset ~26–32px */
	background: #fff;
}
.hs-storefinder__map {
	width: 100%;
	height: clamp(360px, 52vw, 600px);        /* Figma inner map ~600px tall */
	background: var(--hs-bg-grey);
}

/* Results --------------------------------------------------------- */
.hs-storefinder__results { margin-top: 22px; }
.hs-storefinder__results:empty { display: none; }
.hsl-status-msg { color: var(--hs-muted); }

/* Store card — mirrors the Figma "6_1920w Store finder - County" card.
   Structure: img · content[header(heading + STORE INFO) · meta(address | hours)] · actions. */
.hsl-card {
	display: flex;
	align-items: flex-start;
	gap: 24px;                                /* Figma image→content 24px */
	padding: 24px;                            /* Figma card padding 24px */
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);   /* Figma drop-shadow */
}
.hsl-card__img { flex: 0 0 auto; }
.hsl-card__img img {
	width: 160px;                             /* Figma store-image 160×120 */
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.hsl-card__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;                                /* header → meta 16px */
}
.hsl-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.hsl-card__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hsl-card__title {
	margin: 0;
	font-family: var(--hs-font-bold);         /* Figma Bold 24px */
	font-size: 24px;
	line-height: 1.2;
	color: #111827;
}
.hsl-card__title a { color: inherit; text-decoration: none; }
.hsl-card__title a:hover { color: var(--hs-green); }
.hsl-card__distance {
	margin: 0;
	font-size: 14px;
	color: #4b5563;
}
.hsl-card__info {                            /* "STORE INFO" badge, top-right */
	flex: 0 0 auto;
	padding: 4px 8px;
	font-family: var(--hs-font-semibold);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #248c2e;                          /* brand green */
	background: #f9fafb;
	border-radius: 4px;
	white-space: nowrap;
}
.hsl-card__info:hover { background: #eef2f4; }

.hsl-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px 40px;                           /* Figma address↔hours 40px */
}
.hsl-card__address {
	display: flex;
	align-items: flex-start;
	gap: 17px;                                /* Figma icon→text 17px */
	flex: 1 1 260px;
	max-width: 320px;
	margin: 0;
	font-size: 20px;                          /* Figma 20px */
	line-height: 1.5;
	color: #4b5563;
}
.hsl-card__address svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: #004b8d;                          /* designer map-pin navy */
}
.hsl-card__hours {
	display: flex;
	align-items: flex-start;
	gap: 13px;                                /* Figma icon→text 13px */
	flex: 0 0 auto;
}
.hsl-card__hours svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; }
.hsl-card__hours.is-open svg { color: #059669; }
.hsl-card__hours.is-closed svg { color: var(--hs-red); }
.hsl-card__hours > div { display: flex; flex-direction: column; gap: 2px; }
.hsl-status { font-family: var(--hs-font-semibold); font-size: 20px; line-height: 1.3; }
.hsl-status.is-open { color: #059669; }     /* Figma open = emerald */
.hsl-status.is-closed { color: var(--hs-red); }
.hsl-card__hours em {
	font-size: 20px;
	font-style: normal;
	line-height: 1.3;
	color: #4b5563;
}

.hsl-card__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;                                /* Figma button gap ~14.7px */
	width: 245px;                             /* Figma actions column 244.7px */
}
.hsl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;                       /* Figma py-12.2 px-19.6 → ~49px tall */
	font-family: var(--hs-font-semibold);
	font-size: 17px;                          /* Figma 17.1px */
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: 7px;                       /* Figma 7.34px */
	cursor: pointer;
}
.hsl-btn svg { width: 20px; height: 20px; }
.hsl-btn--primary { background: var(--hs-red); color: #fff; border: 1px solid var(--hs-red); }
.hsl-btn--primary:hover { background: var(--hs-red-dark); border-color: var(--hs-red-dark); color: #fff; }
.hsl-btn--ghost { background: #fff; color: #111827; border: 1px solid #e5e7eb; }   /* Figma border #e5e7eb */
.hsl-btn--ghost:hover { border-color: #111827; }

/* The theme's `a:visited { color: inherit }` (specificity 0,1,1) otherwise
   overrides these class colours once a store link has been visited, turning
   the buttons, STORE INFO badge and their currentColor SVG icons dark.
   The :visited selectors below (0,2,0) win it back. */
.hsl-card__info:visited { color: #248c2e; }
.hsl-btn--primary:visited { color: #fff; }
.hsl-btn--ghost:visited { color: #111827; }

/* Card responsive: stack image over content, actions full-width below. */
@media (max-width: 860px) {
	.hsl-card { flex-wrap: wrap; gap: 18px; }
	.hsl-card__content { flex: 1 1 100%; order: 2; }
	.hsl-card__img { order: 1; }
	.hsl-card__actions { order: 3; flex-direction: row; width: 100%; }
	.hsl-btn { flex: 1 1 0; }
	.hsl-card__address { font-size: 16px; }
	.hsl-status, .hsl-card__hours em { font-size: 16px; }
	.hsl-card__title { font-size: 20px; }
}
@media (max-width: 520px) {
	.hsl-card__actions { flex-direction: column; }
}

/* County links ---------------------------------------------------- */
.hs-storefinder__links { margin-top: 58px; }         /* map → section (Figma ~58px) */
/* The counties block now sits directly under the map (the "by product range"
   section above it was removed), so it keeps the base 58px top margin and no
   longer needs the divider rule that separated it from the ranges. */
.hs-storefinder__links--counties {
	margin-bottom: clamp(60px, 9vw, 100px);          /* counties → newsletter (Figma ~116px) */
}
.hs-storefinder__links-title {
	margin: 0 0 20px;
	font-family: var(--hs-font-bold);                /* Figma Bold 20px */
	font-size: 20px;
	line-height: 1.2;
	color: #1a1a1a;
}
.hs-storefinder__link-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 154px)); /* Figma cell 153.9px */
	column-gap: 100px;                                  /* Figma gap 100px */
	row-gap: 8px;                                       /* → 32px row pitch */
	justify-content: start;
}
.hs-storefinder__link-grid a {
	font-size: 16px;                                 /* Figma 16px */
	line-height: 24px;
	color: var(--hs-green);
	text-decoration: none;
}
.hs-storefinder__link-grid a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
	.hs-storefinder__link-grid { column-gap: clamp(28px, 6vw, 100px); }
}
@media (max-width: 820px) {
	.hs-storefinder__link-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
	}
	.hs-storefinder__form { flex-direction: column; gap: 12px; }
	.hs-storefinder__label { padding-top: 0; }
	.hs-storefinder__controls { max-width: none; width: 100%; flex-basis: auto; }
	.hs-storefinder__title { font-size: clamp(30px, 8vw, 45px); line-height: 1.1; }
}
@media (max-width: 520px) {
	.hs-storefinder__link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   County archive — filters + store list
   ============================================================= */

.hs-county { padding-bottom: 0; }
.hs-county + .hs-footer { margin-top: 60px; }   /* trim stacked newsletter→footer gap */
.hs-county .hs-newsletter { margin-block: clamp(48px, 6vw, 90px) 0; }   /* store list → signup gap (max 90px) */
.hs-county__list .hsl-card:last-child { margin-bottom: 0; } /* no double gap before signup */

.hs-county__form { margin-top: 34px; margin-bottom: 0; }   /* breadcrumb → search 34px */

.hs-county__filters {
	display: flex;
	align-items: baseline;
	gap: 10px 20px;
	margin-top: 18px;
}
.hs-county__filters-label {
	flex: 0 0 auto;
	font-family: var(--hs-font-semibold);
	font-size: 14px;
	color: #111827;
}
.hs-county__filters-grid {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;                          /* natural wrap, content-spaced */
}
.hs-county__filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;                               /* Figma checkbox→label 10px */
	font-size: 14px;
	color: #111827;
	cursor: pointer;
	white-space: nowrap;
}
.hs-county__filter input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid #d1d5db;             /* Figma checkbox 1.5px #d1d5db r3 */
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.hs-county__filter input:checked { background: var(--hs-green); border-color: var(--hs-green); }
.hs-county__filter input:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.hs-county__title {
	margin: clamp(40px, 5vw, 64px) 0 clamp(44px, 5.5vw, 67px);   /* breadcrumb/search → title 64px, title → cards 67px */
	font-family: var(--hs-font-bold);
	font-size: clamp(26px, 3vw, 36px);       /* Figma Bold 36px */
	line-height: 1.2;
	color: var(--hs-green);
}

/* =============================================================
   Single store page
   ============================================================= */

.hs-store { padding-bottom: 0; overflow-x: clip; }   /* clip guards against any horizontal scroll */

.hs-store__head { padding: 56px 0 0; margin: 0 0 clamp(30px, 5vw, 60px); }   /* Figma: 56px top, 60px bottom */
.hs-store__title {
	margin: 0 0 12px;
	font-family: var(--hs-font-bold);
	font-size: clamp(30px, 3.4vw, 45px);   /* Figma title 45px */
	line-height: 1.0;                       /* Figma glyph box h≈39 on 45px */
	color: var(--hs-red);
}
.hs-store__strap {
	margin: 0;
	font-family: var(--hs-font-semibold);   /* Figma strapline semibold */
	font-size: 24px;                        /* Figma strapline 24px */
	line-height: 1.3;
	color: var(--hs-ink);
}

.hs-store__photo { margin: 0 0 clamp(48px, 7vw, 90px); }   /* photo → info labels ≈90px (Figma) */
.hs-store__photo img {
	width: 100%;
	aspect-ratio: 1120 / 672;               /* Figma hero 1120×672 */
	height: auto;
	object-fit: cover;
	display: block;
}

/* Contact + hours ------------------------------------------------- */
.hs-store__info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 386px;   /* Figma hours card 386.6px, right-aligned */
	align-items: start;
	gap: 30px 67px;                                 /* left text 670 → card gap ≈67px */
	margin-bottom: 44px;
}
/* Green field headings ("Address", "Phone & Email", "Current opening hours")
   — Figma: large bold mixed-case green (~22px). */
.hs-store__green-h {
	margin: 0 0 12px;
	font-family: var(--hs-font-bold);
	font-size: 24px;                                /* Figma green headings 24px Bold */
	line-height: 1.2;
	color: var(--hs-green);
}
.hs-store__address,
.hs-store__contact-lines {
	margin: 0 0 22px;
	font-size: 18px;                                /* Figma 18px */
	line-height: 30px;                              /* Figma line-height 30px */
	color: var(--hs-ink);
}
.hs-store__contact-lines a { color: var(--hs-ink); }
.hs-store__directions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 163px;                               /* Figma button 163×48 */
	height: 48px;
	margin-top: 30px;
	padding: 0 20px;
	background: var(--hs-red);
	color: #fff;
	font-family: var(--hs-font-semibold);
	font-size: 15px;
	border-radius: 6px;
	text-decoration: none;
}
/* Theme's a:visited{color:inherit} otherwise darkens the label — force white. */
.hs-store__directions:link,
.hs-store__directions:visited { color: #fff; }
.hs-store__directions:hover { background: var(--hs-red-dark); color: #fff; }

.hs-store__side { }                          /* container only — title sits OUTSIDE the box */
.hs-store__side .hs-store__green-h { margin-bottom: 30px; }  /* Figma: "Current opening hours" → card gap ≈30px */
/* Bordered hours box (Figma: title outside, 1px #3C3C434A, no radius, 15px pad) */
.hs-store__hours-box {
	border: 1px solid #3C3C434A;
	border-radius: 0;
	padding: 15px;
}
.hs-store__hours {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--hs-font);             /* Poppins Regular (weight from the face) */
	font-size: 20px;                          /* Figma day/time 20px */
	letter-spacing: 0;
	color: #555;                              /* Figma text #555 */
}
.hs-store__hours tr { height: 58px; }        /* Figma row pitch ≈58.9px */
.hs-store__hours td {
	position: relative;
	z-index: 0;
	padding: 6px 15px;
	vertical-align: middle;
	white-space: nowrap;                      /* Figma: each row one line */
}
.hs-store__hours td:first-child { width: 150px; }   /* Figma: day col ~150px, time at fixed x */
/* Figma: 42px shaded band rgba(217,217,217,.3) centred in each odd row (Mon/Wed/Fri/Sun) */
.hs-store__hours tr:nth-child(odd) td::before {
	content: "";
	position: absolute;
	inset: 8px 0;                             /* 42px band centred in the 58px row, full cell width */
	background: rgba(217, 217, 217, 0.3);
	z-index: -1;
}
/* Figma: the Sunday band carries a 1px black border (on the band, not the full row) */
.hs-store__hours tr.is-sunday td::before {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
.hs-store__hours tr.is-sunday td:first-child::before { border-left: 1px solid #000; }
.hs-store__hours tr.is-sunday td:last-child::before { border-right: 1px solid #000; }

.hs-store__news { margin-top: 18px; margin-bottom: 30px; }   /* Figma: ~45px below Store News to card bottom (30 + 15 card pad) */
.hs-store__news-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 30px;                     /* Figma: 30px below the head row */
}
.hs-store__news-head h3 {
	margin: 0;
	font-family: var(--hs-font-bold);        /* Poppins Bold — weight from the face */
	font-size: 24px;                          /* Figma 24px */
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--hs-green);
}
.hs-store__news-head a {                     /* "View all" — Poppins Light, 12/18 */
	font-family: 'poppinslight', var(--hs-font);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0;
	color: #000;                              /* Figma "View all" black */
	text-decoration: none;
}
.hs-store__news-head a:hover { text-decoration: underline; }
.hs-store__news-item {
	display: flex;
	gap: 30px;                                /* Figma image → title gap 30px */
	align-items: flex-start;
	text-decoration: none;
}
.hs-store__news-img { flex: 0 0 auto; }      /* keep the 145px image from shrinking */
.hs-store__news-img img {
	width: 145px;                            /* Figma news thumb 145×96 */
	height: 96px;
	object-fit: cover;
	display: block;
}
.hs-store__news-title {                       /* Figma: Poppins Bold, 20px / 25px */
	font-family: var(--hs-font-bold);
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 0;
	color: var(--hs-green);
}

/* Section headings ------------------------------------------------ */
.hs-store__red-h {
	margin: 34px 0 16px;
	font-family: var(--hs-font-bold);        /* Poppins Bold 700 */
	font-size: clamp(30px, 4.2vw, 45px);     /* Figma heading 45px */
	line-height: 38.4px;                      /* Figma line-height 38.4 */
	color: var(--hs-red);
}
.hs-store__red-h--center { text-align: center; }
.hs-store__red-h--small { font-size: 28px; line-height: normal; margin: 0; }  /* Figma 20:803 title 28px Bold */
.hs-store__sub {
	margin: -6px 0 20px;
	font-size: 13px;
	color: var(--hs-ink);
}
.hs-store__section--center .hs-store__sub { text-align: center; }
/* Centered section headers (Figma "header" frame: title 36px Bold + subtitle 16px #666, gap 12) */
.hs-store__section--center .hs-store__red-h {
	font-size: 36px;                         /* Figma header title 36px */
	line-height: normal;                     /* 54px box */
	margin: 0;
}
.hs-store__section--center .hs-store__sub {
	margin: 12px 0 0;                        /* Figma title → subtitle 12px */
	font-size: 16px;                         /* Figma subtitle 16px */
	color: #666;                             /* Figma #666 */
}
/* Nearby Stores sits in a bare .hs-store__section — its centered title is 36px too
   (offers "This weeks offers" stays 45px because it's under .hs-store__offers, not this). */
.hs-store__section .hs-store__red-h--center { font-size: 36px; line-height: normal; margin: 0; }

/* This weeks offers — 90px above, centered subtitle 24px below title */
.hs-store__offers { margin-top: clamp(48px, 7vw, 90px); }
.hs-store__offers .hs-store__red-h { margin: 0; }
.hs-store__offers .hs-store__sub {
	margin: 24px 0 0;                        /* title → text 24px */
	text-align: center;
	font-family: var(--hs-font-semibold);    /* Poppins SemiBold (face carries weight) */
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0;
	color: var(--hs-ink);
}
.hs-store__offers-img { margin-top: 45px; }  /* text → image 45px */
.hs-store__offers-img img { display: block; width: 100%; height: auto; }

/* On selected toys — heading + See more, 2 promo cards */
.hs-store__toys { margin-top: clamp(48px, 7vw, 90px); }
.hs-store__toys-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;                 /* title centered */
	gap: 16px;
	margin-bottom: 30px;
}
.hs-store__toys-head .hs-store__red-h { margin: 0; text-align: center; }
.hs-store__toys-head .hs-store__seemore {  /* button left-aligned */
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.hs-store__seemore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 125px;                        /* Figma See more 125×48 */
	height: 48px;
	padding: 0 18px;
	background: var(--hs-red);
	color: #fff;
	font-family: var(--hs-font-semibold);
	font-size: 15px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
.hs-store__seemore:link,
.hs-store__seemore:visited { color: #fff; }
.hs-store__seemore:hover { background: var(--hs-red-dark); color: #fff; }
.hs-store__promos {
	display: grid;
	grid-template-columns: 1fr 1fr;          /* 2 cards */
	gap: 31px;                                /* Figma cards x 398/976 → gap ~31px */
}
.hs-store__promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.hs-store__promo img {
	width: 100%;
	height: auto;                            /* full designed card, no crop, no radius */
	display: block;
}
@media (max-width: 760px) {
	.hs-store__toys-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	/* un-absolute the "See more" so it can't overlap the heading on mobile */
	.hs-store__toys-head .hs-store__seemore { position: static; transform: none; }
	.hs-store__promos { grid-template-columns: 1fr; }
}
.hs-store__prose {
	max-width: 640px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--hs-ink);
}

/* About this store — left column, below Get Directions (Figma) */
.hs-store__about { margin-top: clamp(48px, 7vw, 90px); }   /* button → about ≈90px */
.hs-store__about .hs-store__red-h { margin: 0 0 clamp(24px, 4vw, 50px); }    /* title → text (50px desktop, less on mobile) */
.hs-store__about .hs-store__prose {
	max-width: 640px;
	font-family: 'poppinslight', var(--hs-font);            /* Poppins Light */
	font-size: 16px;                                         /* Figma 16px */
	line-height: 24px;                                       /* Figma 24px */
	color: var(--hs-ink);
}

/* Parking + accessibility ---------------------------------------- */
.hs-store__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 386px;   /* Accessibility col = right col width (Figma) */
	align-items: start;
	gap: 30px 67px;
}
.hs-store__split .hs-store__red-h { margin: 0 0 clamp(24px, 4vw, 50px); }   /* title → content (50px desktop, less on mobile) */
.hs-store__access {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 15px;                               /* Figma gap 15px */
}
.hs-store__access li {
	flex: 1 1 0;                             /* 3 tiles fill the 386px column */
	height: 107px;                           /* Figma tile height 107px */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FEDE00;                      /* Figma yellow #FEDE00 */
	border-radius: 8px;
	color: #111;
}
.hs-store__access svg { width: auto; height: 48px; }   /* preserve icon aspect ratio */

/* Landmarks ------------------------------------------------------- */
/* Nearby Landmarks: 90px above section, 50px title → grid (Figma) */
.hs-store__section--landmarks { margin-top: clamp(48px, 7vw, 90px); }
.hs-store__section--landmarks .hs-store__red-h { margin: 0 0 clamp(24px, 4vw, 50px); }

.hs-store__landmarks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* Figma 4 columns */
	gap: 30px 17px;                           /* row-gap 30 (between wrapped/stacked cards on mobile), col-gap 17 */
}
.hs-store__landmark img {
	width: 100%;
	aspect-ratio: 268 / 222;                 /* Figma landmark image 268×222 */
	object-fit: cover;
	display: block;
	margin-bottom: clamp(15px, 4vw, 45px);    /* image → title: 45px desktop, less on mobile */
}
.hs-store__landmark h3 {
	margin: 0 0 clamp(10px, 2.5vw, 30px);     /* title → text: 30px desktop, less on mobile */
	font-family: var(--hs-font-semibold);    /* Poppins SemiBold (face carries weight) */
	font-weight: normal;                      /* 600 would faux-bold the semibold face */
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--hs-ink);
}
.hs-store__landmark p {
	margin: 0;
	font-family: var(--hs-font);             /* Figma: Poppins Regular 400 */
	font-weight: normal;
	font-size: 18px;                          /* 18px */
	line-height: 30px;                         /* 30px */
	letter-spacing: 0;
	color: var(--hs-ink);
}

/* Leaflet code search — Figma "Search by leaflet offer code" (nodes 20:803 title + 20:797 input-row)
   Title left + input-row right on one line; row = input (grows) + 8px gap + Find button. */
.hs-store__leaflet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;                     /* title vertically centered with the input row */
	justify-content: space-between;          /* title pinned left, row pinned right */
	gap: 16px 24px;                          /* only used once wrapped on narrow screens */
	margin: clamp(42px, 5.8vw, 75px) 0 clamp(58px, 8vw, 105px);  /* Figma: toys→leaflet 75, leaflet→departments 105 */
}
.hs-store__leaflet-row {
	display: flex;
	gap: 8px;                                /* Figma gap-[8px] */
	flex: 0 1 681px;                         /* input 590 + 8 + Find 83 = 681 (20:797 width) */
	width: 681px;
	max-width: 681px;
	height: 48px;
}
.hs-store__leaflet-row input {
	flex: 1 0 0;                             /* Figma flex-[1_0_0] — fills the row */
	min-width: 0;
	height: 48px;
	padding: 0 12px;                        /* Figma px-[12px], text vertically centered */
	font-family: var(--hs-font);           /* Poppins Regular */
	font-size: 16px;
	color: #111827;
	border: 1px solid #9ca3af;             /* Figma border-[#9ca3af] */
	border-radius: 4px;                     /* Figma rounded-[4px] */
}
.hs-store__leaflet-row input::placeholder { color: #9ca3af; opacity: 1; }  /* Figma "Offer code" #9ca3af */
.hs-store__leaflet-row button {
	flex: 0 0 auto;                         /* Figma shrink-0 */
	padding: 12px 24px;                     /* Figma py-[12px] px-[24px] → 48px tall */
	background: var(--hs-green);            /* #248c2e */
	color: #fff;
	border: 0;
	border-radius: 6px;                     /* Figma rounded-[6px] */
	font-family: var(--hs-font-semibold);  /* Poppins SemiBold */
	font-size: 16px;
	line-height: normal;
	cursor: pointer;
}
.hs-store__leaflet-row button:hover { background: #1d7526; }

/* Departments ----------------------------------------------------- */
.hs-store__depts {
	list-style: none;
	margin: clamp(28px, 3.8vw, 49px) 0 clamp(44px, 6vw, 78px);  /* Figma: header→grid 49, grid→Gallery title 78 */
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;                  /* center the chips (incl. a partial last row) */
	gap: 16px 11px;                           /* Figma row gap ≈16 (pitch 61.6), col gap ≈11 (pitch 282) */
}
.hs-store__depts li { flex: 0 0 271px; max-width: 100%; }  /* Figma chip width 271px */
.hs-store__depts a {
	display: flex;
	width: 100%;                              /* fill the cell so the chip is full-width and text centered */
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-height: 45px;                         /* Figma chip height 45.4 */
	padding: 6px 12px;
	text-align: center;
	font-family: 'poppinsmedium', var(--hs-font);  /* Figma Poppins Medium (500) */
	font-size: 15px;                          /* Figma label 15px */
	color: #333;                              /* Figma label #333 */
	border: 1px solid rgba(60, 60, 67, 0.29); /* Figma #3C3C434A */
	border-radius: 0;                         /* Figma: square corners (no radius) */
	text-decoration: none;
}
.hs-store__depts a:visited { color: #333; }   /* beat theme a:visited{color:inherit} */
.hs-store__depts a:hover { border-color: var(--hs-green); color: var(--hs-green); text-decoration: none; }

/* Gallery --------------------------------------------------------- */
.hs-store__gallery {
	margin-top: clamp(48px, 6.5vw, 85px);    /* Figma header → grid ≈85px */
	margin-bottom: clamp(50px, 6.8vw, 89px); /* Figma grid → Location title ≈89px */
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* Figma 4×2, image 263.6×214, full width */
	gap: 38px 21px;                           /* row pitch ≈252, col gap ≈21px */
}
.hs-store__gallery figure { margin: 0; }
.hs-store__gallery img {
	width: 100%;
	aspect-ratio: 263.6 / 214;
	object-fit: cover;
	display: block;
	border-radius: 0;                        /* Figma: square corners */
}

/* Map ------------------------------------------------------------- */
.hs-store__map {
	width: 100%;
	margin-top: 36px;                        /* Figma header → map ≈36px */
	margin-bottom: clamp(44px, 6vw, 78px);   /* Figma map → FAQ title ≈78px */
	aspect-ratio: 1124 / 642;                /* Figma map 1124×642 */
	background: var(--hs-bg-grey);
	border-radius: 0;                        /* Figma map: square corners */
	overflow: hidden;
}

/* FAQs ------------------------------------------------------------ */
.hs-store__faqs {
	margin-top: 35px;                        /* Figma header → faq list ≈35px */
	margin-bottom: clamp(40px, 5.6vw, 73px); /* Figma faq list → Nearby title ≈73px */
	column-count: 2;                         /* Figma: fill LEFT column first (Q1-8), then RIGHT (Q9-16) — not interleaved */
	column-gap: 40px;
	text-align: left;
}
.hs-store__faq {
	break-inside: avoid;                     /* keep each question+answer in one column */
	padding: 14px 0;                         /* Figma faq-row → 52px pitch */
}
.hs-store__faq summary {
	display: flex;
	align-items: center;
	gap: 16px;                                /* Figma icon 24 + gap 16 → question x=40 */
	list-style: none;
	cursor: pointer;
	font-family: 'poppinsmedium', var(--hs-font);  /* Figma Poppins Medium (500) */
	font-size: 16px;                          /* Figma question-text 16px */
	line-height: 1.4;                         /* Figma leading-[1.4] */
	color: #002e6e;                           /* Figma question-text #002e6e */
}
.hs-store__faq summary::-webkit-details-marker { display: none; }
.hs-store__faq-icon {
	flex: 0 0 auto;
	display: inline-flex;                     /* center the +/× glyph precisely */
	align-items: center;
	justify-content: center;
	width: 24px;                              /* Figma icon-circle 24×24 */
	height: 24px;
	line-height: 1;
	background: var(--hs-yellow);
	color: #fff;                              /* Figma: white plus on yellow circle */
	border-radius: 50%;
	font-family: var(--hs-font-bold);
	font-size: 16px;
}
.hs-store__faq[open] .hs-store__faq-icon { transform: rotate(45deg); }
.hs-store__faq p {
	margin: 8px 0 4px 40px;                   /* align under question text (x=40) */
	font-size: 15px;
	line-height: 1.6;
	color: var(--hs-ink);
}

/* Nearby stores + CTAs -------------------------------------------- */
.hs-store__nearby { margin: clamp(26px, 3.5vw, 46px) 0 0; }  /* Figma header → cards ≈46px; cards full width (1123) */

.hs-store__ctas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);   /* Figma 3 tiles 369×187.5 */
	gap: 8px;                                 /* x 404/781/1158, tile 369 → gap 8px */
	align-items: stretch;
	margin-top: clamp(52px, 7.2vw, 94px);    /* Figma Nearby cards → CTA row ≈94px */
}
.hs-store__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 187px;                        /* Figma tile 369×187.5 */
	padding: 24px;
	border-radius: 20px;                      /* Figma rounded-[20px] */
	color: #fff;
	font-family: var(--hs-font-semibold);     /* Figma Poppins SemiBold */
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
}
.hs-store__cta:link,
.hs-store__cta:visited { color: #fff; }        /* beat theme a:visited{color:inherit} */
.hs-store__cta strong { font-family: var(--hs-font-semibold); font-weight: normal; }
.hs-store__cta--red { background: var(--hs-red); font-size: clamp(20px, 2.2vw, 33px); }        /* "View current" 33px */
.hs-store__cta--red strong { display: block; font-size: clamp(34px, 4vw, 59px); }              /* "offers" 59px */
.hs-store__cta--red:hover { background: var(--hs-red-dark); color: #fff; }
.hs-store__cta--green { background: var(--hs-green); font-size: clamp(26px, 2.9vw, 43px); }     /* "Visit this store" 43px uniform */
.hs-store__cta--green:hover { background: #1d7526; color: #fff; }

.hs-store__signup {
	background: #d9d9d9;                      /* Figma tile #d9d9d9 */
	border-radius: 20px;                      /* Figma rounded-[20px] */
	padding: 29px 24px 27px;                  /* Figma: ~29px above title, ~27px below button */
	display: flex;
	flex-direction: column;
}
.hs-store__signup h3 {
	margin: 0 0 5px;                          /* Figma title → email ≈5px */
	font-family: var(--hs-font-semibold);
	font-size: 23px;                          /* Figma "Sign-up for offers" 23px */
	color: #000;                              /* Figma black */
}
.hs-store__signup input {
	height: 48px;                             /* Figma email input-row 48px */
	margin: 0 0 14px;                         /* Figma email → SUBMIT ≈14px */
	padding: 0 14px;
	border: 1px solid var(--hs-input-border);
	border-radius: 6px;
	font-size: 16px;
	font-family: var(--hs-font);
	background: #fff;
}
.hs-store__signup input::placeholder { color: #9ca3af; opacity: 1; }
.hs-store__signup button {
	align-self: flex-end;                     /* Figma SUBMIT right-aligned */
	padding: 11px 22px;
	background: var(--hs-red);                /* Figma #dc2b38 */
	color: #fff;
	border: 0;
	border-radius: 6px;                       /* Figma rounded-[6px] */
	font-family: var(--hs-font-semibold);
	font-size: 14px;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}
.hs-store__signup button:hover { background: var(--hs-red-dark); }

/* Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
	.hs-store__info,
	.hs-store__split { grid-template-columns: 1fr; }
	.hs-store__landmarks,
	.hs-store__gallery { grid-template-columns: repeat(2, 1fr); }
	.hs-store__depts { grid-template-columns: repeat(3, 1fr); }
	.hs-store__faqs { column-count: 1; }
	.hs-store__ctas { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	/* hours table: nowrap times + 150px day col overflow narrow screens — shrink */
	.hs-store__hours { font-size: 16px; }
	.hs-store__hours td { padding: 6px 10px; }
	.hs-store__hours td:first-child { width: auto; }
	/* leaflet + signup: never exceed the viewport */
	.hs-store__leaflet-row { width: 100%; max-width: 100%; }
	/* red section titles → 30px on mobile (the fixed 36px centred headers too) */
	.hs-store__section--center .hs-store__red-h,
	.hs-store__section .hs-store__red-h--center { font-size: 30px; }
}
@media (max-width: 520px) {
	.hs-store__landmarks { grid-template-columns: 1fr; }
	/* gallery stays 2×2 on mobile (per design), not single column */
	.hs-store__gallery { grid-template-columns: repeat(2, 1fr); }
	.hs-store__depts { grid-template-columns: repeat(2, 1fr); }
}

/* Logo placeholder ------------------------------------------------
   Stores with no photo of their own show the Homesavers logo. Photos are
   cropped to fill; the logo must be letterboxed instead, or the lockup gets
   sliced. Keyed off the ?hs=placeholder marker added in inc/stores.php, so it
   keeps working if the logo file in Theme Settings is swapped. */
.hsl-card__img img[src*="hs=placeholder"] {
	object-fit: contain;
	padding: 14px;
	background: var(--hs-bg-soft);
}
.hs-store__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1120 / 300;
	background: var(--hs-bg-soft);
	border-radius: var(--hs-radius);
}
.hs-store__photo--placeholder img {
	width: min(300px, 40%);
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	padding: 0;
	background: none;
}