/* ==========================================================================
   ANMOR — theme stylesheet
   Built to the approved redesign handoff. Tokens, spacing, radii and type come
   from that spec; nothing here is estimated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Colour — OKLCH as specified, with the hex the handoff lists alongside. */
	--navy:        oklch(32% 0.11 262);      /* ~#1B3A6B  top bars, cat button, badge */
	--navy-dark:   oklch(26% 0.10 262);
	--accent:      oklch(45% 0.16 255);      /* ~#2F5FD6  links and CTAs */
	--accent-dark: oklch(39% 0.16 255);
	--orange:      oklch(75% 0.15 70);       /* ~#E8A33D  cart pill */
	--orange-dark: oklch(68% 0.15 70);

	--ink:     oklch(20% 0.02 255);          /* ~#1A1D29  headings */
	--body:    oklch(38% 0.015 255);         /* ~#4A4D57  body copy */
	--muted:   oklch(55% 0.015 255);         /* ~#7C808C  meta */
	--muted-2: oklch(62% 0.015 255);

	--bg:        oklch(98% 0.004 250);
	--surface:   #ffffff;
	--tint:      oklch(96% 0.006 250);       /* ~#F3F5F8 */
	--line:      oklch(90% 0.005 250);       /* ~#DCDFE5 */
	--line-soft: oklch(94% 0.004 250);

	--dark:   oklch(15% 0.025 260);          /* ~#191D2B  footer */
	--dark-2: oklch(20% 0.03 260);           /* CTA banner */

	--ok:    oklch(52% 0.13 155);
	--warn:  oklch(60% 0.13 65);
	--alert: oklch(55% 0.19 25);

	/* Type */
	--display: "Manrope", -apple-system, "Segoe UI", sans-serif;
	--font:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;

	/* Radius */
	--r-btn:  8px;
	--r-card: 12px;
	--r-pill: 100px;

	/* Space */
	--gutter: 48px;
	--sec-y:  88px;
	--gap:    22px;

	/* Elevation */
	--sh-bar: 0 4px 10px oklch(20% 0.02 255 / .05);
	--sh-pop: 0 12px 28px oklch(20% 0.02 255 / .18);

	--maxw: 1320px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--display);
	font-weight: 800;
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: -.02em;
}
p { margin: 0; }
img { max-inline-size: 100%; block-size: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

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

.wrap { max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text {
	position: absolute; inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; inset: 0 auto auto 0; z-index: 999;
	clip-path: none; inline-size: auto; block-size: auto;
	padding: 12px 20px; background: var(--navy); color: #fff;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 26px;
	border: 1px solid transparent; border-radius: var(--r-btn);
	font-family: var(--display); font-size: 14px; font-weight: 700;
	line-height: 1.2; cursor: pointer; white-space: nowrap;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-dark); color: #fff; }
.btn--orange { background: var(--orange); color: var(--ink); }
.btn--orange:hover { background: var(--orange-dark); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--onDark { background: transparent; border-color: oklch(100% 0 0 / .3); color: #fff; }
.btn--onDark:hover { background: oklch(100% 0 0 / .1); border-color: #fff; color: #fff; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 15px 32px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: progress; }

/* --------------------------------------------------------------------------
   4. Utility bar
   -------------------------------------------------------------------------- */
.utility { background: var(--navy); color: #fff; font-size: 13.5px; }
.utility__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-block-size: 42px;
	max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
	white-space: nowrap; overflow: hidden;
}
.utility a { color: #fff; font-weight: 600; }
.utility a:hover { color: var(--orange); }
.utility__place { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.masthead {
	position: sticky; inset-block-start: 0; z-index: 60;
	background: var(--surface);
	box-shadow: var(--sh-bar);
}
.masthead__top {
	display: flex; align-items: center; gap: 28px;
	max-inline-size: var(--maxw); margin-inline: auto;
	padding: 16px var(--gutter);
}
.masthead__logo img { max-block-size: 56px; inline-size: auto; display: block; }

.menutrigger {
	display: inline-flex; align-items: center; gap: 9px;
	border: 0; background: transparent; cursor: pointer;
	font-family: var(--display); font-size: 14px; font-weight: 700;
	letter-spacing: .06em; color: var(--ink);
}
.menutrigger:hover { color: var(--accent); }

.masthead__account {
	margin-inline-start: auto;
	display: flex; align-items: center; gap: 22px;
	font-size: 13.5px; font-weight: 600; color: var(--body);
}
.masthead__greet { white-space: nowrap; }

.iconbtn {
	position: relative; display: inline-grid; place-items: center;
	inline-size: 40px; block-size: 40px;
	border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.iconbtn:hover { color: var(--accent); }

.cartpill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 9px 18px; border: 0; border-radius: var(--r-pill);
	background: var(--orange); color: var(--ink);
	font-family: var(--display); font-size: 13.5px; font-weight: 700;
	cursor: pointer;
}
.cartpill:hover { background: var(--orange-dark); }
.cartpill__count {
	display: inline-grid; place-items: center;
	min-inline-size: 20px; block-size: 20px; padding-inline: 5px;
	border-radius: var(--r-pill);
	background: var(--navy); color: #fff;
	font-size: 11.5px; font-weight: 700;
}

/* Search row --------------------------------------------------------------- */
.searchrow { max-inline-size: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) 18px; }
.searchbar {
	position: relative;
	display: flex; align-items: stretch; block-size: 52px;
	border-radius: var(--r-btn);
	box-shadow: var(--sh-bar);
}
.catbtn {
	display: inline-flex; align-items: center; gap: 10px;
	padding-inline: 20px; border: 0;
	border-start-start-radius: var(--r-btn); border-end-start-radius: var(--r-btn);
	background: var(--navy); color: #fff;
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.catbtn:hover { background: var(--navy-dark); }
.catbtn__chev { transition: transform .2s ease; }
.catbtn[aria-expanded="true"] .catbtn__chev { transform: rotate(180deg); }

.catmenu {
	position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0;
	inline-size: 280px; max-block-size: 420px; overflow-y: auto;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); box-shadow: var(--sh-pop);
	z-index: 70;
}
.catmenu[hidden] { display: none; }
.catmenu a {
	display: block; padding: 12px 20px;
	font-size: 13.5px; font-weight: 600; color: oklch(30% 0.02 255);
	border-block-end: 1px solid var(--line-soft);
}
.catmenu a:last-child { border-block-end: 0; }
.catmenu a:hover { background: var(--tint); color: var(--accent); }

.searchbar__field {
	flex: 1; min-inline-size: 0;
	border: 1px solid var(--line); border-inline: 0;
	padding-inline: 18px;
	font: inherit; font-size: 14px; color: var(--ink);
	background: var(--surface);
}
.searchbar__field::placeholder { color: var(--muted-2); }
.searchbar__field:focus { outline: none; }
.searchbar:focus-within { box-shadow: var(--sh-bar), 0 0 0 3px oklch(45% 0.16 255 / .14); }

.searchbar__scope {
	border: 1px solid var(--line); border-inline: 0;
	padding-inline: 14px; max-inline-size: 190px;
	font: inherit; font-size: 13px; color: var(--body);
	background: var(--surface); cursor: pointer;
}
.searchbar__scope:focus { outline: none; }

.searchbar__go {
	inline-size: 58px; border: 0;
	border-start-end-radius: var(--r-btn); border-end-end-radius: var(--r-btn);
	background: var(--accent); color: #fff; cursor: pointer;
	display: grid; place-items: center;
}
.searchbar__go:hover { background: var(--accent-dark); }

.hamburger { display: none; }

/* Fullscreen nav overlay ---------------------------------------------------- */
.navoverlay {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	background: oklch(15% 0.025 260 / .96);
	backdrop-filter: blur(6px);
}
.navoverlay[hidden] { display: none; }
.navoverlay__close {
	position: absolute; inset-block-start: 28px; inset-inline-end: 32px;
	inline-size: 46px; block-size: 46px;
	display: grid; place-items: center;
	border: 1px solid oklch(100% 0 0 / .25); border-radius: var(--r-pill);
	background: transparent; color: #fff; cursor: pointer;
}
.navoverlay__close:hover { background: oklch(100% 0 0 / .1); }
.navoverlay__list { list-style: none; margin: 0; padding: 0; text-align: center; }
.navoverlay__list a {
	display: block; padding: 10px 0;
	font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800;
	color: #fff; letter-spacing: -.02em;
}
.navoverlay__list a:hover { color: var(--orange); }
.navoverlay__aux {
	margin-block-start: 36px; display: flex; gap: 24px; justify-content: center;
	font-size: 14px; color: oklch(100% 0 0 / .7);
}
.navoverlay__aux a:hover { color: #fff; }

/* Cart drawer --------------------------------------------------------------- */
.cartdrawer { position: fixed; inset: 0; z-index: 210; }
.cartdrawer[hidden] { display: none; }
.cartdrawer__scrim { position: absolute; inset: 0; background: oklch(15% 0.025 260 / .5); }
.cartdrawer__panel {
	position: absolute; inset-block: 0; inset-inline-end: 0;
	inline-size: 380px; max-inline-size: 100%;
	background: var(--surface); box-shadow: var(--sh-pop);
	display: flex; flex-direction: column;
}
.cartdrawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 24px; border-block-end: 1px solid var(--line);
}
.cartdrawer__title { font-size: 17px; font-weight: 800; }
.cartdrawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cartdrawer__empty { color: var(--muted); font-size: 14px; }
.cartitem { display: flex; justify-content: space-between; gap: 14px; padding-block: 14px; border-block-end: 1px solid var(--line-soft); }
.cartitem__name { font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cartitem__sku { font-size: 12.5px; color: var(--muted); }
.cartitem__qty { font-family: var(--display); font-weight: 700; color: var(--accent); }
.cartdrawer__foot { padding: 20px 24px; border-block-start: 1px solid var(--line); }
.cartdrawer__foot .btn { inline-size: 100%; }

/* --------------------------------------------------------------------------
   6. Hero slider
   -------------------------------------------------------------------------- */
.hero { position: relative; block-size: 620px; overflow: hidden; background: var(--dark); }
.hero__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; visibility: hidden; transition: opacity .7s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, oklch(10% 0.03 260 / .93) 0%, oklch(10% 0.03 260 / .96) 100%);
}
.hero__copy {
	position: relative; z-index: 2; block-size: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding-inline: 120px;
	max-inline-size: var(--maxw); margin-inline: auto;
}
.hero__title {
	font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 800; color: #fff;
	margin-block-end: 18px; max-inline-size: 22ch;
}
.hero__text {
	font-size: 17px; line-height: 1.7; color: oklch(100% 0 0 / .82);
	max-inline-size: 60ch; margin-block-end: 32px;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.hero__arrow {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%);
	z-index: 3; inline-size: 46px; block-size: 46px;
	display: grid; place-items: center;
	border: 1px solid oklch(100% 0 0 / .3); border-radius: var(--r-pill);
	background: oklch(100% 0 0 / .1); color: #fff; cursor: pointer;
	transition: background-color .18s ease;
}
.hero__arrow:hover { background: oklch(100% 0 0 / .22); }
.hero__arrow--prev { inset-inline-start: 24px; }
.hero__arrow--next { inset-inline-end: 24px; }

.hero__dots {
	position: absolute; inset-block-end: 28px; inset-inline: 0; z-index: 3;
	display: flex; justify-content: center; gap: 10px;
}
.hero__dot {
	inline-size: 10px; block-size: 10px; padding: 0;
	border: 0; border-radius: var(--r-pill);
	background: oklch(100% 0 0 / .4); cursor: pointer;
	transition: background-color .2s ease, inline-size .2s ease;
}
.hero__dot.is-active { background: var(--orange); inline-size: 28px; }

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--sec-y); }
.section--tint { background: var(--tint); }
.section--divider { border-block-start: 1px solid var(--line); }
.section__head { margin-block-end: 36px; }
.section__eyebrow {
	font-family: var(--display); font-size: 12.5px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent); margin-block-end: 10px;
}
.section__title { font-size: clamp(1.625rem, 2.8vw, 2.125rem); }
.section__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* About --------------------------------------------------------------------- */
.about__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.about__text { font-size: 15.5px; line-height: 1.85; }
.about__text p + p { margin-block-start: 16px; }
.about__media img { inline-size: 100%; border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; }

/* Horizontal snap carousels -------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
	display: flex; gap: var(--gap);
	overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; padding-block-end: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; flex: none; }
.carousel__arrow {
	position: absolute; inset-block-start: 50%; transform: translateY(-50%);
	z-index: 4; inline-size: 40px; block-size: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background: var(--surface); color: var(--ink); cursor: pointer;
	box-shadow: var(--sh-bar);
}
.carousel__arrow:hover { border-color: var(--accent); color: var(--accent); }
/* Greyed at the ends rather than clicking into nothing. */
.carousel__arrow:disabled {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}
.carousel__arrow--prev { inset-inline-start: -18px; }
.carousel__arrow--next { inset-inline-end: -18px; }

/* Category photo card --------------------------------------------------------- */
.catcard {
	position: relative; display: block; color: #fff;
	inline-size: 220px; block-size: 180px;
	border-radius: var(--r-card); overflow: hidden;
	background: var(--tint);
}
.catcard img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .35s ease; }
.catcard:hover img { transform: scale(1.06); }
.catcard:hover { color: #fff; }
.catcard__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 35%, oklch(15% 0.025 260 / .85) 100%);
}
.catcard__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 16px; }
.catcard__name { font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.catcard__count { font-size: 12.5px; color: oklch(100% 0 0 / .75); margin-block-start: 2px; }

/* Product card ---------------------------------------------------------------- */
.pcard {
	display: flex; flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r-card);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.pcard:hover { border-color: oklch(82% 0.02 250); box-shadow: var(--sh-bar); }
.carousel .pcard { inline-size: 270px; }

.pcard__thumb { display: block; aspect-ratio: 1 / 1; background: var(--surface); overflow: hidden; }
.pcard__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 14px; }

