/*
 * Product pages in the new design (2026-11-03): the Products landing and
 * listings, categories, sub-categories, load classes and sectors
 * (taxonomy.php), search results, a single product, compare and the quote page.
 *
 * Builds on the shared "18. Inner pages: shared system" section of
 * td-utility-style.css (ip- classes, bands, buttons) and is loaded AFTER it
 * (see inc/theme-setup.php), so where a rule here meets an older one in the
 * main stylesheet with the same weight, this one wins. The older product rules
 * in that file (sections 7, 7a, 8, 9, 18, 19) are overridden here rather than
 * deleted, because they are not ours to edit.
 *
 * The rules this file holds to (DESIGN.md, and Lee's 2026-11-03 reviews):
 *   - Square corners, flat surfaces, charcoal and red as big surfaces, dense.
 *   - A hover never turns text the colour of its own background.
 *   - Focus is the site-wide white outline with a dark ink ring (never red).
 *   - Targets are at least 44px. Product pictures are never drawn above 1x
 *     (only max-width / max-height are set on them, never a width).
 *   - A selected state is never shown by colour alone (a tick, weight or shape too).
 *
 * Contents:
 *   1. Product card (pc-)                 6. Landing: category cards, lens, featured
 *   2. Product grid and closing tile      7. Single product (sp-, tdup-product__)
 *   3. Filters sidebar and mobile drawer  8. Compare
 *   4. Results bar, chips, pagination     9. Quote
 *   5. Load-class panel, empty, guides
 */

/* ==========================================================================
   1. PRODUCT CARD
   Laid out like the homepage's popular-product card: the product on a light
   studio sweep, the class tag top-left, the name in display caps, sizes,
   feature tags, the load-class bar, then the main action beside a PDF button.
   Markup: tdup_product_card() in functions.php.
   ========================================================================== */
.tdup-product-card {
	/* A size container: the card reacts to ITS OWN width (see the @container
	   rule below), so the same card works in a 4-column desktop grid and a
	   2-column phone grid. */
	container: tdup-card / inline-size;
	position: relative; display: flex; flex-direction: column; min-width: 0;
	background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-radius: 0;
	overflow: visible; transition: border-color 0.15s;
}
.tdup-product-card:hover { border-color: var(--tdup-charcoal); }

.pc__ph {
	position: relative; display: flex; align-items: center; justify-content: center;
	padding: 34px 14px 14px; aspect-ratio: 4 / 3; text-decoration: none;
	background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 75%);
}
.pc__ph { overflow: hidden; }
/* The picture is laid over the box (absolute, centred), so a tall or odd-shaped photo can never stretch its card: every card's photo box is the same 4:3. Only max sizes are set, so it is never drawn above its own size. */
.pc__ph img { position: absolute; inset: 34px 14px 14px; margin: auto; display: block; max-width: calc(100% - 28px); max-height: calc(100% - 48px); width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
/* mix-blend-mode: multiply (here and on the category tiles and the product page photo below): many product photos have a pure white background. Multiplying them with the light studio sweep behind makes the white take the sweep's colour while the product stays as it is, so there is no white box. Only used on light backgrounds: on a dark one multiply would darken the photo. Nothing between the img and its sweep may set opacity, filter, transform or isolation, which would cut the blend off. */
/* The class tag, cast-lettering style, like the homepage cards. */
.pc__class {
	position: absolute; left: 0; top: 0; z-index: 1; padding: 6px 10px 5px;
	background: var(--tdup-charcoal); color: var(--tdup-white);
	font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: 17px; line-height: 1;
	text-transform: uppercase; letter-spacing: 0.005em;
}

/* The body is only as tall as its content; the buttons are pushed to the card's foot (margin-top:auto), so spare height in a row sits ABOVE the buttons, never between a search-match box and the card. */
.pc__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 8px; min-width: 0; }
.tdup-product-card .pc__name {
	margin: 0; font-family: var(--tdup-font-title); font-stretch: 110%; font-weight: 800;
	font-size: 18px; line-height: 1.12; text-transform: uppercase; color: var(--tdup-charcoal); overflow-wrap: anywhere;
}
/* The name is the card's real link. Hover underlines it; the colour never changes. */
.pc__name a, .pc__name a:hover { color: var(--tdup-charcoal); text-decoration: none; }
.pc__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pc__meta { margin: 0; font-size: 15px; line-height: 1.35; color: var(--tdup-body-grey); }
.pc__meta:empty { display: none; }
.pc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc__tags span { padding: 3px 8px; background: var(--tdup-off-white); border: 1px solid var(--tdup-rule); font-size: 12px; font-weight: 700; color: var(--tdup-charcoal); }

/* The load-class bar on a card: five slim bars with the codes underneath. The
   product's own class is a taller red bar AND bold dark text, so it is never
   shown by colour alone (it also has an aria-label). */
.tdup-class-bar--card { gap: 2px; margin-top: 4px; }
.tdup-class-bar--card .tdup-class-bar__cell {
	margin: 0; padding: 4px 0 0; justify-content: center; align-items: flex-start;
	border: 0; border-top: 6px solid var(--tdup-rule); background: none;
	font-stretch: 100%; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; color: var(--tdup-grey-3);
}
.tdup-class-bar--card .tdup-class-bar__cell.is-current { border-top: 8px solid var(--tdup-red); margin-top: -2px; background: none; color: var(--tdup-charcoal); font-weight: 800; }

/* "Compare" tick-box: a plain labelled checkbox row inside the card (it used to
   float over the photo corner; with the class tag there it overlapped on small
   cards). A 44px-tall target. */
