@import url('../fonts/fonts.css');

/* ==========================================================================
   Design tokens — see DESIGN.md
   ========================================================================== */
:root {
	/* Colours — navy/sonar-cyan marine direction, see DESIGN.md §2.
	   --color-accent (full-brightness cyan, #16B8D4) only reaches WCAG AA
	   (4.5:1) against the navy surface, not against white/light-gray — see
	   DESIGN.md's contrast table. It's used for links/focus on navy only,
	   plus small badges and icons. --color-link is the same cyan hue
	   darkened until it passes 4.5:1 on white/light-gray too, for links and
	   focus rings everywhere else (the default, far more common case). */
	--color-navy: #0b1f33;
	--color-background: #ffffff;
	--color-surface: #f4f6f8;
	--color-text: #1a2633;
	--color-text-on-navy: #ffffff;
	--color-text-muted: #556573;
	--color-text-muted-on-dark: #a9b6c2;
	--color-accent: #16b8d4;
	--color-link: #0a7383;

	/* Fonts: Space Grotesk for headings, Inter for body — see DESIGN.md §4. */
	--font-heading: 'Space Grotesk', -apple-system, sans-serif;
	--font-body: 'Inter', -apple-system, sans-serif;

	/* Type scale (base 16px, ~1.25 ratio) */
	--font-size-small: 0.875rem;
	--font-size-body: 1rem;
	--font-size-large: 1.125rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: 1.5625rem;
	--font-size-h2: 1.9375rem;
	--font-size-h1: 2.4375rem;
	/* Display: homepage hero + large product-tile headlines — fluid, scales
	   with viewport width between the mobile and desktop bounds below. */
	--font-size-display: clamp(2.75rem, 2rem + 4vw, 5rem);

	/* Spacing scale (base 4px) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 400;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}

h4 {
	font-size: var(--font-size-h4);
}

a {
	color: var(--color-text);
}

@media (max-width: 599px) {
	h1 {
		font-size: var(--font-size-h2);
	}

	h2 {
		font-size: var(--font-size-h3);
	}
}

/* ==========================================================================
   Shared layout container
   Used by the header, footer and main content so they all line up on the
   same left and right edges.
   ========================================================================== */
.container {
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--space-4);
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--color-background);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-elevated);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text);
	display: block;
	height: auto;
	left: var(--space-4);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	position: fixed;
	top: var(--space-4);
	width: auto;
	z-index: 100;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: relative;
	z-index: 40;
}

.announcement-bar {
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
	font-size: var(--font-size-small);
	padding: var(--space-2) var(--space-4);
	text-align: center;
}

.header-main {
	background-color: var(--color-navy);
	position: sticky;
	top: 0;
	transition: box-shadow 0.2s ease;
	z-index: 30;
}

.site-header--scrolled .header-main {
	box-shadow: var(--shadow-card);
}

/* Three zones (start/nav/actions) that stay one line and keep the nav
   visually centered regardless of how wide the logo or the icon row are:
   the outer two zones share equal flex:1, the nav sits flex:0 0 auto
   between them. On mobile, where the nav is display:none, start/actions
   simply split the row evenly and each aligns itself to its own edge via
   its own internal flex (no separate mobile layout rules needed). */
