/* =========================================================================
   Prime Valeting — main stylesheet
   Dark, luxurious car-care look: black base with a soft smoke/mist backdrop
   (nothing sharp), brushed-silver type, "wet-look" cyan accent.
   Plan cards styled after console store pricing.
   ========================================================================= */

:root {
	--pv-bg: #000;
	--pv-bg-soft: #101318;
	--pv-panel: #14181f;
	--pv-panel-2: #1a1f28;
	--pv-border: #262c36;
	--pv-border-soft: #1e242e;
	--pv-text: #eef1f4;
	--pv-muted: #9aa3ad;
	--pv-silver: #d7dbe0;
	--pv-silver-grad: linear-gradient(135deg, #f7f8f9 0%, #cfd3d9 45%, #aab0b8 100%);
	--pv-accent: #19b5fe;
	--pv-accent-2: #0e86d4;
	--pv-accent-grad: linear-gradient(135deg, #2fc6ff 0%, #0e86d4 100%);
	--pv-danger: #ff5c5c;
	--pv-radius: 14px;
	--pv-radius-sm: 9px;
	--pv-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
	--pv-font: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---- Base ------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/*
 * Sticky footer.
 *
 * Short pages — My Account, Book My Wash — used to end well above the fold, and
 * because the smoke backdrop is fixed to the viewport it carried on painting
 * below the footer, leaving a band underneath that matched nothing above it.
 * Growing .pv-main pins the footer to the bottom of the viewport on those pages
 * while leaving long pages exactly as they were.
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--pv-bg);
	color: var(--pv-text);
	font-family: var(--pv-font);
	font-size: 16px;
	line-height: 1.6;
}

/* WordPress pushes the page down by the admin bar's height; without matching it
   here, 100vh would overflow by exactly that much and add a stray scrollbar. */
body.admin-bar {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
	}
}

/*
 * Smoke backdrop.
 *
 * Source: Pascal Meier, Unsplash (1uVCTVSn-2o), 5184x3456. Resampled to
 * 2880x1920 and encoded as WebP q84 (166KB) in assets/img/. That is enough to
 * render 1:1 at 1440p and to DOWNSCALE on anything smaller, which is the whole
 * point: the 612x222 file this replaced had to be blown up 4.9x at 1080p and
 * arrived as visible blocks.
 *
 * Shipped with the theme rather than uploaded. The rule here used to hard-code
 * /wp-content/uploads/2026/07/..., a root-relative path to one media item that
 * would have broken silently if the file were deleted, regenerated, or the site
 * moved into a subdirectory. This URL is relative to this stylesheet.
 *
 * Pinned to the viewport, not the document. Stretched to page height the bright
 * band landed somewhere different on every page - high on a short page like
 * Book My Wash, low on a long one - which made text legibility inconsistent
 * from page to page.
 *
 * The scrim is not decoration. This photograph is far brighter than the one it
 * replaced: measured across the band where the page puts its h1 and standfirst,
 * the bare image peaks at 194/255, which is white text on white smoke. The
 * gradient is heaviest at the top for that reason and eases off down the page,
 * so the plumes in the lower half keep their contrast. Delete the
 * linear-gradient layer to see the photo at full strength.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url(/wp-content/uploads/2026/09/background-scaled.jpg);
	/* One value covers both layers - the list is repeated to match. */
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	opacity: 0.6;
}

/* Upper atmosphere — big soft sweeps so the black above isn't flat:
   a broad silver drift, a warm wisp high-right, and cool haze top-left. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(85% 60% at 68% 38%, rgba(195, 203, 213, 0.055), transparent 65%),
		radial-gradient(48% 58% at 78% 6%, rgba(198, 150, 92, 0.06), transparent 70%),
		radial-gradient(70% 52% at 28% 18%, rgba(205, 212, 222, 0.045), transparent 70%);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--pv-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: #6fd4ff;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--pv-text);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin: 0 0 0.6em;
}

.pv-container {
	width: min(1180px, 100% - 2.5rem);
	margin-inline: auto;
}

.pv-section {
	padding: 3.5rem 0 4.5rem;
}

/* flex-grow takes up whatever is left over, which is what holds the footer down. */
.pv-main {
	flex: 1 0 auto;
	min-height: 62vh;
}

.pv-panel {
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	padding: 1.75rem 2rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	background: var(--pv-accent);
	color: #04121c;
	padding: 0.5rem 1rem;
	border-radius: 6px;
}

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

.pv-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--pv-silver-grad);
	color: #10141a;
	border: 0;
	border-radius: var(--pv-radius-sm);
	padding: 0.8rem 1.7rem;
	font-family: var(--pv-font);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pv-btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #10141a;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.pv-btn-accent,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
	background: var(--pv-accent-grad);
	color: #04121c;
	box-shadow: 0 6px 20px rgba(20, 150, 220, 0.35);
}

.pv-btn-outline {
	background: transparent;
	color: var(--pv-silver);
	border: 1px solid var(--pv-border);
}

.pv-btn-ghost {
	background: transparent;
	color: var(--pv-muted);
}

.pv-btn-ghost:hover {
	color: var(--pv-text);
	box-shadow: none;
}

.pv-btn-sm {
	padding: 0.5rem 1.05rem;
	font-size: 0.78rem;
}

.pv-btn-block {
	width: 100%;
}

/* ---- Header ----------------------------------------------------------- */

/*
 * Deliberately no z-index here.
 *
 * The logo ships as white artwork on a black box and is dropped into the page
 * with mix-blend-mode: screen. Blending is confined to the nearest ancestor
 * stacking context, so a z-index on the header isolated the logo against the
 * header's own (transparent) backdrop — the blend had nothing to work against
 * and the black box stayed visible. The big logo beside the sign-in form has
 * always looked right for exactly this reason: .pv-auth-brand is position:
 * relative with z-index auto, so it creates no stacking context.
 *
 * The mobile nav drop-down carries the stacking order instead — see the 820px
 * block near the end of this file.
 */
