/*
Theme Name:   BoatsCover
Theme URI:    https://boatscover.net
Description:  Storefront child theme for BoatsCover. Industrial-marine direction built from the product's own vocabulary: tarpaulin greys, hi-vis strap orange lifted from the dimension callouts in the product photography, and monospaced numerals because a boat cover is bought on measurements.
Author:       boatscover.net
Template:     storefront
Version:      1.0.0
Text Domain:  boatscover
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Wet Baltic slate - the dark ground the whole page sits against. */
	--bc-slate: #16212b;
	/* The cover's own dark grey, the colour most of the catalogue ships in. */
	--bc-tarp: #3e4c57;
	--bc-tarp-soft: #64757f;
	/* Frost light, deliberately blue-grey rather than warm. */
	--bc-fog: #e8ebed;
	--bc-line: #cfd6da;
	--bc-paper: #ffffff;
	/* Hi-vis ratchet strap. Appears on the spec strip and primary actions only. */
	--bc-strap: #f26a21;
	--bc-strap-dark: #d4550f;
	/* Low winter sky. */
	--bc-ice: #7fa8bf;

	--bc-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--bc-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--bc-gap: clamp(1rem, 3vw, 2rem);
	--bc-radius: 2px;
	/* Product cards echo the rounding already on the photography. */
	--bc-radius-card: 10px;
	--bc-card-gap: 0.7rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--bc-fog);
	color: var(--bc-slate);
	font-family: var(--bc-display);
	font-variation-settings: 'wdth' 100;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.entry-title {
	font-family: var(--bc-display);
	color: var(--bc-slate);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.12;
}

h1, .page-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

a { color: var(--bc-slate); text-decoration-color: var(--bc-ice); text-underline-offset: 0.18em; }
a:hover { color: var(--bc-strap-dark); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--bc-strap);
	outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	background-color: var(--bc-slate);
	border-bottom: 3px solid var(--bc-strap);
	padding-top: 1.1em;
	padding-bottom: 0;
}

.site-header .site-branding .site-title a,
.site-header .site-title a {
	font-family: var(--bc-display);
	font-weight: 800;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-paper);
	text-decoration: none;
}

.site-header .site-branding .site-title a:hover { color: var(--bc-strap); }
.site-header .site-description { color: var(--bc-tarp-soft); }

.storefront-primary-navigation { background-color: transparent; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-family: var(--bc-display);
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #c7d1d8;
	padding-top: 1.05em;
	padding-bottom: 1.05em;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a {
	color: var(--bc-paper);
	box-shadow: inset 0 -3px 0 var(--bc-strap);
}

.site-header .site-search .widget_product_search form input[type="search"] {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--bc-paper);
	border-radius: var(--bc-radius);
}

.site-header .site-search .widget_product_search form input[type="search"]::placeholder {
	color: var(--bc-tarp-soft);
}

.site-header-cart .cart-contents {
	color: #c7d1d8;
	font-family: var(--bc-mono);
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}

.site-header-cart .cart-contents:hover { color: var(--bc-paper); }

.site-header-cart .cart-contents .count {
	color: var(--bc-strap);
	font-weight: 500;
	margin-left: 0.5em;
}

/* The dropdown that opens on hover keeps the parent theme's light styling,
   which lands a pale panel against the dark header. */
.site-header-cart .widget_shopping_cart,
.site-header-cart .site-header-cart-contents,
.site-header .site-header-cart .widget_shopping_cart {
	background-color: var(--bc-slate);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--bc-radius);
	color: #c7d1d8;
	padding: 1em;
}

.site-header-cart .widget_shopping_cart a,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item a {
	color: #dbe3e8;
	text-decoration: none;
}

.site-header-cart .widget_shopping_cart a:hover { color: var(--bc-paper); }

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 0.8em;
}

.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .woocommerce-Price-amount {
	font-family: var(--bc-mono);
	color: #c7d1d8;
}

.site-header-cart .widget_shopping_cart .total {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--bc-paper);
	padding-top: 0.8em;
}

.site-header-cart .widget_shopping_cart .total strong { color: var(--bc-paper); }