.pc .tdup-compare-checkbox {
	position: static; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
	min-height: 44px; margin: 0 0 -4px; padding: 0; background: none; border: 0;
	font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tdup-charcoal);
}
.pc .tdup-compare-checkbox input[type="checkbox"], .tdup-filters input[type="checkbox"] {
	width: 22px; height: 22px; border: 2px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-white);
}
.pc .tdup-compare-checkbox input[type="checkbox"]::before, .tdup-filters input[type="checkbox"]::before { width: 12px; height: 12px; }
.pc .tdup-compare-checkbox input[type="checkbox"]:checked, .tdup-filters input[type="checkbox"]:checked { background: var(--tdup-red); border-color: var(--tdup-red); }
.pc .tdup-compare-checkbox:hover input[type="checkbox"], .tdup-filters label:hover input[type="checkbox"]:not(:disabled) { border-color: var(--tdup-red); }
.pc .tdup-compare-checkbox input[type="checkbox"]:focus-visible, .tdup-filters input[type="checkbox"]:focus-visible {
	outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink);
}

/* Search results add a "matching options" box (inc/search-index.php) between the body and the buttons. */
.pc .tdup-search-match { margin: 4px 16px 0; padding: 8px 10px 10px; border: 1px solid var(--tdup-rule); border-left: 4px solid var(--tdup-charcoal); }

.pc__act { display: flex; gap: 8px; padding: 8px 16px 16px; margin-top: auto; }
.pc__btn, .pc__btn:hover {
	flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px;
	border: 0; border-radius: 0; background: var(--tdup-red); color: var(--tdup-white); cursor: pointer; text-decoration: none; white-space: nowrap;
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.pc__btn:hover { background: var(--tdup-red-dark); }
.pc__ds, .pc__ds:hover {
	flex: none; width: 56px; min-height: 46px; display: flex; align-items: center; justify-content: center;
	border: 2px solid var(--tdup-charcoal); color: var(--tdup-charcoal); background: var(--tdup-white); text-decoration: none;
	font: 800 11px var(--tdup-font-title); letter-spacing: 0.06em;
}
.pc__ds:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
/* A narrow card (a 2-column phone grid): buttons stack, so a label never wraps or clips. */
@container tdup-card (max-width: 250px) {
	.pc__body { padding: 10px 12px 6px; }
	.pc__act { flex-direction: column; padding: 6px 12px 12px; }
	.pc__ds, .pc__ds:hover { width: auto; }
	.tdup-product-card .pc__name { font-size: 15px; }
	.pc__meta { font-size: 13px; }
	.pc__class { font-size: 15px; }
	/* Five class codes in ~140px: no tracking, a touch smaller, so they never touch. */
	.tdup-class-bar--card .tdup-class-bar__cell { font-size: 8.5px; letter-spacing: 0; }
	.pc .tdup-search-match { margin: 4px 12px 0; }
	.pc .tdup-search-match li { flex-direction: column; gap: 0; padding: 4px 0; }
	.pc .tdup-search-match li span { overflow-wrap: normal; }
}

/* ==========================================================================
   2. PRODUCT GRID AND THE CLOSING TILE
   2 columns on phones, 3 on tablets, 2 again where the sidebar takes room
   (801-1000px), 3, then 4 from 1200px. The red tile at the end spans however
   many cells are left in the last row (PHP sends --s2/--s3/--s4), so a grid
   never ends in an empty hole. --sp is the span for the current column count.
   ========================================================================== */
.tdup-product-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
@media (min-width: 560px) { .tdup-product-listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 801px) { .tdup-product-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1001px) { .tdup-product-listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tdup-product-listing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* --s2/--s3/--s4 are set on the tile itself (inline), so the span is chosen here, on the tile. */
.pc-tile { --sp: var(--s2, 1); }
@media (min-width: 560px) { .pc-tile { --sp: var(--s3, 1); } }
@media (min-width: 801px) { .pc-tile { --sp: var(--s2, 1); } }
@media (min-width: 1001px) { .pc-tile { --sp: var(--s3, 1); } }
@media (min-width: 1200px) { .pc-tile { --sp: var(--s4, 1); } }
.pc-tile { grid-column: span var(--sp, 1); container: pc-tile / inline-size; display: flex; background: var(--tdup-red); color: var(--tdup-white); min-width: 0; }
.pc-tile__in { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px; min-width: 0; }
.pc-tile .pc-tile__title { margin: 0; font-size: 26px; line-height: 1; color: var(--tdup-white); }
.pc-tile p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.95); }
.pc-tile .tdup-button { max-width: 100%; white-space: normal; text-align: center; }
/* A wide tile (the last row has room): text on the left, the button on the right. */
@container pc-tile (min-width: 520px) {
	.pc-tile__in { flex-direction: row; align-items: center; gap: 24px 32px; padding: 22px 28px; }
	.pc-tile .pc-tile__title { font-size: 32px; }
	.pc-tile__copy { flex: 1; }
	.pc-tile .tdup-button { flex: none; }
}
/* A tile of only one narrow cell: tighter type, so it still fits a 160px phone cell. */
@container pc-tile (max-width: 230px) {
	.pc-tile__in { padding: 12px; }
	.pc-tile .pc-tile__title { font-size: 19px; }
	.pc-tile p { font-size: 13.5px; }
	.pc-tile .tdup-button { padding: 8px 10px; font-size: 11px; letter-spacing: 0.06em; font-stretch: 100%; }
}

/* ==========================================================================
   3. FILTERS SIDEBAR (desktop) AND DRAWER (phone)
   A white panel with a heavy charcoal top edge (the .ip-panel look). It sticks
   under the header while the products scroll. The checked box is red WITH a
   tick, and the label turns bold, so "selected" is never colour alone.
   ========================================================================== */