.pv-header {
	/* A flex child of body now — never let it be squeezed. */
	flex: none;
	position: relative;
	top: 0;
	/* Translucent scrim so the smoke canvas runs uninterrupted behind it. */
	/* background: linear-gradient(to bottom, rgba(2, 3, 5, 0.88), rgba(2, 3, 5, 0.5));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px); */
	background: transparent;
}

/* Bottom hairline that fades at both ends — nothing sharp. */
.pv-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--pv-border-soft) 18%, var(--pv-border-soft) 82%, transparent);
}

.pv-header .custom-logo-link{
  width:20%;
}

.pv-header-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
}

.pv-header-actions .pv-btn:hover{
	color: #7fd6ff;
}

.pv-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--pv-silver);
}

.pv-brand:hover {
	color: #ffffff;
}

/*
 * Matched on .pv-header, not .pv-brand — and that distinction is the whole bug.
 *
 * the_custom_logo() prints its own <a class="custom-logo-link">, which header.php
 * nests inside <a class="pv-brand">. Nested anchors are invalid HTML, so the
 * parser closes .pv-brand early and the <img> is reparented as its sibling. The
 * old `.pv-brand img` selector therefore matched nothing, and the logo kept its
 * black box — while the identical rule on the sign-in page worked, because
 * .pv-auth-brand-inner is a <div> and nests perfectly legally.
 *
 * Note the absent max-height: the old rule carried one, but since it never
 * applied, adding it now would shrink the logo rather than restore anything.
 * Sizing still comes from .pv-header .custom-logo-link above.
 */
.pv-header .custom-logo,
.pv-brand img {
	width: auto;
	/* Logo ships on a black box; screen-blend drops it into the dark backdrop. */
	mix-blend-mode: screen;
}

.pv-logo-mark {
	width: 74px;
	height: auto;
	color: inherit;
	flex-shrink: 0;
}

.pv-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.pv-brand-name {
	font-size: 1.28rem;
	font-weight: 800;
	letter-spacing: 0.42em;
	background: var(--pv-silver-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.pv-brand-sub {
	display: inline-flex;
	align-items: center;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.55em;
	text-transform: uppercase;
	color: var(--pv-muted);
}

/* "— VALETING —" side dashes, matching the client logo */
.pv-brand-sub::before,
.pv-brand-sub::after {
	content: "";
	flex: none;
	width: 1.2em;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.pv-brand-sub::before {
	margin-right: 0.6em;
}

.pv-brand-sub::after {
	margin-left: 0.08em; /* trailing letter-spacing already adds a gap */
}

.pv-nav {
	margin-left: auto;
}

.pv-nav-list {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-nav-list a {
	color: var(--pv-muted);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.pv-nav-list a:hover,
.pv-nav-list .current-menu-item > a {
	color: var(--pv-text);
}

.pv-header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pv-icon-link {
	position: relative;
	display: inline-flex;
	color: var(--pv-silver);
	padding: 0.35rem;
}

.pv-icon-link svg {
	width: 24px;
	height: 24px;
}

.pv-cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pv-accent);
	color: #04121c;
	font-size: 0.68rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0 4px;
}

/* Sign Out at the foot of the mobile drop-down; hidden until the nav collapses. */
.pv-nav-actions {
	display: none;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--pv-border-soft);
}

.pv-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	margin-left: auto;
	flex: none;
}

.pv-nav-toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--pv-silver);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.pv-nav-toggle[aria-expanded="true"] .pv-nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pv-nav-toggle[aria-expanded="true"] .pv-nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.pv-nav-toggle[aria-expanded="true"] .pv-nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Footer ----------------------------------------------------------- */

/*
 * The smoke backdrop is at its brightest exactly where the footer lands, and a
 * transparent footer left grey text sitting on near-white mist — unreadable, and
 * differently unreadable on every page. A dark scrim rises out of the page
 * bottom instead: the mist still fades into the top of it, but every line below
 * has the same near-black ground under it.
 */
.pv-footer {
	/* A flex child of body now — never let it be squeezed. */
	flex: none;
	position: relative;
	margin-top: 3rem;
	padding: 2.25rem 0;
	background: linear-gradient(
		to top,
		rgba(5, 7, 10, 0.97) 0%,
		rgba(5, 7, 10, 0.94) 45%,
		rgba(5, 7, 10, 0.72) 78%,
		rgba(5, 7, 10, 0) 100%
	);
}

/* Top hairline that fades at both ends — nothing sharp. */
.pv-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--pv-border-soft) 18%, var(--pv-border-soft) 82%, transparent);
}



/* One row: brand left, small print right. */
.pv-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
}

.pv-footer  .pv-footer-inner{
	width: 100%;
    padding: 0 30px;
}
.pv-header .pv-header-inner{
	width: 100%;
	padding-right: 20px;
}
.pv-header .pv-header-inner .custom-logo-link img{
	width: 261px ;
}

.pv-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--pv-silver);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pv-footer-brand .pv-logo-mark {
	width: 56px;
}

.pv-footer-meta {
	display: grid;
	gap: 0.35rem;
	text-align: right;
}

.pv-footer-note {
	/* Was #6b7480 — dark grey on bright mist, effectively invisible. */
	margin: 0;
	color: #9aa3ad;
	font-size: 0.8rem;
}

/* Address, phone, email and hours on one dot-separated line. */
.pv-footer-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0;
	color: #8b949f;
	font-size: 0.8rem;
}

.pv-footer-contact a {
	color: inherit;
}

.pv-footer-contact a:hover,
.pv-footer-contact a:focus-visible {
	color: var(--pv-text);
}

.pv-footer-sep {
	opacity: 0.45;
}

/* ---- Auth (Sign In / Register) ---------------------------------------- */

.pv-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: calc(100vh - 72px);
	min-height: 70vh;
}