.site-header-cart .widget_shopping_cart .buttons a {
	display: block;
	margin-bottom: 0.5em;
	text-align: center;
}

.site-header-cart .widget_shopping_cart .buttons a.checkout {
	background-color: var(--bc-strap);
	color: #ffffff;
}

.site-header-cart .widget_shopping_cart .buttons a.checkout:hover { background-color: var(--bc-strap-dark); }

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message { color: var(--bc-tarp-soft); }

/* ==========================================================================
   Block-editor product grids
   ==========================================================================
   The homepage lays its products out with WooCommerce blocks, which render
   their own markup rather than the shop loop's, so the card styling above does
   not reach them - most visibly the buttons, which stayed near-invisible pale
   grey on the pale page.
   ========================================================================== */

/* WordPress ships `.wp-block-button__link:not(.has-background)` at a higher
   weight than a bare class, which is what kept these pale grey. */
.wp-block-button__link,
.wp-block-button__link:not(.has-background),
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:not(.has-background),
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link.add_to_cart_button,
.wc-block-grid__product .wp-block-button__link:not(.has-background),
.wc-block-components-product-button__button:not(.has-background),
.wc-block-components-product-button .wp-block-button__link:not(.has-background) {
	background-color: var(--bc-slate);
	color: var(--bc-paper);
	font-family: var(--bc-display);
	font-weight: 600;
	font-size: 0.84rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--bc-radius);
	padding: 0.85em 1.5em;
}

.wp-block-button__link:hover,
.wp-block-button__link:not(.has-background):hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:not(.has-background):hover,
.wc-block-grid__product .wp-block-button__link:not(.has-background):hover,
.wc-block-components-product-button__button:not(.has-background):hover {
	background-color: var(--bc-tarp);
	color: var(--bc-paper);
}

/* The featured product's button is the one call to action on the homepage, so
   it carries the accent the rest of the page withholds. */
.wc-block-featured-product .wp-block-button__link,
.wc-block-featured-product .wp-block-button__link:not(.has-background) {
	background-color: var(--bc-strap);
	color: #ffffff;
}

.wc-block-featured-product .wp-block-button__link:not(.has-background):hover {
	background-color: var(--bc-strap-dark);
	color: #ffffff;
}

/* The block grid lays items out as `flex: 1 0 33.33%` with no gap between
   them, so a plain background ran the cards together into one white slab.
   The gap is carved out of the item's own padding and the background clipped
   to the content box, which leaves the column arithmetic untouched. */
.wc-block-grid__products .wc-block-grid__product {
	background-color: var(--bc-paper);
	/* The gap is a transparent border rather than padding: padding would put
	   the background and the overflow clip on different edges, and the corner
	   radius could then never trim the photo. */
	background-clip: padding-box;
	border: var(--bc-card-gap) solid transparent;
	border-radius: calc(var(--bc-radius-card) + var(--bc-card-gap));
	overflow: hidden;
	padding: 0;
	margin-bottom: 1.1rem;
}

/* Fill the card edge to edge - WooCommerce leaves the photo inset by a few
   pixels, which read as a stray white margin inside the card. */
/* The link wrapping the photo ships as inline-block, so it shrinks to the
   image's intrinsic width and leaves a sliver of card showing either side. */
.wc-block-grid__products .wc-block-grid__product > .wc-block-grid__product-link,
.wc-block-grid__products .wc-block-grid__product-link,
.wc-block-grid__products .wc-block-grid__product-image {
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wc-block-grid__products .wc-block-grid__product-image img,
.wc-block-grid__product-image img {
	width: 100%;
	max-width: 100%;
	display: block;
	margin-bottom: 0.8em;
	border-radius: 0;
}

/* Margin rather than padding: it sits inside the clipped background, so the
   button keeps clear of the card's bottom edge instead of hanging off it. */
.wc-block-grid__product-add-to-cart,
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
	margin-bottom: 1.2em;
	padding: 0 1em;
}

.wc-block-grid__product-title,
.wc-block-components-product-name {
	font-family: var(--bc-display);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.25;
	color: var(--bc-slate);
	padding: 0 1em;
}