.pcard__info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard__cat { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.pcard__title {
	font-family: var(--display); font-size: 14.5px; font-weight: 700;
	color: var(--ink); line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title a { color: inherit; }
.pcard__title a:hover { color: var(--accent); }
.pcard__sku { font-size: 12.5px; color: var(--muted); }
.pcard__cta { margin-block-start: auto; padding-block-start: 14px; }
.pcard__cta .btn { inline-size: 100%; }

/* Dark CTA banner ------------------------------------------------------------- */
.ctaband { background: var(--dark-2); color: #fff; }
.ctaband__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 32px; flex-wrap: wrap;
	max-inline-size: var(--maxw); margin-inline: auto; padding: 56px var(--gutter);
}
.ctaband__title { font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; margin-block-end: 8px; }
.ctaband__text { color: oklch(100% 0 0 / .72); max-inline-size: 56ch; }
.ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Client marquee ---------------------------------------------------------------- */
.clients { padding-block: 56px; overflow: hidden; }
.clients__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients__track { display: flex; gap: 64px; inline-size: max-content; animation: clientMarquee 22s linear infinite; }
.clients:hover .clients__track { animation-play-state: paused; }
.clients__item img { max-block-size: 52px; inline-size: auto; filter: grayscale(1); opacity: .6; transition: filter .2s ease, opacity .2s ease; }
.clients__item:hover img { filter: none; opacity: 1; }
@keyframes clientMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
/* A shade lighter than --dark: against the near-black page end the footer read
   as one flat void, with nothing separating it from the edge of the screen. */
.site-footer { background: oklch(20% 0.028 260); color: oklch(100% 0 0 / .68); padding-block: 64px 0; }
.site-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
	max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
	padding-block-end: 48px;
}
.site-footer__logo img { max-block-size: 52px; inline-size: auto; margin-block-end: 18px; }
.site-footer__blurb { font-size: 14px; line-height: 1.8; max-inline-size: 38ch; }
.site-footer__heading {
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: #fff;
	margin-block-end: 18px;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__list a { font-size: 14px; }
.site-footer__list a:hover { color: var(--orange); }
.site-footer__address { font-style: normal; font-size: 14px; line-height: 1.8; margin-block-end: 14px; }
.site-footer__contact a { display: block; font-size: 14px; color: #fff; }
.site-footer__contact a:hover { color: var(--orange); }

.site-footer__bottom {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	max-inline-size: var(--maxw); margin-inline: auto;
	padding: 22px var(--gutter);
	border-block-start: 1px solid oklch(100% 0 0 / .12);
	font-size: 13.5px;
}
.social { display: flex; gap: 12px; }
.social a {
	inline-size: 36px; block-size: 36px;
	display: grid; place-items: center;
	border: 1px solid oklch(100% 0 0 / .18); border-radius: var(--r-pill);
	color: #fff;
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   9. Shop
   -------------------------------------------------------------------------- */
.breadcrumb {
	max-inline-size: var(--maxw); margin-inline: auto;
	padding: 20px var(--gutter) 0;
	font-size: 13px; color: var(--muted);
}
.breadcrumb a:hover { color: var(--accent); }

.shop {
	display: grid; grid-template-columns: 260px minmax(0, 1fr);
	gap: 32px; align-items: start;
	padding-block: 28px var(--sec-y);
}
.shop__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-block: 8px 24px; }

.filtercard {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); overflow: hidden;
	margin-block-end: 20px;
}
.filtercard__head {
	padding: 15px 18px; border-block-end: 1px solid var(--line);
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.filtercard__body { padding: 8px 0; }
.filterlist { list-style: none; margin: 0; padding: 0; }
.filterlist a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 18px; font-size: 13.5px; color: var(--body);
}
.filterlist a:hover { background: var(--tint); color: var(--accent); }
.filterlist .is-active { color: var(--accent); font-weight: 600; }
.countpill {
	min-inline-size: 26px; padding: 2px 8px;
	border-radius: var(--r-pill); background: var(--tint);
	font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center;
}

.shop__toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	margin-block-end: 22px; font-size: 13.5px; color: var(--muted);
}
.shop__toolbar select {
	padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-btn);
	background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink);
}

