/*!
Theme Name: Avenir Solutions
Theme URI: http://underscores.me/
Author: Mahendra Kumbhar
Author URI: https://mahendrakumbhar.com/
Description: This is a custom theme byAvenir Solutions. The theme lets you create a responsive website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content\'s layout with a full-width page template and a contributor page to show off your authors. Creating a website with WordPress has never been easier.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: avenir-solutions
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Avenir Solutions is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Google Fonts
# Reset / Normalize
# Variables
# Typography
# Layout
# Grid System
# Utilities
# Header
# Navigation
# Buttons
# Forms
# Cards
# Hero
# Blog
# Footer
# ABI Electrical Design System
# WordPress
# WooCommerce
# Animations
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Google Fonts
--------------------------------------------------------------
Not loaded here on purpose - avenir_solutions_enqueue_google_fonts()
in inc/customizer.php already enqueues whichever Heading / Body /
Monospace fonts are selected in the Customizer (Typography section),
so the font actually loaded always matches what's set there instead
of being hard-coded twice.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Reset / Normalize
--------------------------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
img {
	max-width: 100%;
	display: block;
}
ul {
	list-style: none;
}
section {
	position: relative;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
}
main {
	display: block;
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}
a {
	background-color: transparent;
}
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}
b,
strong {
	font-weight: bolder;
}
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
img {
	border-style: none;
}
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}
button,
input {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}
fieldset {
	padding: 0.35em 0.75em 0.625em;
}
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}
progress {
	vertical-align: baseline;
}
textarea {
	overflow: auto;
}
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}
details {
	display: block;
}
summary {
	display: list-item;
}
template {
	display: none;
}
[hidden] {
	display: none;
}

/* Box sizing */
*,
*::before,
*::after {
	box-sizing: inherit;
}
html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	/* Colors */
	--color-primary: #0a58a3;
	--color-secondary: #00a859;
	--color-accent: #e6a800;
	--color-background: #ffffff;
	--color-text: #404040;
	--color-headings: #222222;
	--color-link: var(--color-primary);
	--color-link-hover: #191970;
	--color-link-visited: var(--color-secondary);

	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-danger: #dc3545;
	--color-info: #17a2b8;

	--color-light: #f8f9fa;
	--color-dark: #343a40;
	--color-surface: #ffffff;
	--color-muted: #6c757d;

	--color-border: #cccccc;
	--color-border-light: #e5e5e5;


	/* Border Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-pill: 50rem;
	--radius-circle: 50%;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
	--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
	--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
	--shadow-xl: 0 20px 50px rgba(0,0,0,0.2);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-normal: 300ms ease-in-out;
	--transition-slow: 500ms ease-in-out;

	/* Layout */
	--header-height: 80px;
	--footer-height: 200px;

	--container-max-width: 1280px;
	--container-padding: 1.5rem;
	--container-sm: 540px;
	--container-md: 720px;
	--container-lg: 960px;

	/* Typography */
	--font-headings: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	/* --font-display and --font-mono are not set here - inc/customizer.php
	   outputs both (plus live overrides of --font-headings/--font-body and
	   every --color-* / --primary / --ink / --steel etc. token above) in a
	   <style> block later in <head>, so those values always win. These are
	   just safe static fallbacks for the brief moment before that block
	   would apply, or if it's ever removed. */

	--font-size-base: 1rem;
	--font-size-small: 0.875rem;
	--font-size-large: 1.125rem;

	/* Spacing scale (1 = 0.25rem = 4px) */
	--spacer: 0.25rem;
	--spacing-0: 0;
	--spacing-1: calc(var(--spacer) * 1);
	--spacing-2: calc(var(--spacer) * 2);
	--spacing-3: calc(var(--spacer) * 3);
	--spacing-4: calc(var(--spacer) * 4);
	--spacing-5: calc(var(--spacer) * 6);

	/* Z-index */
	--z-index-dropdown: 99999;
	--z-index-skip-link: 100000;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html {
	font-size: 16px;
}
body {
	color: var(--color-text);
	background: var(--color-background);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: var(--font-headings);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-headings);
	margin-top: 0;
	margin-bottom: 1.5rem;
}
h1 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
}
h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);
	font-weight: 600;
}
h3 {
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
	font-weight: 600;
}
h4 {
	font-size: clamp(1.25rem, 2.5vw, 1.8rem);
	font-weight: 500;
}
h5 {
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 500;
}
h6 {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 500;
}

p {
	margin-bottom: 1.5rem;
}
a {
	color: var(--color-link);
	text-decoration: underline;
	transition: color var(--transition-normal);
}
a:visited {
	color: var(--color-link-visited);
}
a:hover,
a:focus {
	color: var(--color-link-hover);
	text-decoration: none;
}
a:focus {
	outline: thin dotted;
}

