/*
 * CE Storefront — design system.
 *
 * The brief, from the strategy document: the specification table is the hero of
 * a product page, filters are the primary navigation, and fast and plain beats
 * decorated. Purchase officers open these pages on office desktops and on site
 * phones with poor signal. Page speed converts better than a hero video.
 *
 * Palette is drawn from the trade itself — the blue of an engineering drawing,
 * the grey-green of a printed price list, brass for figures that matter.
 */

:root {
	--ce-paper:        #f4f5f3;
	--ce-surface:      #ffffff;
	--ce-sunk:         #eaece8;
	--ce-ink:          #15191c;
	--ce-ink-soft:     #4e565b;
	--ce-ink-faint:    #7b8387;
	--ce-rule:         #d3d7d2;
	--ce-rule-strong:  #b4bab4;
	--ce-blue:         #17456b;
	--ce-blue-dark:    #0f2f4a;
	--ce-blue-soft:    #e3eaf1;
	--ce-brass:        #a8802c;
	--ce-ok:           #2e6b4f;

	--ce-measure: 68ch;
	--ce-radius: 2px;

	--ce-font: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	--ce-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--ce-display: "Barlow Condensed", "Arial Narrow", sans-serif;
}

/* ---------------------------------------------------------------- base */

body {
	font-family: var(--ce-font);
	color: var(--ce-ink);
	background: var(--ce-paper);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body,
.site-content,
.storefront-full-width-content .site-content { background: var(--ce-paper); }

a { color: var(--ce-blue); }
a:hover { color: var(--ce-blue-dark); }

h1, h2, h3, h4,
.page-title, .entry-title {
	font-family: var(--ce-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: .005em;
	text-wrap: balance;
	color: var(--ce-ink);
}

:focus-visible { outline: 2px solid var(--ce-blue); outline-offset: 2px; }

.ce-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

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

.site-header {
	background: var(--ce-surface) !important;
	border-bottom: 1px solid var(--ce-rule);
	padding: 0 !important;
}

.ce-topbar {
	background: var(--ce-blue);
	color: #dce6ef;
	font-size: .8rem;
}
.ce-topbar .ce-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: .4rem;
}
.ce-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.ce-topbar a:hover { text-decoration: underline; }
.ce-topbar__note { color: #b7cadb; }

.ce-masthead .ce-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}
.ce-brand { display: flex; flex-direction: column; text-decoration: none; }
.ce-brand__name {
	font-family: var(--ce-display);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--ce-ink);
}
.ce-brand__tag {
	font-family: var(--ce-mono);
	font-size: .62rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ce-ink-faint);
	margin-top: .3rem;
}
.ce-masthead__actions { display: flex; align-items: center; gap: 1rem; }

.ce-search { display: flex; }
.ce-search input[type="search"] {
	border: 1px solid var(--ce-rule-strong);
	border-right: 0;
	border-radius: var(--ce-radius) 0 0 var(--ce-radius);
	padding: .5rem .7rem;
	font-size: .9rem;
	min-width: 15rem;
	background: var(--ce-surface);
}
.ce-search button {
	border: 0;
	background: var(--ce-blue);
	color: #fff;
	padding: .5rem .9rem;
	border-radius: 0 var(--ce-radius) var(--ce-radius) 0;
	font-size: .85rem;
	cursor: pointer;
}
.ce-search button:hover { background: var(--ce-blue-dark); }

/* ------------------------------------------------------------ navigation */

.ce-nav { background: var(--ce-surface); border-top: 1px solid var(--ce-rule); }
.ce-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.ce-nav li { position: relative; }
.ce-nav a {
	display: block;
	padding: .7rem .9rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ce-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.ce-nav a:hover,
.ce-nav .current-menu-item > a {
	color: var(--ce-blue);
	border-bottom-color: var(--ce-blue);
}
.ce-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	z-index: 40;
	min-width: 15rem;
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule);
	box-shadow: 0 6px 20px rgba(21, 25, 28, .1);
	flex-direction: column;
}
.ce-nav li:hover > .sub-menu,
.ce-nav li:focus-within > .sub-menu { display: flex; }
.ce-nav .sub-menu a { padding: .5rem .9rem; font-weight: 400; border-bottom: 0; }
.ce-nav .sub-menu a:hover { background: var(--ce-blue-soft); }

/* ------------------------------------------------------------- homepage */

.ce-hero { background: var(--ce-surface); border-bottom: 1px solid var(--ce-rule); }
.ce-hero .ce-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
	padding-block: 3rem 3.25rem;
}
.ce-hero__eyebrow {
	font-family: var(--ce-mono);
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ce-blue);
	margin: 0 0 .8rem;
}
.ce-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin: 0 0 .9rem;
}
.ce-hero p {
	font-size: 1.08rem;
	color: var(--ce-ink-soft);
	max-width: 52ch;
	margin: 0 0 1.5rem;
}
.ce-cta {
	display: inline-block;
	background: var(--ce-blue);
	color: #fff !important;
	font-weight: 600;
	padding: .7rem 1.4rem;
	border-radius: var(--ce-radius);
	text-decoration: none;
}
.ce-cta:hover { background: var(--ce-blue-dark); }
.ce-cta--ghost {
	background: transparent;
	color: var(--ce-blue) !important;
	border: 1px solid var(--ce-rule-strong);
	margin-left: .5rem;
}
.ce-cta--ghost:hover { background: var(--ce-blue-soft); }

