/*
Theme Name: KS Gold
Theme URI: https://example.com/ksgold
Author: KS Gold
Description: Custom KS Gold theme. White layout, Montserrat font, gold & red accent colors, responsive layout.
Version: 1.5.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ksgold
*/

/* ==========================================================
   CONTENTS
   1.  Brand tokens
   2.  Global rules
   3.  Buttons & links
   4.  Header & navigation
   5.  Shared pieces (icons, labels, section heads, placeholders)
   6.  Home hero
   7.  Inner page hero + stats
   8.  Cards (features, services, mission, industries ...)
   9.  Icon list (industries, benefits)
   10. Product range (icon cards) + category grid
   11. Products (cards, products page, single product)
   11b. Why choose + video
   12. Sliders + testimonials
   13. Logos, promise banner, certificates
   14. Split content, downloads, offices
   15. Forms
   16. CTA band
   17. Default page / blog content
   18. Footer + back to top
   19. Responsive
   ========================================================== */

/* ==========================================================
   1. BRAND TOKENS & SYSTEM VARIABLES
   ========================================================== */
:root {
	--color-gold: #CE973E;        /* Primary gold */
	--color-gold-light: #E8B96A;  /* Accent gold */
	--color-dark: #191919;        /* Deep charcoal / text black */
	--color-white: #FFFFFF;       /* Pure white */
	--color-soft: #FBF7F0;        /* Soft cream section bg */
	--color-border: #EADFCB;      /* Brand border */
	--color-muted: #5A5A5A;       /* Secondary copy */
	--color-line: #E6DCCB;        /* Full-width line between sections */
	--color-gold-dark: #B9822F;   /* Gold hover */

	/* Brand Red Variations */
	--color-red: #D32F2F;         /* Primary brand red */
	--color-red-hover: #B71C1C;   /* Darker red hover */

	--font-main: 'Montserrat', sans-serif;

	--line-tight: 1.15;
	--line-body: 1.45;

	--radius: 8px;                /* Cards, inputs, tiles */
	--radius-lg: 12px;            /* Large boxes (stats, filter, forms) */
	--radius-pill: 50px;          /* Buttons */

	--section-gap: clamp(80px, 10vw, 112px);
	--container: 1200px;
	--gutter: 20px;
}

/* ==========================================================
   2. GLOBAL RULES & RESETS
   ========================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	box-shadow: none !important;
	text-shadow: none !important;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-main);
	font-size: 16px;
	line-height: var(--line-body);
	color: var(--color-dark);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-main);
	font-weight: 700;
	line-height: var(--line-tight);
	margin: 0 0 0.5em;
	color: var(--color-dark);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p { margin: 0 0 0.9em; }

a {
	color: var(--color-gold);
	text-decoration: none;
	transition: all .25s ease;
}
a:hover {
	color: var(--color-dark);
}

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

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.section {
	padding: var(--section-gap) 0;
}
.section--soft {
	background: var(--color-white);   /* Whole site is white; kept for older code */
}

/* A full-width line between every section (smart, modern look) */
.site-main > section + section,
.site-main > header + section,
.site-main > article > section {
	border-top: 1px solid var(--color-line);
}

/* Accessibility */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 10px; left: 10px; z-index: 1000;
	padding: 10px 16px;
	color: var(--color-white);
	background: var(--color-dark);
	border-radius: var(--radius);
}

/* ==========================================================
   3. BUTTONS & LINKS (ROUNDED & RED THEMED)
   ========================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 28px;
	font-family: var(--font-main);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
	background: var(--color-red);
	border: 2px solid var(--color-red);
	border-radius: var(--radius-pill); /* Pill Rounded Button */
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
}
.btn:hover {
	background: var(--color-red-hover);
	border-color: var(--color-red-hover);
	color: var(--color-white);
}

.btn--outline {
	background: transparent;
	color: var(--color-red);
	border-color: var(--color-red);
}
.btn--outline:hover {
	background: var(--color-red);
	color: var(--color-white);
}

.btn .ks-icon { width: 16px; height: 16px; color: currentColor; transition: transform .25s ease; }
.btn:hover .ks-icon { transform: translateX(3px); }
.btn .ks-icon--empty { display: none; }   /* No empty circle inside buttons */

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.section-actions { margin-top: 40px; text-align: center; }
.section-actions .btn-group { justify-content: center; }

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-red);
}
.text-link:hover { color: var(--color-red-hover); }
.text-link .ks-icon { width: 16px; height: 16px; color: currentColor; }

/* ==========================================================
   4. HEADER & NAVIGATION
   Desktop: animated underline + dropdown that fades and slides in.
   Mobile:  menu slides down, hamburger turns into an X.
   ========================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}
.admin-bar .site-header { top: 32px; }
/* Hide on scroll down, show on scroll up (class added by assets/js/main.js) */
.site-header { transition: transform .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.admin-bar .site-header.is-hidden { transform: translateY(calc(-100% - 32px)); }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
}
.site-branding .custom-logo { max-height: 56px; width: auto; }
.site-title { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-dark); }
.header-menu { display: flex; align-items: center; gap: 28px; }

/* ---------- Top level links ---------- */
.primary-nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}
.primary-nav .menu > li { position: relative; }          /* Anchor for the dropdown */
.primary-nav .menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 29px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-dark);
}