.pc-listing-band { padding-top: 24px; padding-bottom: 48px; }
.tdup-product-listing { padding-bottom: 0; flex: none; }
.pc-results { min-width: 0; }
@media (min-width: 801px) {
	.tdup-product-listing { grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
	.tdup-filters-drawer { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1200px) { .tdup-product-listing { grid-template-columns: 252px minmax(0, 1fr); gap: 28px; } }

.tdup-filters { background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-top: 6px solid var(--tdup-charcoal); border-radius: 0; padding: 0 14px 4px; }
.tdup-filters__clear, .tdup-filters__clear:hover {
	display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 12px 0 0; padding: 0 12px;
	background: var(--tdup-white); color: var(--tdup-charcoal); box-shadow: inset 0 0 0 2px var(--tdup-charcoal); text-decoration: none;
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tdup-filters__clear:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-filter-group { border-bottom: 1px solid var(--tdup-rule); }
.tdup-filter-group:last-of-type { border-bottom: 0; }
.tdup-filter-group__summary {
	min-height: 48px; padding: 0 2px; font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700;
	font-size: 12.5px; letter-spacing: 0.12em; color: var(--tdup-charcoal);
}
.tdup-filter-group__summary:hover { color: var(--tdup-charcoal); background: var(--tdup-off-white); }
.tdup-filters .tdup-filter-group__panel { padding: 0 0 10px; }
.tdup-filters label { min-height: 44px; margin: 0; padding: 0 2px; gap: 0; font-size: 15px; line-height: 1.25; color: var(--tdup-charcoal); }
.tdup-filters label:hover { color: var(--tdup-charcoal); background: var(--tdup-off-white); }
.tdup-filters label:has(input:checked) { font-weight: 800; }
.tdup-filters input[type="checkbox"] { margin: 0 10px 0 0; }
.tdup-filters__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tdup-filters__n { margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--tdup-grey-3); }
.tdup-filters__empty-term { color: var(--tdup-grey-3); }
.tdup-filters__empty-term:hover { background: none; color: var(--tdup-grey-3); }
.tdup-filters__empty-term span { font-size: 12.5px; margin-left: 6px; }
.tdup-filters__child-term { padding-left: 22px; }

/* Phone: a button above the products opens the same panel as a drawer. */
@media (max-width: 800px) {
	.tdup-filters-toggle, .tdup-filters-toggle:hover {
		min-height: 48px; margin-bottom: 14px; padding: 0 16px; border: 0; border-radius: 0; cursor: pointer;
		background: var(--tdup-charcoal); color: var(--tdup-white);
		font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
	}
	.tdup-filters-toggle:hover { background: var(--tdup-charcoal-2); }
	.tdup-filters-drawer { padding: 0; background: var(--tdup-off-white); }
	.tdup-filters-drawer .tdup-filters { background: var(--tdup-white); border: 0; border-top: 6px solid var(--tdup-charcoal); padding: 40px 16px 8px; min-height: 100%; }
	.tdup-filters__close { top: 8px; right: 8px; width: 44px; height: 44px; }
	.pc-listing-band { padding-top: 16px; padding-bottom: 40px; }
}

/* ==========================================================================
   4. RESULTS BAR, CHIPS, PAGINATION
   ========================================================================== */
.pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.pc-bar:empty { display: none; }
.pc-bar__count { margin: 0; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tdup-body-grey); }
.pc-bar__count strong { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; color: var(--tdup-charcoal); }
.tdup-active-filters { margin: 0; gap: 8px; }
/* A switched-on filter: charcoal, with the cross (a real link that removes it). */
.tdup-chip--removable, .tdup-chip--removable:hover {
	min-height: 44px; padding: 0 14px; gap: 8px; border: 0; background: var(--tdup-charcoal); color: var(--tdup-white);
	font-family: var(--tdup-font-title); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-decoration: none;
}
.tdup-chip--removable:hover { background: var(--tdup-charcoal-2); }
.tdup-chip__remove { color: var(--tdup-white); font-size: 18px; line-height: 1; }
.tdup-search-count { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--tdup-charcoal); }
.tdup-search-notice { background: var(--tdup-white); }

.pagination { margin-top: 28px; }
.pagination .nav-links { gap: 6px; }
.pagination .page-numbers, .pagination a.page-numbers:hover {
	min-width: 44px; height: 44px; padding: 0 12px; border: 2px solid var(--tdup-charcoal); border-radius: 0;
	font-family: var(--tdup-font-title); font-weight: 800; font-size: 14px; color: var(--tdup-charcoal); background: var(--tdup-white); text-decoration: none;
}
.pagination a.page-numbers:hover { background: var(--tdup-charcoal); color: var(--tdup-white); border-color: var(--tdup-charcoal); }
.pagination .page-numbers.current { background: var(--tdup-red); border-color: var(--tdup-red); color: var(--tdup-white); }
.pagination .page-numbers.dots { border-color: transparent; background: none; color: var(--tdup-grey-3); }
.pagination__jump { gap: 8px; margin-left: 12px; padding-left: 16px; border-left: 2px solid var(--tdup-rule); font-size: 14px; color: var(--tdup-charcoal); }
.pagination__jump label { font-weight: 700; }
.pagination__jump input { width: 64px; height: 44px; border: 2px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-white); font-size: 15px; }
.pagination__jump input:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); border-color: var(--tdup-charcoal); }
.pagination__jump button, .pagination__jump button:hover {
	height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: var(--tdup-red); color: var(--tdup-white);
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.pagination__jump button:hover { background: var(--tdup-red-dark); }

/* ==========================================================================
   5. LOAD-CLASS PANEL, "NOTHING HERE", GUIDES, SECTOR CONTENT
   ========================================================================== */
/* The red class panel at the top of a load-class page (tdup_load_class_panel()). */
.lc-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 14px; padding: 16px 24px; background: var(--tdup-red); color: var(--tdup-white); overflow: hidden; }
.lc-panel__main { display: flex; align-items: center; gap: 20px 28px; min-width: 0; }
.lc-panel .lc-panel__code { margin: 0; font-size: clamp(52px, 6vw, 88px); line-height: 0.9; letter-spacing: -0.01em; color: var(--tdup-white); }
.lc-panel__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 62ch; }
.lc-panel .ip-lab { color: var(--tdup-white); }
.lc-panel__where { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.lc-panel__detail { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.95); }
/* The company's drawing: shown at its own size at most (never scaled up). */
.lc-panel__img { display: block; flex: none; width: auto; max-width: 280px; max-height: 150px; height: auto; margin: -6px 0 -10px; }
@media (max-width: 700px) {
	.lc-panel { flex-direction: column; align-items: flex-start; padding: 16px; }
	.lc-panel__main { flex-direction: column; align-items: flex-start; gap: 8px; }
	.lc-panel__img { max-width: 220px; margin: 0; }
}

