/* ==========================================================================
   Ceta Cabins — theme styles
   ========================================================================== */

:root {
	/* Sampled from the supplied logo so the site matches the mark exactly. */
	--ceta-navy: #042758;
	--ceta-navy-light: #0A3C7E;
	--ceta-accent: #9C0835;
	--ceta-accent-dark: #82072B;
	--ceta-grey-light: #F4F5F7;
	--ceta-grey-dark: #2C2C2A;
	/* Darkened from #6B7280: that measured 4.43:1 on the light grey panels, just
	   under the 4.5 minimum. This clears it on both white and #F4F5F7. */
	--ceta-grey-mid: #656D7A;
	--ceta-border: #DFE3E8;
	--ceta-white: #FFFFFF;
	--ceta-green: #1B7F3B;
	--ceta-green-bg: #E7F6EC;
	--ceta-accent-bg: #FBEAF0;
	--ceta-red: #B4231C;

	/* Made to Order needs to read as distinct from the crimson CTA, so it stays amber. */
	--ceta-amber: #92400E;
	--ceta-amber-bg: #FEF3C7;

	--ceta-radius: 3px;
	--ceta-shadow: 0 1px 3px rgba(4, 39, 88, 0.06);
	--ceta-shadow-lift: 0 8px 24px rgba(4, 39, 88, 0.13);

	--ceta-container: 1200px;
	--ceta-gap: 1.5rem;

	--ceta-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset ------------------------------------------------------------------ */

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

body {
	margin: 0;
	font-family: var(--ceta-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ceta-grey-dark);
	background: var(--ceta-white);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
	margin: 0 0 0.6em;
	color: var(--ceta-navy);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1rem; }

a { color: var(--ceta-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ceta-accent-dark); }

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

.skip-link:focus {
	position: fixed; top: 0.5rem; left: 0.5rem;
	z-index: 999; width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--ceta-navy); color: var(--ceta-white);
	border-radius: var(--ceta-radius);
}

/* Layout ----------------------------------------------------------------- */

.ceta-container {
	width: 100%;
	max-width: var(--ceta-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.ceta-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.ceta-section__title { margin-bottom: 1.75rem; }

.ceta-prose { max-width: 760px; }
.ceta-prose > * { max-width: 100%; }
.ceta-prose .alignwide { max-width: var(--ceta-container); }

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

.ceta-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--ceta-radius);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ceta-button--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--ceta-accent);
	border-color: var(--ceta-accent);
	color: var(--ceta-white);
}

.ceta-button--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--ceta-accent-dark);
	border-color: var(--ceta-accent-dark);
	color: var(--ceta-white);
}

.ceta-button--dark { background: var(--ceta-navy); border-color: var(--ceta-navy); color: var(--ceta-white); }
.ceta-button--dark:hover { background: var(--ceta-navy-light); border-color: var(--ceta-navy-light); color: var(--ceta-white); }

/* The outline treatment is the default for WooCommerce's plain .button, but a button
   the theme has explicitly marked primary must not be caught by it. */
.ceta-button--outline,
.woocommerce a.button:not(.alt):not(.ceta-button--primary),
.woocommerce button.button:not(.alt):not(.ceta-button--primary),
.woocommerce input.button:not(.alt):not(.ceta-button--primary) {
	background: transparent;
	border-color: var(--ceta-navy);
	color: var(--ceta-navy);
}

.ceta-button--outline:hover,
.woocommerce a.button:not(.alt):not(.ceta-button--primary):hover,
.woocommerce button.button:not(.alt):not(.ceta-button--primary):hover,
.woocommerce input.button:not(.alt):not(.ceta-button--primary):hover {
	background: var(--ceta-navy);
	color: var(--ceta-white);
}

/* Matching WooCommerce's own specificity so the primary style holds on its buttons. */
.woocommerce a.button.ceta-button--primary,
.woocommerce button.button.ceta-button--primary,
.woocommerce input.button.ceta-button--primary {
	background: var(--ceta-accent);
	border-color: var(--ceta-accent);
	color: var(--ceta-white);
}

.woocommerce a.button.ceta-button--primary:hover,
.woocommerce button.button.ceta-button--primary:hover,
.woocommerce input.button.ceta-button--primary:hover {
	background: var(--ceta-accent-dark);
	border-color: var(--ceta-accent-dark);
	color: var(--ceta-white);
}

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

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

.ceta-topbar {
	background: var(--ceta-navy);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
}

.ceta-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 38px;
	flex-wrap: wrap;
}

.ceta-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}

.ceta-topbar__phone {
	color: var(--ceta-white);
	font-weight: 600;
	text-decoration: none;
	padding: 0.35rem 0.6rem;
	border-radius: var(--ceta-radius);
}

.ceta-topbar__phone:hover { background: rgba(255, 255, 255, 0.12); color: var(--ceta-white); }

.ceta-topbar__register {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	text-decoration: none;
	padding: 0.35rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--ceta-radius);
	white-space: nowrap;
}

.ceta-topbar__register:hover {
	background: var(--ceta-white);
	border-color: var(--ceta-white);
	color: var(--ceta-navy);
}

.ceta-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: var(--ceta-white);
	border-bottom: 1px solid var(--ceta-border);
}

.ceta-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	min-height: 74px;
}

.ceta-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.ceta-header__brand { flex: 0 0 auto; margin-right: auto; }
.ceta-header__brand img { max-height: 52px; width: auto; }

.ceta-logo-text {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ceta-navy);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.ceta-nav {
	flex: 0 1 auto;
	min-width: 0;
}

.ceta-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 1.7vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceta-nav__list a {
	color: var(--ceta-navy);
	font-weight: 500;
	text-decoration: none;
	padding-block: 0.5rem;
	display: inline-block;
	/* One line per item. Without this "Toilet Cabins" broke across two rows and
	   pushed the header to 100px tall. */
	white-space: nowrap;
}

.ceta-nav__list a:hover,
.ceta-nav__list .current-menu-item > a {
	color: var(--ceta-accent);
}

.ceta-nav__list .sub-menu {
	position: absolute;
	min-width: 230px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	box-shadow: var(--ceta-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ceta-nav__list > li { position: relative; }

.ceta-nav__list > li:hover > .sub-menu,
.ceta-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ceta-nav__list .sub-menu a { display: block; padding: 0.5rem 1rem; }

.ceta-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.1rem;
	background: var(--ceta-grey-light);
	border-radius: var(--ceta-radius);
	color: var(--ceta-navy);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ceta-cart-link:hover { background: var(--ceta-border); color: var(--ceta-navy); }

.ceta-cart-link__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	background: var(--ceta-accent);
	border-radius: 999px;
	color: var(--ceta-white);
	font-size: 0.75rem;
}

.ceta-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	cursor: pointer;
	position: relative;
}

