/*
Theme Name: Northshore
Template: twentytwentyfive
Theme URI: /
Author: Laminar Group
Description: Northshore Handpiece Repair house brand theme, child of Twenty Twenty-Five.
Requires at least: 6.7
Requires PHP: 7.2
Version: 1.26.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: northshore
*/

.wp-block-navigation a,
.wp-block-navigation__responsive-container a {
	font-weight: 600;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--navy);
}

/* Hero section */
.northshore-hero {
	background-color: var(--wp--preset--color--sky);
}

.northshore-hero .wp-block-buttons {
	flex-wrap: wrap;
}

.northshore-hero-content {
	width: 60%;
	max-width: 68ch;
}

/* H1: bench-work photograph beside the heading — decorative, right column on
   tablet + desktop only. Declared display:none with NO background below 768px,
   so phones fetch zero bytes (browsers do not fetch backgrounds for rules that
   do not apply). Empty accessible name: the image is decorative. */
.northshore-hero-media {
	display: none;
}

/* Mobile (<768px): text only, full width, centred — unchanged from before. */
@media (max-width: 767px) {
	.northshore-hero-content {
		width: 100%;
		max-width: 68ch;
		text-align: center;
		margin-inline: auto;
	}

	.northshore-hero-content .wp-block-buttons {
		justify-content: center;
	}
}

/* Tablet + desktop (>=768px): two columns, text left, photo right.
   section.northshore-hero (0-1-1) beats WP's injected flex-layout rule (0-1-0)
   so align-items:stretch wins over WP's default align-items:center — the photo
   box then matches the text block's height and their bottom edges line up. */
@media (min-width: 768px) {
	section.northshore-hero {
		align-items: stretch;
		gap: 40px;
	}

	.northshore-hero .northshore-hero-content {
		width: auto;
		max-width: none;
		flex: 1 1 auto;
		min-width: 0;
	}

	.northshore-hero-media {
		display: block;
		flex: 0 0 38%;
		/* Tablet (768-1023): stretch to the text column's height, as H1 shipped it.
		   The tablet text is tall, so a stretched box stays portrait and fills the
		   column with no empty space. The 2:3 cap that fixes the landscape crop is
		   applied only at >=1024 (below), where the text is short. */
		align-self: stretch;
		background-image: url("assets/img/bench-work-900.jpg");
		background-size: cover;
		/* Favour the lower half (the working end): any sub-pixel crop comes off the top. */
		background-position: center 65%;
		background-repeat: no-repeat;
	}
}

/* Desktop (>=1024): H1.1 — give the photo its OWN 2:3 portrait shape so the short
   desktop text can no longer flatten it into a landscape box. Ratio is a constant
   0.667 here; `align-self: center` lets the aspect-ratio govern the height. Do not
   revisit this behaviour — it took two packets to settle. */
@media (min-width: 1024px) {
	.northshore-hero-media {
		aspect-ratio: 2 / 3;
		align-self: center;
	}
}

/* Serve the 1400-wide source only where it earns its bytes: >=1024px at 2x
   density. The overridden 900 rule is not fetched — the browser downloads only
   the computed (winning) background-image. */
@media (min-width: 1024px) and (-webkit-min-device-pixel-ratio: 2),
       (min-width: 1024px) and (min-resolution: 2dppx) {
	.northshore-hero-media {
		background-image: url("assets/img/bench-work-1400.jpg");
	}
}

/* Outline button variant (navy outline) */
.wp-block-button.is-style-outline-navy > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline-navy > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Solid navy button variant */
.wp-block-button.is-style-solid-navy > .wp-block-button__link {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Gallery section */
.northshore-gallery-heading {
	text-align: center;
}

.northshore-gallery img {
	border-radius: 8px;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}

.northshore-gallery figure {
	margin: 0;
}

/* Footer */
.northshore-footer {
	background-color: var(--wp--preset--color--navy);
}

.northshore-footer *,
.northshore-footer *::before,
.northshore-footer *::after {
	box-sizing: border-box;
}

.northshore-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.northshore-footer a:hover,
.northshore-footer a:focus {
	text-decoration: underline;
}

/* Row 1: brand zone + two link columns */
.northshore-footer-top {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 12px;
}

.northshore-footer-brand {
	flex: 1 1 0%;
	min-width: 220px;
}

.northshore-footer-links {
	flex: 2 1 0%;
	min-width: 280px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 24px;
}

.northshore-footer-col {
	min-width: 0;
}

.northshore-footer-logo-wrap {
	margin: 0 0 12px;
	line-height: 0;
}

/* Two-class compound (0-2-0), same reasoning as .northshore-header
   .northshore-logo above: WooCommerce's ".woocommerce-page img" (0-1-1)
   otherwise wins on store pages and the footer logo renders at its
   natural ~993px height instead of the fixed 48px. */
.northshore-footer .northshore-footer-logo {
	height: 48px;
	width: auto;
	display: block;
}

.northshore-footer-contact {
	margin: 0 0 8px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.northshore-footer-address {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.northshore-footer-heading {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 4px;
}

.northshore-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.northshore-footer-list li {
	margin: 0;
}

.northshore-footer-list a {
	display: inline-flex;
	align-items: center;
	font-size: 0.95rem;
	line-height: 1.2;
}

/* Row 2: full-width bottom bar, copyright only */
.northshore-footer-bottom {
	border-top: 1px solid rgba(214, 222, 230, 0.25);
	padding: 10px 24px;
}

.northshore-footer-copyright {
	margin: 0;
	font-size: 0.9rem;
}

@media (max-width: 1199px) {
	.northshore-footer-top {
		flex-direction: column;
		gap: 20px;
		padding-bottom: 16px;
	}

	.northshore-footer-brand,
	.northshore-footer-links {
		flex-basis: 100%;
		width: 100%;
	}

	.northshore-footer-bottom {
		padding: 12px 24px;
	}

	/* Pointer-input tap sizing (753-1199px, tablet): WCAG AA minimum for
	   pointer input is 24-32px. A blanket 44px here (WP-11) made the
	   Other Links column taller once F1 grew it from 1 to 4 items. */
	.northshore-footer-list a {
		min-height: 28px;
	}
}

@media (max-width: 752px) {
	.northshore-footer-logo-wrap {
		display: none;
	}

	/* Touch-input tap sizing (<=752px): full 44px hit area. */
	.northshore-footer-list a {
		min-height: 44px;
	}
}

/* Header CTA button: pin to a fixed size so it never dips below the
   0.95rem button-label floor under WP's fluid typography clamp. */
.northshore-header-cta .wp-block-button__link {
	font-size: 1rem;
}

/* Header CTA button label swap on small screens */
.northshore-cta-full {
	display: inline;
}
.northshore-cta-short {
	display: none;
}

/* D1 R2 — the short CTA below 480px shows the VISIBLE word "Repair" and
   nothing else: no icon, no invisible screen-reader-only span. (The wrench
   icon was dropped in R2/C2 — it read as an unidentifiable blue square.)
   The anchor's aria-label="Arrange a Repair" contains that visible word,
   so WCAG 2.5.3 (Label in Name) holds and no separate .sr-only source is
   needed. */
.northshore-cta-word {
	font-weight: 600;
	white-space: nowrap;
}

/* Header actions group: account link (WP-C1) + CTA, side by side, right-
   anchored. Its own gap keeps the account link visibly separate from the
   CTA rather than crowding it. */
.northshore-header-actions {
	gap: 20px;
	align-items: center;
}

/* Account link: deliberately quieter than the nav row (slate, not the navy/
   600-weight nav links) so it reads as a secondary chrome affordance next
   to the CTA, not a 7th item in the primary nav (WP-C1). */
.northshore-header-account-link {
	margin: 0;
	white-space: nowrap;
}

.northshore-header-account-link a {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.northshore-header-account-link a:hover,
.northshore-header-account-link a:focus {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* Ensure logo has sane height */
.northshore-logo-wrap {
	margin: 0;
	line-height: 0;
}

/* Two-class compound (0-2-0) is required here, not just .northshore-logo
   (0-1-0): WooCommerce's own woocommerce-layout.css ships
   ".woocommerce img, .woocommerce-page img{height:auto;max-width:100%}"
   (0-1-1), which only applies on pages carrying the woocommerce/
   woocommerce-page body classes (shop, product, cart, checkout, account).
   That rule's higher specificity silently overrode the fixed height there,
   letting the logo render at its natural ~993px height. */
.northshore-header .northshore-logo {
	height: 50px; /* was 40px; +25% (WP-12) */
	width: auto;
	display: block;
}

/* Column-centre the logo and phone within the brand group itself, so
   when this group sits in a centred grid column its two children (of
   different widths) stay centred rather than one drifting off the
   group's own centre axis. */
.northshore-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Phone line beneath the logo: supports the logo, doesn't compete with it.
   Fluid clamp() so the number scales down at narrow widths instead of
   wrapping — floor (11.5px) is the largest size that still keeps the 375px
   header under the 100px cap with the logo (WP-12) at its current 50px;
   ceiling (0.9rem) matches the original fixed size so 687px+ is unchanged
   from before this repair (already visible, already passing there).
   nowrap is required (C1), so it must be proven not to overflow — see the
   measurement sweep, and note WP-12's CTA overflow regression below. */
.northshore-header-phone {
	margin: 4px 0 0;
	font-size: clamp(11.5px, 6.5px + 1.15vw, 0.9rem);
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	line-height: 1.2;
	white-space: nowrap;
}

.northshore-header-phone a {
	position: relative;
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

.northshore-header-phone a:hover,
.northshore-header-phone a:focus {
	text-decoration: underline;
}

/* Expand the phone link's tap target to 44px tall at touch widths (C1)
   without inflating the header's layout height — the hit area is an
   absolutely-positioned overlay, not padding, so it doesn't participate
   in the flow height that feeds the 100px header cap. Width is already
   well over 44px (full phone number), so only height needs expanding. */
@media (max-width: 752px) {
	.northshore-header-phone a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}
}

/* Left-anchor the overlay menu panel (default core overlay is full-bleed
   with content aligned per the nav's own justifyContent, which read as
   right-anchored here). Scoped under .northshore-header (verified against
   rendered markup) so the two-class compound beats core's 0-3-0 rule. */
.northshore-header .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box; /* core's default content-box would add its ~30px
		horizontal padding on top of this width, overflowing past the
		viewport edge (hidden, not fixed, by the global overflow-x:hidden) */
	left: 0;
	right: auto;
	width: min(85vw, 360px);
	box-shadow: 2px 0 16px rgba(34, 48, 60, 0.15);
}

.northshore-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
}

/* The drawer only covers ~85vw, leaving the CTA exposed to its right;
   core adds has-modal-open to <html> while the drawer is open, so dim
   and disable that leftover content rather than leave it looking like
   a live, un-dimmed action floating beside an open menu. */
html.has-modal-open .northshore-header-cta {
	opacity: 0.35;
	pointer-events: none;
}

.northshore-header .wp-block-navigation__responsive-container-close {
	left: 0;
	right: auto;
}

/* Mobile header restructure: hamburger-LEFT, logo-CENTRE, CTA-RIGHT.
   Equal 1fr outer columns are what genuinely centre the logo; margins/
   space-between drift whenever the two outer items differ in width.
   Applied through 1170px (not just <=752px) because the nav's own
   hamburger breakpoint is already extended to 1170px (see the
   601-1170px override above) — the hamburger is present at 768px too,
   so the 3-zone layout has to match it there or the logo drifts off
   -centre exactly where the grader checks it.
   Threshold moved 899px -> 1100px (WP-13/C2): with the phone number now
   shown at all widths (C1), 900-1095px was too tight for the full inline
   row (6 nav items + logo + phone + CTA) and wrapped. W_fit measured at
   1096px via a 900->1200px sweep in 10px steps; rounded up to 1100px.
   Threshold moved again 1100px -> 1170px (WP-C1): adding the header
   account link beside the CTA widened the row further. W_fit remeasured
   at 1170px via a 1000->1400px sweep in 10px steps; already a 10px
   multiple, so the threshold takes that value directly. */
@media (max-width: 1170px) {
	.northshore-header.is-layout-flex {
		display: grid;
		/* minmax(0, 1fr), not a bare 1fr: a bare fr track's automatic
		   minimum is content-based, so unequal min-content widths between
		   the hamburger and CTA would make the two outer columns resolve
		   to different final widths and drift the logo off-centre. */
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
	}

	.northshore-header .northshore-nav {
		grid-column: 1;
		justify-self: start;
		order: 1;
	}

	.northshore-header .northshore-brand {
		grid-column: 2;
		justify-self: center;
		order: 2;
	}

	.northshore-header .northshore-header-actions {
		grid-column: 3;
		justify-self: end;
		order: 3;
		min-width: 0;
	}

	/* Prevent the CTA's min-content contribution from collapsing to near
	   zero (core's word-break:break-word lets text break at any point),
	   which let the equal-split column crush the button into a
	   one-character-per-line stack. */
	.northshore-header-cta .wp-block-button__link {
		white-space: nowrap;
		padding: 8px 10px;
		font-size: 0.85rem;
	}

	/* Account link (WP-C1) moves into the overlay menu below the hamburger
	   threshold — there is no room for a fourth header zone alongside
	   hamburger-LEFT / logo-CENTRE / CTA-RIGHT. */
	.northshore-header-account-link {
		display: none;
	}
}

/* D1 R2/C2 — at this width the CTA sits in the header's 3-zone grid (the
   max-width:1170 grid rule above) opposite a fixed 44px hamburger, with
   the centred logo eating the middle column. The equal 1fr outer tracks
   measure 63.9px (320) / 91.4px (375) / 143.3px (480); the full "Arrange
   a Repair" (~123px) only fits at 480, which is why it stays swapped out
   below 481px. The earlier icon-only treatment satisfied the audit with
   an INVISIBLE label — a sighted customer saw only a blue square and
   could not tell it was a wrench (Trevor, 2026-09-01). R2 replaced that
   with the VISIBLE word "Repair"; C2 then dropped the icon entirely so
   the word stands alone. Icon+word cleared the centred logo by only +3px
   at 320px — too thin to survive a font-metric change (large user text,
   fallback font mid-load, Android default sizing). Word-only clears by
   +27px at 320px, which survives those. min-width keeps the ≥44px tap
   target while horizontal padding lets the label's real width drive the
   box (measured 56px at every width down to 320px).
   Placed after the max-width:1170 block above (not with the other
   max-width:480 rules further up) so its same-specificity padding/size
   override actually wins the cascade against that block's own
   `.northshore-header-cta .wp-block-button__link` padding rule. */
@media (max-width: 480px) {
	.northshore-cta-full {
		display: none;
	}
	.northshore-cta-short {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.northshore-header-cta .wp-block-button__link {
		padding: 0 6px;
		min-width: 44px;
		height: 44px;
	}
}

/* Gallery grid */
.northshore-gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

@media (max-width: 1024px) {
	.northshore-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.northshore-gallery {
		grid-template-columns: 1fr;
	}
}

/* Core navigation block collapses to hamburger below 600px by default.
   Extended to 1100px (WP-13/C2, was 899px): at 753-1100px, 7 nav items +
   logo + phone + CTA wrapped into a cramped two-row header, so the overlay
   menu now kicks in earlier instead. Lower bound matches core's own
   min-width:600px switchover exactly (was 601px) — the 1px gap at 600px
   let core's inline nav render for one width and wrap, ballooning the
   header to 266px. Extended again to 1170px (WP-C1) alongside the header
   account link addition — see the W_fit remeasurement above. */
@media (min-width: 600px) and (max-width: 1170px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Touch target sizing on mobile/tablet nav + CTA */
@media (max-width: 1170px) {
	.wp-block-navigation-item a,
	.northshore-header .wp-block-button__link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Hamburger control: ensure a full 44x44 hit area, not just a 24px-wide icon */
	.wp-block-navigation__responsive-container-open {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Account link (WP-C1) inside the overlay: reset the bare paragraph's
	   default margin and give its link a full touch target, matching the
	   other overlay nav items. order:2 is required — core sets order:1 on
	   the nav's own <ul>, so our paragraph's default order:0 would render
	   it BEFORE Home instead of after FAQs despite coming later in the
	   markup. */
	.northshore-nav-account-link {
		margin: 0;
		order: 2;
	}

	.northshore-nav-account-link a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Above the hamburger threshold, the overlay-only copy of the account link
   must not also show up as a de-facto 7th item in the inline nav row. */
@media (min-width: 1171px) {
	.northshore-nav-account-link {
		display: none;
	}
}

/* Footer text: fixed (non-fluid) size so it never drops below the 0.9rem/
   14.4px floor at narrow viewports (WP's fluid typography clamp otherwise
   shrinks the default body size to ~14.25px at 375px). Link/heading/copyright
   sizes are pinned directly on their own classes above. */
.northshore-footer p {
	font-size: 0.95rem;
}

/* Prevent horizontal overflow. !important as a hardening measure: a second
   product-filters instance (R2, S5c.1) briefly produced a PHP warning that
   printed before <!DOCTYPE html>, which drops the page into quirks mode and
   defeats plain overflow-x containment (root-caused and fixed at the PHP
   markup level, but the two rules stay !important since WooCommerce's
   mini-cart drawer scroll-lock also writes an inline body[style] overflow
   that a plain rule would lose to). */
html {
	overflow-x: hidden !important;
}

body {
	overflow-x: hidden !important;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Services & Pricing page
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   ========================================================================== */

.northshore-pricing-intro {
	background-color: var(--wp--preset--color--sky);
}

.northshore-pricing-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.northshore-pricing-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: 0.85rem;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
}

.northshore-price-group {
	background-color: var(--wp--preset--color--white);
}

.northshore-price-group-header {
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 24px 32px;
	margin-bottom: 24px;
}

.northshore-price-group-header h2 {
	margin: 0 0 8px;
}

.northshore-price-group-header p {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

.northshore-price-footnote {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	margin-top: 16px;
}

.northshore-price-footnote a {
	color: var(--wp--preset--color--accent-solid);
}

/* Desktop / tablet real table (>=753px) */
.northshore-price-table {
	width: 100%;
	border-collapse: collapse;
	overflow: hidden;
	border-radius: 8px;
}

.northshore-price-table th,
.northshore-price-table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
}

.northshore-price-table thead th {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.northshore-price-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--sky);
}

.northshore-price-table td.northshore-col-service {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.northshore-price-table td.northshore-col-price {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.northshore-price-table td.northshore-col-warranty {
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.northshore-price-cards {
	display: none;
}

/* Mobile stacked cards (<=752px) */
@media (max-width: 752px) {
	.northshore-price-table {
		display: none;
	}

	.northshore-price-cards {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.northshore-price-card {
		border: 1px solid var(--wp--preset--color--sky);
		border-radius: 8px;
		padding: 16px;
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 1px 3px rgba(34, 48, 60, 0.08);
	}

	.northshore-price-card-service {
		color: var(--wp--preset--color--navy);
		font-weight: 600;
		font-size: 1.05rem;
		margin-bottom: 6px;
	}

	.northshore-price-card-description {
		color: var(--wp--preset--color--ink);
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 12px;
	}

	.northshore-price-card-bottom {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.northshore-price-card-warranty {
		color: var(--wp--preset--color--ink);
		font-size: 0.9rem;
	}

	.northshore-price-card-price {
		color: var(--wp--preset--color--navy);
		font-weight: 700;
		font-size: 1.4rem;
		text-align: right;
	}
}

/* Bonus fix: theme.json's fluid "medium" font-size clamps down to ~14.25px
   at 375px, and WP core's .has-medium-font-size carries !important, so a
   plain font-size override can't win — redefine the custom property
   instead, raising only the clamp's floor to 0.95rem. Preferred/max values
   are untouched, so 768px/1440px render identically to before. */
.northshore-pricing-intro,
.northshore-price-group,
.northshore-pricing-cta {
	--wp--preset--font-size--medium: clamp(0.95rem, 0.875rem + ((1vw - 0.2rem) * 0.455), 1.125rem);
}

/* Electric Handpiece cost diagram: tap-to-expand lightbox */
.northshore-diagram-block {
	max-width: 760px;
	margin: 24px auto;
}

.northshore-diagram-trigger {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: 8px;
	cursor: pointer;
	box-sizing: border-box;
	overflow: hidden;
}

.northshore-diagram-trigger img {
	display: block;
	width: 100%;
	height: auto;
}

.northshore-diagram-caption {
	text-align: center;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	margin: 8px 0 0;
}

.northshore-diagram-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	border: none;
	border-radius: 8px;
	padding: 0;
	width: 96vw;
	height: 96vh;
	background: transparent;
	overscroll-behavior: contain;
}

.northshore-diagram-dialog::backdrop {
	background-color: rgba(32, 48, 60, 0.85);
}

.northshore-diagram-dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

.northshore-diagram-dialog img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.northshore-diagram-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 999px;
	border: none;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* CTA band — P5: matched to the Shipping & Pickup closing strip (sky band, navy
   text). The accent-solid button fill sits on sky at 4.86:1 non-text contrast
   (>=3:1), so the white border added for the old navy band is no longer needed. */
.northshore-pricing-cta {
	background-color: var(--wp--preset--color--sky);
	text-align: center;
}

.northshore-pricing-cta h2 {
	color: var(--wp--preset--color--navy);
}

.northshore-pricing-cta-phone {
	color: var(--wp--preset--color--navy);
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--medium);
}

.northshore-pricing-cta-phone a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* Core's default block-gap margin between .wp-site-blocks children leaves a
   white sliver above the footer; with the CTA band last it must be 0. Scoped
   per page-id (same pattern as pages 13/27/43) so the footer margin is only
   removed here, never globally. page-id-6 = pricing, page-id-7 = faqs (P5). */
body.page-id-6 footer,
body.page-id-7 footer {
	margin-block-start: 0;
}

/* ==========================================================================
   Terms, Warranty & Privacy (legal) page
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   REPLICA fidelity: structure/text from legal-source.html, house tokens
   for styling. Long-form prose held to a ~680/620px measure inside the
   wider page container. Scoped entirely under .northshore-legal so bare
   tag selectors (h1-h4, p, ul, li, a) can't leak into the rest of the site.
   ========================================================================== */

.northshore-legal-wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 56px 24px 66px;
}

.northshore-legal h1 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.northshore-legal .northshore-legal-lede {
	font-size: 19px;
	color: var(--wp--preset--color--slate);
	max-width: 680px;
	margin: 0 0 8px;
}

.northshore-legal-toc {
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 22px 26px;
	margin-top: 28px;
	max-width: 680px;
}

.northshore-legal .northshore-legal-toc-label {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.northshore-legal-toc ol {
	margin: 0 0 0 20px;
	padding: 0;
}

.northshore-legal .northshore-legal-toc li {
	font-size: 16px;
	margin-bottom: 6px;
}

.northshore-legal .northshore-legal-toc a {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.northshore-legal .northshore-legal-toc a:hover {
	color: var(--wp--preset--color--accent-hover);
}

.northshore-legal h2 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 32px;
	margin: 60px 0 16px;
	padding-top: 30px;
	border-top: 1px solid var(--wp--preset--color--line);
	scroll-margin-top: 110px;
}

.northshore-legal h3 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 19px;
	margin: 28px 0 6px;
}

.northshore-legal h4 {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 16px;
	margin: 20px 0 4px;
}

.northshore-legal p {
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	max-width: 680px;
	margin: 0 0 12px;
}

.northshore-legal ul {
	margin: 0 0 12px 22px;
	max-width: 680px;
	padding: 0;
}

.northshore-legal li {
	font-size: 16px;
	margin-bottom: 7px;
}

.northshore-legal a {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.northshore-legal a:hover {
	color: var(--wp--preset--color--accent-hover);
}

.northshore-legal .northshore-legal-eff {
	font-size: 15px;
	color: var(--wp--preset--color--slate);
	margin: 0 0 18px;
}

.northshore-legal .northshore-legal-caps {
	background-color: var(--wp--preset--color--track);
	border-left: 3px solid var(--wp--preset--color--navy);
	border-radius: 0 8px 8px 0;
	padding: 15px 18px;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.6;
	max-width: 680px;
	color: var(--wp--preset--color--ink);
}

.northshore-legal .northshore-legal-caps strong {
	color: var(--wp--preset--color--navy);
}

/* ---------- Tablet (753px-1199px) ---------- */
@media (max-width: 1199px) {
	.northshore-legal-wrap {
		max-width: 920px;
		padding: 44px 28px 52px;
	}
	.northshore-legal h1 {
		font-size: clamp(30px, 4.6vw, 40px);
	}
	.northshore-legal h2 {
		font-size: clamp(24px, 3.2vw, 26px);
		margin-top: 52px;
		padding-top: 26px;
	}
	.northshore-legal h3 {
		font-size: clamp(16px, 2.1vw, 18px);
		margin-top: 24px;
	}
	.northshore-legal h4 {
		font-size: 15px;
	}
	.northshore-legal p {
		font-size: 15.5px;
		max-width: 620px;
	}
	.northshore-legal ul {
		max-width: 620px;
	}
	.northshore-legal li {
		font-size: 15px;
	}
	.northshore-legal .northshore-legal-lede {
		font-size: clamp(15px, 2vw, 17px);
		max-width: 620px;
	}
	.northshore-legal .northshore-legal-eff {
		font-size: 14px;
	}
	.northshore-legal-toc {
		padding: 18px 22px;
		max-width: 620px;
	}
	.northshore-legal .northshore-legal-toc li {
		font-size: 15px;
	}
	.northshore-legal .northshore-legal-caps {
		font-size: 14.5px;
		max-width: 620px;
		padding: 14px 16px;
	}
}

/* ---------- Mobile (752px and below) ---------- */
@media (max-width: 752px) {
	.northshore-legal-wrap {
		max-width: 100%;
		padding: 32px 20px 40px;
	}
	.northshore-legal h1 {
		font-size: clamp(26px, 7.4vw, 32px);
		line-height: 1.2;
	}
	.northshore-legal h2 {
		font-size: 23px;
		margin-top: 44px;
		padding-top: 24px;
		scroll-margin-top: 90px;
	}
	.northshore-legal h3 {
		font-size: 16px;
		margin-top: 22px;
	}
	.northshore-legal h4 {
		font-size: 0.95rem;
	}
	.northshore-legal p {
		font-size: 0.95rem;
	}
	.northshore-legal li {
		font-size: 0.95rem;
	}
	.northshore-legal .northshore-legal-lede {
		font-size: 0.95rem;
	}
	.northshore-legal .northshore-legal-eff {
		font-size: 0.95rem;
	}
	.northshore-legal-toc {
		padding: 16px 18px;
	}
	.northshore-legal .northshore-legal-toc li {
		font-size: 0.95rem;
		margin-bottom: 4px;
	}
	.northshore-legal .northshore-legal-toc a {
		display: flex;
		align-items: center;
		min-height: 44px;
		width: 100%;
	}
	.northshore-legal .northshore-legal-caps {
		font-size: 0.9rem;
		padding: 13px 15px;
	}
}

/* ==========================================================================
   Downloads page
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   REDESIGN fidelity: two visually distinct card treatments (download vs
   view-page) grouped under two H2s. Scoped under .nshr-dl so bare tag
   selectors can't leak; two-class compounds (.nshr-dl-wrap .nshr-dl-desc) used
   throughout to beat the 0-1-1 specificity of the global ".block p" rule.
   Card grid uses explicit repeat(2,1fr) (never auto-fit) with the odd
   last card in Group A spanning the full row via :last-child:nth-child(odd).
   ========================================================================== */

.nshr-dl-wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 56px 24px 66px;
}

.nshr-dl-wrap h1 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.nshr-dl-wrap .nshr-dl-lede {
	font-size: 19px;
	color: var(--wp--preset--color--slate);
	max-width: 680px;
	margin: 0 0 8px;
}

.nshr-dl-wrap .nshr-dl-group-title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 32px;
	margin: 56px 0 24px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.nshr-dl-wrap > .nshr-dl-group-title:first-of-type {
	margin-top: 40px;
}

/* Card grid: explicit column counts, never auto-fit (auto-fit strands an
   odd card in column 1 with an empty column beside it). */
.nshr-dl-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0 0 16px;
}

.nshr-dl-cards-download > .nshr-dl-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.nshr-dl-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 20px;
}

.nshr-dl-wrap .nshr-dl-card-title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 19px;
	margin: 0 0 8px;
}

.nshr-dl-wrap .nshr-dl-desc {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 14px;
}

.nshr-dl-wrap .nshr-dl-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--slate);
	font-size: 0.9rem;
	margin: 0 0 16px;
}

.nshr-dl-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 8px;
}

.nshr-dl-cta {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: auto;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 8px;
	padding: 12px 20px;
}

.nshr-dl-cta:hover,
.nshr-dl-cta:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

/* Download cards: sky icon square top-left holding a navy document icon + PDF tag */
.nshr-dl-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 64px;
	height: 64px;
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	margin: 0 0 16px;
}

.nshr-dl-icon-tag {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--navy);
}