/* ABI link treatment - overrides the underlined-blue link above for
   everywhere in the design (nav, footer, cards, buttons already have
   their own explicit colours regardless). Plain-text page/article
   content gets its underline back further down, since inherited-colour
   links with no underline are hard to spot inside running text. */
a {
	color: inherit;
	text-decoration: none;
}
.page-copy a,
.article-body a {
	color: var(--primary);
	text-decoration: underline;
}
.page-copy a:hover,
.article-body a:hover {
	color: var(--secondary);
}

/* ABI heading treatment - overrides font-family/weight/tracking above,
   font-size per level (h1-h6) still comes from the base rule. */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.container,
.wrap {
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
	clear: both;
}

/*--------------------------------------------------------------
# Grid System
--------------------------------------------------------------*/
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(-1 * var(--spacing-2));
	margin-right: calc(-1 * var(--spacing-2));
}
.row > * {
	padding-left: var(--spacing-2);
	padding-right: var(--spacing-2);
}

/* Simple grid */
.grid {
	display: grid;
	gap: var(--spacing-4);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* ABI section-heading building blocks - used throughout the design
   system further down (products, why-us, services, clients,
   testimonials all open with an .eyebrow + .section-head pair). */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--secondary);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--secondary);
	display: inline-block;
}
.section-head {
	max-width: 640px;
	margin-bottom: 48px;
}
.section-head h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	color: var(--primary-dark);
}
.section-head p {
	color: var(--steel);
	font-size: 16px;
	margin-top: 14px;
}

/* Display */
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-block { display: block; }

/* Flex */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.flex-wrap { flex-wrap: wrap; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font weights */
.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-bold { font-weight: 700; }

/* Spacing (margin & padding) */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }

.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }

.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }

.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Rounded */
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-circle { border-radius: var(--radius-circle); }

/* Shadow */
.shadow { box-shadow: var(--shadow-md); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Positioning */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.sticky-top { position: sticky; top: 0; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------
Retargeted from the ABI stylesheet's plain `header` / `.nav-bar`
selectors onto the actual classes header.php outputs, so the same
design applies without changing the template markup.
--------------------------------------------------------------*/
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--header-z, 500);
	height: auto;
	background: var(--header-bg-color, var(--white, var(--color-background)));
	border-bottom: 1px solid var(--border, var(--color-border-light));
	padding-top: var(--header-padding-top, 0);
	padding-bottom: var(--header-padding-bottom, 0);
	border-radius: var(--header-border-radius, 0);
}
.header-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 16px var(--container-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.site-header .main-navigation {
	float: none;
	width: auto;
	clear: none;
	padding-right: 0;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
}
.logo-container { max-width: 230px; }
.logo-container img { max-width: 230px; height: auto; }

.header-phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--primary-dark);
	font-weight: 600;
}
.header-phone i { color: var(--secondary); }
.menu-toggle {
	background: none;
	border: none;
	font-size: 22px;
	color: var(--primary-dark);
	cursor: pointer;
	display: none;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
	display: block;
	width: 100%;
}
.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding-left: 0;
	gap:1rem;
}
.main-navigation ul ul {
	box-shadow: var(--shadow-md);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: var(--z-index-dropdown);
}
.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}
.main-navigation ul ul a {
	width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}
.main-navigation li {
	position: relative;
}
.main-navigation a {display: block;	text-decoration: none; color:var(--color-primary); text-transform:uppercase; font-family: var(--nav-font-family, var(--font-body));}

.menu-toggle,
.main-navigation.toggled ul {
	display: none;
}
.main-navigation a::after {content: ''; position: absolute; bottom: 0; left: 0;width: 0; height: 3px; background:var(--color-secondary);  transition: width 0.3s ease;}

.main-navigation a:hover::after {  width: 100%;}

@media (max-width: 767px) {
	.main-navigation {
		position: fixed;
		top: 77px;
		left: 0;
		right: 0;
		background: var(--white, var(--color-background));
		border-top: 1px solid var(--border, var(--color-border-light));
		border-bottom: 1px solid var(--border, var(--color-border-light));
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	/* navigation.js toggles .toggled on #site-navigation - reuse that
	   instead of ABI's original .open, so no JS changes are needed. */
	.main-navigation.toggled {
		max-height: 560px;
	}
	.main-navigation.toggled ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.main-navigation ul li {
		width: 100%;
	}
	.main-navigation a {
		width: 100%;
		padding: 14px 24px;
		border-bottom: 1px solid var(--border, var(--color-border-light));
	}
	.header-phone span { display: none; }
	.menu-toggle { display: block; }
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	padding: 14px 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: middle;
	user-select: none;
}
.btn:hover,
.btn:focus {
	text-decoration: none;
}
.btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--secondary);
	color: var(--white);
	border-color: var(--secondary);
}
.btn-primary:hover {
	background: color-mix(in srgb, var(--secondary) 85%, black);
	border-color: color-mix(in srgb, var(--secondary) 85%, black);
	color: var(--white);
}