.pv-auth-brand {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Transparent so the body smoke shows through; soft wisps behind the logo. */
	background-image:
		radial-gradient(46% 58% at 50% 42%, rgba(216, 222, 230, 0.07), transparent 72%),
		radial-gradient(26% 40% at 56% 24%, rgba(198, 150, 92, 0.05), transparent 72%);
	padding: 3rem 2rem;
}

/* Column divider that fades at both ends — nothing sharp. */
.pv-auth-brand::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--pv-border) 35%, var(--pv-border) 65%, transparent);
}

.pv-auth-brand-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--pv-silver);
}

.pv-auth-brand-inner .pv-logo-mark {
	width: 240px;
	margin-bottom: 1.25rem;
}

.pv-auth-brand-inner img,
.pv-auth-brand-inner .custom-logo {
	/* max-width: 320px; */
	margin-bottom: 1.5rem;
	/* Logo PNG ships on a black box; screen-blend drops it into the dark backdrop. */
	mix-blend-mode: screen;
}

.pv-auth-brand-name {
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: 0.5em;
	margin-right: -0.5em; /* optically recentre tracked text */
	background: var(--pv-silver-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.pv-auth-brand-sub {
	display: inline-flex;
	align-items: center;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.85em;
	text-transform: uppercase;
	color: var(--pv-muted);
	margin-top: 0.5rem;
}

/* "— VALETING —" side dashes, matching the client logo */
.pv-auth-brand-sub::before,
.pv-auth-brand-sub::after {
	content: "";
	flex: none;
	width: 1.7em;
	height: 2px;
	background: currentColor;
	opacity: 0.8;
}

.pv-auth-brand-sub::before {
	margin-right: 0.9em;
}

.pv-auth-brand-sub::after {
	margin-left: 0.08em; /* trailing letter-spacing already adds a gap */
}

.pv-auth-tagline {
	color: #FFFFFF;
	font-size: 1rem;
	letter-spacing: 0.02em;
	/* margin-top: 2.25rem; */
}

.pv-auth-form-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.5rem 1.5rem;
}

.pv-auth-card {
	width: min(460px, 100%);
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	box-shadow: var(--pv-shadow);
	padding: 2.25rem 2.25rem 2.5rem;
}

.pv-auth-title {
	font-size: 1.35rem;
	margin-bottom: 1.25rem;
}

.pv-auth-hint {
	color: var(--pv-muted);
	font-size: 0.85rem;
}

.pv-tab-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--pv-bg-soft);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	padding: 4px;
	margin-bottom: 1.75rem;
}

.pv-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: var(--pv-muted);
	font-family: var(--pv-font);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0.65rem 0.5rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pv-tab.is-active {
	background: var(--pv-accent-grad);
	color: #04121c;
}

.pv-tab-panel[hidden] {
	display: none;
}

/* ---- Forms (auth + WooCommerce global) -------------------------------- */

.woocommerce form .form-row {
	margin-bottom: 1.1rem;
	padding: 0;
}

.pv-auth-card label,
.woocommerce form .form-row label {
	display: block;
	color: var(--pv-muted);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 0.45rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	background: var(--pv-bg-soft);
	border: 1px solid var(--pv-border);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text);
	font-family: var(--pv-font);
	font-size: 0.95rem;
	padding: 0.78rem 1rem;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 3px rgba(25, 181, 254, 0.18);
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	accent-color: var(--pv-accent);
}

/*
 * Show / hide password.
 *
 * The button is parked inside the input rather than beside it, so the field
 * keeps its full width and the row height doesn't change. Both icons are in the
 * markup and aria-pressed decides which shows — see pv_password_toggle().
 */
.pv-password-field {
	position: relative;
	display: block;
}

/*
 * Out-specifics `.woocommerce form .form-row input.input-text`, which sets the
 * padding shorthand and would otherwise close the gap the button sits in.
 */
.pv-password-field input.input-text,
.woocommerce form .form-row .pv-password-field input.input-text {
	padding-right: 3rem;
}

.pv-password-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 100%;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0 var(--pv-radius-sm) var(--pv-radius-sm) 0;
	color: var(--pv-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}

.pv-password-toggle:hover,
.pv-password-toggle:focus-visible {
	color: var(--pv-accent);
}

.pv-password-icon {
	width: 20px;
	height: 20px;
}

.pv-password-toggle .pv-password-icon-hide,
.pv-password-toggle[aria-pressed="true"] .pv-password-icon-show {
	display: none;
}

.pv-password-toggle[aria-pressed="true"] .pv-password-icon-hide {
	display: block;
}

.pv-form-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.pv-form-meta label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
}

.pv-lost-password {
	font-size: 0.82rem;
}

.required {
	color: var(--pv-accent);
	text-decoration: none;
}

/* ---- Registration: approval barrier ----------------------------------- */

/* Two fields side by side (first/last name, phone/postcode). */
.pv-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.pv-form-grid .form-row {
	margin-bottom: 1.1rem;
	min-width: 0;
}

/* "Accounts are approved by our team" — sets expectations before they type. */
.pv-gate-note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: rgba(25, 181, 254, 0.07);
	border: 1px solid rgba(25, 181, 254, 0.28);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-muted);
	font-size: 0.84rem;
	line-height: 1.55;
	padding: 0.85rem 1rem;
	margin-bottom: 1.5rem;
}

.pv-gate-note strong {
	color: var(--pv-text);
	display: block;
}

.pv-gate-note-icon {
	color: var(--pv-accent);
	flex: 0 0 auto;
	line-height: 0;
	margin-top: 0.15rem;
}

.pv-gate-note-icon svg {
	width: 20px;
	height: 20px;
}

/* Confirmation panel shown in place of the forms after applying. */
.pv-auth-result {
	text-align: center;
}

.pv-auth-result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(25, 181, 254, 0.12);
	border: 1px solid rgba(25, 181, 254, 0.4);
	color: var(--pv-accent);
	margin-bottom: 1.1rem;
}

.pv-auth-result-icon svg {
	width: 26px;
	height: 26px;
}

