/*
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;

	--jl-bg-dark: #070D18; /* Deepest Navy */
    --jl-bg-footer: #0B1426; /* Navy Blue */
    --jl-blue: #288BFF; /* Fresh Bright Blue */
    --jl-text-gray: #9BA4B5;

	--brand-dark: #0A0F1C;    /* Aapki theme ka original dark color */
    --brand-primary: #288BFF; /* Jo blue color aapne banner mein use kiya */
    --brand-text-muted: #8A94A6;
}

@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; }

/* =========================================================================
   37. TESTIMONIALS
   ========================================================================= */

.wz-tm {
	margin: 0;
	padding: 32px 30px;
	background: #fff;
	border: 1px solid var(--wz-ink-line);
	border-top: 2px solid var(--wz-blue);
	display: flex;
	flex-direction: column;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.wz-tm__quote {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	flex: 1;
}
.wz-tm__quote p {
	margin: 0 0 0.9em;
	font-size: 16px;
	line-height: 1.65;
	color: #2B3440;
}
.wz-tm__quote p:last-child { margin-bottom: 0; }

/* What was actually produced — the detail that makes it verifiable */
.wz-tm__produced {
	font-family: var(--wz-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wz-blue);
	padding: 10px 0 20px;
	border-top: 1px solid var(--wz-ink-line);
}

.wz-tm__who {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--wz-ink-line);
}
.wz-tm__produced + .wz-tm__who { border-top: 0; padding-top: 0; }

.wz-tm__who img,
.wz-tm__initial {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.wz-tm__initial {
	display: grid;
	place-items: center;
	background: var(--wz-paper-alt);
	color: var(--wz-ink-soft);
	font-family: var(--wz-display);
	font-size: 20px;
}

.wz-tm__who strong {
	display: block;
	font-size: 15px;
	color: var(--wz-ink);
	line-height: 1.3;
}
.wz-tm__who em {
	display: block;
	font-style: normal;
	font-size: 13px;
	color: var(--wz-ink-soft);
	margin-top: 3px;
}

.wz-tm__disclosure {
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--wz-ink-soft);
	font-style: italic;
}

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

.jl-pre-footer {
    background-color: var(--jl-bg-dark);
    padding: 60px 0;
    position: relative;
    z-index: 10;
    margin-bottom: -40px; 
}

.jl-cta-box {
    background-color: var(--jl-blue);
    border-radius: 8px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 35px rgba(40, 139, 255, 0.2);
}

.jl-cta-box h2 {
    color: #ffffff;
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 1px;
}

/* Styled Button */
.jl-btn-quote {
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.jl-btn-quote:hover {
    background: #ffffff;
    color: var(--jl-blue);
    border-color: #ffffff;
}

/* Footer Core */
.jl-footer {
    background-color: var(--jl-bg-footer);
    color: var(--jl-text-gray);
    padding: 80px 0 30px;
    font-family: 'Inter', sans-serif;
}

.jl-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.jl-footer-logo img {
    max-width: 180px;
    margin-bottom: 20px;
}

.jl-footer-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 90%;
}

/* Modern Social Icons */
.jl-social-icons {
    display: flex;
    gap: 12px;
}

.jl-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s ease;
}

.jl-social-icons a:hover {
    background: var(--jl-blue);
    border-color: var(--jl-blue);
    transform: translateY(-3px);
}

