/*
Theme Name: ArchiLook
Description: Custom theme for the ArchiLook site, built to archilook-wireframes-rev2.0.
Author: LookFloors
Version: 0.4.0
*/

/* Tokens from the wireframe stylesheet, except the reds: Look Floors'
   own, from lookfloors.co.nz (#a6192e, darker #871425), so the site matches
   its parent (NFR-4). The tints are the same red mixed with white. */
:root {
	--brand: #a6192e;
	--brand-d: #871425;
	--ink: #1d1d1f;
	--body: #55575c;
	--mute: #8a8c91;
	--line: #dcdde0;
	--ph: #e9eaec;
	--ph2: #f4f4f5;
	--dark: #232326;
	--dark2: #2e2e32;
	--tbc: #c0262d;
	--green: #2f7d4f;
	--brand-tint: #f7eaec;
	--gutter: 72px;
	--maxw: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* Everything at 125%, as if the browser were zoomed in (NFR-21). The
   breakpoints below are the design's times 1.25 too (760 -> 950,
   1040 -> 1300, 1519 -> 1899), as they would be at 125% browser zoom; ui.js
   repeats 950. To change the size, change both.
   Phones narrower than 600px stay at 100%: they already have the phone
   layout, sized for touch, and at 125% a 390px phone would have only 312px
   to lay it out in.
   */
@media (min-width: 600px) { html { zoom: 1.25; } }
/* Forminator's dropdown lists (select2) open at the end of <body>, placed
   with page coordinates that are already at 125% - inside the zoom they
   would land 25% too far right and down. So their container is unzoomed
   (1.25 x .8 = 1) and the list in it zoomed back. select2 adds the field's
   unzoomed height below it, and an upward list's unzoomed height above, so
   both are made up here. */