/* View-page cards: thumbnail bleeds to the card edge (negative margin equal
   to card padding) so it spans full card width with rounded top corners
   that align exactly with the card's own radius. */
.nshr-dl-card-view {
	padding-top: 0;
}

.nshr-dl-thumb {
	box-sizing: border-box;
	display: block;
	width: calc(100% + 40px);
	max-width: calc(100% + 40px);
	margin: 0 -20px 16px;
	height: 180px;
	object-fit: cover;
	object-position: top;
	border-radius: 8px 8px 0 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.nshr-dl-print-note {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	max-width: 680px;
	margin: 8px 0 0;
}

/* ---------- Tablet (753px-1199px) ---------- */
@media (max-width: 1199px) {
	.nshr-dl-wrap {
		max-width: 920px;
		padding: 44px 28px 52px;
	}
	.nshr-dl-wrap h1 {
		font-size: clamp(30px, 4.4vw, 38px);
	}
	.nshr-dl-wrap .nshr-dl-lede {
		font-size: clamp(16px, 2vw, 18px);
	}
	.nshr-dl-wrap .nshr-dl-group-title {
		font-size: clamp(24px, 3.2vw, 26px);
		margin-top: 48px;
	}
	.nshr-dl-wrap > .nshr-dl-group-title:first-of-type {
		margin-top: 36px;
	}
	.nshr-dl-thumb {
		height: 160px;
	}
}

/* ---------- Mobile (752px and below) ---------- */
@media (max-width: 752px) {
	.nshr-dl-wrap {
		max-width: 100%;
		padding: 32px 20px 40px;
	}
	.nshr-dl-wrap h1 {
		font-size: clamp(26px, 7.4vw, 32px);
		line-height: 1.2;
	}
	.nshr-dl-wrap .nshr-dl-lede {
		font-size: 0.95rem;
	}
	.nshr-dl-wrap .nshr-dl-group-title {
		font-size: 22px;
		margin-top: 40px;
		padding-top: 24px;
	}
	.nshr-dl-wrap > .nshr-dl-group-title:first-of-type {
		margin-top: 32px;
	}
	.nshr-dl-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.nshr-dl-cards-download > .nshr-dl-card:last-child:nth-child(odd) {
		grid-column: auto;
	}
	.nshr-dl-wrap .nshr-dl-card-title {
		font-size: 1.05rem;
	}
	.nshr-dl-wrap .nshr-dl-desc {
		font-size: 0.95rem;
	}
	.nshr-dl-wrap .nshr-dl-meta {
		font-size: 0.9rem;
	}
	.nshr-dl-badge {
		font-size: 0.8rem;
	}
	.nshr-dl-thumb {
		height: 150px;
	}
	.nshr-dl-print-note {
		font-size: 0.95rem;
	}
}

/* ==========================================================================
   Partners page
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   REDESIGN fidelity: three bare logos become labeled cards; stale "coming
   soon" store copy removed and replaced by a direct external CTA. Scoped
   under .nshr-partners-wrap (verified against the emitted markup — see
   WP-8 gotcha) so bare tag selectors can't leak; two-class compounds used
   to beat the 0-1-1 specificity of the global ".block p" rule. Card grid
   uses explicit repeat(3,1fr)/repeat(2,1fr) (never auto-fit); the
   :last-child:nth-child(odd) span rule handles both the 3-card default
   and the micro-edit's 4-card state without stranding a card.
   ========================================================================== */

.nshr-partners-wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 56px 24px 66px;
}

.nshr-partners-kicker {
	display: block;
	color: var(--wp--preset--color--accent-solid);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}

.nshr-partners-wrap h1 {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
	margin: 0 0 16px;
}

.nshr-partners-wrap .nshr-partners-lead {
	font-size: 19px;
	color: var(--wp--preset--color--ink);
	max-width: 680px;
	line-height: 1.6;
	margin: 0 0 48px;
}

/* Card grid: explicit column counts, never auto-fit (auto-fit strands a
   card alone in column 1 with an empty column beside it). Default grid
   row stretch gives every card in a row equal height for free, so the
   SDS card (no descriptor) never breaks the row. */
.nshr-partners-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 56px;
}

.nshr-partner-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 28px;
}

.nshr-partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	max-width: 100%;
	margin: 0 0 18px;
}

.nshr-partner-logo img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.nshr-partners-wrap .nshr-partner-name {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 6px;
}

.nshr-partners-wrap .nshr-partner-desc {
	color: var(--wp--preset--color--slate);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* Closing CTA panel */
.nshr-partners-cta-panel {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 48px 32px;
	text-align: center;
}

.nshr-partners-wrap .nshr-partners-cta-heading {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 28px;
	margin: 0 0 12px;
}

.nshr-partners-wrap .nshr-partners-cta-body {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	max-width: 520px;
	margin: 0 auto 24px;
}

.nshr-partners-cta-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 8px;
	padding: 12px 28px;
	margin: 0 0 16px;
}

.nshr-partners-cta-btn:hover,
.nshr-partners-cta-btn:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

.nshr-partners-wrap .nshr-partners-tel {
	margin: 0;
}