/* Nothing found (archive, category, class, sector). */
.pc-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 24px; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-left: 8px solid var(--tdup-red); }
.pc-empty__msg { margin: 0; font-size: 19px; font-weight: 700; color: var(--tdup-charcoal); }
.tdup-search-empty { background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-left: 8px solid var(--tdup-red); padding: 22px 24px; }
.tdup-search-empty h2 { font-size: clamp(24px, 3vw, 34px); }
.tdup-search-empty li { margin-bottom: 6px; }

/* "Guides for this range" under a category's products. */
.tdup-category-guides { margin-top: 28px; padding-top: 0; border-top: 0; }
.tdup-category-guides h2 { margin: 0 0 12px; font-stretch: 112%; font-weight: 800; letter-spacing: 0.005em; font-size: clamp(22px, 2.4vw, 30px); color: var(--tdup-red); }
.tdup-category-guides ul { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tdup-category-guides a, .tdup-category-guides a:hover { min-height: 76px; padding: 10px 12px; border: 1px solid var(--tdup-rule); border-radius: 0; background: var(--tdup-white); color: var(--tdup-charcoal); text-decoration: none; }
.tdup-category-guides a:hover { border-color: var(--tdup-charcoal); box-shadow: inset 0 -4px 0 var(--tdup-charcoal); }
.tdup-category-guides__text strong { font-size: 15px; }
.tdup-category-guides__text { color: var(--tdup-body-grey); font-size: 13px; }

/* A sector's "challenges and solutions" band (after the products). */
.pc-challenges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: rgba(255, 255, 255, 0.18); }
.pc-challenges li { background: var(--tdup-charcoal-2); padding: 18px 20px 22px; }
.pc-challenges h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.05; color: var(--tdup-white); }
.pc-challenges p { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }
.pc-head-gap { margin-top: 40px; }
.pc-standards, .pc-standards p, .pc-standards li { color: var(--tdup-white); }
.pc-standards a, .pc-standards a:hover { color: var(--tdup-white); }

/* ==========================================================================
   6. PRODUCTS LANDING: category cards, the load-class lens, the featured band
   ========================================================================== */
/* "Where is it going?": five buttons that highlight the ranges that come in that class. */
.tdup-lens { margin: 0 0 16px; padding: 0; border: 0; }
.tdup-lens__label { margin: 0 0 8px; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--tdup-charcoal); }
.tdup-lens__label span { display: inline; margin-left: 8px; font: 400 15px/1.3 var(--tdup-font-body); letter-spacing: 0; text-transform: none; color: var(--tdup-body-grey); }
.tdup-lens__buttons { gap: 8px; }
.tdup-lens__button, .tdup-lens__button:hover {
	min-height: 48px; padding: 0 16px; gap: 10px; align-items: center; border: 2px solid var(--tdup-charcoal); border-radius: 0;
	background: var(--tdup-white); color: var(--tdup-charcoal); cursor: pointer;
}
.tdup-lens__button:hover { background: var(--tdup-sweep); }
.tdup-lens__button b { font: 800 17px/1 var(--tdup-font-title); font-stretch: 112%; }
.tdup-lens__button span { font-size: 13.5px; }
.tdup-lens__button[aria-pressed="true"], .tdup-lens__button[aria-pressed="true"]:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-lens__button[aria-pressed="true"] b::after { content: " \2713"; }
.tdup-lens__button:focus-visible, .tdup-lens__reset:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); }
.tdup-lens__reset, .tdup-lens__reset:hover { min-height: 44px; padding: 0 12px; font: 700 14px var(--tdup-font-body); color: var(--tdup-red); }

/* Category cards (2026-11-04): picture, name, product count and load classes.
   Nothing else, so every card carries the same content and comes out the same
   height with no empty space (Lee's rule: labels must match). The sub-category
   chips that used to sit under the count were removed: they were spreadsheet
   values rather than real ranges, and the category page's filters do that job.
   Grounded in Baymard: an intermediary category page works best as clear
   product thumbnails with titles, as the main content of the page. */
.tdup-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Four across from 1200px; narrower than that, the count and the load classes
   ("B125 · C250 · D400 · E600 · F900") no longer fit on one line. */
@media (min-width: 1200px) { .tdup-range-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 420px) { .tdup-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tdup-range-card { padding: 0; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-radius: 0; }
.tdup-range-card:hover, .tdup-range-card:focus-within { border-color: var(--tdup-charcoal); }
.tdup-range-card__link { flex: none; }
/* Every picture area is the same fixed height (clamped, not aspect-ratio, so it
   doesn't balloon at 1920px). It used to be flex: 1 and shrank or grew with
   whatever was under it. */
.tdup-range-card__stage { flex: none; height: clamp(170px, 15vw, 250px); min-height: 0; aspect-ratio: auto; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 75%); }
.tdup-range-card__stage::before { display: none; } /* the old drawing-sheet corner ticks */
.tdup-range-card__stage img { max-width: 84%; max-height: 84%; transition: none; filter: none; mix-blend-mode: multiply; }
.tdup-range-card:hover .tdup-range-card__stage img, .tdup-range-card:focus-within .tdup-range-card__stage img { transform: none; }
/* min-height keeps room for a two-line name ("Rainwater Drainage Castings") on
   every card, so the count line sits at the same height across a row. */