.ceta-nav-toggle__bar,
.ceta-nav-toggle__bar::before,
.ceta-nav-toggle__bar::after {
	position: absolute;
	left: 50%;
	width: 20px; height: 2px;
	background: var(--ceta-navy);
	transform: translateX(-50%);
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.ceta-nav-toggle__bar { top: 50%; margin-top: -1px; }
.ceta-nav-toggle__bar::before { content: ""; top: -6px; }
.ceta-nav-toggle__bar::after { content: ""; top: 6px; }

.ceta-nav-toggle[aria-expanded="true"] .ceta-nav-toggle__bar { background: transparent; }
.ceta-nav-toggle[aria-expanded="true"] .ceta-nav-toggle__bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.ceta-nav-toggle[aria-expanded="true"] .ceta-nav-toggle__bar::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Page header ------------------------------------------------------------ */

.ceta-page-header {
	background: var(--ceta-grey-light);
	border-bottom: 1px solid var(--ceta-border);
	padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.ceta-page-header__title { margin-bottom: 0.35rem; }
.ceta-page-header__subtitle { margin: 0; color: var(--ceta-grey-mid); max-width: 65ch; }

.ceta-breadcrumbs {
	margin-bottom: 0.85rem;
	font-size: 0.85rem;
	color: var(--ceta-grey-mid);
}

.ceta-breadcrumbs a { color: var(--ceta-grey-mid); text-decoration: none; }
.ceta-breadcrumbs a:hover { color: var(--ceta-accent); }

/* Photographic category header. Text sits on a dark scrim so contrast holds whatever
   the photo behind it looks like. */
.ceta-page-header--image {
	position: relative;
	background-size: cover;
	background-position: center;
	border-bottom: 0;
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.ceta-page-header--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 39, 88, 0.92) 0%, rgba(4, 39, 88, 0.72) 55%, rgba(4, 39, 88, 0.45) 100%);
}

.ceta-page-header--image > .ceta-container { position: relative; }
.ceta-page-header--image .ceta-page-header__title { color: var(--ceta-white); }
.ceta-page-header--image .ceta-page-header__subtitle { color: rgba(255, 255, 255, 0.88); font-size: 1.08rem; }
.ceta-page-header--image .ceta-breadcrumbs,
.ceta-page-header--image .ceta-breadcrumbs a { color: rgba(255, 255, 255, 0.72); }
.ceta-page-header--image .ceta-breadcrumbs a:hover { color: var(--ceta-white); }

/* Hero ------------------------------------------------------------------- */

.ceta-hero {
	position: relative;
	isolation: isolate;
	background: var(--ceta-navy);
	color: var(--ceta-white);
	padding-block: clamp(3rem, 7vw, 6rem);
}

/*
 * With a photo behind it the banner grows a little and the copy is pushed off the left
 * edge of the image, so the headline sits over the darkest part of the gradient rather
 * than over whatever happens to be in the middle of the shot.
 */
.ceta-hero--image {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

.ceta-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.ceta-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

/*
 * Two layers, not one. The horizontal pass keeps the text side genuinely dark so white
 * type stays legible whatever the photo is doing; the vertical pass stops the bottom
 * edge from cutting hard against the section below it.
 */
.ceta-hero--image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(4, 39, 88, 0.94) 0%, rgba(4, 39, 88, 0.86) 38%, rgba(4, 39, 88, 0.5) 72%, rgba(4, 39, 88, 0.38) 100%),
		linear-gradient(to bottom, rgba(4, 39, 88, 0.25) 0%, rgba(4, 39, 88, 0) 45%, rgba(4, 39, 88, 0.55) 100%);
}

/*
 * No photo on phones. The banner is taller than it is wide there, so object-fit scales the
 * image by height and the browser's chosen candidate gets blown up about two and a half
 * times — visibly soft. Forcing a larger candidate would mean sending a desktop-sized
 * photo down a phone connection to sit under a tint that is already 86% opaque. The plain
 * navy banner looks the same and costs nothing.
 */
@media (max-width: 860px) {
	.ceta-hero__media { display: none; }
	.ceta-hero--image::before { content: none; }
	.ceta-hero--image { padding-block: clamp(3rem, 7vw, 6rem); }
}

.ceta-hero__title { color: var(--ceta-white); max-width: 18ch; }
.ceta-hero__subtitle { font-size: 1.15rem; color: rgba(255, 255, 255, 0.82); max-width: 60ch; }
/* Category grid ---------------------------------------------------------- */

.ceta-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--ceta-gap);
}

.ceta-cat-card {
	display: block;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	box-shadow: var(--ceta-shadow);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ceta-cat-card:hover { box-shadow: var(--ceta-shadow-lift); transform: translateY(-2px); color: inherit; }
.ceta-cat-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--ceta-white); }
.ceta-cat-card__body { display: block; padding: 1.1rem 1.25rem 1.4rem; }
.ceta-cat-card__title { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ceta-navy); }
.ceta-cat-card__count { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--ceta-grey-mid); }

/* Product grid ----------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ceta-gap);
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 1.25rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	box-shadow: var(--ceta-shadow);
	text-align: left;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--ceta-shadow-lift);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--ceta-white);
	margin: 0 0 1rem;
}

.woocommerce ul.products li.product > a { text-decoration: none; }

.ceta-card__title {
	margin: 0 1.25rem 0.15rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
}

.ceta-card__dimensions {
	margin: 0 1.25rem 0.6rem;
	color: var(--ceta-grey-mid);
	font-size: 0.92rem;
}

/* Price is the hero of this design: no competitor publishes one. */
.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 1.25rem 0.5rem;
	color: var(--ceta-navy);
	font-size: 1.55rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del { font-size: 1rem; font-weight: 400; opacity: 0.6; }

.woocommerce ul.products li.product .ceta-badge { margin: 0 1.25rem 0.85rem; }

.woocommerce ul.products li.product .button {
	margin: auto 1.25rem 0;
	align-self: stretch;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1.5rem; }

/* Products still waiting on the client's photography. Saying so is better than leaving a
   customer to assume the image failed to load. */
.ceta-photo-pending {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.3em 0.7em;
	background: rgba(4, 39, 88, 0.86);
	border-radius: var(--ceta-radius);
	color: var(--ceta-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product.ceta-no-photo { position: relative; }

.woocommerce div.product { position: relative; }

.ceta-photo-pending--single {
	top: 1rem;
	left: 1rem;
	font-size: 0.76rem;
	padding: 0.36em 0.85em;
}
.woocommerce ul.products li.product.ceta-no-photo a img { background: var(--ceta-grey-light); }

/* Stock badges ----------------------------------------------------------- */

.ceta-badge {
	display: inline-block;
	padding: 0.25em 0.7em;
	border-radius: var(--ceta-radius);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ceta-badge--in-stock { background: var(--ceta-green-bg); color: var(--ceta-green); }
.ceta-badge--made-to-order { background: var(--ceta-amber-bg); color: var(--ceta-amber); }
.ceta-badge--out-of-stock { background: #EFF0F2; color: var(--ceta-grey-mid); }


/* Single product --------------------------------------------------------- */

.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/*
 * WooCommerce floats these at 48% with a selector carrying more element names than a
 * plain class chain, so the override has to match its specificity or the gallery and
 * summary sit at half the width of their grid column.
 */
.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce div.product div.summary.entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; }
.woocommerce div.product > .summary { grid-column: 2; }
.woocommerce div.product > .ceta-specs,
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells { grid-column: 1 / -1; }

.woocommerce div.product .product_title { margin-bottom: 0.5rem; }

.ceta-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin-bottom: 0.85rem;
	color: var(--ceta-grey-mid);
	font-size: 0.98rem;
}

.ceta-single-meta__size { font-weight: 600; color: var(--ceta-grey-dark); }
.ceta-single-meta__code strong { color: var(--ceta-grey-dark); }

.woocommerce div.product p.price {
	margin: 0 0 0.5rem;
	color: var(--ceta-navy);
	font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.ceta-price-ex { display: block; }
.ceta-price-inc { display: block; margin-top: 0.15rem; font-size: 0.98rem; font-weight: 400; color: var(--ceta-grey-mid); }
.ceta-price-note { font-size: 0.9rem; font-weight: 400; color: var(--ceta-grey-mid); }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0; }
.woocommerce div.product form.cart .quantity input { padding: 0.7rem 0.5rem; width: 5rem; border: 1px solid var(--ceta-border); border-radius: var(--ceta-radius); font-size: 1rem; }

.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 1.25rem; }

/* Delivery checker ------------------------------------------------------- */

.ceta-delivery {
	margin: 1.75rem 0;
	padding: 1.35rem;
	background: var(--ceta-grey-light);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
}

.ceta-delivery__title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; }
.ceta-delivery__hint { margin: 0 0 0.85rem; font-size: 0.9rem; color: var(--ceta-grey-mid); }