.ce-facts {
	border: 1px solid var(--ce-rule);
	background: var(--ce-paper);
}
.ce-facts__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 1.1rem;
	border-bottom: 1px solid var(--ce-rule);
}
.ce-facts__row:last-child { border-bottom: 0; }
.ce-facts__k {
	font-family: var(--ce-mono);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-ink-faint);
}
.ce-facts__v {
	font-family: var(--ce-display);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--ce-blue);
	font-variant-numeric: tabular-nums;
}

.ce-section { padding-block: 3rem; }
.ce-section--alt { background: var(--ce-surface); border-block: 1px solid var(--ce-rule); }
.ce-section__head { margin-bottom: 1.6rem; }
.ce-section__head h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .3rem; }
.ce-section__head p { color: var(--ce-ink-soft); margin: 0; max-width: 62ch; }

.ce-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1px;
	border: 1px solid var(--ce-rule);
}

/* The rules between cards are drawn by each card, not by the container bleeding
   through the gaps. With 11 cards in a 4-column grid the container technique
   left the 12th cell showing as a solid grey block. */
.ce-grid > .ce-card { box-shadow: 0 0 0 1px var(--ce-rule); }
.ce-card {
	background: var(--ce-surface);
	padding: 1.1rem 1.2rem 1.2rem;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	color: inherit;
	transition: background .12s ease;
}
.ce-card:hover { background: var(--ce-blue-soft); }
.ce-card__title {
	font-family: var(--ce-display);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.15;
	color: var(--ce-ink);
}
.ce-card__meta {
	font-family: var(--ce-mono);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ce-ink-faint);
}
.ce-card__desc { font-size: .87rem; color: var(--ce-ink-soft); line-height: 1.5; }

.ce-brands {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}
.ce-brands a {
	font-family: var(--ce-mono);
	font-size: .78rem;
	letter-spacing: .04em;
	padding: .4rem .7rem;
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	background: var(--ce-surface);
	text-decoration: none;
	color: var(--ce-ink);
}
.ce-brands a:hover { border-color: var(--ce-blue); color: var(--ce-blue); background: var(--ce-blue-soft); }

.ce-brands a.ce-brands__logo,
.ce-brands__soon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	font-family: var(--ce-mono);
	font-size: .78rem;
	color: var(--ce-ink-faint);
}
.ce-brands a.ce-brands__logo img,
.ce-brands__soon img {
	max-height: 1.6rem;
	max-width: 7rem;
	width: auto;
	height: auto;
	display: block;
}
/* Brands with no catalogue live yet read as present-but-inactive — a dashed
   border and greyed-out logo, the same idea the plain-text badge used before
   logos existed. */
.ce-brands__soon {
	padding: .4rem .7rem;
	border: 1px dashed var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	filter: grayscale(1);
	opacity: .55;
}

.ce-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
}
.ce-strip h3 {
	font-size: 1.15rem;
	margin: 0 0 .35rem;
	padding-top: .7rem;
	border-top: 2px solid var(--ce-blue);
}
.ce-strip p { margin: 0; font-size: .9rem; color: var(--ce-ink-soft); }

/* ------------------------------------------------------ woo: catalogue */

.woocommerce-products-header { padding-top: 1.5rem; }
.woocommerce-products-header__title,
.woocommerce-loop-product__title { font-family: var(--ce-display) !important; }

ul.products li.product {
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule);
	padding: .9rem !important;
	margin-bottom: 1rem !important;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem !important;
	line-height: 1.2;
	padding-bottom: .3rem !important;
}
ul.products li.product .price {
	font-family: var(--ce-mono);
	font-size: .85rem !important;
	color: var(--ce-ink-soft) !important;
	font-variant-numeric: tabular-nums;
}
ul.products li.product .button,
.ce-enquire-button {
	background: var(--ce-blue) !important;
	color: #fff !important;
	font-weight: 600;
	border-radius: var(--ce-radius) !important;
	font-size: .82rem !important;
}
ul.products li.product .button:hover { background: var(--ce-blue-dark) !important; }

/* -------------------------------------------------- woo: product page */