.nshr-partners-wrap .nshr-partners-tel a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Tablet (753px-1199px) ---------- */
@media (max-width: 1199px) {
	.nshr-partners-wrap {
		max-width: 920px;
		padding: 44px 28px 52px;
	}
	.nshr-partners-wrap h1 {
		font-size: clamp(30px, 4.4vw, 34px);
	}
	.nshr-partners-wrap .nshr-partners-lead {
		font-size: clamp(16px, 2vw, 18px);
		margin-bottom: 40px;
	}
	.nshr-partners-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.nshr-partner-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	.nshr-partner-logo {
		height: 68px;
	}
}

/* ---------- Mobile (752px and below) ---------- */
@media (max-width: 752px) {
	.nshr-partners-wrap {
		max-width: 100%;
		padding: 32px 20px 40px;
	}
	.nshr-partners-kicker {
		font-size: 0.8rem;
	}
	.nshr-partners-wrap h1 {
		font-size: clamp(26px, 7.4vw, 32px);
		line-height: 1.2;
	}
	.nshr-partners-wrap .nshr-partners-lead {
		font-size: 0.95rem;
		margin-bottom: 32px;
	}
	.nshr-partners-cards {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 40px;
	}
	.nshr-partner-card:last-child:nth-child(odd) {
		grid-column: auto;
	}
	.nshr-partner-logo {
		height: 64px;
	}
	.nshr-partners-wrap .nshr-partner-name {
		font-size: 1.05rem;
	}
	.nshr-partners-wrap .nshr-partner-desc {
		font-size: 0.95rem;
	}
	.nshr-partners-cta-panel {
		padding: 32px 20px;
	}
	.nshr-partners-wrap .nshr-partners-cta-heading {
		font-size: 22px;
	}
	.nshr-partners-wrap .nshr-partners-cta-body {
		font-size: 0.95rem;
	}
	.nshr-partners-cta-btn {
		width: 100%;
		font-size: 0.95rem;
	}
	.nshr-partners-wrap .nshr-partners-tel a {
		font-size: 0.95rem;
	}
}

/* ==========================================================================
   5-Day Guarantee page
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   REDESIGN fidelity: structure/order from live /5dayguarantee, house tokens.
   Typography: --wp--preset--font-size--medium floor raised + every plain
   paragraph re-declares font-size explicitly (silent-inheritance trap).
   ========================================================================== */

.northshore-guarantee-hero,
.northshore-guarantee-promise,
.northshore-guarantee-section,
.northshore-guarantee-cta {
	--wp--preset--font-size--medium: clamp(0.95rem, 0.875rem + ((1vw - 0.2rem) * 0.455), 1.125rem);
}

.northshore-guarantee-hero {
	background-color: var(--wp--preset--color--sky);
}

.northshore-guarantee-subtitle {
	color: var(--wp--preset--color--slate);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 8px;
}

.northshore-guarantee-promise {
	background-color: var(--wp--preset--color--white);
}

.northshore-guarantee-promise-box {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.northshore-guarantee-promise-headline {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 0 0 12px;
}

.northshore-guarantee-promise-body {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin: 0;
}

.northshore-guarantee-section {
	background-color: var(--wp--preset--color--white);
}

.northshore-guarantee-section-header {
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 24px 32px;
	margin-bottom: 24px;
}

.northshore-guarantee-section-header h2 {
	margin: 0;
}

.northshore-guarantee-section p {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.northshore-guarantee-section ul.wp-block-list {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	padding-left: 22px;
}

.northshore-guarantee-section ul.wp-block-list li {
	margin-bottom: 12px;
}

.northshore-guarantee-section ul.wp-block-list li strong {
	color: var(--wp--preset--color--navy);
}

.northshore-guarantee-key-figure {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	font-size: 1.2rem;
}

.northshore-guarantee-sublist {
	margin-top: 8px;
	padding-left: 20px;
}

.northshore-guarantee-example {
	background-color: var(--wp--preset--color--sky);
	border-left: 3px solid var(--wp--preset--color--navy);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin: 20px 0 0;
}

.northshore-guarantee-example p {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin: 0;
}

.northshore-guarantee-example-label {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	margin: 0 0 6px;
}

/* CTA band (matches Services & Pricing house pattern) */
.northshore-guarantee-cta {
	background-color: var(--wp--preset--color--sky);
	text-align: center;
}

.northshore-guarantee-cta h2 {
	color: var(--wp--preset--color--navy);
}

.northshore-guarantee-cta-phone {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 16px;
}

.northshore-guarantee-cta-phone a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* Core's default block-gap margin between .wp-site-blocks children leaves a
   white sliver above the footer; with the CTA band now last, it must be 0. */
body.page-id-27 footer {
	margin-block-start: 0;
}

.northshore-guarantee-footnote {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 752px) {
	.northshore-guarantee-promise-headline {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Shipping & Local Pickup page (REBUILD to house composition grammar)
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   REDESIGN fidelity: rebuilt to match Services & Pricing grammar (sky hero,
   constrained WP layout, sky section-header cards) — see structural
   liberties in mission report. The prior .northshore-ship-* block above
   (raw wp:html implementation) is superseded and no longer referenced by
   this page's markup; left in place per the append-only scope pin.
   ========================================================================== */

.northshore-shippickup-hero,
.northshore-shippickup-options,
.northshore-shippickup-howto,
.northshore-shippickup-area,
.northshore-shippickup-cta {
	--wp--preset--font-size--medium: clamp(0.95rem, 0.875rem + ((1vw - 0.2rem) * 0.455), 1.125rem);
}

.northshore-shippickup-hero {
	background-color: var(--wp--preset--color--sky);
}

.northshore-shippickup-lede {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--slate);
	max-width: 680px;
	margin-top: 8px;
}

.northshore-shippickup-options,
.northshore-shippickup-howto,
.northshore-shippickup-area {
	background-color: var(--wp--preset--color--white);
}

.northshore-shippickup-section-header {
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 24px 32px;
	margin-bottom: 24px;
}

.northshore-shippickup-section-header h2 {
	margin: 0 0 8px;
}

.northshore-shippickup-section-header p {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

/* Option cards: CSS Grid (not flex) sidesteps the flex-wrap trap; explicit
   column counts per breakpoint (not auto-fit) so a lone third card can be
   told to span the row instead of stranding beside an empty column. */
.northshore-shippickup-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 16px;
}

.northshore-shippickup-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 24px;
	box-sizing: border-box;
}

.northshore-shippickup-badge {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: 8px;
	margin: 0 0 12px;
}

.northshore-shippickup-card-title {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1.25rem;
	margin: 0 0 10px;
}

.northshore-shippickup-card-body {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 20px;
}

.northshore-shippickup-card-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 8px;
	padding: 12px 20px;
}

.northshore-shippickup-card-cta:hover,
.northshore-shippickup-card-cta:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

/* Numbered steps: navy circular numerals via counters */
.northshore-shippickup-steps {
	list-style: none;
	counter-reset: northshore-shippickup-step;
	margin: 0;
	padding: 0;
	max-width: 680px;
}

.northshore-shippickup-steps li {
	counter-increment: northshore-shippickup-step;
	position: relative;
	min-height: 36px;
	padding: 6px 0 6px 52px;
	margin-bottom: 16px;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.5;
}

.northshore-shippickup-steps li:last-child {
	margin-bottom: 0;
}

.northshore-shippickup-steps li::before {
	content: counter(northshore-shippickup-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 15 ZIP codes: CSS Grid with explicit column counts (5 cols x 3 rows on
   tablet/desktop, 3 cols x 5 rows on mobile) so every row fills completely —
   no ragged final row like flex-wrap produces with a non-full last line. */
.northshore-shippickup-zips {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
}

.northshore-shippickup-zips li {
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
	padding: 10px 8px;
	border-radius: 8px;
	margin: 0;
	text-align: center;
	min-height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.northshore-shippickup-note {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	max-width: 680px;
	margin: 0 0 12px;
}

/* Service-area map: tap-to-expand lightbox (matches Services & Pricing
   diagram pattern), native <dialog>, no libraries. Full column width (no
   max-width cap) so it aligns edge-to-edge with the section-header card and
   ZIP grid above it, instead of sitting narrower and left-offset. The "Tap
   to enlarge" caption lives INSIDE the button (not a separate sibling) so
   the full label text is part of the interactive target, not just the image. */
.northshore-shippickup-map-block {
	margin: 8px 0 24px;
}

.northshore-shippickup-map-trigger {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: 8px;
	cursor: pointer;
	box-sizing: border-box;
	overflow: hidden;
}

.northshore-shippickup-map-trigger img {
	display: block;
	width: 100%;
	height: auto;
}

.northshore-shippickup-map-caption {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--sky);
	min-height: 44px;
	line-height: 44px;
	margin: 0;
}

.northshore-shippickup-map-dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	border: none;
	border-radius: 8px;
	padding: 0;
	width: 96vw;
	height: 96vh;
	background: transparent;
	overscroll-behavior: contain;
}

.northshore-shippickup-map-dialog::backdrop {
	background-color: rgba(32, 48, 60, 0.85);
}

.northshore-shippickup-map-dialog[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

.northshore-shippickup-map-dialog img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

.northshore-shippickup-map-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 999px;
	border: none;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* CTA band (sky-CTA kit, matches 5-Day Guarantee house pattern) */
.northshore-shippickup-cta {
	background-color: var(--wp--preset--color--sky);
	text-align: center;
}

.northshore-shippickup-cta h2 {
	color: var(--wp--preset--color--navy);
}

.northshore-shippickup-cta-phone {
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 16px;
}

.northshore-shippickup-cta-phone a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 2px;
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* Core's default block-gap margin between .wp-site-blocks children leaves a
   white sliver above the footer; with the CTA band last, it must be 0. */
body.page-id-13 footer {
	margin-block-start: 0;
}

/* ---------- Tablet (753px-1199px) ----------
   Cards stack single-column through tablet (not a 2+1 split) so the three
   options keep equal visual weight all the way up to the 3-col desktop row
   — a 2+1 tablet split would give the third card disproportionate width. */
@media (max-width: 1199px) {
	.northshore-shippickup-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---------- Mobile (752px and below) ---------- */
@media (max-width: 752px) {
	.northshore-shippickup-card-title {
		font-size: 1.15rem;
	}
	.northshore-shippickup-card-body {
		font-size: 0.95rem;
	}
	.northshore-shippickup-card-cta {
		width: 100%;
	}
	.northshore-shippickup-steps li {
		font-size: 0.95rem;
	}
	.northshore-shippickup-zips {
		grid-template-columns: repeat(3, 1fr);
	}
	.northshore-shippickup-zips li {
		font-size: 0.95rem;
	}
	.northshore-shippickup-note {
		font-size: 0.95rem;
	}
	.northshore-shippickup-section-header {
		padding: 20px 20px;
	}
}

/* ==========================================================================
   Account (my-account) — WP-B1
   ========================================================================== */

.northshore-account-section {
	background-color: var(--wp--preset--color--sky);
}

.northshore-account-wrap {
	max-width: 480px;
	margin: 0 auto;
}

.northshore-account-panel {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 32px 28px;
}

.northshore-account-title {
	margin: 0 0 20px;
	text-align: center;
	font-size: 1.75rem;
	overflow-wrap: break-word;
}

.northshore-account-subheading {
	font-size: 1.125rem;
	margin: 24px 0 12px;
}

.northshore-account-email {
	font-size: 0.95rem;
	text-align: center;
	color: var(--wp--preset--color--slate);
	margin: -12px 0 24px;
	overflow-wrap: break-word;
}

.northshore-account-confirmation {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	text-align: center;
}

.northshore-account-repair-cta {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 20px;
	margin: 0 0 28px;
	text-align: center;
}

.northshore-account-repair-cta .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.northshore-account-notice {
	box-sizing: border-box;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 0.95rem;
	margin: 0 0 20px;
	border: 2px solid transparent;
}

.northshore-account-notice-error {
	background-color: #fdecea;
	border-color: #b3261e;
	color: #7a1a13;
}

.northshore-account-notice-info {
	background-color: var(--wp--preset--color--sky);
	border-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--ink);
}

.northshore-account-field {
	margin-bottom: 20px;
}

.northshore-account-field label {
	display: block;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	margin-bottom: 6px;
}

.northshore-account-field input[type="email"],
.northshore-account-field input[type="password"],
.northshore-account-field input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.northshore-account-field input:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

.northshore-account-actions {
	text-align: center;
	margin-top: 8px;
}

.northshore-account-actions .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: 100%;
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

.northshore-account-links {
	text-align: center;
	margin: 16px 0 0;
	font-size: 0.95rem;
}

.northshore-account-links a {
	display: inline-block;
	box-sizing: border-box;
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
	padding: 12px 10px;
}

@media (min-width: 753px) {
	.northshore-account-links a {
		padding: 4px 8px;
	}
}

@media (max-width: 752px) {
	.northshore-account-links a {
		display: block;
	}
	.northshore-account-links span[aria-hidden="true"] {
		display: none;
	}
}

.northshore-account-profile-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--track);
	font-size: 0.95rem;
}

.northshore-account-profile-row:last-child {
	border-bottom: none;
}

.northshore-account-profile-label {
	color: var(--wp--preset--color--slate);
}

.northshore-account-profile-value {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-align: right;
	overflow-wrap: break-word;
}

.northshore-account-empty {
	color: var(--wp--preset--color--slate);
	font-weight: 400;
	font-style: italic;
}

@media (max-width: 752px) {
	.northshore-account-panel {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   Account — practice profile form (WP-B1.6)
   ========================================================================== */

.northshore-account-field select {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 40px 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23204D85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

.northshore-account-field select:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

.northshore-account-field input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.northshore-account-field input[type="tel"]:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

.northshore-account-field input[readonly] {
	background-color: var(--wp--preset--color--track);
	color: var(--wp--preset--color--slate);
}

.northshore-account-field-optional {
	color: var(--wp--preset--color--slate);
	font-weight: 400;
}

.northshore-account-field-note {
	margin: 6px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--slate);
}

.northshore-account-field-error {
	margin: 6px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: #b3261e;
}

.northshore-account-field-has-error input,
.northshore-account-field-has-error select {
	border-color: #b3261e;
}

.northshore-account-field-has-error input:focus,
.northshore-account-field-has-error select:focus {
	outline-color: #b3261e;
	border-color: #b3261e;
}

.northshore-account-fieldset {
	margin: 0 0 28px;
	padding: 0;
	border: none;
}

.northshore-account-fieldset-legend {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 12px;
	margin: 0 0 8px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
}

.northshore-account-profile-form .northshore-account-actions,
.northshore-account-actions-profile {
	margin-top: 8px;
}

/* ==========================================================================
   Account — S5f: native WooCommerce My Account in house tokens.
   WooCommerce's own stylesheets load, so this is an override layer. Rules
   are prefixed with .woocommerce-account (and often .woocommerce) so they
   out-specify WooCommerce's defaults rather than lose to them.
   ========================================================================== */

/* The native account needs more room than the 480px custom login used: the
   logged-in dashboard is a two-column nav+content, and the logged-out
   login/register pair reads as two cards. */
.woocommerce-account .northshore-account-wrap {
	max-width: 960px;
}

.woocommerce-account .woocommerce {
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
}

/* ---- Notices (top of the account content, incl. our bridged verify/resend
   messages and WooCommerce's own) ---- */
.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 24px;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner {
	box-sizing: border-box;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	padding: 14px 18px;
	line-height: 1.5;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .wc-block-components-notice-banner.is-success {
	border-left: 4px solid var(--wp--preset--color--accent-solid);
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .wc-block-components-notice-banner.is-info {
	border-left: 4px solid var(--wp--preset--color--accent-solid);
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner.is-error {
	border-left: 4px solid #b3261e;
	background-color: #fdf2f1;
	color: #7a1c16;
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-error a {
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
}

/* ---- Logged-in dashboard: nav sidebar + content ---- */
.woocommerce-account.logged-in .northshore-account-wrap .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	box-sizing: border-box;
	flex: 0 0 240px;
	width: 240px;
	float: none;
	margin: 0;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--track);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	box-sizing: border-box;
	min-height: 44px;
	padding: 12px 14px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus {
	background-color: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--accent-hover);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.woocommerce-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	float: none;
	margin: 0;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 28px 28px;
}

.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--wp--preset--color--accent-solid);
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content legend {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 16px;
}

/* ---- Orders + downloads tables ---- */
.woocommerce-account .woocommerce table.shop_table {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	border-collapse: collapse;
	margin: 0 0 8px;
}

/* Navy fill is for the real column-header row only (thead). Body row-header
   cells (the orders table's order-number <th>) and footer total-label cells
   (Subtotal:/Total: <th> in tfoot) are <th> too — they must read as normal
   cells, not inherit the navy header fill. */
.woocommerce-account .woocommerce table.shop_table thead th {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.85rem;
	text-align: left;
	padding: 12px 14px;
	border: none;
}

.woocommerce-account .woocommerce table.shop_table td,
.woocommerce-account .woocommerce table.shop_table tbody th,
.woocommerce-account .woocommerce table.shop_table tfoot th {
	box-sizing: border-box;
	padding: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: 0.92rem;
	vertical-align: middle;
	background-color: var(--wp--preset--color--white);
}

.woocommerce-account .woocommerce table.shop_table tbody th,
.woocommerce-account .woocommerce table.shop_table tfoot th {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-align: left;
}

.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

/* ---- Order detail (view-order): line items + their variation options ---- */
.woocommerce-account .woocommerce table.woocommerce-table--order-details,
.woocommerce-account .woocommerce .order_details {
	width: 100%;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce .wc-item-meta {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--slate);
}

.woocommerce-account .woocommerce .wc-item-meta li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 2px;
}

.woocommerce-account .woocommerce .wc-item-meta li p,
.woocommerce-account .woocommerce .wc-item-meta strong {
	margin: 0;
	display: inline;
}

.woocommerce-account .woocommerce-order .woocommerce-order-details__title,
.woocommerce-account .woocommerce-order .woocommerce-column__title {
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--navy);
}

/* R2 #3 — a long email/URL in the order-detail address block has no break
   opportunity and pushed through its column at 1440, colliding with the
   neighbouring address. Let long tokens wrap instead of overflowing. */
.woocommerce-account .woocommerce .woocommerce-customer-details address,
.woocommerce-account .woocommerce .woocommerce-customer-details--email,
.woocommerce-account .woocommerce .woocommerce-customer-details--phone {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---- Buttons (view order, browse products, form submits) ---- */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce .woocommerce-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 20px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.9rem;
	border: none;
	text-decoration: none;
	line-height: 1.3;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce .woocommerce-button:hover {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

/* ---- Forms: edit-account, edit-address, login, register, lost-password ---- */
.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-form-row label {
	display: block;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: 0.95rem;
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="text"],
.woocommerce-account .woocommerce form .form-row input[type="email"],
.woocommerce-account .woocommerce form .form-row input[type="password"],
.woocommerce-account .woocommerce form .form-row input[type="tel"],
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce .select2-container .select2-selection {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row select:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

.woocommerce-account .woocommerce .woocommerce-form-row {
	margin-bottom: 18px;
}

.woocommerce-account .woocommerce form .form-row em,
.woocommerce-account .woocommerce .woocommerce-password-hint {
	color: var(--wp--preset--color--slate);
	font-size: 0.85rem;
}

/* A5 R1 — WooCommerce's own default form.login/form.register styling (core
   woocommerce.css) draws a second bordered, 20px-padded card around each
   form, nested inside our .col-1/.col-2 card below (own border, 8px radius,
   28px/26px padding). That double card ate 20px+1px of width per side before
   the input's own 16px padding, leaving only ~193px of content box at
   375px — narrower than "newpatient@example.com" (measured ~216px in
   Poppins 16px), so #reg_email (and the shared form.login #username) clipped
   the start of the value. Dropping core's redundant frame reclaims that
   width and leaves a single, house-token-correct 8px-radius card. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 0;
}

/* ---- Login / register two-card layout (logged-out) ---- */
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
}

.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
	box-sizing: border-box;
	flex: 1 1 320px;
	width: auto;
	float: none;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 28px 26px;
}

.woocommerce-account .u-columns h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 18px;
	font-size: 1.35rem;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	font-weight: 400;
	color: var(--wp--preset--color--slate);
}

/* The Turnstile widget sits inside the register form; give it breathing room */
.woocommerce-account .woocommerce-form-register .cf-turnstile,
.woocommerce-account .northshore-account-resend-wrap .cf-turnstile {
	margin: 4px 0 18px;
}

/* Lost-password form is a single narrow form, not a two-card layout */
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password,
.woocommerce-account .woocommerce-LostPassword.lost_reset_password {
	max-width: 460px;
}

/* Resend-verification block injected before the login form on refusal */
.woocommerce-account .northshore-account-resend-wrap {
	box-sizing: border-box;
	max-width: 460px;
	margin: 0 auto 28px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 24px 26px;
}

/* ---- Addresses (edit-address landing) ---- */
/* S5f.2 R5 — the Billing and Shipping cards carry the .col-1/.col-2 classes, so
   the logged-out login/register two-card rules (.u-columns .col-1/.col-2:
   border, padding, flex:1 1 320px) bled onto them and fought
   .woocommerce-Address's own flex-basis. The result: the two outline boxes came
   out different widths (488 vs 464) and horizontally offset (24px). Stack them
   as a single column, each card full width, so both outline boxes share the
   same left edge and width at every breakpoint; the inner <address> is the one
   outline box, top-aligned inside an identically-structured card. The extra
   .u-columns compound out-specifies the bleeding .col-1/.col-2 rules. */
.woocommerce-account .woocommerce-Addresses.u-columns {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
}

.woocommerce-account .woocommerce-Addresses.u-columns .woocommerce-Address {
	box-sizing: border-box;
	flex: 0 0 auto;
	float: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

.woocommerce-account .woocommerce-Address address {
	box-sizing: border-box;
	display: block;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px 18px;
	font-style: normal;
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

/* S5f.2 R4 — server-side "Copy billing address to shipping" control, sits below
   the two cards and spans the same content width. */
.woocommerce-account .northshore-copy-address {
	margin-top: 24px;
}

.woocommerce-account .northshore-copy-address-form {
	margin: 0;
}

.woocommerce-account .northshore-copy-address .button {
	box-sizing: border-box;
	cursor: pointer;
	min-height: 44px;
}

/* S5f.2 R7 — the email-verification confirmation interstitial reuses the
   account-panel card; centre its single button and give the sentence room. */
.northshore-verify-confirm .northshore-account-confirmation {
	margin: 0 0 24px;
}

/* ---- Responsive ---- */
@media (max-width: 752px) {
	.woocommerce-account.logged-in .northshore-account-wrap .woocommerce {
		flex-direction: column;
		gap: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 auto;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 22px 18px;
	}

	.woocommerce-account .u-columns.col2-set {
		flex-direction: column;
	}

	/* R2 #1 — once the two cards stack, each must take the container's full
	   width. The base rule's flex-basis:320px + width:auto let a card's
	   min-content (min-width:auto) floor it wider than a 375px viewport, and
	   the global overflow-x:hidden clipped the overhang instead of scrolling.
	   Full width + min-width:0 lets the card shrink to fit its column. */
	.woocommerce-account .u-columns .col-1,
	.woocommerce-account .u-columns .col-2 {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	/* Touch tap targets ≥44px */
	.woocommerce-account .woocommerce a.button,
	.woocommerce-account .woocommerce button.button,
	.woocommerce-account .woocommerce input.button,
	.woocommerce-account .woocommerce .woocommerce-button {
		min-height: 44px;
	}
}

/* R2 #2 — restore the order NUMBER in the responsive orders card. WooCommerce
   renders the order-number cell as a <th scope="row"> (data-title="Order"),
   and woocommerce-smallscreen.css hides ALL `tbody th` (display:none) in the
   responsive table — so the card lost its order number at ≤768. That sheet's
   breakpoint is 768, not the theme's 752, so this rule matches 768 too; the
   selector carries an extra class (.woocommerce) to out-specify the hide rule
   regardless of stylesheet order. The ::before mirrors WooCommerce's own
   td::before label pattern so the row reads "Order: #1378". */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce table.shop_table_responsive tbody th {
		display: block;
		text-align: right;
		padding: 14px;
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody th::before {
		content: attr(data-title) ": ";
		float: left;
		font-weight: 700;
		color: var(--wp--preset--color--navy);
	}
}

/* ==========================================================================
   Repair Details (repair-details) — WP-B2
   ========================================================================== */

.northshore-repair-section {
	background-color: var(--wp--preset--color--sky);
}

.northshore-repair-wrap {
	max-width: 760px;
	margin: 0 auto;
}

.northshore-repair-wrap .wp-block-heading {
	margin: 0 0 12px;
}

.northshore-repair-intro-text {
	font-size: 1rem;
	color: var(--wp--preset--color--slate);
	margin: 0 0 28px;
}

/* --- Native repair form (A1) — box wrapping the whole <form> --- */

.northshore-repairform {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 32px 28px;
}

.northshore-account-field-legend-inline {
	display: block;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	margin-bottom: 8px;
}

.northshore-account-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
	resize: vertical;
}

.northshore-account-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

/* --- Handpiece rows (A3 — dynamic add/remove, card at mobile) --- */

.nshr-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.northshore-repairform-rows {
	display: block;
}

.northshore-repairform-handpiece-row {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--track);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.northshore-repairform-handpiece-row-head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.northshore-repairform-handpiece-row-title {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	flex: 1 1 auto;
}

.northshore-repairform-remove-btn {
	box-sizing: border-box;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 14px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	color: var(--wp--preset--color--accent-solid);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

.northshore-repairform-remove-btn:hover,
.northshore-repairform-remove-btn:focus-visible {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--sky);
}

.northshore-repairform-handpiece-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.northshore-repairform-add-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	width: 100%;
	margin-top: 4px;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--white);
	border: 2px dashed var(--wp--preset--color--accent-solid);
	border-radius: 8px;
	color: var(--wp--preset--color--accent-solid);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.northshore-repairform-add-btn:hover,
.northshore-repairform-add-btn:focus-visible {
	background-color: var(--wp--preset--color--sky);
}

.northshore-repairform-add-btn[hidden] {
	display: none;
}

.northshore-repairform-max-note {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate);
}

.northshore-repairform-max-note[hidden] {
	display: none;
}

.northshore-repairform-error-list {
	margin: 8px 0 0;
	padding-left: 20px;
}

.northshore-repairform-error-list li {
	margin-bottom: 4px;
}

/* --- Packaging / box dimensions (A3 R3b) --- */

.northshore-repairform-dims {
	display: none;
	margin-top: 4px;
}

.northshore-repairform-conditional-ship_label:has(#nshr_packaging_own_box:checked) .northshore-repairform-dims {
	display: block;
}

.northshore-repairform-dims-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

.northshore-account-field input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.northshore-account-field input[type="number"]:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

/* --- Method selector: three cards, CSS-only conditional reveal ---
   Each radio+label pair sits in its own .northshore-repairform-method-row
   (wpautop() wraps any *bare* run of inline elements like input+label in a
   stray <p> otherwise — verified empirically — which would split the radio
   from the fieldset-level conditional divs). Because the radio is a row's
   child rather than a fieldset-level sibling of the conditional blocks, the
   reveal below uses :has() scoped to the fieldset instead of a plain
   :checked ~ sibling selector. Still pure CSS, no JS. */

.northshore-repairform-method-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

.northshore-repairform-method-option {
	position: relative;
	display: block;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px 16px 16px 48px;
	margin-bottom: 12px;
	cursor: pointer;
}

.northshore-repairform-method-option::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 18px;
	width: 20px;
	height: 20px;
	border: 2px solid #a9c0d8;
	border-radius: 50%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--white);
}