.ceta-delivery__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ceta-delivery__input {
	flex: 1 1 11rem;
	min-width: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	font-family: inherit;
	font-size: 1rem;
	text-transform: uppercase;
	background: var(--ceta-white);
}

.ceta-delivery__result:not(:empty) { margin-top: 0.9rem; font-size: 0.98rem; }
.ceta-delivery__result--ok { color: var(--ceta-green); font-weight: 600; }
.ceta-delivery__result--quote { color: var(--ceta-grey-dark); }
.ceta-delivery__result--error { color: var(--ceta-red); }
.ceta-delivery__result--loading { color: var(--ceta-grey-mid); }
.ceta-delivery__result .ceta-button { margin-top: 0.6rem; }

.ceta-quote-notice {
	padding: 0.85rem 1rem;
	background: var(--ceta-accent-bg);
	border-left: 3px solid var(--ceta-accent);
	border-radius: var(--ceta-radius);
}

/* Spec table ------------------------------------------------------------- */

.ceta-specs { margin: 3rem 0 0; }
.ceta-specs__title { font-size: 1.5rem; margin-bottom: 1rem; }

.ceta-specs__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ceta-border);
	font-size: 0.98rem;
}

.ceta-specs__table th,
.ceta-specs__table td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--ceta-border);
}

.ceta-specs__table th { width: 38%; background: var(--ceta-grey-light); color: var(--ceta-navy); font-weight: 600; }
.ceta-specs__table tr:last-child th,
.ceta-specs__table tr:last-child td { border-bottom: 0; }

.ceta-specs__drawing { margin: 2rem 0 0; }
.ceta-specs__drawing-title { font-size: 1.15rem; }

/* Shared bits ------------------------------------------------------------ */

.ceta-eyebrow {
	margin: 0 0 0.4rem;
	color: var(--ceta-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Gallery ---------------------------------------------------------------- */

.ceta-gallery { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.ceta-gallery__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.ceta-gallery__head .ceta-section__title { margin-bottom: 0.35rem; }
.ceta-gallery__sub { margin: 0; color: var(--ceta-grey-mid); }
.ceta-gallery__all { flex: 0 0 auto; }

.ceta-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 190px;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceta-gallery__item {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: var(--ceta-grey-light);
}

.ceta-gallery__item--tall { grid-row: span 2; }
.ceta-gallery__item--wide { grid-column: span 2; }

.ceta-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.ceta-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ceta-gallery__link:hover img,
.ceta-gallery__link:focus-visible img { transform: scale(1.06); }

/* The caption stays readable at rest rather than hiding behind a hover, which touch
   devices never deliver. Hovering deepens the scrim and reveals the category above it. */
.ceta-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.2rem;
	padding: 1rem;
	background: linear-gradient(to top, rgba(4, 39, 88, 0.82) 0%, rgba(4, 39, 88, 0.16) 46%, rgba(4, 39, 88, 0) 74%);
	transition: background 0.28s ease;
}

.ceta-gallery__link:hover .ceta-gallery__overlay,
.ceta-gallery__link:focus-visible .ceta-gallery__overlay {
	background: linear-gradient(to top, rgba(4, 39, 88, 0.94) 0%, rgba(4, 39, 88, 0.55) 55%, rgba(4, 39, 88, 0.2) 100%);
}

.ceta-gallery__cat {
	color: var(--ceta-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.ceta-gallery__link:hover .ceta-gallery__cat,
.ceta-gallery__link:focus-visible .ceta-gallery__cat { opacity: 0.9; transform: translateY(0); }

.ceta-gallery__title {
	color: var(--ceta-white);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 900px) {
	.ceta-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 165px; }
}

@media (max-width: 600px) {
	.ceta-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 0.6rem; }
	.ceta-gallery__item--tall { grid-row: span 1; }
	.ceta-gallery__item--wide { grid-column: span 2; }
	.ceta-gallery__cat { opacity: 0.9; transform: none; }
	.ceta-gallery__title { font-size: 0.82rem; }
	.ceta-gallery__all { width: 100%; }
}

/* About ------------------------------------------------------------------ */

.ceta-about {
	background: var(--ceta-grey-light);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ceta-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
}

.ceta-about__media {
	position: relative;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: var(--ceta-shadow-lift);
}

.ceta-about__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ceta-about__badge {
	position: absolute;
	left: 0;
	bottom: 1.25rem;
	padding: 0.75rem 1.1rem;
	background: var(--ceta-accent);
	color: var(--ceta-white);
	border-radius: 0 var(--ceta-radius) var(--ceta-radius) 0;
}

.ceta-about__badge-line { display: block; font-weight: 700; font-size: 1.02rem; }
.ceta-about__badge-sub { display: block; font-size: 0.8rem; opacity: 0.92; }

.ceta-about__body h2 { margin-top: 0; }
.ceta-about__lead { font-size: 1.06rem; max-width: 56ch; }
.ceta-about__points { margin: 1.4rem 0; }
.ceta-about__cta { margin: 15px 0 0; }

.ceta-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--ceta-accent);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.ceta-textlink:hover { color: var(--ceta-accent-dark); }
.ceta-textlink__arrow { transition: transform 0.18s ease; }
.ceta-textlink:hover .ceta-textlink__arrow { transform: translateX(3px); }

@media (max-width: 860px) {
	.ceta-about__inner { grid-template-columns: 1fr; }
}

/* Carousel --------------------------------------------------------------- */

.ceta-carousel { position: relative; }

.ceta-carousel__track {
	display: grid;
	grid-auto-flow: column;
	/* Three across when there is room, one-plus-a-peek when there is not, without a
	   breakpoint. clamp rather than minmax: a grid track set with minmax collapses to its
	   minimum as soon as the row overflows, which it always does in a carousel, so every
	   slide came out at the mobile width even on a wide screen. */
	grid-auto-columns: clamp(280px, calc((100% - 2 * var(--ceta-gap)) / 3), 460px);
	gap: var(--ceta-gap);
	margin: 0;
	padding: 0.25rem 0 1rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ceta-carousel__track::-webkit-scrollbar { display: none; }
.ceta-carousel__track > * { scroll-snap-align: start; }

.ceta-carousel__nav { display: flex; gap: 0.5rem; flex: 0 0 auto; }

.ceta-carousel__btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: 50%;
	color: var(--ceta-navy);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ceta-carousel__btn:hover:not(:disabled) {
	background: var(--ceta-navy);
	border-color: var(--ceta-navy);
	color: var(--ceta-white);
}

.ceta-carousel__btn:disabled { opacity: 0.35; cursor: default; }

.ceta-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.45rem;
	margin-top: 0.5rem;
}

.ceta-carousel__dot {
	/* The visible dot is drawn by the pseudo-element so the button itself can stay a
	   24px touch target. At 8px square it was far too small to hit on a phone. */
	width: 24px;
	height: 24px;
	padding: 0;
	display: inline-grid;
	place-items: center;
	background: none;
	border: 0;
	cursor: pointer;
}

.ceta-carousel__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--ceta-border);
	border-radius: 50%;
	transition: background-color 0.18s ease, width 0.18s ease;
}

