/* ==========================================================================
   Belvoq Coastline
   Tokens come from theme.json. This file holds composition and component
   craft only: nothing here invents a colour, a font or a radius.
   ========================================================================== */

:root {
	--bq-gutter: clamp(20px, 5vw, 64px);
	/* Left edge shared by every section, so the hero and the body align. */
	--bq-edge: max(var(--bq-gutter), calc((100vw - 1180px) / 2));
	--bq-rule: 1px solid var(--wp--preset--color--line);
	--bq-rule-ink: 1px solid rgba(240, 234, 224, 0.24);
	--bq-measure: 34ch;
}

/* Neutralise UA defaults at zero specificity so component rules always win. */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl) {
	margin: 0;
}
:where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}
:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
	border-radius: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Running text keeps a readable measure wherever it is not deliberately wide. */
.bq-prose {
	max-width: 66ch;
}

/* --------------------------------------------------------------------------
   Wordmark and small labels
   -------------------------------------------------------------------------- */

.bq-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(19px, 2.1vw, 25px);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	line-height: 1;
	/* Wide tracking adds a trailing gap; pull it back so the mark optically centres. */
	text-indent: 0.34em;
	color: inherit;
	white-space: nowrap;
}

.bq-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--wp--preset--color--taupe);
}

.bq-label--onink {
	color: rgba(240, 234, 224, 0.68);
}

/* The packaging sets its number between two hairlines. */
.bq-number {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(20px, 2vw, 24px);
	letter-spacing: 0.04em;
	line-height: 1;
	display: inline-block;
	padding: 10px 0;
	border-top: var(--bq-rule);
	border-bottom: var(--bq-rule);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.bq-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 22px var(--bq-edge);
	background: var(--wp--preset--color--base);
	border-bottom: var(--bq-rule);
}

.bq-header__nav,
.bq-header__utility {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 34px);
}

.bq-header__utility {
	justify-content: flex-end;
}

.bq-header a {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease;
}

.bq-header a:hover,
.bq-header a:focus-visible {
	border-bottom-color: var(--wp--preset--color--contrast);
}

.bq-header .bq-wordmark:hover,
.bq-header .bq-wordmark:focus-visible {
	border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   Section rhythm. Density 0.2: the page breathes.
   -------------------------------------------------------------------------- */

.bq-section {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--bq-edge);
}

.bq-section--tight {
	padding-block: var(--wp--preset--spacing--50);
}

/* Ink fields are structural, not decorative: they carry whole sections. */
.bq-ink {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.bq-ink a {
	color: var(--wp--preset--color--base);
}

.bq-ink hr,
.bq-ink .bq-number {
	border-color: rgba(240, 234, 224, 0.24);
}

/* --------------------------------------------------------------------------
   Hero. One moment: eyebrow, headline, subtext, one call to action.
   The photograph runs flush to the viewport edge rather than sitting in a
   tidy rectangle. Composed, not acrobatic: variance is 0.35.
   -------------------------------------------------------------------------- */

.bq-hero {
	position: relative;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	min-height: min(88svh, 880px);
	overflow: clip;
}

.bq-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(22px, 2.6vw, 34px);
	padding: clamp(56px, 8vw, 104px) var(--bq-gutter) clamp(56px, 8vw, 104px) var(--bq-edge);
	max-width: 46rem;
}

.bq-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(52px, 8.4vw, 118px);
	line-height: 0.98;
	letter-spacing: -0.012em;
	margin: 0;
}

.bq-hero__title em {
	font-style: italic;
	/* Italic descenders clip at this leading, so the line gets a little room. */
	line-height: 1.1;
	display: inline-block;
	padding-bottom: 0.04em;
}

.bq-hero__body {
	max-width: var(--bq-measure);
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.65;
	color: rgba(240, 234, 224, 0.82);
	margin: 0;
}

.bq-hero__figure {
	position: relative;
	min-height: 46svh;
}

.bq-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