.single-product div.product .product_title { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.single-product div.product p.price {
	font-family: var(--ce-mono);
	font-variant-numeric: tabular-nums;
	color: var(--ce-ink) !important;
}
.ce-price-note {
	display: inline-block;
	font-family: var(--ce-mono);
	font-size: .85rem;
	padding: .25rem .55rem;
	border-radius: var(--ce-radius);
	background: var(--ce-sunk);
	color: var(--ce-ink-soft);
}
.ce-price-note--quote { background: var(--ce-blue-soft); color: var(--ce-blue); }

.ce-your-price { display: block; font-family: var(--ce-mono); color: var(--ce-ok); font-weight: 600; }
.ce-list-price { display: block; font-family: var(--ce-mono); font-size: .82rem; color: var(--ce-ink-faint); }

/* The specification table is the hero of the page, so it is styled like a
   datasheet rather than a WooCommerce attribute list. */
.ce-spec-table-wrap { margin: 1.5rem 0; }
.ce-spec-table-wrap .ce-spec-table__heading {
	font-size: 1.1rem;
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--ce-ink);
}
table.ce-spec-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule);
	font-size: .88rem;
}
table.ce-spec-table th,
table.ce-spec-table td {
	text-align: left;
	padding: .45rem .7rem;
	border-bottom: 1px solid var(--ce-rule);
	vertical-align: top;
}
table.ce-spec-table tr:last-child th,
table.ce-spec-table tr:last-child td { border-bottom: 0; }
table.ce-spec-table th {
	width: 38%;
	font-weight: 600;
	color: var(--ce-ink-soft);
	background: var(--ce-paper);
	font-size: .78rem;
	letter-spacing: .02em;
}
table.ce-spec-table td { font-family: var(--ce-mono); font-size: .82rem; color: var(--ce-ink); }

/* Enquiry panel — every page has to end in an action. */
.ce-enquire {
	border: 1px solid var(--ce-rule);
	border-left: 3px solid var(--ce-blue);
	background: var(--ce-surface);
	padding: 1.1rem 1.2rem;
	margin: 1.5rem 0;
}
.ce-enquire h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.ce-enquire p { margin: 0 0 .8rem; color: var(--ce-ink-soft); font-size: .9rem; max-width: 52ch; }

/* ---------------------------------------------------------------- footer */

.site-footer {
	background: var(--ce-blue-dark) !important;
	color: #c6d4e0 !important;
	padding: 2.5rem 0 1.5rem !important;
	border-top: 0;
}
.site-footer a { color: #fff !important; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.ce-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}
.ce-footer-grid h4 {
	font-family: var(--ce-mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8fb0cb;
	margin: 0 0 .7rem;
	font-weight: 500;
}
.ce-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.ce-footer-grid li { margin-bottom: .3rem; font-size: .88rem; }
.ce-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .16);
	padding-top: 1rem;
	font-size: .78rem;
	color: #8fb0cb;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	justify-content: space-between;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.ce-hero .ce-wrap { grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem; }
	.ce-masthead .ce-wrap { flex-wrap: wrap; }
	.ce-search input[type="search"] { min-width: 0; width: 100%; }
	.ce-masthead__actions { width: 100%; }
	.ce-search { width: 100%; }
	table.ce-spec-table th { width: 45%; }
}

@media (max-width: 600px) {
	.ce-nav ul { overflow-x: auto; flex-wrap: nowrap; }
	.ce-nav a { white-space: nowrap; }
	.ce-topbar .ce-wrap { justify-content: center; text-align: center; }
}

/* ------------------------------------------------- break out of Storefront
 *
 * Storefront wraps everything in .col-full, which is max-width'd and padded.
 * Our header, footer and homepage sections are meant to be full-bleed with
 * .ce-wrap controlling the inner measure, so without this the page renders as
 * a narrow column with grey gutters down both sides.
 *
 * Scoped deliberately: shop and product pages still want Storefront's column.
 */
.site-header > .col-full,
.site-footer > .col-full {
	max-width: none;
	padding: 0;
	margin: 0;
}

.home .site-content > .col-full,
.home #content > .col-full {
	max-width: none;
	padding: 0;
	margin: 0;
}

.home .site-content { padding-top: 0; }
.home .content-area { width: 100%; margin: 0; float: none; }
.home .site-main { margin: 0; }

/* Storefront adds a top margin to the content area that shows as a grey band
   between the navigation and the hero. */
.home .site-content,
.home #primary { padding-block: 0; }

.site-header { margin-bottom: 0 !important; }

/* Category and product archives keep the column, but lose the cramped top. */
.woocommerce-page:not(.home) .site-content { padding-top: 1.5rem; }

/* Brands without a loaded catalogue: listed, but not linked to an empty page. */
.ce-brands__soon {
	font-family: var(--ce-mono);
	font-size: .78rem;
	letter-spacing: .04em;
	padding: .4rem .7rem;
	border: 1px dashed var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	color: var(--ce-ink-faint);
	background: transparent;
}

/* --------------------------------------------------- catalogue loop cards
 *
 * With no photography yet, every card rendered the same grey placeholder.
 * The specification is what a buyer scans, so it takes that space instead.
 */
.ce-loop-spec {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .9rem 0 .8rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--ce-rule);
}
.ce-loop-spec__bore {
	font-family: var(--ce-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ce-blue);
	font-variant-numeric: tabular-nums;
}
.ce-loop-spec__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ce-loop-spec__chips span {
	font-family: var(--ce-mono);
	font-size: .66rem;
	letter-spacing: .03em;
	padding: .18rem .4rem;
	background: var(--ce-sunk);
	color: var(--ce-ink-soft);
	border-radius: var(--ce-radius);
}