.ceta-carousel__dot.is-active::before { width: 22px; border-radius: 4px; background: var(--ceta-accent); }

/* Testimonials ----------------------------------------------------------- */

.ceta-testimonials {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	background: var(--ceta-white);
}

.ceta-testimonials__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.ceta-testimonials__head .ceta-section__title { margin-bottom: 0; }

.ceta-testimonial {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--ceta-grey-light);
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
}

.ceta-testimonial__quote { position: relative; margin: 0 0 1.4rem; padding-top: 1.9rem; }

.ceta-testimonial__quote::before {
	content: "\201C";
	position: absolute;
	top: 0.4rem;
	left: -0.3rem;
	font-size: 3.6rem;
	line-height: 1;
	color: var(--ceta-accent);
	opacity: 0.22;
}

.ceta-testimonial__quote p { margin: 0; font-size: 1.02rem; line-height: 1.65; }

.ceta-testimonial__by {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--ceta-border);
}

.ceta-testimonial__avatar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	background: var(--ceta-navy);
	border-radius: 50%;
	color: var(--ceta-white);
	font-weight: 700;
}

.ceta-testimonial__meta { display: flex; flex-direction: column; line-height: 1.35; }
.ceta-testimonial__author { font-style: normal; font-weight: 600; color: var(--ceta-navy); }
.ceta-testimonial__company { font-size: 0.88rem; color: var(--ceta-grey-mid); }

/* Home quote form -------------------------------------------------------- */