/* Gold underline grows from the left on hover / active page */
.primary-nav .menu > li > a::before {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 20px;
	height: 2px;
	background: var(--color-gold);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.primary-nav .menu > li:hover > a,
.primary-nav .menu > li:focus-within > a,
.primary-nav .menu > .current-menu-item > a,
.primary-nav .menu > .current-menu-ancestor > a { color: var(--color-gold); }
.primary-nav .menu > li:hover > a::before,
.primary-nav .menu > li:focus-within > a::before,
.primary-nav .menu > .current-menu-item > a::before,
.primary-nav .menu > .current-menu-ancestor > a::before { transform: scaleX(1); }

/* Small arrow next to items that have a dropdown (flips up when open) */
.primary-nav .menu > .menu-item-has-children > a::after {
	content: '';
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease, margin .3s ease;
}
.primary-nav .menu > .menu-item-has-children:hover > a::after,
.primary-nav .menu > .menu-item-has-children:focus-within > a::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* ---------- Dropdown panel ---------- */
.primary-nav .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 270px;
	margin: 0;
	padding: 10px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-gold);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.primary-nav .menu > li:hover > .sub-menu,
.primary-nav .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Dropdown items appear one after another */
.primary-nav .sub-menu li {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s ease, transform .25s ease;
}
.primary-nav .menu > li:hover > .sub-menu li,
.primary-nav .menu > li:focus-within > .sub-menu li {
	opacity: 1;
	transform: translateY(0);
}
.primary-nav .sub-menu li:nth-child(1) { transition-delay: .03s; }
.primary-nav .sub-menu li:nth-child(2) { transition-delay: .06s; }
.primary-nav .sub-menu li:nth-child(3) { transition-delay: .09s; }
.primary-nav .sub-menu li:nth-child(4) { transition-delay: .12s; }
.primary-nav .sub-menu li:nth-child(5) { transition-delay: .15s; }
.primary-nav .sub-menu li:nth-child(6) { transition-delay: .18s; }
.primary-nav .sub-menu li:nth-child(7) { transition-delay: .21s; }
.primary-nav .sub-menu li:nth-child(8) { transition-delay: .24s; }

.primary-nav .sub-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--color-dark);
	border-radius: var(--radius);
}
/* Small dot before each dropdown link */
.primary-nav .sub-menu a::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	background: var(--color-border);
	border-radius: 50%;
	transition: background .2s ease, transform .2s ease;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	padding-left: 18px;
	color: var(--color-gold);
	background: var(--color-soft);
}
.primary-nav .sub-menu a:hover::before,
.primary-nav .sub-menu .current-menu-item > a::before {
	background: var(--color-gold);
	transform: scale(1.3);
}

/* ---------- Mobile toggle (hamburger) ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle__label {
	display: none;
	width: 44px;
	height: 44px;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--color-dark);
	border-radius: var(--radius);
	transition: border-color .3s ease;
}
.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-dark);
	border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease, background .3s ease;
}

@media (max-width: 960px) {
	.nav-toggle__label { display: flex; }

	/* Hamburger turns into an X when open */
	.nav-toggle:checked + .nav-toggle__label { border-color: var(--color-gold); }
	.nav-toggle:checked + .nav-toggle__label .nav-toggle__bar { background: var(--color-gold); }
	.nav-toggle:checked + .nav-toggle__label .nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle:checked + .nav-toggle__label .nav-toggle__bar:nth-child(3) { opacity: 0; }
	.nav-toggle:checked + .nav-toggle__label .nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

	/* Menu panel slides down */
	.header-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		padding: 8px var(--gutter) 24px;
		background: var(--color-white);
		border-bottom: 3px solid var(--color-gold);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .3s ease, transform .3s ease, visibility .3s;
	}
	.nav-toggle:checked ~ .header-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-nav .menu { flex-direction: column; gap: 0; }
	.primary-nav .menu > li > a {
		justify-content: space-between;
		padding: 14px 4px;
		border-bottom: 1px solid var(--color-border);
	}
	.primary-nav .menu > li > a::before,
	.primary-nav .menu > .menu-item-has-children > a::after { display: none; }

	/* Sub-menu always open on mobile, with a gold line on the left */
	.primary-nav .sub-menu {
		position: static;
		min-width: 0;
		margin: 8px 0 8px 4px;
		padding: 4px 0 4px 12px;
		background: transparent;
		border: 0;
		border-left: 2px solid var(--color-gold);
		border-radius: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.primary-nav .sub-menu li { opacity: 1; transform: none; }
	.primary-nav .sub-menu a { padding: 9px 10px; }
	.primary-nav .sub-menu a:hover { padding-left: 14px; }

	.header-cta { width: 100%; margin-top: 20px; }
}

/* Visitors who prefer less motion get no animation */
@media (prefers-reduced-motion: reduce) {
	.primary-nav *,
	.header-menu,
	.nav-toggle__bar { transition: none !important; }
}

/* ==========================================================
   5. SHARED PIECES
   ========================================================== */

/* Icons: built-in SVG (colour = CSS color) or uploaded image */
.ks-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--color-gold);
	object-fit: contain;
}
.ks-icon--empty { border: 2px solid var(--color-gold-light); border-radius: 50%; }

/* Small label above headings */
.eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold);
}