.pv-auth-result .pv-auth-title {
	margin-bottom: 0.6rem;
}

.pv-auth-result-lead {
	color: var(--pv-silver);
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}

.pv-auth-steps {
	counter-reset: pv-step;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	text-align: left;
}

.pv-auth-steps li {
	position: relative;
	color: var(--pv-muted);
	font-size: 0.87rem;
	line-height: 1.55;
	padding: 0 0 0 2.25rem;
	margin-bottom: 0.85rem;
}

.pv-auth-steps li::before {
	counter-increment: pv-step;
	content: counter(pv-step);
	position: absolute;
	left: 0;
	top: 0.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.55rem;
	height: 1.55rem;
	border: 1px solid var(--pv-border);
	border-radius: 50%;
	background: var(--pv-bg-soft);
	color: var(--pv-silver);
	font-size: 0.75rem;
	font-weight: 700;
}

.pv-auth-result-actions {
	margin-top: 1.5rem;
}

@media (max-width: 520px) {
	.pv-form-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Plans page (PS-style cards) -------------------------------------- */

.pv-plans-head {
	text-align: center;
	margin-bottom: 2.75rem;
}

.pv-plans-title {
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	font-weight: 800;
	letter-spacing: 0.04em;
}

.pv-plans-sub {
	color: var(--pv-muted);
	font-size: 1rem;
	max-width: 560px;
	margin: 0 auto;
}

.pv-plans-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 420px));
	justify-content: center;
	gap: 2rem;
	align-items: stretch;
}

.pv-plans-count-1 {
	grid-template-columns: minmax(0, 420px);
}

.pv-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pv-panel);
	border: 2px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	overflow: hidden;
	box-shadow: var(--pv-shadow);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
	outline: none;
}

.pv-plan:hover,
.pv-plan:focus-visible {
	transform: translateY(-5px);
}

.pv-plan.is-selected {
	border-color: #f0f2f4;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 24px 60px rgba(0, 0, 0, 0.6);
}

.pv-plan--essential.is-selected {
	border-color: var(--pv-accent);
	box-shadow: 0 0 0 1px rgba(25, 181, 254, 0.45), 0 24px 60px rgba(0, 0, 0, 0.6);
}

.pv-plan-band {
	padding: 1rem 1.5rem;
	text-align: center;
}

.pv-plan--premium .pv-plan-band {
	background: var(--pv-silver-grad);
}

.pv-plan--essential .pv-plan-band {
	background: var(--pv-accent-grad);
}

.pv-plan-name {
	color: #0d1116;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.pv-plan-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.75rem 1.75rem 2rem;
	flex: 1;
}

.pv-plan-chip {
	display: inline-block;
	border: 1px solid var(--pv-border);
	border-radius: 6px;
	color: var(--pv-silver);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.35rem 1rem;
	margin-bottom: 1.4rem;
}

.pv-plan--premium .pv-plan-chip {
	border-color: rgba(215, 219, 224, 0.5);
}

.pv-plan--essential .pv-plan-chip {
	border-color: rgba(25, 181, 254, 0.55);
	color: #7fd6ff;
}

.pv-plan-cta-label {
	color: var(--pv-muted);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	margin: 0 0 0.35rem;
}

.pv-plan-price {
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--pv-text);
	margin-bottom: 1.2rem;
}

.pv-plan-price .woocommerce-Price-amount {
	color: var(--pv-text);
}

.pv-plan-price .subscription-details,
.pv-plan-price small,
.pv-plan-price .from {
	display: block;
	color: var(--pv-muted);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-top: 0.2rem;
}

.pv-plan-price del {
	color: #5f6873;
	font-size: 1.1rem;
	margin-right: 0.4rem;
}

.pv-plan-price ins {
	text-decoration: none;
}

.pv-plan-features {
	color: var(--pv-muted);
	font-size: 0.9rem;
	text-align: left;
	width: 100%;
	margin-bottom: 1.5rem;
}

.pv-plan-features ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-plan-features li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.7rem;
	border-bottom: 1px solid var(--pv-border-soft);
}

.pv-plan-features li:last-child {
	border-bottom: 0;
}

.pv-plan-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72rem;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%2304121c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-6.5"/></svg>') center / 10px no-repeat,
		var(--pv-accent);
}

.pv-plan--premium .pv-plan-features li::before {
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%230d1116" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-6.5"/></svg>') center / 10px no-repeat,
		var(--pv-silver);
}

.pv-plan-btn {
	width: 100%;
	margin-top: auto;
}

.pv-plan--premium .pv-plan-btn {
	background: var(--pv-silver-grad);
}

.pv-plan--essential .pv-plan-btn {
	background: var(--pv-accent-grad);
	color: #04121c;
}

.pv-plan-more {
	display: inline-block;
	color: var(--pv-muted);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	margin-top: 0.9rem;
}

.pv-plan-more:hover {
	color: var(--pv-text);
}

/*
 * This sentence lands on the brightest part of the smoke. A soft radial scrim
 * gives it a dark ground that fades out before it reaches an edge, so the text
 * is readable without becoming a box on the page.
 */
