/*
Theme Name:   Wears Zone
Theme URI:    https://wearszone.com
Author:       Viziogenix
Description:  Custom theme for Wears Zone — sportswear and streetwear manufacturing. Dark athletic design system with a diagonal signature derived from the WZ monogram. WooCommerce quote-first (no prices, no cart) and Elementor compatible.
Version:      1.0.0
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  wears-zone
Tags:         custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/


/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
	/* Palette — from the approved brand document */
	--wz-midnight:  #0A0F1C;
	--wz-graphite:  #1B1F2A;
	--wz-blue:      #1E90FF;
	--wz-white:     #F5F7FA;
	--wz-grey:      #7B8794;

	--wz-line:      rgba(255, 255, 255, 0.08);
	--wz-line-soft: rgba(255, 255, 255, 0.04);
	--wz-line-hard: rgba(255, 255, 255, 0.16);

	/* Type */
	--wz-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--wz-ui:      "Space Grotesk", system-ui, sans-serif;
	--wz-body:    "Inter", system-ui, -apple-system, sans-serif;

	/* Rhythm */
	--wz-max:      1280px;
	--wz-gut:      40px;
	--wz-section:  120px;

	/* Motion — fast out, settled landing. Athletic, not bouncy. */
	--wz-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--wz-t:    0.3s var(--wz-ease);

	/* The signature: one shear angle used everywhere */
	--wz-shear: -18deg;
	--wz-cut:   14px;
}

@media (max-width: 1024px) {
	:root { --wz-gut: 20px; --wz-section: 72px; }
}


/* =========================================================================
   2. RESET
   ========================================================================= */

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

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

body {
	margin: 0;
	background: var(--wz-midnight);
	color: var(--wz-white);
	font-family: var(--wz-body);
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	/* overflow-x: hidden; */
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--wz-blue); text-decoration: none; transition: color var(--wz-t); }
a:hover { color: var(--wz-white); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 2px solid var(--wz-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================================
   3. TYPE
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wz-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 0.94;
	letter-spacing: -0.01em;
	margin: 0 0 0.4em;
	color: var(--wz-white);
}

h1 { font-size: clamp(40px, 6.4vw, 76px); }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h3 { font-size: clamp(26px, 2.8vw, 34px); }
h4 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.1; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.wz-lead   { font-size: 20px; color: var(--wz-grey); max-width: 60ch; }
.wz-muted  { color: var(--wz-grey); }
.wz-small  { font-size: 14px; }

/* Eyebrow — the UI face, used for every label on the site */
.wz-eyebrow {
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wz-blue);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

/* Varsity double-rule. Sleeve striping, abstracted. */
.wz-eyebrow::before {
	content: "";
	width: 34px;
	height: 7px;
	flex: none;
	background:
		linear-gradient(var(--wz-blue), var(--wz-blue)) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--wz-white), var(--wz-white)) 0 100% / 100% 1px no-repeat;
	transform: skewX(var(--wz-shear));
}


/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.wz-wrap {
	width: 100%;
	max-width: var(--wz-max);
	margin-inline: auto;
	padding-inline: var(--wz-gut);
}

.wz-section { padding-block: var(--wz-section); position: relative; }
.wz-section--tight { padding-block: calc(var(--wz-section) * 0.6); }
.wz-section--graphite { background: var(--wz-graphite); }

/* Mesh — fabric, not pattern. Should never be consciously noticed. */
.wz-mesh::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(var(--wz-white) 0.5px, transparent 0.5px);
	background-size: 14px 14px;
	opacity: 0.035;
}

/* The signature device. A band whose edges are sheared, so sections
   slice into each other instead of stacking. */
.wz-slice {
	clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 calc(100% - 3vw));
	margin-block: -3vw;
	padding-block: calc(var(--wz-section) + 3vw);
	position: relative;
	z-index: 1;
}

.wz-grid { display: grid; gap: 28px; }
.wz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wz-grid--4 { grid-template-columns: repeat(4, 1fr); }

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


/* =========================================================================
   5. BUTTONS
   ========================================================================= */

.wz-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	z-index: 0;

	font-family: var(--wz-ui);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;

	padding: 17px 32px;
	border: 0;
	border-radius: 0;
	cursor: pointer;

	background: var(--wz-blue);
	color: #fff;

	/* Corner cut — the diagonal, at component scale */
	clip-path: polygon(
		0 0, 100% 0,
		100% calc(100% - var(--wz-cut)),
		calc(100% - var(--wz-cut)) 100%,
		0 100%
	);
	transition: color var(--wz-t);
}

/* Diagonal wipe on hover */
.wz-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before {
	content: "";
	position: absolute;
	inset: -20% -30%;
	background: var(--wz-white);
	transform: translateX(-118%) skewX(var(--wz-shear));
	transition: transform 0.38s var(--wz-ease);
	z-index: -1;
}

.wz-btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before { transform: translateX(0) skewX(var(--wz-shear)); }

.wz-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { color: var(--wz-midnight); }

.wz-btn--ghost {
	background: transparent;
	color: var(--wz-white);
	box-shadow: inset 0 0 0 1px var(--wz-white);
}
.wz-btn--ghost::before { background: var(--wz-blue); }
.wz-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--wz-blue); }

.wz-btn--wide { width: 100%; }
.wz-btn--lg   { padding: 21px 40px; font-size: 14px; }

/* Arrow slide */
.wz-btn .wz-arrow { transition: transform var(--wz-t); }
.wz-btn:hover .wz-arrow { transform: translateX(6px); }


/* =========================================================================
   6. HEADER
   ========================================================================= */

.wz-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--wz-midnight);
	border-bottom: 1px solid var(--wz-line-soft);
	transition: background var(--wz-t), border-color var(--wz-t);
}

.wz-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 84px;
	transition: min-height var(--wz-t);
}

body.wz-scrolled .wz-header {
	background: rgba(10, 15, 28, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--wz-line);
}
body.wz-scrolled .wz-header__inner { min-height: 70px; }

.wz-logo { display: flex; align-items: center; flex: none; }
.wz-logo img {
	width: 200px;
	max-height: 62px;
	object-fit: contain;
	object-position: left center;
}
body.wz-scrolled .wz-logo img { max-height: 52px; }
.wz-logo__text {
	font-family: var(--wz-display);
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wz-white);
}

/* ---- Nav ---- */

.wz-nav { flex: 1; display: flex; justify-content: center; }

.wz-nav ul { list-style: none; margin: 0; padding: 0; }

.wz-nav > ul { display: flex; align-items: center; gap: 26px; }

.wz-nav a {
	position: relative;
	display: block;
	padding: 8px 0;
	font-family: var(--wz-ui);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wz-white);
	white-space: nowrap;
}

/* Sheared underline — the diagonal again, at type scale */
.wz-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wz-blue);
	transform: scaleX(0) skewX(var(--wz-shear));
	transform-origin: left center;
	transition: transform var(--wz-t);
}

.wz-nav > ul > li > a:hover::after,
.wz-nav > ul > li.current-menu-item > a::after,
.wz-nav > ul > li.current-menu-parent > a::after,
.wz-nav > ul > li.current-menu-ancestor > a::after { transform: scaleX(1) skewX(var(--wz-shear)); }

.wz-nav > ul > li > a:hover { color: var(--wz-blue); }

/* Dropdown */
.wz-nav li { position: relative; }