.btn-secondary {
	background: var(--color-secondary);
	color: #fff;
	border-color: var(--color-secondary);
}
.btn-secondary:hover {
	background: #5a005a;
	border-color: #5a005a;
	color: #fff;
}

.btn-accent {
	background: var(--color-accent);
	color: #222;
	border-color: var(--color-accent);
}
.btn-accent:hover {
	background: #c49000;
	border-color: #c49000;
}

.btn-dark {
	border-color: var(--primary-dark);
	color: var(--primary-dark);
	background: transparent;
}
.btn-dark:hover {
	background: var(--primary-dark);
	color: var(--white);
}
.btn-block { width: 100%; justify-content: center; }

.btn-light {
	background: var(--color-light);
	color: #222;
	border-color: #ddd;
}
.btn-light:hover {
	background: #e2e6ea;
}

.btn-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--white);
}
.btn-outline:hover {
	border-color: var(--white);
	background: rgba(255, 255, 255, .08);
}

.btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: #fff;
}
.btn-outline-light:hover {
	background: #fff;
	color: #222;
}

.btn-sm {
	padding: 0.3rem 0.8rem;
	font-size: 0.875rem;
}
.btn-lg {
	padding: 0.8rem 2rem;
	font-size: 1.125rem;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/* Base input styles */
.form-control {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-input-text);
	background: var(--color-input-bg);
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
	color: var(--color-input-focus-text);
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(65,105,225,0.25);
}
.form-control.is-valid {
	border-color: var(--color-success);
}
.form-control.is-invalid {
	border-color: var(--color-danger);
}

/* Floating labels */
.form-floating {
	position: relative;
	margin-bottom: 1.5rem;
}
.form-floating > .form-control {
	height: calc(3.5rem + 2px);
	padding: 1rem 0.75rem;
}
.form-floating > label {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding: 1rem 0.75rem;
	pointer-events: none;
	border: 1px solid transparent;
	transform-origin: 0 0;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	color: var(--color-muted);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
	opacity: 0.65;
	transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control::placeholder {
	color: transparent;
}

/* Checkbox & Radio */
.form-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--color-primary);
	cursor: pointer;
}
.form-check label {
	cursor: pointer;
}

/* Select */
.form-select {
	display: block;
	width: 100%;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-input-text);
	background: var(--color-input-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
	border: 1px solid var(--color-input-border);
	border-radius: var(--radius-sm);
	appearance: none;
}
.form-select:focus {
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(65,105,225,0.25);
}

/* Validation feedback */
.invalid-feedback {
	display: none;
	width: 100%;
	margin-top: 0.25rem;
	font-size: 0.875em;
	color: var(--color-danger);
}
.is-invalid ~ .invalid-feedback {
	display: block;
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-normal);
}
.card:hover {
	box-shadow: var(--shadow-md);
}
.card-header {
	padding: 0.75rem 1.25rem;
	margin-bottom: 0;
	background: var(--color-light);
	border-bottom: 1px solid var(--color-border-light);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.card-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}