.wc-block-grid__product-price,
.wc-block-components-product-price {
	font-family: var(--bc-display);
	font-weight: 700;
	color: var(--bc-slate);
	padding: 0 1em;
}

.wc-block-featured-product__title,
.wc-block-featured-product__description { font-family: var(--bc-display); }

/* ==========================================================================
   Language switcher
   ========================================================================== */

/* Text, not flags: a flag names a country, and plenty of people who read
   Swedish live in Finland. */
.bc-lang {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0 1.1rem 0 0;
	padding: 0;
	float: right;
	font-family: var(--bc-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	line-height: 1;
}

.bc-lang__item { margin: 0; padding: 0; }

.bc-lang__link,
.bc-lang__current {
	display: block;
	padding: 0.55em 0.6em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--bc-radius);
}

.bc-lang__link { color: var(--bc-tarp-soft); }
.bc-lang__link:hover { color: var(--bc-paper); background-color: rgba(255, 255, 255, 0.08); }

.bc-lang__current {
	color: var(--bc-slate);
	background-color: var(--bc-strap);
	font-weight: 500;
}

.bc-lang__sep { color: rgba(255, 255, 255, 0.22); }

/* ==========================================================================
   Spec strip - the signature element
   ========================================================================== */

/* A cover is bought on numbers, so the numbers get their own band in the
   product's own register: monospaced, tight, unglamorous. */
.bc-spec-strip {
	background-color: var(--bc-tarp);
	color: #dbe3e8;
	font-family: var(--bc-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The strip sits inside the theme's centred content column, so it is pulled out
   to the full viewport width and lifted over the padding the column would
   otherwise leave as a bare grey band under the header. */
.bc-spec-strip {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 2.2em;
}

/* The parent theme puts a ~68px bottom margin on the header, which renders as a
   bare grey band once the strip sits directly beneath it. Its rule is
   `.home.page:not(.page-template-template-homepage) .site-header` - four
   classes deep - so overriding by selector weight alone would mean writing a
   longer and more brittle selector than the declaration deserves. */
.bc-has-spec .site-header { margin-bottom: 0 !important; }
.bc-has-spec .site-content { padding-top: 0 !important; }
.bc-has-spec .site-content .col-full > .bc-spec-strip:first-child { margin-top: 0; }

/* A grid with a fixed column count rather than a wrapping flex row: flex left
   the six facts breaking 4 + 2, and the wrapped line opened with a separator
   that had nothing before it. Fixed columns divide evenly at every width and
   the dot can be suppressed on whichever item starts a row. */
.bc-spec-strip__inner {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	gap: 0.45em 1.8rem;
	max-width: 74em;
	margin: 0 auto;
	padding: 0.85em var(--bc-gap);
}

.bc-spec-strip__item {
	position: relative;
	text-align: center;
	white-space: nowrap;
}

/* Sits in the column gap, so it stays put whatever the item's own width. */
.bc-spec-strip__item::before {
	content: '·';
	position: absolute;
	left: -1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bc-strap);
	font-weight: 700;
}

.bc-spec-strip__item:nth-child(6n + 1)::before { content: none; }

/* Bounded at both ends: an open-ended max-width would leave the three-column
   nth-child rule live at phone widths, where it out-weighs the two-column one
   and silently drops the separator from the fourth fact. */
@media (min-width: 768px) and (max-width: 1150px) {
	.bc-spec-strip__inner { grid-template-columns: repeat(3, 1fr); }
	.bc-spec-strip__item::before { content: '·'; }
	.bc-spec-strip__item:nth-child(3n + 1)::before { content: none; }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.woocommerce-breadcrumb {
	font-family: var(--bc-mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: var(--bc-tarp-soft);
	text-transform: uppercase;
	padding-top: 1.5em;
}

.woocommerce-breadcrumb a { color: var(--bc-tarp); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--bc-strap-dark); }

/* ==========================================================================
   Product grid
   ========================================================================== */

/* Storefront floats the loop items, so a card whose button wraps to two lines
   leaves its neighbours short. Flex on the list keeps a row level while the
   theme's own widths and gutters continue to do the column arithmetic. */
ul.products {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

ul.products li.product {
	display: flex;
	flex-direction: column;
	background-color: var(--bc-paper);
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius-card);
	padding: 0;
	/* The card does the clipping, so the photo's top corners follow it exactly. */
	overflow: hidden;
	transition: border-color 140ms ease, transform 140ms ease;
}

ul.products li.product:hover {
	border-color: var(--bc-tarp);
	transform: translateY(-2px);
}

ul.products li.product a img {
	margin: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background-color: var(--bc-fog);
	border-radius: 0;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 0.9em 1em 0.2em;
	margin: 0;
}

ul.products li.product .price {
	display: block;
	font-family: var(--bc-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bc-slate);
	padding: 0 1em 0.2em;
	margin: 0;
}

ul.products li.product .price del { color: var(--bc-tarp-soft); font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; color: var(--bc-strap-dark); }

/* Pushes the button to the foot of the card so every row's buttons line up. */
ul.products li.product .button {
	margin: auto 1em 1.1em;
	width: calc(100% - 2em);
	text-align: center;
}

ul.products li.product .star-rating { margin: 0 1em 0.4em; }

/* Compact spec line inside each card. */
.bc-card-spec {
	font-family: var(--bc-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-tarp-soft);
	padding: 0 1em 0.3em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--bc-slate);
	color: var(--bc-paper);
	font-family: var(--bc-display);
	font-weight: 600;
	font-size: 0.84rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: var(--bc-radius);
	border: 0;
	padding: 0.85em 1.5em;
	transition: background-color 140ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--bc-tarp);
	color: var(--bc-paper);
}