.wz-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 248px;
	padding: 8px 0;
	background: var(--wz-graphite);
	border-top: 2px solid var(--wz-blue);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.22s var(--wz-ease), visibility 0.22s;
}

.wz-nav li:hover > .sub-menu,
.wz-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wz-nav .sub-menu a {
	padding: 12px 22px;
	font-size: 12px;
	letter-spacing: 0.06em;
	border-left: 2px solid transparent;
	transition: border-color var(--wz-t), color var(--wz-t), background var(--wz-t);
}
.wz-nav .sub-menu a:hover {
	color: var(--wz-blue);
	border-left-color: var(--wz-blue);
	background: var(--wz-midnight);
}

.wz-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: -13px;
	top: 50%;
	width: 5px; height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}

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

.wz-actions { display: flex; align-items: center; gap: 20px; flex: none; }

.wz-wa {
	display: inline-flex;
	color: var(--wz-white);
	transition: color var(--wz-t), transform var(--wz-t);
}
.wz-wa:hover { color: #25D366; transform: translateY(-2px); }

.wz-quote-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--wz-white);
}
.wz-quote-count span {
	position: absolute;
	top: -7px; right: -9px;
	min-width: 17px; height: 17px;
	display: grid; place-items: center;
	padding: 0 4px;
	background: var(--wz-blue);
	color: #fff;
	font-family: var(--wz-ui);
	font-size: 10px;
	font-weight: 700;
}

/* ---- Burger ---- */

.wz-burger {
	display: none;
	width: 42px; height: 42px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}
.wz-burger i {
	position: absolute;
	left: 9px;
	width: 24px; height: 2px;
	background: var(--wz-white);
	transition: transform var(--wz-t), opacity 0.2s;
}
.wz-burger i:nth-child(1) { top: 14px; }
.wz-burger i:nth-child(2) { top: 20px; width: 17px; }
.wz-burger i:nth-child(3) { top: 26px; }

body.wz-menu-open .wz-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.wz-menu-open .wz-burger i:nth-child(2) { opacity: 0; }
body.wz-menu-open .wz-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
	.wz-nav { display: none; }
	.wz-burger { display: block; }
	.wz-header__inner { min-height: 68px; }
	.wz-actions .wz-btn { display: none; }
}


/* =========================================================================
   7. MOBILE MENU
   ========================================================================= */

.wz-mobile {
	position: fixed;
	inset: 0;
	z-index: 890;
	background: var(--wz-midnight);
	padding: 92px var(--wz-gut) 32px;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.4s var(--wz-ease), visibility 0.4s;
}
body.wz-menu-open .wz-mobile { transform: translateX(0); visibility: visible; }
body.wz-menu-open { overflow: hidden; }

.wz-mobile ul { list-style: none; margin: 0; padding: 0; }

.wz-mobile > ul > li { border-bottom: 1px solid var(--wz-line); }

.wz-mobile a {
	display: block;
	padding: 16px 0;
	font-family: var(--wz-display);
	font-size: 24px;
	text-transform: uppercase;
	color: var(--wz-white);
}
.wz-mobile a:hover { color: var(--wz-blue); }

.wz-mobile .sub-menu { display: none; padding: 0 0 12px 16px; }
.wz-mobile li.wz-open > .sub-menu { display: block; }
.wz-mobile .sub-menu a {
	font-family: var(--wz-body);
	font-size: 16px;
	text-transform: none;
	padding: 9px 0;
	color: var(--wz-grey);
}

.wz-mobile__toggle {
	position: absolute;
	right: 0; top: 6px;
	width: 44px; height: 44px;
	background: none; border: 0;
	color: var(--wz-grey);
	font-size: 22px;
	cursor: pointer;
	transition: transform var(--wz-t), color var(--wz-t);
}
.wz-mobile li.wz-open > .wz-mobile__toggle { transform: rotate(45deg); color: var(--wz-blue); }
.wz-mobile > ul > li { position: relative; }

.wz-mobile__cta { display: grid; gap: 12px; margin-top: 32px; }


/* =========================================================================
   8. CARDS
   ========================================================================= */

.wz-card {
	position: relative;
	background: var(--wz-graphite);
	border: 1px solid var(--wz-line);
	overflow: hidden;
	transition: border-color var(--wz-t), transform var(--wz-t);
	/* Single angled corner — quiet at rest, obvious in aggregate */
	clip-path: polygon(
		0 0, calc(100% - 26px) 0, 100% 26px,
		100% 100%, 0 100%
	);
}
.wz-card:hover { border-color: var(--wz-blue); transform: translateY(-4px); }

.wz-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wz-midnight);
}
.wz-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--wz-ease);
}
.wz-card:hover .wz-card__media img { transform: scale(1.05); }

/* Blue wedge wipes in from the bottom-left */
.wz-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30,144,255,0.28), transparent 60%);
	opacity: 0;
	transition: opacity var(--wz-t);
}
.wz-card:hover .wz-card__media::after { opacity: 1; }

.wz-card__body { padding: 28px; }
.wz-card__body > * + * { margin-top: 14px; }

.wz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wz-chip {
	font-family: var(--wz-ui);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wz-grey);
	padding: 6px 11px;
	border: 1px solid var(--wz-line);
	transform: skewX(var(--wz-shear));
}
.wz-chip > span { display: block; transform: skewX(calc(var(--wz-shear) * -1)); }

.wz-card__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wz-blue);
}
.wz-card:hover .wz-card__link .wz-arrow { transform: translateX(6px); }
.wz-card__link .wz-arrow { transition: transform var(--wz-t); }


/* =========================================================================
   9. JERSEY NUMERALS
   Only used where content genuinely is a sequence.
   ========================================================================= */

.wz-step { position: relative; padding-top: 12px; }

.wz-step__num {
	font-family: var(--wz-display);
	font-size: clamp(84px, 9vw, 148px);
	line-height: 0.8;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.12);
	display: block;
	margin-bottom: 14px;
	transition: -webkit-text-stroke-color var(--wz-t), transform var(--wz-t);
}
.wz-step:hover .wz-step__num,
.wz-step.is-in .wz-step__num {
	-webkit-text-stroke-color: var(--wz-blue);
	transform: translateY(-6px);
}

.wz-step h4 { margin-bottom: 8px; }
.wz-step p { font-size: 15px; color: var(--wz-grey); }


/* =========================================================================
   10. STATS
   ========================================================================= */

.wz-stat__num {
	font-family: var(--wz-display);
	font-size: clamp(44px, 5vw, 66px);
	font-weight: 700;
	line-height: 1;
	color: var(--wz-blue);
}
.wz-stat__label {
	font-family: var(--wz-ui);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wz-grey);
	margin-top: 10px;
}


/* =========================================================================
   11. PAGE HERO
   ========================================================================= */

.wz-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 46vh;
	padding-block: 90px;
	overflow: hidden;
	background: var(--wz-graphite);
}
.wz-hero__bg { position: absolute; inset: 0; }
.wz-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.wz-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(10,15,28,0.95) 34%, rgba(10,15,28,0.6) 100%);
}
.wz-hero__inner { position: relative; z-index: 1; }
.wz-hero h1 { max-width: 18ch; }
.wz-hero .wz-lead { margin-top: 18px; }

/* Ghosted monogram — a watermark, not an ornament */
.wz-hero__mark {
	position: absolute;
	right: -6%;
	bottom: -22%;
	width: 46%;
	max-width: 620px;
	opacity: 0.028;
	pointer-events: none;
	transform: rotate(-4deg);
	z-index: 0;
}