/* Section heading (centered, like the cards) */
.section-head {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}
.section-head h2 { margin-bottom: 12px; }
.section-head p { margin: 0; font-size: 1.05rem; color: var(--color-muted); }

/* Heading on the left, link on the right */
.section-head--split {
	max-width: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	text-align: left;
}
.section-head--split h2 { margin-bottom: 0; }

/* Shown until an image is uploaded */
.media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 24px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--color-muted);
	background: var(--color-soft);
	border: 1px dashed var(--color-gold);
	border-radius: var(--radius);
}
.empty-note {
	padding: 20px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--color-muted);
	background: var(--color-soft);
	border: 1px dashed var(--color-gold);
	border-radius: var(--radius);
}

/* ==========================================================
   6. HERO SECTION (HOME TOP HERO)
   Background image: Customize > KS Gold Settings > Images & Files > Home Hero Background
   The photo is shown as is (no overlay).
   ========================================================== */
.hero-home {
	position: relative;
	display: flex;                                       /* Centre the content vertically */
	align-items: center;
	min-height: calc(100vh - 80px);                      /* Full screen minus the 80px header */
	min-height: calc(100svh - 80px);                     /* Mobile browsers: ignore the address bar */
	padding: 60px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	background-color: var(--color-dark);                 /* Fallback: white text stays readable */
	background-image: var(--hero-bg, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.hero-home > .container { width: 100%; }
.admin-bar .hero-home { min-height: calc(100vh - 112px); min-height: calc(100svh - 112px); } /* Logged in: minus admin bar */

.hero-home h1,
.hero-home h2,
.hero-home h3 {
	color: #FFFFFF;
}
.hero-home .eyebrow {
	color: var(--color-gold-light);
}
.hero-home .lead {
	max-width: 560px;
	margin-bottom: 30px;
	font-size: 1.1rem;
	color: #D1D5DB;
}
.hero-home__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
}
.hero-home__media img { width: 100%; height: auto; }
.hero-home .media-placeholder {
	color: #E5E7EB;
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-gold-light);
}
.hero-home .btn--outline {
	color: #FFFFFF;
	border-color: #FFFFFF;
}
.hero-home .btn--outline:hover {
	background: #FFFFFF;
	color: var(--color-dark);
	border-color: #FFFFFF;
}
.hero-home .stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 48px;
	background: rgba(25, 25, 25, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(206, 151, 62, 0.4);
	border-radius: var(--radius-lg);
}
.hero-home .stat {
	padding: 22px 24px;
	border-right: 1px solid rgba(206, 151, 62, 0.25);
	text-align: center;
}
.hero-home .stat:last-child { border-right: 0; }
.hero-home .stat__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-gold-light);
}
.hero-home .stat__label {
	font-size: 0.85rem;
	color: #E5E7EB;
}

/* ==========================================================
   7. INNER PAGE HERO (Industries, Quality, About, Contact, Products)
   ========================================================== */
.page-hero {
	padding: var(--section-gap) 0 calc(var(--section-gap) * 0.6);
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
}
.page-hero h1 { max-width: 860px; margin: 0; }
.page-hero__text { max-width: 720px; margin: 16px 0 28px; font-size: 1.08rem; color: var(--color-muted); }

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 48px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.stat { padding: 22px 24px; border-right: 1px solid var(--color-border); text-align: center; }
.stat:last-child { border-right: 0; }
.stat__value { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--color-gold); }
.stat__label { font-size: 0.85rem; color: var(--color-muted); }