@media (min-width: 900px) {
	.bq-hero {
		grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	}
	.bq-hero__figure {
		min-height: 100%;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.bq-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	padding: 18px 34px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	box-shadow: none;
	transition: background-color 160ms ease, color 160ms ease;
	white-space: nowrap;
}

.bq-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

/* On an ink field the primary inverts, so it stays the lighter of the two. */
.bq-ink .bq-btn,
.bq-hero .bq-btn {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
}

.bq-ink .bq-btn:hover,
.bq-hero .bq-btn:hover {
	background: transparent;
	color: var(--wp--preset--color--base);
}

.bq-btn--quiet {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.bq-hero .bq-btn--quiet,
.bq-ink .bq-btn--quiet {
	background: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(240, 234, 224, 0.45);
}

.bq-hero .bq-btn--quiet:hover,
.bq-ink .bq-btn--quiet:hover {
	border-color: var(--wp--preset--color--base);
}

.bq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* A link that reads as a link without a button's weight. */
.bq-link {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Section headers and editorial splits
   -------------------------------------------------------------------------- */

.bq-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: var(--wp--preset--spacing--40);
	/* Wide enough to keep a section headline to two lines at the display size. */
	max-width: 36ch;
}

.bq-head h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.06;
	margin: 0;
}

.bq-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

@media (min-width: 900px) {
	.bq-split {
		grid-template-columns: 1.05fr 0.95fr;
	}
	.bq-split--reverse > :first-child {
		order: 2;
	}
}

/* Flush a figure to the viewport edge inside a padded section. */
.bq-bleed-right {
	margin-right: calc(-1 * var(--bq-edge));
}

.bq-bleed-left {
	margin-left: calc(-1 * var(--bq-edge));
}

@media (max-width: 899px) {
	.bq-bleed-right,
	.bq-bleed-left {
		margin-inline: calc(-1 * var(--bq-edge));
	}
	/* Image first, text second, as the direction requires. */
	.bq-split--reverse > :first-child {
		order: 0;
	}
}

/* --------------------------------------------------------------------------
   The range. No cards: image, number, name, price on the bare ground.
   -------------------------------------------------------------------------- */

.bq-range {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px) clamp(16px, 2.6vw, 40px);
}

@media (min-width: 900px) {
	.bq-range {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bq-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}

.bq-item__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.bq-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bq-item:hover .bq-item__media img {
	transform: scale(1.022);
}

.bq-item__meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-top: 14px;
	border-top: var(--bq-rule);
}

.bq-item__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.15;
}

.bq-item__price {
	font-size: 14px;
	color: var(--wp--preset--color--taupe);
	letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
	.bq-item__media img,
	.bq-header a {
		transition: none;
	}
	.bq-item:hover .bq-item__media img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Three pillars. Not three identical cards: a ruled list with real hierarchy.
   -------------------------------------------------------------------------- */

.bq-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: var(--bq-rule-ink);
}

.bq-pillar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding-block: clamp(28px, 3.4vw, 44px);
	border-bottom: var(--bq-rule-ink);
}

@media (min-width: 900px) {
	.bq-pillar {
		grid-template-columns: 0.34fr 0.66fr;
		gap: clamp(32px, 5vw, 80px);
		align-items: baseline;
	}
}

.bq-pillar h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.1;
	margin: 0;
}

.bq-pillar p {
	max-width: 56ch;
	color: rgba(240, 234, 224, 0.78);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bq-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) var(--bq-edge) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.bq-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.bq-footer__top {
		grid-template-columns: 1.2fr 0.6fr 0.6fr;
	}
}

.bq-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bq-footer__col a {
	font-size: 14px;
	color: rgba(240, 234, 224, 0.82);
	text-decoration: none;
}

.bq-footer__col a:hover {
	color: var(--wp--preset--color--base);
}

.bq-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
	border-top: var(--bq-rule-ink);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(240, 234, 224, 0.55);
}

/* --------------------------------------------------------------------------
   WooCommerce. Overrides only, so cart and checkout keep working.
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border-radius: 0;
	font-size: 15px;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--wp--preset--color--contrast);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	font-weight: 400;
}

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.06;
}

.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: var(--bq-rule);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	padding: 14px 16px;
	font-size: 16px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-bottom: var(--bq-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 28px 0 0;
	padding: 0 0 14px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
	font-weight: 400;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
}

/* Woo's grid: no frames, hairline separators only. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 22px;
	line-height: 1.15;
	padding: 0;
}

.woocommerce ul.products li.product img {
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 16px;
}

.woocommerce ul.products li.product .button {
	margin-top: 14px;
}

.woocommerce span.onsale {
	display: none;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.bq-hr {
	border: 0;
	border-top: var(--bq-rule);
	margin: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Gutenberg interop. Core wraps every image in a figure, and flow layout adds
   a top margin to each child. Both sit between our grids and their content.
   -------------------------------------------------------------------------- */