.wz-crumbs {
	font-family: var(--wz-ui);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wz-grey);
	margin-bottom: 22px;
}
.wz-crumbs a { color: var(--wz-grey); }
.wz-crumbs a:hover { color: var(--wz-blue); }


/* =========================================================================
   12. SPEC BAR / TABLE
   ========================================================================= */

.wz-specbar {
	display: flex;
	flex-wrap: wrap;
	background: var(--wz-graphite);
	border-block: 1px solid var(--wz-line);
}
.wz-specbar > div {
	flex: 1 1 auto;
	padding: 22px var(--wz-gut);
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wz-grey);
	border-left: 1px solid var(--wz-line);
	text-align: center;
}
.wz-specbar > div:first-child { border-left: 0; }
.wz-specbar strong { color: var(--wz-white); }

.wz-spectable { width: 100%; border-collapse: collapse; }
.wz-spectable tr { border-bottom: 1px solid var(--wz-line); }
.wz-spectable th,
.wz-spectable td { padding: 15px 0; text-align: left; font-size: 15px; }
.wz-spectable th {
	font-family: var(--wz-ui);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--wz-grey);
	width: 42%;
}


/* =========================================================================
   13. CTA BAND
   ========================================================================= */

.wz-cta {
	position: relative;
	background: var(--wz-graphite);
	text-align: center;
	overflow: hidden;
}
.wz-cta::before {
	content: "";
	position: absolute;
	top: 0; left: 8%;
	width: 2px; height: 100%;
	background: var(--wz-blue);
	transform: skewX(var(--wz-shear));
	opacity: 0.5;
}
.wz-cta .wz-lead { margin-inline: auto; }
.wz-cta__row {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 34px;
}


/* =========================================================================
   14. FOOTER
   ========================================================================= */

.wz-footer {
	background: var(--wz-midnight);
	border-top: 1px solid var(--wz-line);
	padding-top: 84px;
}
.wz-footer__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 60px;
}
@media (max-width: 900px) { .wz-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wz-footer__cols { grid-template-columns: 1fr; } }

.wz-footer h5 {
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wz-white);
	margin-bottom: 18px;
}
.wz-footer ul { list-style: none; margin: 0; padding: 0; }
.wz-footer li { margin-bottom: 11px; }
.wz-footer li a { font-size: 15px; color: var(--wz-grey); }
.wz-footer li a:hover { color: var(--wz-blue); }

.wz-footer__brand img { width: 168px; margin-bottom: 20px; }
.wz-footer__brand p { font-size: 15px; color: var(--wz-grey); max-width: 34ch; }
.wz-footer__tag {
	font-family: var(--wz-ui);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wz-grey);
	margin-top: 18px;
}

.wz-social { display: flex; gap: 14px; margin-top: 20px; }
.wz-social a { color: var(--wz-grey); }
.wz-social a:hover { color: var(--wz-blue); }

.wz-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 26px 0;
	border-top: 1px solid var(--wz-line);
	font-size: 14px;
	color: var(--wz-grey);
}
.wz-footer__contact a { color: var(--wz-grey); }
.wz-footer__contact a:hover { color: var(--wz-blue); }

.wz-footer__bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px 0 28px;
	border-top: 1px solid var(--wz-line);
	font-size: 13px;
	color: var(--wz-grey);
}


/* =========================================================================
   15. FLOATING WHATSAPP
   ========================================================================= */

.wz-float {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 880;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	background: #25D366;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
	transition: transform var(--wz-t);
}
.wz-float:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 640px) { .wz-float { right: 14px; bottom: 14px; width: 52px; height: 52px; } }


/* =========================================================================
   16. WOOCOMMERCE
   Quote-first: prices, cart totals and shop noise are removed.
   ========================================================================= */

.woocommerce .price,
.woocommerce span.price,
.woocommerce .product .amount,
.wz-spec-price,
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tfoot,
.cart-subtotal, .order-total,
.shop_table .product-price,
.shop_table .product-subtotal,
.cart_totals,
.woocommerce-result-count,
.woocommerce-ordering { display: none !important; }

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	background: var(--wz-graphite);
	border: 1px solid var(--wz-line);
	overflow: hidden;
	transition: border-color var(--wz-t), transform var(--wz-t);
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.woocommerce ul.products li.product:hover { border-color: var(--wz-blue); transform: translateY(-4px); }

/* Product imagery sits on graphite, so white-background cutouts
   don't burn holes in a dark page. */
.woocommerce ul.products li.product a img {
	margin: 0;
	aspect-ratio: 1;
	object-fit: contain;
	background: #fff;
	padding: 12px;
	transition: transform 0.5s var(--wz-ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wz-display);
	font-size: 22px;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--wz-white);
	padding: 22px 22px 6px;
	margin: 0;
}
.woocommerce ul.products li.product .wz-sku {
	display: block;
	padding: 0 22px;
	font-family: var(--wz-ui);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wz-grey);
}
.woocommerce ul.products li.product .wz-excerpt {
	padding: 10px 22px 0;
	font-size: 14px;
	color: var(--wz-grey);
}
.woocommerce ul.products li.product .button { margin: 20px 22px 22px; }

/* Category tiles on the shop page */
.woocommerce ul.products li.product-category a { display: block; }
.woocommerce ul.products li.product-category h2 {
	font-family: var(--wz-display);
	font-size: 26px;
	padding: 22px;
	margin: 0;
	color: var(--wz-white);
}
.woocommerce ul.products li.product-category mark { background: none; color: var(--wz-blue); }

/* Single product */
.woocommerce div.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; }
@media (max-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr; gap: 34px; } }

.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 !important; }

.woocommerce div.product div.images img { background: #fff; }

.woocommerce div.product .product_title { font-size: clamp(30px, 3.6vw, 44px); }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--wz-grey);
	font-size: 16px;
	margin-bottom: 26px;
}

.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.woocommerce table.shop_attributes tr { border-bottom: 1px solid var(--wz-line); }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 14px 0;
	text-align: left;
	font-size: 15px;
	border: 0;
	background: none !important;
}
.woocommerce table.shop_attributes th {
	font-family: var(--wz-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wz-grey);
	width: 40%;
}
.woocommerce table.shop_attributes td p { margin: 0; color: var(--wz-white); }

.woocommerce div.product form.cart { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.woocommerce div.product form.cart .button { flex: 1; min-width: 220px; }

.woocommerce .quantity input.qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="date"],
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
	background: var(--wz-graphite) !important;
	border: 1px solid var(--wz-line-hard) !important;
	border-radius: 0 !important;
	color: var(--wz-white) !important;
	padding: 14px 16px !important;
	height: auto !important;
	font-family: var(--wz-body);
	font-size: 16px;
	transition: border-color var(--wz-t), box-shadow var(--wz-t);
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: var(--wz-blue) !important;
	box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.16);
	outline: none;
}
.woocommerce .quantity input.qty { width: 92px; text-align: center; }

.woocommerce form .form-row label {
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wz-white);
	margin-bottom: 8px;
}
.woocommerce form .form-row .required { color: var(--wz-blue); border: 0; }

.woocommerce-checkout h3,
.woocommerce-checkout h2 { font-size: 26px; margin-bottom: 22px; }