/* Archive header: Storefront centres it inside a tall empty band. */
.woocommerce-products-header {
	padding: 1.25rem 0 .5rem;
	text-align: left;
}
.woocommerce-products-header__title.page-title {
	text-align: left;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	margin: 0 0 .4rem;
}
.term-description,
.woocommerce-products-header .term-description {
	text-align: left;
	max-width: var(--ce-measure);
	color: var(--ce-ink-soft);
	margin: 0 0 1rem;
}
.term-description p { margin: 0; }

.woocommerce-breadcrumb {
	font-size: .82rem !important;
	color: var(--ce-ink-faint) !important;
	padding: .8rem 0 0 !important;
	margin: 0 !important;
}

.woocommerce-result-count,
.woocommerce-ordering { margin-bottom: 1rem !important; font-size: .85rem; }

ul.products li.product .woocommerce-loop-product__link { display: block; }

/* Storefront reserves a tall band around the archive title and sorting rows.
   On a catalogue that pushes the first product below the fold for no gain. */
.woocommerce-products-header,
.woocommerce-products-header.woocommerce-products-header {
	padding: .25rem 0 0 !important;
	margin: 0 0 .25rem !important;
}
.storefront-breadcrumb { padding: .6rem 0 0 !important; margin: 0 !important; }
.storefront-sorting { margin: 0 0 1rem !important; padding: 0 !important; }
.storefront-sorting:last-of-type { margin-top: 1rem !important; }
.woocommerce-page .site-main { margin-top: 0 !important; }
.woocommerce-page .site-content { padding-top: 0 !important; }
ul.products { margin-top: 0 !important; }

/* Product page: pull the title up and give the gallery column less weight,
   since the specification table is what the page is really for. */
.single-product div.product .summary { margin-bottom: 1.5rem; }
.single-product .woocommerce-product-gallery { margin-bottom: 1.5rem; }
.single-product div.product .woocommerce-tabs { padding-top: 1rem; }
.single-product .entry-summary .price { margin-bottom: .75rem; }

/* Products with no photograph give their full width to the tables. */
.ce-no-gallery.single-product div.product .summary.entry-summary {
	width: 100%;
	float: none;
	margin: 0;
}

/* ------------------------------------------------------- size/price table */

.ce-size-table-wrap { margin: 1.75rem 0; }
.ce-size-table__heading {
	font-size: 1.1rem;
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--ce-ink);
}
.ce-size-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--ce-rule);
	background: var(--ce-surface);
}
table.ce-size-table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: .87rem;
	margin: 0;
}
table.ce-size-table th,
table.ce-size-table td {
	text-align: left;
	padding: .45rem .7rem;
	border-bottom: 1px solid var(--ce-rule);
}
table.ce-size-table thead th {
	font-family: var(--ce-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-ink-faint);
	background: var(--ce-paper);
	font-weight: 500;
	white-space: nowrap;
}
table.ce-size-table tbody tr:last-child th,
table.ce-size-table tbody tr:last-child td { border-bottom: 0; }
table.ce-size-table tbody tr:hover { background: var(--ce-blue-soft); }
table.ce-size-table tbody th {
	font-family: var(--ce-mono);
	font-weight: 600;
	font-size: .84rem;
	white-space: nowrap;
}
table.ce-size-table td {
	font-family: var(--ce-mono);
	font-size: .82rem;
	color: var(--ce-ink-soft);
}
table.ce-size-table .ce-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--ce-ink);
	white-space: nowrap;
}
.ce-size-table__note {
	font-size: .78rem;
	color: var(--ce-ink-faint);
	margin: .5rem 0 0;
}

.ce-availability {
	display: inline-block;
	font-size: .78rem;
	padding: .2rem .5rem;
	border-radius: var(--ce-radius);
	background: #f2ead9;
	color: var(--ce-brass);
	cursor: help;
}

/* ============================================================== facets
 *
 * Filters are the primary navigation on a catalogue this size, so the panel
 * sits alongside the grid rather than hiding behind a toggle. On mobile it
 * collapses above the results, where it is still the first thing reachable.
 */

.ce-facets {
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule);
	padding: 1rem 1.1rem 1.2rem;
	margin-bottom: 1.5rem;
}

.ce-facets__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .6rem;
	margin-bottom: .8rem;
	border-bottom: 2px solid var(--ce-ink);
}
.ce-facets__head h2 { font-size: 1.05rem; margin: 0; }
.ce-facets__clear {
	font-size: .78rem;
	font-family: var(--ce-mono);
	text-decoration: none;
	color: var(--ce-blue);
}
.ce-facets__clear:hover { text-decoration: underline; }

.ce-facets__active {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-bottom: 1rem;
}
.ce-facets__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	padding: .28rem .55rem;
	background: var(--ce-blue);
	color: #fff !important;
	border-radius: var(--ce-radius);
	text-decoration: none;
	line-height: 1.3;
}
.ce-facets__chip:hover { background: var(--ce-blue-dark); }
.ce-facets__chip span[aria-hidden] { opacity: .75; font-size: .9rem; }