.header-main__inner {
	align-items: center;
	display: flex;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.header-main__start {
	align-items: center;
	display: flex;
	flex: 1;
	gap: var(--space-3);
	min-width: 0;
}

.site-branding {
	min-width: 0;
}

.site-logo svg {
	color: var(--color-text-on-navy);
	display: block;
	height: auto;
	width: 150px;
}

.primary-navigation {
	display: none;
	flex: 0 0 auto;
}

.primary-menu {
	display: flex;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu > li {
	position: relative;
}

.primary-menu > li > a {
	align-items: center;
	color: var(--color-text-muted-on-dark);
	display: inline-flex;
	font-size: var(--font-size-small);
	gap: var(--space-1);
	text-decoration: none;
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus-visible {
	color: var(--color-accent);
}

.primary-menu > li > a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Small caret after a top-level link that opens a dropdown — a plain CSS
   triangle (no extra markup/icon asset needed). */
.primary-menu > .menu-item-has-children > a::after {
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	content: '';
	display: inline-block;
	height: 5px;
	margin-top: -2px;
	transform: rotate(45deg);
	width: 5px;
}

/* --- dropdown panel --- */
.primary-menu .sub-menu {
	background-color: var(--color-background);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated);
	display: none;
	list-style: none;
	margin: 0;
	min-width: 220px;
	padding: var(--space-4);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
}

/* .is-open is JS-managed (see assets/js/main.js) rather than relying on
   :focus-within alone — :focus-within would stay true after Escape moves
   focus back to the trigger itself (focus never actually leaves the
   item), making Escape unable to visually close the dropdown. Mouse
   hover stays pure CSS either way. */
.primary-menu > .menu-item-has-children:hover > .sub-menu,
.primary-menu > .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

.primary-menu .sub-menu a {
	border-radius: var(--radius-sm);
	color: var(--color-text);
	display: block;
	font-size: var(--font-size-small);
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	background-color: var(--color-surface);
	color: var(--color-link);
}

.primary-menu .sub-menu a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: -2px;
}

/* "Shop" specifically: a 2-column mega menu (9 links: 7 categories +
   Freshwater + Saltwater) — CSS multi-column balances them automatically,
   no grid-template bookkeeping needed. Other dropdowns (Brands, Support)
   stay a single column at their default min-width. */
.primary-menu .menu-item--megamenu > .sub-menu {
	columns: 2;
	column-gap: var(--space-6);
	min-width: 420px;
}

.primary-menu .menu-item--megamenu > .sub-menu li {
	break-inside: avoid;
}

.menu-toggle {
	background: none;
	border: 0;
	color: var(--color-text-on-navy);
	cursor: pointer;
	padding: var(--space-2);
}

.menu-toggle__box {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 20px;
}

.menu-toggle__line {
	background-color: currentColor;
	border-radius: 1px;
	display: block;
	height: 2px;
}

.header-actions {
	align-items: center;
	display: flex;
	flex: 1;
	gap: var(--space-1);
	justify-content: flex-end;
}

.header-action {
	align-items: center;
	background: none;
	border: 0;
	color: var(--color-text-on-navy);
	cursor: pointer;
	display: inline-flex;
	padding: var(--space-2);
	position: relative;
	text-decoration: none;
}

.header-action:hover,
.header-action:focus-visible {
	color: var(--color-accent);
}

.header-action:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Cart count: a small solid badge over the icon's corner, not inline text
   next to it — cyan passes contrast fine here since it's a background
   behind navy text, not text-on-navy (see DESIGN.md's contrast table). */
.cart-count {
	align-items: center;
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
	color: var(--color-navy);
	display: flex;
	font-size: 0.6875rem;
	font-weight: 700;
	height: 16px;
	justify-content: center;
	line-height: 1;
	min-width: 16px;
	padding: 0 4px;
	position: absolute;
	right: 2px;
	top: 2px;
}

.header-search {
	position: relative;
}

.header-search__panel {
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-elevated);
	min-width: 260px;
	padding: var(--space-3);
	position: absolute;
	right: 0;
	top: calc(100% + var(--space-2));
}

.header-search__panel[hidden] {
	display: none;
}

.header-search__panel .search-form {
	display: flex;
	gap: var(--space-2);
}

.header-search__panel input[type='search'] {
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	flex: 1;
	padding: var(--space-2) var(--space-3);
}

.header-search__panel input[type='submit'] {
	background-color: var(--color-text);
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	cursor: pointer;
	padding: var(--space-2) var(--space-3);
}

@media (min-width: 900px) {
	.primary-navigation {
		display: block;
	}

	.menu-toggle {
		display: none;
	}
}

/* ==========================================================================
   Mobile menu panel
   ========================================================================== */
.mobile-menu[hidden] {
	display: none;
}

.mobile-menu {
	inset: 0;
	position: fixed;
	z-index: 50;
}

.mobile-menu__backdrop {
	background-color: rgba(43, 42, 40, 0.4);
	inset: 0;
	position: absolute;
}

.mobile-menu__panel {
	background-color: var(--color-background);
	bottom: 0;
	box-shadow: var(--shadow-elevated);
	overflow-y: auto;
	padding: var(--space-6) var(--space-4);
	position: absolute;
	right: 0;
	top: 0;
	width: min(320px, 85vw);
}

.mobile-menu__close {
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	margin-bottom: var(--space-6);
	padding: var(--space-2);
}

.mobile-menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu-list a {
	color: var(--color-text);
	font-size: var(--font-size-large);
	text-decoration: none;
}

/* --- submenus as expandable accordion sections (see the toggle-button
   script in assets/js/main.js — hover doesn't exist on touch, so each
   top-level item with children gets its own disclosure button instead) --- */
.mobile-menu-list > .menu-item-has-children {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mobile-menu-list > .menu-item-has-children > a {
	flex: 1;
}

.mobile-submenu-toggle {
	background: none;
	border: 0;
	color: var(--color-text);
	cursor: pointer;
	flex-shrink: 0;
	padding: var(--space-2);
}

.mobile-submenu-toggle svg {
	transition: transform 0.2s ease;
}

.mobile-submenu-toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}

.mobile-menu-list .sub-menu {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-3) 0 0;
	padding-left: var(--space-4);
}

.mobile-menu-list .sub-menu[hidden] {
	display: none;
}

.mobile-menu-list .sub-menu a {
	color: var(--color-text-muted);
	font-size: var(--font-size-body);
}

body.has-mobile-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
	margin-top: var(--space-16);
}

.site-footer__inner {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(4, 1fr);
	padding-block: var(--space-12);
}

@media (max-width: 899px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}

.footer-column__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	margin-bottom: var(--space-3);
}

.footer-column address {
	font-size: var(--font-size-small);
	font-style: normal;
	line-height: 1.7;
	margin: var(--space-3) 0;
}

.footer-column a {
	color: var(--color-text-on-navy);
}

.footer-column a:hover {
	color: var(--color-accent);
}

.footer-support-hours {
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
}

.site-logo--footer svg {
	height: 24px;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-small);
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-policy-summary {
	display: flex;
	flex-direction: column;
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
	gap: var(--space-3);
	line-height: 1.6;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
	padding: var(--space-4);
	text-align: center;
}

/* ==========================================================================
   Page content (page.php, 404.php)
   A centred, comfortable reading column. Side padding on mobile comes from
   the surrounding .container.
   ========================================================================== */
.page-content {
	margin-inline: auto;
	max-width: 45rem;
	padding-block: var(--space-12) var(--space-16);
}

.page-title {
	margin-bottom: var(--space-6);
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--space-8);
}

.entry-content h2 {
	font-size: var(--font-size-h3);
}

.entry-content h3 {
	font-size: var(--font-size-h4);
}

.entry-content p,
.entry-content li {
	line-height: 1.7;
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-6);
}

.entry-content li + li {
	margin-top: var(--space-2);
}