.woocommerce table.shop_table {
	border: 1px solid var(--wz-line);
	border-radius: 0;
	border-collapse: collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--wz-line);
	color: var(--wz-white);
	padding: 16px;
}
.woocommerce table.shop_table thead th {
	font-family: var(--wz-ui);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wz-grey);
	background: var(--wz-graphite);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wz-graphite);
	border-top: 2px solid var(--wz-blue);
	color: var(--wz-white);
	padding: 18px 22px;
	list-style: none;
}
.woocommerce-error { border-top-color: #E5484D; }

.woocommerce nav.woocommerce-pagination ul { border: 0; gap: 6px; display: flex; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: var(--wz-graphite);
	color: var(--wz-white);
	border: 1px solid var(--wz-line);
	padding: 11px 17px;
	font-family: var(--wz-ui);
	font-size: 13px;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wz-blue); border-color: var(--wz-blue); }


/* =========================================================================
   17. SCROLL REVEAL
   ========================================================================= */

.wz-reveal {
	opacity: 0;
	transform: translate3d(18px, 18px, 0);
	transition: opacity 0.6s ease, transform 0.6s var(--wz-ease);
}
.wz-reveal.is-in { opacity: 1; transform: none; }


/* =========================================================================
   18. EDITOR / ELEMENTOR / MISC
   ========================================================================= */

.wz-main { min-height: 40vh; }

.wz-entry > * + * { margin-top: 1.1em; }
.wz-entry ul, .wz-entry ol { padding-left: 1.3em; }
.wz-entry li { margin-bottom: 0.5em; }
.wz-entry blockquote {
	border-left: 2px solid var(--wz-blue);
	padding-left: 22px;
	margin-left: 0;
	color: var(--wz-grey);
}

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

.wz-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wz-blue);
	color: #fff;
	padding: 12px 20px;
	font-family: var(--wz-ui);
	font-size: 13px;
}
.wz-skip:focus { left: 0; color: #fff; }


/* =========================================================================
   22. PROCESS PAGE
   ========================================================================= */

.wz-stages { display: grid; gap: 90px; }

.wz-stage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.wz-stage:nth-child(even) .wz-stage__media { order: 2; }

.wz-stage__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--wz-graphite);
	border: 1px solid var(--wz-line);
	display: grid;
	place-items: center;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}
.wz-stage__media img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder numeral, visible only until real photography arrives */
.wz-stage__ghost {
	font-family: var(--wz-display);
	font-size: 180px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.07);
}
.wz-stage__media:has(img) .wz-stage__ghost { display: none; }

.wz-stage__num {
	display: block;
	font-family: var(--wz-display);
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--wz-blue);
	margin-bottom: 16px;
}

.wz-stage__body h3 { margin-bottom: 14px; }
.wz-stage__body p { color: var(--wz-grey); font-size: 16px; margin-bottom: 20px; }

@media (max-width: 900px) {
	.wz-stages { gap: 56px; }
	.wz-stage { grid-template-columns: 1fr; gap: 26px; }
	.wz-stage:nth-child(even) .wz-stage__media { order: 0; }
	.wz-stage__ghost { font-size: 120px; }
}

/* ---- Quality checks ---- */

.wz-check { display: flex; gap: 14px; align-items: flex-start; }
.wz-check p { font-size: 15px; color: var(--wz-grey); margin: 0; }

.wz-check__tick {
	flex: none;
	width: 20px; height: 20px;
	margin-top: 3px;
	position: relative;
	border: 1px solid var(--wz-blue);
	transform: skewX(var(--wz-shear));
}
.wz-check__tick::after {
	content: "";
	position: absolute;
	left: 6px; top: 2px;
	width: 5px; height: 10px;
	border-right: 2px solid var(--wz-blue);
	border-bottom: 2px solid var(--wz-blue);
	transform: rotate(45deg) skewX(calc(var(--wz-shear) * -1));
}

/* ---- Deadline planner ---- */

.wz-planner {
	max-width: 860px;
	background: var(--wz-graphite);
	border-left: 2px solid var(--wz-blue);
	padding: 52px 48px;
}
.wz-planner .wz-spectable td { text-align: right; color: var(--wz-white); font-family: var(--wz-ui); font-size: 14px; }
.wz-planner__total th,
.wz-planner__total td { color: var(--wz-blue) !important; font-weight: 700; }
.wz-planner__total { border-bottom: 0 !important; }

@media (max-width: 640px) { .wz-planner { padding: 34px 24px; } }


/* =========================================================================
   23. ABOUT PAGE
   ========================================================================= */

.wz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.wz-split p { color: var(--wz-grey); font-size: 17px; }
@media (max-width: 900px) { .wz-split { grid-template-columns: 1fr; gap: 26px; } }

.wz-capability,
.wz-value { border-top: 2px solid var(--wz-blue); padding-top: 22px; }
.wz-capability h4,
.wz-value h4 { margin-bottom: 10px; }
.wz-capability p,
.wz-value p { font-size: 15px; color: var(--wz-grey); margin: 0; }


/* =========================================================================
   24. CONTACT PAGE
   ========================================================================= */

.wz-contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .wz-contact { grid-template-columns: 1fr; gap: 44px; } }

.wz-contact__methods { display: grid; gap: 14px; }