.bq-hero__figure .wp-block-image,
.bq-hero__figure figure,
.bq-item__media .wp-block-image,
.bq-item__media figure,
.bq-figure .wp-block-image,
.bq-figure figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.bq-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bq-hero > *,
.bq-hero__text > *,
.bq-range > *,
.bq-item > *,
.bq-item__meta > *,
.bq-pillars > *,
.bq-pillar > *,
.bq-head > *,
.bq-split > *,
.bq-actions > *,
.bq-footer > *,
.bq-footer__top > *,
.bq-footer__col > *,
.bq-footer__base > * {
	margin-block-start: 0;
}

/* The wordmark is a site-title block, so the anchor carries the type. */
.bq-wordmark a {
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
}

/* Navigation blocks inside the header inherit the header's link treatment. */
.bq-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
}

.bq-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* A figure that runs to the viewport edge keeps a sensible shape. */
.bq-figure {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

@media (min-width: 900px) {
	.bq-figure {
		aspect-ratio: 5 / 6;
	}
}

/* At phone widths the three header columns run out of room, so the wordmark
   steps down and the utility links tighten rather than wrapping to two rows. */
@media (max-width: 767px) {
	.bq-header {
		grid-template-columns: auto 1fr auto;
		gap: 10px;
		padding-block: 16px;
	}

	.bq-header .bq-wordmark {
		font-size: 16px;
		letter-spacing: 0.24em;
		text-indent: 0.24em;
	}

	.bq-header__utility {
		gap: 14px;
	}

	.bq-header__utility .wp-block-navigation__container,
	.bq-header__nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		gap: 14px;
	}

	.bq-header .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 11px;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   The range, rendered live by WooCommerce. Same tile language as .bq-item:
   image, hairline, name, price on the bare ground. No frame, no elevation.
   -------------------------------------------------------------------------- */

.bq-range-live .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px) clamp(16px, 2.6vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.bq-range-live .wp-block-post-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Woo lays the loop out with flex-basis; grid ignores it, but the width does
   need clearing or the tiles keep their four-column flex sizing. */
.bq-range-live .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.bq-range-live .wp-block-woocommerce-product-image {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.bq-range-live .wp-block-woocommerce-product-image a,
.bq-range-live .wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.bq-range-live .wp-block-woocommerce-product-image img {
	object-fit: cover;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bq-range-live .wp-block-post-template > li:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.022);
}

.bq-range-live .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(20px, 1.6vw, 24px);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: var(--bq-rule);
}

.bq-range-live .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.bq-range-live .wp-block-woocommerce-product-price,
.bq-range-live .wc-block-components-product-price {
	margin: 7px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--taupe);
}

.bq-range-live .wc-block-components-product-price .woocommerce-Price-amount {
	font-weight: 400;
}

/* Woo's own grid gap variable would fight the grid gap above. */
.bq-range-live .wp-block-post-template.is-layout-flex {
	gap: clamp(28px, 4vw, 56px) clamp(16px, 2.6vw, 40px);
}

@media (prefers-reduced-motion: reduce) {
	.bq-range-live .wp-block-woocommerce-product-image img {
		transition: none;
	}
	.bq-range-live .wp-block-post-template > li:hover .wp-block-woocommerce-product-image img {
		transform: none;
	}
}
/* WooCommerce renders the loop with wc-block-* class names, not the wp-block-*
   ones the editor markup implies. These target what the browser actually gets. */

