/* ==========================================================================
   Shops — the locator and the individual shop pages.

   Loaded on /stores/ and on each shop. Nothing here is used elsewhere.
   ========================================================================== */

/* --------------------------------------------------------------- the head */

.hh-stores__head {
	padding-block: var(--hh-s5) var(--hh-s6);
	max-width: var(--hh-wrap-narrow);
}

.hh-stores__head .hh-lead {
	margin-top: var(--hh-s4);
}

.hh-stores__tools:empty {
	display: none;                      /* the button is written by JS or not at all */
}

.hh-stores__tools {
	margin-top: var(--hh-s5);
	display: flex;
	align-items: center;
	gap: var(--hh-s4);
	flex-wrap: wrap;
}

.hh-stores__status {
	font-size: var(--hh-t-sm);
	color: var(--hh-ink-600);
}

/* ------------------------------------------------------------- open / shut

   The one thing a locator can tell you that a list of addresses cannot.
   Colour alone never carries it — the words say it too, and the dot is
   decorative. */

.hh-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--hh-t-sm);
	font-weight: 500;
	letter-spacing: var(--hh-ls-wide);
}

.hh-open__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--hh-r-full);
	flex: 0 0 auto;
	background: currentColor;
}

.hh-open.is-open  { color: #1c6b45; }   /* 5.31:1 on --hh-surface */
.hh-open.is-shut  { color: var(--hh-ink-600); }

/* ------------------------------------------------------------- the cards */

.hh-shops {
	list-style: none;
	margin: 0 auto;                     /* keep .hh-wrap's centring — a bare margin:0 left the cards hugging the left on wide screens */
	padding: 0 var(--hh-gutter) var(--hh-section);
	display: grid;
	gap: var(--hh-s6) var(--hh-card-gap);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.hh-shop {
	display: flex;
	flex-direction: column;
	background: var(--hh-surface);
	border: 1px solid var(--hh-line);
}

.hh-shop__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--hh-surface-2);
}

.hh-shop__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--hh-slow) var(--hh-ease);
}

.hh-shop:hover .hh-shop__img { transform: scale(1.03); }

.hh-shop__body {
	padding: var(--hh-s5);
	display: flex;
	flex-direction: column;
	gap: var(--hh-s3);
	flex: 1 1 auto;
}

.hh-shop__name {
	font-family: var(--hh-font-display);
	font-size: var(--hh-t-h4);
	line-height: var(--hh-lh-tight);
	letter-spacing: var(--hh-ls-head);
	margin: 0;
}

.hh-shop__name a {
	color: var(--hh-ink);
	text-decoration: none;
}

.hh-shop__name a:hover { color: var(--hh-gold-750); }

.hh-shop__her {
	margin: 0;
	font-size: var(--hh-t-sm);
	font-style: italic;
	color: var(--hh-gold-750);
}

.hh-shop__addr {
	display: flex;
	gap: 8px;
	margin: 0;
	font-style: normal;
	font-size: var(--hh-t-sm);
	color: var(--hh-ink-700);
	line-height: var(--hh-lh-snug);
}

.hh-shop__addr .hh-icon { flex: 0 0 auto; margin-top: 2px; color: var(--hh-ink-500); }

.hh-shop__dist {
	margin: 0;
	font-size: var(--hh-t-sm);
	font-weight: 500;
	color: var(--hh-ink);
}

.hh-shop__feat {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hh-shop__feat li {
	font-size: var(--hh-t-xxs);
	letter-spacing: var(--hh-ls-wide);
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px solid var(--hh-line);
	color: var(--hh-ink-700);
}

.hh-shop__actions {
	margin-top: auto;
	padding-top: var(--hh-s3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hh-s3);
	flex-wrap: wrap;
}

.hh-shop__tel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--hh-t-sm);
	color: var(--hh-ink-700);
	text-decoration: none;
}

.hh-shop__tel:hover { color: var(--hh-ink); text-decoration: underline; }

/* ------------------------------------------------------------ the two-up */

