/*
Theme Name: T4 Pumps Zambia (Botiga Child)
Theme URI: https://t4pumps.com
Description: Industrial storefront skin for T4 Pumps Zambia. Child of Botiga. Implements the client-approved "Preview 4" redesign — full-width Google-multicolour on a single light (white) theme, Manrope/Inter, glassmorphism. Reskin in progress (foundation phase).
Author: ElevateSpot
Template: botiga
Version: 0.78.2
Text Domain: t4pumps-zm-child
*/

/* =========================================================================
   1. Design tokens — palette lifted from the approved demo (light theme)
   ========================================================================= */
:root {
	/* --- Preview 4 redesign (Google multicolour on white). The primary accent
	   token is still named --t4-red for backward-compat with the ~100 existing
	   references, but it now carries Google BLUE. Use the named multicolour
	   tokens (--t4-blue/red-g/yellow/green) for the multi-accent treatments. */
	--t4-red:        #1a73e8;   /* primary accent = Google blue (was signal red) */
	--t4-red-dark:   #1557b0;   /* hover */
	--t4-blue:       #4285F4;
	--t4-blue-d:     #1a73e8;
	--t4-red-g:      #EA4335;   /* Google red (true red, for multicolour accents) */
	--t4-yellow:     #FBBC05;
	--t4-green:      #34A853;
	--t4-green-d:    #188038;
	--t4-ink:        #202124;   /* headings (Google ink) */
	--t4-body:       #3c4043;   /* body text */
	--t4-muted:      #5f6368;
	--t4-line:       #e6e8eb;   /* borders */
	--t4-line-soft:  #f1f2f4;
	--t4-surface:    #ffffff;
	--t4-surface-2:  #f7f8fa;   /* tinted section bg */
	--t4-surface-3:  #f3f4f6;
	--t4-star:       #ffab00;
	--t4-dark:       #141618;   /* footer bg (retired in later reskin phase) */
	--t4-dark-2:     #1d2023;
	--t4-dark-line:  #2c3034;
	--t4-radius:     14px;
	--t4-radius-lg:  22px;
	--t4-gutter:     clamp(16px, 3vw, 48px);  /* shared horizontal page padding */
	--t4-section-y:  clamp(32px, 5vw, 64px);  /* shared vertical section rhythm */
	--t4-shadow:     0 18px 50px -18px rgba(60,64,67,.28), 0 6px 18px -10px rgba(60,64,67,.16);
	/* Glassmorphism kit (frosted surfaces used across the reskin) */
	--t4-blur:       saturate(150%) blur(22px);
	--t4-glass-bg:   rgba(255,255,255,.62);
	--t4-glass-border: 1px solid rgba(255,255,255,.7);
	--t4-display:    'Manrope', system-ui, sans-serif;
	--t4-body-font:  'Inter', system-ui, sans-serif;
	/* Single light theme — opt out of browser/OS automatic night dark-mode so the
	   site stays white at all times (Chrome/Samsung Internet auto-dark otherwise
	   inverts any page that doesn't declare a scheme). */
	color-scheme: only light;
}
html { color-scheme: only light; }

/* Soft multicolour Google blobs + faint dot-grid on the white base (sit behind
   all content; subtle, global). */
body::before {
	content: ""; position: fixed; inset: -22% -10% auto -10%; height: 128vh; z-index: -2; pointer-events: none;
	background:
		radial-gradient(40vw 40vw at 8% 2%, rgba(66,133,244,.16), transparent 60%),
		radial-gradient(38vw 38vw at 95% 0%, rgba(234,67,53,.12), transparent 60%),
		radial-gradient(42vw 36vw at 82% 50%, rgba(52,168,83,.12), transparent 62%),
		radial-gradient(38vw 38vw at 4% 70%, rgba(251,188,5,.12), transparent 60%);
}
body::after {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
	background-image: radial-gradient(rgba(60,64,67,.05) 1px, transparent 1px); background-size: 26px 26px;
}

/* Client preview toggle (?bg=white): drop the multicolour wash + dot-grid so the
   page sits on a plain white background, for a side-by-side design comparison. */
body.t4-white-preview { background: #fff; }
body.t4-white-preview::before,
body.t4-white-preview::after { display: none !important; }

/* Frosted-glass surface utility (used by header/hero/cards in later phases). */
.t4-glass {
	position: relative; background: var(--t4-glass-bg);
	backdrop-filter: var(--t4-blur); -webkit-backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); box-shadow: var(--t4-shadow); border-radius: var(--t4-radius-lg);
}

/* =========================================================================
   2. Typography
   ========================================================================= */
/* Compact base: 14px root so the rem-based scale shrinks proportionally. */
html { font-size: 87.5%; overflow-x: clip; } /* clip at html to prevent Bootstrap .row bleed */
body { line-height: 1.5; }
h1, .entry-title { font-size: 1.85rem; line-height: 1.15; }
h2 { font-size: 1.45rem; line-height: 1.2; }
h3 { font-size: 1.15rem; line-height: 1.25; }

body,
.botiga-body,
button, input, select, textarea {
	font-family: var(--t4-body-font);
	color: var(--t4-body);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--t4-display);
	color: var(--t4-ink);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* =========================================================================
   3. Links & buttons — signal red
   ========================================================================= */
a { color: var(--t4-ink); }
a:hover { color: var(--t4-red); }

.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.wp-block-button__link,
.botiga-shop-loop-buttons a {
	background-color: var(--t4-red) !important;
	border-color: var(--t4-red) !important;
	color: #fff !important;
	font-family: var(--t4-display);
	font-weight: 700;
	text-transform: none !important;   /* beat Botiga's uppercase .button */
	letter-spacing: 0 !important;
	border-radius: 999px;   /* Preview 4: pill buttons */
	box-shadow: 0 10px 22px -10px rgba(26,115,232,.6);
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.button:hover,
button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.wp-block-button__link:hover {
	background-color: var(--t4-red-dark) !important;
	border-color: var(--t4-red-dark) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* Secondary / ghost button */
.t4-btn-ghost {
	display: inline-block;
	padding: 13px 26px;
	border: 2px solid var(--t4-ink);
	color: var(--t4-ink) !important;
	background: transparent !important;
	font-family: var(--t4-display);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	border-radius: 999px;   /* Preview 4: pill */
}
.t4-btn-ghost:hover { background: var(--t4-ink) !important; color: #fff !important; }

/* =========================================================================
   4. Prices, sale badges, star ratings
   ========================================================================= */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price ins { color: var(--t4-ink); font-weight: 700; }
.price del { color: var(--t4-muted); font-weight: 400; }

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
	background: var(--t4-red);
	color: #fff;
	font-family: var(--t4-display);
	font-weight: 800;
	text-transform: uppercase;
	border-radius: var(--t4-radius);
	letter-spacing: .03em;
}
.star-rating span::before,
.woocommerce .star-rating span::before { color: var(--t4-star); }

/* =========================================================================
   5. Product cards — clean industrial tiles
   ========================================================================= */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--t4-surface);
	border: 1px solid var(--t4-line);
	border-radius: var(--t4-radius);
	padding: 14px;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--t4-red);
	box-shadow: var(--t4-shadow);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: .95rem;
	line-height: 1.35;
	font-weight: 600;
}
/* Card eyebrow (category) + availability pill */
.t4-card-cat {
	display: block; font-family: var(--t4-display); font-weight: 700;
	font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
	color: var(--t4-muted); margin: 4px 0 2px;
}
.t4-card-stock {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	background: rgba(17,17,17,.82); color: #fff;
	font-family: var(--t4-display); font-weight: 700;
	font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
	padding: 4px 8px; border-radius: 4px;
}

/* =========================================================================
   6. Header polish (Botiga header builder + search)
   ========================================================================= */
.site-header { border-bottom: 1px solid var(--t4-line); }
/* Align the main header row (logo / nav / icons) with the page gutter. Botiga's
   header .container-fluid ships a flat 40px; match --t4-gutter so the nav lines
   up with the search row, content and footer (and gains a little left space). */