.bq-range-live .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px) clamp(16px, 2.6vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.bq-range-live .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bq-range-live li.wc-block-product {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.bq-range-live .wc-block-components-product-image {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.bq-range-live .wc-block-components-product-image a,
.bq-range-live .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	margin: 0;
}

.bq-range-live .wc-block-components-product-image img {
	object-fit: cover;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bq-range-live li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.022);
}

/* Woo prints a notices container even when there is nothing to say. */
.bq-range-live .wc-block-components-notices:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bq-range-live .wc-block-components-product-image img {
		transition: none;
	}
	.bq-range-live li.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
	}
}
/* --------------------------------------------------------------------------
   The film. Full bleed, poster first, nothing downloaded until someone
   presses play, so a 31 MB commercial costs a passing visitor nothing.
   -------------------------------------------------------------------------- */

.bq-film {
	background: var(--wp--preset--color--contrast);
	line-height: 0;
}

.bq-film .wp-block-video,
.bq-film figure {
	margin: 0;
}

.bq-film video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--wp--preset--color--contrast);
}

@media (max-width: 767px) {
	.bq-film video {
		aspect-ratio: 4 / 3;
	}
}

/* --------------------------------------------------------------------------
   Product tiles. The image and title were already links, but the tile read as
   a gallery: no hover cue, and only two small hit areas. The image's own link
   is stretched across the whole tile and the name underlines on hover.
   -------------------------------------------------------------------------- */

.bq-range-live li.wc-block-product {
	position: relative;
	cursor: pointer;
}

.bq-range-live .wc-block-components-product-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The title keeps its own link for keyboard and screen reader users, so it has
   to sit above the stretched overlay to stay separately focusable. */
