/*
Theme Name: Aquaform
Theme URI: https://example.com/aquaform
Author: Aquaform Trading
Author URI: https://example.com
Description: Aquaform is a WooCommerce theme for bath, sanitary and plumbing-fittings retailers. It ships the full storefront design: promo bar, mega category nav, editorial hero, category tiles, brand strip, project/bulk blocks, a filtered shop archive, a specification-led product page, cart, checkout, order confirmation, my-account dashboard, brand landing pages, showrooms and about.
Version: 1.3.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aquaform
Tags: e-commerce, two-columns, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
	/* Ink */
	--aq-ink: #16233A;
	--aq-ink-2: #2E3C55;
	--aq-ink-3: #3A4761;
	--aq-body: #4A5872;
	--aq-muted: #57647C;
	--aq-muted-2: #5C6880;

	/* Warm neutrals. The palette moved off cool blue-grey onto sand, so the
	   quiet text and placeholder tones are warm rather than blue. */
	--aq-muted-3: #8A8071;
	--aq-warm: #6B6255;

	/* Accent is now used sparingly — links and focus only. Primary actions
	   are ink; the gold carries emphasis. */
	--aq-accent: #2A548F;
	--aq-accent-dark: #24487F;
	--aq-gold: #89631F;
	--aq-gold-mid: #C08A3E;
	--aq-gold-light: #D8AE6C;
	--aq-green: #1F7A5C;

	--aq-line: #E8E2D9;
	--aq-line-2: #D8D0C4;
	--aq-line-3: #C9BFB0;
	--aq-surface: #F7F3EC;
	--aq-tint: #E4DED4;
	--aq-slot: #D8D0C4;
	--aq-slot-dark: #B9B0A2;
	--aq-page: #EDE7DF;

	/* Type colours for the dark full-bleed bands (hero, statement, feature tiles) */
	--aq-on-dark: #CBD3DF;
	--aq-on-dark-2: #93A0B4;
	--aq-footer-text: #A9B4C7;

	--aq-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--aq-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

	/* Form fields keep the soft 6px. Buttons and badges are square-ish now;
	   panels went slightly rounder. */
	--aq-radius: 6px;
	--aq-radius-btn: 2px;
	--aq-radius-lg: 12px;
	--aq-gutter: 40px;
	--aq-max: 1440px;
	--aq-shadow: 0 24px 60px rgba(22, 35, 58, .10);
	--aq-tabbar-h: 64px;
}

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

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

body {
	margin: 0;
	background: #fff;
	color: var(--aq-ink);
	font-family: var(--aq-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--aq-accent); text-decoration: none; }
a:hover, a:focus { color: var(--aq-accent-dark); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.aq-serif, .aq-display { font-family: var(--aq-serif); font-weight: 700; letter-spacing: -.015em; }

hr { border: 0; border-top: 1px solid var(--aq-line); margin: 32px 0; }

:focus-visible { outline: 2px solid var(--aq-accent); outline-offset: 2px; }

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.screen-reader-text:focus {
	background: #fff; clip-path: none; color: var(--aq-ink); display: block; height: auto;
	left: 8px; padding: 14px 22px; top: 8px; width: auto; z-index: 100000;
	border-radius: var(--aq-radius); box-shadow: var(--aq-shadow); font-weight: 800;
}

.aq-skip-link { position: absolute; left: -9999px; }

/* Keeps a phone number or price from breaking across lines inside a button. */
.aq-nowrap { white-space: nowrap; }

/* =========================================================================
   3. Layout helpers
   ========================================================================= */
.aq-container {
	width: 100%;
	max-width: var(--aq-max);
	margin: 0 auto;
	padding-inline: var(--aq-gutter);
}
.aq-container--narrow { max-width: 880px; }

.aq-section { padding-block: 56px; }
.aq-section--tight { padding-block: 36px; }
.aq-section--flush-top { padding-top: 0; }
/* A page whose first block is a full-bleed hero needs no top padding at all. */
.aq-section--flush { padding-block: 0; }
/* The shop intro is a lone band above the archive heading; it supplies its own
   gap because the :has() padding rules zero both ends for a single band. */
.aq-shop-intro { margin-bottom: 48px; }

.aq-section-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; margin-bottom: 30px; flex-wrap: wrap;
}
/* Section titles are set in the serif now, matching the display type in the
   hero and the statement band. */
.aq-section-head h2, .aq-section-head h3 {
	margin: 0; font-family: var(--aq-serif); font-size: 28px; font-weight: 700;
	letter-spacing: -.015em; line-height: 1.2;
}
/* "All categories →" is no longer a blue link — it reads as a small uppercase
   label underscored in gold. */
.aq-section-head .aq-link {
	font-size: 11.5px; font-weight: 800; letter-spacing: .12em; white-space: nowrap;
	text-transform: uppercase; color: var(--aq-ink);
	border-bottom: 1px solid var(--aq-gold-mid); padding-bottom: 3px;
}
.aq-section-head .aq-link:hover { color: var(--aq-ink); border-bottom-color: var(--aq-ink); }

.aq-eyebrow {
	display: block;
	font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--aq-gold);
	text-transform: uppercase; margin-bottom: 9px;
}
/* Gold hairline + eyebrow, the pairing used on dark bands. */
.aq-rule-eyebrow { display: flex; align-items: center; gap: 13px; }
.aq-rule-eyebrow::before { content: ""; width: 40px; height: 1.5px; background: var(--aq-gold-mid); flex: 0 0 auto; }
.aq-rule-eyebrow > span {
	font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--aq-gold-light);
	text-transform: uppercase;
}
.aq-kicker {
	font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--aq-gold);
	text-transform: uppercase;
}
.aq-label {
	font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--aq-muted-2);
	text-transform: uppercase;
}
.aq-lede { font-size: 17px; line-height: 1.65; color: var(--aq-body); }

.aq-grid { display: grid; gap: 20px; }
.aq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aq-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

/* image slot placeholder, used when no image is set */
.aq-slot {
	background: var(--aq-slot); display: flex; align-items: center; justify-content: center;
	color: var(--aq-muted-2); font-size: 10px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; text-align: center; padding: 12px;
}
.aq-slot--light { background: var(--aq-tint); color: var(--aq-muted-3); }

/* =========================================================================
   4. Buttons, badges, pills
   ========================================================================= */
/* Buttons are square-edged and set in small caps. Blue is no longer a fill —
   ink carries the primary action and gold carries the marketing CTA. */
/* Heights are min-heights, not fixed heights.
   The labels are uppercase with letter-spacing now, so a long one — "Call to
   order — 09612-345678" on a narrow buy box — wraps to two or three lines. With
   a fixed height and no vertical padding that text simply spilled outside the
   button's border. min-height keeps single-line buttons exactly the same size
   and lets the rest grow. */