.northshore-repairform-method-radio:checked + .northshore-repairform-method-option {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--sky);
}

.northshore-repairform-method-radio:checked + .northshore-repairform-method-option::before {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--white);
}

.northshore-repairform-method-radio:focus-visible + .northshore-repairform-method-option {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
}

.northshore-repairform-method-title {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.northshore-repairform-method-desc {
	display: block;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate);
	margin-top: 2px;
}

.northshore-repairform-conditional {
	display: none;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 16px;
	margin-top: 4px;
}

.northshore-repairform-method-fieldset:has(#nshr_method_pickup:checked) .northshore-repairform-conditional-pickup,
.northshore-repairform-method-fieldset:has(#nshr_method_ship_label:checked) .northshore-repairform-conditional-ship_label,
.northshore-repairform-method-fieldset:has(#nshr_method_brm:checked) .northshore-repairform-conditional-brm {
	display: block;
}

.northshore-repairform-conditional-note {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.northshore-repairform-conditional .northshore-account-field:last-child {
	margin-bottom: 0;
}

/* P2 — the in-form pickup day picker (R2), out-of-area (R4) and
   nothing-available (R6) messages. House tokens; radios are ≥44px tall touch
   targets at ≤752. */
.northshore-repairform-pickup-intro {
	margin: 0 0 12px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.northshore-repairform-pickup-days {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.northshore-repairform-pickup-weekhead {
	margin: 12px 0 2px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.northshore-repairform-pickup-weekhead:first-child {
	margin-top: 0;
}

.northshore-repairform-pickup-day {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 12px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.northshore-repairform-pickup-day:hover {
	border-color: var(--wp--preset--color--accent-solid);
}
.northshore-repairform-pickup-day:has(input:checked) {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--sky);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-solid);
}
.northshore-repairform-pickup-day:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 2px;
}
.northshore-repairform-pickup-day input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--accent-solid);
}
.northshore-repairform-pickup-day-text {
	font-size: 0.95rem;
}

.northshore-repairform-pickup-msg {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
}

/* P3 R3 — the pickup day picker as a Sunday-first week-grid calendar. The
   three day states are distinguished by MORE than colour: available = a solid
   filled navy circle with a white numeral; unavailable = a grey numeral with a
   line through it and no fill; selected = a filled deep-navy (#17395F) circle
   PLUS a distinct ring. Deep navy #17395F is not a preset token, so it is
   written literally here. Focus is a separate accent outline, deliberately
   different from the selection ring. No JavaScript — the confirmation line is
   revealed with :has() + :checked, the same mechanism P2 already relied on. */
.nshr-pickup-cal {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 12px;
	min-width: 0;
}
.nshr-pickup-cal-legend {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	padding: 0 6px;
}
.nshr-pickup-cal-hint {
	margin: 0 0 12px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--slate);
}
.nshr-pickup-cal-caption {
	margin: 0 0 10px;
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--navy);
}
.nshr-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	align-items: center;
}
.nshr-cal-head {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--slate);
	padding-bottom: 4px;
}
.nshr-cal-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	position: relative;
	box-sizing: border-box;
}
.nshr-cal-day-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 0.95rem;
	font-weight: 500;
	box-sizing: border-box;
	line-height: 1;
}
/* Available — a real radio behind a filled navy circle. */
.nshr-cal-day--open {
	cursor: pointer;
}
.nshr-cal-day--open input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.nshr-cal-day--open .nshr-cal-day-num {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.nshr-cal-day--open:hover .nshr-cal-day-num {
	background-color: #17395F;
}
/* Selected — deep-navy fill PLUS a distinct ring (a white gap, then a deep-navy
   halo), so selection differs from available by more than colour. */
.nshr-cal-day--open:has(input:checked) .nshr-cal-day-num {
	background-color: #17395F;
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 2px var(--wp--preset--color--white), 0 0 0 4px #17395F;
}
/* Focus — an accent outline, deliberately distinct from the selection ring so a
   keyboard user sees where they are even on an already-selected day. */
.nshr-cal-day--open:has(input:focus-visible) .nshr-cal-day-num {
	outline: 3px solid var(--wp--preset--color--accent-solid);
	outline-offset: 2px;
}
/* Unavailable — grey struck numeral, no fill; not an input, not focusable. */
.nshr-cal-day--unavailable .nshr-cal-day-num {
	color: var(--wp--preset--color--slate);
	text-decoration: line-through;
	background-color: transparent;
}
/* Confirmation line — plain-language reinforcement of the selection, revealed
   with pure CSS so it tracks the choice live without JavaScript. */
.nshr-cal-confirm {
	margin: 14px 0 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}
.nshr-cal-confirm-empty {
	font-weight: 400;
	color: var(--wp--preset--color--slate);
}
.nshr-cal-confirm-day {
	display: none;
}
.nshr-pickup-cal:has(input:checked) .nshr-cal-confirm-empty {
	display: none;
}
.nshr-pickup-cal:has([data-idx="1"] input:checked) [data-cidx="1"],
.nshr-pickup-cal:has([data-idx="2"] input:checked) [data-cidx="2"],
.nshr-pickup-cal:has([data-idx="3"] input:checked) [data-cidx="3"],
.nshr-pickup-cal:has([data-idx="4"] input:checked) [data-cidx="4"],
.nshr-pickup-cal:has([data-idx="5"] input:checked) [data-cidx="5"],
.nshr-pickup-cal:has([data-idx="6"] input:checked) [data-cidx="6"],
.nshr-pickup-cal:has([data-idx="7"] input:checked) [data-cidx="7"],
.nshr-pickup-cal:has([data-idx="8"] input:checked) [data-cidx="8"],
.nshr-pickup-cal:has([data-idx="9"] input:checked) [data-cidx="9"],
.nshr-pickup-cal:has([data-idx="10"] input:checked) [data-cidx="10"],
.nshr-pickup-cal:has([data-idx="11"] input:checked) [data-cidx="11"],
.nshr-pickup-cal:has([data-idx="12"] input:checked) [data-cidx="12"],
.nshr-pickup-cal:has([data-idx="13"] input:checked) [data-cidx="13"],
.nshr-pickup-cal:has([data-idx="14"] input:checked) [data-cidx="14"],
.nshr-pickup-cal:has([data-idx="15"] input:checked) [data-cidx="15"],
.nshr-pickup-cal:has([data-idx="16"] input:checked) [data-cidx="16"] {
	display: inline;
}

/* P3 R2 — the pickup day in the "My Repairs" portal (list + detail). */
.nshr-portal-row-pickup {
	margin: 6px 0 0;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.nshr-portal-detail-pickup {
	margin: 12px 0 16px;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-sizing: border-box;
}
.nshr-portal-detail-pickup-text {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* P3 R3 — at touch widths the calendar's nested container is only ~260px wide,
   far too narrow for seven ≥44px day cells. Full-bleed the card to the viewport
   width (the standard `calc(50% - 50vw)` breakout) with a slim gutter, so each
   day's tap target (the whole grid cell) clears 44px even on a 375px screen.
   The global overflow-x:hidden clips the sub-pixel asymmetry of the breakout,
   and the measured document scrollWidth stays equal to the viewport (no
   horizontal scroll). */
@media (max-width: 752px) {
	.nshr-pickup-cal {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 10px 12px;
		box-sizing: border-box;
	}
	.nshr-cal-grid {
		gap: 2px;
	}
	.nshr-cal-day-num {
		width: 38px;
		height: 38px;
	}
}

.northshore-repairform-switch-btn {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	min-height: 44px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
}
.northshore-repairform-switch-btn:hover {
	background-color: var(--wp--preset--color--accent-hover);
}
.northshore-repairform-switch-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.northshore-repairform-radio-inline {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	margin-bottom: 8px;
	cursor: pointer;
}

.northshore-repairform-radio-inline input {
	margin-right: 8px;
	vertical-align: middle;
}

@media (min-width: 753px) {
	.northshore-repairform-handpiece-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0 16px;
	}
	.northshore-repairform-dims-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.northshore-repairform-add-btn {
		width: auto;
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 752px) {
	.northshore-repair-wrap {
		max-width: 100%;
	}
	.northshore-repairform {
		padding: 24px 20px;
	}
	/* R3 — each handpiece reads as a distinct card: stronger border,
	   heavier separation between rows than the desktop table-ish layout. */
	.northshore-repairform-handpiece-row {
		padding: 16px;
		margin-bottom: 20px;
		box-shadow: 0 1px 2px rgba(23, 57, 95, 0.08);
	}
	.northshore-repairform-handpiece-row-title {
		font-size: 1.05rem;
	}
	.northshore-repairform-remove-btn {
		min-height: 44px;
		min-width: 44px;
	}

	/* A5 R3 — the serial-number placeholder ('Ex. ABC123 ("N/A" if
	   unknown)', ~228px in Poppins 16px) clipped its closing "n)" on the
	   stacked card at 375px: the card's own padding (16px, intentional —
	   it's what makes each handpiece read as a distinct card, see the R3
	   comment above) only leaves ~219px of input content box there. The
	   typed VALUE keeps the 16px iOS-safe floor (unchanged); only the
	   empty-state hint text shrinks, which iOS's zoom-on-focus heuristic
	   doesn't key off of. 13.6px * 228px/16px ~= 194px, comfortably under
	   219px. */
	.northshore-repairform input[id$="_serial"]::placeholder {
		font-size: 0.85rem;
	}
}

/* --- A4 — account-link banner + sign-in detection prompt --- */

.northshore-repairform-account-banner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.northshore-repairform-account-banner-text {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: 0.95rem;
}

.northshore-repairform-account-banner-sep {
	color: var(--wp--preset--color--slate);
}

.northshore-repairform-signin-btn {
	box-sizing: border-box;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 16px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	color: var(--wp--preset--color--accent-solid);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
}

.northshore-repairform-signin-btn:hover,
.northshore-repairform-signin-btn:focus-visible {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--white);
}

.northshore-repairform-account-banner-link {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-solid);
	text-decoration: underline;
}

.northshore-repairform-account-banner-link:hover,
.northshore-repairform-account-banner-link:focus-visible {
	color: var(--wp--preset--color--accent-hover);
}

.northshore-repairform-signin-prompt {
	box-sizing: border-box;
	display: block;
	margin: 8px 0 0;
	padding: 10px 14px;
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	line-height: 1.5;
}

.northshore-repairform-signin-prompt[hidden] {
	display: none;
}

.northshore-repairform-signin-prompt a {
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
	text-decoration: underline;
}

.northshore-repairform-signin-prompt a:hover,
.northshore-repairform-signin-prompt a:focus-visible {
	color: var(--wp--preset--color--accent-hover);
}

@media (max-width: 752px) {
	.northshore-repairform-account-banner {
		gap: 8px 10px;
	}
	.northshore-repairform-account-banner-sep {
		display: none;
	}
	.northshore-repairform-signin-btn {
		width: 100%;
	}
	.northshore-repairform-account-banner-link {
		width: 100%;
	}
}

@media (min-width: 753px) {
	.northshore-repairform-signin-btn {
		min-height: 36px;
	}
}

/* ==========================================================================
   Campaign landing pages (aspen, smile, vision, p1) — CAMP-2
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   ========================================================================== */

.nshr-campaign,
.nshr-campaign * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.nshr-campaign {
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
	line-height: 1.55;
}

.nshr-campaign .wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 24px;
}