.hh-stores__helpin {
	display: grid;
	gap: var(--hh-s6);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hh-stores__helpin h2 { margin: 0 0 var(--hh-s3); }
.hh-stores__helpin p  { margin: 0; color: var(--hh-ink-700); }

/* ==========================================================================
   A single shop (rebuilt 6 Nov 2026 — Will: "opening hours are very
   important and they are currently far down the page", then "it's really
   nice on mobile but the desktop version is a bit naff … we should be
   making a feature of the shop pages, not just a continual list of info").

   One DOM, two pages. The phone reads top to bottom in DOM order: title,
   open/closed line, lead, photograph, visit card (hours, address, call,
   directions), story, getting here with the map. The desktop is a feature:
   a full-width ink band, the photograph bleeding to the left edge, the
   name, heritage and hours set in white and gold beside it; the story as a
   spread (what's inside left, the copy right); getting here with Google's
   map as a band of its own. Nothing is reordered by CSS at any width.

   The phone rules come first and are the base; everything from 901px is
   the feature, and everything on the ink ground lives inside that query.
   ========================================================================== */

/* ------------------------------------------------------------- the hero */

.hh-store__herogrid {
	width: 100%;
	max-width: var(--hh-wrap);
	margin-inline: auto;
	padding: var(--hh-s5) var(--hh-gutter) 0;
}

.hh-store__intro .hh-crumbs { padding: 0; margin-bottom: var(--hh-s5); }

.hh-store__title {
	font-size: var(--hh-t-h1);
	line-height: var(--hh-lh-tight);
	margin: 0 0 var(--hh-s3);
}

.hh-store__her {
	font-family: var(--hh-font-display);
	font-size: var(--hh-t-lg);
	color: var(--hh-gold-750);
	margin: 0 0 var(--hh-s4);
}

/* "Open until 17:30 · Today 09:30 – 17:30", under the title at every width:
   the answer to the first question before the lead starts. */
.hh-store__now {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hh-s2) var(--hh-s4);
	margin: 0 0 var(--hh-s4);
	font-size: var(--hh-t-sm);
}

.hh-store__now .hh-open { font-size: var(--hh-t-base); letter-spacing: 0; }
.hh-store__today { color: var(--hh-ink-600); }

.hh-store__intro .hh-lead { margin: 0; }

.hh-store__feat {
	list-style: none;
	margin: var(--hh-s5) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hh-s3) var(--hh-s5);
}

.hh-store__feat li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--hh-t-sm);
	color: var(--hh-ink-700);
}

.hh-store__feat .hh-icon { color: var(--hh-gold-750); }

.hh-store__inside { display: none; }       /* the desktop's copy of the list */

/* "Closing soon" is the third state of the badge: still open, but amber. */
.hh-open.is-soon { color: var(--hh-gold-800); }

/* ------------------------------------------------------------- the photo */

.hh-store__media {
	margin: var(--hh-s6) 0 0;
	background: var(--hh-surface-2);
	border-radius: 10px;
	overflow: hidden;
}

.hh-store__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* -------------------------------------------------------- the visit card */

.hh-store__aside { margin-top: var(--hh-s6); }

.hh-storecard {
	border: 1px solid var(--hh-line);
	border-radius: 10px;
	background: var(--hh-surface-2);
	padding: var(--hh-s5);
	display: flex;
	flex-direction: column;
	gap: var(--hh-s4);
}

.hh-storecard__head {
	display: flex;
	flex-direction: column;
	gap: var(--hh-s2);
}

.hh-storecard__h {
	font-family: var(--hh-font-body);
	font-size: var(--hh-t-xxs);
	font-weight: 500;
	letter-spacing: var(--hh-ls-wide);
	text-transform: uppercase;
	color: var(--hh-ink-600);
	margin: 0;
}

.hh-storecard__head .hh-open {
	font-size: var(--hh-t-lg);
	font-weight: 500;
	letter-spacing: 0;
}

.hh-hours {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hh-t-sm);
	font-variant-numeric: tabular-nums;
}

.hh-hours th,
.hh-hours td {
	padding: 7px 0;
	border-bottom: 1px solid var(--hh-line);
	text-align: left;
	font-weight: 400;
	vertical-align: baseline;
}

