/**
 * Windoors site design — teal / charcoal brand identity.
 * Applies over Kadence; every custom section is wpwd-prefixed.
 * Brand palette lives in the first variable block; the legacy --wpwd-*
 * names alias it so every existing rule follows the brand automatically.
 */

:root {
	/* Brand palette (Win-Doors Int. Ltd.) */
	--primary: #039D96;
	--primary-dark: #027F79;
	--secondary: #676C6D;
	--accent: #5DC0BC;
	--light-accent: #A2DAD8;
	--background: #FFFFFF;
	--section-bg: #F8FAFB;
	--border: #E7ECEC;
	--text: #454545;
	--heading: #2E3A3B;
	--footer-bg: #1F3132;

	/* Panel-header teal (phase 80). This is the brand teal, but it CANNOT be
	   var(--primary): the dashboard subtree redeclares --primary to charcoal
	   and the dark theme redeclares it again to #e4e4e7, so a header built on
	   it would be near-white with white text on it. A colour with a fixed
	   meaning gets its own token and its own dark partner. */
	--panel-head: #039D96;
	--panel-head-text: #ffffff;

	/* Golden amber accent — highlights and CTAs only. Never a large fill, and
	   never with white text: #F4B400 on white text is ~2.1:1 and fails AA, so
	   every gold surface uses var(--heading) for its text. */
	--gold: #F4B400;
	--gold-hover: #E09C00;
	--gold-light: #FFF3D6;
	--gold-shadow: rgba(244, 180, 0, 0.35);

	/* Metallic gradient stops for the header CTA — a flat gold reads dull
	   against a dark hero photo, so the pill sweeps light-to-deep. */
	/* Padlock glyph for gated prices, inlined so no HTTP request is needed. */
	--wpwd-lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2 5V3.5a3.5 3.5 0 0 1 7 0V5h.5A1.5 1.5 0 0 1 11 6.5v5A1.5 1.5 0 0 1 9.5 13h-8A1.5 1.5 0 0 1 0 11.5v-5A1.5 1.5 0 0 1 1.5 5H2zm1.5 0h4V3.5a2 2 0 1 0-4 0V5z' fill='%23000'/%3E%3C/svg%3E");
	--danger: #C0392B;
	--danger-light: #FDEDEC;
	--gold-light-metal: #F7C948;
	--gold-deep: #E09C00;
	--warn: #E67E22;

	/* Dashboard surface tokens (shared radii / soft elevation). */
	--wpwd-radius: 16px;
	--wpwd-radius-sm: 12px;
	--wpwd-shadow-sm: 0 1px 2px rgba(47, 58, 60, 0.06), 0 2px 8px rgba(47, 58, 60, 0.05);

	/* Legacy aliases used throughout this stylesheet. --wpwd-amber deliberately
	   stays TEAL: it feeds 17 rules including the primary CTA and the hero
	   gradient, so gold is applied per-element instead of by repointing it. */
	--wpwd-navy: var(--heading);
	--wpwd-navy-2: #155E59;
	--wpwd-sky: var(--accent);
	--wpwd-amber: var(--primary);
	--wpwd-amber-dark: var(--primary-dark);
	--wpwd-ink: var(--heading);
	--wpwd-muted: var(--text);
	--wpwd-line: var(--border);
	--wpwd-bg-soft: var(--section-bg);

	/* Editorial display serif for marketing headings (Phase 1 premium type).
	   System-stack only — no webfont file, loads instantly, refined serif on
	   macOS/iOS/Windows with a Georgia fallback everywhere. Swap the first
	   family for a self-hosted @font-face later if a custom face is supplied. */
	--wpwd-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

	/* ---- Staff-dashboard chrome ------------------------------------------
	   Defined here but consumed ONLY inside .wpwd-dashboard-body / .wpwd-dash
	   selectors, so the public site's teal-and-amber brand above is untouched.

	   THE RAIL IS NOW WHITE. It was slate-900 with a white active pill; the
	   reference design puts the chrome on white and lets the CONTENT be the
	   only thing with colour in it. Every value below is a token rather than a
	   literal because the dark theme is a second set of these same names — a
	   hardcoded hex cannot be overridden by a theme block, which is why the
	   old chrome could not have a dark mode at all.

	   AA-checked on white: #374151 is 8.9:1, #6b7280 is 4.83:1, so both the
	   active and the resting nav label stay AA for body text. */

	/* Surfaces. */
	--wpwd-ui-body: #f8f7f4;          /* the page behind the cards */
	--wpwd-ui-rail: #ffffff;          /* sidebar */
	--wpwd-ui-rail-line: rgba(0, 0, 0, 0.06);
	--wpwd-ui-topbar: #ffffff;
	--wpwd-ui-topbar-line: #e5e7eb;
	--wpwd-ui-card: #ffffff;
	--wpwd-ui-hover: #f4f4f5;         /* icon-button and menu-row hover */

	/* Text. */
	--wpwd-ui-ink: #18181b;
	--wpwd-ui-muted: #71717a;
	--wpwd-ui-nav: #6b7280;           /* resting nav item */
	--wpwd-ui-nav-on: #374151;        /* active nav item */
	--wpwd-ui-nav-active: rgba(30, 30, 45, 0.08);  /* the grey pill */
	--wpwd-ui-nav-line: rgba(0, 0, 0, 0.1);        /* submenu connector rule */
	--wpwd-ui-nav-dot: #9ca3af;                    /* submenu bullet */

	/* Accents. */
	--wpwd-ui-primary: #1E1E2D;
	--wpwd-ui-link: #ea580c;          /* "View all" and its kind */
	--wpwd-ui-badge-blue: #2563eb;
	--wpwd-ui-badge-green: #059669;
	--wpwd-ui-danger: #ef4444;

	/* Shape. 12px is the dominant radius; 8px is for icon buttons and small
	   menus, which look bloated at 12. */
	--wpwd-ui-radius: 12px;
	--wpwd-ui-radius-sm: 8px;
	--wpwd-ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--wpwd-ui-shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* Table chrome — still the slate band. Phase 28 moves the tables onto the
	   light treatment; repointing --wpwd-ui-bar here would leave the white
	   header text it carries sitting on a near-white fill. */
	--wpwd-ui-bar: #1E293B;
	--wpwd-ui-accent-dark: #3730A3;
	--wpwd-ui-tint: #EEF2FF;
	--wpwd-ui-line: #e5e7eb;
	--wpwd-ui-head: #F8FAFC;
}

/* ---------- Buttons ---------- */

.wpwd-btn {
	display: inline-block;
	background: var(--wpwd-amber);
	color: #FFFFFF !important;
	font-weight: 700;
	padding: 0.8em 1.7em;
	border-radius: 999px;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	box-shadow: 0 6px 16px rgba(3, 157, 150, 0.35);
}

.wpwd-btn:hover {
	background: var(--wpwd-amber-dark);
	color: #fff !important;
	transform: translateY(-2px);
}

/* Secondary CTA: gold fill. Text is deliberately dark — white on gold fails AA. */
.wpwd-btn-secondary {
	background: var(--gold);
	color: var(--heading) !important;
	box-shadow: 0 6px 16px var(--gold-shadow);
}

.wpwd-btn-secondary:hover {
	background: var(--gold-hover);
	color: var(--heading) !important;
}

.wpwd-btn-ghost {
	background: transparent;
	color: #fff !important;
	border: 2px solid #fff;
	box-shadow: none;
}

/*
 * ⚠ EVERY RULE BELOW THAT GIVES A <button> A HOVER BACKGROUND ALSO STATES ITS
 * TEXT COLOUR, AND MUST KEEP DOING SO.
 *
 * Kadence ships a bare `button:hover, button:focus { color: <palette9> }` — white
 * — that matches every <button> on the page at specificity (0,1,1). A plugin
 * rule like `.wpwd-iconbtn:hover` is (0,2,0), so it wins the BACKGROUND and,
 * if it says nothing about colour, loses the COLOUR to Kadence. The element's
 * own base rule is (0,1,0) and cannot save it.
 *
 * The result is white text on whatever light background we just set — the
 * control looks empty. Reported 2026-09-06 against the survey wizard's field
 * buttons, where the chosen value simply vanished under the cursor.
 *
 * So: set a background on a button, set the colour beside it. Always.
 */
.wpwd-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	/* Sits on a dark hero, so white is correct here — stated so Kadence is not
	   the thing deciding it. */
	color: #FFFFFF;
}

.wpwd-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 1.4em;
}

/* Header CTA menu item */
/* Metallic gradient gold. Text is dark, not white: white on this gold measures
   ~2.1:1 and fails AA. CSS cannot tween between two gradients, so the hover
   gradient swaps instantly and the motion comes from shadow/translate/brightness. */
.wpwd-btn-quote > a,
a.wpwd-btn-quote {
	display: inline-block;
	text-decoration: none;
	background: linear-gradient(135deg, var(--gold-light-metal) 0%, var(--gold-deep) 100%);
	color: var(--heading) !important;
	border-radius: 999px;
	padding: 0.55em 1.3em !important;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(224, 156, 0, 0.45);
	transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.wpwd-btn-quote > a:hover,
a.wpwd-btn-quote:hover {
	background: linear-gradient(135deg, #F0BE33 0%, #D18E00 100%);
	color: var(--heading) !important;
	filter: brightness(1.03);
	box-shadow: 0 8px 22px rgba(224, 156, 0, 0.55);
	transform: translateY(-1px);
}

/* ---------- Hero ---------- */

.wpwd-hero {
	background:
		radial-gradient(1000px 400px at 85% -10%, rgba(3, 157, 150, 0.35), transparent 60%),
		linear-gradient(135deg, var(--wpwd-navy) 0%, var(--wpwd-navy-2) 55%, #027F79 100%);
	color: #fff;
	border-radius: 18px;
	padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 72px);
	margin: 24px 0 8px;
}

.wpwd-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.1;
	margin: 0.3em 0;
	max-width: 18em;
}

.wpwd-eyebrow {
	color: var(--wpwd-sky);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	font-size: 0.85rem;
	margin: 0;
}

.wpwd-hero-sub {
	color: #C9E9E7;
	max-width: 46ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.5;
}

/* ---------- Sections / grids / cards ---------- */

.wpwd-section {
	margin: 56px 0;
}

.wpwd-section-title {
	text-align: center;
	color: var(--wpwd-navy);
	margin-bottom: 1.2em;
	font-family: var(--wpwd-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Gold accent line beneath every section title. Titles are centre-aligned, so
   the bar needs `margin: 0 auto` rather than a text-align inherit. */
.wpwd-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: var(--gold);
	margin: 14px auto 0;
}

/* Phase 1: editorial serif on the remaining marketing widget headings. Scoped to
   front-end section containers, so dashboard/CRM headings stay in the UI sans. */
.wpwd-about2-body :is(h1, h2, h3),
.wpwd-why-copy :is(h1, h2, h3),
.wpwd-services-head h2,
.wpwd-value-card h3,
.wpwd-cta-band-inner :is(h1, h2, h3),
.wpwd-feature-row :is(h2, h3),
.wpwd-showcase :is(h2, h3),
.wpwd-materials-card :is(h2, h3) {
	font-family: var(--wpwd-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.wpwd-center {
	text-align: center;
	color: var(--wpwd-muted);
}

.wpwd-grid {
	display: grid;
	gap: 22px;
}

.wpwd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wpwd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wpwd-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.wpwd-grid-3, .wpwd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.wpwd-grid-2, .wpwd-grid-3, .wpwd-grid-4 { grid-template-columns: 1fr; }
}

.wpwd-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	/* Transparent in the resting state so the gold hover border does not
	   change the card's height. */
	border-top: 4px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--wpwd-ink) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wpwd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(47, 58, 60, 0.14);
	border-color: var(--wpwd-sky);
	border-top-color: var(--gold);
}

.wpwd-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	background: linear-gradient(145deg, var(--wpwd-bg-soft), #D9F0EF);
	overflow: hidden;
}

.wpwd-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpwd-card-glyph {
	display: block;
	width: 64px;
	height: 64px;
	margin: 60px auto;
	border-radius: 14px;
	background: linear-gradient(145deg, var(--wpwd-sky), var(--wpwd-navy-2));
}

.wpwd-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px 20px;
}

.wpwd-card-body strong {
	color: var(--wpwd-navy);
	font-size: 1.12rem;
}

.wpwd-card-body span {
	color: var(--wpwd-muted);
	font-size: 0.95rem;
}

/* Keep the product-cards catalog off the screen edges (its Elementor section can
   be full-width on live). 20px inset on every side. */
.wpwd-product-section {
	padding: 20px;
}

/* Product cards: the image is the full-card background; a bottom dark overlay
   (~50%) sits under the title + description, which are overlaid on the image
   bottom (no separate white body). Widget (.wpwd-product-grid) + baked front-page
   cards (body.home). Favourites / Materials (dashboard) untouched. */
.wpwd-product-grid .wpwd-card,
body.home .wpwd-grid .wpwd-card {
	position: relative;              /* positioning context for the media + overlay body */
	display: block;
	height: 340px;                   /* fixed background-image card height (adjustable) */
	overflow: hidden;                /* clip the image to the rounded card */
	background: var(--wpwd-card-bg, #0e1a1f);  /* shows only if a card has no image */
}
.wpwd-product-grid .wpwd-card-media,
body.home .wpwd-card-media {
	position: absolute;
	inset: 0;                        /* fill the whole card */
	aspect-ratio: auto;
	height: auto;
	display: block;
	padding: 0;
	background: none;
	z-index: 0;
}
.wpwd-product-grid .wpwd-card-media img,
body.home .wpwd-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;               /* image covers the card (background) */
}
/* Bottom overlay: transparent at top → ~50% black at the bottom, for legibility. */
.wpwd-product-grid .wpwd-card-media::after,
body.home .wpwd-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0) 62%);
	z-index: 1;
}
/* Title + description overlaid on the bottom of the image. */
.wpwd-product-grid .wpwd-card-body,
body.home .wpwd-grid .wpwd-card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px 18px;
	color: #fff;
}
.wpwd-product-grid .wpwd-card-body strong,
body.home .wpwd-grid .wpwd-card-body strong { color: var(--wpwd-card-fg, #fff); }
.wpwd-product-grid .wpwd-card-body span,
body.home .wpwd-grid .wpwd-card-body span { color: var(--wpwd-card-fg, rgba(255, 255, 255, 0.9)); }
@media (max-width: 640px) {
	.wpwd-product-grid .wpwd-card,
	body.home .wpwd-grid .wpwd-card { height: 300px; }
}

/* Facts strip */
.wpwd-strip {
	background: var(--wpwd-navy);
	border-radius: 18px;
	padding: 36px clamp(20px, 5vw, 48px);
}

.wpwd-fact strong {
	display: block;
	color: var(--wpwd-sky);
	font-size: 1.5rem;
}

.wpwd-fact span {
	color: #C9E9E7;
}

/* Conservatory style tiles */
.wpwd-tile {
	background: var(--wpwd-bg-soft);
	border: 1px solid var(--wpwd-line);
	border-radius: 12px;
	padding: 22px 16px;
	text-align: center;
	color: var(--wpwd-navy);
}

/* ---------- Content helpers ---------- */

.wpwd-lead {
	font-size: 1.18rem;
	color: var(--wpwd-ink);
	max-width: 50em;
}

.wpwd-checklist {
	list-style: none;
	margin: 1.4em 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 10px 24px;
	max-width: 46em;
}

@media (max-width: 640px) {
	.wpwd-checklist { grid-template-columns: 1fr; }
}

.wpwd-checklist li {
	position: relative;
	padding: 10px 14px 10px 42px;
	background: var(--wpwd-bg-soft);
	border-radius: 10px;
	color: var(--wpwd-ink);
	font-weight: 600;
}

.wpwd-checklist li::before {
	content: "✓";
	position: absolute;
	left: 14px;
	color: #fff;
	background: var(--wpwd-sky);
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	font-size: 0.8rem;
	top: 12px;
}

.wpwd-product-image img {
	border-radius: 14px;
	border: 1px solid var(--wpwd-line);
	margin-bottom: 18px;
}

.wpwd-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0 2em;
}

.wpwd-spec-table th,
.wpwd-spec-table td {
	border: 1px solid var(--wpwd-line);
	padding: 10px 14px;
	text-align: left;
}

.wpwd-spec-table th {
	background: var(--wpwd-bg-soft);
	color: var(--wpwd-navy);
}

/* The 34% belongs to the LABEL column, not to every <th>.
 *
 * Two shapes share this class: a two-column spec table (label | value), and the
 * five-column "Compare our window styles" tables on /windows/ and /doors/ whose
 * header row is five <th> and whose every body row also starts with a <th>.
 * `th { width: 34% }` asked all five header cells to be a third of the table,
 * which the browser can only resolve by ignoring most of it — and skewed the
 * result while doing so. :first-child is the label column in both shapes. */
.wpwd-spec-table tr > :first-child {
	width: 34%;
}

/* Wide tables scroll instead of crushing.
 *
 * NO WRAPPER ELEMENT, deliberately. These tables are seeded into _elementor_data
 * post meta by 22 wpwd_seed_*_sections() functions, so adding a scroll <div>
 * would mean re-seeding every product page — and each seeder's idempotency guard
 * keys off a widget string, so a re-seed is not free. `display: block` on the
 * table itself is the standard way to get the same result from CSS alone.
 *
 * The cost is real and worth naming: inside this query the table loses its own
 * column-sizing algorithm, so columns size to content. That is the intent here
 * (five columns of prose cannot share 375px), but it is a behaviour change, not
 * a cosmetic one. min-width on the cells stops them collapsing to one word per
 * line once they are free to size themselves. */
@media (max-width: 768px) {
	.wpwd-spec-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.wpwd-spec-table tr > :first-child {
		width: auto;
		min-width: 9em;
	}

	.wpwd-spec-table td,
	.wpwd-spec-table th {
		white-space: normal;
		min-width: 8em;
	}
}

.wpwd-related-list a {
	color: var(--wpwd-navy-2);
}

.wpwd-quote-head {
	text-align: center;
	margin: 12px 0 24px;
}

.wpwd-form-section {
	margin-bottom: 8px;
}

/*
 * .wpwd-mega-root is the last element in <body>, printed on wp_footer. Its
 * panels are position:fixed overlays — but that is declared in mega-menu.css, a
 * DIFFERENT stylesheet. Pinned here, in the sheet that always loads, so the
 * root cannot contribute page height even if that one is missing, reordered or
 * optimised away.
 *
 * ⚠ `height: 0` ALONE IS NOT ENOUGH, and this was measured rather than
 * reasoned. With the panels made static (mega-menu.css simulated missing) the
 * root still reported height 0 while the document grew by 1271px — three
 * ~427px panels overflowing a zero-height box. `overflow: hidden` is what
 * actually stops them.
 *
 * It is safe for the normal case: a position:fixed element's containing block
 * is the viewport, so `overflow: hidden` on an ancestor does not clip it. The
 * panels still paint full-width over the page. (That would stop being true if
 * anything gave this element a transform/filter/will-change — don't.)
 */
.wpwd-mega-root {
	height: 0;
	overflow: hidden;
}

/* [wpwd_contact field="address_html"] — see the shortcode's comment: WordPress
   removes the <p> that used to give this block its spacing. */
.wpwd-address-link { display: block; margin: 0 0 1em; }

/* ---------- Contact ---------- */

.wpwd-contact h2 {
	color: var(--wpwd-navy);
}

/* ---------- About section v2 (framed image + icon bullets) ---------- */

.wpwd-about2 {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

@media (max-width: 900px) {
	.wpwd-about2 { grid-template-columns: 1fr; }
}

.wpwd-about2-noimage {
	grid-template-columns: 1fr;
}

.wpwd-about2-media {
	position: relative;
	padding: 0 26px 26px 0;
}

/* Solid backdrop block offset behind the photo — same rounding as the photo. */
.wpwd-about2-media::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 26px;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, var(--wpwd-sky), var(--wpwd-navy-2));
	border-radius: 24px;
}

.wpwd-about2-media img {
	position: relative;
	width: 100%;
	border-radius: 24px !important;
	box-shadow: 0 24px 48px rgba(47, 58, 60, 0.25);
	display: block;
}

.wpwd-about2-body h2 {
	color: var(--wpwd-navy);
	margin: 0.2em 0 0.5em;
}

.wpwd-icon-list {
	list-style: none;
	margin: 1.2em 0 1.4em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 12px 20px;
}

@media (max-width: 640px) {
	.wpwd-icon-list { grid-template-columns: 1fr; }
}

.wpwd-icon-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wpwd-ink);
	font-weight: 600;
}

.wpwd-icon-tile {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(3, 157, 150, 0.14);
	color: var(--wpwd-navy-2);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Zigzag feature rows ---------- */

.wpwd-zig-sub {
	max-width: 46em;
	margin: 0 auto 10px;
}

.wpwd-zig-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(36px, 5vw, 64px);
	margin-top: 40px;
}

.wpwd-zig-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

.wpwd-zig-row.is-flip .wpwd-zig-media {
	order: 2;
}

@media (max-width: 820px) {
	.wpwd-zig-row {
		grid-template-columns: 1fr;
	}
	.wpwd-zig-row.is-flip .wpwd-zig-media {
		order: 0;
	}
}

.wpwd-zig-media img {
	width: 100% !important;
	aspect-ratio: 16 / 11;
	height: auto !important;
	object-fit: cover;
	border-radius: 18px !important;
	box-shadow: 0 18px 40px rgba(47, 58, 60, 0.18) !important;
	display: block;
}

.wpwd-zig-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(3, 157, 150, 0.14);
	color: var(--wpwd-navy-2);
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 14px;
}

.wpwd-zig-body h3 {
	color: var(--wpwd-navy);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	margin: 0 0 10px;
}

.wpwd-zig-body p {
	color: var(--wpwd-muted);
	line-height: 1.65;
	margin: 0;
	max-width: 34em;
}

.wpwd-zig-body .wpwd-zig-list {
	grid-template-columns: 1fr;
	margin-top: 14px;
	gap: 8px;
}

/* ---------- Materials option cards ---------- */

.wpwd-mat-card {
	text-decoration: none !important;
}

.wpwd-mat-specs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
}

.wpwd-mat-specs span {
	color: var(--wpwd-muted);
	font-size: 0.88rem;
	line-height: 1.4;
}

.wpwd-mat-specs em {
	font-style: normal;
	font-weight: 600;
	color: var(--wpwd-navy);
}

/* ---------- Partners strip (above the footer) ---------- */

.wpwd-partners-strip {
	background: var(--wpwd-bg-soft);
	border-top: 1px solid var(--wpwd-line);
	padding: 34px 24px 38px;
	margin-top: 64px;
}

.wpwd-partners-inner {
	max-width: 1290px;
	margin: 0 auto;
	text-align: center;
}

.wpwd-partners-label {
	color: var(--wpwd-muted);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 20px;
}

.wpwd-partners-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 26px 44px;
}

.wpwd-partner {
	display: inline-flex;
	text-decoration: none !important;
}

.wpwd-partner img {
	max-height: 72px;
	width: auto !important;
	height: auto;
	transition: transform 0.2s ease;
}

.wpwd-partner:hover img {
	transform: translateY(-2px);
}

.wpwd-partner-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 999px;
	padding: 8px 18px 8px 8px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.wpwd-partner:hover .wpwd-partner-badge {
	border-color: var(--wpwd-sky);
	transform: translateY(-2px);
}

.wpwd-partner-badge em {
	font-style: normal;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wpwd-sky), var(--wpwd-navy-2));
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpwd-partner-badge > span {
	color: var(--wpwd-navy);
	font-weight: 700;
}

/* Inline partners widget (inside page content) keeps its own spacing. */
.wpwd-partners-inline {
	margin-top: 0;
	border-radius: 16px;
	border: 1px solid var(--wpwd-line);
}

/* ---------- Value cards ---------- */

.wpwd-value-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 900px) {
	.wpwd-value-cards { grid-template-columns: 1fr; }
}

.wpwd-value-card {
	background: linear-gradient(160deg, var(--wpwd-navy) 0%, var(--wpwd-navy-2) 70%, #027F79 100%);
	border-radius: 16px;
	padding: 38px 30px;
	text-align: center;
	color: #D3ECEA;
	border-top: 4px solid transparent;
	box-shadow: 0 16px 36px rgba(47, 58, 60, 0.2);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wpwd-value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px rgba(47, 58, 60, 0.3);
	border-top-color: var(--gold);
}

.wpwd-value-card h3 {
	color: #fff;
	font-size: 1.5rem;
	margin: 0 0 16px;
}

.wpwd-value-card p {
	margin: 0;
	line-height: 1.7;
	font-size: 0.97rem;
}

/* ---------- Testimonials slider ---------- */

.wpwd-tslider {
	position: relative;
	padding: 0 60px;
}

@media (max-width: 640px) {
	.wpwd-tslider { padding: 0 8px; }
}

.wpwd-ttrack {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 10px 4px 26px;
}

.wpwd-ttrack::-webkit-scrollbar {
	display: none;
}

.wpwd-tcard {
	flex: 0 0 calc((100% - 44px) / 3);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 16px;
	box-shadow: 0 12px 28px rgba(47, 58, 60, 0.1);
	padding: 26px 24px 22px;
	position: relative;
	display: flex;
	flex-direction: column;
}

@media (max-width: 1024px) {
	.wpwd-tcard { flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 640px) {
	.wpwd-tcard { flex-basis: 100%; }
}

.wpwd-tquote {
	position: absolute;
	top: 6px;
	right: 20px;
	font-size: 4.6rem;
	line-height: 1;
	color: rgba(3, 157, 150, 0.18);
	font-family: Georgia, serif;
}

.wpwd-tstars {
	color: var(--wpwd-line);
	font-size: 1.05rem;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.wpwd-tstars .is-on {
	color: var(--gold);
}

.wpwd-tcard p {
	color: var(--wpwd-ink);
	font-size: 0.97rem;
	line-height: 1.6;
	flex: 1;
	margin: 0 0 18px;
}

.wpwd-tcard footer {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wpwd-tavatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wpwd-sky), var(--wpwd-navy-2));
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.wpwd-tmeta {
	display: flex;
	flex-direction: column;
}

.wpwd-tmeta strong {
	color: var(--wpwd-navy);
}

.wpwd-tmeta em {
	font-style: normal;
	color: var(--wpwd-muted);
	font-size: 0.86rem;
}

.wpwd-tslider .wpwd-slider-arrow {
	background: #fff;
	border: 1px solid var(--wpwd-line);
	color: var(--wpwd-navy);
}

.wpwd-tslider .wpwd-tprev {
	left: 0;
}

.wpwd-tslider .wpwd-tnext {
	right: 0;
}

.wpwd-tslider .wpwd-slider-arrow:hover {
	background: var(--wpwd-amber);
	border-color: var(--wpwd-amber);
	color: #FFFFFF;
}

/* ---------- Quote panel (image left, form right) ---------- */

.wpwd-quote-panel {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 56px rgba(47, 58, 60, 0.12);
}

@media (max-width: 900px) {
	.wpwd-quote-panel { grid-template-columns: 1fr; }
}

/* The guided journey needs the full width: fourteen catalogue cards squeezed
   into the 1.25fr column wrap two-across and turn the first screen into a long
   scroll. The installer photo and the "prefer to talk" card move below it,
   where they still do their job without competing with the journey. */
.wpwd-quote-panel--wizard { grid-template-columns: 1fr; }
.wpwd-quote-panel--wizard .wpwd-quote-media { order: 2; }
.wpwd-quote-panel--wizard .wpwd-quote-form-col { order: 1; }
.wpwd-quote-panel--wizard .wpwd-quote-media img { max-height: 260px; object-fit: cover; }

.wpwd-quote-media {
	position: relative;
	min-height: 420px;
	background: var(--wpwd-navy);
}

.wpwd-quote-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.wpwd-quote-contact {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	background: rgba(47, 58, 60, 0.82);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wpwd-quote-contact strong {
	color: #fff;
	margin-bottom: 2px;
}

.wpwd-quote-contact a {
	color: var(--wpwd-sky);
	text-decoration: none;
	font-weight: 600;
}

.wpwd-quote-contact a:hover {
	color: var(--wpwd-amber);
}

.wpwd-quote-contact span {
	color: #C9E9E7;
	font-size: 0.88rem;
}

.wpwd-quote-form-col {
	padding: clamp(26px, 4vw, 48px);
}

.wpwd-quote-form-col h2 {
	color: var(--wpwd-navy);
	margin: 0.2em 0 0.4em;
}

.wpwd-quote-sub {
	color: var(--wpwd-muted);
	margin-bottom: 1.4em;
}

/* Fluent Forms inputs inside the panel, themed. */
.wpwd-quote-form-col .fluentform .ff-el-form-control {
	border: 1px solid #D7D7D7;
	border-radius: 10px;
	padding: 10px 14px;
	background: var(--wpwd-bg-soft);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wpwd-quote-form-col .fluentform .ff-el-form-control:focus {
	border: 2px solid var(--primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
	outline: none;
}

.wpwd-quote-form-col .fluentform .ff-el-input--label label {
	color: var(--wpwd-navy);
	font-weight: 600;
	font-size: 0.92rem;
}

/* Field prefixes (UK flag on phone, envelope on email). */
.wpwd-prefix-wrap {
	position: relative;
}

.wpwd-input-prefix {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--wpwd-navy);
	font-weight: 700;
	font-size: 0.92rem;
	pointer-events: none;
	z-index: 2;
}

.wpwd-flag {
	font-size: 1.05rem;
	line-height: 1;
}

.wpwd-input-prefix-icon {
	color: var(--wpwd-muted);
}

/* No .wpwd-prefix-phone rule, and no phone chip in the markup either — the
   injection was removed from initQuoteFields() in frontend.js. The phone prefix
   is owned solely by intl-tel-input (see the .wpwd-field .iti rules below): a
   second absolutely-positioned prefix overlaps iti's flag + dial code, and a
   fixed `padding-left … !important` here would freeze iti's dynamic padding.
   The .wpwd-input-prefix / .wpwd-flag rules above stay — the email chip uses them. */

.wpwd-prefix-email input.wpwd-email {
	padding-left: 38px !important;
}

/* City autocomplete dropdown. */
.wpwd-city-wrap {
	position: relative;
}

.wpwd-city-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 10px;
	box-shadow: 0 16px 36px rgba(47, 58, 60, 0.16);
	list-style: none;
	margin: 0;
	padding: 6px;
	display: none;
	z-index: 50;
	max-height: 250px;
	overflow-y: auto;
}

.wpwd-city-list.is-open {
	display: block;
}

.wpwd-city-list li {
	padding: 9px 12px;
	border-radius: 7px;
	cursor: pointer;
	color: var(--wpwd-ink);
	margin: 0;
}

.wpwd-city-list li:hover {
	background: rgba(3, 157, 150, 0.14);
	color: var(--wpwd-navy);
}

.wpwd-quote-form-col .fluentform .ff-btn-submit,
.wpwd-quote-form-col .ff_submit_btn_wrapper .ff-btn-submit {
	background: var(--gold) !important;
	background-color: var(--gold) !important;
	color: var(--heading) !important;
	font-weight: 700;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 0.85em 2em;
	transition: background 0.15s ease, transform 0.15s ease;
	box-shadow: 0 6px 16px var(--gold-shadow);
}

.wpwd-quote-form-col .fluentform .ff-btn-submit:hover,
.wpwd-quote-form-col .ff_submit_btn_wrapper .ff-btn-submit:hover {
	background: var(--gold-hover) !important;
	background-color: var(--gold-hover) !important;
	color: var(--heading) !important;
	transform: translateY(-2px);
}

/* ---------- Full-bleed helper ---------- */

.wpwd-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- Top bar ---------- */

.wpwd-topbar {
	background: var(--wpwd-navy);
	color: #C9E9E7;
	font-size: 0.85rem;
	/* Sticky: pins to the very top so it stays visible with the header on scroll
	   (see the sticky-header block near the primary nav for the sub-bar + main-row
	   offsets that stack below this). */
	position: sticky;
	top: 0;
	z-index: 103;
}

.wpwd-topbar-inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.wpwd-topbar-right {
	display: flex;
	gap: 22px;
	align-items: center;
	/* min-width:0 lets this group shrink. Without it the flex items keep their
	   full intrinsic width, the group overflows, and because .wpwd-topbar-inner
	   is flex-wrap:wrap it drops to a second row — making the bar taller than
	   the 38px that .wpwd-subbar (top:38px) and #masthead (top:72px) hard-code,
	   so the sub-bar then pins ON TOP of it. */
	min-width: 0;
}

.wpwd-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #C9E9E7;
	text-decoration: none;
	white-space: nowrap;
	min-width: 0;
}

.wpwd-topbar-item svg {
	color: var(--wpwd-sky);
}

a.wpwd-topbar-item:hover {
	color: var(--gold);
}

/* The chip that gives way. Everything else in this bar is a contact route the
   visitor may need to tap; the location is the one that can truncate. */
.wpwd-topbar-loc { overflow: hidden; text-overflow: ellipsis; }

/* 1100px, not 782px: four chips plus the hours stop fitting inside the 1290px
   inner well long before the mobile breakpoint. */
@media (max-width: 1100px) {
	.wpwd-topbar-loc { display: none; }
}

/* ---------- Header: spacing + transparent/solid states ---------- */

/* Header actions cluster: Get a Quote + account icon, pinned to the header's
   right section, separate from the (dead-centred) primary navigation. */
.wpwd-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wpwd-header-actions .wpwd-user-menu {
	margin-left: 0;
}

#masthead {
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* ---------- Nav: bottom-aligned items with a gold accent underline ---------- */

/* Vertically centre the nav against the logo. */
#masthead .site-header-main-section-center .site-header-item,
#masthead .site-header-item-main-navigation,
#masthead .header-navigation,
#masthead .header-menu-container,
#masthead .primary-menu-container > ul.menu {
	align-items: center;
}

/* With the actions moved out to the right section, the nav is alone in the
   centre column — centre its links (Kadence's grid already centres the column). */
#masthead .primary-menu-container > ul.menu {
	justify-content: center;
}

/* =================== Header colours =================== */
/* Top bar + secondary sub-bar stay solid teal in every state. */
.wpwd-topbar,
.wpwd-subbar {
	background: var(--primary) !important;
	box-shadow: none !important;
}

/* The MAIN header row is solid white in every state — scrolled and not — so it
   never flips colour on scroll. Top/sub bars above stay teal; menu text is teal
   (see below) so it reads on the white row. */
body #masthead,
body #masthead [class*="site-header-row"],
body #masthead .site-header-inner-wrap,
body #masthead .kadence-sticky-header > .site-header-row-container-inner,
body.wpwd-has-hero:not(.wpwd-scrolled) #masthead,
body.wpwd-has-hero:not(.wpwd-scrolled) #masthead [class*="site-header-row"],
body.wpwd-has-hero:not(.wpwd-scrolled) #masthead .site-header-inner-wrap {
	background: #fff !important;
	box-shadow: none !important;
}

/* Secondary utility bar directly under the top bar (right-aligned). */
.wpwd-subbar {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	/* Sticky: pins just below the 38px top bar so it stays with the header. */
	position: sticky;
	top: 38px;
	z-index: 102;
}
.wpwd-subbar-inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 3px 24px;
	display: flex;
	justify-content: flex-end;
}
.wpwd-subnav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.25em;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.wpwd-subnav-menu > li { margin: 0; }
.wpwd-subnav-menu > li > a {
	display: inline-block;
	font-size: 0.70em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.wpwd-subnav-menu > li > a:hover {
	color: var(--gold);
}

/* Primary nav: teal text on the white row, gold hover + active. */
#masthead .primary-menu-container > ul.menu > li > a {
	color: var(--primary) !important;
}
#masthead .primary-menu-container > ul.menu > li > a:hover,
#masthead .primary-menu-container > ul.menu > li.current-menu-item > a,
#masthead .primary-menu-container > ul.menu > li.current-menu-ancestor > a {
	color: var(--gold) !important;
}
#masthead .primary-menu-container > ul.menu > li > a::after {
	background: var(--gold) !important;
}
/* Profile icon teal (readable on the white row). */
#masthead .wpwd-user-toggle {
	color: var(--primary);
}

@media (max-width: 1024px) {
	.wpwd-subbar {
		display: none;
	}
}

#masthead .primary-menu-container > ul.menu > li > a {
	position: relative;
	padding-bottom: 5px;
	transition: color 0.3s ease;
}

#masthead .primary-menu-container > ul.menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

#masthead .primary-menu-container > ul.menu > li:hover > a::after,
#masthead .primary-menu-container > ul.menu > li.current-menu-item > a::after,
#masthead .primary-menu-container > ul.menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

#masthead .primary-menu-container > ul.menu > li:hover > a,
#masthead .primary-menu-container > ul.menu > li.current-menu-item > a {
	color: var(--primary);
}

/* The quote pill and the account icon are not text links — no underline, and
   nudge them up so they sit on the same optical baseline as the menu text. */
#masthead .primary-menu-container > ul.menu > li.wpwd-btn-quote > a::after,
#masthead .primary-menu-container > ul.menu > li.wpwd-user-menu > a::after,
#masthead .primary-menu-container > ul.menu > li.wpwd-user-menu .wpwd-user-toggle::after {
	display: none;
}

#masthead .primary-menu-container > ul.menu > li.wpwd-btn-quote > a {
	padding-bottom: 0.55em !important;
}

#masthead .primary-menu-container > ul.menu > li.wpwd-btn-quote,
#masthead .primary-menu-container > ul.menu > li.wpwd-user-menu {
	margin-bottom: 0;
}

/* (The old transparent-over-hero override was removed: the main row is now
   solid white in every state, so the header no longer flips colour on scroll
   and the menu text stays readable.) */

/* Kadence's sticky script must not fix rows independently of our states. */
body.wpwd-has-hero:not(.wpwd-scrolled) #masthead .kadence-sticky-header.item-is-fixed {
	position: static !important;
}

/* Close the gap between the top bar and the hero: Kadence pads the content
   area, which showed as a white band behind the transparent header. */
body.wpwd-has-hero .content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.wpwd-has-hero .entry-content-wrap {
	padding-top: 0 !important;
}

body.wpwd-has-hero .entry-content > *:first-child,
body.wpwd-has-hero .wpwd-full:first-child,
body.wpwd-has-hero .wpwd-slider {
	margin-top: 0 !important;
}

/* Kadence's boxed content card must never paint white behind hero pages. */
body.wpwd-has-hero article.entry,
body.wpwd-has-hero .single-entry,
body.wpwd-has-hero .content-bg,
body.wpwd-has-hero .entry.content-bg {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

body.wpwd-has-hero .single-entry .entry-content-wrap,
body.wpwd-has-hero article.entry .entry-content-wrap {
	padding: 0 !important;
}

/* Clean transparent logo in a fixed box — the image fits inside with no border,
   background or box-shadow. (The over-hero drop-shadow was removed because it
   traced the PNG's subtle edge into a visible rectangle.) */
#masthead .site-branding img,
#masthead .custom-logo {
	height: 72px;
	width: auto;
	max-width: 300px;      /* wide enough for the full logo before the 72px height caps it */
	object-fit: contain;   /* image fits the box, no distortion, no crop */
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Larger logo on mobile (the desktop 72px reads too small on phones). */
@media (max-width: 900px) {
	#masthead .site-branding img,
	#masthead .custom-logo { height: 100px; max-width: 360px; }
	#masthead .site-main-header-inner-wrap { min-height: 112px; }  /* room for the taller logo */
}

/* Header row height + vertical centring. The row min-height contains the 72px
   logo with a little breathing room; Kadence's 20px/20px .site-container padding
   is trimmed to 6px. The logo column is flex-centred so the logo sits on the
   row's vertical centre and never spills into the hero below. */
#masthead .site-main-header-inner-wrap {
	min-height: 84px;
}
#masthead .site-header-main-section-left {
	display: flex;
	align-items: center;
}
#masthead .site-main-header-wrap .site-header-row-container-inner > .site-container {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* Header CTA: keep "Design & Order Online" a compact single-line pill (never a circle). */
.wpwd-btn-quote > a,
a.wpwd-btn-quote {
	white-space: nowrap;
	font-size: 0.92em;
	line-height: 1.1;
}

/* Keep the primary menu on a single row — never wrap "Contact" to a second line. */
#masthead .primary-menu-container > ul.menu {
	flex-wrap: nowrap;
}

/* Desktop: tighten the menu so all items fit on one row. */
@media (min-width: 1025px) and (max-width: 1600px) {
	#masthead .primary-menu-container > ul.menu > li > a {
		padding-left: 0.45em;
		padding-right: 0.45em;
		font-size: 0.92em;
		white-space: nowrap;
	}
}

/* ---- Sticky header ----
   The main row pins below the top bar (38px) + sub-bar (34px) = 72px, so all
   three bars stay together at the top as the page scrolls. position:sticky keeps
   them in normal flow (no content jump), and the staggered `top` values stack
   them. Full-width comes for free (sticky, unlike fixed, keeps the block width). */
body #masthead,
body.wpwd-has-hero #masthead {
	position: sticky;
	top: 72px;
	z-index: 100;
	box-shadow: none;
}

/* Sub-bar is hidden ≤1024px, so the main row pins directly under the top bar. */
@media (max-width: 1024px) {
	body #masthead,
	body.wpwd-has-hero #masthead {
		top: 38px;
	}
}

/* Logged-in users: offset every sticky bar below the 32px WP admin bar. */
body.admin-bar .wpwd-topbar { top: 32px; }
body.admin-bar .wpwd-subbar { top: 70px; }
body.admin-bar #masthead,
body.admin-bar.wpwd-has-hero #masthead { top: 104px; }
@media (max-width: 1024px) {
	body.admin-bar #masthead,
	body.admin-bar.wpwd-has-hero #masthead { top: 70px; }
}
/* ≤782px the WP admin bar is 46px and NOT fixed (it scrolls away), so the sticky
   bars should pin flush at the top rather than leaving the desktop 32px gap. */
/* 46px, not 0. These said 0 on the assumption that the mobile admin bar scrolls
   away — core does switch it to position:absolute below 600px, but Kadence
   overrides that with `#wpadminbar { position: fixed !important }`
   (themes/kadence/assets/css/global.min.css), so it never does and a top:0
   sticky bar parks underneath it. */
@media (max-width: 782px) {
	body.admin-bar .wpwd-topbar { top: 46px; }
	body.admin-bar .wpwd-subbar { top: 46px; }
}

/* Soft drop-shadow once scrolled (JS toggles .wpwd-scrolled past 40px). */
body.wpwd-scrolled #masthead {
	box-shadow: 0 6px 24px rgba(47, 58, 60, 0.12);
}

/* ---------- Dropdown menus ---------- */

/* Panel colours come from Kadence theme mods (see wpwd_apply_header_styles()
   in includes/site-builder.php). What theme mods cannot express — the panel
   shape and the gold hover border — lives here. */
#masthead .header-navigation ul ul.sub-menu {
	border-radius: 12px;
	padding: 8px 0;
	border: 1px solid var(--border);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

#masthead .header-navigation ul ul.sub-menu li a {
	border-left: 4px solid transparent;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#masthead .header-navigation ul ul.sub-menu li:hover > a,
#masthead .header-navigation ul ul.sub-menu li.current-menu-item > a {
	background: var(--gold-light);
	color: var(--primary);
	border-left-color: var(--gold);
}

/* Submenu links are never affected by the transparent-header white text or by
   the top-level underline — both are scoped to `> ul > li > a`. */

/* ---------- Product dropdowns (image cards) ---------- */

/* Submenu items tagged .wpwd-mcard (see wpwd_menu_card_class()) become a grid
   of cards: product image on top, centred title below. :has() scopes the grid
   to product dropdowns only — the account dropdown is not a ul.sub-menu, so it
   is untouched. */
#masthead .header-navigation ul.sub-menu:has( > li.wpwd-mcard ) {
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: 10px;
	width: 460px;
	max-width: 92vw;
	padding: 14px;
}

#masthead .header-navigation ul.sub-menu > li.wpwd-mcard > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 10px;
	height: 100%;
	/* Replaces the 4px transparent left accent bar from the rule above. */
	border: 1px solid var(--border);
	border-left-width: 1px;
	border-radius: 10px;
	line-height: 1.25;
}

#masthead .header-navigation ul.sub-menu > li.wpwd-mcard .wpwd-mcard-img {
	width: 100%;
	height: 92px;
	object-fit: contain;
	display: block;
}

#masthead .header-navigation ul.sub-menu > li.wpwd-mcard .wpwd-mcard-ph {
	background: var(--gold-light);
	border-radius: 8px;
}

/* Top-level parent item with an enabled image (see wpwd_menu_card_class()):
   a small inline thumbnail before the label, not a full card. The image may be
   wrapped in a <picture> by the WebP plugin, so match it as a descendant. */
#masthead li.wpwd-mcard-top > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
#masthead li.wpwd-mcard-top a picture {
	flex: none;
	line-height: 0;
	display: inline-flex;
}
#masthead li.wpwd-mcard-top .wpwd-mcard-img {
	width: 26px !important;
	height: 26px !important;
	max-width: none !important;
	border-radius: 6px;
	object-fit: cover !important;
	flex: none;
	display: block;
}

#masthead .header-navigation ul.sub-menu > li.wpwd-mcard:hover > a,
#masthead .header-navigation ul.sub-menu > li.wpwd-mcard.current-menu-item > a {
	background: var(--gold-light);
	border-color: var(--gold);
	border-left-color: var(--gold);
	color: var(--primary);
}

@media (max-width: 767px) {
	/* Mobile accordion submenu: full width, two compact columns. */
	#masthead .header-navigation ul.sub-menu:has( > li.wpwd-mcard ) {
		width: 100%;
		grid-template-columns: 1fr 1fr;
	}
	#masthead .header-navigation ul.sub-menu > li.wpwd-mcard .wpwd-mcard-img {
		height: 72px;
	}
}

/* Full-width mega panel. Desktop only — the mobile menu is a separate accordion
   structure, so these absolute-positioning rules are gated to the desktop nav.
   Kadence anchors ul.sub-menu (position:absolute) to the trigger li; we move the
   offset parent up to the full-width header band so the panel spans the row. */
@media (min-width: 992px) {
	#masthead .site-main-header-wrap > .site-header-row-container-inner {
		position: relative;
	}
	#masthead .header-navigation li.menu-item-has-children:has( > ul.sub-menu > li.wpwd-mcard ) {
		position: static;
	}
	/* The panel stretches the full band width; its card grid is centred to the
	   site content width via responsive side padding (gutter vs. half the overflow
	   past the content width). */
	#masthead .header-navigation ul.sub-menu:has( > li.wpwd-mcard ) {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 16px;
		padding: 22px max(24px, calc((100% - 1290px) / 2));
		box-sizing: border-box;
		border-radius: 0;
		/* Un-clip so the hover bridge (::before) below is not cut off. Beats the
		   ID-scoped `overflow:hidden` on the base dropdown rule; the panel is
		   visibility:hidden while closed, so the bridge stays inert until open. */
		overflow: visible;
	}
	#masthead .header-navigation ul.sub-menu > li.wpwd-mcard .wpwd-mcard-img {
		height: 120px;
	}
	/* Hover bridge: fills the gap between the trigger item and the full-width
	   panel so the pointer never leaves the li→panel hover region. It lives inside
	   the panel (a descendant of the trigger li), satisfying both Kadence's
	   `li:hover` reveal CSS and its `c.contains(relatedTarget)` mouseleave guard.
	   Clipped to nothing while the panel is closed (overflow:hidden; height:1px),
	   so it never opens the menu on its own. */
	#masthead .header-navigation ul.sub-menu:has( > li.wpwd-mcard )::before {
		content: "";
		position: absolute;
		top: -28px;
		left: 0;
		right: 0;
		height: 28px;
		background: transparent;
	}

	/* Self-contained hide/reveal for the mega panel so it does not rely on the
	   theme's own dropdown-hide CSS (missing/overridden on live left it stuck
	   open). Hidden by default; revealed on hover/focus of the trigger item. */
	#masthead .header-navigation li.menu-item-has-children > ul.sub-menu:has( > li.wpwd-mcard ) {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease, visibility 0s linear 0.18s;
	}
	#masthead .header-navigation li.menu-item-has-children:hover > ul.sub-menu:has( > li.wpwd-mcard ),
	#masthead .header-navigation li.menu-item-has-children:focus-within > ul.sub-menu:has( > li.wpwd-mcard ) {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.18s ease;
	}
}

/* ---------- Account dropdown ---------- */

.wpwd-user-menu {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 12px;
}

.wpwd-user-toggle {
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	color: var(--wpwd-navy);
	display: inline-flex;
	border-radius: 50%;
	transition: color 0.15s ease, background 0.15s ease;
}

.wpwd-user-toggle:hover {
	color: var(--gold);
}

/*
 * ⚠ SCOPED TO .wpwd-header-actions, FOR TWO REASONS.
 *
 * 1. `#masthead .wpwd-user-toggle { color: var(--primary) }` above is
 *    id-weighted, so the plain `.wpwd-user-toggle:hover` rule loses inside the
 *    header — the account icon has never actually changed on hover. ⚠ AN ID
 *    BEATS ANY NUMBER OF CLASSES, so this needs #masthead of its own: the first
 *    attempt at this fix used two classes plus the pseudo and was measured
 *    still computing var(--primary) with a transparent background.
 * 2. The DASHBOARD's account menu reuses all three of these class names
 *    (accounts-dashboard.php). An unscoped rule would repaint that too.
 *
 * Light grey rather than var(--section-bg): #F8FAFB is so close to white that
 * the hover target reads as nothing on the white header row.
 *
 * HOW THIS WAS CHECKED, since :hover cannot be triggered headlessly: the same
 * declarations were rendered against the real frontend.css AND Kadence's
 * global.min.css in isolation (computed rgb(46,58,59) on rgb(239,241,241)), and
 * every rule in the live page that matches this element and sets colour or
 * background was enumerated — `#masthead .wpwd-user-toggle` (1,1,0),
 * `.wpwd-user-toggle` (0,1,0), `.wpwd-user-toggle:hover` (0,2,0) and Kadence's
 * `button` (0,0,1). This is (1,3,1) and outranks all of them.
 */
#masthead .wpwd-header-actions .wpwd-user-toggle:hover,
#masthead .wpwd-header-actions .wpwd-user-toggle:focus-visible {
	background: #EFF1F1;
	color: var(--heading);
}

.wpwd-user-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(47, 58, 60, 0.18);
	list-style: none;
	margin: 0;
	padding: 8px;
	z-index: 200;
	/* Click-to-open fade-down (JS toggles .is-open; document click closes it). */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity 0.24s ease 0.05s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, visibility 0s linear 0.32s;
}

.wpwd-user-menu.is-open .wpwd-user-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Invisible bridge so the pointer can cross the 10px gap without closing. */
.wpwd-user-dropdown::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.wpwd-user-dropdown li {
	margin: 0;
}

.wpwd-user-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--wpwd-ink) !important;
	text-decoration: none;
	font-size: 0.95rem;
}

.wpwd-user-dropdown a svg {
	color: var(--wpwd-sky);
	flex: 0 0 auto;
}

.wpwd-user-dropdown a:hover {
	background: var(--wpwd-bg-soft);
	color: var(--wpwd-navy) !important;
}

/*
 * The way out, marked as such. `.wpwd-user-dropdown a svg` above is (0,1,2);
 * adding the class makes this (0,2,2) so it wins without !important. The colour
 * hover needs one only because the two rules above already use it.
 */
.wpwd-user-dropdown a.is-danger svg {
	color: var(--danger);
}

.wpwd-user-dropdown a.is-danger:hover {
	background: var(--danger-light);
	color: var(--danger) !important;
}

/* Identity header at the top of the dashboard topbar dropdown: name + email,
   with a divider above the Sign Out link. Uses our own tokens, not Houzez blue. */
.wpwd-user-dropdown .wpwd-user-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 12px 11px;
	margin-bottom: 6px;
	border-bottom: 1px solid #e6ebeb;
	cursor: default;
}

.wpwd-user-dropdown .wpwd-user-id strong {
	color: var(--heading);
	font-size: 0.95rem;
	line-height: 1.3;
}

.wpwd-user-dropdown .wpwd-user-id span {
	color: #8a9899;
	font-size: 0.82rem;
	word-break: break-all;
}

/* ---------- Hero slider ---------- */

.wpwd-slider {
	position: relative;
	min-height: min(84vh, 780px);
	overflow: hidden;
	background: var(--wpwd-navy);
}

/* Mobile: the hero fills the phone screen so the slide image covers the full
   height (no navy gap below the content). The `!important` beats the theme's
   global `img { height: auto !important }`, which otherwise leaves the image at
   its natural (short) height at narrow widths. */
@media (max-width: 900px) {
	.wpwd-slider { min-height: 100svh; }
	.wpwd-slide-img { height: 100% !important; }
}

.wpwd-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease;
	display: flex;
	align-items: center;
}

/* Home hero: top-align the content so it always clears the absolute header,
   regardless of viewport height. (Vertical centring pushed the eyebrow/heading
   up under the header/logo on short viewports.) */
.wpwd-slider:not(.wpwd-product-slider) .wpwd-slide {
	align-items: flex-start;
}

/* Slide backgrounds are real <img> elements so the LCP is preload-discoverable
   and off-screen slides can lazy-load. They sit at z-index 0, beneath the
   ::before scrim (z-index auto/1) and the .wpwd-slide-inner content (z-index 2). */
.wpwd-slide-media,
.wpwd-product-hero .wpwd-slide-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.wpwd-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpwd-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Top scrim keeps the transparent header readable on bright photos,
	   layered over the diagonal gradient that carries the slide text. */
	background:
		linear-gradient(180deg, rgba(26, 32, 33, 0.8) 0%, rgba(26, 32, 33, 0.35) 15%, rgba(26, 32, 33, 0) 28%),
		linear-gradient(100deg, rgba(26, 32, 33, 0.82) 25%, rgba(26, 32, 33, 0.35) 60%, rgba(26, 32, 33, 0.15) 100%);
}

.wpwd-slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Top padding clears the transparent header: it sits at top:37px and runs to
   roughly 157px (222px logo at 808x292, plus Kadence's 20px row padding).
   At 140px the slide eyebrow collided with the logo. */
.wpwd-slide-inner {
	position: relative;
	z-index: 2;
	max-width: 1290px;
	margin: 0 auto;
	padding: 64px 24px 90px;
	width: 100%;
	color: #fff;
}

/* Below 900px Kadence swaps to the shorter mobile header with no nav row, so
   the desktop offset would just waste vertical space. */
@media (max-width: 900px) {
	.wpwd-slide-inner { padding-top: 40px; }
}

@media (max-width: 640px) {
	.wpwd-slide-inner { padding-top: 36px; }
}

.wpwd-slide-title {
	color: #fff;
	font-family: var(--wpwd-display);
	font-size: clamp(2.1rem, 4.8vw, 3.8rem);
	line-height: 1.06;
	margin: 0.35em 0;
	max-width: 15em;
	font-weight: 600;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Second heading line in the theme gradient. */
.wpwd-grad {
	display: block;
	background: linear-gradient(92deg, var(--wpwd-sky) 5%, var(--wpwd-amber) 95%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Product hero slider keeps the shorter product-hero height. */
.wpwd-product-slider {
	min-height: min(66vh, 620px);
}

/* -------- Hero refactor (home hero) — matches the reference design -------- */
/* Short teal accent rule beneath the heading (home hero only). */
.wpwd-slider:not(.wpwd-product-slider) .wpwd-slide-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--primary);
	margin: 22px 0 0;
}

/* Hero CTAs: rounded rectangle rather than a full pill, per the reference. */
.wpwd-slider .wpwd-cta-row .wpwd-btn {
	border-radius: 10px;
}

/* Trust strip sits flush under the hero with square corners. */
.wpwd-trust-bar {
	border-radius: 0;
}

/* Trust strip rendered INSIDE the hero: pinned flush along the bottom of the
   photo (no white gap). .wpwd-slider is position:relative already. */
/* Separate band directly below the hero image (no longer overlaid on the photo). */
.wpwd-hero-trust {
	position: relative;
}
/* Hero copy padding — extra room so the CTA buttons sit clear above the trust band. */
.wpwd-slider .wpwd-slide-inner {
	padding-bottom: 120px;
}
@media (max-width: 640px) {
	.wpwd-slider .wpwd-slide-inner {
		padding-bottom: 150px;
	}
}

/* -------- Button icons -------- */
/* Auto arrow on public CTA buttons only — scoped to CTA containers so the shared
   .wpwd-btn class on admin/dashboard buttons is never touched.

   AN INLINE SVG MASK, NOT A WEBFONT GLYPH. This was `content: "\f061"` with
   font-family "Font Awesome 5 Free", and it rendered a hollow box on every
   public CTA on the site — because that font is never loaded. Elementor 4.x
   turns on its `e_font_icon_svg` experiment by default, which makes it render
   icons as inline SVG and stop registering `elementor-icons-fa-solid` on public
   pages; the force-enqueue that was meant to guarantee the font was gated on
   that handle being registered, so it silently did nothing.

   A mask has no such dependency: `background: currentColor` shows through it,
   so the arrow follows the button's text colour, and there is nothing to fail
   to load. Same pattern as .wpwd-dropzone__icon below. Both the prefixed and
   unprefixed properties are required — Safari needs -webkit-mask, and without
   the unprefixed one newer browsers get nothing. */
.wpwd-cta-row a.wpwd-btn::after,
.wpwd-cta-band-btns a.wpwd-btn::after,
.wpwd-center-row a.wpwd-btn::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.55em;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* The hero renders its own picked icons; the WhatsApp button keeps its brand icon —
   suppress the CSS arrow on both so nothing doubles up. */
.wpwd-slider .wpwd-cta-row a.wpwd-btn::after,
a.wpwd-btn-whatsapp::after {
	content: none;
}

/* Spacing + colour for icons rendered inside a button (hero arrow / WhatsApp).
   Elementor renders picked icons as inline <svg class="e-font-icon-svg">, so the
   icon must inherit the button's text colour via currentColor. */
.wpwd-btn i,
.wpwd-btn svg {
	width: 1em;
	height: 1em;
	vertical-align: -2px;
	margin: 0 0.1em;
}
.wpwd-btn svg {
	fill: currentColor;
}

.wpwd-product-slider .wpwd-slide-inner {
	padding-top: 170px;
}

.wpwd-slide.is-active .wpwd-eyebrow,
.wpwd-slide.is-active .wpwd-slide-title,
.wpwd-slide.is-active .wpwd-hero-sub,
.wpwd-slide.is-active .wpwd-cta-row {
	animation: wpwd-rise 0.7s ease both;
}

.wpwd-slide.is-active .wpwd-slide-title { animation-delay: 0.08s; }
.wpwd-slide.is-active .wpwd-hero-sub   { animation-delay: 0.16s; }
.wpwd-slide.is-active .wpwd-cta-row    { animation-delay: 0.24s; }

@keyframes wpwd-rise {
	from { transform: translateY(22px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.wpwd-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	padding: 0;
	margin: 0;
	border-radius: 999px;
	aspect-ratio: 1 / 1;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(26, 32, 33, 0.35);
	color: #fff;
	line-height: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wpwd-slider-arrow svg {
	display: block;
}

.wpwd-slider-arrow:hover {
	background: var(--wpwd-amber);
	border-color: var(--wpwd-amber);
	color: #FFFFFF;
}

.wpwd-prev { left: 22px; }
.wpwd-next { right: 22px; }

.wpwd-slider-dots {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 10px;
}

.wpwd-slider-dots button {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}

.wpwd-slider-dots button.is-active {
	background: var(--wpwd-amber);
	transform: scale(1.25);
}

/* ---------- Eyebrow with icon ---------- */

.wpwd-eyebrow2 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wpwd-sky);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	margin-bottom: 0.4em;
}

.wpwd-center-row {
	display: flex;
	justify-content: center;
	width: 100%;
}

.wpwd-btn-outline {
	background: transparent;
	color: var(--primary) !important;
	border: 2px solid var(--primary);
	box-shadow: none;
}

.wpwd-btn-outline:hover {
	background: var(--primary);
	color: #fff !important;
	transform: translateY(-2px);
}

/* ---------- About section ---------- */

.wpwd-about-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 900px) {
	.wpwd-about-grid { grid-template-columns: 1fr; }
}

.wpwd-about-media img {
	width: 100%;
	border-radius: 18px;
	border: 1px solid var(--wpwd-line);
	box-shadow: 24px 24px 0 rgba(3, 157, 150, 0.14);
}

.wpwd-about-body h2 {
	color: var(--wpwd-navy);
	margin-top: 0;
}

/* ---------- Benefits ---------- */

.wpwd-benefits-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.wpwd-benefits-grid { grid-template-columns: 1fr; }
}

.wpwd-benefits-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

/* Keep 2 benefits per row on mobile (was 1 col); tighten gap/padding so both fit. */
@media (max-width: 560px) {
	.wpwd-benefits-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.wpwd-benefit { padding: 16px 14px; }
}

.wpwd-benefit {
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-top: 4px solid transparent;
	border-radius: 14px;
	padding: 22px 20px;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.wpwd-benefit:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(47, 58, 60, 0.12);
	border-top-color: var(--gold);
}

.wpwd-benefit-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(3, 157, 150, 0.14);
	color: var(--wpwd-navy-2);
	margin-bottom: 12px;
}

.wpwd-benefit strong {
	display: block;
	color: var(--wpwd-navy);
	margin-bottom: 4px;
}

.wpwd-benefit p {
	color: var(--wpwd-muted);
	font-size: 0.95rem;
	margin: 0;
}

.wpwd-benefits-media img {
	width: 100%;
	border-radius: 18px;
	border: 1px solid var(--wpwd-line);
	box-shadow: -24px 24px 0 rgba(3, 157, 150, 0.16);
}

/* ---------- Our services ---------- */

.wpwd-services-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: end;
	margin-bottom: 34px;
}

@media (max-width: 900px) {
	.wpwd-services-head { grid-template-columns: 1fr; }
}

.wpwd-services-head h2 {
	color: var(--wpwd-navy);
	margin: 0.15em 0 0;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.wpwd-services-intro {
	color: var(--wpwd-muted);
	margin: 0;
}

.wpwd-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 1024px) {
	.wpwd-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.wpwd-services-grid { grid-template-columns: 1fr; }
}

.wpwd-service-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wpwd-line);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--wpwd-ink) !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wpwd-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(47, 58, 60, 0.14);
	border-color: var(--wpwd-sky);
}

.wpwd-service-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--wpwd-bg-soft);
}

.wpwd-service-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Icon tile overlapping the photo's bottom edge. */
.wpwd-service-icon {
	position: absolute;
	right: 18px;
	bottom: -26px;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--wpwd-sky), var(--wpwd-navy-2));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 22px rgba(47, 58, 60, 0.25);
	z-index: 2;
}

.wpwd-service-body {
	position: relative;
	display: block;
	padding: 18px 20px 22px;
}

.wpwd-service-num {
	display: block;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--wpwd-line);
	line-height: 1;
	margin-bottom: 2px;
}

.wpwd-service-body strong {
	display: block;
	color: var(--wpwd-navy);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.02rem;
	margin-bottom: 6px;
}

.wpwd-service-body p {
	color: var(--wpwd-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------- Delivery steps: parallax band ---------- */

.wpwd-steps-parallax {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-color: var(--wpwd-navy);
	padding: clamp(56px, 8vw, 96px) 24px;
}

@media (max-width: 1024px) {
	/* Fixed backgrounds are unreliable on touch devices. */
	.wpwd-steps-parallax { background-attachment: scroll; }
}

.wpwd-steps-parallax::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 32, 33, 0.88) 0%, rgba(47, 58, 60, 0.78) 100%);
}

.wpwd-steps-inner {
	position: relative;
	max-width: 1290px;
	margin: 0 auto;
}

.wpwd-steps-parallax .wpwd-section-title {
	color: #fff;
}

.wpwd-steps-sub {
	color: #C9E9E7 !important;
}

.wpwd-steps-parallax .wpwd-steps li {
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

/* ---------- Process steps ---------- */

.wpwd-steps {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	counter-reset: none;
}

@media (max-width: 1024px) {
	.wpwd-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.wpwd-steps { grid-template-columns: 1fr; }
}

.wpwd-steps li {
	position: relative;
	background: var(--wpwd-bg-soft);
	border-radius: 14px;
	padding: 26px 22px 20px;
	border-top: 4px solid var(--wpwd-sky);
}

.wpwd-step-num {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wpwd-navy);
	color: var(--wpwd-sky);
	font-weight: 800;
	margin-bottom: 12px;
}

.wpwd-steps strong {
	display: block;
	color: var(--wpwd-navy);
	margin-bottom: 6px;
}

.wpwd-steps p {
	color: var(--wpwd-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------- Products showcase (overlay cards) ---------- */

.wpwd-overlay-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-top: 26px;
}

@media (max-width: 1024px) {
	.wpwd-overlay-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	.wpwd-overlay-grid { grid-template-columns: repeat(2, 1fr); }
}

.wpwd-overlay-card {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--wpwd-line);
}

.wpwd-overlay-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.wpwd-overlay-card:hover img {
	transform: scale(1.06);
}

.wpwd-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
	background: linear-gradient(180deg, rgba(47, 58, 60, 0) 45%, rgba(47, 58, 60, 0.88) 100%);
}

.wpwd-overlay strong {
	color: #fff;
	font-size: 1.02rem;
	line-height: 1.25;
}

.wpwd-overlay em {
	color: var(--wpwd-sky);
	font-style: normal;
	font-size: 0.85rem;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wpwd-overlay-card:hover .wpwd-overlay em {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Products showcase: 3-up cards ---------- */

.wpwd-flip-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 30px;
}

@media (max-width: 1024px) {
	.wpwd-flip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.wpwd-flip-grid { grid-template-columns: 1fr; }
}

.wpwd-flip-card {
	position: relative;
	display: block;
	/* Height is driven by the in-flow <img>'s aspect-ratio below (iOS Safari
	   reliably honours aspect-ratio on a replaced <img> but NOT on an empty box
	   whose only children are absolutely positioned — which collapsed the card
	   to 0 height on mobile and overlapped the next section). min-height is a
	   last-ditch floor if the image fails to load. */
	min-height: 260px;
	overflow: hidden;
	text-decoration: none !important;
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(47, 58, 60, 0.16);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.wpwd-flip-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(47, 58, 60, 0.28), 0 34px 70px rgba(47, 58, 60, 0.38);
}

/* The WebP plugin wraps the image in <picture>; make the wrapper a block so the
   in-flow image fills the card width with no inline-baseline gap. */
.wpwd-flip-card picture {
	display: block;
	width: 100%;
}

.wpwd-flip-card img {
	position: relative;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 4 / 4.6;
	object-fit: cover !important;
	display: block;
}

.wpwd-flip-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(47, 58, 60, 0) 45%, rgba(47, 58, 60, 0.88) 100%);
}

.wpwd-flip-front-label {
	position: absolute;
	left: 22px;
	right: 74px;
	bottom: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wpwd-flip-front-label em {
	color: var(--wpwd-sky);
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.wpwd-flip-front-label strong {
	color: #fff;
	font-size: 1.35rem;
	line-height: 1.2;
}

.wpwd-card-arrow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wpwd-sky);
	color: var(--heading);
	opacity: 0;
	transform: translateY(10px) scale(0.7);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpwd-flip-card:hover .wpwd-card-arrow {
	opacity: 1;
	transform: none;
	transition-delay: 0.18s;
}

/* ---------- Product detail pages ---------- */

body.wpwd-product-page .entry-header,
body.wpwd-product-page .entry-title {
	display: none;
}

.wpwd-product-hero {
	position: relative;
	min-height: min(66vh, 620px);
	background-size: cover;
	background-position: center;
	background-color: var(--wpwd-navy);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.wpwd-product-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(26, 32, 33, 0.8) 0%, rgba(26, 32, 33, 0.35) 15%, rgba(26, 32, 33, 0) 28%),
		linear-gradient(100deg, rgba(26, 32, 33, 0.85) 25%, rgba(26, 32, 33, 0.4) 60%, rgba(26, 32, 33, 0.18) 100%);
}

.wpwd-product-hero .wpwd-slide-inner {
	padding-top: 170px;
}

.wpwd-product-about h2 {
	color: var(--wpwd-navy);
	max-width: 24em;
}

/* Why-choose band */
.wpwd-why-band {
	background:
		radial-gradient(900px 400px at 90% 0%, rgba(3, 157, 150, 0.25), transparent 60%),
		linear-gradient(135deg, var(--wpwd-navy) 0%, var(--wpwd-navy-2) 60%, #027F79 100%);
	color: #fff;
	padding: clamp(40px, 6vw, 72px) 24px;
}

.wpwd-why-inner {
	max-width: 1290px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 900px) {
	.wpwd-why-inner { grid-template-columns: 1fr; }
}

/* Staggered image collage — adapts to 1-4 images (left tall + stacked right) */
.wpwd-why-media {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	gap: 14px;
}

.wpwd-why-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* 1 image → single tall */
.wpwd-why-media--1 { grid-template-columns: 1fr; }
.wpwd-why-media--1 img { aspect-ratio: 4 / 3.4; }

/* 2 → left tall + right */
.wpwd-why-media--2 { grid-template-areas: "a b"; }
.wpwd-why-media--2 > :nth-child(1) { grid-area: a; aspect-ratio: 3 / 4; }

/* 3 → left tall + 2 stacked (reference) */
.wpwd-why-media--3 {
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "a b" "a c";
}
.wpwd-why-media--3 > :nth-child(1) { grid-area: a; aspect-ratio: 3 / 4.4; }
.wpwd-why-media--3 > :nth-child(2) { grid-area: b; margin-top: 22px; }
.wpwd-why-media--3 > :nth-child(3) { grid-area: c; }

/* 4 → left tall + 3 stacked */
.wpwd-why-media--4 {
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas: "a b" "a c" "a d";
}
.wpwd-why-media--4 > :nth-child(1) { grid-area: a; aspect-ratio: 3 / 5; }
.wpwd-why-media--4 > :nth-child(2) { grid-area: b; margin-top: 18px; }
.wpwd-why-media--4 > :nth-child(3) { grid-area: c; }
.wpwd-why-media--4 > :nth-child(4) { grid-area: d; }

@media (max-width: 560px) {
	.wpwd-why-media {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 10px;
	}
	.wpwd-why-media > * {
		grid-area: auto !important;
		aspect-ratio: 1 / 1;
		margin-top: 0 !important;
	}
	.wpwd-why-media--1 { grid-template-columns: 1fr; }
}

.wpwd-why-body h2 {
	color: #fff;
}

.wpwd-why-copy {
	color: #DFF2F1;
	line-height: 1.7;
}

.wpwd-why-copy > * + * {
	margin-top: 12px;
}

.wpwd-why-copy ul,
.wpwd-why-copy ol {
	margin: 0;
	padding-left: 1.25em;
}

.wpwd-why-copy li + li {
	margin-top: 6px;
}

.wpwd-why-copy a {
	color: #fff;
	text-decoration: underline;
}

.wpwd-why-copy strong {
	color: #fff;
}

.wpwd-checklist-dark li {
	background: rgba(255, 255, 255, 0.08);
	color: #DFF2F1;
}

/* Tabs */
.wpwd-tabs-nav {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 28px;
}

.wpwd-tabs-nav button {
	border: 1px solid var(--wpwd-line);
	background: #fff;
	color: var(--wpwd-navy);
	font-weight: 700;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wpwd-tabs-nav button:hover {
	border-color: var(--wpwd-sky);
}

.wpwd-tabs-nav button.is-active {
	background: var(--wpwd-navy);
	border-color: var(--wpwd-navy);
	color: #fff;
}

.wpwd-tab-panel {
	display: none;
}

.wpwd-tab-panel.is-active {
	display: block;
	animation: wpwd-rise 0.35s ease;
}

.wpwd-tab-about img {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--wpwd-line);
}

.wpwd-tab-about h3,
.wpwd-measure h3,
.wpwd-tab-panel h3 {
	color: var(--wpwd-navy);
	margin-top: 0;
}

/* Gallery. Columns pack each photo under the one above it, so a short image
   does not leave a tall empty cell beside a portrait. The only space is the
   4px column gap and the 4px margin under each figure (figure's own margin
   is larger than that). */
.wpwd-gallery-grid {
	column-count: 3;
	column-gap: 4px;
}

@media (max-width: 900px) {
	.wpwd-gallery-grid { column-count: 2; }
}

.wpwd-gallery-grid > .wpwd-gallery-item {
	break-inside: avoid;
	margin: 0 0 4px;
	width: 100%;
}

.wpwd-gallery-grid > .wpwd-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
 * Filterable gallery widget (windoors-gallery-pro): filter tabs + grid/masonry
 * + hover caption/zoom + Elementor lightbox. Card height is IMG-driven (its own
 * aspect-ratio), never a bare aspect-ratio box — so it can't collapse on iOS.
 * ---------------------------------------------------------------------- */
.wpwd-gal-wrap { --wpwd-gal-gap: 16px; }

.wpwd-gal-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 26px;
}
.wpwd-gal-filter button {
	font: inherit;
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--wpwd-line);
	background: transparent;
	color: var(--wpwd-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wpwd-gal-filter button:hover { border-color: var(--accent); color: var(--wpwd-navy); }
.wpwd-gal-filter button.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.wpwd-gal-filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Grid layout */
.wpwd-gal {
	display: grid;
	gap: var(--wpwd-gal-gap);
}
.wpwd-gal[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.wpwd-gal[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.wpwd-gal[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* Masonry layout (CSS columns — no JS library) */
.wpwd-gal--masonry {
	display: block;
	column-gap: var(--wpwd-gal-gap);
}
.wpwd-gal--masonry[data-cols="2"] { column-count: 2; }
.wpwd-gal--masonry[data-cols="3"] { column-count: 3; }
.wpwd-gal--masonry[data-cols="4"] { column-count: 4; }
.wpwd-gal--masonry .wpwd-gal-item {
	break-inside: avoid;
	margin-bottom: var(--wpwd-gal-gap);
	display: block;
}

/* Item */
.wpwd-gal-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--wpwd-line);
	background: var(--wpwd-line);
}
.wpwd-gal-item .wpwd-gal-link { display: block; text-decoration: none; }
/* The WebP plugin wraps <img> in <picture>; match as a descendant. */
.wpwd-gal-item picture { display: block; width: 100%; line-height: 0; }
.wpwd-gal-item img {
	width: 100% !important;
	max-width: none !important;
	display: block;
	transition: transform 0.4s ease;
}
.wpwd-gal--grid .wpwd-gal-item img {
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover !important;
}
.wpwd-gal--masonry .wpwd-gal-item img { height: auto !important; }
.wpwd-gal-item:hover img { transform: scale(1.06); }

/* Hover caption */
.wpwd-gal-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 34px 16px 14px;
	color: #fff;
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.25;
	background: linear-gradient(180deg, rgba(46, 58, 59, 0) 0%, rgba(46, 58, 59, 0.82) 100%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.wpwd-gal-item:hover .wpwd-gal-cap,
.wpwd-gal-item:focus-within .wpwd-gal-cap { opacity: 1; transform: none; }

.wpwd-gal-item.is-hidden { display: none !important; }

@media (max-width: 900px) {
	.wpwd-gal[data-cols] { grid-template-columns: repeat(2, 1fr); }
	.wpwd-gal--masonry[data-cols] { column-count: 2; }
}
@media (max-width: 600px) {
	.wpwd-gal[data-cols] { grid-template-columns: 1fr; }
	.wpwd-gal--masonry[data-cols] { column-count: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.wpwd-gal-item img, .wpwd-gal-cap { transition: none; }
}

/* How to measure */
.wpwd-measure-steps {
	margin: 0 0 22px;
	padding-left: 0;
	list-style: none;
	counter-reset: wpwd-step;
}

.wpwd-measure-steps li {
	counter-increment: wpwd-step;
	position: relative;
	padding: 10px 0 10px 52px;
	color: var(--wpwd-ink);
}

.wpwd-measure-steps li::before {
	content: counter(wpwd-step);
	position: absolute;
	left: 0;
	top: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wpwd-bg-soft);
	border: 2px solid var(--wpwd-sky);
	color: var(--wpwd-navy);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpwd-measure-media {
	display: grid;
	gap: 16px;
}

.wpwd-measure-media img {
	width: 100%;
	border-radius: 14px;
	border: 1px solid var(--wpwd-line);
}

.wpwd-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wpwd-navy);
	margin-top: 10px;
}

.wpwd-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wpwd-video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #C9E9E7;
	text-align: center;
	padding: 20px;
}

.wpwd-video-placeholder span {
	display: flex;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wpwd-amber);
	color: #FFFFFF;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin-bottom: 12px;
}

/* Downloads */
.wpwd-downloads {
	display: grid;
	gap: 12px;
}

.wpwd-download {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px 14px 46px;
	position: relative;
	border: 1px solid var(--wpwd-line);
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--wpwd-ink) !important;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wpwd-download::before {
	content: "↧";
	position: absolute;
	left: 14px;
	top: 14px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(3, 157, 150, 0.16);
	color: var(--wpwd-navy-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.wpwd-download:hover {
	border-color: var(--wpwd-sky);
	transform: translateX(3px);
}

.wpwd-download strong {
	color: var(--wpwd-navy);
}

.wpwd-download span {
	color: var(--wpwd-muted);
	font-size: 0.9rem;
}

/* FAQ */
.wpwd-faq-list {
	max-width: 820px;
	margin: 0 auto;
}

.wpwd-faq-item {
	border: 1px solid var(--wpwd-line);
	border-radius: 12px;
	margin-bottom: 12px;
	background: #fff;
	overflow: hidden;
}

.wpwd-faq-item summary {
	cursor: pointer;
	padding: 16px 46px 16px 18px;
	font-weight: 700;
	color: var(--wpwd-navy);
	list-style: none;
	position: relative;
}

.wpwd-faq-item summary::-webkit-details-marker {
	display: none;
}

.wpwd-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wpwd-bg-soft);
	color: var(--wpwd-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	transition: transform 0.2s ease, background 0.2s ease;
}

.wpwd-faq-item[open] summary::after {
	content: "–";
	background: var(--wpwd-amber);
}

.wpwd-faq-item p {
	padding: 0 18px 16px;
	margin: 0;
	color: var(--wpwd-muted);
}

/* ---------- Trust bar (home) ---------- */

.wpwd-trust-bar {
	background: var(--heading);
	color: #fff;
	padding: 18px 24px;
}

.wpwd-trust-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 34px;
}

.wpwd-trust-item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.wpwd-trust-item svg {
	color: var(--accent);
	flex: none;
}

.wpwd-trust-stars {
	color: var(--gold);
	letter-spacing: 1px;
	font-size: 0.95rem;
}

.wpwd-trust-item + .wpwd-trust-item::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	margin-right: 24px;
	flex: none;
}

@media (max-width: 900px) {
	.wpwd-trust-inner {
		gap: 12px 22px;
	}

	.wpwd-trust-item {
		font-size: 0.85rem;
	}

	.wpwd-trust-item + .wpwd-trust-item::before {
		display: none;
	}
}

@media (max-width: 560px) {
	.wpwd-trust-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
	}

	.wpwd-trust-item {
		white-space: normal;
	}
}

/* ---------- Shop by category cards ---------- */

.wpwd-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	margin-top: 32px;
}

.wpwd-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--background);
	border: 1px solid var(--border);
	border-top: 4px solid transparent;
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wpwd-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(47, 58, 60, 0.13);
	border-top-color: var(--gold);
}

.wpwd-cat-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--section-bg);
	overflow: hidden;
}

.wpwd-cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.wpwd-cat-card:hover .wpwd-cat-media img {
	transform: scale(1.05);
}

.wpwd-cat-body {
	padding: 26px 26px 28px;
}

.wpwd-cat-body h3 {
	margin: 0 0 10px;
	font-size: 1.5rem;
	line-height: 1.2;
}

.wpwd-cat-body h3 a {
	color: var(--heading);
	text-decoration: none;
}

.wpwd-cat-body h3 a:hover {
	color: var(--primary);
}

.wpwd-cat-body > p {
	margin: 0 0 18px;
	color: var(--text);
}

.wpwd-cat-links {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
}

.wpwd-cat-links a {
	color: var(--text);
	text-decoration: none;
	font-size: 0.92rem;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wpwd-cat-links a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}

.wpwd-cat-links a:hover {
	color: var(--primary);
}

.wpwd-cat-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--primary);
	text-decoration: none;
}

.wpwd-cat-more span {
	transition: transform 0.18s ease;
}

.wpwd-cat-card:hover .wpwd-cat-more span {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.wpwd-cat-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media (max-width: 480px) {
	.wpwd-cat-links {
		grid-template-columns: 1fr;
	}

	.wpwd-cat-body {
		padding: 20px 20px 22px;
	}
}

/* ---------- CTA band ---------- */

.wpwd-cta-band {
	padding: 56px 24px;
}

.wpwd-cta-band.is-soft {
	background: var(--section-bg);
}

.wpwd-cta-band.is-dark {
	background: var(--heading);
	color: #fff;
}

.wpwd-cta-band-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.wpwd-cta-band-inner h2 {
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.2;
}

.wpwd-cta-band.is-dark .wpwd-cta-band-inner h2 {
	color: #fff;
}

.wpwd-cta-band-inner p {
	margin: 0;
	color: var(--text);
}

.wpwd-cta-band.is-dark .wpwd-cta-band-inner p {
	color: rgba(255, 255, 255, 0.85);
}

.wpwd-cta-band-btns {
	justify-content: center;
}

@media (max-width: 576px) {
	.wpwd-cta-band {
		padding: 40px 20px;
	}

	/* Full-width CTAs on a phone.
	 *
	 * This used to name .wpwd-cta-band-btns alone, so exactly one band on the
	 * site got full-width buttons and every other CTA — including the twelve
	 * .wpwd-center-row "Design & Order Online" buttons and every .wpwd-cta-row —
	 * stayed a shrink-to-fit pill.
	 *
	 * flex-direction is what actually does it for .wpwd-cta-row: that container
	 * is `display: flex; flex-wrap: wrap`, so width:100% alone would still let
	 * two buttons share a line before wrapping. */
	.wpwd-cta-row,
	.wpwd-cta-band-btns {
		flex-direction: column;
	}

	.wpwd-cta-row .wpwd-btn,
	.wpwd-cta-band-btns .wpwd-btn,
	.wpwd-center-row .wpwd-btn {
		width: 100%;
		text-align: center;
	}
}

/* ---------- Trade-gated pricing ---------- */

/* The value itself is plain text (all three render paths esc_html it), so the
   padlock is a pseudo-element and the styling hangs off the row/span class. */
.wpwd-price-locked td,
span.wpwd-price-locked {
	color: var(--text);
	font-style: italic;
}

.wpwd-price-locked td::before,
span.wpwd-price-locked::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 13px;
	margin-right: 7px;
	vertical-align: -2px;
	background: currentColor;
	opacity: 0.65;
	-webkit-mask: var(--wpwd-lock-mask) center / contain no-repeat;
	mask: var(--wpwd-lock-mask) center / contain no-repeat;
}

span.wpwd-price-locked em {
	font-style: normal;
}

/* ---------- Accounts: auth cards ---------- */

.wpwd-auth-card {
	max-width: 460px;
	margin: 0 auto;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 34px 32px 30px;
	box-shadow: 0 10px 30px rgba(47, 58, 60, 0.06);
}

.wpwd-auth-card--wide { max-width: 820px; }

.wpwd-auth-title {
	margin: 0 0 6px;
	font-size: 1.55rem;
	color: var(--heading);
}

.wpwd-auth-sub {
	margin: 0 0 20px;
	color: var(--text);
}

.wpwd-auth-alt {
	margin: 14px 0 0;
	font-size: 0.92rem;
	color: var(--text);
}

.wpwd-auth-alt a { color: var(--primary); font-weight: 600; }
.wpwd-auth-alt a:hover { color: var(--primary-dark); }

.wpwd-form-heading {
	margin: 26px 0 12px;
	font-size: 1.05rem;
	color: var(--heading);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}

/* ---------- Accounts: fields ---------- */

.wpwd-field { margin: 0 0 16px; }

.wpwd-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--heading);
}

.wpwd-field input,
.wpwd-field select,
.wpwd-field textarea {
	width: 100%;
	border: 1px solid #D7D7D7;
	border-radius: 10px;
	padding: 11px 14px;
	background: var(--section-bg);
	font: inherit;
	color: var(--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wpwd-field input:focus,
.wpwd-field select:focus,
.wpwd-field textarea:focus {
	border: 2px solid var(--primary);
	background: var(--background);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
	outline: none;
	padding: 10px 13px; /* keep the box the same size as the 1px state */
}

/* -------------------------------------------------------------------------
 * GIVE THE CHEVRON BACK — and pin the colour scheme.
 *
 * TWO THEME BEHAVIOURS COLLIDE WITH EVERY RULE ABOVE THAT STYLES A SELECT.
 *
 * 1. Kadence draws a select's arrow inside the `background` SHORTHAND — colour
 *    and chevron in one declaration. Any rule that re-declares `background`
 *    wipes the arrow, and the select renders as something that looks like a
 *    plain text input with no way to tell it opens. design-flow.css:456 found
 *    this first and repaired it for two selectors; these are the rest.
 *
 * 2. A <select> with no authored `color` falls back to the UA's `FieldText`,
 *    which is BLACK under a light colour-scheme and WHITE under a dark one. The
 *    front end never declared `color-scheme`, so a visitor whose OS is in dark
 *    mode got white text on the white background these rules force. That is
 *    invisible text that only ever appears on someone else's machine, which is
 *    why it went unreported for so long.
 *
 * `color-scheme` is inherited, so declaring it on the plugin's surfaces settles
 * every native control inside them — including ones nobody has styled yet.
 * ---------------------------------------------------------------------- */

.wpwd-field select,
.wpwd-um-field select,
.wpwd-detail-form select,
.wpwd-job-line select,
.wpwd-window-pricer__row select,
.wpwd-jp-status-form select,
.wpwd-cat-form--split .acf-input select,
select.wpwd-bulk-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%23676C6D" stroke-width="2"><path d="M3 6l5 5 5-5"/></svg>');
	background-repeat: no-repeat;
	background-position: right 11px center;
}

/*
 * The dashboard's dark theme flips its tokens, so the native controls have to be
 * told as well — otherwise the browser keeps painting light scrollbars and light
 * dropdown popups inside a dark panel.
 */
.wpwd-sv,
.wpwd-dashboard-body,
.wpwd-dash[data-theme="light"] {
	color-scheme: light;
}

.wpwd-dash[data-theme="dark"] {
	color-scheme: dark;
}

.wpwd-field--check label {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 9px;
}

.wpwd-field--check input { width: auto; margin: 0; flex: none; }

.wpwd-field-help,
.wpwd-field-error {
	display: block;
	margin-top: 5px;
	font-size: 0.82rem;
	color: var(--text);
}

.wpwd-field-error {
	color: var(--danger);
	font-weight: 600;
}
/* Always in the DOM so the client-side validator has somewhere to write, but
   taking no vertical space until it says something — otherwise every field
   carries a permanent empty gap. */
.wpwd-field-error:empty { display: none; }

/* The input itself, when its field has a message. Colour is not the only
   signal: the message is right there, and aria-invalid carries it to a screen
   reader — but the red border is what the eye finds first. */
.wpwd-field.has-error input,
.wpwd-field.has-error select,
.wpwd-field.has-error textarea {
	border-color: var(--danger);
}
.wpwd-field.has-error input:focus,
.wpwd-field.has-error select:focus,
.wpwd-field.has-error textarea:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

.wpwd-req { color: var(--danger); }

.wpwd-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0 16px;
}

/* One field per row.
   ⚠ A MODIFIER, NOT A CHANGE TO .wpwd-field-row. That class pairs first/last
   name, country/county and city/postcode on this same form, and a dozen other
   forms across the plugin — stacking it globally would turn every one of them
   into a single column. Only the rows that ask for it get this. */
.wpwd-field-row--stack {
	grid-template-columns: 1fr;
}

/* Honeypot: off-screen rather than display:none, which bots detect. */
.wpwd-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Accounts: notices ---------- */

.wpwd-notice {
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 20px;
	border-left: 4px solid var(--border);
	background: var(--section-bg);
}

.wpwd-notice p, .wpwd-notice ul { margin: 0; }
.wpwd-notice ul { padding-left: 18px; }

.wpwd-notice--error {
	background: var(--danger-light);
	border-left-color: var(--danger);
	color: #7d2a20;
}

.wpwd-notice--success {
	background: #E8F6F5;
	border-left-color: var(--primary);
	color: #0b4f4c;
}

.wpwd-notice--info {
	background: var(--gold-light);
	border-left-color: var(--gold);
	color: var(--heading);
}

/* ---------- Accounts: dashboards ---------- */

.wpwd-dash-title {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	color: var(--heading);
	margin: 0 0 22px;
}

.wpwd-dash-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 34px;
	align-items: start;
}

/* (Removed the stale pre-Houzez .wpwd-dash-nav white-card rule: its
   overflow:hidden + position:sticky clipped the dark-sidebar nav and blocked
   the aside's overflow-y:auto scroll. The current nav uses .wpwd-nav-* below.) */

.wpwd-panel-title {
	margin: 0 0 16px;
	font-size: 1.2rem;
	color: var(--heading);
}

.wpwd-dash-panel .wpwd-panel-title + .wpwd-auth-form,
.wpwd-dash-panel form + .wpwd-panel-title { margin-top: 28px; }

.wpwd-dash-stat { text-decoration: none !important; }
.wpwd-dash-stat strong { font-size: 1.25rem; color: var(--heading); }

.wpwd-status-banner { margin-bottom: 24px; }

.wpwd-status-pill {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.wpwd-status-pill--pending  { background: var(--gold); color: var(--heading); }
.wpwd-status-pill--approved { background: var(--primary); color: #fff; }
.wpwd-status-pill--rejected { background: #8A8A8A; color: #fff; }
.wpwd-status-pill--none     { background: var(--border); color: var(--heading); }

.wpwd-trade-promo {
	margin-top: 26px;
	padding: 26px;
	border-radius: 16px;
	background: var(--gold-light);
	border: 1px solid var(--gold);
}

.wpwd-trade-promo h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
	color: var(--heading);
}

.wpwd-trade-promo p { margin: 0 0 6px; color: var(--heading); }

/* ---------- Accounts: trade price list ---------- */

.wpwd-price-toolbar {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 12px;
}

.wpwd-price-filter {
	flex: 1 1 240px;
	border: 1px solid #D7D7D7;
	border-radius: 10px;
	padding: 10px 14px;
	font: inherit;
	background: var(--section-bg);
}

.wpwd-price-filter:focus {
	border: 2px solid var(--primary);
	outline: none;
	padding: 9px 13px;
}

.wpwd-price-count {
	margin: 0 0 10px;
	font-size: 0.86rem;
	color: var(--text);
}

.wpwd-table-scroll { overflow-x: auto; }

.wpwd-price-table { width: 100%; }
.wpwd-price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The discounted "Your price" column for accounts on a pricing tier. */
.wpwd-price-yours { font-weight: 700; color: var(--primary); }
.wpwd-price-tier { margin-bottom: 14px; }

@media (max-width: 900px) {
	.wpwd-dash-layout { grid-template-columns: 1fr; gap: 20px; }
	.wpwd-dash-nav { position: static; flex-direction: row; flex-wrap: wrap; }
	.wpwd-dash-nav a { border-bottom: 0; border-left: 0; border-top: 3px solid transparent; flex: 1 1 auto; text-align: center; }
	.wpwd-dash-nav a.is-active { border-left-color: transparent; border-top-color: var(--primary); }
}

@media (max-width: 560px) {
	.wpwd-auth-card { padding: 24px 20px; }
}

/* ======================================================================
   Houzez-style full-screen dashboard
   Scoped to .wpwd-dashboard-body so it never touches public pages.
   ====================================================================== */

/* ---- Dashboard palette override -------------------------------------------
   Redeclaring the brand tokens on the dashboard subtree re-themes every var()
   consumer inside it while :root keeps the public site on teal and amber.

   --wpwd-amber and --wpwd-amber-dark MUST be repeated here even though :root
   already aliases them to var(--primary). A custom property is substituted
   where it is DECLARED, so those aliases resolved to teal at :root and inherit
   down already-substituted — redeclaring --primary alone would leave every
   dashboard button teal. */
.wpwd-dashboard-body,
.wpwd-dash {
	--primary: #1E1E2D;
	--primary-dark: #2a2a3d;
	--wpwd-amber: #1E1E2D;
	--wpwd-amber-dark: #2a2a3d;
	--heading: #18181b;
	--text: #374151;
	--border: #e5e7eb;
	--accent: #6b7280;
	--section-bg: var(--wpwd-ui-body);
}

/* .wpwd-btn is unscoped and shared with the public site, so its teal drop
   shadow is overridden here rather than edited at source. */
.wpwd-dashboard-body .wpwd-btn {
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(79, 70, 229, 0.22);
}
.wpwd-dashboard-body .wpwd-btn-outline,
.wpwd-dashboard-body .wpwd-btn-sm.wpwd-btn-outline {
	box-shadow: none;
}

.wpwd-dashboard-body { background: var(--section-bg); }

/* Kadence's content wrapper is emptied of chrome on these pages; let our
   shell own the full width and height. */
.wpwd-dashboard-body .content-area,
.wpwd-dashboard-body .entry-content-wrap,
.wpwd-dashboard-body .entry-content,
.wpwd-dashboard-body .site-container,
.wpwd-dashboard-body #inner-wrap,
.wpwd-dashboard-body #wrapper {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Dark theme -----------------------------------------------------------
   TWO SELECTORS, ONE PALETTE, AND BOTH ARE NEEDED.

   `.wpwd-dash[data-theme]` is what the server stamps from user meta, so the
   first render is right for the user who set it. `html[data-wpwd-theme]` is
   what the inline head snippet stamps from localStorage — it runs before
   .wpwd-dash exists, which is the only moment early enough to stop a dark
   dashboard painting white for a frame. They agree in the normal case; when
   they disagree the browser's is newer, which is why it is listed second and
   wins.

   Every token below has a partner in the light block above. A token defined
   in one and not the other is not a missing colour — it is white text on a
   white cell, invisible until someone reports a "blank" screen.
   ------------------------------------------------------------------------ */
.wpwd-dash[data-theme="dark"],
html[data-wpwd-theme="dark"] .wpwd-dash,
html[data-wpwd-theme="dark"].wpwd-dashboard-body,
html[data-wpwd-theme="dark"] .wpwd-dashboard-body {
	/* Surfaces. */
	--wpwd-ui-body: #111827;
	--wpwd-ui-rail: #1f2937;
	--wpwd-ui-rail-line: rgba(255, 255, 255, 0.1);
	--wpwd-ui-topbar: #18181b;
	--wpwd-ui-topbar-line: #3f3f46;
	--wpwd-ui-card: #18181b;
	--wpwd-ui-hover: #27272a;

	/* Text. */
	--wpwd-ui-ink: #ffffff;
	--wpwd-ui-muted: #a1a1aa;
	--wpwd-ui-nav: rgba(255, 255, 255, 0.7);
	--wpwd-ui-nav-on: #ffffff;
	--wpwd-ui-nav-active: #374151;
	--wpwd-ui-nav-line: rgba(255, 255, 255, 0.16);
	--wpwd-ui-nav-dot: rgba(255, 255, 255, 0.45);

	/* Accents. The two badge colours lighten by one step: #2563eb on #1f2937
	   is only 2.9:1, which is under AA even for a large numeral. */
	--wpwd-ui-primary: #e4e4e7;
	--wpwd-ui-link: #fb923c;
	--wpwd-ui-badge-blue: #3b82f6;
	--wpwd-ui-badge-green: #10b981;
	--wpwd-ui-danger: #f87171;

	/* Shape. A hairline shadow is invisible on a dark ground, so elevation is
	   carried by the border instead and the shadow only deepens the pop-outs. */
	--wpwd-ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--wpwd-ui-shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);

	/* Table chrome + the brand aliases the dashboard subtree re-declares. */
	--wpwd-ui-bar: #27272a;
	--wpwd-ui-accent-dark: #a5b4fc;
	--wpwd-ui-tint: #1e293b;
	--wpwd-ui-line: #27272a;
	--wpwd-ui-head: #1f2937;

	--primary: #e4e4e7;
	--primary-dark: #d4d4d8;
	--wpwd-amber: #e4e4e7;
	--wpwd-amber-dark: #d4d4d8;
	--heading: #ffffff;
	--text: rgba(255, 255, 255, 0.82);
	--border: #27272a;
	--accent: #a1a1aa;
	--section-bg: var(--wpwd-ui-body);
	--background: var(--wpwd-ui-card);
}

/* The two theme icons: one is always hidden. Both ship so the swap costs no
   request and no layout shift. */
.wpwd-theme-icon { display: none; line-height: 0; }
.wpwd-dash[data-theme="light"] .wpwd-theme-icon.is-dark,
.wpwd-dash[data-theme="dark"] .wpwd-theme-icon.is-light { display: inline-flex; }

/* The logo is teal-on-white artwork; on the dark rail it needs the white
   knocked back rather than a second file to maintain. */
.wpwd-dash[data-theme="dark"] .wpwd-brandlogo,
html[data-wpwd-theme="dark"] .wpwd-brandlogo { filter: brightness(0) invert(1); opacity: 0.92; }

/* Notification row tints, restated for dark: the light ones are 95%-white
   washes and read as four shades of white on #18181b. */
.wpwd-dash[data-theme="dark"] .wpwd-bell-item.is-info    { background: rgba(37, 99, 235, 0.14); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-item.is-success { background: rgba(16, 163, 74, 0.14); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-item.is-warning { background: rgba(202, 138, 4, 0.16); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-item.is-danger  { background: rgba(220, 38, 38, 0.14); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-item:hover      { filter: brightness(1.25); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-title { color: #fff; }
.wpwd-dash[data-theme="dark"] .wpwd-bell-body  { color: rgba(255, 255, 255, 0.72); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-when  { color: var(--wpwd-ui-muted); }
.wpwd-dash[data-theme="dark"] .wpwd-bell-head,
.wpwd-dash[data-theme="dark"] .wpwd-bell-readall { background: #1f2937; color: #fff; }
.wpwd-dash[data-theme="dark"] .wpwd-bell-readall:hover { background: #27272a; }
.wpwd-dash[data-theme="dark"] .wpwd-bell-all:hover { background: #1f2937; }
/* The dark theme's own hover states. White text is correct on these grounds —
   it is stated rather than inherited from Kadence's blanket button rule, so the
   pairing is visible to the next reader and to tests/phase-61. */
.wpwd-dash[data-theme="dark"] .wpwd-bell-mute:hover { background: #3f3f46; color: var(--wpwd-ui-ink); }
.wpwd-dash[data-theme="dark"] .wpwd-user-dropdown .wpwd-user-id { border-bottom-color: #27272a; }
.wpwd-dash[data-theme="dark"] .wpwd-user-dropdown .wpwd-user-id strong { color: #fff; }
.wpwd-dash[data-theme="dark"] .wpwd-user-dropdown li a:hover,
.wpwd-dash[data-theme="dark"] .wpwd-user-dropdown li button:hover,
.wpwd-dash[data-theme="dark"] .wpwd-lang-item:hover,
.wpwd-dash[data-theme="dark"] .wpwd-search-hit:hover { background: #27272a; color: var(--wpwd-ui-ink); }
.wpwd-dash[data-theme="dark"] .wpwd-nav-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--wpwd-ui-nav-on); }
.wpwd-dash[data-theme="dark"] .wpwd-dash-search input::placeholder { color: #71717a; }
.wpwd-dash[data-theme="dark"] .wpwd-dash-search input:focus {
	border-color: var(--wpwd-ui-primary);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* App shell: pinned to the viewport with position:fixed so it escapes Kadence's
   boxed-content wrappers (padding + footer-on-bottom flex) entirely, and does NOT
   scroll itself — the sidebar and content each scroll independently (see
   .wpwd-dash-aside / .wpwd-dash-body). grid-template-rows: minmax(0,1fr) pins the
   single row to the shell height so the columns can shrink and scroll internally. */
.wpwd-dash {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: 256px 1fr;
	grid-template-rows: minmax(0, 1fr);
	overflow: hidden;
	background: var(--wpwd-ui-body);
}

/* Sit below the WordPress admin bar (32px desktop / 46px mobile). */
body.admin-bar .wpwd-dash { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .wpwd-dash { top: 46px; }
}

/* ---- Sidebar (scrolls on its own) --------------------------------------
   ONE PLACE. The background used to be set here AND overridden 3,900 lines
   further down, so whichever you edited, half the time nothing moved. The
   later block is gone; this is the whole rail. */
.wpwd-dash-aside {
	background: var(--wpwd-ui-rail);
	color: var(--wpwd-ui-nav);
	border-right: 1px solid var(--wpwd-ui-rail-line);
	display: flex;
	flex-direction: column;
	padding: 0 0 16px;
	min-height: 0;
	overflow-y: auto;
}

/* text-decoration: none is load-bearing. The brand is a bare <a>, and Kadence's
   global.min.css underlines those via .inner-link-style-normal a:not(.button) —
   which is why the wordmark shipped with a line under it while .wpwd-nav-item,
   which sets its own reset below, did not. The rail-wide reset that follows
   stops the next link added here inheriting the same surprise. */
.wpwd-dash-aside a { text-decoration: none; }

.wpwd-dash-brand {
	display: flex;
	text-decoration: none;
	align-items: center;
	justify-content: center;      /* the reference centres the mark in its row */
	height: 64px;                 /* match .wpwd-dash-topbar so the two header bands align */
	flex: 0 0 auto;
	padding: 0 16px;
	border-bottom: 1px solid var(--wpwd-ui-rail-line);
}

/* ---- Brand mark -----------------------------------------------------------
   The logo image on the wide rail, a monogram on the 76px collapsed one. Both
   are always in the markup and one is hidden, because swapping the src would
   re-request the file on every collapse. */
.wpwd-dash-brand .wpwd-brandlogo {
	height: 32px;
	width: auto;
	max-width: 100%;
	display: block;
}
.wpwd-dash-brand .wpwd-brandmark {
	display: none;                /* only the collapsed rail shows the letter */
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--wpwd-ui-radius-sm);
	background: var(--wpwd-ui-primary);
	color: #fff;
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1;
}

.wpwd-dash-nav { display: flex; flex-direction: column; padding: 12px; gap: 4px; }

.wpwd-nav-label {
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpwd-ui-muted);
	margin: 16px 16px 6px;
	font-weight: 700;
}

.wpwd-nav-label:first-child { margin-top: 0; }
/* "Visit site" is the first row in the rail now, and an administrator's sidebar
   prints no headings at all (wpwd_dashboard_nav_flatten), so the rule above no
   longer matches anything at the top. Without this the first link sits hard
   against the 64px brand header. */
.wpwd-dash-nav > .wpwd-nav-item:first-child { margin-top: 0; }

.wpwd-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--wpwd-ui-radius);
	background: transparent;
	color: var(--wpwd-ui-nav);
	text-decoration: none;
	font: inherit;
	font-weight: 500;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.wpwd-nav-item:hover {
	background: rgba(0, 0, 0, 0.04);
	color: var(--wpwd-ui-nav-on);
}

/* The active state is a pill, not a bar. The old rule also painted a gold
   left border, which on a white rail reads as a stray rule rather than an
   accent — the fill alone is the whole signal in the reference design. */
.wpwd-nav-item.is-active {
	background: var(--wpwd-ui-nav-active);
	color: var(--wpwd-ui-nav-on);
	font-weight: 600;
}

.wpwd-nav-icon { display: inline-flex; color: currentColor; flex: none; }
.wpwd-nav-item.is-active .wpwd-nav-icon { color: var(--wpwd-ui-primary); }

/* ---- Submenus (a parent that opens a group) ---- */
.wpwd-nav-caret {
	margin-left: auto;
	display: inline-flex;
	flex: none;
	transition: transform 0.15s ease;
}
.wpwd-nav-item[aria-expanded="true"] .wpwd-nav-caret { transform: rotate(180deg); }

.wpwd-nav-sub {
	list-style: none;
	margin: 2px 0 2px;
	padding: 0;
	position: relative;   /* containing block for the connector rule */
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wpwd-nav-sub[hidden] { display: none; }

/* Children line up under the parent's LABEL, not its icon, and carry no icon of
   their own. They now also get a connector rule with a dot per row — this
   REVERSES the earlier decision to indent alone, which read as a flat list once
   most of the dashboard moved under groups. */
.wpwd-nav-sub .wpwd-nav-item {
	padding-inline-start: 44px;   /* logical, so the rail mirrors under dir="rtl" */
	position: relative;
	gap: 0;
}

/* The rule sits on the centre-line of the PARENT's icon column:
   16px of .wpwd-nav-item padding + half of a 20px icon = 26px. */
.wpwd-nav-sub::before {
	content: "";
	position: absolute;
	inset-inline-start: 26px;
	top: 2px;
	bottom: 2px;
	width: 1px;
	background: var(--wpwd-ui-nav-line);
	pointer-events: none;
}

/* A SOLID dot drawn ON TOP of the rule — not a ring punching a hole in it. A
   punch-out has to be filled with the row background, which changes on hover and
   again on .is-active, so it would show as a pale disc exactly when the row is
   highlighted. */
.wpwd-nav-dot {
	position: absolute;
	inset-inline-start: 23px;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wpwd-ui-nav-dot);
	flex: none;
}
.wpwd-nav-sub .wpwd-nav-item:hover .wpwd-nav-dot { background: var(--wpwd-ui-nav-on); }
.wpwd-nav-sub .wpwd-nav-item.is-active .wpwd-nav-dot { background: var(--wpwd-ui-primary); }

/* ---- Main column (topbar pinned, body scrolls) ---- */
.wpwd-dash-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }

.wpwd-dash-topbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	height: 64px;
	background: var(--wpwd-ui-topbar);
	border-bottom: 1px solid var(--wpwd-ui-topbar-line);
	position: sticky;
	top: 0;
	z-index: 30;
}

.wpwd-dash-burger {
	display: none;
	background: none;
	border: 1px solid var(--wpwd-ui-topbar-line);
	border-radius: var(--wpwd-ui-radius-sm);
	padding: 7px;
	color: var(--wpwd-ui-ink);
	cursor: pointer;
	line-height: 0;
}

/* The logo only appears in the topbar when the rail is off-screen; on desktop
   the mark lives in the rail's own header and repeating it reads as a bug. */
.wpwd-dash-topbar .wpwd-dash-brand--mobile { display: none; border: 0; height: auto; padding: 0 4px; }

/* ---- The right-hand control cluster ----
   Every control is the same 40x40 target so the row reads as one group. The
   spacer is a real element rather than margin-left:auto on the first control,
   because which control comes first changes with capability. */
.wpwd-dash-topbar .wpwd-dash-spacer { flex: 1 1 auto; }

.wpwd-dash-tools { display: flex; align-items: center; gap: 4px; flex: none; }

.wpwd-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--wpwd-ui-radius-sm);
	background: transparent;
	color: var(--wpwd-ui-ink);
	font: inherit;
	line-height: 0;
	cursor: pointer;
	position: relative;
	transition: background 0.15s ease;
}
.wpwd-iconbtn:hover,
.wpwd-iconbtn[aria-expanded="true"] { background: var(--wpwd-ui-hover); color: var(--wpwd-ui-ink); }
.wpwd-iconbtn:focus { outline: none; }
.wpwd-iconbtn:focus-visible { outline: 2px solid var(--wpwd-ui-primary); outline-offset: 2px; }

.wpwd-dash-user { position: relative; flex: none; }

.wpwd-dash-user-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wpwd-ui-ink);
	font: inherit;
	padding: 4px 6px;
	border-radius: var(--wpwd-ui-radius-sm);
	transition: background 0.15s ease;
}

/* No blue UA-focus oval: a clean keyboard ring, a soft neutral on hover/open. */
.wpwd-dash-user-toggle:hover,
.wpwd-dash-user.is-open .wpwd-dash-user-toggle,
.wpwd-dash-user-toggle[aria-expanded="true"] { background: var(--wpwd-ui-hover); color: var(--wpwd-ui-ink); }
.wpwd-dash-user-toggle:focus { outline: none; }
.wpwd-dash-user-toggle:focus-visible { outline: 2px solid var(--wpwd-ui-primary); outline-offset: 2px; }

/* Name over role, right-aligned against the avatar. */
.wpwd-dash-userid {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.25;
}
.wpwd-dash-username { font-weight: 600; font-size: 0.875rem; color: var(--wpwd-ui-ink); }
.wpwd-dash-userrole { font-size: 0.75rem; color: var(--wpwd-ui-muted); }

.wpwd-dash-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wpwd-ui-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.85rem;
	flex: none;
}

@media (max-width: 720px) {
	.wpwd-dash-userid { display: none; }
}

/* Below this the pill, four controls and a logo cannot share 60px of height
   without the pill collapsing to an unusable stub. The search moves to the
   list screens' own toolbars, which every list already has. */
@media (max-width: 600px) {
	.wpwd-dash-search { display: none; }
}

.wpwd-dash-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* NO TOP PADDING. .wpwd-dash-head is the first child and supplies its own
	   breathing room; padding here would sit ABOVE the pinned bar in the
	   scroller's off-white, which is the grey band that appeared over the header
	   as soon as you scrolled. */
	padding: 0 30px 60px;
	width: 100%;
}

/* Trimmed in phase 65 from clamp(1.5rem, 3vw, 2rem) / 22px. The page head is
   chrome on EVERY dashboard screen and it was eating close to a fifth of a
   laptop viewport before a single row of data appeared. Every value that
   contributes to its height is reduced together — this, the head's own padding
   and bottom margin, and the two 16px slot gaps below — because trimming one in
   isolation only shifts where the space sits. */
.wpwd-dash-body .wpwd-dash-title {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	color: var(--heading);
	margin: 0 0 16px;
}
/* Page head: breadcrumb above, then title left and primary action(s) right.
   The WRAPPER is what pins, so the breadcrumb travels with the title instead of
   scrolling away from it — and a long form's Save/Cancel pair stays reachable at
   any scroll position, the job the form's footer bar used to do by floating over
   the fields.
   Solid white, not --section-bg: the off-white canvas made the pinned bar read
   as part of the page, so content sliding under it looked like a glitch. The
   bottom border is what says "this is chrome".
   top:0 is right, not top:66px: .wpwd-dash-topbar is a SIBLING of the scroller,
   so sticky already resolves against .wpwd-dash-body, which starts below it.
   No horizontal bleed is needed either — .wpwd-dash-body's 30px padding contains
   every card, so the gutters beside this bar are empty background.
   z-index 4 sits above card content but below the topbar (30), the drawer (60),
   modals (10000) and Tom Select's dropdowns, which must stay clickable over it. */
.wpwd-dash-body .wpwd-dash-head {
	position: sticky;
	top: 0;
	z-index: 4;
	background: #fff;
	border-bottom: 1px solid var(--border);
	/* THE TOP MARGIN IS 0, AND MUST STAY 0.

	   It was -30px, to cancel the body's 30px top padding. That is right at
	   scroll position 0 and wrong the moment you scroll: Blink resolves `top: 0`
	   against the sticky box's MARGIN box, so a -30px top margin parks the
	   visible bar 30px BELOW the scrollport and reveals a strip of the scroller's
	   off-white (--section-bg) between the topbar and the header. That strip was
	   the "gap above the header" — it only ever showed while scrolled, which is
	   why trimming the padding did not remove it.

	   The body's top padding was dropped instead, so this bar starts flush at the
	   top of the scroller in flow AND pins flush when stuck. The horizontal
	   -30px stays: that is the full bleed, and side margins have no effect on a
	   `top`-only sticky constraint. */
	margin: 0 -30px 14px;
	padding: 10px 30px 0;
	/* A soft drop shadow beneath the hairline, so rows read as passing UNDER the
	   header rather than being joined to it: the table's dark header band butts
	   straight against this bar while scrolling and, with only a 1px line
	   between them, the two looked like one component. */
	box-shadow: 0 6px 10px -8px rgba(15, 23, 42, 0.35);
}

.wpwd-dash-body .wpwd-dash-titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.wpwd-dash-body .wpwd-dash-crumb { margin-bottom: 2px; }
/* The 16px gap that used to sit under the <h1> now sits under the title column,
   so the subtitle can tuck against the title instead of being pushed 16px off
   it. Moving it rather than adding a second gap keeps the head the same height
   on the screens that set no subtitle. */
.wpwd-dash-body .wpwd-dash-titlewrap { margin-bottom: 8px; min-width: 0; }
.wpwd-dash-body .wpwd-dash-titlerow .wpwd-dash-title { margin-bottom: 0; }
.wpwd-dash-body .wpwd-dash-subtitle {
	margin: 2px 0 0;
	font-size: 0.82rem;
	color: var(--wpwd-ui-muted, #64748B);
}
/* Collapses to nothing on the screens that never call wpwd_page_subtitle(),
   so they keep their old header height exactly. */
.wpwd-dash-body .wpwd-dash-subtitle:empty { display: none; }
.wpwd-dash-body .wpwd-dash-titleaction { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wpwd-dash-body .wpwd-dash-titleaction:empty { display: none; }
.wpwd-dash-body .wpwd-dash-titleaction .wpwd-cat-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The panel helpers already have their own titles; the dashboard section
   wrapper padding is provided by .wpwd-dash-body, so neutralise the public
   .wpwd-section top padding here. */
.wpwd-dash-body .wpwd-section { padding: 0; margin: 0 0 26px; }

/* ---- Pinned footer bar -----------------------------------------------------
   Hosts two things, never at once: a list screen's pagination (.wpwd-pager) and
   a form screen's Save/Cancel bar (.wpwd-formbar).

   A third flex child of .wpwd-dash-main, AFTER the scrolling body. That is the
   whole mechanism — no position: fixed, no z-index, no reserved padding: the
   body is `flex: 1 1 auto` and scrolls inside itself, so anything after it is
   simply the last row of a full-height column and cannot be scrolled away from.
   (.wpwd-dash-body's own `padding-bottom: 60px` already keeps the final table
   row clear of this bar.)

   :empty collapses it on every screen that sets no pager — a form, a profile,
   a dashboard — so those keep the full height they have now. The wrapper is
   still emitted on those screens because the SPA needs a node to write into. */
.wpwd-dash-footer {
	flex: 0 0 auto;
	background: #fff;
	border-top: 1px solid var(--border);
}
.wpwd-dash-footer:empty { display: none; }

.wpwd-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 9px 30px;
	font-size: 0.85rem;
}
.wpwd-pager-count { color: var(--wpwd-ui-muted); }
.wpwd-pager-nav { display: flex; align-items: center; gap: 4px; }

.wpwd-pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 6px;
	border: 1px solid var(--wpwd-ui-line);
	background: #fff;
	color: var(--wpwd-ui-accent-dark);
	text-decoration: none;
	line-height: 1;
	font-size: 0.85rem;
}
.wpwd-pager-btn:hover { background: var(--wpwd-ui-tint); }
.wpwd-pager-btn.is-current {
	background: var(--wpwd-ui-bar);
	border-color: var(--wpwd-ui-bar);
	color: #fff;
	font-weight: 600;
}
/* Disabled arrows keep their box so the bar does not jump width at either end. */
.wpwd-pager-btn.is-off {
	color: #CBD5E1;
	background: #fff;
	cursor: default;
}

/* ---- The form Save/Cancel bar ---------------------------------------------
   Cancel hard left, the save group hard right. Same padding as .wpwd-pager so
   the two occupy the strip identically and the bar does not appear to shift
   height when you move between a list and a form.

   THIS REPLACED A `position: sticky; bottom: 0` BAR INSIDE THE FORM CARD, which
   was removed because on any form taller than the viewport it lifted off the
   card and painted its opaque background over the fields behind it — a sticky
   box inside the scroller always ends up over the content it scrolls past.
   Living out here instead, as a flex row after .wpwd-dash-body, it cannot cover
   a field: the field's scrollport ends where this bar begins. Do not move it
   back into the panel, and do not give it position: sticky. */
.wpwd-formbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 30px;
}
.wpwd-formbar .wpwd-btn { min-width: 120px; }
/* Icon-only actions (the opportunity trash control) stay square beside Save. */
.wpwd-formbar .wpwd-btn.wpwd-btn-icon,
.wpwd-dashboard-body .wpwd-opp-head-actions .wpwd-btn.wpwd-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	flex: 0 0 auto;
	line-height: 0;
}

/* ---- List footer: assign bar + pager on one strip ---------------------------
   The mass-assign bars (Leads and Customers) used to sit under the table, so
   reaching them meant scrolling past every row they act on. They ride here now,
   composed with the pager into ONE string at the call site because
   wpwd_page_footer() is last-writer-wins by design (see wpwd_footer_bar()).

   ⚠ THIS WRAPPER OWNS THE PADDING, and it is the same `9px 30px` .wpwd-pager
   and .wpwd-formbar carry — that shared value is what keeps the footer strip the
   same height whether you are on a list, a form or a list with an assign bar.
   The nested pager therefore gives its own padding up; it keeps its flex layout.

   A screen with no assign bar is not wrapped at all, so `.wpwd-dash-footer:empty`
   still collapses on forms and profiles — a wrapper div is never empty. */
.wpwd-footbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 9px 30px;
}
.wpwd-dashboard-body .wpwd-footbar .wpwd-cm-assign {
	/* Flat inside the strip: the card border and tinted ground it wears under a
	   table would draw a second box inside the footer's own hairline. */
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	flex: 1 1 auto;
}
.wpwd-footbar .wpwd-pager { padding: 0; flex: 0 1 auto; }
/* On a narrow screen the two stack, and the pager should not be left-aligned
   under a full-width assign row. */
@media (max-width: 900px) {
	.wpwd-footbar { padding: 9px 18px; }
	.wpwd-footbar .wpwd-pager { flex: 1 1 100%; justify-content: space-between; }
	.wpwd-dashboard-body .wpwd-footbar .wpwd-cm-assign-hint { display: none; }
}

@media (max-width: 900px) {
	.wpwd-pager { padding: 9px 18px; }
	.wpwd-formbar { padding: 9px 18px; gap: 8px; }
	/* Buttons share the width rather than overflowing it. */
	.wpwd-formbar .wpwd-btn { flex: 1 1 0; min-width: 0; }
	.wpwd-formbar .wpwd-form-savegroup { flex: 1 1 auto; gap: 8px; }
	/* The spacer that keeps Save right when there is no Cancel must not grow. */
	.wpwd-formbar > span:empty { display: none; }
}

/* ---- Stat tiles ---- */
.wpwd-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 18px;
	margin-bottom: 26px;
}

.wpwd-dash-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 20px 18px;
	text-decoration: none !important;
	border-top: 4px solid transparent;
}
.wpwd-dash-stat:hover { border-top-color: var(--gold); }

.wpwd-stat-icon {
	display: inline-flex;
	color: var(--primary);
	background: rgba(3, 157, 150, 0.12);
	width: 40px;
	height: 40px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}

.wpwd-stat-value {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--heading);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.wpwd-stat-label { color: var(--text); font-size: 0.9rem; }

/* ---- Saved products ---- */
.wpwd-saved-card { position: relative; }
.wpwd-saved-link { display: block; text-decoration: none !important; color: inherit !important; }

.wpwd-save-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 16px 24px;
	background: var(--section-bg);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	color: var(--heading);
	font-weight: 600;
}

/* ---- Favourite heart ---- */
.wpwd-fav { display: inline-block; margin: 0; }

.wpwd-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--background);
	color: var(--text);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.wpwd-fav-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.wpwd-fav-btn:hover { color: var(--gold-deep); border-color: var(--gold); transform: translateY(-1px); }
.wpwd-fav-btn.is-on { color: #d13c2f; border-color: #d13c2f; }
.wpwd-fav-btn.is-on svg { fill: currentColor; }

.wpwd-saved-card .wpwd-fav {
	position: absolute;
	top: 12px;
	right: 12px;
}
.wpwd-saved-card .wpwd-fav-btn { background: rgba(255, 255, 255, 0.92); }

/* ---- Scrim (mobile drawer backdrop) ---- */
.wpwd-dash-scrim {
	position: fixed;
	inset: 0;
	background: rgba(15, 24, 23, 0.5);
	z-index: 35;
	border: 0;
}

/* ---- Responsive: off-canvas sidebar ---- */
@media (max-width: 900px) {
	.wpwd-dash { grid-template-columns: 1fr; }

	.wpwd-dash-aside {
		position: fixed;
		top: 0;
		left: 0;
		width: 270px;
		height: 100vh;
		overflow-y: auto;
		z-index: 40;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}

	/* Sit the drawer below the admin bar (46px on mobile) so it doesn't overlap. */
	body.admin-bar .wpwd-dash-aside { top: 46px; height: calc(100vh - 46px); }

	.wpwd-dash[data-collapsed="false"] .wpwd-dash-aside { transform: translateX(0); }
	.wpwd-dash[data-collapsed="false"] .wpwd-dash-scrim { display: block; }
	.wpwd-dash[data-collapsed="true"] .wpwd-dash-scrim { display: none; }

	.wpwd-dash-burger { display: inline-flex; }
	/* The rail is off-canvas at this width, so the topbar is the only place
	   left carrying the brand. On desktop it would be the same mark twice. */
	.wpwd-dash-topbar .wpwd-dash-brand--mobile { display: flex; }
	.wpwd-dash-topbar .wpwd-dash-brand--mobile .wpwd-brandlogo { height: 28px; }
	.wpwd-dash-topbar .wpwd-dash-brand--mobile .wpwd-brandmark { display: none; }
	/* The search pill needs the full row on a phone; the icon cluster keeps
	   its place because it is a fixed-width flex sibling. */
	.wpwd-dash-search { margin: 0; max-width: none; }
	.wpwd-dash-body { padding: 0 18px 50px; }

	/* The head's horizontal bleed has to match the body padding beside it
	   exactly, or the bar stops short of the card on both sides. The TOP stays
	   0 for the same reason it does on desktop — see the rule up there. */
	.wpwd-dash-body .wpwd-dash-head {
		margin: 0 -18px 18px;
		padding: 12px 18px 0;
	}
}

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

/* ---------- Register: account-type switch ---------- */

.wpwd-regswitch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 4px 0 22px;
}

.wpwd-regswitch-opt {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wpwd-regswitch-opt input {
	margin-top: 2px;
	accent-color: var(--primary);
	flex: none;
}

.wpwd-regswitch-opt span { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; color: var(--text); }
.wpwd-regswitch-opt strong { color: var(--heading); font-size: 0.98rem; }

.wpwd-regswitch-opt:has(input:checked) {
	border-color: var(--primary);
	background: rgba(3, 157, 150, 0.06);
}

.wpwd-regpane[hidden] { display: none; }

/* ---------- Password eye ---------- */

.wpwd-pw-wrap { position: relative; display: block; }
.wpwd-pw-wrap input { padding-right: 44px; width: 100%; }

.wpwd-pw-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--text);
	cursor: pointer;
	border-radius: 8px;
}
.wpwd-pw-toggle:hover { color: var(--primary); }
.wpwd-pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* The theme paints in-content <button>s; force the eye toggle back to a bare
   icon and beat that styling with a higher-specificity, !important reset. */
.wpwd-auth-card .wpwd-pw-toggle,
.wpwd-auth-card .wpwd-pw-toggle:hover,
.wpwd-auth-card .wpwd-pw-toggle:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.wpwd-auth-card .wpwd-pw-toggle { color: var(--text); }
.wpwd-auth-card .wpwd-pw-toggle:hover { color: var(--primary); }

/* ---------- Phone (intl-tel-input) ---------- */

/* Both wrappers are listed on every rule below. The public/auth forms use
   .wpwd-field with the input as a sibling of the <label>; the CRM forms use
   .wpwd-um-field with the input INSIDE the <label>. Scoping these to
   .wpwd-field alone is why the widget rendered unstyled on the customer form —
   the flag box, the dial code and the number all collapsed on top of each
   other. Add any new form wrapper to this list, or the same thing happens
   again. */
.wpwd-field .iti,
.wpwd-um-field .iti { display: block; width: 100%; }
.wpwd-field .iti > input,
.wpwd-field .iti input.wpwd-phone,
.wpwd-um-field .iti > input,
.wpwd-um-field .iti input.wpwd-phone {
	width: 100%;
	/* Fallback only. intl-tel-input (separateDialCode) sets padding-left INLINE and
	   re-measures it on every country change, because the flag + dial code width
	   varies (+1 / +44 / +880). This rule must NOT be !important — a stylesheet
	   !important beats a non-important inline style, which would freeze the padding
	   and make a wider dial code overlap the number. Specificity (0,2,1) already
	   beats the generic .wpwd-field input (0,1,1), so no !important is needed. */
	padding-left: 92px;
}
/* Keep iti's internal flag row intact against the theme's global resets, so the
   flag, dial code and arrow can never stack on top of each other. */
.wpwd-field .iti__selected-flag,
.wpwd-um-field .iti__selected-flag { display: flex; align-items: center; }
.wpwd-field .iti__selected-dial-code,
.wpwd-um-field .iti__selected-dial-code { white-space: nowrap; }
.wpwd-field .iti__flag-container,
.wpwd-um-field .iti__flag-container { z-index: 2; overflow: visible; }
/* Keep the flag dropdown above sibling fields. */
.iti__country-list { z-index: 5; text-align: left; }
/* The dropdown is a child of the field, and .wpwd-dash-head above it is a
   sticky layer at z-index 4 — without lifting the open field the country list
   is painted underneath the page header. Applied only while open so the field
   does not otherwise sit above its neighbours. */
.wpwd-um-field .iti.iti--container,
.wpwd-um-field .iti:focus-within { position: relative; z-index: 6; }
/* Retina flag sprite, in case a global background reset stripped it.
   Path is relative to this file (assets/frontend.css). */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.iti__flag { background-image: url(vendor/intl-tel-input/img/flags@2x.png); }
}
.wpwd-same-email-field[hidden] { display: none; }

/* ---------- Tom Select (country / county / town) ---------- */

.wpwd-field .ts-wrapper { width: 100%; }

.wpwd-field .ts-control {
	border: 1px solid #D7D7D7;
	border-radius: 10px;
	padding: 9px 14px;
	background: var(--section-bg);
	font: inherit;
	color: var(--text);
	min-height: 46px;
	box-shadow: none;
}

.wpwd-field .ts-wrapper.focus .ts-control {
	border: 2px solid var(--primary);
	background: var(--background);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
	padding: 8px 13px;
}

.wpwd-field .ts-control input,
.wpwd-field .ts-control .item { color: var(--text); }

.ts-dropdown {
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(47, 58, 60, 0.12);
	margin-top: 4px;
	z-index: 40;
}

.ts-dropdown .option { padding: 9px 14px; }
.ts-dropdown .active { background: var(--gold-light); color: var(--heading); }
.ts-dropdown .create { color: var(--primary); }

/* A dependent picker waiting on its parent (phase 88): the product box before a
   supplier is chosen. Tom Select adds .disabled to the wrapper; without a style
   for it the box looks perfectly writable and clicking does nothing, which reads
   as broken rather than as "answer the one above first".

   Tokens, not fixed greys — this has to hold up in the dark theme, where a
   hardcoded #f5f5f5 would be a white slab in the middle of a dark dialog. */
.ts-wrapper.disabled .ts-control,
.ts-wrapper.disabled .ts-control * {
	background: var(--section-bg);
	color: var(--wpwd-muted);
	cursor: not-allowed;
	opacity: 1; /* Tom Select dims to 0.5 as well; the tokens above are enough. */
}

/* The empty-state line (data-empty-text) reads as prose, not as an option. */
.ts-dropdown .no-results {
	padding: 9px 14px;
	color: var(--wpwd-muted);
}

/* =========================================================================
   Catalog manager (staff + trade) — list tables, filters, ACF create/edit.
   Scoped to the dashboard shell; reuses the shell's sidebar/topbar as-is.
   ========================================================================= */

.wpwd-btn-sm {
	padding: 0.5em 1.1em;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: none;
}

.wpwd-dashboard-body .wpwd-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.wpwd-dashboard-body .wpwd-cat-count {
	margin: 0;
	color: #6b7a7b;
	font-size: 0.95rem;
}

/* The customer's jobs bar: Create on the left, the job SEARCH on the right,
   both on one line.

   Phase 99 wrote this for a job picker that phase 100 replaced with a plain
   search input; the layout problem it fixed is the same either way.
   .wpwd-cat-head above is the flex row, and a child of it with no rule stays a
   block and lets its own children stack — which is what the spacing looked
   wrong about. */
/* ⚠ BOTH SELECTORS NAME THE SHARED CLASS TOO, AND THAT IS LOAD-BEARING.
   .wpwd-search-wrap (~:6889) and .wpwd-cat-search (~:5369) are the classes this
   box borrows its chrome from, and both of those rules sit LATER in this file.
   At equal specificity the later rule wins, so a plain
   `.wpwd-dashboard-body .wpwd-cm-jobsearch` would be overridden by the very
   rules it is meant to adjust — present in the file, doing nothing, and
   invisible in a grep. Naming both classes takes the count to (0,3,0) and makes
   it independent of where in the file it sits. */
.wpwd-dashboard-body .wpwd-search-wrap.wpwd-cm-jobsearch-wrap {
	/* .wpwd-search-wrap already supplies position/flex/alignment — this only
	   stops the box stretching the width of the panel, since the bar has no
	   other filters beside it to share the room with. */
	flex: 0 1 320px;
	margin: 0;
}
/* .wpwd-cat-search hardcodes `background: #fff` and states no colour, which the
   dark theme turns into white on white (see the note by .wpwd-detail-form
   input). That rule is shared with every other search box on the dashboard, so
   it is left alone and the two tokens are paired here instead. */
.wpwd-dashboard-body .wpwd-cat-search.wpwd-cm-jobsearch {
	min-width: 200px;
	background: var(--background);
	color: var(--text);
}
.wpwd-dashboard-body .wpwd-cm-jobsbar { align-items: flex-start; }

/* The kind selector is not a filter — it is the ROUTE to the eleven catalogue
   screens that used to be sidebar rows, so it leads the head row and gets a
   visible label rather than a screen-reader-only one. */
.wpwd-dashboard-body .wpwd-cat-kind,
.wpwd-dashboard-body .wpwd-cat-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.wpwd-dashboard-body .wpwd-cat-kind > span {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-cat-kind select {
	min-width: 220px;
}

.wpwd-dashboard-body .wpwd-cat-add {
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-cat-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Filter bar */
.wpwd-dashboard-body .wpwd-cat-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e6ebeb;
	border-radius: 12px;
}

.wpwd-dashboard-body .wpwd-cat-search {
	flex: 1 1 220px;
	min-width: 160px;
	padding: 9px 13px;
	border: 1px solid #d5dede;
	border-radius: 8px;
	font: inherit;
	background: #fff;
}

.wpwd-dashboard-body .wpwd-cat-filters .wpwd-catalog-status,
.wpwd-dashboard-body .wpwd-cat-filters .ts-wrapper {
	min-width: 160px;
}

.wpwd-dashboard-body .wpwd-cat-search:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}

.wpwd-dashboard-body .wpwd-cat-clear {
	color: #6b7a7b;
	text-decoration: none;
	font-size: 0.9rem;
}
.wpwd-dashboard-body .wpwd-cat-clear:hover { color: var(--danger); }

/* Table */
.wpwd-dashboard-body .wpwd-cat-tablewrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e6ebeb;
	border-radius: 12px;
}

.wpwd-dashboard-body .wpwd-cat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.wpwd-dashboard-body .wpwd-cat-table th {
	text-align: left;
	font-weight: 700;
	color: var(--heading);
	padding: 13px 14px;
	border-bottom: 2px solid #eef2f2;
	white-space: nowrap;
}

.wpwd-dashboard-body .wpwd-cat-table td {
	padding: 12px 14px;
	border-bottom: 1px solid #f0f4f4;
	vertical-align: middle;
	color: #3a4748;
}

.wpwd-dashboard-body .wpwd-cat-table tr:last-child td { border-bottom: none; }
.wpwd-dashboard-body .wpwd-cat-table tbody tr:hover { background: #f8fbfb; }

.wpwd-dashboard-body .wpwd-cat-table td.col-wpwd_thumb img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

.wpwd-dashboard-body .wpwd-cat-titlelink {
	font-weight: 600;
	color: var(--heading);
	text-decoration: none;
}
.wpwd-dashboard-body .wpwd-cat-titlelink:hover { color: var(--primary); }

.wpwd-dashboard-body .wpwd-cat-empty {
	text-align: center;
	padding: 34px 14px;
	color: #8a9899;
}

/* Status badges */
.wpwd-dashboard-body .wpwd-cat-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.5;
}
.wpwd-dashboard-body .wpwd-cat-badge.is-publish { background: #DCFCE7; color: #15803D; }
.wpwd-dashboard-body .wpwd-cat-badge.is-draft   { background: #eef2f2; color: #64726f; }
.wpwd-dashboard-body .wpwd-cat-badge.is-pending { background: var(--gold-light); color: var(--gold-deep); }
/* Lead pipeline statuses */
.wpwd-dashboard-body .wpwd-cat-badge.is-new       { background: var(--gold-light); color: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-cat-badge.is-contacted { background: #e4f1fb; color: #1f6aa8; }
.wpwd-dashboard-body .wpwd-cat-badge.is-converted { background: #DCFCE7; color: #15803D; }
.wpwd-dashboard-body .wpwd-cat-badge.is-closed    { background: #eef2f2; color: #64726f; }
/* Invoice statuses (Phase 5) */
.wpwd-dashboard-body .wpwd-cat-badge.is-sent      { background: #e4f1fb; color: #1f6aa8; }
.wpwd-dashboard-body .wpwd-cat-badge.is-part_paid { background: var(--gold-light); color: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-cat-badge.is-paid      { background: #DCFCE7; color: #15803D; }
.wpwd-dashboard-body .wpwd-cat-badge.is-overdue   { background: var(--danger-light, #fdedec); color: var(--danger, #c0392b); }
.wpwd-dashboard-body .wpwd-cat-badge.is-void      { background: #eef2f2; color: #64726f; }
/* Support ticket statuses (Phase 5) */
.wpwd-dashboard-body .wpwd-cat-badge.is-open      { background: var(--gold-light); color: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-cat-badge.is-answered  { background: #e4f1fb; color: #1f6aa8; }
/* Opportunity stages */
.wpwd-dashboard-body .wpwd-cat-badge.is-qualified { background: #e4f1fb; color: #1f6aa8; }
.wpwd-dashboard-body .wpwd-cat-badge.is-quoted    { background: #efe9fb; color: #6b46c1; }
.wpwd-dashboard-body .wpwd-cat-badge.is-won       { background: #DCFCE7; color: #15803D; }
.wpwd-dashboard-body .wpwd-cat-badge.is-lost      { background: var(--danger-light, #fdedec); color: var(--danger, #c0392b); }

/* Opportunity pipeline board */
.wpwd-dashboard-body .wpwd-opp-board {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 8px;
}
.wpwd-dashboard-body .wpwd-opp-col {
	flex: 0 0 240px;
	min-width: 240px;
	background: var(--section-bg);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px;
}
.wpwd-dashboard-body .wpwd-opp-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-opp-col-count {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 999px;
	min-width: 22px;
	text-align: center;
	padding: 1px 7px;
	font-size: 0.8rem;
}
.wpwd-dashboard-body .wpwd-opp-col-sub { color: var(--secondary); font-size: 0.82rem; margin: 2px 0 10px; }
.wpwd-dashboard-body .wpwd-opp-col-body { display: flex; flex-direction: column; gap: 8px; }
.wpwd-dashboard-body .wpwd-opp-card {
	display: block;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(31, 49, 50, 0.04);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wpwd-dashboard-body .wpwd-opp-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(3, 157, 150, 0.14); }
.wpwd-dashboard-body .wpwd-opp-card-name { display: block; font-weight: 600; color: var(--heading); }
.wpwd-dashboard-body .wpwd-opp-card-value { display: block; font-weight: 700; color: var(--primary); margin-top: 3px; }
.wpwd-dashboard-body .wpwd-opp-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--secondary); font-size: 0.82rem; }
.wpwd-dashboard-body .wpwd-opp-card-meta img { width: 20px; height: 20px; border-radius: 50%; }
.wpwd-dashboard-body .wpwd-opp-card-close { display: block; margin-top: 4px; color: var(--secondary); font-size: 0.8rem; }
.wpwd-dashboard-body .wpwd-opp-empty { color: var(--secondary); text-align: center; margin: 8px 0; }
/* Opportunity detail — single form: title row + full-width fields */
.wpwd-dashboard-body .wpwd-opp-form-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.wpwd-dashboard-body .wpwd-opp-form-head .wpwd-detail-name { margin: 0; }
.wpwd-dashboard-body .wpwd-opp-form .wpwd-field { display: block; margin: 0 0 14px; }
.wpwd-dashboard-body .wpwd-opp-form .wpwd-field > label {
	display: block;
	font-weight: 600;
	color: var(--heading);
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.wpwd-dashboard-body .wpwd-opp-form .wpwd-field input,
.wpwd-dashboard-body .wpwd-opp-form .wpwd-field select {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
}
/* Tom Select in the opp form: full width, matched to the other inputs */
.wpwd-dashboard-body .wpwd-opp-form .ts-wrapper { width: 100%; }
.wpwd-dashboard-body .wpwd-opp-form .ts-control {
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 8px 12px;
	min-height: 40px;
}
.wpwd-dashboard-body .wpwd-opp-form .ts-wrapper.single .ts-control:after {
	border-color: var(--secondary) transparent transparent;
}

/* Opening-hours trio (Settings -> Company details): hour / minute / AM-PM sit
   on one line. The selects have to opt out of the .wpwd-field width:100% above,
   or each one takes a full row of its own. */
.wpwd-dashboard-body .wpwd-opp-form .wpwd-company-time {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wpwd-dashboard-body .wpwd-opp-form .wpwd-company-time select {
	width: auto;
	flex: 0 1 auto;
	min-width: 72px;
}

/* ---- Quotation builder (opportunity drawer) ---- */
.wpwd-dashboard-body .wpwd-q-form .wpwd-field { display: block; margin: 0 0 14px; }
.wpwd-dashboard-body .wpwd-q-form .wpwd-field > label {
	display: block;
	font-weight: 600;
	color: var(--heading);
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.wpwd-dashboard-body .wpwd-q-form .wpwd-field input,
.wpwd-dashboard-body .wpwd-q-form .wpwd-field textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
}
/* Description stretches; qty and price stay narrow; delete pins to the end. */
.wpwd-q-line {
	display: grid;
	grid-template-columns: 1fr 72px 96px 28px;
	gap: 6px;
	margin-bottom: 6px;
}
.wpwd-q-line input {
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 8px 10px;
	min-width: 0;
}
.wpwd-q-line-del {
	border: 0;
	background: none;
	color: var(--secondary);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.wpwd-q-line-del:hover { color: #b3261e; }
.wpwd-dashboard-body .wpwd-q-frames { margin: 0 0 16px; }
.wpwd-dashboard-body .wpwd-q-frame {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef2f2;
}
.wpwd-dashboard-body .wpwd-q-frame-size-label {
	display: block;
	font-weight: 600;
	color: var(--heading);
	font-size: 0.9rem;
	margin-bottom: 6px;
}
.wpwd-dashboard-body .wpwd-q-frame-size {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.wpwd-dashboard-body .wpwd-q-frame-size label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.82rem;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-q-frame-size select {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
}
.wpwd-dashboard-body .wpwd-q-frame-price { margin: 8px 0 0; }
.wpwd-dashboard-body .wpwd-q-frame-price-label { font-weight: 600; margin-right: 6px; }
.wpwd-dashboard-body .wpwd-q-frames-total { margin: 0; font-weight: 700; color: var(--heading); }
.wpwd-dashboard-body .wpwd-q-frames-poa { margin: 4px 0 0; color: #6b7a7b; }
.wpwd-q-rev { font-weight: 400; color: var(--secondary); font-size: 0.85rem; }
.wpwd-q-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.wpwd-dashboard-body .wpwd-jp-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Job form: two line-item sections (products + accessories). */
.wpwd-dashboard-body .wpwd-job-section { margin: 18px 0; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.wpwd-dashboard-body .wpwd-job-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wpwd-dashboard-body .wpwd-job-section-head h3 { margin: 0; font-size: 1rem; color: var(--heading); }

/* The eight unit counters. Narrow auto-fitting cells so the whole set reads as
   one block instead of eight full-width fields stacked down the form. */
.wpwd-dashboard-body .wpwd-job-units-grid {
	display: grid;
	/* minmax(0,…), not minmax(112px,…): a track that cannot shrink below its
	   content lets a long label overflow into the next cell. Matches .wpwd-um-grid. */
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 4px 14px;
}
.wpwd-dashboard-body .wpwd-job-units-grid .wpwd-um-field { margin: 6px 0; }
/* No white-space: nowrap here. The label is a block whose content is the text
   followed by a width:100% input; nowrap removes the line-break opportunity
   between them, so both share one line box and every cell paints over its
   neighbour's label. */
.wpwd-dashboard-body .wpwd-job-units-grid label { font-size: 0.82rem; }

/* "Days to Due" reuses the collections ageing badge (see wpwd_job_days_to_due_badge).
   Anything still in hand is neutral; only overdue picks up the warning colours. */
.wpwd-dashboard-body .wpwd-aging--current {
	background: var(--section-bg);
	color: var(--text);
	border: 1px solid var(--border);
}
.wpwd-dashboard-body .wpwd-job-line-legend { color: #8a9899; font-size: 0.78rem; }
.wpwd-dashboard-body .wpwd-jp-body > .wpwd-job-line-legend { display: block; margin: 0 0 10px; }

/* Buy vs sell on a job line (phase 91). The two sides sit in one table, so the
   badge is the only thing telling a cost apart from a sale — colour it, but
   keep the word, because colour alone is not an answer. */
.wpwd-dashboard-body .wpwd-ji-side--sell { background: #e7f4ec; color: #1d6b3f; }
.wpwd-dashboard-body .wpwd-ji-side--buy  { background: #fdf0e4; color: #8a4b12; }
.wpwd-dash[data-theme="dark"] .wpwd-ji-side--sell,
html[data-wpwd-theme="dark"] .wpwd-ji-side--sell { background: #12301f; color: #7ed3a1; }
.wpwd-dash[data-theme="dark"] .wpwd-ji-side--buy,
html[data-wpwd-theme="dark"] .wpwd-ji-side--buy  { background: #33220f; color: #e8b880; }
.wpwd-dashboard-body .wpwd-job-lines { display: flex; flex-direction: column; gap: 8px; }
.wpwd-dashboard-body .wpwd-job-line {
	display: grid; align-items: center; gap: 8px;
	grid-template-columns: 1.1fr 2.4fr 70px 110px 90px 28px;
}
/* Product lines carry an extra Style select between Type and Product, and since
   R6 a W x H pair — anything sold by the square or running foot has no price
   until the opening is known. */
.wpwd-dashboard-body .wpwd-job-line--prod {
	grid-template-columns: 1fr 1.1fr 1.8fr 64px 64px 62px 110px 90px 28px;
}
.wpwd-dashboard-body .wpwd-job-d { font-variant-numeric: tabular-nums; }
.wpwd-dashboard-body .wpwd-job-d::placeholder { color: #a9b5b6; }
/* The price cell holds the input plus the catalog note ("per sq ft", "priced by
   size — enter manually"), so it stacks rather than sitting in its own column. */
.wpwd-dashboard-body .wpwd-job-prwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wpwd-dashboard-body .wpwd-job-prnote { color: #8a9899; font-size: 0.72rem; line-height: 1.2; }
.wpwd-dashboard-body .wpwd-job-prnote:empty { display: none; }
.wpwd-dashboard-body .wpwd-job-line select,
.wpwd-dashboard-body .wpwd-job-line input {
	border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; min-width: 0; font: inherit; background: var(--background); color: var(--text);
}
.wpwd-dashboard-body .wpwd-job-line .wpwd-job-lt { text-align: right; font-variant-numeric: tabular-nums; color: var(--heading); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.wpwd-dashboard-body .wpwd-job-line-del { border: 0; background: none; color: var(--secondary); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; }
.wpwd-dashboard-body .wpwd-job-line-del:hover { color: var(--danger); }
.wpwd-dashboard-body .wpwd-job-add { margin-top: 10px; }
.wpwd-dashboard-body .wpwd-job-remarks textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font: inherit; }
.wpwd-dashboard-body .wpwd-job-grandtotal { font-size: 1.05rem; margin: 12px 0 28px; }
.wpwd-dashboard-body .wpwd-job-grandtotal strong { font-variant-numeric: tabular-nums; }
@media (max-width: 782px) {
	.wpwd-dashboard-body .wpwd-job-line,
	.wpwd-dashboard-body .wpwd-job-line--prod,
	.wpwd-dashboard-body .wpwd-job-line--acc { grid-template-columns: 1fr 1fr; }
	.wpwd-dashboard-body .wpwd-job-line .wpwd-job-lt { grid-column: 1 / -1; text-align: left; }
}

/* ---- Quotation table (both the drawer and the customer page) ---- */
.wpwd-q-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.92rem; }
.wpwd-q-table th,
.wpwd-q-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.wpwd-q-table thead th { color: var(--secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wpwd-q-table .wpwd-q-num { text-align: right; white-space: nowrap; }
.wpwd-q-table tfoot th { text-align: right; font-weight: 600; }
.wpwd-q-table tfoot td { text-align: right; white-space: nowrap; }
.wpwd-q-table tfoot .wpwd-q-total th,
.wpwd-q-table tfoot .wpwd-q-total td {
	font-size: 1.05rem;
	color: var(--heading);
	border-bottom: 0;
	border-top: 2px solid var(--heading);
}
.wpwd-q-ref { color: var(--secondary); font-size: 0.85rem; margin: 0 0 4px; }
.wpwd-q-h { margin: 22px 0 10px; font-size: 1.05rem; color: var(--heading); }
.wpwd-q-notes {
	background: #f6fafa;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 12px 0;
}
.wpwd-q-notes p { margin: 0; }

/* ---- Negotiation thread ---- */
.wpwd-q-thread { list-style: none; margin: 10px 0; padding: 0; }
.wpwd-q-msg {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: #fff;
}
/* The customer's side is tinted and offset so a glance shows who said what. */
.wpwd-q-msg.is-customer { background: #f6fafa; margin-left: 20px; }
.wpwd-q-msg.is-admin { margin-right: 20px; }
/* Support tickets: staff replies mirror the admin side of a quotation thread. */
.wpwd-q-msg.is-staff { margin-right: 20px; }
.wpwd-q-msg-text { margin: 0; }

/* -------------------------------------------------------------------------
 * Phase 5 — Statement, Downloads, Support
 * ---------------------------------------------------------------------- */

/* Statement over-limit / overdue warning banner. */
.wpwd-dashboard-body .wpwd-statement-warning { margin-bottom: 20px; }

/* Downloads library list. */
.wpwd-downloads-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.wpwd-download-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line, #e6ecec);
}
.wpwd-download-row:last-child { border-bottom: 0; }
.wpwd-download-name { font-weight: 600; }
.wpwd-download-ext {
	font-size: 0.72rem;
	font-weight: 700;
	color: #64726f;
	background: #eef2f2;
	border-radius: 4px;
	padding: 1px 6px;
}

/* New-ticket + reply forms reuse the dashboard field styling; keep them spaced. */
.wpwd-support-new,
.wpwd-support-reply { margin-top: 20px; max-width: 640px; }
.wpwd-support-reply { margin-top: 24px; }

/* Admin invoice line editor: full-width inputs in each cell. */
.wpwd-inv-lines-edit input { width: 100%; }

/* -------------------------------------------------------------------------
 * Phase 6 — Pay button, credit control, per-user permissions
 * ---------------------------------------------------------------------- */

/* The Pay-invoice call to action — a filled, confident button. */
.wpwd-btn.wpwd-btn-pay {
	background: #15803D;
	border-color: #15803D;
	color: #fff;
}
.wpwd-btn.wpwd-btn-pay:hover,
.wpwd-btn.wpwd-btn-pay:focus {
	background: #166534;
	border-color: #166534;
	color: #fff;
}

/* Per-user permission checkboxes in the Team table. */
.wpwd-cap-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
	font-size: 0.85rem;
}
.wpwd-cap-check input { margin: 0; }
.wpwd-q-budget { margin: 0 0 4px; font-weight: 600; color: var(--heading); }

/* ---- Negotiation: answering a customer's proposed budget ---- */
.wpwd-q-negotiate {
	border: 1px solid var(--primary);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 12px 0;
	background: #f2fbfb;
}
.wpwd-q-negotiate-sum { margin: 0 0 10px; font-weight: 600; color: var(--heading); }
.wpwd-q-negotiate textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 8px 10px;
	margin-bottom: 8px;
}
.wpwd-q-negotiate-hint { margin: 8px 0 0; color: var(--secondary); font-size: 0.82rem; }

/* ---- Order change / cancel window (customer page) ---- */
.wpwd-order-window {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	margin: 16px 0 0;
}
.wpwd-order-window-until { margin: 0 0 10px; font-weight: 600; color: var(--heading); }
.wpwd-order-window .wpwd-q-counter { margin-top: 6px; }
.wpwd-order-window textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 8px 10px;
}
.wpwd-order-window .wpwd-field-help { color: var(--secondary); font-size: 0.85rem; }
.wpwd-order-cancel > summary { color: #b3261e; }
.wpwd-order-window-closed { color: var(--secondary); }

/* The window setting on the admin Orders tab */
.wpwd-dashboard-body .wpwd-order-window-setting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}
.wpwd-dashboard-body .wpwd-order-window-setting input[type="number"] {
	width: 72px;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 6px 8px;
}
.wpwd-dashboard-body .wpwd-order-window-setting .wpwd-q-negotiate-hint { flex: 1 1 100%; margin: 0; }

/* ---- Customer decision buttons ---- */
.wpwd-deal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.wpwd-deal-action { margin: 0; }
.wpwd-q-counter { margin-top: 10px; }
.wpwd-q-counter > summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.wpwd-q-counter form { margin-top: 12px; }
.wpwd-deal-card .wpwd-detail-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.wpwd-deal-card .wpwd-detail-table th,
.wpwd-deal-card .wpwd-detail-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }

/* Row actions */
.wpwd-dashboard-body .wpwd-cat-action {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	margin-right: 12px;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-cat-action:hover { text-decoration: underline; }
.wpwd-dashboard-body .wpwd-cat-action-view { color: #6b7a7b; }
.wpwd-dashboard-body .wpwd-cat-action-danger { color: var(--danger, #c0392b); }

/* Grouped row-actions dropdown (all dashboard tables) */
.wpwd-dashboard-body .wpwd-rowactions { display: inline-block; }
.wpwd-dashboard-body .wpwd-rowactions-toggle {
	appearance: none;
	border: 0;
	background: transparent;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s;
}
.wpwd-dashboard-body .wpwd-rowactions-toggle:hover,
.wpwd-dashboard-body .wpwd-rowactions.is-open .wpwd-rowactions-toggle {
	background: var(--section-bg);
	color: var(--heading);
}
/* The ⋮ is a real text glyph (wpwd-rowactions-dots) with an inline !important
   colour/size, so Kadence's button styling can't blank it. Tint it on hover. */
.wpwd-dashboard-body .wpwd-rowactions-toggle:hover .wpwd-rowactions-dots,
.wpwd-dashboard-body .wpwd-rowactions.is-open .wpwd-rowactions-dots { color: var(--primary) !important; }

/* Status icon (verified / unverified / deactivated) */
.wpwd-dashboard-body .wpwd-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.wpwd-dashboard-body .wpwd-status-icon.is-yes { background: #22a06b; }
.wpwd-dashboard-body .wpwd-status-icon.is-no  { background: var(--danger, #c0392b); }
.wpwd-dashboard-body .wpwd-status-icon.is-off { background: #98a2a3; }
.wpwd-dashboard-body .wpwd-rowactions-menu {
	position: fixed;
	z-index: 9999;
	min-width: 168px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(31, 49, 50, 0.16);
	display: none;
}
.wpwd-dashboard-body .wpwd-rowactions.is-open .wpwd-rowactions-menu { display: block; }
.wpwd-dashboard-body .wpwd-rowactions-menu li { margin: 0; }
.wpwd-dashboard-body .wpwd-rowactions-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--heading);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-rowactions-link svg { flex: none; }
.wpwd-dashboard-body .wpwd-rowactions-link:hover { background: var(--section-bg); color: var(--primary); }
.wpwd-dashboard-body .wpwd-rowactions-link.is-danger { color: var(--danger, #c0392b); }
.wpwd-dashboard-body .wpwd-rowactions-link.is-danger:hover { background: var(--danger-light, #fdedec); color: var(--danger, #c0392b); }

/* User Management: row action cluster + create/edit form */
.wpwd-dashboard-body .wpwd-um-actionwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	justify-content: flex-end;
}
.wpwd-dashboard-body .wpwd-um-actionwrap .wpwd-cat-action { margin-right: 0; }
.wpwd-dashboard-body .wpwd-um-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 20px;
}
.wpwd-dashboard-body .wpwd-um-field { margin: 8px 0; }
.wpwd-dashboard-body .wpwd-um-field label { display: block; font-weight: 600; color: var(--heading); font-size: 0.9rem; }
.wpwd-dashboard-body .wpwd-um-field input,
.wpwd-dashboard-body .wpwd-um-field select {
	width: 100%;
	margin-top: 5px;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	/* Without this a native <select> renders in the browser's default control
	   font (13.3px), which no other control on the form uses — and which the
	   Tom Select picker beside it could never be made to match. */
	font: inherit;
	color: var(--text);
	background: var(--background);
}
/* One height for every control on the form. A native <select> renders ~2px
   taller than a text input, so without this the picker, the inputs and the
   selects all sit at slightly different heights in the same grid. Checkboxes
   and radios keep their intrinsic size. */
.wpwd-dashboard-body .wpwd-um-field input:not([type="checkbox"]):not([type="radio"]),
.wpwd-dashboard-body .wpwd-um-field select,
.wpwd-dashboard-body .wpwd-um-field .ts-control {
	/* These inputs are content-box, so without this the min-height lands on the
	   content and the padding and border are added on top (39 -> 59px). */
	box-sizing: border-box;
	min-height: 39px;
}

/* Tom Select inside a .wpwd-um-field (the Cash and Jobs customer pickers).
 *
 * The skin further up is scoped to .wpwd-field, so these two pickers used to
 * fall through to the vendor stylesheet (border-radius 3px, 13px type, no
 * chevron) and sat next to native selects looking like a different control
 * altogether. Tokens here deliberately mirror the .wpwd-um-field input/select
 * rule above rather than the .wpwd-field one, so the picker matches the fields
 * it is actually beside.
 *
 * tom-select.css is enqueued after frontend.css (frontend-assets.php), hence
 * the .wpwd-dashboard-body prefix for specificity.
 */
.wpwd-dashboard-body .wpwd-um-field .ts-wrapper { width: 100%; margin-top: 5px; }
.wpwd-dashboard-body .wpwd-um-field .ts-control {
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	background: var(--background);
	font: inherit;
	color: var(--text);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wpwd-dashboard-body .wpwd-um-field .ts-wrapper.focus .ts-control {
	border: 2px solid var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
	/* one less than above, so the extra border px does not change the height */
	padding: 8px 11px;
}
.wpwd-dashboard-body .wpwd-um-field .ts-control .item { color: var(--text); }
/* The .wpwd-um-field input rule above also matches Tom Select's internal search
   input; the vendor !important resets kill its border and padding but not the
   width or radius, which left the box looking wrong. */
.wpwd-dashboard-body .wpwd-um-field .ts-control > input {
	min-height: 0;
	width: auto;
	margin-top: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--text);
}
/* The vendor CSS draws no caret at all on a single select (there is only an
   .rtl rule), so one is drawn here — otherwise the picker is the only control on
   the form without the dropdown arrow its neighbours have. */
.wpwd-dashboard-body .wpwd-um-field .ts-wrapper.single .ts-control {
	position: relative;
	padding-right: 32px;
}
.wpwd-dashboard-body .wpwd-um-field .ts-wrapper.single .ts-control:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border: solid var(--secondary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	pointer-events: none;
}
/* Flip it while the dropdown is open, like a native control. */
.wpwd-dashboard-body .wpwd-um-field .ts-wrapper.single.dropdown-active .ts-control:after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.wpwd-dashboard-body .wpwd-um-history { margin: 6px 0 0; padding-left: 18px; }
.wpwd-dashboard-body .wpwd-um-history li { margin: 4px 0; }
@media (max-width: 700px) {
	.wpwd-dashboard-body .wpwd-um-grid { grid-template-columns: 1fr; }
}

/* Impersonation banner */
.wpwd-imp-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: #1f3132;
	color: #fff;
	text-align: center;
	padding: 10px 16px;
	font-size: 0.92rem;
}
.wpwd-imp-banner a { color: #5dc0bc; font-weight: 700; margin-left: 10px; }

/* Pagination */
.wpwd-dashboard-body .wpwd-cat-pagination {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.wpwd-dashboard-body .wpwd-cat-pagination .page-numbers {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--border, #dbe4e4);
	border-radius: 8px;
	text-decoration: none;
	color: var(--heading);
	background: var(--background);
	font-size: 0.9rem;
}
.wpwd-dashboard-body .wpwd-cat-pagination .page-numbers.current {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.wpwd-dashboard-body .wpwd-cat-pagination a.page-numbers:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Create / edit form */
.wpwd-dashboard-body .wpwd-cat-back { margin: 0 0 14px; }
.wpwd-dashboard-body .wpwd-cat-back a {
	color: #6b7a7b;
	text-decoration: none;
	font-size: 0.92rem;
}
.wpwd-dashboard-body .wpwd-cat-back a:hover { color: var(--primary); }

.wpwd-dashboard-body .wpwd-cat-hint {
	margin: 0 0 16px;
	padding: 11px 14px;
	background: var(--gold-light);
	border-radius: 10px;
	color: var(--gold-deep);
	font-size: 0.9rem;
}

.wpwd-dashboard-body .wpwd-cat-form {
	background: #fff;
	border: 1px solid #e6ebeb;
	border-radius: 12px;
	padding: 22px 24px;
}

/* The save buttons travel as one group. The bar is space-between, so a loose
   third child would centre itself between Cancel and Save instead of pairing
   with it. */
.wpwd-dashboard-body .wpwd-form-savegroup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Tame ACF's default frontend form chrome to fit the dashboard */
.wpwd-dashboard-body .wpwd-cat-form .acf-fields > .acf-field {
	padding: 15px 0;
	border-top: 1px solid #f0f4f4;
}
.wpwd-dashboard-body .wpwd-cat-form .acf-fields > .acf-field:first-child { border-top: none; }
.wpwd-dashboard-body .wpwd-cat-form .acf-label label {
	font-weight: 600;
	color: var(--heading);
}
/* No in-form submit on catalogue forms (phase 115) — Save is in the pinned
   footer. ACF still prints the empty wrapper; it takes no space. */
.wpwd-dashboard-body .wpwd-cat-form .acf-form-submit {
	display: none;
}
.wpwd-dashboard-body .wpwd-cat-form .acf-button,
.wpwd-dashboard-body .wpwd-cat-form input[type="submit"] {
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	border-radius: 999px !important;
	padding: 0.7em 1.8em !important;
	font-weight: 700 !important;
	box-shadow: 0 6px 16px rgba(3, 157, 150, 0.3);
}

/* -------------------------------------------------------------------------
 * Two-column product editor (.wpwd-cat-form--split)
 *
 * catalog-form.js reflows ACF's flat output into .wpwd-form-grid > main + side,
 * with fields bucketed into .wpwd-form-card cards and a custom tab nav. Until
 * the JS runs, .wpwd-cat-form--split renders as the plain single column above;
 * .is-reflowed switches on the grid skin.
 * ---------------------------------------------------------------------- */

/* The split form is a transparent scaffold — the cards carry the surfaces. */
.wpwd-dashboard-body .wpwd-cat-form--split.is-reflowed {
	background: none;
	border: 0;
	padding: 0;
}

.wpwd-dashboard-body .wpwd-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: 22px;
	align-items: start;
}
.wpwd-dashboard-body .wpwd-form-main,
.wpwd-dashboard-body .wpwd-form-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* Cards */
.wpwd-dashboard-body .wpwd-form-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 1px 2px rgba(31, 49, 50, 0.03);
}
.wpwd-dashboard-body .wpwd-form-card__title {
	margin: 0 0 4px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--secondary);
}
/* Phase 117: catalogue cards are <details>; the title is the <summary> that
   opens and closes them. Both native markers hidden (Blink's webkit marker and
   the list-item triangle), +/- drawn like .wpwd-jp-head. */
.wpwd-dashboard-body summary.wpwd-form-card__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.wpwd-dashboard-body summary.wpwd-form-card__title::-webkit-details-marker { display: none; }
.wpwd-dashboard-body summary.wpwd-form-card__title::after {
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0;
}
.wpwd-dashboard-body details.wpwd-form-card[open] > summary.wpwd-form-card__title::after { content: "\2212"; }
.wpwd-dashboard-body details.wpwd-form-card[open] > summary.wpwd-form-card__title {
	margin-bottom: 4px;
}
.wpwd-dashboard-body summary.wpwd-form-card__title:focus-visible {
	outline: 2px solid var(--border);
	outline-offset: 4px;
	border-radius: 4px;
}
.wpwd-dashboard-body .wpwd-form-card--tabs {
	padding-top: 8px;
}
/* A single-section form (products, since phase 90) renders no tab strip, so the
   8px that made room for it becomes the card's ordinary padding again. */
.wpwd-dashboard-body .wpwd-form-card--untabbed {
	padding-top: 18px;
}

/* Sidebar cards sit a touch tighter. */
.wpwd-dashboard-body .wpwd-form-side .wpwd-form-card {
	padding: 18px;
}
/* Sidebar (Settings + Media) fields stack full-width — the 4/12 column is too
 * narrow for ACF's 33%/50% inline widths. */
.wpwd-dashboard-body .wpwd-form-side .acf-field {
	width: 100% !important;
	float: none !important;
}

/* Field rows: clean cells — no ACF grid borders or dividers, just label + input
 * + helper text. (ACF's -border style boxes each field; we strip it here.) */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-fields > .acf-field,
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-form-card .acf-field,
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-tab-panel > .acf-field {
	padding: 12px 14px 12px 0;
	border: 0;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-fields.-border,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-fields {
	border: 0;
}
/* Kill ACF's column-divider left border between adjacent width-set fields. Its
 * own selector ties our border:0 on specificity and loads later, so this
 * higher-specificity rule is needed to win. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-field[data-width] + .acf-field[data-width] {
	border-left: 0;
}
/* A field ACF sizes to width:100% inline would otherwise be 100% PLUS the right
 * padding above, so it runs 14px wider than the unsized fields beside it. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-field[data-width="100"] {
	box-sizing: border-box;
}

/* The Component form (phase 113): the Details card is a 2-column grid rather
   than ACF's inline 33.33% floats. !important is needed only to beat those
   inline widths; wide fields (width 100, textareas) span both columns. The
   sidebar (Featured image) keeps its own full-width stack. */
.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel.is-active {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	align-items: start;
}
/* The float clearfix would otherwise become an empty grid cell. */
.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel::after {
	display: none;
}
.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel > .acf-field {
	width: auto !important;
	float: none !important;
	min-width: 0;
	padding-right: 0;
}
.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel > .acf-field[data-width="100"],
.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel > .acf-field-textarea {
	grid-column: 1 / -1;
}
@media (max-width: 700px) {
	.wpwd-dashboard-body .wpwd-cat-form--component .wpwd-form-main .wpwd-tab-panel.is-active {
		grid-template-columns: 1fr;
	}
}

.wpwd-dashboard-body .wpwd-cat-form--split .acf-label {
	margin-bottom: 6px;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-label label {
	font-weight: 600;
	color: var(--heading);
	font-size: 0.92rem;
}

/* Helper text (ACF instructions), relocated below the input by catalog-form.js. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-field > .wpwd-help {
	margin: 7px 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--secondary);
}

/* Inputs / selects / textareas — soften ACF's stock chrome. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="text"],
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="number"],
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="url"],
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="email"],
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input textarea,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input select {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
/* …except the affixed ones (£, mm), which share their row with the affix. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input.acf-is-prepended,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input.acf-is-appended {
	width: auto;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="text"]:focus,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="number"]:focus,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input[type="url"]:focus,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input textarea:focus,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.12);
	outline: none;
}
/* ACF's select2 dropdowns (taxonomy selects — Component type, Finish / Colour,
 * Category) in the same chrome as the inputs above (phase 116). Without these
 * they kept select2's stock grey 4px box, the one control on the form that did
 * not match. Values mirror the input rule: 1px var(--border), 9px radius, teal
 * focus ring. */
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container {
	width: 100% !important;
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 42px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
	padding: 0 34px 0 12px;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--secondary);
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
	right: 8px;
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default .select2-selection--single .select2-selection__clear {
	margin-right: 6px;
	color: var(--secondary);
}
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default.select2-container--focus .select2-selection--single,
.wpwd-dashboard-body .wpwd-cat-form--split .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.12);
	outline: none;
}
/* The open list. select2 appends it to <body>, outside the form, so it is scoped
 * by the dashboard's body class rather than the form. */
.wpwd-dashboard-body .select2-dropdown {
	border: 1px solid var(--border);
	border-radius: 9px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.wpwd-dashboard-body .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 7px 10px;
}
.wpwd-dashboard-body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--primary);
	outline: none;
}
.wpwd-dashboard-body .select2-container--default .select2-results__option {
	padding: 8px 12px;
}
.wpwd-dashboard-body .select2-container--default .select2-results__option--highlighted[aria-selected],
.wpwd-dashboard-body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	/* Not --primary + white: the dashboard's --primary is charcoal in light and
	   near-white (#e4e4e7) in dark, so white text would vanish there. The hover
	   surface + heading pair is defined for both themes. */
	background: var(--wpwd-ui-hover, #f4f4f5);
	color: var(--heading);
}

/* Sidebar cards (Component details, Settings): one field per row, no tall gaps.
 * The split form's field padding (12px 14px 12px 0) was sized for the 2-up main
 * grid; stacked in a narrow card it read as a gap between every field. */
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-form-side .wpwd-form-card .acf-field {
	padding: 8px 0;
}
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-form-side .wpwd-form-card .acf-field:first-child {
	padding-top: 0;
}

/* number/append + prepend affixes (£, mm) — match the input height and join it
 * as one pill (ACF's default box is shorter than our taller input). */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input .acf-input-prepend,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input .acf-input-append {
	display: flex;
	align-items: center;
	min-height: 0;
	padding: 9px 12px;
	line-height: 1.4;
	border: 1px solid var(--border);
	background: var(--section-bg);
	color: var(--secondary);
	font-weight: 600;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input .acf-input-prepend {
	border-right-width: 0;
	border-radius: 9px 0 0 9px;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input .acf-input-append {
	border-left-width: 0;
	border-radius: 0 9px 9px 0;
}
/* Square the input's joined corner so it butts flush against the affix. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input.acf-is-prepended {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-input input.acf-is-appended {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* Colour field — ACF color picker: swatch button + hex input, inline. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-color-picker .wp-picker-container {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-color-picker .wp-color-result.button {
	height: 38px;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: 9px;
	box-shadow: none;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-color-picker input.wp-color-picker[type="text"] {
	width: 8em;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
}

/* Character counter under a capped field (.wpwd-form-count, built by
 * catalog-form.js from the input's own maxlength). Amber at the cap, matching
 * the cash-book description counter rather than inventing a second signal. */
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-form-count {
	display: block;
	margin-top: 6px;
	text-align: right;
	font-size: 0.78rem;
	color: var(--secondary);
}
.wpwd-dashboard-body .wpwd-cat-form--split .wpwd-form-count.is-full {
	color: #E0A100;
	font-weight: 600;
}

/* True/false toggle. ACF's own switch styling does not reach this form — left
 * alone the markup reads as a bare checkbox followed by the text "YesNo" — so
 * the pill is built here from scratch and owes nothing to acf-input.css. */
/* ACF wraps the real checkbox and the pill in one <label>; anchor the hidden
 * checkbox to that wrapper so it cannot drift somewhere odd on the page. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-true-false > label {
	position: relative;
	display: inline-block;
	margin: 0;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-true-false input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 92px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--section-bg);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	overflow: hidden;
	vertical-align: middle;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch:hover {
	border-color: var(--primary);
}
/* The two captions sit in the halves the knob is not covering. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch .acf-switch-on,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch .acf-switch-off {
	flex: 1 1 50%;
	min-width: 0;
	padding: 0;
	margin: 0;
	line-height: 30px;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	background: none;
	border: 0;
	text-shadow: none;
	box-shadow: none;
}
/* Only the caption for the CURRENT state is legible; the other is hidden under
 * / behind the knob, which is what makes the pill read as one word plus a knob
 * rather than as the literal string "YesNo". */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch .acf-switch-on {
	order: 1;
	color: transparent;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch .acf-switch-off {
	order: 2;
	color: var(--secondary);
}
/* The knob. ACF sizes .acf-switch-slider inline in its own stylesheet; these
 * rules override that with a plain absolutely-positioned circle. */
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch .acf-switch-slider {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
	transition: transform 0.18s ease;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch.-on {
	background: var(--primary);
	border-color: var(--primary);
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch.-on .acf-switch-slider {
	transform: translateX(60px);
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch.-on .acf-switch-off {
	color: transparent;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-switch.-on .acf-switch-on {
	color: #fff;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-true-false > label:focus-within .acf-switch {
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.12);
}

/* Content card: remove the WordPress "Add Media" button + tidy the editor. */
.wpwd-dashboard-body .wpwd-cat-form--split .wp-media-buttons {
	display: none;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-field-_post_content .wp-editor-tools {
	padding-bottom: 6px;
}
.wpwd-dashboard-body .wpwd-cat-form--split .acf-editor-wrap .wp-editor-container,
.wpwd-dashboard-body .wpwd-cat-form--split .acf-editor-wrap.delay {
	border-radius: 9px;
	overflow: hidden;
	border-color: var(--border);
}

/* Custom tab nav */
.wpwd-dashboard-body .wpwd-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 -2px 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.wpwd-dashboard-body .wpwd-tab-btn {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--secondary);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.wpwd-dashboard-body .wpwd-tab-btn:hover {
	color: var(--heading);
	background: var(--section-bg);
}
.wpwd-dashboard-body .wpwd-tab-btn.is-active {
	color: #fff;
	background: var(--primary);
	box-shadow: 0 4px 12px rgba(3, 157, 150, 0.28);
}
.wpwd-dashboard-body .wpwd-tab-panel {
	display: none;
}
.wpwd-dashboard-body .wpwd-tab-panel.is-active {
	display: block;
}
/* Contain ACF's floated fields so the panel/card doesn't collapse. */
.wpwd-dashboard-body .wpwd-tab-panel::after,
.wpwd-dashboard-body .wpwd-form-card__body::after {
	content: "";
	display: table;
	clear: both;
}

/* Featured image → drag-and-drop dropzone (empty state, .wpwd-dropzone built by
 * catalog-form.js). ACF toggles .has-value on the uploader to swap the image in;
 * these rules only restyle the empty .hide-if-value box. */
.wpwd-dashboard-body .wpwd-form-card--media .acf-image-uploader .show-if-value {
	max-width: 100% !important;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 148px;
	padding: 22px 16px;
	text-align: center;
	border: 2px dashed var(--border);
	border-radius: 12px;
	background: var(--section-bg);
	color: var(--secondary);
	transition: border-color 0.15s, background 0.15s;
	cursor: pointer;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone:hover {
	border-color: var(--primary);
	background: #fff;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone__icon {
	width: 34px;
	height: 34px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone__text {
	font-size: 0.92rem;
	font-weight: 600;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone__browse {
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.wpwd-dashboard-body .wpwd-form-card--media .wpwd-dropzone__browse:hover {
	text-decoration: underline;
}
.wpwd-dashboard-body .wpwd-form-card--media .acf-image-uploader img {
	border-radius: 10px;
	width: 100%;
	height: auto;
	display: block;
}

/* Stack to one column on narrow viewports. */
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-form-grid {
		grid-template-columns: 1fr;
	}
}

/* Responsive: stack the table into cards on narrow screens */
@media (max-width: 720px) {
	.wpwd-dashboard-body .wpwd-cat-table thead { display: none; }
	.wpwd-dashboard-body .wpwd-cat-table,
	.wpwd-dashboard-body .wpwd-cat-table tbody,
	.wpwd-dashboard-body .wpwd-cat-table tr,
	.wpwd-dashboard-body .wpwd-cat-table td { display: block; width: 100%; }
	.wpwd-dashboard-body .wpwd-cat-table tr {
		border-bottom: 8px solid #f0f4f4;
		padding: 6px 0;
	}
	.wpwd-dashboard-body .wpwd-cat-table td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		border-bottom: none;
		padding: 7px 14px;
	}
	.wpwd-dashboard-body .wpwd-cat-table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--heading);
	}
	.wpwd-dashboard-body .wpwd-cat-table td.col-wpwd_actions::before,
	.wpwd-dashboard-body .wpwd-cat-table td.col-wpwd_thumb::before { content: ""; }
}

/* =========================================================================
   Admin/management dashboard — leads/users tables, user detail, roles editor.
   Reuses .wpwd-cat-* table/filter/pagination/badge styles; adds the below.
   ========================================================================= */

.wpwd-dashboard-body .wpwd-muted { color: #8a9899; }

.wpwd-btn-danger {
	background: var(--danger) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(192, 57, 43, 0.28);
}
.wpwd-btn-danger:hover { background: #a93226 !important; color: #fff !important; }

/* User detail view */
.wpwd-dashboard-body .wpwd-detail-name {
	margin: 0 0 16px;
	font-size: 1.3rem;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-detail-h {
	margin: 24px 0 12px;
	padding-top: 18px;
	border-top: 1px solid #eef2f2;
	font-size: 1.05rem;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-detail-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}
.wpwd-dashboard-body .wpwd-detail-table th,
.wpwd-dashboard-body .wpwd-detail-table td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid #f0f4f4;
	vertical-align: top;
}
.wpwd-dashboard-body .wpwd-detail-table th {
	width: 34%;
	font-weight: 600;
	color: #55635f;
}
.wpwd-dashboard-body .wpwd-detail-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0 0 8px;
	max-width: 640px;
}
.wpwd-dashboard-body .wpwd-detail-form .wpwd-field { margin: 0; flex: 1 1 220px; }
/*
 * ⚠ THESE CONTROLS USE TOKENS, NOT #fff, AND THAT IS THE WHOLE POINT.
 *
 * The dashboard has a dark theme (see the [data-theme="dark"] block above) which
 * flips --background to #18181b and --heading to #ffffff. A control that hardcodes
 * `background: #fff` and then asks for `color: var(--heading)` renders WHITE ON
 * WHITE the moment that theme is on — and a control with no colour at all is
 * worse, because the browser supplies its own, which is also white under a dark
 * colour-scheme.
 *
 * .wpwd-um-field further down has always done this correctly; its neighbours had
 * not. Pair the two tokens and both themes work with no second rule.
 */
.wpwd-dashboard-body .wpwd-detail-form select,
.wpwd-dashboard-body .wpwd-detail-form input {
	padding: 9px 12px;
	border: 1px solid var(--border, #d5dede);
	border-radius: 8px;
	font: inherit;
	background: var(--background);
	color: var(--text);
}

/* Roles list */
.wpwd-dashboard-body .wpwd-role-list code { font-size: 0.82rem; color: #8a9899; }
.wpwd-dashboard-body .wpwd-role-managed {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #eef2f2;
	color: #64726f;
	font-size: 0.78rem;
	font-weight: 700;
}

/* Capability editor grid */
.wpwd-dashboard-body .wpwd-caps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 4px 0 8px;
}
.wpwd-dashboard-body .wpwd-caps-group {
	background: #f8fbfb;
	border: 1px solid #e6ebeb;
	border-radius: 10px;
	padding: 14px 16px;
}
.wpwd-dashboard-body .wpwd-caps-group h4 {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: var(--heading);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
/* Phase 117: a capability group is a collapsible section, so the panel is the
   box — the group itself just lays its checkboxes out in columns. */
.wpwd-dashboard-body .wpwd-jp-body > .wpwd-caps-group {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	column-gap: 28px;
}
.wpwd-dashboard-body .wpwd-cap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 0;
	font-size: 0.92rem;
	color: #3a4748;
	cursor: pointer;
}
.wpwd-dashboard-body .wpwd-cap input { margin: 0; flex: 0 0 auto; }
.wpwd-dashboard-body .wpwd-cap code {
	margin-left: auto;
	font-size: 0.76rem;
	color: #a2afb0;
	white-space: nowrap;
}

/* ---------- Public "Get a Quote" lead form ---------- */
.wpwd-quote-wrap {
	max-width: 720px;
	margin: 48px auto;
	padding: 0 20px;
}
.wpwd-quote-title {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--heading);
}
.wpwd-quote-sub {
	margin: 0 0 22px;
	color: #6b7a7b;
}
.wpwd-quote-submit { margin-top: 10px; }
.wpwd-quote-wrap .wpwd-products { width: 100%; }

/* =========================================================================
   Dashboard Phase 1: content footer, lead stat cards, table polish.
   ========================================================================= */

/* The pinned content footer was removed — see wpwd_dashboard_shell(). */

/* ---- Lead stat cards ---- */
.wpwd-dashboard-body .wpwd-lead-stats { margin-bottom: 18px; }
.wpwd-dashboard-body .wpwd-lead-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 22px 18px;
	text-decoration: none !important;
	border: 1px solid #e6ebeb;
	border-radius: 14px;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wpwd-dashboard-body .wpwd-lead-stat:hover { box-shadow: 0 6px 18px rgba(31, 49, 50, 0.08); transform: translateY(-1px); }
.wpwd-dashboard-body .wpwd-lead-stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex: none;
}
.wpwd-dashboard-body .wpwd-lead-stat-body { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.wpwd-dashboard-body .wpwd-lead-stat-label { color: #6b7a7b; font-size: 0.9rem; }
.wpwd-dashboard-body .wpwd-lead-stat-value { color: var(--heading); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
/* Per-tone icon tiles */
.wpwd-dashboard-body .wpwd-lead-stat--total .wpwd-lead-stat-icon    { background: #e6eefb; color: #2f6fd0; }
.wpwd-dashboard-body .wpwd-lead-stat--new .wpwd-lead-stat-icon      { background: var(--gold-light); color: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-lead-stat--contacted .wpwd-lead-stat-icon{ background: #e4f1fb; color: #1f6aa8; }
.wpwd-dashboard-body .wpwd-lead-stat--converted .wpwd-lead-stat-icon{ background: #DCFCE7; color: #15803D; }

/* ---- Filter bar: date inputs ---- */
.wpwd-dashboard-body .wpwd-lead-date {
	padding: 9px 12px;
	border: 1px solid var(--border, #d5dede);
	border-radius: 8px;
	font: inherit;
	background: var(--background);
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-lead-date:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}

/* Overview filter selects (Weekly range, Year, Cash-recovered period): strip the
   native/theme arrow and paint a single clean chevron. `select.wpwd-lead-date`
   is scoped to selects so date inputs sharing the class keep their native UI. */
.wpwd-dashboard-body select#wpwd-dash-range,
.wpwd-dashboard-body .wpwd-cat-kind select,
.wpwd-dashboard-body .wpwd-cat-filter select,
.wpwd-dashboard-body .wpwd-cat-filters select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 9px 38px 9px 12px;
	border: 1px solid var(--border, #d5dede);
	border-radius: 8px;
	font: inherit;
	color: var(--heading);
	background-color: var(--background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	cursor: pointer;
}
.wpwd-dashboard-body select#wpwd-dash-range:focus,
.wpwd-dashboard-body .wpwd-cat-kind select:focus,
.wpwd-dashboard-body .wpwd-cat-filter select:focus,
.wpwd-dashboard-body .wpwd-cat-filters select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}

/* ---- Table polish (applies to leads/users/catalog tables) ---- */
.wpwd-dashboard-body .wpwd-cat-table th {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a9899;
	font-weight: 700;
}
.wpwd-dashboard-body .wpwd-cat-table td { color: #3a4748; }
.wpwd-dashboard-body .wpwd-lead-ago { color: #6b7a7b; white-space: nowrap; }

/* ---- Pagination row: "Showing X to Y of Z" ---- */
.wpwd-dashboard-body .wpwd-cat-pagerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.wpwd-dashboard-body .wpwd-cat-showing { margin: 0; color: #8a9899; font-size: 0.9rem; }
.wpwd-dashboard-body .wpwd-cat-pagerow .wpwd-cat-pagination { margin-top: 0; }

/* =========================================================================
   Leads page refinement: status filter, filter bar, clickable rows, drawer.
   ========================================================================= */

/* ---- Filter bar: label + search icon + status select + dates all same height ---- */
.wpwd-dashboard-body .wpwd-lead-filters { align-items: center; }
.wpwd-dashboard-body .wpwd-filters-label { color: #6b7a7b; font-weight: 600; font-size: 0.9rem; flex: 0 0 auto; }
.wpwd-dashboard-body .wpwd-search-wrap {
	position: relative;
	flex: 1 1 240px;
	min-width: 180px;
	display: flex;
	align-items: center;
}
.wpwd-dashboard-body .wpwd-search-wrap svg { position: absolute; left: 12px; color: #8a9899; pointer-events: none; }
.wpwd-dashboard-body .wpwd-search-wrap .wpwd-cat-search { flex: 1 1 auto; padding-left: 38px; }

/* Status select: proper height, right chevron, no blank look. */
.wpwd-dashboard-body .wpwd-lead-status {
	min-width: 150px;
	min-height: 42px;
	padding: 9px 38px 9px 13px;
	border: 1px solid var(--border, #d5dede);
	border-radius: 8px;
	background: var(--background);
	color: var(--heading);
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.wpwd-dashboard-body .wpwd-lead-status:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}
/* If Tom Select ever enhances a filter-bar select, match the height + chevron. */
.wpwd-dashboard-body .wpwd-cat-filters .ts-control { min-height: 42px; padding-right: 34px; }

/* ---- Clickable lead rows ---- */
.wpwd-dashboard-body .wpwd-lead-row { cursor: pointer; }
.wpwd-dashboard-body .wpwd-lead-row:hover { background: #f8fbfb; }
.wpwd-dashboard-body .wpwd-lead-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.wpwd-dashboard-body .wpwd-lead-msg { color: #55635f; max-width: 320px; white-space: normal; }
.wpwd-dashboard-body .wpwd-lead-row .wpwd-cat-titlelink { color: var(--heading); font-weight: 600; }
/* Message shown as a link: blue, underline on hover (mirrors the reference CRM),
   clamped to two lines then ellipsis. */
.wpwd-dashboard-body .wpwd-lead-msglink {
	color: var(--primary);
	cursor: pointer;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpwd-dashboard-body .wpwd-lead-row:hover .wpwd-lead-msglink,
.wpwd-dashboard-body .wpwd-lead-msglink:hover { text-decoration: underline; }
/* ---- Leads table alignment ----
   Centred, header and cell together — the header is centred in the same rule
   so a column's label never sits off-axis from the values under it.

   MESSAGE STAYS LEFT. It is a 320px prose excerpt, and centred prose gives
   every line a different starting point, so the eye has to hunt for the start
   of each one. Centring is for short, uniform values.

   The bulk checkbox and the ⋯ menu are centred here too, which is what pulls
   the actions column in from the right edge it used to sit against. */
.wpwd-dashboard-body .wpwd-lead-table thead th,
.wpwd-dashboard-body .wpwd-lead-table tbody td { text-align: center; }

.wpwd-dashboard-body .wpwd-lead-table thead th:first-child,
.wpwd-dashboard-body .wpwd-lead-table tbody td:first-child { text-align: center; }

.wpwd-dashboard-body .wpwd-lead-table .wpwd-lead-msg,
.wpwd-dashboard-body .wpwd-lead-table thead th:nth-child(2) { text-align: left; }

/* Centring a flex row needs the flex axis moved, not just text-align. */
.wpwd-dashboard-body .wpwd-lead-table .wpwd-lead-style { justify-content: center; }

/* Frame image column. A drawing wants room to read, so it is bigger than the
   22px base .wpwd-lead-thumb — the descendant selector out-specifies it. The
   grey ground IS the empty state; a lead with no drawing shows a blank tile
   rather than an em dash, which in a picture column reads as missing data.
   `contain` keeps a tall or wide drawing whole instead of cropping it, which
   `cover` (the base rule) would. */
.wpwd-dashboard-body .wpwd-lead-table .wpwd-lead-framecell { width: 76px; }
.wpwd-dashboard-body .wpwd-lead-frame-thumb {
	width: 46px;
	height: 46px;
	border-radius: 8px;
	margin: 0;
	vertical-align: middle;
	background-size: contain;
	background-color: #f2f5f5;
	object-fit: contain;
}

/* Status multi-select filter: give the Tom Select control room for chips. */
.wpwd-dashboard-body .wpwd-lead-filters .wpwd-lead-status + .ts-wrapper { min-width: 190px; }
.wpwd-dashboard-body .wpwd-lead-filters .ts-control { min-height: 42px; }

/* Jobs filter: give the Customer picker a bit more room (border matches the
   shared light-gray .ts-wrapper rule above, in line with the other fields). */
.wpwd-dashboard-body .wpwd-lead-filters .wpwd-filter-customer + .ts-wrapper {
	min-width: 190px;
}

/* Jobs filter: From/To date-range pickers. */
.wpwd-dashboard-body .wpwd-lead-filters .wpwd-filter-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #6b7a7b;
	font-weight: 600;
}
.wpwd-dashboard-body .wpwd-lead-filters .wpwd-filter-date input[type="date"] {
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid #d5dede;
	border-radius: 8px;
	background: #fff;
	color: #8a9899; /* muted so the dd/mm/yyyy text isn't heavy/black */
	font: inherit;
}
.wpwd-dashboard-body .wpwd-lead-filters .wpwd-filter-date input[type="date"]:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}

/* SPA results: full-table loading overlay (spinner + text) on a stable panel. */
.wpwd-dashboard-body .wpwd-leads-panel { position: relative; }
.wpwd-dashboard-body .wpwd-leads-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.72);
	z-index: 5;
	border-radius: 12px;
	font-weight: 600;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-leads-loading[hidden] { display: none; }
.wpwd-dashboard-body .wpwd-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: wpwd-spin 0.7s linear infinite;
}
@keyframes wpwd-spin { to { transform: rotate(360deg); } }

/* Product Style column: thumbnail preview + style name. The descendant selector
   out-specifies the base .wpwd-lead-thumb (22px) rule later in the file. */
.wpwd-dashboard-body .wpwd-lead-style { display: flex; align-items: center; gap: 10px; }
.wpwd-dashboard-body .wpwd-lead-style .wpwd-lead-thumb {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	margin: 0;
	vertical-align: middle;
	flex: none;
}
.wpwd-dashboard-body .wpwd-lead-style-name { color: var(--heading); }

/* Checkbox multi-select dropdown (Status filter): tidy the checkbox + label. */
.wpwd-dashboard-body .ts-dropdown .option { display: flex; align-items: center; gap: 8px; }
.wpwd-dashboard-body .ts-dropdown input[type="checkbox"] { margin: 0; flex: none; }

/* Full rounded border on the multi-select dropdown. The vendored tom-select CSS
   loads after ours and drops the top border + rounds only the bottom corners;
   this .wpwd-dashboard-body-scoped rule out-specifies it. */
.wpwd-dashboard-body .ts-dropdown {
	border: 1px solid var(--border);
	border-top: 1px solid var(--border);
	border-radius: 10px;
	margin-top: 6px;
	overflow: hidden; /* clip option hover to the rounded corners */
}
/* Status filter: the WRAPPER is the single box and carries the height + focus
   ring; the child .ts-control is stripped so there's no nested/taller box. */
.wpwd-dashboard-body .wpwd-lead-filters .ts-wrapper {
	min-height: 42px;
	border: 1px solid #d5dede;
	border-radius: 8px;
	background: #fff;
	display: flex;
	align-items: center;
}
.wpwd-dashboard-body .wpwd-lead-filters .ts-wrapper.focus {
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}
.wpwd-dashboard-body .wpwd-lead-filters .ts-control {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important; /* beats .wpwd-cat-filters .ts-control { min-height: 42px } */
	width: 100%;
}
/* Form-type chip (lead source), soft violet pill. */
.wpwd-dashboard-body .wpwd-lead-formtype {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.5;
	background: #efe9fb;
	color: #6b46c1;
}
/* The specific product page a lead came from, under its broad product line. */
.wpwd-dashboard-body .wpwd-lead-srcprod { display: block; color: #6b7a7b; font-size: .85em; }

/* ---- WhatsApp button ---- */
.wpwd-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25d366;
	color: #fff !important;
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none !important;
}
.wpwd-btn-whatsapp:hover { background: #1eb257; }
.wpwd-lead-wa { margin: 4px 0 0; }

/* ---- Notes ---- */
.wpwd-dashboard-body .wpwd-lead-notes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpwd-dashboard-body .wpwd-lead-notes li {
	background: #f8fbfb;
	border: 1px solid #eef2f2;
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wpwd-dashboard-body .wpwd-note-text { color: #3a4748; font-size: 0.92rem; }
.wpwd-dashboard-body .wpwd-note-meta { color: #8a9899; font-size: 0.78rem; }
.wpwd-dashboard-body .wpwd-lead-notes-empty { color: #8a9899; margin: 0 0 12px; }
.wpwd-dashboard-body .wpwd-note-form { flex-direction: column; align-items: stretch; gap: 8px; }
.wpwd-dashboard-body .wpwd-note-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d5dede;
	border-radius: 10px;
	font: inherit;
	resize: vertical;
}
.wpwd-dashboard-body .wpwd-note-form button { align-self: flex-start; }
/* Opportunity note box: full width of the detail, with no button beside it. */
.wpwd-dashboard-body .wpwd-opp-note { width: 100%; max-width: none; margin: 0 0 8px; }
.wpwd-dashboard-body .wpwd-opp-note textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--border, #d5dede);
	border-radius: 10px;
	font: inherit;
	resize: vertical;
	background: var(--background);
	color: var(--text);
}
.wpwd-dashboard-body .wpwd-opp-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* ===================== Analytics overview dashboard ===================== */
.wpwd-dashboard-body .wpwd-metric-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px;
}
/* Boss financial KPI cards: fixed 3-column grid (collapses on narrow screens). */
.wpwd-dashboard-body .wpwd-metrics-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px;
}
@media (max-width: 782px) {
	.wpwd-dashboard-body .wpwd-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.wpwd-dashboard-body .wpwd-metrics-grid { grid-template-columns: 1fr; }
}
.wpwd-dashboard-body .wpwd-metric { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.wpwd-dashboard-body .wpwd-metric-label { color: var(--text); font-size: 0.92rem; }
.wpwd-dashboard-body .wpwd-metric-value { font-size: 1.9rem; font-weight: 800; color: var(--heading); line-height: 1.05; font-variant-numeric: tabular-nums; }
.wpwd-dashboard-body .wpwd-metric-delta { font-size: 0.82rem; font-weight: 700; }
.wpwd-dashboard-body .wpwd-metric-delta.is-up { color: #15803D; }
.wpwd-dashboard-body .wpwd-metric-delta.is-down { color: #c0392b; }

/* Metric cards: soft resting elevation + a coloured icon chip per tone. */
.wpwd-dashboard-body .wpwd-metric { box-shadow: var(--wpwd-shadow-sm); }
.wpwd-dashboard-body .wpwd-metric-icon {
	display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
	margin-bottom: 4px; color: var(--primary); background: rgba(3, 157, 150, 0.10);
}
.wpwd-dashboard-body .wpwd-metric--converted .wpwd-metric-icon { color: #15803D; background: rgba(28, 122, 82, 0.10); }
.wpwd-dashboard-body .wpwd-metric--published .wpwd-metric-icon { color: var(--primary-dark); background: rgba(2, 127, 121, 0.10); }
.wpwd-dashboard-body .wpwd-metric--new .wpwd-metric-icon { color: var(--gold-deep); background: var(--gold-light); }
.wpwd-dashboard-body .wpwd-metric--contacted .wpwd-metric-icon { color: #2f6fd0; background: rgba(47, 111, 208, 0.10); }
.wpwd-dashboard-body .wpwd-metric--pending .wpwd-metric-icon,
.wpwd-dashboard-body .wpwd-metric--draft .wpwd-metric-icon { color: var(--secondary); background: rgba(103, 108, 109, 0.10); }

/* Section band header. */
.wpwd-dashboard-body .wpwd-dash-section-h {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.wpwd-dashboard-body .wpwd-dash-section-h:first-child { margin-top: 4px; }
.wpwd-dashboard-body .wpwd-dash-section-h h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--heading); }
.wpwd-dashboard-body .wpwd-dash-section-sub { color: #8a9899; font-size: 0.88rem; }

/* Two-up split row (aging + cash). */
.wpwd-dashboard-body .wpwd-dash-row--split { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-dash-row--split { grid-template-columns: 1fr; }
}

/* Receivables aging: severity-coloured proportion bars. */
.wpwd-dashboard-body .wpwd-aging-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.wpwd-dashboard-body .wpwd-aging-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; }
.wpwd-dashboard-body .wpwd-aging-label { color: var(--heading); font-weight: 600; font-size: 0.9rem; }
.wpwd-dashboard-body .wpwd-aging-track { height: 10px; border-radius: 999px; background: #eef2f2; overflow: hidden; }
.wpwd-dashboard-body .wpwd-aging-bar { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width 0.4s ease; }
.wpwd-dashboard-body .wpwd-aging-amt { font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpwd-dashboard-body .wpwd-aging-row.is-zero .wpwd-aging-label,
.wpwd-dashboard-body .wpwd-aging-row.is-zero .wpwd-aging-amt { color: #9aa7a8; }
.wpwd-dashboard-body .wpwd-aging--current .wpwd-aging-bar { background: var(--primary); }
.wpwd-dashboard-body .wpwd-aging--1-30 .wpwd-aging-bar { background: var(--gold); }
.wpwd-dashboard-body .wpwd-aging--31-60 .wpwd-aging-bar { background: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-aging--61-90 .wpwd-aging-bar { background: var(--warn); }
.wpwd-dashboard-body .wpwd-aging--90-plus .wpwd-aging-bar { background: var(--danger); }

/* Overdue severity badge (collections worklist). */
.wpwd-dashboard-body .wpwd-age-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-age-badge.wpwd-aging--1-30 { color: var(--gold-deep); background: var(--gold-light); }
.wpwd-dashboard-body .wpwd-age-badge.wpwd-aging--31-60 { color: #fff; background: var(--gold-deep); }
.wpwd-dashboard-body .wpwd-age-badge.wpwd-aging--61-90 { color: #fff; background: var(--warn); }
.wpwd-dashboard-body .wpwd-age-badge.wpwd-aging--90-plus { color: #fff; background: var(--danger); }
.wpwd-dashboard-body .wpwd-muted-cell { color: #9aa7a8; }
.wpwd-dashboard-body td.wpwd-num { font-variant-numeric: tabular-nums; }

/* Cash recovered: chart + collapsible figures. */
.wpwd-dashboard-body .wpwd-cash-wrap { height: 240px; }
.wpwd-dashboard-body .wpwd-cash-table { margin-top: 12px; }
.wpwd-dashboard-body .wpwd-cash-table > summary {
	cursor: pointer; color: var(--primary); font-weight: 600; font-size: 0.86rem; list-style: none; user-select: none;
}
.wpwd-dashboard-body .wpwd-cash-table > summary::-webkit-details-marker { display: none; }
.wpwd-dashboard-body .wpwd-cash-table > summary::before { content: "▸ "; }
.wpwd-dashboard-body .wpwd-cash-table[open] > summary::before { content: "▾ "; }

/* Panel cards get the same gentle resting elevation as metric cards. */
.wpwd-dashboard-body .wpwd-panel-card { box-shadow: var(--wpwd-shadow-sm); }

/* --- Spacing rhythm --------------------------------------------------------
 * .wpwd-detail-h is styled to divide stacked sub-sections inside one card
 * (24px top margin + 18px padding + a top border). When it is the FIRST child
 * of a panel it just wastes space and draws a stray line under the card's top
 * edge, so zero its top spacing there (later detail-h's keep their divider).
 * The chart card wraps its title in .wpwd-panel-head, hence the extra selectors.
 */
.wpwd-dashboard-body .wpwd-panel-card > .wpwd-detail-h:first-child,
.wpwd-dashboard-body .wpwd-chart-card  > .wpwd-detail-h:first-child,
.wpwd-dashboard-body .wpwd-panel-card > .wpwd-panel-head:first-child .wpwd-detail-h,
.wpwd-dashboard-body .wpwd-chart-card  > .wpwd-panel-head:first-child .wpwd-detail-h {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Even 20px gap between stacked full-width panels, matching the dash-row rhythm;
 * neutralised for panel-cards that sit inside a grid row (the grid gap spaces
 * those). */
.wpwd-dashboard-body .wpwd-panel-card { margin-bottom: 20px; }
.wpwd-dashboard-body .wpwd-dash-row .wpwd-panel-card { margin-bottom: 0; }

.wpwd-dashboard-body .wpwd-dash-row { display: grid; gap: 16px; margin-bottom: 20px; }
.wpwd-dashboard-body .wpwd-dash-row--chart { grid-template-columns: 2fr 1fr; }
.wpwd-dashboard-body .wpwd-dash-row--lists { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-dash-row--chart,
	.wpwd-dashboard-body .wpwd-dash-row--lists { grid-template-columns: 1fr; }
}
.wpwd-dashboard-body .wpwd-chart-card,
.wpwd-dashboard-body .wpwd-panel-card { padding: 20px; }
.wpwd-dashboard-body .wpwd-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wpwd-dashboard-body .wpwd-panel-sub { color: #8a9899; font-size: 0.85rem; margin: 2px 0 12px; }
.wpwd-dashboard-body .wpwd-panel-viewall { color: var(--gold-deep, #a97500); font-weight: 700; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.wpwd-dashboard-body #wpwd-dash-range { min-width: 130px; }
.wpwd-dashboard-body .wpwd-chart-wrap { position: relative; height: 300px; }
.wpwd-dashboard-body .wpwd-donut-wrap { height: 260px; }

.wpwd-dashboard-body .wpwd-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wpwd-dashboard-body .wpwd-mini-list li { display: flex; align-items: center; gap: 10px; }
.wpwd-dashboard-body .wpwd-mini-label { color: var(--heading); font-weight: 600; flex: 1; }
.wpwd-dashboard-body .wpwd-mini-value { color: #6b7a7b; font-size: 0.86rem; white-space: nowrap; }
.wpwd-dashboard-body .wpwd-mini-empty { color: #8a9899; }
.wpwd-dashboard-body .wpwd-top-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--section-bg); color: var(--heading); font-weight: 700; font-size: 0.78rem; display: grid; place-items: center; flex: none; }
.wpwd-dashboard-body .wpwd-top-products .wpwd-lead-thumb { width: 34px; height: 34px; }

.wpwd-dashboard-body .wpwd-recent-list { display: flex; flex-direction: column; }
.wpwd-dashboard-body .wpwd-recent-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f0f4f4; text-decoration: none; color: var(--heading); }
.wpwd-dashboard-body .wpwd-recent-row:last-child { border-bottom: none; }
.wpwd-dashboard-body .wpwd-recent-name { font-weight: 600; flex: 1; }
.wpwd-dashboard-body .wpwd-recent-ago { color: #8a9899; font-size: 0.8rem; white-space: nowrap; }

/* Slightly smaller, tighter type in the Top Products / Countries / Recent Leads
   lists for a more professional density. Scoped so other tables/lists stay put. */
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-detail-h { font-size: 0.98rem; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-panel-sub { font-size: 0.8rem; margin-bottom: 10px; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-mini-list { gap: 8px; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-mini-label { font-size: 0.86rem; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-mini-value { font-size: 0.8rem; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-recent-row { padding: 8px 0; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-recent-name { font-size: 0.88rem; }
.wpwd-dashboard-body .wpwd-dash-row--lists .wpwd-recent-ago { font-size: 0.76rem; }

/* Product Information card in the lead drawer. */
.wpwd-dashboard-body .wpwd-lead-product { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; }
.wpwd-dashboard-body .wpwd-lead-product .wpwd-lead-thumb {
	width: 56px; height: 56px; border-radius: 8px; margin: 0; flex: none;
}
.wpwd-dashboard-body .wpwd-lead-product-main { display: flex; flex-direction: column; gap: 8px; }
.wpwd-dashboard-body .wpwd-lead-product-title { font-weight: 700; color: var(--heading); }
.wpwd-dashboard-body .wpwd-lead-frame + .wpwd-lead-frame {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #eef2f2;
}

/* Add-Note follow-up radio-cards. */
.wpwd-dashboard-body .wpwd-note-sub { font-weight: 600; color: var(--heading); margin-top: 4px; }
.wpwd-dashboard-body .wpwd-note-followups {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wpwd-dashboard-body .wpwd-note-fu {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; border: 1px solid #d5dede; border-radius: 10px;
	cursor: pointer; color: var(--heading); font-size: 0.92rem;
}
.wpwd-dashboard-body .wpwd-note-fu input { margin: 0; flex: none; }
.wpwd-dashboard-body .wpwd-note-fu-ic { display: inline-flex; color: var(--secondary); }
.wpwd-dashboard-body .wpwd-note-fu:hover { border-color: var(--primary); }
.wpwd-dashboard-body .wpwd-note-fu:has(input:checked) {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(3, 157, 150, 0.15);
}
.wpwd-dashboard-body .wpwd-note-fu-date {
	width: 100%; padding: 10px 12px; border: 1px solid #d5dede; border-radius: 10px; font: inherit;
}
.wpwd-dashboard-body .wpwd-note-followup {
	display: inline-block; margin-top: 2px;
	font-size: 0.78rem; font-weight: 600; color: var(--primary);
}
@media (max-width: 560px) {
	.wpwd-dashboard-body .wpwd-note-followups { grid-template-columns: 1fr; }
}

/* ---- Right-side lead details drawer ---- */
.wpwd-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 24, 23, 0.45);
	opacity: 0;
	transition: opacity 0.22s ease;
	z-index: 60;
}
.wpwd-drawer-overlay.is-open { opacity: 1; }
.wpwd-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(460px, 92vw);
	background: #fff;
	box-shadow: -12px 0 32px rgba(15, 24, 23, 0.18);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 61;
	display: flex;
	flex-direction: column;
}
body.admin-bar .wpwd-drawer { top: 32px; height: calc(100% - 32px); }
@media screen and (max-width: 782px) { body.admin-bar .wpwd-drawer { top: 46px; height: calc(100% - 46px); } }
.wpwd-drawer.is-open { transform: translateX(0); }
.wpwd-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid #eef2f2;
	flex: 0 0 auto;
}
.wpwd-drawer-title { margin: 0; font-size: 1.15rem; color: var(--heading); }
.wpwd-drawer-close {
	background: transparent;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: #6b7a7b;
	cursor: pointer;
	padding: 0 4px;
}
.wpwd-drawer-close:hover { color: var(--danger); }
.wpwd-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 22px 40px; }

/* ---- Drawer header: title over subtitle ---- */
.wpwd-drawer-titlewrap { min-width: 0; }
.wpwd-drawer-subtitle {
	margin: 2px 0 0;
	font-size: 0.875rem;
	color: var(--wpwd-ui-muted, #71717a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wpwd-drawer-subtitle:empty { display: none; }
.wpwd-drawer-close { display: inline-flex; align-items: center; justify-content: center; }

/* ---- Drawer footer ----
   A THIRD FLEX CHILD of the drawer, not a sticky block inside the scroller.
   Sticky only pins while there is something to scroll; on a short lead the
   buttons ended up floating halfway up the panel. */
.wpwd-drawer-foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 22px;
	border-top: 1px solid var(--wpwd-ui-line, #eef2f2);
	background: #fff;
}
.wpwd-drawer-foot[hidden] { display: none; }
.wpwd-drawer-foot form { margin: 0; }
.wpwd-drawer-foot .wpwd-btn { width: 100%; justify-content: center; }

/* ---- Cards inside the drawer ---- */
.wpwd-lead-card {
	border: 1px solid var(--wpwd-ui-line, #e5e7eb);
	border-radius: var(--wpwd-ui-radius, 12px);
	padding: 16px;
	margin: 0 0 16px;
	background: #fff;
}
.wpwd-lead-card > .wpwd-detail-h { margin-top: 0; }
.wpwd-lead-card .wpwd-detail-table { margin-bottom: 0; }

/* ---- Lead owner ----
   The pool is shown, not left blank: an unassigned lead is one nobody is
   chasing, and a blank cell reads as missing data rather than as a state. */
.wpwd-dashboard-body .wpwd-lead-owner { white-space: nowrap; }
.wpwd-dashboard-body .wpwd-lead-owner.is-pool {
	color: var(--wpwd-ui-muted, #6B7576);
	font-style: italic;
}

/* ---- Status + Update on one row ---- */
.wpwd-lead-statusctl { display: flex; align-items: center; gap: 8px; }
/* Tom Select replaces the <select> with a wrapper, so the flex child that has
   to grow is .ts-wrapper, not the element in the markup. */
.wpwd-lead-statusctl .ts-wrapper,
.wpwd-lead-statusctl select { flex: 1 1 auto; min-width: 0; }
.wpwd-lead-statusctl .wpwd-btn { flex: none; }

/* ---- Notes card ---- */
.wpwd-lead-notecard .wpwd-lead-notes-empty {
	margin: 0;
	padding: 22px 0;
	text-align: center;
	color: var(--wpwd-ui-muted, #6B7576);
}

/* ---- "+ Add Note" ---- */
.wpwd-note-open {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px;
	border: 1px dashed #c7cdcd;
	border-radius: var(--wpwd-ui-radius-sm, 8px);
	background: #fafafa;
	color: var(--wpwd-ui-ink, #18181b);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.wpwd-note-open:hover { background: #f4f4f5; border-color: #a1a1aa; color: var(--wpwd-ui-ink, #18181b); }
.wpwd-note-open svg { flex: none; }

/* ---- The Add Note panel ---- */
.wpwd-note-panel {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wpwd-ui-line, #eef2f2);
}
.wpwd-note-panel[hidden] { display: none; }
.wpwd-note-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.wpwd-note-close {
	border: 0;
	background: transparent;
	padding: 2px;
	color: #6b7a7b;
	cursor: pointer;
	line-height: 0;
}
.wpwd-note-close:hover { color: var(--danger, #C0392B); }
.wpwd-note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.wpwd-note-actions .wpwd-btn { width: 100%; justify-content: center; }
.wpwd-drawer-body .wpwd-cat-back { display: none; }
.wpwd-drawer-body .wpwd-cat-form { background: none; border: 0; padding: 0; }

/* =========================================================================
   Dashboard shell: breadcrumbs + collapsible (icon-only) sidebar.
   ========================================================================= */

/* ---- Breadcrumb ---- */
.wpwd-dashboard-body .wpwd-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	color: #8a9899;
	font-size: 0.82rem;
}
.wpwd-dashboard-body .wpwd-breadcrumb span:last-child { color: #55635f; font-weight: 600; }
.wpwd-dashboard-body .wpwd-breadcrumb-sep { color: #c2cdcd; font-weight: 400; }

/* ---- Collapse toggle button (topbar) ---- */
.wpwd-dash-collapse {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	border-radius: 8px;
	color: #6b7a7b;
	cursor: pointer;
}
.wpwd-dash-collapse:hover { background: var(--wpwd-ui-hover); color: var(--wpwd-ui-primary); }

/* ---- Icon-only mini sidebar (desktop only) ---- */
@media (min-width: 901px) {
	.wpwd-dash-collapse { display: inline-flex; }

	.wpwd-dash[data-mini="true"] { grid-template-columns: 76px 1fr; }
	.wpwd-dash[data-mini="true"] .wpwd-dash-brand { justify-content: center; padding: 0 8px; }
	/* Collapsed rail: swap the lockup for the monogram rather than hiding the
	   brand entirely, which is what the old img-era rule effectively did.
	   The two spans this used to target went with the text wordmark; it is the
	   logo <img> and the monogram <span> that trade places now. */
	.wpwd-dash[data-mini="true"] .wpwd-dash-brand .wpwd-brandlogo { display: none; }
	.wpwd-dash[data-mini="true"] .wpwd-dash-brand .wpwd-brandmark { display: flex; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-label { display: none; }
	.wpwd-dash[data-mini="true"] .wpwd-dash-nav { padding: 12px 10px 0; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-item { justify-content: center; gap: 0; padding: 12px 0; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-item > span:not(.wpwd-nav-icon) { display: none; }
	/* The caret has nowhere to go on a 76px rail. The SUBMENU, however, may no
	   longer be hidden: once Users / CRM / Customers / Products became groups,
	   display:none here made most of the dashboard unreachable while collapsed.
	   It becomes a flyout instead — same [data-wpwd-menu] contract, same click
	   to open, just floated out beside the rail. */
	.wpwd-dash[data-mini="true"] .wpwd-nav-caret { display: none; }

	/* .wpwd-dash-aside sets overflow-y:auto, which establishes a clipping box
	   that would swallow an absolutely-positioned flyout whole — you would see
	   nothing and assume the JS was broken. Safe to lift HERE because the mini
	   rail is a fixed height: brand (64px) + 7 items (~44px each) ≈ 375px, so it
	   cannot overflow a viewport. Adding an eighth top-level item is a conscious
	   act; re-check this if you do. */
	.wpwd-dash[data-mini="true"] .wpwd-dash-aside { overflow: visible; }
	.wpwd-dash[data-mini="true"] .wpwd-dash-nav { position: relative; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub {
		position: absolute;
		inset-inline-start: 100%;
		margin-inline-start: 6px;
		margin-top: -42px;
		min-width: 210px;
		padding: 6px;
		background: var(--wpwd-ui-bar, #1e293b);
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
		z-index: 40;
	}
	/* No connector inside a popover: the rule and dots are an indent cue, and
	   there is no parent row above them to connect back to. */
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub::before,
	.wpwd-dash[data-mini="true"] .wpwd-nav-dot { display: none; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub .wpwd-nav-item {
		justify-content: flex-start;
		padding: 9px 12px;
		color: rgba(255, 255, 255, 0.82);
	}
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub .wpwd-nav-item:hover,
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub .wpwd-nav-item.is-active {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
	}
	/* The label span is hidden on the RAIL, not inside the flyout. */
	.wpwd-dash[data-mini="true"] .wpwd-nav-sub .wpwd-nav-item > span:not(.wpwd-nav-icon) { display: inline; }
	.wpwd-dash[data-mini="true"] .wpwd-nav-item.is-active {
		box-shadow: inset 0 0 0 1px rgba(30, 30, 45, 0.16);
	}
}

/* ---- Cash entry form (finance layout) ---- */
/* A MODIFIER on .wpwd-cat-form, mirroring the --split pattern used by the
   catalogue form. The base .wpwd-um-field / .wpwd-um-grid / .wpwd-tomselect
   rules are left alone on purpose: Tom Select's rendering hangs off
   .wpwd-um-field .ts-control, and re-scoping that breaks every picker. */
.wpwd-dashboard-body .wpwd-fin-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 1100px) {
	.wpwd-dashboard-body .wpwd-fin-grid { grid-template-columns: 1fr; }
}

.wpwd-dashboard-body .wpwd-fin-section {
	border: 1px solid var(--border, #e2e8f0);
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0 0 16px;
}
.wpwd-dashboard-body .wpwd-fin-section__head { margin: 0 0 14px; }
.wpwd-dashboard-body .wpwd-fin-section__head h3 {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--secondary, #64748b);
}
.wpwd-dashboard-body .wpwd-fin-section__hint { margin: 4px 0 0; font-size: 0.84rem; color: var(--wpwd-ui-muted, #71717a); }
/* Phase 117: the hint sits at the top of a collapsible section's body. */
.wpwd-dashboard-body .wpwd-jp-body > .wpwd-fin-section__hint { margin: 0 0 12px; }

.wpwd-dashboard-body .wpwd-fin-refline { margin: 0 0 14px; font-size: 0.84rem; color: var(--wpwd-ui-muted, #71717a); }
.wpwd-dashboard-body .wpwd-fin-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--wpwd-ui-tint, #eef2ff);
	color: var(--wpwd-ui-accent-dark, #3730a3);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
	font-weight: 600;
}

/* Direction is a segmented control, not a dropdown: it is the one choice that
   changes what every other field means, so it should be visible at a glance. */
.wpwd-dashboard-body .wpwd-fin-toggle { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.wpwd-dashboard-body .wpwd-fin-toggle__opt {
	flex: 1 1 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 14px;
	border: 1px solid var(--border, #e2e8f0);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wpwd-ui-muted, #71717a);
}
.wpwd-dashboard-body .wpwd-fin-toggle__opt input { position: absolute; opacity: 0; pointer-events: none; }
.wpwd-dashboard-body .wpwd-fin-toggle__opt.is-on.is-in { border-color: #15803d; background: #e6f5f0; color: #15803d; }
.wpwd-dashboard-body .wpwd-fin-toggle__opt.is-on.is-out { border-color: #c0392b; background: #fdecea; color: #c0392b; }

.wpwd-dashboard-body .wpwd-fin-amount input {
	font-size: 1.5rem;
	font-weight: 700;
	padding: 12px 14px;
	letter-spacing: -0.01em;
}

.wpwd-dashboard-body .wpwd-fin-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.wpwd-dashboard-body .wpwd-fin-attach__name { font-size: 0.86rem; color: var(--wpwd-ui-muted, #71717a); }
.wpwd-dashboard-body .wpwd-fin-check { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.wpwd-dashboard-body .wpwd-fin-meta { margin: 4px 0 0; font-size: 0.82rem; }

.wpwd-dashboard-body .wpwd-fin-summary {
	position: sticky;
	top: 12px;
	border: 1px solid var(--border, #e2e8f0);
	border-radius: 12px;
	padding: 18px 20px;
	background: var(--section-bg, #f8fafc);
}
.wpwd-dashboard-body .wpwd-fin-summary h3 {
	margin: 0 0 12px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--secondary, #64748b);
}
.wpwd-dashboard-body .wpwd-fin-summary__amount {
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: var(--heading, #0f172a);
}
.wpwd-dashboard-body .wpwd-fin-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-top: 1px solid var(--border, #e2e8f0);
	font-size: 0.86rem;
}
.wpwd-dashboard-body .wpwd-fin-summary__row span { color: var(--wpwd-ui-muted, #71717a); }
.wpwd-dashboard-body .wpwd-fin-summary__row b { font-weight: 600; text-align: right; }

/* ---- Settings: left rail + panel ---- */
/* Adapted from the horizontal .wpwd-cm-tabs precedent further down; the rail is
   the same idea turned on its side. Tokens only, so dark mode comes free. */
.wpwd-dashboard-body .wpwd-set {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
/* ⚠ NOT position: sticky. The rail used to pin at top: 0 with no z-index, in
   the SAME scroll container as .wpwd-dash-head — which pins at top: 0 too, with
   z-index: 4, an opaque white background and full-bleed -30px side margins. The
   moment the Settings page scrolled the rail slid under the head and its top
   entries stopped being clickable: painted over AND hit-tested to the head, no
   error anywhere. The page is short enough that pinning bought nothing. */
.wpwd-dashboard-body .wpwd-set-rail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wpwd-dashboard-body .wpwd-set-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--wpwd-ui-nav);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.3;
}
.wpwd-dashboard-body .wpwd-set-tab:hover {
	background: var(--wpwd-ui-nav-active);
	color: var(--wpwd-ui-nav-on);
}
.wpwd-dashboard-body .wpwd-set-tab.is-active {
	background: var(--wpwd-ui-nav-active);
	color: var(--wpwd-ui-nav-on);
	font-weight: 600;
}
.wpwd-dashboard-body .wpwd-set-icon { display: inline-flex; flex: none; }
.wpwd-dashboard-body .wpwd-set-tab.is-active .wpwd-set-icon { color: var(--wpwd-ui-primary); }
.wpwd-dashboard-body .wpwd-set-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.wpwd-dashboard-body .wpwd-set-head { margin: 0 0 2px; }
.wpwd-dashboard-body .wpwd-set-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.wpwd-dashboard-body .wpwd-set-head p { margin: 0; }
/* The panel already carries the section name, so the card's own <h2> would say
   it twice. */
.wpwd-dashboard-body .wpwd-set-panel .wpwd-cat-form > .wpwd-detail-h:first-child { display: none; }

@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-set { grid-template-columns: 1fr; }
	.wpwd-dashboard-body .wpwd-set-rail {
		flex-direction: row;
		overflow-x: auto;
		gap: 4px;
		padding-bottom: 4px;
	}
	.wpwd-dashboard-body .wpwd-set-tab { white-space: nowrap; }
}

/* .wpwd-field-hint was used in five places with NO rule anywhere, so every hint
   rendered as unstyled inline text. Matches .wpwd-field-help. */
.wpwd-field-hint {
	display: block;
	margin-top: 6px;
	color: var(--wpwd-ui-muted, #71717a);
	font-size: 0.82rem;
	line-height: 1.45;
}

/* ---- Users page ---- */
.wpwd-dashboard-body .wpwd-users-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wpwd-dashboard-body .wpwd-user-avatar { width: 52px; }
.wpwd-dashboard-body .wpwd-user-avatar img,
.wpwd-dashboard-body .wpwd-user-avatar .avatar {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	max-width: none;
}
.wpwd-dashboard-body .wpwd-perpage { display: flex; align-items: center; gap: 8px; color: #8a9899; font-size: 0.9rem; }
.wpwd-dashboard-body .wpwd-perpage select { min-width: 74px; min-height: 38px; padding: 6px 30px 6px 12px; }

/* ---- Deal attachments ---- */
.wpwd-deal-docs { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wpwd-deal-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wpwd-deal-doc-del { margin: 0 0 0 auto; }
.wpwd-deal-doc-del button { line-height: 1; }
.wpwd-deal-doc-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.wpwd-deal-docs-customer { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---- Detail drawer: header wrap, sticky sub-header + footer ---- */
/* Name wraps freely; Save stays a compact fixed pill top-right (never "Sav e"). */
.wpwd-dashboard-body .wpwd-opp-form-head {
	align-items: flex-start;
	flex-wrap: nowrap;
}
.wpwd-dashboard-body .wpwd-opp-form-head .wpwd-detail-name {
	min-width: 0;
	overflow-wrap: anywhere;
	flex: 1 1 auto;
}
.wpwd-dashboard-body .wpwd-opp-form-head > .wpwd-btn {
	flex: 0 0 auto;
	white-space: nowrap;
	align-self: flex-start;
}

/* Inside the drawer only: pin the name+Save row to the top of the scroll area
   and the action buttons to the bottom. The full-page ?action=view detail is
   left static. */
/* The name+Save row lives inside the status <form>; dropping that form's box
   (display:contents, submission unaffected) lets its sticky header travel the
   whole detail height instead of just the short form region. */
.wpwd-drawer-body .wpwd-opp-form { display: contents; }
.wpwd-drawer-body .wpwd-opp-form-head {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fff;
	margin: 0 -22px 14px;
	padding: 14px 22px;
	border-bottom: 1px solid #eef2f2;
}
/* Kill the container's top/bottom padding strips so the sticky bars sit flush;
   keep the 22px sides (the bars bleed over them with negative margins). */
.wpwd-drawer-body { padding-top: 0; padding-bottom: 0; }

/* Pinned action footer (Convert / Delete / …). Sticky at the bottom of the
   drawer scroll area; a plain flex button row on the full-page detail. */
.wpwd-detail-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid #eef2f2;
}
.wpwd-detail-foot form { margin: 0; }
/* Convert is a two-row form now (select over button), so it needs its own
   column in the footer rather than sharing a baseline with Delete. */
.wpwd-detail-foot .wpwd-lead-convert { flex: 1 1 220px; align-items: stretch; }
.wpwd-detail-foot .wpwd-btn { min-width: 120px; }
/* Convert asks for the fulfilment route, so its form is a row, not a button. */
.wpwd-lead-convert {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* The route select takes the row's full width and the button sits under it.
   It was `width: auto; min-width: 152px` in a nowrap flex row, which cropped
   "Survey & install" to "Survey & ins…" — the one label of the four that has to
   be read to be chosen. A select is not a button and does not have to share a
   line with one. */
.wpwd-lead-convert { flex-wrap: wrap; }
/* display:flex above would beat the UA [hidden] rule; the form is toggled by
   frontend.js when the status changes. */
.wpwd-lead-convert[hidden] { display: none; }
.wpwd-lead-convert .wpwd-route-select {
	width: 100%;
	flex: 1 1 100%;
	min-width: 0;
}
.wpwd-lead-convert .wpwd-btn { flex: 1 1 auto; }
.wpwd-drawer-body .wpwd-detail-foot {
	position: sticky;
	bottom: 0;
	background: #fff;
	margin: 20px -22px 0;
	padding: 14px 22px;
}

/* ---- Guided enquiry wizard (public quote form) ---- */
.wpwd-wizard { margin-top: 6px; }
.wpwd-wizard-progress {
	height: 6px;
	border-radius: 999px;
	background: rgba(3, 157, 150, 0.12);
	overflow: hidden;
	margin-bottom: 8px;
}
.wpwd-wizard-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--primary);
	border-radius: 999px;
	transition: width 0.3s ease;
}
.wpwd-wizard-count { margin: 0 0 16px; font-size: 0.85rem; color: #8a9899; }
.wpwd-wizard-step-title { margin: 0 0 4px; font-size: 1.15rem; color: var(--heading, #17313a); }
.wpwd-wizard-step-sub { margin: 0 0 14px; color: #6b7a7b; font-size: 0.92rem; }

.wpwd-wz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
}
.wpwd-wz-grid--swatch { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

.wpwd-wz-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 10px;
	border: 1.5px solid var(--border, #e3e8e8);
	border-radius: 12px;
	background: var(--background, #fff);
	cursor: pointer;
	text-align: center;
	font: inherit;
	color: var(--heading, #17313a);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.wpwd-wz-card:hover { border-color: var(--primary); }
.wpwd-wz-card:active { transform: translateY(1px); }
.wpwd-wz-card.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
}
.wpwd-wz-card-img {
	display: block;
	height: 82px;
	border-radius: 8px;
	background: #f2f5f5 center/cover no-repeat;
}
.wpwd-wz-card-label { font-weight: 600; font-size: 0.9rem; }

.wpwd-wizard-steps { min-height: 120px; }
.wpwd-wizard-contact[hidden] { display: none; }
.wpwd-wizard-disclaimer {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--border, #e3e8e8);
	font-size: 0.82rem;
	line-height: 1.5;
	color: #6b7a7b;
}

/* ---- Settings: catalogue image picker ---- */
.wpwd-catimg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.wpwd-catimg-row {
	display: grid;
	grid-template-columns: 64px 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid var(--border, #e3e8e8);
	border-radius: 10px;
	background: #fff;
}
.wpwd-catimg-preview {
	width: 64px;
	height: 44px;
	object-fit: contain;
	background: #f7fafc;
	border-radius: 6px;
}
.wpwd-catimg-preview:not([src]) { visibility: hidden; }
.wpwd-catimg-name { font-weight: 600; font-size: 0.92rem; }

/* Option vocabularies (Products → Blinds). The image picker is the catalogue
   one above; the name is a bare input in a table cell, which picks up none of
   the dashboard form styling because that is scoped to .wpwd-um-field. */
.wpwd-dashboard-body .wpwd-term-name {
	width: 100%;
	max-width: 280px;
	font: inherit;
	box-sizing: border-box;
	min-height: 39px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wpwd-dashboard-body .wpwd-term-name:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.12);
	outline: none;
}
/* The picker sits in a table cell here, not the stacked list it was written
   for, so it lays out as one row rather than a grid. */
.wpwd-dashboard-body .wpwd-cat-table .wpwd-catimg-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 0;
	padding: 0;
	background: none;
}
/* Same again for the Product Categories form, where the picker sits in a
   .wpwd-um-field rather than a table cell. Scoped to the field: widening the
   base rule would restyle the Settings list it was written for. */
.wpwd-dashboard-body .wpwd-um-field .wpwd-catimg-row {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 0;
	padding: 0;
	background: none;
}

/* Products → Product Categories. The tree is flat markup with one spacer per
   level, not nested tables: every row has to be able to carry its own kebab,
   and a real element indents correctly when the table stacks on a phone (a
   text-indent or a padded cell does not survive the stacked layout). */
.wpwd-dashboard-body .wpwd-cat-indent {
	display: inline-block;
	width: 18px;
}

@media (max-width: 640px) {
	.wpwd-catimg-row { grid-template-columns: 48px 1fr; }
	.wpwd-catimg-row .wpwd-btn { grid-column: span 1; }
}

/* ---- The "Design & Order Online" page (/design/) ---------------------------
   The front door of the quote journey: a compact banner, the 1-2-3 strip, the
   full product grid, then the reassurance around it. Namespaced -pcat- for the
   grid (because .wpwd-cat-* is already the dashboard catalog CRUD's) and
   -design- for the page's own bands.

   The banner is deliberately short. wpwd_global_hero() suppresses the home
   slider on this page so all three product rows stay above the fold; a tall
   hero here would undo that. */

.wpwd-design-page { --wpwd-design-max: 1240px; }

/* ---- Shared photo band (banner + installation CTA) ---- */

.wpwd-design-band {
	position: relative;
	background: var(--heading);
	color: #fff;
	overflow: hidden;
}
/* Scrim as a gradient layer rather than a filter on the image, so the text
   keeps its contrast even when the image fails to load. */
.wpwd-design-band.has-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--wpwd-band-img);
	background-size: cover;
	background-position: center;
}
.wpwd-design-band.has-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(31, 49, 50, 0.94) 0%, rgba(31, 49, 50, 0.86) 42%, rgba(31, 49, 50, 0.45) 100%);
}
.wpwd-design-band-inner {
	position: relative;
	z-index: 1;
	max-width: var(--wpwd-design-max, 1240px);
	margin: 0 auto;
	padding: 42px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px 40px;
}

/* ---- The banner ---- */

.wpwd-design-hero .wpwd-design-band-inner { min-height: 240px; }
.wpwd-design-hero-body { flex: 1 1 380px; min-width: 0; }
.wpwd-design-hero .wpwd-eyebrow {
	margin: 0 0 8px;
	color: var(--light-accent, #A2DAD8);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.wpwd-design-hero-title {
	margin: 0 0 10px;
	font-family: var(--wpwd-display);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.1;
	color: #fff;
}
.wpwd-design-hero-sub {
	margin: 0;
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}
.wpwd-design-claims {
	flex: 1 1 300px;
	min-width: 0;
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpwd-design-claim {
	border-left: 3px solid var(--primary);
	padding: 4px 0 4px 14px;
}
.wpwd-design-claim strong { display: block; font-size: 0.98rem; color: #fff; }
.wpwd-design-claim span { display: block; font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }

/* ---- The 1-2-3 strip ---- */
/* The wording promises a survey, not a price and not a checkout — there is no
   instant pricing and no checkout yet. See wpwd_quote_catalogue_steps_html(). */

.wpwd-catalogue-page {
	max-width: var(--wpwd-design-max, 1240px);
	margin: 0 auto;
	padding: 0 20px 48px;
}

.wpwd-pcat-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 40px;
	margin: 0 -20px 30px;
	padding: 18px 20px;
	background: #fff;
	border-bottom: 1px solid var(--border);
	list-style: none;
}
.wpwd-pcat-step { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wpwd-pcat-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.86rem;
	flex: none;
}
.wpwd-pcat-step-label { font-weight: 700; color: var(--heading); font-size: 0.98rem; }

/* ---- The product grid ---- */
/* Seven across at desktop, exactly, so the twenty-one primary products read as
   the three rows the design calls for. auto-fill would reflow them into ragged
   rows at intermediate widths. */

.wpwd-pcat-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 14px;
}

.wpwd-pcat-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.wpwd-pcat-card:hover {
	border-color: var(--primary);
	box-shadow: 0 10px 26px rgba(47, 58, 60, 0.12);
	transform: translateY(-2px);
}
.wpwd-pcat-card:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
	border-color: var(--primary);
}

/* The two illustrations are stacked in this box so the open state cross-fades
   in place instead of pushing the label down. */
.wpwd-pcat-card-arts {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--section-bg);
}
@supports not (aspect-ratio: 1) {
	.wpwd-pcat-card-arts { height: 128px; }
}
.wpwd-pcat-card-art {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* PNG product cutouts: show the whole product, never crop a frame. */
	object-fit: contain;
	object-position: center;
	padding: 8px;
}
/* The bundled SVGs are an 800x520 canvas with the product name baked in at the
   foot. Crop to the top 800x440 so the card's own label is the only one. */
/* Same reason: <picture> is an inline box the optimiser inserts around the real
   image. It must not stack or size anything itself. */
.wpwd-pcat-card-arts picture {
	display: contents;
}

.wpwd-pcat-card-art--svg {
	object-fit: cover;
	object-position: top center;
	padding: 0;
}

/* Hover artwork: hidden by default, revealed on hover/focus. */
.wpwd-pcat-card-art--open { opacity: 0; }
@media (hover: hover) {
	.wpwd-pcat-card-art--open { transition: opacity 0.22s ease; }
	.wpwd-pcat-card.has-open:hover .wpwd-pcat-card-art--open,
	.wpwd-pcat-card.has-open:focus-visible .wpwd-pcat-card-art--open { opacity: 1; }
	/* Descendant selectors, not child combinators. The image-optimisation plugin
	   wraps every Media Library <img> in a <picture>, so the artwork is a
	   grandchild of the art box, not a child — and with `>` the resting image
	   never faded out, leaving both images stacked on top of each other. Cards
	   drawing on the plugin's own bundled files were unaffected, which is what
	   made it invisible until the images moved into the library. */
	.wpwd-pcat-card.has-open:hover .wpwd-pcat-card-art:not(.wpwd-pcat-card-art--open),
	.wpwd-pcat-card.has-open:focus-visible .wpwd-pcat-card-art:not(.wpwd-pcat-card-art--open) { opacity: 0; }
	.wpwd-pcat-card-art:not(.wpwd-pcat-card-art--open) { transition: opacity 0.22s ease; }
}
/* Keyboard users get the swap on a touch device too, where :hover never fires. */
.wpwd-pcat-card.has-open:focus-visible .wpwd-pcat-card-art--open { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.wpwd-pcat-card-art { transition: none; }
	.wpwd-pcat-card { transition: none; }
	.wpwd-pcat-card:hover { transform: none; }
}

.wpwd-pcat-card-label {
	display: flex;
	align-items: center;
	justify-content: center;
	/* A fixed floor so a two-line name does not leave its row ragged: at seven
	   columns a card is only ~160px wide and several names wrap. */
	min-height: 3.4em;
	padding: 9px 8px 11px;
	border-top: 1px solid var(--border);
	text-align: center;
	font-weight: 700;
	font-size: 0.86rem;
	line-height: 1.25;
	color: var(--heading);
}
.wpwd-pcat-card:hover .wpwd-pcat-card-label { color: var(--primary-dark); }

/* ---- Frame design list art ------------------------------------------------
   The Frame Designs table's first column. The badge counts the photographs a
   design carries beyond the one on show, so a list row hints at the opening
   sequence behind it. */

.wpwd-fd-art {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
}
.wpwd-fd-art img,
.wpwd-fd-art svg {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}
.wpwd-fd-art-n {
	position: absolute;
	right: -6px;
	bottom: -4px;
	min-width: 18px;
	padding: 1px 4px;
	border-radius: 999px;
	background: var(--heading);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* ---- Card tooltip ----------------------------------------------------------
   The hover line: a product's short description, or its lead time. An element
   rather than a title attribute, because a native tooltip cannot be styled,
   takes about a second to appear and never shows on touch or keyboard focus.
   aria-describedby (set in PHP) is what makes it reach a screen reader, so the
   bubble must stay in the DOM rather than being display:none. */

.wpwd-pcat-card { position: relative; }

.wpwd-pcat-card-tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	z-index: 3;
	width: max-content;
	max-width: 230px;
	padding: 8px 11px;
	border-radius: var(--wpwd-radius-sm, 12px);
	background: var(--heading);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	/* Never intercept the pointer: the bubble sits over the card it belongs to,
	   and a tooltip that eats its own click would break the link. */
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}
.wpwd-pcat-card-tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: var(--heading);
}
.wpwd-pcat-card:hover .wpwd-pcat-card-tip,
.wpwd-pcat-card:focus-visible .wpwd-pcat-card-tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* The first row sits under the site header, where a bubble above the card would
   be clipped; flip those to hang below instead. */
.wpwd-pcat-grid > .wpwd-pcat-card:nth-child(-n + 7) .wpwd-pcat-card-tip {
	bottom: auto;
	top: calc(100% + 8px);
	transform: translate(-50%, -4px);
}
.wpwd-pcat-grid > .wpwd-pcat-card:nth-child(-n + 7) .wpwd-pcat-card-tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--heading);
}
.wpwd-pcat-grid > .wpwd-pcat-card:nth-child(-n + 7):hover .wpwd-pcat-card-tip,
.wpwd-pcat-grid > .wpwd-pcat-card:nth-child(-n + 7):focus-visible .wpwd-pcat-card-tip {
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.wpwd-pcat-card-tip { transition: none; }
}

/* ---- "Also available" ---- */

.wpwd-pcat-more-h {
	margin: 34px 0 14px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--secondary);
	text-align: center;
}
.wpwd-pcat-more-h::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin: 10px auto 0;
	background: var(--border);
}
.wpwd-pcat-grid--more {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 560px;
	margin: 0 auto;
}

.wpwd-pcat-note {
	margin: 30px auto 0;
	max-width: 760px;
	text-align: center;
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--secondary);
}

/* ---- Installation CTA ---- */

.wpwd-design-cta .wpwd-design-band-inner { justify-content: space-between; }
.wpwd-design-cta-body { flex: 1 1 460px; min-width: 0; }
.wpwd-design-cta-body h2 {
	margin: 0 0 8px;
	font-family: var(--wpwd-display);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	color: #fff;
}
.wpwd-design-cta-body p {
	margin: 0;
	max-width: 54ch;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}
.wpwd-design-cta .wpwd-cta-row { margin: 0; flex: 0 0 auto; }

/* ---- Delivery / efficiency promise strip ---- */

.wpwd-design-promise { background: var(--footer-bg); color: #fff; }
.wpwd-design-promise-inner {
	max-width: var(--wpwd-design-max, 1240px);
	margin: 0 auto;
	padding: 26px 20px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 34px;
	list-style: none;
}
.wpwd-design-promise-item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.wpwd-design-promise-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--accent);
}
.wpwd-design-promise-txt { min-width: 0; }
.wpwd-design-promise-txt strong { display: block; font-size: 1.02rem; }
.wpwd-design-promise-txt span { display: block; font-size: 0.87rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); }

/* ---- Advice tiles + article cards ---- */

.wpwd-design-advice { max-width: var(--wpwd-design-max, 1240px); margin: 0 auto; padding: 54px 20px; }
.wpwd-design-advice-sub { margin: 0 auto 28px; max-width: 62ch; color: var(--secondary); }

.wpwd-advice-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 34px;
}
.wpwd-advice-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--section-bg);
	text-decoration: none;
	color: var(--heading);
	font-weight: 700;
	font-size: 0.94rem;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.wpwd-advice-tile:hover {
	border-color: var(--primary);
	background: #fff;
	transform: translateY(-2px);
}
.wpwd-advice-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.wpwd-advice-tile-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--primary);
}
.wpwd-advice-tile:hover .wpwd-advice-tile-ico { background: var(--primary); border-color: var(--primary); color: #fff; }
.wpwd-advice-tile-label { min-width: 0; }

.wpwd-article-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.wpwd-article-card {
	display: grid;
	grid-template-columns: 190px 1fr;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpwd-article-card:hover { border-color: var(--primary); box-shadow: 0 10px 26px rgba(47, 58, 60, 0.1); }
.wpwd-article-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.wpwd-article-media { display: block; position: relative; background: var(--section-bg); min-height: 150px; }
/* Descendant selector, not a child one: the image optimiser wraps <img> in a
   <picture> for WebP, which would break `> img`. */
.wpwd-article-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wpwd-article-media.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--light-accent);
}
.wpwd-article-body { padding: 18px 20px; min-width: 0; }
.wpwd-article-body strong { display: block; margin-bottom: 6px; font-size: 1.05rem; line-height: 1.3; color: var(--heading); }
.wpwd-article-excerpt { display: block; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.wpwd-article-more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--primary-dark);
	text-decoration: underline;
}

/* ---- Responsive ---- */
/* The grid steps down whole columns rather than reflowing, so the rows stay
   readable as rows at every width. */

@media (max-width: 1180px) {
	.wpwd-pcat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.wpwd-pcat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wpwd-advice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wpwd-article-grid { grid-template-columns: minmax(0, 1fr); }
	.wpwd-design-promise-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* 768, not 760: the tablet edge. 767 elsewhere in this file is Kadence's own
   mobile-menu boundary and is deliberately one pixel below it. */
@media (max-width: 768px) {
	.wpwd-pcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.wpwd-pcat-grid--more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wpwd-design-band-inner { padding: 32px 16px; gap: 20px; }
	.wpwd-design-hero .wpwd-design-band-inner { min-height: 0; }
	.wpwd-design-advice { padding: 40px 16px; }
	.wpwd-article-card { grid-template-columns: minmax(0, 1fr); }
	.wpwd-article-media { min-height: 170px; }
}
@media (max-width: 520px) {
	.wpwd-pcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wpwd-pcat-grid--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wpwd-advice-grid { grid-template-columns: minmax(0, 1fr); }
	.wpwd-pcat-steps { gap: 8px 18px; margin: 0 -16px 24px; padding: 14px 16px; }
	.wpwd-pcat-step-label { font-size: 0.86rem; }
	.wpwd-pcat-card-label { min-height: 3em; font-size: 0.82rem; }
	.wpwd-catalogue-page { padding: 0 16px 36px; }
}

/* Nothing on this page may cause a sideways scroll. */
.wpwd-design-page,
.wpwd-design-band-inner,
.wpwd-design-promise-inner,
.wpwd-design-advice,
.wpwd-advice-grid,
.wpwd-article-grid,
.wpwd-article-card,
.wpwd-catalogue-page,
.wpwd-pcat-grid,
.wpwd-pcat-card { min-width: 0; max-width: 100%; }


/* ---- Visual product catalogue (the wizard's first step) ---- */
/* Wider tracks than the option grid: these cards carry an illustration, a name
   and a call to action, not just a label. */
.wpwd-wz-grid--catalogue { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

.wpwd-wz-card--cat { padding: 0 0 14px; overflow: hidden; gap: 0; }

/* The supplied artwork is 800x520 with its own caption baked in at the foot.
   The card prints the name itself (and needs it in the DOM to be searchable and
   translatable), so show only the 800x440 illustration above that caption
   rather than editing the delivered SVGs. */
.wpwd-wz-card--cat .wpwd-wz-card-art {
	display: block;
	width: 100%;
	aspect-ratio: 800 / 440;
	object-fit: cover;
	object-position: top center;
	background: #f7fafc;
	border-bottom: 1px solid var(--border, #e3e8e8);
}
@supports not (aspect-ratio: 1) {
	.wpwd-wz-card--cat .wpwd-wz-card-art { height: 140px; }
}

.wpwd-wz-card--cat .wpwd-wz-card-label { display: block; margin: 12px 12px 0; font-size: 0.95rem; }
.wpwd-wz-card--cat .wpwd-wz-card-benefit,
.wpwd-wz-card--cat .wpwd-wz-card-lead {
	display: block;
	margin: 4px 12px 0;
	font-size: 0.8rem;
	font-weight: 400;
	color: #6b7a7b;
}
.wpwd-wz-card--cat .wpwd-wz-card-cta {
	display: inline-block;
	margin: 10px 12px 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary);
}
.wpwd-wz-card--cat:hover .wpwd-wz-card-cta { text-decoration: underline; }

@media (max-width: 480px) {
	.wpwd-wz-grid--catalogue { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

.wpwd-wz-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	border: 1.5px solid var(--border, #e3e8e8);
	border-radius: 12px;
	background: var(--background, #fff);
	cursor: pointer;
	font: inherit;
	color: var(--heading, #17313a);
}
.wpwd-wz-swatch:hover { border-color: var(--primary); }
.wpwd-wz-swatch.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
}
.wpwd-wz-swatch-dot {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ccc center/cover no-repeat;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.wpwd-wz-swatch-label { font-size: 0.82rem; font-weight: 600; text-align: center; }

.wpwd-wizard-error {
	margin: 12px 0 0;
	color: #b3261e;
	font-size: 0.9rem;
	font-weight: 600;
}
.wpwd-wizard-nav {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 20px;
}
.wpwd-wizard-nav .wpwd-wizard-next,
.wpwd-wizard-nav .wpwd-wizard-submit { margin-left: auto; }
/* .wpwd-btn sets display:inline-block, which outranks the UA's [hidden]
   {display:none} — so a button the wizard hides would still be painted. This
   selector is one class more specific, so no !important is needed. */
.wpwd-btn[hidden] { display: none; }

/* ---- Lead spec table (swatch / thumbnail) ---- */
.wpwd-lead-spec td { vertical-align: middle; }
/* Reference component prices / "Included" — secondary to the design + size price. */
.wpwd-comp-note { color: #6b7280; font-size: 0.9em; }
.wpwd-lead-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: -3px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.wpwd-lead-thumb {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	margin-right: 8px;
	vertical-align: -6px;
	background: #f2f5f5 center/cover no-repeat;
}

/* ---- Trade team (Phase 2) ---- */
.wpwd-dashboard-body .wpwd-team-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.wpwd-dashboard-body .wpwd-team-inline select { min-height: 34px; }
.wpwd-dashboard-body .wpwd-team-invite .wpwd-field-row { align-items: end; }

/* ---- Trade quotations (Phase 3) ---- */
.wpwd-dashboard-body .wpwd-q-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.wpwd-dashboard-body .wpwd-q-actions-row form { margin: 0; }
/* Print / Save as PDF: show only the quotation, nothing else. */
@media print {
	body * { visibility: hidden !important; }
	.wpwd-qprint, .wpwd-qprint * { visibility: visible !important; }
	.wpwd-qprint { position: absolute; inset: 0; width: 100%; padding: 0; }
	.wpwd-dash-aside, .wpwd-dash-topbar, .wpwd-dash-footer, .wpwd-breadcrumb, .wpwd-q-actions-row, .wpwd-cat-back { display: none !important; }
}

/* -------------------------------------------------------------------------
 * Bulk actions (dashboard list tables) — see includes/bulk-actions.php and
 * assets/dashboard.js. The narrow checkbox column, the toolbar (hidden until a
 * selection exists), and the styled confirm modal for dangerous actions.
 * ---------------------------------------------------------------------- */

.wpwd-bulk-col {
	width: 2.4em;
	text-align: center;
	white-space: nowrap;
}

.wpwd-bulk-col input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--wpwd-amber);
}

/* The All / Trash switch above a list (includes/bulk-actions.php). Always shown
   for admins, unlike the toolbar, so the trash is discoverable when empty. */
.wpwd-bulk-views {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px;
	font-size: 0.9em;
}

.wpwd-bulk-view {
	color: var(--muted, #6b7280);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.wpwd-bulk-view:hover {
	color: var(--heading);
}

.wpwd-bulk-view.is-active {
	color: var(--heading);
	font-weight: 700;
	border-bottom-color: var(--wpwd-amber);
}

/* Toolbar: laid out above its table, collapsed until at least one row is checked. */
.wpwd-bulk-toolbar {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 8px 12px;
	background: var(--gold-light, #FFF3D6);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.wpwd-bulk-toolbar.is-active {
	display: flex;
}

.wpwd-bulk-count {
	font-weight: 700;
	color: var(--heading);
	font-size: 0.9em;
}

.wpwd-bulk-select {
	padding: 6px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--background);
	color: var(--text);
	font-size: 0.9em;
	max-width: 220px;
}

.wpwd-btn-sm {
	padding: 0.45em 1.1em;
	font-size: 0.85em;
	box-shadow: none;
}

/* Confirm modal (appended to <body> by dashboard.js). */
.wpwd-bulk-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.wpwd-bulk-modal-overlay.is-open {
	opacity: 1;
}

.wpwd-bulk-modal {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: translateY(8px);
	transition: transform 0.18s ease;
}

.wpwd-bulk-modal-overlay.is-open .wpwd-bulk-modal {
	transform: translateY(0);
}

.wpwd-bulk-modal-title {
	margin: 0 0 8px;
	font-size: 1.15em;
	color: var(--danger);
}

.wpwd-bulk-modal-body {
	margin: 0 0 20px;
	color: var(--text, #55635f);
	line-height: 1.5;
}

.wpwd-bulk-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.wpwd-bulk-modal-ok {
	background: var(--danger);
}

.wpwd-bulk-modal-ok:hover {
	background: #a5281b;
	/* White is correct on this dark ground — stated, not inherited from
	   Kadence's blanket button:hover, so the pairing is explicit. */
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Window price-list picker (layout drawing + exact-size live price)
 * ---------------------------------------------------------------------- */
.wpwd-window-pricer {
	display: grid;
	grid-template-columns: minmax(180px, 320px) 1fr;
	gap: 32px;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 32px 20px;
}
.wpwd-window-pricer__draw {
	display: flex;
	justify-content: center;
}
.wpwd-window-pricer__draw svg {
	width: 100%;
	max-width: 280px;
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(20, 40, 60, 0.12));
}
.wpwd-window-pricer__form h2 {
	margin: 0 0 6px;
}
.wpwd-window-pricer__note {
	color: #5b6b70;
	font-size: 0.9rem;
	margin: 0 0 16px;
}
.wpwd-window-pricer__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}
.wpwd-window-pricer__row label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	font-size: 0.9rem;
}
.wpwd-window-pricer__row select {
	padding: 10px 12px;
	border: 1px solid var(--border, #c8d2d6);
	border-radius: 8px;
	font-size: 1rem;
	min-width: 140px;
	background: var(--background);
	color: var(--text);
}
.wpwd-window-pricer__price {
	min-height: 2.2em;
	margin: 4px 0 18px;
	font-size: 1.9rem;
	font-weight: 700;
	color: #12313f;
}
.wpwd-window-pricer__price .wpwd-price-locked {
	font-size: 1rem;
	font-weight: 600;
}
@media (max-width: 720px) {
	.wpwd-window-pricer {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* -------------------------------------------------------------------------
 * Jobs & Payments panels
 * ---------------------------------------------------------------------- */
.wpwd-lead-stat--lost { --stat-accent: #c0392b; }
.wpwd-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	background: #eef2f4;
	color: #33474f;
	/* A pill must not break mid-label: in a narrow column "Cash In" was
	   wrapping to two lines inside the rounded background. */
	white-space: nowrap;
}
.wpwd-badge.wpwd-lead-stat--converted { background: #e4f4ea; color: #1c7a44; }
.wpwd-badge.wpwd-lead-stat--contacted { background: #fdf1dd; color: #a5641a; }
.wpwd-badge.wpwd-lead-stat--new       { background: #e7f0fb; color: #24608c; }

/* -------------------------------------------------------------------------
 * Job status pills — the fulfilment pipeline, in colour
 *
 * ITS OWN SCOPE, not the shared .wpwd-cat-badge.is-* set. `.is-new` there is
 * the lead pipeline's gold, and a job's New is a neutral "nothing has happened
 * yet" — sharing one class would have made the two domains fight over a colour.
 *
 * The ramp is cool -> warm -> green, in pipeline order, so a Status column
 * reads as progress down the page rather than as ten unrelated words. on_hold
 * steps out of the ramp deliberately: muted, dashed, visibly not a step. Every
 * pill carries a transparent border so that dash cannot shift it by a pixel.
 *
 * Each status sets TOKENS rather than properties, and the base rule reads them.
 * That is what lets the dark block below re-tint all ten by redefining two
 * custom properties per status instead of restating background and color.
 * ---------------------------------------------------------------------- */
.wpwd-dashboard-body .wpwd-job-status {
	border: 1px solid transparent;
	background: var(--wpwd-js-bg, #eef2f4);
	color: var(--wpwd-js-ink, #33474f);
}
.wpwd-dashboard-body .wpwd-job-status.is-new            { --wpwd-js-bg: #EEF2F4; --wpwd-js-ink: #55636B; }
.wpwd-dashboard-body .wpwd-job-status.is-confirmed      { --wpwd-js-bg: #E4F1FB; --wpwd-js-ink: #1F6AA8; }
.wpwd-dashboard-body .wpwd-job-status.is-in_preparation { --wpwd-js-bg: #EEF2FF; --wpwd-js-ink: #3730A3; }
.wpwd-dashboard-body .wpwd-job-status.is-in_production  { --wpwd-js-bg: #EFE9FB; --wpwd-js-ink: #6B46C1; }
.wpwd-dashboard-body .wpwd-job-status.is-ready          { --wpwd-js-bg: #DFF3F2; --wpwd-js-ink: #027F79; }
.wpwd-dashboard-body .wpwd-job-status.is-delivery       { --wpwd-js-bg: #FFF3D6; --wpwd-js-ink: #8A5A00; }
.wpwd-dashboard-body .wpwd-job-status.is-installation   { --wpwd-js-bg: #FFEDD5; --wpwd-js-ink: #B45309; }
.wpwd-dashboard-body .wpwd-job-status.is-completed      { --wpwd-js-bg: #DCFCE7; --wpwd-js-ink: #15803D; }
.wpwd-dashboard-body .wpwd-job-status.is-on_hold        { --wpwd-js-bg: #F4F1EA; --wpwd-js-ink: #7A6A55; border-color: #DCD3C4; border-style: dashed; }
.wpwd-dashboard-body .wpwd-job-status.is-cancelled      { --wpwd-js-bg: #FDEDEC; --wpwd-js-ink: #C0392B; }

/* Dark theme. BOTH selectors on every rule — the server stamps
   .wpwd-dash[data-theme] from user meta, the inline head snippet stamps
   html[data-wpwd-theme] from localStorage before .wpwd-dash exists, and a pill
   that names only one of them keeps its pale daytime background on a dark card.
   Written out per status rather than tokenised further because --gold-light and
   --danger-light are NOT redefined in the dark palette, so delivery and
   cancelled could not have borrowed them. */
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-new,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-new            { --wpwd-js-bg: #262B2E; --wpwd-js-ink: #B6C2C8; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-confirmed,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-confirmed      { --wpwd-js-bg: #16293C; --wpwd-js-ink: #93C5FD; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-in_preparation,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-in_preparation { --wpwd-js-bg: #1E2145; --wpwd-js-ink: #A5B4FC; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-in_production,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-in_production  { --wpwd-js-bg: #2A2140; --wpwd-js-ink: #C4B5FD; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-ready,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-ready          { --wpwd-js-bg: #10312F; --wpwd-js-ink: #5EEAD4; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-delivery,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-delivery       { --wpwd-js-bg: #33280C; --wpwd-js-ink: #FCD34D; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-installation,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-installation   { --wpwd-js-bg: #35220E; --wpwd-js-ink: #FDBA74; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-completed,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-completed      { --wpwd-js-bg: #12301F; --wpwd-js-ink: #6EE7B7; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-on_hold,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-on_hold        { --wpwd-js-bg: #2A2724; --wpwd-js-ink: #C9BCA6; border-color: #4A4237; }
.wpwd-dash[data-theme="dark"] .wpwd-job-status.is-cancelled,
html[data-wpwd-theme="dark"] .wpwd-job-status.is-cancelled      { --wpwd-js-bg: #3A1B18; --wpwd-js-ink: #FCA5A5; }
.wpwd-cat-sub { display: block; font-size: 0.8rem; color: #6a7a80; }
.wpwd-owed { color: #c0392b; }
.wpwd-jp-status-form { margin: 0; }
.wpwd-jp-status-form select {
	padding: 5px 8px;
	border: 1px solid var(--border, #c8d2d6);
	border-radius: 6px;
	background: var(--background);
	color: var(--text);
	font-size: 0.85rem;
}
.wpwd-jp-subhead { margin: 1.5rem 0 0.5rem; }

/* Payments — record-payment form (inline row) */
.wpwd-pay-form.wpwd-field-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 1rem;
	padding: 14px;
	background: #f6f8f9;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.wpwd-pay-form .wpwd-field { margin: 0; }
.wpwd-pay-form .wpwd-field input,
.wpwd-pay-form .wpwd-field select {
	padding: 8px 10px;
	border: 1px solid #c8d2d6;
	border-radius: 8px;
}
.wpwd-pay-form .wpwd-pay-submit { align-self: flex-end; }

/* SPA panel swap: dim while fetching */
.wpwd-dash-panel { position: relative; }
.wpwd-dash-panel.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.12s; }

/* Opportunities: Board/List view toggle */
.wpwd-view-switch {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 1rem;
}
.wpwd-view-toggle {
	padding: 6px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--heading);
	text-decoration: none;
	background: var(--background);
}
.wpwd-view-toggle + .wpwd-view-toggle { border-left: 1px solid var(--border); }
.wpwd-view-toggle.is-active { background: var(--primary, #039d96); color: #fff; }

/* ===========================================================================
   Lead conversations: thread table, customer page, Messages inbox,
   sidebar unread badges and the topbar notification bell.
   ======================================================================== */

/* ---- Sidebar unread pills (Messages / Leads) ---- */
.wpwd-nav-badge {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: #2563eb;
	border-radius: 999px;
}
.wpwd-nav-badge[data-badge="leads"] { background: #059669; }
.wpwd-nav-badge[hidden] { display: none; }

/* ---- Conversation thread table (staff detail + customer page) ---- */
.wpwd-lead-thread {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 14px;
	font-size: 0.92rem;
}
.wpwd-lead-thread th {
	text-align: left;
	padding: 8px 12px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wpwd-muted, #6B7576);
	border-bottom: 1px solid var(--wpwd-line, #E7ECEC);
}
.wpwd-lead-thread td {
	padding: 10px 12px;
	vertical-align: top;
	border-bottom: 1px solid var(--wpwd-line, #E7ECEC);
}
.wpwd-lead-thread tr.is-customer { background: #f4f8f8; }
.wpwd-lead-thread .wpwd-thread-who { font-weight: 700; color: var(--wpwd-ink, #2E3A3B); }
.wpwd-lead-thread tr.is-admin .wpwd-thread-who { color: #039D96; }
.wpwd-lead-thread .wpwd-thread-when { white-space: nowrap; color: var(--wpwd-muted, #6B7576); font-size: 0.82rem; }
.wpwd-lead-thread-empty { color: var(--wpwd-muted, #6B7576); font-style: italic; margin: 0 0 14px; }

/* Air between the From / Message / When table and the reply box below it.
   ⚠ The MARGIN GOES ON THE WRAPPER, not on .wpwd-lead-thread. The wrapper is
   the AJAX swap target — its innerHTML is replaced wholesale after every reply —
   and it holds either the table or the "no messages yet" paragraph, so a margin
   on either of those children survives neither the empty state nor the swap.
   Until now the wrapper had no rule at all and the reply box butted straight
   against the last row. */
.wpwd-lead-thread-wrap { margin-bottom: 18px; }
.wpwd-lead-thread-wrap .wpwd-lead-thread,
.wpwd-lead-thread-wrap .wpwd-lead-thread-empty { margin-bottom: 0; }

.wpwd-thread-form textarea,
.wpwd-lead-conv-form textarea {
	width: 100%;
	min-height: 72px;
	padding: 10px 12px;
	border: 1px solid var(--wpwd-line, #E7ECEC);
	border-radius: 8px;
	margin: 0 0 10px;
	font: inherit;
	resize: vertical;
}

/* ---- Customer conversation page ---- */
.wpwd-lead-conv-card { max-width: 640px; }
.wpwd-lead-conv-card .wpwd-lead-thread { margin-top: 10px; }

/* ---- Messages inbox rows ---- */
.wpwd-messages-table tr.is-unread td:first-child { font-weight: 700; }
.wpwd-messages-table .wpwd-nav-badge { margin-left: 8px; }

/* ---- Topbar notification bell ---- */
/* ===========================================================================
   Topbar chrome: menus, search, notifications, language, profile.

   ONE MENU CONTRACT. These used to be four dropdowns with two different open
   mechanisms — a class on the wrapper for some, the `hidden` attribute for
   others — so every new one had to pick a side and the CSS could not be
   shared. They are all `[data-wpwd-menu]` + `[data-wpwd-menu-panel]` now, and
   the panel is hidden by the attribute, which means it is hidden even before
   the stylesheet loads.
   =========================================================================== */

.wpwd-menu { position: relative; flex: none; }

.wpwd-menu-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	background: var(--wpwd-ui-card);
	border: 1px solid var(--wpwd-ui-line);
	border-radius: var(--wpwd-ui-radius-sm);
	box-shadow: var(--wpwd-ui-shadow-pop);
	overflow: hidden;
	max-width: 92vw;
}
.wpwd-menu-panel[hidden] { display: none; }

/* ---- Global search ---- */
.wpwd-dash-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 32rem;
	margin: 0 auto;
}
.wpwd-dash-search input[type="search"],
.wpwd-dash-search input[type="text"] {
	width: 100%;
	padding: 8px 40px 8px 16px;
	border: 1px solid var(--wpwd-ui-topbar-line);
	border-radius: 999px;
	background: var(--wpwd-ui-card);
	color: var(--wpwd-ui-ink);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.4;
}
.wpwd-dash-search input::placeholder { color: #9ca3af; }
.wpwd-dash-search input:focus {
	outline: none;
	border-color: var(--wpwd-ui-primary);
	box-shadow: 0 0 0 3px rgba(30, 30, 45, 0.12);
}
/* The magnifier is decorative and must never eat the click that should land
   on the input behind it. */
.wpwd-dash-search-icon {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: #9ca3af;
	line-height: 0;
	pointer-events: none;
}
.wpwd-dash-search .wpwd-menu-panel {
	left: 0;
	right: 0;
	width: auto;
	max-height: 320px;
	overflow-y: auto;
	border-radius: var(--wpwd-ui-radius-sm);
}
.wpwd-search-group {
	padding: 8px 16px 4px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wpwd-ui-muted);
}
.wpwd-search-hit {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	text-decoration: none;
	color: var(--wpwd-ui-ink);
	font-size: 0.875rem;
}
.wpwd-search-hit:hover,
.wpwd-search-hit.is-cursor { background: var(--wpwd-ui-hover); }
.wpwd-search-hit .wpwd-search-meta {
	color: var(--wpwd-ui-muted);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wpwd-search-empty,
.wpwd-search-busy { padding: 16px; text-align: center; color: var(--wpwd-ui-muted); font-size: 0.875rem; }

/* ---- Notification bell ---- */
.wpwd-bell { position: relative; flex: none; }

.wpwd-bell-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: var(--wpwd-ui-danger);
	border-radius: 999px;
}
.wpwd-bell-count[hidden] { display: none; }

.wpwd-bell-dropdown { width: 384px; padding: 0; }

.wpwd-bell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 16px;
	background: #f9fafb;
	border-bottom: 1px solid var(--wpwd-ui-line);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wpwd-ui-nav-on);
}
.wpwd-bell-mute {
	border: 0;
	background: transparent;
	padding: 6px;
	border-radius: var(--wpwd-ui-radius-sm);
	color: var(--wpwd-ui-muted);
	cursor: pointer;
	line-height: 0;
}
.wpwd-bell-mute:hover { background: #e5e7eb; color: var(--wpwd-ui-nav-on); }

.wpwd-bell-list { max-height: 256px; overflow-y: auto; }

.wpwd-bell-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--wpwd-ui-line);
	text-decoration: none;
	color: var(--wpwd-ui-ink);
	transition: filter 0.15s ease;
}
.wpwd-bell-item:hover { filter: brightness(0.97); }

/* The tint is the notification TYPE, not the read state — an unread row is
   told apart by the dot, so a read info notice keeps its blue and the list
   does not turn into a wall of white the moment you glance at it. */
.wpwd-bell-item.is-info    { background: #eff6ff; }
.wpwd-bell-item.is-success { background: #f0fdf4; }
.wpwd-bell-item.is-warning { background: #fefce8; }
.wpwd-bell-item.is-danger  { background: #fef2f2; }

.wpwd-bell-disc {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #dbeafe;
	color: #2563eb;
}
.wpwd-bell-item.is-success .wpwd-bell-disc { background: #dcfce7; color: #16a34a; }
.wpwd-bell-item.is-warning .wpwd-bell-disc { background: #fef9c3; color: #ca8a04; }
.wpwd-bell-item.is-danger  .wpwd-bell-disc { background: #fee2e2; color: #dc2626; }

.wpwd-bell-text { flex: 1 1 auto; min-width: 0; }
.wpwd-bell-title { font-size: 0.875rem; font-weight: 600; color: #111827; }
/* Two lines, then ellipsis. A notification body is a summary; letting it run
   to six lines pushes every other notification out of the 256px scroller. */
.wpwd-bell-body {
	font-size: 0.875rem;
	color: #4b5563;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wpwd-bell-when { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 4px; }
.wpwd-bell-item.is-unread .wpwd-bell-title::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--wpwd-ui-badge-blue);
	vertical-align: middle;
}

.wpwd-bell-x {
	flex: none;
	border: 0;
	background: transparent;
	padding: 2px;
	color: #9ca3af;
	cursor: pointer;
	line-height: 0;
	border-radius: 4px;
}
.wpwd-bell-x:hover { color: var(--wpwd-ui-danger); }

.wpwd-bell-empty { padding: 24px 16px; color: var(--wpwd-ui-muted); text-align: center; font-size: 0.875rem; }

.wpwd-bell-readall {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--wpwd-ui-line);
	background: #f9fafb;
	color: #111827;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
}
.wpwd-bell-readall:hover { background: #f3f4f6; }
.wpwd-bell-readall svg { vertical-align: -3px; margin-right: 6px; }

.wpwd-bell-all {
	display: block;
	padding: 10px 12px;
	text-align: center;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wpwd-ui-link);
	background: var(--wpwd-ui-card);
}
.wpwd-bell-all:hover { background: #f9fafb; }

/* ---- Language switcher ---- */
.wpwd-lang-toggle .wpwd-lang-code { font-size: 0.75rem; font-weight: 500; line-height: 1; }
.wpwd-lang-panel { width: 160px; padding: 4px 0; }
.wpwd-lang-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	background: transparent;
	color: var(--wpwd-ui-nav-on);
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
}
.wpwd-lang-item:hover { background: #f3f4f6; color: var(--wpwd-ui-ink, #18181b); }
/* The spacer keeps the unchecked labels on the same left edge as the checked
   one; without it the list jogs sideways as the choice changes. */
.wpwd-lang-item .wpwd-lang-check { width: 16px; height: 16px; flex: none; line-height: 0; color: var(--wpwd-ui-primary); }

/* ---- Profile menu ---- */
.wpwd-user-dropdown.wpwd-menu-panel { width: 224px; padding: 0; list-style: none; margin: 0; }
.wpwd-user-dropdown .wpwd-user-id {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #f3f4f6;
}
.wpwd-user-dropdown .wpwd-user-id strong { display: block; font-size: 0.875rem; font-weight: 600; color: #111827; }
.wpwd-user-dropdown .wpwd-user-id span { display: block; font-size: 0.75rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }
.wpwd-user-dropdown li a,
.wpwd-user-dropdown li button {
	display: block;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	background: transparent;
	color: var(--wpwd-ui-nav-on);
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.wpwd-user-dropdown li a:hover,
.wpwd-user-dropdown li button:hover { background: #f3f4f6; }

/* ---------------------------------------------------------------------------
   Cash Management (includes/cash.php)
   Chart wrappers need an explicit height because Chart.js is set to
   maintainAspectRatio:false — without it the canvas collapses to 0.
   --------------------------------------------------------------------------- */
.wpwd-dashboard-body .wpwd-cash-flow-wrap { height: 300px; }
.wpwd-dashboard-body .wpwd-cash-chart canvas { max-width: 100%; }

/* Signed amounts in the ledger. */
.wpwd-dashboard-body .wpwd-cash-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpwd-dashboard-body .wpwd-cash-amt.is-in { color: #15803D; }
.wpwd-dashboard-body .wpwd-cash-amt.is-out { color: #c0392b; }

/* Direction badges reuse the shared .wpwd-badge shell. */
.wpwd-dashboard-body .wpwd-badge--cash-in { background: #e6f5f0; color: #15803D; }
.wpwd-dashboard-body .wpwd-badge--cash-out { background: #fdecea; color: #c0392b; }
/* Payment status. Deliberately cooler than the in/out pair above so direction
   and status stay tellable apart at a glance in the same row. */
.wpwd-dashboard-body .wpwd-badge--cash-paid { background: #e6f5f0; color: #15803d; }
.wpwd-dashboard-body .wpwd-badge--cash-pending { background: #fef6e7; color: #92400e; }
.wpwd-dashboard-body .wpwd-badge--cash-failed { background: #fdecea; color: #c0392b; }
.wpwd-dashboard-body .wpwd-badge--cash-refunded { background: #eef2ff; color: #3730a3; }
/* Equal width so the two pills align down the Type column rather than one
   sitting visibly narrower than the other. */
.wpwd-dashboard-body .wpwd-badge--cash-in,
.wpwd-dashboard-body .wpwd-badge--cash-out {
	min-width: 5.5rem;
	padding: 4px 10px;
	text-align: center;
}
/* "August 24, 2026" on one line. The table wrapper already scrolls sideways if
   it runs out of room, so nothing is clipped by this. */
.wpwd-dashboard-body .wpwd-cash-date { white-space: nowrap; }

/* Description counter turns amber as it reaches the cap. */
.wpwd-dashboard-body .wpwd-cash-desc-count.is-full { color: #E0A100; font-weight: 600; }

/* Read-only detail table: label column on the left. */
.wpwd-dashboard-body .wpwd-cash-detail th {
	width: 220px;
	text-align: left;
	font-weight: 600;
	vertical-align: top;
}

/* Category manager rows lay out as one inline form per row. */
.wpwd-dashboard-body .wpwd-cash-cat-cell { padding: 0; }
.wpwd-dashboard-body .wpwd-cash-cat-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
}
.wpwd-dashboard-body .wpwd-cash-cat-row input[type="text"] { flex: 1 1 220px; min-width: 0; }
.wpwd-dashboard-body .wpwd-cash-cat-row input[type="number"] { flex: 0 0 130px; }
.wpwd-dashboard-body .wpwd-cash-cat-count { flex: 0 0 auto; color: #8a9899; font-size: 13px; }
.wpwd-dashboard-body .wpwd-cash-cat-locked { font-size: 13px; }
.wpwd-dashboard-body .wpwd-cat-clear.is-danger { color: #c0392b; }

@media (max-width: 640px) {
	.wpwd-dashboard-body .wpwd-cash-flow-wrap { height: 240px; }
	.wpwd-dashboard-body .wpwd-cash-cat-row input[type="text"],
	.wpwd-dashboard-body .wpwd-cash-cat-row input[type="number"] { flex: 1 1 100%; }
	.wpwd-dashboard-body .wpwd-cash-detail th { width: auto; }
}

/* ---------------------------------------------------------------------------
   Create New Customer modal (includes/customer-quick-create.php)
   A general-purpose content modal. The only pre-existing dialog
   (.wpwd-bulk-modal) is text-only and danger-toned, so it could not host a form.
   --------------------------------------------------------------------------- */
.wpwd-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.wpwd-modal-overlay.is-open { opacity: 1; }

.wpwd-modal {
	position: fixed;
	z-index: 10001;
	top: 50%;
	left: 50%;
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, calc(-50% + 8px));
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.wpwd-modal.is-open { opacity: 1; transform: translate(-50%, -50%); }

.wpwd-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid #e8eded;
}
.wpwd-modal-title { margin: 0; font-size: 1.15rem; }
.wpwd-modal-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #8a9899;
	padding: 0 4px;
}
.wpwd-modal-close:hover { color: #c0392b; }
.wpwd-modal-body { padding: 20px 22px; overflow-y: auto; }

/* Field grid inside the modal. */
.wpwd-nc-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.wpwd-nc-row > .wpwd-field { flex: 1 1 200px; min-width: 0; }
.wpwd-nc-row--name > .wpwd-nc-prefix { flex: 0 0 110px; }
.wpwd-nc-form .wpwd-field { margin: 0 0 14px; }
.wpwd-nc-form .wpwd-field > label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
.wpwd-nc-form input[type="text"],
.wpwd-nc-form input[type="email"],
.wpwd-nc-form input[type="tel"],
.wpwd-nc-form input[type="password"],
.wpwd-nc-form select { width: 100%; }
.wpwd-nc-form .wpwd-field-help { display: block; margin-top: 4px; font-size: 0.8rem; color: #8a9899; }
.wpwd-nc-subhead { margin: 6px 0 10px; font-size: 0.95rem; }
.wpwd-nc-hint { margin: -4px 0 10px; font-size: 0.82rem; color: #8a9899; }
.wpwd-nc-trade, .wpwd-nc-pw { border-top: 1px solid #eef2f2; padding-top: 14px; margin-top: 4px; }
.wpwd-nc-match { display: block; margin-top: 4px; font-size: 0.8rem; }
.wpwd-nc-match.is-ok { color: #15803D; }
.wpwd-nc-match.is-bad { color: #c0392b; }
.wpwd-nc-errors { margin: 4px 0 14px; }
.wpwd-nc-errors ul { margin: 0; padding-left: 18px; }
.wpwd-nc-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	border-top: 1px solid #e8eded;
	padding-top: 16px;
	margin-top: 6px;
}
/* The create button sits beside the picker it feeds.
 *
 * A row, not a column: the control is nested div > p > label > select, so the
 * flex row's first child is the <p>, and align-items:flex-end is what lines the
 * button up with the control rather than with the label above it. */
.wpwd-field-withbtn { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
.wpwd-field-withbtn > .wpwd-um-field,
.wpwd-field-withbtn > p { flex: 1 1 auto; min-width: 0; width: auto; margin-bottom: 0; }

/* A compact square +, sized and rounded to match the field it is attached to. */
.wpwd-field-withbtn > .wpwd-newcust-open {
	flex: 0 0 auto;
	width: 39px;
	height: 39px;
	padding: 0;
	margin-bottom: 0;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
}
/* The label text is for screen readers only once the button is icon-sized. */
.wpwd-field-withbtn > .wpwd-newcust-open .wpwd-newcust-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.wpwd-newcust-open { white-space: nowrap; }

@media (max-width: 640px) {
	.wpwd-modal { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
	.wpwd-nc-row > .wpwd-field,
	.wpwd-nc-row--name > .wpwd-nc-prefix { flex: 1 1 100%; }
	/* Back to stacked, with the button showing its full label again. */
	.wpwd-field-withbtn { flex-direction: column; align-items: flex-start; }
	.wpwd-field-withbtn > .wpwd-um-field,
	.wpwd-field-withbtn > p { width: 100%; }
	.wpwd-field-withbtn > .wpwd-newcust-open { width: auto; padding: 0 1.1em; }
	.wpwd-field-withbtn > .wpwd-newcust-open .wpwd-newcust-label {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
	}
}

/* ---------------------------------------------------------------------------
   Split-screen auth pages (includes/auth-layout.php)
   Form column left, brand panel right, filling the viewport. The reference
   design's purple is replaced throughout by the brand teal (--primary) and the
   existing .wpwd-hero gradient, so this stays on-brand by construction.
   --------------------------------------------------------------------------- */

/* Strip the theme's content wrappers, as the dashboard skin does. */
.wpwd-auth-body .site-container,
.wpwd-auth-body #inner-wrap,
.wpwd-auth-body .content-area,
.wpwd-auth-body .entry-content-wrap,
.wpwd-auth-body .site-main,
.wpwd-auth-body .entry-content,
.wpwd-auth-body article.entry {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.wpwd-auth-body .entry-header,
.wpwd-auth-body .site-header,
.wpwd-auth-body .site-footer,
.wpwd-auth-body .wpwd-topbar,
.wpwd-auth-body .wpwd-subbar { display: none !important; }
.wpwd-auth-body { background: var(--background); }

.wpwd-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100svh;
	background: var(--background);
}
.wpwd-auth--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

/* --- Form column --- */
.wpwd-auth-form-col {
	display: flex;
	justify-content: center;
	padding: clamp(28px, 4vw, 56px);
	/* The register form is long; it scrolls on its own so the brand panel stays put. */
	overflow-y: auto;
	max-height: 100vh;
	max-height: 100svh;
}
.wpwd-auth-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; }
.wpwd-auth-form-col--wide .wpwd-auth-inner { max-width: 760px; }

.wpwd-auth-brandmark { display: inline-block; margin-bottom: clamp(20px, 4vh, 40px); }
.wpwd-auth-brandmark img { max-width: 170px; height: auto; }
.wpwd-auth-brandmark strong { font-size: 1.3rem; color: var(--heading); }

/* The auth card loses its own frame here — the column IS the card. Keeping the
   class matters: the password-eye override is scoped to .wpwd-auth-card. */
.wpwd-auth .wpwd-auth-card,
.wpwd-auth .wpwd-auth-card--wide {
	max-width: none;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
.wpwd-auth .wpwd-auth-title { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 700; margin: 0 0 6px; }
.wpwd-auth .wpwd-auth-sub { margin: 0 0 22px; color: var(--secondary); }
.wpwd-auth-legal { margin: auto 0 0; padding-top: 32px; font-size: 0.82rem; color: var(--secondary); }

/* --- Tabs --- */
.wpwd-auth-tabs {
	display: inline-flex;
	/* .wpwd-auth-inner is a flex column, whose default align-items:stretch would
	   otherwise override inline-flex and stretch this strip to the full column
	   width. flex-start makes the pill hug its two buttons. */
	align-self: flex-start;
	gap: 4px;
	padding: 4px;
	margin: 0 0 24px;
	background: var(--section-bg);
	border: 1px solid var(--border);
	border-radius: 999px;
}
.wpwd-auth-tab {
	padding: 8px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--secondary);
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.wpwd-auth-tab:hover { color: var(--primary); }
.wpwd-auth-tab.is-active { background: var(--primary); color: #fff; }
.wpwd-auth-panel[hidden] { display: none; }

/* --- Google button + divider --- */
.wpwd-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 18px;
	margin: 0 0 4px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--background);
	color: var(--heading) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpwd-google-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.12); }
.wpwd-auth-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var(--secondary);
	font-size: 0.85rem;
}
.wpwd-auth-or::before,
.wpwd-auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }

/* --- Submit button fills the column, like the reference --- */
.wpwd-auth .wpwd-auth-form > p > .wpwd-btn { width: 100%; text-align: center; border-radius: 12px; padding: 0.95em 1.7em; }

/* --- Brand panel (teal, per the .wpwd-hero gradient) --- */
.wpwd-auth-brandpanel {
	position: relative;
	display: flex;
	align-items: center;
	padding: clamp(36px, 5vw, 72px);
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(900px 380px at 85% -10%, rgba(3, 157, 150, 0.38), transparent 60%),
		linear-gradient(135deg, var(--heading) 0%, var(--wpwd-navy-2) 55%, var(--primary-dark) 100%);
}
/* A soft teal bloom, so the panel is not a flat slab. */
.wpwd-auth-brandpanel::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -18%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(93, 192, 188, 0.28), transparent 65%);
	pointer-events: none;
}
.wpwd-auth-brandinner { position: relative; z-index: 1; max-width: 30rem; }
.wpwd-auth-brandtitle {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(1.9rem, 3vw, 2.7rem);
	line-height: 1.15;
	font-weight: 700;
}
.wpwd-auth-brandsub { margin: 0 0 28px; color: #C9E9E7; font-size: 1.05rem; line-height: 1.55; }
.wpwd-auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wpwd-auth-points li { display: flex; align-items: flex-start; gap: 12px; color: #E4F5F4; line-height: 1.45; }
.wpwd-auth-points svg { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* --- Responsive: the panel drops away, matching .wpwd-quote-panel's breakpoint --- */
@media (max-width: 900px) {
	.wpwd-auth,
	.wpwd-auth--wide { grid-template-columns: 1fr; }
	.wpwd-auth-brandpanel { display: none; }
	.wpwd-auth-form-col { max-height: none; overflow: visible; min-height: 100vh; }
}
@media (max-width: 560px) {
	.wpwd-auth-form-col { padding: 22px 18px 32px; }
	.wpwd-auth-tab { padding: 9px 18px; }
}

/* ---------------------------------------------------------------------------
   Auth pages: one field treatment for every control.

   Plain inputs and the Tom Select controls had drifted apart. Kadence styles
   input[type=text|email|password|tel|…] with a white background at the same
   specificity as our .wpwd-field input rule, so source order let Kadence win and
   plain inputs rendered white — while .ts-control is a <div> that Kadence's
   input selector never matches, so it kept our grey --section-bg fill. Hence the
   white Postcode next to the grey Town/City.

   These rules are scoped to .wpwd-auth-body (0,2,1), which outranks Kadence's
   (0,1,1) without !important, and only apply on the auth pages — the dashboard
   and the public quote form keep their own treatment.
   --------------------------------------------------------------------------- */
.wpwd-auth-body .wpwd-field input[type="text"],
.wpwd-auth-body .wpwd-field input[type="email"],
.wpwd-auth-body .wpwd-field input[type="password"],
.wpwd-auth-body .wpwd-field input[type="tel"],
.wpwd-auth-body .wpwd-field input[type="url"],
.wpwd-auth-body .wpwd-field input[type="number"],
.wpwd-auth-body .wpwd-field select,
.wpwd-auth-body .wpwd-field textarea,
.wpwd-auth-body .wpwd-field .ts-control {
	width: 100%;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 12px 14px;
	min-height: 48px;
	font: inherit;
	color: var(--text);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpwd-auth-body .wpwd-field textarea { min-height: 0; }

/* Focus: the 2px border is absorbed by the padding so the box never jumps. */
.wpwd-auth-body .wpwd-field input[type="text"]:focus,
.wpwd-auth-body .wpwd-field input[type="email"]:focus,
.wpwd-auth-body .wpwd-field input[type="password"]:focus,
.wpwd-auth-body .wpwd-field input[type="tel"]:focus,
.wpwd-auth-body .wpwd-field input[type="url"]:focus,
.wpwd-auth-body .wpwd-field input[type="number"]:focus,
.wpwd-auth-body .wpwd-field select:focus,
.wpwd-auth-body .wpwd-field textarea:focus,
.wpwd-auth-body .wpwd-field .ts-wrapper.focus .ts-control {
	border: 2px solid var(--primary);
	background: var(--background);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
	outline: none;
	padding: 11px 13px;
}

/* Tom Select's inner input must not inherit the box padding a second time. */
.wpwd-auth-body .wpwd-field .ts-control > input { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.wpwd-auth-body .wpwd-field .ts-wrapper.focus .ts-control > input { padding: 0; border: 0; }

/* The password eye sits inside the padded box. */
.wpwd-auth-body .wpwd-field .wpwd-pw-wrap input { padding-right: 46px; }

/* Cash CSV import: rows already present are dimmed in the preview so the
   duplicates read as "will be skipped" rather than as normal pending rows. */
.wpwd-dashboard-body .wpwd-imp-dupe { opacity: 0.62; }
.wpwd-dashboard-body .wpwd-imp-dupe td { font-style: italic; }
.wpwd-dashboard-body .wpwd-import-form { margin: 14px 0 6px; }
.wpwd-dashboard-body .wpwd-import-form input[type="file"] {
	padding: 10px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: var(--section-bg);
	width: 100%;
	max-width: 420px;
}

/* ---------------------------------------------------------------------------
   Dashboard Tom Select dropdowns: always draw the scrollbar.

   The vendor caps .ts-dropdown-content at 200px with overflow:auto, which is
   correct — but macOS uses overlay scrollbars that stay hidden until you touch
   them, so a list that continues below the fold looks finished. That is why the
   Category filter appeared to end at "Other" while Wages sat just underneath.
   Forcing a visible track makes the overflow obvious.
   --------------------------------------------------------------------------- */
.wpwd-dashboard-body .ts-dropdown-content {
	scrollbar-width: thin;
	scrollbar-color: #c3d0d0 transparent;
}
.wpwd-dashboard-body .ts-dropdown-content::-webkit-scrollbar {
	width: 10px;
	-webkit-appearance: none; /* beats the macOS overlay scrollbar */
}
.wpwd-dashboard-body .ts-dropdown-content::-webkit-scrollbar-track {
	background: var(--section-bg);
	border-radius: 0 10px 10px 0;
}
.wpwd-dashboard-body .ts-dropdown-content::-webkit-scrollbar-thumb {
	background: #c3d0d0;
	border: 3px solid var(--section-bg);
	border-radius: 999px;
}
.wpwd-dashboard-body .ts-dropdown-content::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* ---------- Customers table (dense CRM directory) ----------
   Scoped to .wpwd-user-table so the leads and catalog tables that share
   .wpwd-cat-table keep the styling they already had. */
.wpwd-dashboard-body .wpwd-user-table {
	font-size: 0.875rem;
}
.wpwd-dashboard-body .wpwd-user-table thead th {
	background: var(--wpwd-ui-head);
	border-bottom: 1px solid var(--wpwd-ui-line);
	padding: 10px 12px;
	color: #4d5f56;
}
.wpwd-dashboard-body .wpwd-user-table td {
	padding: 9px 12px;
	border-bottom: 1px solid #E2E8F0;
}
.wpwd-dashboard-body .wpwd-user-table tbody tr:hover { background: var(--wpwd-ui-tint); }
.wpwd-dashboard-body .wpwd-user-table .wpwd-user-avatar { width: 46px; }
.wpwd-dashboard-body .wpwd-user-table .wpwd-user-avatar img,
.wpwd-dashboard-body .wpwd-user-table .wpwd-user-avatar .avatar {
	width: 32px;
	height: 32px;
}
.wpwd-dashboard-body .wpwd-user-table td a { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-user-table .wpwd-cat-titlelink { color: var(--heading); }
.wpwd-dashboard-body .wpwd-user-table .wpwd-lead-row:hover .wpwd-cat-titlelink { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-user-table .wpwd-um-nologin { font-size: 0.78rem; }

/* Sortable headers: the whole cell is the hit area, and the arrow only shows
   on the column actually sorted. */
.wpwd-dashboard-body .wpwd-user-table thead th.wpwd-um-sort { padding: 0; }
.wpwd-dashboard-body .wpwd-um-sort > a {
	display: block;
	padding: 10px 12px;
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-um-sort > a:hover { background: var(--wpwd-ui-tint); color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-um-sort > a:focus-visible {
	outline: 2px solid var(--wpwd-ui-bar);
	outline-offset: -2px;
}
.wpwd-dashboard-body .wpwd-um-sort.is-sorted > a { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-um-arrow { font-size: 0.7em; }

/* Phone and date must not wrap to three lines; the wrapper scrolls instead,
   until the 720px breakpoint stacks the table into cards. */
.wpwd-dashboard-body .wpwd-user-table .wpwd-um-nowrap { white-space: nowrap; }
.wpwd-dashboard-body .wpwd-user-table { min-width: 940px; }

@media (max-width: 720px) {
	.wpwd-dashboard-body .wpwd-user-table { min-width: 0; }
	.wpwd-dashboard-body .wpwd-user-table .wpwd-um-nowrap { white-space: normal; }
}

/* ---------- Customer module (phase 17) ----------
   Scoped to .wpwd-cm-* so the leads and catalog tables that share
   .wpwd-cat-table keep the styling they already had. */

/* The sidebar rail used to be re-declared here, 3,900 lines after its own
   block, with a higher specificity — so half of every edit made up there did
   nothing and the reason was invisible in a diff. The rail now lives in ONE
   place, with .wpwd-dash-aside; see "Sidebar (scrolls on its own)".
   Nothing replaces this comment on purpose: an empty override is worse than
   no override. */

.wpwd-dashboard-body .wpwd-cm-table {
	font-size: 0.875rem;
	/* Nothing set a line-height, so cells inherited the theme's ~1.65 and that,
	   not the padding, was most of the row height. */
	line-height: 1.35;
}
.wpwd-dashboard-body .wpwd-cm-table thead th {
	background: var(--wpwd-ui-bar);
	color: #fff;
	border-bottom: none;
	padding: 8px 10px;
	letter-spacing: 0.02em;
}
.wpwd-dashboard-body .wpwd-cm-table td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--wpwd-ui-line);
	/* Safety net: even if a column gains content with no max-width below, an
	   unbreakable token can never force the table wider than its card. */
	overflow-wrap: anywhere;
}

/* ---- Column width caps ----------------------------------------------------
   Long values WRAP to the next line; they are not truncated. The earlier pass
   clipped them with an ellipsis, which hid the end of every real email address.
   The max-widths below stay, and they are still doing the important job: the
   table is table-layout:auto, and an email is one unbreakable token, so without
   a cap a single long address sets a ~230px floor that the auto algorithm pays
   for by starving Name and Company until the last columns fall off the card.
   With wrapping enabled the cap reads as a sensible column width instead of a
   cut-off — the address simply takes two lines.
   Wrapping needs no property of its own here: .wpwd-cm-table td already carries
   overflow-wrap: anywhere above, which breaks an unbreakable token once the
   white-space: nowrap that used to sit on this block is gone. */
.wpwd-dashboard-body .wpwd-cm-clip {
	display: block;
	max-width: 100%;
}
.wpwd-dashboard-body .wpwd-cm-table td.is-email { max-width: 220px; }
.wpwd-dashboard-body .wpwd-cm-table td.is-company { max-width: 170px; }
.wpwd-dashboard-body .wpwd-cm-table td.is-person { max-width: 140px; }

/* Name is the exception: it does NOT wrap, and it carries no width cap.
   It is the row's identity and the thing the eye scans down the first column,
   so breaking "Muhammad Khalil" across two lines costs more than the width it
   saves — and a cap plus nowrap would clip the surname outright. Names are
   short in practice; the email address was the column that actually needed
   holding back, and it still is. The reference underneath stays on its own
   line because .wpwd-cm-ref is display: block. */
.wpwd-dashboard-body .wpwd-cm-table td.is-name,
.wpwd-dashboard-body .wpwd-cm-table td.is-name .wpwd-cm-clip { white-space: nowrap; }

/* Dates read as AUG 31, 2026 — uppercased in CSS rather than with strtoupper()
   so a translated month name is not mangled by a byte-wise uppercase. */
.wpwd-dashboard-body .wpwd-cm-table td.is-date { text-transform: uppercase; }

/* The row-actions cell had no rule at all, so its 32px toggle set a ~50px floor
   under every row regardless of padding. */
.wpwd-dashboard-body .wpwd-cm-table .wpwd-cm-actions { width: 40px; }
.wpwd-dashboard-body .wpwd-cm-table .wpwd-rowactions-toggle {
	width: 26px;
	height: 26px;
}
.wpwd-dashboard-body .wpwd-cm-table tbody tr:hover { background: var(--wpwd-ui-tint); }
.wpwd-dashboard-body .wpwd-cm-table td a { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-table .wpwd-cat-titlelink { color: var(--heading); font-weight: 600; }
.wpwd-dashboard-body .wpwd-cm-table .wpwd-lead-row:hover .wpwd-cat-titlelink { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-nowrap { white-space: nowrap; }

/* Phase 95 — the jobs list's Items cell stacks one name per line.
 *
 * A block child per name, inside ONE wrapper. The wrapper is what matters in
 * the stacked layout below 720px: there every td becomes a flex row with its
 * label injected by ::before, so loose sibling spans would sit BESIDE the label
 * rather than under it. */
.wpwd-dashboard-body .wpwd-job-itemnames > span { display: block; }
.wpwd-dashboard-body .wpwd-job-itemnames > span + span { margin-top: 2px; }

/* A tall Items cell must not centre the short cells beside it. Scoped to rows
   that actually have one, so every other table keeps its middle alignment. */
.wpwd-dashboard-body .wpwd-cat-table tr:has(.wpwd-job-itemnames) > td { vertical-align: top; }

/* The customer reference under the name. */
.wpwd-dashboard-body .wpwd-cm-ref {
	display: block;
	font-size: 0.72rem;
	/* #8a9899 measured 2.99:1 against white — nowhere near AA for text this
	   small, and this is the customer's identifier, not decoration. */
	color: #687273;
	letter-spacing: 0.02em;
}

/* Sortable headers on the green band: the whole cell is the hit area. */
.wpwd-dashboard-body .wpwd-cm-table thead th.wpwd-cm-sort { padding: 0; }
.wpwd-dashboard-body .wpwd-cm-sort > a {
	display: block;
	padding: 8px 10px;
	color: #fff;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-cm-sort > a:hover { background: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-sort > a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

/* Status pills. Each pairing is AA against its own background. */
.wpwd-dashboard-body .wpwd-cm-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-cm-pill.is-active   { background: var(--wpwd-ui-tint); color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-pill.is-prospect { background: #EAF0FB; color: #234E9E; }
.wpwd-dashboard-body .wpwd-cm-pill.is-inactive { background: #F0F2F2; color: #4A5658; }
.wpwd-dashboard-body .wpwd-cm-pill.is-blocked  { background: var(--danger-light); color: #96271B; }

/* Profile cards. */
.wpwd-dashboard-body .wpwd-cm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 4px 0 22px;
}
.wpwd-dashboard-body .wpwd-cm-card { padding: 18px 20px; }
.wpwd-dashboard-body .wpwd-cm-card--wide { grid-column: 1 / -1; }
.wpwd-dashboard-body .wpwd-cm-dl {
	display: grid;
	grid-template-columns: minmax(120px, 40%) 1fr;
	gap: 6px 14px;
	margin: 0;
}
.wpwd-dashboard-body .wpwd-cm-dl dt { color: #687273; font-size: 0.84rem; }
.wpwd-dashboard-body .wpwd-cm-dl dd { margin: 0; color: var(--heading); font-size: 0.9rem; overflow-wrap: anywhere; }
.wpwd-dashboard-body .wpwd-cm-notes { margin: 0; color: #3a4748; }

.wpwd-dashboard-body .wpwd-cm-addr-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.wpwd-dashboard-body .wpwd-cm-check { grid-column: 1 / -1; }
.wpwd-dashboard-body .wpwd-cm-warnings { margin: 0 0 16px; padding-left: 20px; color: #3a4748; }
.wpwd-dashboard-body .wpwd-cm-warnings li { margin-bottom: 4px; }

@media (max-width: 720px) {
	.wpwd-dashboard-body .wpwd-cm-nowrap { white-space: normal; }
	/* Stacked cards have the full width, so nothing needs clipping there. */
	.wpwd-dashboard-body .wpwd-cm-clip { white-space: normal; overflow: visible; }
	.wpwd-dashboard-body .wpwd-cm-table td.is-email,
	.wpwd-dashboard-body .wpwd-cm-table td.is-name,
	.wpwd-dashboard-body .wpwd-cm-table td.is-company,
	.wpwd-dashboard-body .wpwd-cm-table td.is-person { max-width: none; }
	.wpwd-dashboard-body .wpwd-cm-dl { grid-template-columns: 1fr; }
	.wpwd-dashboard-body .wpwd-cm-dl dd { margin-bottom: 6px; }
}

/* ---------- Customers table chrome (phase 18) ----------
   Matches the reference CRM: square corners, a grey toolbar inside the table
   frame above and below the rows, a sort glyph on every sortable header, and a
   mass-assign row beneath. All scoped to .wpwd-cm-* so the leads, jobs and
   catalog tables that share .wpwd-cat-table are untouched. */

/* Square corners on all four, on the wrapper and the table. */
.wpwd-dashboard-body .wpwd-cm-wrap,
.wpwd-dashboard-body .wpwd-cm-table,
.wpwd-dashboard-body .wpwd-cm-table thead th:first-child,
.wpwd-dashboard-body .wpwd-cm-table thead th:last-child {
	border-radius: 0;
}

/* ---- The sort glyph: a stacked pair, present on every sortable header ---- */
.wpwd-dashboard-body .wpwd-cm-arrow {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	line-height: 0.62;
	margin-left: 5px;
	vertical-align: middle;
	font-size: 0.52em;
}
.wpwd-dashboard-body .wpwd-cm-arrow-up,
.wpwd-dashboard-body .wpwd-cm-arrow-down {
	/* Dim by default: present, so you know the column sorts, but quiet. */
	opacity: 0.45;
}
.wpwd-dashboard-body .wpwd-cm-arrow.is-asc .wpwd-cm-arrow-up,
.wpwd-dashboard-body .wpwd-cm-arrow.is-desc .wpwd-cm-arrow-down { opacity: 1; }
.wpwd-dashboard-body .wpwd-cm-arrow.is-asc .wpwd-cm-arrow-down,
.wpwd-dashboard-body .wpwd-cm-arrow.is-desc .wpwd-cm-arrow-up { opacity: 0.25; }

/* ---- The in-table toolbar ---- */
.wpwd-dashboard-body .wpwd-cm-toolbar > td {
	background: #F1F5F9;
	border-bottom: 1px solid #E2E8F0;
	padding: 6px 10px;
}
.wpwd-dashboard-body .wpwd-cm-toolbar--bottom > td {
	border-bottom: none;
	border-top: 1px solid #E2E8F0;
}
.wpwd-dashboard-body .wpwd-cm-toolbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.wpwd-dashboard-body .wpwd-cm-toolbar-left,
.wpwd-dashboard-body .wpwd-cm-toolbar-right {
	display: flex;
	align-items: center;
	gap: 6px;
}
.wpwd-dashboard-body .wpwd-cm-selectall { display: inline-flex; align-items: center; padding: 0 4px; }

.wpwd-dashboard-body .wpwd-cm-search {
	height: 28px;
	min-width: 200px;
	padding: 0 9px;
	font-size: 0.83rem;
	border: 1px solid var(--border, #cfd8d4);
	border-radius: 3px;
	background: var(--background);
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-cm-search:focus {
	outline: none;
	border-color: var(--wpwd-ui-bar);
	box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18);
}

.wpwd-dashboard-body .wpwd-cm-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #cfd8d4;
	border-radius: 3px;
	background: #fff;
	color: #4d5f56;
	cursor: pointer;
}
.wpwd-dashboard-body .wpwd-cm-iconbtn:hover { background: var(--wpwd-ui-tint); color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-iconbtn.is-on {
	background: var(--wpwd-ui-bar);
	border-color: var(--wpwd-ui-bar);
	color: #fff;
}
.wpwd-dashboard-body .wpwd-cm-iconbtn:focus-visible {
	outline: 2px solid var(--wpwd-ui-bar);
	outline-offset: 1px;
}

/* Pagination inside the toolbar. */
.wpwd-dashboard-body .wpwd-cm-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 5px;
	border: 1px solid #cfd8d4;
	border-radius: 3px;
	background: #fff;
	color: var(--wpwd-ui-accent-dark);
	text-decoration: none;
	font-size: 0.9rem;
}
.wpwd-dashboard-body .wpwd-cm-page:hover { background: var(--wpwd-ui-tint); }
.wpwd-dashboard-body .wpwd-cm-page.is-off {
	/* Disabled controls are exempt from AA, but #a9b4b0 measured 2.0:1 and was
	   simply hard to see. #6E7879 still reads as inactive at 4.5:1. */
	color: #6E7879;
	background: #f6f8f7;
	border-color: #E2E8F0;
	cursor: default;
}
.wpwd-dashboard-body .wpwd-cm-count {
	padding: 0 8px;
	font-size: 0.8rem;
	color: #4d5f56;
	white-space: nowrap;
}

/* The collapsible filter and column rows. */
.wpwd-dashboard-body .wpwd-cm-filterrow > td,
.wpwd-dashboard-body .wpwd-cm-columnrow > td {
	background: #f6f8f7;
	border-bottom: 1px solid #E2E8F0;
	padding: 9px 10px;
}
.wpwd-dashboard-body .wpwd-cm-colform {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}
.wpwd-dashboard-body .wpwd-cm-colbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #3a4748;
}
.wpwd-dashboard-body .wpwd-cm-filterform { margin: 0; }

/* ---- Mass assign ---- */
.wpwd-dashboard-body .wpwd-cm-assign {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--section-bg);
	border: 1px solid var(--border);
}
.wpwd-dashboard-body .wpwd-cm-assign-label { font-weight: 700; color: var(--heading); }
.wpwd-dashboard-body .wpwd-cm-assign-hint { font-size: 0.82rem; color: #687273; }
.wpwd-dashboard-body .wpwd-cm-assign-btn,
.wpwd-dashboard-body .wpwd-cm-remove-btn {
	letter-spacing: 0.04em;
	font-weight: 700;
}
/* #96271B on #FDEDEC is 7.1:1; the reference's flat coral on white is ~2:1.
   !important because .wpwd-btn sets `color: #FFFFFF !important` (frontend.css:83)
   — white on this pale ground is unreadable, and nothing weaker beats it. */
.wpwd-dashboard-body .wpwd-cm-remove-btn {
	background: var(--danger-light);
	border: 1px solid #E7BDB7;
	color: #96271B !important;
	box-shadow: none;
}
.wpwd-dashboard-body .wpwd-cm-remove-btn:hover {
	background: #F9DAD6;
	color: #7D2016 !important;
}

/* ---- Back to top ---- */
.wpwd-dashboard-body .wpwd-cm-totop {
	display: flex;
	justify-content: flex-end;
	margin: 14px 0 0;
	padding: 10px 16px;
	background: #F1F5F9;
	border: 1px solid #E2E8F0;
}
.wpwd-dashboard-body .wpwd-cm-totop-link {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #4d5f56;
	text-decoration: none;
}
.wpwd-dashboard-body .wpwd-cm-totop-link:hover { color: var(--wpwd-ui-accent-dark); }

@media (max-width: 720px) {
	.wpwd-dashboard-body .wpwd-cm-toolbar-in { flex-direction: column; align-items: stretch; }
	.wpwd-dashboard-body .wpwd-cm-search { min-width: 0; flex: 1 1 auto; }
	.wpwd-dashboard-body .wpwd-cm-toolbar-right { justify-content: center; }
}

/* The bulk-action form sits between the table and the mass-assign row; it
   reveals itself only once rows are ticked (dashboard.js toggles .is-active). */
.wpwd-dashboard-body .wpwd-cm-bulkrow .wpwd-bulk-toolbar {
	margin: 14px 0 0;
}

/* ---------- Staff permissions grid (Roles screen, phase 18) ---------- */
.wpwd-dashboard-body .wpwd-matrix-card { margin-top: 22px; }
.wpwd-dashboard-body .wpwd-matrix-key {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 8px 0 14px;
	font-size: 0.85rem;
	color: #687273;
}
.wpwd-dashboard-body .wpwd-matrix-table { font-size: 0.84rem; }
.wpwd-dashboard-body .wpwd-matrix-table th,
.wpwd-dashboard-body .wpwd-matrix-table td { padding: 7px 8px; }
.wpwd-dashboard-body .wpwd-matrix-table thead th {
	background: var(--wpwd-ui-head);
	border-bottom: 1px solid var(--wpwd-ui-line);
	color: #4d5f56;
	vertical-align: bottom;
}
/* Module names are long and the columns are narrow: turn them on their side. */
.wpwd-dashboard-body .wpwd-matrix-mod {
	width: 34px;
	text-align: center;
}
.wpwd-dashboard-body .wpwd-matrix-table th.wpwd-matrix-mod > span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.76rem;
}
/* .wpwd-cat-table th uppercases every header; role names and their lowercase
   slugs read badly that way, so this needs the extra specificity to win. */
.wpwd-dashboard-body .wpwd-matrix-table th.wpwd-matrix-role {
	text-align: left;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.86rem;
	color: var(--heading);
	text-transform: none;
	letter-spacing: 0;
}
.wpwd-dashboard-body .wpwd-matrix-slug {
	display: block;
	font-weight: 400;
	font-size: 0.72rem;
	color: #687273;
}
.wpwd-dashboard-body .wpwd-matrix-cell {
	text-align: center;
	font-size: 1rem;
	line-height: 1;
}
.wpwd-dashboard-body .wpwd-matrix-cell.is-full { color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-matrix-cell.is-own  { color: var(--wpwd-ui-bar); }
.wpwd-dashboard-body .wpwd-matrix-cell.is-view { color: #4d5f56; }
/* #b9c2be measured 1.82:1. The em dash is the only thing separating "no
   access" from a blank cell for a sighted reader, so it has to be legible;
   the SYMBOL, not the weight of the colour, is what distinguishes it. */
.wpwd-dashboard-body .wpwd-matrix-cell.is-none { color: #6E7879; }
.wpwd-dashboard-body .wpwd-matrix-admin td { background: var(--wpwd-ui-tint); }
.wpwd-dashboard-body .wpwd-matrix-table tbody tr:hover { background: var(--wpwd-ui-tint); }

/* ---------- Customer profile (phase 19) ---------- */

/* The star and buttons live in the page-action slot next to the shell's <h1>. */
.wpwd-dashboard-body .wpwd-dash-titleaction .wpwd-cm-pinform {
	margin: 0;
	display: inline-flex;
}
.wpwd-dashboard-body .wpwd-cm-star {
	background: none;
	border: none;
	padding: 2px 4px;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	/* #6E7879 is 4.5:1 on white; the star has to read as a control, not a smudge. */
	color: #6E7879;
}
/* --gold-hover (#E09C00) measures 2.35:1 on white — under the 3:1 that a
   meaningful icon needs. #A87400 is 4.1:1 and still reads as gold. The pinned
   state is carried by the glyph too (★ vs ☆), not by colour alone. */
.wpwd-dashboard-body .wpwd-cm-star:hover { color: #A87400; }
.wpwd-dashboard-body .wpwd-cm-star.is-on { color: #A87400; }
.wpwd-dashboard-body .wpwd-cm-star:focus-visible {
	outline: 2px solid var(--wpwd-ui-bar);
	outline-offset: 2px;
}

/* ---- Tab bar ---- */
.wpwd-dashboard-body .wpwd-cm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0 0 -1px;
}
.wpwd-dashboard-body .wpwd-cm-tab {
	padding: 9px 16px;
	background: #F1F5F9;
	border: 1px solid #E2E8F0;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #4d5f56;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-cm-tab:hover { background: var(--wpwd-ui-tint); color: var(--wpwd-ui-accent-dark); }
.wpwd-dashboard-body .wpwd-cm-tab.is-active {
	background: var(--wpwd-ui-bar);
	border-color: var(--wpwd-ui-bar);
	color: #fff;
}
.wpwd-dashboard-body .wpwd-cm-tab:focus-visible {
	outline: 2px solid var(--wpwd-ui-accent-dark);
	outline-offset: -2px;
}

.wpwd-dashboard-body .wpwd-cm-panel {
	background: #fff;
	border: 1px solid #E2E8F0;
	padding: 18px 20px;
}
.wpwd-dashboard-body .wpwd-cm-empty { margin: 4px 0; }

/* ---- The striped two-column field grid ---- */
.wpwd-dashboard-body .wpwd-cm-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0 40px;
}
.wpwd-dashboard-body .wpwd-cm-frow {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	align-items: baseline;
	gap: 12px;
	padding: 9px 10px;
}
.wpwd-dashboard-body .wpwd-cm-frow.is-alt { background: #f6f8f7; }
.wpwd-dashboard-body .wpwd-cm-flabel {
	font-weight: 700;
	font-size: 0.85rem;
	color: #4d5f56;
}
.wpwd-dashboard-body .wpwd-cm-fvalue {
	font-size: 0.9rem;
	color: var(--heading);
	overflow-wrap: anywhere;
}
/* The reference uses orange links, which measure ~2.9:1 on white and fail AA.
   These stay the dashboard's green at 7.7:1. */
.wpwd-dashboard-body .wpwd-cm-fvalue a { color: var(--wpwd-ui-accent-dark); }

/* ---- Change log ---- */
.wpwd-dashboard-body .wpwd-cm-logtable td { vertical-align: top; }
.wpwd-dashboard-body .wpwd-cm-logold { color: #687273; text-decoration: line-through; }
.wpwd-dashboard-body .wpwd-cm-lognew { color: var(--heading); font-weight: 600; }
.wpwd-dashboard-body .wpwd-cm-logarrow { color: #6E7879; }

@media (max-width: 720px) {
	.wpwd-dashboard-body .wpwd-cm-frow { grid-template-columns: 1fr; gap: 2px; }
	.wpwd-dashboard-body .wpwd-cm-tab { padding: 8px 11px; }
}

/* -------------------------------------------------------------------------
 * Phase 76 — Jobs form and job items
 * ---------------------------------------------------------------------- */

/* A THREE-column modifier, not a change to .wpwd-um-grid.
   That class pairs fields on the customer form, the cash form, the legacy job
   form and user management; widening it globally would re-flow all of them.
   Same "modifier, not a change to the shared class" rule as
   .wpwd-field-row--stack above.
   minmax(0,…) rather than a pixel floor: a track that cannot shrink below its
   content lets a long label overflow into the next cell. */
.wpwd-dashboard-body .wpwd-um-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) {
	.wpwd-dashboard-body .wpwd-um-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.wpwd-dashboard-body .wpwd-um-grid--3 { grid-template-columns: 1fr; }
}

/* The picker + "new customer" button sits in the grid as one cell, so the
   wrapper has to stretch rather than hug its button. */
.wpwd-dashboard-body .wpwd-um-grid--3 > .wpwd-field-withbtn { align-items: flex-start; }
.wpwd-dashboard-body .wpwd-um-grid--3 > .wpwd-field-withbtn > p { margin: 0; width: 100%; }

/* Job item rows. One grid per line so the columns line up down the table
   without a real <table>, which could not hold a Tom Select comfortably. */
.wpwd-dashboard-body .wpwd-ji-lines { display: block; margin: 10px 0 14px; }
.wpwd-dashboard-body .wpwd-ji-line {
	display: grid;
	grid-template-columns: 26px 90px minmax(0, 1.6fr) minmax(0, 1.6fr) 64px 78px 78px 104px 118px 84px 32px;
	gap: 8px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #eef2f2;
}
.wpwd-dashboard-body .wpwd-ji-line:last-child { border-bottom: 0; }
.wpwd-dashboard-body .wpwd-ji-num { color: #8a9899; font-size: 0.85rem; text-align: right; }
.wpwd-dashboard-body .wpwd-ji-line input,
.wpwd-dashboard-body .wpwd-ji-line select { width: 100%; min-width: 0; }
.wpwd-dashboard-body .wpwd-ji-line .ts-wrapper { min-width: 0; }
.wpwd-dashboard-body .wpwd-ji-line .wpwd-job-lt { text-align: right; font-weight: 600; }
.wpwd-dashboard-body .wpwd-job-prwrap { display: block; min-width: 0; }
.wpwd-dashboard-body .wpwd-job-prnote { display: block; margin-top: 3px; font-size: 0.72rem; color: #8a9899; line-height: 1.3; }
.wpwd-dashboard-body .wpwd-job-line-del {
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	color: #8a9899;
	padding: 4px;
}
.wpwd-dashboard-body .wpwd-job-line-del:hover { color: var(--danger); }
.wpwd-dashboard-body .wpwd-ji-total { margin: 12px 0 4px; text-align: right; font-size: 1rem; }

/* Below the widest desktop the eleven columns stop being readable, so each row
   becomes a wrapped block rather than a squashed grid. */
@media (max-width: 1200px) {
	.wpwd-dashboard-body .wpwd-ji-line {
		grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 32px;
		gap: 8px 10px;
	}
	.wpwd-dashboard-body .wpwd-ji-line .wpwd-job-lt { text-align: left; }
}

/* -------------------------------------------------------------------------
 * Phase 77 — Create Customer modal, and two button variants
 * ---------------------------------------------------------------------- */

/*
 * A true green, on its own token.
 *
 * NOT var(--primary): the dark block redeclares that to near-white (#e4e4e7),
 * so a "green" built on it turns grey the moment someone switches theme.
 * #15803D is already in the file twice (.wpwd-btn-pay, .wpwd-nc-match.is-ok),
 * so this names a colour the design already uses rather than inventing a sixth.
 */
:root {
	--success: #15803D;
	--success-dark: #166534;
}

.wpwd-btn-success {
	background: var(--success) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(21, 128, 61, 0.28);
}
.wpwd-btn-success:hover {
	background: var(--success-dark) !important;
	color: #fff !important;
}

/*
 * Red OUTLINE cancel. It cannot be composed from what exists:
 * .wpwd-btn-outline hardwires colour and border to var(--primary), and
 * .wpwd-btn-danger forces background:var(--danger), which fills it.
 *
 * ⚠ THE `color` !important IS LOAD-BEARING. .wpwd-btn sets
 * `color:#FFFFFF !important`, so without it this renders white text on a
 * transparent background over a white modal — an invisible button. The hover
 * rule restates BOTH colours for the same reason.
 */
.wpwd-btn-outline-danger {
	background: transparent !important;
	color: var(--danger) !important;
	border: 2px solid var(--danger);
	box-shadow: none;
}
.wpwd-btn-outline-danger:hover {
	background: var(--danger) !important;
	color: #fff !important;
}

/* Rounder picker + button pairing, as a MODIFIER.
   .wpwd-field-withbtn's own declaration is grepped verbatim by
   tests/phase-14-jobs-import-smoke.php and tests/phase-9-cash-smoke.php, so it
   is never edited in place. */
.wpwd-dashboard-body .wpwd-field-withbtn--pill > .wpwd-newcust-open,
.wpwd-dashboard-body .wpwd-field-withbtn--pill > .wpwd-jcm-open { border-radius: 12px; }
.wpwd-dashboard-body .wpwd-field-withbtn--pill .ts-control,
.wpwd-dashboard-body .wpwd-field-withbtn--pill input,
.wpwd-dashboard-body .wpwd-field-withbtn--pill select { border-radius: 12px; }

/* The trigger: a square that matches the 39px control height beside it. */
.wpwd-field-withbtn > .wpwd-jcm-open {
	flex: 0 0 auto;
	width: 39px;
	height: 39px;
	padding: 0;
	margin-bottom: 0;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	line-height: 1;
}
.wpwd-field-withbtn > .wpwd-jcm-open .wpwd-jcm-btn-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- The dialog ------------------------------------------------------- */

.wpwd-jcm-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.wpwd-jcm-overlay.is-open { opacity: 1; }

.wpwd-jcm {
	position: fixed;
	z-index: 10001;
	top: 50%;
	left: 50%;
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, calc(-50% + 8px));
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.wpwd-jcm.is-open { opacity: 1; transform: translate(-50%, -50%); }

/* display:flex above beats the browser's own [hidden] handling — the same trap
   already recorded for .wpwd-modal in survey-steps.css. */
.wpwd-jcm[hidden], .wpwd-jcm-overlay[hidden] { display: none !important; }

.wpwd-jcm-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }

.wpwd-jcm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid #e8eded;
}
.wpwd-jcm-title { margin: 0; font-size: 1.15rem; }
.wpwd-jcm-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: #8a9899;
	padding: 0 4px;
	cursor: pointer;
}
.wpwd-jcm-close:hover { color: var(--danger); }

.wpwd-jcm-body { padding: 20px 22px; overflow-y: auto; }

/* Two columns, as asked. minmax(0,…) so a long label cannot push its cell. */
.wpwd-jcm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 18px;
}
.wpwd-jcm-field { margin: 0 0 14px; min-width: 0; }
.wpwd-jcm-field > label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
.wpwd-jcm-field input,
.wpwd-jcm-field select {
	width: 100%;
	box-sizing: border-box;
	min-height: 39px;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	background: var(--background);
	font: inherit;
	color: var(--text);
}
.wpwd-jcm-field input:focus,
.wpwd-jcm-field select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
}
/* The company cell spans both columns — it appears on its own, below a full row. */
.wpwd-jcm-company-cell { grid-column: 1 / -1; }
.wpwd-jcm-company-cell[hidden] { display: none; }

.wpwd-jcm-errors { margin: 0 0 14px; }
.wpwd-jcm-errors ul { margin: 0; padding-left: 18px; }

/* A sibling of the body, not inside it: the shared modal puts its actions in
   the scroller, so on a short window they scroll out of reach. */
.wpwd-jcm-foot {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 16px 22px;
	border-top: 1px solid #e8eded;
}

@media (max-width: 640px) {
	.wpwd-jcm { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
	.wpwd-jcm-grid { grid-template-columns: 1fr; }
	.wpwd-field-withbtn > .wpwd-jcm-open { width: auto; padding: 0 1.1em; }
	.wpwd-field-withbtn > .wpwd-jcm-open .wpwd-jcm-btn-label {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
		margin-left: 6px;
	}
}

/* ---- Dark theme -------------------------------------------------------
 * Both selectors, per the rule at the top of the dark block: one is stamped
 * server-side from user meta, the other by the inline head snippet before
 * .wpwd-dash exists. A surface styled in only one theme is invisible in the
 * other, which is what the shared modal still does.
 * -------------------------------------------------------------------- */
.wpwd-dash[data-theme="dark"] .wpwd-jcm,
html[data-wpwd-theme="dark"] .wpwd-jcm {
	background: var(--wpwd-ui-card, #18181b);
	color: var(--text);
}
.wpwd-dash[data-theme="dark"] .wpwd-jcm-head,
.wpwd-dash[data-theme="dark"] .wpwd-jcm-foot,
html[data-wpwd-theme="dark"] .wpwd-jcm-head,
html[data-wpwd-theme="dark"] .wpwd-jcm-foot { border-color: var(--wpwd-ui-line, #27272a); }
.wpwd-dash[data-theme="dark"] .wpwd-jcm-title,
html[data-wpwd-theme="dark"] .wpwd-jcm-title { color: var(--heading); }
/* --danger is NOT redeclared in the dark block, so the outline would stay a
   dark red on a dark card. --wpwd-ui-danger is the lightened partner. */
.wpwd-dash[data-theme="dark"] .wpwd-btn-outline-danger,
html[data-wpwd-theme="dark"] .wpwd-btn-outline-danger {
	color: var(--wpwd-ui-danger, #f87171) !important;
	border-color: var(--wpwd-ui-danger, #f87171);
}
.wpwd-dash[data-theme="dark"] .wpwd-btn-outline-danger:hover,
html[data-wpwd-theme="dark"] .wpwd-btn-outline-danger:hover {
	background: var(--wpwd-ui-danger, #f87171) !important;
	color: #111827 !important;
}

/* -------------------------------------------------------------------------
 * Phase 79 — the items table, the item modal, the product modal
 * ---------------------------------------------------------------------- */

.wpwd-dashboard-body .wpwd-ji-add { margin: 0 0 14px; }
.wpwd-dashboard-body .wpwd-ji-table td { vertical-align: middle; }
.wpwd-dashboard-body .wpwd-ji-table .wpwd-bulk-col { width: 34px; }

/* The footer total box (phase 93). It sits in a table cell and stands in for a
   figure, so it is sized to the column and right-aligned like the money above
   it — not stretched to the full width a form control would take. */
.wpwd-dashboard-body .wpwd-ji-totalcell { padding-top: 6px; padding-bottom: 6px; }
.wpwd-dashboard-body .wpwd-ji-totalbox {
	width: 100%;
	max-width: 110px;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: 7px;
	background: var(--background);
	font: inherit;
	color: var(--text);
	text-align: right;
}
.wpwd-dashboard-body .wpwd-ji-totalbox:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.15);
}

/* IDENTITY vs SHELL — the distinction this file learned the hard way.
   .wpwd-dlg is the SHELL: the box, the centring, is-open, [hidden]. Every dialog
   root carries it and it is never used by JavaScript.
   .wpwd-jim / .wpwd-jpm / .wpwd-jpay / .wpwd-pcm are IDENTITY: exactly one
   element each, and what the JS resolves with a singular querySelector.
   Phase 86 had the payment dialog borrow .wpwd-jim for its styling, so
   itemEls() found the payment dialog and "+ Add item" silently died. A class
   cannot be both the look and the name. */
.wpwd-jim-overlay,
.wpwd-pcm-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.wpwd-jim-overlay.is-open,
.wpwd-pcm-overlay.is-open { opacity: 1; }

.wpwd-dlg {
	position: fixed;
	z-index: 10001;
	top: 50%;
	left: 50%;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, calc(-50% + 8px));
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.wpwd-dlg { width: min(640px, calc(100vw - 32px)); }
/* The create-product dialog is wider than the shell default. */
.wpwd-pcm { width: min(820px, calc(100vw - 32px)); }
.wpwd-dlg.is-open { opacity: 1; transform: translate(-50%, -50%); }

/* display:flex above beats the browser's own [hidden] handling. */
.wpwd-dlg[hidden],
.wpwd-jim-overlay[hidden], .wpwd-pcm-overlay[hidden],
.wpwd-jpm-overlay[hidden], .wpwd-jpay-overlay[hidden] { display: none !important; }

.wpwd-jim-form,
.wpwd-pcm-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }

.wpwd-jim-head, .wpwd-pcm-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid #e8eded;
}
.wpwd-jim-title, .wpwd-pcm-title { margin: 0; font-size: 1.15rem; }
.wpwd-jim-close, .wpwd-pcm-close {
	background: none;
	border: 0;
	font-size: 26px;
	line-height: 1;
	color: #8a9899;
	padding: 0 4px;
	cursor: pointer;
}
.wpwd-jim-close:hover, .wpwd-pcm-close:hover { color: var(--danger); }

.wpwd-jim-body, .wpwd-pcm-body { padding: 20px 22px; overflow-y: auto; }

.wpwd-jim-grid, .wpwd-pcm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 18px;
}
.wpwd-jim-wide, .wpwd-pcm-wide { grid-column: 1 / -1; }

.wpwd-jim-field, .wpwd-pcm-field { margin: 0 0 14px; min-width: 0; }
.wpwd-jim-field > label,
.wpwd-pcm-field > label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; }
/* Checkboxes and radios keep their intrinsic size — the same exclusion
   .wpwd-um-field carries above. Without it the Buy radio renders as a
   full-width 39px box with a tick floating in the middle of it. */
.wpwd-jim-field input:not([type="checkbox"]):not([type="radio"]),
.wpwd-jim-field select, .wpwd-jim-field textarea,
.wpwd-pcm-field input:not([type="checkbox"]):not([type="radio"]),
.wpwd-pcm-field select, .wpwd-pcm-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 39px;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 12px;
	background: var(--background);
	font: inherit;
	color: var(--text);
}
/* The Buy radio and its word, on one line and vertically centred. The label
   wraps both, so the whole phrase is the hit target.

   `.wpwd-jim-field > label` above is (0,1,1) and would otherwise win and force
   this back to display:block — hence the element in the selector. */
.wpwd-jim-field > label.wpwd-jim-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 39px;
	cursor: pointer;
	font-weight: 400;
}
.wpwd-jim-field > label.wpwd-jim-check input[type="radio"] { flex: none; margin: 0; }

.wpwd-jim-field input:focus, .wpwd-jim-field select:focus,
.wpwd-pcm-field input:focus, .wpwd-pcm-field select:focus,
.wpwd-pcm-field textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(3, 157, 150, 0.18);
}
/* The image and gallery controls are buttons, not inputs — undo the field skin. */
.wpwd-pcm-field .wpwd-pcm-image button,
.wpwd-pcm-field .wpwd-gallery button { width: auto; min-height: 0; }

/* The product picker row: the select stretches, the + button hugs. */
.wpwd-jim-productrow { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
.wpwd-jim-productrow > p { flex: 1 1 auto; min-width: 0; margin: 0 0 14px; }
.wpwd-jim-productrow > .wpwd-pcm-open { flex: 0 0 auto; margin-bottom: 14px; }
.wpwd-jim-pricenote { min-height: 1em; }

/* The product modal is one panel since phase 90 — the tab strip is gone. The
   .is-active rule stays because the single panel still carries the class. */
.wpwd-pcm-panel { display: none; }
.wpwd-pcm-panel.is-active { display: block; }
.wpwd-pcm-subhead { margin: 8px 0 10px; font-size: 0.95rem; }

.wpwd-pcm-image { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpwd-pcm-image-preview img { max-width: 64px; height: auto; border-radius: 6px; display: block; }

.wpwd-jim-errors, .wpwd-pcm-errors { margin: 0 0 14px; }
.wpwd-jim-errors ul, .wpwd-pcm-errors ul { margin: 0; padding-left: 18px; }

/* A sibling of the body, so the buttons never scroll out of reach. */
.wpwd-jim-foot, .wpwd-pcm-foot {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 16px 22px;
	border-top: 1px solid #e8eded;
}

@media (max-width: 640px) {
	.wpwd-dlg { width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
	.wpwd-jim-grid, .wpwd-pcm-grid { grid-template-columns: 1fr; }
}

/* Dark theme — both selectors, per the rule in the dark block. A surface styled
   in only one theme is invisible in the other. */
.wpwd-dash[data-theme="dark"] .wpwd-dlg,
html[data-wpwd-theme="dark"] .wpwd-dlg {
	background: var(--wpwd-ui-card, #18181b);
	color: var(--text);
}
.wpwd-dash[data-theme="dark"] .wpwd-jim-head,
.wpwd-dash[data-theme="dark"] .wpwd-jim-foot,
.wpwd-dash[data-theme="dark"] .wpwd-pcm-head,
.wpwd-dash[data-theme="dark"] .wpwd-pcm-foot,
html[data-wpwd-theme="dark"] .wpwd-jim-head,
html[data-wpwd-theme="dark"] .wpwd-jim-foot,
html[data-wpwd-theme="dark"] .wpwd-pcm-head,
html[data-wpwd-theme="dark"] .wpwd-pcm-foot { border-color: var(--wpwd-ui-line, #27272a); }
.wpwd-dash[data-theme="dark"] .wpwd-jim-title,
.wpwd-dash[data-theme="dark"] .wpwd-pcm-title,
html[data-wpwd-theme="dark"] .wpwd-jim-title,
html[data-wpwd-theme="dark"] .wpwd-pcm-title { color: var(--heading); }

/* -------------------------------------------------------------------------
 * Phase 80 — the Job view's collapsible panels
 *
 * NATIVE <details>/<summary>. No JavaScript is loaded for this: the SPA swaps
 * whole panels in, and anything bound per element would go dead on the second
 * open. The only work CSS has to do is hide the browser's own triangle and
 * draw the reference's plus/minus in its place.
 * ---------------------------------------------------------------------- */

.wpwd-dashboard-body .wpwd-jp {
	background: var(--wpwd-ui-card, #fff);
	border: 1px solid var(--wpwd-ui-line, #e7ecec);
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 16px;
}

/* The teal bar. Two markers are hidden, not one: Blink still ships
   ::-webkit-details-marker, and every other engine draws the triangle through
   the summary's own list-item display. Missing either leaves a stray glyph. */
.wpwd-dashboard-body .wpwd-jp-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	background: var(--panel-head);
	color: var(--panel-head-text);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.wpwd-dashboard-body .wpwd-jp-head::-webkit-details-marker { display: none; }
.wpwd-dashboard-body .wpwd-jp-head::after {
	content: "+";
	font-size: 1.15rem;
	line-height: 1;
	font-weight: 400;
	opacity: 0.9;
}
.wpwd-dashboard-body .wpwd-jp[open] > .wpwd-jp-head::after { content: "\2212"; }
.wpwd-dashboard-body .wpwd-jp-head:focus-visible {
	outline: 2px solid var(--panel-head-text);
	outline-offset: -4px;
}
/* The title takes the slack, so the count and the +/- stay together on the
   right whether or not a count was passed. Putting margin-left:auto on BOTH of
   them instead splits the free space between the two and the count drifts into
   the middle of the bar. */
.wpwd-dashboard-body .wpwd-jp-title {
	flex: 1 1 auto;
	min-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wpwd-dashboard-body .wpwd-jp-count {
	font-weight: 600;
	font-size: 0.8rem;
	opacity: 0.92;
}

.wpwd-dashboard-body .wpwd-jp-body { padding: 14px 16px; }
.wpwd-dashboard-body .wpwd-jp-body > :first-child { margin-top: 0; }
.wpwd-dashboard-body .wpwd-jp-body > :last-child { margin-bottom: 0; }

/* Quotation repeater item collapsible styling */
.wpwd-dashboard-body .wpwd-jp-head .wpwd-quot-remove-item {
	padding: 4px 10px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	flex: 0 0 auto;
	margin-left: auto;
}

.wpwd-quot-summary-info {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	max-width: calc(100% - 180px);
	min-width: 0;
}

.wpwd-quot-summary-sep {
	opacity: 0.7;
}

/* Responsive: stack summary on small screens */
@media (max-width: 640px) {
	.wpwd-dashboard-body .wpwd-jp-head {
		flex-wrap: wrap;
	}

	.wpwd-dashboard-body .wpwd-jp-title {
		flex: 0 0 100%;
		margin-bottom: 6px;
	}

	.wpwd-quot-summary-info {
		flex: 1 1 auto;
		font-size: 0.75rem;
		max-width: calc(100% - 120px);
	}

	.wpwd-dashboard-body .wpwd-jp-head .wpwd-quot-remove-item {
		padding: 3px 8px;
		font-size: 0.7rem;
	}
}

.wpwd-dashboard-body .wpwd-job-noteform {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.wpwd-dashboard-body .wpwd-job-noteform textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	resize: vertical;
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 10px 12px;
	font: inherit;
	background: var(--background);
	color: var(--text);
}
.wpwd-dashboard-body .wpwd-job-noteform .wpwd-btn {
	justify-self: start;
	max-width: 100%;
	white-space: normal;
}
.wpwd-dashboard-body .wpwd-jp-empty {
	margin: 0;
	color: var(--wpwd-ui-muted, #71717a);
	font-size: 0.875rem;
	font-style: italic;
}

@media (max-width: 480px) {
	.wpwd-dashboard-body .wpwd-jp-body { padding: 12px; }
	.wpwd-dashboard-body .wpwd-job-noteform .wpwd-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Phase 94 — the job FORM's sections open and close smoothly.
 *
 * SCOPED TO THE FORM ON PURPOSE. .wpwd-jp is used by about twenty panels across
 * the job, lead and customer screens; animating all of them is a bigger change
 * than was asked for, and phase-80 asserts on that class elsewhere.
 *
 * ::details-content is the only way to transition a <details> open without
 * JavaScript: the content is otherwise removed from the box tree the instant it
 * closes, so there is nothing left to animate. interpolate-size is what lets
 * `auto` be a transition endpoint — without it the rule is valid but the
 * animation has no height to travel to.
 *
 * Where an engine does not support either, the section still opens and closes
 * correctly, just instantly. A missing animation is a degraded form, not a
 * broken one, which is why this needs no JS fallback. */
@supports (interpolate-size: allow-keywords) {
	.wpwd-dashboard-body .wpwd-jobform-sections,
	.wpwd-dashboard-body .wpwd-form-sections,
	.wpwd-dashboard-body .wpwd-cat-form--split { interpolate-size: allow-keywords; }
}

/* Phase 117: every dashboard FORM animates its sections (.wpwd-form-sections,
   and the catalogue's details cards). The job RECORD's panels still do not —
   they are read-only and there are twenty of them. */
.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp::details-content,
.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp::details-content,
.wpwd-dashboard-body .wpwd-cat-form--split details.wpwd-form-card::details-content {
	block-size: 0;
	overflow: hidden;
	/* allow-discrete so content-visibility flips at the END of the close rather
	   than at the start, which is what stops the body vanishing before it has
	   finished collapsing. */
	transition:
		block-size 320ms cubic-bezier(0.4, 0, 0.2, 1),
		content-visibility 320ms allow-discrete;
}

.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp[open]::details-content,
.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp[open]::details-content,
.wpwd-dashboard-body .wpwd-cat-form--split details.wpwd-form-card[open]::details-content {
	block-size: auto;
}

/* Phase 123: a Tom Select dropdown is absolutely positioned INSIDE its field,
   so the section's overflow:hidden (card + ::details-content above) cut it off
   at the card's bottom edge — a short section like the cash book's Parties
   showed one and a half options. Release the clip only while a dropdown is
   open, so the rounded corners and the open/close animation are untouched the
   rest of the time. Not dropdownParent:'body': that would move the menu out
   of .wpwd-dashboard-body and lose every scoped .ts-dropdown and dark rule. */
.wpwd-dashboard-body .wpwd-jp[open]:has(.ts-wrapper.dropdown-active),
.wpwd-dashboard-body details.wpwd-form-card[open]:has(.ts-wrapper.dropdown-active),
.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp[open]:has(.ts-wrapper.dropdown-active)::details-content,
.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp[open]:has(.ts-wrapper.dropdown-active)::details-content,
.wpwd-dashboard-body .wpwd-cat-form--split details.wpwd-form-card[open]:has(.ts-wrapper.dropdown-active)::details-content {
	overflow: visible;
}

/* Lift the open section above the NEXT one, or the menu slides under it. */
.wpwd-dashboard-body .wpwd-jp:has(.ts-wrapper.dropdown-active),
.wpwd-dashboard-body details.wpwd-form-card:has(.ts-wrapper.dropdown-active) {
	position: relative;
	z-index: 5;
}

/* The +/- marker is drawn by .wpwd-jp-head::after above; this only makes the
   swap feel part of the same movement. */
.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp-head::after,
.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp-head::after,
.wpwd-dashboard-body .wpwd-cat-form--split summary.wpwd-form-card__title::after {
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp[open] > .wpwd-jp-head::after,
.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp[open] > .wpwd-jp-head::after,
.wpwd-dashboard-body .wpwd-cat-form--split details.wpwd-form-card[open] > summary.wpwd-form-card__title::after {
	transform: rotate(180deg);
}

/* Somebody who has asked for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
	.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp::details-content,
	.wpwd-dashboard-body .wpwd-jobform-sections .wpwd-jp-head::after,
	.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp::details-content,
	.wpwd-dashboard-body .wpwd-form-sections .wpwd-jp-head::after,
	.wpwd-dashboard-body .wpwd-cat-form--split details.wpwd-form-card::details-content,
	.wpwd-dashboard-body .wpwd-cat-form--split summary.wpwd-form-card__title::after {
		transition: none;
	}
}

/* The header block above the panels. */
.wpwd-dashboard-body .wpwd-jp-headline {
	background: var(--wpwd-ui-card, #fff);
	border: 1px solid var(--wpwd-ui-line, #e7ecec);
	border-radius: 10px;
	padding: 8px 12px;
	margin: 0 0 16px;
}

/* Panels pair up, as in the reference. minmax(0,1fr) not 1fr: a wide table
   inside a grid column with an auto minimum pushes the column past the row and
   the second panel slides off screen. */
.wpwd-dashboard-body .wpwd-jp-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	align-items: start;
}
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-jp-row { grid-template-columns: 1fr; }
}

.wpwd-dashboard-body .wpwd-jp-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpwd-dashboard-body .wpwd-jp-list li {
	padding: 7px 0;
	font-size: 0.875rem;
	color: var(--text);
	border-bottom: 1px solid var(--wpwd-ui-line, #e7ecec);
}
.wpwd-dashboard-body .wpwd-jp-list li:last-child { border-bottom: 0; }
.wpwd-dashboard-body .wpwd-jp-total {
	margin: 10px 0 0;
	font-weight: 700;
	color: var(--heading);
}
.wpwd-dashboard-body .wpwd-jp-table { margin: 0; }

/* ---- The job Finance tab (phase 86) ----------------------------------------
   Five money cards, a payments table and one more dialog. The card grid is the
   shared .wpwd-stat-grid (auto-fit minmax(180px,1fr)), which takes five across
   without a media query — only the second line is new.
   -------------------------------------------------------------------------- */
.wpwd-dashboard-body .wpwd-job-finance-cards .wpwd-lead-stat-value { font-size: 1.25rem; }
.wpwd-dashboard-body .wpwd-lead-stat-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--wpwd-ui-muted, #6b7280);
}
/* "nett" / "inc VAT" — a caption, not a figure, so it must not read as one. */
.wpwd-dashboard-body .wpwd-lead-stat-note {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.wpwd-dashboard-body .wpwd-jpay-table td[data-label="Payment"] { font-weight: 600; }

/* The dialog root carries .wpwd-jpay AND .wpwd-jim, so it inherits the shell.
   Its overlay and form do not — and the form deliberately does NOT take
   .wpwd-jim-form, which the submit handler matches on. */
.wpwd-jpay-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.wpwd-jpay-overlay.is-open { opacity: 1; }
.wpwd-jpay-overlay[hidden] { display: none !important; }
.wpwd-jpay-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }

/* ---- The job purchasing grid and dialog (phase 85c) ------------------------
   The dialog borrows the .wpwd-jim shell wholesale, so it needs only its own
   overlay and open state. The grid is ten columns wide, which is two more than
   any other table in the dashboard — it scrolls inside its wrapper rather than
   shrinking the type, and stacks by data-label on a phone like the rest.
   -------------------------------------------------------------------------- */
/* The dialog root carries BOTH classes (.wpwd-jpm .wpwd-jim), so it inherits
   the shell above. Its overlay and its form do not — and the form deliberately
   does NOT take .wpwd-jim-form, because the submit handler matches on that
   class and would post this dialog to the job-ITEM endpoint. */
.wpwd-jpm-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(20, 30, 30, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.wpwd-jpm-overlay.is-open { opacity: 1; }
.wpwd-jpm-overlay[hidden] { display: none !important; }
.wpwd-jpm-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }

.wpwd-dashboard-body .wpwd-jpm-table { min-width: 940px; }
.wpwd-dashboard-body .wpwd-jpm-table th,
.wpwd-dashboard-body .wpwd-jpm-table td { white-space: nowrap; }
/* The reason is prose and the only cell allowed to wrap. */
.wpwd-dashboard-body .wpwd-jpm-table td[data-label="Reason"] {
	white-space: normal;
	min-width: 160px;
}
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-jpm-table { min-width: 0; }
	.wpwd-dashboard-body .wpwd-jpm-table th,
	.wpwd-dashboard-body .wpwd-jpm-table td { white-space: normal; }
}

/* A shortfall is the one number on this row somebody has to act on. */
.wpwd-dashboard-body .wpwd-jpm-missing {
	background: var(--wpwd-amber, #b45309);
	color: #fff;
}

/* ---- The lead form (phase 84) ---------------------------------------------
   Customer and Addresses side by side, Contact and Enquiry full width under
   them. One grid rather than two floated columns, so the two top panels are
   equal height whichever is longer, and one breakpoint collapses the lot.
   No colours here: the panels are wpwd_panel_card(), which is already teal.
   -------------------------------------------------------------------------- */
.wpwd-dashboard-body .wpwd-leadform {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
	align-items: start;
}
.wpwd-dashboard-body .wpwd-leadform-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.wpwd-dashboard-body .wpwd-leadform { grid-template-columns: 1fr; }
}

/* Declared rather than inherited: .wpwd-um-grid is already two columns, but a
   modifier that silently relies on that is a modifier that breaks the day the
   base changes. */
.wpwd-dashboard-body .wpwd-um-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
	.wpwd-dashboard-body .wpwd-um-grid--2 { grid-template-columns: 1fr; }
}

/* A value shown but not editable — Reference and Stage. It reads as a field so
   the grid stays aligned, and as disabled so nobody types into it hoping. */
.wpwd-dashboard-body .wpwd-um-field--static input[disabled] {
	background: var(--wpwd-ui-hover, #f4f6f6);
	color: var(--wpwd-ui-muted, #6b7280);
	cursor: default;
}

/* The three address blocks. A rule and a gap rather than a sub-heading: the
   block is named by its first field's label, so a heading would print the same
   word twice (see wpwd_lead_address_block). */
.wpwd-dashboard-body .wpwd-lead-addr + .wpwd-lead-addr {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wpwd-ui-line, #e7ecec);
}

/* ---- Dark partners -------------------------------------------------------
   The teal darkens one step: #039D96 is a bright fill against a #18181b page
   and glares at panel size. White on #02736E is still 4.6:1.
   ------------------------------------------------------------------------ */
.wpwd-dash[data-theme="dark"],
html[data-wpwd-theme="dark"] .wpwd-dash,
html[data-wpwd-theme="dark"].wpwd-dashboard-body,
html[data-wpwd-theme="dark"] .wpwd-dashboard-body {
	--panel-head: #02736E;
	--panel-head-text: #ffffff;
}

/* The striped field grid this tab reuses from the Customers screen hardcodes a
   near-white stripe and a dark-green label, neither of which had a dark
   partner — on the dark theme that is white text on #f6f8f7. Fixing it here
   also fixes the customer modal, which has the same two rules. */
.wpwd-dash[data-theme="dark"] .wpwd-cm-frow.is-alt,
html[data-wpwd-theme="dark"] .wpwd-cm-frow.is-alt { background: var(--wpwd-ui-hover, #27272a); }
.wpwd-dash[data-theme="dark"] .wpwd-cm-flabel,
html[data-wpwd-theme="dark"] .wpwd-cm-flabel { color: var(--wpwd-ui-muted, #a1a1aa); }

/* ==========================================================================
   Flush Casement Windows page + Elementor template (phase 122)
   --------------------------------------------------------------------------
   Everything is scoped to `.wpwd-fc`, a class the seeder puts on each
   section (includes/elementor-flush-casement.php), so the template looks the
   same wherever it is inserted. The widgets are native Elementor ones; this
   block supplies their brand look so no colour is stored in widget settings.

   Colour rules (see the brand-contrast notes at the top of this file):
   teal FILLS use --primary, teal LETTERS use --primary-dark; gold always
   carries var(--heading) text, never white; a white-text teal surface is
   --primary-dark (4.87:1), never --primary (3.35:1).

   HEADINGS CARRY !important. Elementor writes the kit's default heading colour
   (#6EC1E4) and font (Roboto) per element into post-<id>.css at 0,4,0
   specificity, which beat these rules on staging. Nothing is stored in the
   widgets, so the brand has to win from here.
   ========================================================================== */
.elementor-section.wpwd-fc {
	padding: 88px 16px;
	color: var(--text);
	background: var(--background);
}
.elementor-section.wpwd-fc.wpwd-fc-soft { background: var(--section-bg); border-block: 1px solid var(--border); }

.wpwd-fc .elementor-heading-title { font-family: var(--wpwd-display) !important; color: var(--heading) !important; letter-spacing: -0.01em; }
.wpwd-fc .wpwd-fc-title .elementor-heading-title { font-size: clamp(30px, 4vw, 46px) !important; line-height: 1.05; font-weight: 400 !important; margin: 0 0 6px; }
.wpwd-fc .wpwd-fc-center,
.wpwd-fc .wpwd-fc-center .elementor-heading-title { text-align: center; }
.wpwd-fc .wpwd-fc-text,
.wpwd-fc .wpwd-fc-intro { font-size: 15px; line-height: 1.75; }
.wpwd-fc .wpwd-fc-intro p { max-width: 60ch; }
.wpwd-fc .wpwd-fc-center p { margin-inline: auto; }
.wpwd-fc p:last-child { margin-bottom: 0; }

.wpwd-fc .wpwd-fc-eyebrow .elementor-heading-title,
.wpwd-fc .wpwd-fc-label-w .elementor-heading-title {
	display: block;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--primary-dark) !important;
}
.wpwd-fc .wpwd-fc-label {
	display: block;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--primary-dark);
}
.wpwd-fc .wpwd-fc-label-w .elementor-heading-title { color: var(--secondary) !important; }
.wpwd-fc .wpwd-fc-label { color: var(--secondary); }

.wpwd-fc .wpwd-fc-badge .elementor-heading-title,
.wpwd-fc .wpwd-fc-pill .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-dark) !important;
	background: rgba(3, 157, 150, 0.08);
	border: 1px solid rgba(3, 157, 150, 0.25);
	border-radius: 999px;
	padding: 6px 12px;
}
.wpwd-fc .wpwd-fc-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary-dark);
	background: rgba(3, 157, 150, 0.08);
	border: 1px solid rgba(3, 157, 150, 0.25);
	border-radius: 999px;
	padding: 6px 12px;
}
.wpwd-fc .wpwd-fc-badge .elementor-heading-title::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
}

/* Buttons. Kadence paints button:hover white and .elementor-button has its
   own colours, so background AND colour are stated for every state. */
.wpwd-fc .elementor-widget.wpwd-fc-btn-inline { width: auto; margin: 0 12px 12px 0; }
.wpwd-fc .wpwd-fc-btn .elementor-button {
	min-height: 48px;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s;
}
.wpwd-fc .wpwd-fc-btn-gold .elementor-button,
.wpwd-fc .wpwd-fc-btn-gold .elementor-button:visited { background: var(--gold); color: var(--heading) !important; box-shadow: 0 6px 18px var(--gold-shadow); }
.wpwd-fc .wpwd-fc-btn-gold .elementor-button:hover,
.wpwd-fc .wpwd-fc-btn-gold .elementor-button:focus { background: var(--gold-hover); color: var(--heading) !important; }
.wpwd-fc .wpwd-fc-btn-outline .elementor-button { background: transparent; color: var(--primary-dark) !important; border-color: var(--primary); }
.wpwd-fc .wpwd-fc-btn-outline .elementor-button:hover,
.wpwd-fc .wpwd-fc-btn-outline .elementor-button:focus { background: var(--primary-dark); color: #fff !important; border-color: var(--primary-dark); }
.wpwd-fc .wpwd-fc-btn-outline-light .elementor-button { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.55); }
.wpwd-fc .wpwd-fc-btn-outline-light .elementor-button:hover,
.wpwd-fc .wpwd-fc-btn-outline-light .elementor-button:focus { background: #fff; color: var(--primary-dark) !important; border-color: #fff; }

/* Cards: a column carrying .wpwd-fc-card; its widget-wrap is the surface. */
.wpwd-fc .elementor-column.wpwd-fc-card > .elementor-widget-wrap {
	height: 100%;
	align-content: flex-start;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--wpwd-radius-sm);
	padding: 28px;
}
.wpwd-fc .wpwd-fc-grid + .wpwd-fc-grid { margin-top: 20px; }
.wpwd-fc .wpwd-fc-grid,
.wpwd-fc .wpwd-fc-facts,
.wpwd-fc .wpwd-fc-tiles,
.wpwd-fc .wpwd-fc-chips { margin-top: 28px; }
.wpwd-fc .wpwd-fc-card-title .elementor-heading-title { font-size: 21px !important; line-height: 1.2; margin: 4px 0 2px; }
.wpwd-fc .wpwd-fc-card-text { font-size: 14px; line-height: 1.65; }
.wpwd-fc .wpwd-fc-icon .elementor-icon {
	display: inline-flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--primary-dark);
	fill: var(--primary-dark);
	background: rgba(3, 157, 150, 0.08);
	border-radius: 12px;
}
.wpwd-fc .wpwd-fc-icon .elementor-icon svg { width: 18px; height: 18px; }

/* Icon lists */
.wpwd-fc .wpwd-fc-list .elementor-icon-list-item { font-size: 14px; line-height: 1.5; padding-block: 4px; align-items: flex-start; }
.wpwd-fc .wpwd-fc-list .elementor-icon-list-icon { color: var(--primary); padding-top: 3px; }
.wpwd-fc .wpwd-fc-list .elementor-icon-list-icon i { color: var(--primary); font-size: 13px; }
.wpwd-fc .wpwd-fc-list .elementor-icon-list-icon svg { fill: var(--primary); width: 13px; height: 13px; }
.wpwd-fc .wpwd-fc-list--dots .elementor-icon-list-icon i { font-size: 7px; }
.wpwd-fc .wpwd-fc-list--dots .elementor-icon-list-icon svg { width: 7px; height: 7px; }
.wpwd-fc .wpwd-fc-list--dots .elementor-icon-list-item + .elementor-icon-list-item .elementor-icon-list-icon i { color: var(--gold); }
.wpwd-fc .wpwd-fc-list--dots .elementor-icon-list-item + .elementor-icon-list-item .elementor-icon-list-icon svg { fill: var(--gold); }
.wpwd-fc .wpwd-fc-list--ticks .elementor-icon-list-icon i { font-size: 17px; }
.wpwd-fc .wpwd-fc-list--ticks .elementor-icon-list-icon svg { width: 17px; height: 17px; }

/* 1. Hero */
.elementor-section.wpwd-fc-hero { padding-block: 72px 88px; background: linear-gradient(180deg, #fff 0%, var(--section-bg) 100%); }
.wpwd-fc .wpwd-fc-h1 .elementor-heading-title { font-size: clamp(40px, 5.6vw, 66px) !important; line-height: 0.98; font-weight: 400 !important; margin: 18px 0 0; }
.wpwd-fc .wpwd-fc-tagline { display: block; font-style: italic; color: var(--primary); margin-top: 8px; }
.wpwd-fc .wpwd-fc-lead { font-size: 17px; line-height: 1.65; margin: 22px 0 26px; }
.wpwd-fc .wpwd-fc-lead p { max-width: 56ch; }
.wpwd-fc .wpwd-fc-chips { border-top: 1px solid var(--border); padding-top: 22px; }
.wpwd-fc .wpwd-fc-chip > .elementor-widget-wrap { flex-wrap: nowrap; align-items: center; gap: 10px; }
.wpwd-fc .wpwd-fc-chip .elementor-widget { width: auto; margin: 0; }
.wpwd-fc .wpwd-fc-chip-icon .elementor-icon {
	display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
	font-size: 15px; border-radius: 50%; color: var(--primary-dark); fill: var(--primary-dark); background: rgba(3, 157, 150, 0.1);
}
.wpwd-fc .wpwd-fc-chip-icon .elementor-icon svg { width: 15px; height: 15px; }
.wpwd-fc .wpwd-fc-chip-text { font-size: 12px; line-height: 1.35; }
.wpwd-fc .wpwd-fc-chip-text strong { display: block; color: var(--heading); }
.wpwd-fc .wpwd-fc-note { font-size: 13px; line-height: 1.55; margin-top: 16px; }
.wpwd-fc .wpwd-fc-note p { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 10px; padding: 14px 16px; }
.wpwd-fc .wpwd-fc-note strong { color: var(--heading); }

/* Diagrams (HTML widgets) */
.wpwd-fc .wpwd-fc-compare,
.wpwd-fc .wpwd-fc-anatomy { background: #fff; border: 1px solid var(--border); border-radius: var(--wpwd-radius); padding: 28px; box-shadow: var(--wpwd-shadow-sm); }
.wpwd-fc .wpwd-fc-compare-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secondary); margin-bottom: 18px; }
.wpwd-fc .wpwd-fc-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wpwd-fc .wpwd-fc-compare-item { margin: 0; }
.wpwd-fc .wpwd-fc-compare-art,
.wpwd-fc .wpwd-fc-anatomy-art { position: relative; background: var(--section-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.wpwd-fc .wpwd-fc-compare-art svg,
.wpwd-fc .wpwd-fc-anatomy-art svg { display: block; width: 100%; height: auto; }
.wpwd-fc .wpwd-fc-compare-art .wpwd-fc-tag,
.wpwd-fc .wpwd-fc-anatomy-art .wpwd-fc-tag { position: absolute; right: 8px; bottom: 8px; font-size: 9px; padding: 4px 8px; background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.wpwd-fc .wpwd-fc-compare-art .wpwd-fc-tag.is-muted { background: var(--secondary); border-color: var(--secondary); }
.wpwd-fc .wpwd-fc-compare-item figcaption { margin-top: 10px; font-size: 12px; line-height: 1.4; }
.wpwd-fc .wpwd-fc-compare-item figcaption strong { display: block; font-size: 13px; color: var(--heading); }
.wpwd-fc .wpwd-fc-compare-item.is-storm { opacity: 0.7; }
.wpwd-fc .wpwd-fc-svg-frame { fill: #fff; stroke: var(--primary); stroke-width: 5; }
.wpwd-fc .is-storm .wpwd-fc-svg-frame { stroke: var(--secondary); }
.wpwd-fc .wpwd-fc-svg-sash { fill: none; stroke: var(--primary); stroke-opacity: 0.35; stroke-width: 10; }
.wpwd-fc .wpwd-fc-svg-glass { fill: rgba(3, 157, 150, 0.07); stroke: var(--primary); stroke-opacity: 0.35; stroke-width: 1.5; }
.wpwd-fc .wpwd-fc-svg-thin { stroke: var(--primary); stroke-opacity: 0.3; stroke-width: 1.5; }
.wpwd-fc .wpwd-fc-svg-shadow { fill: rgba(46, 58, 59, 0.15); }
.wpwd-fc .wpwd-fc-svg-cill { fill: rgba(3, 157, 150, 0.2); }
.wpwd-fc .wpwd-fc-svg-accent { fill: var(--gold); }
.wpwd-fc .wpwd-fc-anatomy-keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; }
.wpwd-fc .wpwd-fc-anatomy-keys span { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }

/* 2. Jump nav */
.elementor-section.wpwd-fc-jump { padding: 0 16px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.wpwd-fc .wpwd-fc-jump-nav nav { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.wpwd-fc .wpwd-fc-jump-nav a { flex: none; padding: 16px 0; font-size: 13px; font-weight: 600; color: var(--heading); text-decoration: none; border-bottom: 2px solid transparent; }
.wpwd-fc .wpwd-fc-jump-nav a:hover,
.wpwd-fc .wpwd-fc-jump-nav a:focus { color: var(--primary-dark); border-bottom-color: var(--gold); }

/* 3. Definition */
.wpwd-fc .wpwd-fc-fact .wpwd-fc-fact-text strong { display: block; margin-top: 4px; font-size: 14px; color: var(--heading); }
.wpwd-fc .elementor-column.wpwd-fc-fact > .elementor-widget-wrap { padding: 16px 18px; }
.wpwd-fc .wpwd-fc-tiles { margin-top: 14px; }
.wpwd-fc .elementor-column.wpwd-fc-tile > .elementor-widget-wrap { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; height: 100%; }
.wpwd-fc .elementor-column.wpwd-fc-tile.is-teal > .elementor-widget-wrap { background: var(--primary-dark); border-color: var(--primary-dark); }
.wpwd-fc .wpwd-fc-tile-text { font-size: 12px; line-height: 1.4; }
.wpwd-fc .wpwd-fc-tile-text strong { display: block; color: var(--heading); font-size: 14px; }
.wpwd-fc .wpwd-fc-tile.is-teal .wpwd-fc-tile-text,
.wpwd-fc .wpwd-fc-tile.is-teal .wpwd-fc-tile-text strong { color: #fff; }
.wpwd-fc .wpwd-fc-definition .wpwd-fc-list { margin-top: 16px; }
@media (min-width: 1025px) {
	.wpwd-fc-definition > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap { position: sticky; top: 72px; }
}

/* 5. Benefits — dark band */
.elementor-section.wpwd-fc.wpwd-fc-dark { background: var(--footer-bg); color: rgba(255, 255, 255, 0.78); }
.wpwd-fc-dark .elementor-heading-title { color: #fff !important; }
.wpwd-fc-dark .wpwd-fc-eyebrow .elementor-heading-title,
.wpwd-fc-dark .wpwd-fc-num .elementor-heading-title { color: var(--gold) !important; font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em; }
.wpwd-fc-dark .wpwd-fc-pill .elementor-heading-title { color: #fff !important; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); letter-spacing: 0.08em; margin-top: 18px; }
.wpwd-fc-dark .elementor-column.wpwd-fc-card > .elementor-widget-wrap { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
.wpwd-fc-dark .wpwd-fc-card-title .elementor-heading-title { font-family: inherit !important; font-size: 17px !important; font-weight: 600 !important; }
.wpwd-fc-dark .wpwd-fc-card-text { color: rgba(255, 255, 255, 0.72); }

/* 6. Materials */
.wpwd-fc .wpwd-fc-material-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpwd-fc .wpwd-fc-material-head .wpwd-fc-tag { padding: 4px 10px; font-size: 10px; }
.wpwd-fc .wpwd-fc-material .wpwd-fc-card-title { margin-top: 14px; }
.wpwd-fc .wpwd-fc-material .wpwd-fc-list { margin-top: 14px; }
.wpwd-fc .wpwd-fc-price { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--heading); }
.wpwd-fc .elementor-column.wpwd-fc-material.is-featured > .elementor-widget-wrap { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 18px 40px rgba(2, 127, 121, 0.25); }
.wpwd-fc .wpwd-fc-material.is-featured .elementor-heading-title { color: #fff !important; }
.wpwd-fc .wpwd-fc-material.is-featured,
.wpwd-fc .wpwd-fc-material.is-featured .wpwd-fc-card-text,
.wpwd-fc .wpwd-fc-material.is-featured .elementor-icon-list-text,
.wpwd-fc .wpwd-fc-material.is-featured .wpwd-fc-price,
.wpwd-fc .wpwd-fc-material.is-featured .wpwd-fc-label { color: #fff; }
.wpwd-fc .wpwd-fc-material.is-featured .wpwd-fc-price { border-top-color: rgba(255, 255, 255, 0.25); }
.wpwd-fc .wpwd-fc-material.is-featured .wpwd-fc-tag { background: var(--gold); border-color: var(--gold); color: var(--heading); }
.wpwd-fc .wpwd-fc-material.is-featured .elementor-icon-list-icon i { color: var(--gold); }
.wpwd-fc .wpwd-fc-material.is-featured .elementor-icon-list-icon svg { fill: var(--gold); }

/* 8. Customisation */
.wpwd-fc .wpwd-fc-chiplets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wpwd-fc .wpwd-fc-chiplet { font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; color: var(--heading); background: var(--section-bg); }
.wpwd-fc .wpwd-fc-small { font-size: 12px; margin-top: 12px; }
.wpwd-fc .wpwd-fc-list--compact { margin-top: 8px; }
.wpwd-fc .wpwd-fc-list--compact .elementor-icon-list-item { font-size: 13px; padding-block: 3px; }

/* 9. Gallery */
.wpwd-fc .elementor-column.wpwd-fc-shot > .elementor-widget-wrap { padding: 8px; overflow: hidden; }
.wpwd-fc .wpwd-fc-shot-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.wpwd-fc .wpwd-fc-shot-caption { padding: 12px 8px 6px; font-size: 12px; line-height: 1.45; }
.wpwd-fc .wpwd-fc-shot-caption strong { display: block; font-size: 13px; color: var(--heading); margin-bottom: 2px; }

/* 10. Why choose us */
.wpwd-fc .wpwd-fc-why .wpwd-fc-list { margin-top: 20px; }
.wpwd-fc .wpwd-fc-stat-text { font-size: 13px; line-height: 1.55; }
.wpwd-fc .wpwd-fc-stat-num { display: block; font-family: var(--wpwd-display); font-size: 32px; line-height: 1.1; font-weight: 400; color: var(--primary-dark); margin-bottom: 4px; }
.wpwd-fc .wpwd-fc-stat-text p { margin-top: 8px; }
.wpwd-fc .elementor-column.wpwd-fc-stat.is-teal > .elementor-widget-wrap { background: var(--primary-dark); border-color: var(--primary-dark); }
.wpwd-fc .wpwd-fc-stat.is-teal .wpwd-fc-stat-text,
.wpwd-fc .wpwd-fc-stat.is-teal .wpwd-fc-stat-num,
.wpwd-fc .wpwd-fc-stat.is-teal .wpwd-fc-label { color: #fff; }

/* 11. FAQs */
.elementor-section.wpwd-fc-faqs > .elementor-container { max-width: 920px; }
.wpwd-fc .wpwd-fc-accordion { margin-top: 32px; }
.wpwd-fc .wpwd-fc-accordion .elementor-accordion-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.wpwd-fc .wpwd-fc-accordion .elementor-accordion-item + .elementor-accordion-item { margin-top: 10px; border-top: 1px solid var(--border); }
.wpwd-fc .wpwd-fc-accordion .elementor-tab-title { padding: 20px 22px; border: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.wpwd-fc .wpwd-fc-accordion .elementor-tab-title a { color: var(--heading); font-family: inherit; }
.wpwd-fc .wpwd-fc-accordion .elementor-tab-title.elementor-active a { color: var(--primary-dark); }
.wpwd-fc .wpwd-fc-accordion .elementor-accordion-icon { color: var(--primary-dark); }
.wpwd-fc .wpwd-fc-accordion .elementor-accordion-icon svg { fill: var(--primary-dark); width: 14px; }
.wpwd-fc .wpwd-fc-accordion .elementor-tab-content { padding: 0 22px 22px; border: 0; font-size: 14px; line-height: 1.7; color: var(--text); }

/* 12. Quote band */
.elementor-section.wpwd-fc.wpwd-fc-quote {
	background-color: var(--primary-dark);
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
	background-size: 30px 30px;
	color: rgba(255, 255, 255, 0.86);
}
.wpwd-fc-quote .elementor-heading-title { color: #fff !important; }
.wpwd-fc-quote .wpwd-fc-title .elementor-heading-title { font-size: clamp(34px, 5vw, 56px) !important; margin-top: 16px; max-width: 18ch; }
.wpwd-fc-quote .wpwd-fc-pill .elementor-heading-title { color: var(--heading) !important; background: var(--gold); border-color: var(--gold); }
.wpwd-fc-quote .wpwd-fc-intro { margin: 10px 0 28px; }

/* Tablet / mobile: Elementor stacks columns under 768px; the gutters and
   inline buttons need help. */
@media (max-width: 1024px) {
	.elementor-section.wpwd-fc { padding-block: 64px; }
	.wpwd-fc-benefits > .elementor-container > .elementor-column,
	.wpwd-fc-uses > .elementor-container > .elementor-column,
	.wpwd-fc-why > .elementor-container > .elementor-column,
	.wpwd-fc-hero > .elementor-container > .elementor-column,
	.wpwd-fc-definition > .elementor-container > .elementor-column { width: 100%; }
	.wpwd-fc-hero-aside,
	.wpwd-fc-definition > .elementor-container > .elementor-column + .elementor-column,
	.wpwd-fc-benefits > .elementor-container > .elementor-column + .elementor-column,
	.wpwd-fc-uses > .elementor-container > .elementor-column + .elementor-column,
	.wpwd-fc-why > .elementor-container > .elementor-column + .elementor-column { margin-top: 32px; }
	.wpwd-fc-customisation .wpwd-fc-grid > .elementor-container > .elementor-column { width: 50%; }
}
@media (max-width: 767px) {
	.elementor-section.wpwd-fc { padding: 52px 16px; }
	.elementor-section.wpwd-fc-jump { padding-block: 0; }
	.wpwd-fc .elementor-column.wpwd-fc-card > .elementor-widget-wrap { padding: 22px; }
	.wpwd-fc .wpwd-fc-grid > .elementor-container > .elementor-column + .elementor-column,
	.wpwd-fc .wpwd-fc-chips > .elementor-container > .elementor-column + .elementor-column,
	.wpwd-fc .wpwd-fc-facts > .elementor-container > .elementor-column + .elementor-column { margin-top: 14px; }
	.wpwd-fc-customisation .wpwd-fc-grid > .elementor-container > .elementor-column { width: 100%; }
	.wpwd-fc .wpwd-fc-tiles > .elementor-container { flex-wrap: nowrap; gap: 8px; }
	.wpwd-fc .wpwd-fc-tiles > .elementor-container > .elementor-column { width: 33.333%; }
	.wpwd-fc .elementor-widget.wpwd-fc-btn-inline { width: 100%; margin-right: 0; }
	.wpwd-fc .wpwd-fc-btn .elementor-button { width: 100%; justify-content: center; }
	.wpwd-fc .wpwd-fc-compare,
	.wpwd-fc .wpwd-fc-anatomy { padding: 18px; }
}

/* Job attachment gallery. */
.wpwd-job-image-upload {
	display: grid;
	gap: 14px;
}
.wpwd-job-image-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.wpwd-job-image-picker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 96px;
	padding: 18px;
	border: 1px dashed #a9c5c2;
	border-radius: 12px;
	background: #fbfcfc;
	color: var(--wpwd-ui-ink);
	cursor: pointer;
	text-align: left;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.wpwd-job-image-picker:hover {
	border-color: #0f9d94;
	box-shadow: 0 8px 24px rgba(15, 157, 148, 0.1);
	transform: translateY(-1px);
}
.wpwd-job-image-input:focus-visible + .wpwd-job-image-picker {
	outline: 3px solid rgba(15, 157, 148, 0.22);
	outline-offset: 2px;
}
.wpwd-job-image-picker__icon {
	position: relative;
	display: block;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: #0f9d94;
	color: #fff;
	box-shadow: 0 7px 18px rgba(15, 157, 148, 0.22);
}
.wpwd-job-image-picker__icon::before,
.wpwd-job-image-picker__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
}
.wpwd-job-image-picker__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.wpwd-job-image-picker__copy {
	min-width: 170px;
}
.wpwd-job-image-picker strong,
.wpwd-job-image-picker small {
	display: block;
}
.wpwd-job-image-picker strong {
	color: #17202a;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.wpwd-job-image-picker small {
	margin-top: 4px;
	color: #7b828c;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.4;
}
.wpwd-job-image-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.wpwd-job-image-count {
	flex: 0 0 auto;
	color: #0b7f78;
	font-size: 12px;
	font-weight: 700;
}
.wpwd-job-image-previews,
.wpwd-job-existing-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
	gap: 12px;
}
.wpwd-job-existing-images {
	display: grid;
	gap: 10px;
	padding-top: 2px;
}
.wpwd-job-existing-images__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--wpwd-ui-ink);
}
.wpwd-job-existing-images__head > span {
	color: var(--wpwd-ui-muted);
	font-size: 12px;
}
.wpwd-job-image-preview {
	min-width: 0;
	margin: 0;
}
.wpwd-job-existing-image {
	cursor: grab;
	transition: opacity 140ms ease, transform 140ms ease;
}
.wpwd-job-existing-image:active {
	cursor: grabbing;
}
.wpwd-job-existing-image.is-dragging {
	opacity: 0.42;
	transform: scale(0.97);
}
.wpwd-job-image-preview__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 8px;
	background: #eef2f4;
	box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
}
.wpwd-job-image-preview__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.28);
	opacity: 0;
	transition: opacity 160ms ease;
}
.wpwd-job-image-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 180ms ease;
}
.wpwd-job-image-preview.is-ready img {
	opacity: 1;
}
.wpwd-job-image-preview.is-uploading .wpwd-job-image-preview__frame::after {
	opacity: 1;
}
.wpwd-job-image-spinner {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: none;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid rgba(255, 255, 255, 0.58);
	border-top-color: #0f9d94;
	border-radius: 50%;
	animation: wpwd-job-image-spin 700ms linear infinite;
}
.wpwd-job-image-preview.is-loading .wpwd-job-image-spinner,
.wpwd-job-image-preview.is-uploading .wpwd-job-image-spinner {
	display: block;
}
.wpwd-job-image-remove,
.wpwd-job-existing-remove {
	position: absolute;
	z-index: 3;
	top: 7px;
	right: 7px;
	display: none;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.78);
	color: #fff;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.24);
	transition: background 150ms ease, transform 150ms ease;
}
.wpwd-job-image-preview.is-ready:not(.is-uploading) .wpwd-job-image-remove,
.wpwd-job-image-preview.is-ready:not(.is-uploading) .wpwd-job-existing-remove {
	display: grid;
}
.wpwd-job-image-remove:hover,
.wpwd-job-existing-remove:hover {
	background: #dc2626;
	transform: scale(1.06);
}
.wpwd-job-image-drag {
	position: absolute;
	z-index: 2;
	bottom: 7px;
	left: 7px;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.68);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1;
	pointer-events: none;
}
.wpwd-job-image-preview figcaption {
	margin-top: 7px;
	overflow: hidden;
	color: var(--wpwd-ui-muted);
	font-size: 11px;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@keyframes wpwd-job-image-spin {
	to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
	.wpwd-job-image-meta {
		align-items: flex-start;
		flex-direction: column;
	}
	.wpwd-job-image-previews,
	.wpwd-job-existing-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.wpwd-job-existing-images__head {
		align-items: flex-start;
		flex-direction: column;
	}
}
.wpwd-job-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 18px;
}
.wpwd-job-image {
	margin: 0;
}
.wpwd-job-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}
.wpwd-job-image figcaption {
	margin-top: 6px;
	overflow-wrap: anywhere;
}

/* Quotation form line items */
#wpwd-quot-items-wrap {
	margin-bottom: 1.5rem;
}

.wpwd-quot-item {
	background: var(--wpwd-form-bg, #fff);
	border: 1px solid var(--wpwd-ui-border, #e5e7eb);
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
	position: relative;
}

.wpwd-quot-item .wpwd-quot-remove-item {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}

.wpwd-quot-price-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 1.75rem;
}

.wpwd-quot-price {
	font-weight: 600;
	color: var(--wpwd-primary, #059669);
	font-size: 1.125rem;
}

#wpwd-quot-add-item {
	margin-top: 1rem;
}

#wpwd-quot-total-display {
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wpwd-primary, #059669);
	background: var(--wpwd-ui-subtle, #f9fafb);
	padding: 0.75rem;
	border-radius: 4px;
	border: 1px solid var(--wpwd-ui-border, #e5e7eb);
}

/* Customer picker with button */
.wpwd-field-withbtn {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.wpwd-field-withbtn .wpwd-field {
	flex: 1;
}

/* Three-column grid for product details */
.wpwd-um-grid--3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 768px) {
	.wpwd-um-grid--3col {
		grid-template-columns: 1fr;
	}
}

/* Two-column grid for width/height and quantity/price */
.wpwd-um-grid--2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (max-width: 768px) {
	.wpwd-um-grid--2col {
		grid-template-columns: 1fr;
	}
}

/* Quotation items table */
.wpwd-quot-items-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: 0.95rem;
}

.wpwd-quot-items-table th,
.wpwd-quot-items-table td {
	padding: 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--wpwd-ui-border, #e5e7eb);
}

.wpwd-quot-items-table th {
	font-weight: 600;
	background: var(--wpwd-ui-subtle, #f9fafb);
	color: var(--wpwd-ui-dark, #1f2937);
}

.wpwd-quot-items-table tbody tr:hover {
	background: var(--wpwd-ui-hover, #f3f4f6);
}

/* Frame Design async select with images */
.wpwd-select-option--with-image,
.wpwd-select-item--with-image {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}

.wpwd-select-option--with-image .wpwd-select-text {
	flex: 1;
	min-width: 0;
}

.wpwd-select-option--with-image .wpwd-select-image {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
	border: 1px solid var(--wpwd-border, #ddd);
}

.wpwd-select-item--with-image .wpwd-select-image--small {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--wpwd-border, #ddd);
}

/* Ensure selected item stays on one line */
.wpwd-select-item--with-image {
	white-space: nowrap;
	overflow: hidden;
}

.wpwd-select-item--with-image span {
	overflow: hidden;
	text-overflow: ellipsis;
}