/* Orange is reserved for the one action that matters on the page. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button {
	background-color: var(--bc-strap);
	color: #ffffff;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background-color: var(--bc-strap-dark);
	color: #ffffff;
}

.woocommerce button.button.alt.disabled,
.single_add_to_cart_button.disabled {
	background-color: var(--bc-tarp-soft);
}

/* ==========================================================================
   Single product
   ========================================================================== */

.single-product div.product .product_title {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	margin-bottom: 0.3em;
}

.single-product div.product .price {
	font-family: var(--bc-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--bc-slate);
}

.single-product div.product .woocommerce-product-details__short-description {
	font-size: 1.02rem;
	color: var(--bc-tarp);
	border-left: 3px solid var(--bc-strap);
	padding-left: 1em;
	margin-bottom: 1.5em;
}

.single-product div.product .summary .product_meta {
	font-family: var(--bc-mono);
	font-size: 0.74rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bc-tarp-soft);
	border-top: 1px solid var(--bc-line);
	padding-top: 1em;
}

.single-product div.product .summary .product_meta a { color: var(--bc-tarp); }

.woocommerce div.product form.cart .variations label {
	font-family: var(--bc-mono);
	font-size: 0.74rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bc-tarp);
}

.woocommerce div.product form.cart .variations select {
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius);
	background-color: var(--bc-paper);
	padding: 0.7em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--bc-display);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Dimensions and weight belong in the numeric register. */
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	font-family: var(--bc-mono);
	font-size: 0.82rem;
}

/* ==========================================================================
   Cart, checkout, tables
   ========================================================================== */

.woocommerce table.shop_table {
	background-color: var(--bc-paper);
	border: 1px solid var(--bc-line);
	border-radius: var(--bc-radius);
}

.woocommerce table.shop_table th {
	font-family: var(--bc-mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-tarp);
}