.ce-facet { border-bottom: 1px solid var(--ce-rule); }
.ce-facet:last-of-type { border-bottom: 0; }
.ce-facet > summary {
	cursor: pointer;
	list-style: none;
	padding: .55rem 0;
	font-family: var(--ce-mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ce-ink-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ce-facet > summary::-webkit-details-marker { display: none; }
.ce-facet > summary::after {
	content: "+";
	font-size: 1rem;
	color: var(--ce-ink-faint);
	line-height: 1;
}
.ce-facet[open] > summary::after { content: "–"; }
.ce-facet > summary:hover { color: var(--ce-blue); }

.ce-facet ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.ce-facet li { margin: 0; }
.ce-facet li a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .28rem 0;
	text-decoration: none;
	color: var(--ce-ink);
	font-size: .86rem;
	line-height: 1.35;
}
.ce-facet li a:hover { color: var(--ce-blue); }
.ce-facet li a:hover .ce-facet__box { border-color: var(--ce-blue); }

.ce-facet__box {
	flex: 0 0 auto;
	width: .85rem;
	height: .85rem;
	border: 1.5px solid var(--ce-rule-strong);
	border-radius: 2px;
	position: relative;
}
.ce-facet li a.is-selected .ce-facet__box {
	background: var(--ce-blue);
	border-color: var(--ce-blue);
}
.ce-facet li a.is-selected .ce-facet__box::after {
	content: "";
	position: absolute;
	left: .22rem;
	top: .03rem;
	width: .22rem;
	height: .45rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ce-facet li a.is-selected .ce-facet__label { font-weight: 600; color: var(--ce-blue); }

.ce-facet__label { flex: 1 1 auto; }
.ce-facet__count {
	font-family: var(--ce-mono);
	font-size: .72rem;
	color: var(--ce-ink-faint);
	font-variant-numeric: tabular-nums;
}
.ce-facet__more {
	font-size: .74rem;
	color: var(--ce-ink-faint);
	margin: 0 0 .6rem;
}

/* Two columns from tablet up: the panel is navigation, so it stays visible
   beside the results rather than pushing them down the page. */
@media (min-width: 900px) {
	.woocommerce-page .site-main { position: relative; }
	.ce-facets {
		float: left;
		width: 15.5rem;
		margin-right: 1.75rem;
		margin-bottom: 2rem;
		position: sticky;
		top: 1rem;
	}
	.woocommerce-page ul.products,
	.woocommerce-page .storefront-sorting,
	.woocommerce-page .woocommerce-pagination { overflow: hidden; }
	.woocommerce-page ul.products { clear: none; }
}

@media (max-width: 899px) {
	.ce-facets { padding: .8rem .9rem 1rem; }
	.ce-facet[open] ul { max-height: 14rem; overflow-y: auto; }
}

.ce-facets__none {
	font-size: .85rem;
	color: var(--ce-ink-soft);
	margin: 0;
	padding: .5rem 0;
}

/* ============================================================================
   BRAND HUBS  —  /brands/{brand}/{category}/
   ========================================================================= */

.ce-hub { padding: 1.5rem 0 3rem; }

.ce-crumbs {
	font-size: .8rem;
	color: var(--ce-ink-faint);
	margin: 0 0 1.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.ce-crumbs a { color: var(--ce-ink-soft); text-decoration: none; }
.ce-crumbs a:hover { color: var(--ce-blue); text-decoration: underline; }
.ce-crumbs span { color: var(--ce-rule-strong); }

.ce-hub__head {
	border-bottom: 2px solid var(--ce-ink);
	padding-bottom: 1rem;
	margin-bottom: 1.8rem;
}

.ce-hub__logo {
	display: block;
	max-height: 2.6rem;
	max-width: 12rem;
	width: auto;
	height: auto;
	margin-bottom: .8rem;
}

.ce-hub__head h1 {
	font-family: var(--ce-display);
	font-size: clamp(1.9rem, 4.5vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 .5rem;
}

.ce-hub__standfirst {
	font-size: 1.05rem;
	color: var(--ce-ink-soft);
	max-width: var(--ce-measure);
	margin: 0;
}

.ce-hub section { margin-bottom: 2.5rem; }

.ce-hub h2 {
	font-family: var(--ce-display);
	font-size: 1.45rem;
	letter-spacing: .01em;
	margin: 0 0 .9rem;
}

/* The range summary reuses the spec table, so a hub and a product page state
   their facts in the same shape. */
.ce-hub__range .ce-spec-table { max-width: 46rem; }

.ce-hub__copy { max-width: var(--ce-measure); }
.ce-hub__copy p { margin: 0 0 1rem; line-height: 1.65; }
.ce-hub__copy h2 { margin-top: 1.8rem; }

.ce-hub__siblings .ce-brands a span,
.ce-hublinks a span {
	color: var(--ce-ink-faint);
	font-variant-numeric: tabular-nums;
	font-size: .8em;
	margin-left: .25rem;
}

.ce-hub__cta {
	background: var(--ce-blue-soft);
	border-left: 3px solid var(--ce-blue);
	padding: 1.4rem 1.5rem;
}

.ce-hub__cta h2 { margin-bottom: .4rem; }
.ce-hub__cta p { max-width: var(--ce-measure); color: var(--ce-ink-soft); margin: 0 0 1rem; }

/* "By brand" links above a category listing — the entry point into the hubs. */
.ce-hublinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	background: var(--ce-sunk);
	border: 1px solid var(--ce-rule);
	border-radius: var(--ce-radius);
}

.ce-hublinks__label {
	font-family: var(--ce-display);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .78rem;
	color: var(--ce-ink-faint);
	margin-right: .2rem;
}

.ce-hublinks a {
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	padding: .2rem .6rem;
	font-size: .85rem;
	text-decoration: none;
	color: var(--ce-ink);
}

.ce-hublinks a:hover { border-color: var(--ce-blue); color: var(--ce-blue); }

/* ============================================================================
   ENQUIRY CART  —  the RFQ list, in place of a shopping cart
   ========================================================================= */

.ce-enquiry-link { position: relative; }

.ce-enquiry-link__count {
	display: inline-block;
	min-width: 1.4em;
	margin-left: .35rem;
	padding: 0 .35em;
	border-radius: 999px;
	background: var(--ce-brass);
	color: #fff;
	font-size: .78em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Quantity boxes on the size table. */
.ce-size-table .ce-qty {
	width: 5rem;
	padding: .25rem .4rem;
	text-align: right;
	font-family: var(--ce-mono);
	font-size: .85rem;
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	background: var(--ce-surface);
}

.ce-size-table .ce-qty:focus { outline: 2px solid var(--ce-blue); outline-offset: 1px; }

/* Confirmation that a change registered — the row is the feedback, because the
   list itself lives in another page. */
.ce-size-table tr.ce-added > * { background: var(--ce-blue-soft); transition: background .4s ease; }

.ce-enquire-row {
	display: flex;
	align-items: end;
	gap: .8rem;
	margin: 1rem 0;
}

.ce-enquire-row label { display: grid; gap: .25rem; font-size: .85rem; }
.ce-enquire-row .ce-qty { width: 6rem; padding: .35rem .5rem; text-align: right; }

/* ---------------------------------------------------------- enquiry page */

.ce-enquiry__empty,
.ce-enquiry__note {
	color: var(--ce-ink-soft);
	max-width: var(--ce-measure);
}

.ce-enquiry__table { width: 100%; margin-bottom: 2rem; }
.ce-enquiry__table input[type="number"] { width: 5.5rem; text-align: right; padding: .25rem .4rem; }

.ce-enquiry__remove {
	border: 1px solid var(--ce-rule-strong);
	background: var(--ce-surface);
	color: var(--ce-ink-soft);
	border-radius: var(--ce-radius);
	cursor: pointer;
	line-height: 1;
	padding: .2rem .5rem;
	font-size: 1rem;
}

.ce-enquiry__remove:hover { border-color: #a3312a; color: #a3312a; }

.ce-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.ce-field-grid label,
.ce-field-wide {
	display: grid;
	gap: .3rem;
	font-size: .9rem;
	font-weight: 600;
	/* Fields sit at the top of their cell. Without this a label with fewer rows
	   than its neighbour (GSTIN against Delivery state, which carries a hint)
	   stretched its input to match the tallest in the row. */
	align-content: start;
}

/* The caption is one grid item. A bare text node beside an <abbr> made two, so
   the required asterisk dropped onto a line of its own. */
.ce-field__caption { display: block; }

.ce-field-grid input,
.ce-field-grid select,
.ce-field-wide textarea {
	font: inherit;
	font-weight: 400;
	padding: .45rem .6rem;
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	background: var(--ce-surface);
	width: 100%;
}

.ce-field-grid small { font-weight: 400; color: var(--ce-ink-faint); font-size: .78rem; }
.ce-field-wide { margin-bottom: 1.2rem; max-width: var(--ce-measure); }

.ce-field-grid abbr,
.ce-field-wide abbr { color: #a3312a; text-decoration: none; border: 0; cursor: help; }

/* The honeypot must be reachable by nothing a person uses, and invisible
   without display:none — some bots skip hidden fields, which is the point. */
.ce-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ce-enquiry__message { margin-top: .8rem; font-size: .9rem; }
.ce-enquiry__message.is-error { color: #a3312a; }

.ce-enquiry__done {
	background: var(--ce-blue-soft);
	border-left: 3px solid var(--ce-blue);
	padding: 1.4rem 1.5rem;
}

.ce-enquiry__done h2 { margin-top: 0; }

/* The spec line under a product photograph. Lighter than the standalone block
   it grew out of — the photo is doing the work of catching the eye, and the
   specification is there to separate cards that look alike. */
.ce-loop-spec--under {
	min-height: 0;
	padding: .5rem 0 0;
	background: none;
	border: 0;
	text-align: center;
}

.ce-loop-spec--under .ce-loop-spec__bore { font-size: .95rem; }
.ce-loop-spec--under .ce-loop-spec__chips { justify-content: center; }

/* ============================================================================
   COMPARISON
   ========================================================================= */

.ce-compare-tick {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	color: var(--ce-ink-soft);
	cursor: pointer;
	margin-top: .4rem;
}

.ce-compare-tick input { margin: 0; }
.ce-compare-single { margin: 1rem 0; }

/* Floating tray. Appears only once two products are ticked — one is not a
   comparison. */
.ce-compare-tray {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .8rem;
	background: var(--ce-surface);
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}

/* A class selector beats the user-agent rule for [hidden], so display:flex above
   kept the tray on screen with nothing in it. */
.ce-compare-tray[hidden] { display: none; }

.ce-compare-tray__clear {
	border: 0;
	background: none;
	color: var(--ce-ink-faint);
	font-size: .8rem;
	cursor: pointer;
	text-decoration: underline;
}

.ce-compare-tray__clear:hover { color: var(--ce-ink); }

.ce-compare__scroll { overflow-x: auto; }

.ce-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.ce-compare__table th,
.ce-compare__table td {
	border: 1px solid var(--ce-rule);
	padding: .55rem .7rem;
	vertical-align: top;
	text-align: left;
}

.ce-compare__table thead th {
	background: var(--ce-sunk);
	min-width: 12rem;
	position: relative;
}

.ce-compare__corner { background: var(--ce-surface) !important; min-width: 9rem !important; }
.ce-compare__table tbody th { background: var(--ce-sunk); font-weight: 600; width: 9rem; }
.ce-compare__shot { display: block; margin-bottom: .4rem; }
.ce-compare__shot img { max-width: 100%; height: auto; }

.ce-compare__drop {
	position: absolute;
	top: .3rem;
	right: .3rem;
	border: 1px solid var(--ce-rule-strong);
	background: var(--ce-surface);
	border-radius: var(--ce-radius);
	cursor: pointer;
	line-height: 1;
	padding: .1rem .35rem;
}

.ce-compare__drop:hover { border-color: #a3312a; color: #a3312a; }

/* A row where every product says the same thing is not what the reader came
   for; it stays legible but recedes. */
.ce-compare__same td { color: var(--ce-ink-faint); }

.ce-compare__note { font-size: .85rem; color: var(--ce-ink-soft); margin-top: .8rem; }
.ce-compare--empty { max-width: var(--ce-measure); }

/* ============================================================================
   TOOLS
   ========================================================================= */

.ce-tool__panel {
	border: 1px solid var(--ce-rule);
	border-radius: var(--ce-radius);
	padding: 1.1rem 1.2rem 1.3rem;
	margin-bottom: 1.6rem;
	background: var(--ce-surface);
}

.ce-tool__panel h2 {
	font-family: var(--ce-display);
	font-size: 1.25rem;
	margin: 0 0 .8rem;
}

.ce-tool__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ce-tool__row label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; }

.ce-tool__row input,
.ce-tool__row select {
	font: inherit;
	font-weight: 400;
	padding: .4rem .55rem;
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	background: var(--ce-surface);
	min-width: 11rem;
}

.ce-tool__out { border-collapse: collapse; width: 100%; max-width: 26rem; }

.ce-tool__out th,
.ce-tool__out td {
	border-bottom: 1px solid var(--ce-rule);
	padding: .35rem .5rem;
	text-align: left;
	font-size: .9rem;
}

.ce-tool__out td { font-family: var(--ce-mono); text-align: right; }

/* The unit you typed in, so the row you already know reads as the anchor. */
.ce-tool__out tr.is-source th,
.ce-tool__out tr.is-source td { background: var(--ce-blue-soft); font-weight: 600; }

.ce-tool__note {
	font-size: .85rem;
	color: var(--ce-ink-soft);
	max-width: var(--ce-measure);
	margin: .8rem 0 0;
}

.ce-tool__scroll { overflow-x: auto; }

/* FAQ blocks — shared shape on both brand hubs and tool pages. */
.ce-hub__faq, .ce-tool__faq { margin-top: 1.75rem; }
.ce-faq__item {
	padding: .9rem 0;
	border-bottom: 1px solid var(--ce-rule);
	max-width: var(--ce-measure);
}
.ce-faq__item:last-child { border-bottom: 0; }
.ce-faq__item h3, .ce-faq__item h4 {
	font-family: var(--ce-font);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 .35rem;
}
.ce-faq__item p { margin: 0; color: var(--ce-ink-soft); font-size: .92rem; }

/* .ce-spec-table sizes its first column at 38%, which is right for the two-column
   label/value table it was built for. These reference tables are four and five
   columns of numbers, where that leaves the first column enormous and squeezes
   kPa and MPa together at the right edge. Fixed layout divides them evenly. */
.ce-tool__scroll table.ce-spec-table { table-layout: fixed; }
.ce-tool__scroll table.ce-spec-table th { width: auto; }
.ce-tool__bores th, .ce-tool__bores td { font-family: var(--ce-mono); }

/* The bore table is one table holding two mm/inch pairs side by side, so it
   reads as four unrelated columns. The rule down the middle says where one pair
   ends and the next begins. */
.ce-tool__bores tr > *:nth-child(3) { border-left: 2px solid var(--ce-rule-strong); }

/* ---------------------------------------------------------- flange finder */

/* The dimension tables are unverified, and a wrong pitch circle means holes
   that do not line up. The notice is styled to be impossible to scroll past. */
.ce-flange__warning {
	border-left: 4px solid var(--ce-brass);
	background: #fdf6e6;
	padding: .9rem 1.1rem;
	margin-bottom: 1.6rem;
	font-size: .9rem;
	line-height: 1.55;
	max-width: var(--ce-measure);
}

.ce-flange__warning strong { display: block; margin-bottom: .2rem; color: #6b4c07; }

.ce-flange__table th[scope="row"] { font-family: var(--ce-mono); }

/* table.ce-spec-table td sets text-align:left and outranks a single class, so
   this has to match on the element too or the numbers stay ragged. */
table.ce-flange__table td { text-align: right; }
table.ce-flange__table thead th { text-align: right; }
table.ce-flange__table thead th:first-child,
table.ce-flange__table tbody th { text-align: left; }

.ce-flange__stock,
.ce-flange__missing { margin: .6rem 0 0; padding-left: 1.1rem; }

.ce-flange__stock li,
.ce-flange__missing li { margin-bottom: .3rem; font-size: .9rem; }

.ce-flange__missing li { font-family: var(--ce-mono); color: var(--ce-ink-soft); }

/* ---------------------------------------------------------- generic tool warning
   Same "impossible to scroll past" treatment as .ce-flange__warning above,
   generalised so the thread chart, valve guide and fire hydrant estimator can
   all use one class instead of three near-duplicates. --risk is a stronger,
   red-tinted variant for the fire hydrant estimator, where the stakes of being
   trusted as more than a budgeting aid are a life-safety failure, not a
   mis-drilled flange. */
.ce-tool__warning {
	border-left: 4px solid var(--ce-brass);
	background: #fdf6e6;
	padding: .9rem 1.1rem;
	margin-bottom: 1.6rem;
	font-size: .9rem;
	line-height: 1.55;
	max-width: var(--ce-measure);
}

.ce-tool__warning strong { display: block; margin-bottom: .2rem; color: #6b4c07; }

.ce-tool__warning--risk {
	border-left-color: #a3312a;
	background: #fbeae8;
}

.ce-tool__warning--risk strong { color: #a3312a; }

/* ---------------------------------------------------------------- thread chart */

.ce-thread__table th[scope="row"] { font-family: var(--ce-mono); }

table.ce-thread__table td { text-align: right; }
table.ce-thread__table thead th { text-align: right; }
table.ce-thread__table thead th:first-child,
table.ce-thread__table thead th:nth-child(2),
table.ce-thread__table tbody th { text-align: left; }

.ce-thread__form-heading {
	font-weight: 600;
	margin: 1rem 0 .3rem;
}

.ce-thread__stock { margin: 0 0 .8rem; padding-left: 1.1rem; }
.ce-thread__stock li { margin-bottom: .3rem; font-size: .9rem; }

.ce-thread__notes { margin: 0; padding-left: 1.1rem; max-width: var(--ce-measure); }
.ce-thread__notes li { margin-bottom: .5rem; font-size: .9rem; line-height: 1.5; }

/* -------------------------------------------------------------- valve guide */

.ce-valve-guide__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.ce-valve-guide__cols h3 { font-size: 1rem; margin: 0 0 .5rem; }

.ce-valve-guide__list { margin: 0; padding-left: 1.1rem; }
.ce-valve-guide__list li { margin-bottom: .5rem; font-size: .9rem; line-height: 1.5; }

.ce-valve-guide__match-heading {
	font-weight: 600;
	font-size: .9rem;
	margin: 1rem 0 .3rem;
}

.ce-valve-guide__stock { margin: 0 0 .6rem; padding-left: 1.1rem; }
.ce-valve-guide__stock li { margin-bottom: .25rem; font-size: .9rem; }

/* ----------------------------------------------------- fire hydrant estimator */

.ce-hydrant__table th[scope="row"] { width: 40%; }

.ce-hydrant__links { margin: 0 0 1rem; padding-left: 1.1rem; }
.ce-hydrant__links li { margin-bottom: .3rem; font-size: .9rem; }

/* ============================================================================
   BUYER PORTAL — reorder, saved lists, delivery addresses, certificates
   ========================================================================= */

.ce-enquiry__save-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin: 0 0 1.4rem;
	padding: .8rem 1rem;
	border: 1px solid var(--ce-rule);
	border-radius: var(--ce-radius);
	background: var(--ce-blue-soft);
}

.ce-enquiry__save-list .ce-tool__note { margin: 0; }

.ce-reorder-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem 1rem;
	margin: 1.2rem 0;
}

.ce-reorder-note {
	font-size: .82rem;
	color: var(--ce-ink-soft);
}

.ce-order-certificates {
	margin: 1.5rem 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--ce-rule);
	border-radius: var(--ce-radius);
	background: var(--ce-surface);
}

.ce-order-certificates h2 {
	font-family: var(--ce-display);
	font-size: 1.1rem;
	margin: 0 0 .6rem;
}

.ce-order-certificates ul { margin: 0; padding-left: 1.1rem; }
.ce-order-certificates li { margin-bottom: .3rem; }

.ce-saved-lists__rename {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.ce-saved-lists__rename input[type="text"] {
	padding: .3rem .5rem;
	border: 1px solid var(--ce-rule-strong);
	border-radius: var(--ce-radius);
	font: inherit;
	min-width: 10rem;
}

.ce-delivery-addresses table { margin-bottom: 2rem; }