.bhfb-header .container-fluid { padding-left: var(--t4-gutter); padding-right: var(--t4-gutter); }
.botiga-search-form input[type="search"],
.search-field {
	border: 2px solid var(--t4-ink);
	border-radius: var(--t4-radius);
}
.header-cart-count,
.botiga-cart-count,
.cart-count { background: var(--t4-red) !important; color:#fff !important; }

/* =========================================================================
   7. Utility top bar (injected via functions.php on wp_body_open)
   ========================================================================= */
.t4-topbar {
	background: var(--t4-dark);
	color: #cfd3d7;
	font-size: 13px;
	font-family: var(--t4-body-font);
	position: relative;   /* establish stacking context */
	z-index: 1000;        /* above Botiga's bhfb-desktop z-index:999 so scheme dropdown shows above header */
}
.t4-topbar__inner {
	max-width: 1520px;
	margin: 0 auto;
	padding: 8px var(--t4-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.t4-topbar a { color: #fff; }
.t4-topbar a:hover { color: var(--t4-red); }
.t4-topbar strong { color: var(--t4-red); font-family: var(--t4-display); }

/* =========================================================================
   7b. Top bar layout (promo left, links right)
   ========================================================================= */
.t4-topbar__links { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.t4-topbar__links a { color:#cfd3d7; font-size:13px; }
.t4-topbar__links a:hover { color:#fff; }
.t4-topbar__phone strong { color:var(--t4-red); font-family:var(--t4-display); }

/* =========================================================================
   7c. Search + "Shop by categories" row (under header)
   ========================================================================= */
.t4-searchrow { background:#fff; border-bottom:1px solid var(--t4-line); }
.t4-searchrow__inner {
	display:grid;
	grid-template-columns: 280px minmax(0,1fr) auto;
	align-items:center;
	gap:24px;
	padding:16px 20px;
}

/* Shop by categories button + hover panel */
.t4-catbtn { position:relative; }
.t4-catbtn__btn {
	width:100%;
	display:flex; align-items:center; gap:12px;
	background:var(--t4-red); color:#fff;
	font-family:var(--t4-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
	border:0; border-radius:var(--t4-radius);
	padding:15px 22px; font-size:.9rem; cursor:pointer;
}
.t4-catbtn__bars { width:18px; height:2px; background:#fff; position:relative; display:inline-block; }
.t4-catbtn__bars::before, .t4-catbtn__bars::after { content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.t4-catbtn__bars::before { top:-5px; } .t4-catbtn__bars::after { top:5px; }
.t4-catbtn__panel {
	position:absolute; top:calc(100% + 6px); left:0; z-index:60;
	min-width:280px; background:#fff; border:1px solid var(--t4-line);
	border-radius:var(--t4-radius); box-shadow:var(--t4-shadow);
	opacity:0; visibility:hidden; transform:translateY(6px); transition:all .16s ease;
}
.t4-catbtn:hover .t4-catbtn__panel,
.t4-catbtn:focus-within .t4-catbtn__panel { opacity:1; visibility:visible; transform:translateY(0); }
.t4-catbtn__panel ul { list-style:none; margin:0; padding:8px 0; }
.t4-catbtn__panel li a { display:flex; justify-content:space-between; gap:12px; padding:10px 18px; color:var(--t4-ink); font-size:.9rem; }
.t4-catbtn__panel li a span { color:var(--t4-muted); font-size:.78rem; }
.t4-catbtn__panel li a:hover { background:var(--t4-surface-2); color:var(--t4-red); }
.t4-catbtn__all a { border-top:1px solid var(--t4-line); font-family:var(--t4-display); font-weight:700; color:var(--t4-red) !important; text-transform:uppercase; font-size:.82rem; }

/* Mega panel — accordion of category groups + promo. Groups are collapsed by
   default (only the header + chevron show); clicking a header expands its
   submenu (JS toggles .is-open). */
.t4-mega { width:620px; display:grid; grid-template-columns:1fr 240px; padding:0; overflow:hidden; }
/* column-count:1 explicitly cancels the old multi-column layout — a stale
   duplicate of this stylesheet (Botiga enqueues it a 2nd time at ?ver=2.4.5,
   which LiteSpeed serves from cache) still declares columns:3, and removing the
   rule here wouldn't override it. Set the value rather than relying on absence. */
.t4-mega__cols { padding:8px 12px; column-count:1; }
.t4-mega__group { display:block; width:100%; margin:0; border-bottom:1px solid var(--t4-line); }
.t4-mega__group:last-of-type { border-bottom:0; }
.t4-mega__gtitle {
	width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin:0; padding:13px 10px; background:none; border:0; cursor:pointer; text-align:left;
	font-family:var(--t4-display); font-weight:800; font-size:.74rem; letter-spacing:.06em;
	text-transform:uppercase; color:var(--t4-ink);
}
.t4-mega__gtitle:hover { color:var(--t4-red); }
.t4-mega__chev { width:16px; height:16px; flex:0 0 auto; color:var(--t4-muted); transition:transform .18s ease; }
.t4-mega__group.is-open .t4-mega__gtitle { color:var(--t4-red); }
.t4-mega__group.is-open .t4-mega__chev { transform:rotate(180deg); color:var(--t4-red); }
.t4-mega__sub { display:none; padding:0 0 8px; margin:0; list-style:none; }
.t4-mega__group.is-open .t4-mega__sub { display:block; }
.t4-mega__sub li a { padding-left:16px; }
.t4-mega__cols li { break-inside:avoid; }
.t4-mega__cols li a { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--t4-radius); color:var(--t4-ink); font-size:.83rem; }
.t4-mega__cols li a .t4-ic { width:16px; height:16px; color:var(--t4-red); flex:0 0 auto; }
.t4-mega__cols li a span { flex:1; color:inherit; }
.t4-mega__cols li a em { color:var(--t4-muted); font-size:.72rem; font-style:normal; }
.t4-mega__cols li a:hover { background:var(--t4-surface-2); color:var(--t4-red); }
.t4-mega__all { column-span:all; display:inline-block; margin:2px 8px 8px; font-family:var(--t4-display); font-weight:700; text-transform:uppercase; font-size:.78rem; color:var(--t4-red) !important; }
.t4-mega__promo { background:var(--t4-surface-2); border-left:1px solid var(--t4-line); padding:22px 20px; }
.t4-mega__promo .t4-ic { color:var(--t4-red); margin-bottom:8px; }
.t4-mega__promo strong { display:block; font-family:var(--t4-display); font-size:1.05rem; color:var(--t4-ink); margin-bottom:6px; }
.t4-mega__promo p { font-size:.82rem; line-height:1.5; color:var(--t4-body); margin:0 0 14px; }
.t4-mega__promo .button { width:100%; text-align:center; }
@media (max-width:1024px){ .t4-mega{ width:auto; min-width:280px; grid-template-columns:1fr; } .t4-mega__cols{ columns:1; } .t4-mega__promo{ display:none; } }

/* Category-scoped search */
.t4-search {
	display:flex; align-items:stretch;
	border:2px solid var(--t4-red); border-radius:var(--t4-radius); overflow:hidden; background:#fff;
}
.t4-search__cat {
	border:0; background:var(--t4-surface-2); border-right:1px solid var(--t4-line);
	padding:0 16px; font-size:.86rem; color:var(--t4-body); max-width:170px;
	-webkit-appearance:menulist;
}
.t4-search__input { border:0 !important; flex:1; padding:13px 16px; font-size:.95rem; outline:none; min-width:0; }
.t4-search__btn {
	border:0; background:var(--t4-red) !important; color:#fff !important;
	font-family:var(--t4-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
	padding:0 30px; cursor:pointer; border-radius:0 !important;
}
.t4-search__btn:hover { background:var(--t4-red-dark) !important; }

/* Shipping / quote note */
.t4-shipnote { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.t4-shipnote__ic { font-size:24px; }
.t4-shipnote strong { font-family:var(--t4-display); color:var(--t4-ink); }

/* =========================================================================
   7d. Homepage hero grid: vertical category nav + banner
   ========================================================================= */
.t4-herowrap { padding:24px 0 0; }
.t4-herogrid { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:stretch; }
.t4-vnav { border:1px solid var(--t4-line); border-radius:var(--t4-radius); overflow:hidden; background:#fff; align-self:start; }
.t4-vnav__head {
	background:var(--t4-ink); color:#fff; font-family:var(--t4-display); font-weight:800;
	text-transform:uppercase; letter-spacing:.04em; padding:15px 20px; font-size:.9rem;
}
.t4-vnav__list { list-style:none; margin:0; padding:0; }
.t4-vnav__list li a {
	display:flex; align-items:center; gap:11px; padding:11px 20px;
	border-bottom:1px solid var(--t4-line-soft);
	color:var(--t4-ink); font-size:.9rem; font-weight:500;
}
.t4-vnav__list li a .t4-ic { width:19px; height:19px; flex:0 0 19px; color:var(--t4-red); opacity:.85; }
.t4-vnav__list li a span { min-width:0; }
.t4-vnav__list li:last-child a { border-bottom:0; }
.t4-vnav__list li a:hover { background:var(--t4-surface-2); color:var(--t4-red); padding-left:26px; transition:all .15s ease; }
.t4-vnav__list li a:hover .t4-ic { opacity:1; }
.t4-vnav__all a { color:var(--t4-red) !important; font-family:var(--t4-display); font-weight:700; text-transform:uppercase; font-size:.82rem; }

/* Hero now sits in the right grid cell */
.t4-herowrap .t4-hero { border-radius:var(--t4-radius); overflow:hidden; display:flex; align-items:center; min-height:420px; }
.t4-herowrap .t4-hero__inner { padding:54px 56px; max-width:none; margin:0; }
.t4-herowrap .t4-hero__title { font-size:clamp(1.9rem, 3.2vw, 3rem); max-width:18ch; }
.t4-herowrap .t4-hero__sub { max-width:46ch; }
.t4-herowrap .t4-hero__inner { position:relative; z-index:2; }
/* Hero title must read white on the dark gradient — beat Botiga's heading colour
   (rgb(33,33,33) + -webkit-text-fill-color) and add a soft highlight glow. */
.t4-herowrap .t4-hero .t4-hero__title {
	color:#fff; -webkit-text-fill-color:#fff;
	text-shadow:0 2px 26px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.t4-herowrap .t4-hero .t4-hero__title em {
	color:var(--t4-red); -webkit-text-fill-color:var(--t4-red);
	text-shadow:0 2px 30px rgba(222,50,44,.55), 0 1px 2px rgba(0,0,0,.35);
}
/* GAP-1 placeholder: industrial flange/impeller motif instead of a real hero photo */
.t4-herowrap .t4-hero::after {
	content:""; position:absolute; right:-46px; top:50%; transform:translateY(-50%);
	width:380px; height:380px; z-index:1; pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='2'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='72'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.16'%3E%3Ccircle cx='184' cy='100' r='7'/%3E%3Ccircle cx='142' cy='173' r='7'/%3E%3Ccircle cx='58' cy='173' r='7'/%3E%3Ccircle cx='16' cy='100' r='7'/%3E%3Ccircle cx='58' cy='27' r='7'/%3E%3Ccircle cx='142' cy='27' r='7'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='18' fill='%23de322c' fill-opacity='0.55'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media (max-width: 600px) { .t4-herowrap .t4-hero::after { display:none; } }

@media (max-width: 1024px) {
	.t4-searchrow__inner { grid-template-columns:1fr; gap:14px; }
	.t4-shipnote { display:none; }
	.t4-herogrid { grid-template-columns:1fr; }
	.t4-vnav { display:none; } /* vertical nav hidden on mobile; categories reachable via the button */
}

/* =========================================================================
   8. Footer — custom multi-column dark (replaces Botiga's .bhfb-footer)
   ========================================================================= */
.bhfb-footer { display: none !important; } /* hide Botiga's default footer */

/* Homepage: make the custom front page full-width (Botiga reserves a 300px blog
   sidebar via .site-main width:calc(100% - 300px); our home has no sidebar) and
   remove the large content-wrapper top/bottom margins so sections + footer sit tight. */
body.home .container.content-wrapper { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home .site-main { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home .content-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Botiga's .row.main-row uses Bootstrap's -15px gutter margins, normally cancelled
   by +15px column padding. The full-width override above zeroes the column padding,
   so without this the whole home body sat 15px left of (and wider than) the header.
   Zeroing the row margins re-aligns the hero/category row with the search bar above. */
body.home .row.main-row { margin-left: 0 !important; margin-right: 0 !important; }
body.home .t4-home { max-width: 100%; overflow-x: clip; } /* belt-and-suspenders vs any residual row overflow */
body { overflow-x: clip; } /* guard against minor horizontal scroll from full-width rows */

/* Wider container site-wide (matches the home width) so shop / search / archives /
   single pages use the full 1520 layout instead of Bootstrap's default 1140. */
@media (min-width: 1200px) {
	.container { max-width: 1520px !important; }
}

.t4-footer { background: var(--t4-dark); color: #aeb4ba; margin-top: 0; }
.t4-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}
/* Compound selectors (.t4-wrap is defined later, so beat it on specificity to
   keep vertical padding while .t4-wrap still gives max-width + centering). */
.t4-footer__cols.t4-wrap { padding: 56px var(--t4-gutter) 40px; }
.t4-footer__sub.t4-wrap  { padding: 32px var(--t4-gutter) 44px; border-top: 1px solid var(--t4-dark-line); }
.t4-footer__sub {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 1.6fr;
	gap: 40px;
}
/* Office blocks + WhatsApp affordance */
.t4-footer__office .widget-title { font-size: .92rem; }
.t4-footer__contact li.t4-footer__phone { align-items: center; gap: 8px; }
.t4-footer__wa { display: inline-flex; align-items: center; margin-left: auto; color: #25d366; }
.t4-footer__wa:hover { color: #1ebe57; }
.t4-footer__wa .t4-ic { width: 17px; height: 17px; }
.t4-footer a { color: #cfd3d7; }
.t4-footer a:hover { color: var(--t4-red); }
.t4-footer .widget-title {
	color: #fff; font-family: var(--t4-display); font-weight: 800;
	text-transform: uppercase; letter-spacing: .03em; font-size: 1rem; margin: 0 0 18px;
}
.t4-footer .widget-title::after {
	content: ""; display: block; width: 36px; height: 3px;
	background: var(--t4-red); margin-top: 10px;
}
/* Align the text-column headings with the (taller) logo wordmark — gap on the
   text columns, not the logo. */
.t4-footer__col:not(.t4-footer__brand) .widget-title { margin-top: 22px; }
.t4-footer__logo {
	font-family: var(--t4-display); font-weight: 800; font-size: 1.7rem; color: #fff;
	letter-spacing: -.01em; margin-top: 6px; margin-bottom: 14px;
}
.t4-footer__brand { padding-top: 14px; }
.t4-footer__logo span { color: var(--t4-red); }
.t4-footer__tag { font-size: .92rem; line-height: 1.6; color: #9aa0a6; margin: 0 0 18px; }
.t4-footer__contact { list-style: none; margin: 0; padding: 0; }
.t4-footer__contact li { display: flex; gap: 10px; margin-bottom: 10px; font-size: .9rem; line-height: 1.5; }
.t4-footer__contact li span { color: var(--t4-red); }
.t4-footer__links { list-style: none; margin: 0; padding: 0; }
.t4-footer__links li { margin-bottom: 11px; font-size: .9rem; }
.t4-footer__cta p { font-size: .9rem; color: #9aa0a6; line-height: 1.6; margin: 0 0 16px; }
.t4-footer__cta .button { margin-bottom: 14px; }
.t4-footer__hours { font-size: .82rem; color: #777d83; }

.t4-footer__bar { border-top: 1px solid var(--t4-dark-line); background: #0e1011; }
.t4-footer__bar-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 20px; flex-wrap: wrap; font-size: .84rem; color: #888d92;
}
.t4-footer__pay { display: flex; gap: 8px; }
.t4-footer__pay i {
	font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
	color: #cfd3d7; background: #202427; border: 1px solid var(--t4-dark-line);
	border-radius: 4px; padding: 5px 10px;
}

@media (max-width: 1024px) {
	.t4-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.t4-footer__sub  { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
	.t4-footer__cols { grid-template-columns: 1fr; }
	.t4-footer__sub  { grid-template-columns: 1fr; }
}

/* =========================================================================
   10. Icons + product-card uniformity + footer spacing
   ========================================================================= */
.t4-ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.t4-ic--lg { width: 34px; height: 34px; }

/* Category tile icons (red) */
.t4-cat__ic { color: var(--t4-red); line-height: 0; }
.t4-cat__ic .t4-ic { width: 38px; height: 38px; }
.t4-cat:hover .t4-cat__ic { color: var(--t4-ink); }

/* Feature/trust icons (red) */
.t4-feature__icon { color: var(--t4-red); line-height: 0; display: inline-flex; }
.t4-feature__icon .t4-ic { width: 30px; height: 30px; }

/* Search-row note icon */
.t4-shipnote__ic { line-height: 0; color: var(--t4-red); }
.t4-shipnote__ic .t4-ic { width: 26px; height: 26px; }

/* Footer contact icons */
.t4-footer__contact li { align-items: flex-start; }
.t4-footer__contact .t4-ic { width: 18px; height: 18px; color: var(--t4-red); flex: 0 0 auto; margin-top: 2px; }

/* Footer breathing space above the dark footer */
.t4-footer { margin-top: 56px; }

/* Uniform product images + equal-height cards (fixes the zig-zag) */
.woocommerce ul.products li.product {
	display: flex; flex-direction: column; position: relative;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link { display: block; }
.woocommerce ul.products li.product img {
	width: 100% !important; height: 200px !important; object-fit: contain !important;
	background: #fff; margin: 0 auto 12px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 2.6em; }
.woocommerce ul.products li.product .price { margin-bottom: 12px; }
/* push the action button to the bottom so all cards align */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .t4-view-detail {
	margin-top: auto; width: 100%; text-align: center;
}
/* card CTA wrapper (re-added price + add-to-cart/quote) sits at the card bottom */
.woocommerce ul.products li.product .t4-card-actions { margin-top: auto; }
.woocommerce ul.products li.product .t4-card-actions .button { margin-top: 0; }
/* loop "Price on request" label */
.woocommerce ul.products li.product .price .t4-por { font-size: 1rem; color: var(--t4-muted); font-weight: 600; font-family: var(--t4-body-font); }
.woocommerce ul.products li.product .price { font-family: var(--t4-display); font-weight: 800; color: var(--t4-ink); font-size: 1.1rem; }

/* =========================================================================
   9. Custom homepage (front-page.php) sections
   ========================================================================= */
.t4-wrap { max-width: 1520px; margin: 0 auto; padding: 0 var(--t4-gutter); }
.t4-section { padding: 64px 0; }
/* #1 (2026-07 meeting): white background throughout — neutralise the grey
   section bands so every section sits on the uniform white base. The signature
   soft-multicolour wash (body::before) stays, per the confirmed Preview-4 design. */
.t4-section--tint { background: transparent; }
.t4-eyebrow {
	font-family: var(--t4-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: 13px;
	color: var(--t4-red);
	margin: 0 0 8px;
}
.t4-h2 {
	font-family: var(--t4-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--t4-ink);
	margin: 0 0 28px;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

/* Hero */
.t4-hero {
	position: relative;
	/* Real hero photo under a left-weighted dark scrim so the white headline reads. */
	background:
		linear-gradient(100deg, rgba(11,12,13,.92) 0%, rgba(16,18,20,.70) 44%, rgba(20,22,26,.40) 100%),
		url("assets/img/hero-home.jpg") center center / cover no-repeat #16181b;
	color: #fff;
	overflow: hidden;
}
/* Real photo now provides the visual interest — drop the placeholder flange motif. */
.t4-herowrap .t4-hero::after { display: none; }
.t4-hero__inner { max-width: 1520px; margin: 0 auto; padding: 96px 20px 104px; }
.t4-hero__eyebrow {
	font-family: var(--t4-display);
	font-weight: 700; text-transform: uppercase; letter-spacing:.2em;
	color: #fff; background: var(--t4-red);
	display: inline-block; padding: 6px 14px; border-radius: 4px; font-size: 12px;
}
.t4-hero__title {
	font-family: var(--t4-display);
	font-weight: 800;
	font-size: clamp(2.2rem, 5.4vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	margin: 18px 0 16px;
	max-width: 16ch;
	color: #fff;
	text-transform: uppercase;
}
.t4-hero__title em { color: var(--t4-red); font-style: normal; }
.t4-hero__sub { font-size: 1.12rem; color: #d7dade; max-width: 52ch; margin: 0 0 30px; }
.t4-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.t4-hero__cta .t4-btn-ghost { border-color:#fff; color:#fff !important; }
.t4-hero__cta .t4-btn-ghost:hover { background:#fff !important; color:var(--t4-ink) !important; }

/* Feature/trust strip */
.t4-features {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
	border: 1px solid var(--t4-line); border-radius: var(--t4-radius);
	background: #fff; overflow: hidden;
}
.t4-feature { display:flex; gap:14px; align-items:center; padding: 22px 24px; border-right:1px solid var(--t4-line); }
.t4-feature:last-child { border-right: 0; }
.t4-feature__icon { font-size: 26px; line-height: 1; color: var(--t4-red); }
.t4-feature__t { font-family: var(--t4-display); font-weight:700; color:var(--t4-ink); font-size:.95rem; }
.t4-feature__d { font-size: .82rem; color: var(--t4-muted); }

/* Category tiles */
.t4-cats { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.t4-cat {
	display:block; position:relative; border:1px solid var(--t4-line);
	border-radius: var(--t4-radius); padding: 30px 22px; background:#fff;
	text-align:center; transition: all .2s ease;
}
.t4-cat:hover { border-color: var(--t4-red); box-shadow: var(--t4-shadow); transform: translateY(-3px); }
.t4-cat__ic { font-size: 34px; }
.t4-cat__n { display:block; font-family: var(--t4-display); font-weight:700; color:var(--t4-ink); margin-top:12px; text-transform:uppercase; letter-spacing:.02em; font-size:.92rem; }
.t4-cat__c { color: var(--t4-muted); font-size:.8rem; }

/* Promo band — liquid multicolour gradient (brand palette drifting like water
   over a blue base). Radial "blobs" pan slowly to give the fluid motion; the
   blue base keeps the white copy fully legible. */
.t4-promo {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 95% at 15% 18%, rgba(52,168,83,.60), transparent 62%),
		radial-gradient(55% 85% at 88% 88%, rgba(251,188,5,.50), transparent 62%),
		radial-gradient(50% 75% at 72% 12%, rgba(234,67,53,.42), transparent 60%),
		linear-gradient(120deg, #1557b0 0%, #1a73e8 46%, #4285F4 100%);
	background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
	background-position: 0% 50%, 100% 50%, 50% 0%, 0 0;
	animation: t4-liquid 18s ease-in-out infinite;
	color:#fff; border-radius: var(--t4-radius);
	padding: 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
@keyframes t4-liquid {
	0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%, 0 0; }
	50%      { background-position: 100% 50%, 0% 60%, 40% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.t4-promo { animation: none; }
}
.t4-promo h3 { color:#fff; font-family:var(--t4-display); font-weight:800; font-size: clamp(1.4rem,2.4vw,2rem); margin:0; text-transform:uppercase; }
.t4-promo p { margin:6px 0 0; color: rgba(255,255,255,.9); }
.t4-promo .t4-btn-ghost { border-color:#fff; color:#fff !important; }
.t4-promo .t4-btn-ghost:hover { background:#fff !important; color: var(--t4-red) !important; }

/* Brand strip — uniform white logo tiles (logos = third-party trademarks, GAP-7) */
.t4-brands {
	/* auto-fit (not a fixed 6) so unused tracks COLLAPSE, and justify-content
	   centres whatever is left. The brand list is data-driven — t4_brands()
	   returns only brands that actually have products, currently 3 of the 6
	   logo assets — so a rigid `repeat(6, 1fr)` left the three tiles sitting in
	   tracks 1-3 with three empty tracks padding them off to the left.
	   At the full six, 6x160 + 5x16 = 1040px, so the row still exactly fills
	   max-width and looks identical to before. */
	display:grid; grid-template-columns:repeat(auto-fit, 160px); gap:16px;
	justify-content:center;
	max-width:1040px; margin:0 auto;
}
.t4-brand {
	display:flex; align-items:center; justify-content:center;
	height:104px; padding:18px 22px;
	background:#fff; border:1px solid var(--t4-line); border-radius:var(--t4-radius);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	/* text-fallback styling (brands without a downloaded logo) */
	font-family: var(--t4-display); font-weight:800; letter-spacing:.04em;
	color: var(--t4-ink); font-size:1.1rem; text-transform:uppercase;
}
.t4-brand--logo { padding:22px 26px; }
.t4-brand--logo img {
	max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain;
	/* full colour by default; tile lifts on hover */
	opacity:1; transition: transform .25s ease;
}
.t4-brand:hover {
	border-color: var(--t4-red); box-shadow:0 8px 22px rgba(17,17,17,.08); transform:translateY(-2px);
	color: var(--t4-red);
}
.t4-brand--logo:hover img { transform:scale(1.04); }
/* No column overrides needed — auto-fit wraps on its own and stays centred. */
@media (max-width: 520px) { .t4-brand { height:88px; } }

/* Application banners (H4 — GAP-2 placeholder visuals) */
.t4-appbanners { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.t4-appbanner {
	position:relative; display:flex; flex-direction:column; justify-content:flex-end;
	min-height:170px; padding:26px; border-radius:var(--t4-radius); overflow:hidden;
	color:#fff; isolation:isolate;
}
.t4-appbanner::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.96; }
.t4-appbanner--a::before { background:url("assets/img/banner-borehole.jpg") center/cover no-repeat #0c1f30; }
.t4-appbanner--b::before { background:url("assets/img/banner-booster.jpg") center/cover no-repeat #2a1710; }
.t4-appbanner--c::before { background:url("assets/img/banner-drainage.jpg") center/cover no-repeat #0c211e; }
/* darker scrim behind text for guaranteed contrast */
.t4-appbanner::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.20) 78%); }
.t4-appbanner > * { position:relative; z-index:1; }
.t4-appbanner__ic { position:absolute; right:18px; top:16px; opacity:.55; color:#fff; }
.t4-appbanner__ic .t4-ic { width:54px; height:54px; }
.t4-appbanner__t { font-family:var(--t4-display); font-weight:800; font-size:1.25rem; text-transform:uppercase; letter-spacing:.01em; color:#fff !important; }
.t4-appbanner__c { color:rgba(255,255,255,.88) !important; font-size:.9rem; margin-top:2px; }
.t4-appbanner__cta { font-family:var(--t4-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; color:#fff !important; margin-top:14px; }
.t4-appbanner:hover .t4-appbanner__cta { color:var(--t4-red); }
.t4-appbanner:hover { transform:translateY(-3px); transition:transform .2s ease; }

/* Testimonials (H6 — GAP-3 real quotes) */
.t4-testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.t4-testimonial {
	margin:0; background:#fff; border:1px solid var(--t4-line); border-radius:var(--t4-radius);
	padding:28px 26px; box-shadow:var(--t4-shadow);
}
.t4-testimonial__stars { color:var(--t4-star); letter-spacing:2px; margin-bottom:12px; }
.t4-testimonial blockquote { margin:0 0 16px; font-size:.98rem; line-height:1.6; color:var(--t4-ink); }
.t4-testimonial figcaption { font-size:.86rem; color:var(--t4-muted); }
.t4-testimonial figcaption strong { color:var(--t4-ink); font-family:var(--t4-display); }

@media (max-width:1024px){ .t4-appbanners,.t4-testimonials{ grid-template-columns:1fr; } }

/* Section heading row */
.t4-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.t4-head .t4-h2 { margin:0; }
.t4-head a.t4-more { font-family:var(--t4-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--t4-red); font-size:.85rem; }

/* Make the homepage [products] grid match card style + horizontal scroll on small screens */
.t4-products .woocommerce ul.products { margin:0; }

/* Tabbed product section (H3 — CSS-only) */
.t4-tabs__radio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.t4-tabshead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.t4-tabshead .t4-h2 { margin:0; }
.t4-tabs__nav { display:flex; gap:8px; flex-wrap:wrap; }
.t4-tabs__nav label {
	font-family:var(--t4-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
	font-size:.8rem; padding:11px 18px; border:1px solid var(--t4-line); border-radius:var(--t4-radius);
	background:#fff; color:var(--t4-ink); cursor:pointer; transition:all .15s ease; user-select:none;
}
.t4-tabs__nav label:hover { border-color:var(--t4-red); color:var(--t4-red); }
.t4-tabs__panel { display:none; }
#t4tab1:checked ~ .t4-tabs__panels .t4-tabs__panel--1,
#t4tab2:checked ~ .t4-tabs__panels .t4-tabs__panel--2,
#t4tab3:checked ~ .t4-tabs__panels .t4-tabs__panel--3 { display:block; }
#t4tab1:checked ~ .t4-tabshead label[for="t4tab1"],
#t4tab2:checked ~ .t4-tabshead label[for="t4tab2"],
#t4tab3:checked ~ .t4-tabshead label[for="t4tab3"] {
	background:var(--t4-red); border-color:var(--t4-red); color:#fff;
}

/* Responsive */
@media (max-width: 1024px) {
	.t4-features { grid-template-columns: repeat(2,1fr); }
	.t4-feature:nth-child(2) { border-right:0; }
	.t4-cats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
	.t4-features { grid-template-columns: 1fr; }
	.t4-feature { border-right:0; border-bottom:1px solid var(--t4-line); }
	.t4-cats { grid-template-columns: 1fr 1fr; }
	.t4-section { padding: 44px 0; }
}

/* =========================================================================
   9. Wishlist (P5) · Scheme picker (P7) · FAQ (P13)
   ========================================================================= */

/* Heart toggle on product cards */
.woocommerce ul.products li.product { position: relative; }
.t4-wish-btn {
	position:absolute; top:10px; right:10px; z-index:3;
	width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
	background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:50%;
	color:var(--t4-body); cursor:pointer; padding:0; box-shadow:0 2px 8px rgba(17,17,17,.10);
	transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.t4-wish-btn .t4-ic { width:18px; height:18px; fill:none; }
.t4-wish-btn:hover { color:var(--t4-red); border-color:var(--t4-red); transform:translateY(-1px); }
.t4-wish-btn.is-active { color:#fff; background:var(--t4-red); border-color:var(--t4-red); }
.t4-wish-btn.is-active .t4-ic { fill:#fff; }

/* Top-bar wishlist link + count + theme toggle */
.t4-topbar__wish { display:inline-flex; align-items:center; gap:6px; }
.t4-topbar__wish .t4-ic { width:15px; height:15px; }
.t4-wish-count {
	display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
	padding:0 4px; border-radius:9px; background:var(--t4-red); color:#fff;
	font-size:.66rem; font-weight:700; line-height:1;
}
.t4-wish-count.is-empty { display:none; }
/* Scheme picker (client preview) */
.t4-scheme { position:relative; display:inline-flex; }
.t4-scheme__toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:2px 4px; }
.t4-scheme__toggle:hover { color:var(--t4-red); }
.t4-scheme__dot { width:12px; height:12px; border-radius:50%; background:var(--t4-red); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.t4-scheme__dot--red { background:#d8413b; } .t4-scheme__dot--blue { background:#2b6cb0; }
.t4-scheme__dot--teal { background:#0f766e; } .t4-scheme__dot--graphite { background:#374151; }
.t4-scheme__dot--dark { background:#16181b; }
.t4-scheme__menu { position:absolute; right:0; top:calc(100% + 6px); z-index:100; margin:0; padding:6px; list-style:none; min-width:170px; background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:var(--t4-radius); box-shadow:0 10px 30px rgba(0,0,0,.16); }
.t4-scheme__menu[hidden] { display:none; }
.t4-scheme__menu button { display:flex; align-items:center; gap:9px; width:100%; background:none; border:0; padding:7px 8px; border-radius:4px; font:inherit; font-size:.82rem; color:var(--t4-ink); cursor:pointer; text-align:left; }
.t4-scheme__menu button:hover { background:var(--t4-surface-2); }
.t4-scheme__menu button[aria-checked="true"] { font-weight:700; }

/* Wishlist page */
.t4-wl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:12px; }
.t4-wl-empty { padding:28px 0; color:var(--t4-body); font-size:1rem; }
.t4-wl-card { border:1px solid var(--t4-line); border-radius:var(--t4-radius); background:var(--t4-surface); padding:14px; display:flex; flex-direction:column; }
.t4-wl-card__img { display:block; height:160px; }
.t4-wl-card__img img { width:100%; height:100%; object-fit:contain; }
.t4-wl-card__t { font-family:var(--t4-display); font-weight:700; color:var(--t4-ink); margin:10px 0 4px; font-size:.92rem; line-height:1.3; }
.t4-wl-card__p { color:var(--t4-red); font-weight:700; margin-bottom:10px; }
.t4-wl-card__actions { margin-top:auto; display:flex; align-items:center; gap:10px; }
.t4-wl-card__actions .button { flex:1; text-align:center; }
.t4-wl-remove { background:none; border:0; color:var(--t4-muted); cursor:pointer; font-size:.82rem; text-decoration:underline; }
.t4-wl-remove:hover { color:var(--t4-red); }
@media (max-width:1024px){ .t4-wl-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .t4-wl-grid{ grid-template-columns:repeat(2,1fr); } }

/* FAQ accordion (native <details>) */
.t4-faq { max-width:820px; margin:0 auto; }
.t4-faq__item { border:1px solid var(--t4-line); border-radius:var(--t4-radius); margin-bottom:12px; background:var(--t4-surface); overflow:hidden; }
.t4-faq__q { cursor:pointer; list-style:none; padding:16px 50px 16px 18px; position:relative; font-family:var(--t4-display); font-weight:700; color:var(--t4-ink); font-size:1rem; }
.t4-faq__q::-webkit-details-marker { display:none; }
.t4-faq__q::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color:var(--t4-red); line-height:1; }
.t4-faq__item[open] .t4-faq__q { color:var(--t4-red); }
.t4-faq__item[open] .t4-faq__q::after { content:"\2013"; }
.t4-faq__a { padding:0 18px 18px; color:var(--t4-body); line-height:1.65; }
.t4-faq__a p { margin:0; }

/* =========================================================================
   10. Dark theme — REMOVED. The store is a single light theme (client request);
   the old data-scheme="dark" override block was deleted so the site can never
   render dark. Night-time darkening is now prevented by `color-scheme: only
   light` (top of file) + the <meta name="color-scheme"> tag in functions.php.
   ========================================================================= */

/* =========================================================================
   11. Product detail page (PDP)
   ========================================================================= */
.t4-specs { width:100%; border-collapse:collapse; }
.t4-specs th, .t4-specs td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--t4-line); font-size:.92rem; }
.t4-specs th { width:38%; color:var(--t4-ink); font-family:var(--t4-display); font-weight:700; background:var(--t4-surface-2); }
.t4-specs td { color:var(--t4-body); }
.t4-deliv { list-style:none; margin:0; padding:0; }
.t4-deliv li { padding:10px 0; border-bottom:1px solid var(--t4-line-soft); color:var(--t4-body); line-height:1.55; }
.t4-deliv li:last-child { border-bottom:0; }
.t4-deliv strong { color:var(--t4-ink); }

/* Secondary CTAs under add-to-cart */
.t4-pdp-cta { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 4px; }
.t4-pdp-cta .t4-btn-ghost { display:inline-flex; align-items:center; }
.t4-pdp-wa {
	display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--t4-radius);
	background:#25d366; color:#fff !important; font-family:var(--t4-display); font-weight:700; font-size:.9rem;
}
.t4-pdp-wa:hover { background:#1da851; color:#fff !important; }
.t4-pdp-wa .t4-ic { width:18px; height:18px; }
/* Purchasable products: Add to cart is primary, so the quote drops to a quiet
   text link beside the WhatsApp button (no competing button). */
.t4-pdp-cta--buy { align-items:center; gap:8px 18px; }
.t4-pdp-quotelink { font-family:var(--t4-body-font); font-size:.9rem; font-weight:600; color:var(--t4-muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(95,99,104,.4); }
.t4-pdp-quotelink:hover { color:var(--t4-blue-d); text-decoration-color:currentColor; }

/* Brand + trust block */
.t4-pdp-extra { margin-top:22px; padding-top:20px; border-top:1px solid var(--t4-line); }
.t4-pdp-brand { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.t4-pdp-brand span { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--t4-muted); font-weight:700; }
.t4-pdp-brand img { max-height:34px; width:auto; }
.t4-pdp-brand strong { font-family:var(--t4-display); color:var(--t4-ink); font-size:1.05rem; }
.t4-pdp-trust { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.t4-pdp-trust li { display:flex; align-items:center; gap:10px; color:var(--t4-body); font-size:.9rem; }
.t4-pdp-trust .t4-ic { width:19px; height:19px; color:var(--t4-red); flex:0 0 auto; }

/* Price on request (Odoo "Price On Request" ribbon) */
.t4-por { font-family:var(--t4-display); font-weight:800; color:var(--t4-ink); font-size:1.02rem; letter-spacing:-.01em; }
.t4-por::before { content:"\1F4AC"; margin-right:6px; font-size:.95em; }
.t4-quote-btn { white-space:nowrap; }
.single-product .t4-por { font-size:1.25rem; color:var(--t4-red); }

/* Datasheets / documents (Odoo-hosted PDF links) */
.t4-pdp-docs { margin-top:20px; padding-top:18px; border-top:1px solid var(--t4-line); }
.t4-pdp-docs__h { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--t4-muted); font-weight:700; margin:0 0 10px; }
.t4-pdp-docs ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.t4-pdp-docs a { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--t4-line); border-radius:10px; color:var(--t4-ink); font-size:.9rem; font-weight:600; text-decoration:none; transition:border-color .15s, background .15s; }
.t4-pdp-docs a:hover { border-color:var(--t4-red); background:var(--t4-surface-2); }
.t4-pdp-docs a .t4-ic { color:var(--t4-red); flex:0 0 auto; }
.t4-pdp-docs a span { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t4-pdp-docs a em { font-style:normal; font-size:.78rem; color:var(--t4-muted); flex:0 0 auto; }

/* Tighten WooCommerce single layout to our system */
.single-product div.product .product_title { font-family:var(--t4-display); font-weight:800; letter-spacing:-.01em; }
.single-product div.product p.price, .single-product div.product span.price { color:var(--t4-red); font-weight:800; }
[data-scheme="dark"] .t4-specs th { background:var(--t4-surface-2); }

/* =========================================================================
   12. Shop / archive filter sidebar
   ========================================================================= */
.t4-shop { display:grid; grid-template-columns:268px minmax(0,1fr); gap:30px; align-items:start; padding:0 var(--t4-gutter); }
.t4-shop__main { min-width:0; }
.t4-shop__main #primary,
.t4-shop__main .site-main { width:100% !important; }

.t4-filters { position:sticky; top:20px; border:1px solid var(--t4-line); border-radius:var(--t4-radius); background:var(--t4-surface); overflow:hidden; }
.t4-filters__head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 12px; border-bottom:1px solid var(--t4-line); }
.t4-filters__title { color:var(--t4-ink); font-family:var(--t4-display); font-weight:800; font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; }
.t4-filters__clear { color:var(--t4-red); font-size:.78rem; text-decoration:underline; }
.t4-filters__clear:hover { color:var(--t4-red-dark); }

.t4-filter { padding:14px 16px; border-bottom:1px solid var(--t4-line); }
.t4-filter__h { margin:0 0 10px; font-family:var(--t4-display); font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--t4-ink); }
.t4-filter ul { list-style:none; margin:0; padding:0; }
.t4-filter li { margin:0; }
.t4-filter label { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.86rem; color:var(--t4-body); cursor:pointer; }
.t4-filter label:hover { color:var(--t4-red); }
.t4-filter input[type="checkbox"] { width:15px; height:15px; accent-color:var(--t4-red); flex:0 0 auto; }
.t4-filter label span { flex:1; min-width:0; }
.t4-filter label em { color:var(--t4-muted); font-size:.74rem; font-style:normal; }

/* hierarchical category tree (top categories + nested size sub-categories) */
/* NB: scope with .t4-filter so these beat the generic `.t4-filter ul {padding:0}`
   rule above (which has equal/higher specificity and would otherwise win). */
.t4-cattree > .t4-cattree__item > label > span { font-weight:600; color:var(--t4-ink); }
.t4-filter ul.t4-cattree__kids { margin:2px 0 10px; padding-left:34px; position:relative; }
.t4-filter .t4-cattree__kids::before { content:""; position:absolute; left:16px; top:2px; bottom:8px; width:2px; border-radius:2px; background:var(--t4-line); }

/* =========================================================================
   Lead-gate modal (datasheet downloads)
   ========================================================================= */
.t4-leadgate[hidden] { display:none; }
.t4-leadgate { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.t4-leadgate__overlay { position:absolute; inset:0; background:rgba(15,18,22,.55); backdrop-filter:saturate(120%) blur(2px); }
.t4-leadgate__box { position:relative; width:100%; max-width:380px; background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:var(--t4-radius); box-shadow:0 24px 60px rgba(0,0,0,.28); padding:24px 22px 22px; }
.t4-leadgate__x { position:absolute; top:8px; right:10px; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--t4-muted); cursor:pointer; }
.t4-leadgate__x:hover { color:var(--t4-red); }
.t4-leadgate__h { margin:0 0 4px; font-family:var(--t4-display); font-weight:800; font-size:1.1rem; color:var(--t4-ink); }
.t4-leadgate__sub { margin:0 0 16px; font-size:.86rem; color:var(--t4-body); }
.t4-leadgate__form label { display:block; margin-bottom:10px; font-size:.78rem; font-weight:600; color:var(--t4-ink); }
.t4-leadgate__form input[type="text"], .t4-leadgate__form input[type="email"], .t4-leadgate__form input[type="tel"] { display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--t4-line); border-radius:8px; font-size:.9rem; }
.t4-leadgate__form input:focus { outline:none; border-color:var(--t4-red); box-shadow:0 0 0 3px rgba(214,40,40,.12); }
.t4-leadgate__hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.t4-leadgate__err { margin:0 0 10px; color:var(--t4-red); font-size:.8rem; }
.t4-leadgate__submit { width:100%; margin-top:4px; }
.t4-filter .t4-cattree__kids li { position:relative; }
.t4-filter .t4-cattree__kids label { padding:3px 0; font-size:.82rem; }
.t4-filter .t4-cattree__kids label span { font-weight:500; color:var(--t4-body); }
.t4-filter .t4-cattree__kids input[type="checkbox"] { width:14px; height:14px; }

/* grouped categories (legacy) */
.t4-fgroup { margin-bottom:6px; }
.t4-fgroup > summary { cursor:pointer; list-style:none; padding:6px 0; font-family:var(--t4-display); font-weight:700; font-size:.82rem; color:var(--t4-ink); position:relative; padding-right:18px; }
.t4-fgroup > summary::-webkit-details-marker { display:none; }
.t4-fgroup > summary::after { content:"+"; position:absolute; right:2px; top:5px; color:var(--t4-red); font-size:1rem; line-height:1; }
.t4-fgroup[open] > summary::after { content:"\2013"; }
.t4-fgroup > ul { padding:2px 0 8px 4px; }

.t4-price { display:flex; align-items:center; gap:8px; }
.t4-price input { width:100%; padding:8px 10px; border:1px solid var(--t4-line); border-radius:var(--t4-radius); font-size:.85rem; }
.t4-price span { color:var(--t4-muted); }
.t4-filters__apply { display:block; width:calc(100% - 32px); margin:14px 16px; text-align:center; }
.t4-filters__apply--btm { width:100%; margin:14px 0 2px; }

@media (max-width: 900px) {
	.t4-shop { grid-template-columns:1fr; }
	.t4-filters { position:static; margin-bottom:20px; }
	/* Collapse the filter sidebar behind its header tap-target so products show
	   first. JS (t4-interactions.js) adds .t4-filters--collapsible + toggles
	   .is-open. */
	.t4-filters--collapsible .t4-filters__head { cursor:pointer; position:relative; padding-right:44px; }
	.t4-filters--collapsible .t4-filters__head::after {
		content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; margin-top:-6px;
		border-right:2px solid var(--t4-ink); border-bottom:2px solid var(--t4-ink);
		transform:rotate(45deg); transition:transform .2s ease;
	}
	.t4-filters--collapsible.is-open .t4-filters__head::after { transform:rotate(-135deg); }
	.t4-filters--collapsible:not(.is-open) > *:not(.t4-filters__head) { display:none; }
}
[data-scheme="dark"] .t4-filters,
[data-scheme="dark"] .t4-price input { background:var(--t4-surface); border-color:var(--t4-line); }

/* =========================================================================
   13. Page hero band (shop / archives / search / pages) — gradient banner
   ========================================================================= */
.t4-pagehero-band { padding-top: clamp(6px, 1vw, 12px); }
/* Tighten the large content-area top gap below the hero band */
.t4-has-hero .content-wrapper { margin-top: 32px !important; }
/* Custom static pages have no sidebar — reclaim Botiga's reserved 300px column
   so the content fills the width instead of leaving an empty right-hand gap. */
.t4-fullwidth .site-main { width: 100% !important; }
.t4-pagehero {
	position: relative;
	border-radius: var(--t4-radius);
	/* Real warehouse photo under a left-weighted dark scrim so the title + breadcrumb read. */
	background:
		linear-gradient(100deg, rgba(11,12,13,.90) 0%, rgba(16,18,20,.74) 52%, rgba(22,16,15,.58) 100%),
		url("assets/img/page-hero.jpg") center center / cover no-repeat #16181b;
	overflow: hidden;
}
.t4-pagehero::after { display: none; }
.t4-pagehero__inner { position: relative; z-index: 1; padding: clamp(18px, 2.4vw, 30px) clamp(24px, 3.4vw, 52px); }
.t4-pagehero .t4-pagehero__title {
	margin: 6px 0 0; color: #fff; -webkit-text-fill-color: #fff;
	font-family: var(--t4-display); font-weight: 800;
	letter-spacing: -.01em; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.t4-pagehero__crumb,
.t4-pagehero__crumb a,
.t4-pagehero__crumb span { color: #c9ced4; font-size: .85rem; }
.t4-pagehero__crumb a:hover { color: #fff; }
.t4-pagehero__crumb .breadcrumb_last,
.t4-pagehero__crumb [aria-current="page"] { color: #ff8a85; font-weight: 600; }
.t4-pagehero .woocommerce-breadcrumb { margin: 0; }

/* Hide the now-duplicated in-content page headers/breadcrumbs where the hero shows */
.woocommerce-page-header,
.woocommerce-products-header { display: none !important; }
body:not(.home):not(.single-product) .entry-header .entry-title.page-title,
body.search .page-title { display: none; }

/* =========================================================================
   14. Consistent vertical rhythm — wire the --t4-section-y token
   Apply as bottom padding/margin on non-home pages to replace Botiga's large
   120px default, giving the token a real live assignment site-wide.
   Scoped to body:not(.home) to leave the bespoke homepage sections untouched.
   ========================================================================= */
body:not(.home) .content-wrapper {
	margin-bottom: var(--t4-section-y) !important; /* overrides Botiga's 120px; max 64px is leaner */
}

/* =========================================================================
   Single product — constrain the gallery (was oversized)
   ========================================================================= */
.single-product div.product .woocommerce-product-gallery { width: 46%; max-width: 460px; margin-right: 4%; }
.single-product div.product .summary { width: 50%; }
@media (max-width: 768px) {
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary { width: 100%; max-width: none; margin-right: 0; }
}

/* Amazon-style hover magnifier (assets/js/t4-magnifier.js) */
@media (hover: hover) and (pointer: fine) {
	.single-product .woocommerce-product-gallery__image img { cursor: crosshair; }
}
.t4-zoom-panel { position:fixed; z-index:1200; background-repeat:no-repeat; background-color:#fff; border:1px solid var(--t4-line); box-shadow:0 12px 34px rgba(0,0,0,.18); pointer-events:none; }
.t4-zoom-panel[hidden] { display:none; }
.t4-zoom-lens { position:fixed; z-index:1201; border:1px solid var(--t4-red); background:rgba(255,255,255,.22); pointer-events:none; }
.t4-zoom-lens[hidden] { display:none; }

/* =========================================================================
   Contact page (page-contact.php)
   ========================================================================= */
.t4-contact { padding-top: var(--t4-section-y); padding-bottom: var(--t4-section-y); }
.t4-contact__head h1 { font-family:var(--t4-display); }
.t4-contact__head p { color:var(--t4-body); margin-top:6px; }
.t4-contact__grid { display:grid; grid-template-columns: 1.4fr 1fr; gap:32px; align-items:start; margin-top:24px; }
.t4-contact__formwrap, .t4-contact__card { background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:var(--t4-radius); padding:24px; }
.t4-contact__formwrap h2, .t4-contact__card h2 { font-family:var(--t4-display); font-size:1.1rem; margin:0 0 16px; color:var(--t4-ink); }
.t4-contact-form label { display:block; margin-bottom:14px; font-size:.78rem; font-weight:600; color:var(--t4-ink); }
.t4-contact-form input, .t4-contact-form textarea { display:block; width:100%; margin-top:4px; padding:9px 11px; border:1px solid var(--t4-line); border-radius:8px; font:inherit; font-size:.9rem; }
.t4-contact-form textarea { resize:vertical; }
.t4-contact-form input:focus, .t4-contact-form textarea:focus { outline:none; border-color:var(--t4-red); box-shadow:0 0 0 3px rgba(216,65,59,.12); }
.t4-contact-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
/* Cloudflare Turnstile widget spacing (login + contact + lead gate). */
.t4-turnstile { margin:4px 0 12px; }
.t4-contact-status { margin:0 0 12px; font-size:.85rem; }
.t4-contact-status.is-ok { color:#0f766e; }
.t4-contact-status.is-err { color:var(--t4-red); }
.t4-contact-submit { width:100%; }
.t4-contact__cards { display:grid; gap:16px; align-content:start; }
.t4-contact__card ul { list-style:none; margin:0; padding:0; }
.t4-contact__card li { padding:7px 0; color:var(--t4-body); font-size:.9rem; border-bottom:1px solid var(--t4-line-soft); }
.t4-contact__card li:last-child { border-bottom:0; }
.t4-contact__card .t4-contact__addr { color:var(--t4-muted); }
.t4-contact__card a { color:var(--t4-ink); }
.t4-contact__card a:hover { color:var(--t4-red); }
.t4-contact__wa { margin-left:8px; font-size:.78rem; font-weight:600; color:#25d366 !important; }
.t4-contact__hours { color:var(--t4-muted); font-style:italic; }
@media (max-width:768px) { .t4-contact__grid { grid-template-columns:1fr; } }

/* =========================================================================
   About page (page-about-us.php)
   ========================================================================= */
.t4-about__intro { display:grid; grid-template-columns:1.6fr 1fr; gap:44px; align-items:center;
	padding-top:var(--t4-section-y); padding-bottom:var(--t4-section-y); }
.t4-about__lead h2 { margin:6px 0 16px; }
.t4-about__lead p { color:var(--t4-body); margin:0 0 14px; line-height:1.75; }
.t4-about__lead p:last-child { margin-bottom:0; }
.t4-about__stats { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.t4-about__stats li { background:var(--t4-surface); border:1px solid var(--t4-line);
	border-left:3px solid var(--t4-red); border-radius:var(--t4-radius); padding:16px 18px; }
.t4-about__stat-n { display:block; font-family:var(--t4-display); font-weight:800; font-size:1.9rem; color:var(--t4-ink); line-height:1; }
.t4-about__stat-l { display:block; color:var(--t4-muted); font-size:.85rem; margin-top:5px; }

/* Product range — image is contained (max-width + card padding) so it never
   runs edge-to-edge or overwhelms the page. It now leads the About page on its
   own: the heading, caption and CTA that framed it were dropped, so the figure
   sets its own top spacing instead of inheriting a section's. The .t4-about__range
   and .t4-about__rangecap rules below are unused, kept so that copy can be put
   back without rewriting the styles. */
.t4-about__rangetop { padding-top:clamp(20px,2.6vw,34px); }
/* Line the figure up with the "About Us" page-hero card above it. That card sits
   in a top-level .t4-wrap, while this section sits inside Botiga's content
   column, which is padded 15px left / 60px right (the no-sidebar gutter, applied
   from 992px up). Cancelling that padding puts this .t4-wrap on the same box as
   the hero's, so its own gutter yields identical left and right edges. */
.t4-about__rangetop { margin-left:-15px; margin-right:-15px; }
@media (min-width:992px) { .t4-about__rangetop { margin-right:-60px; } }
.t4-about__rangetop .t4-about__rangefig { margin-top:0; }
/* Full width of the wrap at every size, per the client. */
.t4-about__rangefig { position:relative; overflow:hidden; margin:26px auto 0;
	width:100%; max-width:none; background:#fff; border:1px solid var(--t4-line);
	border-radius:var(--t4-radius); padding:0; box-shadow:var(--t4-shadow); }
.t4-about__rangefig img { display:block; width:100%; height:auto; }
.t4-about__rangecap { max-width:62ch; margin:20px auto 0; text-align:center; color:var(--t4-body); line-height:1.65; }

.t4-about__vm { display:grid; grid-template-columns:1fr 1fr; gap:24px;
	padding-top:var(--t4-section-y); padding-bottom:var(--t4-section-y); }
.t4-about__vmcard { background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:var(--t4-radius); padding:32px; }
.t4-about__vmic { color:var(--t4-red); display:inline-flex; }
.t4-about__vmcard h3 { font-family:var(--t4-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; margin:12px 0 8px; color:var(--t4-ink); }
.t4-about__vmcard p { color:var(--t4-body); margin:0; line-height:1.7; }

.t4-about__values { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:28px; }
.t4-about__value { background:var(--t4-surface); border:1px solid var(--t4-line); border-radius:var(--t4-radius); padding:26px 18px; text-align:center; }
.t4-about__valic { color:var(--t4-red); display:inline-flex; }
.t4-about__value h3 { font-family:var(--t4-display); font-weight:700; text-transform:uppercase; font-size:.95rem; margin:14px 0 8px; color:var(--t4-ink); }
.t4-about__value p { color:var(--t4-muted); font-size:.82rem; margin:0; line-height:1.55; }

.t4-about__ind-wrap { padding-top:var(--t4-section-y); padding-bottom:var(--t4-section-y); }
.t4-about__industries { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:28px; }
.t4-about__industry { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 12px;
	border:1px solid var(--t4-line); border-radius:var(--t4-radius); background:var(--t4-surface);
	font-family:var(--t4-display); font-weight:700; text-transform:uppercase; font-size:.8rem; color:var(--t4-ink); text-align:center; }
.t4-about__industry:hover { border-color:var(--t4-red); box-shadow:var(--t4-shadow); }
.t4-about__indic { color:var(--t4-red); }
.t4-about__indic .t4-ic { width:30px; height:30px; }

@media (max-width:900px) {
	.t4-about__intro, .t4-about__vm { grid-template-columns:1fr; }
	.t4-about__values { grid-template-columns:repeat(2,1fr); }
	.t4-about__industries { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px) {
	.t4-about__values, .t4-about__industries { grid-template-columns:1fr 1fr; }
}

/* =========================================================================
   Blog — two-column layout with a product-categories sidebar
   (inc/blog-sidebar.php). Botiga ships the blog full-width/no-sidebar; we force
   a content + 300px sidebar layout and centre it in the page gutter. The
   margin:auto cancels Bootstrap's -15px .row.main-row gutter cleanly.
   ========================================================================= */
body.t4-blog-layout .row.main-row {
	display: flex; flex-wrap: nowrap; gap: clamp(24px, 3vw, 44px); align-items: flex-start;
	max-width: 1520px; margin-left: auto !important; margin-right: auto !important;
	padding-left: var(--t4-gutter); padding-right: var(--t4-gutter);
}
body.t4-blog-layout #primary.site-main {
	width: auto !important; max-width: none !important; flex: 1 1 auto; min-width: 0;
	padding-left: 0 !important; padding-right: 0 !important;
}
.t4-blog-sidebar { flex: 0 0 296px; width: 296px; }
@media (max-width: 980px) {
	body.t4-blog-layout .row.main-row { display: block; }
	.t4-blog-sidebar { width: 100%; margin-top: 40px; }
}

/* Sidebar cards */
.t4-blog-sidebar .t4-bsw { background: var(--t4-surface); border: 1px solid var(--t4-line); border-radius: var(--t4-radius); padding: 20px; margin-bottom: 20px; }
.t4-blog-sidebar .t4-bsw:last-child { margin-bottom: 0; }
.t4-bsw__title { font-family: var(--t4-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; color: var(--t4-ink); margin: 0 0 14px; }
.t4-bsw__cats { list-style: none; margin: 0 0 16px; padding: 0; }
.t4-bsw__cats li a { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 8px; color: var(--t4-body); font-size: .9rem; transition: background .15s ease, color .15s ease; }
.t4-bsw__cats li a:hover { background: var(--t4-surface-2); color: var(--t4-red); }
.t4-bsw__cats .t4-ic { width: 18px; height: 18px; color: var(--t4-red); flex: 0 0 18px; }
.t4-bsw__cats li a span { flex: 1 1 auto; min-width: 0; }
.t4-bsw__cats li a em { font-style: normal; font-size: .78rem; color: var(--t4-muted); }
.t4-bsw__shop { display: block; text-align: center; width: 100%; }
.t4-bsw__recent { list-style: none; margin: 0; padding: 0; }
.t4-bsw__recent li { padding: 8px 0; border-bottom: 1px solid var(--t4-line-soft); }
.t4-bsw__recent li:last-child { border-bottom: 0; }
.t4-bsw__recent li a { color: var(--t4-body); font-size: .88rem; line-height: 1.45; }
.t4-bsw__recent li a:hover { color: var(--t4-red); }
.t4-bsw--cta p { color: var(--t4-body); font-size: .88rem; margin: 0 0 14px; line-height: 1.55; }
.t4-bsw--cta .button { display: block; text-align: center; width: 100%; }

/* =========================================================================
   Preview 4 reskin — Phase 2: header (light glass top bar, frosted header,
   pill nav + pill search). Overrides the older dark header chrome above.
   ========================================================================= */
/* Utility bar: a dark strip that anchors the top of the page and sets off the
   light header below it. Light text chosen to read cleanly on the dark ground. */
.t4-topbar {
	background: var(--t4-dark);
	-webkit-backdrop-filter: none; backdrop-filter: none;
	color: #cfd3d7;
	border-bottom: 0;
}
.t4-topbar a,
.t4-topbar__links a,
.t4-topbar__promo { color: #cfd3d7; }
.t4-topbar a:hover,
.t4-topbar__links a:hover { color: #fff; }
.t4-topbar strong,
.t4-topbar__phone strong { color: #fff; }
.t4-topbar__wish .t4-ic { color: #cfd3d7; }

/* Main header: no white bar — let the page wash show through so the header reads
   as part of the single light theme rather than a solid block. */
.bhfb-header.bhfb-desktop {
	background: transparent !important;
	-webkit-backdrop-filter: none; backdrop-filter: none;
	box-shadow: none;
}
.site-header { border-bottom: 0; }

/* Brand wordmark — Manrope, tight tracking. */
.site-title,
.site-title a { font-family: var(--t4-display); font-weight: 800; letter-spacing: -.02em; color: var(--t4-ink); }

/* Primary nav → Google-style pill hovers. */
.bhfb-component-menu .menu-item > a {
	border-radius: 11px;
	padding: 8px 13px;
	font-family: var(--t4-display);
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.bhfb-component-menu .menu-item > a:hover,
.bhfb-component-menu .menu-item.current-menu-item > a {
	background: rgba(66,133,244,.12);
	color: var(--t4-blue-d);
}

/* Search row: drop the white band; pill the category button + search box. */
.t4-searchrow { background: transparent; border-bottom: 1px solid var(--t4-line); }
/* Give the row real top/bottom breathing room. Padding lives on the inner
   element, so the same spacing carries over when the row is stuck to the top. */
.t4-searchrow__inner { padding-top: 22px; padding-bottom: 22px; }
.t4-catbtn__btn { border-radius: 999px; text-transform: none; letter-spacing: 0; }
.t4-search { border-radius: 999px; }
.t4-search__cat:first-child { padding-left: 22px; }
.t4-search__btn { text-transform: none; letter-spacing: 0; padding: 0 26px; }

/* =========================================================================
   Preview 4 reskin — Phase 3: hero (light two-column + glass product card)
   ========================================================================= */
.t4-hero2 { padding: clamp(18px, 2.6vw, 34px) 0 0; }
.t4-hero2__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr);
	grid-template-areas: "kicker kicker" "copy art";
	column-gap: clamp(20px, 2.2vw, 32px);
	row-gap: 10px;
	align-items: center;
}
.t4-hero2__kicker { grid-area: kicker; }
.t4-hero2__copy   { grid-area: copy; }
.t4-hero2__art    { grid-area: art; }
/* Spanning the full hero width it needs ~545px, which it has on every desktop
   and tablet size, so it sits on one line. text-wrap: balance only comes into
   play on narrow phones, where it splits into two even lines. */
.t4-hero2__kicker { color: var(--t4-blue-d); display: block; text-wrap: balance; }
.t4-hero2__title {
	font-family: var(--t4-display); font-weight: 800; text-transform: none;
	font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em;
	color: var(--t4-ink); margin: 0;
}
.t4-hero2__title .c-b { color: var(--t4-blue); }
.t4-hero2__title .c-g { color: var(--t4-green); }
.t4-hero2__title .c-r { color: var(--t4-red-g); }
.t4-hero2__sub { font-size: 1.06rem; line-height: 1.65; color: var(--t4-body); max-width: 46ch; margin: 18px 0 26px; }
.t4-hero2__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.t4-hero2__cta .button { display: inline-flex; align-items: center; gap: 9px; }
.t4-hero2__cta .button .t4-ic { width: 20px; height: 20px; }

/* Glass secondary button (paired with the blue primary). */
.t4-btn-glass {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--t4-display); font-weight: 700; font-size: .95rem;
	border-radius: 999px; padding: 13px 24px; cursor: pointer; text-decoration: none;
	background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: 1px solid rgba(60,64,67,.18); color: var(--t4-ink); transition: background .18s ease, transform .18s ease;
}
.t4-btn-glass:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }

/* Glass product card. The artwork is full-bleed: no inner padding, so it fills
   the card edge to edge and the card's own radius clips it. The floating
   "2,000+" / "Available to order" chips below are no longer rendered (removed
   from front-page.php at the client's request) — the rules are kept so the
   markup can be restored without rewriting the styles. */
.t4-hero2__art { position: relative; padding: 0; overflow: hidden; }
.t4-hero2__art > img { width: 100%; height: auto; display: block; border-radius: inherit; }
.t4-hero2__stat { position: absolute; left: -22px; top: 33%; transform: translateY(-50%); z-index: 3; padding: 14px 22px; border-radius: 20px; text-align: center; }
.t4-hero2__stat b { font-family: var(--t4-display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--t4-blue); display: block; letter-spacing: -.03em; }
.t4-hero2__stat span { font-size: .74rem; color: var(--t4-muted); display: block; margin-top: 4px; }
.t4-hero2__avail { position: absolute; right: -10px; bottom: 20px; z-index: 3; padding: 13px 16px; border-radius: 18px; display: flex; gap: 12px; align-items: center; min-width: 210px; }
.t4-hero2__avail .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--t4-green); box-shadow: 0 0 0 4px rgba(52,168,83,.25); flex: 0 0 11px; }
.t4-hero2__avail b { font-family: var(--t4-display); color: var(--t4-ink); font-size: .92rem; display: block; }
.t4-hero2__avail span { font-size: .78rem; color: var(--t4-muted); }
/* Small laptops / large tablets: at the wide desktop ratio the copy column gets
   narrow enough that the two hero buttons wrap to a second row, so hand some
   width back to the copy between the stacking breakpoint and 1080px. */
@media (min-width: 901px) and (max-width: 1080px) {
	.t4-hero2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@media (max-width: 900px) {
	.t4-hero2__grid { grid-template-columns: 1fr; grid-template-areas: "kicker" "copy" "art"; }
	.t4-hero2__art { margin-top: 22px; }
	.t4-hero2__stat { left: 8px; }
	.t4-hero2__avail { right: 8px; }
}

/* =========================================================================
   Preview 4 reskin — Phase 4: homepage sections (glass cards + coloured icon
   squares + green availability pill). CSS-only; colours cycle via nth-child.
   ========================================================================= */
/* Headings: Google style is sentence-case, blue eyebrow. */
.t4-eyebrow { color: var(--t4-blue-d); letter-spacing: .14em; }
.t4-h2 { text-transform: none; }

/* Trust strip → four frosted-glass cards with coloured icon squares. */
.t4-features {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	border: 0; background: transparent; border-radius: 0; overflow: visible;
}
.t4-feature {
	background: var(--t4-glass-bg); -webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); box-shadow: var(--t4-shadow); border-radius: var(--t4-radius);
	padding: 16px 18px; gap: 14px; border-right: var(--t4-glass-border);
}
.t4-feature__icon {
	width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px;
	display: grid; place-items: center; color: #fff;
}
.t4-feature__icon .t4-ic { width: 24px; height: 24px; }
.t4-features .t4-feature:nth-child(1) .t4-feature__icon { background: var(--t4-blue); }
.t4-features .t4-feature:nth-child(2) .t4-feature__icon { background: var(--t4-green); }
.t4-features .t4-feature:nth-child(3) .t4-feature__icon { background: var(--t4-yellow); }
.t4-features .t4-feature:nth-child(4) .t4-feature__icon { background: var(--t4-red-g); }

/* Category tiles → glass + coloured icon squares. */
.t4-cat {
	background: var(--t4-glass-bg); -webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); box-shadow: none; border-radius: var(--t4-radius-lg);
}
.t4-cat:hover { border-color: rgba(255,255,255,.9); box-shadow: var(--t4-shadow); transform: translateY(-4px); }
.t4-cat__ic {
	width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
	display: grid; place-items: center; color: #fff;
}
.t4-cat__ic .t4-ic { width: 28px; height: 28px; }
.t4-cat:hover .t4-cat__ic { color: #fff; }
.t4-cat__n { text-transform: none; }
.t4-cats .t4-cat:nth-child(4n+1) .t4-cat__ic { background: var(--t4-blue); }
.t4-cats .t4-cat:nth-child(4n+2) .t4-cat__ic { background: var(--t4-green); }
.t4-cats .t4-cat:nth-child(4n+3) .t4-cat__ic { background: var(--t4-red-g); }
.t4-cats .t4-cat:nth-child(4n+4) .t4-cat__ic { background: var(--t4-yellow); }

/* Product cards → frosted glass, but with a clearly VISIBLE border + soft resting
   shadow so each card reads as a distinct tile (the old white glass border was
   invisible on the white page). Covers shop, search results AND related products. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--t4-glass-bg); -webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: 1px solid var(--t4-line); border-radius: var(--t4-radius-lg);
	box-shadow: 0 1px 2px rgba(60,64,67,.05), 0 10px 26px -18px rgba(60,64,67,.22);
}
.woocommerce ul.products li.product:hover {
	border-color: var(--t4-blue); box-shadow: var(--t4-shadow); transform: translateY(-4px);
}
/* White image panel gets its own border + bottom separator so the photo and the
   title/price below it are visually divided. */
.woocommerce ul.products li.product img {
	background: #fff; border: 1px solid var(--t4-line); border-radius: 14px; padding: 6px;
}

/* Stock badge → green "Available" pill (was a dark badge). */
.t4-card-stock {
	background: rgba(52,168,83,.16); color: var(--t4-green-d);
	font-family: var(--t4-display); font-weight: 700; text-transform: none; letter-spacing: 0;
	border-radius: 999px; padding: 5px 11px;
}

/* PDP buy-box for price-on-request products (no add-to-cart) — availability line
   + Request-a-quote / WhatsApp so the buy-box is never empty. */
.t4-pdp-quote { margin: 4px 0 20px; }
.t4-pdp-avail {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	font-family: var(--t4-display); font-weight: 700; color: var(--t4-ink);
	font-size: 1rem; margin: 0 0 14px;
}
.t4-pdp-avail span { font-family: var(--t4-body-font); font-weight: 400; color: var(--t4-muted); font-size: .92rem; }
.t4-pdp-avail__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--t4-green); box-shadow: 0 0 0 4px rgba(52,168,83,.2); flex: 0 0 10px; }
.t4-pdp-cta--lead { margin: 0; }
.t4-pdp-cta--lead .button { padding: 13px 30px; }

/* =========================================================================
   Preview 4 reskin — Phase 5: footer (white + 4-colour top line + coloured
   T4 mark/wordmark). Overrides the dark footer in section 8 above.
   ========================================================================= */
.t4-footer {
	background: #fff; color: var(--t4-body); position: relative;
	box-shadow: 0 -1px 0 var(--t4-line), 0 -22px 50px -30px rgba(60,64,67,.18);
}
.t4-footer::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, var(--t4-blue) 0 25%, var(--t4-red-g) 25% 50%, var(--t4-yellow) 50% 75%, var(--t4-green) 75% 100%);
}
.t4-footer a { color: var(--t4-muted); }
.t4-footer a:hover { color: var(--t4-blue-d); }
.t4-footer .widget-title { color: var(--t4-ink); }
.t4-footer .widget-title::after { background: var(--t4-blue); }
.t4-footer__tag { color: var(--t4-muted); }
.t4-footer__contact li { color: var(--t4-body); }
.t4-footer__contact li span { color: var(--t4-body); }
.t4-footer__contact .t4-ic { color: var(--t4-blue); }
.t4-footer__cta p,
.t4-footer__hours { color: var(--t4-muted); }

/* Brand: coloured mark + wordmark (T4 blue, PUMPS green). */
.t4-footer__logo { display: flex; align-items: center; gap: 11px; }
.t4-footer__logoimg { height: 66px; width: auto; display: block; }
@media (max-width: 782px) { .t4-footer__logoimg { height: 56px; } }

/* Sub-row + bottom bar → light. */
.t4-footer__sub.t4-wrap { border-top: 1px solid var(--t4-line); }
.t4-footer__bar { background: transparent; border-top: 1px solid var(--t4-line); }
.t4-footer__bar-inner { color: var(--t4-muted); }
.t4-footer__pay i {
	color: var(--t4-body); background: var(--t4-surface-2); border: 1px solid var(--t4-line);
}

/* =========================================================================
   Preview 4 reskin — Phase 6: inner-page banner + mega-menu glassify.
   ========================================================================= */
/* Page-hero band (shop / archives / static pages): dark photo → light glass
   with a soft multicolour wash so the single white theme carries through. */
.t4-pagehero {
	background: linear-gradient(120deg, rgba(66,133,244,.12), rgba(52,168,83,.09) 55%, rgba(251,188,5,.09));
	border: var(--t4-glass-border);
	-webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border-radius: var(--t4-radius-lg);
}
.t4-pagehero .t4-pagehero__title { color: var(--t4-ink); -webkit-text-fill-color: var(--t4-ink); text-shadow: none; }
.t4-pagehero__crumb,
.t4-pagehero__crumb a,
.t4-pagehero__crumb span { color: var(--t4-muted); }
.t4-pagehero__crumb a:hover { color: var(--t4-blue-d); }
.t4-pagehero__crumb .breadcrumb_last,
.t4-pagehero__crumb [aria-current="page"] { color: var(--t4-blue-d); font-weight: 600; }

/* Mega-menu + category dropdown → frosted glass. */
.t4-mega,
.t4-catbtn__panel {
	background: rgba(255,255,255,.9);
	-webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); border-radius: var(--t4-radius);
}
.t4-mega__promo { background: rgba(66,133,244,.06); border-left-color: var(--t4-line); }

/* Application banners: dark category photos → light glass cards with a soft
   per-card colour wash + a large coloured line-icon (Preview 4 language). */
.t4-appbanner {
	color: var(--t4-ink);
	background: var(--t4-glass-bg);
	-webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); box-shadow: var(--t4-shadow);
	border-radius: var(--t4-radius-lg); min-height: 150px;
}
.t4-appbanner::before { display: none !important; }       /* drop the photo */
.t4-appbanner::after {                                     /* repurpose scrim → colour wash */
	content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
	background: none;
}
.t4-appbanner--a::after { background: radial-gradient(130% 130% at 100% 0, rgba(66,133,244,.18), transparent 62%); }
.t4-appbanner--b::after { background: radial-gradient(130% 130% at 100% 0, rgba(52,168,83,.18), transparent 62%); }
.t4-appbanner--c::after { background: radial-gradient(130% 130% at 100% 0, rgba(251,188,5,.20), transparent 62%); }
.t4-appbanner__ic { position: absolute; right: 18px; top: 16px; opacity: 1; }
.t4-appbanner--a .t4-appbanner__ic { color: var(--t4-blue); }
.t4-appbanner--b .t4-appbanner__ic { color: var(--t4-green); }
.t4-appbanner--c .t4-appbanner__ic { color: var(--t4-yellow); }
.t4-appbanner__t { color: var(--t4-ink) !important; }
.t4-appbanner__c { color: var(--t4-muted) !important; }
.t4-appbanner__cta { color: var(--t4-blue-d) !important; }
.t4-appbanner:hover .t4-appbanner__cta { color: var(--t4-blue); }

/* =========================================================================
   Spacing polish — inner pages already get the hero band as their header, so
   the extra top padding + Botiga's redundant page-title stacked too much empty
   space under the band. Tighten it to a consistent ~32px.
   ========================================================================= */
/* Custom templates (about/contact): first section carried a full --t4-section-y
   top pad (~64px) ON TOP of the 32px band gap. */
.t4-has-hero .site-main > section:first-child,
.t4-has-hero .site-main > .t4-wrap:first-child { padding-top: 12px !important; }
/* Default page template (FAQ, wishlist, warranty, terms, service-support):
   Botiga prints a (visually-hidden) page-title header that still reserves space
   — the band already shows the title, so collapse it. */
.t4-has-hero.page .entry-header { display: none; }
/* Blog archive: band already shows "Blog" — drop the duplicate large archive
   title (.page-header). NOT .entry-header: that holds each post's own title. */
.t4-has-hero.blog .page-header { display: none; }
/* Contact's leading <h1> carried a 60px heading-rhythm top margin under the band. */
.t4-contact__head h1 { margin-top: 0; }

/* Shop: .t4-shop is a CSS grid sitting inside Bootstrap's flex .row, so it shrank
   to its content width and left ~250px empty on the right. Force it to fill. */
.t4-shop { width: 100%; }
/* Single product: Botiga gives the content only a 15px Bootstrap gutter — much
   tighter than the rest of the site (--t4-gutter ~43px), so the gallery + tabs
   hugged both edges. Align the gutter with the header / band / footer. */
.single-product #primary.site-main,
.single-product .site-main {
	padding-left: var(--t4-gutter) !important;
	padding-right: var(--t4-gutter) !important;
}
/* Gallery + summary sit in a flex row inside `.product-gallery-summary` (Botiga's
   wrapper — NOT div.product). That wrapper wraps, so a tall buy-box (e.g. the
   price-on-request quote block) whose min-content can't fit beside the 460px
   gallery dropped the WHOLE summary — title, price, CTAs — below the image.
   Force a no-wrap row and let the summary shrink (min-width:0) so it always sits
   to the right and fills the remaining width. Desktop only — mobile still stacks. */
@media (min-width: 1025px) {
	.single-product .product-gallery-summary { flex-wrap: nowrap; align-items: flex-start; gap: 48px; }
	.single-product .product-gallery-summary .woocommerce-product-gallery { flex: 0 0 460px; width: 460px; max-width: 460px; margin-right: 0; }
	.single-product .product-gallery-summary .summary { flex: 1 1 auto; min-width: 0; max-width: none !important; width: auto !important; }
}

/* =========================================================================
   Order-received (thank-you) page — confirmation + continue-shopping panel
   ========================================================================= */
/* Lift the default plain "Thank you. Your order has been received." line into a
   proper success banner. */
.woocommerce-order > .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-thankyou-order-received {
	font-family: var(--t4-display); font-weight: 800; font-size: 1.5rem; color: var(--t4-ink);
	background: linear-gradient(180deg, rgba(52,168,83,.10), rgba(52,168,83,.04));
	border: 1px solid rgba(52,168,83,.28); border-left: 4px solid var(--t4-green);
	border-radius: var(--t4-radius); padding: 22px 26px; margin: 0 0 28px;
}
.woocommerce-order ul.woocommerce-order-overview {
	border: 1px solid var(--t4-line); border-radius: var(--t4-radius-lg);
	padding: 22px 26px; background: #fff; box-shadow: 0 10px 26px -18px rgba(60,64,67,.22);
}

.t4-ty { margin-top: 36px; display: grid; gap: 36px; }
@media (min-width: 992px) {
	.t4-ty { grid-template-columns: 1fr 1.35fr; align-items: start; gap: 48px; }
}
.t4-ty__h { font-family: var(--t4-display); font-weight: 800; font-size: 1.3rem; color: var(--t4-ink); margin: 0 0 18px; }
.t4-ty__next {
	background: var(--t4-glass-bg); -webkit-backdrop-filter: var(--t4-blur); backdrop-filter: var(--t4-blur);
	border: var(--t4-glass-border); border-radius: var(--t4-radius-lg); padding: 26px 28px;
	box-shadow: 0 18px 40px -26px rgba(60,64,67,.3);
}
.t4-ty__steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.t4-ty__steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--t4-body); font-size: .96rem; line-height: 1.5; }
.t4-ty__steps strong { color: var(--t4-ink); font-family: var(--t4-display); font-weight: 700; }
.t4-ty__num {
	flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
	align-items: center; justify-content: center; font-family: var(--t4-display); font-weight: 800;
	font-size: .95rem; color: #fff; background: var(--t4-blue-d); box-shadow: 0 6px 14px -6px rgba(26,115,232,.6);
}
.t4-ty__steps li:nth-child(2) .t4-ty__num { background: var(--t4-green-d); box-shadow: 0 6px 14px -6px rgba(24,128,56,.55); }
.t4-ty__steps li:nth-child(3) .t4-ty__num { background: var(--t4-red-g); box-shadow: 0 6px 14px -6px rgba(234,67,53,.5); }
.t4-ty__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.t4-cats--ty { margin: 0; }

/* =========================================================================
   Client QA round (ClickUp "T4 pump motor", 2026-06-29)
   ========================================================================= */

/* #10 — drop the redundant header magnifier icon; the full search bar below it
   (.t4-search) is the single search affordance. */
.header-search.header-item,
.bhfb-header .header-search { display: none !important; }

/* #6 — search-row "Need a quote?" now links to contact (no repeated number). */
.t4-shipnote a { color: var(--t4-blue-d); }
.t4-shipnote a strong { color: var(--t4-blue-d); }
.t4-shipnote a:hover strong { text-decoration: underline; }

/* #1 / #11 / #12 / #15 — give both the search "All Categories" select and the
   shop "Default sorting" select one consistent, padded look with a custom chevron
   (the old chevron sat on top of the text, and the controls looked unstyled). */
.t4-search__cat,
.woocommerce-ordering select.orderby {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 12px;
	padding-right: 38px !important;
	cursor: pointer;
}
/* keep the search select's own surface/border, just add breathing room + chevron */
.t4-search__cat { padding-left: 16px; }
.woocommerce-ordering select.orderby {
	border: 1px solid var(--t4-line); border-radius: var(--t4-radius);
	background-color: #fff; color: var(--t4-ink);
	font-family: var(--t4-body-font); font-size: .92rem; padding: 11px 38px 11px 16px;
	min-width: 210px;
}
.woocommerce-ordering select.orderby:focus { outline: none; border-color: var(--t4-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }

/* #3 — footer alignment: keep the WhatsApp icon next to its number instead of
   shoving it to the far column edge, and align the bottom row to the top grid. */
.t4-footer__contact li.t4-footer__phone { gap: 8px; }
.t4-footer__wa { margin-left: 6px; }
@media (min-width: 993px) {
	.t4-footer__sub { grid-template-columns: 1.4fr 1fr 2fr; }
}

/* #5 — blog: title in the display font, content left-aligned (was all one font,
   centred). Scoped to the blog/post archive, not WooCommerce. */
.blog .entry-title,
.archive:not(.woocommerce-page) .entry-title,
.search-results .entry-title {
	font-family: var(--t4-display) !important; font-weight: 800; letter-spacing: -.01em;
	text-align: left;
}
.blog .hentry, .blog .entry-header, .blog .entry-content, .blog .entry-summary, .blog .post-meta,
.archive:not(.woocommerce-page) .hentry,
.archive:not(.woocommerce-page) .entry-header,
.archive:not(.woocommerce-page) .entry-content,
.archive:not(.woocommerce-page) .entry-summary,
.archive:not(.woocommerce-page) .post-meta {
	text-align: left;
}
.blog .entry-content, .archive:not(.woocommerce-page) .entry-content { font-family: var(--t4-body-font); color: var(--t4-body); }

/* #13 — constrain the My Account login form; inputs were stretching full width. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	max-width: 460px; border: 1px solid var(--t4-line); border-radius: var(--t4-radius-lg);
	padding: 26px 28px; background: #fff;
}
.woocommerce-account .woocommerce form.login .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce form.register .woocommerce-form-row input.input-text { width: 100%; }

/* Default-template static pages (Service & Support, Warranty, Terms, FAQ) render
   raw .entry-content with only Botiga's 15px column gutter, so the copy hugged the
   left edge and ran full-bleed across the page. Wrap it to the site container
   (same as .t4-wrap, used by the hero band + custom templates) and cap the line
   length for readability — keeping the left edge aligned with the page title.
   The custom-template pages (About, Contact) don't use .entry-content, so they're
   untouched. (Client QA: Service & Support margin issue.) */
.t4-fullwidth .site-main .entry-content {
	max-width: 1520px; margin: 0 auto; padding: 0 var(--t4-gutter);
}
.t4-fullwidth .site-main .entry-content > * { max-width: 900px; }
.t4-fullwidth .site-main .entry-content > h2 { margin-top: 1.6em; }

/* WooCommerce account / cart / checkout / order-received pages render their
   content with only Botiga's 15px column gutter, so the order-summary banner,
   tables and our thank-you panel hugged the page edges (much tighter than the
   site's ~40px gutter used by the header/footer). Center the content in a
   contained width with the site gutter so it lines up with the rest of the site.
   (Client QA: order summary margin.) */
.woocommerce-order-received .site-main .entry-content,
.woocommerce-checkout .site-main .entry-content,
.woocommerce-cart .site-main .entry-content,
.woocommerce-account .site-main .entry-content {
	max-width: 1280px; margin: 0 auto; padding: 0 var(--t4-gutter);
}

/* =========================================================================
   Real Zambia stock display (connector mirrors Odoo on-hand into _t4_odoo_qty).
   In-stock items get a green pill/line; the rest keep the dark "Available on
   order" pill and the green PDP dot stays for the quote-first buy-box.
   ========================================================================= */
.t4-card-stock--in {
	background: var(--t4-green);
	color: #fff;
}
/* WooCommerce availability text on the PDP: colour the in-stock state green,
   the backorder state amber so the two read differently at a glance. */
.woocommerce div.product .stock.in-stock,
.single-product p.stock.in-stock {
	color: var(--t4-green); font-weight: 700;
}
.woocommerce div.product .stock.available-on-backorder,
.single-product p.stock.available-on-backorder {
	color: #b06a00; font-weight: 600;
}
/* Price-on-request buy-box line: in-stock dot already green (matches --in). */
.t4-pdp-avail--in .t4-pdp-avail__dot { background: var(--t4-green); box-shadow: 0 0 0 4px rgba(52,168,83,.2); }

/* =========================================================================
   2026-07 meeting — #2 sticky search bar + #4 category filter accordion
   ========================================================================= */

/* #2 — the search row sticks to the top on scroll. Transparent at rest (shows
   the hero wash); JS adds .is-stuck when it reaches the top → solid white. */
.t4-searchrow {
	position: sticky; top: 0; z-index: 200;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.t4-searchrow.is-stuck {
	background: #fff;
	box-shadow: 0 6px 22px -14px rgba(60,64,67,.55);
}
/* Keep the sticky bar clear of the WP admin bar for logged-in users (public
   visitors have no admin bar, so top:0 is correct for them). */
.admin-bar .t4-searchrow { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .t4-searchrow { top: 46px; } }

/* #4 — category filter: main categories collapsed; a chevron toggles the
   nested sub-categories open (was: all sub-categories always expanded). */
.t4-cattree__item--has-kids { position: relative; }
.t4-cattree__item--has-kids > label { padding-right: 30px; }
.t4-cattree__toggle {
	position: absolute; top: 3px; right: 0; width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: 0; background: transparent; color: var(--t4-muted); cursor: pointer;
	border-radius: 6px;
}
.t4-cattree__toggle:hover { color: var(--t4-red); background: var(--t4-surface-2); }
.t4-cattree__toggle .t4-ic { width: 16px; height: 16px; transition: transform .18s ease; }
.t4-cattree__item.is-open > .t4-cattree__toggle .t4-ic { transform: rotate(180deg); }
/* Collapsed by default; open only when the item carries .is-open. */
.t4-filter ul.t4-cattree__kids { display: none; }
.t4-cattree__item.is-open > ul.t4-cattree__kids { display: block; }

/* #9 — "Shop by industry" tiles: 5 across on desktop (reuses .t4-cat styling). */
.t4-inds { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .t4-inds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .t4-inds { grid-template-columns: repeat(2, 1fr); } }

/* 2026-07-05 — "Shop by category" reuses the app-banner card style (icon + title +
   tagline·count + "Shop now →"), 9 cards = 3x3. Tune for title-case, longer names. */
.t4-catgrid .t4-appbanner__t { text-transform: none; font-size: 1.08rem; line-height: 1.25; }
.t4-catgrid .t4-appbanner__ic .t4-ic { width: 46px; height: 46px; }
/* 9 cards: 2-up on tablet (base .t4-appbanners goes 1-col <=1024), 1-up on phones. */
@media (max-width: 1024px) { .t4-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .t4-catgrid { grid-template-columns: 1fr; } }

/* #3 — "Choose the right-fit motor" info card on pump product pages.
   Golden "highlight" callout with a warm liquid gradient (amber/honey blobs
   drifting over a light-gold base — same liquid language as the promo band,
   in gold). Dark text keeps it legible on the light-gold ground. */
.t4-motorcard {
	position: relative; overflow: hidden;
	margin: 18px 0 0; padding: 16px 18px;
	border: 1px solid rgba(240,180,0,.45); border-left: 3px solid #F5A623;
	border-radius: 12px;
	background:
		radial-gradient(70% 120% at 12% 12%, rgba(255,213,79,.70), transparent 60%),
		radial-gradient(60% 100% at 90% 88%, rgba(245,166,35,.50), transparent 62%),
		radial-gradient(50% 85% at 76% 14%, rgba(255,236,150,.75), transparent 60%),
		linear-gradient(120deg, #FFF7E0 0%, #FFEFC2 50%, #FFE6A6 100%);
	background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
	background-position: 0% 50%, 100% 50%, 50% 0%, 0 0;
	animation: t4-liquid-gold 16s ease-in-out infinite;
	box-shadow: 0 10px 26px -18px rgba(180,120,0,.55);
}
@keyframes t4-liquid-gold {
	0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%, 0 0; }
	50%      { background-position: 100% 50%, 0% 60%, 40% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .t4-motorcard { animation: none; } }
.t4-motorcard__head { display: flex; align-items: center; gap: 8px; font-family: var(--t4-display); font-weight: 800; color: #4a3706; font-size: 1rem; }
.t4-motorcard__head .t4-ic { width: 20px; height: 20px; color: #b57e00; flex: 0 0 20px; }
.t4-motorcard p { margin: 8px 0 12px; font-size: .9rem; line-height: 1.5; color: #5c4a1c; }
.t4-motorcard__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.t4-motorcard__btn {
	padding: 9px 18px !important; font-size: .85rem !important;
	background: linear-gradient(135deg, #F6B825, #E8940E) !important;
	border-color: #d98a0c !important; color: #3a2a04 !important;
}
.t4-motorcard__btn:hover { background: linear-gradient(135deg, #F0AC16, #D9860A) !important; }
.t4-motorcard__ask { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t4-display); font-weight: 700; font-size: .85rem; color: #a56a00; }
.t4-motorcard__ask .t4-ic { width: 16px; height: 16px; }
.t4-motorcard__ask:hover { text-decoration: underline; }

/* =========================================================================
   Header brand logo (injected via get_custom_logo). Show the transparent
   lockup; hide the now-redundant text site-title in the header.
   ========================================================================= */
.site-branding .site-title,
.site-branding .site-description { display: none; }
/* Full lockup incl. the "Land · Nature · Resources" tagline. Sized to fill the
   header's vertical space so the wordmark + tagline read clearly (the image is
   726×304 natural, so it stays crisp at this size). */
.t4-logo, img.custom-logo.t4-logo { height: 80px; width: auto; display: block; }
.t4-logo-link { display: inline-flex; align-items: center; }
@media (max-width: 782px) { .t4-logo, img.custom-logo.t4-logo { height: 56px; } }

/* =========================================================================
   Featured showcase — client A/B preview (?home=bands / ?home=bento).
   Both variants render; only the selected one shows, and nothing shows for
   normal visitors until a winner is chosen.
   ========================================================================= */
.t4-showA, .t4-showB { display: none; }
body.t4-home-bands .t4-showA { display: block; }
body.t4-home-bento .t4-showB { display: block; }
.t4-showhead { text-align: center; margin-bottom: clamp(20px, 3vw, 36px); }

/* --- Design A: spotlight bands --- */
.t4-band { display: block; width: 100%; text-align: center; overflow: hidden; }
/* Two promo creatives side by side (stack on small screens). */
.t4-bandrow { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.t4-band--blue  { background: #eef4fe; padding: clamp(22px, 3.5vw, 52px) 16px; display: flex; align-items: center; justify-content: center; }
.t4-band--pink  { background: #fdf1f3; padding: clamp(22px, 3.5vw, 52px) 16px; display: flex; align-items: center; justify-content: center; }
.t4-band--blue img, .t4-band--pink img {
	display: inline-block; width: auto; max-width: 100%; max-height: 560px; height: auto;
	transition: transform .35s ease;
}
.t4-band--blue:hover img, .t4-band--pink:hover img { transform: translateY(-4px) scale(1.008); }
@media (max-width: 760px) { .t4-bandrow { grid-template-columns: 1fr; } }
/* Full-range photo band — breathing room above and below. */
.t4-band--about { position: relative; padding: 0; background: #f4f7fb; margin: clamp(30px, 5vw, 68px) 0; }
.t4-band--about img { display: block; width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.t4-band__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: 44px clamp(20px, 6vw, 80px) 26px; text-align: left; color: #fff;
	background: linear-gradient(transparent, rgba(20,22,24,.62));
}
.t4-band__cap b { font-family: var(--t4-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.9rem); }
.t4-band__cap span { font-size: clamp(.85rem, 1.4vw, 1rem); opacity: .92; }

/* --- Design B: bento tile grid --- */
.t4-bento { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.t4-bento__tile {
	position: relative; display: block; border-radius: 22px; overflow: hidden; background: #fff;
	box-shadow: var(--t4-shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.t4-bento__tile img { display: block; width: 100%; height: auto; }
.t4-bento__tile:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -22px rgba(60,64,67,.4); }
.t4-bento__tile--wide { grid-column: 1 / -1; }
.t4-bento__tile--wide img { height: clamp(200px, 26vw, 360px); object-fit: cover; }
.t4-bento__cap, .t4-about__rangeoverlay {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: 40px clamp(20px, 4vw, 40px) 24px; text-align: left; color: #fff;
	background: linear-gradient(transparent, rgba(20,22,24,.62));
}
.t4-bento__cap b, .t4-about__rangeoverlay b { font-family: var(--t4-display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.7rem); }
.t4-bento__cap span, .t4-about__rangeoverlay span { font-size: clamp(.82rem, 1.3vw, .95rem); opacity: .92; }
/* The About artwork keeps its natural (very wide) aspect instead of being
   cover-cropped like the bento tile, so the same caption box covers far more of
   it — and the bottom of that artwork is mostly white, which turned the shared
   gradient into a grey wash over the pumps. Start the gradient lower and finish
   it darker so the label reads as a plate along the bottom edge. */
.t4-about__rangeoverlay {
	padding: 30px clamp(18px, 3vw, 34px) 18px;
	background: linear-gradient(transparent 30%, rgba(20,22,24,.55) 64%, rgba(20,22,24,.84));
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* On phones the artwork is only ~120px tall, so an overlay of this size smothers
   it. Drop the label out of the overlay and into a solid strip below the image;
   the figure's overflow:hidden keeps the bottom corners rounded. */
@media (max-width: 600px) {
	.t4-about__rangeoverlay {
		position: static; padding: 11px 15px 13px;
		background: rgba(20,22,24,.92); text-shadow: none;
	}
}
@media (max-width: 760px) {
	.t4-bento { grid-template-columns: 1fr; }
}

/* Three product banners under the bento tiles. Each artwork is a finished card
   with its own heading and button, and the three come at different aspect
   ratios (0.56 / 0.54 / 0.52). Forcing a common shape with `cover` would crop
   the headings away, so the tiles fix a 0.54 box -- the middle of the three --
   and `contain` the artwork. The spread is small enough that the leftover space
   is only a few percent per tile, and the tile is white like each artwork's own
   edge, so the letterboxing has no visible seam. */
.t4-trio {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(16px, 2.4vw, 28px);
}
.t4-trio__tile {
	display: block; background: #fff; border-radius: var(--t4-radius-lg);
	overflow: hidden; box-shadow: var(--t4-shadow);
	transition: transform .3s ease, box-shadow .3s ease;
}
.t4-trio__tile img { display: block; width: 100%; aspect-ratio: 27 / 50; height: auto; object-fit: contain; }
.t4-trio__tile:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -22px rgba(60,64,67,.4); }
@media (max-width: 760px) {
	.t4-trio { grid-template-columns: 1fr; }
}

/* --- Design B (live): the three featured images in a horizontal row that
   auto-rotates one step left every 3s (assets/js/t4-slider.js). All three visible
   at once; contain-fit on tinted panels so no promo text is cropped. JS clones the
   row for a seamless wrap; with JS off it degrades to a static row of three. */
.t4-rowslider__viewport { overflow: hidden; }
.t4-rowslider__track { display: flex; flex-wrap: nowrap; will-change: transform; }
.t4-rowslide { flex: 0 0 33.3333%; max-width: 33.3333%; box-sizing: border-box; padding: 0 clamp(6px, 1vw, 12px); }
.t4-rowslide__link {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: clamp(180px, 24vw, 340px); padding: clamp(12px, 2vw, 26px); box-sizing: border-box;
	border-radius: 18px; overflow: hidden; box-shadow: var(--t4-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.t4-rowslide__link:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -22px rgba(60, 64, 67, .4); }
.t4-rowslide--blue  .t4-rowslide__link { background: #eef4fe; }
.t4-rowslide--pink  .t4-rowslide__link { background: #fdf1f3; }
.t4-rowslide--about .t4-rowslide__link { background: #f4f7fb; }
.t4-rowslide__link img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Caption overlay on the "full range" tile. */
.t4-rowslide__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 2px;
	padding: 34px clamp(16px, 3vw, 30px) 18px; text-align: left; color: #fff;
	background: linear-gradient(transparent, rgba(20, 22, 24, .62));
}
.t4-rowslide__cap b { font-family: var(--t4-display); font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.35rem); }
.t4-rowslide__cap span { font-size: clamp(.72rem, 1vw, .9rem); opacity: .92; }
.t4-rowslide__link:focus-visible { outline: 3px solid rgba(26, 115, 232, .55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.t4-rowslider__track { transition: none !important; }
}

/* =========================================================================
   9. Latest-from-the-blog feed (homepage) — three post cards.
   ========================================================================= */
.t4-blogfeed { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 900px) { .t4-blogfeed { grid-template-columns: 1fr; } }
.t4-postcard {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--t4-line); border-radius: 18px; overflow: hidden;
	box-shadow: var(--t4-shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.t4-postcard:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -22px rgba(60, 64, 67, .4); }
.t4-postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef4fe; }
.t4-postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.t4-postcard:hover .t4-postcard__media img { transform: scale(1.04); }
.t4-postcard__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.t4-postcard__date { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t4-red); }
.t4-postcard__title { font-family: var(--t4-display); font-weight: 800; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.3; color: var(--t4-ink); }
.t4-postcard__excerpt { font-size: .92rem; line-height: 1.55; color: #5f6368; }
.t4-postcard__more { margin-top: 4px; font-weight: 700; font-size: .88rem; color: var(--t4-red); }
.t4-blogfeed__all { text-align: center; margin-top: clamp(24px, 3vw, 36px); }

/* --- Design C: Pixel-hero style — brand wordmark flanking each image --- */
.t4-showC { display: none; }
body.t4-home-split .t4-showC { display: block; }
.t4-splitband {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	width: 100%; overflow: hidden;
}
.t4-splitband--blue { background: #eef4fe; }
.t4-splitband--pink { background: #fdf1f3; }
.t4-splitband__img { display: flex; justify-content: center; padding: clamp(20px, 3vw, 48px) 8px; }
.t4-splitband__img img {
	display: block; width: auto; max-width: 100%; max-height: 560px; height: auto;
	transition: transform .35s ease;
}
.t4-splitband:hover .t4-splitband__img img { transform: translateY(-4px) scale(1.008); }
.t4-splitband__word {
	font-family: var(--t4-display); font-weight: 800; line-height: .9; text-align: center;
	font-size: clamp(2.2rem, 7vw, 6.5rem); letter-spacing: -.02em; user-select: none;
}
.t4-splitband--blue .t4-splitband__word { color: #86a3d4; }
.t4-splitband--pink .t4-splitband__word { color: #d7a0aa; }
@media (max-width: 820px) {
	.t4-splitband { grid-template-columns: 1fr; }
	.t4-splitband__word { display: none; } /* image carries the branding on phones */
}

/* =========================================================================
   8. Application / Products landing pages  (template: t4-landing.php)
   Hero (title + intro) + a grid of photo tiles linking to product categories.
   ========================================================================= */
.t4-landing__introwrap { padding-top: clamp(18px, 3vw, 30px); padding-bottom: 0; text-align: center; }
.t4-landing__intro { max-width: 840px; margin: 0 auto; color: #5f6368; font-size: clamp(.98rem, 1.4vw, 1.12rem); line-height: 1.65; }

/* Shared wide banner + full article prose. */
.t4-landing__bannerwrap { padding-top: clamp(14px, 2.4vw, 26px); }
.t4-landing__banner { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--t4-shadow); }
.t4-landing__article { padding-top: clamp(20px, 3vw, 34px); padding-bottom: 0; }
.t4-landing__article .t4-wrap { max-width: 920px; }
.t4-landing__article p { color: #3c4043; font-size: clamp(.98rem, 1.35vw, 1.08rem); line-height: 1.7; margin: 0 0 1.1em; }
.t4-landing__article h2, .t4-landing__article h3 { font-family: var(--t4-display); color: var(--t4-ink); font-weight: 800; line-height: 1.25; margin: 1.6em 0 .5em; }
.t4-landing__article h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.t4-landing__article h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.t4-landing__article ul, .t4-landing__article ol { margin: 0 0 1.1em 1.25em; color: #3c4043; line-height: 1.7; }
.t4-landing__article li { margin-bottom: .4em; }
.t4-landing__article > .t4-wrap > :first-child { margin-top: 0; }

.t4-landing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 1000px) { .t4-landing__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .t4-landing__grid { grid-template-columns: repeat(2, 1fr); } }

.t4-landtile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--t4-line); border-radius: 18px; overflow: hidden; box-shadow: var(--t4-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.t4-landtile:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -22px rgba(60, 64, 67, .4); }
.t4-landtile__media { display: flex; align-items: center; justify-content: center; height: clamp(150px, 18vw, 210px); padding: 18px; background: linear-gradient(180deg, #f6f9fe, #eef4fe); }
.t4-landtile__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.t4-landtile__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; font-family: var(--t4-display); font-weight: 700; color: var(--t4-ink); font-size: clamp(.9rem, 1.3vw, 1rem); }
.t4-landtile__label .t4-ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--t4-red); transition: transform .25s ease; }
.t4-landtile:hover .t4-landtile__label .t4-ic { transform: translateX(4px); }
.t4-landing__body { max-width: 900px; margin: 0 auto; }

/* Keep the primary desktop nav on a single row (no wrapping) even with dropdowns. */
@media (min-width: 993px) {
	.main-navigation #primary-menu { display: flex; flex-wrap: nowrap; align-items: center; }
	.main-navigation #primary-menu > li { white-space: nowrap; }
	/* Shift the centred logo ~1in to the right so it clears the nav (…Contact). */
	.site-branding { transform: translateX(0.5in); }

	/* --- Dropdown polish (Application / Products submenus) --- */
	/* Chevron: subtle inline caret, not Botiga's bordered box. */
	.main-navigation .dropdown-symbol {
		display: inline-flex; align-items: center; justify-content: center;
		width: 15px; height: 15px; margin-left: 3px; padding: 0;
		border: 0 !important; background: none !important; box-shadow: none !important;
		border-radius: 0; vertical-align: middle; cursor: pointer; color: currentColor;
	}
	.main-navigation .dropdown-symbol:focus,
	.main-navigation .dropdown-symbol:focus-visible { outline: none; box-shadow: none !important; }
	.main-navigation .dropdown-symbol .ws-svg-icon { width: 10px; height: 10px; }
	.main-navigation .dropdown-symbol svg { width: 10px; height: 10px; display: block; fill: currentColor; }

	/* Dropdown panel: rounded, shadowed, padded. */
	.main-navigation .sub-menu.botiga-dropdown-ul {
		min-width: 260px; max-height: 82vh; overflow-y: auto;
		padding: 12px; margin-top: 8px;
		background: #fff; border: 1px solid var(--t4-line); border-radius: 14px;
		box-shadow: 0 24px 60px -20px rgba(20, 30, 50, .28), 0 6px 16px -10px rgba(20, 30, 50, .18);
	}
	.main-navigation .sub-menu.botiga-dropdown-ul li { margin: 0; border: 0; }
	.main-navigation .sub-menu.botiga-dropdown-ul li a {
		display: block; padding: 12px 20px; border-radius: 10px;
		font-family: var(--t4-display); font-weight: 600; font-size: 1.02rem; line-height: 1.35;
		color: var(--t4-ink); white-space: nowrap;
		transition: background .15s ease, color .15s ease;
	}
	.main-navigation .sub-menu.botiga-dropdown-ul li a:hover,
	.main-navigation .sub-menu.botiga-dropdown-ul li a:focus { background: #eef4fe; color: var(--t4-red); }

	/* Products has 15 items — lay its dropdown out in two columns. */
	#menu-item-3594 > .sub-menu.botiga-dropdown-ul { min-width: 560px; column-count: 2; column-gap: 26px; }
	#menu-item-3594 > .sub-menu.botiga-dropdown-ul > li { break-inside: avoid; }
}

/* =========================================================================
   Mobile header row — logo sizing + clearance from the icon cluster
   =========================================================================
   Botiga lays this row out as a rigid `grid-template-columns: repeat(3, 1fr)`
   with `gap: 0`. Column 1 holds only the search icon, which is `display:none`
   on mobile — so a full third of a phone header (116px at 390px) was reserved
   for nothing, while the logo was starved in the middle third.

   Two visible symptoms fell out of that:
     1. The logo's track ended at exactly the x where the account icon began,
        so they touched with 0px between them.
     2. The track was narrower than the lockup needs, so the global
        `img { max-width: 100% }` clamped the logo's WIDTH while `height` was
        hard-locked at 56px — squashing 726x304 from 2.388:1 to 2.07:1 (2.07
        at 390px, 1.80 at 360px, 1.45 at 320px). That distortion is what read
        as "not responsive".

   Fix: size the outer tracks to their content so the empty search column
   collapses and the logo gets the room, and constrain the logo by max-height
   with both axes `auto` so it scales proportionally under either limit and
   can never distort.

   Scoped to `.bhfb-mobile`, which Botiga itself only renders below 1025px, so
   there is no breakpoint of our own to drift out of sync with the parent's.
   ========================================================================= */
.bhfb-mobile .bhfb-main_header_row .bhfb-row.bhfb-cols-3 {
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
}
.bhfb-mobile img.custom-logo.t4-logo,
.bhfb-mobile .t4-logo {
	height: auto;
	width: auto;
	max-height: 48px;
	max-width: 100%;
}

/* =========================================================================
   Desktop header row — nav / logo clearance
   =========================================================================
   Same root cause as the mobile row above: Botiga's rigid
   `grid-template-columns: repeat(3, 1fr)`. The primary nav is forced nowrap
   (see the min-width:993px block above), so with five top-level items it needs
   ~545px — more than a third of any laptop-width viewport. Grid overflow does
   not push siblings aside, so the nav spilled into the centred logo's track and
   "Contact" ended up underneath the wordmark.

   This was NOT limited to one screen size: measured against live, every width
   from 1025px (-176px) through ~1400px overlapped, including the very common
   1280x800 and 1366x768 laptops. It only looked clean at >=1440px, which is why
   it kept passing review on wider development screens.

   The previous mitigation was a fixed `transform: translateX(0.5in)` nudge on
   .site-branding — 48px, which is only ever enough at the widest end, and which
   also applied to the MOBILE header between 993-1024px since .site-branding
   exists in both. Neutralised for both headers below.

   Fix: size the outer tracks to their content so the nav takes exactly the width
   it needs and the logo centres in whatever remains. Verified clear from 1025px
   to 2560px. Scoped to .bhfb-desktop, which Botiga only renders at >=1025px.
   ========================================================================= */
.bhfb-desktop .bhfb-main_header_row .bhfb-row.bhfb-cols-3 {
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
}
.bhfb-header .site-branding { transform: none; }

/* =========================================================================
   Shop sidebar — scrollable Category list
   =========================================================================
   The category tree renders all 17 top-level terms uncapped (580px tall), which
   pushed the whole .t4-filters form to 1115px — taller than a 900px laptop
   viewport, so its `position: sticky` could never actually hold: Brand, Price
   and "Apply filters" all sat below the fold.

   Cap the tree and let it scroll on its own. Height is viewport-relative so it
   adapts (≈304px at 800px tall, ≈410px at 1080px) rather than being pinned to
   one screen size; `overscroll-behavior: contain` stops the page from scrolling
   on behind it once the list hits an end.

   Scrollbar: styled via ::-webkit-scrollbar, which is what makes Chrome/Safari
   render a persistent, space-occupying ("attached") bar instead of the macOS
   overlay bar that fades out. NB: setting the standard `scrollbar-width` here
   too would make Chrome IGNORE these pseudo-elements and revert to the overlay
   bar — so it's confined to the @supports block below, for Firefox only.

   Scoped with `.t4-filter` to beat the generic `.t4-filter ul { padding: 0 }`,
   matching the convention used by the .t4-cattree rules above.
   ========================================================================= */
.t4-filter ul.t4-cattree {
	max-height: clamp(220px, 38vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 10px;
}
.t4-filter ul.t4-cattree::-webkit-scrollbar { width: 8px; }
.t4-filter ul.t4-cattree::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 999px; }
.t4-filter ul.t4-cattree::-webkit-scrollbar-thumb { background: #c4c9d0; border-radius: 999px; }
.t4-filter ul.t4-cattree::-webkit-scrollbar-thumb:hover { background: #a7aeb6; }

/* Firefox has no ::-webkit-scrollbar; give it the standard properties instead. */
@supports not selector(::-webkit-scrollbar) {
	.t4-filter ul.t4-cattree { scrollbar-width: thin; scrollbar-color: #c4c9d0 #f1f3f5; }
}

[data-scheme="dark"] .t4-filter ul.t4-cattree::-webkit-scrollbar-track { background: rgba(255,255,255,.06); }
[data-scheme="dark"] .t4-filter ul.t4-cattree::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }

/* =========================================================================
   Category tiles — real product shot in place of the line icon
   =========================================================================
   The "Products by category" tiles carried an abstract line icon. Client asked
   for an actual product image instead. The source is t4_landing_cat_image()
   (inc/t4-landing.php), which returns a representative in-category product
   photo at WordPress's existing `medium` size — an already-generated file, so
   nothing new is written to uploads.

   `medium` is the uncropped 300x300 size deliberately: the cropped sizes
   (thumbnail / woocommerce_thumbnail, both centre-crop to square) would slice
   the middle out of the tall, narrow borehole pump shots. Uncropped source plus
   object-fit:contain keeps the whole product visible in a square frame.

   The white plate behind it keeps product photos legible over the tile's
   coloured wash, and matches the card treatment used elsewhere.
   ========================================================================= */
.t4-appbanner__ic--img { opacity: 1; line-height: 0; }
.t4-appbanner__img {
	display: block;
	width: 56px; height: 56px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--t4-line);
	border-radius: 12px;
	padding: 5px;
	box-shadow: 0 8px 18px -12px rgba(60, 64, 67, .55);
	transition: transform .25s ease;
}
.t4-appbanner:hover .t4-appbanner__img { transform: translateY(-2px) scale(1.04); }
.t4-catgrid .t4-appbanner__img { width: 52px; height: 52px; }

/* Keep the title clear of the image on narrow tiles. */
@media (max-width: 560px) {
	.t4-catgrid .t4-appbanner__img { width: 46px; height: 46px; }
}

/* =========================================================================
   "Products by category" — numbered product cards (approved comp)
   =========================================================================
   Replaces the small glass tile + corner icon with a wide card: faded index
   number, title, tagline, product count, outlined CTA, and a large product
   shot bleeding off the right edge behind a diagonal accent.

   Each card gets a --c tone from a six-colour rotation (t4-ccard--c1..c6 in
   front-page.php) and every accent — stripe, count dot, CTA border, number
   tint — is derived from that single custom property, so a card's colour is
   set in exactly one place.
   ========================================================================= */
.t4-catsec__h {
	font-family: var(--t4-display); font-weight: 800;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1;
	letter-spacing: -.02em; color: var(--t4-ink); margin: 0;
}
.t4-catsec__h span { color: var(--t4-blue); }
.t4-catsec__sub { color: var(--t4-muted); font-size: 1.02rem; margin: 10px 0 0; }
.t4-catsec__rule {
	display: block; width: 58px; height: 4px; border-radius: 999px;
	background: var(--t4-blue); margin: 18px 0 clamp(22px, 3vw, 34px);
}

.t4-ccards {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.7vw, 24px);
}

.t4-ccard {
	--c: #6091c3; --c-ink: #3f6f9f;
	position: relative; overflow: hidden; isolation: isolate;
	display: block; min-height: 168px;
	padding: 24px 26px 22px;
	border: 1px solid var(--t4-line);
	border-radius: 18px;
	background: linear-gradient(120deg, #fff 42%, color-mix(in srgb, var(--c) 7%, #fff) 100%);
	box-shadow: 0 10px 30px -22px rgba(60, 64, 67, .5);
	text-decoration: none;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.t4-ccard:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -28px rgba(60, 64, 67, .55);
	border-color: color-mix(in srgb, var(--c) 40%, var(--t4-line));
}

/* Soft diagonal wash behind the product shot (the hard accent line that
   used to sit on top of this was removed at the client's request). */
.t4-ccard::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(112deg, transparent 55%, color-mix(in srgb, var(--c) 11%, transparent) 55.5%, transparent 78%);
}

.t4-ccard__body { position: relative; z-index: 2; display: block; max-width: 55%; padding-right: 6px; }
.t4-ccard__t {
	display: block; font-family: var(--t4-display); font-weight: 800;
	font-size: 1.16rem; line-height: 1.2; color: var(--t4-ink);
}
.t4-ccard__tag { display: block; margin-top: 5px; font-size: .87rem; color: var(--t4-muted); }
.t4-ccard__count {
	display: flex; align-items: center; gap: 7px;
	margin-top: 9px; font-size: .84rem; font-weight: 600; color: var(--t4-body);
}
.t4-ccard__count::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--c-ink); flex: 0 0 7px;
}
.t4-ccard__cta {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
	font-family: var(--t4-display); font-weight: 700;
	font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--c-ink); background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--c-ink) 45%, #fff);
	border-radius: 999px; padding: 9px 17px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.t4-ccard__cta span { transition: transform .2s ease; }
.t4-ccard:hover .t4-ccard__cta { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.t4-ccard:hover .t4-ccard__cta span { transform: translateX(3px); }

/* Product shot, bleeding off the right edge. */
.t4-ccard__media {
	position: absolute; z-index: 1; right: 0; top: 0; bottom: 0;
	width: 42%; display: flex; align-items: center; justify-content: center;
	padding: 16px 10px 16px 0; pointer-events: none;
}
.t4-ccard__img {
	max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain;
	/* Source shots are photographed on a white/grey plate rather than cut out,
	   so they rendered as visible rectangles over the tinted card. `multiply`
	   drops the white away and leaves the product — the same treatment the
	   landing-page tiles already use (.t4-landtile__media img). */
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}
/* Icons bundled in assets/img/cats/ are already cut out on transparency, so they
   must NOT be multiplied: the blend exists only to knock a white photo plate
   out, and applied to a cut-out it darkens the product and erases anything
   genuinely white -- the uPVC pipes and the control panel would vanish. */
.t4-ccard__img[src*="/assets/img/cats/"] { mix-blend-mode: normal; }
.t4-ccard:hover .t4-ccard__img { transform: scale(1.05); }
.t4-ccard__media .t4-ic { width: 56px; height: 56px; color: var(--c-ink); opacity: .5; }

/* Three-tone rotation sampled straight from assets/img/logo.png: the blue gear
   (#6091c3, 9683px), the green gear (#00d300, 9658px) and the amber tagline dot
   (#b66600). The raw logo colours are decorative only — all three fail 4.5:1 on
   white (3.31 / 2.04 / 4.29), so --c-ink carries a darkened same-hue variant for
   anything bearing text: CTA label, its border, the hover fill and the count
   dot. Measured: 5.27 / 5.52 / 5.08 : 1. */
.t4-ccard--c1 { --c: #6091c3; --c-ink: #3f6f9f; }   /* logo blue  */
.t4-ccard--c2 { --c: #00d300; --c-ink: #0b7a0b; }   /* logo green */
.t4-ccard--c3 { --c: #b66600; --c-ink: #a55c00; }   /* logo amber */

@media (max-width: 1100px) { .t4-ccards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
	.t4-ccards { grid-template-columns: 1fr; }
	.t4-ccard { min-height: 150px; padding: 20px 22px; }
	.t4-ccard__body { max-width: 56%; }
	.t4-ccard__media { width: 40%; }
}

/* =========================================================================
   Header — logo on the left, ahead of the menu
   =========================================================================
   Botiga's DOM order for this row is nav (column-1), logo (column-2), icons
   (column-3). Rather than move markup inside the header builder, the columns
   are placed onto explicit grid areas so the logo renders first visually while
   the source order stays untouched.

   This replaces the earlier centred/stacked treatment. Centring the logo was
   only ever possible by stacking it onto its own row below 1560px, because the
   610px nav reaches past the viewport centre line on a laptop; putting the logo
   first removes that constraint completely, so one row now works at every
   width and the header goes back to a single 100px band.

   Track sizing is `auto auto 1fr`: the logo and nav take exactly what they
   need, and the icons are pushed to the far right by the remaining space.
   ========================================================================= */
.bhfb-desktop .bhfb-main_header_row .bhfb-row.bhfb-cols-3 {
	grid-auto-flow: row;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas: "logo nav icons";
	column-gap: clamp(20px, 2.4vw, 44px);
	align-items: center;
}
.bhfb-desktop .bhfb-main_header_row .bhfb-column-2 { grid-area: logo;  justify-content: flex-start; }
.bhfb-desktop .bhfb-main_header_row .bhfb-column-1 { grid-area: nav;   justify-content: flex-start; }
.bhfb-desktop .bhfb-main_header_row .bhfb-column-3 { grid-area: icons; justify-content: flex-end; }

/* Mobile: same order — logo left, icons right. Column-1 holds only the search
   icon, which is display:none here, so its track collapses to nothing. */
.bhfb-mobile .bhfb-main_header_row .bhfb-row.bhfb-cols-3 {
	grid-auto-flow: row;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo search icons";
	column-gap: 12px;
	align-items: center;
}
.bhfb-mobile .bhfb-main_header_row .bhfb-column-2 { grid-area: logo;   justify-content: flex-start; }
.bhfb-mobile .bhfb-main_header_row .bhfb-column-1 { grid-area: search; }
.bhfb-mobile .bhfb-main_header_row .bhfb-column-3 { grid-area: icons;  justify-content: flex-end; }

/* The centred layout needed the icon cluster squeezed to free up symmetric
   room; with the logo on the left there is space again, so Botiga's own
   spacing is left alone. */

/* =========================================================================
   Language switcher (GTranslate) in the utility top bar
   =========================================================================
   The plugin renders a bare <select> inside .gtranslate_wrapper, styled for a
   light page. The top bar is dark (--t4-dark), so it needs its own treatment
   to sit alongside the utility links rather than look bolted on.
   ========================================================================= */
.t4-topbar__lang { display: inline-flex; align-items: center; }
.t4-topbar__lang .gtranslate_wrapper { display: inline-flex; align-items: center; line-height: 0; }
.t4-topbar__lang select.gt_selector,
.t4-topbar__lang .gtranslate_wrapper select {
	appearance: none; -webkit-appearance: none;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	font-family: var(--t4-body-font);
	font-size: 12px; line-height: 1.2;
	/* Botiga styles every form control globally (a long `input[...], select, …`
	   rule) with a ~48px min-height. Inherited here it inflated the pill to 51px
	   and stretched the whole top bar to 67px, so both are reset explicitly. */
	min-height: 0; height: 28px;
	padding: 0 26px 0 12px;
	cursor: pointer;
	/* chevron drawn inline so no extra asset is requested */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cfd3d7' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	transition: background-color .18s ease, border-color .18s ease;
}
.t4-topbar__lang select.gt_selector:hover,
.t4-topbar__lang .gtranslate_wrapper select:hover {
	background-color: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .4);
}
/* The option list is drawn by the OS, so it needs readable colours of its own. */
.t4-topbar__lang select.gt_selector option,
.t4-topbar__lang .gtranslate_wrapper select option { color: #111; background: #fff; }

/* Google's injected toolbar shifts the whole page down; suppress it. */
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

@media (max-width: 600px) {
	.t4-topbar__lang select.gt_selector,
	.t4-topbar__lang .gtranslate_wrapper select { font-size: 11px; padding: 4px 22px 4px 10px; }
}

/* The switcher is one more item in an already-busy top bar. Without this it
   pushed the bar onto a second row between ~900px and ~1100px (36px -> 80px);
   below 900px the bar already wrapped on its own, so nothing changes there.
   Tighten the gaps, and in the narrow band drop the promo line — the longest,
   most expendable item — rather than the switcher or a utility link. */
@media (min-width: 901px) and (max-width: 1300px) {
	.t4-topbar__links { gap: 11px; }
	.t4-topbar__inner { gap: 10px; }
	.t4-topbar__lang select.gt_selector { padding: 0 22px 0 9px; font-size: 11px; }
}
@media (min-width: 901px) and (max-width: 1099px) {
	.t4-topbar__promo { display: none; }
}

/* Legal links in the footer bar (Privacy / Cookie / Terms). */
.t4-footer__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.t4-footer__legal a { color: inherit; opacity: .82; font-size: .84rem; }
.t4-footer__legal a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 720px) {
	.t4-footer__legal { gap: 12px; justify-content: center; }
	.t4-footer__legal a { font-size: .8rem; }
}

/* =========================================================================
   Legal / policy pages — one readable, left-aligned text column
   =========================================================================
   Privacy and Cookie rendered full-bleed (1410px wide at a 1440px viewport,
   ~176 characters per line) while Terms picked up different padding again from
   the block editor's layout styles — three pages, three measures. Long-form
   legal text needs a bound: ~66ch keeps lines in the comfortable 60-80
   character range instead of forcing the eye across the full window.

   The column stays LEFT-aligned (margin-right auto only) with a real inset
   from the page edge, rather than being centred.
   ========================================================================= */
/* Scoped with .site-main to reach (0,3,0): the Terms page carries the
   `t4-fullwidth` body class, and the theme's existing
   `.t4-fullwidth .site-main .entry-content > * { max-width: 900px }` (also
   0,3,0) otherwise outranked a plainer `.t4-legal .entry-content` rule — which
   is why Terms alone stayed at 900px / ~140 characters per line. */
.t4-legal .site-main .entry-content {
	/* Width tracks the viewport so the side gaps stay tight on a laptop, with a
	   cap so the measure doesn't run away on a very wide monitor. `94vw` rather
	   than a clamp with a px floor: an 82vw version narrowed the column on a
	   768px tablet and pushed that gap UP (48px -> 85px), the opposite of the
	   intent. A plain vw share shrinks the gap consistently at every size. */
	max-width: min(1240px, 94vw);
	/* Centred column with equal margins — this centres the COLUMN; the text
	   inside stays left-aligned/ragged-right, which is what keeps a long legal
	   document readable. */
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 2vw, 24px);
	padding-right: clamp(16px, 2vw, 24px);
}
/* The column above already bounds the measure, so let children fill it rather
   than being re-capped at the full-width template's 900px. */
.t4-legal .site-main .entry-content > * { max-width: 100%; }

/* Vertical rhythm — these are long documents (Terms runs to 22 sections), so
   sections need clear separation to stay scannable. */
.t4-legal .site-main .entry-content > h2 {
	margin: 2.1em 0 .55em;
	font-family: var(--t4-display); font-weight: 800;
	font-size: 20px; line-height: 1.3; color: var(--t4-ink);
}
.t4-legal .site-main .entry-content > h2:first-child { margin-top: .4em; }
.t4-legal .site-main .entry-content > h3 {
	margin: 1.5em 0 .4em;
	font-family: var(--t4-display); font-weight: 700;
	font-size: 16.5px; line-height: 1.35; color: var(--t4-ink);
}
/* Explicit 16px: the full-width template the Terms page uses set body copy to
   0.92rem — 12.88px against this theme's 14px rem base — while Privacy and
   Cookie sat at 16px. Too small for a long legal document, and inconsistent
   between the three pages. Pinned so all three match. */
.t4-legal .site-main .entry-content > p { margin: 0 0 1.05em; font-size: 16px; line-height: 1.72; color: var(--t4-body); }
.t4-legal .site-main .entry-content > ul,
.t4-legal .site-main .entry-content > ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.t4-legal .site-main .entry-content > ul li,
.t4-legal .site-main .entry-content > ol li { margin-bottom: .45em; font-size: 16px; line-height: 1.65; color: var(--t4-body); }
.t4-legal .site-main .entry-content a { color: var(--t4-blue-d); text-decoration: underline; }

/* The "working draft" note on Terms — set apart from the body copy. */
.t4-legal .site-main .entry-content .t4-legal-note {
	background: var(--t4-surface-2);
	border-left: 3px solid var(--t4-yellow);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	color: var(--t4-muted);
	font-size: .92rem;
}