/* With background photo (Customize > Images & Files > Inner Page Hero Background): no overlay, white text */
.page-hero--image {
	background-color: var(--color-dark);
	background-image: var(--hero-bg, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-bottom: 0;
}
.page-hero--image h1 { color: #FFFFFF; }
.page-hero--image .eyebrow { color: var(--color-gold-light); }
.page-hero--image .page-hero__text { color: #D1D5DB; }
.page-hero--image .btn--outline { color: #FFFFFF; border-color: #FFFFFF; }
.page-hero--image .btn--outline:hover { color: var(--color-dark); background: #FFFFFF; border-color: #FFFFFF; }
.page-hero--image .stats {
	background: rgba(25, 25, 25, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-color: rgba(206, 151, 62, 0.4);
}
.page-hero--image .stat { border-right-color: rgba(206, 151, 62, 0.25); }
.page-hero--image .stat:last-child { border-right: 0; }
.page-hero--image .stat__value { color: var(--color-gold-light); }
.page-hero--image .stat__label { color: #E5E7EB; }

/* ==========================================================
   8. CARDS: WHAT WE DO / CORE FEATURES (CENTER ALIGNED)
   ========================================================== */
.cards {
	display: grid;
	gap: 24px;
}
.cards + .cards { margin-top: 24px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	padding: 36px 28px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
	text-align: center;              /* Middle / Center alignment */
	display: flex;
	flex-direction: column;
	align-items: center;             /* Centers icons and headings */
}
.card:hover {
	border-color: var(--color-gold);
	transform: translateY(-4px);
}
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	background: var(--color-soft);
	border-radius: 50%;              /* Round icon wrapper */
	transition: background .3s ease;
}
.card__icon .ks-icon {
	width: 30px;
	height: 30px;
	color: var(--color-gold);        /* Gold icon */
}
.card:hover .card__icon { background: var(--color-gold); }
.card:hover .card__icon .ks-icon { color: var(--color-white); }

.card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--color-gold);
	border: 2px solid var(--color-gold);
	border-radius: 50%;
	transition: all .3s ease;
}
.card:hover .card__num { color: var(--color-white); background: var(--color-gold); }

/* Mission / Vision cards: gold by default.
   Hover: red spreads out in a circle from the icon, a light shine passes
   across the card, the icon lifts and a ring slowly draws itself around it. */
.cards--filled .card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 55%, var(--color-gold-dark) 100%);
	border-color: var(--color-gold);
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), border-color .6s ease;
}
.cards--filled .card::before {                       /* Red layer: grows as a circle from the icon */
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, #E53935 0%, var(--color-red) 50%, var(--color-red-hover) 100%);
	clip-path: circle(0% at 50% 68px);
	transition: clip-path .7s cubic-bezier(.4, 0, .2, 1);
}
.cards--filled .card::after {                        /* Light shine that sweeps across */
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
	transition: left .9s cubic-bezier(.4, 0, .2, 1);
}

.cards--filled .card__title { color: var(--color-white); }
.cards--filled .card__text { color: rgba(255, 255, 255, 0.92); }
.cards--filled .card__icon {
	position: relative;
	background: var(--color-white);
	border: 0;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
@property --ks-ring {                                /* Lets the ring angle animate */
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
.cards--filled .card__icon::before {                 /* Ring that draws itself around the icon */
	content: '';
	position: absolute;
	inset: -9px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	-webkit-mask: conic-gradient(#000 var(--ks-ring), transparent 0);
	mask: conic-gradient(#000 var(--ks-ring), transparent 0);
	transition: --ks-ring 1.4s cubic-bezier(.4, 0, .2, 1);   /* 1.4s = slow, smooth reveal */
}
.cards--filled .card__icon .ks-icon { color: var(--color-gold-dark); transition: color .5s ease; }

/* Hover */
.cards--filled .card:hover { transform: translateY(-6px); border-color: var(--color-red); }
.cards--filled .card:hover::before { clip-path: circle(150% at 50% 68px); }
.cards--filled .card:hover::after { left: 130%; }
.cards--filled .card:hover .card__icon {
	background: var(--color-white);
	transform: translateY(-4px) scale(1.06);
}
.cards--filled .card:hover .card__icon::before { --ks-ring: 360deg; }   /* Ring fills all the way round */
.cards--filled .card:hover .card__icon .ks-icon { color: var(--color-red); }

@media (prefers-reduced-motion: reduce) {
	.cards--filled .card,
	.cards--filled .card::before,
	.cards--filled .card::after,
	.cards--filled .card__icon,
	.cards--filled .card__icon::before { transition: none; animation: none; }
}

.card__title {
	margin-bottom: 12px;
	font-size: 1.15rem;
}
.card__text {
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-muted);
	line-height: 1.6;
}

.card__meta {
	width: 100%;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	font-size: 0.88rem;
}
.card__meta strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold);
}

.tags {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.tags li {
	padding: 5px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-dark);
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

/* ==========================================================
   9. ICON LIST (Industries We Empower, Benefits)
   ========================================================== */
.icon-list { display: grid; gap: 16px; }
.icon-list--3 { grid-template-columns: repeat(3, 1fr); }
.icon-list--4 { grid-template-columns: repeat(4, 1fr); }
.icon-list--5 { grid-template-columns: repeat(5, 1fr); }
.icon-list--6 { grid-template-columns: repeat(6, 1fr); }

.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 26px 16px;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
}
.icon-item:hover { border-color: var(--color-gold); transform: translateY(-3px); }
.icon-item .ks-icon {
	width: 52px;
	height: 52px;
	padding: 12px;
	background: var(--color-soft);
	border-radius: 50%;
}
.section--soft .icon-item .ks-icon { background: var(--color-soft); }

/* ==========================================================
   10. PRODUCT RANGE (DYNAMIC AUTO-FIT GRID) + CATEGORY GRID
   ========================================================== */
.range-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 32px;
}
.range-cat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.range-cat:hover { border-color: var(--color-gold); color: var(--color-gold); }
.range-cat .ks-icon {
	width: 40px;
	height: 40px;
	padding: 8px;
	background: var(--color-soft);
	border-radius: 50%;
}
.range-cat .range-cat__arrow {
	width: 16px;
	height: 16px;
	padding: 0;
	margin-left: auto;
	background: none;
	color: var(--color-red);
}

/* Icon cards: icon on top, name below. Hover = gold fills up from the bottom (fast). */
.range-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.range-card {
	position: relative;
	flex: 0 1 calc((100% - 80px) / 5);   /* 5 per row; the last row is centred */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 180px;
	padding: 30px 16px;
	overflow: hidden;
	text-align: center;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color .25s ease, transform .25s ease;
}
.range-card::before {                    /* Gold fill layer */
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-gold);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .25s ease;
}
.range-card > * { position: relative; z-index: 1; }
.range-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	background: var(--color-soft);
	border-radius: 50%;
	transition: background .25s ease, transform .25s ease;
}
.range-card__icon .ks-icon { width: 32px; height: 32px; color: var(--color-gold); transition: color .25s ease; }
.range-card__name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; transition: color .25s ease; }