@media (min-width: 600px) {
	body > .select2-container { zoom: .8; }
	body > .select2-container .forminator-select-dropdown { zoom: 1.25; }
	body > .select2-container .forminator-select-dropdown--below { translate: 0 8px; }
	body > .select2-container .forminator-select-dropdown--above { translate: 0 -20%; }
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 64px 0; }
.section--tint { background: var(--ph2); }
.section--dark { background: var(--dark); color: #fff; }
.section--dark p { color: #b9babd; }
/* In-page jumps (#results, #request, #calculator) land below the sticky header. */
[id] { scroll-margin-top: 90px; }

h1 { font-size: 44px; letter-spacing: -.025em; line-height: 1.12; }
h2 { font-size: 30px; letter-spacing: -.015em; line-height: 1.2; }
h3 { font-size: 17px; }
p { color: var(--body); }
.lede { font-size: 17px; max-width: 68ch; }

.eyebrow {
	font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--brand); font-weight: 700; margin-bottom: 10px;
}
.eyebrow--mute { color: var(--mute); }
.tbc-text { color: var(--tbc); font-weight: 700; }

/* Grey placeholder with the wireframe's diagonal cross. */
.ph {
	background: var(--ph); display: flex; align-items: center; justify-content: center;
	color: var(--mute); font-size: 12px; text-align: center; padding: 8px;
	background-image:
		linear-gradient(to top right, transparent calc(50% - 1px), #d3d4d7 50%, transparent calc(50% + 1px)),
		linear-gradient(to bottom right, transparent calc(50% - 1px), #d3d4d7 50%, transparent calc(50% + 1px));
}
.ph--dark { background-color: var(--dark2); color: #7e8085; }

/* --- Header ------------------------------------------------------------- */
.site-header {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 16px var(--gutter); border-bottom: 1px solid var(--line);
	background: #fff; position: sticky; top: 0; z-index: 50;
}
/* The logo (assets/logo.svg) brings its own colours: the mark red, ARCHILOOK
   charcoal, BY LOOK FLOORS grey. The dark footer makes it all white. */
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo svg { height: 40px; width: auto; display: block; }

.nav-main ul { display: flex; gap: 24px; font-size: 14.5px; font-weight: 600; }
.nav-main a { text-decoration: none; padding-bottom: 3px; display: inline-block; white-space: nowrap; }
.nav-main .current-menu-item > a,
.nav-main .current_page_item > a,
.nav-main .current-menu-parent > a,
.nav-main .current-product-ancestor > a { color: var(--brand); box-shadow: inset 0 -2px var(--brand); }
.nav-main .menu-item-has-children > a::after { content: " ▾"; font-size: 9px; color: var(--mute); }

.nav-main li { position: relative; }
/* The dropdown stays in the layout and fades, rather than switching to
   display:none, so it can wait a moment before closing: a pointer that
   slips off on the way down still gets there. */
.nav-main .sub-menu {
	display: flex; position: absolute; left: -18px; top: calc(100% + 10px);
	background: #fff; border: 1px solid var(--line); border-radius: 6px;
	padding: 8px 0; min-width: 250px; flex-direction: column; gap: 0;
	box-shadow: 0 14px 34px rgba(0,0,0,.09);
	visibility: hidden; opacity: 0; transform: translateY(-4px);
	transition: opacity .15s ease .35s, transform .15s ease .35s, visibility 0s linear .5s;
}
/* An invisible bridge over the 10px gap between the link and the dropdown,
   so moving straight down never leaves the menu item. */
.nav-main .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-main li:hover > .sub-menu, .nav-main li:focus-within > .sub-menu {
	visibility: visible; opacity: 1; transform: none;
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
/* Moving across to another top-level item closes the last dropdown at once,
   so two are never open together; the delay only applies when leaving the menu. */
.nav-main > ul:hover > li:not(:hover) > .sub-menu { transition: none; }
.nav-main .sub-menu a { display: block; padding: 9px 18px; font-weight: 500; }
.nav-main .sub-menu a:hover { background: var(--ph2); color: var(--brand); }

.hdr-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icon-btn {
	width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 15px;
	background: #fff; cursor: pointer; color: var(--body); flex: none;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.nav-toggle { display: none; }

/* The search opens inside the header bar rather than as a panel underneath,
   so the bar keeps its height and nothing shifts below it. It is laid over
   the bar, not in its flex row, so the logo and menu stay where they are; it
   slides out leftwards from the search button. Visibility switches at once
   on opening, so the field can take focus straight away. */
.hdr-search {
	position: absolute; top: 50%; right: calc(var(--gutter) + 48px); z-index: 2;
	min-width: 0; padding-left: 16px; background: #fff;
	transform: translateY(-50%);
	visibility: hidden; opacity: 0; clip-path: inset(0 0 0 100%);
	transition: clip-path .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
.hdr-search.is-open {
	visibility: visible; opacity: 1; clip-path: inset(0);
	transition: clip-path .25s ease, opacity .2s ease, visibility 0s;
}
/* Below about 1900px (1520px before the zoom) the open field would cut across the end of the menu,
   so the menu fades out while it is open (it stays in place). */
@media (min-width: 951px) and (max-width: 1899px) {
	.nav-main { transition: opacity .2s ease, visibility 0s; }
	.site-header:has(.hdr-search.is-open) .nav-main { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
}
@media (prefers-reduced-motion: reduce) {
	.hdr-search, .hdr-search.is-open, .nav-main { transition: none !important; }
}
.hdr-search__form { display: flex; }
.hdr-search__form input {
	border: 1px solid var(--line); border-right: 0; border-radius: 4px 0 0 4px;
	padding: 9px 13px; font-size: 14px; width: 220px; min-width: 0;
}
.hdr-search__form input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.hdr-search__form button {
	border: 0; border-radius: 0 4px 4px 0; background: var(--brand); color: #fff;
	padding: 0 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.hdr-search__form button:hover { background: var(--brand-d); }

/* Same control on a light background (search results page). */
.search-plain { display: flex; max-width: 520px; }
.search-plain input {
	flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0;
	border-radius: 4px 0 0 4px; padding: 12px 14px; font-size: 14px;
}
.search-plain button {
	border: 0; border-radius: 0 4px 4px 0; background: var(--brand); color: #fff;
	padding: 0 20px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.search-plain button:hover { background: var(--brand-d); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px; border-radius: 4px; font-size: 14px; font-weight: 700;
	text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-d); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--on-dark { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn--on-dark:hover { background: #fff; color: var(--ink); }
.btn--white { background: #fff; color: var(--ink); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
/* Black outline, as the View Product and Join Session buttons are drawn. */
.btn--outline { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--block { display: flex; width: 100%; }
button.btn:disabled { opacity: .5; cursor: default; }

.link-arrow { color: var(--brand); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* --- Home hero ---------------------------------------------------------- */
.hero { background: var(--dark); color: #fff; padding: 74px 0 78px; }
/* The photo sits behind the hero under a gradient that keeps the text on the
   left readable and lets the photo show on the right. */
.hero--photo { position: relative; overflow: hidden; isolation: isolate; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(35,35,38,.94) 0%, rgba(35,35,38,.86) 38%, rgba(35,35,38,.45) 72%, rgba(35,35,38,.25) 100%);
}
.hero--photo .eyebrow, .hero--photo p { color: #d4d5d8 !important; }
.home-about__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.hero h1 { font-size: 52px; max-width: 16ch; }
.hero p { color: #b9babd; margin-top: 16px; max-width: 60ch; }
.hero__search { display: flex; margin-top: 26px; max-width: 520px; }
.hero__search input {
	flex: 1; border: 0; border-radius: 4px 0 0 4px; padding: 15px 16px; font-size: 15px;
}
.hero__search button { border: 0; border-radius: 0 4px 4px 0; background: var(--brand); color: #fff; padding: 0 26px; font-weight: 700; cursor: pointer; }
.hero__search button:hover { background: var(--brand-d); }
.hero__btns { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* --- Dark page header band (every inner page) --------------------------- */
.page-head { background: var(--dark); color: #fff; padding: 46px 0 52px; }
.page-head h1 { margin-top: 8px; }
.page-head p { color: #b9babd; margin-top: 12px; max-width: 62ch; }
.page-head__inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.page-head__inner.has-media { grid-template-columns: 1.35fr 1fr; }
.page-head__btns { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.page-head__btns--below { margin-top: 12px; }
.page-head__label {
	margin-top: 18px !important; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
	font-weight: 700; color: #e2b3ba !important;
}
.page-head__label .tbc-text { color: #ff8a8f; letter-spacing: .1em; }
.page-head .crumbs, .page-head .crumbs a { color: #8a8c91; }
.page-head__media { aspect-ratio: 16 / 9; border-radius: 4px; }
.page-head__photo { width: 100%; height: auto; object-fit: cover; display: block; }
/* A category's illustration in the page head, whole: the drawings are 4:3,
   so a 16:9 frame cut off their tops and bottoms. Kept to its desktop size
   where the head is one column (tablets), rather than the full width. */
.page-head__art { aspect-ratio: 4 / 3; object-fit: contain; background: #f4f4f5; max-width: 520px; }

.crumbs { font-size: 12.5px; color: var(--mute); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* Top padding only: the row is also a .wrap, which owns the side gutters. */
.crumbs--page { padding-top: 20px; }

/* --- Section heads ------------------------------------------------------ */
.section-head { margin-bottom: 26px; }
.section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }

/* --- Grids and cards ---------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
/* About: one card per brand - logo, name, the range carried (sheet 14). */
/* Logos sit in a fixed white panel, padded so none touches the edge; two
   logos (RLA / Gripset) share it side by side. */
.brand-card__logos {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	aspect-ratio: 16 / 10; padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--line);
}
.brand-card__logos .brand-logo { display: block; min-width: 0; max-width: 72%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.brand-card__logos .brand-logo + .brand-logo { max-width: 46%; }
.brand-card__logos .brand-logo:first-child:not(:only-child) { max-width: 46%; }
.brand-cards .card__body { display: block; padding: 14px 16px 16px; }
.brand-cards b { display: block; color: var(--ink); font-size: 15px; }
.brand-cards small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }

.card { border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.card__body { padding: 16px 18px; }

/* Category tile: image then name only (sheets 1, 2). */
.cat-card { text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.cat-card .ph { aspect-ratio: 4 / 3; }
.cat-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f4f4f5; }
.cat-card b { display: block; padding: 16px 18px; font-size: 15px; }

/* Product card: image, brand, name, blurb and a View Product button. The
   whole card is one link to the product page (FR-35, sheets 3, 4, 13). */
.prod-card { text-decoration: none; height: 100%; transition: box-shadow .16s ease; }
.prod-card:hover { box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.prod-card:hover .prod-card__btn { border-color: var(--brand); color: var(--brand); }
.prod-card .ph, .prod-card img { aspect-ratio: 4 / 3; width: 100%; }
/* The whole photo, never cropped: packs are tall (cartridges, pails) or wide
   (trims), so it fits inside the frame on white instead of filling it. */
.prod-card img { object-fit: contain; padding: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.prod-card .card__body { display: flex; flex-direction: column; flex: 1; }
.prod-card__brand { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.prod-card h3 { margin: 3px 0 8px; font-size: 16px; }
.prod-card__blurb { display: block; font-size: 13.5px; color: var(--body); flex: 1; }
.prod-card__btn { margin-top: 16px; }

/* Numbered 01/02/03 cards (sheet 1). */
.numcard__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 30px; border-radius: 5px; background: #f7eaec;
	color: var(--brand); font-weight: 700; font-size: 12.5px; margin-bottom: 16px;
}
.numcard h3 { margin-bottom: 8px; }

/* Benefit cards with a small diamond marker (sheet 1, note 8). */
.benefit__mark {
	width: 30px; height: 30px; border-radius: 5px; background: #f7eaec; color: var(--brand);
	display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 13px;
}

/* EST. 1998 / brands band (sheets 1, 14). */
.stat-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.stat-band > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.stat-band strong { display: block; font-size: 30px; letter-spacing: -.02em; }
.stat-band span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* Resource centre rows on the dark home section (sheet 1, note 9). */
.res-row {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	border: 1px solid #3c3c41; border-radius: 5px; padding: 15px 18px; margin-bottom: 10px;
	text-decoration: none; color: #fff; font-weight: 600; font-size: 14.5px;
}
.res-row:hover { border-color: var(--brand); background: #2a2a2e; }
.res-row span:last-child { color: var(--mute); }

/* The MasterSpec logo placeholders are links (FR-41). */
.masterspec-box {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	background: #fff; border-radius: 4px; padding: 28px 24px 22px; text-decoration: none;
	max-width: 360px; width: 100%; justify-self: center;
}
.masterspec-box img { width: 100%; max-width: 240px; height: auto; display: block; }
/* MasterSpec's own orange, as on their partner widget. */
.masterspec-box span { color: #c4400f; font-weight: 700; font-size: 15px; }
.masterspec-box:hover { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Quick-link cards on the Specification page (sheet 6, note 1). */
.quick-card { padding: 24px; text-decoration: none; }
.quick-card:hover { border-color: var(--brand); }
.quick-card--active { border: 2px solid var(--brand); }
.quick-card__icon {
	width: 36px; height: 36px; border-radius: 6px; background: #f7eaec; color: var(--brand);
	display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-weight: 700;
}
.quick-card h3 { margin-bottom: 4px; font-size: 17px; }
.quick-card p { font-size: 13.5px; margin-bottom: 14px; }

/* --- Tabs (sheet 3, note 1) --------------------------------------------- */
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs button {
	background: none; border: 0; padding: 12px 2px; font-size: 14.5px; font-weight: 600;
	color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.is-on { color: var(--ink); border-bottom-color: var(--brand); }
.tabpanel[hidden] { display: none; }

/* --- Filter rows -------------------------------------------------------- */
.filterbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.filterbar input, .filterbar select {
	border: 1px solid var(--line); border-radius: 4px; padding: 11px 14px; font-size: 14px; background: #fff;
}
.filterbar input { min-width: 280px; }
.filterbar .count { margin-left: auto; font-size: 13px; color: var(--mute); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
	display: inline-block; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
	font-size: 13px; text-decoration: none; background: #fff; cursor: pointer; color: var(--ink);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Category page filters: type row, then brand row, above the cards. */
.product-chips { margin: -8px 0 14px; }
.product-chips + .product-chips { margin-top: 0; }

/* Search results: the filters are links, each with its count; then the
   count and the page size, the cards and the pages. */
.search-correction { margin: 14px 0 0; font-size: 14px; color: var(--mute); }
.search-correction b { color: var(--ink); }
.search-chips { margin: 22px 0 0; }
.search-chips + .search-chips { margin-top: 10px; }
.chip__n { margin-left: 4px; font-size: 11.5px; color: var(--mute); }
.chip.is-on .chip__n { color: rgba(255, 255, 255, .7); }
.search-bar { margin: 22px 0 18px; }
.search-bar .count { margin-left: 0; }
.per-page { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--mute); }
.per-page .chip--select { color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 34px; }
.pager a, .pager span {
	min-width: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px;
	font-size: 13.5px; text-align: center; text-decoration: none; color: var(--ink); background: #fff;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- Data sheet table (sheet 7, note 4) --------------------------------- */
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.doc-table th {
	text-align: left; padding: 13px 16px; font-size: 10.5px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--mute); background: var(--ph2); border-bottom: 1px solid var(--line);
}
.doc-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table a { color: var(--brand); font-weight: 700; text-decoration: none; }
.doc-table a:hover { text-decoration: underline; }

/* --- To-be-confirmed panels (dashed red, used on several sheets) -------- */
.tbc-box { border: 1px dashed var(--tbc); border-radius: 6px; padding: 26px; position: relative; background: #fff; }
.tbc-box__tag {
	position: absolute; top: -9px; right: 18px; background: #fff; padding: 0 8px;
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tbc); font-weight: 700;
}
.section--tint .tbc-box { background: var(--ph2); }
.section--tint .tbc-box__tag { background: var(--ph2); }

/* --- Product detail ----------------------------------------------------- */
.product-top { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; padding: 30px 0 56px; }
/* Product photos: pack shots are never cropped, so contain on white. */
.gallery__main { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.gallery__thumb {
	display: block; padding: 0; border: 2px solid var(--line); border-radius: 4px; background: #fff;
	cursor: pointer; overflow: hidden; transition: border-color .15s ease;
}
.gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.gallery__thumb:hover { border-color: var(--mute); }
.gallery__thumb.is-on { border-color: var(--brand); }
.gallery__thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The documents card sits above the fold - FR-28 is the rule for this page. */
.docs-card { border: 1px solid var(--line); border-radius: 6px; margin-top: 22px; }
.docs-card__label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 16px 20px 10px; }
.docs-card__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); }
.docs-card__row b { font-size: 14.5px; }
.docs-card__row span { color: var(--mute); font-weight: 400; }
.docs-card__row .btn span { color: inherit; font-weight: inherit; }
.docs-card__row--green { display: block; }
.docs-card__cert { display: inline-block; margin: 10px 16px 0 0; }
.docs-card__certs-label { font-size: 13px; font-weight: 700; margin-top: 12px; }
/* Desktop says "Download"; the phone layout names the document (sheet 17). */
.docs-card__long { display: none; }
.product-badges { margin-top: 12px; }
.product-aka { margin-top: 6px; color: var(--body); font-size: 14px; }

/* Green accreditation badge (FR-32, sheets 4 and 7): the MasterSpec-style
   leaf and the accreditation's name. */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge {
	display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--green); color: var(--green);
	border-radius: 30px; padding: 4px 11px 4px 8px; font-size: 12px; font-weight: 700; background: #fff; white-space: nowrap;
}
.leaf { display: inline-block; flex: none; color: var(--green); vertical-align: -2px; }
.est-leaf { margin-left: 5px; }
.est-key { font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* "Always refer to the TDS" (FR-107): on the product calculator, the
   calculator page and the PDF. */
.calc-legal { font-size: 13px; color: var(--body); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; margin-top: 12px; background: #fff; }
.calc-legal a { color: var(--ink); text-decoration: underline; }

/* Session type label (FR-60). */
.pill {
	display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 3px; background: #f5e5e7; color: var(--brand); vertical-align: middle;
}
.pill--grey { background: var(--ph); color: var(--body); }

/* --- Product calculator and estimate (sheets 4 and 5) ------------------- */
.calc { display: grid; gap: 40px; align-items: start; }
.calc--product { grid-template-columns: 1.1fr 1fr; }
.calc--page { grid-template-columns: 1fr 1.25fr; gap: 28px; }
.calc--page > .card { padding: 32px; }
.calc h2 { margin-bottom: 4px; }
.calc--page h2 { font-size: 24px; margin-bottom: 22px; }
.calc__intro { margin-bottom: 20px; }
.calc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.calc__field { margin-bottom: 16px; }
.calc__field[hidden] { display: none; }
.calc__field label, .calc__label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.calc__field input, .calc__field select, .estimate__project input {
	display: block; width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 4px;
	padding: 12px 14px; font: inherit; font-size: 14.5px; font-weight: 400; background: #fff; color: var(--ink);
}
.calc__field input:focus, .calc__field select:focus, .estimate__project input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.req { color: var(--brand); }
.calc__field--product { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.calc__step { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--body); margin-bottom: 14px; }
.calc__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 7px; }
.calc__seg label {
	display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 4px;
	padding: 12px 14px; font-weight: 500; cursor: pointer; background: #fff;
}
.calc__seg label:has(input:checked) { border-color: var(--brand); background: #fbf5f6; }
.calc__seg input { accent-color: var(--brand); width: 17px; height: 17px; margin: 0; }
.calc__hint { font-size: 12.5px; color: var(--mute); margin: -4px 0 18px; }
.calc__results[hidden], .calc__fields[hidden] { display: none; }
.result { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.result > div { background: var(--ph2); border-radius: 6px; padding: 18px; }
.section--tint .result > div { background: #fff; }
.result span { display: block; font-size: 11.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .12em; }
.result b { display: block; margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.result small { font-size: 22px; }
.calc__note { font-size: 13px; color: var(--body); }
.calc__btns { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.calc__msg { font-size: 13px; color: var(--green); margin-top: 10px; font-weight: 600; }
.calc__msg:empty { display: none; }

.estimate__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.estimate__head h2 { margin-bottom: 18px; }
.estimate__count { font-size: 13px; color: var(--mute); }
.estimate__project { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 20px; }
.estimate__table-wrap { overflow-x: auto; }
.est-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--line); border-radius: 6px; }
.est-table th {
	text-align: left; padding: 12px 14px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--body); background: var(--ph2); border-bottom: 1px solid var(--line);
}
.est-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.est-table td b { display: block; }
.est-table td small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.est-remove { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mute); cursor: pointer; padding: 0 4px; }
.est-remove:hover { color: var(--brand); }
.estimate__empty { font-size: 14px; color: var(--mute); padding: 26px; border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.estimate__empty[hidden], .est-table[hidden] { display: none; }
.estimate__btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 16px; }
.estimate__print-head { display: none; }

/* --- Product data sheets (sheet 7) --------------------------------------- */
.ds-search {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 14px; align-items: end;
	background: var(--ph2); border-radius: 6px; padding: 26px 28px; margin-bottom: 44px;
}
.ds-search label { font-size: 13.5px; font-weight: 700; }
.ds-search input, .ds-search select {
	display: block; width: 100%; margin-top: 7px; border: 1px solid var(--line); border-radius: 4px;
	padding: 13px 14px; font: inherit; font-size: 14.5px; font-weight: 400; background: #fff;
}
.ds-search .btn { padding: 14px 26px; }
.ds-or { font-size: 22px; margin-bottom: 22px; }
.ds-results-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.ds-results-head h2 { font-size: 32px; }
.ds-results-head__brand { color: var(--mute); }
.ds-count { margin-top: 4px; color: var(--ink); }
.ds-results-head__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--dark:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.ds-within { border: 1px solid var(--line); border-radius: 4px; padding: 11px 14px; font: inherit; font-size: 14px; min-width: 280px; background: #fff; }
/* The column names stay on screen while the rows scroll past (Look Floors,
   20 October 2026). A table wider than the page scrolls sideways in its own
   box, a screen high, with the names pinned to the box's top. One that fits
   (.fits, set by page-data-sheets.php) scrolls with the page instead, the
   names pinned under the sticky header, whose height the script passes in
   as --header-h. A collapsed border doesn't move with a sticky cell, so the
   names' bottom line is a shadow. */
.doc-table-wrap { overflow: auto; max-height: calc(100svh - 90px); }
.doc-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
.doc-table-wrap.fits { overflow: visible; max-height: none; }
.doc-table-wrap.fits thead th { top: var(--header-h, 73px); }
/* Viewport heights are zoomed with the page, so 80svh fills the screen at 125%. */
@media (min-width: 600px) { .doc-table-wrap { max-height: calc(80svh - 90px); } }
.doc-product { white-space: nowrap; }
.doc-dl { font-size: 17px; }
.doc-none { color: var(--mute); }

/* --- Catalogue viewer (sheet 9) ------------------------------------------ */
.catalogue { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.viewer { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--ph2); }
.viewer:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; }
.viewer__bar {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--dark); color: #fff; padding: 10px 16px; font-size: 13.5px;
}
.viewer__bar[hidden] { display: none; }
.viewer__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viewer__bar button {
	background: none; border: 1px solid transparent; color: #fff; cursor: pointer; font: inherit;
	padding: 3px 8px; border-radius: 3px;
}
.viewer__bar button:hover:not(:disabled) { border-color: #5a5a60; }
.viewer__bar button:disabled { opacity: .35; cursor: default; }
.viewer__bar input {
	width: 56px; margin-left: 6px; border: 1px solid #5a5a60; border-radius: 3px; background: #2e2e32;
	color: #fff; padding: 3px 6px; font: inherit;
}
.viewer__contents { position: relative; }
.viewer__toc {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: 300px; max-height: 360px; overflow-y: auto;
	background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.14); padding: 6px 0;
}
.viewer__toc[hidden] { display: none; }
.viewer__toc button { display: block; width: 100%; text-align: left; color: var(--ink); padding: 8px 14px; border: 0; border-radius: 0; }
.viewer__toc button:hover { background: var(--ph2); color: var(--brand); border: 0; }
.viewer__stage { height: 720px; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px; }
.viewer:fullscreen .viewer__stage { height: auto; flex: 1; }
.viewer__stage:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Until the first page is drawn: a large catalogue can take a moment. */
.viewer__stage.is-loading { position: relative; }
.viewer__stage.is-loading::before {
	content: "Loading catalogue…"; position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; color: var(--mute); font-size: 14px;
}
.viewer__stage.is-loading .viewer__page { visibility: hidden; }
.viewer__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.viewer__sheet { position: relative; margin: auto; line-height: 0; }
.viewer__page { box-shadow: 0 4px 18px rgba(0,0,0,.14); background: #fff; }
.viewer__stage.is-loading .viewer__links { visibility: hidden; }
/* The PDF's links, over the page: invisible until pointed at. */
.viewer__links a, .viewer__links button {
	position: absolute; display: block; padding: 0; border: 0; border-radius: 2px;
	background: transparent; cursor: pointer;
}
.viewer__links a:hover, .viewer__links button:hover,
.viewer__links a:focus-visible, .viewer__links button:focus-visible {
	background: rgba(166, 25, 46, .1); outline: 1px solid rgba(166, 25, 46, .45);
}
.viewer__thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px; border-top: 1px solid var(--line); background: #ececee; }
.viewer__thumbs[hidden] { display: none; }
.viewer__thumbs button {
	flex: none; position: relative; min-width: 60px; height: 124px; border: 2px solid transparent; border-radius: 3px;
	background: #fff; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.viewer__thumbs button canvas { display: block; max-height: 120px; }
.viewer__thumbs button span {
	position: absolute; bottom: 3px; right: 3px; font-size: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 1px 5px; border-radius: 2px;
}
.viewer__thumbs button.is-on { border-color: var(--brand); }
.catalogue__info h2 { font-size: 36px; }
.catalogue__meta { margin-top: 8px; color: var(--mute); font-size: 16px; }
.catalogue__text { margin: 18px 0 24px; }

/* --- Training form: the session carried in by Join Session (sheet 10) ---- */
.session-pick {
	display: flex; align-items: center; gap: 12px; border: 1px solid var(--brand); background: #fbf5f6;
	border-radius: 4px; padding: 13px 16px; margin-top: 8px;
}
.session-pick__dot { width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--brand); background: #fff; flex: none; }
.session-pick__name { flex: 1; color: var(--ink); }
.session-pick a { color: var(--brand); font-weight: 700; text-decoration: none; }
.session-pick a:hover { text-decoration: underline; }
/* After Join Session the topics are fixed (rev 3.0): greyed, the session's
   own topic still ticked. */
.topics-locked label { opacity: .5; cursor: not-allowed; }
.topics-locked label:has(input:checked) { opacity: .75; }
.topics-locked input { cursor: not-allowed; }

/* Homepage "Next sessions" rows (sheet 1, note 11). */
.next-session {
	display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center;
	padding: 14px 0; border-bottom: 1px solid var(--line);
}
.next-session__date { font-size: 13px; color: var(--body); }
.next-session__what .pill { margin-left: 8px; }

/* --- To-be-confirmed panels

.info-card { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 24px; }
.info-card ul li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-card ul li:last-child { border-bottom: 0; }

/* --- Training ----------------------------------------------------------- */
.session {
	display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
	border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px;
}
.session__date { text-align: center; }
.session__date b { display: block; font-size: 20px; line-height: 1.05; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.session__date span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.session h3 { font-size: 15.5px; margin-top: 6px; }
.session p { font-size: 13px; margin-top: 2px; }

/* --- Case studies ------------------------------------------------------- */
.featured { display: grid; grid-template-columns: 1.4fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.featured .ph { aspect-ratio: 16 / 10; height: 100%; }
.featured__body { padding: 36px; align-self: center; }
.cs-card .ph { aspect-ratio: 4 / 3; }
.cs-card__meta { font-size: 12.5px; color: var(--mute); }
.cs-card h3 { margin: 4px 0 10px; }
.chip--select { position: relative; padding: 0; }
.chip--select select {
	appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; color: inherit;
	padding: 8px 32px 8px 15px; border-radius: 999px; cursor: pointer;
}
.chip--select::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; }
.chip--select.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--select select option { color: var(--ink); }

.facts { background: var(--ph2); border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
.facts__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts__row:last-child { border-bottom: 0; }
.facts__row span:first-child { color: var(--body); }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.contact-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-row__icon { width: 38px; height: 38px; border-radius: 6px; background: #f7eaec; color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.contact-row b { display: block; font-size: 14.5px; }
.contact-row span { color: var(--body); font-size: 14px; }
.contact-row a { color: var(--brand); }
.form-card { border: 1px solid var(--line); border-radius: 6px; padding: 32px; background: #fff; }
/* Forminator puts a 2px margin either side of links in field descriptions,
   which reads as a double space ("See our  privacy policy"). */
.forminator-ui .forminator-description a { margin: 0 !important; }
/* Training: upcoming events beside the request form (6 October 2026). */
.training-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.training-split__sessions { display: grid; gap: 14px; margin-top: 24px; }
.training-split #request { scroll-margin-top: 90px; }

/* --- Forminator forms ---------------------------------------------------- */
/* Checkbox and radio options as the bordered tiles drawn on sheets 10 and 11,
   two to a row. Scoped to the form cards so wp-admin previews are untouched. */
.form-card .forminator-field-checkbox .forminator-field { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-card .forminator-field-checkbox .forminator-label,
.form-card .forminator-field-checkbox .forminator-description { grid-column: 1 / -1; }
.form-card .forminator-field-radio .forminator-field { display: grid; gap: 10px; }
.form-card .forminator-checkbox, .form-card .forminator-radio {
	border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px !important; margin: 0 !important; background: #fff;
}
.form-card .forminator-checkbox:has(input:checked), .form-card .forminator-radio:has(input:checked) { border-color: var(--brand); background: #fbf5f6; }
/* The single mailing-list tick box is a plain line, not a tile. */
.form-card .forminator-field-checkbox:has(.forminator-checkbox:only-of-type) .forminator-field { grid-template-columns: 1fr; }
.form-card .forminator-field-checkbox:has(.forminator-checkbox:only-of-type) .forminator-label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Submit buttons are red on every form sheet (8, 10, 11, 15). */
.form-card .forminator-button-submit {
	background: var(--brand) !important; color: #fff !important; border-radius: 4px !important;
	padding: 13px 24px !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: none !important;
}
.form-card .forminator-button-submit:hover { background: var(--brand-d) !important; }
.form-card .forminator-title { font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase; color: var(--body) !important; }

/* --- Red CTA band (every page except Contact and Request) ---------- */
.cta { background: var(--brand); color: #fff; padding: 62px 0; text-align: center; }
.cta .eyebrow { color: rgba(255,255,255,.75); }
.cta h2 { font-size: 34px; }
.cta p { color: rgba(255,255,255,.82); margin-top: 10px; }
.cta__btns { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.cta .btn--primary { background: var(--brand-d); border-color: rgba(255,255,255,.4); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--dark); color: #b9babd; padding: 56px 0 26px; font-size: 13.5px; }
.site-footer a { color: #b9babd; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr 1fr; gap: 30px; }
.site-footer li { margin-bottom: 7px; }
.site-footer .logo svg * { fill: #fff; }
.site-footer__tagline { color: #b9babd !important; margin-top: 16px; }
/* Email, phone, then the address on its own lines - no labels. */
.site-footer__contact { margin-top: 18px; font-style: normal; display: grid; gap: 6px; line-height: 1.5; }
.site-footer__contact span { margin-top: 4px; }
.site-footer .tbc-text { color: #b9babd; font-weight: 400; }
.branches { margin-top: 40px; padding-top: 26px; border-top: 1px solid #3a3a3e; }
.branches__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 30px; }
.branches b { display: block; color: #fff; margin-bottom: 4px; }
.branches span, .branches a { display: block; font-size: 13px; }
.site-footer .legal { border-top: 1px solid #3a3a3e; margin-top: 40px; padding-top: 18px; display: flex; justify-content: space-between; font-size: 12px; }

/* --- Utility ------------------------------------------------------------ */
.notice { background: #fff8e1; border: 1px solid #f2b705; border-radius: 5px; padding: 13px 16px; font-size: 13.5px; }
/* About: the page content opens with its own heading. */
.story > h2 + * { margin-top: 18px; }
.story p + p { margin-top: 12px; }
/* Logged-in staff only, on a product page: show or hide it, edit it. */
.staff-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; padding: 10px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); background: #eef6f0; border-bottom: 1px solid #cfe5d5; font-size: 14px; }
.staff-bar--hidden { background: #faf1f3; border-bottom-color: #efd4d8; }
.staff-bar .btn + .btn { margin-left: 6px; }
/* Look Floors' banner beside the story: words on it, so never cropped. */
.about__photo { width: 100%; height: auto; border-radius: 4px; display: block; }

.skeleton { height: 9px; border-radius: 4px; background: var(--ph); margin-bottom: 7px; }
.skeleton:nth-child(2) { width: 92%; }
.skeleton:nth-child(3) { width: 74%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.nav-main .nav-main__back { display: none; }

/* --- Responsive (sheet 17) ---------------------------------------------- */
@media (max-width: 1300px) {
	.training-split { grid-template-columns: 1fr; gap: 40px; }
	:root { --gutter: 32px; }
	.nav-main ul { gap: 18px; }
	.logo svg { height: 34px; }
	h1 { font-size: 36px; }
	.hero h1 { font-size: 40px; }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--5 { grid-template-columns: repeat(3, 1fr); }
	.page-head__inner.has-media { grid-template-columns: 1fr; }
	.product-top { grid-template-columns: 1fr; gap: 28px; }
	.featured { grid-template-columns: 1fr; }
	.site-footer .cols { grid-template-columns: repeat(2, 1fr); }
	.calc--product, .calc--page, .catalogue, .contact-grid { grid-template-columns: 1fr; }
	.ds-search { grid-template-columns: 1fr 1fr; }
	.ds-search__name { grid-column: 1 / -1; }
	.viewer__stage { height: 560px; }
}

@media (max-width: 950px) {
	:root { --gutter: 20px; }
	h1 { font-size: 30px; }
	h2 { font-size: 24px; }
	.hero { padding: 40px 0 44px; }
	/* Text runs the full width on a phone, so the photo is dimmed evenly. */
	.hero--photo::before { background: rgba(35,35,38,.82); }
	.hero h1 { font-size: 32px; }
	.cta h2 { font-size: 26px; }

	.nav-toggle { display: flex; }
	/* On a phone the field spans from the left edge to the search button,
	   covering the logo while it is open (the menu button sits to its right). */
	.hdr-search { left: var(--gutter); right: calc(var(--gutter) + 96px); padding-left: 0; }
	.hdr-search__form { width: 100%; }
	.hdr-search__form input { flex: 1; width: auto; }
	.hdr-search__form button { flex: none; }
	/* Menu opens full screen, Products and Specification expand (sheet 17.2). */
	.nav-main {
		display: none; position: fixed; inset: 71px 0 0; background: #fff; z-index: 49;
		padding: 8px var(--gutter) 24px; overflow-y: auto;
	}
	.nav-main.is-open { display: block; }
	.nav-main ul { flex-direction: column; gap: 0; }
	.nav-main > ul > li > a { display: block; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 700; }
	.nav-main .menu-item-has-children > a::after { content: " +"; float: right; color: var(--mute); font-size: 19px; }
	.nav-main .sub-menu {
		display: none; position: static; border: 0; box-shadow: none; padding: 6px 0 14px; min-width: 0;
		visibility: visible; opacity: 1; transform: none; transition: none;
	}
	.nav-main .sub-menu::before { display: none; }
	.nav-main li.is-expanded > .sub-menu { display: flex; }
	.nav-main .sub-menu a { padding: 9px 0 9px 14px; font-size: 15px; color: var(--body); }
	.nav-main .nav-main__back { display: block; text-align: center; margin-top: 40px; font-size: 13.5px; color: var(--mute); text-decoration: none; }

	/* Home: search and Browse Products stay at the top, categories two-up. */
	.hero__btns .btn { width: 100%; }
	.grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
	.grid--2 { grid-template-columns: 1fr; }
	.stat-band { grid-template-columns: 1fr; gap: 22px; }

	/* Product page: TDS, MSDS and BPIR stay at the top as full-width buttons
	   named after the document, then "Calculate quantity" (sheet 17, note 3). */
	.docs-card { border: 0; margin-top: 18px; }
	.docs-card__label { display: none; }
	.docs-card__row { flex-direction: column; align-items: stretch; gap: 10px; padding: 0 0 10px; border: 0; }
	.docs-card__row > b { display: none; }
	.docs-card__row .btn { width: 100%; padding: 13px 16px; }
	.docs-card__row--green { padding-top: 6px; }
	.docs-card__row--green b { display: block; }
	.docs-card__short { display: none; }
	.docs-card__long { display: inline; }
	.calc-jump { display: flex; justify-content: center; border: 1px solid var(--ink); border-radius: 4px; padding: 12px; color: var(--ink); }

	.ds-search { grid-template-columns: 1fr; padding: 20px; }
	.ds-within { min-width: 0; width: 100%; }
	.ds-results-head h2 { font-size: 26px; }
	.next-session { grid-template-columns: 1fr auto; }
	.next-session__date { grid-column: 1 / -1; }
	.viewer__stage { height: 440px; }
	.calc--page > .card { padding: 22px; }
	.form-card .forminator-field-checkbox .forminator-field { grid-template-columns: 1fr; }

	.session { grid-template-columns: 56px 1fr; }
	.session .btn { grid-column: 2; justify-self: start; }
	.section-head--row { flex-direction: column; align-items: flex-start; }
	.filterbar input { min-width: 0; width: 100%; }
	.filterbar .count { margin-left: 0; }
	.site-footer .cols { grid-template-columns: 1fr; }
}

/* --- Print: only the estimate, on the calculator page (FR-105) ----------- */
@media print {
	html { zoom: 1; }
	body:has(.estimate) * { visibility: hidden; }
	body:has(.estimate) .estimate, body:has(.estimate) .estimate * { visibility: visible; }
	body:has(.estimate) .estimate { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; }
	.estimate__btns, .est-table th:last-child, .est-table td:last-child, .estimate__project, .estimate__count { display: none !important; }
	.estimate__print-head { display: block; font-size: 14px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #a6192e; }
	.estimate__print-head span { display: block; color: #55575c; margin-top: 4px; }
	/* "Prepared for" (FR-105): left out entirely when there is no account name. */
	.estimate__print-head span[hidden] { display: none; }
	.estimate__print-head [data-est="print-account"] { color: #1c1c1f; font-weight: 700; margin-top: 10px; }
	.site-header { position: static; }
}