.woocommerce .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* The parent theme prints these as white text on a coloured band. Repainting
   only the background left checkout showing an empty white bar with an icon and
   no message, so the text colour has to be set alongside it. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error {
	background-color: var(--bc-paper);
	color: var(--bc-slate);
	border-top: 3px solid var(--bc-strap);
	border-radius: var(--bc-radius);
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce .woocommerce-info a,
.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-error a {
	color: var(--bc-slate);
	text-decoration: underline;
}

.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover { color: var(--bc-strap-dark); }

.woocommerce-info::before,
.woocommerce-message::before { color: var(--bc-strap); }

.woocommerce-error,
.woocommerce .woocommerce-error { border-top-color: #c0392b; }
.woocommerce-error::before { color: #c0392b; }

.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
	background-color: var(--bc-slate);
	color: var(--bc-paper);
}

.woocommerce form .form-row .required { color: #c0392b; }

/* ==========================================================================
   Category description, moved below the grid by the i18n mu-plugin
   ========================================================================== */

.bc-category-description {
	max-width: 46em;
	margin: 3em auto 0;
	padding-top: 2em;
	border-top: 1px solid var(--bc-line);
	color: var(--bc-tarp);
	font-size: 0.96rem;
}

.bc-category-description h2 {
	font-size: 1.1rem;
	margin-top: 1.6em;
	color: var(--bc-slate);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: var(--bc-slate);
	color: #aab8c1;
	border-top: 3px solid var(--bc-strap);
}

.site-footer a { color: var(--bc-paper); }
.site-footer a:hover { color: var(--bc-strap); }
.site-footer h1, .site-footer h2, .site-footer h3 { color: var(--bc-paper); }

/* ==========================================================================
   Language suggestion bar (mu-plugin)
   ========================================================================== */

.bc-lang-bar {
	font-family: var(--bc-display) !important;
	background: var(--bc-slate) !important;
}

.bc-lang-bar__switch { background: var(--bc-strap) !important; border-radius: var(--bc-radius) !important; }
.bc-lang-bar__switch:hover { background: var(--bc-strap-dark) !important; }

/* ==========================================================================
   Handheld
   ==========================================================================
   Storefront switches to its handheld layout below 768px. Most of the work
   here is reclaiming vertical space in the header: on a phone the visitor is
   one thumb-reach from the catalogue and everything above it is in the way.
   ========================================================================== */

@media (max-width: 767px) {

	.site-header {
		padding-top: 0.9em;
		padding-bottom: 0.9em;
	}

	.site-header .site-branding {
		width: auto;
		max-width: 58%;
		float: left;
		margin-bottom: 0;
	}

	.site-header .site-branding .site-title a,
	.site-header .site-title a {
		font-size: 1.15rem;
		letter-spacing: 0.04em;
	}

	/* Search costs a whole row on a phone and the catalogue is 45 items;
	   browsing by boat brand gets there faster. */
	.site-header .site-search { display: none; }

	/* Inside the collapsed menu these two sat on one cramped line, running the
	   currency straight into the item count. Each gets its own row. */
	.bc-lang {
		float: none;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		margin: 0;
		padding: 0.35rem 0;
		font-size: 0.78rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.bc-lang__link,
	.bc-lang__current {
		padding: 0.7em 0.9em;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.site-header-cart {
		display: block;
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.site-header-cart .cart-contents {
		min-height: 48px;
		display: flex;
		align-items: center;
		gap: 0.6em;
		padding: 0.7em 0;
		font-size: 0.86rem;
	}

	.site-header-cart .cart-contents .count { margin-left: 0; }

	.site-header-cart .widget_shopping_cart { padding: 0.8em 0; border: 0; }

	.menu-toggle,
	button.menu-toggle {
		background-color: transparent;
		border: 1px solid rgba(255, 255, 255, 0.25);
		color: #c7d1d8;
		border-radius: var(--bc-radius);
		min-height: 44px;
		font-size: 0.78rem;
		letter-spacing: 0.08em;
	}

	.menu-toggle:hover,
	button.menu-toggle:hover {
		background-color: rgba(255, 255, 255, 0.08);
		color: var(--bc-paper);
	}

	/* The expanded handheld panel carries the parent theme's own light styling,
	   which put near-white link text on a near-white panel. It is repainted to
	   match the dark header the toggle sits in. */
	.handheld-navigation,
	.main-navigation .handheld-navigation,
	.main-navigation ul.menu,
	.main-navigation ul.nav-menu,
	.main-navigation ul.menu ul.sub-menu {
		background-color: var(--bc-slate);
	}

	.handheld-navigation a,
	.main-navigation a,
	.main-navigation ul li a,
	.main-navigation ul.menu li a,
	.main-navigation ul.nav-menu li a {
		color: #dbe3e8;
	}

	.handheld-navigation a:hover,
	.main-navigation ul li a:hover { color: var(--bc-paper); }

	.main-navigation ul li a,
	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding-top: 0.9em;
		padding-bottom: 0.9em;
		font-size: 0.9rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: none;
	}

	.main-navigation .dropdown-toggle { color: #dbe3e8; }

	/* Two facts per row rather than a six-item ribbon that wraps to four lines. */
	.bc-spec-strip {
		font-size: 0.62rem;
		letter-spacing: 0.07em;
		margin-bottom: 1.6em;
	}

	/* Two columns, three even rows - three across leaves the longest facts
	   clipped at this width. */
	.bc-spec-strip__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5em 1.1rem;
		padding: 0.75em 0.8rem;
	}

	.bc-spec-strip__item::before { content: '·'; left: -0.62rem; }
	.bc-spec-strip__item:nth-child(2n + 1)::before { content: none; }

	.woocommerce-breadcrumb {
		font-size: 0.66rem;
		padding-top: 1em;
	}

	/* Two across: a cover is recognised by its shape, and one-up wastes a
	   scroll on every item. */
	.woocommerce ul.products[class*="columns-"] li.product,
	ul.products li.product {
		width: 48%;
		float: left;
		clear: none;
		margin-right: 4%;
	}

	.woocommerce ul.products[class*="columns-"] li.product:nth-of-type(2n),
	ul.products li.product:nth-of-type(2n) { margin-right: 0; }

	.woocommerce ul.products[class*="columns-"] li.product:nth-of-type(2n+1),
	ul.products li.product:nth-of-type(2n+1) { clear: both; }

	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2 {
		font-size: 0.84rem;
		padding: 0.7em 0.7em 0.15em;
	}

	ul.products li.product .price {
		font-size: 0.94rem;
		padding: 0 0.7em 0.15em;
	}

	.bc-card-spec { font-size: 0.6rem; padding: 0 0.7em 0.25em; }

	/* Two across on the homepage grid as well, matching the shop loop. */
	.wc-block-grid__products .wc-block-grid__product {
		flex: 1 0 50% !important;
		max-width: 50% !important;
		border-width: 0.4rem;
		border-radius: calc(var(--bc-radius-card) + 0.4rem);
		padding: 0;
		margin-bottom: 0.8rem;
	}

	.wc-block-grid__product-title,
	.wc-block-grid__product-price { font-size: 0.84rem; padding: 0 0.7em; }

	ul.products li.product .button {
		margin: 0.5em 0.7em 0.8em;
		width: calc(100% - 1.4em);
		padding: 0.8em 0.6em;
		font-size: 0.74rem;
		letter-spacing: 0.04em;
	}

	/* Buying controls stay comfortably thumb-sized. */
	.single_add_to_cart_button,
	.woocommerce div.product form.cart .button {
		width: 100%;
		min-height: 52px;
		font-size: 0.92rem;
	}

	.woocommerce div.product form.cart .variations select { min-height: 48px; }

	.quantity .qty { min-height: 48px; }

	.single-product div.product .product_title { font-size: 1.45rem; }
	.single-product div.product .price { font-size: 1.4rem; }

	/* The cart table collapses to stacked rows; keep the numbers aligned. */
	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td { font-size: 0.9rem; }

	.bc-category-description { margin-top: 2em; padding-top: 1.5em; }

	.bc-lang-bar { font-size: 0.86rem !important; padding: 0.7rem 0.8rem !important; }
}

@media (max-width: 400px) {
	.site-header .site-branding .site-title a,
	.site-header .site-title a { font-size: 1rem; }

	.bc-spec-strip { font-size: 0.55rem; letter-spacing: 0.05em; }
	.bc-spec-strip__inner { gap: 0.45em 0.8rem; }
	.bc-spec-strip__item::before { left: -0.48rem; }
}

/* ==========================================================================
   Motion
   ========================================================================== */

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

	ul.products li.product:hover { transform: none; }
}