.card-footer {
	padding: 0.75rem 1.25rem;
	background: var(--color-light);
	border-top: 1px solid var(--color-border-light);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------
Nothing else in the theme referenced .hero/.hero-title/.hero-subtitle,
so this is ABI's full-bleed video hero design in full, not a partial
override.
--------------------------------------------------------------*/
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;background:var(--primary-dark);color:var(--white);overflow:hidden;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,45,.94) 10%,rgba(10,22,45,.72) 48%,rgba(14,42,79,.55) 100%);}
.hero-content{position:relative;z-index:2;width:100%;padding:120px 24px 0;}
.hero-inner{max-width:1240px;margin:0 auto;}
.hero-text{max-width:680px;}
.hero-text .eyebrow{color:var(--secondary);}
.hero-text h1{font-size:clamp(34px,5.2vw,58px);margin-bottom:20px;}
.hero-text h1 em{font-style:normal;color:#7fd8a8;}
.hero-text p{font-size:17px;color:#cfd9ea;max-width:540px;margin-bottom:34px;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;}

.meter-strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);background:rgba(8,17,34,.55);backdrop-filter:blur(6px);}
.meter-grid{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);}
.meter{padding:22px 24px;border-left:1px solid rgba(255,255,255,.14);}
.meter:first-child{border-left:none;padding-left:0;}
.meter .led{width:7px;height:7px;background:var(--secondary);display:inline-block;margin-right:8px;box-shadow:0 0 0 3px rgba(14,156,84,.22);}
.meter .value{font-family:var(--font-mono);font-size:clamp(20px,2.6vw,28px);font-weight:600;color:var(--white);}
.meter .label{font-size:12px;color:#a9b7cf;letter-spacing:.03em;margin-top:4px;}
@media(max-width:760px){.meter-grid{grid-template-columns:repeat(2,1fr);}.meter{border-left:none;border-top:1px solid rgba(255,255,255,.14);padding:18px 0;}.meter:nth-child(odd){padding-right:16px;}.meter:nth-child(even){padding-left:16px;border-left:1px solid rgba(255,255,255,.14);}.meter:first-child,.meter:nth-child(2){border-top:none;}}

/* Interior page banner (about/products/contact/blog headers) */
.page-hero{position:relative;background:var(--primary-dark);color:var(--white);padding:170px 0 70px;overflow:hidden;}
.page-hero .grid-overlay{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:42px 42px;}
.page-hero .wrap{position:relative;z-index:2;}
.breadcrumb{font-family:var(--font-mono);font-size:12.5px;color:#9fb0cc;display:flex;align-items:center;gap:8px;margin-bottom:22px;letter-spacing:.03em;}
.breadcrumb a:hover{color:var(--secondary);}
.breadcrumb i{font-size:9px;color:#5c73a0;}
.page-hero h1{font-size:clamp(32px,4.6vw,48px);max-width:760px;}
.page-hero p.lead{color:#cfd9ea;font-size:16.5px;max-width:600px;margin-top:16px;}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.entry-title {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.entry-meta {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin-bottom: 1rem;
}
.entry-content {
	margin:	0;
}
.page-copy {
	max-width: 800px;
	margin: 60px auto;
	padding: 0 24px;
}
.page-copy > *:first-child { margin-top: 0; }
.sticky {
	display: block;
}
.updated:not(.published) {
	display: none;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	background: var(--footer-bg-color, #0d1a30);
	color: var(--footer-text-color, #a9b7cf);
	padding: 80px 0 0;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .brand-text .name{color:var(--white);}
.footer-brand p{font-size:13.5px;margin:18px 0 20px;line-height:1.7;}
.footer-social{display:flex;gap:12px;}
.footer-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:14px;}
.footer-social a:hover{border-color:var(--secondary);color:var(--secondary);}
.site-footer h4{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:20px;}
.site-footer ul li{margin-bottom:12px;font-size:14px;}
.site-footer ul li a:hover{color:var(--secondary);}
.footer-contact li{display:flex;gap:12px;margin-bottom:16px;font-size:13.5px;}
.footer-contact i{color:var(--secondary);margin-top:3px;}
.footer-map{border:1px solid rgba(255,255,255,.15);height:150px;overflow:hidden;margin-top:6px;}
.footer-map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05);}
.footer-bottom{padding:24px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-widgets {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding) 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-4, 2rem);
}
.footer-widget-column .footer-widget-title {
	font-family: var(--font-headings);
	font-size: var(--font-size-large);
	margin-bottom: var(--spacing-2, 0.5rem);
}
.footer-widget-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-navigation {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	text-align: center;
}
.footer-navigation .footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
	gap: 1.5rem;
}
.footer-navigation .footer-menu a {
	text-decoration: none;
}
.site-footer .site-info {
    font-family: var(--footer-font-family, var(--font-body));
    font-size: var(--footer-font-size, var(--font-size-small));
    color: var(--footer-text-color, var(--color-muted));
    text-align: center;
    padding: 1rem 0;
}
.site-footer .site-info a {
    color: var(--footer-link-color, var(--color-accent));
    text-decoration: none;
}
.site-footer .site-info a:hover {
    color: var(--footer-link-hover-color, var(--color-accent));
    text-decoration: underline;
}
/*--------------------------------------------------------------
# ABI Electrical Design System
--------------------------------------------------------------
New component classes with no equivalent anywhere above (cert
strip, about, why-us, products, filters, services, clients,
process, testimonials, CTA banner, floating actions, forms,
contact/product-detail/blog page layouts, article body). None of
these class names collide with the base theme, so nothing here
was renamed. header/nav/buttons/hero/footer were merged in place
further up instead, since those DID collide with base classes.

Note: these classes aren't output by any .php template yet - the
CSS is ready, but header.php/footer.php/page templates still need
updating to actually print this markup. See chat for details.
--------------------------------------------------------------*/

/* ---------- Certification strip ---------- */
.cert-strip{background:var(--porcelain);border-bottom:1px solid var(--border);padding:26px 0;}
.cert-strip .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.cert-strip .cert-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);}
.cert-items{display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.cert-items div{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:13px;color:var(--primary-dark);font-weight:600;}
.cert-items i{color:var(--secondary);font-size:15px;}

/* ---------- About / framed media ---------- */
.about{padding:100px 0;}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.framed-media{position:relative;padding:18px;}
.framed-media::before,.framed-media::after{content:"";position:absolute;width:34px;height:34px;border:2px solid var(--secondary);}
.framed-media::before{top:0;left:0;border-right:none;border-bottom:none;}
.framed-media::after{bottom:0;right:0;border-left:none;border-top:none;}
.framed-media img{width:100%;height:420px;object-fit:cover;}
.pd-image-placeholder{width:100%;height:420px;display:flex;align-items:center;justify-content:center;background:var(--porcelain);color:var(--border);font-size:48px;}
.plate-tag{position:absolute;left:36px;bottom:36px;background:var(--primary-dark);color:var(--white);padding:12px 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;}
.plate-tag strong{color:#7fd8a8;display:block;font-size:14px;margin-bottom:2px;}

.about-copy h2{font-size:clamp(28px,3.4vw,38px);color:var(--primary-dark);margin-bottom:20px;}
.about-copy p{color:var(--steel);margin-bottom:16px;font-size:15.5px;}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.about-stats div{border-top:2px solid var(--primary);padding-top:12px;}
.about-stats .num{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--primary-dark);}
.about-stats .lbl{font-size:13px;color:var(--steel);margin-top:2px;}
@media(max-width:900px){.about .wrap{grid-template-columns:1fr;gap:40px;}.framed-media img{height:320px;}}

/* ---------- Why us / feature strip ---------- */
.why{background:var(--primary-dark);padding:90px 0;color:var(--white);}
.why .section-head h2{color:var(--white);}
.why .section-head p{color:#a9b7cf;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16);}
.why-item{padding:34px 28px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);}
.why-item .icon-box{width:46px;height:46px;border:1px solid var(--secondary);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.why-item i{color:var(--secondary);font-size:19px;}
.why-item h3{font-size:17px;margin-bottom:10px;}
.why-item p{font-size:14px;color:#a9b7cf;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* ---------- Products ---------- */
.products{padding:100px 0;background:var(--white);}
.products-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:50px;}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.product-card{position:relative;padding:16px 16px 22px;border:1px solid var(--border);transition:border-color .2s ease;}
.product-card:hover{border-color:var(--primary);}
.product-card::before,.product-card::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--secondary);border-style:solid;opacity:0;transition:opacity .2s ease;}
.product-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.product-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.product-card:hover::before,.product-card:hover::after{opacity:1;}
.product-img{position:relative;height:190px;overflow:hidden;margin-bottom:18px;background:var(--porcelain);}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-card:hover .product-img img{transform:scale(1.05);}
.spec-tag{position:absolute;top:10px;left:10px;background:var(--primary-dark);color:#7fd8a8;font-family:var(--font-mono);font-size:11px;padding:5px 9px;letter-spacing:.03em;}
.product-card h3{font-size:17.5px;color:var(--primary-dark);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.product-card h3 .led{width:6px;height:6px;background:var(--secondary);display:inline-block;flex-shrink:0;}
.product-card p{font-size:13.5px;color:var(--steel);margin-bottom:16px;}
.product-link{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:7px;letter-spacing:.02em;}
.product-card:hover .product-link{color:var(--secondary);}
.product-link i{font-size:11px;transition:transform .2s ease;}
.product-card:hover .product-link i{transform:translateX(3px);}
@media(max-width:920px){.product-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr;}}

/* ---------- Filter chips (products listing) ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px;}
.filter-chip{font-family:var(--font-mono);font-size:12.5px;padding:10px 18px;border:1px solid var(--border);color:var(--steel);cursor:pointer;background:var(--white);transition:all .15s ease;}
.filter-chip:hover{border-color:var(--primary);color:var(--primary);}
.filter-chip.active{background:var(--primary-dark);border-color:var(--primary-dark);color:var(--white);}

/* ---------- Services ---------- */
.services{background:var(--porcelain);padding:100px 0;}
.services-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;}
.service-col{padding:10px 40px;}
.service-col:first-child{padding-left:0;}
.service-col:last-child{padding-right:0;}
.service-divider{width:1px;background:repeating-linear-gradient(to bottom,var(--border) 0 6px,transparent 6px 12px);position:relative;}
.service-divider::before,.service-divider::after{content:"";position:absolute;left:50%;width:9px;height:9px;transform:translateX(-50%);background:var(--secondary);}
.service-divider::before{top:0;}
.service-divider::after{bottom:0;}
.service-tag{font-family:var(--font-mono);font-size:11.5px;color:var(--secondary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:block;}
.service-col h3{font-size:22px;color:var(--primary-dark);margin-bottom:18px;}
.service-col ul li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:14.5px;color:var(--ink);}
.service-col ul li:last-child{border-bottom:1px solid var(--border);}
.service-col ul li i{color:var(--secondary);margin-top:3px;font-size:12px;flex-shrink:0;}
@media(max-width:840px){.services-grid{grid-template-columns:1fr;}.service-divider{display:none;}.service-col{padding:0 0 40px;}.service-col:last-child{padding-bottom:0;}}