.entry-content a {
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content a:hover {
	color: var(--color-text);
}

.entry-content a:focus-visible {
	border-radius: var(--radius-sm);
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.error-404__links {
	display: flex;
	gap: var(--space-4);
}

/* ==========================================================================
   Shop page, category archives, brand archives
   ========================================================================== */
.shop-page {
	padding-block: var(--space-6) var(--space-16);
}

.shop-header {
	max-width: 45rem;
	margin-bottom: var(--space-8);
}

.shop-header__description {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
}

.shop-header__description > * + * {
	margin-top: var(--space-2);
}

/* Count + sort share one row: stacked on mobile (count above the Filter/sort
   toolbar, unchanged), side by side on desktop (count left, sort right) —
   see inc/shop-archive.php. */
.shop-meta-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.shop-header__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.shop-meta-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.shop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
	font-weight: 600;
	cursor: pointer;
}

.shop-sort .woocommerce-ordering {
	margin: 0;
}

.shop-sort select {
	width: auto;
}

/* --- filter chips: plain links to each term's own archive, no JS required --- */
.shop-filter-group + .shop-filter-group {
	margin-top: var(--space-6);
}

.shop-filter-group__heading {
	margin-bottom: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.shop-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-filter-chip {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.shop-filter-chip:hover {
	border-color: var(--color-text);
}

.shop-filter-chip.is-active {
	border-color: var(--color-text);
	background-color: var(--color-text);
	color: #fff;
}

/* --- mobile filter panel: same accessible slide-in pattern as the mobile
   nav menu (see .mobile-menu above and assets/js/main.js) --- */
.shop-filter-panel[hidden],
.shop-filter-backdrop[hidden] {
	display: none;
}

.shop-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background-color: rgba(43, 42, 40, 0.4);
}

.shop-filter-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 51;
	width: min(320px, 85vw);
	overflow-y: auto;
	padding: var(--space-6) var(--space-4);
	background-color: var(--color-background);
	box-shadow: var(--shadow-elevated);
}

.shop-filter-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

.shop-filter-panel__title {
	margin: 0;
	font-size: var(--font-size-h4);
}

.shop-filter-panel__close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

body.has-filter-panel-open {
	overflow: hidden;
}

@media (min-width: 900px) {
	.shop-filter-toggle {
		display: none;
	}

	.shop-filter-backdrop {
		display: none !important;
	}

	.shop-filter-panel {
		position: static;
		z-index: auto;
		width: auto;
		overflow: visible;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
		margin-bottom: var(--space-8);
	}

	.shop-filter-panel[hidden] {
		display: block;
	}

	.shop-filter-panel__header {
		display: none;
	}

	.shop-filter-group {
		display: inline-block;
		margin-right: var(--space-8);
		vertical-align: top;
	}

	.shop-filter-group + .shop-filter-group {
		margin-top: 0;
	}
}

/* --- pagination --- */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-12) 0 0;
	padding: 0;
}

.woocommerce-pagination .page-numbers li {
	display: block;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
}

.woocommerce-pagination a.page-numbers:hover {
	background-color: var(--color-surface);
}

.woocommerce-pagination span.page-numbers.current {
	background-color: var(--color-text);
	color: #fff;
	font-weight: 600;
}

/* --- empty state --- */
.shop-empty {
	padding-block: var(--space-16);
	text-align: center;
}

.shop-empty__message {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}

.shop-empty__link {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: underline;
}

/* ==========================================================================
   Single product page
   ========================================================================== */
.product-page {
	padding-block: var(--space-6) var(--space-16);
}

.woocommerce-breadcrumb {
	max-width: 100%;
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
	overflow-wrap: break-word;
}

.woocommerce-breadcrumb a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

/* .product-top holds ONLY the gallery + purchase panel (see
   inc/single-product.php for why this needed its own wrapper, separate
   from .product-details below it) — this is what bounds the sticky
   panel's containing block, so it can only ever stick within this top
   section and never overlap the description/Q&A/related area. */
.product-top {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

/* WooCommerce's "Sale!" badge is a sibling of the gallery, not nested
   inside it, so left in normal flow it would become a stray third grid
   item here. Taking it out of flow keeps it purely a visual ribbon over
   the gallery's corner, whenever a product actually has a sale price. */
.onsale {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 2;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-navy);
	font-size: var(--font-size-small);
	font-weight: 600;
}

@media (min-width: 900px) {
	.product-top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: start;
	}

	/* No fixed height or overflow here on purpose: position: sticky only
	   keeps the panel pinned while it still fits inside its grid row (the
	   row's height follows the gallery column); once the panel is taller
	   than the remaining space, it scrolls with the page like normal
	   content — exactly "sticky only when it fits", with nothing hidden
	   and no inner scrollbar. */
	.summary.entry-summary {
		position: sticky;
		top: var(--space-24);
	}
}

.product-details {
	margin-top: var(--space-8);
}

@media (min-width: 900px) {
	.product-details {
		margin-top: var(--space-16);
	}
}

/* --- gallery --- */
.woocommerce-product-gallery {
	position: relative;
	width: 100%;
	max-width: 100%;
	float: none;
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* The "Zoom image" button (printed by donemar_product_gallery_controls(),
   opens WooCommerce's lightbox on the shown image) — kept on WooCommerce's
   own trigger class name so it looks the same as before: a small round
   white button in the gallery's top-right corner. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	padding: 0;
	border: 0;
	background-color: #fff;
	box-shadow: var(--shadow-card);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:focus-visible {
	box-shadow: var(--shadow-elevated);
}

.woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* The button's empty inner <span> draws the same thin-line magnifier used
   by the header's search icon, via a mask so it inherits our text color. */
.woocommerce-product-gallery__trigger span {
	display: inline-block;
	overflow: hidden;
	width: 20px;
	height: 20px;
	font-size: 0;
	color: transparent;
	background-color: var(--color-text);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce-product-gallery__wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

/* Product images are never cropped (see donemar_uncropped_image_size()):
   the whole photo is scaled to fit, centered on white, inside the same
   square frame — tall handhelds and wide radar domes alike. */
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background-color: var(--color-background);
}

/* The gallery's own controls (see donemar_product_gallery_controls() and
   the product gallery script in assets/js/main.js) start hidden and are
   shown by that script — these rules set "display", so the hidden
   attribute needs saying again to keep winning. The same goes for the
   images not currently shown. */
.woocommerce-product-gallery__trigger[hidden],
.product-gallery-thumbs[hidden],
.woocommerce-product-gallery__image[hidden] {
	display: none;
}

/* Thumbnail strip: a single scrollable row of buttons at a proper size,
   so it stays tidy however many photos a product has. */
.product-gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: var(--space-1) var(--space-1) var(--space-2);
}

.product-gallery-thumb {
	flex: 0 0 auto;
	display: block;
	padding: 0;
	border: 2px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	cursor: pointer;
}

.product-gallery-thumb img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	object-fit: contain;
	object-position: center;
	background-color: var(--color-background);
}

.product-gallery-thumb.is-active {
	border-color: var(--color-text);
}