.pv-plans-note {
	max-width: 820px;
	margin: 2.75rem auto 0;
	/* Generous side padding gives the halo room to reach zero before the box
	   ends. A radius wider than the box leaves the gradient still visible at the
	   edge, which is what made this read as a faint rectangle. */
	padding: 1.35rem 3rem;
	background: radial-gradient(ellipse closest-side at 50% 50%, rgba(5, 7, 10, 0.92), rgba(5, 7, 10, 0) 100%);
	text-align: center;
	color: var(--pv-silver);
	font-size: 0.95rem;
	line-height: 1.75;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.pv-plans-empty {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.pv-admin-hint {
	color: var(--pv-muted);
	font-size: 0.85rem;
}

/* ---- WooCommerce dark-theme overrides --------------------------------- */

.pv-woo {
	color: var(--pv-text);
}

/*
 * Notices.
 *
 * WooCommerce lays these out with a glyph from its own icon font absolutely
 * positioned into 3.5em of left padding, and floats any button in them to the
 * right. Neither survives a phone: the glyph rendered as an empty tofu box, and
 * the floated button sat on top of the sentence explaining it (this is the
 * "Confirm email address" panel on the Orders tab). Flex row instead — text and
 * button side by side while there is room, stacked when there isn't.
 */
/*
 * The leading `body` on each of these is doing one job: WooCommerce declares the
 * same properties at the same specificity, and which of us wins would otherwise
 * come down to enqueue order. It happens to favour the theme today; a plugin that
 * re-registers core's stylesheet later would silently flip it back.
 */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	background: var(--pv-panel-2);
	border-top: 3px solid var(--pv-accent);
	color: var(--pv-text);
	border-radius: var(--pv-radius-sm);
	font-size: 0.92rem;
	line-height: 1.55;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	word-wrap: break-word;
}

body .woocommerce-error {
	border-top-color: var(--pv-danger);
}

/* The icon-font glyph and the clearfix that went with the float, both now moot. */
body .woocommerce-message::before,
body .woocommerce-message::after,
body .woocommerce-info::before,
body .woocommerce-info::after,
body .woocommerce-error::before,
body .woocommerce-error::after {
	display: none;
}

/*
 * WooCommerce puts the button first in the markup and floats it right, so the
 * sentence reads before it. `order` keeps that reading order in the flex row
 * while leaving the button on the right, and lets it drop to its own line
 * instead of overlapping when the two no longer fit side by side.
 */
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
	float: none;
	order: 2;
	margin-left: auto;
	flex: none;
}

/* An error list keeps its own bullets-free layout; the wrapper supplies spacing. */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	flex: 1 1 100%;
}

.woocommerce ul.products li.product {
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	padding: 1rem 1rem 1.4rem;
	text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--pv-text);
	font-size: 1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--pv-accent);
	font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: var(--pv-panel);
	border-color: var(--pv-border-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--pv-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--pv-panel-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--pv-text);
}

.woocommerce div.product .woocommerce-tabs .panel {
	background: transparent;
}

.woocommerce table.shop_table {
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	color: var(--pv-text);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--pv-border-soft);
	color: var(--pv-text);
}

.woocommerce table.shop_table thead th {
	color: var(--pv-muted);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--pv-panel);
	border-radius: var(--pv-radius);
	color: var(--pv-text);
}
.woocommerce-cart .wc-block-grid__products{
	justify-content: center;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--pv-panel-2);
	color: var(--pv-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--pv-panel-2);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--pv-border-soft);
}

/* ---- WooCommerce pages inside the page template -----------------------
 *
 * Cart, Checkout, Order received and My Account are ordinary WordPress pages as
 * far as template loading is concerned — WC_Template_Loader only diverts product
 * and archive views, so woocommerce.php never sees them. They render through
 * page.php, which means they arrive wrapped in .pv-panel / .pv-entry-content and
 * inherit that wrapper's muted body colour and its desktop padding.
 * ---------------------------------------------------------------------- */

.woocommerce-cart .pv-entry-content,
.woocommerce-checkout .pv-entry-content,
.woocommerce-account .pv-entry-content,
.woocommerce-order-received .pv-entry-content {
	/* .pv-entry-content is styled for blog copy; these pages are UI, not prose. */
	color: var(--pv-muted);
	min-width: 0;
}

/* ---- My Account -------------------------------------------------------- */

/*
 * Undo WooCommerce's own two-column layout before laying one out here.
 *
 * woocommerce-layout.css floats these into a 30% / 68% split. The float is
 * harmless — a grid item ignores it — but the width is not: it made the tab list
 * 30% of the column it had just been given, about 70px, with every label clipped
 * to "Dashbo" and "Accoun Details". Percentages resolve against whatever box the
 * element ends up in, so a stale float layout does real damage inside a new one.
 *
 * Three classes to core's two, so this holds whichever stylesheet is enqueued
 * last rather than relying on that order.
 */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/*
 * Space between the tabs and the panel they open.
 *
 * This margin is the floor: it holds at any width, whatever wraps the pair —
 * including between 768px and 900px, where core's smallscreen reset has stopped
 * applying but the grid below has not yet started.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-bottom: 1.75rem;
}

/*
 * Two columns on a wide screen.
 *
 * Keyed off the wrapper actually holding the nav rather than a fixed path to it,
 * because that wrapper is the shortcode's own <div class="woocommerce"> on a
 * classic account page but sits a level deeper when the page was built with the
 * Classic Shortcode block. Kept in its own rule: a browser without :has() drops
 * the whole block and falls back to the stack above, which is a layout rather
 * than a mess.
 */
@media (min-width: 900px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 230px minmax(0, 1fr);
		gap: 2.25rem;
		align-items: start;
	}

	/* Notices and anything else the endpoint prints run the full width. */
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
		grid-column: 1 / 2;
		margin-bottom: 0;
		position: sticky;
		top: 1.5rem;
	}

	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		grid-column: 2 / 3;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--pv-border-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.8rem 1.2rem;
	color: var(--pv-muted);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--pv-panel-2);
	color: var(--pv-text);
}

/* The tab you are on, marked on the edge the content sits against. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	box-shadow: inset 3px 0 0 var(--pv-accent);
}

/* ---- My Account: the panel each tab opens ------------------------------ */

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content > p,
.woocommerce-MyAccount-content > div > p {
	margin-top: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content legend {
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	margin: 2rem 0 0.9rem;
}

.woocommerce-MyAccount-content > :first-child,
.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child {
	margin-top: 0;
}

/* Tables — orders, subscriptions, the wash history — read as panels. */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.my_account_orders {
	width: 100%;
	margin: 0 0 1.5rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	padding: 0.85rem 1rem;
	vertical-align: middle;
}

.woocommerce-MyAccount-content table.shop_table .button {
	margin: 0.15rem 0.3rem 0.15rem 0;
}

/* Addresses: two cards side by side while there is room for two. */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}