.wz-method {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px 24px;
	background: var(--wz-graphite);
	border: 1px solid var(--wz-line);
	color: var(--wz-white);
	transition: border-color var(--wz-t), transform var(--wz-t);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
a.wz-method:hover { border-color: var(--wz-blue); transform: translateX(4px); color: var(--wz-white); }

.wz-method__icon { flex: none; color: var(--wz-blue); margin-top: 2px; }
.wz-method--wa .wz-method__icon { color: #25D366; }
.wz-method strong {
	display: block;
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.wz-method em { font-style: normal; font-size: 15px; color: var(--wz-grey); }

.wz-hours { padding: 24px; border-left: 2px solid var(--wz-line-hard); margin-top: 10px; }
.wz-hours h5 {
	font-family: var(--wz-ui);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.wz-hours p { font-size: 15px; color: var(--wz-grey); margin-bottom: 10px; }

/* ---- Form ---- */

.wz-contact__form {
	background: var(--wz-graphite);
	border: 1px solid var(--wz-line);
	padding: 44px;
	clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
@media (max-width: 640px) { .wz-contact__form { padding: 28px 22px; } }

.wz-contact__form h3 { margin-bottom: 26px; }

.wz-form p { margin-bottom: 20px; }

.wz-form label {
	display: block;
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.wz-form label span { color: var(--wz-blue); }

.wz-form input,
.wz-form textarea {
	width: 100%;
	background: var(--wz-midnight);
	border: 1px solid var(--wz-line-hard);
	border-radius: 0;
	color: var(--wz-white);
	padding: 14px 16px;
	font-family: var(--wz-body);
	font-size: 16px;
	transition: border-color var(--wz-t), box-shadow var(--wz-t);
}
.wz-form input:focus,
.wz-form textarea:focus {
	border-color: var(--wz-blue);
	box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.16);
	outline: none;
}
.wz-form textarea { resize: vertical; }


/* =========================================================================
   25. LIGHT SECTIONS
   Dark carries the brand; light carries the work. Catalogue, specs and
   forms sit on paper because that is where people read and compare.
   ========================================================================= */

:root {
	--wz-paper:      #F5F7FA;
	--wz-paper-alt:  #E8ECF2;
	--wz-ink:        #0A0F1C;
	--wz-ink-soft:   #5A6673;
	--wz-ink-line:   rgba(10, 15, 28, 0.10);
}

.wz-light,
.wz-section--light { background: var(--wz-paper); color: var(--wz-ink); }

.wz-light h1, .wz-light h2, .wz-light h3,
.wz-light h4, .wz-light h5, .wz-light h6 { color: var(--wz-ink); }

.wz-light p            { color: var(--wz-ink); }
.wz-light .wz-lead,
.wz-light .wz-muted,
.wz-light .wz-small    { color: var(--wz-ink-soft); }
.wz-light .wz-eyebrow  { color: var(--wz-blue); }
.wz-light .wz-eyebrow::before {
	background:
		linear-gradient(var(--wz-blue), var(--wz-blue)) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--wz-ink), var(--wz-ink)) 0 100% / 100% 1px no-repeat;
}

.wz-light a { color: var(--wz-blue); }
.wz-light a:hover { color: var(--wz-ink); }

.wz-light .wz-card,
.wz-light .wz-method,
.wz-light .wz-contact__form {
	background: #fff;
	border-color: var(--wz-ink-line);
}
.wz-light .wz-card__media { background: var(--wz-paper-alt); }

.wz-light .wz-chip { color: var(--wz-ink-soft); border-color: var(--wz-ink-line); }

.wz-light .wz-spectable tr { border-bottom-color: var(--wz-ink-line); }
.wz-light .wz-spectable th { color: var(--wz-ink-soft); }
.wz-light .wz-spectable td { color: var(--wz-ink); }

.wz-light .wz-specbar { background: #fff; border-color: var(--wz-ink-line); }
.wz-light .wz-specbar > div { color: var(--wz-ink-soft); border-left-color: var(--wz-ink-line); }
.wz-light .wz-specbar strong { color: var(--wz-ink); }

.wz-light .wz-step__num { -webkit-text-stroke-color: rgba(10, 15, 28, 0.14); }
.wz-light .wz-step:hover .wz-step__num,
.wz-light .wz-step.is-in .wz-step__num { -webkit-text-stroke-color: var(--wz-blue); }

.wz-light .wz-btn--ghost { color: var(--wz-ink); box-shadow: inset 0 0 0 1px var(--wz-ink); }
.wz-light .wz-btn--ghost:hover { color: #fff; }

.wz-light .wz-form input,
.wz-light .wz-form textarea {
	background: var(--wz-paper);
	border-color: var(--wz-ink-line);
	color: var(--wz-ink);
}
.wz-light .wz-form label { color: var(--wz-ink); }
.wz-light .wz-hours { border-left-color: var(--wz-ink-line); }
.wz-light .wz-capability,
.wz-light .wz-value { border-top-color: var(--wz-blue); }
.wz-light .wz-check p { color: var(--wz-ink-soft); }
.wz-light .wz-mesh::before { background-image: radial-gradient(var(--wz-ink) 0.5px, transparent 0.5px); opacity: 0.05; }


/* WooCommerce pages run light — cut-out product shots belong on paper. */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-shop { background: var(--wz-paper); color: var(--wz-ink); }

body.woocommerce h1, body.woocommerce h2, body.woocommerce h3,
body.woocommerce-page h1, body.woocommerce-page h2, body.woocommerce-page h3,
body.woocommerce .product_title,
body.woocommerce-page .product_title { color: var(--wz-ink); }

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product {
	background: #fff;
	border-color: var(--wz-ink-line);
	box-shadow: 0 1px 2px rgba(10, 15, 28, 0.04);
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title { color: var(--wz-ink); }
body.woocommerce ul.products li.product .wz-sku,
body.woocommerce ul.products li.product .wz-excerpt,
body.woocommerce-page ul.products li.product .wz-sku,
body.woocommerce-page ul.products li.product .wz-excerpt { color: var(--wz-ink-soft); }
body.woocommerce ul.products li.product a img,
body.woocommerce-page ul.products li.product a img { background: #fff; }

body.woocommerce .wz-crumbs,
body.woocommerce-page .wz-crumbs { color: var(--wz-ink-soft); }
body.woocommerce .wz-crumbs a,
body.woocommerce-page .wz-crumbs a { color: var(--wz-ink-soft); }

body.woocommerce .wz-hero,
body.woocommerce-page .wz-hero { background: var(--wz-ink); }
body.woocommerce .wz-hero h1,
body.woocommerce-page .wz-hero h1 { color: var(--wz-white); }
body.woocommerce .wz-hero .wz-lead,
body.woocommerce-page .wz-hero .wz-lead { color: var(--wz-grey); }

body.woocommerce table.shop_attributes tr,
body.woocommerce-page table.shop_attributes tr { border-bottom-color: var(--wz-ink-line); }
body.woocommerce table.shop_attributes th,
body.woocommerce-page table.shop_attributes th { color: var(--wz-ink-soft); }
body.woocommerce table.shop_attributes td p,
body.woocommerce-page table.shop_attributes td p { color: var(--wz-ink); }

body.woocommerce .woocommerce-product-details__short-description,
body.woocommerce-page .woocommerce-product-details__short-description { color: var(--wz-ink-soft); }

body.woocommerce .wz-specbar,
body.woocommerce-page .wz-specbar { background: #fff; border-color: var(--wz-ink-line); }
body.woocommerce .wz-specbar > div,
body.woocommerce-page .wz-specbar > div { color: var(--wz-ink-soft); border-left-color: var(--wz-ink-line); }
body.woocommerce .wz-specbar strong,
body.woocommerce-page .wz-specbar strong { color: var(--wz-ink); }

body.woocommerce input, body.woocommerce textarea, body.woocommerce select,
body.woocommerce-page input, body.woocommerce-page textarea, body.woocommerce-page select,
body.woocommerce .quantity input.qty,
body.woocommerce-page .quantity input.qty {
	background: #fff !important;
	border-color: var(--wz-ink-line) !important;
	color: var(--wz-ink) !important;
}
body.woocommerce form .form-row label,
body.woocommerce-page form .form-row label { color: var(--wz-ink); }

body.woocommerce table.shop_table,
body.woocommerce-page table.shop_table { background: #fff; border-color: var(--wz-ink-line); }
body.woocommerce table.shop_table th,
body.woocommerce table.shop_table td,
body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td { border-color: var(--wz-ink-line); color: var(--wz-ink); }
body.woocommerce table.shop_table thead th,
body.woocommerce-page table.shop_table thead th { background: var(--wz-paper); color: var(--wz-ink-soft); }

body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info { background: #fff; color: var(--wz-ink); }

body.woocommerce .woocommerce-tabs ul.tabs,
body.woocommerce-page .woocommerce-tabs ul.tabs { border-bottom-color: var(--wz-ink-line); }
body.woocommerce .woocommerce-tabs ul.tabs li.active a,
body.woocommerce-page .woocommerce-tabs ul.tabs li.active a { color: var(--wz-ink); }

body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span,
body.woocommerce-page nav.woocommerce-pagination ul li a,
body.woocommerce-page nav.woocommerce-pagination ul li span {
	background: #fff; color: var(--wz-ink); border-color: var(--wz-ink-line);
}

/* Header and footer stay dark on every page — the shell is the brand. */
body.woocommerce .wz-header, body.woocommerce-page .wz-header,
body.woocommerce .wz-footer, body.woocommerce-page .wz-footer,
body.woocommerce .wz-cta,    body.woocommerce-page .wz-cta { color: var(--wz-white); }
body.woocommerce .wz-cta h2, body.woocommerce-page .wz-cta h2 { color: var(--wz-white); }


/* =========================================================================
   26. SECTION BACKGROUND IMAGES
   ========================================================================= */

.wz-bg { position: relative; overflow: hidden; }
.wz-bg > .wz-bg__img { position: absolute; inset: 0; z-index: 0; }
.wz-bg > .wz-bg__img img { width: 100%; height: 100%; object-fit: cover; }
.wz-bg > .wz-bg__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(10,15,28,0.95) 30%, rgba(10,15,28,0.74) 100%);
}
.wz-bg > .wz-wrap { position: relative; z-index: 1; }

.wz-light.wz-bg > .wz-bg__img::after {
	background: linear-gradient(105deg, rgba(245,247,250,0.96) 30%, rgba(245,247,250,0.82) 100%);
}


/* =========================================================================
   27. PRODUCT CAROUSEL
   Scroll-snap rather than a slider library — no dependency, and it
   behaves correctly on touch by default.
   ========================================================================= */

.wz-carousel { position: relative; }

.wz-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(272px, 1fr);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 12px;
	scrollbar-width: none;
}
.wz-carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) { .wz-carousel__track { grid-auto-columns: minmax(0, calc(25% - 18px)); } }
@media (max-width: 640px)  { .wz-carousel__track { grid-auto-columns: 78%; } }

.wz-carousel__item { scroll-snap-align: start; }

.wz-slide {
	display: block;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	overflow: hidden;
	transition: border-color var(--wz-t), transform var(--wz-t);
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
	height: 100%;
}
.wz-slide:hover { border-color: var(--wz-blue); transform: translateY(-4px); }

.wz-slide__media { aspect-ratio: 1; background: #fff; overflow: hidden; }
.wz-slide__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 14px;
	transition: transform 0.5s var(--wz-ease);
}
.wz-slide:hover .wz-slide__media img { transform: scale(1.04); }

.wz-slide__body { padding: 18px 20px 22px; border-top: 1px solid var(--wz-ink-line); }
.wz-slide__title {
	font-family: var(--wz-display);
	font-size: 20px;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--wz-ink);
	margin: 0 0 6px;
}
.wz-slide__meta {
	font-family: var(--wz-ui);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wz-ink-soft);
}

.wz-carousel__nav { display: flex; gap: 8px; margin-top: 26px; }
.wz-carousel__btn {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: transparent;
	border: 1px solid var(--wz-ink-line);
	color: var(--wz-ink);
	cursor: pointer;
	transition: background var(--wz-t), border-color var(--wz-t), color var(--wz-t);
}
.wz-carousel__btn:hover { background: var(--wz-blue); border-color: var(--wz-blue); color: #fff; }
.wz-carousel__btn[disabled] { opacity: 0.3; cursor: default; }
.wz-carousel__btn svg { pointer-events: none; }
.wz-carousel__btn--prev svg { transform: rotate(180deg); }

.wz-carousel__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

html { overflow-x: clip; }

body.admin-bar .wz-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .wz-header { top: 46px; }
}

/* =========================================================================
   20. WOOCOMMERCE LAYOUT FIXES
   ========================================================================= */

/* Woo's clearfix pseudo-elements become phantom grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none !important;
	display: none !important;
}

/* Tabs and related products must span the full product grid,
   not sit inside one of its columns. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .summary ~ * {
	grid-column: 1 / -1;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells { margin-top: 40px; }

.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
	.woocommerce div.product .related ul.products,
	.woocommerce div.product .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* The quote plugin ships its own button colour. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce #respond input#submit.alt {
	background: var(--wz-blue) !important;
	color: #fff !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
	color: var(--wz-midnight) !important;
}

/* Category tiles carry photography, so they fill rather than sit
   on a white plate the way cut-out product shots do. */
.woocommerce ul.products li.product-category a img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wz-graphite);
	padding: 0;
}
.woocommerce ul.products li.product-category h2 {
	font-size: 22px;
	padding: 20px 22px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--wz-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 22px;
	font-family: var(--wz-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wz-grey);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wz-white);
	border-bottom-color: var(--wz-blue);
}
.woocommerce div.product .woocommerce-tabs .panel { max-width: 74ch; }
.woocommerce div.product .woocommerce-tabs h2 { font-size: 26px; }

/* Cart form + quantity alignment */
.woocommerce div.product form.cart { align-items: stretch; }
.woocommerce div.product form.cart .quantity { flex: none; }
.woocommerce div.product form.cart .quantity input.qty { height: 100%; min-height: 52px; }

/* Empty-state block */
.woocommerce .cart-empty { font-size: 18px; }
.woocommerce .return-to-shop { margin-top: 24px; }

/* Woo notices — icon and text on one baseline */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static;
	top: auto;
	left: auto;
	flex: none;
	color: var(--wz-blue);
	font-size: 15px;
	line-height: 1;
}