.range-card:hover { border-color: var(--color-gold); transform: translateY(-4px); color: var(--color-white); }
.range-card:hover::before { transform: scaleY(1); }
.range-card:hover .range-card__icon { background: rgba(255, 255, 255, 0.18); transform: translateY(-3px); }
.range-card:hover .range-card__icon .ks-icon { color: var(--color-white); }
.range-card:hover .range-card__name { color: var(--color-white); }

/* Auto-fit layout: Add as many tiles as you want, they will wrap gracefully */
.range-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
}
.range-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.range-tile img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .4s ease;
}
.range-tile:hover img {
	transform: scale(1.05);
}
.range-tile .media-placeholder { aspect-ratio: 3 / 4; border: 0; border-radius: 0; }
.range-tile__title {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 16px 18px;
	font-size: 1rem;
	color: var(--color-dark);
	background: var(--color-white);
	border-top: 2px solid var(--color-gold);
	text-align: center;
}

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 20px;
	text-align: center;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
}
.cat-card:hover { border-color: var(--color-gold); color: var(--color-dark); transform: translateY(-3px); }
.cat-card .ks-icon { width: 56px; height: 56px; padding: 13px; background: var(--color-soft); border-radius: 50%; }
.cat-card__name { font-weight: 700; }
.cat-card__count { font-size: 0.85rem; color: var(--color-muted); }

/* ==========================================================
   11. PRODUCTS: CARDS, PRODUCTS PAGE, SINGLE PRODUCT
   ========================================================== */
.product-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.product-grid::before,
.product-grid::after { display: none !important; }      /* Remove WooCommerce clearfix */
.product-grid__item { margin: 0; }

.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
}
.product-card:hover { border-color: var(--color-gold); transform: translateY(-4px); }
.product-card__media { display: block; padding: 20px; background: var(--color-soft); }
.product-card__media img {
	width: 100%;
	aspect-ratio: 600 / 778;
	object-fit: contain;
	transition: transform .4s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.product-card__cat {
	margin-bottom: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold);
}
.product-card__title { margin-bottom: 8px; font-size: 1rem; line-height: 1.3; }
.product-card__title a { color: var(--color-dark); }
.product-card__title a:hover { color: var(--color-gold); }
.product-card__size {
	align-self: flex-start;
	margin-bottom: 16px;
	padding: 3px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}
.product-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-red);
}
.product-card__link:hover { color: var(--color-red-hover); }
.product-card__link .ks-icon { width: 16px; height: 16px; color: currentColor; transition: transform .25s ease; }
.product-card__link:hover .ks-icon { transform: translateX(3px); }

/* Products page layout */
.products-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
.products-main .product-grid { grid-template-columns: repeat(3, 1fr); }

.filter-box {
	position: sticky;
	top: 110px;
	padding: 26px;
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.filter-box__title { margin-bottom: 4px; font-size: 1.05rem; }
.filter-box__text { font-size: 0.85rem; color: var(--color-muted); }
.filter-box label { display: block; margin: 16px 0 6px; font-size: 0.85rem; font-weight: 600; }
.filter-box .btn { width: 100%; margin-top: 20px; }

.products-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.products-toolbar .woocommerce-result-count { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
.products-toolbar .woocommerce-ordering { margin: 0; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 48px; text-align: left; }
.woocommerce nav.woocommerce-pagination ul { display: flex; gap: 8px; margin: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	padding: 10px 14px;
	font-weight: 600;
	color: var(--color-dark);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	color: var(--color-white);
	background: var(--color-red);
	border-color: var(--color-red);
}

/* Single product */
.single-product div.product .product_title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.single-product div.product div.images {
	padding: 24px;
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.ks-size {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 16px;
	font-size: 0.95rem;
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}
.single-product .product_meta {
	margin-top: 16px;
	padding-top: 14px;
	font-size: 0.9rem;
	border-top: 1px solid var(--color-border);
}
.woocommerce div.product .woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.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 {
	margin: 0;
	padding: 0;
	background: var(--color-red);
	border: 0;
	border-radius: var(--radius-pill);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 10px 24px; color: var(--color-white); }
.woocommerce div.product .woocommerce-tabs .panel {
	padding: 32px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.related.products { margin-top: var(--section-gap); clear: both; }
.related.products > h2 { margin-bottom: 32px; text-align: center; }

/* ==========================================================
   11b. WHY CHOOSE + VIDEO (reasons left, video right)
   Video: Customize > KS Gold Settings > Images & Files > Why Choose Video
   ========================================================== */
.feature-video {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}
.feature-video--no-media { grid-template-columns: 1fr; }
.feature-video .section-head { max-width: none; margin: 0 0 32px; text-align: left; }
.feature-video .cards { gap: 16px; }
.feature-video .card {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 20px;
	text-align: left;
}
.feature-video .card__num {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	margin: 0;
	font-size: 1rem;
}
.feature-video .card__title { margin-bottom: 6px; font-size: 1.02rem; }
.feature-video .card__text { font-size: 0.9rem; line-height: 1.5; }
.feature-video__media video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--color-dark);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-lg);
}

/* ==========================================================
   12. SLIDERS & TESTIMONIALS (ROUNDED AVATAR, STARS)
   ========================================================== */
.slider__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 40px;
}
.slider__head .section-head { margin: 0; text-align: left; }
.slider__nav {
	display: flex;
	gap: 12px;
}
/* Arrow buttons completely round */
.slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;              /* Round Arrow Buttons */
	cursor: pointer;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-dark);
	transition: all 0.25s ease;
}
.slider__btn:hover {
	color: var(--color-white);
	background: var(--color-red);
	border-color: var(--color-red);
}
.slider__btn .ks-icon {
	width: 18px;
	height: 18px;
	color: currentColor;
}
.slider__btn--prev .ks-icon { transform: rotate(180deg); }