/* ---------- Clients ---------- */
.clients{padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.clients .section-head{margin-bottom:36px;}
.client-row{display:flex;flex-wrap:wrap;gap:14px;}
.client-chip{font-family:var(--font-mono);font-size:13px;color:var(--primary-dark);border:1px solid var(--border);padding:12px 20px;font-weight:600;background:var(--white);}

/* ---------- Process ---------- */
.process{padding:100px 0;background:var(--white);}
.process-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:20px;}
.process-track::before{content:"";position:absolute;top:22px;left:0;right:0;height:1px;background:var(--border);}
.process-step{position:relative;padding-right:20px;}
.process-step .num{font-family:var(--font-mono);font-size:13px;color:var(--white);background:var(--primary);width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:1;}
.process-step:nth-child(odd) .num{background:var(--secondary);}
.process-step h4{font-size:15.5px;color:var(--primary-dark);margin-bottom:8px;}
.process-step p{font-size:13px;color:var(--steel);}
@media(max-width:900px){.process-track{grid-template-columns:1fr 1fr;gap:34px;}.process-track::before{display:none;}}
@media(max-width:560px){.process-track{grid-template-columns:1fr;}}

/* ---------- Testimonials ---------- */
.testimonials{background:var(--primary-dark);padding:100px 0;color:var(--white);}
.testimonials .section-head h2{color:var(--white);}
.testimonials .section-head p{color:#a9b7cf;}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);}
.t-card{background:var(--primary-dark);padding:32px 28px;}
.t-card i.fa-quote-left{color:var(--secondary);font-size:20px;margin-bottom:18px;display:block;}
.t-card p.quote{font-size:14.5px;color:#dbe4f2;margin-bottom:22px;min-height:110px;}
.t-card .who{font-family:var(--font-mono);font-size:12.5px;color:#7fd8a8;}
.t-card .who span{display:block;color:#8ea0bd;font-size:11.5px;margin-top:2px;}
@media(max-width:840px){.t-grid{grid-template-columns:1fr;}}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--secondary);padding:70px 0;color:var(--white);}
.cta-banner .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;}
.cta-banner h2{font-size:clamp(24px,3vw,32px);max-width:640px;}
.cta-banner .btn-dark{border-color:var(--white);color:var(--white);}
.cta-banner .btn-dark:hover{background:var(--white);color:var(--secondary);}


/* ---------- Floating actions ---------- */
.floating-actions{position:fixed;right:22px;bottom:22px;z-index:600;display:flex;flex-direction:column;gap:12px;}
.fab{width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:21px;box-shadow:none;}
.fab.whatsapp{background:#25D366;}
.fab.call{background:var(--primary);}
.fab:hover{filter:brightness(1.08);}

/* =========================================================
   Forms — quote / contact / enquiry
   ========================================================= */
.form-panel{border:1px solid var(--border);padding:40px;position:relative;}
.form-panel::before,.form-panel::after{content:"";position:absolute;width:20px;height:20px;border-color:var(--secondary);border-style:solid;}
.form-panel::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.form-panel::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-dark);}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:14.5px;padding:13px 14px;border:1px solid var(--border);background:var(--porcelain);color:var(--ink);outline:none;transition:border-color .15s ease,background .15s ease;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);background:var(--white);}
.field textarea{resize:vertical;min-height:120px;}
.form-note{font-size:12.5px;color:var(--steel);margin-top:16px;display:flex;gap:8px;align-items:flex-start;}
.form-note i{color:var(--secondary);margin-top:2px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-success{background:#e9f9ef;border:1px solid var(--secondary);color:#0c6b3a;padding:16px;font-size:14px;}
.form-error{background:#fdeceb;border:1px solid #d64545;color:#9c1f1f;padding:16px;font-size:14px;margin-bottom:16px;}
.spec-table{width:100%;border-collapse:collapse;}
.spec-table th,.spec-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;}
.spec-table th{color:var(--steel);font-weight:500;width:40%;}
.spec-table td{color:var(--ink);}
.pd-sidebar{position:sticky;top:100px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* ---------- Contact page layout ---------- */
.contact-section{padding:100px 0;}
.contact-grid{display:grid;grid-template-columns:1fr 0.85fr;gap:60px;align-items:start;}
.info-stack .info-card{border-top:2px solid var(--primary);padding:20px 0;margin-bottom:0;}
.info-card{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--border);}
.info-card:first-child{border-top:2px solid var(--primary);}
.info-card .icon{width:42px;height:42px;background:var(--porcelain);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-card .icon i{color:var(--secondary);font-size:16px;}
.info-card h4{font-size:15px;color:var(--primary-dark);margin-bottom:4px;}
.info-card p{font-size:13.5px;color:var(--steel);}
.map-frame{border:1px solid var(--border);height:280px;overflow:hidden;margin-top:30px;}
.map-frame iframe{width:100%;height:100%;border:0;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}

/* =========================================================
   Product detail page
   ========================================================= */
.pd-section{padding:80px 0;}
.pd-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:60px;}
.pd-gallery .framed-media img{height:380px;}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.pd-thumbs img{height:76px;object-fit:cover;border:1px solid var(--border);cursor:pointer;}
.pd-thumbs img.active{border-color:var(--secondary);}
.pd-info .cat-tag{font-family:var(--font-mono);font-size:11.5px;color:var(--secondary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:block;}
.pd-info h1{font-size:clamp(28px,3.2vw,36px);color:var(--primary-dark);margin-bottom:16px;}
.pd-info p.summary{font-size:15.5px;color:var(--steel);margin-bottom:26px;}
.pd-quick-specs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px;}
.pd-quick-specs div{border-top:2px solid var(--secondary);padding-top:10px;}
.pd-quick-specs .num{font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--primary-dark);}
.pd-quick-specs .lbl{font-size:12.5px;color:var(--steel);}
.pd-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px;}