.nshr-campaign .btn {
	display: inline-block;
	background: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: 18px;
	padding: 16px 34px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s;
}

.nshr-campaign .btn:hover {
	background: var(--wp--preset--color--accent-hover);
}

.nshr-campaign .hero {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding: 72px 0 64px;
	text-align: center;
}

/* theme.json emits a bare `h1,h2,h3,h4,h5,h6{color:navy}` rule (0-0-1
   specificity, no :where(), no !important) that is explicitly set — not
   inherited — so it beats .hero's inherited white regardless of specificity.
   Set the colour explicitly here (0-1-1) so it wins on every campaign page. */
.nshr-campaign .hero h1 {
	color: var(--wp--preset--color--white);
}

.nshr-campaign .kicker {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #A9C6E4;
	margin-bottom: 12px;
}

.nshr-campaign h1 {
	font-size: 46px;
	line-height: 1.15;
	margin-bottom: 14px;
	font-weight: 700;
}

.nshr-campaign .hero .sub {
	font-size: 19px;
	opacity: .93;
	max-width: 640px;
	margin: 0 auto 38px;
}

.nshr-campaign .compare {
	display: flex;
	flex-wrap: nowrap;
	max-width: 640px;
	margin: 0 auto 34px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

.nshr-campaign .compare .side {
	flex: 1 1 0;
	padding: 34px 20px;
}

.nshr-campaign .compare .them {
	background: #f2f4f6;
	color: #8a94a0;
}

.nshr-campaign .compare .them b {
	display: block;
	font-size: 46px;
	text-decoration: line-through;
}

.nshr-campaign .compare .us {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.nshr-campaign .compare .us b {
	display: block;
	font-size: 58px;
	font-weight: 700;
}

.nshr-campaign .compare .side span {
	font-size: 15.5px;
	font-weight: 500;
}

.nshr-campaign .hero .alt {
	font-size: 15.5px;
	opacity: .85;
	margin-top: 16px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.nshr-campaign .hero .alt a {
	color: var(--wp--preset--color--white);
}

.nshr-campaign .fine {
	font-size: 12.5px;
	opacity: .7;
	margin-top: 8px;
}

.nshr-campaign .why {
	padding: 66px 0;
	text-align: center;
	background: var(--wp--preset--color--white);
}

.nshr-campaign h2 {
	color: var(--wp--preset--color--navy);
	font-size: 32px;
	margin-bottom: 16px;
	font-weight: 700;
}

.nshr-campaign .why p {
	max-width: 680px;
	margin: 0 auto 12px;
	font-size: 17px;
}

.nshr-campaign .why .note {
	font-size: 17px;
	color: var(--wp--preset--color--navy);
}

.nshr-campaign .diagram {
	margin: 30px auto 20px;
	max-width: 880px;
}

.nshr-campaign .diagram a {
	display: block;
}

.nshr-campaign .diagram img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid #e3e9ef;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(32,77,133,.08);
}

.nshr-campaign .diagram figcaption {
	font-size: 14.5px;
	color: #8a94a0;
	margin-top: 8px;
}

.nshr-campaign .proof {
	background: var(--wp--preset--color--sky);
	padding: 46px 0;
}

.nshr-campaign .proof .wrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	text-align: center;
}

.nshr-campaign .proof .stat {
	flex: 1 1 0;
}

.nshr-campaign .proof b {
	display: block;
	font-size: 32px;
	color: var(--wp--preset--color--navy);
}

.nshr-campaign .proof span {
	font-size: 14.5px;
}

.nshr-campaign .proof a {
	color: var(--wp--preset--color--navy);
}

.nshr-campaign .steps {
	padding: 60px 0;
	background: var(--wp--preset--color--white);
}

.nshr-campaign .steps h2 {
	text-align: center;
	margin-bottom: 26px;
}

.nshr-campaign .steps ol {
	max-width: 600px;
	margin: 0 auto;
	list-style: none;
	counter-reset: s;
}

.nshr-campaign .steps li {
	counter-increment: s;
	padding: 15px 0 15px 58px;
	position: relative;
	border-bottom: 1px solid #edf1f5;
	font-size: 16px;
}

.nshr-campaign .steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: 13px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nshr-campaign .steps a {
	color: var(--wp--preset--color--navy);
}

.nshr-campaign .final {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-align: center;
	padding: 52px 0;
}

.nshr-campaign .final h2 {
	color: var(--wp--preset--color--white);
	margin-bottom: 22px;
}

.nshr-campaign .final .alt {
	font-size: 15.5px;
	opacity: .85;
	margin-top: 16px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.nshr-campaign .final .alt a {
	color: var(--wp--preset--color--white);
}

.nshr-campaign .final .disclaimer {
	font-size: 14.5px;
	opacity: .6;
	margin-top: 32px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

/* Photo hero variant (chicago) — CAMP-3 */
.nshr-campaign .hero.has-photo {
	position: relative;
	background: var(--wp--preset--color--navy) url("../../uploads/2026/07/chicago-hero-photo-q90.webp") center/cover no-repeat;
	padding: 64px 0 56px;
}

.nshr-campaign .hero.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14,36,66,.25);
}

.nshr-campaign .hero.has-photo .wrap {
	position: relative;
}

.nshr-campaign .glass {
	max-width: 780px;
	margin: 0 auto;
	padding: 40px 34px 34px;
	border-radius: 20px;
	background: rgba(18,45,82,.55);
	border: 1px solid rgba(255,255,255,.18);
	-webkit-backdrop-filter: blur(9px) saturate(130%);
	backdrop-filter: blur(9px) saturate(130%);
}

@supports not ((backdrop-filter: blur(9px)) or (-webkit-backdrop-filter: blur(9px))) {
	.nshr-campaign .glass {
		background: rgba(18,45,82,.88);
	}
}

/* Tablet: 753px - 1199px */
@media (max-width: 1199px) {
	.nshr-campaign .wrap {
		max-width: 920px;
		padding: 0 28px;
	}
	.nshr-campaign .hero {
		padding: 56px 0 50px;
	}
	.nshr-campaign .hero.has-photo {
		padding: 48px 0 44px;
	}
	.nshr-campaign .glass {
		max-width: 660px;
		padding: 32px 26px 28px;
	}
	.nshr-campaign .kicker {
		font-size: 13px;
		letter-spacing: 2.5px;
	}
	.nshr-campaign h1 {
		font-size: clamp(30px, 4.6vw, 40px);
	}
	.nshr-campaign .hero .sub {
		font-size: clamp(15px, 2vw, 17px);
		max-width: 580px;
		margin-bottom: 30px;
	}
	.nshr-campaign .compare {
		max-width: 560px;
		margin-bottom: 28px;
	}
	.nshr-campaign .compare .side {
		padding: 26px 16px;
	}
	.nshr-campaign .compare .them b {
		font-size: clamp(34px, 4.8vw, 42px);
	}
	.nshr-campaign .compare .us b {
		font-size: clamp(42px, 6vw, 52px);
	}
	.nshr-campaign .btn {
		font-size: clamp(15px, 1.8vw, 17px);
		padding: 15px 30px;
	}
	.nshr-campaign h2 {
		font-size: clamp(24px, 3.2vw, 29px);
	}
	.nshr-campaign .why {
		padding: 52px 0;
	}
	.nshr-campaign .why p {
		font-size: 15.5px;
		max-width: 620px;
	}
	.nshr-campaign .why .note {
		font-size: 15.5px;
	}
	.nshr-campaign .diagram {
		max-width: 760px;
		margin: 26px auto 18px;
	}
	.nshr-campaign .proof {
		padding: 38px 0;
	}
	.nshr-campaign .proof .wrap {
		gap: 20px;
	}
	.nshr-campaign .proof b {
		font-size: clamp(24px, 3vw, 28px);
	}
	.nshr-campaign .proof span {
		font-size: 14.5px;
	}
	.nshr-campaign .steps {
		padding: 48px 0;
	}
	.nshr-campaign .steps li {
		font-size: 15.5px;
		padding: 13px 0 13px 54px;
	}
	.nshr-campaign .steps li::before {
		width: 36px;
		height: 36px;
		top: 11px;
	}
	.nshr-campaign .final {
		padding: 44px 0;
	}
}

/* Mobile: 752px and below */
@media (max-width: 752px) {
	.nshr-campaign .wrap {
		max-width: 520px;
		padding: 0 20px;
	}
	.nshr-campaign .hero {
		padding: 44px 0 40px;
	}
	.nshr-campaign .hero.has-photo {
		padding: 30px 0 30px;
	}
	.nshr-campaign .glass {
		padding: 26px 18px 22px;
		border-radius: 16px;
	}
	.nshr-campaign .kicker {
		font-size: 11.5px;
		letter-spacing: 2px;
	}
	.nshr-campaign h1 {
		font-size: clamp(26px, 7.4vw, 32px);
		line-height: 1.2;
	}
	.nshr-campaign .hero .sub {
		font-size: 15.5px;
		margin-bottom: 26px;
	}
	.nshr-campaign .compare {
		display: block;
		max-width: none;
		margin-bottom: 24px;
	}
	.nshr-campaign .compare .side {
		padding: 20px 16px;
	}
	.nshr-campaign .compare .them b {
		font-size: 32px;
	}
	.nshr-campaign .compare .us b {
		font-size: 46px;
	}
	.nshr-campaign .btn {
		display: block;
		text-align: center;
		font-size: 16px;
		padding: 16px 20px;
		border-radius: 10px;
	}
	.nshr-campaign h2 {
		font-size: 23px;
	}
	.nshr-campaign .why {
		padding: 40px 0;
	}
	.nshr-campaign .why p {
		font-size: 15.5px;
	}
	.nshr-campaign .why .note {
		font-size: 15.5px;
	}
	.nshr-campaign .diagram {
		margin: 22px auto 16px;
	}
	.nshr-campaign .proof {
		padding: 32px 0;
	}
	.nshr-campaign .proof .wrap {
		flex-direction: column;
		gap: 22px;
	}
	.nshr-campaign .proof b {
		font-size: 26px;
	}
	.nshr-campaign .proof span {
		font-size: 14.5px;
	}
	.nshr-campaign .steps {
		padding: 40px 0;
	}
	.nshr-campaign .steps li {
		font-size: 15.5px;
		padding: 12px 0 12px 50px;
	}
	.nshr-campaign .steps li::before {
		width: 34px;
		height: 34px;
		top: 11px;
	}
	.nshr-campaign .final {
		padding: 38px 0;
	}
	.nshr-campaign .hero .alt a,
	.nshr-campaign .final .alt a {
		font-weight: 600;
	}
}

/* ==========================================================================
   Repair Details Success (repair-details-success) — WP-B2
   ========================================================================== */

.northshore-success-section {
	background-color: var(--wp--preset--color--sky);
}

.northshore-success-wrap {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.northshore-success-badge {
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	background-color: var(--wp--preset--color--accent-solid);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.northshore-success-wrap .northshore-success-heading {
	color: var(--wp--preset--color--navy);
	margin: 0 0 16px;
}

.northshore-success-message {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin: 0 0 20px;
}

.northshore-success-repair-id {
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	margin: -12px 0 20px;
}

.northshore-success-account-offer {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 24px;
	text-align: left;
}

.northshore-success-account-offer p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}

.northshore-success-account-offer a {
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
}

.northshore-success-fallback {
	font-size: 0.95rem;
	color: var(--wp--preset--color--slate);
	margin: 0 0 36px;
}

.northshore-success-fallback a {
	color: var(--wp--preset--color--slate);
	text-decoration: underline;
	display: inline-block;
	padding: 12px 4px;
	margin: -12px -4px;
}

.northshore-success-cta {
	margin: 0;
}

.northshore-success-cta .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
}

/* Core's default block-gap margin between .wp-site-blocks children leaves a
   white sliver above the footer; this page ends on the sky band, so it must
   be 0 — same fix as page-id-27 and page-id-13. */
body.page-id-43 footer {
	margin-block-start: 0;
}

@media (max-width: 752px) {
	.northshore-success-section {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

/* ============ S5b: shop grid, search, sort, filter panel ============ */

.northshore-shop-main {
	padding-top: 32px;
	padding-bottom: 64px;
	box-sizing: border-box;
}

.northshore-shop-heading h1 {
	margin-bottom: 24px;
}

.northshore-shop-toolbar {
	box-sizing: border-box;
	width: 100%;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.northshore-shop-toolbar .wc-block-product-search {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 420px;
	box-sizing: border-box;
}

.northshore-shop-toolbar .wc-block-product-search__fields {
	box-sizing: border-box;
}

.northshore-shop-toolbar .wc-block-product-search__field {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
}

.northshore-shop-toolbar .wc-block-product-search__field:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

.northshore-shop-toolbar .wc-block-product-search__fields {
	display: flex;
	align-items: stretch;
}

.northshore-shop-toolbar .wc-block-product-search__field {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

.northshore-shop-toolbar .wc-block-product-search__button {
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--accent-solid);
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.northshore-shop-toolbar .wc-block-product-search__button:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

.northshore-shop-toolbar .wc-block-product-search__button svg,
.northshore-shop-toolbar .wc-block-product-search__button path {
	fill: var(--wp--preset--color--white);
}

.northshore-shop-toolbar-right {
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.northshore-shop-toolbar-right select {
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
}

/* R4 (S5h): the catalog-sorting block wraps its <select> in a
   form.woocommerce-ordering that carries WooCommerce's default
   `margin: 0 0 1em`. That 1em pushed the form/wrapper ~14px taller than the
   select and top-anchored the control, so the visible dropdown sat ~7px above
   the search box and results-count midpoints. Zero the margin and center the
   select inside its wrapper so all three toolbar midpoints coincide. The
   compound selector (0-3-0) outranks WooCommerce's `.woocommerce
   .woocommerce-ordering` (0-2-0). */
.northshore-shop-toolbar .northshore-shop-toolbar-right .wp-block-woocommerce-catalog-sorting,
.northshore-shop-toolbar .northshore-shop-toolbar-right .woocommerce-ordering {
	margin: 0;
	display: flex;
	align-items: center;
}

/* S5c.2: northshore-shop-layout now renders on the woocommerce/product-collection
   wrapper itself (moved so filters/chips share the collection's Interactivity API
   router region and update live) rather than a plain wp:group. display:flex is set
   explicitly rather than relying on the block's auto-generated is-layout-flex rule. */
.northshore-shop-layout {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 40px;
}

.northshore-filter-column {
	box-sizing: border-box;
	flex: 0 0 260px;
	width: 260px;
}

.northshore-filter-heading-row h2 {
	color: var(--wp--preset--color--navy);
	margin-bottom: 16px;
}

/* WC hides this toggle natively above 601px (min-width:601px rule in its own
   CSS); only style it, don't force it visible outside that range. */
@media (max-width: 600px) {
	.wc-block-product-filters__open-overlay {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 10px 18px;
		border: 1px solid var(--wp--preset--color--navy);
		border-radius: 8px;
		color: var(--wp--preset--color--navy);
		font-family: var(--wp--preset--font-family--poppins);
		font-weight: 600;
		background: var(--wp--preset--color--white);
	}

	.wc-block-product-filters__open-overlay:hover {
		background: var(--wp--preset--color--sky);
	}
}

.northshore-filter-block {
	box-sizing: border-box;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.northshore-filter-block h3 {
	color: var(--wp--preset--color--navy);
	margin-bottom: 10px;
}

.northshore-filter-block .wc-block-product-filter-checkbox-list__items label,
.northshore-filter-block .wc-block-components-checkbox__label {
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
}

/* R1 (S5c): the core price-slider block always renders two <input type=range>
   elements server-side — there is no block attribute to suppress them, only
   showInputFields (text boxes) can be toggled. Hide the range track with CSS;
   the text inputs carry their own data-wp-on--input bindings independent of
   the range inputs, so filtering keeps working with the slider hidden. */
.wc-block-product-filter-price-slider__range {
	display: none !important;
}

.wc-block-product-filter-price-slider__content {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	gap: 10px;
}

.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
}

.wc-block-product-filter-price-slider__content .text input[type="text"] {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 44px !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-family: var(--wp--preset--font-family--poppins) !important;
	color: var(--wp--preset--color--ink) !important;
	box-sizing: border-box !important;
}

.wc-block-product-filter-price-slider__content .text input[type="text"]:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid) !important;
	outline-offset: 1px !important;
	border-color: var(--wp--preset--color--accent-solid) !important;
}

.northshore-price-set-row {
	margin-top: 12px;
}

.northshore-price-set-row .wp-block-button__link {
	width: 100%;
	min-height: 40px;
	border-radius: 8px !important;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
}

.northshore-price-set-row .wp-block-button__link:hover,
.northshore-price-set-row .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-hover);
}

/* R4: checkbox tap targets. The real click surface is the <label>, not the
   glyph — size the label row, not just the visual checkbox. */
.northshore-filter-block .wc-block-product-filter-checkbox-list__item {
	padding: 0;
}

.northshore-filter-block .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

@media (min-width: 753px) {
	.northshore-filter-block .wc-block-product-filter-checkbox-list__label {
		min-height: 32px;
	}
}

/* R3 (S5c.1): tap targets already measure within spec (22-24px), but read as
   small against the surrounding 0.95rem label text — a visual-weight problem,
   not a size one. A visible ring gives the box more presence without
   changing its measured dimensions. */
.northshore-filter-block input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	accent-color: var(--wp--preset--color--accent-solid);
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--wp--preset--color--slate);
}