.tdup-range-card__name { margin: 0; padding: 12px 14px 0; font-family: var(--tdup-font-title); font-stretch: 110%; font-weight: 800; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.1; color: var(--tdup-charcoal); min-height: calc(2.2em + 12px); }
.tdup-range-card__link:hover .tdup-range-card__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tdup-range-card__arrow { opacity: 1; transform: none; }
.tdup-range-card__nowrap { white-space: nowrap; } /* last word + arrow move to a new line together */
.tdup-range-card__meta { margin: 6px 0 0; padding: 0 14px 14px; font-size: 14px; color: var(--tdup-body-grey); }
.tdup-range-card__meta b { color: var(--tdup-charcoal); }
.tdup-range-card__match { margin: 0; padding: 0 14px 12px; }
/* A matching card gets a red frame all the way round. It is drawn OUTSIDE the
   card (a red border plus a 2px outer shadow): the old inset shadow was hidden
   behind the photo, so the red only showed round the white label. */
.tdup-range-card.is-match { border-color: var(--tdup-red); box-shadow: 0 0 0 2px var(--tdup-red); }
.tdup-range-card.is-match .tdup-range-card__match { color: var(--tdup-red); }
.tdup-range-card.is-dim { background: var(--tdup-off-white); }
.tdup-range-card__link:focus-visible::after { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 3px var(--tdup-ink); }
/* Phones (two narrow cards a row): long names wrap to three lines, so reserve
   three; and the count and the classes sit on two lines, so reserve two. */
@media (max-width: 600px) {
	.tdup-range-card__name { min-height: calc(3.3em + 12px); }
	.tdup-range-card__meta { min-height: 60px; }
}
/* The featured band: white product tiles on charcoal. */
.tdup-featured-strip { display: block; margin: 0; padding: 0; border: 0; }
.tdup-featured-strip__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tdup-featured-strip__item, .tdup-featured-strip__item:hover {
	display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 8px 14px 8px 8px; border: 0; border-radius: 0;
	background: var(--tdup-white); color: var(--tdup-charcoal); text-decoration: none;
}
.tdup-featured-strip__item:hover { background: var(--tdup-sweep); }
.tdup-featured-strip__img { width: 72px; height: 72px; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 80%); }
.tdup-featured-strip__img img { filter: none; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.tdup-featured-strip__item span { font-family: var(--tdup-font-title); font-stretch: 110%; font-weight: 800; font-size: 15px; line-height: 1.12; text-transform: uppercase; color: var(--tdup-charcoal); }

/* ==========================================================================
   7. SINGLE PRODUCT
   Left: the product on a light studio sweep, then the facts under it. Right: a
   white buying panel (name, class bar, the size picker, quantity, the red
   "Add to quote"). Markup: single-tdup_product.php. The picker's own markup is
   drawn by initVariantPicker() in td-utility-main.js (classes tdup-picker__*).
   ========================================================================== */
.sp-band { padding-top: 24px; padding-bottom: 48px; }
.tdup-product__layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; flex: none; }
.sp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 801px) {
	.tdup-product__layout { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 20px clamp(24px, 3vw, 44px); }
	/* The buying panel and the help card are one right-hand column beside the photo + facts. */
	.sp-side { grid-column: 2; grid-row: 1 / span 2; }
	.tdup-product__details { grid-column: auto; grid-row: auto; }
}

/* The photo, big, on the sweep. A fixed 5:4 box (padding trick, as before) so it
   never collapses or stretches whatever the picture's own shape. */
.tdup-product__gallery { gap: 8px; }
.tdup-product__image {
	border: 1px solid var(--tdup-rule); background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 70%, #DADCDD 100%);
}
.tdup-product__image::before { padding-top: 80%; }
.tdup-product__image img { max-width: 88%; max-height: 88%; mix-blend-mode: multiply; }
.sp-class {
	position: absolute; left: 0; top: 0; z-index: 1; padding: 8px 14px 7px; background: var(--tdup-charcoal); color: var(--tdup-white);
	font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1; text-transform: uppercase;
}
.tdup-product__thumbnails { grid-template-columns: repeat(auto-fill, minmax(72px, 88px)); gap: 8px; }
.tdup-product__thumbnail { height: 72px; padding: 4px; border: 2px solid var(--tdup-rule); background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 90%); }
.tdup-product__thumbnail img { mix-blend-mode: multiply; }
.tdup-product__thumbnail--active { border-color: var(--tdup-charcoal); box-shadow: inset 0 -5px 0 var(--tdup-charcoal); }

/* The buying panel. */
.tdup-product__details { min-width: 0; padding: 20px 22px 0; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-top: 6px solid var(--tdup-charcoal); }
.tdup-product__code { display: block; margin: 0; font-family: var(--tdup-font-title); font-stretch: 112%; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--tdup-charcoal); }
.tdup-product__details h1 { margin: 6px 0 12px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.005em; font-size: clamp(30px, 3.3vw, 46px); line-height: 0.98; color: var(--tdup-red); }
.tdup-class-bar--large { max-width: none; margin: 0 0 14px; }
.tdup-class-bar--large .tdup-class-bar__cell { padding: 9px 0; border: 2px solid var(--tdup-charcoal); margin-left: -2px; background: var(--tdup-white); color: var(--tdup-charcoal); font-weight: 600; }
.tdup-class-bar--large .tdup-class-bar__cell:first-child { margin-left: 0; }
.tdup-class-bar--large .tdup-class-bar__cell.is-current { background: var(--tdup-red); border-color: var(--tdup-red); color: var(--tdup-white); font-weight: 800; z-index: 1; }
.tdup-product__excerpt { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--tdup-body-grey); }
.tdup-product__excerpt p { margin: 0; }
.tdup-key-features { margin: 0 0 16px; padding: 12px 14px; background: var(--tdup-off-white); border-left: 6px solid var(--tdup-red); }
.tdup-key-features__heading { margin: 0 0 6px; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--tdup-charcoal); }
.tdup-key-features__list { gap: 4px 18px; }
.tdup-key-features__list li { font-size: 15px; }