.woocommerce-error::before { color: #E5484D; }

/* The button inside a notice shouldn't stretch */
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; flex: none; }

/* =========================================================================
   28. QUOTE BASKET
   The totals block holds the primary CTA, so it stays — only the
   price rows inside it are removed.
   ========================================================================= */

.cart_totals { display: block !important; }
.cart_totals > h2,
.cart_totals table.shop_table,
.cart-collaterals .cross-sells,
.woocommerce-cart .coupon,
.woocommerce-cart .shipping-calculator-button { display: none !important; }

.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 40px;
	align-items: start;
	margin-top: 44px;
}
@media (max-width: 900px) {
	.woocommerce-cart .cart-collaterals { grid-template-columns: 1fr; }
}

.woocommerce-cart .cart_totals {
	grid-column: 2;
	width: 100% !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	padding: 32px;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.wc-proceed-to-checkout { padding: 0 !important; }
.wc-proceed-to-checkout a.checkout-button {
	display: flex !important;
	width: 100%;
	margin: 0 !important;
	font-size: 14px !important;
	padding: 20px 28px !important;
}

/* The panel that explains what happens after they send it */
.wz-next { grid-column: 1; }
.wz-next h4 { margin-bottom: 18px; }
.wz-next ol { list-style: none; margin: 0; padding: 0; counter-reset: wz; }
.wz-next li {
	counter-increment: wz;
	position: relative;
	padding-left: 46px;
	margin-bottom: 20px;
	font-size: 15px;
	color: var(--wz-ink-soft);
}
.wz-next li::before {
	content: counter( wz, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: -2px;
	font-family: var(--wz-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--wz-blue);
}

/* Cart table on paper */
.woocommerce-cart table.cart img { width: 78px; background: #fff; }
.woocommerce-cart table.cart td.product-name a { color: var(--wz-ink); font-weight: 500; }
.woocommerce-cart table.cart td.actions { padding-top: 24px; }
.woocommerce-cart .quantity input.qty { width: 88px; }

/* =========================================================================
   29. QUOTE FORM — light page, paper inputs
   ========================================================================= */

.woocommerce-checkout .woocommerce { max-width: 1100px; margin-inline: auto; }

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 48px;
	align-items: start;
}
@media (max-width: 980px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 32px; }
}

.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout #order_review { grid-column: 2; }

@media (max-width: 980px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout h3#order_review_heading,
	.woocommerce-checkout #order_review { grid-column: 1; }
}

/* Details panel sits on white so the form reads as a document */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	padding: 34px 32px;
	margin-bottom: 22px;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	font-size: 22px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--wz-blue);
	display: inline-block;
}