.ceta-home-quote {
	/* Deliberately not the footer navy: the two sat next to each other and read as one
	   slab. This is the same hue, several steps lighter. */
	background: #0E4A8F;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 48px;
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ceta-home-quote__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.ceta-home-quote__copy h2 { color: var(--ceta-white); margin-top: 0; }
.ceta-home-quote__copy .ceta-eyebrow { color: #F2A0B6; }
.ceta-home-quote__copy p { max-width: 46ch; }
.ceta-home-quote__copy .ceta-ticks li::before { border-color: var(--ceta-white); }
.ceta-home-quote__copy .ceta-ticks { margin-bottom: 1.4rem; }

.ceta-home-quote__call { margin: 0; }
.ceta-home-quote__phone { color: var(--ceta-white); font-weight: 700; text-decoration: none; }
.ceta-home-quote__phone:hover { color: var(--ceta-white); text-decoration: underline; }

.ceta-home-quote__form {
	background: var(--ceta-white);
	border-radius: 6px;
	padding: clamp(1.35rem, 3vw, 2.25rem);
	color: var(--ceta-grey-dark);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

@media (max-width: 860px) {
	.ceta-home-quote__inner { grid-template-columns: 1fr; }
}

/* Fluent Forms, dressed to match the rest of the site ---------------------
   Left alone the plugin ships its own font, radius and button, which read as a
   third-party widget dropped into the page rather than part of it. */

.fluentform .ff-el-group { margin-bottom: 1.1rem; }

.fluentform .ff-el-input--label label {
	font-family: var(--ceta-font);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ceta-navy);
	margin-bottom: 0.35rem;
}

.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content input[type="tel"],
.fluentform .ff-el-input--content input[type="number"],
.fluentform .ff-el-input--content select,
.fluentform .ff-el-input--content textarea {
	width: 100%;
	padding: 0.72rem 0.9rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	font-family: var(--ceta-font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ceta-grey-dark);
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fluentform .ff-el-input--content textarea { min-height: 118px; }

.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content select:focus,
.fluentform .ff-el-input--content textarea:focus {
	border-color: var(--ceta-accent);
	box-shadow: 0 0 0 3px rgba(156, 8, 53, 0.14);
	outline: none;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-help-message {
	font-family: var(--ceta-font);
	font-size: 0.86rem;
	color: var(--ceta-grey-mid);
}

.fluentform .ff-el-form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.fluentform .ff-el-form-check input { margin-top: 0.25rem; }

.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.85rem 1.6rem;
	background: var(--ceta-accent);
	border: 2px solid var(--ceta-accent);
	border-radius: var(--ceta-radius);
	font-family: var(--ceta-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ceta-white);
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background: var(--ceta-accent-dark);
	border-color: var(--ceta-accent-dark);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	font-family: var(--ceta-font);
	font-size: 0.85rem;
	color: var(--ceta-red);
}

.ff-message-success {
	padding: 1rem 1.15rem;
	background: var(--ceta-green-bg);
	border-left: 3px solid var(--ceta-green);
	border-radius: var(--ceta-radius);
	color: #14652F;
}

/* Posts ------------------------------------------------------------------ */

.ceta-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ceta-gap); }

.ceta-post-card {
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	box-shadow: var(--ceta-shadow);
	overflow: hidden;
}

.ceta-post-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ceta-post-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.ceta-post-card__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.ceta-post-card__title a { color: var(--ceta-navy); text-decoration: none; }
.ceta-post-card__title a:hover { color: var(--ceta-accent); }
.ceta-post-card__excerpt { margin: 0; color: var(--ceta-grey-mid); font-size: 0.95rem; }

.ceta-post-meta { color: var(--ceta-grey-mid); font-size: 0.9rem; }
.ceta-page-thumb { margin-bottom: 1.75rem; border-radius: var(--ceta-radius); }

/* Special offers ----------------------------------------------------------
   A dark band so the offers read as a distinct moment on the page rather than a
   second product grid. */

.ceta-sale {
	background: var(--ceta-navy);
	color: rgba(255, 255, 255, 0.88);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.ceta-sale__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.ceta-sale__head .ceta-section__title { color: var(--ceta-white); margin-bottom: 0.35rem; }
.ceta-sale__sub { margin: 0; color: rgba(255, 255, 255, 0.72); }
.ceta-eyebrow--onDark { color: #F2A0B6; }

.ceta-sale .ceta-carousel__btn {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--ceta-white);
}

.ceta-sale .ceta-carousel__btn:hover:not(:disabled) {
	background: var(--ceta-white);
	border-color: var(--ceta-white);
	color: var(--ceta-navy);
}

.ceta-sale .ceta-carousel__dot::before { background: rgba(255, 255, 255, 0.35); }
.ceta-sale .ceta-carousel__dot.is-active::before { background: var(--ceta-white); }

/* Sale badge and struck-through price */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	left: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.3em 0.75em;
	background: var(--ceta-accent);
	border-radius: var(--ceta-radius);
	color: var(--ceta-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.woocommerce ul.products li.product { position: relative; }

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
	display: inline-block;
	margin-right: 0.45rem;
	color: var(--ceta-grey-mid);
	font-size: 0.95rem;
	font-weight: 400;
	opacity: 1;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	background: none;
	color: var(--ceta-accent);
	text-decoration: none;
	font-weight: 700;
}

/* Related products carousel ----------------------------------------------
   The track is also a WooCommerce product list, so the grid rules for the shop
   archive would otherwise lay it out in rows. These re-assert the carousel. */

.ceta-related { margin-top: 3.5rem; }

.ceta-related__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.ceta-related__head .ceta-section__title { margin-bottom: 0; }

.woocommerce .ceta-carousel__track.products,
.ceta-carousel__track.products {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: clamp(260px, calc((100% - 2 * var(--ceta-gap)) / 3), 400px);
	gap: var(--ceta-gap);
	margin: 0;
	padding: 0.25rem 0 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.ceta-carousel__track.products::-webkit-scrollbar { display: none; }
.ceta-carousel__track.products > li.product { scroll-snap-align: start; }

/* Front page articles ----------------------------------------------------- */

.ceta-home-posts {
	background: var(--ceta-grey-light);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ceta-home-posts__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.ceta-home-posts__head .ceta-section__title { margin-bottom: 0; }

.ceta-post-card {
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ceta-post-card:hover { box-shadow: var(--ceta-shadow-lift); transform: translateY(-2px); }
.ceta-post-card__body { display: flex; flex-direction: column; flex: 1; }
.ceta-post-card__cat {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--ceta-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ceta-post-card__more {
	margin-top: auto;
	padding-top: 0.85rem;
	color: var(--ceta-accent);
	font-size: 0.9rem;
	font-weight: 600;
}

/* Gallery lightbox trigger ------------------------------------------------
   WooCommerce prints a bare magnifier emoji in the corner. Given the whole photo
   now opens the lightbox, this is a hint rather than the only way in. */

.woocommerce div.product .woocommerce-product-gallery__trigger {
	top: 0.75rem;
	right: 0.75rem;
	left: auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--ceta-border);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(4, 39, 88, 0.14);
	font-size: 1rem;
	line-height: 1;
	text-indent: 0;
	text-decoration: none;
	transition: background-color 0.16s ease, transform 0.16s ease;
	z-index: 3;
}

.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
	background: var(--ceta-white);
	transform: scale(1.06);
}

.woocommerce div.product .woocommerce-product-gallery__image a { cursor: zoom-in; }

/* Search ----------------------------------------------------------------- */

.ceta-search { display: flex; gap: 0.5rem; max-width: 480px; margin-bottom: 1.5rem; }
.ceta-search__input { flex: 1; padding: 0.7rem 0.85rem; border: 1px solid var(--ceta-border); border-radius: var(--ceta-radius); font-family: inherit; font-size: 1rem; }
.ceta-search__submit { padding: 0.7rem 1.3rem; background: var(--ceta-navy); border: 0; border-radius: var(--ceta-radius); color: var(--ceta-white); font-family: inherit; font-weight: 600; cursor: pointer; }
.ceta-search__submit:hover { background: var(--ceta-navy-light); }

/* 404 -------------------------------------------------------------------- */

.ceta-404 { max-width: 620px; }
.ceta-404__text { color: var(--ceta-grey-mid); margin-bottom: 1.5rem; }

/* Category grid balance ---------------------------------------------------
   Five cards in an auto-fill grid land as four across and one stranded on its own
   row. Two then three reads as a decision rather than a leftover. */

.ceta-cat-grid--5 { grid-template-columns: repeat(6, 1fr); }
.ceta-cat-grid--5 .ceta-cat-card { grid-column: span 2; }
.ceta-cat-grid--5 .ceta-cat-card:nth-child(1),
.ceta-cat-grid--5 .ceta-cat-card:nth-child(2) { grid-column: span 3; }

@media (max-width: 900px) {
	.ceta-cat-grid--5 { grid-template-columns: repeat(2, 1fr); }
	.ceta-cat-grid--5 .ceta-cat-card,
	.ceta-cat-grid--5 .ceta-cat-card:nth-child(1),
	.ceta-cat-grid--5 .ceta-cat-card:nth-child(2) { grid-column: span 1; }
}

@media (max-width: 560px) {
	.ceta-cat-grid--5 { grid-template-columns: 1fr; }
}

/* Cart, checkout and account ---------------------------------------------
   These are layouts rather than reading, so page.php gives them the full container
   and the block markup is dressed to match the rest of the site. */

.ceta-shop-page { max-width: var(--ceta-container); }
.ceta-shop-page .alignwide,
.ceta-shop-page .wp-block-woocommerce-cart,
.ceta-shop-page .wp-block-woocommerce-checkout {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Typography and rules inside the blocks */
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
	font-family: var(--ceta-font);
	color: var(--ceta-navy);
	letter-spacing: -0.01em;
}

.wc-block-cart-items__header {
	color: var(--ceta-grey-mid);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ceta-border);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--ceta-border); }

.wc-block-cart-item__image img {
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
}

.wc-block-components-product-name {
	color: var(--ceta-navy);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-name:hover { color: var(--ceta-accent); }

.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
	font-variant-numeric: tabular-nums;
	color: var(--ceta-navy);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.45rem;
	font-weight: 700;
}

/* The totals panel reads as a card rather than a floating column */
.wp-block-woocommerce-cart-order-summary-block,
.wc-block-components-sidebar .wc-block-cart__totals-title + *,
.wc-block-cart__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	background: var(--ceta-grey-light);
}

.wc-block-cart__sidebar > *,
.wc-block-checkout__sidebar > * {
	background: var(--ceta-grey-light);
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
	padding: 1.25rem;
}

/* Inputs */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select select {
	font-family: var(--ceta-font);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	background: var(--ceta-white);
	color: var(--ceta-grey-dark);
}

/* The block styles set the border through their own custom properties, so matching the
   theme needs the class chain rather than the bare element. */
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select select:focus {
	border-color: var(--ceta-accent);
	box-shadow: 0 0 0 3px rgba(156, 8, 53, 0.14);
	outline: none;
}

/* Buttons */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--ceta-accent);
	border: 2px solid var(--ceta-accent);
	border-radius: var(--ceta-radius);
	font-family: var(--ceta-font);
	font-weight: 600;
	color: var(--ceta-white);
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--ceta-accent-dark);
	border-color: var(--ceta-accent-dark);
	color: var(--ceta-white);
}

.wc-block-components-button.is-link {
	color: var(--ceta-accent);
	font-family: var(--ceta-font);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
}

.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
	font-family: var(--ceta-font);
	color: var(--ceta-navy);
}

/* Notices and shipping */
.wc-block-components-notice-banner {
	border-radius: var(--ceta-radius);
	font-family: var(--ceta-font);
}

.wc-block-components-shipping-rates-control__package {
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	padding: 0.85rem 1rem;
	background: var(--ceta-white);
}

.wc-block-components-radio-control__option { font-family: var(--ceta-font); }

/* The quote-only message reaches checkout through the same filter as the cart */
.ceta-quote-notice { font-family: var(--ceta-font); }

/* Empty cart */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 { color: var(--ceta-navy); }

@media (max-width: 782px) {
	.wc-block-cart__sidebar > *,
	.wc-block-checkout__sidebar > * { padding: 1rem; }
}

.ceta-quote-context {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	background: var(--ceta-accent-bg);
	border-left: 3px solid var(--ceta-accent);
	border-radius: var(--ceta-radius);
	font-weight: 600;
	color: var(--ceta-navy);
}

/* Header account link ----------------------------------------------------- */