.hh-hours tr:last-child th,
.hh-hours tr:last-child td { border-bottom: 0; }

.hh-hours td { text-align: right; color: var(--hh-ink-700); white-space: nowrap; }

.hh-hours .is-today th,
.hh-hours .is-today td {
	font-weight: 600;
	color: var(--hh-ink);
}

.hh-hours__tag {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	font-size: var(--hh-t-xxs);
	font-weight: 500;
	letter-spacing: var(--hh-ls-wide);
	text-transform: uppercase;
	background: var(--hh-ink);
	color: var(--hh-surface);
	border-radius: 3px;
	vertical-align: 1px;
}

.hh-storecard__note {
	margin: calc(-1 * var(--hh-s2)) 0 0;
	font-size: var(--hh-t-xs);
	color: var(--hh-ink-600);
}

.hh-storecard__side {
	display: flex;
	flex-direction: column;
	gap: var(--hh-s4);
}

.hh-storecard__contact {
	display: flex;
	flex-direction: column;
	gap: var(--hh-s3);
	padding-top: var(--hh-s4);
	border-top: 1px solid var(--hh-line);
}

.hh-storecard__row {
	display: flex;
	gap: 10px;
	font-size: var(--hh-t-sm);
	line-height: var(--hh-lh-snug);
}

.hh-storecard__row .hh-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--hh-gold-750);
}

.hh-storecard address {
	font-style: normal;
	display: flex;
	flex-direction: column;
}

.hh-storecard a:not(.hh-btn) {       /* not the buttons: this rule once painted the Directions button's text in its own ink (fixed 5 Nov 2026) */
	color: var(--hh-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.hh-storecard a:not(.hh-btn):hover { text-decoration: underline; }

.hh-storecard__actions {
	display: flex;
	flex-direction: column;
	gap: var(--hh-s2);
	padding-top: var(--hh-s2);
}

.hh-storecard .hh-btn { justify-content: center; gap: 8px; }

/* ------------------------------------------------------------- the story */

.hh-store__story { padding-top: var(--hh-s6); }
.hh-store__copy > * { max-width: 68ch; }

.hh-store__h2 {
	font-size: var(--hh-t-h3);
	margin: 0 0 var(--hh-s4);
}

/* ------------------------------------------------------- getting here */

.hh-store__going { padding-block: var(--hh-s7) var(--hh-section); }
.hh-store__goingtext p { max-width: 68ch; }
.hh-store__goingaddr { font-style: normal; color: var(--hh-ink-600); margin: 0 0 var(--hh-s4); }
.hh-store__goinglink { margin: 0 0 var(--hh-s5); }

.hh-store__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--hh-surface-2);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.hh-store__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------- the other shops

   A quiet line of links above the footer: the nine, nearest first, each
   name on a thick gold underline (Will, 6 Nov 2026) with its distance in
   grey beside it, and "All ten shops". A cross-link, not a feature. */

.hh-store__more {
	border-top: 1px solid var(--hh-line);
	padding-block: var(--hh-s6);
}

.hh-store__morein {
	max-width: calc(1360px + 2 * var(--hh-gutter));
	display: flex;
	flex-direction: column;
	gap: var(--hh-s4);
}

.hh-store__morelabel { margin: 0; }

/* Columns rather than a run-on line (Will, 6 Nov 2026: "a little more
   structure"): two on a phone, three from 641px, and three on a desktop
   too, where the long names need the room. */
.hh-near {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hh-s3) var(--hh-s5);
	font-size: var(--hh-t-sm);
}