.jl-footer-heading {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Contact List */
.jl-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jl-contact-list li {
    display: flex;
    align-items: center; /* Center aligns icon with text */
    gap: 15px;
    margin-bottom: 18px;
    color: var(--jl-text-gray);
    font-size: 14px;
}

.jl-contact-list li svg {
    color: var(--jl-blue); /* Icons will be blue */
    flex-shrink: 0;
}

.jl-contact-list li a {
    color: var(--jl-text-gray);
    text-decoration: none;
    transition: color 0.3s;
}

.jl-contact-list li a:hover {
    color: #ffffff;
}

.jl-contact-list .jl-address {
    align-items: flex-start;
    line-height: 1.6;
}

.jl-contact-list .jl-address svg {
    margin-top: 3px;
}

/* Links */
.jl-footer__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jl-footer__links li {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 10px;
}

.jl-footer__links a {
    color: var(--jl-text-gray);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s;
    display: inline-block;
}

.jl-footer__links a:hover {
    color: var(--jl-blue);
    transform: translateX(5px); /* Premium sliding effect */
}

/* Bottom Bar */
.jl-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.jl-bottom-links {
    display: flex;
    gap: 20px;
}

.jl-bottom-links a {
    color: var(--jl-text-gray);
    text-decoration: none;
    transition: color 0.3s;
}

.jl-bottom-links a:hover {
    color: #ffffff;
}

/* Floating WhatsApp */
.jl-float-wa {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: transform 0.3s;
}
.jl-float-wa:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */

/* Tablet Portrait */
@media (max-width: 992px) {
    .jl-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .jl-footer__brand {
        grid-column: 1 / -1; /* Brand takes full width on top */
        max-width: 600px;
		justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .jl-pre-footer {
        padding: 40px 15px;
    }
    .jl-cta-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px 20px;
    }
    .jl-cta-box h2 {
        font-size: 26px;
    }
    .jl-footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center; /* Center text on mobile */
    }
    .jl-footer-desc {
        max-width: 100%;
        margin: 0 auto 25px auto;
    }
    .jl-social-icons {
        justify-content: center; /* Center icons on mobile */
    }
    .jl-contact-list li {
        justify-content: center; /* Center contact info */
    }
    .jl-footer__bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .jl-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    .jl-float-wa {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .jl-float-wa svg {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   FRONT PAGE - HERO & WHY US (YOUR COLOR SCHEME)
   ========================================================================== */

/* --- HERO SECTION --- */
.jl-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    padding: 100px 0;
}

.jl-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Dark gradient overlay matching your theme */
    background: linear-gradient(90deg, var(--brand-dark) 10%, rgba(10, 15, 28, 0.6) 100%);
    z-index: 1;
}

.jl-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 800px; /* Restrict width for left-alignment */
    margin: 0 auto;
    margin-left: 5%; /* Push slightly from left edge */
}