/* Inputs — paper, not midnight */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="date"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	background: var(--wz-paper) !important;
	border: 1px solid var(--wz-ink-line) !important;
	color: var(--wz-ink) !important;
	padding: 15px 16px !important;
	width: 100%;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
	background: #fff !important;
	border-color: var(--wz-blue) !important;
	box-shadow: 0 0 0 3px rgba(30,144,255,.14);
}
.woocommerce-checkout ::placeholder { color: #9AA4B0; opacity: 1; }

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wz-ink) !important;
	line-height: 1.4;
	padding: 0;
}
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: auto !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%; right: 12px;
}

.woocommerce-checkout form .form-row label {
	color: var(--wz-ink);
	font-size: 11px;
	letter-spacing: 0.08em;
	margin-bottom: 7px;
}
.woocommerce-checkout form .form-row { margin-bottom: 20px; padding: 0; }
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: 48.5%; }

/* Order review panel — sticky, and the CTA lives here alone */
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	padding: 32px;
	position: sticky;
	top: 110px;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	background: none;
	margin-bottom: 20px;
}
.woocommerce-checkout #order_review table.shop_table thead { display: none; }
.woocommerce-checkout #order_review table.shop_table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--wz-ink-line);
}

/* The duplicated label above the button, and the payment plate */
.woocommerce-checkout #payment { background: none !important; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { display: none !important; }
.woocommerce-checkout #payment div.form-row { padding: 0; margin: 0; }
.woocommerce-checkout #payment .place-order > label,
.woocommerce-checkout #payment .wc_payment_methods,
.woocommerce-checkout #payment > h3 { display: none !important; }

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	font-size: 13px;
	color: var(--wz-ink-soft);
	margin-bottom: 20px;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { font-size: 13px; margin: 0; }

.woocommerce-checkout #place_order {
	width: 100%;
	float: none;
	font-size: 14px !important;
	padding: 20px 28px !important;
}

/* Reassurance under the button */
.wz-assure {
	margin-top: 18px;
	font-size: 13px;
	color: var(--wz-ink-soft);
	text-align: center;
	line-height: 1.5;
}
.wz-assure strong { color: var(--wz-ink); }

/* Grid rows must be explicit, or the review heading and the review
   panel land in different rows. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	grid-template-rows: auto 1fr;
	gap: 0 48px;
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 100%;
}

.woocommerce-checkout h3#order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 980px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 24px;
	}
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout h3#order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Woo's own two-column split inside the details panel */
.woocommerce-checkout #customer_details .col2-set,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100% !important;
	float: none !important;
	max-width: none !important;
}

.woocommerce-checkout textarea {
	min-height: 130px;
	resize: vertical;
}

/* Sticky needs a fixed reference; the grid row provides it. */
.woocommerce-checkout #order_review { align-self: start; }

/* Heading spacing so the panel doesn't sit flush under it */
.woocommerce-checkout h3#order_review_heading { margin-bottom: 20px; }

/* =========================================================================
   30. WHATSAPP HANDOFF
   ========================================================================= */

.wz-handoff {
	max-width: 620px;
	margin: 0 auto 44px;
	padding: 42px 40px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	border-top: 3px solid #25D366;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.wz-handoff__tick {
	display: inline-grid;
	place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: rgba(37, 211, 102, 0.12);
	color: #25D366;
	margin-bottom: 22px;
}

.wz-handoff h3 { font-size: 28px; margin-bottom: 14px; color: var(--wz-ink); }
.wz-handoff p { font-size: 15px; color: var(--wz-ink-soft); margin-bottom: 26px; }

.wz-handoff__btn { background: #25D366 !important; }
.wz-handoff__btn::before { background: var(--wz-ink) !important; }
.wz-handoff__btn:hover { color: #fff !important; }

.wz-handoff__note { margin: 20px 0 0 !important; font-size: 13px !important; color: var(--wz-ink-soft); }

@media (max-width: 640px) { .wz-handoff { padding: 32px 22px; } }

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { max-width: 760px; margin-inline: auto; }
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order .woocommerce-thankyou-order-details { display: none; }


/* =========================================================================
   31. MOBILE — menu, spacing, tap targets
   ========================================================================= */

@media (max-width: 1100px) {

	/* Header must sit above the overlay, not scroll away behind it. */
	.wz-header { z-index: 950; }
	.wz-mobile { z-index: 940; }

	.wz-header__inner { min-height: 66px; gap: 12px; }
	.wz-logo img { width: 148px; max-height: 40px; }

	.wz-actions { gap: 16px; }
	.wz-actions .wz-btn { display: none; }

	/* ---- Overlay ---- */

	.wz-mobile {
		top: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		overscroll-behavior: contain;
	}

	body.admin-bar .wz-mobile { top: 46px; }

	/* Space for the header, then the list scrolls inside the overlay
	   rather than scrolling the page behind it. */
	.wz-mobile > ul {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 82px 20px 8px;
		margin: 0;
	}

	body.wz-menu-open { position: fixed; width: 100%; overflow: hidden; }

	.wz-mobile > ul > li { border-bottom: 1px solid var(--wz-line); }

	.wz-mobile > ul > li > a {
		padding: 18px 44px 18px 0;
		font-size: 21px;
		line-height: 1.2;
	}

	/* Toggle aligned to the row it belongs to, not the list. */
	.wz-mobile__toggle {
		top: 8px;
		right: 0;
		width: 46px;
		height: 46px;
		display: grid;
		place-items: center;
		font-size: 26px;
		line-height: 1;
		font-family: var(--wz-ui);
		font-weight: 400;
	}

	.wz-mobile .sub-menu { padding: 0 0 14px 2px; }
	.wz-mobile .sub-menu a { padding: 11px 0; font-size: 15px; }

	/* ---- CTA block pinned to the bottom ---- */

	.wz-mobile__cta {
		flex: none;
		display: grid;
		gap: 10px;
		padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
		margin: 0;
		background: var(--wz-graphite);
		border-top: 1px solid var(--wz-line);
	}

	.wz-mobile__cta .wz-btn {
		width: 100%;
		justify-content: center;
		padding: 17px 20px;
		font-size: 13px;
		box-sizing: border-box;
	}
}


/* ---- Layout and type at phone widths ---- */

@media (max-width: 640px) {

	:root { --wz-gut: 18px; --wz-section: 60px; }

	.wz-hero { min-height: 78vh !important; padding-block: 60px; }
	.wz-hero h1 { max-width: none; }
	.wz-hero__mark { width: 78%; right: -22%; bottom: -12%; }

	/* Stacked, full-width buttons read better than two half-width ones */
	.wz-cta__row { flex-direction: column; align-items: stretch; gap: 10px; }
	.wz-cta__row .wz-btn { width: 100%; justify-content: center; }

	/* The shear costs too much vertical space on a phone */
	.wz-slice { clip-path: none; margin-block: 0; padding-block: var(--wz-section); }

	.wz-specbar > div {
		flex: 1 1 50%;
		border-left: 0;
		border-top: 1px solid var(--wz-line);
		padding: 16px 12px;
		font-size: 11px;
	}
	.wz-specbar > div:nth-child(-n+2) { border-top: 0; }

	.wz-stat__num { font-size: 40px; }
	.wz-stat__label { font-size: 10px; }

	.wz-card__body { padding: 22px; }
	.wz-planner { padding: 30px 20px; }
	.wz-contact__form { padding: 26px 20px; }

	.wz-footer { padding-top: 56px; }
	.wz-footer__cols { gap: 34px; padding-bottom: 40px; }
	.wz-footer__contact { gap: 14px; flex-direction: column; }
	.wz-footer__bar { flex-direction: column; gap: 8px; }

	/* Floating button must not cover the last CTA */
	.wz-float { width: 52px; height: 52px; right: 14px; bottom: 14px; }
	.wz-cta { padding-bottom: 90px; }
}


/* ---- WooCommerce at phone widths ---- */

@media (max-width: 640px) {

	.woocommerce div.product form.cart { flex-direction: column; }
	.woocommerce div.product form.cart .button,
	.woocommerce div.product form.cart .quantity { min-width: 0; width: 100%; }
	.woocommerce div.product form.cart .quantity input.qty { width: 100%; }

	.woocommerce-cart table.cart img { width: 56px; }
	.woocommerce-cart table.cart td.actions .button { width: 100%; }

	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { width: 100%; }

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2,
	.woocommerce-checkout #order_review { padding: 24px 20px; }

	.woocommerce-checkout #order_review { position: static; }

	/* Tables reflow to rows so nothing is cut off */
	.woocommerce table.shop_table_responsive tr td { text-align: right; padding: 12px 14px; }
	.woocommerce table.shop_table_responsive tr td::before { float: left; font-weight: 600; }
}


/* ---- Tap targets ---- */

@media (hover: none) {
	.wz-nav a,
	.wz-mobile a,
	.wz-footer li a { min-height: 44px; display: flex; align-items: center; }
	.wz-footer li a { min-height: 38px; }
}


/* =========================================================================
   32. VERIFICATION
   ========================================================================= */

.wz-verify {
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	border-left: 3px solid var(--wz-blue);
	padding: 36px 34px;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

/* The card is always white, so its text is always ink —
   independent of whether the section around it is dark or light. */
.wz-verify p,
.wz-verify .wz-muted { color: var(--wz-ink-soft); }
.wz-verify .wz-eyebrow { color: var(--wz-blue); }
.wz-verify .wz-eyebrow::before {
	background:
		linear-gradient(var(--wz-blue), var(--wz-blue)) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--wz-ink), var(--wz-ink)) 0 100% / 100% 1px no-repeat;
}
.wz-verify .wz-btn--ghost {
	color: var(--wz-ink);
	box-shadow: inset 0 0 0 1px var(--wz-ink-line);
}
.wz-verify .wz-btn--ghost:hover { color: #fff; }


.wz-verify__head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }

.wz-verify__seal {
	flex: none;
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	background: rgba(30, 144, 255, 0.1);
	color: var(--wz-blue);
	border-radius: 50%;
}

.wz-verify h4 { margin: 0; color: var(--wz-ink); }
.wz-verify .wz-spectable { margin-top: 22px; }
.wz-verify .wz-spectable th { color: var(--wz-ink-soft); width: 46%; }
.wz-verify .wz-spectable td { color: var(--wz-ink); font-family: var(--wz-ui); font-size: 14px; }

@media (max-width: 640px) { .wz-verify { padding: 26px 20px; } }

/* =========================================================================
   33. CATEGORY TILES
   These are navigation, not products — bigger imagery, no card chrome
   competing with the photograph.
   ========================================================================= */

.woocommerce ul.products li.product-category {
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	overflow: hidden;
	transition: border-color var(--wz-t), transform var(--wz-t), box-shadow var(--wz-t);
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.woocommerce ul.products li.product-category:hover {
	border-color: var(--wz-blue);
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(10, 15, 28, 0.10);
}

.woocommerce ul.products li.product-category > a {
	display: block;
	position: relative;
	height: 100%;
}

.woocommerce ul.products li.product-category a img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wz-paper-alt);
	padding: 0;
	margin: 0;
	transition: transform 0.5s var(--wz-ease);
}
.woocommerce ul.products li.product-category:hover a img { transform: scale(1.05); }