/* The picker: square number badges (the old ones were round), a heavy edge on the step you are on. */
.tdup-add-to-quote { gap: 12px; padding-top: 14px; border-top: 2px solid var(--tdup-rule); }
.tdup-picker { margin: 0; }
.tdup-picker__section + .tdup-picker__section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tdup-rule); }
.tdup-picker__heading { margin: 0 0 8px; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--tdup-charcoal); }
.tdup-picker__steps { gap: 8px; }
.tdup-picker__step { padding: 10px 12px 10px 52px; border: 2px solid var(--tdup-rule); border-radius: 0; background: var(--tdup-white); }
.tdup-picker__step::before { left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 0; border: 0; background: var(--tdup-charcoal); color: var(--tdup-white); font-size: 13px; }
.tdup-picker__step.is-current { border-color: var(--tdup-charcoal); box-shadow: inset 6px 0 0 var(--tdup-red); padding-left: 56px; }
.tdup-picker__step.is-current::before { left: 16px; background: var(--tdup-red); }
.tdup-picker__step.is-answered::before { background: var(--tdup-charcoal); }
.tdup-picker__step.is-collapsed { padding-top: 6px; padding-bottom: 6px; }
.tdup-picker__step.is-collapsed::before { top: 9px; }
.tdup-picker__step legend { font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; color: var(--tdup-body-grey); }
.tdup-picker__summary { min-height: 44px; align-items: center; }
.tdup-picker__summary-label { font-size: 11.5px; color: var(--tdup-body-grey); }
.tdup-picker__summary strong { font-size: 16px; }
.tdup-picker__change, .tdup-picker__change:hover { min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 14px; color: var(--tdup-red); }
.tdup-picker__change:hover { text-decoration-thickness: 3px; }
.tdup-picker__change:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); }
.tdup-picker__status { margin: 8px 0 0; font-size: 14px; color: var(--tdup-charcoal); }

/* Size / option chips (also the older single-list "Options"): 44px tall, square. The
   chosen one is solid charcoal AND carries a tick. Hover tints the chip, never the text. */
.tdup-option-list { gap: 8px; margin-bottom: 0; }
.tdup-option { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 2px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-white); color: var(--tdup-charcoal); font-size: 14.5px; font-weight: 700; }
.tdup-option:hover { border-color: var(--tdup-charcoal); background: var(--tdup-sweep); }
.tdup-option:has(input:checked), .tdup-option:has(input:checked):hover { background: var(--tdup-charcoal); border-color: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-option:has(input:checked):hover { background: var(--tdup-charcoal-2); }
.tdup-option:not(.tdup-option--feature):has(input:checked)::before { content: "\2713"; margin-right: 8px; }
.tdup-option:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); }
.tdup-option:has(input:disabled):hover { background: var(--tdup-white); border-color: var(--tdup-charcoal); }
.tdup-option:has(input:disabled:checked), .tdup-option:has(input:disabled:checked):hover { background: var(--tdup-charcoal); }
.tdup-product__variant-tbc { margin: 10px 0 0; border: 0; border-left: 6px solid var(--tdup-charcoal); background: var(--tdup-off-white); font-size: 14px; }
.tdup-picker__custom { margin: 6px 0 0; }
.tdup-picker__custom label { font-family: var(--tdup-font-title); font-stretch: 118%; font-size: 11.5px; letter-spacing: 0.1em; }
.tdup-picker__custom label span { font-family: var(--tdup-font-body); font-size: 13px; color: var(--tdup-body-grey); }
.tdup-picker__custom textarea { border: 2px solid var(--tdup-rule); border-radius: 0; min-height: 56px; }
.tdup-picker__custom textarea:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px var(--tdup-ink); border-color: var(--tdup-charcoal); }
.tdup-picker__custom-hint { font-size: 13px; color: var(--tdup-body-grey); }