.jl-hero-eyebrow {
    color: var(--brand-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.jl-line {
    width: 40px;
    height: 2px;
    background-color: var(--brand-primary);
}

.jl-hero h1 {
    color: #ffffff;
    font-size: clamp(48px, 6vw, 72px);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.jl-text-accent {
    color: var(--brand-primary); /* The auto-highlighted word */
}

.jl-hero-desc p {
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.jl-hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.jl-dot {
    color: var(--brand-primary);
    font-size: 18px;
    line-height: 1;
}

.jl-cta__row {
    display: flex;
    gap: 20px;
}

.jl-btn-primary {
    background-color: var(--brand-primary);
    color: #ffffff;
    padding: 16px 32px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
}

.jl-btn-primary:hover {
    background-color: #ffffff;
    color: var(--brand-dark);
}

.jl-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 14px 32px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
}

.jl-btn-outline:hover {
    border-color: #ffffff;
    background-color: #ffffff;
    color: var(--brand-dark);
}

/* --- WHY US SECTION --- */
.jl-why-us {
    background-color: var(--brand-primary);
    padding: 80px 0;
    position: relative;
}

/* Arrow Pattern overlay on background (Optional modern touch) */
.jl-why-us::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 10px, transparent 10px, transparent 20px);
    pointer-events: none;
}

.jl-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.jl-why-content h2 {
    color: #ffffff;
    font-size: 42px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.jl-why-content p {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.jl-btn-white {
    display: inline-block;
    background-color: #ffffff;
    color: var(--brand-primary);
    padding: 14px 32px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s;
}

.jl-btn-white:hover {
    background-color: var(--brand-dark);
    color: #ffffff;
}

.jl-why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.jl-feature-box {
    background-color: var(--brand-dark);
    padding: 30px 25px;
    border-radius: 12px;
    display: flex;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}

.jl-feature-box:hover {
    transform: translateY(-5px);
}

.jl-fb-icon {
    color: var(--brand-primary);
    flex-shrink: 0;
}

.jl-fb-text h4 {
    color: #ffffff;
    font-size: 18px;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.jl-fb-text p {
    color: var(--brand-text-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {
    .jl-why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .jl-hero__inner {
        margin-left: 0;
        text-align: center;
    }
    .jl-hero-eyebrow, .jl-cta__row, .jl-hero-stats {
        justify-content: center;
    }
    .jl-line { display: none; }
}

@media (max-width: 768px) {
    .jl-why-features {
        grid-template-columns: 1fr;
    }
    .jl-hero { padding: 60px 0; }
    .jl-hero-stats {
        flex-direction: column;
        gap: 5px;
    }
    .jl-dot { display: none; }
}

/* ==========================================================================
   FRONT PAGE - CATEGORY GRIDS
   ========================================================================== */

.jl-category-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.jl-text-center {
    text-align: center;
}

.jl-section-title {
    color: var(--brand-dark);
    font-size: 38px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.jl-section-sub {
    color: var(--brand-text-muted);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px auto;
}

.jl-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Category Card Styling */
.jl-cat-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* Perfect rectangle proportion */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.jl-cat-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Gradient Overlay */
.jl-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 15, 28, 0.3) 0%, rgba(10, 15, 28, 0.7) 100%);
    transition: background 0.4s ease;
    z-index: 1;
}

.jl-cat-card h3 {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    margin: 0;
    padding: 0 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Makes text pop */
    transition: transform 0.4s ease;
}

/* Hover Effects */
.jl-cat-card:hover img {
    transform: scale(1.1); /* Smooth zoom */
}

.jl-cat-card:hover .jl-cat-overlay {
    background: linear-gradient(to bottom, rgba(10, 15, 28, 0.5) 0%, rgba(10, 15, 28, 0.85) 100%);
}

.jl-cat-card:hover h3 {
    transform: translateY(-5px); /* Text floats up slightly */
    color: var(--brand-primary);
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {
    .jl-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .jl-category-section {
        padding: 60px 0;
    }
    .jl-section-title {
        font-size: 32px;
    }
    .jl-cat-grid {
        grid-template-columns: 1fr;
    }
    .jl-cat-card h3 {
        font-size: 28px;
    }
}

/* ==========================================================================
   FACTS & FIGURES (KPIs)
   ========================================================================== */
.jl-facts-section {
    background-color: var(--brand-dark);
    padding: 80px 0;
}

.jl-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.jl-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 30px 0;
}

.jl-kpi-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.jl-kpi-icon {
    color: var(--brand-primary);
}

.jl-kpi-text h4 {
    color: #ffffff;
    font-size: 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    margin: 0 0 2px 0;
}

.jl-kpi-text span {
    color: var(--brand-text-muted);
    font-size: 13px;
    text-transform: uppercase;
}

.jl-facts-img-wrap {
    border-radius: 12px;
    overflow: hidden;
    height: 500px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.jl-facts-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   WE SHIP WORLDWIDE
   ========================================================================== */
.jl-shipping-section {
    background-color: #060a14; /* Slightly darker than brand-dark for contrast */
    padding: 80px 0;
    border-top: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
}

.jl-flags-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.jl-flag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.jl-flag-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
    transition: transform 0.3s, border-color 0.3s;
}

.jl-flag-item:hover img {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
}

.jl-flag-item span {
    color: var(--brand-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   HOW WE BUILD (PROCESS)
   ========================================================================== */
.jl-process-section {
    padding: 90px 0;
    background-color: #ffffff;
}

.jl-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
}

.jl-step-card {
    text-align: center;
}

.jl-step-img-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 25px auto;
}

.jl-step-img-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.jl-step-number {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--brand-primary);
    color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 3px solid #ffffff;
}

.jl-step-card h4 {
    color: var(--brand-dark);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.jl-step-card p {
    color: var(--brand-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .jl-facts-grid { grid-template-columns: 1fr; gap: 40px; }
    .jl-facts-img-wrap { height: 400px; }
    .jl-process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .jl-kpi-grid { grid-template-columns: 1fr; }
    .jl-process-grid { grid-template-columns: 1fr; }
    .jl-flags-grid { gap: 20px; }
    .jl-flag-item img { width: 50px; height: 50px; }
}

/* ==========================================================================
   INTRODUCTION (ABOUT) — FIXED BUTTON + RESPONSIVE
   ========================================================================== */

.jl-intro-section {
    padding: 100px 0;
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.jl-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    min-height: 520px;
}

/* Images column */
.jl-intro-images {
    position: relative;
    height: 520px;
    width: 100%;
}

.jl-img-large {
    position: absolute;
    right: 0;
    top: 40px;
    width: 78%;
    height: 85%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    z-index: 1;
    /* red/primary frame feel like screenshot */
    outline: 10px solid transparent;
}

.jl-img-small {
    position: absolute;
    left: 0;
    top: 0;
    width: 55%;
    height: 55%;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    z-index: 2;
    border: 6px solid #f8f9fa;
}

/* Content card */
.jl-intro-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    padding: 48px 44px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.jl-intro-badge {
    display: inline-block;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1.5px solid var(--brand-primary);
    padding: 6px 14px;
    border-radius: 4px;
    line-height: 1;
}

.jl-intro-card .jl-section-title {
    text-align: left;
    font-size: clamp(28px, 3vw, 36px);
    margin: 18px 0 18px 0;
    line-height: 1.15;
    color: var(--brand-dark);
}

.jl-intro-desc {
    color: var(--brand-text-muted);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 22px 0;
}

.jl-intro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}

.jl-intro-list li {
    font-size: 14px;
    color: var(--brand-dark);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.jl-dash {
    color: var(--brand-primary);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* ===== FIXED ABOUT US BUTTON ===== */
.jl-btn-about {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;

    background-color: var(--brand-primary);
    color: #ffffff !important;
    padding: 14px 28px;
    min-height: 48px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    border: none;
    box-shadow: 0 8px 20px rgba(40, 139, 255, 0.25);
    transition: all 0.3s ease;
}

.jl-btn-about svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.jl-btn-about span {
    display: inline-block;
    line-height: 1;
}

.jl-btn-about:hover {
    background-color: var(--brand-dark);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(10, 15, 28, 0.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .jl-intro-card {
        padding: 40px 32px;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .jl-intro-section {
        padding: 70px 0;
    }

    .jl-intro-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 30px;
    }

    /* stack: card first, then images */
    .jl-intro-card {
        order: 1;
        max-width: 100%;
        margin: 0 auto;
    }

    .jl-intro-images {
        order: 2;
        height: 380px;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    .jl-img-large {
        width: 72%;
        height: 80%;
        top: 30px;
        right: 10px;
    }

    .jl-img-small {
        width: 48%;
        height: 58%;
        left: 10px;
        top: 10px;
    }
}

@media (max-width: 600px) {
    .jl-intro-section {
        padding: 50px 0;
    }

    .jl-intro-card {
        padding: 28px 22px;
        border-radius: 12px;
    }

    .jl-intro-card .jl-section-title {
        font-size: 26px;
    }

    .jl-intro-images {
        height: 300px;
    }

    .jl-btn-about {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ==========================================================================
   TESTIMONIALS SECTION (PREMIUM B2B LOOK)
   ========================================================================== */
.jl-testimonials-section {
    padding: 100px 0;
    background-color: #f4f6f9; /* Subtle gray background to make white cards pop */
    border-top: 1px solid #e9ecef;
}

.jl-tm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.jl-tm-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 35px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    height: 100%;
}

.jl-tm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.jl-tm-quote-mark {
    position: absolute;
    top: 30px;
    right: 35px;
    color: var(--brand-primary);
    z-index: 1;
}

.jl-tm-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jl-tm-produced {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(40, 139, 255, 0.1); /* Light version of primary color */
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    align-self: flex-start; /* Keeps it tight */
    letter-spacing: 0.5px;
}

.jl-tm-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--brand-dark);
    margin-bottom: 30px;
    font-style: italic;
}

.jl-tm-text p {
    margin: 0 0 10px 0;
}
.jl-tm-text p:last-child {
    margin-bottom: 0;
}

/* Author Section - Pushed to bottom */
.jl-tm-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto; /* Pushes author to the bottom of the card */
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.jl-tm-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(40, 139, 255, 0.2);
}

.jl-tm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jl-tm-meta h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--brand-dark);
}

.jl-tm-meta span {
    display: block;
    font-size: 12px;
    color: var(--brand-text-muted);
    line-height: 1.4;
}

.jl-tm-disclosure {
    margin-top: 15px;
    font-size: 11px;
    color: #a0aec0;
    font-style: italic;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .jl-tm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .jl-tm-grid {
        grid-template-columns: 1fr;
    }
    .jl-tm-card {
        padding: 30px 25px;
    }
}

/* ==========================================================================
   ✨ ULTIMATE MOBILE RESPONSIVENESS - PERFECT CENTER ALIGNMENT
   ========================================================================== */

/* ================ TABLET (992px and below) ================ */
@media (max-width: 992px) {
    
    .wz-wrap {
        padding-inline: 20px;
    }

    /* Header Adjustments */
    .jl-topbar__inner {
        justify-content: space-between;
    }
    .jl-topbar__contact,
    .jl-navbar {
        display: none;
    }
    .jl-mobile-btn {
        display: block !important;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
    }
    .jl-mobile-btn i {
        display: block;
        width: 28px;
        height: 3px;
        background-color: #ffffff;
        margin: 6px 0;
        border-radius: 3px;
        transition: 0.3s;
    }

    /* Hero */
    .jl-hero__inner {
        margin-left: 0 !important;
        max-width: 100%;
        text-align: center;
    }
    .jl-hero-eyebrow,
    .jl-cta__row,
    .jl-hero-stats {
        justify-content: center;
    }

    /* Why Us Section - Single Column */
    .jl-why-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .jl-why-content h2,
    .jl-why-content p {
        text-align: center;
    }

    /* Facts & Figures - Stack */
    .jl-facts-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .jl-facts-img-wrap {
        height: 400px;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Category Grids - 2 columns */
    .jl-cat-grid,
    .jl-process-grid,
    .jl-tm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Intro Section - Stack */
    .jl-intro-grid {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 30px;
    }
    .jl-intro-card {
        order: 1;
        max-width: 100%;
        margin: 0 auto;
    }
    .jl-intro-images {
        order: 2;
        height: 400px;
        max-width: 550px;
        margin: 0 auto;
    }
}

/* ================ MOBILE (768px and below) ================ */
@media (max-width: 768px) {

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

    body {
        font-size: 16px;
    }

    .wz-wrap {
        padding-inline: 16px;
    }

    /* ==== HEADER FIXES ==== */
    .jl-topbar {
        padding: 12px 0;
    }
    .jl-logo img {
        max-height: 45px !important;
    }

    /* ==== HERO SECTION - Perfect Center ==== */
    .jl-hero {
        min-height: auto !important;
        padding: 70px 0 !important;
        background-attachment: scroll !important; /* Better mobile performance */
        text-align: center;
    }
    .jl-hero__inner {
        margin: 0 auto !important;
        padding: 0 10px;
        text-align: center;
        max-width: 100%;
    }
    .jl-hero-eyebrow {
        justify-content: center;
        font-size: 11px;
        letter-spacing: 1.5px;
    }
    .jl-line {
        display: none;
    }
    .jl-hero h1 {
        font-size: 36px !important;
        line-height: 1.15;
        margin-bottom: 20px;
    }
    .jl-hero-desc p {
        font-size: 15px;
        line-height: 1.7;
    }
    .jl-hero-stats {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 8px;
        font-size: 12px;
        border-bottom: none;
    }
    .jl-dot {
        display: none;
    }
    .jl-cta__row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .jl-btn-primary,
    .jl-btn-outline {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        display: block;
    }

    /* ==== WHY US SECTION ==== */
    .jl-why-us {
        padding: 60px 0;
    }
    .jl-why-grid {
        gap: 30px;
        text-align: center;
    }
    .jl-why-content h2 {
        font-size: 34px;
        text-align: center;
    }
    .jl-why-content p {
        text-align: center;
    }
    .jl-btn-white {
        display: block;
        text-align: center;
        margin: 0 auto;
        max-width: 260px;
    }
    .jl-why-features {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .jl-feature-box {
        flex-direction: row;
        text-align: left;
        gap: 15px;
        padding: 25px 20px;
    }

    /* ==== SECTION TITLES ==== */
    .jl-section-title {
        font-size: 32px !important;
        text-align: center;
        line-height: 1.2;
    }
    .jl-section-sub {
        font-size: 14px;
        padding: 0 10px;
        text-align: center;
    }

    /* ==== CATEGORY GRIDS - Single Column ==== */
    .jl-category-section {
        padding: 60px 0;
    }
    .jl-cat-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .jl-cat-card {
        aspect-ratio: 16 / 10; /* Better for mobile */
    }
    .jl-cat-card h3 {
        font-size: 26px;
    }

    /* ==== FACTS & FIGURES ==== */
    .jl-facts-section {
        padding: 60px 0;
        text-align: center;
    }
    .jl-facts-content {
        text-align: center;
    }
    .jl-facts-content .jl-hero-eyebrow {
        justify-content: center;
    }
    .jl-facts-content .jl-section-title {
        text-align: center !important;
    }
    .jl-kpi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: left;
    }
    .jl-kpi-item {
        justify-content: flex-start;
        max-width: 300px;
        margin: 0 auto;
        width: 100%;
    }
    .jl-facts-img-wrap {
        height: 300px;
    }
    .jl-facts-content a.jl-btn-primary {
        margin: 30px auto 0 !important;
        display: inline-flex !important;
        justify-content: center;
        font-size: 12px;
        padding: 14px 20px;
    }

    /* ==== SHIPPING WORLDWIDE ==== */
    .jl-shipping-section {
        padding: 60px 0;
    }
    .jl-flags-grid {
        gap: 20px 25px;
    }
    .jl-flag-item img {
        width: 50px;
        height: 50px;
    }
    .jl-flag-item span {
        font-size: 10px;
    }

    /* ==== PROCESS (HOW WE BUILD) ==== */
    .jl-process-section {
        padding: 60px 0;
    }
    .jl-process-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 350px;
        margin: 0 auto;
    }
    .jl-step-img-wrap {
        width: 180px;
        height: 180px;
    }

    /* ==== INTRODUCTION (ABOUT) ==== */
    .jl-intro-section {
        padding: 50px 0;
    }
    .jl-intro-card {
        padding: 30px 22px;
        border-radius: 12px;
        text-align: center;
    }
    .jl-intro-badge {
        margin: 0 auto;
    }
    .jl-intro-card .jl-section-title {
        text-align: center !important;
        font-size: 26px !important;
    }
    .jl-intro-desc {
        text-align: center;
    }
    .jl-intro-list {
        text-align: left;
        max-width: 320px;
        margin: 0 auto 25px auto;
    }
    .jl-intro-images {
        height: 320px;
        max-width: 100%;
    }
    a.jl-btn-about {
        width: 100%;
        max-width: 260px;
        margin: 0 auto !important;
    }

    /* ==== TESTIMONIALS ==== */
    .jl-testimonials-section {
        padding: 60px 0;
    }
    .jl-tm-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .jl-tm-card {
        padding: 30px 25px;
    }

    /* ==== FOOTER ==== */
    .jl-pre-footer {
        padding: 40px 15px;
    }
    .jl-cta-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px 20px;
    }
    .jl-cta-box h2 {
        font-size: 24px;
    }
    .jl-btn-quote {
        width: 100%;
        justify-content: center;
        max-width: 260px;
    }
    .jl-footer {
        padding: 60px 0 30px;
        text-align: center;
    }
    .jl-footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .jl-footer__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .jl-footer-desc {
        max-width: 100%;
        text-align: center;
        margin: 0 auto 25px;
    }
    .jl-social-icons {
        justify-content: center;
    }
    .jl-footer-heading {
        text-align: center;
    }
    .jl-contact-list li {
        justify-content: center;
    }
    .jl-contact-list .jl-address {
        justify-content: center;
        text-align: center;
    }
    .jl-footer__links a {
        text-align: center;
    }
    .jl-footer__bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .jl-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }

    /* ==== FLOATING WHATSAPP ==== */
    .jl-float-wa {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px;
    }
    .jl-float-wa svg {
        width: 26px;
        height: 26px;
    }

    /* ==== WOOCOMMERCE MOBILE ==== */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .woocommerce-products-header {
        text-align: center;
    }
    .woocommerce-products-header__title.page-title {
        font-size: 36px !important;
    }
    .woocommerce-cart .woocommerce {
        padding: 20px !important;
    }

    /* Cart Table Mobile */
    .woocommerce-cart table.shop_table {
        border-spacing: 0 10px;
    }
    .woocommerce-cart table.cart img {
        width: 60px !important;
    }
}

/* ================ SMALL MOBILE (480px and below) ================ */
@media (max-width: 480px) {

    .wz-wrap {
        padding-inline: 14px;
    }

    /* Hero */
    .jl-hero h1 {
        font-size: 30px !important;
    }
    .jl-hero-desc p {
        font-size: 14px;
    }

    /* Section Titles */
    .jl-section-title {
        font-size: 26px !important;
    }

    /* Category Cards */
    .jl-cat-card h3 {
        font-size: 22px;
    }

    /* Feature Boxes on Why Us */
    .jl-feature-box {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
    .jl-fb-icon {
        margin: 0 auto;
    }

    /* Why Us Heading */
    .jl-why-content h2 {
        font-size: 28px;
    }

    /* Facts */
    .jl-facts-img-wrap {
        height: 250px;
    }

    /* Process */
    .jl-step-img-wrap {
        width: 160px;
        height: 160px;
    }
    .jl-step-number {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    /* Intro */
    .jl-intro-card {
        padding: 25px 18px;
    }
    .jl-intro-images {
        height: 260px;
    }

    /* Footer */
    .jl-cta-box h2 {
        font-size: 20px;
    }
    .jl-bottom-links {
        font-size: 12px;
        gap: 10px 15px;
    }

    /* WooCommerce */
    .woocommerce-products-header__title.page-title {
        font-size: 30px !important;
    }
}

/* ================ EXTRA SMALL (360px and below) ================ */
@media (max-width: 360px) {
    .jl-hero h1 {
        font-size: 26px !important;
    }
    .jl-section-title {
        font-size: 24px !important;
    }
    .jl-why-content h2 {
        font-size: 26px;
    }
}

/* ==========================================================================
   ✨ PREMIUM WEBSITE LOADER
   ========================================================================== */

.jl-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--brand-dark) 0%, #060a14 100%);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    opacity: 1;
    visibility: visible;
}

/* Subtle animated pattern background */
.jl-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(40, 139, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(40, 139, 255, 0.05) 0%, transparent 50%);
    animation: jlLoaderBg 3s ease-in-out infinite alternate;
}

@keyframes jlLoaderBg {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.jl-loader-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* Logo with fade in animation */
.jl-loader-logo {
    animation: jlLogoFade 1.2s ease-in-out infinite alternate;
}

.jl-loader-logo img {
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(40, 139, 255, 0.3));
}

.jl-loader-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(40, 139, 255, 0.4);
}