/*
 * This wrapper also carries core's `col2-set`, which clearfixes it with two
 * `display: table` pseudo-elements — as grid children those are two empty cells,
 * and they push the second address card onto a row of its own.
 */
.woocommerce-account .woocommerce .woocommerce-Addresses::before,
.woocommerce-account .woocommerce .woocommerce-Addresses::after {
	display: none;
}

/* col-1 / col-2 carry a 48% float from core — see the account columns above. */
.woocommerce-account .woocommerce .woocommerce-Addresses .woocommerce-Address {
	width: auto;
	float: none;
	background: var(--pv-panel-2);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	padding: 1.25rem 1.35rem;
}

.woocommerce-Addresses .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

/*
 * WooCommerce clearfixes this header for the floats it puts inside it, and a
 * `display: table` pseudo-element is a flex item like any other — the leading one
 * was taking the start of the row and pushing the address title 40px in from the
 * edge it should sit on. Out-specifies the core rule by an element, since core's
 * stylesheet is enqueued after the theme's and would otherwise win the tie.
 */
.woocommerce-account .woocommerce-Addresses header.woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Addresses header.woocommerce-Address-title::after {
	display: none;
}

.woocommerce-Addresses .woocommerce-Address-title h2,
.woocommerce-Addresses .woocommerce-Address-title h3 {
	margin: 0;
}

.woocommerce-Addresses address {
	color: var(--pv-muted);
	font-style: normal;
	line-height: 1.7;
}

/*
 * Account details / address forms: the fields get room to breathe.
 *
 * Core floats these two side by side at 47% and never undoes it on a phone, so
 * first and last name stayed in two cramped columns down to the narrowest screen.
 * Stacked by default, paired again once there is width for a pair. (`body` for
 * the same tie-break as the notices above — core's rule is the same weight.)
 */
body .woocommerce-MyAccount-content form .form-row-first,
body .woocommerce-MyAccount-content form .form-row-last {
	width: 100%;
	float: none;
	margin-right: 0;
}

@media (min-width: 620px) {
	body .woocommerce-MyAccount-content form .form-row-first,
	body .woocommerce-MyAccount-content form .form-row-last {
		width: calc(50% - 0.55rem);
		display: inline-block;
		vertical-align: top;
	}

	body .woocommerce-MyAccount-content form .form-row-first {
		margin-right: 1rem;
	}
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	padding: 1.25rem 1.35rem;
	margin: 2rem 0 1.5rem;
}

.woocommerce-MyAccount-content fieldset legend {
	padding: 0 0.5rem;
	margin: 0;
}

.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"] {
	margin-top: 0.5rem;
}

/* Empty tabs ("No order has been made yet") shouldn't read as a broken page. */
.woocommerce-MyAccount-content .woocommerce-info:only-child {
	margin-bottom: 0;
}

/*
 * Stacked tables on a phone.
 *
 * Below 768px WooCommerce drops the header row and reprints each heading in
 * front of its cell from data-title, which leaves a single unbroken column of
 * label-and-value with no telling where one order ends and the next begins —
 * and the striping it uses to separate them is black at 2.5% opacity, invisible
 * on a dark theme. One card per row, with the label and the value at opposite
 * ends of each line, says the same thing legibly.
 *
 * The extra `tbody` here is load-bearing: woocommerce-smallscreen.css is
 * enqueued after the theme, so on equal specificity it would win.
 */
@media (max-width: 768px) {
	/* Each row is its own card now, so the table's frame would only double them. */
	.pv-entry-content table.shop_table_responsive,
	.pv-woo table.shop_table_responsive {
		background: none;
		border: 0;
		border-radius: 0;
	}

	.pv-entry-content table.shop_table_responsive tbody tr,
	.pv-woo table.shop_table_responsive tbody tr {
		display: block;
		background: var(--pv-panel-2);
		border: 1px solid var(--pv-border-soft);
		border-radius: var(--pv-radius-sm);
		padding: 0.25rem 0.95rem;
		margin-bottom: 0.85rem;
	}

	/*
	 * Left as blocks with WooCommerce's own floated label rather than made into
	 * flex rows: a cell like "£20.00 for 1 item" is an element followed by a bare
	 * text node, and under flex those become two separate items that
	 * space-between then pushes to opposite ends of the line.
	 */
	.pv-entry-content table.shop_table_responsive tbody tr td,
	.pv-woo table.shop_table_responsive tbody tr td {
		background: none;
		border-top: 0;
		padding: 0.55rem 0;
	}

	.pv-entry-content table.shop_table_responsive tbody tr td + td,
	.pv-woo table.shop_table_responsive tbody tr td + td {
		border-top: 1px solid var(--pv-border-soft);
	}

	.pv-entry-content table.shop_table_responsive tbody tr td::before,
	.pv-woo table.shop_table_responsive tbody tr td::before {
		color: var(--pv-muted);
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		/* Woo prints these mid-cased ("Order", "Total"); small caps reads as a label. */
		text-transform: uppercase;
	}

	/* The actions cell holds buttons, not a value — it gets the whole line. */
	.pv-entry-content table.shop_table_responsive tbody tr td.order-actions,
	.pv-woo table.shop_table_responsive tbody tr td.order-actions {
		display: block;
		padding-bottom: 0.35rem;
	}
}

/* ---- Order received ---------------------------------------------------- */

/*
 * The order summary.
 *
 * WooCommerce floats each item left with 2em of margin and a dashed rule down its
 * right-hand edge — a row that only works while all of it fits on one line. On a
 * phone every item wrapped onto its own line and kept the rule, so the page read
 * as a ragged column with stray dashed strokes hanging off it. A grid that packs
 * as many columns as fit gives one even set of cells at any width; the 1px gap
 * over a panel-coloured backdrop draws the dividers, in both directions, without
 * any of them ending up on an outside edge.
 */