/* Track scroll container */
.slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gold) transparent;
	padding-bottom: 15px;
}
.slider__track[data-count="2"] { grid-auto-columns: calc((100% - 24px) / 2); }
.slider__track[data-count="1"] { grid-auto-columns: 100%; }
.slider__track--4 { grid-auto-columns: calc((100% - 72px) / 4); }
.slider__track::-webkit-scrollbar {
	height: 6px;
}
.slider__track::-webkit-scrollbar-thumb {
	background: var(--color-gold);
	border-radius: 10px;
}
.slider__track > * {
	scroll-snap-align: start;
}

.testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}
.section--soft .testimonial { background: var(--color-white); }

/* Star rating */
.stars {
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
}
.stars .ks-icon {
	width: 18px;
	height: 18px;
	color: #FFB300;                  /* Bright gold star */
}

.testimonial blockquote {
	flex: 1;
	margin: 0 0 24px;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--color-muted);
}
.testimonial__author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
}

/* Avatar completely round */
.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;              /* Round Avatar */
	font-weight: 700;
	color: var(--color-white);
	background: var(--color-gold);
	overflow: hidden;
}
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.testimonial__name {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
}
.testimonial__role {
	font-size: 0.82rem;
	color: var(--color-muted);
}

/* ==========================================================
   13. LOGOS, PROMISE BANNER, CERTIFICATES
   ========================================================== */
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.logo-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color .3s ease;
}
.logo-grid__item:hover { border-color: var(--color-gold); }
.logo-grid__item img { max-height: 60px; width: auto; object-fit: contain; }

.promise-banner { margin-top: 48px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.promise-banner img { width: 100%; }

.cert {
	margin: 0;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color .3s ease;
}
.cert:hover { border-color: var(--color-gold); }
.cert img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; }
.cert figcaption { margin-top: 12px; text-align: center; font-weight: 600; font-size: 0.9rem; }

/* ==========================================================
   14. SPLIT CONTENT, DOWNLOADS, OFFICES
   ========================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__caption {
	position: absolute;
	left: 20px; right: 20px; bottom: 20px;
	padding: 22px 24px;
	background: var(--color-white);
	border-left: 4px solid var(--color-gold);
	border-radius: var(--radius);
}
.split__caption h3 { margin-bottom: 4px; }
.split__caption p { margin: 0; font-size: 0.92rem; color: var(--color-muted); }
.split__content p { color: var(--color-muted); }
.split__content .cards { margin-top: 28px; }

.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.download {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
}
.download:hover { border-color: var(--color-gold); color: var(--color-dark); transform: translateY(-3px); }
.download .ks-icon { width: 52px; height: 52px; padding: 12px; background: var(--color-soft); border-radius: 50%; }
.download strong { display: block; }
.download small { color: var(--color-red); font-weight: 600; }

.offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.office {
	padding: 32px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-gold);
	border-radius: var(--radius);
}
.office__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	background: var(--color-soft);
	border-radius: 50%;
}
.office__icon .ks-icon { width: 26px; height: 26px; }
.office__address { display: block; margin-bottom: 16px; font-style: normal; color: var(--color-muted); }
.office__lines { list-style: none; margin: 0; padding: 0; }
.office__lines li { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.office__lines a { color: var(--color-dark); }
.office__lines a:hover { color: var(--color-gold); }
.office .ks-icon { width: 20px; height: 20px; }

/* ==========================================================
   15. FORMS (enquiry form + product filter + sorting)
   ========================================================== */
.form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	max-width: 860px;
	margin: 0 auto;
	padding: 36px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__field--full { grid-column: 1 / -1; }
.form__field label { font-size: 0.85rem; font-weight: 600; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form input,
.form select,
.form textarea,
.filter-box input,
.filter-box select,
.woocommerce-ordering select,
.search-field {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--font-main);
	font-size: 0.95rem;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid #CFC6B6;
	border-radius: var(--radius);
	outline: none;
	transition: border-color .2s ease;
}
.woocommerce-ordering select { width: auto; padding: 10px 14px; }
.form input:focus,
.form select:focus,
.form textarea:focus,
.filter-box input:focus,
.filter-box select:focus,
.search-field:focus { border-color: var(--color-gold); }
.form textarea { min-height: 160px; resize: vertical; }