@keyframes jlLogoFade {
    0% { opacity: 0.7; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* Circular Progress Spinner */
.jl-loader-spinner {
    width: 60px;
    height: 60px;
    position: relative;
}

.jl-loader-spinner svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.jl-loader-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 4;
}

.jl-loader-progress {
    fill: none;
    stroke: var(--brand-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: jlSpinProgress 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(40, 139, 255, 0.6));
}

@keyframes jlSpinProgress {
    0% {
        stroke-dashoffset: 283;
        transform: rotate(0deg);
    }
    50% {
        stroke-dashoffset: 75;
        transform: rotate(180deg);
    }
    100% {
        stroke-dashoffset: 283;
        transform: rotate(720deg);
    }
}

.jl-loader-spinner svg {
    animation: jlSpinRotate 2s linear infinite;
}

@keyframes jlSpinRotate {
    100% { transform: rotate(360deg); }
}

/* Loading Dots */
.jl-loader-dots {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.jl-loader-dots span {
    width: 8px;
    height: 8px;
    background: var(--brand-primary);
    border-radius: 50%;
    display: inline-block;
    animation: jlDotBounce 1.4s ease-in-out infinite both;
    box-shadow: 0 0 10px rgba(40, 139, 255, 0.5);
}

.jl-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.jl-loader-dots span:nth-child(2) { animation-delay: -0.16s; }
.jl-loader-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes jlDotBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hidden state (After page loads) */
.jl-loader.jl-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Prevent body scroll while loading */
body.jl-loading {
    overflow: hidden;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .jl-loader-logo img {
        max-width: 140px;
        max-height: 55px;
    }
    .jl-loader-text {
        font-size: 26px;
    }
    .jl-loader-spinner {
        width: 50px;
        height: 50px;
    }
}