.pd-body{margin-top:80px;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;}
.pd-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:32px;}
.pd-tabs button{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:14px 22px;background:none;border:none;color:var(--steel);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.pd-tabs button.active{color:var(--primary);border-color:var(--secondary);}
.pd-tab-panel{display:none;}
.pd-tab-panel.active{display:block;}
.feature-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:14.5px;}
.feature-list li:last-child{border-bottom:1px solid var(--border);}
.feature-list i{color:var(--secondary);margin-top:3px;font-size:12px;flex-shrink:0;}
.spec-table{width:100%;border-collapse:collapse;font-size:14px;}
.spec-table tr{border-top:1px solid var(--border);}
.spec-table tr:last-child{border-bottom:1px solid var(--border);}
.spec-table td{padding:13px 4px;}
.spec-table td:first-child{font-family:var(--font-mono);color:var(--steel);width:44%;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;}
.spec-table td:last-child{color:var(--ink);font-weight:600;}
.pd-download{border:1px solid var(--border);padding:26px;position:relative;margin-bottom:24px;}
.pd-download::before,.pd-download::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--secondary);border-style:solid;}
.pd-download::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}
.pd-download::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}
.pd-download h4{font-size:15px;color:var(--primary-dark);margin-bottom:6px;}
.pd-download p{font-size:13px;color:var(--steel);margin-bottom:16px;}
@media(max-width:900px){.pd-grid,.pd-body{grid-template-columns:1fr;gap:40px;}}