.ceta-account-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--ceta-radius);
	color: var(--ceta-white);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ceta-account-link:hover { background: rgba(255, 255, 255, 0.12); color: var(--ceta-white); }
.ceta-account-link__icon { display: inline-flex; }

@media (max-width: 560px) {
	.ceta-topbar__notice { display: none; }
	.ceta-topbar__register { display: none; }
}

/* Sign in and register ---------------------------------------------------- */

.ceta-auth {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	max-width: 520px;
}

.ceta-auth--split {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	max-width: 100%;
}

.ceta-auth__panel {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
	box-shadow: var(--ceta-shadow);
}

.ceta-auth__panel--register { background: var(--ceta-grey-light); box-shadow: none; }

.ceta-auth__title { margin: 0 0 0.4rem; font-size: 1.4rem; }
.ceta-auth__lead { color: var(--ceta-grey-mid); margin-bottom: 1.5rem; }
.ceta-auth__benefits { margin: 0 0 1.5rem; }
.ceta-auth__note { color: var(--ceta-grey-mid); font-size: 0.9rem; }

.ceta-auth__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}

.ceta-auth__lost { font-size: 0.92rem; }

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.92rem;
	color: var(--ceta-grey-mid);
}

/* Account pages -----------------------------------------------------------
   The navigation runs across the top rather than down a left column. WooCommerce
   floats the two panes at 30/68% and those floats fought the grid: the menu ended
   up hanging in the middle of the page with the content squeezed underneath it.
   A row of tabs sidesteps the floats entirely and reads better on a phone. */

.woocommerce-account .woocommerce {
	display: block;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--ceta-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 1.1rem;
	border-bottom: 3px solid transparent;
	color: var(--ceta-grey-mid);
	font-weight: 600;
	font-size: 0.96rem;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s ease, border-color 0.16s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--ceta-navy);
	border-bottom-color: var(--ceta-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ceta-navy);
	border-bottom-color: var(--ceta-accent);
}

.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a { color: var(--ceta-accent); }

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

/* Matching the specificity of the float reset above, which sets max-width: none.
   Full container width leaves the dashboard text running to 1160px, which is well
   past a comfortable line length. */
.woocommerce-account .woocommerce-MyAccount-content { max-width: 900px; }

/* Orders table */
.woocommerce-account .woocommerce-orders-table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
	overflow: hidden;
	font-size: 0.96rem;
}

.woocommerce table.shop_table thead th {
	padding: 0.85rem 1rem;
	background: var(--ceta-grey-light);
	border-bottom: 1px solid var(--ceta-border);
	color: var(--ceta-grey-mid);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 0.9rem 1rem;
	border-top: 1px solid var(--ceta-border);
	vertical-align: middle;
}

.woocommerce table.shop_table .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
.woocommerce-orders-table__cell-order-number a { font-weight: 700; text-decoration: none; }

.woocommerce-orders-table__cell-order-status {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ceta-navy);
}

/* Addresses */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ceta-gap);
}

.woocommerce-Address {
	padding: 1.25rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
}

.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.woocommerce-Address address { font-style: normal; color: var(--ceta-grey-dark); line-height: 1.7; }

/* Account forms */
.woocommerce form .form-row { margin-bottom: 1.1rem; }

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--ceta-navy);
	font-weight: 600;
	font-size: 0.94rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .woocommerce-EditAccountForm input.input-text {
	width: 100%;
	padding: 0.72rem 0.9rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	font-family: inherit;
	font-size: 1rem;
	color: var(--ceta-grey-dark);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--ceta-accent);
	box-shadow: 0 0 0 3px rgba(156, 8, 53, 0.14);
	outline: none;
}

.woocommerce form .form-row .required { color: var(--ceta-accent); border: 0; text-decoration: none; }

.woocommerce-EditAccountForm fieldset {
	margin: 1.75rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--ceta-border);
	border-radius: 6px;
}

.woocommerce-EditAccountForm legend {
	padding: 0 0.5rem;
	color: var(--ceta-navy);
	font-weight: 700;
}

@media (max-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 1.5rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-wrap: nowrap; }
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 0.6rem 0.85rem; font-size: 0.9rem; }

	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr { display: block; border-top: 1px solid var(--ceta-border); }
	.woocommerce table.shop_table td { display: flex; justify-content: space-between; gap: 1rem; border-top: 0; padding: 0.5rem 1rem; }
	.woocommerce table.shop_table td::before { content: attr(data-title); font-weight: 700; color: var(--ceta-grey-mid); }
}

/* Newsletter ------------------------------------------------------------- */

.ceta-newsletter {
	background: var(--ceta-grey-light);
	border-top: 1px solid var(--ceta-border);
	padding-block: clamp(2rem, 4vw, 3.25rem);
}

.ceta-newsletter__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
}

.ceta-newsletter__title { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.ceta-newsletter__sub { margin: 0; color: var(--ceta-grey-mid); max-width: 52ch; }

.ceta-newsletter__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.6rem;
	align-items: start;
}

.ceta-newsletter__input {
	width: 100%;
	padding: 0.78rem 0.95rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	font-family: inherit;
	font-size: 1rem;
	color: var(--ceta-grey-dark);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ceta-newsletter__input:focus {
	border-color: var(--ceta-accent);
	box-shadow: 0 0 0 3px rgba(156, 8, 53, 0.14);
	outline: none;
}

.ceta-newsletter__submit { white-space: nowrap; }

.ceta-newsletter__small,
.ceta-newsletter__result {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.82rem;
	color: var(--ceta-grey-mid);
}

.ceta-newsletter__result:empty { display: none; }
.ceta-newsletter__result--ok { color: var(--ceta-green); font-weight: 600; }
.ceta-newsletter__result--error { color: var(--ceta-red); }

/* Off-screen rather than display:none, which some bots skip. */
.ceta-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 860px) {
	.ceta-newsletter__inner { grid-template-columns: 1fr; }
}

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

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

.ceta-footer {
	/* No blanket top margin: with the newsletter band sitting directly above, that margin
	   showed as a white strip between two coloured blocks. */
	margin-top: 0;
	padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem;
	background: var(--ceta-navy);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
}

/* Only when nothing sits between the content and the footer. */
.ceta-main + .ceta-footer { margin-top: 3rem; }

.ceta-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.ceta-footer a:hover { color: var(--ceta-accent); }

.ceta-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 2.25rem;
	padding-bottom: 2.25rem;
}

@media (max-width: 860px) {
	.ceta-footer__grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.ceta-footer .ceta-logo-text,
.ceta-footer__heading { color: var(--ceta-white); }

.ceta-footer__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.9rem; }
.ceta-footer__about { margin-top: 1rem; max-width: 42ch; }

.ceta-footer__contact,
.ceta-footer__list,
.ceta-footer__legal-list { margin: 0; padding: 0; list-style: none; }

.ceta-footer__contact { margin-top: 1rem; }
.ceta-footer__contact li,
.ceta-footer__list li { margin-bottom: 0.15rem; }

.ceta-footer__contact li a,
.ceta-footer__list a,
.ceta-footer__legal-list a {
	display: inline-block;
	padding-block: 0.32rem;
}

.ceta-footer__legal {
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.ceta-footer__legal-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0.75rem 0; }
.ceta-footer__company { color: rgba(255, 255, 255, 0.8); margin-bottom: 0.3rem; }
.ceta-footer__address,
.ceta-footer__copyright { margin: 0.3rem 0 0; }