.notice {
	max-width: 860px;
	margin: 0 auto 24px;
	padding: 14px 18px;
	font-weight: 600;
	border-left: 4px solid;
	border-radius: var(--radius);
}
.notice--success { background: #EEF7EE; border-color: #2F7D32; }
.notice--error { background: #FBEEED; border-color: var(--color-red); }

/* ==========================================================
   16. CTA BAND (RED BG + WHITE BUTTON)
   ========================================================== */
.cta-band {
	padding: calc(var(--section-gap) * 0.7) 0;
	background: var(--color-red);    /* Background Red */
	color: var(--color-white);
}
.cta-band__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
}
.cta-band h2 {
	margin-bottom: 8px;
	color: var(--color-white);       /* White text */
}
.cta-band p {
	max-width: 640px;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.05rem;
}
/* White button with red hover */
.cta-band .btn {
	background: var(--color-white);
	color: var(--color-red);
	border-color: var(--color-white);
}
.cta-band .btn:hover {
	background: var(--color-red-hover);
	color: var(--color-white);
	border-color: var(--color-white);
}

/* ==========================================================
   17. DEFAULT PAGE / BLOG CONTENT (page.php, index.php)
   ========================================================== */
.entry-content { max-width: 860px; }
.entry-content > * + * { margin-top: 0.9em; }
.entry-content h2,
.entry-content h3 { margin-top: 1.6em; }
.entry-content ul,
.entry-content ol { padding-left: 1.2em; }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	font-style: italic;
	border-left: 3px solid var(--color-gold);
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td { padding: 10px 14px; text-align: left; border: 1px solid var(--color-border); }
.entry-content th { background: var(--color-soft); }

.page-thumbnail { margin-bottom: 40px; overflow: hidden; border-radius: var(--radius-lg); }

.alignwide { max-width: 1100px; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text,
figcaption { font-size: 0.85rem; color: var(--color-muted); margin-top: 6px; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all .3s ease;
}
.post-card:hover { border-color: var(--color-gold); transform: translateY(-4px); }
.post-card__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.post-card__meta { margin-bottom: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold); }
.post-card__title { margin-bottom: 10px; font-size: 1.15rem; }
.post-card__title a { color: var(--color-dark); }
.post-card__title a:hover { color: var(--color-gold); }
.post-card__excerpt { font-size: 0.95rem; color: var(--color-muted); }
.post-card__more { margin-top: auto; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-red); }

.pagination { margin-top: 56px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	min-width: 44px;
	padding: 10px 14px;
	text-align: center;
	font-weight: 600;
	color: var(--color-dark);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { color: var(--color-white); background: var(--color-red); border-color: var(--color-red); }

.search-form { display: flex; gap: 10px; max-width: 520px; margin-top: 24px; }
.search-form label { flex: 1; }
.search-submit {
	padding: 0 24px;
	font-family: var(--font-main);
	font-weight: 600;
	color: var(--color-white);
	background: var(--color-red);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
}

/* ==========================================================
   18. FOOTER & CONTACT
   ========================================================== */
.site-footer {
	background: var(--color-white);
	border-top: 3px solid var(--color-gold);
	padding-top: var(--section-gap);
	font-size: 0.92rem;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.4fr 0.8fr;
	gap: 40px;
	padding-bottom: 56px;
}
.footer-brand .custom-logo { max-height: 64px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 300px; color: var(--color-muted); }

.footer-title {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-dark);
	margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--color-dark); }
.site-footer a:hover { color: var(--color-gold); }

/* Contact list (phones, email) */
.footer-list li,
.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--color-dark);
}
.footer-list .ks-icon,
.footer-contact-list .ks-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-gold);
}

/* Office addresses */
.footer-office__country { margin: 14px 0 6px; font-size: 0.85rem; font-weight: 700; }
.footer-office__country:first-of-type { margin-top: 0; }
.footer-office { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; color: var(--color-muted); }
.footer-office .ks-icon { width: 20px; height: 20px; margin-top: 1px; color: var(--color-gold); }

/* Social links */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}
.footer-social a:hover { color: var(--color-white); background: var(--color-gold); border-color: var(--color-gold); }
.footer-social .ks-icon { width: 16px; height: 16px; color: currentColor; }

.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding: 22px 0;
	font-size: 0.82rem;
	color: var(--color-muted);
	text-align: center;
}

/* Back to top */
.back-to-top {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	color: var(--color-white);
	background: var(--color-gold);
	border-radius: 50%;
}
.back-to-top:hover { color: var(--color-white); background: var(--color-red); }
.back-to-top .ks-icon { width: 20px; height: 20px; color: currentColor; }

/* ==========================================================
   19. RESPONSIVE QUERIES
   ========================================================== */
@media (max-width: 1100px) {
	.range-card { flex-basis: calc((100% - 40px) / 3); }
	.icon-list--5,
	.icon-list--6 { grid-template-columns: repeat(3, 1fr); }
	.range-cats { grid-template-columns: repeat(2, 1fr); }
	.logo-grid { grid-template-columns: repeat(4, 1fr); }
	.product-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
	.hero-home__inner,
	.split,
	.feature-video { grid-template-columns: 1fr; gap: 40px; }
	.feature-video__media { order: -1; }   /* Video on top on tablets / phones */
	.cards--3,
	.cards--4,
	.icon-list--4 { grid-template-columns: repeat(2, 1fr); }
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.product-grid,
	.products-main .product-grid { grid-template-columns: repeat(2, 1fr); }
	.products-layout { grid-template-columns: 1fr; }
	.filter-box { position: static; }
	.slider__track,
	.slider__track--4,
	.slider__track[data-count="2"] { grid-auto-columns: calc((100% - 24px) / 2); }
	.stats,
	.hero-home .stats { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(2),
	.hero-home .stat:nth-child(2) { border-right: 0; }
	.stat:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
	.hero-home .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(206, 151, 62, 0.25); }
	.page-hero--image .stat:nth-child(2) { border-right: 0; }
	.page-hero--image .stat:nth-child(-n+2) { border-bottom-color: rgba(206, 151, 62, 0.25); }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
	.range-card { flex-basis: calc((100% - 20px) / 2); min-height: 150px; }
	.cards--2,
	.cards--3,
	.cards--4,
	.icon-list--3,
	.icon-list--4,
	.range-cats,
	.offices,
	.form,
	.footer-grid { grid-template-columns: 1fr; }
	.icon-list--5,
	.icon-list--6,
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.logo-grid { grid-template-columns: repeat(3, 1fr); }
	.product-grid,
	.products-main .product-grid { grid-template-columns: 1fr; }
	.slider__track,
	.slider__track--4,
	.slider__track[data-count="2"] { grid-auto-columns: 100%; }
	.section-head--split,
	.slider__head { flex-direction: column; align-items: flex-start; }
	.form { padding: 24px; }
	.split__caption { left: 12px; right: 12px; bottom: 12px; }
	.admin-bar .site-header { top: 0; }
}