.related-products{padding:0 0 100px;}

/* =========================================================
   Blog listing + article
   ========================================================= */
.blog-section{padding:90px 0;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{border:1px solid var(--border);}
.blog-card .b-img{height:190px;overflow:hidden;position:relative;background:var(--porcelain);}
.blog-card .b-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.blog-card:hover .b-img img{transform:scale(1.05);}
.blog-card .tag-chip{position:absolute;top:12px;left:12px;background:var(--primary-dark);color:#7fd8a8;font-family:var(--font-mono);font-size:10.5px;padding:5px 10px;letter-spacing:.04em;text-transform:uppercase;}
.blog-card .b-body{padding:22px;}
.blog-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--steel);display:flex;gap:14px;margin-bottom:12px;}
.blog-meta span{display:flex;align-items:center;gap:6px;}
.blog-card h3{font-size:17px;color:var(--primary-dark);margin-bottom:10px;line-height:1.3;}
.blog-card p{font-size:13.5px;color:var(--steel);margin-bottom:16px;}
@media(max-width:920px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}

.pagination{display:flex;justify-content:center;gap:10px;margin-top:56px;}
.pagination a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-family:var(--font-mono);font-size:13px;color:var(--steel);}
.pagination a.active{background:var(--primary-dark);border-color:var(--primary-dark);color:var(--white);}
.pagination a:hover{border-color:var(--primary);color:var(--primary);}