@media (min-width: 753px) {
	.northshore-filter-block input[type="checkbox"] {
		width: 24px;
		height: 24px;
	}
}

/* R2 (S5c.2): WooCommerce's own ::before on the wrapper is a fixed 1em
   hover/focus tint anchored top:0/left:0 — inside our larger 22-24px box it
   reads as a small grey square stuck in the top-left corner instead of
   filling it. Stretch it to the full wrapper so it's centred/fills instead. */
.northshore-filter-block .wc-block-product-filter-checkbox-list__input-wrapper::before {
	inset: 0;
	width: auto;
	height: auto;
}

/* R2 (S5c.3): the checkmark that shows on the checked state is the __mark SVG,
   not the ::before above — S5c.2 corrected the wrong element. The SVG is
   position:absolute; top:0; left:0 with a fixed ~15px box and margin:0, so it
   pins to the top-left corner of the 24px wrapper (measured 0/0 top-left).
   inset:0 alone still sits top-left because the box has a fixed size; centring
   an absolutely-positioned fixed-size box also needs margin:auto.
   The glyph was also undersized — the SVG's viewBox (10x8) leaves the drawn
   checkmark at ~0.31 of the wrapper at the native 0.95em element size. Filling
   the wrapper (100%/100%) scales the drawn glyph to ~0.62 of the box. Percent
   sizing keeps that ratio width-independent (wrapper is 22px <=752, 24px above).
   Measured: visible-glyph ratio 0.61-0.63, offsets L=R and T=B within 1px. */
.northshore-filter-block .wc-block-product-filter-checkbox-list__mark {
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
}

/* --- R3c: shared category navigation (sidebar, all 9 archives + /shop/) --- */
.northshore-category-nav {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.northshore-category-nav h3 {
	color: var(--wp--preset--color--navy);
	margin-bottom: 10px;
}

/* --- R1 (S5c.1): category selector as a dropdown, replaces the sidebar list.
   core/categories with displayAsDropdown:true server-side pre-selects the
   current term (wp_dropdown_categories' "selected" param, driven by the
   product_cat query var) and ships its own native onChange navigation
   script — no JS authored here. Option text is a single text node, so
   name+count always render on one line without any extra CSS. */
.northshore-category-dropdown {
	width: 100%;
}

.northshore-category-dropdown select {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--white);
}

.northshore-category-dropdown select:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}

/* --- R3b: category tile grid (top of /shop/) --- */
.northshore-category-tiles-heading {
	color: var(--wp--preset--color--navy);
	margin-bottom: 16px;
}

.northshore-category-tiles .wp-block-term-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 40px;
	padding: 0;
}

.northshore-category-tiles li.wp-block-term {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	gap: 6px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 20px;
	min-height: 44px;
	/* R2 (S5c.2): the term-template block still carries WP core's is-layout-flow
	   block support, which puts a margin-top on every child but the first to
	   space stacked items — a leftover from before this grid was forced via
	   CSS. In a grid it instead pushes 8 of 9 tiles down inside their own row,
	   making the untouched first tile (Low-Speed Contra Angle Parts) read as
	   taller/misaligned relative to its row-mates. Zero it so every tile
	   starts at its grid cell's top edge. */
	margin: 0;
}

.northshore-category-tiles li.wp-block-term:hover,
.northshore-category-tiles li.wp-block-term:focus-within {
	border-color: var(--wp--preset--color--accent-solid);
}

.northshore-category-tile-name {
	margin: 0 !important;
}

.northshore-category-tile-name a {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
}

.northshore-category-tiles li.wp-block-term:hover .northshore-category-tile-name a,
.northshore-category-tile-name a:focus {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: underline;
}

.northshore-category-tile-count {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.85rem;
}

@media (max-width: 1199px) {
	.northshore-category-tiles .wp-block-term-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 752px) {
	.northshore-category-tiles .wp-block-term-template {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 18px;
	}

	.northshore-category-tiles li.wp-block-term {
		padding: 14px 16px;
		min-height: 0;
	}

	/* Long names ("Low-Speed Contra Angle Parts") + count need a smaller
	   size to both fit on one line inside a 375px-wide card. */
	.northshore-category-tile-name a {
		font-size: 0.9rem;
	}
}

/* --- R1 (S5c.2): the active-filters chip bar was removed entirely (it could
   not be kept live without going stale relative to the grid — see mission
   report). Replaced with a static "Clear all filters" link above the grid:
   a plain anchor to the archive's clean URL, no block state, so it can never
   drift out of sync with the actual query. Full page load on click is the
   correct, accepted behaviour for a reset action. */
.northshore-clear-filters-link {
	margin: 0 0 20px;
}

.northshore-clear-filters-link a {
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.9rem;
	text-decoration: underline;
}

.northshore-clear-filters-link a:hover,
.northshore-clear-filters-link a:focus {
	color: var(--wp--preset--color--accent-solid);
}

.northshore-grid-column {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/* Grid column counts: repeat(auto-fit) can't express an explicit 3->2->1 reflow
   (it places but doesn't span), so counts are set explicitly per breakpoint. */
.northshore-product-grid .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	column-gap: 24px;
	row-gap: 32px;
}

.northshore-product-grid li.wc-block-product {
	box-sizing: border-box;
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Pin the button to the card bottom so rows stay aligned when titles wrap
   to different line counts. */
.northshore-product-grid .wp-block-woocommerce-product-button {
	margin-top: auto !important;
}

/* R6 (S5d / S5h): product cards use a fixed 1:1 box with object-fit:contain so
   the full instrument is visible (never cropped) and every card in a row is the
   same height. Ratio: square is the conventional product-grid ratio, keeps the
   3-col rows compact and aligned. S5h: the templates now request the uncropped
   `single` image size (not the hard-cropped square `thumbnail`), so contain can
   actually letterbox — the box stays square (grid rhythm untouched) while the
   image scales until ONE side touches, whichever orientation it has. The
   letterbox fills with clean white (matching the studio photos' own ground). */
.northshore-product-grid .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	object-position: center;
	background-color: var(--wp--preset--color--white);
	border-radius: 8px;
}

/* R3 (S5c.1): clamp titles to a fixed 2-line box so the price sits at the
   same height on every card, keeping price-to-button spacing constant
   regardless of how many words a given title wraps to. */
.northshore-product-grid .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

.northshore-product-grid .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
}

.northshore-product-grid .wc-block-components-product-price {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.northshore-product-grid .wc-block-components-product-button .wp-block-button__link,
.northshore-product-grid .wc-block-components-product-button__button {
	background-color: var(--wp--preset--color--accent-solid);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.northshore-product-grid .wc-block-components-product-button .wp-block-button__link:hover,
.northshore-product-grid .wc-block-components-product-button__button:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

@media (max-width: 1199px) {
	.northshore-filter-column {
		flex: 0 0 220px;
		width: 220px;
	}

	.northshore-shop-layout {
		gap: 24px;
	}

	.northshore-product-grid .wc-block-product-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 752px) {
	.northshore-shop-toolbar {
		flex-wrap: wrap;
	}

	.northshore-shop-toolbar .wc-block-product-search {
		max-width: 100%;
		flex-basis: 100%;
	}

	.northshore-shop-toolbar-right {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		white-space: normal;
		gap: 6px;
	}

	.northshore-shop-toolbar-right .wc-block-product-results-count {
		white-space: normal;
	}

	/* R2 (S5c.2): mobile density — tighten the vertical rhythm above the
	   grid (main padding, heading, toolbar, category nav, tile section) so
	   the first product sits closer to the top of the screen at 375px. */
	.northshore-shop-main {
		padding-top: 20px;
	}

	.northshore-shop-heading h1 {
		margin-bottom: 14px;
	}

	.northshore-shop-toolbar {
		margin-bottom: 20px;
		padding-bottom: 12px;
	}

	.northshore-category-nav {
		padding-bottom: 14px;
		margin-bottom: 14px;
	}

	.northshore-category-tiles-heading {
		margin-bottom: 10px;
	}

	.northshore-clear-filters-link {
		margin-bottom: 14px;
	}

	.northshore-shop-layout {
		flex-wrap: wrap;
	}

	.northshore-filter-column,
	.northshore-grid-column {
		flex-basis: 100%;
		width: 100%;
	}

	.northshore-product-grid .wc-block-product-template {
		grid-template-columns: 1fr !important;
		row-gap: 20px;
	}

	.northshore-product-grid li.wc-block-product {
		gap: 8px;
	}
}

/* =====================================================================
   S5h — per-page selector (R2) + dual pagination (R3)
   Pure links, no JavaScript. One .nshr-shop-bar renders above the grid
   and one below; both are identical. The selector always shows; the
   pagination only when there is more than one page.
   ===================================================================== */

.nshr-shop-bar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	width: 100%;
	font-family: var(--wp--preset--font-family--poppins);
}

.nshr-shop-bar--top {
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.nshr-shop-bar--bottom {
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* --- Per-page selector (R2) --- */
.nshr-perpage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--slate);
	font-size: 0.9rem;
}

.nshr-perpage__label,
.nshr-perpage__suffix {
	color: var(--wp--preset--color--slate);
}

.nshr-perpage__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}

a.nshr-perpage__opt:hover {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--sky);
}

.nshr-perpage__opt.is-current {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	cursor: default;
}

/* --- Pagination (R3) --- */
.nshr-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.nshr-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	box-sizing: border-box;
}

a.nshr-page:hover {
	border-color: var(--wp--preset--color--accent-solid);
	background-color: var(--wp--preset--color--sky);
}

.nshr-page--num.is-current {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	cursor: default;
}

.nshr-page--dots {
	border-color: transparent;
	color: var(--wp--preset--color--slate);
	font-weight: 400;
	min-width: 20px;
	padding: 0 2px;
}

.nshr-page.is-disabled {
	color: var(--wp--preset--color--line);
	border-color: var(--wp--preset--color--track);
	cursor: default;
}

/* Touch targets: ≥44px at ≤752 (touch), 32px is fine at ≥753 (pointer). */
@media (max-width: 752px) {
	.nshr-shop-bar {
		justify-content: center;
		gap: 14px;
	}

	.nshr-perpage__opt,
	.nshr-page {
		min-width: 44px;
		height: 44px;
	}

	.nshr-page--dots {
		min-width: 24px;
		height: 44px;
	}
}

/* =====================================================================
   S5d — Single product page
   ===================================================================== */

.northshore-single-product-main {
	padding-top: 32px;
	padding-bottom: 56px;
}

/* --- Breadcrumb (R5) --- */
.nshr-breadcrumb-wrap {
	margin-bottom: 22px;
}

.nshr-breadcrumb {
	font-size: 0.95rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.4;
}

.nshr-breadcrumb a {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: none;
}

.nshr-breadcrumb a:hover {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

.nshr-breadcrumb .nshr-breadcrumb-sep {
	color: var(--wp--preset--color--line);
}

.nshr-breadcrumb .nshr-breadcrumb-current {
	color: var(--wp--preset--color--ink);
}

/* --- Layout: gallery left / summary right (R1) --- */
.nshr-product-columns {
	gap: 48px;
	align-items: flex-start;
	margin-bottom: 8px;
}

.nshr-product-columns .nshr-gallery-column {
	flex-basis: 46% !important;
	flex-grow: 0;
}

.nshr-product-columns .nshr-summary-column {
	flex-basis: 54% !important;
	flex-grow: 1;
}

/* --- Gallery: contain, never cropped (R6) --- */
.nshr-product .woocommerce-product-gallery {
	margin: 0;
	width: 100%;
}

.nshr-product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.nshr-product .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 12px;
	box-sizing: border-box;
}