.product-gallery-thumb:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* Mobile: dots instead of a photo strip (swiping the image also works).
   Each button keeps its accessible label ("Show image 2 of 5") and is a
   24px touch target; its thumbnail image is hidden and a plain CSS circle
   is drawn as the visible dot. */
@media (max-width: 599px) {
	.product-gallery-thumbs {
		justify-content: center;
		align-items: center;
		overflow-x: visible;
	}

	.product-gallery-thumb {
		position: relative;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background-color: transparent;
	}

	.product-gallery-thumb img {
		display: none;
	}

	/* Inactive: a hollow ring in muted text colour (5.6:1 on the gallery's
	   light-gray background); active: a solid dark dot. */
	.product-gallery-thumb::after {
		content: '';
		box-sizing: border-box;
		width: 8px;
		height: 8px;
		border: 1.5px solid var(--color-text-muted);
		border-radius: 50%;
		pointer-events: none;
	}

	.product-gallery-thumb.is-active::after {
		border-color: var(--color-text);
		background-color: var(--color-text);
	}
}

/* --- brand + title --- */
.product-heading {
	margin-bottom: var(--space-4);
}

.product-brand {
	display: inline-block;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-decoration: none;
	margin-bottom: var(--space-1);
}

.product-brand:hover {
	text-decoration: underline;
}

.product_title.entry-title {
	margin: 0;
}

/* --- price --- */
.summary .price {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: 600;
	color: var(--color-text);
	margin: var(--space-4) 0;
}

.summary .price .woocommerce-Price-amount {
	color: inherit;
}

.summary .price del {
	font-family: var(--font-body);
	font-size: var(--font-size-large);
	font-weight: 400;
	color: #8a8680;
	opacity: 1;
	margin-right: var(--space-2);
	text-decoration: line-through;
}

.summary .price ins {
	text-decoration: none;
}

/* --- condition / stock / sku --- */
.product-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	font-size: var(--font-size-small);
	color: var(--color-text);
}

.product-meta-row li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.product-meta-row li:not(:last-child)::after {
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
	margin-left: var(--space-2);
}

.product-stock.is-in-stock {
	color: var(--color-text);
}

.product-stock.is-out-of-stock {
	color: #b5674a;
}

/* --- quantity + add to cart --- */
.quantity {
	display: inline-flex;
	margin-bottom: var(--space-4);
}

.quantity .qty {
	width: 4.5rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
}

.single_variation_wrap .single_add_to_cart_button,
form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: #fff;
	font-size: var(--font-size-large);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.single_variation_wrap .single_add_to_cart_button:hover,
form.cart .single_add_to_cart_button:hover {
	background-color: #081a2b;
}

.single_variation_wrap .single_add_to_cart_button.disabled {
	background-color: var(--color-surface);
	color: #8a8680;
	cursor: not-allowed;
}

/* --- trust list --- */
.product-trust-list {
	list-style: none;
	margin: var(--space-6) 0 var(--space-3);
	padding: var(--space-4);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	font-size: var(--font-size-small);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.product-trust-list li {
	padding-left: var(--space-6);
	position: relative;
}

.product-trust-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--color-text);
	font-weight: 600;
}

.product-trust-links {
	display: flex;
	gap: var(--space-4);
	font-size: var(--font-size-small);
	margin: 0 0 var(--space-6);
}

/* --- accordion --- */
.product-accordion {
	max-width: 65rem;
	margin: 0 auto;
}

.product-accordion__intro {
	margin-bottom: var(--space-6);
	font-size: var(--font-size-large);
}

.accordion-item {
	border-bottom: 1px solid var(--color-surface);
}

.accordion-item__heading {
	margin: 0;
}

.accordion-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-4) 0;
	background: none;
	border: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.accordion-item__trigger::after {
	content: '+';
	font-family: var(--font-body);
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	margin-left: var(--space-4);
	transition: transform 0.2s ease;
}

.accordion-item__trigger[aria-expanded='true']::after {
	content: '−';
}

.accordion-item__trigger:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.accordion-item__panel {
	padding-bottom: var(--space-6);
}

.accordion-item__panel table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-small);
}

.accordion-item__panel table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-surface);
}

.accordion-item__panel table td:first-child {
	color: var(--color-text-muted);
	width: 40%;
}

/* --- "At a glance" spec table (see donemar_spec_list_to_table()) --- */
.accordion-item__panel .spec-table {
	width: 100%;
	max-width: 44rem;
	border: 1px solid #d5dde4;
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--font-size-body);
}

.accordion-item__panel .spec-table th,
.accordion-item__panel .spec-table td {
	border-bottom: 0;
	padding: var(--space-3) var(--space-4);
	text-align: left;
	vertical-align: top;
}

.accordion-item__panel .spec-table tr + tr th,
.accordion-item__panel .spec-table tr + tr td {
	border-top: 1px solid #d5dde4;
}

.accordion-item__panel .spec-table th {
	width: 38%;
	background-color: var(--color-surface);
	border-right: 1px solid #d5dde4;
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	font-size: var(--font-size-small);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.accordion-item__panel .spec-table td {
	color: var(--color-text);
	font-weight: 500;
}

/* --- Q&A block --- */
.product-qa {
	max-width: 65rem;
	margin: var(--space-12) auto 0;
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
}

.product-qa h2 {
	font-size: var(--font-size-large);
	margin-bottom: var(--space-2);
}

.product-qa a {
	color: var(--color-text);
	text-decoration: underline;
}

/* --- related products --- */
.related.products {
	max-width: 65rem;
	margin: var(--space-16) auto 0;
}

.related.products > h2 {
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   Product card
   One reusable component (built by inc/product-cards.php's hooks into
   woocommerce/content-product.php) used everywhere WooCommerce renders a
   product loop: the shop grid, category/brand archives, and "You may also
   like" on the single product page — all three share this same markup, so
   one set of rules styles all of them.
   ========================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6) var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

.woocommerce ul.products li.product {
	font-size: var(--font-size-small);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-md);
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

.product-card__image {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	overflow: hidden;
}

/* Whole image, never cropped, centered on white (see the gallery note). */
.product-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product-card__brand {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.product-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: var(--space-1);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--font-size-large);
	font-weight: 600;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.woocommerce ul.products li.product .price {
	display: block;
	color: var(--color-text);
	font-weight: 600;
}

.woocommerce ul.products li.product .price del {
	margin-right: var(--space-1);
	color: #8a8680;
	font-weight: 400;
	text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.product-card__stock {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-small);
	color: #b5674a;
	font-weight: 600;
}

/* --- mobile sticky add-to-cart bar --- */
.sticky-add-to-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background-color: var(--color-background);
	border-top: 1px solid var(--color-surface);
	box-shadow: var(--shadow-elevated);
	transform: translateY(100%);
	transition: transform 0.2s ease;
}