ul.products {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px var(--gap);
	list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { content: none; display: none; }
/* The grid sizes the cards; WooCommerce still ships its own float layout and
   sizes them again. woocommerce-smallscreen.css is the one that bites, with
   ul.products[class*="columns-"] li.product { width: 48% } — an attribute
   selector, so it outranks any plain-class rule here and left every card at
   161px inside a 335px column. Matched selector for selector below rather
   than dropping their stylesheet, which also carries the small-screen cart
   and account tables. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	inline-size: auto;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

.pagination, .woocommerce-pagination ul {
	display: flex; gap: 6px; justify-content: center;
	list-style: none; margin: 44px 0 0; padding: 0;
}
.pagination a, .pagination span,
.woocommerce-pagination a, .woocommerce-pagination span {
	min-inline-size: 40px; padding: 9px 12px;
	border: 1px solid var(--line); border-radius: var(--r-btn);
	background: var(--surface); text-align: center; font-size: 13.5px; color: var(--body);
	display: block;
}
.pagination a:hover, .woocommerce-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current, .woocommerce-pagination .current {
	background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Product detail
   -------------------------------------------------------------------------- */
.product-main {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px; padding-block: 28px 56px; align-items: start;
}

.gallery__main {
	block-size: 440px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r-card);
	display: grid; place-items: center; overflow: hidden;
}
.gallery__main img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; padding: 20px; }
.gallery__thumbs { display: flex; gap: 12px; margin-block-start: 12px; }
.gallery__thumb {
	inline-size: 88px; block-size: 88px;
	border: 1px solid var(--line); border-radius: var(--r-btn);
	display: grid; place-items: center; overflow: hidden; background: var(--surface);
}
.gallery__thumb.is-active { border-color: var(--accent); }
.gallery__thumb img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; padding: 6px; }

.pinfo__badges { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; flex-wrap: wrap; }
.badge {
	display: inline-flex; align-items: center;
	padding: 5px 12px; border-radius: var(--r-pill);
	font-family: var(--display); font-size: 11.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.badge--brand { background: var(--navy); color: #fff; }
.badge--sku { background: var(--tint); color: var(--body); font-family: var(--font); text-transform: none; letter-spacing: 0; }
.pinfo__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block-end: 16px; }
.pinfo__desc { font-size: 15px; line-height: 1.8; margin-block-end: 24px; }

.qtyrow { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; }
.stepper button {
	inline-size: 42px; block-size: 46px; border: 0;
	background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer;
}
.stepper button:hover { background: var(--tint); }
.stepper input {
	inline-size: 52px; block-size: 46px; border: 0; text-align: center;
	font: inherit; font-weight: 600; color: var(--ink);
	border-inline: 1px solid var(--line);
}
.stepper input:focus { outline: none; }

.pinfo__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 24px; }

.callout {
	padding: 16px 18px; border-radius: var(--r-btn);
	background: oklch(75% 0.15 70 / .12);
	border-inline-start: 3px solid var(--orange);
	font-size: 14px; color: var(--ink); margin-block-end: 24px;
}

.spectable { inline-size: 100%; border-collapse: collapse; }
.spectable th, .spectable td {
	padding: 12px 16px; border-block-end: 1px solid var(--line);
	text-align: start; font-size: 14px; vertical-align: top;
}
.spectable th { inline-size: 36%; font-weight: 600; color: var(--muted); }
.spectable tr:nth-child(odd) { background: var(--tint); }

.doclink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); margin-block-start: 16px; }

/* Quote form ----------------------------------------------------------------- */
.quote { background: var(--tint); }
.quote__inner { max-inline-size: var(--maxw); margin-inline: auto; padding: var(--sec-y) var(--gutter); }
.quote__title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block-end: 10px; }
.quote__lead { max-inline-size: 60ch; margin-block-end: 32px; }
.quote__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-inline-size: 780px; }
.quote__field { display: flex; flex-direction: column; gap: 7px; }
.quote__field--wide { grid-column: 1 / -1; }
.quote__label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.quote__required { color: var(--alert); }
.quote__input {
	padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-btn);
	background: var(--surface); font: inherit; font-size: 14px; color: var(--ink);
}
.quote__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(45% 0.16 255 / .14); }
.quote__input--area { min-block-size: 120px; resize: vertical; }
.quote__input--invalid { border-color: var(--alert); }
.quote__error:not(:empty) { font-size: 12.5px; color: var(--alert); }
.quote__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-block-start: 24px; }
.quote__notice { padding: 14px 18px; border-radius: var(--r-btn); font-weight: 600; margin-block-end: 24px; }
.quote__notice--ok { background: oklch(52% 0.13 155 / .12); color: var(--ok); }
.quote__notice--error { background: oklch(55% 0.19 25 / .1); color: var(--alert); }
.quote__feedback--ok { color: var(--ok); font-weight: 600; }
.quote__feedback--error { color: var(--alert); font-weight: 600; }
.quote__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.quote__context { margin-block-end: 20px; font-size: 13.5px; color: var(--muted); }
.quote__context strong { color: var(--ink); }

/* Availability ---------------------------------------------------------------- */
.availability {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; border-radius: var(--r-pill);
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.availability::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.availability--in-stock { background: oklch(52% 0.13 155 / .12); color: var(--ok); }
.availability--low-stock { background: oklch(60% 0.13 65 / .14); color: var(--warn); }
.availability--on-order,
.availability--lead-time { background: var(--tint); color: var(--muted); }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.product-main { grid-template-columns: 1fr; gap: 32px; }
	.carousel__arrow--prev { inset-inline-start: 4px; }
	.carousel__arrow--next { inset-inline-end: 4px; }
}

@media (max-width: 900px) {
	.about__grid { grid-template-columns: 1fr; gap: 32px; }
	.shop { grid-template-columns: 1fr; gap: 24px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quote__grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.nav-desktop, .hide-mobile, .utility__place { display: none !important; }
	.hamburger { display: inline-grid; }
	.masthead__top { gap: 14px; }
	/* The search bar stays on mobile. Searching by part code is how this
	   catalogue is used, and the nav overlay carries no search of its own —
	   hidden here, a phone had no way to look a part up at all. The category
	   controls go instead; the field and its suggestions are what matter. */
	.searchrow { padding-block-end: 14px; }
	.searchbar { block-size: 48px; }
	.searchbar__scope,
	.catbtn { display: none; }
	.searchbar__field {
		border-start-start-radius: var(--r-btn);
		border-end-start-radius: var(--r-btn);
		padding-inline-start: 16px;
	}
}

@media (max-width: 640px) {
	:root { --gutter: 20px; --sec-y: 56px; }
	.hero { block-size: 520px; }
	.hero__copy { padding-inline: 52px; }
	.hero__title { font-size: 30px; }
	.hero__text { font-size: 15px; }
	.hero__arrow { inline-size: 34px; block-size: 34px; }
	.hero__arrow--prev { inset-inline-start: 8px; }
	.hero__arrow--next { inset-inline-end: 8px; }
	.ctaband__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
	.ctaband__actions { inline-size: 100%; }
	.ctaband__actions .btn { flex: 1; }
	.site-footer__grid { grid-template-columns: 1fr; text-align: center; }
	.site-footer__grid > div { display: flex; flex-direction: column; align-items: center; }
	.site-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
	.gallery__main { block-size: 320px; }
}

/* --------------------------------------------------------------------------
   12. Logo slot
   The handoff sizes the logo slot at 150x56. The uploaded file is a wide
   1600x595 lockup, so it has to be constrained on both axes or it drives the
   whole header height.
   -------------------------------------------------------------------------- */
.masthead__logo, .masthead__logo .custom-logo-link { flex: none; display: block; max-inline-size: 190px; line-height: 0; }
.masthead__logo img,
.masthead__logo .custom-logo {
	max-inline-size: 100%; max-block-size: 56px;
	inline-size: auto; block-size: auto;
	object-fit: contain; display: block;
}
.site-footer__logo img { max-inline-size: 180px; max-block-size: 52px; object-fit: contain; }

/* --------------------------------------------------------------------------
   13. Motion
   A slow push-in on the hero, and one shared reveal for content entering the
   viewport. Both are switched off entirely under prefers-reduced-motion —
   this is decoration, and it should never fight a vestibular preference.
   -------------------------------------------------------------------------- */
.hero__slide {
	/* Start slightly over-scaled so the drift never exposes an edge. */
	transform: scale(1.06);
	transition: opacity .7s ease;
}
.hero__slide.is-active {
	animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom {
	from { transform: scale(1.06); }
	to   { transform: scale(1.14); }
}

.hero__copy > * {
	animation: heroRise .8s cubic-bezier(.22, .61, .36, 1) both;
}
.hero__copy > *:nth-child(2) { animation-delay: .1s; }
.hero__copy > *:nth-child(3) { animation-delay: .2s; }
@keyframes heroRise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* Scroll reveal.
   The hidden state is gated behind .js-reveal, which main.js only sets once the
   observer is actually wired. Content is therefore visible by default: a script
   error, an old browser or a blocked file can never leave the page blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); }