/* WooCommerce notices ---------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: 0.9rem 1.15rem;
	margin-bottom: 1.5rem;
	background: var(--ceta-grey-light);
	border-left: 3px solid var(--ceta-accent);
	border-radius: var(--ceta-radius);
	list-style: none;
}

.woocommerce-error { background: #FDECEA; border-left-color: var(--ceta-red); }

/* Sticky mobile CTA ------------------------------------------------------ */

.ceta-sticky-cta { display: none; }

/* Category page blocks ---------------------------------------------------- */

.ceta-cat-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--ceta-border);
}

.ceta-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceta-benefits__item,
.ceta-ticks li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.98rem;
}

.ceta-benefits__item::before,
.ceta-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.55rem;
	height: 0.95rem;
	border: solid var(--ceta-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ceta-cat-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ceta-cat-body { margin: 3rem 0 0; }

/* Range copy that opens and closes ---------------------------------------- */

.ceta-seo-block {
	--ceta-seo-collapsed: 150px;
	margin: 3.5rem 0 0;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ceta-border);
}

.ceta-seo-block__title { font-size: 1.35rem; }

.ceta-seo-block__body { max-width: 760px; }

.ceta-seo-block__body > *:first-child { margin-top: 0; }
.ceta-seo-block__body > *:last-child { margin-bottom: 0; }

/*
 * Only ever applied by the script, and only to copy that actually overruns. Without
 * JavaScript the class is never added and the block stays open, which is the state the
 * markup ships in.
 */
.ceta-seo-block--collapsible .ceta-seo-block__body {
	position: relative;
	overflow: hidden;
	max-height: var(--ceta-seo-collapsed);
}

/* The fade tells the reader there is more below without needing to say so. */
.ceta-seo-block--collapsible .ceta-seo-block__body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4.5rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ceta-white));
	pointer-events: none;
}

.ceta-seo-block--collapsible.is-open .ceta-seo-block__body { max-height: none; }
.ceta-seo-block--collapsible.is-open .ceta-seo-block__body::after { content: none; }

.ceta-seo-block__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--ceta-navy);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.ceta-seo-block__toggle:hover .ceta-seo-block__toggle-text,
.ceta-seo-block__toggle:focus-visible .ceta-seo-block__toggle-text { text-decoration: underline; }

.ceta-seo-block__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.ceta-seo-block.is-open .ceta-seo-block__chevron { transform: translateY(2px) rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
	.ceta-seo-block__chevron { transition: none; }
}

/* On the grey panels the fade has to match the panel, not the page. */
.ceta-seo-block--onGrey .ceta-seo-block__body::after {
	background: linear-gradient(to bottom, rgba(244, 245, 247, 0), var(--ceta-grey-light));
}


.ceta-cat-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin: 3rem 0 0;
	padding: 2rem;
	background: var(--ceta-grey-light);
	border-radius: var(--ceta-radius);
}

.ceta-cat-columns h2 { font-size: 1.35rem; }

.ceta-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.ceta-cat-applications { margin: 3rem 0 0; }

.ceta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ceta-chips__item {
	padding: 0.4rem 0.9rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: 999px;
	font-size: 0.92rem;
}

/* CTA band */
.ceta-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 3rem 0 0;
	padding: 2rem;
	background: var(--ceta-navy);
	border-radius: var(--ceta-radius);
	color: var(--ceta-white);
}

.ceta-cta-band__title { color: var(--ceta-white); margin: 0 0 0.3rem; font-size: 1.45rem; }
.ceta-cta-band__sub { margin: 0; color: rgba(255, 255, 255, 0.82); }

.ceta-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.ceta-cta-band__phone {
	color: var(--ceta-white);
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	white-space: nowrap;
}

.ceta-cta-band__phone:hover { color: var(--ceta-white); text-decoration: underline; }

/* FAQs */
.ceta-faqs { margin: 3rem 0 0; }

.ceta-faq {
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	margin-bottom: 0.6rem;
	background: var(--ceta-white);
}

.ceta-faq__q {
	padding: 0.95rem 1.15rem;
	font-weight: 600;
	color: var(--ceta-navy);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.75rem;
}

.ceta-faq__q::-webkit-details-marker { display: none; }

.ceta-faq__q::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: -0.4rem;
	border: solid var(--ceta-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.ceta-faq[open] .ceta-faq__q::after { transform: rotate(-135deg); margin-top: -0.15rem; }

.ceta-faq__a { padding: 0 1.15rem 1.05rem; }
.ceta-faq__a p { margin: 0; color: var(--ceta-grey-dark); }

@media (max-width: 600px) {
	.ceta-cat-columns { padding: 1.5rem; }
	.ceta-cta-band { padding: 1.5rem; }
}

/* Front page ------------------------------------------------------------- */

.ceta-hero__copy > :first-child { margin-top: 0; }
.ceta-hero__copy h1 { color: var(--ceta-white); max-width: 20ch; }
.ceta-hero__copy p { color: rgba(255, 255, 255, 0.85); max-width: 62ch; font-size: 1.08rem; }
.ceta-hero__copy a { color: var(--ceta-white); }

.ceta-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.ceta-hero__ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--ceta-white);
}

.ceta-hero__ghost:hover {
	background: var(--ceta-white);
	border-color: var(--ceta-white);
	color: var(--ceta-navy);
}

.ceta-benefits--onDark {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	gap: 0.75rem 2rem;
}

.ceta-benefits--onDark .ceta-benefits__item { color: rgba(255, 255, 255, 0.9); }
.ceta-benefits--onDark .ceta-benefits__item::before { border-color: var(--ceta-white); }

.ceta-cat-card__intro {
	display: block;
	margin-top: 0.35rem;
	color: var(--ceta-grey-mid);
	font-size: 0.92rem;
	line-height: 1.5;
}

.ceta-cat-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--ceta-grey-light) 0%, #E8EAEE 100%);
}

/* Featured products band */
.ceta-featured {
	background: var(--ceta-grey-light);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.ceta-featured__head { margin-bottom: 1.75rem; }
.ceta-featured__head .ceta-section__title { margin-bottom: 0.35rem; }
.ceta-featured__sub { margin: 0; color: var(--ceta-grey-mid); }
.ceta-featured__more { margin: 0.5rem 0 0; text-align: center; }

/* Home delivery band */
.ceta-home-delivery { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.ceta-home-delivery__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.ceta-home-delivery__copy h2 { margin-top: 0; }
.ceta-home-delivery__copy p { color: var(--ceta-grey-mid); max-width: 52ch; }
.ceta-home-delivery__widget .ceta-delivery { margin: 0; }

@media (max-width: 860px) {
	.ceta-home-delivery__inner { grid-template-columns: 1fr; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > .summary { grid-column: 1; }
}

/*
 * Seven top-level items plus a logo and a basket need about 1085px. Below that the last
 * item used to run underneath the basket, so the menu becomes a button rather than
 * overlapping, and the band just above it is tightened to buy the last hundred pixels.
 */
@media (min-width: 1024px) and (max-width: 1200px) {
	.ceta-nav__list { gap: 0.7rem; }
	.ceta-nav__list > li > a { font-size: 0.9rem; }
}

@media (max-width: 1023px) {
	.ceta-nav-toggle { display: block; order: 3; }

	.ceta-nav {
		order: 4;
		flex-basis: 100%;
		display: none;
		padding-bottom: 1rem;
	}

	.ceta-nav.is-open { display: block; }

	.ceta-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ceta-nav__list > li { border-top: 1px solid var(--ceta-border); }
	.ceta-nav__list a { padding: 0.85rem 0.25rem; }

	.ceta-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0.5rem 1rem;
	}

	.ceta-header__inner { flex-wrap: wrap; min-height: 64px; }
}


@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }

	.ceta-sticky-cta {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.85rem;
		padding: 0.7rem 1rem;
		background: var(--ceta-white);
		border-top: 1px solid var(--ceta-border);
		box-shadow: 0 -2px 14px rgba(4, 39, 88, 0.14);
	}

	.ceta-sticky-cta[hidden] { display: none; }

	.ceta-sticky-cta__price {
		font-size: 1.15rem;
		font-weight: 700;
		color: var(--ceta-navy);
		font-variant-numeric: tabular-nums;
		line-height: 1.2;
	}

	.ceta-sticky-cta__price .ceta-price-inc,
	.ceta-sticky-cta__price .ceta-price-note { display: none; }

	.ceta-sticky-cta__button { white-space: nowrap; padding: 0.7rem 1.25rem; }

	body.single-product { padding-bottom: 72px; }
}

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