.sticky-add-to-cart.is-visible {
	transform: translateY(0);
}

.sticky-add-to-cart__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.sticky-add-to-cart__info {
	flex: 1;
	min-width: 0;
	font-size: var(--font-size-small);
}

.sticky-add-to-cart__price {
	display: block;
	font-weight: 600;
}

.sticky-add-to-cart__button {
	flex-shrink: 0;
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

@media (min-width: 900px) {
	.sticky-add-to-cart {
		display: none;
	}
}

/* --- out of stock message (variable.php's out-of-stock notice) --- */
.stock.out-of-stock {
	color: #b5674a;
	font-weight: 600;
}

/* ==========================================================================
   WooCommerce baseline — generic elements that appear on cart, checkout and
   my-account too, now that WooCommerce's own default stylesheets are
   disabled (see functions.php). This is a minimal safety net so those
   pages stay readable, not a full design pass — see the summary for what
   still needs dedicated layout work.
   ========================================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	font-size: var(--font-size-small);
}

.woocommerce-error {
	background-color: #f7e6e0;
	color: #8a4328;
}

.woocommerce-message {
	background-color: var(--color-surface);
}

.woocommerce .button,
.woocommerce input.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	display: inline-block;
	padding: var(--space-2) var(--space-6);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce .button:hover,
.woocommerce input.button:hover,
.woocommerce button.button:hover {
	background-color: #081a2b;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-6);
	font-size: var(--font-size-small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-surface);
	text-align: left;
}

.woocommerce form .form-row {
	margin-bottom: var(--space-4);
}

.woocommerce form label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--font-size-small);
}

.woocommerce form input[type='text'],
.woocommerce form input[type='email'],
.woocommerce form input[type='password'],
.woocommerce form input[type='tel'],
.woocommerce form input[type='number'],
.woocommerce form textarea,
.woocommerce form select {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
}

/* ==========================================================================
   Homepage (front-page.php)
   ========================================================================== */

/* A primary button usable outside the .woocommerce scope (the product/cart
   buttons reuse ".woocommerce .button" instead — see baseline above). Same
   visual spec either way: navy pill, white text. */
.button-primary {
	display: inline-block;
	padding: var(--space-3) var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.button-primary:hover {
	background-color: #081a2b;
}

.button-primary:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

/* A text link with a small arrow that nudges right on hover — used for
   the hero's secondary link, every "View all", and category captions. */
.arrow-icon {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

a:hover .arrow-icon {
	transform: translateX(3px);
}

/* --- scroll reveal (respects prefers-reduced-motion) --- */
.fade-in-up {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fade-in-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- buttons for navy surfaces (hero) --- */
.button-accent,
.button-outline-light {
	display: inline-block;
	padding: var(--space-3) var(--space-8);
	border-radius: var(--radius-pill);
	font-weight: 600;
	text-decoration: none;
}

/* Navy text on cyan: 7.0:1 (DESIGN.md §2). */
.button-accent {
	background-color: var(--color-accent);
	color: var(--color-navy);
	border: 1px solid var(--color-accent);
}

.button-accent:hover {
	background-color: #fff;
	border-color: #fff;
}

.button-outline-light {
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
}

.button-outline-light:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.button-accent:focus-visible,
.button-outline-light:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* --- hero: navy, split layout — text left, sonar graphic right --- */
.home-hero {
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
	overflow: hidden;
}

.home-hero__inner {
	display: grid;
	gap: var(--space-8);
	align-items: center;
	padding-block: var(--space-12) var(--space-8);
}

.home-hero__headline {
	margin: 0 0 var(--space-4);
	color: #fff;
	font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.home-hero__support {
	max-width: 34rem;
	margin: 0 0 var(--space-8);
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-large);
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.home-hero__visual {
	max-width: 30rem;
	width: 100%;
	justify-self: center;
}

.home-hero__graphic {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.home-hero__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-12);
		padding-block: var(--space-24);
	}

	.home-hero__visual {
		max-width: 34rem;
		justify-self: end;
	}
}

/* --- trust chips: small icon + text pills right under the hero --- */
.home-trust-chips {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-surface);
}

.home-trust-chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-trust-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-weight: 500;
}

.home-trust-chip__icon {
	flex-shrink: 0;
	color: var(--color-link);
}

@media (min-width: 900px) {
	.home-trust-chips__list {
		justify-content: center;
	}
}

/* --- shared section spacing + left-aligned header with "View all" --- */
.home-section {
	padding-block: var(--space-12);
}

@media (min-width: 900px) {
	.home-section {
		padding-block: var(--space-16);
	}
}

.home-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.home-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4375rem);
}

.home-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	padding-bottom: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--font-size-small);
	text-decoration: none;
	white-space: nowrap;
}

/* --- category cards: navy, line icon, name, one factual line --- */
.category-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.category-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.category-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.category-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-6);
	border-radius: var(--radius-md);
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.category-card__link:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-elevated);
	}
}

.category-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--space-2);
	border: 1px solid rgba(22, 184, 212, 0.4);
	border-radius: var(--radius-md);
	color: var(--color-accent);
}

.category-card__name {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 700;
	line-height: 1.2;
}

.category-card__line {
	flex-grow: 1;
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
}

.category-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	color: var(--color-accent);
	font-size: var(--font-size-small);
	font-weight: 600;
}

/* --- Freshwater / Saltwater: two large panels (stacked on mobile) --- */
.home-section--water-type {
	padding-top: 0;
}