/* Title bar — dark ink on paper, and the count set apart from the name */
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 20px 22px;
	border-top: 1px solid var(--wz-ink-line);

	font-family: var(--wz-display);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--wz-ink);
}

.woocommerce ul.products li.product-category h2 mark,
.woocommerce ul.products li.product-category .count {
	background: none;
	flex: none;
	font-family: var(--wz-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wz-ink-soft);
}

/* A thin blue rule wipes across the title bar on hover */
.woocommerce ul.products li.product-category h2::after { content: none; }
.woocommerce ul.products li.product-category > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--wz-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s var(--wz-ease);
}
.woocommerce ul.products li.product-category:hover > a::after { transform: scaleX(1); }

/* Placeholder image shouldn't be a giant grey slab */
.woocommerce ul.products li.product-category a img[src*="woocommerce-placeholder"] {
	object-fit: contain;
	padding: 22%;
	opacity: 0.25;
}

@media (max-width: 640px) {
	.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
		font-size: 18px;
		padding: 16px 18px;
	}
}

/* =========================================================================
   34. PRODUCT TABS — light
   ========================================================================= */

body.woocommerce div.product .woocommerce-tabs ul.tabs,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs {
	border-bottom-color: var(--wz-ink-line);
	background: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wz-ink-soft) !important;
	text-shadow: none;
	font-weight: 600;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wz-ink) !important;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wz-ink) !important;
	border-bottom-color: var(--wz-blue);
}

/* Panel copy — body text on paper wants near-full contrast,
   not the muted grey used for captions. */
body.woocommerce div.product .woocommerce-tabs .panel,
body.woocommerce-page div.product .woocommerce-tabs .panel {
	color: #2B3440;
	max-width: 74ch;
	padding-top: 8px;
}

body.woocommerce div.product .woocommerce-tabs .panel p,
body.woocommerce div.product .woocommerce-tabs .panel li,
body.woocommerce-page div.product .woocommerce-tabs .panel p,
body.woocommerce-page div.product .woocommerce-tabs .panel li {
	color: #2B3440;
	font-size: 17px;
	line-height: 1.7;
}

body.woocommerce div.product .woocommerce-tabs .panel h2,
body.woocommerce-page div.product .woocommerce-tabs .panel h2 {
	color: var(--wz-ink);
	font-size: 26px;
	margin-bottom: 16px;
}

/* Woo's default tab chrome — rounded corners and pseudo-element
   curves that fight a squared design language. */
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

/* Static method cards are divs, so they miss the link colour */
.wz-light .wz-method strong,
.wz-method--static strong { color: var(--wz-blue); }

.wz-light .wz-method em,
.wz-method--static em { color: var(--wz-ink-soft); }

.wz-light .wz-method--static {
	background: #fff;
	border-color: var(--wz-ink-line);
}

/* Address runs long — let it breathe */
.wz-method--static em { line-height: 1.55; display: block; }

/* =========================================================================
   35. WHOLE-CARD LINKS
   The existing link is stretched over the card, so the entire tile is
   clickable while the anchor itself stays a real, focusable link.
   ========================================================================= */

.wz-card { position: relative; }

.wz-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wz-card:hover { cursor: pointer; }

/* Anything genuinely clickable inside the card must sit above the overlay */
.wz-card a:not(.wz-card__link),
.wz-card button { position: relative; z-index: 2; }

/* Keyboard focus should still outline the card, not just the small link */
.wz-card:focus-within {
	border-color: var(--wz-blue);
	outline: 2px solid var(--wz-blue);
	outline-offset: 2px;
}
.wz-card__link:focus-visible { outline: none; }

/* Phone field — tabular figures so a long number stays readable */
.wz-phone input,
#billing_phone {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}