/* Location pages.
   The product grids reuse the theme's page-hero, product-section, product-grid,
   family-card and trust-bar untouched. Only the copy sections below are new,
   and they are built from the theme's own tokens so they read as native. */

.cir-loc-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--cir-pad-mobile, 20px);
}
.cir-loc-inner--narrow { max-width: 760px; }

.cir-loc-eyebrow {
	display: block;
	font-family: var(--cir-font-ui, 'Outfit', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cir-gold, #C5A467);
	margin-bottom: 10px;
}
.cir-loc-inner h2 {
	font-family: var(--cir-font-display, 'Playfair Display', serif);
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.15;
	color: var(--cir-text-dark, #1A1A1A);
	margin: 0;
	text-wrap: balance;
}
.cir-loc-gold {
	width: 56px;
	height: 2px;
	background: var(--cir-gold, #C5A467);
	margin: 16px 0 28px;
}

/* ── Delivery ─────────────────────────────────────────────── */
.cir-loc-delivery { padding: 64px 0; background: var(--cir-bg-warm, #F5F0EA); }

.cir-loc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.cir-loc-stat {
	background: var(--cir-bg-white, #fff);
	border: 1px solid var(--cir-border, #E8E3DC);
	border-radius: 2px;
	padding: 26px 24px;
}
.cir-loc-stat i, .cir-loc-stat svg,
.cir-loc-card i, .cir-loc-card svg,
.cir-loc-areas i, .cir-loc-areas svg {
	width: 22px; height: 22px;
	color: var(--cir-gold, #C5A467);
	stroke-width: 1.6;
	display: block;
}
.cir-loc-stat strong {
	display: block;
	margin: 14px 0 6px;
	font-family: var(--cir-font-heading, 'Lora', serif);
	font-size: 20px;
	color: var(--cir-text-dark, #1A1A1A);
}
.cir-loc-stat span {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cir-text-body, #5A5549);
}

.cir-loc-areas {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 26px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--cir-text-body, #5A5549);
}
.cir-loc-areas i, .cir-loc-areas svg { flex: none; margin-top: 3px; }

/* ── Editorial block ──────────────────────────────────────── */
.cir-loc-editorial { padding: 72px 0; background: var(--cir-bg-white, #fff); }
.cir-loc-prose p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--cir-text-body, #5A5549);
	margin: 0 0 18px;
}
.cir-loc-prose p:last-child { margin-bottom: 0; }
/* Opening line carries a little more weight, the way a feature would. */
.cir-loc-prose p:first-child { font-size: 18.5px; color: var(--cir-text-dark, #1A1A1A); }

/* Measured 29 Aug 2026: 152px above the "Also In Stock" band against 72px
   below it, because the theme's .product-section adds 80px of its own padding
   underneath. Dropping that lands the gap at 72 and the band sits evenly
   between the two grids. */
/* TWO classes deliberately. A single .product-section--before-band ties with
   the theme's .product-section on specificity, and the theme's stylesheet
   loads after this one, so the theme won and the padding stayed at 80px.
   0,2,0 beats 0,1,0 whatever the load order. */
.product-section.product-section--before-band { padding-bottom: 0; }

/* The stock-column band. Its two lines are separate paragraphs rather than one
   sentence with a break, so the split holds at any width instead of leaving a
   single orphaned word ("depths.") on the second line. */
.cir-loc-band-sub {
	margin-top: 4px;
	font-size: 14.5px;
	letter-spacing: .01em;
	opacity: .78;
}

/* Hub : region links carry more weight than the county grid beneath them. */
.cir-loc-links--big a {
	font-size: 17px;
	font-family: var(--cir-font-heading, 'Lora', serif);
	color: var(--cir-text-dark, #1A1A1A);
}
.cir-loc-links--big { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 20px; }

/* Hero copy. Myles flagged the opening block as too big, so it is capped to a
   comfortable measure rather than running the full width of the hero. */
.page-hero p { max-width: 62ch; }

/* ── Why buy from us ──────────────────────────────────────── */
.cir-loc-lead {
	max-width: 68ch;
	margin: -8px 0 28px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--cir-text-body, #5A5549);
}
.cir-loc-why { padding: 72px 0; background: var(--cir-bg-cream, #FDFAF7); }
.cir-loc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--cir-border, #E8E3DC);
	border: 1px solid var(--cir-border, #E8E3DC);
}
.cir-loc-card {
	background: var(--cir-bg-white, #fff);
	padding: 30px 28px;
}
.cir-loc-card h3 {
	font-family: var(--cir-font-heading, 'Lora', serif);
	font-size: 18px;
	color: var(--cir-text-dark, #1A1A1A);
	margin: 14px 0 8px;
}
.cir-loc-card p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--cir-text-body, #5A5549);
}

/* ── CTA ──────────────────────────────────────────────────── */
.cir-loc-cta {
	padding: 68px 0;
	background: var(--cir-burgundy, #832E31);
	text-align: center;
}
.cir-loc-cta h2 {
	font-family: var(--cir-font-display, 'Playfair Display', serif);
	font-size: clamp(24px, 3vw, 34px);
	color: #fff;
	margin: 0 0 12px;
	text-wrap: balance;
}
.cir-loc-cta p {
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 auto 26px;
	max-width: 46ch;
}
.cir-loc-cta-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Both buttons are inverted on the burgundy band. btn-primary is burgundy on
   burgundy otherwise, which made the secondary button look like the primary. */
.cir-loc-cta .btn-primary {
	background: var(--cir-gold, #C5A467);
	border-color: var(--cir-gold, #C5A467);
	color: var(--cir-text-dark, #1A1A1A);
}
.cir-loc-cta .btn-primary:hover {
	background: #fff;
	border-color: #fff;
	color: var(--cir-burgundy, #832E31);
}
.cir-loc-cta .btn-outline-dark {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}
.cir-loc-cta .btn-outline-dark:hover {
	background: #fff;
	color: var(--cir-burgundy, #832E31);
}

/* ── Drill down + siblings ────────────────────────────────── */
.cir-loc-nav { padding: 64px 0; background: var(--cir-bg-warm, #F5F0EA); }
.cir-loc-nav .cir-loc-eyebrow { margin-top: 44px; }
.cir-loc-nav .cir-loc-eyebrow:first-child { margin-top: 0; }

/* Pills that FIT THEIR TEXT and wrap, rather than a rigid grid of stretched
   boxes. Stretched boxes with left-aligned text read as disabled form fields;
   a content-width pill with a chevron reads as navigation. */
.cir-loc-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cir-loc-links li { display: block; }
.cir-loc-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 10px 16px;
	background: var(--cir-bg-white, #fff);
	border: 1px solid var(--cir-border, #E8E3DC);
	border-radius: 2px;
	color: var(--cir-text-dark, #1A1A1A);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	transition: border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.cir-loc-links a i, .cir-loc-links a svg {
	width: 15px; height: 15px; flex: none;
	color: var(--cir-gold, #C5A467);
	transition: transform .18s;
}
.cir-loc-links a:hover {
	color: var(--cir-burgundy, #832E31);
	border-color: var(--cir-gold, #C5A467);
	transform: translateY(-1px);
	box-shadow: 0 2px 10px rgba(26, 26, 26, .06);
}
.cir-loc-links a:hover i, .cir-loc-links a:hover svg { transform: translateX(2px); }

/* The way back up is a different KIND of action to the sideways links, so it
   is separated by a hairline rather than sitting in the same visual family. */
.cir-loc-up {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--cir-border, #E8E3DC);
	color: var(--cir-burgundy, #832E31);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	transition: gap .18s;
}
.cir-loc-up:hover { gap: 13px; }
.cir-loc-up i, .cir-loc-up svg { width: 17px; height: 17px; color: var(--cir-gold, #C5A467); flex: none; }

@media (min-width: 768px) {
	.cir-loc-inner { padding: 0 var(--cir-pad-tablet, 40px); }
	.cir-loc-nav { padding-left: var(--cir-pad-tablet, 40px); padding-right: var(--cir-pad-tablet, 40px); }
}