/* ==== OEM logos: match Autostar layout ==== */
.logo-grid{gap:0;align-items:stretch;justify-items:stretch;}
.logo-grid__item{aspect-ratio:auto;min-height:130px;padding:24px 16px;background:none;border:0;border-radius:0;box-shadow:none;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;}
.logo-grid__item:hover{border-color:#dcdcdc;}
.logo-grid__item:nth-child(6n){border-right:0;}
.logo-grid__item:nth-last-child(-n+6){border-bottom:0;}
.logo-grid__item img{width:96px;height:auto;max-height:none;object-fit:cover;}
@media (max-width:1100px){
  .logo-grid__item:nth-child(6n){border-right:1px solid #dcdcdc;}
  .logo-grid__item:nth-child(4n){border-right:0;}
  .logo-grid__item:nth-last-child(-n+6){border-bottom:1px solid #dcdcdc;}
  .logo-grid__item:nth-last-child(-n+4){border-bottom:0;}
  .logo-grid__item img{width:80px;}
}
@media (max-width:640px){
  .logo-grid__item{min-height:100px;padding:16px 10px;}
  .logo-grid__item:nth-child(4n){border-right:1px solid #dcdcdc;}
  .logo-grid__item:nth-child(3n){border-right:0;}
  .logo-grid__item:nth-last-child(-n+4){border-bottom:1px solid #dcdcdc;}
  .logo-grid__item:nth-last-child(-n+3){border-bottom:0;}
  .logo-grid__item img{width:64px;}
}
/* ==== /OEM logos ==== */

/* ==========================================================
   20. DISTRIBUTOR / CONVERSION ADDITIONS (v1.5.0)
   ========================================================== */

/* Product range: 4 per row (8 categories = 2 even rows) */
.range-grid--4 .range-card { flex-basis: calc((100% - 60px) / 4); }
@media (max-width: 1100px) {
	.range-grid--4 .range-card { flex-basis: calc((100% - 20px) / 2); }
}

/* Outline button inside the red CTA band */
.cta-band .btn--outline {
	background: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
}
.cta-band .btn--outline:hover {
	background: var(--color-white);
	color: var(--color-red);
	border-color: var(--color-white);
}

/* Product card: viscosity / specification labels */
.product-card__specs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
}
.product-card__specs li {
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-gold-dark);
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-pill);
}

/* Single product: Request a Quote / WhatsApp / data sheet buttons */
.ks-product-actions { margin: 20px 0 28px; }
.ks-product-actions .btn-group { flex-wrap: wrap; }

/* Floating WhatsApp button (bottom-left; back-to-top is bottom-right) */
.whatsapp-float {
	position: fixed;
	left: 20px; bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: 0.85rem;
	font-weight: 700;
	color: #FFFFFF;
	background: #1FA855;
	border-radius: var(--radius-pill);
}
.whatsapp-float:hover { color: #FFFFFF; background: #178A45; }
.whatsapp-float .ks-icon { width: 22px; height: 22px; color: currentColor; }
@media (max-width: 640px) {
	.whatsapp-float { padding: 12px; }
	.whatsapp-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ==========================================================
   21. CTA BAND TEXTURE (premium feel on the large red bands)
   Layers: soft light from top-right, deeper shade bottom-left,
   fine diagonal brushed lines, film grain, thin gold edge lines.
   ========================================================== */
.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-red);
	background-image:
		radial-gradient(120% 160% at 88% -10%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(90% 140% at -5% 110%, rgba(60, 0, 0, 0.38) 0%, rgba(60, 0, 0, 0) 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 8px);
	border-top: 3px solid var(--color-gold);
	border-bottom: 3px solid var(--color-gold);
}
.site-main > section.cta-band { border-top: 3px solid var(--color-gold); }   /* Beats the grey line between sections */
.cta-band::before {                                   /* Film grain */
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.22;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-band::after {                                    /* Large faint gold ring on the right */
	content: '';
	position: absolute;
	top: 50%;
	right: -120px;
	z-index: -1;
	width: 420px;
	height: 420px;
	transform: translateY(-50%);
	pointer-events: none;
	border: 1px solid rgba(232, 185, 106, 0.35);
	border-radius: 50%;
	box-shadow: 0 0 0 40px rgba(232, 185, 106, 0.06), 0 0 0 80px rgba(232, 185, 106, 0.035);
}