.bq-range-live .wp-block-post-title a {
	position: relative;
	z-index: 2;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bq-range-live li.wc-block-product:hover .wp-block-post-title a,
.bq-range-live .wp-block-post-title a:focus-visible {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.bq-range-live .wp-block-post-title a {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Legal pages. Long-form reading, so the measure is tight and the headings
   step down: these are documents, not marketing.
   -------------------------------------------------------------------------- */

.bq-legal {
	max-width: 74ch;
	margin-inline: auto;
}

.bq-legal > * + * {
	margin-top: 20px;
}

.bq-legal h2 {
	font-size: clamp(28px, 3.2vw, 42px);
	margin-top: 0;
}

.bq-legal > h2:not(:first-child) {
	margin-top: var(--wp--preset--spacing--40);
}

.bq-legal h3 {
	font-size: clamp(20px, 1.9vw, 25px);
	margin-top: var(--wp--preset--spacing--30);
}

.bq-legal p {
	font-size: 16px;
	line-height: 1.7;
}

.bq-legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bq-legal .bq-hr {
	margin-block: var(--wp--preset--spacing--40);
}

/* The footer carries a fourth column now that legal pages exist. */
@media (min-width: 900px) {
	.bq-footer__top {
		grid-template-columns: 1.1fr 0.6fr 0.7fr 0.7fr;
	}
}

/* --------------------------------------------------------------------------
   Inner page titles. theme.json sizes h1 for the hero, which is far too large
   for a page heading, so the section header caps it.
   -------------------------------------------------------------------------- */

.bq-head h1 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1.04;
	letter-spacing: -0.005em;
	margin: 0;
}

/* A closing band: one line, held to a short measure so it reads as a statement
   rather than a paragraph. */
.bq-closing__line {
	font-size: clamp(28px, 3.4vw, 50px);
	line-height: 1.12;
	max-width: 18ch;
	margin: 0;
}

/* Links inside body copy need to be visible without shouting. */
.bq-prose a,
.bq-pillar a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ==========================================================================
   Density pass. The direction was set airy, and at full page length that read
   as empty rather than considered. These rules tighten the rhythm and close
   the voids that split sections opened up, without touching the palette or
   the type. Nothing here loosens: every value is smaller than what it replaces.
   ========================================================================== */

/* A page should not open with the title floating a third of the way down. */
.wp-block-post-content > .bq-section:first-child,
main > .bq-section:first-child {
	padding-top: var(--wp--preset--spacing--50);
}

.bq-head {
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Square figures. A 5:6 column ran far taller than the text beside it, which
   is what produced the large empty areas on The Brand and Contact. */
@media (min-width: 900px) {
	.bq-figure {
		aspect-ratio: 1 / 1;
	}

	.bq-split {
		grid-template-columns: 1fr 1fr;
		gap: clamp(28px, 3.2vw, 56px);
	}
}

.bq-figure {
	aspect-ratio: 4 / 5;
}

.bq-split {
	gap: clamp(24px, 3vw, 44px);
}

/* The ruled list was breathing more than it needed to. */
.bq-pillar {
	padding-block: clamp(20px, 2.2vw, 30px);
	gap: 8px;
}

@media (min-width: 900px) {
	.bq-pillar {
		gap: clamp(28px, 4vw, 60px);
	}
}

/* The hero is one moment; it does not need a hundred pixels of padding. */
.bq-hero {
	min-height: min(84svh, 820px);
}

.bq-hero__text {
	gap: clamp(18px, 2vw, 26px);
	padding-block: clamp(44px, 5.5vw, 76px);
}

/* Display type sits a touch tighter, which reads as deliberate rather than
   merely large. */
.bq-hero__title,
.bq-head h1,
.bq-head h2,
.bq-closing__line {
	letter-spacing: -0.018em;
}

/* Long-form legal pages keep their generous leading but lose the outer air. */
.bq-legal > * + * {
	margin-top: 16px;
}

.bq-legal > h2:not(:first-child) {
	margin-top: var(--wp--preset--spacing--40);
}

.bq-legal h3 {
	margin-top: var(--wp--preset--spacing--20);
}

/* Footer: the columns had more room than their content. */
.bq-footer {
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
}

.bq-footer__top {
	gap: var(--wp--preset--spacing--30);
}

/* Ordering fix: the unconditional .bq-figure rule above was written after its
   own media query, so it won at every width and the desktop square never
   applied. Base first, breakpoint second. */
.bq-figure {
	aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
	.bq-figure {
		aspect-ratio: 1 / 1;
	}
}

/* ==========================================================================
   Client care form. Underlined fields, no boxes, no radius: the same geometry
   as the packaging. Labels are the small tracked uppercase used everywhere
   else, so the form reads as part of the site rather than a plugin dropped
   into it.
   ========================================================================== */

.bq-form {
	max-width: 44rem;
	margin-top: var(--wp--preset--spacing--40);
}

.bq-form__form {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bq-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

@media (min-width: 700px) {
	.bq-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.bq-field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bq-field__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}

.bq-field__input {
	appearance: none;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	padding: 9px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	transition: border-color 200ms ease;
}

.bq-field__input:hover {
	border-bottom-color: var(--wp--preset--color--taupe);
}

.bq-field__input:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
	border-bottom-width: 1px;
}

.bq-field__input:focus-visible {
	outline: none;
}

.bq-field__textarea {
	resize: vertical;
	min-height: 132px;
}

/* Native select chevron replaced with a hairline caret in the ink colour. */
.bq-field__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1513' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 12px 8px;
	padding-right: 26px;
	cursor: pointer;
}

/* The honeypot: present in the document, never on the screen, never in the
   tab order. Anything that fills it is not a person. */
.bq-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bq-form__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	margin-top: 6px;
}

.bq-form__fineprint {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--taupe);
	margin: 0;
	max-width: 42ch;
}

.bq-form__fineprint a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bq-form__notice {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 16px 0;
	border-top: var(--bq-rule);
	border-bottom: var(--bq-rule);
	font-size: 16px;
	max-width: 52ch;
}

.bq-form__notice--ok {
	color: var(--wp--preset--color--contrast);
}

.bq-form__notice--error {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.bq-field__input {
		transition: none;
	}
}

/* ==========================================================================
   Account area. WooCommerce floats the navigation at 30% and the panel at 68%,
   which ignores the site's own column and left both flush to the edge once the
   page template stopped constraining content. Grid replaces the floats.
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: clamp(40px, 5vw, 84px);
		align-items: start;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--bq-rule);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: var(--bq-rule);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 15px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
	text-decoration: none;
	transition: color 180ms ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--wp--preset--color--contrast);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wp--preset--color--contrast);
}

/* The active row is marked with a rule rather than an underline on the word. */
.woocommerce-MyAccount-navigation li.is-active {
	box-shadow: inset 2px 0 0 0 var(--wp--preset--color--contrast);
}

.woocommerce-MyAccount-navigation li.is-active a {
	padding-left: 14px;
}

/* --- The dashboard panel ------------------------------------------------- */