.nshr-product .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.nshr-product .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center;
	display: block;
}

/* Thumbnail strip */
.nshr-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nshr-product .flex-control-thumbs li {
	width: calc(25% - 8px);
	margin: 0;
}

.nshr-product .flex-control-thumbs img {
	aspect-ratio: 1 / 1;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.nshr-product .flex-control-thumbs img:hover,
.nshr-product .flex-control-thumbs .flex-active {
	opacity: 1;
}

/* --- Summary --- */
.nshr-product-title {
	margin-top: 0;
	font-size: 2rem;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.nshr-price,
.nshr-product .price {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	font-size: 1.6rem;
	margin: 12px 0 16px;
}

.nshr-price del {
	color: var(--wp--preset--color--slate);
	font-weight: 400;
	margin-right: 8px;
}

.nshr-short-desc {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 20px;
}

.nshr-short-desc p {
	margin: 0 0 10px;
}

/* --- Variation form (R2) --- */
.nshr-product form.cart {
	margin: 0 0 22px;
}

.nshr-product .variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 6px;
}

.nshr-product .variations th,
.nshr-product .variations td {
	padding: 8px 0;
	vertical-align: middle;
	text-align: left;
}

.nshr-product .variations th.label label {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-right: 12px;
}

.nshr-product .variations td.value {
	width: 70%;
}

.nshr-product .variations select {
	width: 100%;
	max-width: 340px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	box-sizing: border-box;
}

.nshr-product .reset_variations {
	display: inline-block;
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-solid);
}

.nshr-product .single_variation .woocommerce-variation-price .price {
	font-size: 1.5rem;
	margin: 12px 0;
}

.nshr-product .woocommerce-variation-availability {
	margin-bottom: 8px;
	color: var(--wp--preset--color--slate);
}

.nshr-product .woocommerce-variation-description {
	margin-bottom: 12px;
	color: var(--wp--preset--color--ink);
}

/* Quantity + add to cart row */
.nshr-product .woocommerce-variation-add-to-cart,
.nshr-product form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.nshr-product .quantity input.qty {
	width: 72px;
	min-height: 48px;
	padding: 8px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	box-sizing: border-box;
}

.nshr-product .single_add_to_cart_button {
	min-height: 48px;
	padding: 12px 28px;
	background: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nshr-product .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-hover);
}

.nshr-product .single_add_to_cart_button.disabled,
.nshr-product .single_add_to_cart_button:disabled {
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--slate);
	cursor: not-allowed;
}

/* --- Product meta: SKU / category / brand --- */
.nshr-product-meta {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 16px;
	margin-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
}

.nshr-product-meta .nshr-meta-label {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-right: 4px;
}

.nshr-product-meta a {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: none;
}

.nshr-product-meta a:hover {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

/* --- Specification table (R3) --- */
.nshr-spec-section {
	margin-top: 40px;
}

.nshr-spec-heading {
	font-size: 1.4rem;
	color: var(--wp--preset--color--navy);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--sky);
}

.nshr-spec-table {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
	font-size: 1rem;
}

.nshr-spec-table tr {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.nshr-spec-table tr:nth-child(even) {
	background: var(--wp--preset--color--track);
}

.nshr-spec-table th.nshr-spec-label {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	padding: 12px 20px 12px 12px;
	width: 40%;
	vertical-align: top;
}

.nshr-spec-table td.nshr-spec-value {
	padding: 12px;
	color: var(--wp--preset--color--ink);
}

/* --- Responsive: stack gallery above summary at tablet/phone --- */
@media (max-width: 900px) {
	.nshr-product-columns {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.nshr-product-columns .nshr-gallery-column,
	.nshr-product-columns .nshr-summary-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.nshr-product .woocommerce-product-gallery {
		max-width: 480px;
	}
}

@media (max-width: 752px) {
	.nshr-product-title {
		font-size: 1.6rem;
	}

	.nshr-product .variations td.value {
		width: 100%;
	}

	.nshr-product .variations select {
		max-width: 100%;
	}
}

/* ==========================================================================
   S5e — Cart, block Checkout, and Order received (order-confirmation)
   All native WooCommerce Blocks, restyled to house tokens. Everything is
   scoped under the block roots (.wp-block-woocommerce-cart /
   .wp-block-woocommerce-checkout) or the order-confirmation blocks so no rule
   leaks into the rest of the site. WooCommerce's own wc-blocks style sheet is
   specific (often 0-2-0 double-class), so button colour/background carry
   !important; structural rules rely on the added wrapper class for weight.
   Deep navy #17395F is not a theme.json preset, so it appears as a literal.
   ========================================================================== */

/* --- Page shell: breathing room; keep the single constrained wrapper --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin-top: 32px;
	margin-bottom: 64px;
}

.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-components-order-summary,
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary {
	box-sizing: border-box;
}

/* --- Order-summary sidebar: a sky card so totals read as one panel --- */
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar {
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 24px;
}

/* --- Section / step titles: house navy, Poppins 600 --- */
.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--slate);
}

/* --- Product name (a link in cart/summary): navy 600, no underline --- */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-checkout .wc-block-components-product-name {
	color: var(--wp--preset--color--navy) !important;
	font-weight: 600;
	text-decoration: none;
}

/* --- Chosen variation options + any per-line metadata: quiet slate --- */
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-details__value,
.wp-block-woocommerce-checkout .wc-block-components-product-details__value {
	color: var(--wp--preset--color--slate);
}

.wp-block-woocommerce-cart .wc-block-components-product-details__name {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* --- Product imagery: house standard object-fit:contain, on a white tile --- */
.wp-block-woocommerce-cart .wc-block-cart-item__image img,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
	object-fit: contain;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

/* --- Remove control: slate, becomes accent on hover --- */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--slate);
}
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--accent-solid);
}

/* --- Quantity selector: bordered pill in house line/ink --- */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-checkout .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--ink);
}

/* --- Totals rows: slate labels, ink values; footer total in deep navy 700 --- */
.wp-block-woocommerce-cart .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--slate);
}
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--ink);
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: #17395F;
	font-weight: 700;
}

/* --- Form fields: line border, 8px radius, accent focus ring --- */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-select .wc-block-components-select__select,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
	/* WooCommerce's own .wc-block-checkout-scoped input rule matches at the same
	   0-2-1 weight and loads after this sheet, so border + radius need !important
	   to take the house line colour / 8px radius. */
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 8px !important;
	box-sizing: border-box;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-select .wc-block-components-select__select:focus,
.wp-block-woocommerce-checkout select:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--accent-solid) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent-solid);
	outline: none;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-select__label {
	color: var(--wp--preset--color--slate);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus + label {
	color: var(--wp--preset--color--accent-solid);
}

/* --- Radio controls (shipping method + payment method): accent when chosen --- */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	border-radius: 8px;
}
.wp-block-woocommerce-checkout input[type="radio"],
.wp-block-woocommerce-cart input[type="radio"],
.wp-block-woocommerce-checkout input[type="checkbox"],
.wp-block-woocommerce-cart input[type="checkbox"] {
	accent-color: var(--wp--preset--color--accent-solid);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--wp--preset--color--accent-solid);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--wp--preset--color--accent-solid) !important;
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--accent-solid);
}

/* --- Primary actions: accent-solid button, deep-navy-free, 8px, 600 --- */
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--accent-solid) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 8px !important;
	font-weight: 600;
}
.wp-block-woocommerce-cart .wc-block-components-button.contained .wc-block-components-button__text,
.wp-block-woocommerce-checkout .wc-block-components-button.contained .wc-block-components-button__text {
	color: var(--wp--preset--color--white) !important;
}
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--accent-hover) !important;
}

/* --- Links inside checkout (edit address, log-in prompt): accent-solid --- */
.wp-block-woocommerce-cart .wc-block-components-button.wc-block-components-button--text,
.wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-button--text,
.wp-block-woocommerce-checkout .wc-block-checkout__login-prompt a {
	color: var(--wp--preset--color--accent-solid);
}

/* --- Empty-cart state: centred, with the route back to /shop/ (R1) --- */
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	text-align: center;
}
.wp-block-woocommerce-cart .nshr-empty-cart-actions {
	margin: 20px 0 8px;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-image img,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block img {
	object-fit: contain;
}

/* ==========================================================================
   Order received / order-confirmation (thank-you) — R5
   ========================================================================== */
.wc-block-order-confirmation-status {
	color: var(--wp--preset--color--navy);
}

/* Order #, date, total, payment: a sky summary card */
.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 20px 24px;
	box-sizing: border-box;
}
.wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--slate);
}
.wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Line items + totals table: house line borders, navy headers */
.wc-block-order-confirmation-totals table th,
.wc-block-order-confirmation-totals .woocommerce-table__header {
	color: var(--wp--preset--color--navy);
}
.wc-block-order-confirmation-totals table,
.wc-block-order-confirmation-totals table td,
.wc-block-order-confirmation-totals table th,
.wc-block-order-confirmation-totals .woocommerce-table__product-name,
.wc-block-order-confirmation-totals .woocommerce-table__product-total {
	border-color: var(--wp--preset--color--line);
}
.wc-block-order-confirmation-totals .wc-block-components-product-metadata,
.wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__product-name span {
	color: var(--wp--preset--color--slate);
}
.wc-block-order-confirmation-totals img {
	object-fit: contain;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

/* Billing / shipping address cards */
.wc-block-order-confirmation-address-wrapper .wc-block-order-confirmation-billing-address,
.wc-block-order-confirmation-address-wrapper .wc-block-order-confirmation-shipping-address {
	color: var(--wp--preset--color--ink);
}

/* --- Mobile: keep every padded panel inside the viewport (no h-overflow) --- */
@media (max-width: 752px) {
	.wp-block-woocommerce-cart .wc-block-components-sidebar,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar {
		padding: 18px;
	}
	.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
		padding: 16px 18px;
	}
}

/* ==========================================================================
   Arrange a Repair (arrange-a-repair) — A1
   Breakpoints: mobile <=752px, tablet 753-1199px, desktop >=1200px
   ========================================================================== */

.northshore-arrange-section {
	background-color: var(--wp--preset--color--sky);
}

.northshore-arrange-wrap {
	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
}

.northshore-arrange-heading {
	margin: 0 0 12px;
	text-align: center;
}

.northshore-arrange-promise {
	font-size: 1.125rem;
	color: var(--wp--preset--color--slate);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.northshore-method-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.northshore-method-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 28px 24px;
}

.northshore-method-card-title {
	margin: 0 0 4px;
	font-size: 1.25rem;
	color: var(--wp--preset--color--navy);
}

.northshore-method-card-price {
	margin: 0 0 16px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-solid);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.northshore-method-card-list {
	flex: 1 1 auto;
	margin: 0 0 24px;
	padding: 0 0 0 20px;
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	line-height: 1.55;
}

.northshore-method-card-list li {
	margin-bottom: 8px;
}

.northshore-method-card-list li:last-child {
	margin-bottom: 0;
}

.northshore-method-card-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	width: 100%;
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	text-align: center;
	padding: 12px 16px;
}

.northshore-method-card-cta:hover,
.northshore-method-card-cta:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--white);
}

@media (min-width: 1200px) {
	.northshore-method-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 752px) {
	.northshore-arrange-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.northshore-arrange-promise {
		margin-bottom: 32px;
	}
	.northshore-method-card {
		padding: 24px 20px;
	}
}

/* =======================================================================
 * C2 — My Repairs portal (/my-account/my-repairs/)
 * List, six-step timeline, detail, status history, claim-a-repair.
 * House tokens; two-class compounds to clear existing 0-1-1 account rules.
 * ===================================================================== */

.nshr-portal {
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--poppins);
	color: var(--wp--preset--color--ink);
}

.nshr-portal * {
	box-sizing: border-box;
}

.nshr-portal .nshr-portal-heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	margin: 0 0 20px;
	overflow-wrap: break-word;
}

.nshr-portal .nshr-portal-subheading {
	font-size: 1.05rem;
	font-weight: 600;
	color: #17395F;
	margin: 0 0 12px;
}

.nshr-portal .nshr-portal-section {
	margin: 0 0 24px;
}

.nshr-portal .nshr-portal-none {
	color: var(--wp--preset--color--slate);
	font-size: 0.95rem;
	margin: 0 0 16px;
}

/* --- Notices --- */
.nshr-portal .nshr-portal-notice {
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 0.95rem;
	margin: 0 0 20px;
	border: 2px solid transparent;
}
.nshr-portal .nshr-portal-notice-info {
	background-color: var(--wp--preset--color--sky);
	border-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--ink);
}
.nshr-portal .nshr-portal-notice-error {
	background-color: #fdecea;
	border-color: #b3261e;
	color: #7a1a13;
}

/* --- Buttons ---
 * Colour is scoped through .woocommerce-MyAccount-content (always the portal's
 * container) so it clears the theme's `.woocommerce-account
 * .woocommerce-MyAccount-content a` link rule (0-2-1), which otherwise repaints
 * an <a class="nshr-portal-btn"> accent-on-accent (invisible). */
.nshr-portal .nshr-portal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border: none;
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent-solid);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn,
.nshr-portal button.nshr-portal-btn {
	color: #ffffff;
}
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn:hover,
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn:focus,
.nshr-portal button.nshr-portal-btn:hover,
.nshr-portal button.nshr-portal-btn:focus {
	background-color: var(--wp--preset--color--accent-hover);
	color: #ffffff;
}

/* --- List rows --- */
.nshr-portal .nshr-portal-rows {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.nshr-portal .nshr-portal-row {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 0 0 14px;
	background-color: #ffffff;
}
.nshr-portal .nshr-portal-row-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 8px;
}
.nshr-portal .nshr-portal-row-id {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}
.nshr-portal .nshr-portal-row-id:hover {
	text-decoration: underline;
}
.nshr-portal .nshr-portal-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--sky);
	color: #17395F;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.nshr-portal .nshr-portal-badge-delivered {
	background-color: #e3f1e6;
	color: #1e5b34;
}
.nshr-portal .nshr-portal-badge-cancelled {
	background-color: #f3e6e6;
	color: #7a1a13;
}
.nshr-portal .nshr-portal-badge-awaiting-parts,
.nshr-portal .nshr-portal-badge-on-hold {
	background-color: #fbf0dc;
	color: #7a4d10;
}
.nshr-portal .nshr-portal-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	color: var(--wp--preset--color--slate);
	font-size: 0.9rem;
	margin: 0 0 8px;
}
.nshr-portal .nshr-portal-row-track a {
	color: var(--wp--preset--color--accent-solid);
}
.nshr-portal .nshr-portal-row-cta a {
	color: var(--wp--preset--color--accent-solid);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
.nshr-portal .nshr-portal-row-cta a:hover {
	text-decoration: underline;
}

/* --- History disclosure --- */
.nshr-portal .nshr-portal-history {
	margin: 0 0 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 16px;
}
.nshr-portal .nshr-portal-history > summary {
	cursor: pointer;
	list-style: revert;
}

/* --- Empty state --- */
.nshr-portal .nshr-portal-empty {
	background-color: var(--wp--preset--color--sky);
	border-radius: 8px;
	padding: 28px 24px;
	margin: 0 0 24px;
}
.nshr-portal .nshr-portal-empty-lead {
	font-size: 1.1rem;
	font-weight: 600;
	color: #17395F;
	margin: 0 0 10px;
}
.nshr-portal .nshr-portal-empty p {
	margin: 0 0 14px;
}

/* --- Detail --- */
.nshr-portal .nshr-portal-back {
	margin: 0 0 8px;
}
.nshr-portal .nshr-portal-back a {
	color: var(--wp--preset--color--accent-solid);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}
.nshr-portal .nshr-portal-detail-status {
	font-size: 1rem;
	margin: 0 0 20px;
}
.nshr-portal .nshr-portal-block {
	margin: 28px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* --- Side banner + cancelled --- */
.nshr-portal .nshr-portal-sidebanner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: #fbf0dc;
	border: 1px solid #e6c58a;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 20px;
}
.nshr-portal .nshr-portal-sidebanner-title {
	font-weight: 600;
	color: #7a4d10;
}
.nshr-portal .nshr-portal-sidebanner-note {
	font-size: 0.9rem;
	color: #7a4d10;
}
.nshr-portal .nshr-portal-cancelled {
	background-color: #f3e6e6;
	border: 1px solid #d9a9a4;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 20px;
	color: #7a1a13;
}

/* --- Timeline --- */
.nshr-portal .nshr-portal-timeline {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	counter-reset: none;
}
.nshr-portal .nshr-portal-step {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 0 0 22px 0;
}
.nshr-portal .nshr-portal-step:last-child {
	padding-bottom: 0;
}
/* connector line between markers */
.nshr-portal .nshr-portal-step::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 32px;
	bottom: 0;
	width: 2px;
	background-color: var(--wp--preset--color--line);
}
.nshr-portal .nshr-portal-step:last-child::before {
	display: none;
}
.nshr-portal .nshr-portal-step-marker {
	position: relative;
	z-index: 1;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
	font-weight: 700;
	border: 2px solid var(--wp--preset--color--line);
	background-color: #ffffff;
	color: var(--wp--preset--color--slate);
}
.nshr-portal .nshr-portal-step-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 3px;
}
.nshr-portal .nshr-portal-step-title {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.nshr-portal .nshr-portal-step-desc {
	font-size: 0.88rem;
	color: var(--wp--preset--color--slate);
}
.nshr-portal .nshr-portal-step-date {
	font-size: 0.82rem;
	color: var(--wp--preset--color--slate);
}
.nshr-portal .nshr-portal-step-tag {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-solid);
}
/* complete */
.nshr-portal .nshr-portal-step-complete .nshr-portal-step-marker {
	background-color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #ffffff;
}
.nshr-portal .nshr-portal-step-complete::before {
	background-color: var(--wp--preset--color--navy);
}
/* current */
.nshr-portal .nshr-portal-step-current .nshr-portal-step-marker {
	background-color: #ffffff;
	border-color: var(--wp--preset--color--accent-solid);
	color: var(--wp--preset--color--accent-solid);
	box-shadow: 0 0 0 4px rgba(36, 111, 161, 0.18);
}
.nshr-portal .nshr-portal-step-current .nshr-portal-step-title {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}
/* ended (cancelled tail) */
.nshr-portal .nshr-portal-step-ended .nshr-portal-step-marker {
	border-style: dashed;
	color: #b39a97;
}
.nshr-portal .nshr-portal-step-ended .nshr-portal-step-title,
.nshr-portal .nshr-portal-step-ended .nshr-portal-step-desc {
	color: #b39a97;
}