.woocommerce ul.order_details,
.woocommerce-order ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	list-style: none;
	background: var(--pv-border-soft);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	overflow: hidden;
	margin: 0 0 2.5rem;
	padding: 0;
}

/* Woo's float clearfix — as grid children these would be two empty cells. */
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after {
	display: none;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: 0.9rem 1.1rem;
	border-right: 0;
	background: var(--pv-panel);
	color: var(--pv-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	word-break: break-word;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 0.3rem;
	color: var(--pv-text);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: none;
}

/*
 * The order-received heading and the sentence under it. The old 5px was set when
 * the summary below still carried WooCommerce's own 3em margin; both halves are
 * spaced from here now.
 */
.woocommerce-thankyou-order-received {
	margin: 0 0 1.75rem;
	color: var(--pv-silver);
	font-size: 1.02rem;
}

.woocommerce-order > p,
.woocommerce-order-received .woocommerce-order > p {
	margin: 0 0 1.5rem;
}

/*
 * "Next step: book your slot" — the one thing left to do after paying, sat
 * between the order summary and the receipt (see pv_thankyou_booking_prompt).
 *
 * Accent-tinted rather than another --pv-panel card: the order details below it
 * are already panels, and a fourth grey box would read as more receipt. The
 * cyan wash is the only one on the page, so the eye lands here first.
 */
.pv-next-step {
	display: flex;
	align-items: flex-start;
	gap: 1.15rem;
	margin: 0 0 2.5rem;
	padding: 1.5rem 1.6rem;
	border: 1px solid rgba(25, 181, 254, 0.32);
	border-radius: var(--pv-radius);
	background:
		linear-gradient(135deg, rgba(25, 181, 254, 0.09) 0%, rgba(25, 181, 254, 0) 60%),
		var(--pv-panel-2);
}

.pv-next-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(25, 181, 254, 0.4);
	background: rgba(25, 181, 254, 0.12);
	color: var(--pv-accent);
}

.pv-next-step-icon svg {
	width: 22px;
	height: 22px;
}

/* min-width:0 so a long line wraps instead of stretching the flex row. */
.pv-next-step-body {
	min-width: 0;
}

.pv-next-step-title {
	margin: 0 0 0.5rem;
	font-size: 1.12rem;
	line-height: 1.3;
}

.pv-next-step-lead {
	margin: 0 0 1.2rem;
	color: var(--pv-silver);
	font-size: 0.95rem;
}

.pv-next-step-note {
	margin: 0.95rem 0 0;
	color: var(--pv-muted);
	font-size: 0.82rem;
}

@media (max-width: 560px) {
	.pv-next-step {
		flex-direction: column;
		gap: 0.9rem;
		padding: 1.35rem 1.25rem;
	}

	/* Full width so the tap target spans the card rather than floating mid-row. */
	.pv-next-step-btn {
		width: 100%;
	}
}

.woocommerce-order-details .woocommerce-table--order-details{
	margin-bottom: 20px !important;
}

.woocommerce-order-details .woocommerce-orders-table--subscriptions{
	margin-top: 20px !important;
}

.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-downloads {
	display: block;
	margin-top: 2.75rem;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2,
.woocommerce-order-downloads__title {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.woocommerce-order table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: 0.85rem 1rem;
	word-break: break-word;
}

.woocommerce-order table.shop_table tfoot th {
	color: var(--pv-muted);
	font-weight: 600;
}

.woocommerce-order table.shop_table tfoot td {
	font-weight: 700;
}

/* Billing / shipping addresses under the order, side by side when they fit. */
.woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
}

/* Same `col2-set` clearfix cells and 48% float as the account addresses above. */
.woocommerce .woocommerce-customer-details .woocommerce-columns::before,
.woocommerce .woocommerce-customer-details .woocommerce-columns::after {
	display: none;
}

.woocommerce .woocommerce-customer-details .woocommerce-columns .woocommerce-column {
	width: auto;
	float: none;
	max-width: none;
}

.woocommerce-customer-details address {
	background: var(--pv-panel-2);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-muted);
	font-style: normal;
	line-height: 1.7;
	padding: 1rem 1.15rem;
}

/* ---- Cart & Checkout blocks -------------------------------------------- */

/*
 * The block Cart and Checkout size themselves from their container, and inside
 * .pv-panel on a phone that container is the viewport less the page gutter and
 * 2rem of panel padding on each side. Nothing below is decorative — it is what
 * keeps the block inside that box rather than running off the side of the screen.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-sidebar-layout {
	max-width: 100%;
}

.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	min-width: 0;
}

.wc-block-cart-items,
.wc-block-cart-items__row {
	max-width: 100%;
}

@media (max-width: 640px) {
	/*
	 * The narrow cart row is a grid of `80px 132px`, with the product cell spanning
	 * to an implicit third column and the line total auto-placed into a fourth. Four
	 * columns of fixed and content-sized track — plus three 16px gaps — need more
	 * width than a phone has once the panel padding is taken off, and a grid never
	 * shrinks below its tracks, so the whole cart overflowed to the right.
	 *
	 * Two columns instead: the thumbnail, and a flexible one that takes what is
	 * left. The total moves under the product name rather than fighting it for room.
	 *
	 * Every selector below is deliberately one element longer than the WooCommerce
	 * rule it replaces — its cell rules run .is-small table … .row .cell (four
	 * classes, one element), so the tr/td here are what carry these past them.
	 */
	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row,
	.is-medium table.wc-block-cart-items tr.wc-block-cart-items__row {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
	}

	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product,
	.is-medium table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product {
		grid-column: 2 / 3;
		grid-row-start: 1;
	}

	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total,
	.is-medium table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total {
		grid-column: 2 / 3;
		grid-row-start: 2;
		padding-top: 0.4rem;
		text-align: left;
	}

	.is-mobile table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__quantity,
	.is-small table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__quantity,
	.is-medium table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__quantity {
		grid-column: 1 / 2;
		grid-row-start: 2;
		padding-right: 0;
	}
}