.hh-near a {
	color: var(--hh-ink);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.hh-near__name { align-self: flex-start; }

/* The underline is a box-shadow rather than a border, so it sits under the
   name's descenders without pushing the line and can slide up on hover. */
.hh-near__name {
	font-weight: 500;
	padding-bottom: 3px;
	box-shadow: inset 0 -3px 0 var(--hh-gold-500);
	transition: box-shadow var(--hh-fast, .15s) var(--hh-ease), color var(--hh-fast, .15s) var(--hh-ease);
}

.hh-near a:hover .hh-near__name,
.hh-near a:focus-visible .hh-near__name { box-shadow: inset 0 -3px 0 var(--hh-ink); }

.hh-near__dist { color: var(--hh-ink-500); font-size: var(--hh-t-xs); }

.hh-near .hh-near__all { flex-direction: row; align-items: center; gap: 6px; } /* the arrow beside the words, not under them */

@media (min-width: 641px) {
	.hh-near { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
	.hh-store__morein { flex-direction: row; align-items: flex-start; gap: var(--hh-s7); }
	.hh-store__morelabel { flex: 0 0 260px; padding-top: 2px; }
	.hh-near { flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hh-s4) var(--hh-s6); } /* three, not five: at five "The Cigar Emporium, Windsor" wrapped under its underline (Will, 6 Nov) */
}
/* ----------------------------------------------------------- the phone bar

   Phone only, and only once the card's own buttons have left the screen.
   Hidden by the attribute until JS has something to do with it, so a
   visitor without JS never sees a bar that cannot hide itself. */

.hh-store__bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: var(--hh-ink); color: #fff;
	border-top: 1px solid var(--hh-line-dark);
	transform: translateY(100%);
	transition: transform var(--hh-fast) var(--hh-ease);
}

.hh-store__bar.is-on { transform: none; }

.hh-store__barin {
	display: flex; align-items: center; gap: var(--hh-s3);
	padding: var(--hh-s3) var(--hh-gutter);
	padding-bottom: max(var(--hh-s3), env(safe-area-inset-bottom));
}

.hh-store__barname {
	flex: 1 1 auto; min-width: 0;
	margin: 0; font-size: var(--hh-t-sm); line-height: 1.3;
	display: flex; flex-direction: column; gap: 2px;
}