/* Quantity and "Add to quote": the one red key action; stays at the foot of the screen while you pick. */
.tdup-add-to-quote__row { align-items: stretch; gap: 10px; margin: 0 -22px; padding: 12px 22px 16px; border-top: 2px solid var(--tdup-rule); box-shadow: none; }
.tdup-add-to-quote__row > label { flex: none; }
.tdup-add-to-quote__row .tdup-qty-stepper { height: 100%; border: 2px solid var(--tdup-charcoal); }
.tdup-qty-stepper__btn { width: 46px; height: 52px; font-size: 18px; }
.tdup-qty-stepper__btn:hover { background: var(--tdup-sweep); }
.tdup-qty-stepper input { width: 56px; height: 52px; font-size: 18px; border-left: 2px solid var(--tdup-rule); border-right: 2px solid var(--tdup-rule); }
.tdup-add-to-quote__row .tdup-button { flex: 1; min-height: 56px; font-size: 14px; }
.tdup-add-to-quote__row .tdup-button:disabled, .tdup-add-to-quote__row .tdup-button[disabled] { background: #6B7073; color: var(--tdup-white); cursor: not-allowed; opacity: 1; }

/* Under the photo: facts, documents, help. Each its own block, no dead space. */
.tdup-product__info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tdup-spec-table { margin: 0; background: var(--tdup-white); border: 1px solid var(--tdup-rule); }
.tdup-spec-table tr { border-bottom: 1px solid var(--tdup-rule); }
.tdup-spec-table tr:last-child { border-bottom: 0; }
.tdup-spec-table th, .tdup-spec-table td { padding: 10px 14px; }
.tdup-spec-table th { width: 38%; background: var(--tdup-off-white); font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; color: var(--tdup-body-grey); }
.tdup-spec-table td { font-size: 16px; color: var(--tdup-charcoal); }
/* The sentence under "Pallet quantity" (editable in Site Settings). The [hidden] rule is needed because the display above would otherwise override the hidden attribute. */
.tdup-spec-note { margin: 0; padding: 8px 14px; font-size: 14px; color: var(--tdup-body-grey); background: var(--tdup-white); border: 1px solid var(--tdup-rule); }
.tdup-spec-note[hidden] { display: none; }
.tdup-spec-checklist { margin: 0; padding: 12px 14px; background: var(--tdup-white); border: 1px solid var(--tdup-rule); gap: 6px 16px; }
.tdup-spec-checklist li { font-size: 15px; }
.tdup-product__documents { margin: 0; padding: 14px; background: var(--tdup-white); border: 1px solid var(--tdup-rule); }
.tdup-product__options-label { margin: 0 0 8px; font-family: var(--tdup-font-title); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: 0.16em; color: var(--tdup-charcoal); }
.tdup-document-link, .tdup-document-link:hover {
	display: inline-flex; align-items: center; min-height: 44px; margin: 0 8px 8px 0; padding: 0 14px; border: 2px solid var(--tdup-charcoal);
	background: var(--tdup-white); color: var(--tdup-charcoal); font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.tdup-document-link:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-product__documents-placeholder { margin: 0; font-size: 15px; font-style: normal; color: var(--tdup-body-grey); }
.tdup-product__documents-placeholder a { color: var(--tdup-red); text-decoration: underline; }
.tdup-product__documents-placeholder a:hover { color: var(--tdup-red-dark); text-decoration-thickness: 3px; }
/* The red "Need help choosing?" card. White text only (red on red would vanish). */
.tdup-product__help { margin: 0; padding: 20px 22px 18px; background: var(--tdup-red); color: var(--tdup-white); }
.tdup-product__help h2 { margin: 0 0 8px; font-size: 28px; color: var(--tdup-white); }
.tdup-product__help p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); }
.tdup-product__help ul { list-style: none; margin: 0; padding: 0; }
.tdup-product__help a, .tdup-product__help a:hover { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 17px; color: var(--tdup-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.tdup-product__help a:hover { text-decoration-thickness: 3px; }

/* Standards strip: charcoal, white text. The old hover turned the text charcoal
   (invisible on charcoal), so every state sets white. */
.sp-assure { padding-top: 14px; padding-bottom: 14px; }
.tdup-compliance-strip { list-style: none; margin: 0; padding: 0; background: none; border: 0; justify-content: flex-start; gap: 6px 36px; }
.tdup-compliance-strip__item, .tdup-compliance-strip__item:hover { min-height: 44px; font-size: 16px; font-weight: 700; color: var(--tdup-white); }
.tdup-compliance-strip__item svg, .tdup-compliance-strip__item:hover svg { color: var(--tdup-white); }

.sp-related { padding-top: 40px; padding-bottom: 48px; }
.pc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .pc-related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px) {
	.tdup-product__details { padding: 16px 14px 0; }
	.tdup-add-to-quote__row { margin: 0 -14px; padding: 10px 14px 12px; }
	.sp-band { padding-top: 16px; padding-bottom: 36px; }
}

/* ==========================================================================
   8. COMPARE
   ========================================================================== */
.tdup-compare-page .ip-band { padding-top: 32px; padding-bottom: 48px; }
.tdup-compare-table-wrap { margin: 0 0 16px; overflow-x: auto; }
.tdup-compare-table { width: 100%; background: var(--tdup-white); border: 1px solid var(--tdup-rule); }
.tdup-compare-table th, .tdup-compare-table td { padding: 12px 16px; border: 1px solid var(--tdup-rule); font-size: 16px; color: var(--tdup-charcoal); }
.tdup-compare-table thead th { min-width: 180px; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 90%); }
.tdup-compare-table thead th:first-child { min-width: 0; background: var(--tdup-white); }
.tdup-compare-table thead th img { max-width: 160px; width: auto; height: auto; max-height: 120px; }
.tdup-compare-table thead th button, .tdup-compare-table thead th button:hover {
	min-height: 44px; padding: 0 16px; border: 2px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-white); color: var(--tdup-charcoal); cursor: pointer;
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tdup-compare-table thead th button:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-compare-table tbody th { background: var(--tdup-charcoal); color: var(--tdup-white); font-stretch: 118%; font-size: 12px; letter-spacing: 0.1em; vertical-align: middle; }
.tdup-compare-table tbody tr:first-child td { font-family: var(--tdup-font-title); font-stretch: 110%; font-weight: 800; font-size: 18px; text-transform: uppercase; }
.tdup-compare-table td a, .tdup-compare-table td a:hover { color: var(--tdup-charcoal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tdup-compare-table td a:hover { text-decoration-thickness: 3px; }
.tdup-compare-empty { margin: 0; padding: 28px 24px; text-align: left; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-left: 8px solid var(--tdup-red); font-size: 19px; color: var(--tdup-charcoal); }
.tdup-compare-empty a { color: var(--tdup-red); font-weight: 700; text-decoration: underline; }
.cp-more { margin: 8px 0 0; }
@media (max-width: 600px) {
	.tdup-compare-table th, .tdup-compare-table td { padding: 10px 8px; font-size: 15px; }
	.tdup-compare-table thead th { min-width: 112px; }
	.tdup-compare-table tbody th { white-space: normal; width: 84px; padding-left: 8px; padding-right: 6px; }
	.tdup-compare-table thead th:first-child { width: 84px; }
}
/* The floating "N selected to compare" bar (footer.php): square, flat, ink ring. */
.tdup-compare-bar { padding: 8px 8px 8px 18px; background: var(--tdup-charcoal-2); border-radius: 0; box-shadow: 0 0 0 2px var(--tdup-white), 0 10px 28px rgba(0, 0, 0, 0.35); font-size: 14px; }
.tdup-compare-bar__thumbs img { border-radius: 0; background: var(--tdup-white); }
.tdup-compare-bar__clear, .tdup-compare-bar__clear:hover { min-height: 44px; padding: 0 12px; color: var(--tdup-white); }
.tdup-compare-bar .tdup-button--primary { min-height: 44px; }
/* On the compare page itself the bar only repeats the table (each column has its own Remove). */
body:has(.tdup-compare-page) .tdup-compare-bar { display: none; }

/* ==========================================================================
   9. QUOTE PAGE
   The basket (white, charcoal top edge) beside the form (white, red top edge),
   then a charcoal "what happens next" strip.
   ========================================================================== */
.tdup-quote-main > .ip-band:first-child { padding-top: 32px; padding-bottom: 48px; }
.tdup-quote-page { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 0; flex: none; }
@media (min-width: 900px) { .tdup-quote-page { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 28px; } }
.tdup-quote-basket { padding: 16px 20px 8px; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-top: 6px solid var(--tdup-charcoal); border-radius: 0; box-shadow: none; }
.tdup-quote-basket__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 8px; }
.tdup-quote-basket__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); color: var(--tdup-red); }
.tdup-quote-line { gap: 12px 16px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--tdup-rule); border-radius: 0; flex-wrap: wrap; }
.tdup-quote-line img { width: 76px; height: 64px; padding: 4px; border-radius: 0; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--tdup-sweep) 90%); }
.tdup-quote-line__details { flex: 1 1 200px; min-width: 0; gap: 3px; }
.tdup-quote-line__details strong { font-stretch: 110%; font-weight: 800; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.tdup-quote-line__details span { font-size: 14px; color: var(--tdup-body-grey); }
.tdup-quote-line__qty { display: flex; align-items: center; gap: 8px; font-family: var(--tdup-font-title); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tdup-charcoal); }
.tdup-quote-line input[type="number"] { width: 72px; min-height: 44px; padding: 0 8px; border: 2px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-white); text-align: center; font: 800 17px var(--tdup-font-title); color: var(--tdup-charcoal); }
.tdup-quote-line input[type="number"]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); }
.tdup-quote-line button[data-tdup-remove-line], .tdup-quote-line button[data-tdup-remove-line]:hover {
	min-height: 44px; padding: 0 14px; border: 2px solid var(--tdup-charcoal); background: var(--tdup-white); color: var(--tdup-charcoal); cursor: pointer;
	font-family: var(--tdup-font-title); font-stretch: 118%; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tdup-quote-line button[data-tdup-remove-line]:hover { background: var(--tdup-charcoal); color: var(--tdup-white); }
.tdup-quote-empty { margin: 0; padding: 22px 0 16px; font-size: 18px; color: var(--tdup-charcoal); }
.tdup-quote-empty a { color: var(--tdup-red); font-weight: 700; text-decoration: underline; }

.tdup-quote-form { gap: 12px; padding: 18px 20px 20px; background: var(--tdup-white); border: 1px solid var(--tdup-rule); border-top: 6px solid var(--tdup-red); border-radius: 0; box-shadow: none; align-self: start; }
.tdup-quote-form h2 { margin: 0 0 2px; font-stretch: 112%; font-weight: 800; letter-spacing: 0.005em; font-size: clamp(24px, 2.6vw, 34px); color: var(--tdup-red); }
.tdup-quote-form label { gap: 5px; font-size: 14px; color: var(--tdup-charcoal); }
.tdup-quote-form input { min-height: 48px; padding: 0 12px; border: 2px solid var(--tdup-rule); border-radius: 0; background: var(--tdup-white); font-size: 16px; color: var(--tdup-charcoal); }
.tdup-quote-form input:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px var(--tdup-ink); border-color: var(--tdup-charcoal); }
.tdup-quote-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tdup-quote-form__pair label { min-width: 0; }
@media (max-width: 480px) { .tdup-quote-form__pair { grid-template-columns: minmax(0, 1fr); } }
.tdup-quote-form .tdup-button { min-height: 56px; margin-top: 4px; font-size: 14px; }
.tdup-form-privacy { margin: 0; font-size: 14px; color: var(--tdup-body-grey); }
.tdup-form-privacy a { color: var(--tdup-red); text-decoration: underline; }
/* After sending: a clear panel with the reference. Charcoal edge = sent, red edge = a problem; the words say which. */
.tdup-quote-message { padding: 14px 16px; border: 1px solid var(--tdup-rule); border-left: 8px solid var(--tdup-charcoal); border-radius: 0; background: var(--tdup-off-white); font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--tdup-charcoal); }
.tdup-quote-message.is-error { border-left-color: var(--tdup-red); }
.tdup-quote-message:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--tdup-ink); }

.qt-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Phone: the left column dissolves so the form can come between the basket and the steps. */
@media (max-width: 899px) {
	.qt-left { display: contents; }
	.tdup-quote-basket { order: 1; }
	.tdup-quote-form { order: 2; }
	.qt-next { order: 3; }
}
.qt-next { padding: 22px 24px 24px; background: var(--tdup-charcoal); color: var(--tdup-white); }
.qt-next > h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); color: var(--tdup-white); }
.qt-next__steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: qt; }
.qt-next__steps li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 14px; border-top: 1px solid rgba(255, 255, 255, 0.28); counter-increment: qt; }
.qt-next__steps li strong { font-size: 20px; line-height: 1.05; color: var(--tdup-white); }
.qt-next__steps li strong::before { content: counter(qt) ". "; }
.qt-next__steps li span { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); }