/* --- Handpieces table --- */
.nshr-portal .nshr-portal-table-wrap {
	overflow-x: auto;
}
.nshr-portal .nshr-portal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.nshr-portal .nshr-portal-table th {
	text-align: left;
	background-color: var(--wp--preset--color--sky);
	color: #17395F;
	font-weight: 600;
	padding: 10px 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	white-space: nowrap;
}
.nshr-portal .nshr-portal-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	color: var(--wp--preset--color--ink);
}

/* --- Shipping definition list --- */
.nshr-portal .nshr-portal-dl {
	margin: 0;
}
.nshr-portal .nshr-portal-dl-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.nshr-portal .nshr-portal-dl-row:last-child {
	border-bottom: none;
}
.nshr-portal .nshr-portal-dl dt {
	flex: 0 0 150px;
	font-weight: 600;
	color: var(--wp--preset--color--slate);
	margin: 0;
}
.nshr-portal .nshr-portal-dl dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
}
.nshr-portal .nshr-portal-dl dd a {
	color: var(--wp--preset--color--accent-solid);
}

/* --- Status history --- */
.nshr-portal .nshr-portal-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nshr-portal .nshr-portal-history-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.nshr-portal .nshr-portal-history-item:last-child {
	border-bottom: none;
}
.nshr-portal .nshr-portal-history-date {
	flex: 0 0 96px;
	color: var(--wp--preset--color--slate);
	font-size: 0.88rem;
}
.nshr-portal .nshr-portal-history-label {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.nshr-portal .nshr-portal-history-note {
	flex-basis: 100%;
	margin-left: 112px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--slate);
}

/* --- Claim form --- */
.nshr-portal .nshr-portal-claim {
	margin: 24px 0 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 16px 18px;
	background-color: #ffffff;
}
.nshr-portal .nshr-portal-claim-summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.nshr-portal .nshr-portal-claim-body {
	margin-top: 14px;
}
.nshr-portal .nshr-portal-field {
	margin: 0 0 16px;
}
.nshr-portal .nshr-portal-field label {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin: 0 0 6px;
	font-size: 0.95rem;
}
.nshr-portal .nshr-portal-field input[type="text"],
.nshr-portal .nshr-portal-field input[type="email"] {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid #a9c0d8;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: #ffffff;
}
.nshr-portal .nshr-portal-field input:focus {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent-solid);
}
.nshr-portal .nshr-portal-claim-actions {
	margin-top: 4px;
}

/* --- Narrow screens --- */
@media (max-width: 752px) {
	.nshr-portal .nshr-portal-dl-row {
		flex-direction: column;
		gap: 2px;
	}
	.nshr-portal .nshr-portal-dl dt {
		flex-basis: auto;
	}
	.nshr-portal .nshr-portal-history-note {
		margin-left: 0;
	}
	.nshr-portal .nshr-portal-history-date {
		flex-basis: auto;
	}
}

/* Stack the handpieces table into labelled cards. A 4-column table can't fit
 * 375px, and its nowrap headers force min-content that balloons the flex
 * account-content column (min-width:auto trap) past the viewport even behind
 * overflow-x:auto. Stacking (via each cell's data-label) removes the horizontal
 * axis entirely, so nothing can overflow.
 *
 * C3 R5 — raised from 752 to 900px. Dental practices work on iPads (768px), and
 * C2's grader flagged the 4-column table as dense there (no clipping — zero
 * overflow measured — just tight). Cards are roomier at tablet widths; ≥901px
 * still gets the full table. This is portal-only; the intake form has its own
 * `.northshore-repairform-*` stacking rule at 752px and is deliberately left
 * alone. */
@media (max-width: 900px) {
	.nshr-portal .nshr-portal-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.nshr-portal .nshr-portal-table,
	.nshr-portal .nshr-portal-table tbody,
	.nshr-portal .nshr-portal-table tr,
	.nshr-portal .nshr-portal-table td {
		display: block;
		width: 100%;
	}
	.nshr-portal .nshr-portal-table tr {
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 8px;
		margin: 0 0 12px;
		padding: 4px 0;
	}
	.nshr-portal .nshr-portal-table td {
		display: flex;
		gap: 10px;
		border: none;
		padding: 7px 14px;
		overflow-wrap: anywhere;
	}
	.nshr-portal .nshr-portal-table td::before {
		content: attr(data-label);
		flex: 0 0 68px;
		font-weight: 600;
		color: var(--wp--preset--color--slate);
	}
}

/* =======================================================================
   P4 R1/R2 — customer pickup change controls (cancel / reschedule / switch).
   ===================================================================== */
.nshr-portal .nshr-portal-pickup-change {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background-color: #ffffff;
	box-sizing: border-box;
}
.nshr-portal .nshr-portal-pickup-change-title {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.nshr-portal .nshr-portal-pickup-change-lead,
.nshr-portal .nshr-portal-pickup-cancel-note,
.nshr-portal .nshr-portal-pickup-switch-note {
	margin: 0 0 12px;
	color: var(--wp--preset--color--slate);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Cut-off replacement message — reassuring, not obstructive. */
.nshr-portal .nshr-portal-pickup-cutoff {
	margin: 0;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	box-sizing: border-box;
}

/* Disclosure — obvious but not accidental: a clickable summary that must be
   opened before the action inside it is reachable. */
.nshr-portal .nshr-portal-pickup-details {
	margin: 12px 0 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background-color: var(--wp--preset--color--track);
	overflow: hidden;
}
.nshr-portal .nshr-portal-pickup-summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	min-height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.nshr-portal .nshr-portal-pickup-summary::-webkit-details-marker {
	display: none;
}
.nshr-portal .nshr-portal-pickup-summary::before {
	content: "▸";
	margin-right: 10px;
	color: var(--wp--preset--color--accent-solid);
}
.nshr-portal .nshr-portal-pickup-details[open] .nshr-portal-pickup-summary::before {
	content: "▾";
}
.nshr-portal .nshr-portal-pickup-summary-danger {
	color: var(--wp--preset--color--ink);
}
.nshr-portal .nshr-portal-pickup-details-body {
	padding: 0 16px 16px;
	background-color: #ffffff;
}
.nshr-portal .nshr-portal-pickup-actions {
	margin: 14px 0 0;
}

/* Cancel is a deliberate secondary action, styled as an outline so it never
   reads as the primary CTA (house tokens carry no red). */
.nshr-portal .nshr-portal-btn-danger {
	background-color: #ffffff;
	border: 2px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}
.nshr-portal button.nshr-portal-btn-danger {
	color: var(--wp--preset--color--navy);
}
/* The base label colour is set at 0-3-0 through .woocommerce-MyAccount-content
   (see the .nshr-portal-btn rule above) to beat WooCommerce's account link
   rule. The danger variant flips the background to white but its navy colour
   override sat at only 0-2-1, so the base white text won on the white
   background — the cancel control rendered white-on-white. Scope the danger
   colour through the same container so it wins by matching specificity. */
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn-danger {
	color: var(--wp--preset--color--navy);
}
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn-danger:hover,
.woocommerce-MyAccount-content .nshr-portal .nshr-portal-btn-danger:focus,
.nshr-portal button.nshr-portal-btn-danger:hover,
.nshr-portal button.nshr-portal-btn-danger:focus {
	background-color: var(--wp--preset--color--navy);
	color: #ffffff;
}
.nshr-portal .nshr-portal-pickup-switch {
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* P4 R6 — the copy control now sits BETWEEN the shipping and billing blocks
   (the addresses container is already a single-column flex stack), so the
   flex gap handles the spacing above it. */
.woocommerce-account .woocommerce-Addresses.u-columns .northshore-copy-address {
	margin-top: 0;
}

/* P4 R2 — the reschedule calendar reuses P3's picker, whose ≤752 rule full-bleeds
   it to 100vw so the seven day cells clear 44px on a phone (a nested card can't
   fit 44px cells — measured). That breakout is correct; what broke it here was
   our own details overflow:hidden, which clipped the bled-out left edge. So on
   mobile we (a) stop clipping (overflow visible) and (b) zero the details-body
   horizontal padding so the full-width calendar sits flush, edge to edge, exactly
   as it does in the intake form. The global overflow-x:hidden still prevents any
   horizontal scroll (measured scrollWidth == viewport). */
.nshr-portal .nshr-portal-pickup-details {
	overflow: visible;
}
@media (max-width: 752px) {
	.nshr-portal .nshr-portal-pickup-details-body {
		padding-left: 0;
		padding-right: 0;
	}
}

/* =====================================================================
 * M1 — percent-off sale badge.
 *
 * Navy #204D85, white, Poppins, uppercase, SQUARE corners (house style,
 * intentional). Small and confident: a statement of fact, not a starburst.
 * White-on-navy contrast = 8.53:1 (AA/AAA pass). The badge is real text.
 *
 * .nshr-badge-anchor is our own relatively-positioned wrapper around the
 * product-image block (loop) / product-image-gallery block (single). The
 * badge is absolute at its top-left, so it overlays the image top-left and
 * can never overlap the title or price (siblings, not descendants). Wrapping
 * does not touch the <img> object-fit:contain rules that letterbox the photo.
 * ===================================================================== */
.nshr-badge-anchor {
	position: relative;
	display: block;
}

/* Two-part badge (M1.1). Dominance is achieved by the RATIO between the number
   and the word OFF, never by growing the block — the badge stays within M1's
   footprint (card <=78x22, single <=87x25). The number's font-size is the base
   font-size (1em); OFF is 0.5em, so the size ratio is a fixed 2.0 (>= 1.8) at
   every breakpoint and on both surfaces. Number weight 700 vs OFF 400 = 300
   delta (>= 200). Vertical padding is small on purpose: two lines have to fit
   the single-line footprint M1 established. */
.nshr-sale-badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	box-sizing: border-box;
	padding: 1px 8px;
	background-color: var(--wp--preset--color--navy);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 12px; /* base = the number's size; OFF derives from it in em */
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	border-radius: 0; /* square corners — intentional, house style */
}

.nshr-sale-badge__num {
	display: block;
	font-size: 1em; /* 12px card / 14px single — the dominant number */
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.nshr-sale-badge__off {
	display: block;
	margin-top: 1px;
	font-size: 0.5em; /* half the number => size ratio 2.0 (>= 1.8 required) */
	font-weight: 400; /* 300 lighter than the number (>= 200 required) */
	line-height: 1;
	letter-spacing: 0.12em;
	/* cancel the trailing space letter-spacing adds, so OFF stays centred */
	text-indent: 0.12em;
}

/* Single product: the image box is larger, so scale the whole component up a
   touch (same 2.0 ratio, same weights, same square corners) to match. */
.nshr-badge-anchor--single .nshr-sale-badge {
	padding: 1px 9px;
	font-size: 14px;
}

/* R5 — these pages get printed for purchasing approval; a solid navy block
   wastes toner and carries no meaning on paper (the struck price prints). */
@media print {
	.nshr-sale-badge {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------
   C6 — theme-native contact form (/contact-us/). The form reuses the repair
   intake form's structural classes (.northshore-repairform,
   .northshore-account-fieldset, .northshore-account-field, the notice and the
   .wp-block-button__link submit), so it inherits the house fields, focus rings
   and button wholesale. Only the pieces the intake form doesn't already have —
   the honeypot hide, the inline field error, the textarea error border and the
   inline success panel — are defined here, all scoped to .northshore-contact-*.
   --------------------------------------------------------------------- */

/* Off-screen honeypot: reachable by a naive bot, invisible and untabbable to a
   human. Not display:none — some bots skip hidden fields, which defeats it. */
.northshore-contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Inline per-field error message (a <span>, so it needs display:block). Matches
   the account form's .northshore-account-field-error look. */
.northshore-contact-field-error {
	display: block;
	margin: 6px 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: #b3261e;
}

/* The account has-error border rule only covers input/select; the Message field
   is a textarea, so extend it here (scoped to the contact form only). */
.northshore-contact-form .northshore-account-field-has-error textarea {
	border-color: #b3261e;
}

.northshore-contact-form .northshore-account-field-has-error textarea:focus {
	outline-color: #b3261e;
	border-color: #b3261e;
}

/* Inline success panel shown in place of the form after a genuine submission
   (no redirect by design). House sky/navy, square-cornered accent rule. */
.northshore-contact-success {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--sky);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--accent-solid);
	border-radius: 8px;
	padding: 24px 28px;
	color: var(--wp--preset--color--ink);
}

.northshore-contact-success p {
	margin: 0 0 8px;
}

.northshore-contact-success p:last-child {
	margin-bottom: 0;
}

.northshore-contact-success-title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wp--preset--color--navy);
}

/* R1 — wayfinding callout (expires 2027-03-31) */
.northshore-header-actions {
	position: relative; /* positioning context for the absolutely-placed callout;
		nothing else sets position on this group (verified), so no change to layout */
}

.nshr-wayfinding {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 50; /* above the hero (z-index:1); the open nav overlay is far higher
		AND the callout is hidden while it is open (rule below) */
	box-sizing: border-box;
	max-width: 320px;
	padding: 16px;
	background-color: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(23, 57, 95, 0.28);
	animation: nshr-wayfinding-fade 150ms ease-out;
}

@keyframes nshr-wayfinding-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nshr-wayfinding {
		animation: none;
	}
}

/* The pointer: a rotated square in the same navy, its horizontal midpoint under
   the CTA's midpoint. The CTA is the right-most item in the group and the card's
   right edge sits at the group's right edge, so the offset from the right is
   (CTA width / 2) - (arrow width / 2). Per-breakpoint offsets follow. */
.nshr-wayfinding__arrow {
	position: absolute;
	top: -7px;
	right: 97px; /* >=1200: measured CTA 208px wide -> centre 104px in, minus 7px half-arrow */
	width: 14px;
	height: 14px;
	background-color: var(--wp--preset--color--navy);
	border-radius: 2px;
	transform: rotate(45deg);
}

.nshr-wayfinding__title {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: #fff;
}

.nshr-wayfinding__body {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.875rem;
	line-height: 1.5;
	color: #fff;
}

.nshr-wayfinding__body strong {
	font-weight: 700;
}

/* "Got it" — a light button on navy: white fill, navy label (8.53:1), a visible
   navy border, and a >=44px hit area. Resting state is what the audit measures. */
.nshr-wayfinding__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 18px;
	background-color: #fff;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.nshr-wayfinding__dismiss:hover,
.nshr-wayfinding__dismiss:focus-visible {
	background-color: var(--wp--preset--color--sky);
	border-color: var(--wp--preset--color--sky);
}

/* Yield to the open mobile navigation overlay. Core stamps has-modal-open on
   <html> while the drawer is open (the same signal the header CTA dim relies on),
   so a plain descendant selector hides the callout with no :has() and no JS. */
html.has-modal-open .nshr-wayfinding {
	display: none;
}

/* 481-1199: the CTA is the full "Arrange a Repair" button, measured 135px wide
   -> centre 67.7px in, minus 7px half-arrow ~= 61px. The offset is independent
   of viewport width here (both CTA and card right-anchor to the same edge). */
@media (max-width: 1199px) {
	.nshr-wayfinding__arrow {
		right: 61px;
	}
}

/* <=480: the CTA collapses to the "Repair" pill, measured 56px wide -> centre
   28px from the right edge, so the arrow sits 21px in. Card grows to the
   viewport so it never overflows at 320. */
@media (max-width: 480px) {
	.nshr-wayfinding {
		max-width: calc(100vw - 32px);
	}
	.nshr-wayfinding__arrow {
		right: 21px;
	}
}