.water-panels {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 800px) {
	.water-panels {
		grid-template-columns: 1fr 1fr;
	}
}

.water-panel {
	display: flex;
	flex-direction: column;
	padding: var(--space-8);
	border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
	.water-panel {
		padding: var(--space-12);
	}
}

.water-panel--freshwater {
	background-color: var(--color-surface);
	color: var(--color-text);
}

.water-panel--saltwater {
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
}

.water-panel__name {
	margin: 0 0 var(--space-2);
	color: inherit;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4375rem);
}

.water-panel__caption {
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
}

.water-panel--saltwater .water-panel__caption {
	color: var(--color-text-muted-on-dark);
}

.water-panel__links {
	flex-grow: 1;
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.water-panel__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-bottom: 1px solid rgba(11, 31, 51, 0.12);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.water-panel--saltwater .water-panel__links a {
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.water-panel__links a:hover {
	color: var(--color-link);
}

.water-panel--saltwater .water-panel__links a:hover {
	color: var(--color-accent);
}

.water-panel__all {
	align-self: flex-start;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.water-panel--saltwater .water-panel__all {
	background-color: var(--color-accent);
	color: var(--color-navy);
}

.water-panel a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

.water-panel--saltwater a:focus-visible {
	outline-color: var(--color-accent);
}

/* --- ice fishing: one wide band --- */
.home-section--ice {
	padding-top: 0;
}

.ice-band {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-8);
	border: 1px solid #d5dde4;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #eef7fa 0%, var(--color-surface) 100%);
	color: var(--color-text);
	text-decoration: none;
}

.ice-band:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

.ice-band__icon {
	color: var(--color-link);
}

.ice-band__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ice-band__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: 700;
}

.ice-band__line {
	max-width: 40rem;
	color: var(--color-text-muted);
}

.ice-band__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-link);
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 800px) {
	.ice-band {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: var(--space-8);
		padding: var(--space-8) var(--space-12);
	}
}

/* --- brands: compact grid of text-only cards, no logos, no counts --- */
.home-section--brands {
	padding-top: 0;
}

.brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.brand-grid__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid #d5dde4;
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: 700;
	text-decoration: none;
}

.brand-grid__link:hover {
	border-color: var(--color-link);
	color: var(--color-link);
}

.brand-grid__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
}

/* --- how ordering works: light surface, 3-step timeline --- */
.home-section--how-it-works {
	background-color: var(--color-surface);
}

.home-timeline {
	position: relative;
	display: grid;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-timeline__step {
	position: relative;
	padding-left: calc(3rem + var(--space-4));
}

/* Vertical connector on mobile: runs from each icon down to the next. */
.home-timeline__step:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 3rem;
	bottom: calc(-1 * var(--space-8));
	left: 1.5rem;
	border-left: 2px solid #c9d3dc;
}

.home-timeline__icon {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--color-link);
	border-radius: 50%;
	background-color: #fff;
	color: var(--color-link);
}

.home-timeline__heading {
	margin: var(--space-2) 0 var(--space-2);
	font-size: var(--font-size-h4);
}

.home-timeline__detail {
	margin: 0;
	color: var(--color-text-muted);
}

.home-timeline__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: var(--space-8) 0 0;
	font-size: var(--font-size-small);
}

.home-timeline__links a {
	color: var(--color-link);
	font-weight: 600;
}

@media (min-width: 800px) {
	.home-timeline {
		grid-template-columns: repeat(3, 1fr);
	}

	.home-timeline__step {
		padding-left: 0;
		padding-top: calc(3.5rem + var(--space-4));
		padding-right: var(--space-6);
	}

	/* Horizontal connector: from each icon across to the next one. */
	.home-timeline__step:not(:last-child)::before {
		top: 1.75rem;
		bottom: auto;
		left: 3.5rem;
		right: 0;
		border-left: 0;
		border-top: 2px solid #c9d3dc;
	}

	.home-timeline__icon {
		width: 3.5rem;
		height: 3.5rem;
	}

	.home-timeline__links {
		justify-content: center;
	}
}

/* --- FAQ: full-width accordion + navy "Talk to us" card --- */
.home-faq__accordion {
	max-width: none;
	border-top: 1px solid var(--color-surface);
}

.talk-card {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-12);
	padding: var(--space-8);
	border-radius: var(--radius-lg);
	background-color: var(--color-navy);
	color: var(--color-text-on-navy);
}

.talk-card__title {
	margin: 0 0 var(--space-2);
	color: #fff;
	font-size: var(--font-size-h3);
}

.talk-card__text {
	margin: 0;
	color: var(--color-text-muted-on-dark);
}

.talk-card__facts {
	display: grid;
	gap: var(--space-4);
	margin: 0;
}

.talk-card__facts dt {
	color: var(--color-text-muted-on-dark);
	font-size: var(--font-size-small);
}

.talk-card__facts dd {
	margin: 0;
	font-weight: 600;
}

.talk-card__facts a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 3px;
}

.talk-card__facts a:hover {
	color: var(--color-accent);
}

.talk-card__facts a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.talk-card {
		grid-template-columns: 1fr 2fr;
		align-items: center;
		padding: var(--space-12);
	}

	.talk-card__facts {
		grid-template-columns: repeat(3, auto);
		justify-content: end;
		gap: var(--space-8);
	}
}

/* --- product tiles: apple.com-style showcases for the 4 featured products --- */
.home-product-tile {
	padding-block: var(--space-24);
	background-color: var(--color-background);
	border-top: 1px solid var(--color-surface);
	text-align: center;
}

.home-product-tile__content {
	max-width: 40rem;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.home-product-tile__name {
	font-size: var(--font-size-display);
	line-height: 1.05;
}

.home-product-tile__subtitle {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-h4);
	font-weight: 600;
}

.home-product-tile__tagline {
	max-width: 36ch;
	margin-inline: auto;
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-large);
}

.home-product-tile__price {
	margin-top: var(--space-4);
	font-size: var(--font-size-h3);
	font-weight: 600;
}

.home-product-tile__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	margin-top: var(--space-6);
}

.home-product-tile__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.home-product-tile__media {
	display: flex;
	justify-content: center;
	margin-top: var(--space-12);
}