/* ---------- Article ---------- */
.article-hero{background:var(--primary-dark);color:var(--white);padding:170px 0 60px;position:relative;overflow:hidden;}
.article-hero .grid-overlay{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:42px 42px;}
.article-hero .wrap{position:relative;z-index:2;max-width:840px;}
.article-hero h1{font-size:clamp(28px,4vw,42px);margin:18px 0;}
.article-meta-row{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12.5px;color:#a9b7cf;}
.article-meta-row span{display:flex;align-items:center;gap:7px;}
.article-meta-row i{color:var(--secondary);}

.article-body{max-width:760px;margin:0 auto;padding:70px 24px;}
.article-body .featured-img{margin-bottom:40px;border:1px solid var(--border);}
.article-body .featured-img img{width:100%;height:380px;object-fit:cover;}
.article-body h2{font-size:24px;color:var(--primary-dark);margin:40px 0 16px;}
.article-body h3{font-size:19px;color:var(--primary-dark);margin:30px 0 14px;}
.article-body p{font-size:16px;color:var(--ink);margin-bottom:18px;}
.article-body ul{margin:0 0 20px 0;}
.article-body ul li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15.5px;color:var(--ink);}
.article-body ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--secondary);}
.pull-quote{border-left:3px solid var(--secondary);padding:6px 0 6px 26px;margin:34px 0;font-family:var(--font-display);font-size:20px;color:var(--primary-dark);font-weight:500;}
.article-tags{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0;}
.author-box{display:flex;gap:16px;align-items:center;padding:26px;border:1px solid var(--border);margin-top:20px;}
.author-box .av{width:52px;height:52px;background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;flex-shrink:0;}
.author-box h5{font-size:14.5px;color:var(--primary-dark);}
.author-box p{font-size:12.5px;color:var(--steel);margin:0;}

.related-posts{background:var(--porcelain);padding:80px 0;}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

/*--------------------------------------------------------------
# WordPress
--------------------------------------------------------------*/
/* Alignments */
.alignwide {
	margin-left: -10%;
	margin-right: -10%;
	max-width: 120%;
}
.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

/* Block styles */
.wp-block-group {
	margin-bottom: 2rem;
}
.wp-block-columns {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}
.wp-block-column {
	flex: 1;
	min-width: 0;
}
.wp-block-button .wp-block-button__link {
	@extend .btn;
}
.wp-block-image img {
	max-width: 100%;
	height: auto;
}
.wp-block-cover {
	background-size: cover;
	background-position: center;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

/*--------------------------------------------------------------
# WooCommerce
--------------------------------------------------------------*/
.woocommerce .products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2rem;
}
.woocommerce .product {
	border: 1px solid var(--color-border-light);
	padding: 1rem;
	border-radius: var(--radius-md);
}
.woocommerce .product .button {
	@extend .btn;
	@extend .btn-primary;
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes scaleIn {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@keyframes slideLeft {
	from { transform: translateX(30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
	from { transform: translateX(-30px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.fade-up { animation: fadeUp 0.6s ease forwards; }
.fade-in { animation: fadeIn 0.6s ease forwards; }
.scale { animation: scaleIn 0.4s ease forwards; }
.slide-left { animation: slideLeft 0.5s ease forwards; }
.slide-right { animation: slideRight 0.5s ease forwards; }

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

/* Small devices (≥576px) */
@media (min-width: 576px) {
	.container { max-width: var(--container-sm); }
	.grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
	.container { max-width: var(--container-md); }
	.menu-toggle { display: none; }
	.main-navigation ul { display: flex; display: flex;   flex-wrap: wrap;    gap: 1rem; }
	.grid-2-md { grid-template-columns: repeat(2, 1fr); }
	.grid-3-md { grid-template-columns: repeat(3, 1fr); }
	.grid-4-md { grid-template-columns: repeat(4, 1fr); }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
	.container { max-width: var(--container-lg); }
	.grid-3-lg { grid-template-columns: repeat(3, 1fr); }
	.grid-4-lg { grid-template-columns: repeat(4, 1fr); }
	.grid-5-lg { grid-template-columns: repeat(5, 1fr); }
	.grid-6-lg { grid-template-columns: repeat(6, 1fr); }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
	.container { max-width: var(--container-max-width); }
}

/* Extra extra large (≥1400px) */
@media (min-width: 1400px) {
	.container { max-width: 1320px; }
}

/* Contact Form 7 integration */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 1rem;
}
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.wpcf7-form .wpcf7-submit {
	@extend .btn;
	@extend .btn-primary;
}