.hh-store__barname b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-store__barname .hh-open { font-size: var(--hh-t-xs); letter-spacing: 0; }
.hh-store__bar .hh-btn { flex: 0 0 auto; }
.hh-store__bar .hh-btn--ghost { color: #fff; border-color: var(--hh-ink-400); }

/* The badge on the ink ground (the hero gets the same from 901px). */
.hh-store__bar .hh-open.is-open { color: #7fd6a4; }  /* 9.1:1 on ink */
.hh-store__bar .hh-open.is-soon { color: var(--hh-gold-400); }
.hh-store__bar .hh-open.is-shut { color: var(--hh-ink-300); }

/* ---------------------------------------------------------------- phones */

@media (max-width: 640px) {
	.hh-store__herogrid { padding-top: var(--hh-s4); }
	.hh-store__intro .hh-crumbs { margin-bottom: var(--hh-s4); }
	.hh-store__media { margin-top: var(--hh-s5); border-radius: 8px; }
	.hh-store__aside { margin-top: var(--hh-s5); }
	.hh-storecard { padding: var(--hh-s4); }
	.hh-store__going { padding-top: var(--hh-s6); }
	.hh-store__embed { border-radius: 8px; }
}

/* ---------------------------------------------------------------- tablets

   One column still, but a 340px card stretched to 700px is a table with a
   mile between the day and the time, so the card goes two-up inside:
   hours on the left, address and buttons on the right. */

@media (min-width: 641px) and (max-width: 900px) {
	.hh-storecard {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--hh-s6);
		align-items: start;
	}
	.hh-storecard__head { grid-column: 1 / -1; }
	.hh-hours { grid-column: 1; grid-row: 2; }
	.hh-storecard__note { grid-column: 1; grid-row: 3; }
	.hh-storecard__side { grid-column: 2; grid-row: 2 / span 2; }
	.hh-storecard__contact { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   The desktop feature, from 901px
   ========================================================================== */

@media (min-width: 901px) {

	/* ---- the ink band: photograph left to the edge, the panel right ---- */

	.hh-store__hero {
		background: var(--hh-ink);
		color: var(--hh-ink-200);
	}

	.hh-store__herogrid {
		display: grid;
		grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
		padding: 0;
		align-items: stretch;
	}

	.hh-store__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		margin: 0;
		border-radius: 0;
		background: var(--hh-ink-900);
		min-height: 560px;
		position: relative;
	}

	.hh-store__media .hh-slot { position: absolute; inset: 0; height: 100%; }

	.hh-store__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	.hh-store__intro {
		grid-column: 2;
		grid-row: 1;
		padding: var(--hh-s6) var(--hh-gutter) 0 clamp(var(--hh-s6), 4vw, var(--hh-s8));
		max-width: 720px;                 /* on a 1920px band the text does not run the width of the column */
	}

	.hh-store__intro .hh-crumbs { color: var(--hh-ink-400); margin-bottom: var(--hh-s5); }
	.hh-store__intro .hh-crumbs a:hover,
	.hh-store__intro .hh-crumbs [aria-current] { color: var(--hh-ink-200); }
	.hh-store__intro .hh-eyebrow--brand { color: var(--hh-gold-300); }
	.hh-store__title { color: #fff; font-size: clamp(2.25rem, 1.2rem + 2.6vw, 4rem); text-wrap: balance; margin-bottom: var(--hh-s4); }
	/* Stepped down by name length (the template adds the class), so every
	   name holds to two lines in the column: 64px carries "Bath" and
	   "Oxford"; "The Bear Shop, Cardiff" takes 48; "Shave & Coster,
	   Reading" and "The Cigar Emporium, Windsor" take 40 (Will's screenshot,
	   6 Nov 2026: three lines). */
	.hh-store__title--long  { font-size: clamp(2rem, 1.3rem + 1.5vw, 3rem); }
	.hh-store__title--xlong { font-size: clamp(1.75rem, 1.1rem + 1.25vw, 2.5rem); }
	.hh-store__her { color: var(--hh-gold-300); font-size: var(--hh-t-h4); margin-bottom: var(--hh-s4); }
	.hh-store__now { margin-bottom: var(--hh-s4); }
	.hh-store__now .hh-open { font-size: var(--hh-t-lg); font-weight: 500; }
	.hh-store__today { color: var(--hh-ink-300); }
	.hh-store__intro .hh-lead { color: var(--hh-gold-200); }
	.hh-store__feat--intro { display: none; }

	/* the open badge on ink, every state */
	.hh-store__hero .hh-open.is-open { color: #7fd6a4; }
	.hh-store__hero .hh-open.is-soon { color: var(--hh-gold-400); }
	.hh-store__hero .hh-open.is-shut { color: var(--hh-ink-300); }

	/* ---- the hours, as a ruled table in gold on ink ---- */

	.hh-store__aside {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		padding: var(--hh-s5) var(--hh-gutter) var(--hh-s6) clamp(var(--hh-s6), 4vw, var(--hh-s8));
		max-width: 720px;
	}

	.hh-storecard {
		border: 0;
		border-top: 1px solid var(--hh-line-dark);
		border-radius: 0;
		background: none;
		padding: var(--hh-s5) 0 0;
	}

	.hh-storecard__head .hh-open { display: none; }  /* the line under the title has it; once in a panel is enough */
	.hh-storecard__h { color: var(--hh-gold-300); }
	.hh-hours th, .hh-hours td { border-bottom-color: var(--hh-line-dark); color: var(--hh-ink-200); }
	.hh-hours td { color: var(--hh-ink-200); }
	.hh-hours .is-today th, .hh-hours .is-today td { color: #fff; }
	.hh-hours__tag { background: var(--hh-gold-500); color: var(--hh-ink); }
	.hh-storecard__note { color: var(--hh-ink-400); }
	.hh-storecard__contact { border-top-color: var(--hh-line-dark); }
	.hh-storecard__row { color: var(--hh-ink-200); }
	.hh-storecard__row .hh-icon { color: var(--hh-gold-500); }
	.hh-storecard a:not(.hh-btn) { color: var(--hh-ink-200); }
	.hh-storecard a:not(.hh-btn):hover { color: #fff; }
	.hh-storecard .hh-btn--ink { background: var(--hh-gold-500); color: var(--hh-ink); }
	.hh-storecard .hh-btn--ink:hover { background: var(--hh-gold-400); }
	.hh-storecard .hh-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
	.hh-storecard .hh-btn--ghost:hover { border-color: var(--hh-gold-500); color: var(--hh-gold-400); }

	/* ---- the story as a spread ---- */

	.hh-store__story {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: clamp(var(--hh-s7), 6vw, var(--hh-s10));
		padding-block: var(--hh-section) 0;
		max-width: calc(1360px + 2 * var(--hh-gutter));
	}

	.hh-store__inside { display: block; }
	.hh-store__inside .hh-eyebrow { margin-bottom: var(--hh-s4); }
	.hh-store__feat--inside { flex-direction: column; gap: var(--hh-s3); margin: 0; }
	.hh-store__feat--inside li { font-size: var(--hh-t-base); gap: 10px; }

	.hh-store__copy { grid-column: 2; }
	.hh-store__copy > * { max-width: 62ch; font-size: var(--hh-t-lg); }
	.hh-store__copy > p + p { margin-top: var(--hh-s4); }
	.hh-store__copy > p:first-child::first-letter {
		font-family: var(--hh-font-display);
		font-size: 3.4em;
		line-height: .8;
		float: left;
		padding: 6px 10px 0 0;
		color: var(--hh-gold-750);
	}

	/* ---- getting here: the text on the left, the map on the right ---- */

	.hh-store__going { padding-block: var(--hh-section); }

	.hh-store__goinggrid {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: clamp(var(--hh-s7), 6vw, var(--hh-s10));
		align-items: start;
		max-width: calc(1360px + 2 * var(--hh-gutter));
	}

	.hh-store__goingtext { padding-top: var(--hh-s2); }
	.hh-store__goinglink { margin-bottom: 0; }
	.hh-store__embed { aspect-ratio: 16 / 10; }

	.hh-store__bar { display: none; }
}

/* Between 901 and 1200px the panel takes half the band and the title steps
   down to 40px, or "Shave & Coster, Reading" runs to three lines and the
   band to 1,100px tall. */
@media (min-width: 901px) and (max-width: 1200px) {
	.hh-store__herogrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.hh-store__title { font-size: 2.5rem; }
	.hh-store__title--long  { font-size: 2.25rem; }
	.hh-store__title--xlong { font-size: 2rem; }
}
@media (min-width: 901px) and (max-width: 1000px) {
	.hh-store__hero .hh-storecard { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--hh-s5); } /* the hours column gets the larger share; the address wraps instead */
	.hh-store__hero .hh-hours__tag { display: none; } /* "Friday TODAY 09:30 – 17:30" still broke the row at this width; the bold white row and the "Today" line under the title carry it */
}

/* The hours and the address side by side, which brings the band down to a
   single screen (from 901px: the panel is half the band there). */
@media (min-width: 901px) {
	.hh-storecard {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--hh-s6);
		align-items: start;
	}
	.hh-storecard__head { grid-column: 1 / -1; }
	.hh-hours { grid-column: 1; grid-row: 2; }
	.hh-storecard__note { grid-column: 1; grid-row: 3; }
	.hh-storecard__side { grid-column: 2; grid-row: 2 / span 2; }
	.hh-storecard__contact { border-top: 0; padding-top: 0; }
	.hh-store__media { min-height: 600px; }
}

/* On a 1920px band the photograph column tops out and the panel keeps its
   measure; beyond that the band is centred like the header. */
@media (min-width: 1921px) {
	.hh-store__hero { max-width: var(--hh-wrap); margin-inline: auto; }
}

/* ==========================================================================
   The pass of 5 Nov 2026 (Will: "give it all a pass"). The overview map and
   its numbered pins; the cards numbered to match, rounded, lifted on hover;
   (the shop page's own rules moved into the block above on 6 Nov 2026).
   ========================================================================== */

/* the overview */
.hh-stores__map { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--hh-surface); box-shadow: inset 0 0 0 1px var(--hh-line); }
.hh-drawnmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* the frame is the drawing's own ratio, so the pins stay true */
.hh-drawnmap__sea { fill: var(--hh-surface); }
.hh-drawnmap__land { fill: var(--hh-gold-100); stroke: var(--hh-gold-600); stroke-width: 2; stroke-linejoin: round; }
.hh-drawnmap__dot { fill: var(--hh-ink-500); }
.hh-drawnmap__label { font: 500 24px var(--hh-font-body); letter-spacing: .06em; text-transform: uppercase; fill: var(--hh-ink-600); } /* sized for the 1400-wide drawing: about 10px once it sits in the head's half */
.hh-stores__map--tall { display: none; }
.hh-stores__pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); width: 30px; height: 38px; text-decoration: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition: transform var(--hh-fast, .15s) var(--hh-ease); z-index: 1; }
.hh-stores__pin::before { content: ""; position: absolute; inset: 0 0 8px; border-radius: 50%; background: var(--hh-ink); }
.hh-stores__pin::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; background: var(--hh-ink); transform: translate(-50%, -4px) rotate(45deg); }
.hh-stores__pin > span:first-child { position: absolute; inset: 0 0 8px; display: grid; place-items: center; z-index: 1; font: 600 13px/1 var(--hh-font-body); color: var(--hh-gold-500); }
.hh-stores__pin:hover, .hh-stores__pin:focus-visible { transform: translate(-50%, -100%) scale(1.15); z-index: 2; outline: none; }
.hh-stores__pin:focus-visible::before { box-shadow: 0 0 0 2px var(--hh-gold-500); }
@media (max-width: 640px) { .hh-stores__map { border-radius: 8px; } .hh-stores__pin { width: 24px; height: 31px; } .hh-stores__pin > span:first-child { font-size: 11px; } }