/* Contact page ------------------------------------------------------------ */

.ceta-contact__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* One card should not stretch to the full container width on its own. */
.ceta-contact-card:only-child { max-width: 380px; }

.ceta-contact-card {
	display: grid;
	gap: 0.35rem;
	padding: 1.4rem 1.5rem;
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

a.ceta-contact-card:hover,
a.ceta-contact-card:focus-visible {
	border-color: var(--ceta-navy);
	box-shadow: var(--ceta-shadow-lift);
	transform: translateY(-2px);
}

.ceta-contact-card__icon {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 0.4rem;
	background: var(--ceta-grey-light);
	border-radius: 12px;
	color: var(--ceta-navy);
}

a.ceta-contact-card:hover .ceta-contact-card__icon {
	background: var(--ceta-navy);
	color: var(--ceta-white);
}

.ceta-contact-card__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ceta-grey-mid);
}

.ceta-contact-card__value {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--ceta-navy);
	line-height: 1.4;
}

.ceta-contact-card__note {
	font-size: 0.9rem;
	color: var(--ceta-grey-mid);
}

.ceta-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}

.ceta-contact__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--ceta-navy);
}

.ceta-contact__intro {
	margin: 0 0 1.75rem;
	max-width: 56ch;
	color: var(--ceta-grey-dark);
}

/* The form is the whole point of the page, so it gets the card treatment. */
.ceta-contact__form {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius-lg);
	box-shadow: var(--ceta-shadow);
}

.ceta-contact__form > p:last-child { margin-bottom: 0; }

.ceta-contact__aside {
	display: grid;
	gap: 1.25rem;
	position: sticky;
	top: 96px;
}

.ceta-contact-panel {
	padding: 1.6rem;
	background: var(--ceta-grey-light);
	border-radius: var(--ceta-radius-lg);
}

.ceta-contact-panel--legal {
	background: var(--ceta-navy);
	color: rgba(255, 255, 255, 0.82);
}

.ceta-contact-panel__title {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	color: var(--ceta-navy);
}

.ceta-contact-panel--legal .ceta-contact-panel__title { color: var(--ceta-white); }

.ceta-contact-steps {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ceta-contact-steps__item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.ceta-contact-steps__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--ceta-navy);
	border-radius: 999px;
	color: var(--ceta-white);
	font-size: 0.85rem;
	font-weight: 700;
}

.ceta-contact-steps__text { display: grid; gap: 0.2rem; }
.ceta-contact-steps__text strong { color: var(--ceta-navy); }
.ceta-contact-steps__text span { font-size: 0.92rem; color: var(--ceta-grey-dark); }

.ceta-contact-legal {
	display: grid;
	gap: 0.9rem;
	margin: 0;
}

.ceta-contact-legal dt {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.ceta-contact-legal dd {
	margin: 0.15rem 0 0;
	color: var(--ceta-white);
	line-height: 1.5;
}

@media (max-width: 880px) {
	.ceta-contact__grid { grid-template-columns: 1fr; }
	.ceta-contact__aside { position: static; }
}

/* Footer logo, WhatsApp and map ------------------------------------------- */

.ceta-footer__logo {
	display: inline-block;
	margin-bottom: 1rem;
}

.ceta-footer__logo img {
	width: auto;
	max-width: 200px;
	height: auto;
}

.ceta-footer__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.ceta-footer__whatsapp span {
	display: inline-flex;
	flex: 0 0 auto;
}

.ceta-footer__whatsapp svg {
	width: 17px;
	height: 17px;
}

.ceta-contact__map {
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius-lg);
	overflow: hidden;
	line-height: 0;
}

.ceta-contact__map iframe {
	display: block;
	width: 100%;
	height: clamp(260px, 34vw, 400px);
	border: 0;
}

/* Product video ----------------------------------------------------------- */

.ceta-video {
	margin-top: clamp(2rem, 5vw, 3rem);
}

.ceta-video__title {
	margin: 0 0 1rem;
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	color: var(--ceta-navy);
}

.ceta-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ceta-navy);
	border-radius: var(--ceta-radius-lg);
	overflow: hidden;
}

.ceta-video__frame iframe,
.ceta-video__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Order line thumbnails --------------------------------------------------- */

.ceta-line {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ceta-line-thumb {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
	overflow: hidden;
	background: var(--ceta-white);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ceta-line-thumb:hover,
.ceta-line-thumb:focus-visible {
	border-color: var(--ceta-navy);
	box-shadow: var(--ceta-shadow-lift);
}

.ceta-line-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ceta-line__name { min-width: 0; }

@media (max-width: 480px) {
	.ceta-line-thumb { width: 44px; height: 44px; }
}

/* Payment link landing --------------------------------------------------- */

.ceta-paylink {
	max-width: 460px;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--ceta-white);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius-lg);
	box-shadow: var(--ceta-shadow);
	text-align: center;
}

.ceta-paylink__title { margin: 0 0 0.5rem; font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--ceta-navy); }
.ceta-paylink__note { margin: 0 0 1.5rem; color: var(--ceta-grey-mid); }

.ceta-paylink__amount {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ceta-navy);
}

.ceta-paylink__vat { margin: 0.35rem 0 1.75rem; font-size: 0.9rem; color: var(--ceta-grey-mid); }
.ceta-paylink .ceta-button { width: 100%; justify-content: center; }
.ceta-paylink__help { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ceta-grey-mid); }

/* Offloading confirmation ---------------------------------------------------
   Only rendered by the classic checkout. The block checkout draws its own field
   from the additional-fields API and takes WooCommerce's styling. */

.ceta-offloading {
	margin: 1.25rem 0;
	padding: 1rem 1.15rem;
	background: var(--ceta-grey-light);
	border: 1px solid var(--ceta-border);
	border-radius: var(--ceta-radius);
}

.ceta-offloading__label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 600;
	color: var(--ceta-navy);
	cursor: pointer;
}

.ceta-offloading__label input { margin-top: 0.25rem; flex: 0 0 auto; }

.ceta-offloading__help {
	margin: 0.55rem 0 0 1.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ceta-grey-mid);
}