.home-product-tile__image {
	width: 100%;
	max-width: 36rem;
	height: auto;
	object-fit: contain;
	/* No mix-blend-mode — see .home-hero__image above for why. */
}

.home-product-tile-row {
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--color-surface);
}

.home-product-tile-row .home-product-tile {
	padding-block: var(--space-16);
	border-top: 0;
}

.home-product-tile-row .home-product-tile:first-child {
	border-bottom: 1px solid var(--color-surface);
}

@media (min-width: 700px) {
	.home-product-tile-row .home-product-tile:first-child {
		border-bottom: 0;
		border-right: 1px solid var(--color-surface);
	}
}

.home-product-tile-row .home-product-tile__name {
	font-size: var(--font-size-h1);
}

.home-product-tile-row .home-product-tile__subtitle {
	font-size: var(--font-size-large);
}

.home-product-tile-row .home-product-tile__media {
	margin-top: var(--space-8);
}

.home-product-tile-row .home-product-tile__image {
	max-width: 26rem;
}

@media (min-width: 700px) {
	.home-product-tile-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.home-product-tile__image {
		max-width: 46rem;
	}

	.home-product-tile-row .home-product-tile__image {
		max-width: 32rem;
	}
}

/* ==========================================================================
   Contact page (page-contact.php) — details (exactly as entered in the
   page editor) stacked above the form on mobile, side by side on desktop,
   same two-column pattern as the homepage FAQ above. Inputs/textarea reuse
   the same look as checkout (.woocommerce form baseline); the submit
   button reuses .button-primary (same black pill as "Add to Cart").
   ========================================================================== */
.page-contact .page-content {
	max-width: none;
}

.contact-page {
	display: grid;
	gap: var(--space-12);
}

.contact-page__details {
	line-height: 1.8;
}

@media (min-width: 900px) {
	.contact-page {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: var(--space-16);
	}
}

.contact-form__field {
	margin-bottom: var(--space-4);
}

.contact-form__field label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--font-size-small);
}

.contact-form__field input[type='text'],
.contact-form__field input[type='email'],
.contact-form__field textarea {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 1px;
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__field--invalid input,
.contact-form__field--invalid textarea {
	border-color: #8a4328;
}

.contact-form__error {
	margin-top: var(--space-1);
	color: #8a4328;
	font-size: var(--font-size-small);
}

/* Off-screen, not display:none — real browsers never fill it, but it
   stays out of the tab order and hidden from screen readers either way. */
.contact-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.contact-form__reply-note {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* ==========================================================================
   Cart & Checkout (WooCommerce Cart/Checkout blocks)
   Both pages render through page.php like any other WordPress page, so
   their block markup lands inside .page-content — but that column is tuned
   for reading text (45rem) and is too narrow for a two-column checkout or a
   cart with an order-summary sidebar. WooCommerce adds its own body classes
   to every cart/checkout/order-received page, so those (not :has()) lift
   the cap, with no PHP template changes.
   Class names below are WooCommerce Blocks' own documented, stable markup
   (confirmed against the actual rendered DOM on this install, WooCommerce
   11.2) — not guessed at.
   ========================================================================== */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
	max-width: none;
}

.wc-block-cart,
.wc-block-checkout {
	font-family: var(--font-body);
}

/* Guards against a known flex/grid gotcha: a text-bearing flex/grid child
   defaults to min-width: auto, so one long unbreakable line (a product
   description, a notice, the terms paragraph) can force its row wider than
   the viewport instead of wrapping. */
.wc-block-components-totals-item,
.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description,
.wc-block-components-notice-banner__content,
.wc-block-checkout__terms,
.wc-block-components-product-metadata__description,
.wc-block-components-product-name {
	min-width: 0;
	overflow-wrap: break-word;
}

/* --- shared: the main/sidebar two-column layout used by both blocks --- */
.wc-block-components-sidebar-layout {
	gap: var(--space-12);
}

.wc-block-components-sidebar {
	padding-top: 0;
}

@media (min-width: 900px) {
	.wc-block-components-sidebar.is-sticky {
		top: var(--space-24);
	}
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__totals-title {
	font-family: var(--font-heading);
}

/* Order-summary / cart-totals card (shared shape, cart + checkout): ONE
   surface-gray card with rounded corners (clipped via overflow: hidden),
   hairline dividers between rows, consistent padding — not a stack of
   individually-boxed sub-blocks. WooCommerce renders each row type
   (product items, "Add coupons", subtotal, shipping, tax, the grand
   total) as its own block with its own wrapper div, so the card chrome
   lives on the shared parent and each row just contributes a divider +
   padding; without this, every one of those wrapper divs would get its
   own background/radius/padding and nest visibly inside each other. */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wc-block-cart__totals-title {
	padding: var(--space-6) var(--space-6) var(--space-2);
}

.wc-block-components-checkout-order-summary__title {
	padding: var(--space-6);
	border-bottom: 1px solid rgba(29, 29, 31, 0.08);
	cursor: pointer;
}

.wc-block-components-totals-wrapper {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.wc-block-cart__totals-title + .wc-block-components-totals-wrapper {
	border-top: 0;
}

.wc-block-components-totals-wrapper:empty {
	display: none;
}

/* The product-items block is a row *group*, not a row itself — its own
   padding comes off so each product underneath can be its own divided
   row instead of all of them sharing one undivided padded block. */
.wp-block-woocommerce-cart-order-summary-cart-items-block,
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding: 0;
	border-top: 0;
}

.wc-block-components-order-summary-item {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
}

.wc-block-components-order-summary-item:first-child {
	border-top: 0;
}

.wc-block-components-totals-item {
	padding: 0;
	font-size: var(--font-size-small);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item-tax-value {
	color: var(--color-text-muted);
}

.wc-block-components-totals-footer-item {
	font-size: var(--font-size-large);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value {
	color: var(--color-text);
}

/* Pill buttons everywhere WooCommerce Blocks render one of its own */
.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--radius-pill) !important;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.wc-block-components-button:not(.is-link).contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--color-navy) !important;
	border-color: var(--color-navy) !important;
	color: #fff !important;
}

.wc-block-components-button:not(.is-link).contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #081a2b !important;
	border-color: #081a2b !important;
}