.bq-account__greeting {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.018em;
	margin: 0;
}

.bq-account__intro {
	max-width: 54ch;
	margin: 20px 0 0;
	color: var(--wp--preset--color--taupe);
}

.bq-account__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--bq-rule);
}

.bq-account__signout {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bq-account__signout a {
	color: var(--wp--preset--color--taupe);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.bq-account__signout a:hover {
	color: var(--wp--preset--color--contrast);
}

/* --- WooCommerce forms inside the account and checkout ------------------- */

.woocommerce form .form-row label,
.woocommerce-account form label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
	margin-bottom: 8px;
	display: block;
}

.woocommerce-account form .input-text,
.woocommerce-account form select {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
	padding: 9px 0;
	font-size: 17px;
}

.woocommerce-account form .input-text:focus,
.woocommerce-account form select:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--contrast);
}

.woocommerce-account fieldset {
	border: 0;
	border-top: var(--bq-rule);
	padding: var(--wp--preset--spacing--30) 0 0;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.woocommerce-account legend {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 24px;
	padding: 0;
}

/* Woo's own address columns sit oddly narrow beside our grid. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	width: auto;
	float: none;
}

@media (min-width: 700px) {
	.woocommerce-account .woocommerce-Addresses {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* Auto placement put the navigation in the second column and pushed the panel
   onto a second row. Placing both explicitly removes the guesswork. */
@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (max-width: 899px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ==========================================================================
   Client service conversations in the account. Ruled rows, no bubbles: a
   message from Belvoq is marked by an ink rule and a tinted ground, not by a
   chat balloon, which would read as a helpdesk rather than a house.
   ========================================================================== */

.bq-threads__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--bq-rule);
}

.bq-thread-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	border-bottom: var(--bq-rule);
}

.bq-thread-row__link {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 auto;
	padding: 16px 0;
	text-decoration: none;
	color: inherit;
}

.bq-thread-row__subject {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.2;
}

.bq-thread-row__link:hover .bq-thread-row__subject {
	color: var(--wp--preset--color--accent);
}

.bq-thread-row__meta {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}

.bq-thread-row__flag {
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.bq-threads__empty {
	max-width: 52ch;
	color: var(--wp--preset--color--taupe);
	margin: 0;
}

.bq-threads__new {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--bq-rule);
}

.bq-threads__heading,
.bq-thread__subject {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.12;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* --- one conversation ---------------------------------------------------- */

.bq-thread__back {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.bq-thread__status {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--taupe);
}

.bq-thread__messages {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bq-message {
	padding: 18px 0 18px 18px;
	border-left: 1px solid var(--wp--preset--color--line);
	border-bottom: var(--bq-rule);
}

.bq-message--staff {
	border-left-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	padding-right: 18px;
}

.bq-message__from {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.bq-message__when {
	margin-left: 12px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--taupe);
}

.bq-message__body {
	max-width: 62ch;
}

.bq-message__body p {
	margin: 0 0 10px;
}

.bq-message__body p:last-child {
	margin-bottom: 0;
}

.bq-thread__closed {
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--bq-rule);
	color: var(--wp--preset--color--taupe);
	max-width: 52ch;
}

.bq-thread__reply {
	padding-top: var(--wp--preset--spacing--20);
	border-top: var(--bq-rule);
}

/* The account navigation now carries a count. */
.woocommerce-MyAccount-navigation li a {
	white-space: nowrap;
}

/* Client care gateway: an invitation to open an account, not a form. */
.bq-gateway {
	max-width: 46rem;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--bq-rule);
}

.bq-gateway__heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.12;
	letter-spacing: -0.018em;
	margin: 0 0 20px;
}

.bq-gateway__body {
	max-width: 56ch;
	margin: 0 0 14px;
}

.bq-gateway__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: var(--wp--preset--spacing--30) 0 0;
}

.bq-gateway--in .bq-gateway__body {
	margin-bottom: 0;
}

/* Woo's own login and registration columns, on our grid. */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 800px) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
		gap: clamp(40px, 5vw, 80px);
	}
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-account #customer_login h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(24px, 2.4vw, 32px);
	margin: 0 0 var(--wp--preset--spacing--20);
}