.aq-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 52px; padding: 10px 26px; border-radius: var(--aq-radius-btn);
	font-family: var(--aq-sans); font-size: 13.5px; font-weight: 800; line-height: 1.25;
	letter-spacing: .07em; text-transform: uppercase;
	border: 1px solid transparent; cursor: pointer; text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.aq-btn--dark { background: var(--aq-ink); color: #fff; }
.aq-btn--dark:hover { background: #0f1a2c; color: #fff; }
/* `--accent` kept its name so existing templates need no edit, but the fill is
   ink now — the design retired the blue button entirely. */
.aq-btn--accent { background: var(--aq-ink); color: #fff; }
.aq-btn--accent:hover { background: #0f1a2c; color: #fff; }
.aq-btn--gold { background: var(--aq-gold-mid); color: var(--aq-ink); }
.aq-btn--gold:hover { background: #b07d33; color: var(--aq-ink); }
.aq-btn--outline { border-color: var(--aq-ink); color: var(--aq-ink); background: transparent; }
.aq-btn--outline:hover { background: var(--aq-ink); color: #fff; }
/* On the dark hero and statement bands. */
.aq-btn--ghost-light { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; font-weight: 700; }
.aq-btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.aq-btn--quiet { border-color: var(--aq-line); color: var(--aq-ink); background: #fff; font-weight: 600; }
.aq-btn--quiet:hover { border-color: var(--aq-line-3); color: var(--aq-ink); }
.aq-btn--wa { border-color: var(--aq-green); color: var(--aq-green); background: transparent; }
.aq-btn--wa:hover { background: var(--aq-green); color: #fff; }
.aq-btn--wa-solid { background: var(--aq-green); color: #fff; }
.aq-btn--wa-solid:hover { background: #17614a; color: #fff; }
.aq-btn--light { background: #fff; color: var(--aq-ink); font-weight: 800; }
.aq-btn--sm { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.aq-btn--xs { min-height: 40px; padding: 7px 14px; font-size: 13.5px; }
.aq-btn--block { display: flex; width: 100%; }

/* Badges flipped: ink plate, gold type, square corners. */
.aq-badge {
	display: inline-block; background: var(--aq-ink); color: var(--aq-gold-light); font-size: 10px;
	font-weight: 800; letter-spacing: .1em; padding: 6px 9px; border-radius: 0;
	text-transform: uppercase;
}
.aq-badge--ink { background: var(--aq-ink); color: var(--aq-gold-light); }
.aq-badge--green { background: var(--aq-green); }

.aq-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
	border: 1px solid var(--aq-line); border-radius: 20px;
	font-size: 13px; font-weight: 700; color: var(--aq-body); background: #fff;
}
.aq-pill:hover { border-color: var(--aq-line-3); color: var(--aq-ink); }
.aq-pill.is-active, .aq-pill--active { background: var(--aq-ink); border-color: var(--aq-ink); color: #fff; }

.aq-stock { font-size: 12px; font-weight: 600; color: var(--aq-green); }
.aq-stock--out { color: var(--aq-muted-2); }

/* =========================================================================
   5. Forms
   ========================================================================= */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%; font-family: var(--aq-sans); font-size: 14px; color: var(--aq-ink);
	background: #fff; border: 1.5px solid var(--aq-line); border-radius: var(--aq-radius);
	padding: 0 14px; height: 48px; line-height: 46px;
	transition: border-color .15s ease;
}
textarea { height: auto; min-height: 120px; line-height: 1.6; padding: 12px 14px; resize: vertical; }
select { line-height: normal; appearance: none; padding-right: 34px;
	background-image: linear-gradient(45deg, transparent 50%, var(--aq-muted) 50%), linear-gradient(135deg, var(--aq-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input::placeholder, textarea::placeholder { color: var(--aq-muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--aq-accent); outline: none; }

label { font-size: 12.5px; font-weight: 700; color: var(--aq-body); display: block; margin-bottom: 7px; }

.aq-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.aq-field label { margin: 0; }

button, .button, input[type="submit"] { font-family: var(--aq-sans); }

/* =========================================================================
   6. Promo bar
   ========================================================================= */
.aq-promo {
	background: var(--aq-ink); color: #fff; font-size: 13px; font-weight: 500;
}
.aq-promo .aq-container {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; min-height: 40px; flex-wrap: wrap;
}
.aq-promo__left, .aq-promo__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.aq-promo__left { gap: 24px; }
.aq-promo a { color: #fff; }
.aq-promo a:hover { color: #fff; opacity: .8; }
.aq-promo__sep { opacity: .45; }
.aq-promo__phone { font-weight: 700; }

/* =========================================================================
   7. Desktop header
   ========================================================================= */
.aq-header { background: #fff; border-bottom: 1px solid var(--aq-line); position: relative; z-index: 60; }
.aq-header__inner {
	display: flex; align-items: center; gap: 32px; padding-block: 22px;
}

.aq-brandmark { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; color: var(--aq-ink); }
.aq-brandmark:hover { color: var(--aq-ink); }
.aq-brandmark__name { font-family: var(--aq-serif); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.aq-brandmark__sub { font-size: 9px; font-weight: 700; letter-spacing: .3em; color: var(--aq-muted); margin-top: 5px; }
.aq-brandmark img { max-height: 46px; width: auto; }

.aq-search { flex: 1; max-width: 520px; }
.aq-search form { display: flex; align-items: center; gap: 10px;
	border: 1.5px solid var(--aq-line); background: var(--aq-surface);
	border-radius: var(--aq-radius); padding: 0 14px; height: 46px; }
.aq-search form:focus-within { border-color: var(--aq-accent); background: #fff; }
.aq-search__icon { color: var(--aq-muted-2); font-size: 15px; line-height: 1; }
.aq-search input[type="search"] {
	border: 0; background: transparent; height: 42px; line-height: 42px; padding: 0; font-size: 14px;
}
.aq-search input[type="search"]:focus { border: 0; outline: none; }
.aq-search button { border: 0; background: transparent; color: var(--aq-accent); font-weight: 700;
	font-size: 13px; cursor: pointer; padding: 0; }

.aq-nav { margin-left: auto; }
.aq-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.aq-nav a { font-size: 14px; font-weight: 600; color: var(--aq-ink); }
.aq-nav a:hover, .aq-nav .current-menu-item > a { color: var(--aq-accent); }

.aq-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.aq-action {
	display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
	border: 1.5px solid var(--aq-line); border-radius: var(--aq-radius);
	font-size: 14px; font-weight: 600; color: var(--aq-ink); background: #fff;
}
.aq-action:hover { border-color: var(--aq-line-3); color: var(--aq-ink); }
.aq-cart-button {
	display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
	background: var(--aq-ink); color: #fff; border-radius: var(--aq-radius);
	font-size: 14px; font-weight: 700;
}
.aq-cart-button:hover { background: #0f1a2c; color: #fff; }
.aq-cart-button__count { background: rgba(255,255,255,.22); border-radius: 20px; padding: 2px 8px; font-size: 12px; }
.aq-cart-button__total { opacity: .8; }
.aq-cart-button__total .woocommerce-Price-amount { color: inherit; font-weight: 700; }

/* category nav */
.aq-catnav { background: #fff; border-bottom: 1px solid var(--aq-line); position: relative; z-index: 55; }
.aq-catnav .aq-container { display: flex; align-items: center; }
.aq-catnav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.aq-catnav > .aq-container > ul { flex: 1; flex-wrap: wrap; }
.aq-catnav li { position: relative; }
.aq-catnav > .aq-container > ul > li > a {
	display: flex; align-items: center; gap: 7px; padding: 15px 20px 15px 0; margin-right: 14px;
	font-size: 14px; font-weight: 600; color: var(--aq-ink-2);
}
.aq-catnav > .aq-container > ul > li.menu-item-has-children > a::after {
	content: "\25BE"; font-size: 9px; color: var(--aq-muted-2);
}
.aq-catnav a:hover { color: var(--aq-accent); }
.aq-catnav__clearance { margin-left: auto; padding: 15px 0; font-size: 14px; font-weight: 700; color: var(--aq-gold); }
.aq-catnav__clearance:hover { color: var(--aq-gold); text-decoration: underline; }

.aq-catnav .sub-menu {
	position: absolute; top: 100%; left: -14px; min-width: 240px; flex-direction: column;
	align-items: stretch; background: #fff; border: 1px solid var(--aq-line);
	border-radius: 0 0 var(--aq-radius-lg) var(--aq-radius-lg); box-shadow: var(--aq-shadow);
	padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 70;
}
.aq-catnav li:hover > .sub-menu,
.aq-catnav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.aq-catnav .sub-menu a { display: block; padding: 9px 20px; font-size: 13.5px; font-weight: 600; color: var(--aq-ink-2); }
.aq-catnav .sub-menu .sub-menu { top: 0; left: 100%; border-radius: var(--aq-radius-lg); }

/* =========================================================================
   8. Mobile header, drawer, tab bar
   ========================================================================= */
.aq-mobile-header { display: none; background: #fff; border-bottom: 1px solid var(--aq-line);
	position: sticky; top: 0; z-index: 80; }
.aq-mobile-header__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.aq-icon-btn {
	border: 0; background: transparent; padding: 0; font-size: 19px; line-height: 1;
	color: var(--aq-ink); cursor: pointer; position: relative;
}
.aq-icon-btn__count {
	position: absolute; top: -6px; right: -8px; background: var(--aq-ink); color: #fff;
	font-size: 10px; font-weight: 800; border-radius: 10px; padding: 1px 5px; line-height: 1.4;
}
.aq-mobile-header .aq-brandmark__name { font-size: 19px; }
.aq-mobile-header .aq-brandmark__sub { font-size: 7px; letter-spacing: .26em; margin-top: 3px; }
.aq-mobile-search { padding: 0 16px 12px; }
.aq-mobile-search form { display: flex; align-items: center; gap: 9px; height: 44px;
	background: var(--aq-surface); border: 1.5px solid var(--aq-line); border-radius: 8px; padding: 0 12px; }
.aq-mobile-search input[type="search"] { border: 0; background: transparent; height: 40px; line-height: 40px; font-size: 13.5px; }
.aq-mobile-chips { display: flex; gap: 8px; padding: 0 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; }
.aq-mobile-chips::-webkit-scrollbar { display: none; }
.aq-mobile-chips a { padding: 8px 13px; background: var(--aq-tint); border-radius: 20px;
	font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--aq-ink); }

.aq-drawer {
	position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none;
}
.aq-drawer.is-open { visibility: visible; pointer-events: auto; }
.aq-drawer__scrim { position: absolute; inset: 0; background: rgba(22,35,58,.45); opacity: 0; transition: opacity .2s ease; }
.aq-drawer.is-open .aq-drawer__scrim { opacity: 1; }
.aq-drawer__panel {
	position: absolute; inset-block: 0; left: 0; width: min(340px, 88vw); background: #fff;
	transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column;
	overflow-y: auto;
}
.aq-drawer.is-open .aq-drawer__panel { transform: none; }
.aq-drawer__head { display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px; border-bottom: 1px solid var(--aq-line); }
.aq-drawer__body { padding: 8px 0 32px; }
.aq-drawer ul { list-style: none; margin: 0; padding: 0; }
.aq-drawer a { display: block; padding: 13px 20px; font-size: 15px; font-weight: 700; color: var(--aq-ink); }
.aq-drawer .sub-menu a { padding-left: 36px; font-size: 14px; font-weight: 600; color: var(--aq-body); }
.aq-drawer__foot { margin-top: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px;
	border-top: 1px solid var(--aq-line); }

.aq-tabbar { display: none; }
.aq-tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-size: 10.5px; font-weight: 700; color: var(--aq-muted-2); padding: 9px 0 14px; }
.aq-tabbar__item.is-active { color: var(--aq-accent); }
.aq-tabbar__icon { font-size: 17px; line-height: 1.2; position: relative; }

/* =========================================================================
   9. Home
   ========================================================================= */
/* Editorial hero.
   The two-column split (copy panel beside a picture) is gone. The photo now
   runs full bleed with a dark diagonal scrim over it, the copy sits bottom
   left on top of the image, and a rail of three figures sits bottom right. */
.aq-hero {
	position: relative; overflow: hidden;
	background: var(--aq-slot-dark);
	min-height: 640px;
	display: flex; align-items: flex-end;
}
.aq-hero__media { position: absolute; inset: 0; }
.aq-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.aq-hero__media .aq-slot { width: 100%; height: 100%; background: var(--aq-slot-dark); color: rgba(255,255,255,.45); }
/* Weighted to the left so the headline stays legible over a busy photo while
   the right edge keeps some of the image visible. */
.aq-hero__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg,
		rgba(15,25,44,.94) 0%,
		rgba(15,25,44,.80) 40%,
		rgba(15,25,44,.34) 66%,
		rgba(15,25,44,.62) 100%);
}
.aq-hero__inner {
	position: relative; width: 100%; max-width: var(--aq-max); margin: 0 auto;
	padding: 0 var(--aq-gutter) 88px;
	display: flex; flex-direction: column; gap: 18px;
}
.aq-hero__copy h1, .aq-hero__copy h2,
.aq-hero h1, .aq-hero h2 {
	margin: 0; font-family: var(--aq-serif); color: #fff; font-size: 62px;
	line-height: 1.06; font-weight: 700; letter-spacing: -.025em; max-width: 13ch;
}
/* Longer headline: smaller type on a wider measure, per the design's
   heroTitleWide. Used by the Hero block's "long headline" toggle. */
.aq-hero h1.aq-hero__title--wide,
.aq-hero h2.aq-hero__title--wide { font-size: 46px; line-height: 1.14; letter-spacing: -.02em; max-width: 20ch; }
.aq-hero p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--aq-on-dark); max-width: 440px; }
.aq-hero__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.aq-hero__cta .aq-btn { min-height: 54px; padding: 10px 28px; font-size: 14px; letter-spacing: .06em; }
.aq-hero__trust {
	display: flex; gap: 26px; margin-top: 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--aq-on-dark-2); flex-wrap: wrap;
}

/* Figures rail: a right-aligned column on desktop, a three-up row under the
   copy on mobile. */
.aq-hero__stats {
	position: absolute; right: var(--aq-gutter); bottom: 88px;
	display: flex; flex-direction: column; gap: 26px; text-align: right;
}
.aq-hero__stat { padding-top: 22px; border-top: 1px solid rgba(216,174,108,.45); min-width: 180px; }
.aq-hero__stat-n { font-family: var(--aq-serif); font-size: 34px; font-weight: 700; color: #fff; line-height: 1; }
.aq-hero__stat-l {
	font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--aq-gold-light);
	margin-top: 9px; text-transform: uppercase;
}

/* Category grid.
   Four columns where the first category runs as a 2x2 image tile with the
   label set over the photo, and the rest are quiet borderless tiles. */
.aq-cat-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(0, auto); gap: 22px;
}

.aq-cat-card {
	display: flex; flex-direction: column; color: var(--aq-ink);
	transition: opacity .15s ease;
}
.aq-cat-card:hover { color: var(--aq-ink); opacity: .88; }
.aq-cat-card__media { position: relative; height: 186px; overflow: hidden; background: var(--aq-tint); }
.aq-cat-card__media img, .aq-cat-card__media .aq-slot { width: 100%; height: 100%; object-fit: cover; }
.aq-cat-card__body { padding: 14px 2px 0; }
.aq-cat-card__name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.aq-cat-card__count {
	font-size: 11.5px; color: var(--aq-warm); margin-top: 4px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
}

/* Feature tile */
.aq-cat-card--feature {
	position: relative; overflow: hidden; background: var(--aq-slot-dark);
	grid-column: span 2; grid-row: span 2; min-height: 420px;
	display: flex; color: #fff;
}
.aq-cat-card--feature:hover { color: #fff; opacity: 1; }
.aq-cat-card--feature .aq-cat-card__media { position: absolute; inset: 0; height: auto; background: none; }
.aq-cat-card--feature .aq-cat-card__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top,
		rgba(15,25,44,.92) 0%,
		rgba(15,25,44,.35) 55%,
		rgba(15,25,44,.10) 100%);
}
.aq-cat-card--feature .aq-cat-card__body {
	position: relative; padding: 28px; margin-top: auto;
	display: flex; flex-direction: column; gap: 6px;
}
.aq-cat-card--feature .aq-cat-card__count {
	order: -1; margin: 0; font-size: 10.5px; font-weight: 800;
	letter-spacing: .18em; color: var(--aq-gold-light);
}
.aq-cat-card--feature .aq-cat-card__name {
	font-family: var(--aq-serif); font-size: 26px; font-weight: 700; line-height: 1.2; color: #fff;
}
.aq-cat-card--feature .aq-cat-card__desc {
	font-size: 13.5px; color: var(--aq-on-dark); line-height: 1.6; max-width: 320px;
}

/* Brand line: quiet lettering on the sand band. The white boxes with borders
   are gone — the names now read as a typographic row. */
.aq-brandstrip { padding-block: 34px; background: var(--aq-surface);
	border-top: 1px solid var(--aq-line); border-bottom: 1px solid var(--aq-line); }
.aq-brandstrip .aq-container { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.aq-brandstrip__label { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: var(--aq-gold);
	white-space: nowrap; text-transform: uppercase; }
.aq-brandstrip__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; flex: 1; }
.aq-brandstrip__item { height: 34px; background: none; border: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--aq-warm); padding: 0 4px;
	text-align: center; overflow: hidden; text-transform: uppercase; }
.aq-brandstrip__item:hover { color: var(--aq-ink); }
.aq-brandstrip__item img { max-height: 30px; width: auto; object-fit: contain; }

/* Statement band: a full-bleed dark quote between the product runs. */
.aq-statement {
	position: relative; overflow: hidden; background: var(--aq-slot-dark);
	min-height: 380px; display: flex; align-items: center;
}
.aq-statement__media { position: absolute; inset: 0; }
.aq-statement__media img { width: 100%; height: 100%; object-fit: cover; }
.aq-statement__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg,
		rgba(15,25,44,.93) 0%,
		rgba(15,25,44,.72) 55%,
		rgba(15,25,44,.35) 100%);
}
.aq-statement__inner {
	position: relative; width: 100%; max-width: var(--aq-max); margin: 0 auto;
	padding: 72px var(--aq-gutter);
	display: flex; flex-direction: column; gap: 20px;
}
.aq-statement__rule { width: 40px; height: 1.5px; background: var(--aq-gold-mid); }
.aq-statement__quote {
	margin: 0; font-family: var(--aq-serif); color: #fff; font-size: 40px;
	line-height: 1.25; font-weight: 700; letter-spacing: -.015em; max-width: 760px;
}
.aq-statement__by {
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
	color: var(--aq-on-dark-2); text-transform: uppercase;
}

.aq-promo-card { border: 1px solid var(--aq-line); border-radius: var(--aq-radius-lg);
	box-shadow: 0 1px 2px rgba(22, 35, 58, .04);
	display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; background: #fff; }
.aq-promo-card__media { background: var(--aq-slot); min-height: 220px; position: relative; }
.aq-promo-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aq-promo-card__body { padding: 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.aq-promo-card__body h3 { margin: 0; font-family: var(--aq-serif); font-size: 25px; line-height: 1.2; font-weight: 700; }
.aq-promo-card__body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--aq-muted); }

.aq-service { padding: 24px; background: var(--aq-surface); border-radius: var(--aq-radius-lg);
	display: flex; flex-direction: column; gap: 8px; }
.aq-service__icon { font-size: 22px; line-height: 1; }
.aq-service__title { font-size: 15px; font-weight: 800; }
.aq-service__body { font-size: 13px; line-height: 1.6; color: var(--aq-muted); }
.aq-service--row { flex-direction: row; gap: 14px; background: #fff; border: 1px solid var(--aq-line); }
.aq-service--row .aq-service__icon { font-size: 19px; }

/* =========================================================================
   10. Footer
   ========================================================================= */
.aq-footer { background: var(--aq-ink); color: #fff; padding-block: 56px 32px; margin-top: 0; }
.aq-footer a { color: var(--aq-footer-text); }
.aq-footer a:hover { color: #fff; }
.aq-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 36px; }
.aq-footer__about p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--aq-footer-text); }
.aq-footer__logo { font-family: var(--aq-serif); font-size: 22px; font-weight: 700; color: #fff; display: block; }
.aq-footer__social { display: flex; gap: 8px; margin-top: 4px; }
.aq-footer__social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--aq-radius); display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; color: #fff; }
.aq-footer__social a:hover { background: rgba(255,255,255,.1); }
.aq-footer__col-title { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #fff;
	text-transform: uppercase; margin-bottom: 12px; }
.aq-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aq-footer ul a { font-size: 13px; font-weight: 500; }
.aq-footer__newsletter form { display: flex; gap: 8px; }
.aq-footer__newsletter input[type="email"] {
	flex: 1; height: 44px; line-height: 42px; background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px;
}
.aq-footer__newsletter input::placeholder { color: var(--aq-footer-text); }
.aq-footer__newsletter button { height: 44px; padding: 0 16px; background: var(--aq-gold-mid);
	border: 0; color: var(--aq-ink); border-radius: var(--aq-radius-btn); font-size: 12.5px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.aq-footer__newsletter button:hover { background: #b07d33; }
.aq-footer__pay { display: flex; gap: 8px; flex-wrap: wrap; }
.aq-footer__pay span { height: 30px; padding: 0 10px; background: #fff; color: var(--aq-ink);
	border-radius: 4px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; }
.aq-footer__bar { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	font-size: 12px; color: var(--aq-muted-2); font-weight: 500; }
.aq-footer__bar ul { flex-direction: row; gap: 22px; }
.aq-footer__bar a { font-size: 12px; }

.aq-footer--slim { padding-block: 32px; }
.aq-footer--slim .aq-container { display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--aq-footer-text); }
.aq-footer--slim ul { flex-direction: row; gap: 24px; flex-wrap: wrap; }

/* =========================================================================
   11. Page chrome: breadcrumb, page header, pagination
   ========================================================================= */
.aq-breadcrumb { border-bottom: 1px solid var(--aq-line); }
/* Small caps, warm grey — the breadcrumb reads as a label strip now. */
.aq-breadcrumb .aq-container { padding-block: 16px; font-size: 11px; color: var(--aq-warm);
	font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aq-breadcrumb a { color: var(--aq-warm); }
.aq-breadcrumb a:hover { color: var(--aq-ink); }
.aq-breadcrumb .aq-breadcrumb__current, .aq-breadcrumb > .aq-container > *:last-child { color: var(--aq-ink); }
.aq-breadcrumb--plain { border-bottom: 0; }

.aq-page-head { padding-block: 32px 12px; display: flex; align-items: flex-end;
	justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aq-page-head__title { max-width: 640px; }
.aq-page-head h1 { margin: 0 0 10px; font-family: var(--aq-serif); font-size: 36px;
	font-weight: 700; letter-spacing: -.01em; }
.aq-page-head p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--aq-muted); }
.aq-page-head__meta { font-size: 13px; font-weight: 700; color: var(--aq-muted); }

.aq-pagination { display: flex; align-items: center; justify-content: center; gap: 8px;
	padding-top: 14px; font-size: 14px; font-weight: 700; }
.aq-pagination .page-numbers {
	min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--aq-line);
	border-radius: var(--aq-radius); display: inline-flex; align-items: center; justify-content: center;
	color: var(--aq-ink);
}
.aq-pagination .page-numbers.current { background: var(--aq-ink); border-color: var(--aq-ink); color: #fff; }
.aq-pagination .page-numbers.dots { border: 0; color: var(--aq-muted-2); min-width: 0; }
.aq-pagination .page-numbers:hover:not(.current):not(.dots) { border-color: var(--aq-line-3); }

/* =========================================================================
   12. Editorial content (posts, pages)
   ========================================================================= */
.aq-prose { font-size: 16px; line-height: 1.8; color: var(--aq-ink-3); }
.aq-prose h2 { font-size: 28px; margin: 1.6em 0 .5em; }
.aq-prose h3 { font-size: 21px; margin: 1.5em 0 .5em; }
.aq-prose ul, .aq-prose ol { padding-left: 22px; }
.aq-prose li { margin-bottom: 8px; }
.aq-prose blockquote { margin: 28px 0; padding: 20px 24px; background: var(--aq-surface);
	border-left: 3px solid var(--aq-accent); border-radius: 0 var(--aq-radius-lg) var(--aq-radius-lg) 0; }
.aq-prose img { border-radius: var(--aq-radius-lg); }
.aq-prose table { width: 100%; border-collapse: collapse; }
.aq-prose th, .aq-prose td { padding: 12px 14px; border-bottom: 1px solid var(--aq-line); text-align: left; }
.aq-prose code { background: var(--aq-tint); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

.aq-entry { border-bottom: 1px solid var(--aq-line); padding-bottom: 32px; margin-bottom: 32px; }
.aq-entry:last-child { border-bottom: 0; }
.aq-entry__meta { font-size: 12.5px; font-weight: 700; color: var(--aq-muted-2); letter-spacing: .04em; }
.aq-entry__title { font-family: var(--aq-serif); font-size: 26px; font-weight: 700; margin: 8px 0 10px; }
.aq-entry__title a { color: var(--aq-ink); }
.aq-entry__title a:hover { color: var(--aq-accent); }
.aq-entry__thumb { border-radius: var(--aq-radius-lg); overflow: hidden; margin-bottom: 18px; }

.aq-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.aq-sidebar .widget { margin-bottom: 32px; }
/* Family pinned: these are <h2>/<h3>, and WordPress's global-styles sheet
   ships an `h2 { font-family: serif }` preset that wins wherever no family is
   declared. Label-style headings must stay in the sans. */
.aq-sidebar .widget-title, .aq-sidebar h2 { font-family: var(--aq-sans); font-size: 14px;
	font-weight: 800; letter-spacing: .08em;
	text-transform: uppercase; color: var(--aq-muted); margin-bottom: 14px; }
.aq-sidebar ul { list-style: none; margin: 0; padding: 0; }
.aq-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--aq-line); font-size: 14px; font-weight: 600; }
.aq-sidebar a { color: var(--aq-ink-2); }

/* comments */
.aq-comments { margin-top: 48px; }
.aq-comments ol { list-style: none; margin: 0; padding: 0; }
.aq-comments .children { list-style: none; padding-left: 28px; }
.aq-comments .comment-body { padding: 20px 0; border-top: 1px solid var(--aq-line); }
.aq-comments .comment-author { font-weight: 800; font-size: 14px; }
.aq-comments .comment-meta { font-size: 12.5px; color: var(--aq-muted-2); font-weight: 600; margin-bottom: 8px; }
.aq-comments .comment-reply-link { font-size: 13px; font-weight: 700; }

/* 404 / empty */
.aq-empty { padding-block: 96px; text-align: center; max-width: 560px; margin: 0 auto; }
.aq-empty h1 { font-family: var(--aq-serif); font-size: 40px; font-weight: 700; }
.aq-empty p { color: var(--aq-muted); font-size: 16px; }
.aq-empty form { margin: 24px auto 0; max-width: 420px; }

/* =========================================================================
   13. About / showrooms / brand landing
   ========================================================================= */
.aq-about-hero { padding-block: 72px 48px; display: grid; grid-template-columns: 1fr 1fr;
	gap: 56px; align-items: center; }
.aq-about-hero h1 { margin: 14px 0 18px; font-family: var(--aq-serif); font-size: 36px;
	line-height: 1.15; font-weight: 700; letter-spacing: -.015em; }
.aq-about-hero__media { height: 360px; border-radius: var(--aq-radius-lg); overflow: hidden; background: var(--aq-slot); }
.aq-about-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.aq-stat { padding: 28px; background: var(--aq-surface); border-radius: var(--aq-radius-lg); }
.aq-stat__n { font-family: var(--aq-serif); font-size: 34px; font-weight: 700; }
.aq-stat__l { font-size: 13px; font-weight: 700; color: var(--aq-muted); margin-top: 6px; letter-spacing: .04em; }

.aq-cta-band { padding: 44px var(--aq-gutter); background: var(--aq-ink); color: #fff;
	display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.aq-cta-band__copy { flex: 1; min-width: 280px; }
.aq-cta-band__copy > div:first-child { font-family: var(--aq-serif); font-size: 28px; margin-bottom: 8px; }
.aq-cta-band__copy p { margin: 0; font-size: 15px; color: var(--aq-footer-text); line-height: 1.6; }
.aq-cta-band--light { background: var(--aq-surface); color: var(--aq-ink); border-top: 1px solid var(--aq-line); }
.aq-cta-band--light .aq-cta-band__copy > div:first-child { font-family: var(--aq-sans); font-size: 22px; font-weight: 800; }
.aq-cta-band--light p { color: var(--aq-muted); font-size: 14.5px; }

/* --aq-map-h lets the Map block set its own height from the editor. */
.aq-map { height: var(--aq-map-h, 300px); background: var(--aq-slot); overflow: hidden; }
.aq-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Showroom block: borderless, photo over details, name in the serif. */
.aq-showrooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.aq-showroom { border: 0; border-radius: 0; overflow: visible; background: none;
	display: flex; flex-direction: column; gap: 22px; }
.aq-showroom__media { height: 260px; background: var(--aq-tint); overflow: hidden; }
.aq-showroom__media img, .aq-showroom__media .aq-slot { width: 100%; height: 100%; object-fit: cover; }
.aq-showroom__body { padding: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.aq-showroom__city { font-family: var(--aq-serif); font-size: 24px; font-weight: 700; line-height: 1.25; }
.aq-showroom__address { font-size: 13.5px; line-height: 1.6; color: var(--aq-muted); }
.aq-showroom__hours { font-size: 13px; font-weight: 700; color: var(--aq-ink); }
.aq-showroom__phone { font-size: 13.5px; font-weight: 700; }

.aq-enquiry { border: 1px solid var(--aq-line); border-radius: var(--aq-radius-lg); padding: 28px;
	align-self: start; background: #fff; }
.aq-enquiry h2 { font-family: var(--aq-serif); font-size: 22px; font-weight: 700;
	letter-spacing: -.015em; margin: 0 0 6px; }
.aq-enquiry > p { font-size: 13.5px; color: var(--aq-muted); line-height: 1.6; margin-bottom: 16px; }

/* Brand landing hero: same full-bleed editorial treatment as the home hero.
   The headline runs longer here, so it uses the wider, smaller display size. */
.aq-brand-hero {
	position: relative; overflow: hidden;
	background: var(--aq-slot-dark);
	min-height: 560px;
	display: flex; align-items: flex-end;
}
.aq-brand-hero__media { position: absolute; inset: 0; background: var(--aq-slot-dark); overflow: hidden; }
.aq-brand-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.aq-brand-hero__media .aq-slot { width: 100%; height: 100%; background: var(--aq-slot-dark); color: rgba(255,255,255,.45); }
.aq-brand-hero__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg,
		rgba(15,25,44,.94) 0%,
		rgba(15,25,44,.80) 40%,
		rgba(15,25,44,.34) 66%,
		rgba(15,25,44,.62) 100%);
}
.aq-brand-hero__copy {
	position: relative; width: 100%; max-width: var(--aq-max); margin: 0 auto;
	padding: 0 var(--aq-gutter) 76px;
	display: flex; flex-direction: column; gap: 18px;
}
.aq-brand-hero__copy h1 {
	margin: 0; font-family: var(--aq-serif); color: #fff; font-size: 46px; line-height: 1.14;
	font-weight: 700; letter-spacing: -.02em; max-width: 20ch;
}
.aq-brand-hero__copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--aq-on-dark); max-width: 460px; }
/* Wordmark plate, outlined in gold rather than ink now that it sits on the photo. */
.aq-brand-hero__logo {
	display: inline-block; padding: 9px 16px; border: 1px solid var(--aq-gold-mid);
	color: var(--aq-gold-light); border-radius: 0;
	font-size: 17px; font-weight: 800; letter-spacing: .14em; align-self: flex-start;
}
.aq-brand-hero__logo img { max-height: 36px; }
.aq-brand-hero .aq-hero__cta .aq-btn { min-height: 52px; }
.aq-brand-hero__trust {
	display: flex; gap: 26px; margin-top: 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: var(--aq-on-dark-2); flex-wrap: wrap;
}

/* The products section carries --flush-top so it does not double up on the
   padding of the "Ranges we stock" section above it. A brand with no ranges
   has that section follow the hero directly, and the flush-top left the
   heading sitting on the band with no gap at all. Give it back. */
.aq-brand-hero + .aq-section { padding-top: 56px; }

.aq-range-card { border: 1px solid var(--aq-line); border-radius: var(--aq-radius-lg);
	overflow: hidden; background: #fff; display: block; color: var(--aq-ink); }
.aq-range-card:hover { color: var(--aq-ink); box-shadow: 0 10px 24px rgba(22,35,58,.07); }
.aq-range-card__media { height: 190px; }
.aq-range-card__media img, .aq-range-card__media .aq-slot { width: 100%; height: 100%; object-fit: cover; }
.aq-range-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.aq-range-card__name { font-size: 17px; font-weight: 800; }
.aq-range-card__note { font-size: 13.5px; line-height: 1.6; color: var(--aq-muted); min-height: 44px; }
.aq-range-card__count { font-size: 13px; font-weight: 700; color: var(--aq-accent); }

/* =========================================================================
   14. Responsive
   ========================================================================= */
@media (max-width: 1200px) {
	.aq-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
	.aq-brandstrip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aq-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aq-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aq-cat-card--feature { grid-column: span 3; grid-row: auto; min-height: 320px; }
	.aq-hero h1, .aq-hero h2 { font-size: 46px; }
	.aq-hero__stats { position: static; inset: auto; flex-direction: row; text-align: left;
		gap: 20px; padding: 0 var(--aq-gutter) 40px; margin-top: 12px; }
	.aq-hero__stat { min-width: 0; flex: 1; }
	.aq-hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
}

@media (max-width: 1024px) {
	:root { --aq-gutter: 24px; }
	.aq-header__inner { flex-wrap: wrap; }
	.aq-nav ul { gap: 18px; }
	.aq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aq-with-sidebar { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.aq-about-hero { grid-template-columns: 1fr; }
	.aq-brand-hero { min-height: 480px; }
	.aq-brand-hero__copy h1 { font-size: 38px; }
}

@media (max-width: 860px) {
	.aq-header, .aq-catnav, .aq-promo { display: none; }
	.aq-mobile-header { display: block; }
	.aq-tabbar {
		display: grid; grid-template-columns: repeat(5, 1fr); position: sticky; bottom: 0;
		border-top: 1px solid var(--aq-line); background: #fff; text-align: center; z-index: 90;
		padding-bottom: env(safe-area-inset-bottom);
	}
	body { padding-bottom: 0; }
	/* Hero: copy sits at the bottom of a 520px image, figures in a 3-up row
	   beneath it. The photo stays behind everything, so no reordering. */
	.aq-hero { min-height: 520px; flex-direction: column; align-items: stretch; justify-content: flex-end; }
	.aq-hero__inner { padding: 0 var(--aq-gutter) 44px; gap: 16px; }
	.aq-hero h1, .aq-hero h2 { font-size: 34px; max-width: 100%; }
	.aq-hero p { font-size: 15.5px; }
	.aq-hero__cta .aq-btn { min-height: 48px; padding: 9px 20px; font-size: 13px; }
	.aq-hero__trust { gap: 16px; font-size: 11px; }
	.aq-hero__stats {
		position: relative; inset: auto; text-align: left; margin-top: 0;
		padding: 0 var(--aq-gutter) 40px; display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
	}
	.aq-hero__stat { padding-top: 16px; border-top-color: rgba(255,255,255,.25); min-width: 0; }
	.aq-hero__stat-n { font-size: 25px; }
	.aq-hero__stat-l { font-size: 9px; letter-spacing: .12em; margin-top: 7px; }
	.aq-grid--2, .aq-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.aq-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aq-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.aq-cat-card--feature { grid-column: span 2; grid-row: auto; min-height: 280px; }
	.aq-cat-card--feature .aq-cat-card__body { padding: 22px 18px; }
	.aq-cat-card--feature .aq-cat-card__name { font-size: 22px; }
	.aq-cat-card__media { height: 130px; }
	.aq-promo-card { grid-template-columns: 1fr; }
	.aq-brandstrip .aq-container { flex-direction: column; align-items: flex-start; gap: 16px; }
	.aq-brandstrip__grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aq-statement { min-height: 300px; }
	.aq-statement__inner { padding: 44px var(--aq-gutter); gap: 16px; }
	.aq-statement__quote { font-size: 26px; }
	.aq-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
	.aq-footer__bar { flex-direction: column; gap: 12px; }
	.aq-section { padding-block: 36px; }
	.aq-page-head h1 { font-size: 26px; }
	.aq-about-hero h1 { font-size: 30px; }
	/* The brand hero carries more copy than the home one (wordmark, title,
	   paragraph, two buttons, trust line). At 440px the copy filled the band
	   edge to edge and the photo never showed, so give it room and a top pad. */
	.aq-brand-hero { min-height: 560px; }
	.aq-brand-hero__copy { padding: 40px var(--aq-gutter) 40px; gap: 15px; }
	.aq-brand-hero__copy h1 { font-size: 30px; max-width: 100%; }
	.aq-brand-hero__copy p { font-size: 15.5px; }
	.aq-brand-hero__logo { font-size: 15px; padding: 8px 13px; }
	.aq-brand-hero__trust { gap: 16px; font-size: 11px; }
	.aq-cta-band { flex-direction: column; align-items: flex-start; }
	.aq-brand-hero + .aq-section { padding-top: 36px; }
	.aq-showrooms { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.aq-showroom__media { height: 200px; }
	.aq-showroom__city { font-size: 21px; }
	.aq-footer--slim .aq-container { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 520px) {
	.aq-grid--4, .aq-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.aq-footer__cols { grid-template-columns: 1fr; }
	.aq-btn { min-height: 48px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   15. Utilities added by templates
   ========================================================================= */
.aq-link { font-weight: 700; color: var(--aq-accent); }
.aq-link:hover { color: var(--aq-accent-dark); }

.aq-content { min-width: 0; }

.aq-page-head__desc { font-size: 15px; line-height: 1.65; color: var(--aq-muted); }
.aq-page-head__desc p { margin: 0; }

.aq-searchform { display: flex; gap: 10px; }
.aq-searchform input[type="search"] { flex: 1; }

/* Menus rendered by wp_nav_menu inside chrome that expects bare lists. */
.aq-nav ul, .aq-catnav ul, .aq-footer ul, .aq-drawer ul { list-style: none; }
.aq-footer__bar ul li { display: inline-block; }

.aq-entry--single { border-bottom: 0; }

/* =========================================================================
   16. Fixes found in visual review
   ========================================================================= */

/* A container nested inside another (WooCommerce shortcodes rendered through
   page.php) must not double up the gutter. */
.aq-container .aq-container {
	max-width: none;
	padding-inline: 0;
}

/* Editorial text needs a readable measure. Images, tables and wide blocks are
   left alone so they can still use the full column. */
.aq-prose > p,
.aq-prose > ul,
.aq-prose > ol,
.aq-prose > h2,
.aq-prose > h3,
.aq-prose > h4,
.aq-prose > blockquote,
.aq-prose > dl {
	max-width: 72ch;
}

/* Full-bleed call-to-action band: the copy aligns with the page container. */
.aq-cta-band { padding-block: 44px; padding-inline: 0; }
.aq-cta-band__inner {
	display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.aq-cta-band .aq-btn--outline { border-color: rgba(255, 255, 255, .4); color: #fff; }
.aq-cta-band .aq-btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aq-cta-band--light .aq-btn--outline { border-color: var(--aq-ink); color: var(--aq-ink); }

@media (max-width: 860px) {
	.aq-cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* Inline icons: sized to the text they sit beside. */
.aq-icon {
	width: 1em; height: 1em; flex-shrink: 0;
	fill: none; stroke: currentColor; stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
	vertical-align: -.125em;
}
.aq-icon--lg { width: 1.25em; height: 1.25em; }
.aq-search__icon .aq-icon { width: 17px; height: 17px; stroke-width: 1.8; }
.aq-icon-btn .aq-icon { width: 21px; height: 21px; }
.aq-tabbar__icon .aq-icon { width: 20px; height: 20px; }
.aq-footer__social .aq-icon { width: 17px; height: 17px; stroke-width: 1.5; }
.aq-card__wish .aq-icon { width: 16px; height: 16px; }
.aq-hero__trust .aq-icon,
.aq-brand-hero__trust .aq-icon { display: none; }

/* Icon alignment inside the service, trust and confirmation blocks. */
.aq-service__icon { display: inline-flex; color: var(--aq-ink); }
.aq-service__icon .aq-icon { width: 22px; height: 22px; stroke-width: 1.6; }
.aq-service--row .aq-service__icon .aq-icon { width: 19px; height: 19px; }

/* Inline icon + label pairs must not break across lines. */
.aq-promo__phone,
.aq-promo__right a,
.aq-hero__trust span,
.aq-brand-hero__trust span,
.aq-reserve a,
.aq-showroom__phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.aq-hero__trust span,
.aq-brand-hero__trust span { white-space: normal; }
.aq-btn .aq-icon { flex-shrink: 0; }

/* A dark CTA band running straight into the dark footer needs a seam. */
.aq-cta-band + .aq-footer { border-top: 1px solid rgba(255, 255, 255, .12); }

/* Short pages: keep the footer at the bottom of the viewport instead of
   leaving a band of white beneath it. */
body { min-height: 100vh; }
.aq-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Full-bleed blocks are pulled out with 100vw, which is wider than the
	   available width whenever a vertical scrollbar is present. `clip` trims
	   that overhang. It must be `clip`, not `hidden`: hidden would make this a
	   scroll container and break the sticky header and tab bar. */
	overflow-x: clip;
}

/* =========================================================================
   Block alignment
   -------------------------------------------------------------------------
   Content sits inside .aq-container, which is centred with a max width and a
   gutter. These let a block escape it: `alignwide` widens to the page max,
   `alignfull` runs edge to edge. The container's own centring is what makes
   `calc(50% - 50vw)` land exactly on the viewport edge.
   ========================================================================= */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.alignwide {
	width: calc(100% + var(--aq-gutter) * 2);
	max-width: none;
	margin-left: calc(var(--aq-gutter) * -1);
	margin-right: calc(var(--aq-gutter) * -1);
}
/* =========================================================================
   Vertical rhythm for block-built pages
   -------------------------------------------------------------------------
   `.aq-blocks` is the content wrapper on a page assembled from blocks. The
   rules below reproduce the spacing the PHP templates got from wrapping every
   section in `.aq-section`, which blocks do not have:

     - a theme block gets a full section gap from whatever sits either side;
     - prose keeps its own tighter rhythm (paragraph to paragraph stays 1em);
     - two full-bleed bands run straight into each other, edge to edge, the
       way the hero meets the brand strip in the design;
     - a section heading belongs to the block right after it, so that pair is
       tightened back to the heading's own 30px.
   ========================================================================= */
.aq-blocks { padding-block: 56px; }

/* A band at either end meets the header or footer with no white gap. */
.aq-blocks:has(> .alignfull:first-child) { padding-top: 0; }
.aq-blocks:has(> .alignfull:last-child) { padding-bottom: 0; }

.aq-blocks > [class*="wp-block-aquaform-"],
.aq-blocks > [class*="wp-block-aquaform-"] + * { margin-top: 56px; }
.aq-blocks > :first-child { margin-top: 0; }
.aq-blocks > .alignfull + .alignfull { margin-top: 0; }

/* Must follow the rule above: a heading owns the block beneath it. */
.aq-blocks > .aq-section-head { margin-bottom: 0; }
.aq-blocks > .aq-section-head + * { margin-top: 30px; }

/* A full-bleed band clears the prose measure, so it never inherits one. */
.aq-blocks > .alignfull { margin-bottom: 0; }

/* Tighter on a phone, matching the .aq-section drop to 36px. These rules live
   here rather than in the responsive section because .aq-blocks is declared
   after it and would otherwise keep the desktop spacing. */
@media (max-width: 860px) {
	.aq-blocks { padding-block: 36px; }
	.aq-blocks > [class*="wp-block-aquaform-"],
	.aq-blocks > [class*="wp-block-aquaform-"] + * { margin-top: 36px; }
	.aq-blocks > :first-child { margin-top: 0; }
	.aq-blocks > .alignfull + .alignfull { margin-top: 0; }
	.aq-blocks > .aq-section-head + * { margin-top: 20px; }
	.aq-shop-intro { margin-bottom: 32px; }
}
.aq-main { flex: 1 0 auto; }
.aq-site > .aq-footer,
.aq-site > .aq-tabbar { flex-shrink: 0; }

/* The search results page leads with a full-width query bar. */
.search .aq-page-head { display: block; }
.search .aq-page-head__title { max-width: none; }
.search .aq-page-head__meta { margin-top: 12px; }
.aq-page-head .aq-search { max-width: none; width: 100%; margin-top: 14px; }
.aq-page-head .aq-search form { height: 52px; border-color: var(--aq-ink); background: #fff; }
.aq-page-head .aq-search input[type="search"] { height: 48px; line-height: 48px; font-size: 15px; font-weight: 600; }

/* Footer wordmark rendered as an image (light logo variant). */
.aq-footer__logo--image { display: inline-block; }
.aq-footer__logo--image img { max-height: 44px; width: auto; }
.aq-footer--slim .aq-footer__logo--image img { max-height: 36px; }