/* the cards */
.hh-shop { position: relative; border-radius: 10px; overflow: hidden; transition: transform var(--hh-fast, .15s) var(--hh-ease), box-shadow var(--hh-fast, .15s) var(--hh-ease); scroll-margin-top: calc(var(--hh-nav-h) + 24px); }
.hh-shop:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(0,0,0,.25); }
.hh-shop:target { box-shadow: 0 0 0 2px var(--hh-gold-500); }
.hh-shop__media { position: relative; }
.hh-shop__num { position: absolute; left: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hh-ink); color: var(--hh-gold-500); font: 600 13px/1 var(--hh-font-body); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.hh-shop__body { gap: 10px; }
.hh-shop__name { font-size: 22px; }
.hh-shop__addr .hh-icon { color: var(--hh-gold-750); }

/* The map beside the intro from 1001px (the head widens to two columns); on a
   phone the wide one is hidden and a 4:3 one follows the cards. */
.hh-stores__head.has-map { max-width: var(--hh-wrap); } /* the same 1920px column as the header, centred; above that the map stops at the column's edge (Will, 5 Nov: wide-screen screenshot) */
.hh-stores__intro { max-width: var(--hh-wrap-narrow); }
.hh-stores__mapafter { padding-bottom: var(--hh-section); margin-top: calc(var(--hh-section) * -1 + var(--hh-s6)); }
@media (min-width: 1001px) {
  /* The map runs from the underside of the nav to the right edge of the
     viewport (Will, 5 Nov: "not cut off to white at the top"); the
     breadcrumb sits inside the intro column so nothing stands above it. */
  .hh-stores__head.has-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hh-s7); align-items: center; padding-top: 0; }
  .hh-stores__head.has-map .hh-stores__intro { align-self: center; padding-top: var(--hh-s5); }
  .hh-stores__head.has-map .hh-crumbs { padding-inline: 0; padding-top: 0; margin-bottom: var(--hh-s6); }
  .hh-stores__head.has-map .hh-stores__map--wide { align-self: start; justify-self: end; width: 100%; max-width: 880px; margin-right: calc(-1 * var(--hh-gutter)); border-radius: 0 0 0 12px; box-shadow: none; } /* capped (Will, 5 Nov): on a big monitor it stops growing and sits at the right of its column */
  .hh-stores__mapafter { display: none; }
}
@media (min-width: 1921px) {
  .hh-stores__head.has-map .hh-stores__map--wide { border-radius: 0 0 12px 12px; } /* both bottom corners show once the column no longer reaches the viewport edge */
}
@media (max-width: 1000px) {
  .hh-stores__map--wide { display: none; }
  .hh-stores__map--tall { display: block; }
}