/* --- Cart --- */
.wc-block-cart-items {
	border: 0;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var(--color-surface);
}

.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	font-weight: 400;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-surface);
	padding-block: var(--space-6);
}

/* Cart and checkout thumbnails: the same uncropped square frame as the
   product cards — whole image, centered on white. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background-color: var(--color-background);
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-md);
}

/* !important here and below: these are <a> tags rendered inside
   .entry-content, so without it Woo Blocks' own links would lose to the
   higher-specificity ".entry-content a { text-decoration: underline }"
   baseline rule (one class + one tag beats one class alone). */
.wc-block-components-product-name {
	color: var(--color-text) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none !important;
}

.wc-block-components-product-name:hover {
	text-decoration: underline !important;
}

.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* Quantity stepper: thin pill, muted +/- , matches the site's button language */
.wc-block-components-quantity-selector {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	color: var(--color-text-muted);
}

.wc-block-components-quantity-selector__button:hover {
	background-color: var(--color-surface);
	color: var(--color-text);
}

.wc-block-components-quantity-selector__input {
	font-family: var(--font-body);
	font-weight: 600;
}

.wc-block-cart-item__remove-link {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	text-decoration: underline;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--color-text);
}

.wc-block-cart__submit-container {
	margin-top: var(--space-4);
}

.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover {
	width: 100%;
	padding-block: var(--space-3) !important;
	text-decoration: none !important;
}

/* Policy links under "Proceed to Checkout" (added by
   setup/cart-checkout-content.php) */
.donemar-cart-policy-links {
	margin-top: var(--space-4) !important;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.donemar-cart-policy-links a {
	color: var(--color-text-muted);
}

.donemar-cart-policy-links a:hover {
	color: var(--color-text);
}

/* Empty cart */
.wc-block-cart__empty-cart__title {
	margin-top: var(--space-8);
}

.donemar-empty-cart-cta {
	margin-top: var(--space-6) !important;
}

/* --- Checkout --- */
.wc-block-checkout__main {
	padding-top: 0;
}

.wc-block-components-checkout-step {
	border-top: 1px solid var(--color-surface);
	padding-block: var(--space-8);
}

.wc-block-checkout__main > .wc-block-components-checkout-step:first-child {
	border-top: 0;
	padding-top: 0;
}

.wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: 600;
}

.wc-block-components-checkout-step__description {
	color: var(--color-text-muted);
}

/* Form fields: trade Woo's default floating-label boxes for the site's own
   plain bordered-input look (see the baseline .woocommerce form input rules
   above) so checkout fields match every other form on the site. */
.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-blocks-components-select__select,
.wc-block-components-country-input .components-combobox-control__input {
	border: 1px solid var(--color-surface);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	font-family: var(--font-body);
}

.wc-block-components-text-input label {
	color: var(--color-text-muted);
}

.wc-block-components-checkbox__mark {
	border-radius: var(--radius-sm);
}

.wc-block-components-checkbox__input:checked ~ .wc-block-components-checkbox__mark {
	background-color: var(--color-text);
}

.wc-block-checkout__terms {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.wc-block-checkout__actions {
	margin-top: var(--space-6);
}

.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding-block: var(--space-3) !important;
}

/* Shipping/delivery note + policy links (added by
   setup/cart-checkout-content.php). The note sits inside the order-summary
   card, so it's a row like any other (padding + divider come from the
   shared ".wc-block-components-totals-wrapper"-style rule below — this
   block only needs the className added there and its own text color). */
.donemar-checkout-shipping-note {
	margin-top: 0 !important;
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid rgba(29, 29, 31, 0.08);
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.donemar-checkout-policy-links {
	margin-top: var(--space-6) !important;
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.donemar-checkout-policy-links a {
	color: var(--color-text-muted);
}

.donemar-checkout-policy-links a:hover {
	color: var(--color-text);
}

/* Checkout order-summary line items: thumbnail frame is set with the
   cart's, above. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--font-size-small);
}

/* ==========================================================================
   Order received (thank-you) page.
   This page is NOT block-based, even though Cart/Checkout are: WooCommerce
   only serves its block Order Confirmation template to block themes, so a
   classic theme like this one gets the classic templates here instead
   (checkout/thankyou.php, checkout/order-received.php,
   order/order-details.php, order/order-details-customer.php). Confirmed
   against the real rendered HTML from an actual test order, not guessed.
   ========================================================================== */
.woocommerce-order {
	max-width: 48rem;
	margin-inline: auto;
}

.woocommerce-thankyou-order-received {
	font-size: var(--font-size-large);
}

/* "Order number / Date / Email / Total / Payment method": a clean
   2-column card instead of the default bullet list. */
.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4) var(--space-8);
	list-style: none;
	margin: var(--space-6) 0 var(--space-12);
	padding: var(--space-6);
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.woocommerce-order-overview strong {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--color-text);
}

/* Payment method's value shouldn't stand out more than the plain Subtotal/
   Shipping rows in the order-details table below it — only the grand
   Total there is meant to look that way. */
.woocommerce-order-overview__payment-method strong {
	font-size: var(--font-size-small);
	font-weight: 400;
}

.woocommerce-order-details__title {
	margin-bottom: var(--space-4);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: var(--font-size-large);
	font-weight: 700;
	color: var(--color-text);
}

/* Billing / shipping addresses: plain text, not the browser's default
   italic <address> styling — side by side on desktop (order/order-details-
   customer.php already renders them as a 2-column block, just unstyled). */
.woocommerce-customer-details {
	margin-top: var(--space-12);
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.7;
}

.woocommerce-column__title {
	font-size: var(--font-size-large);
	margin-bottom: var(--space-2);
}

@media (min-width: 700px) {
	.woocommerce-columns--addresses {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

/* Contact block: see donemar_thankyou_contact_block() in functions.php,
   which reuses .product-qa (the same "Questions?" box from the product
   page, already styled above) rather than a new one-off component. */