/* WooCommerce Bookings — dark styling for the booking form */

#wc-bookings-booking-form {
	background: var(--pv-panel);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius);
	padding: 1.25rem;
}

#wc-bookings-booking-form .wc-bookings-date-picker .picker,
.wc-bookings-date-picker .ui-datepicker {
	background: var(--pv-panel-2);
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text);
}

.wc-bookings-date-picker .ui-datepicker th {
	color: var(--pv-muted);
}

.wc-bookings-date-picker .ui-datepicker td a,
.wc-bookings-date-picker .ui-datepicker td span {
	color: var(--pv-text);
}

.wc-bookings-date-picker .ui-datepicker td.bookable a {
	background: rgba(25, 181, 254, 0.16);
	color: #7fd6ff;
}

.wc-bookings-date-picker .ui-datepicker td a.ui-state-active {
	background: var(--pv-accent);
	color: #04121c;
}

.wc-bookings-booking-cost {
	background: var(--pv-panel-2) !important;
	border: 1px solid var(--pv-border-soft);
	border-radius: var(--pv-radius-sm);
	color: var(--pv-text) !important;
}

/* ---- Blog bits -------------------------------------------------------- */

.pv-entry {
	margin-bottom: 1.5rem;
}

.pv-entry-title a {
	color: var(--pv-text);
}

.pv-entry-content {
	color: var(--pv-muted);
}

.pv-page-title {
	font-size: 1.7rem;
}

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 980px) {
	.pv-auth {
		grid-template-columns: 1fr;
	}

	.pv-auth-brand {
		border-bottom: 1px solid var(--pv-border-soft);
		padding: 2.5rem 1.5rem;
	}

	.pv-auth-brand::after {
		display: none;
	}

	.pv-auth-brand-inner .pv-logo-mark {
		width: 170px;
	}

	.pv-auth-brand-name {
		font-size: 2.1rem;
	}

	.pv-plans-grid {
		grid-template-columns: minmax(0, 460px);
	}
}

@media (max-width: 820px) {
	.pv-nav-toggle {
		display: flex;
	}

	/*
	 * Source order is brand → toggle → nav → actions, because the toggle belongs
	 * next to the nav it labels for anyone tabbing or reading the markup. Visually
	 * the toggle has to be the last thing on the bar — it was landing mid-row,
	 * between the logo and the basket — so the two flow items are reordered here
	 * and the auto margin that used to push the toggle right moves to the basket.
	 */
	.pv-header-inner {
		gap: 0.5rem;
	}

	.pv-header-actions {
		order: 2;
		margin-left: auto;
	}

	.pv-nav-toggle {
		order: 3;
		margin-left: 0;
		margin-right: -0.5rem; /* optically flush with the container edge */
	}

	.pv-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		/* Holds the drop-down above the page. This used to come from a z-index on
		   .pv-header, which broke the logo's screen blend — see the header block. */
		z-index: 90;
		background: #0b0d10;
		border-bottom: 1px solid var(--pv-border-soft);
		display: none;
		padding: 1rem 1.25rem 1.5rem;
	}

	.pv-nav.is-open {
		display: block;
	}

	.pv-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Full-width rows: on a phone the whole line is the tap target, not the word. */
	.pv-nav-list > li + li {
		border-top: 1px solid var(--pv-border-soft);
	}

	.pv-nav-list a {
		display: block;
		padding: 0.85rem 0;
		font-size: 0.95rem;
	}

	/* Sign Out lives in the drop-down here — see the twin in header.php. */
	.pv-nav-actions {
		display: block;
	}

	.pv-header-signout {
		display: none;
	}

	.pv-header-actions .pv-btn-ghost {
		display: none;
	}

	/*
	 * Once the row wraps, the two halves share a left edge — small print left
	 * flush right under the brand would read as a stray indent.
	 */
	.pv-footer-meta {
		text-align: left;
	}

	.pv-footer-contact {
		justify-content: flex-start;
	}
}

@media (max-width: 560px) {
	.pv-auth-card {
		padding: 1.6rem 1.35rem 1.9rem;
	}

	.pv-plan-body {
		padding: 1.4rem 1.2rem 1.6rem;
	}

	.pv-section {
		padding: 2.25rem 0 3rem;
	}

	.pv-plans-note {
		padding: 1rem 1.1rem;
	}

	.pv-header .custom-logo-link {
       width: 42%;
	}

	/*
	 * 2rem of panel padding either side is a third of a phone's width. Everything
	 * inside — the cart block especially, which sizes its columns off whatever
	 * room it is given — gets that third back.
	 *
	 * The old .woocommerce-MyAccount-navigation margin lived here too; the account
	 * grid's own gap replaces it, and leaving both stacked two spacings.
	 */
	.pv-panel {
		padding: 1.35rem 1.1rem 1.5rem;
	}

	.pv-page-title {
		font-size: 1.45rem;
	}

	.woocommerce ul.order_details li {
		padding: 0.8rem 0.95rem;
	}

	.woocommerce ul.order_details li strong {
		font-size: 1.05rem;
	}

	.woocommerce-order table.shop_table th,
	.woocommerce-order table.shop_table td,
	.woocommerce-MyAccount-content table.shop_table th,
	.woocommerce-MyAccount-content table.shop_table td {
		padding: 0.7rem 0.75rem;
	}

	.woocommerce-order-details,
	.woocommerce-customer-details,
	.woocommerce-order-downloads {
		margin-top: 2rem;
	}

	/* `body` again — here it also has to out-rank the desktop rules above. */
	body .woocommerce-message,
	body .woocommerce-info,
	body .woocommerce-error {
		padding: 0.9rem 1rem;
	}

	/* On its own line the button reads better filling it than tucked to one side. */
	body .woocommerce-message .button,
	body .woocommerce-info .button,
	body .woocommerce-error .button {
		width: 100%;
		margin-left: 0;
	}

	.cwb-head{
		flex-direction: column;
	}


}