.js-reveal .reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js-reveal .reveal--d1.is-in { transition-delay: .08s; }
.js-reveal .reveal--d2.is-in { transition-delay: .16s; }
.js-reveal .reveal--d3.is-in { transition-delay: .24s; }

.catcard, .pcard { transition: transform .25s ease, border-color .18s ease, box-shadow .18s ease; }
.catcard:hover, .pcard:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
	.hero__slide, .hero__slide.is-active { animation: none; transform: none; }
	.hero__copy > * { animation: none; }
	.js-reveal .reveal { opacity: 1; transform: none; }
	.catcard:hover, .pcard:hover { transform: none; }
}

/* Client logos read as credentials, so give them room: the 52px cap made them
   footnotes next to everything around them. */
.clients { padding-block: 72px; }
.clients__track { gap: 88px; }
.clients__item img { max-block-size: 84px; opacity: .68; }
.clients__item:hover img { opacity: 1; }

@media (max-width: 640px) {
	.clients__track { gap: 48px; }
	.clients__item img { max-block-size: 60px; }
}

/* The clients band is the one centred section — its heading needs the same
   weight as every other section title, not an eyebrow on its own. */
.clients__head { text-align: center; margin-block-end: 40px; }
.clients__head .section__eyebrow { margin-block-end: 8px; }

/* --------------------------------------------------------------------------
   12. Collapsible quote box
   The form only unfolds when someone asks for it. Left open it pushed the
   related products off the page and read as clutter to the majority who are
   only browsing.
   -------------------------------------------------------------------------- */
.qbox {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
}

.qbox__summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px;
	padding: 22px 26px;
	cursor: pointer; list-style: none;
	transition: background-color .15s ease;
}
.qbox__summary::-webkit-details-marker { display: none; }
.qbox__summary:hover { background: var(--tint); }
.qbox__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.qbox__heading { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.qbox__eyebrow {
	font-family: var(--display); font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.qbox__title {
	font-family: var(--display); font-size: 19px; font-weight: 700;
	color: var(--ink); line-height: 1.3;
	/* Part numbers are long and unbreakable; let them wrap rather than
	   stretch the row past the container. */
	overflow-wrap: anywhere;
}

.qbox__chev {
	flex: none;
	inline-size: 40px; block-size: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	color: var(--ink);
	transition: transform .2s ease, background-color .15s ease, color .15s ease;
}
.qbox[open] .qbox__chev { transform: rotate(180deg); background: var(--accent); border-color: var(--accent); color: #fff; }

.qbox__body { padding: 4px 26px 28px; border-block-start: 1px solid var(--line); }
.qbox__body > .quote__lead { padding-block-start: 20px; }

/* The section wrapper the template was missing — without it the form ran the
   full width of the viewport instead of sitting inside the page grid. */
.quote__inner { max-inline-size: var(--maxw); margin-inline: auto; padding: var(--sec-y) var(--gutter); }
.quote__grid { max-inline-size: none; }
.quote__field { margin: 0; }
.quote__form { min-inline-size: 0; }

@media (max-width: 680px) {
	.qbox__summary { padding: 18px; gap: 12px; }
	.qbox__title { font-size: 16px; }
	.qbox__chev { inline-size: 34px; block-size: 34px; }
	.qbox__body { padding: 4px 18px 22px; }
	.quote__actions { flex-direction: column; align-items: stretch; }
	.quote__actions .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   14. Quote box, second pass
   The collapsed bar was a thin strip floating in 88px of empty tint. It now
   carries an icon, a supporting line and an explicit affordance, and the band
   around it is tightened so the box is the thing you see, not the gap.
   -------------------------------------------------------------------------- */
.quote { background: var(--tint); border-block: 1px solid var(--line); }
.quote__inner { padding-block: 48px; }

.qbox { box-shadow: var(--sh-bar); }
.qbox__summary { align-items: flex-start; gap: 18px; padding: 26px 28px; }

.qbox__icon {
	flex: none;
	inline-size: 48px; block-size: 48px;
	display: grid; place-items: center;
	border-radius: var(--r-btn);
	background: var(--navy); color: #fff;
}

.qbox__heading { flex: 1; gap: 5px; }
.qbox__note {
	font-size: 13.5px; line-height: 1.6; color: var(--muted);
	max-inline-size: 62ch;
}

.qbox__open {
	flex: none;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 9px 9px 18px;
	border: 1px solid var(--line); border-radius: var(--r-pill);
	background: var(--surface);
	font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink);
	transition: border-color .15s ease, color .15s ease;
	align-self: center;
}
.qbox__summary:hover .qbox__open { border-color: var(--accent); color: var(--accent); }

.qbox__chev {
	inline-size: 30px; block-size: 30px;
	display: grid; place-items: center;
	border: 0; border-radius: var(--r-pill);
	background: var(--tint); color: inherit;
	transition: transform .2s ease, background-color .15s ease, color .15s ease;
}
.qbox[open] .qbox__open { border-color: var(--accent); color: var(--accent); }
.qbox[open] .qbox__chev { transform: rotate(180deg); background: var(--accent); color: #fff; }
.qbox[open] .qbox__open-label { display: none; }
.qbox[open] .qbox__open { padding: 9px; }

.qbox__body { padding: 0 28px 30px; }
.qbox__body > .quote__lead { padding-block-start: 24px; color: var(--body); }

/* --------------------------------------------------------------------------
   15. Description
   A wall of unstyled text was the weakest block on the page. Constrained to a
   reading measure, given a rule and a heading, and taught to lay out the
   tables and lists that arrive inside imported product copy.
   -------------------------------------------------------------------------- */
.pdesc { padding-block: 56px; }
.pdesc__head {
	display: flex; align-items: baseline; gap: 14px;
	padding-block-end: 14px; margin-block-end: 26px;
	border-block-end: 2px solid var(--navy);
}
.pdesc__title { font-size: 22px; }
.pdesc__part {
	font-size: 13px; color: var(--muted);
	overflow-wrap: anywhere;
}

.pdesc__body { max-inline-size: 76ch; font-size: 15.5px; line-height: 1.85; color: var(--body); }
.pdesc__body > * + * { margin-block-start: 16px; }
.pdesc__body h2, .pdesc__body h3, .pdesc__body h4 {
	font-size: 17px; margin-block-start: 30px; margin-block-end: 10px;
}
.pdesc__body ul, .pdesc__body ol { padding-inline-start: 22px; }
.pdesc__body li + li { margin-block-start: 7px; }
.pdesc__body strong { color: var(--ink); font-weight: 600; }
.pdesc__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Imported copy carries raw tables; keep them inside the column. */
.pdesc__body table {
	inline-size: 100%; border-collapse: collapse;
	display: block; overflow-x: auto;
}
.pdesc__body th, .pdesc__body td {
	padding: 10px 14px; border: 1px solid var(--line);
	text-align: start; font-size: 14px; vertical-align: top;
}
.pdesc__body th { background: var(--tint); font-weight: 600; color: var(--ink); }
.pdesc__body img { border-radius: var(--r-btn); }

@media (max-width: 680px) {
	.qbox__summary { flex-wrap: wrap; padding: 20px; gap: 14px; }
	.qbox__icon { inline-size: 40px; block-size: 40px; }
	.qbox__open { inline-size: 100%; justify-content: space-between; order: 3; }
	.qbox__body { padding: 0 20px 24px; }
	.quote__inner { padding-block: 36px; }
	.pdesc { padding-block: 40px; }
	.pdesc__head { flex-direction: column; gap: 4px; }
}

/* --------------------------------------------------------------------------
   16. Account
   Sign-in and register sit side by side: a returning buyer should not scroll
   past a registration form to reach the login they came for.
   -------------------------------------------------------------------------- */
.woocommerce-account .site-main { padding-block: 48px var(--sec-y); }
.woocommerce-account .woocommerce {
	max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
}

.auth { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.auth__panel {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); padding: 32px;
}
.auth__panel--alt { background: var(--tint); }
.auth__head { margin-block-end: 24px; }
.auth__eyebrow {
	font-family: var(--display); font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent); margin-block-end: 8px;
}
.auth__title { font-size: 24px; margin-block-end: 8px; }
.auth__note { font-size: 14px; line-height: 1.7; color: var(--muted); }
.auth__form { display: flex; flex-direction: column; gap: 18px; }
.auth__row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}
.auth__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.auth__link { color: var(--accent); }
.auth__submit { align-self: flex-start; }

/* Account navigation ------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 12px 16px;
	border: 1px solid var(--line); border-radius: var(--r-btn);
	background: var(--surface);
	font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink);
	margin-block-end: 8px;
}
.woocommerce-MyAccount-navigation li a:hover { border-color: var(--accent); color: var(--accent); }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active > a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--navy); border-color: var(--navy); color: #fff;
}

/* My Quotes ---------------------------------------------------------------- */
.qtable { display: flex; flex-direction: column; gap: 14px; }
.qrow {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); padding: 20px 22px;
}
.qrow__main { flex: 1; min-inline-size: 0; }
.qrow__top { display: flex; align-items: center; gap: 12px; margin-block-end: 8px; flex-wrap: wrap; }
.qrow__ref {
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .04em; color: var(--muted);
}
.qrow__title { font-size: 16px; line-height: 1.4; margin-block-end: 4px; overflow-wrap: anywhere; }
.qrow__part { font-size: 13px; color: var(--accent); font-weight: 600; }
.qrow__msg { margin-block-start: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.qrow__meta {
	flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
	font-size: 13px; color: var(--muted);
}

.qstate {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; border-radius: var(--r-pill);
	font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.qstate::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.qstate--new     { background: oklch(45% 0.16 255 / .12); color: var(--accent); }
.qstate--quoted  { background: oklch(52% 0.13 155 / .12); color: var(--ok); }
.qstate--ordered { background: oklch(32% 0.11 262 / .12); color: var(--navy); }
.qstate--closed  { background: var(--tint); color: var(--muted); }

.qtable__note { margin-block-start: 20px; font-size: 13px; color: var(--muted); }

.qempty {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); padding: 44px 32px; text-align: center;
}
.qempty__title { font-size: 20px; margin-block-end: 10px; }
.qempty__text { max-inline-size: 52ch; margin: 0 auto 24px; color: var(--muted); line-height: 1.7; }

@media (max-width: 900px) {
	.auth { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.auth__panel { padding: 24px 20px; }
	.qrow { flex-direction: column; gap: 14px; }
	.qrow__meta { align-items: flex-start; flex-direction: row; inline-size: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   17. Ordinary pages
   -------------------------------------------------------------------------- */
.pagehead { padding-block: 28px 36px; }
.pagehead__title { font-size: clamp(1.875rem, 3.4vw, 2.5rem); }
.pagehead__lead {
	max-inline-size: 66ch; margin-block-start: 12px;
	font-size: 16.5px; line-height: 1.7; color: var(--muted);
}

.pagebody { padding-block-end: var(--sec-y); }
.pagebody__inner { max-inline-size: 76ch; font-size: 15.5px; line-height: 1.85; }
.pagebody__inner > * + * { margin-block-start: 18px; }
.pagebody__inner h2 { font-size: 24px; margin-block-start: 40px; margin-block-end: 12px; }
.pagebody__inner h3 { font-size: 19px; margin-block-start: 32px; margin-block-end: 10px; }
.pagebody__inner ul, .pagebody__inner ol { padding-inline-start: 22px; }
.pagebody__inner li + li { margin-block-start: 8px; }
.pagebody__inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pagebody__inner img { border-radius: var(--r-card); }
.pagebody__inner blockquote {
	margin: 0; padding: 18px 22px;
	background: var(--tint); border-inline-start: 3px solid var(--accent);
	border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.pagebody__inner table { inline-size: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.pagebody__inner th, .pagebody__inner td {
	padding: 10px 14px; border: 1px solid var(--line); text-align: start; font-size: 14px;
}
.pagebody__inner th { background: var(--tint); font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.office {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); padding: 30px;
	display: flex; flex-direction: column; gap: 18px;
}
.office__name { font-size: 20px; }
.office__address { font-style: normal; font-size: 14.5px; line-height: 1.8; color: var(--body); }

.office__lines {
	display: grid; grid-template-columns: 90px minmax(0, 1fr);
	gap: 10px 16px; margin: 0;
	padding-block-start: 18px; border-block-start: 1px solid var(--line);
}
.office__lines dt { font-size: 13px; color: var(--muted); }
.office__lines dd { margin: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.office__lines dd a { color: var(--accent); }
.office .btn { align-self: flex-start; margin-block-start: auto; }

.mapframe { line-height: 0; }
.mapframe iframe {
	inline-size: 100%; block-size: 420px; border: 0; display: block;
	filter: grayscale(.25);
}

@media (max-width: 820px) {
	.offices { grid-template-columns: 1fr; }
	.office { padding: 24px 20px; }
	.mapframe iframe { block-size: 300px; }
}

/* --------------------------------------------------------------------------
   19. Catalogue filters
   Restored after a stylesheet rewrite dropped them. Built as <details>
   disclosures so the panel works before JavaScript runs.
   -------------------------------------------------------------------------- */
.facets {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	overflow: hidden;
	position: sticky; inset-block-start: 20px;
}
.facets__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 16px 18px;
	border-block-end: 1px solid var(--line);
	background: var(--tint);
}
.facets__title {
	font-family: var(--display); font-size: 13px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.facets__clear { font-size: 12.5px; color: var(--accent); }

.facet { border-block-end: 1px solid var(--line-soft); }
.facet:last-of-type { border-block-end: 0; }

.facet__summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; padding: 13px 18px;
	cursor: pointer; list-style: none;
	font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.facet__summary::-webkit-details-marker { display: none; }
.facet__summary::after {
	content: ''; flex: none;
	inline-size: 8px; block-size: 8px;
	border-inline-end: 2px solid var(--muted); border-block-end: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}
.facet[open] > .facet__summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.facet__summary:hover { background: var(--tint); color: var(--accent); }

/* A long facet must scroll inside itself, not stretch the page. */
.facet__list {
	list-style: none; margin: 0;
	padding: 0 18px 14px;
	max-block-size: 260px; overflow-y: auto;
}
.facet__item { margin: 0; }
.facet__label {
	display: flex; align-items: center; gap: 9px;
	padding-block: 6px;
	font-size: 13.5px; color: var(--body); cursor: pointer;
}
.facet__label:hover { color: var(--accent); }
.facet__checkbox { flex: none; margin: 0; }
.facet__name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.facet__count {
	flex: none; font-size: 11.5px; color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.facets__apply { padding: 14px 18px; border-block-start: 1px solid var(--line); }
.facets__apply .btn { inline-size: 100%; }

/* Templates still ask for the old primary variant. */
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-dark); color: #fff; }

/* --------------------------------------------------------------------------
   20. Category tiles (shop landing)
   -------------------------------------------------------------------------- */
.cattiles {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px; margin-block-end: 28px;
}
.cattile {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cattile:hover { border-color: var(--accent); box-shadow: var(--sh-bar); color: var(--ink); }
.cattile__media {
	flex: none; inline-size: 46px; block-size: 46px;
	display: grid; place-items: center;
	background: var(--tint); border-radius: var(--r-btn); overflow: hidden;
}
.cattile__img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 4px; }
.cattile__body { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cattile__name { font-family: var(--display); font-size: 13px; font-weight: 600; line-height: 1.3; }
.cattile__count { font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   21. Browse-categories mega menu
   -------------------------------------------------------------------------- */
.megamenu { position: relative; }
.megamenu__panel {
	position: absolute; z-index: 70;
	inset-block-start: calc(100% + 8px); inset-inline-start: 0;
	inline-size: min(880px, 92vw);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
	padding: 24px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); box-shadow: var(--sh-pop);
	max-block-size: 70vh; overflow-y: auto;
}
.megamenu__panel[hidden] { display: none; }
.megamenu__group { min-inline-size: 0; }
.megamenu__top {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	padding-block-end: 8px; margin-block-end: 8px;
	border-block-end: 1px solid var(--line-soft);
	font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.megamenu__children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.megamenu__children a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	font-size: 13px; color: var(--body);
}
.megamenu__children a:hover { color: var(--accent); }
.megamenu__count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.megamenu__caret { transition: transform .2s ease; }

@media (max-width: 900px) {
	.facets { position: static; }
	.megamenu__panel { position: static; inline-size: 100%; grid-template-columns: 1fr; box-shadow: none; }
	.cattiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Brand panel — a statement, not a filter: the catalogue is single-brand. */
.brandpanel { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; }
.brandpanel__name {
	font-family: var(--display); font-size: 17px; font-weight: 800;
	letter-spacing: .02em; color: var(--navy);
}
.brandpanel__note { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   22. Imported page media
   Content pulled in from the old site carries bare <img> tags with the
   original pixel dimensions and no wrapper. Left alone they run a portrait
   photo down the page at full height beside a column of empty space.
   -------------------------------------------------------------------------- */
.pagebody__inner img,
.pdesc__body img {
	display: block;
	inline-size: 100%;
	max-inline-size: 560px;
	block-size: auto;
	/* Tall source images are cropped to a readable band rather than allowed
	   to dictate the page height. */
	max-block-size: 420px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--r-card);
	margin-block: 8px;
}

/* An image that is genuinely wide keeps its shape. */
.pagebody__inner img[width]:not([width="0"]),
.pdesc__body img[width]:not([width="0"]) { max-inline-size: min(100%, 720px); }

.pagebody__inner figure,
.pdesc__body figure { margin: 0; }
.pagebody__inner figcaption,
.pdesc__body figcaption {
	margin-block-start: 8px; font-size: 13px; color: var(--muted);
}

/* Stray inline sizing from the old editor. */
.pagebody__inner [style*="width"],
.pdesc__body [style*="width"] { max-inline-size: 100% !important; }

/* Wishlist affordances ------------------------------------------------------ */
.wishbtn.is-wished { border-color: var(--alert); color: var(--alert); }
.wishbtn.is-wished svg { fill: currentColor; }

.iconbtn--badged { position: relative; }
.iconbtn__badge {
	position: absolute; inset-block-start: 2px; inset-inline-end: 0;
	min-inline-size: 17px; block-size: 17px; padding-inline: 4px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: var(--accent); color: #fff;
	font-family: var(--display); font-size: 10.5px; font-weight: 700;
}

/* --------------------------------------------------------------------------
   23. About — text beside image
   Each parsed section becomes one row: prose in one column, its photo in the
   other, sides alternating down the page. Rows without a photo simply run to
   the reading measure instead of leaving an empty column.
   -------------------------------------------------------------------------- */
.aboutrow { padding-block: 56px; }
.aboutrow:nth-of-type(even) { background: var(--tint); }

.aboutrow__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 56px;
	align-items: center;
}
.aboutrow--flip .aboutrow__text  { order: 2; }
.aboutrow--flip .aboutrow__media { order: 1; }

.aboutrow__text { font-size: 15.5px; line-height: 1.85; color: var(--body); max-inline-size: 62ch; }
.aboutrow__text > * + * { margin-block-start: 16px; }
.aboutrow__text h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-block-end: 4px; }
.aboutrow__text h3 { font-size: 18px; }
.aboutrow__text ul, .aboutrow__text ol { padding-inline-start: 22px; }
.aboutrow__text li + li { margin-block-start: 8px; }
.aboutrow__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.aboutrow__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-card);
	box-shadow: var(--sh-bar);
}

/* A row with no image gives its text the full width rather than a blank half. */
.aboutrow__grid:not(:has(.aboutrow__media)) { grid-template-columns: minmax(0, 1fr); }
.aboutrow__grid:not(:has(.aboutrow__media)) .aboutrow__text { max-inline-size: 78ch; }

@media (max-width: 900px) {
	.aboutrow { padding-block: 40px; }
	.aboutrow__grid { grid-template-columns: 1fr; gap: 28px; }
	/* On one column the photo always leads, whatever the desktop order was. */
	.aboutrow--flip .aboutrow__text,
	.aboutrow--flip .aboutrow__media { order: 0; }
	.aboutrow__media { order: -1; }
}

/* --------------------------------------------------------------------------
   24. Footer refinements
   -------------------------------------------------------------------------- */
.site-footer__logo img {
	max-block-size: 54px; inline-size: auto; display: block;
	margin-block-end: 18px;
}

@media (max-width: 640px) {
	/* On a phone the two link columns are the least useful thing in the
	   footer — every one of those destinations is already in the main menu.
	   Dropping them leaves the brand line and the showroom details, which are
	   the two things someone actually scrolls down here for. */
	/* Qualified through the grid: the sibling rule below sets display:flex on
	   .site-footer__grid > div, which outranks a bare class and kept these
	   two columns on screen. */
	.site-footer__grid > .site-footer__col { display: none; }

	.site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.site-footer__logo img { margin-inline: auto; }
	.site-footer__blurb { max-inline-size: none; }
}

/* --------------------------------------------------------------------------
   25. Quote list — drawer and page
   -------------------------------------------------------------------------- */
.cartdrawer__head { align-items: flex-start; }
.cartdrawer__sub { margin-block-start: 3px; font-size: 12.5px; color: var(--muted); }

.cartitem {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 14px; padding-block: 16px;
	border-block-end: 1px solid var(--line-soft);
}
.cartitem:last-child { border-block-end: 0; }
.cartitem__main { min-inline-size: 0; flex: 1; }
.cartitem__name {
	font-family: var(--display); font-size: 13.5px; font-weight: 700;
	color: var(--ink); line-height: 1.45;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartitem__sku { margin-block-start: 3px; font-size: 12px; color: var(--muted); }
.cartitem__ctl { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.cartqty {
	display: inline-flex; align-items: center;
	border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden;
}
.cartqty button {
	inline-size: 30px; block-size: 30px; border: 0;
	background: var(--surface); color: var(--ink);
	font-size: 15px; line-height: 1; cursor: pointer;
}
.cartqty button:hover { background: var(--tint); color: var(--accent); }
.cartqty__n {
	min-inline-size: 34px; text-align: center;
	font-family: var(--display); font-size: 13px; font-weight: 700;
	border-inline: 1px solid var(--line);
	line-height: 30px;
}
.cartitem__remove {
	border: 0; background: none; padding: 0; cursor: pointer;
	font-size: 12px; color: var(--muted); text-decoration: underline;
	text-underline-offset: 2px;
}
.cartitem__remove:hover { color: var(--alert); }

.cartempty { padding-block: 28px; text-align: center; }
.cartempty__title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }
.cartempty__text { margin-block-start: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.cartdrawer__note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-block-end: 12px; }

/* Page ---------------------------------------------------------------------- */
.qlist { margin-block-end: 8px; }
.qlist__table {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); overflow: hidden;
}
.qline {
	display: flex; align-items: center; gap: 24px;
	padding: 18px 22px;
	border-block-end: 1px solid var(--line-soft);
}
.qline:last-child { border-block-end: 0; }
.qline__main { flex: 1; min-inline-size: 0; }
.qline__name { font-family: var(--display); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.qline__sku { margin-block-start: 3px; font-size: 12.5px; color: var(--accent); font-weight: 600; }
.qline__qty { flex: none; }
.qline__qtylabel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.qline__qtylabel input {
	inline-size: 74px; padding: 8px 10px;
	border: 1px solid var(--line); border-radius: var(--r-btn);
	font: inherit; font-weight: 600; text-align: center; color: var(--ink);
}
.qline__remove {
	flex: none; border: 0; background: none; padding: 0; cursor: pointer;
	font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.qline__remove:hover { color: var(--alert); }

.qlist__empty {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card); padding: 48px 32px; text-align: center;
}
.qlist__form { margin-block-start: 8px; }
.qlist__form .quote__inner { padding-inline: 0; }

@media (max-width: 640px) {
	.qline { flex-wrap: wrap; gap: 12px; padding: 16px; }
	.qline__main { flex-basis: 100%; }
	.qline__qty { flex: 1; }
}

/* --------------------------------------------------------------------------
   26. WordPress admin bar
   The masthead is sticky at top:0, which is correct for a visitor but slides
   under the admin bar for anyone logged in. WordPress fixes its bar at 32px
   on desktop; below 783px it scrolls away with the page instead, so the offset
   only applies while it is actually fixed.
   -------------------------------------------------------------------------- */
.admin-bar .masthead { inset-block-start: 32px; }

@media screen and (max-width: 782px) {
	/* The bar is position:absolute here — it scrolls off, so no offset. */
	.admin-bar .masthead { inset-block-start: 0; }
}

/* Anything else pinned to the viewport needs the same allowance. */
.admin-bar .navoverlay,
.admin-bar .cartdrawer { inset-block-start: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .navoverlay,
	.admin-bar .cartdrawer { inset-block-start: 46px; }
}

/* In-page anchors must clear the sticky header, or the target lands beneath
   it — #quote-form was scrolling to a heading hidden behind the bar. */
:target { scroll-margin-block-start: 150px; }
.admin-bar :target { scroll-margin-block-start: 182px; }

/* --------------------------------------------------------------------------
   27. Not found and search results
   -------------------------------------------------------------------------- */
.notfound { padding-block: 72px var(--sec-y); }
.notfound__title { font-size: clamp(1.875rem, 3.4vw, 2.5rem); margin-block-end: 14px; }
.notfound__lead { max-inline-size: 62ch; font-size: 16px; line-height: 1.7; color: var(--muted); }
.notfound__search { max-inline-size: 620px; margin-block: 28px 40px; }
.notfound__search .searchbar { box-shadow: var(--sh-bar); }
.notfound__near { margin-block-end: 40px; }
.notfound__nearTitle { font-size: 18px; margin-block-end: 18px; }
.notfound__links { display: flex; gap: 12px; flex-wrap: wrap; }

.searchhint { margin-block-start: 12px; font-size: 14.5px; }
.searchhint a { color: var(--accent); font-weight: 600; }

.searchlist { display: flex; flex-direction: column; gap: 4px; }
.searchhit {
	padding: 20px 22px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--r-card);
}
.searchhit + .searchhit { margin-block-start: 12px; }
.searchhit__title { font-size: 17px; line-height: 1.4; }
.searchhit__url { margin-block-start: 4px; font-size: 12.5px; color: var(--accent); }
.searchhit__text { margin-block-start: 8px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* --------------------------------------------------------------------------
   28. Pagination
   WooCommerce ships `.woocommerce nav.woocommerce-pagination ul li span.current`
   — four elements deep. A two-class rule of ours loses to it, which is why the
   active page kept rendering in its default grey. Matched here rather than
   forced with !important.
   -------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; gap: 6px;
	justify-content: center;
	margin: 44px 0 0; padding: 0;
	border: 0; list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul.page-numbers li {
	border: 0; margin: 0; overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
nav.woocommerce-pagination ul.page-numbers li a,
nav.woocommerce-pagination ul.page-numbers li span {
	display: grid; place-items: center;
	min-inline-size: 42px; min-block-size: 42px;
	padding-inline: 12px;
	border: 1px solid var(--line); border-radius: var(--r-btn);
	background: var(--surface);
	font-family: var(--display); font-size: 14px; font-weight: 600;
	color: var(--body);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
nav.woocommerce-pagination ul.page-numbers li a:hover {
	border-color: var(--accent); color: var(--accent); background: var(--surface);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current,
nav.woocommerce-pagination ul.page-numbers li .current {
	background: var(--navy); border-color: var(--navy); color: #fff;
}

/* The ellipsis is a label, not a destination. */
.woocommerce nav.woocommerce-pagination ul li span.dots,
nav.woocommerce-pagination ul.page-numbers li .dots {
	border-color: transparent; background: transparent; color: var(--muted);
	min-inline-size: 28px; padding-inline: 0;
}

/* Prev / next carry arrows only, so they need no extra width. */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
	color: var(--ink); font-size: 16px;
}

@media (max-width: 640px) {
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
		min-inline-size: 38px; min-block-size: 38px; padding-inline: 8px; font-size: 13px;
	}
}

/* Brand panel is a destination now, not a caption: it links to the brand
   archive, so it needs the affordances of one. */
.brandpanel {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px 18px; color: var(--ink);
	transition: background-color .15s ease;
}
.brandpanel:hover { background: var(--tint); color: var(--ink); }
.brandpanel.is-active { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.brandpanel__name {
	font-family: var(--display); font-size: 17px; font-weight: 800;
	letter-spacing: .02em; color: var(--navy);
}
.brandpanel__count { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--accent); }
.brandpanel__note { font-size: 12px; color: var(--muted); }

/* --------------------------------------------------------------------------
   29. Single product surface and distributor notice
   -------------------------------------------------------------------------- */

/* The product page reads as a spec sheet, so it sits on white rather than the
   tinted body colour the listing pages use. */
body.single-product { background: var(--surface); }
.single-product .product-main,
.single-product .pdesc,
.single-product .breadcrumb { background: var(--surface); }

/* Sections that follow keep their own tint so the page still has structure. */
.single-product .quote { background: var(--tint); }

.warranty {
	max-inline-size: 520px;
	margin-block: 4px 24px;
	padding: 14px 18px;
	background: var(--surface);
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}
.warranty__brand {
	font-family: var(--display);
	font-size: 15px; font-weight: 800;
	letter-spacing: .06em;
	color: var(--navy);
	margin-block-end: 8px;
}
.warranty__lead {
	font-size: 13px; font-weight: 700; line-height: 1.6;
	color: #222; margin-block-end: 4px;
}
.warranty__text { font-size: 13px; line-height: 1.6; color: #222; }

/* --------------------------------------------------------------------------
   30. Product gallery — zoom and thumbnails
   -------------------------------------------------------------------------- */
.gallery__main {
	position: relative;
	overflow: hidden;
	cursor: zoom-in;
	/* A stable box means swapping images never jolts the page. */
	background: var(--surface);
}
.gallery__main img {
	inline-size: 100%; block-size: 100%;
	object-fit: contain;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .18s ease;
	will-change: transform;
}
.gallery__main.is-zoomed { cursor: zoom-out; }
.gallery__main.is-zoomed img { transform: scale(2.2); }

/* Brief fade while the new file decodes, so the swap does not flash. */
.gallery__main img.is-swapping { opacity: .35; }

.gallery__thumb {
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gallery__thumb:hover { border-color: var(--accent); }
.gallery__thumb.is-active {
	border-color: var(--navy);
	box-shadow: 0 0 0 2px oklch(32% 0.11 262 / .18);
}
.gallery__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

/* Touch has no hover: the zoom is a tap, so say so rather than implying a
   hover affordance that will never fire. */
@media (hover: none) {
	.gallery__main { cursor: pointer; }
}

/* The reversed mark carries the Arabic and Latin wordmarks side by side, so it
   needs more height than a symbol-only logo to stay legible. */
/* The reversed mark is 866x288, so it is three times wider than it is tall.
   An earlier rule caps the width at 180px, which binds long before any height
   does — raising the height alone changed nothing. The width cap is set past
   what the height asks for so the height is what actually governs.

   The artwork also sits inside a large transparent canvas: 175px of empty
   space on its left, 34px above. That blank margin is what pushed the logo
   away from the blurb below it, which starts at the gutter. The offsets below
   pull the visible mark back onto that line. They are expressed against the
   logo height so they stay correct at every size — 175/288 and 34/288 of it. */
.site-footer__logo {
	--flogo-h: 96px;
}
.site-footer__logo img {
	max-block-size: var(--flogo-h);
	max-inline-size: calc(var(--flogo-h) * 3.01);
	margin-inline-start: calc(var(--flogo-h) * -0.6076);
	margin-block-start: calc(var(--flogo-h) * -0.118);
}

@media (max-width: 640px) {
	.site-footer__logo { --flogo-h: 78px; }
}

/* The pin sits on a cap-height line of 13.5px text, so it needs nudging up a
   fraction to look centred rather than measured-centred. */
.utility__place { gap: 7px; }
.utility__pin {
	flex: none;
	transform: translateY(-.5px);
	opacity: .85;
}

/* Search suggestions ------------------------------------------------------- */
.searchbar { position: relative; }

.suggest {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline: 0;
	z-index: 60;
	max-block-size: min(70vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	box-shadow: 0 18px 44px rgb(0 0 0 / .16);
}

.suggest__row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--line-soft, #eef0f4);
}
.suggest__row:last-of-type { border-block-end: 0; }
.suggest__row:hover,
.suggest__row.is-active { background: var(--tint, #f4f7fb); }
.suggest__row.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }

.suggest__thumb {
	inline-size: 44px; block-size: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line-soft, #eef0f4);
	border-radius: 6px;
}

.suggest__body { display: grid; gap: 2px; min-inline-size: 0; }

.suggest__part {
	font-family: Consolas, "SF Mono", monospace;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--navy);
}
.suggest__part mark {
	background: color-mix(in oklch, var(--orange) 45%, transparent);
	color: inherit;
	border-radius: 2px;
	padding-inline: 1px;
}

.suggest__name {
	font-size: .8rem;
	line-height: 1.4;
	color: var(--muted, #5b6473);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.suggest__all {
	display: block;
	inline-size: 100%;
	padding: 11px 14px;
	border: 0;
	border-block-start: 1px solid var(--line);
	background: var(--tint, #f4f7fb);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--accent);
	text-align: center;
	cursor: pointer;
}
.suggest__all:hover { background: color-mix(in oklch, var(--accent) 10%, #fff); }

.suggest__none {
	margin: 0;
	padding: 18px 14px;
	font-size: .85rem;
	color: var(--muted, #5b6473);
	text-align: center;
}

@media (max-width: 900px) {
	.suggest { max-block-size: 60vh; }
	.suggest__name { -webkit-line-clamp: 1; }
}

/* --------------------------------------------------------------------------
   Catalogue on a phone

   Two columns on a 375px screen leaves about 155px per card, and 36px of that
   is padding. The category wrapped to three lines, the part code was cut off
   mid-string and the button read "uest Qu". A part code you cannot read is
   the one thing this catalogue must never do, so the card turns on its side:
   one per row, thumbnail beside the text, everything at full width.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	ul.products { grid-template-columns: 1fr; gap: 12px; }

	.pcard {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		align-items: stretch;
	}

	.pcard__thumb {
		aspect-ratio: auto;
		border-inline-end: 1px solid var(--line);
	}
	.pcard__thumb img { padding: 10px; }

	.pcard__info { padding: 12px 14px; gap: 4px; }

	/* One line, clipped with an ellipsis rather than stacking three deep. */
	.pcard__cat {
		font-size: 11px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pcard__title {
		font-size: 13.5px;
		-webkit-line-clamp: 2;
		/* Long unbroken part codes must wrap rather than run past the edge. */
		overflow-wrap: anywhere;
	}

	.pcard__sku {
		font-size: 11.5px;
		overflow-wrap: anywhere;
	}

	.pcard__cta { padding-block-start: 10px; }
	.pcard__cta .btn {
		padding-inline: 10px;
		font-size: 12px;
		/* The label was being clipped: the button had no room to shrink its
		   padding and no permission to wrap. */
		white-space: normal;
		min-inline-size: 0;
	}
}

/* Below ~340px even one column needs the thumbnail out of the way. */
@media (max-width: 340px) {
	.pcard { grid-template-columns: 84px minmax(0, 1fr); }
}
/* Filters drawer -----------------------------------------------------------
   Desktop keeps the sidebar in the grid; the head, the close button and the
   trigger exist only for the phone, where the list is several screens long
   and sat between the visitor and the first product. */
.shop__sidebarHead,
.shop__sidebarClose,
.shop__filterBtn,
.shop__scrim { display: none; }

@media (max-width: 900px) {
	.shop { grid-template-columns: minmax(0, 1fr); gap: 0; }

	.shop__sidebar {
		position: fixed;
		inset-block: 0;
		z-index: 210;
		inline-size: min(86vw, 340px);
		background: var(--surface);
		box-shadow: 0 0 44px rgb(0 0 0 / .3);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 16px 24px;
		/* Slides on inset rather than transform. A transform would be smoother,
		   but this is a panel that must be off-screen when closed, and inset is
		   what guarantees that even where compositing is unavailable. */
		inset-inline-start: -100%;
		transition: inset-inline-start .26s ease, visibility 0s linear .26s;
		visibility: hidden;
	}
	.shop__sidebar.is-open {
		inset-inline-start: 0;
		visibility: visible;
		transition: inset-inline-start .26s ease, visibility 0s;
	}

	.shop__sidebarHead {
		position: sticky;
		inset-block-start: 0;
		z-index: 1;
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px;
		margin-inline: -16px;
		padding: 14px 16px;
		background: var(--surface);
		border-block-end: 1px solid var(--line);
		font-family: var(--display); font-size: 13px; font-weight: 700;
		letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
	}
	.shop__sidebarClose {
		display: grid; place-items: center;
		inline-size: 34px; block-size: 34px;
		border: 1px solid var(--line); border-radius: var(--r-btn);
		background: none; color: var(--ink); cursor: pointer;
	}
	.shop__sidebarClose:hover { border-color: var(--accent); color: var(--accent); }

	.shop__scrim {
		position: fixed; inset: 0; z-index: 205;
		background: oklch(15% 0.025 260 / .5);
	}

	.shop__filterBtn { display: inline-flex; align-items: center; gap: 8px; }

	.shop__toolbar { flex-wrap: wrap; gap: 10px; row-gap: 12px; }
}

@media (max-width: 640px) {
	/* The count reads "Showing 1–24 of 16,484 results" and pushes the sort
	   control onto its own cramped line. The filter button and the sort are
	   what get used; the count can have the row below to itself. */
	.shop__toolbar .woocommerce-result-count { order: 3; flex-basis: 100%; margin: 0; }
	.shop__toolbar .woocommerce-ordering { margin-inline-start: auto; }
	.shop__toolbar .woocommerce-ordering select { max-inline-size: 190px; }
}

/* Sticky header, folded ----------------------------------------------------
   The masthead carries the logo row and the search row, and both stayed
   pinned while scrolling — on a phone that is most of the screen given over
   to chrome. Past the first screenful the search row folds away, and the
   icon beside the cart brings it back without scrolling to the top. */
.masthead__search { display: none; }

/* Collapsed with max-block-size rather than a 0fr grid track. A 0fr track
   still floors at the content's minimum, and the search bar declares a
   height of 52px — so the row "closed" while keeping its 48px of space,
   which defeats the whole point. */
.searchrow {
	overflow: hidden;
	max-block-size: 140px;
	transition: max-block-size .24s ease, opacity .18s ease, padding-block-end .24s ease;
}

.masthead.is-folded .searchrow {
	max-block-size: 0;
	opacity: 0;
	padding-block-end: 0;
	pointer-events: none;
}
/* Reopened by the icon while still scrolled. */
.masthead.is-folded.is-peeking .searchrow {
	max-block-size: 140px;
	opacity: 1;
	padding-block-end: 18px;
	pointer-events: auto;
}

.masthead.is-folded .masthead__search { display: grid; place-items: center; }
.masthead.is-folded.is-peeking .masthead__search { color: var(--accent); }

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

/* Search as an icon on the phone --------------------------------------------
   Folding on scroll still gave the row the top of every screen until you
   scrolled. On a phone the bar is simply an icon: the row is closed until
   asked for, whatever the scroll position. */
@media (max-width: 900px) {
	.masthead__search { display: grid; place-items: center; }

	.searchrow {
		max-block-size: 0;
		opacity: 0;
		padding-block-end: 0;
		pointer-events: none;
	}

	.masthead.is-peeking .searchrow {
		max-block-size: 140px;
		opacity: 1;
		padding-block-end: 14px;
		pointer-events: auto;
	}
	.masthead.is-peeking .masthead__search { color: var(--accent); }
}

/* Hero buttons on the phone -------------------------------------------------
   "Shop Now" and "Request a Quote" total 326px of button against 375px of
   screen once the hero's own padding is taken out, so flex-wrap dropped the
   second onto its own line and left them staggered and off-centre. Side by
   side on one row, sharing the width evenly. */
@media (max-width: 640px) {
	.hero__actions {
		flex-wrap: nowrap;
		gap: 10px;
		inline-size: 100%;
	}
	.hero__actions .btn {
		flex: 1 1 0;
		min-inline-size: 0;
		padding-inline: 12px;
		font-size: 13px;
		white-space: nowrap;
		text-align: center;
	}
}

/* Bottom bar ---------------------------------------------------------------
   Phones only. Desktop has all four in the masthead. */
.tabbar { display: none; }

@media (max-width: 900px) {
	.tabbar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 190;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		background: var(--surface);
		border-block-start: 1px solid var(--line);
		/* Clear of the home indicator on a modern phone. */
		padding-block-end: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -6px 20px rgb(0 0 0 / .06);
	}

	.tabbar__item {
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 3px;
		padding: 9px 4px 8px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .01em;
		color: var(--muted);
		text-decoration: none;
		cursor: pointer;
		/* Comfortably tappable without crowding the row. */
		min-block-size: 54px;
	}
	.tabbar__item svg { inline-size: 22px; block-size: 22px; }
	.tabbar__item.is-active { color: var(--accent); }

	.tabbar__icon { position: relative; display: grid; place-items: center; }
	.tabbar__badge {
		position: absolute;
		inset-block-start: -5px;
		inset-inline-start: 11px;
		min-inline-size: 16px;
		block-size: 16px;
		padding-inline: 4px;
		display: grid;
		place-items: center;
		border-radius: var(--r-pill);
		background: var(--accent);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	/* The bar covers the last stretch of the page, so give the page its
	   height back — otherwise the footer's final line sits underneath it. */
	body { padding-block-end: 62px; }

	/* Anything else anchored to the bottom clears the bar too. */
	.cartdrawer { padding-block-end: 62px; }
}




/* Fix: the category menu was clipped by the folding search row. */
.searchrow { overflow: visible; }

.masthead.is-folded .searchrow { overflow: hidden; }

.masthead.is-folded.is-peeking .searchrow {
	overflow: visible;
	transition: max-block-size .24s ease, opacity .18s ease,
	            padding-block-end .24s ease, overflow 0s linear .24s;
}

@media (max-width: 900px) {
	.searchrow { overflow: hidden; }

	.masthead.is-peeking .searchrow {
		overflow: visible;
		transition: max-block-size .24s ease, opacity .18s ease,
		            padding-block-end .24s ease, overflow 0s linear .24s;
	}
}