/*!
Theme Name: mdh-theme
Theme URI: http://underscores.me/
Author: Syafru Software Pvt Ltd
Author URI: http://syafru.com/
Description: Description
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: mdh-theme
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.

mdh-theme 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:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

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

/* Typography
--------------------------------------------- */
/* In your theme's style.css file:*/

body,
button,
input,
select,
optgroup,
textarea {
	/* The primary font selected in the Customizer is loaded first,
       followed by the generic fallback defined in Step 1. */
	font-family: Inter, Source Sans 3, Inter, sans-serif;
}

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/**
* root css variables
*/
root {
	--color-primary-blue: #1F6FB2;
	--color-neutral-dark: #1F2937;
	--color-light-grey-bg: #F6F8FA;
	--color-border-grey: #E5E7EB;
	--color-mercos-teal: #0F7C86;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-items: center;
}

.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: 100px;
}

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

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	/* margin: 0 0 1.5em; */
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

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

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Implement the spacing system (padding: 64px/48px/32px) using consistent CSS
classes or system. */
:root {
	--space-sm: 32px;
	--space-md: 48px;
	--space-lg: 64px;
}

/* Utility Classes for Padding */
.padding-sm {
	padding: var(--space-sm);
}

.padding-md {
	padding: var(--space-md);
}

.padding-lg {
	padding: var(--space-lg);
}

/* Optional: Utility Classes for Margin */
.margin-sm {
	margin: var(--space-sm);
}

.margin-md {
	margin: var(--space-md);
}

.margin-lg {
	margin: var(--space-lg);
}


/*** Implement the responsive grid (12/8/4 columns) using CSS Grid or Flexbox. Avoid
heavy grid frameworks if they bloat the CSS ***/
/* --- Base Styles & Default (Small Screens: 4 Columns) --- */
.grid-container {
	display: grid;
	/* 4 columns on small screens (e.g., mobile devices) */
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	/* Space between grid items */
	padding: 10px;
	max-width: 1200px;
	margin: 0 auto;
}

.grid-item {
	background-color: #007bff;
	/* Blue background */
	color: white;
	padding: 20px;
	text-align: center;
	border-radius: 5px;
	font-size: 1.2em;
}

/* --- Medium Screens (8 Columns) --- */
@media (min-width: 600px) {
	.grid-container {
		/* 8 columns on medium screens (e.g., tablets) */
		grid-template-columns: repeat(8, 1fr);
	}
}

/* --- Large Screens (12 Columns) --- */
@media (min-width: 992px) {
	.grid-container {
		/* 12 columns on large screens (e.g., desktops) */
		grid-template-columns: repeat(12, 1fr);
	}
}

/* nav menu pipe adding */
/* Add a pipe separator between menu items */
.navbar-nav>li:not(:last-child)::after {
	content: "|";
	padding: 15px 0px;
	/* Adjust spacing as needed */
	color: #ccc;
	/* Adjust color as needed */
}

/* Optional: Ensure the pipe doesn't appear in dropdown menus (sub-menus) */
.navbar-nav .dropdown-menu li::after {
	content: none;
}

/* Optional: Adjust for responsive view if needed (e.g. stack vertically on mobile) */
@media (max-width: 768px) {
	.navbar-nav>li:not(:last-child)::after {
		content: none;
	}
}

/* Styling for the main navigation container and list items */
.navbar-nav {
	list-style: none;
	/* Removes default bullet points */
	padding: 0;
	margin: 0;
	display: flex;
	/* Arranges items horizontally */
	background-color: #333;
	/* Example background color */
	flex-direction: row;
}

.nav-item {
	position: relative;
	/* Crucial for positioning the dropdown relative to the parent */
	list-style: none;
	display: flex;
}

.nav-link,
.dropdown-item {
	display: block;
	padding: 15px 20px;
	/* Ample clickable area */
	color: white;
	text-decoration: none;
	/* Removes default link underlines */
	white-space: nowrap;
	/* Prevents menu items from wrapping to a new line */
}

.nav-link:hover,
.dropdown-item:hover {
	background-color: #555;
	/* Hover effect */
}

/* Styling for the dropdown menus */
.dropdown-menu {
	display: none;
	/* Hides the dropdown by default */
	position: absolute;
	/* Positions the dropdown beneath the parent item */
	background-color: #444;
	/* Dropdown background color */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	min-width: 160px;
	/* Minimum width for dropdown items */
	z-index: 1000;
	/* Ensures the menu appears above other content */
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Show the dropdown menu on hover of the parent item */
.nav-item:hover>.dropdown-menu {
	display: block;
}

.dropdown-item {
	color: white;
	padding: 12px 16px;
}

/* generated css with automatic */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/*--------------------------------------------------------------
# Header & Navigation Styles - Sticky & Responsive
--------------------------------------------------------------*/

/* Sticky Header */
header.site-header {
	background-color: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
	width: 100%;
}

header.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary-blue, #1f6fb2) 0%, #4f9dd8 60%, var(--color-mercos-teal, #0f7c86) 100%);
	box-shadow: 0 3px 10px rgba(31, 111, 178, 0.24);
	pointer-events: none;
}

header.site-header.sticky-scrolled {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);
	background-color: #fff;
}

header .header-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
	padding: 0.625rem clamp(12px, 2.5vw, 28px);
	max-width: min(1360px, 100%);
	margin: 0 auto;
	width: 100%;
}

/* Logo Styling */
.site-branding {
	z-index: 1001;
	margin: 0;
	flex-shrink: 0;
}

.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
}

.site-branding .custom-logo {
	max-height: 48px;
	width: auto;
	height: auto;
}

.site-branding .site-title {
	margin: 0;
	font-size: 24px;
	margin-right: 5px;
}

.site-description,
.site-branding .site-title a,
.main-navigation ul#primary-menu li.current-menu-item>a,
.main-navigation ul#primary-menu li.current-page-item>a {
	color: var(--color-primary-blue, #1f6fb2);
}

#primary .responsive-table tbody td a {
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

#primary .responsive-table tbody td a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.site-branding .site-title a {
	/*color: #333;*/
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
}

.site-branding .site-title a:hover {
	color: #64b856;
}

.site-description {
	margin-bottom: 0px;
	margin-top: 8px;
}

.site-title-description {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
}

/* Main Navigation */
.main-navigation {
	position: relative;
	width: auto;
}

/* Hamburger Menu Toggle Button */
.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	width: 44px;
	height: 44px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	transition: all 0.3s ease;
	z-index: 1002;
	position: relative;
}

.menu-toggle:focus {
	outline: 2px solid #64b856;
	outline-offset: 2px;
}

.menu-toggle-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 18px;
	position: relative;
}

.menu-toggle-icon span {
	display: block;
	height: 3px;
	width: 100%;
	background: #333;
	border-radius: 3px;
	transition: all 0.3s ease;
	transform-origin: center;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

.menu-toggle-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Menu Items - Desktop */
.main-navigation ul#primary-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.125rem;
}

.main-navigation ul#primary-menu li {
	margin: 0;
	position: relative;
}

.main-navigation ul#primary-menu li a {
	text-decoration: none;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	color: var(--color-neutral-dark, #1f2937);
	padding: 0.5rem 0.75rem;
	display: block;
	transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	border-radius: 6px;
	font-weight: 500;
	position: relative;
}

/* Top-level links: slightly tighter horizontal rhythm */
.main-navigation ul#primary-menu > li > a {
	padding: 0.5rem 0.6rem;
}

.main-navigation ul#primary-menu li a:hover,
.main-navigation ul#primary-menu li a:focus {
	color: var(--color-primary-blue, #1f6fb2);
	background: rgba(31, 111, 178, 0.08);
	outline: none;
}

/* Active top-level page: underline accent (distinct from solid CTA pill) */
.main-navigation ul#primary-menu > li.current-menu-item > a,
.main-navigation ul#primary-menu > li.current-page-item > a {
	color: var(--color-primary-blue, #1f6fb2);
	font-weight: 600;
	background: transparent;
	box-shadow: inset 0 -2px 0 0 var(--color-primary-blue, #1f6fb2);
	border-radius: 6px;
}

.main-navigation ul#primary-menu > li.current-menu-ancestor > a {
	color: var(--color-primary-blue, #1f6fb2);
	font-weight: 600;
}

/* Optional: add CSS class "is-nav-cta" to any menu item in Appearance → Menus to style it as a button instead of using :last-child */
@media (min-width: 769px) {

	/* CTA: add class "is-nav-cta" to a menu item, or the last top-level item becomes the CTA when no item uses is-nav-cta */
	.main-navigation ul#primary-menu > li.is-nav-cta > a,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a {
		background: var(--color-primary-blue, #1f6fb2);
		color: #fff !important;
		font-weight: 600;
		padding: 0.5rem 1.15rem;
		border-radius: 999px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	.main-navigation ul#primary-menu > li.is-nav-cta > a:hover,
	.main-navigation ul#primary-menu > li.is-nav-cta > a:focus,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:hover,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:focus {
		background: var(--color-secondary-blue, #1a5c96);
		color: #fff !important;
	}

	.main-navigation ul#primary-menu > li.is-nav-cta.current-menu-item > a,
	.main-navigation ul#primary-menu > li.is-nav-cta.current-page-item > a,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta).current-menu-item > a,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta).current-page-item > a {
		background: var(--color-secondary-blue, #1a5c96);
		color: #fff !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	}

	/* Chevron for items with submenus */
	.main-navigation ul#primary-menu > li.menu-item-has-children > a {
		padding-right: 1.45rem;
	}

	.main-navigation ul#primary-menu > li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 0.55rem;
		top: 50%;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: -0.28rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: 0.55;
		transition: transform 0.2s ease, opacity 0.2s ease;
		pointer-events: none;
	}

	.main-navigation ul#primary-menu > li.menu-item-has-children:hover > a::after,
	.main-navigation ul#primary-menu > li.menu-item-has-children.focus > a::after,
	.main-navigation ul#primary-menu > li.menu-item-has-children:focus-within > a::after {
		opacity: 0.95;
		transform: rotate(45deg) translateY(2px);
	}

	.main-navigation ul#primary-menu > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a {
		padding-right: 1.45rem;
	}

	.main-navigation ul#primary-menu > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 0.65rem;
		top: 50%;
		width: 0.35rem;
		height: 0.35rem;
		margin-top: -0.22rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: 0.45;
		transition: opacity 0.2s ease;
	}

	.main-navigation ul#primary-menu > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:hover > a::after,
	.main-navigation ul#primary-menu > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children.focus > a::after {
		opacity: 0.85;
	}

	/* Submenu connector: centered on parent li (panel matches li width — diamond lines up with trigger) */
	.main-navigation ul#primary-menu > li.menu-item-has-children:hover::before,
	.main-navigation ul#primary-menu > li.menu-item-has-children:focus-within::before {
		content: "";
		position: absolute;
		left: 50%;
		top: calc(100% + 0.2rem);
		width: 11px;
		height: 11px;
		margin-left: -5.5px;
		margin-top: -6px;
		background: #fff;
		border-left: 1px solid var(--color-border-grey, #e5e7eb);
		border-top: 1px solid var(--color-border-grey, #e5e7eb);
		transform: rotate(45deg);
		z-index: 1012;
		pointer-events: none;
		box-shadow: -1px -1px 3px rgba(15, 23, 42, 0.06);
	}

	/* Reinforce which top-level item owns the open dropdown */
	.main-navigation ul#primary-menu > li.menu-item-has-children:focus-within > a {
		color: var(--color-primary-blue, #1f6fb2);
		background-color: rgba(31, 111, 178, 0.08);
	}
}

/* Dropdown Menus (desktop: visibility transition; mobile overrides below) */
.main-navigation ul#primary-menu li ul.sub-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	min-width: 13.5rem;
	list-style: none;
	z-index: 1010;
	margin: 0;
	padding: 0;
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	background: #fff;
	border: 1px solid var(--color-border-grey, #e5e7eb);
	border-radius: 10px;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.03),
		0 10px 40px rgba(15, 23, 42, 0.12);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		visibility 0.2s ease;
	overflow: visible;
}

/* First-level dropdown: at least parent width, with a comfortable minimum so it does not feel cramped */
.main-navigation ul#primary-menu > li > ul.sub-menu {
	left: 0;
	right: auto;
	width: max-content;
	min-width: max(100%, 16.25rem);
	max-width: min(22rem, calc(100vw - 2rem));
	box-sizing: border-box;
	border-top: 3px solid var(--color-primary-blue, #1f6fb2);
	overflow: hidden;
}

.main-navigation ul#primary-menu > li.menu-item-has-children::before {
	content: none;
}

.main-navigation ul#primary-menu li:hover > ul.sub-menu,
.main-navigation ul#primary-menu li.focus > ul.sub-menu,
.main-navigation ul#primary-menu li:focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.main-navigation ul#primary-menu li ul.sub-menu li {
	margin: 0;
	width: 100%;
	display: block;
}

.main-navigation ul#primary-menu li ul.sub-menu li + li {
	border-top: 1px solid rgba(229, 231, 235, 0.85);
}

.main-navigation ul#primary-menu li ul.sub-menu li a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 3rem;
	box-sizing: border-box;
	padding: 0.65rem 1.15rem;
	font-size: 1.03125rem;
	line-height: 1.35;
	border-radius: 0;
	white-space: normal;
	color: var(--color-neutral-dark, #1f2937);
	transition: color 0.15s ease, background-color 0.15s ease;
	background-color: transparent;
}

/* Full-row hover / active: tint lives on the anchor so it fills the row edge-to-edge */
.main-navigation ul#primary-menu li ul.sub-menu li a:hover,
.main-navigation ul#primary-menu li ul.sub-menu li a:focus {
	color: var(--color-primary-blue, #1f6fb2);
	background-color: rgba(31, 111, 178, 0.12);
	outline: none;
}

.main-navigation ul#primary-menu li ul.sub-menu li a:focus-visible {
	outline: 2px solid var(--color-primary-blue, #1f6fb2);
	outline-offset: -2px;
}

.main-navigation ul#primary-menu li ul.sub-menu li.current-menu-item > a,
.main-navigation ul#primary-menu li ul.sub-menu li.current_page_item > a {
	color: var(--color-primary-blue, #1f6fb2);
	font-weight: 600;
	background-color: rgba(31, 111, 178, 0.14);
}

.main-navigation ul#primary-menu li ul.sub-menu li.current-menu-item > a:hover,
.main-navigation ul#primary-menu li ul.sub-menu li.current_page_item > a:hover {
	background-color: rgba(31, 111, 178, 0.18);
}

/* Nested flyout (inherits panel styles from ul.sub-menu above) */
.main-navigation ul#primary-menu li ul.sub-menu ul.sub-menu {
	left: calc(100% + 0.35rem);
	top: 0;
	margin: 0;
	width: auto;
	min-width: 13.5rem;
	max-width: min(18rem, calc(100vw - 2rem));
}

.main-navigation ul#primary-menu li ul.sub-menu li:hover > ul.sub-menu,
.main-navigation ul#primary-menu li ul.sub-menu li.focus > ul.sub-menu,
.main-navigation ul#primary-menu li ul.sub-menu li:focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Responsive Mobile Menu */
@media (max-width: 768px) {

	/* Show Hamburger Button */
	.menu-toggle {
		display: flex;
	}

	/* Hide Menu by Default on Mobile */
	.main-navigation ul#primary-menu {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		width: 85%;
		max-width: 320px;
		height: 100vh;
		background: #fff;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 80px 0 20px;
		margin: 0;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 1000;
	}

	/* Show Menu When Toggled */
	.main-navigation.toggled ul#primary-menu {
		display: flex;
		transform: translateX(0);
	}

	/* Menu Overlay */
	.main-navigation.toggled::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		animation: fadeIn 0.3s ease;
		backdrop-filter: blur(2px);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* Menu Items on Mobile */
	.main-navigation ul#primary-menu li {
		margin: 0;
		width: 100%;
		border-bottom: 1px solid #f0f0f0;
	}

	.main-navigation ul#primary-menu li:last-child {
		border-bottom: none;
	}

	.main-navigation ul#primary-menu li a {
		padding: 16px 20px;
		font-size: 1.0625rem;
		border-radius: 0;
		width: 100%;
		text-align: left;
	}

	.main-navigation ul#primary-menu li a:hover,
	.main-navigation ul#primary-menu li a:focus {
		background: rgba(31, 111, 178, 0.1);
		color: var(--color-primary-blue, #1f6fb2);
	}

	.main-navigation ul#primary-menu > li.is-nav-cta > a,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a {
		margin: 0.75rem 1rem 0.25rem;
		background: var(--color-primary-blue, #1f6fb2) !important;
		color: #fff !important;
		border-radius: 999px;
		text-align: center;
		font-weight: 600;
	}

	.main-navigation ul#primary-menu > li.is-nav-cta > a:hover,
	.main-navigation ul#primary-menu > li.is-nav-cta > a:focus,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:hover,
	.main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:focus {
		background: var(--color-secondary-blue, #1a5c96) !important;
		color: #fff !important;
	}

	/* Dropdown Menus on Mobile */
	.main-navigation ul#primary-menu li ul.sub-menu {
		position: static;
		display: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		border: none;
		background: #f3f5f7;
		margin: 0;
		padding: 0;
		border-radius: 0;
		width: 100%;
		transition: none;
	}

	.main-navigation ul#primary-menu > li > ul.sub-menu {
		border-top: none;
		min-width: 0;
		max-width: none;
		left: auto;
		right: auto;
		width: 100%;
		overflow: visible;
	}

	.main-navigation ul#primary-menu li.menu-item-has-children>a::after {
		content: '+';
		float: right;
		font-size: 20px;
		font-weight: 300;
		transition: transform 0.3s ease;
	}

	.main-navigation ul#primary-menu li.menu-item-has-children.focus>a::after,
	.main-navigation ul#primary-menu li.menu-item-has-children:hover>a::after {
		transform: rotate(45deg);
	}

	.main-navigation ul#primary-menu li.focus>ul.sub-menu,
	.main-navigation ul#primary-menu li:hover>ul.sub-menu {
		display: block;
	}

	.main-navigation ul#primary-menu li ul.sub-menu li a {
		padding-left: 40px;
		font-size: 1rem;
	}

	.main-navigation ul#primary-menu li ul.sub-menu ul.sub-menu li a {
		padding-left: 60px;
	}

	/* Header Container on Mobile */
	header .header-container {
		padding: 0.5rem clamp(10px, 3vw, 16px);
		gap: 0.75rem;
	}

	.site-branding .custom-logo {
		max-height: 40px;
	}

	.site-branding .site-title {
		font-size: 20px;
	}
}

/* Prevent Body Scroll When Menu is Open */
body.menu-open {
	overflow: hidden;
}

/* Smooth Scroll Behavior */
html {
	scroll-behavior: smooth;
}

/* Header Sticky Scroll Effect */
@media (min-width: 769px) {
	header.site-header {
		transition: all 0.3s ease;
	}

	header.site-header.scrolled {
		padding: 0;
	}

	header.site-header.scrolled .header-container {
		padding: 0.55rem clamp(12px, 2.5vw, 28px);
	}
}

/* .language-switch { font-size: 14px; } */

.hero-section {
	position: relative;
	overflow: hidden;
	background: #e5e5e5;
	min-height: clamp(18rem, 42vh, 28rem);
	padding: clamp(2.5rem, 7vh, 4.5rem) 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-section--has-bg {
	background-color: #0a1628;
	color: #fff;
	min-height: clamp(22rem, 52vh, 38rem);
	padding: clamp(3rem, 10vh, 6rem) 0;
}

.hero-section__bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	/* Panoramic logistics shot: keep vertical center of interest, not the top crop */
	background-position: 48% 42%;
}

.hero-section__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(4, 14, 32, 0.32) 0%,
		rgba(4, 14, 32, 0.52) 45%,
		rgba(4, 14, 32, 0.62) 100%
	);
}

.hero-section__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 52rem;
	margin-inline: auto;
}

.hero-section__panel {
	margin-inline: auto;
	padding: clamp(1.35rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 2.75rem);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.hero-section h1 {
	font-size: 36px;
	margin-bottom: 20px;
}

.hero-section p {
	font-size: 18px;
	margin-bottom: 40px;
}

.hero-section--has-bg .hero-title {
	margin-top: 0;
	margin-bottom: 0.65em;
	font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hero-section--has-bg .hero-subtitle {
	margin-bottom: 1.75rem;
	font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.125rem);
	line-height: 1.55;
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
	color: rgba(255, 255, 255, 0.92);
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: center;
	align-items: center;
}

.hero-buttons .btn {
	padding: 12px 24px;
	margin: 0;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hero-section--has-bg .hero-buttons .btn.primary {
	background: var(--color-primary-blue, #1f6fb2);
	color: #fff;
	border: 2px solid transparent;
}

.hero-section--has-bg .hero-buttons .btn.primary:hover {
	background: var(--color-secondary-blue, #1a5c96);
	color: #fff;
}

.hero-section--has-bg .hero-buttons .btn.secondary {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.88);
}

.hero-section--has-bg .hero-buttons .btn.secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: #fff;
}

.btn.primary {
	background: var(--color-primary);
	color: #ffffff;
}

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

section.features-checkmarks {
	padding: 20px 0;
}

.features-checkmarks ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 1rem 0;
	gap: 0.75rem 2rem;
}

.features-checkmarks li {
	margin: 0;
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1 1 12rem;
	max-width: 24rem;
	min-width: 0;
}

.features-checkmarks li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.features-checkmarks ul li svg {
	width: 1.125rem;
	height: 1.125rem;
	max-width: 1.125rem;
	max-height: 1.125rem;
	flex-shrink: 0;
	vertical-align: middle;
}

.product-portfolio {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	text-align: center;
}

.product-portfolio__header {
	max-width: 40rem;
	margin: 0 auto 0.5rem;
}

.product-portfolio__title {
	margin: 0 0 0.65rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	color: var(--color-primary-blue, #1f6fb2);
	line-height: 1.25;
}

.product-portfolio__lead {
	margin: 0 auto;
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.55;
	color: var(--color-neutral-dark, #1f2937);
	opacity: 0.88;
	max-width: 36rem;
}

.product-portfolio__empty {
	margin-top: 1.5rem;
	color: var(--color-neutral-dark, #1f2937);
}

/* Product slider: equal-height slides, card layout */
.product-portfolio .product-swiper {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding: 0.5rem 0 1.25rem;
}

.product-portfolio .product-swiper .swiper-wrapper {
	align-items: stretch;
}

.product-portfolio .product-swiper .swiper-slide {
	height: auto;
	display: flex;
	box-sizing: border-box;
}

.product-portfolio .product-card.product-card--slider {
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: clamp(1rem, 2vw, 1.35rem);
	border-radius: 2px;
	border: 1px solid var(--color-border-grey, #e5e7eb);
	box-sizing: border-box;
	min-height: 100%;
}

.product-portfolio .product-card__media {
	flex-shrink: 0;
	height: clamp(140px, 22vw, 180px);
	margin: 0 0 1rem;
	background: var(--color-border-grey);
	overflow: hidden;
}

.product-portfolio .product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-portfolio .product-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	text-align: center;
}

.product-portfolio .product-card__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.3;
	font-weight: 700;
	color: var(--color-primary-blue, #1f6fb2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-portfolio .product-card__meta {
	margin: 0 0 1rem;
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--color-neutral-dark, #1f2937);
	opacity: 0.72;
	flex-grow: 1;
	min-height: calc(1.45em * 3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
}

.product-portfolio .product-card__meta--empty {
	visibility: hidden;
}

.product-portfolio .product-card__actions {
	margin-top: auto;
	padding-top: 0.25rem;
}

.product-portfolio .product-card__actions .btn {
	display: block;
	width: 100%;
	padding: 0.7rem 1rem;
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	text-align: center;
	border-radius: 6px;
	border: 2px solid transparent;
	color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product-portfolio .product-swiper .swiper-pagination {
	position: relative;
	margin-top: 1.75rem;
}

.product-portfolio .product-swiper .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: var(--color-border-grey, #d1d5db);
	opacity: 1;
}

.product-portfolio .product-swiper .swiper-pagination-bullet-active {
	background: var(--color-neutral-dark, #4b5563);
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.product-card {
	background: #f9f9f9;
	padding: 20px;
	text-align: center;
	border: 1px solid #eee;
}

.product-image {
	/* background: #ccc; */
	height: 150px;
	margin-bottom: 20px;
}

.pagination-dots {
	margin-top: 40px;
	font-size: 24px;
	color: #ccc;
}

.about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.about-image {
	/* background: #ccc; */
	height: 300px;
}

.about-text a {
	color: #333;
	text-decoration: none;
}

.about-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.icon-features {
	padding: 60px 0;
	background: #f8f8f8;
}

.icon-features.strength-section {
	background: #fff;
}

.icon-features .strength-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	align-items: start;
	gap: 0;
}

.strength-section__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2rem);
	min-height: 100%;
}

.icon {
	width: 80px;
	height: 80px;
	/* background: #ccc; */
	margin: 0 auto;
	/* 20px */
	border-radius: 50%;
}

.icon-item {
	border-right: solid 1px #e5e5e5;
}

.icon-item:last-child {
	border-right: none;
}

.strength-section .strength-section__title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: clamp(1.05rem, 1.35vw, 1.2rem);
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--color-neutral-dark, #1f2937);
	max-width: 16rem;
	margin: 0 auto;
	text-wrap: balance;
}

.strength-section .strength-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.75rem, 11vw, 6.25rem);
	height: clamp(4.75rem, 11vw, 6.25rem);
	margin: 0 auto clamp(1rem, 2vw, 1.35rem);
	border-radius: 0;
	background: transparent;
	overflow: visible;
	color: #8b9399;
}

.strength-section .strength-section__icon .strength-section__svg {
	width: 100%;
	height: 100%;
	display: block;
}

.strength-section .strength-section__icon .strength-section__img {
	max-width: 72%;
	max-height: 72%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.88);
}

.mercos-section,
.media-section,
.enquiry-cta {
	padding: 60px 0;
	text-align: center;
}

.media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 40px 0;
}

.media-card {
	background: #f7f7f7;
	padding: 20px;
}

/*
 * Static front page — homepage reference mockup
 * Trust: white strip | Products: white + grey card borders | About: light blue-grey
 * Values: pale blue | Mercos: solid dark teal + white CTA | Enquiry: solid dark blue | Media: white
 */

/* --- Header: transparent until scroll; sits above hero --- */
body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) {
	background-color: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled)::after {
	opacity: 0;
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .site-branding .custom-logo {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .site-branding .site-title a,
body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .site-description {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li > a {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li > a:hover,
body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li > a:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li.current-menu-item > a,
body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li.current-page-item > a {
	color: #fff;
	box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.85);
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .main-navigation ul#primary-menu > li.current-menu-ancestor > a {
	color: #fff;
}

body.front-page:not(.menu-open) header#masthead.site-header:not(.sticky-scrolled) .menu-toggle-icon span {
	background: #fff;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

body.menu-open header#masthead.site-header {
	background-color: #fff !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

body.menu-open header#masthead.site-header .menu-toggle-icon span {
	background: #333;
	box-shadow: none;
}

body.menu-open header#masthead.site-header .main-navigation ul#primary-menu > li > a {
	color: var(--color-neutral-dark, #1f2937);
	text-shadow: none;
}

/* Pull hero under header + pad content down */
body.front-page #primary.site-main > .hero-section:first-child {
	margin-top: calc(-1 * var(--home-header-overlap, 5rem));
	padding-top: calc(var(--home-header-overlap, 5rem) + clamp(2.5rem, 7vh, 4.5rem));
}

body.front-page #primary.site-main > .hero-section.hero-section--has-bg:first-child {
	padding-top: calc(var(--home-header-overlap, 5rem) + clamp(3rem, 10vh, 6rem));
}

body.front-page #primary.site-main > .hero-section.hero-section--has-bg .hero-section__panel {
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.38);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

body.front-page #primary.site-main > .hero-section .hero-title,
body.front-page #primary.site-main > .hero-section .hero-subtitle {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Sans-forward type on homepage content (mockup) */
body.front-page #primary.site-main .product-portfolio__title,
body.front-page #primary.site-main .product-portfolio__lead,
body.front-page #primary.site-main .product-card__title,
body.front-page #primary.site-main .product-card__meta,
body.front-page #primary.site-main .about-text h2,
body.front-page #primary.site-main .about-text p,
body.front-page #primary.site-main .media-section > .container > h2,
#primary.site-main.mdh-front-home .mdh-home-media__header h2 {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Homepage: soft grid + animated mesh behind the section stack (see front-page-content.php) */
#primary.site-main.mdh-front-home {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.mdh-front-home__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.mdh-front-home__ambient-grid {
	position: absolute;
	inset: -1px;
	opacity: 0.48;
	background-image:
		linear-gradient(rgba(15, 23, 42, 0.032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
		linear-gradient(rgba(26, 92, 150, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 92, 150, 0.022) 1px, transparent 1px);
	background-size:
		48px 48px,
		48px 48px,
		192px 192px,
		192px 192px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.mdh-front-home__ambient-diagonals {
	position: absolute;
	inset: -20%;
	opacity: 0.22;
	background-image: repeating-linear-gradient(
		-32deg,
		transparent,
		transparent 20px,
		rgba(26, 92, 150, 0.034) 20px,
		rgba(26, 92, 150, 0.034) 21px
	);
	animation: mdh-home-ambient-diagonals 160s linear infinite;
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 0%, transparent 78%);
}

.mdh-front-home__ambient-rings {
	position: absolute;
	inset: 0;
	opacity: 0.3;
	background:
		radial-gradient(circle at 18% 22%, transparent 0 42%, rgba(15, 124, 134, 0.038) 42.5%, transparent 43.5%),
		radial-gradient(circle at 18% 22%, transparent 0 58%, rgba(26, 92, 150, 0.032) 58.5%, transparent 59.5%),
		radial-gradient(circle at 82% 55%, transparent 0 36%, rgba(31, 111, 178, 0.032) 36.5%, transparent 37.5%),
		radial-gradient(circle at 82% 55%, transparent 0 52%, rgba(15, 124, 134, 0.028) 52.5%, transparent 53.5%),
		radial-gradient(circle at 48% 88%, transparent 0 44%, rgba(99, 179, 237, 0.032) 44.5%, transparent 45.5%);
	pointer-events: none;
}

.mdh-front-home__ambient-geo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mdh-front-home__ambient-shape {
	position: absolute;
	display: block;
	pointer-events: none;
	box-sizing: border-box;
}

.mdh-front-home__ambient-shape--hex {
	width: min(28vw, 220px);
	height: min(28vw, 220px);
	top: 12%;
	right: 6%;
	opacity: 0.36;
	clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
	background: linear-gradient(145deg, rgba(15, 124, 134, 0.1), rgba(26, 92, 150, 0.045));
	box-shadow: 0 0 0 1px rgba(26, 92, 150, 0.16);
	animation: mdh-home-ambient-geo-hex 56s ease-in-out infinite;
}

.mdh-front-home__ambient-shape--tri {
	width: 0;
	height: 0;
	top: 38%;
	left: 4%;
	opacity: 0.36;
	border: none;
	border-left: min(14vw, 110px) solid transparent;
	border-right: min(14vw, 110px) solid transparent;
	border-bottom: min(24vw, 190px) solid rgba(31, 111, 178, 0.13);
	filter: drop-shadow(0 0 1px rgba(26, 92, 150, 0.2));
	background: none;
	animation: mdh-home-ambient-geo-tri 64s ease-in-out infinite;
}

.mdh-front-home__ambient-shape--frame {
	width: min(42vw, 340px);
	height: min(42vw, 340px);
	bottom: 6%;
	right: 10%;
	opacity: 0.34;
	border-radius: 4px;
	border: 1px solid rgba(15, 124, 134, 0.18);
	background: transparent;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.025),
		0 0 0 1px rgba(26, 92, 150, 0.045);
	transform: rotate(-12deg);
	animation: mdh-home-ambient-geo-frame 72s ease-in-out infinite;
}

.mdh-front-home__ambient-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(82px);
	will-change: transform, opacity;
	opacity: 0.34;
}

.mdh-front-home__ambient-orb--a {
	width: min(48vw, 400px);
	height: min(48vw, 400px);
	left: -10%;
	top: 6%;
	background: radial-gradient(circle at 35% 35%, rgba(26, 92, 150, 0.34), rgba(15, 124, 134, 0.18) 58%, transparent 74%);
	animation: mdh-home-ambient-a 40s ease-in-out infinite;
}

.mdh-front-home__ambient-orb--b {
	width: min(58vw, 520px);
	height: min(58vw, 520px);
	right: -14%;
	top: 28%;
	background: radial-gradient(circle at 50% 50%, rgba(15, 124, 134, 0.3), rgba(31, 111, 178, 0.16) 60%, transparent 76%);
	animation: mdh-home-ambient-b 46s ease-in-out infinite;
}

.mdh-front-home__ambient-orb--c {
	width: min(44vw, 380px);
	height: min(44vw, 380px);
	left: 22%;
	bottom: -6%;
	background: radial-gradient(circle at 40% 40%, rgba(99, 179, 237, 0.26), rgba(26, 92, 150, 0.14) 55%, transparent 72%);
	animation: mdh-home-ambient-c 34s ease-in-out infinite;
}

@keyframes mdh-home-ambient-diagonals {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(-48px, 48px);
	}
}

@keyframes mdh-home-ambient-geo-hex {
	0%,
	100% {
		transform: rotate(0deg) translate(0, 0);
		opacity: 0.32;
	}

	50% {
		transform: rotate(10deg) translate(-1%, 1.5%);
		opacity: 0.42;
	}
}

@keyframes mdh-home-ambient-geo-tri {
	0%,
	100% {
		transform: rotate(-4deg) translate(0, 0);
		opacity: 0.32;
	}

	50% {
		transform: rotate(5deg) translate(2%, -1%);
		opacity: 0.44;
	}
}

@keyframes mdh-home-ambient-geo-frame {
	0%,
	100% {
		transform: rotate(-12deg) scale(1);
		opacity: 0.3;
	}

	50% {
		transform: rotate(-8deg) scale(1.02);
		opacity: 0.4;
	}
}

@keyframes mdh-home-ambient-a {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.28;
	}

	50% {
		transform: translate(2.5%, -3%) scale(1.06);
		opacity: 0.4;
	}
}

@keyframes mdh-home-ambient-b {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.26;
	}

	45% {
		transform: translate(-3%, 2.5%) scale(1.04);
		opacity: 0.38;
	}
}

@keyframes mdh-home-ambient-c {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.24;
	}

	55% {
		transform: translate(2%, -2.5%) scale(1.08);
		opacity: 0.36;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mdh-front-home__ambient-diagonals {
		animation: none;
	}

	.mdh-front-home__ambient-shape--hex,
	.mdh-front-home__ambient-shape--tri,
	.mdh-front-home__ambient-shape--frame {
		animation: none;
	}

	.mdh-front-home__ambient-orb--a,
	.mdh-front-home__ambient-orb--b,
	.mdh-front-home__ambient-orb--c {
		animation: none;
		opacity: 0.28;
	}
}

body.front-page #primary.site-main > section {
	position: relative;
	z-index: 1;
}

body.front-page #primary.site-main > section:not(.hero-section) {
	border-top: 1px solid rgba(15, 23, 42, 0.06);
}

body.front-page #primary.site-main > section.features-checkmarks,
body.front-page #primary.site-main.mdh-front-home > section.features-checkmarks {
	background: var(--home-trust-bar-bg, #ffffff);
	padding-top: clamp(0.75rem, 2vw, 1.1rem);
	padding-bottom: clamp(0.75rem, 2vw, 1.1rem);
	border-top-color: rgba(15, 23, 42, 0.06);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

/* Homepage: product band stays clean white; about is a clearly cooler blue-grey band */
body.front-page #primary.site-main.mdh-front-home > section.product-portfolio,
#primary.site-main.mdh-front-home > section.product-portfolio {
	background-color: #fff;
}

body.front-page #primary.site-main .product-portfolio .product-card.product-card--slider {
	border-radius: var(--home-card-radius, 14px);
	border: 1px solid var(--color-border-grey, #e2e8f0);
	box-shadow: var(--home-card-shadow, 0 10px 40px rgba(15, 23, 42, 0.08));
	background: #fff;
}

body.front-page #primary.site-main .product-portfolio .product-card__media {
	border-radius: 10px;
}

body.front-page #primary.site-main > section.about-section,
body.front-page #primary.site-main.mdh-front-home > section.about-section,
#primary.site-main.mdh-front-home > section.about-section {
	background: var(--home-about-bg, linear-gradient(180deg, #ebf3fa 0%, #dfeaf5 100%));
	padding: clamp(2.75rem, 6vw, 4.5rem) 0;
	border-top: 1px solid rgba(31, 111, 178, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.front-page #primary.site-main .about-section .about-image {
	border-radius: var(--home-card-radius, 14px);
	overflow: hidden;
	box-shadow: var(--home-card-shadow, 0 10px 40px rgba(15, 23, 42, 0.08));
}

body.front-page #primary.site-main .about-section .about-image img {
	border-radius: inherit;
}

body.front-page #primary.site-main > section.icon-features.strength-section,
body.front-page #primary.site-main.mdh-front-home > section.icon-features.strength-section {
	box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
}

body.front-page #primary.site-main > section.icon-features.strength-section .icon-item {
	border-color: rgba(15, 23, 42, 0.1);
}

body.front-page #primary.site-main > section.media-section {
	background-color: #fff;
}

body.front-page #primary.site-main .media-section .media-card.blog {
	border-radius: var(--home-card-radius, 14px);
	border: 1px solid var(--color-border-grey, #e2e8f0);
	box-shadow: var(--home-card-shadow, 0 10px 40px rgba(15, 23, 42, 0.08));
	background: #fff !important;
	padding: clamp(1rem, 2vw, 1.25rem);
}

body.front-page #primary.site-main .media-section .media-card.blog .about-image {
	border-radius: 10px;
	overflow: hidden;
	height: auto;
	min-height: 0;
}

body.front-page #primary.site-main .media-section .media-card.blog .about-image img {
	border-radius: 10px;
	width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: cover;
}

/* Homepage media band: card layout (#primary.site-main.mdh-front-home; avoids body.front-page + link-wrap issues) */
#primary.site-main.mdh-front-home .mdh-home-media {
	padding: clamp(2.75rem, 6vw, 4rem) 0;
	text-align: left;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#primary.site-main.mdh-front-home .mdh-home-media__header {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}

#primary.site-main.mdh-front-home .mdh-home-media__header h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--color-neutral-dark, #0f172a);
}

#primary.site-main.mdh-front-home .mdh-home-media__lead {
	margin: 0;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	line-height: 1.55;
	color: var(--color-text-muted, #64748b);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__grid {
	align-items: stretch;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

#primary.site-main.mdh-front-home .mdh-home-media .media-card.blog.mdh-home-media__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--home-card-radius, 14px);
	border: 1px solid var(--color-border-grey, #e2e8f0);
	box-shadow: var(--home-card-shadow, 0 10px 40px rgba(15, 23, 42, 0.08));
	background: #fff !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#primary.site-main.mdh-front-home .mdh-home-media .media-card.blog.mdh-home-media__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
	border-color: rgba(31, 111, 178, 0.22);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100%;
	position: relative;
	z-index: 0;
	pointer-events: none;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	text-decoration: none !important;
	color: transparent !important;
	background: transparent;
	outline-offset: 2px;
	cursor: pointer;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__overlay:hover,
#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__overlay:visited,
#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__overlay:active {
	color: transparent !important;
	text-decoration: none !important;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__overlay:focus-visible {
	outline: 2px solid var(--color-primary-blue, #1f6fb2);
	color: transparent !important;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__thumb {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	background: linear-gradient(145deg, #e8f0f8 0%, #dfeaf5 55%, #e2e8f0 100%);
	overflow: hidden;
	border-radius: 0;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

#primary.site-main.mdh-front-home .mdh-home-media .media-card.blog.mdh-home-media__card:hover .mdh-home-media__img {
	transform: scale(1.04);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 8rem;
	background: linear-gradient(120deg, rgba(31, 111, 178, 0.12) 0%, rgba(10, 69, 72, 0.1) 100%);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.4rem;
	padding: clamp(1rem, 2.2vw, 1.25rem);
	min-height: 0;
	text-align: left;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__date {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary-blue, #1f6fb2);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__title {
	margin: 0;
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	font-weight: 600;
	line-height: 1.35;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--color-neutral-dark, #0f172a);
	transition: color 0.2s ease;
}

#primary.site-main.mdh-front-home .mdh-home-media .media-card.blog.mdh-home-media__card:hover .mdh-home-media__title {
	color: var(--color-primary-blue, #1f6fb2);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__excerpt {
	margin: 0;
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-text-muted, #64748b);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__read {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--home-mercos-band, #0a4548);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__read::after {
	content: "";
	display: inline-block;
	width: 0.35rem;
	height: 0.35rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: 0.05rem;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions {
	text-align: center;
	margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* "View All Media" — full button chrome (global .btn.primary is minimal; plain <a> picks up link defaults) */
#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: min(100%, 13.5rem);
	padding: 0.875rem 1.85rem;
	border-radius: 10px;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none !important;
	color: #fff !important;
	background: var(--color-primary-blue, #1f6fb2) !important;
	border: 2px solid var(--color-secondary-blue, #1a5c96);
	box-shadow: 0 4px 16px rgba(31, 111, 178, 0.32);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.15em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translateY(-0.06em);
	opacity: 0.95;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary:hover,
#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary:focus {
	text-decoration: none !important;
	color: #fff !important;
	background: var(--color-secondary-blue, #1a5c96) !important;
	border-color: var(--color-primary-blue, #1f6fb2);
	box-shadow: 0 8px 24px rgba(26, 92, 150, 0.38);
	transform: translateY(-2px);
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary:visited {
	color: #fff !important;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__actions .btn.primary:focus-visible {
	outline: 2px solid var(--color-primary-blue, #1f6fb2);
	outline-offset: 3px;
}

#primary.site-main.mdh-front-home .mdh-home-media .mdh-home-media__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: clamp(2rem, 4vw, 3rem);
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-muted, #64748b);
	background: var(--home-about-bg, linear-gradient(180deg, #f7fafc 0%, #f0f6fb 100%));
	border-radius: var(--home-card-radius, 14px);
	border: 1px dashed var(--color-border-grey, #e2e8f0);
}

/* Mercos: full-width dark band (front page only) */
body.front-page #primary.site-main > section.mercos-section--promo,
body.front-page #primary.site-main > section.enquiry-cta--promo {
	border-top: none;
}

.mercos-section--promo {
	background-color: var(--home-mercos-band, #0a4548);
	background-image: none;
	color: #fff;
	padding: clamp(2.25rem, 5vw, 3.25rem) 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mercos-section__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5rem;
	text-align: center;
}

@media (min-width: 768px) {

	.mercos-section__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		gap: 2rem;
	}
}

.mercos-section--promo .mercos-section__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	color: #fff;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.mercos-section--promo .mercos-section__title .mercos {
	color: rgba(180, 245, 240, 0.98);
}

.mercos-section--promo .mercos-section__lead {
	margin: 0;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	max-width: 36rem;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.mercos-section__action {
	flex-shrink: 0;
}

.mercos-section--promo .mercos-section__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 8px;
	background: #fff;
	color: #0a3538 !important;
	border: 2px solid #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.mercos-section--promo .mercos-section__btn:hover,
.mercos-section--promo .mercos-section__btn:focus {
	background: rgba(255, 255, 255, 0.94);
	border-color: #fff;
	color: #06282a !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

/* Enquiry: solid dark blue band (mockup) */
.enquiry-cta--promo {
	background-color: var(--home-enquiry-band, #0b4a73);
	background-image: none;
	color: #fff;
	border-top: none;
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.enquiry-cta--promo .enquiry-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.25rem;
}

.enquiry-cta--promo .enquiry-cta__title {
	margin: 0;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	font-weight: 700;
	color: #fff;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.enquiry-cta--promo .enquiry-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.75rem;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 8px;
	background: #fff;
	
	border: 2px solid #fff;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.enquiry-cta--promo .enquiry-cta__btn:hover,
.enquiry-cta--promo .enquiry-cta__btn:focus {
	background: rgba(255, 255, 255, 0.92);
	
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}


/*--------------------------------------------------------------
# Responsive Design - Mobile First Approach
--------------------------------------------------------------*/

/* Tablet and below (max-width: 992px) */
@media (max-width: 992px) {

	/* Container adjustments */
	.container {
		padding: 0 15px;
	}

	/* Hero Section */
	.hero-section {
		padding: 60px 0;
	}

	.hero-title {
		font-size: 32px !important;
		line-height: 1.3;
	}

	.hero-subtitle {
		font-size: 15px !important;
	}

	.hero-buttons {
		display: flex;
		flex-direction: column;
		gap: 15px;
		align-items: center;
	}

	.hero-buttons .btn {
		width: 100%;
		max-width: 300px;
		margin: 0;
		text-align: center;
	}

	/* Features Checkmarks */
	.features-checkmarks ul {
		flex-direction: column;
		gap: 15px;
		align-items: flex-start;
	}

	.features-checkmarks ul li {
		margin: 0;
		width: 100%;
		max-width: none;
		flex: none;
		justify-content: flex-start;
		text-align: left;
	}

	.features-checkmarks li a {
		justify-content: flex-start;
	}

	/* Product Portfolio */
	/* .product-portfolio {
		padding: 40px 0;
	} */

	.product-swiper {
		padding: 15px 0;
	}

	.product-portfolio .product-card.product-card--slider {
		min-height: 0;
	}

	.product-portfolio .product-card__media {
		min-height: 160px;
	}

	.product-image {
		height: 180px;
	}

	/* About Section */
	.about-container {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.about-image {
		height: auto;
		min-height: 250px;
		order: -1;
		/* Image first on mobile */
	}

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

	.about-section .btn {
		display: inline-block;
		width: auto;
	}

	/* Icon Features / Strength Section */
	.icon-features {
		padding: 40px 0;
	}

	.icon-features .strength-section__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.icon-item {
		border-right: none;
		border-bottom: solid 1px #e5e5e5;
		padding-bottom: 30px;
	}

	.icon-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	/* Media Section */
	.media-section {
		padding: 40px 0;
	}

	.media-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		margin: 30px 0;
	}

	#primary.site-main.mdh-front-home .mdh-home-media .media-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(1rem, 2.5vw, 1.5rem);
	}

	.media-section .about-container {
		flex-direction: row;
		gap: 15px;
	}

	.media-section .about-image {
		height: 80px;
		min-width: 80px;
		flex-shrink: 0;
	}

	.media-section .about-text {
		flex: 1;
	}

	/* Mercos & Contact Sections */
	.mercos-section,
	.enquiry-cta {
		padding: 40px 0;
	}

	.mercos-section .btn,
	.enquiry-cta .btn,
	.media-section .btn {
		display: inline-block;
		width: auto;
		margin-top: 20px;
	}
}

/* Mobile devices (max-width: 768px) */
@media (max-width: 768px) {

	/* Container */
	.container {
		padding: 0 15px;
	}

	/* Hero Section - Mobile Optimizations */
	.hero-section {
		padding: 50px 0;
	}

	.hero-section--has-bg .hero-section__bg {
		background-size: cover !important;
		background-position: 50% 38% !important;
	}

	.hero-title {
		font-size: 28px !important;
		margin-bottom: 15px;
		line-height: 1.2;
	}

	.hero-subtitle {
		font-size: 14px !important;
		margin-bottom: 30px;
		line-height: 1.5;
	}

	.hero-buttons {
		gap: 12px;
	}

	.hero-buttons .btn {
		padding: 14px 20px;
		font-size: 15px;
		max-width: 100%;
	}

	/* Features Checkmarks - Mobile */
	.features-checkmarks {
		padding: 15px 0 !important;
	}

	.features-checkmarks ul {
		gap: 12px;
	}

	.features-checkmarks ul li {
		font-size: 16px;
		padding: 10px 0;
	}

	.features-checkmarks ul li svg {
		width: 16px;
		height: 16px;
	}

	/* Product Portfolio - Mobile */
	.product-portfolio {
		padding: 30px 0;
	}

	.product-portfolio h2 {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.product-portfolio p {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.product-swiper {
		margin-top: 20px;
		padding: 10px 0;
	}

	.product-portfolio .product-card.product-card--slider {
		padding: 14px;
	}

	.product-portfolio .product-card__media {
		height: 150px;
		margin-bottom: 12px;
	}

	.product-card {
		min-height: 350px;
		padding: 15px;
	}

	.product-portfolio .product-card.product-card--slider {
		min-height: 0;
	}

	.product-image {
		height: 160px;
		margin-bottom: 15px;
	}

	.product-portfolio .product-card__title {
		font-size: 16px;
		margin-bottom: 6px;
	}

	.product-portfolio .product-card__meta {
		font-size: 13px;
		margin-bottom: 12px;
		min-height: calc(1.45em * 3);
	}

	.product-portfolio .product-card__actions .btn {
		padding: 10px;
		font-size: 14px;
	}

	.product-card h3 {
		font-size: 16px;
		margin-bottom: 8px;
	}

	.product-card p {
		font-size: 13px;
		margin-bottom: 15px;
	}

	.product-card .btn {
		padding: 10px;
		font-size: 14px;
	}

	/* About Section - Mobile */
	.about-section {
		padding: 30px 0;
	}

	.about-container {
		gap: 20px;
	}

	.about-text h2 {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.about-text p {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 20px;
	}

	.about-image {
		min-height: 200px;
	}

	.about-section .btn {
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Icon Features - Mobile */
	.icon-features {
		padding: 30px 0;
	}

	.icon-features .strength-section__grid {
		gap: 0;
	}

	.icon {
		width: 60px;
		height: 60px;
	}

	.icon-item h3 {
		font-size: 16px;
		margin-top: 15px;
		line-height: 1.4;
	}

	.icon-item {
		padding-bottom: 25px;
	}

	/* Media Section - Mobile */
	.media-section {
		padding: 30px 0;
	}

	.media-section h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.media-grid {
		margin: 20px 0;
		gap: 15px;
	}

	#primary.site-main.mdh-front-home .mdh-home-media .media-grid {
		grid-template-columns: 1fr;
	}

	.media-card {
		padding: 15px;
	}

	.media-section .about-container {
		gap: 12px;
		margin-bottom: 12px;
	}

	.media-section .about-image {
		height: 70px;
		min-width: 70px;
	}

	.media-section .about-text a {
		font-size: 15px;
		line-height: 1.4;
	}

	.media-card p {
		font-size: 13px;
		line-height: 1.5;
		margin: 0;
	}

	.media-section .btn {
		margin-top: 15px;
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Mercos Section - Mobile */
	.mercos-section {
		padding: 30px 0;
	}

	.mercos-section h2 {
		font-size: 24px;
		margin-bottom: 15px;
	}

	.mercos-section p {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.mercos-section .btn {
		padding: 12px 20px;
		font-size: 14px;
	}

	/* Contact/Enquiry CTA - Mobile */
	.enquiry-cta {
		padding: 30px 0;
	}

	.enquiry-cta h2 {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.enquiry-cta .btn {
		padding: 12px 24px;
		font-size: 15px;
	}

	/* Site Main - Mobile */
	.site-main {
		overflow-x: hidden;
		width: 100%;
	}

	/* Main container adjustments */
	#primary.site-main {
		padding: 0;
		margin: 0;
	}
}

/* Small Mobile devices (max-width: 480px) */
@media (max-width: 480px) {

	/* Hero Section - Small Mobile */
	.hero-section {
		padding: 40px 0;
	}

	.hero-title {
		font-size: 24px !important;
	}

	.hero-subtitle {
		font-size: 13px !important;
	}

	.hero-buttons .btn {
		padding: 12px 18px;
		font-size: 14px;
	}

	/* Product Cards - Small Mobile */
	.product-card {
		min-height: 320px;
		padding: 12px;
	}

	.product-image {
		height: 140px;
	}

	.product-card h3 {
		font-size: 15px;
	}

	.product-card p {
		font-size: 12px;
	}

	/* About Section - Small Mobile */
	.about-text h2 {
		font-size: 22px;
	}

	.about-image {
		min-height: 180px;
	}

	/* Icon Features - Small Mobile */
	.icon {
		width: 50px;
		height: 50px;
	}

	.icon-item h3 {
		font-size: 15px;
	}

	/* General Section Headings - Small Mobile */
	.product-portfolio h2,
	.media-section h2,
	.mercos-section h2 {
		font-size: 22px;
	}

	.enquiry-cta h2 {
		font-size: 20px;
	}
}

/* Ensure images are always responsive */
img {
	max-width: 100%;
	height: auto;
}

/* Prevent horizontal scroll */
body {
	overflow-x: hidden;
}

/* Smooth transitions for better UX */
.hero-buttons .btn,
.product-card .btn,
.about-section .btn,
.mercos-section .btn,
.media-section .btn,
.enquiry-cta .btn {
	transition: all 0.3s ease;
}

/* Touch-friendly button sizes on mobile */
@media (max-width: 768px) {
	.btn {
		min-height: 44px;
		/* Apple's recommended touch target size */
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Override inline styles for responsive design */
@media (max-width: 768px) {
	section.features-checkmarks {
		padding: 15px 0 !important;
	}

	.hero-title {
		font-size: 28px !important;
	}

	.hero-subtitle {
		font-size: 14px !important;
	}
}

/* Ensure Swiper is responsive */
@media (max-width: 768px) {
	.swiper {
		overflow: visible;
	}

	.swiper-slide {
		width: 100%;
	}

	.swiper-wrapper {
		display: flex;
	}
}

/* Main site structure responsive */
#primary.site-main {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Base site-main styles */
.site-main {
	width: 100%;
	box-sizing: border-box;
}

/* Section spacing adjustments for mobile */
@media (max-width: 768px) {
	section {
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ── FOOTER BASE (legacy layer) ──────────────────────────────────────────────
 * These rules are the original footer styles. They are FULLY superseded by the
 * higher-specificity `#colophon.site-footer` block in css/chrome.css, which is
 * enqueued after this file. Do not edit here; edit chrome.css instead.
 * Kept in place as a low-specificity fallback should chrome.css fail to load.
 * ─────────────────────────────────────────────────────────────────────────── */
.site-footer {
	background: #f8f8f8;
	font-size: 14px;
	color: #333;
}

.site-footer .site-info p {
	margin-bottom: 0px;
}

.footer-widgets {
	padding: 40px 0;
	background: #f7f7f7;
	
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
}

.footer-column .widget-title {
	font-size: 18px;
	margin-bottom: 20px;
	font-weight: bold;
}

.footer-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-column ul li {
	margin-bottom: 10px;
}

.footer-column ul li a {
	color: #333;
	text-decoration: none;
}

.footer-column ul li a:hover {
	text-decoration: underline;
}

.social-icons {
	margin-top: 20px;
}

.social-icons a {
	margin-right: 15px;
	opacity: 0.7;
}

.social-icons a:hover {
	opacity: 1;
}

.social-icons img {
	width: 24px;
	height: 24px;
}

.site-info {
	background: #e5e5e5;
	padding: 20px 0;
	text-align: center;
	font-size: 13px;
	color: #666;
}

.footer-column:last-child {
	border-right: none;
}

.footer-column {
	
}

@media (max-width: 992px) {
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.footer-columns {
		grid-template-columns: 1fr;
	}

	.footer-widgets {
		padding: 30px 0;
	}
}

.hero-pages .about-container .about-text {
	text-align: left;
}

.wp-block-separator {
	width: 80%;
}

/*--------------------------------------------------------------
# Products Template Styles
--------------------------------------------------------------*/

/* Products Page Hero Section */
.hero-pages.about-section {
	padding: 60px 0;
	margin-bottom: 0;
}

/*
 * Products hero also uses .hero-section, which globally sets flex + centered
 * content. Reset layout so title/subtitle stay left-aligned and readable.
 */
.products-template .hero-pages.about-section.hero-section {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

.products-template .hero-pages.about-section.hero-section:not(.products-page-hero--has-bg) {
	background: #e5e5e5;
}

/* Full-bleed featured image + readable text (no tiling; photo visible on the right) */
.products-template .products-page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(400px, 46vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

.products-template .products-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* Soft left “readable column” only — photo stays visible across most of the hero */
.products-template .products-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(248, 250, 252, 0.72) 18%,
		rgba(248, 250, 252, 0.28) 38%,
		rgba(248, 250, 252, 0) 56%
	);
}

/* Slight depth on the right edge only (photo side) */
.products-template .products-page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(15, 23, 42, 0.16) 0%,
		rgba(15, 23, 42, 0) 50%
	);
}

.products-template .products-page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	justify-items: start;
}

/* No solid card — keeps one continuous background; type uses scrim + shadow */
.products-template .products-page-hero--has-bg .about-text {
	text-align: left;
	justify-self: start;
	align-items: flex-start;
	max-width: min(32rem, 100%);
	margin: 0;
	padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.15rem);
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	
}

.products-template .products-page-hero--has-bg .about-text h2 {
	color: #0b1220;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.18;
	font-size: clamp(1.85rem, 1.1vw + 1.45rem, 2.35rem);
	text-align: left;
	margin-bottom: 0.45em;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

.products-template .products-page-hero--has-bg .about-text p {
	color: #1e293b;
	font-weight: 500;
	line-height: 1.65;
	font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.05rem);
	max-width: none;
	text-align: left;
	margin-bottom: 0;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

#primary.site-main.products-template .products-page-hero--has-bg,
#primary.site-main.products-template .products-page-hero--has-bg .about-text,
#primary.site-main.products-template .products-page-hero--has-bg .about-text h2,
#primary.site-main.products-template .products-page-hero--has-bg .about-text p {
	text-align: left;
}

/*--------------------------------------------------------------
# About Us Template Styles
--------------------------------------------------------------*/

.about-template-wrapper .hero-pages.about-section.hero-section {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

.about-template-wrapper .about-page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(440px, 52vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

.about-template-wrapper .about-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.about-template-wrapper .about-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(248, 250, 252, 0.72) 18%,
		rgba(248, 250, 252, 0.28) 38%,
		rgba(248, 250, 252, 0) 56%
	);
}

.about-template-wrapper .about-page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(15, 23, 42, 0.18) 0%,
		rgba(15, 23, 42, 0) 52%
	);
}

.about-template-wrapper .about-page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	
	justify-items: start;
}

.about-template-wrapper .about-page-hero--has-bg .about-text {
	text-align: left;
	justify-self: start;
	align-items: flex-start;
	max-width: min(38rem, 100%);
	margin: 0;
	padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.15rem);
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-left: 3px solid var(--color-primary-blue, #1f6fb2);
}

.about-template-wrapper .about-page-hero__title {
	color: #0b1220;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.15;
	font-size: clamp(2rem, 1.4vw + 1.5rem, 2.75rem);
	margin-bottom: 0.5rem;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

.about-template-wrapper .about-page-hero__subtitle {
	color: #1e293b;
	font-weight: 550;
	line-height: 1.65;
	font-size: clamp(1rem, 0.35vw + 0.92rem, 1.125rem);
	margin: 0;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

.about-template-wrapper .about-section-block {
	padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
}

.about-template-wrapper .media-section {
	text-align: left;
}

.about-template-wrapper .container {
	max-width: min(1180px, 100% - 3rem);
}

.about-template-wrapper .about-section-block {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Section-level “bands” (like homepage) */
.about-template-wrapper .vmv-section {
	background: linear-gradient(180deg, #eef6ff 0%, #e6f0fb 100%);
}

.about-template-wrapper .coverage-section {
	background: #ffffff;
}

.about-template-wrapper .compliance-section {
	background: linear-gradient(180deg, #f6fbff 0%, #f1f7ff 100%);
}

.about-template-wrapper .how-we-work-section {
	background: linear-gradient(180deg, #f8fafc 0%, #f2f6fb 100%);
}

.about-template-wrapper .partners-section {
	background: #ffffff;
}

/* Ambient graphics per section (subtle, non-distracting) */
.about-template-wrapper .about-section-block::before,
.about-template-wrapper .about-section-block::after {
	content: "";
	position: absolute;
	inset: -30%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.7;
}

.about-template-wrapper .about-section-block::before {
	background:
		radial-gradient(28% 22% at 16% 20%, rgba(31, 111, 178, 0.18) 0%, rgba(31, 111, 178, 0) 68%),
		radial-gradient(26% 20% at 82% 34%, rgba(15, 124, 134, 0.14) 0%, rgba(15, 124, 134, 0) 70%);
	transform: rotate(-6deg);
}

.about-template-wrapper .about-section-block::after {
	background:
		linear-gradient(90deg, rgba(2, 6, 23, 0.03) 1px, transparent 1px),
		linear-gradient(0deg, rgba(2, 6, 23, 0.03) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(circle at 40% 35%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 62%);
	-webkit-mask-image: radial-gradient(circle at 40% 35%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 62%);
	opacity: 0.45;
}

.about-template-wrapper .about-section-block > .container {
	position: relative;
	z-index: 1;
}

.about-template-wrapper .about-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.about-template-wrapper .about-section__title {
	margin: 0 auto 0.75rem;
	font-size: clamp(1.5rem, 0.8vw + 1.2rem, 2rem);
	letter-spacing: -0.015em;
	text-align: center;
	position: relative;
	display: table;
	padding-bottom: 0.5rem;
}

.about-template-wrapper .about-section__title::after {
	content: "";
	display: block;
	width: clamp(56px, 8vw, 84px);
	height: 3px;
	margin: 0.45rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-primary-blue, #1f6fb2) 0%, #4f9dd8 100%);
}

.about-template-wrapper .about-section__lead {
	max-width: 64ch;
	margin: 0 auto 1.5rem;
	color: #475569;
	line-height: 1.85;
	font-size: clamp(1rem, 0.2vw + 0.95rem, 1.12rem);
	font-weight: 450;
	text-align: center;
}

.about-template-wrapper .about-richtext {
	color: #475569;
	line-height: 1.85;
	font-size: clamp(0.98rem, 0.15vw + 0.93rem, 1.04rem);
	text-align: left;
}

.about-template-wrapper .about-richtext ul,
.about-template-wrapper .about-richtext ol {
	padding-left: 1.25rem;
	margin: 0.75rem 0 0;
}

.about-template-wrapper .coverage-section .about-section__lead {
	max-width: 72ch;
	font-size: clamp(1rem, 0.28vw + 0.94rem, 1.08rem);
	line-height: 1.8;
	margin-bottom: 1.1rem;
}

.about-template-wrapper .coverage-section__content {
	max-width: min(860px, 100%);
	margin: 0 auto;
	padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.8vw, 1.6rem);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(15, 23, 42, 0.09);
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	text-align: left;
}

.about-template-wrapper .coverage-section__content p {
	margin: 0.5rem 0;
	color: #334155;
	line-height: 1.75;
}

.about-template-wrapper .coverage-section__content ul,
.about-template-wrapper .coverage-section__content ol {
	margin: 0.8rem 0 0;
	padding-left: 1.25rem;
}

.about-template-wrapper .coverage-section__content li {
	color: #334155;
	margin: 0 0 0.45rem;
	line-height: 1.65;
}

.about-template-wrapper .vmv-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.about-template-wrapper .vmv-block {
	background: #fff;
	border-radius: 16px;
	padding: 1.45rem 1.35rem;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-template-wrapper .vmv-block h3 {
	margin: 0 0 0.6rem;
	font-size: 1.14rem;
	text-align: left;
}

.about-template-wrapper .vmv-block p {
	margin: 0;
	color: #475569;
	line-height: 1.75;
	font-size: 0.98rem;
	text-align: left;
}

.about-template-wrapper .vmv-block:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.about-template-wrapper .compliance-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.about-template-wrapper .compliance-item {
	background: #fff;
	border-radius: 14px;
	padding: 1.35rem 1.25rem 1.25rem;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.about-template-wrapper .compliance-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(80% 90% at 0% 0%, rgba(31, 111, 178, 0.10) 0%, rgba(31, 111, 178, 0) 55%),
		radial-gradient(90% 90% at 100% 0%, rgba(15, 124, 134, 0.08) 0%, rgba(15, 124, 134, 0) 58%);
}

.about-template-wrapper .compliance-item > * {
	position: relative;
	z-index: 1;
}

.about-template-wrapper .compliance-item:hover {
	transform: translateY(-2px);
	border-color: rgba(31, 111, 178, 0.22);
	box-shadow: 0 16px 46px rgba(15, 23, 42, 0.12);
}

.about-template-wrapper .compliance-item h3 {
	margin: 0 0 0.6rem;
	font-size: 1.14rem;
	text-align: left;
}

.about-template-wrapper .compliance-item p {
	margin: 0;
	color: #475569;
	line-height: 1.75;
	font-size: 0.98rem;
	text-align: left;
}

.about-template-wrapper .compliance-item h3::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-top: 0.55rem;
	border-radius: 999px;
	background: rgba(31, 111, 178, 0.35);
}

.about-template-wrapper .process-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.about-template-wrapper .step {
	background: #fff;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	padding: 1.4rem 1.3rem;
	text-align: left;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-template-wrapper .step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: rgba(31, 111, 178, 0.12);
	color: var(--color-primary-blue, #1f6fb2);
	font-weight: 800;
	margin-bottom: 0.75rem;
}

.about-template-wrapper .step h3 {
	margin: 0 0 0.6rem;
	font-size: 1.08rem;
	text-align: left;
}

.about-template-wrapper .step p {
	margin: 0;
	color: #475569;
	line-height: 1.75;
	font-size: 0.97rem;
	text-align: left;
}

.about-template-wrapper .step:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.11);
}

.about-template-wrapper .partners-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.65rem;
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
}

.about-template-wrapper .partner-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.05rem;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
	background: rgba(255, 255, 255, 0.94);
}

.about-template-wrapper .partner-item img {
	max-width: 100%;
	max-height: 62px;
	width: auto;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.9;
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.about-template-wrapper .partner-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
	transform: translateY(-1px);
}

@media (max-width: 1024px) {
	.about-template-wrapper .vmv-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-template-wrapper .compliance-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-template-wrapper .process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-template-wrapper .partners-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.about-template-wrapper .about-page-hero--has-bg {
		min-height: auto;
	}

	.about-template-wrapper .about-text {
		text-align: left;
	}

	.about-template-wrapper .vmv-grid,
	.about-template-wrapper .compliance-grid,
	.about-template-wrapper .process-steps,
	.about-template-wrapper .partners-grid {
		grid-template-columns: 1fr;
	}
}

/* Product search results page: reuse products listing hero styles */
.product-search-results-page .hero-pages.about-section.hero-section {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

.product-search-results-page .products-page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(400px, 46vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

.product-search-results-page .products-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.product-search-results-page .products-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(248, 250, 252, 0.72) 18%,
		rgba(248, 250, 252, 0.28) 38%,
		rgba(248, 250, 252, 0) 56%
	);
}

.product-search-results-page .products-page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(15, 23, 42, 0.16) 0%,
		rgba(15, 23, 42, 0) 50%
	);
}

.product-search-results-page .products-page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	max-width: 100%;
	
	width: 100%;
	justify-items: start;
}

.product-search-results-page .products-page-hero--has-bg .about-text {
	text-align: left;
	justify-self: start;
	align-items: flex-start;
	max-width: min(32rem, 100%);
	margin: 0;
	padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.15rem);
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-left: 3px solid var(--color-primary-blue, #1f6fb2);
}

.product-search-results-page .products-page-hero--has-bg .about-text h2 {
	color: #0b1220;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.18;
	font-size: clamp(1.85rem, 1.1vw + 1.45rem, 2.35rem);
	text-align: left;
	margin-bottom: 0.45em;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

.product-search-results-page .products-page-hero--has-bg .about-text p {
	color: #1e293b;
	font-weight: 500;
	line-height: 1.65;
	font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.05rem);
	max-width: none;
	text-align: left;
	margin-bottom: 0;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

.product-search-results-page .hero-pages .about-container {
	grid-template-columns: 1fr;
}

.products-template .hero-pages .about-container {
	grid-template-columns: 1fr;
}

/* Products hero: always left-aligned title block (overrides .hero-pages mobile center) */
.products-template .hero-pages.about-section.hero-section .about-text {
	text-align: left;
	justify-self: start;
}

body.page-template-products-template .hero-pages.about-section.hero-section .about-text {
	text-align: left;
	justify-self: start;
}

.hero-pages .about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.hero-pages .about-text h2 {
	margin-bottom: 15px;
	font-size: 32px;
}

.hero-pages .about-text p {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.6;
}

.hero-pages .about-image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-pages .about-image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Search Form Section */
#product-searchform {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	margin: 0;
	padding: var(--space-5);
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
}

#product-searchform input[type="text"] {
	flex: 1;
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-surface);
	transition: border-color var(--duration-base) var(--ease),
	            box-shadow var(--duration-base) var(--ease);
}

#product-searchform input[type="text"]:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
}

#product-searchform input[type="submit"] {
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-6);
	background: var(--color-primary);
	color: var(--color-text-invert);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	font-family: var(--font-body);
	white-space: nowrap;
	transition: background-color var(--duration-base) var(--ease);
}

#product-searchform input[type="submit"]:hover {
	background: var(--color-primary-hover);
}

/* Sort Options Section */
.sort-options {
	padding: var(--space-5) 0;
	background: var(--color-surface-alt);
}

.sort-options ul#sort-by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sort-options ul#sort-by li {
	margin: 0;
}

.sort-options ul#sort-by li label {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.sort-options ul#sort-by li a {
	display: inline-flex;
	align-items: center;
	color: var(--color-text-muted);
	text-decoration: none;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: background-color var(--duration-base) var(--ease),
	            color var(--duration-base) var(--ease),
	            border-color var(--duration-base) var(--ease);
}

.sort-options ul#sort-by li a:hover {
	background: var(--color-surface-sunk);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.sort-options ul#sort-by li a.active {
	background: var(--color-primary);
	color: var(--color-text-invert);
	border-color: var(--color-primary);
	font-weight: var(--fw-semibold);
}

/* Product Table Section */
.media-section .table-container {
	margin: 0;
	padding: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
}

.responsive-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: var(--color-surface);
}

.responsive-table th,
.responsive-table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	color: var(--color-text);
	vertical-align: middle;
}

.responsive-table thead th {
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: var(--z-base);
	white-space: nowrap;
	border-bottom: none;
	padding: var(--space-3) var(--space-5);
}

/* S.No column — narrow, muted */
.responsive-table th:first-child,
.responsive-table td:first-child {
	color: var(--color-text-subtle);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-regular);
	width: 4rem;
	text-align: center;
}
.responsive-table thead th:first-child {
	color: rgba(255, 255, 255, 0.7);
}

.responsive-table tbody tr {
	transition: background-color var(--duration-fast) var(--ease),
	            box-shadow var(--duration-fast) var(--ease);
}

.responsive-table tbody tr:nth-child(even) {
	background-color: var(--color-surface-alt);
}

.responsive-table tbody tr:hover {
	background-color: var(--color-primary-subtle);
	box-shadow: inset 3px 0 0 var(--color-primary);
}

.responsive-table tbody tr:last-child td {
	border-bottom: none;
}

/* Brand Name link */
.responsive-table tbody td a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	text-underline-offset: 0.15em;
	transition: color var(--duration-base) var(--ease);
}

.responsive-table tbody td a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Product results meta line */
.product-results-meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
	font-weight: var(--fw-medium);
}

/* Pagination */
.pagination,
.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-8) 0 var(--space-4);
	padding: var(--space-4) 0;
	flex-wrap: wrap;
}

.pagination a,
.pagination span,
.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-height-sm);
	min-height: var(--control-height-sm);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-primary);
	background: var(--color-surface);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	transition: background-color var(--duration-base) var(--ease),
	            color var(--duration-base) var(--ease),
	            border-color var(--duration-base) var(--ease),
	            box-shadow var(--duration-base) var(--ease);
}

.pagination a:hover,
.page-numbers a:hover {
	background: var(--color-primary);
	color: var(--color-text-invert);
	border-color: var(--color-primary-active);
	box-shadow: var(--shadow-sm);
}

.pagination .current,
.page-numbers .current {
	background: var(--color-primary);
	color: var(--color-text-invert);
	border-color: var(--color-primary-active);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-sm);
}

/* No products found message */
.responsive-table tbody td[colspan] {
	text-align: center;
	padding: var(--space-16) var(--space-8);
	color: var(--color-text-muted);
	font-style: italic;
	font-size: var(--fs-base);
}

/* Section Spacing for Products Template */
.hero-pages.about-section {
	margin-bottom: 0;
}

.hero-pages.about-section+.media-section {
	padding-top: 40px;
	padding-bottom: 20px;
	margin-top: 0;
}

.features-checkmarks+.media-section {
	padding-top: 20px;
	padding-bottom: 40px;
	margin-top: 0;
}

.media-section+.features-checkmarks {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 0;
}

/* Products template specific media-section overrides */
.products-template .media-section,
body.page-template-products-template .media-section {
	padding: 30px 0;
}

.products-template .media-section:first-of-type {
	padding-top: 40px;
}

.products-template .media-section:last-of-type {
	padding-bottom: 40px;
}

/* --------------------------------------------------------------------------
   Product listing pages: unified search + sort toolbar (products + search)
   Sits in one visual flow with the hero — no “random white card on grey strip”.
   -------------------------------------------------------------------------- */
#primary.product-listing-page .media-section.products-listing-toolbar {
	position: relative;
	z-index: var(--z-base);
	padding-top: var(--space-8);
	padding-bottom: var(--space-10);
	
}

/* Pull toolbar up slightly under the hero — softer section handoff */
#primary.product-listing-page .hero-pages.about-section + .media-section.products-listing-toolbar {
	margin-top: -6rem;
	padding-top: var(--space-5);
	padding-bottom: var(--space-10);
	
}

#primary.product-listing-page .products-listing-toolbar + .media-section {
	padding-top: var(--space-6);
}

#primary.product-listing-page .products-listing-toolbar__inner {
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--color-on-dark-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6));
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#primary.product-listing-page .products-listing-toolbar__inner {
		background: var(--color-surface);
	}
}

#primary.product-listing-page .products-listing-toolbar form#product-searchform {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: var(--space-3);
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

#primary.product-listing-page .products-listing-toolbar #product-searchform input[type="text"] {
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border-strong);
	font-size: var(--fs-base);
	background: var(--color-surface);
	transition: border-color var(--duration-base) var(--ease),
	            box-shadow var(--duration-base) var(--ease);
}

#primary.product-listing-page .products-listing-toolbar #product-searchform input[type="text"]:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
}

#primary.product-listing-page .products-listing-toolbar #product-searchform input[type="submit"] {
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	border: none;
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease);
}

#primary.product-listing-page .products-listing-toolbar #product-searchform input[type="submit"]:hover {
	background: var(--color-primary-hover);
}

#primary.product-listing-page .products-listing-toolbar .sort-options {
	padding: 0;
	margin: 0;
	background: transparent;
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary.product-listing-page .products-listing-toolbar .sort-options__legend {
	margin: 0 var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

#primary.product-listing-page .products-listing-toolbar .sort-options__legend span {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-subtle);
}

#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	font-size: var(--fs-ui);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	text-decoration: none;
	transition: background-color var(--duration-base) var(--ease),
	            color var(--duration-base) var(--ease),
	            border-color var(--duration-base) var(--ease),
	            box-shadow var(--duration-base) var(--ease);
}

#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li a:hover {
	background: var(--color-surface-sunk);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li a.active {
	background: var(--color-primary);
	color: var(--color-text-invert);
	border-color: var(--color-primary-active);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-sm);
}

#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li a.active:hover {
	background: var(--color-primary-hover);
}

/* Responsive Design for Products Template */
@media (max-width: 992px) {
	.hero-pages.about-section {
		padding: var(--space-12) 0;
	}

	.hero-pages .about-container {
		gap: var(--space-8);
	}

	.hero-pages .about-text h2 {
		font-size: var(--fs-2xl);
	}

	#product-searchform {
		flex-direction: column;
		padding: var(--space-4);
	}

	#product-searchform input[type="text"],
	#product-searchform input[type="submit"] {
		width: 100%;
	}

	.sort-options ul#sort-by {
		gap: var(--space-3);
	}

	.sort-options ul#sort-by li a {
		padding: var(--space-2) var(--space-3);
		font-size: var(--fs-sm);
	}

	#primary.product-listing-page .products-listing-toolbar form#product-searchform {
		grid-template-columns: 1fr;
	}

	#primary.product-listing-page .products-listing-toolbar #product-searchform input[type="submit"] {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.hero-pages.about-section {
		padding: var(--space-10) 0;
	}

	.hero-pages .about-container {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.hero-pages .about-image {
		order: -1;
		justify-content: flex-start;
	}

	.hero-pages .about-text {
		text-align: center;
	}

	.hero-pages .about-text h2 {
		font-size: var(--fs-xl);
		margin-bottom: var(--space-3);
	}

	.hero-pages .about-text p {
		font-size: var(--fs-sm);
	}

	/* Search Form Mobile */
	#product-searchform {
		padding: var(--space-3);
		gap: var(--space-2);
	}

	/* Sort Options Mobile */
	.sort-options {
		padding: var(--space-4) 0;
	}

	.sort-options ul#sort-by {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.sort-options ul#sort-by li {
		width: 100%;
	}

	.sort-options ul#sort-by li label {
		display: block;
		margin-bottom: var(--space-2);
	}

	.sort-options ul#sort-by li a {
		display: block;
		width: 100%;
	}

	#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by {
		flex-direction: row;
		align-items: center;
	}

	#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li {
		width: auto;
	}

	#primary.product-listing-page .products-listing-toolbar .sort-options ul#sort-by li a {
		display: inline-flex;
		width: auto;
	}

	/* Table Mobile */
	.responsive-table th,
	.responsive-table td {
		padding: var(--space-3) var(--space-3);
		font-size: var(--fs-xs);
	}

	.responsive-table thead th {
		font-size: 10px;
	}

	/* Section Spacing Mobile */
	.hero-pages.about-section+.media-section {
		padding-top: 30px;
		padding-bottom: 15px;
	}

	.features-checkmarks+.media-section {
		padding-top: 15px;
		padding-bottom: 30px;
	}

	.media-section+.features-checkmarks {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}

@media (max-width: 480px) {
	.hero-pages .about-text h2 {
		font-size: 22px;
	}

	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -15px;
		padding: 0 15px;
	}

	.responsive-table {
		font-size: 12px;
		min-width: 500px;
	}

	.responsive-table th,
	.responsive-table td {
		padding: 8px 6px;
		font-size: 12px;
		white-space: nowrap;
	}

	.responsive-table th {
		font-size: 11px;
	}

	.responsive-table tbody td a {
		font-size: 12px;
	}

	.pagination,
	.page-numbers {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pagination a,
	.pagination span,
	.page-numbers a,
	.page-numbers span {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* Alternative: Keep table structure but make it scrollable on small screens */
@media (max-width: 600px) and (min-width: 481px) {
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -15px;
		padding: 0 15px;
	}

	.responsive-table {
		min-width: 600px;
	}
}

/* End of generated css */

/*--------------------------------------------------------------
# Single Product Page Styles
--------------------------------------------------------------*/

/* Single Product Page Hero Section */
/*--------------------------------------------------------------
# Product Detail Page — Hero
--------------------------------------------------------------*/

/* Section wrapper */
.single-product-page .product-detail-hero {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-16);
}

/* 4px brand accent bar at top of section */
.single-product-page .product-detail-hero__top-bar {
	height: 4px;
	background: var(--color-primary);
}

.single-product-page .product-detail-hero__container {
	padding-top: var(--space-6);
}

/* Breadcrumb */
.single-product-page .product-detail-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	font-size: var(--fs-xs);
	margin-bottom: var(--space-8);
}

.single-product-page .product-detail-breadcrumb__link {
	color: var(--color-text-muted);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

.single-product-page .product-detail-breadcrumb__link:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.single-product-page .product-detail-breadcrumb__sep {
	color: var(--color-slate-300);
}

.single-product-page .product-detail-breadcrumb__current {
	color: var(--color-text-muted);
}

/* 2-column layout: image | info */
.single-product-page .product-detail-hero__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-8), 5vw, var(--space-16));
	align-items: start;
}

/* Image column */
.single-product-page .product-detail-hero__gallery {
	position: sticky;
	top: calc(var(--header-height) + var(--space-6));
}

.single-product-page .product-detail-hero__frame {
	aspect-ratio: 1;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) var(--ease);
}

.single-product-page .product-detail-hero__frame:hover {
	box-shadow: var(--shadow-md);
}

.single-product-page .product-detail-hero__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-6);
	display: block;
}

/* No-image fallback */
.single-product-page .product-detail-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-slate-300);
}

.single-product-page .product-detail-hero__placeholder svg {
	width: 30%;
	height: 30%;
}

/* Info column */
.single-product-page .product-detail-hero__info {
	padding-top: var(--space-2);
}

/* Molecule badge — pill above the title */
.single-product-page .product-detail-hero__molecule-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-primary-subtle);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-4);
}

/* Brand title */
.single-product-page .product-detail-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-strong);
	margin: 0 0 var(--space-3);
}

/* Generic link */
.single-product-page .product-detail-hero__generic-link {
	font-size: var(--fs-sm);
	margin: 0 0 var(--space-6);
}

.single-product-page .product-detail-hero__generic-link a {
	color: var(--color-primary);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.single-product-page .product-detail-hero__generic-link a:hover {
	text-decoration: underline;
}

/* Spec list — horizontal rule dividers */
.single-product-page .product-detail-specs {
	margin: var(--space-6) 0 var(--space-8);
	border-top: 1px solid var(--color-border);
}

.single-product-page .product-detail-specs__row {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--space-2) var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	align-items: baseline;
}

.single-product-page .product-detail-specs__row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-text-subtle);
	margin: 0;
}

.single-product-page .product-detail-specs__row dd {
	font-size: var(--fs-base);
	color: var(--color-text);
	font-weight: var(--fw-medium);
	margin: 0;
}

/* CTA buttons */
.single-product-page .product-detail-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
.single-product-page .product-detail-hero__actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-6);
	min-height: var(--control-height);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		color var(--duration-base) var(--ease),
		box-shadow var(--duration-base) var(--ease);
}
.single-product-page .product-detail-hero__actions .btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
}
.single-product-page .product-detail-hero__actions .btn-primary:hover,
.single-product-page .product-detail-hero__actions .btn-primary:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}
.single-product-page .product-detail-hero__actions .btn-secondary {
	background: var(--color-surface-sunk);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
}
.single-product-page .product-detail-hero__actions .btn-secondary:hover,
.single-product-page .product-detail-hero__actions .btn-secondary:focus-visible {
	background: var(--color-slate-200);
	border-color: var(--color-slate-300);
	color: var(--color-text);
}
/* Product detail tab content typography */
.single-product-page .product-detail-tabs .tab-panel {
	display: none;
	text-align: left;
	line-height: var(--lh-relaxed);
	color: var(--color-text);
}

.single-product-page .product-detail-tabs .tab-panel.active {
	display: block;
}

.single-product-page .product-detail-tabs .tab-panel p {
	margin-bottom: var(--space-4);
}

.single-product-page .product-detail-tabs .tab-panel p:last-child {
	margin-bottom: 0;
}

.single-product-page .product-detail-tabs .tab-panel h1,
.single-product-page .product-detail-tabs .tab-panel h2,
.single-product-page .product-detail-tabs .tab-panel h3,
.single-product-page .product-detail-tabs .tab-panel h4,
.single-product-page .product-detail-tabs .tab-panel h5,
.single-product-page .product-detail-tabs .tab-panel h6 {
	margin-top: var(--space-6);
	margin-bottom: var(--space-4);
	color: var(--color-text-strong);
}

.single-product-page .product-detail-tabs .tab-panel ul,
.single-product-page .product-detail-tabs .tab-panel ol {
	margin: var(--space-4) 0;
	padding-left: var(--space-8);
}

.single-product-page .product-detail-tabs .tab-panel li {
	margin-bottom: var(--space-2);
}

/* Link colors — single product */
.single-product-page a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

.single-product-page a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.single-product-page .tab-panel a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: var(--fw-medium);
}

.single-product-page .tab-panel a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Section spacing */
.single-product-page .media-section {
	padding: var(--space-10) 0;
}

.single-product-page .media-section:first-of-type {
	padding-top: var(--space-10);
}

.single-product-page .media-section + .media-section {
	padding-top: var(--space-6);
}

/* Disclaimer - no tab buttons */
.single-product-page .media-section .tab-container:not(:has(.tab-buttons)) .tab-content {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.single-product-page .media-section .tab-container .tab-content:only-child {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

/* Product detail tabs — pill row + card panel */
.single-product-page .product-detail-tabs .tab-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: 0;
	margin: 0 0 var(--space-4);
	border: none;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.single-product-page .product-detail-tabs .tab-button {
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-ui);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	background: var(--color-surface-sunk);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease),
	            color var(--duration-base) var(--ease),
	            border-color var(--duration-base) var(--ease),
	            box-shadow var(--duration-base) var(--ease);
}

.single-product-page .product-detail-tabs .tab-button:hover {
	background: var(--color-slate-200);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}

.single-product-page .product-detail-tabs .tab-button.active {
	background: var(--color-primary);
	color: var(--color-text-invert);
	border-color: var(--color-primary-active);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-sm);
}

.single-product-page .product-detail-tabs .tab-button:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.single-product-page .product-detail-tabs .tab-content {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	padding: clamp(var(--space-5), 3vw, var(--space-8));
	box-shadow: var(--shadow-sm);
	margin: 0;
	min-height: 0;
}

.single-product-page .product-detail-disclaimer__inner {
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid rgba(180, 83, 9, 0.22);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-4), 3vw, var(--space-6));
	box-shadow: 0 4px 20px rgba(180, 83, 9, 0.08);
}

.single-product-page .product-detail-disclaimer__title {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: #92400e;
	letter-spacing: var(--ls-wide);
}

.single-product-page .product-detail-disclaimer__body {
	font-size: var(--fs-ui);
	line-height: var(--lh-relaxed);
	color: #78350f;
}

.single-product-page .product-detail-disclaimer__body p:last-child {
	margin-bottom: 0;
}

/* Related Products Section */
.single-product-page .product-portfolio {
	padding: var(--space-10) 0;
}

/* Section Spacing */
.single-product-page .product-detail-hero + .media-section {
	padding-top: var(--space-10);
	padding-bottom: var(--space-6);
	margin-top: 0;
}

.single-product-page .media-section + .media-section {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
	margin-top: 0;
}

.single-product-page .media-section + .product-portfolio {
	padding-top: var(--space-10);
	margin-top: 0;
}

/* Responsive Design for Single Product Page */
@media (max-width: 992px) {
	.single-product-page .product-detail-hero__layout {
		gap: var(--space-8);
	}

	.single-product-page .product-detail-hero__gallery {
		position: static;
	}

	.single-product-page .product-detail-tabs .tab-content {
		padding: var(--space-6);
	}
}

@media (max-width: 768px) {
	.single-product-page .product-detail-hero {
		padding-bottom: var(--space-10);
	}

	.single-product-page .product-detail-hero__layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	/* Image above info on mobile */
	.single-product-page .product-detail-hero__gallery {
		max-width: 320px;
		margin-inline: auto;
	}

	.single-product-page .product-detail-hero__actions {
		flex-direction: column;
	}

	.single-product-page .product-detail-hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.single-product-page .product-detail-specs__row {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}

	/* Tab Buttons Mobile — horizontal scroll */
	.single-product-page .product-detail-tabs .tab-buttons {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--color-primary) var(--color-surface-sunk);
		padding-bottom: var(--space-1);
	}

	.single-product-page .product-detail-tabs .tab-buttons::-webkit-scrollbar {
		height: 3px;
	}

	.single-product-page .product-detail-tabs .tab-buttons::-webkit-scrollbar-track {
		background: var(--color-surface-sunk);
	}

	.single-product-page .product-detail-tabs .tab-buttons::-webkit-scrollbar-thumb {
		background: var(--color-primary);
		border-radius: var(--radius-pill);
	}

	.single-product-page .product-detail-tabs .tab-button {
		flex-shrink: 0;
	}

	.single-product-page .product-detail-tabs .tab-content {
		padding: var(--space-5) var(--space-4);
		border-radius: var(--radius-md);
	}

	.single-product-page .media-section + .media-section {
		padding-top: var(--space-4);
		padding-bottom: var(--space-4);
	}

	.single-product-page .media-section {
		padding: var(--space-8) 0;
	}

	.single-product-page .product-portfolio {
		padding: var(--space-8) 0;
	}
}

@media (max-width: 480px) {
	.single-product-page .product-detail-specs__row {
		grid-template-columns: 1fr;
	}

	.single-product-page .product-detail-tabs .tab-button {
		padding: 8px 12px;
		font-size: 13px;
	}

	.single-product-page .product-detail-tabs .tab-content {
		padding: 15px 12px;
	}

	.single-product-page .product-detail-tabs .tab-panel {
		font-size: 13px;
	}

	.single-product-page .product-detail-tabs .tab-panel h1,
	.single-product-page .product-detail-tabs .tab-panel h2,
	.single-product-page .product-detail-tabs .tab-panel h3 {
		font-size: 18px;
	}

	.single-product-page .product-detail-tabs .tab-panel ul,
	.single-product-page .product-detail-tabs .tab-panel ol {
		padding-left: 20px;
	}
}

/*--------------------------------------------------------------
# Page Template Styles
--------------------------------------------------------------*/

/* Page Hero Section */
.page-template-wrapper .page-hero {
	background: #e5e5e5;
	padding: 60px 0;
	margin-bottom: 0;
	text-align: left;
}

/* Page hero also uses .hero-section (which is flex + centered). Reset like products hero. */
.page-template-wrapper .page-hero.hero-section {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

/* Default pages: premium hero when featured image exists */
.page-template-wrapper .page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(420px, 50vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

.page-template-wrapper .page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

.page-template-wrapper .page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(248, 250, 252, 0.78) 18%,
		rgba(248, 250, 252, 0.28) 40%,
		rgba(248, 250, 252, 0) 58%
	);
}

.page-template-wrapper .page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(15, 23, 42, 0.18) 0%,
		rgba(15, 23, 42, 0) 52%
	);
}

.page-template-wrapper .page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	justify-items: start;
}

.page-template-wrapper .page-hero--has-bg .about-text {
	max-width: min(40rem, 100%);
	margin: 0;
	padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.15rem);
	border-left: 3px solid var(--color-primary-blue, #1f6fb2);
	text-align: left;
}

/* Match About hero typography more closely (bigger, cleaner) */
.page-template-wrapper .page-hero--has-bg .page-hero__title {
	margin: 0 0 0.55rem;
	color: #0b1220;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.15;
	font-size: clamp(2.15rem, 1.6vw + 1.55rem, 2.95rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

.page-template-wrapper .page-hero--has-bg .page-hero__subtitle {
	margin: 0;
	color: #1e293b;
	font-weight: 550;
	line-height: 1.7;
	font-size: clamp(1rem, 0.4vw + 0.94rem, 1.18rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

/* Remove underline on default page hero title (About hero doesn’t use it) */
.page-template-wrapper .page-hero--has-bg .page-hero__title::after {
	display: none;
}

/* Prevent older generic h1/p rules from shrinking the new hero typography */
.page-template-wrapper .page-hero--has-bg .about-text h1 {
	font-size: inherit;
	margin-bottom: 0.55rem;
	color: inherit;
	line-height: inherit;
	font-weight: inherit;
}

.page-template-wrapper .page-hero--has-bg .about-text p {
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	margin-bottom: 0;
}

/* Match products listing hero: always left-align title/subtitle on page template */
.page-template-wrapper .page-hero .about-text {
	text-align: left !important;
}

.page-template-wrapper .page-hero .about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.page-template-wrapper .page-hero .about-text h1 {
	font-size: 36px;
	margin-bottom: 15px;
	color: #333;
	line-height: 1.3;
	font-weight: 700;
}

.page-template-wrapper .page-hero .about-text p {
	font-size: 18px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 0;
}

.page-template-wrapper .page-hero .about-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}

.page-template-wrapper .page-hero .about-image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Page Content Section */
.page-template-wrapper .page-content {
	padding: 60px 0;
	background: #fff;
	margin-top: 0;
}

.page-template-wrapper .page-content .container {
	max-width: min(1180px, 100% - 3rem);
}

.page-template-wrapper .page-content {
	background:
		radial-gradient(55% 34% at 14% 0%, rgba(31, 111, 178, 0.06) 0%, rgba(31, 111, 178, 0) 68%),
		radial-gradient(44% 34% at 86% 22%, rgba(15, 124, 134, 0.05) 0%, rgba(15, 124, 134, 0) 68%),
		#fff;
}

.page-template-wrapper .page-content > .container {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 16px;
	box-shadow: 0 14px 42px rgba(15, 23, 42, 0.06);
	padding: clamp(1.2rem, 3vw, 2rem);
}

.page-template-wrapper .page-content .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.page-template-wrapper .page-content h1,
.page-template-wrapper .page-content h2,
.page-template-wrapper .page-content h3,
.page-template-wrapper .page-content h4,
.page-template-wrapper .page-content h5,
.page-template-wrapper .page-content h6 {
	margin-top: 40px;
	margin-bottom: 20px;
	color: #333;
	line-height: 1.4;
}

.page-template-wrapper .page-content h1:first-child,
.page-template-wrapper .page-content h2:first-child,
.page-template-wrapper .page-content h3:first-child {
	margin-top: 0;
}

.page-template-wrapper .page-content p {
	line-height: 1.8;
	margin-bottom: 20px;
	color: #555;
	font-size: 16px;
}

.page-template-wrapper .page-content p:last-child {
	margin-bottom: 0;
}

.page-template-wrapper .page-content ul,
.page-template-wrapper .page-content ol {
	margin: 20px 0;
	padding-left: 30px;
	color: #555;
	line-height: 1.8;
}

.page-template-wrapper .page-content ul li,
.page-template-wrapper .page-content ol li {
	margin-bottom: 10px;
}

.page-template-wrapper .page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 20px 0;
	display: block;
}

.page-template-wrapper .page-content img.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.page-template-wrapper .page-content img.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.page-template-wrapper .page-content img.aligncenter {
	display: block;
	margin: 20px auto;
}

.page-template-wrapper .page-content blockquote {
	margin: 30px 0;
	padding: 20px 30px;
	border-left: 4px solid #64b856;
	background: #f7f7f7;
	font-style: italic;
	color: #666;
}

.page-template-wrapper .page-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0;
}

.page-template-wrapper .page-content table th,
.page-template-wrapper .page-content table td {
	padding: 12px;
	border: 1px solid #ddd;
	text-align: left;
}

.page-template-wrapper .page-content table th {
	background: #f7f7f7;
	font-weight: 600;
	color: #333;
}

/* Link Colors - Page Template */
.page-template-wrapper .page-content a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.page-template-wrapper .page-content a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

.page-template-wrapper .page-hero a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.page-template-wrapper .page-hero a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Buttons on Pages */
.page-template-wrapper .page-content .btn {
	display: inline-block;
	padding: 12px 24px;
	background: #64b856;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	margin: 10px 10px 10px 0;
	transition: all 0.3s ease;
	font-weight: 500;
}

.page-template-wrapper .page-content .btn:hover {
	background: #4a9a3f;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
}

.page-template-wrapper .page-content .btn.secondary {
	background: #666;
}

.page-template-wrapper .page-content .btn.secondary:hover {
	background: #555;
	box-shadow: 0 4px 8px rgba(102, 102, 102, 0.3);
}

/* Section Spacing for Page Template */
.page-template-wrapper .page-hero+.page-content {
	padding-top: 60px;
	margin-top: 0;
}

/* Responsive Design for Page Template */
@media (max-width: 992px) {
	.page-template-wrapper .page-hero {
		padding: 50px 0;
	}

	.page-template-wrapper .page-hero .about-container {
		gap: 30px;
	}

	.page-template-wrapper .page-hero .about-text h1 {
		font-size: 32px;
	}

	.page-template-wrapper .page-content {
		padding: 50px 0;
	}

	.page-template-wrapper .page-content h1,
	.page-template-wrapper .page-content h2,
	.page-template-wrapper .page-content h3 {
		margin-top: 35px;
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	.page-template-wrapper .page-hero {
		padding: 40px 0;
	}

	.page-template-wrapper .page-hero .about-container {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.page-template-wrapper .page-hero .about-image {
		order: -1;
		justify-content: flex-start;
	}

	.page-template-wrapper .page-hero:not(.page-hero--has-bg) .about-text {
		text-align: left;
	}

	.page-template-wrapper .page-hero--has-bg .about-text {
		text-align: left;
		padding: 0 0 0 clamp(0.85rem, 2.5vw, 1.15rem);
	}

	.page-template-wrapper .page-hero .about-text h1 {
		font-size: 28px;
		margin-bottom: 12px;
	}

	.page-template-wrapper .page-hero .about-text p {
		font-size: 16px;
	}

	.page-template-wrapper .page-content {
		padding: 40px 0;
	}

	.page-template-wrapper .page-content .container {
		padding: 0 15px;
	}

	.page-template-wrapper .page-content h1,
	.page-template-wrapper .page-content h2,
	.page-template-wrapper .page-content h3 {
		margin-top: 30px;
		margin-bottom: 15px;
		font-size: 24px;
	}

	.page-template-wrapper .page-content p {
		font-size: 15px;
		line-height: 1.7;
		margin-bottom: 18px;
	}

	.page-template-wrapper .page-content ul,
	.page-template-wrapper .page-content ol {
		padding-left: 25px;
		margin: 18px 0;
	}

	.page-template-wrapper .page-content img {
		margin: 18px 0;
		border-radius: 6px;
	}

	.page-template-wrapper .page-content img.alignleft,
	.page-template-wrapper .page-content img.alignright {
		float: none;
		display: block;
		margin: 18px auto;
	}

	.page-template-wrapper .page-content blockquote {
		margin: 25px 0;
		padding: 15px 20px;
	}

	.page-template-wrapper .page-content table {
		font-size: 14px;
		overflow-x: auto;
		display: block;
	}

	.page-template-wrapper .page-content table th,
	.page-template-wrapper .page-content table td {
		padding: 10px 8px;
	}

	.page-template-wrapper .page-content .btn {
		display: block;
		width: 100%;
		text-align: center;
		margin: 10px 0;
		padding: 14px 24px;
	}
}

@media (max-width: 480px) {
	.page-template-wrapper .page-hero .about-text h1 {
		font-size: 24px;
	}

	.page-template-wrapper .page-hero .about-text p {
		font-size: 14px;
	}

	.page-template-wrapper .page-content {
		padding: 30px 0;
	}

	.page-template-wrapper .page-content h1,
	.page-template-wrapper .page-content h2,
	.page-template-wrapper .page-content h3 {
		font-size: 22px;
		margin-top: 25px;
	}

	.page-template-wrapper .page-content p {
		font-size: 14px;
		line-height: 1.6;
	}

	.page-template-wrapper .page-content ul,
	.page-template-wrapper .page-content ol {
		padding-left: 20px;
	}

	.page-template-wrapper .page-content blockquote {
		padding: 12px 15px;
		font-size: 14px;
	}

	.page-template-wrapper .page-content table {
		font-size: 12px;
	}

	.page-template-wrapper .page-content table th,
	.page-template-wrapper .page-content table td {
		padding: 8px 6px;
	}
}

/* Final cascade guard: keep default page hero visually aligned with About hero */
#primary.page-template-wrapper .page-hero.page-hero--has-bg.hero-section .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	justify-items: start;
}

#primary.page-template-wrapper .page-hero.page-hero--has-bg.hero-section .about-text {
	text-align: left !important;
	max-width: min(40rem, 100%);
	margin: 0;
	
	
}

#primary.page-template-wrapper .page-hero.page-hero--has-bg.hero-section .about-text .page-hero__title {
	font-size: clamp(2.15rem, 1.6vw + 1.55rem, 2.95rem) !important;
	line-height: 1.15 !important;
	font-weight: 750 !important;
	letter-spacing: -0.025em;
	margin: 0 0 0.55rem !important;
	color: #0b1220 !important;
}

#primary.page-template-wrapper .page-hero.page-hero--has-bg.hero-section .about-text .page-hero__title::after {
	display: none !important;
}

#primary.page-template-wrapper .page-hero.page-hero--has-bg.hero-section .about-text .page-hero__subtitle {
	font-size: clamp(1rem, 0.4vw + 0.94rem, 1.18rem) !important;
	line-height: 1.7 !important;
	font-weight: 550 !important;
	margin: 0 !important;
	color: #1e293b !important;
}

/*--------------------------------------------------------------
# Blog Template Styles
--------------------------------------------------------------*/

/* Blog Template Hero Section */
.blog-template-wrapper .hero-pages.about-section {
	padding: 60px 0;
	margin-bottom: 0;
}

.blog-template-wrapper .hero-pages .about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.blog-template-wrapper .hero-pages .about-text h2 {
	margin-bottom: 15px;
	font-size: 32px;
	color: #333;
	line-height: 1.3;
	font-weight: 700;
}

.blog-template-wrapper .hero-pages .about-text p {
	font-size: 18px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 0;
}

.blog-template-wrapper .hero-pages .about-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}

.blog-template-wrapper .hero-pages .about-image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Blog Sort Options Section */
.blog-template-wrapper .features-checkmarks {
	padding: 30px 0;
	background: #f7f7f7;
	margin-top: 0;
}

.blog-template-wrapper .sort-options {
	margin: 0;
}

.blog-template-wrapper .sort-options ul#sort-by {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-template-wrapper .sort-options ul#sort-by li {
	margin: 0;
}

.blog-template-wrapper .sort-options ul#sort-by li a.btn {
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	font-weight: 500;
	border: 2px solid transparent;
}

.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary {
	background: #64b856;
	color: #ffffff;
	border-color: #ddd;
}

.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
}

.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary.active {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* Blog Media Grid Section */
.blog-template-wrapper .media-section {
	padding: 60px 0;
	margin-top: 0;
}

.blog-template-wrapper .media-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0 0 40px 0;
}

/* Blog Card Styling - Enhanced UI/UX */
.blog-template-wrapper .media-card.blog {
	background: #fff;
	padding: 0;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.blog-template-wrapper .media-card.blog:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
	border-color: #64b856;
}

.blog-template-wrapper .media-card.blog .about-container {
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: flex-start;
	padding: 20px;
	margin: 0;
	border-bottom: 1px solid #f0f0f0;
}

.blog-template-wrapper .media-card.blog .about-image {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #f7f7f7;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-template-wrapper .media-card.blog .about-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-template-wrapper .media-card.blog:hover .about-image img {
	transform: scale(1.05);
}

.blog-template-wrapper .media-card.blog .about-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding: 0;
}

.blog-template-wrapper .media-card.blog .about-text a {
	color: #333;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-template-wrapper .media-card.blog .about-text a:hover {
	color: #64b856;
}

.blog-template-wrapper .media-card.blog .about-text p {
	margin: 0;
	font-size: 13px;
	color: #999;
	font-weight: 400;
}

.blog-template-wrapper .media-card.blog>p {
	padding: 0 20px;
	margin: 0 0 20px 0;
	color: #666;
	line-height: 1.7;
	font-size: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-grow: 1;
}

.blog-template-wrapper .media-card.blog .btn {
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	margin: 0 20px 20px 20px;
	text-align: center;
	transition: all 0.3s ease;
	font-weight: 500;
	width: calc(100% - 40px);
}

.blog-template-wrapper .media-card.blog .btn.primary {
	background: #64b856;
	color: #fff;
	border: 2px solid #64b856;
}

.blog-template-wrapper .media-card.blog .btn.primary:hover {
	background: #4a9a3f;
	border-color: #4a9a3f;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
	text-decoration: none;
}

/* Link Colors - Blog Template */
.blog-template-wrapper a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.blog-template-wrapper a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Pagination - Blog Template */
.blog-template-wrapper .media-section .page-numbers,
.blog-template-wrapper .media-section .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 40px 0 0 0;
	padding: 0;
	flex-wrap: wrap;
}

.blog-template-wrapper .media-section .page-numbers a,
.blog-template-wrapper .media-section .page-numbers span,
.blog-template-wrapper .media-section .pagination a,
.blog-template-wrapper .media-section .pagination span {
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #64b856;
	transition: all 0.3s ease;
	display: inline-block;
	background: #fff;
}

.blog-template-wrapper .media-section .page-numbers a:hover,
.blog-template-wrapper .media-section .pagination a:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	text-decoration: none;
}

.blog-template-wrapper .media-section .page-numbers .current,
.blog-template-wrapper .media-section .pagination .current {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* Section Spacing for Blog Template */
.blog-template-wrapper .hero-pages.about-section+.features-checkmarks {
	padding-top: 30px;
	margin-top: 0;
}

.blog-template-wrapper .features-checkmarks+.media-section {
	padding-top: 40px;
	margin-top: 0;
}

/* Premium blog overrides (new template classes) */
#primary.blog-template-wrapper .hero-pages.about-section.hero-section.blog-page-hero {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(420px, 50vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

#primary.blog-template-wrapper .blog-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(248, 250, 252, 0.76) 18%,
		rgba(248, 250, 252, 0.28) 40%,
		rgba(248, 250, 252, 0) 58%
	);
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to left, rgba(15, 23, 42, 0.17) 0%, rgba(15, 23, 42, 0) 52%);
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	justify-items: start;
	
	
	width: 100%;
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg .about-text {
	max-width: min(40rem, 100%);
	margin: 0;
	
	
	text-align: left;
	justify-self: start;
	align-items: flex-start;
}

#primary.blog-template-wrapper .blog-page-hero__title {
	margin: 0 0 0.55rem;
	color: #0b1220;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.15;
	font-size: clamp(2.1rem, 1.5vw + 1.5rem, 2.85rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

#primary.blog-template-wrapper .blog-page-hero__subtitle {
	margin: 0;
	color: #1e293b;
	font-weight: 550;
	line-height: 1.7;
	font-size: clamp(1rem, 0.4vw + 0.94rem, 1.15rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

/* Cascade guard: keep blog hero typography same quality as page/about */
#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg .about-text .blog-page-hero__title {
	font-size: clamp(2.2rem, 1.7vw + 1.55rem, 3rem) !important;
	line-height: 1.14 !important;
	font-weight: 750 !important;
	letter-spacing: -0.025em;
	margin: 0 0 0.55rem !important;
	color: #0b1220 !important;
}

#primary.blog-template-wrapper .blog-page-hero.blog-page-hero--has-bg .about-text .blog-page-hero__subtitle {
	font-size: clamp(1.02rem, 0.45vw + 0.95rem, 1.2rem) !important;
	line-height: 1.72 !important;
	font-weight: 550 !important;
	margin: 0 !important;
	color: #1e293b !important;
}

/* Blog/News/Gallery switcher = premium segmented pills */
#primary.blog-template-wrapper .blog-page-switcher {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	padding: 1.35rem 0;
	border-top: 1px solid rgba(15, 23, 42, 0.06);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0.55rem;
	margin: 0 auto;
	padding: 0.45rem;
	list-style: none;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.1);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options {
	display: flex;
	justify-content: center;
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by li {
	width: auto !important;
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by li a.btn.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 116px;
	padding: 0.62rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: #334155;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	box-shadow: none;
	transform: none;
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by li a.btn.primary:hover {
	background: rgba(31, 111, 178, 0.1);
	color: var(--color-primary-blue, #1f6fb2);
	border-color: rgba(31, 111, 178, 0.2);
}

#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by li a.btn.primary.active {
	background: linear-gradient(135deg, var(--color-primary-blue, #1f6fb2) 0%, var(--color-secondary-blue, #1a5c96) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(31, 111, 178, 0.32);
}

@media (max-width: 768px) {
	#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by {
		flex-wrap: wrap;
	}

	#primary.blog-template-wrapper .blog-page-switcher .sort-options ul#sort-by li a.btn.primary {
		min-width: 102px;
	}
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog {
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 42px rgba(15, 23, 42, 0.13);
	border-color: rgba(31, 111, 178, 0.2);
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog .about-image {
	width: 112px;
	height: 112px;
	border-radius: 10px;
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog .about-text a {
	font-size: 1.05rem;
	line-height: 1.35;
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog .about-text p {
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #64748b;
}

#primary.blog-template-wrapper .blog-page-listing .media-card.blog > p {
	color: #475569;
	line-height: 1.75;
	font-size: 0.95rem;
}

/* No Posts Message */
.blog-template-wrapper .media-card.blog p:only-child {
	text-align: center;
	padding: 40px 20px;
	color: #999;
	font-style: italic;
}

/* Responsive Design for Blog Template */
@media (max-width: 992px) {
	.blog-template-wrapper .hero-pages.about-section {
		padding: 50px 0;
	}

	.blog-template-wrapper .hero-pages .about-container {
		gap: 30px;
	}

	.blog-template-wrapper .hero-pages .about-text h2 {
		font-size: 28px;
	}

	.blog-template-wrapper .media-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}

	.blog-template-wrapper .media-section {
		padding: 50px 0;
	}
}

@media (max-width: 768px) {
	.blog-template-wrapper .hero-pages.about-section {
		padding: 40px 0;
	}

	.blog-template-wrapper .hero-pages .about-container {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.blog-template-wrapper .hero-pages .about-image {
		order: -1;
		justify-content: flex-start;
	}

	.blog-template-wrapper .hero-pages .about-text {
		text-align: center;
	}

	.blog-template-wrapper .hero-pages .about-text h2 {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.blog-template-wrapper .hero-pages .about-text p {
		font-size: 16px;
	}

	/* Sort Options Mobile */
	.blog-template-wrapper .features-checkmarks {
		padding: 20px 0;
	}

	.blog-template-wrapper .sort-options ul#sort-by {
		flex-direction: column;
		gap: 10px;
	}

	.blog-template-wrapper .sort-options ul#sort-by li {
		width: 100%;
	}

	.blog-template-wrapper .sort-options ul#sort-by li a.btn {
		width: 100%;
		/* text-align: center; */
		padding: 14px 24px;
	}

	/* Media Grid Mobile */
	.blog-template-wrapper .media-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.blog-template-wrapper .media-section {
		padding: 40px 0;
	}

	.blog-template-wrapper .media-card.blog .about-container {
		padding: 15px;
	}

	.blog-template-wrapper .media-card.blog .about-image {
		width: 80px;
		height: 80px;
	}

	.blog-template-wrapper .media-card.blog .about-text a {
		font-size: 16px;
	}

	.blog-template-wrapper .media-card.blog>p {
		padding: 0 15px;
		margin-bottom: 15px;
		font-size: 14px;
	}

	.blog-template-wrapper .media-card.blog .btn {
		margin: 0 15px 15px 15px;
		width: calc(100% - 30px);
		padding: 14px 24px;
	}

	/* Section Spacing Mobile */
	.blog-template-wrapper .hero-pages.about-section+.features-checkmarks {
		padding-top: 20px;
	}

	.blog-template-wrapper .features-checkmarks+.media-section {
		padding-top: 30px;
	}
}

@media (max-width: 480px) {
	.blog-template-wrapper .hero-pages .about-text h2 {
		font-size: 22px;
	}

	.blog-template-wrapper .hero-pages .about-text p {
		font-size: 14px;
	}

	.blog-template-wrapper .media-card.blog .about-container {
		flex-direction: column;
		text-align: center;
	}

	.blog-template-wrapper .media-card.blog .about-image {
		width: 100%;
		height: 200px;
		margin: 0 auto;
	}

	.blog-template-wrapper .media-card.blog .about-text {
		align-items: center;
		text-align: center;
	}

	.blog-template-wrapper .media-card.blog .about-text a {
		font-size: 15px;
		text-align: center;
	}

	.blog-template-wrapper .media-section .page-numbers,
	.blog-template-wrapper .media-section .pagination {
		gap: 8px;
	}

	.blog-template-wrapper .media-section .page-numbers a,
	.blog-template-wrapper .media-section .page-numbers span,
	.blog-template-wrapper .media-section .pagination a,
	.blog-template-wrapper .media-section .pagination span {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/*--------------------------------------------------------------
# Single Post Template Styles
--------------------------------------------------------------*/

/* Single Post Hero Section */
.single-post-template .single-post-hero {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	background: #e5e5e5;
	overflow: hidden;
	margin-bottom: 0;
}

.single-post-template .single-post-hero .hero-image,
.single-post-template .single-post-hero .hero-bg-image,
.single-post-template .single-post-hero .hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.single-post-template .single-post-hero .hero-bg-image {
	object-fit: cover;
	filter: brightness(0.7);
}

.single-post-template .single-post-hero .hero-overlay {
	background: rgba(0, 0, 0, 0.4);
}

.single-post-template .single-post-hero .hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding: 40px 20px;
}

.single-post-template .post-meta-top {
	margin-bottom: 20px;
	font-size: 16px;
	color: #333;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.single-post-template .single-post-hero h1 {
	font-size: 48px;
	margin-bottom: 20px;
	color: #ffffff;
	line-height: 1.2;
	font-weight: 700;
	width: 100%;
}

.single-post-template .post-category {
	background: #64b856;
	color: #ffffff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s ease;
}

.single-post-template .post-category:hover {
	background: #4a9a3f;
	color: #ffffff;
	text-decoration: none;
}

.single-post-template .post-date {
	color: #ffffff;
	font-size: 14px;
}

.single-post-template .post-subtitle {
	font-size: 22px;
	color: #ffffff;
	line-height: 1.6;
	margin-top: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Single post hero: match product detail hero background language */
.single-post-template .hero-pages.about-section.hero-section.post-detail-hero {
	display: block;
	position: relative;
	overflow: hidden;
	text-align: left;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(420px, 50vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.single-post-template .post-detail-hero__layers {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.single-post-template .post-detail-hero--deep .post-detail-hero__layers {
	background:
		radial-gradient(90% 120% at 8% 38%, rgba(31, 111, 178, 0.24) 0%, rgba(31, 111, 178, 0.1) 38%, transparent 72%),
		linear-gradient(132deg, rgba(244, 249, 255, 0.94) 0%, rgba(236, 244, 252, 0.88) 38%, rgba(224, 236, 248, 0.86) 100%);
}

.single-post-template .post-detail-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	filter: saturate(1.05);
	opacity: 0.42;
}

.single-post-template .post-detail-hero__mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
	background-size: clamp(26px, 2.4vw, 34px) clamp(26px, 2.4vw, 34px);
	opacity: 0.28;
}

.single-post-template .post-detail-hero__orbs {
	position: absolute;
	inset: 0;
}

.single-post-template .post-detail-hero__orb {
	position: absolute;
	border-radius: 999px;
	filter: blur(0.5px);
}

.single-post-template .post-detail-hero__orb--1 {
	width: min(34vw, 290px);
	height: min(34vw, 290px);
	top: -10%;
	left: -4%;
	background: radial-gradient(circle, rgba(15, 124, 134, 0.26) 0%, rgba(15, 124, 134, 0) 70%);
}

.single-post-template .post-detail-hero__orb--2 {
	width: min(30vw, 240px);
	height: min(30vw, 240px);
	bottom: -16%;
	right: 12%;
	background: radial-gradient(circle, rgba(31, 111, 178, 0.22) 0%, rgba(31, 111, 178, 0) 70%);
}

.single-post-template .post-detail-hero__accent-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary-blue, #1f6fb2) 0%, var(--color-mercos-teal, #0f7c86) 55%, transparent 100%);
	opacity: 0.9;
}

.single-post-template .post-detail-hero__grid.about-container {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2rem);
}

.single-post-template .post-detail-hero__main {
	position: relative;
	max-width: 48rem;
	padding: clamp(0.95rem, 1.6vw, 1.2rem) clamp(1rem, 1.8vw, 1.3rem);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.58);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 18px 44px rgba(30, 58, 95, 0.13);
}

.single-post-template .post-detail-hero__title {
	font-size: clamp(2rem, 2.2vw + 1.1rem, 2.75rem);
	line-height: 1.17;
	color: #0f172a;
	margin: 0 0 0.65rem;
}

.single-post-template .post-detail-hero__meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	align-items: center;
	margin: 0 0 0.85rem;
	color: #334155;
	font-size: 0.9rem;
	font-weight: 600;
}

.single-post-template .post-detail-hero__meta .post-date {
	color: #334155;
}

.single-post-template .post-detail-hero__lead {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.68;
	color: #334155;
}

/* Single Post Content Section */
.single-post-template .single-post-content {
	padding: 80px 0;
	background: #fff;
	margin-top: 0;
}

.single-post-template .single-post-content .container {
	max-width: 100%;
	padding: 0;
}

.single-post-template .single-post-wrapper {
	display: grid;
	gap: 40px;
	margin: 0;
	align-items: start;
}

.single-post-template .single-post-wrapper.no-sidebar {
	grid-template-columns: 1fr;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px;
}

.single-post-template .single-post-wrapper.has-sidebar {
	grid-template-columns: 3fr 1fr;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.single-post-template .main-content {
	width: 100%;
	max-width: 100%;
}

/* Post Article Styling */
.single-post-template .post-article {
	line-height: 1.8;
	color: #555;
	font-size: 18px;
	max-width: 100%;
}

.single-post-template .post-article h1,
.single-post-template .post-article h2,
.single-post-template .post-article h3,
.single-post-template .post-article h4,
.single-post-template .post-article h5,
.single-post-template .post-article h6 {
	margin-top: 40px;
	margin-bottom: 20px;
	color: #333;
	line-height: 1.4;
	font-weight: 600;
}

.single-post-template .post-article h1:first-child,
.single-post-template .post-article h2:first-child,
.single-post-template .post-article h3:first-child {
	margin-top: 0;
}

.single-post-template .post-article p {
	margin-bottom: 20px;
	line-height: 1.8;
}

.single-post-template .post-article img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 30px 0;
	display: block;
}

.single-post-template .post-article img.alignleft {
	float: left;
	margin: 0 30px 20px 0;
}

.single-post-template .post-article img.alignright {
	float: right;
	margin: 0 0 20px 30px;
}

.single-post-template .post-article img.aligncenter {
	display: block;
	margin: 30px auto;
}

.single-post-template .post-article ul,
.single-post-template .post-article ol {
	margin: 25px 0;
	padding-left: 30px;
	line-height: 1.8;
}

.single-post-template .post-article ul li,
.single-post-template .post-article ol li {
	margin-bottom: 10px;
}

.single-post-template .post-article blockquote {
	margin: 30px 0;
	padding: 20px 30px;
	border-left: 4px solid #64b856;
	background: #f7f7f7;
	font-style: italic;
	color: #666;
	border-radius: 0 4px 4px 0;
}

.single-post-template .post-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0;
}

.single-post-template .post-article table th,
.single-post-template .post-article table td {
	padding: 12px;
	border: 1px solid #ddd;
	text-align: left;
}

.single-post-template .post-article table th {
	background: #f7f7f7;
	font-weight: 600;
	color: #333;
}

/* Post Tags */
.single-post-template .post-tags {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
	font-size: 15px;
}

.single-post-template .tag-label {
	color: #666;
	margin-right: 10px;
	font-weight: 500;
}

.single-post-template .post-tags a {
	color: #64b856;
	text-decoration: none;
	margin-right: 10px;
	padding: 4px 10px;
	background: #f0f8f0;
	border-radius: 4px;
	transition: all 0.3s ease;
	display: inline-block;
	margin-bottom: 8px;
}

.single-post-template .post-tags a:hover {
	background: #64b856;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

/* Link Colors - Single Post Template */
.single-post-template .post-article a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.single-post-template .post-article a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

.single-post-template .single-post-hero a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.single-post-template .single-post-hero a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Sidebar Styling */
.single-post-template .sidebar {
	background: #f9f9f9;
	padding: 30px;
	border: 1px solid #eee;
	border-radius: 8px;
	height: fit-content;
	position: sticky;
	top: 20px;
}

.single-post-template .sidebar .widget {
	margin-bottom: 30px;
}

.single-post-template .sidebar .widget:last-child {
	margin-bottom: 0;
}

.single-post-template .sidebar .widget-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #64b856;
}

.single-post-template .sidebar a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.single-post-template .sidebar a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

.single-post-template .sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-post-template .sidebar ul li {
	margin-bottom: 10px;
	padding-left: 0;
}

/* Premium content + sidebar refinement for single post */
.single-post-template .single-post-content {
	background:
		radial-gradient(58% 34% at 12% 0%, rgba(31, 111, 178, 0.06) 0%, rgba(31, 111, 178, 0) 70%),
		radial-gradient(44% 34% at 88% 22%, rgba(15, 124, 134, 0.05) 0%, rgba(15, 124, 134, 0) 68%),
		#f8fafc;
}

.single-post-template .single-post-wrapper.has-sidebar {
	grid-template-columns: minmax(0, 1.85fr) minmax(280px, 0.9fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	max-width: 1180px;
	padding: 0 1.1rem;
}

.single-post-template .single-post-wrapper.no-sidebar {
	max-width: 920px;
	padding: 0 1.1rem;
}

.single-post-template .main-content .post-article {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 16px;
	box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
	padding: clamp(1.1rem, 3vw, 2rem);
}

.single-post-template .main-content .post-article > img:first-child {
	width: 100%;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
	margin-bottom: 1rem;
}

.single-post-template .post-article p {
	color: #334155;
	line-height: 1.84;
	font-size: clamp(0.98rem, 0.18vw + 0.94rem, 1.05rem);
}

.single-post-template .post-article h1,
.single-post-template .post-article h2,
.single-post-template .post-article h3 {
	color: #0f172a;
	letter-spacing: -0.015em;
}

.single-post-template .sidebar {
	position: sticky;
	top: 92px;
	align-self: start;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
	padding: 1rem;
}

.single-post-template .sidebar .widget {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	padding: 0.9rem 0.95rem;
	margin-bottom: 0.85rem;
}

.single-post-template .sidebar .widget:last-child {
	margin-bottom: 0;
}

.single-post-template .sidebar .widget-title {
	font-size: 1.24rem;
	margin: 0 0 0.7rem;
	color: #0f172a;
}

.single-post-template .sidebar .widget ul li {
	margin-bottom: 0.5rem;
	padding: 0;
}

.single-post-template .sidebar .widget ul li:last-child {
	margin-bottom: 0;
}

.single-post-template .sidebar .widget a {
	color: #1f6fb2;
	text-decoration: none;
	font-weight: 500;
}

.single-post-template .sidebar .widget a:hover {
	color: #1a5c96;
	text-decoration: underline;
}

.single-post-template .sidebar .search-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
	align-items: center;
}

.single-post-template .sidebar .search-form label {
	grid-column: 1 / -1;
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
}

.single-post-template .sidebar .search-form input[type="search"],
.single-post-template .sidebar .search-form input[type="text"] {
	width: 100%;
	min-height: 2.2rem;
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.16);
	padding: 0.45rem 0.6rem;
}

.single-post-template .sidebar .search-form input[type="submit"] {
	min-height: 2.2rem;
	padding: 0 0.8rem;
	border-radius: 8px;
	border: 1px solid var(--color-primary-blue, #1f6fb2);
	background: var(--color-primary-blue, #1f6fb2);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.single-post-template .sidebar .search-form input[type="submit"]:hover {
	background: var(--color-secondary-blue, #1a5c96);
}

/* Responsive Design for Single Post Template */
@media (max-width: 992px) {
	.single-post-template .single-post-hero {
		min-height: 450px;
	}

	.single-post-template .single-post-hero h1 {
		font-size: 40px;
	}

	.single-post-template .post-subtitle {
		font-size: 20px;
	}

	.single-post-template .single-post-content {
		padding: 60px 0;
	}

	.single-post-template .single-post-wrapper.has-sidebar {
		grid-template-columns: 1fr;
		padding: 0 15px;
	}

	.single-post-template .single-post-wrapper.no-sidebar {
		padding: 0 15px;
	}

	.single-post-template .sidebar {
		position: static;
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	.single-post-template .single-post-hero {
		min-height: 400px;
	}

	.single-post-template .single-post-hero .hero-content {
		padding: 30px 15px;
	}

	.single-post-template .single-post-hero h1 {
		font-size: 32px;
		margin-bottom: 15px;
	}

	.single-post-template .post-meta-top {
		flex-direction: column;
		gap: 10px;
		font-size: 14px;
	}

	.single-post-template .post-subtitle {
		font-size: 18px;
		margin-top: 15px;
	}

	.single-post-template .single-post-content {
		padding: 40px 0;
	}

	.single-post-template .single-post-wrapper {
		gap: 30px;
		padding: 0 15px;
	}

	.single-post-template .post-article {
		font-size: 16px;
		line-height: 1.7;
	}

	.single-post-template .post-article h1,
	.single-post-template .post-article h2,
	.single-post-template .post-article h3 {
		font-size: 24px;
		margin-top: 30px;
		margin-bottom: 15px;
	}

	.single-post-template .post-article img {
		margin: 20px 0;
		border-radius: 6px;
	}

	.single-post-template .post-article img.alignleft,
	.single-post-template .post-article img.alignright {
		float: none;
		display: block;
		margin: 20px auto;
	}

	.single-post-template .post-article ul,
	.single-post-template .post-article ol {
		padding-left: 25px;
		margin: 20px 0;
	}

	.single-post-template .post-article blockquote {
		margin: 25px 0;
		padding: 15px 20px;
		font-size: 16px;
	}

	.single-post-template .post-tags {
		margin-top: 30px;
		padding-top: 20px;
	}

	.single-post-template .sidebar {
		padding: 20px;
	}
}

@media (max-width: 480px) {
	.single-post-template .single-post-hero {
		min-height: 350px;
	}

	.single-post-template .single-post-hero h1 {
		font-size: 28px;
	}

	.single-post-template .post-subtitle {
		font-size: 16px;
	}

	.single-post-template .post-article {
		font-size: 15px;
	}

	.single-post-template .post-article h1,
	.single-post-template .post-article h2,
	.single-post-template .post-article h3 {
		font-size: 22px;
	}

	.single-post-template .post-article blockquote {
		padding: 12px 15px;
		font-size: 14px;
	}

	.single-post-template .post-tags {
		font-size: 14px;
	}

	.single-post-template .post-tags a {
		font-size: 13px;
		padding: 3px 8px;
	}
}

/*--------------------------------------------------------------
# Archive News Template Styles
--------------------------------------------------------------*/

/* Archive Hero Section */
.archive-news-template .archive-hero {
	background: #e5e5e5;
	padding: 60px 0;
	margin-bottom: 0;
	text-align: center;
}

.archive-news-template .archive-hero .page-title {
	font-size: 36px;
	margin-bottom: 15px;
	color: #333;
	line-height: 1.3;
	font-weight: 700;
}

.archive-news-template .archive-hero .archive-description {
	font-size: 18px;
	color: #666;
	line-height: 1.6;
	margin-top: 15px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Archive Content Section */
.archive-news-template .archive-news-content {
	padding: 60px 0;
	background: #fff;
	margin-top: 0;
}

.archive-news-template .archive-news-content .container {
	max-width: 100%;
	padding: 0;
}

.archive-news-template .archive-wrapper {
	display: grid;
	gap: 40px;
	margin: 0;
	align-items: start;
}

.archive-news-template .archive-wrapper.no-sidebar {
	grid-template-columns: 1fr;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.archive-news-template .archive-wrapper.has-sidebar {
	grid-template-columns: 3fr 1fr;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.archive-news-template .main-content {
	width: 100%;
}

/* Posts Grid */
.archive-news-template .posts-grid {
	display: grid;
	gap: 30px;
	margin-bottom: 40px;
}

.archive-news-template .archive-wrapper.no-sidebar .posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

.archive-news-template .archive-wrapper.has-sidebar .posts-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* Post Card Styling */
.archive-news-template .post-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	max-height: 500px;
}

.archive-news-template .post-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
	border-color: #64b856;
}

.archive-news-template .post-card .product-image {
	height: 200px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f7f7f7;
}

.archive-news-template .post-card .product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.archive-news-template .post-card:hover .product-image img {
	transform: scale(1.05);
}

.archive-news-template .post-card .product-card-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
}

.archive-news-template .post-card .post-meta {
	font-size: 13px;
	color: #999;
	margin-bottom: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
}

.archive-news-template .post-card .post-date {
	color: #999;
}

.archive-news-template .post-card .post-category {
	background: #64b856;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
}

.archive-news-template .post-card .post-category:hover {
	background: #4a9a3f;
	color: #fff;
	text-decoration: none;
}

.archive-news-template .post-card .entry-title {
	font-size: 18px;
	margin: 0 0 12px;
	flex-grow: 1;
	line-height: 1.4;
}

.archive-news-template .post-card .entry-title a {
	color: #333;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.archive-news-template .post-card .entry-title a:hover {
	color: #64b856;
}

.archive-news-template .post-card p {
	margin: 0 0 20px;
	color: #666;
	line-height: 1.7;
	font-size: 15px;
	flex-grow: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.archive-news-template .post-card .btn {
	display: block;
	width: 100%;
	padding: 12px;
	background: #64b856;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	text-align: center;
	border: 2px solid #64b856;
}

.archive-news-template .post-card .btn:hover {
	background: #4a9a3f;
	border-color: #4a9a3f;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
}

/* Pagination */
.archive-news-template .archive-pagination {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
}

.archive-news-template .archive-pagination .page-numbers,
.archive-news-template .archive-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.archive-news-template .archive-pagination .page-numbers a,
.archive-news-template .archive-pagination .page-numbers span,
.archive-news-template .archive-pagination .nav-links a,
.archive-news-template .archive-pagination .nav-links span {
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #64b856;
	transition: all 0.3s ease;
	display: inline-block;
	background: #fff;
}

.archive-news-template .archive-pagination .page-numbers a:hover,
.archive-news-template .archive-pagination .nav-links a:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	text-decoration: none;
}

.archive-news-template .archive-pagination .page-numbers .current,
.archive-news-template .archive-pagination .nav-links .current {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* No Posts Message */
.archive-news-template .no-posts {
	text-align: center;
	padding: 60px 20px;
}

.archive-news-template .no-posts p {
	font-size: 18px;
	color: #666;
	margin-bottom: 20px;
}

.archive-news-template .no-posts .btn {
	display: inline-block;
	padding: 12px 24px;
	background: #64b856;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 2px solid #64b856;
}

.archive-news-template .no-posts .btn:hover {
	background: #4a9a3f;
	border-color: #4a9a3f;
	color: #fff;
	text-decoration: none;
}

/* Link Colors - Archive News Template */
.archive-news-template a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.archive-news-template a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Sidebar Styling */
.archive-news-template .sidebar {
	background: #f9f9f9;
	padding: 30px;
	border: 1px solid #eee;
	border-radius: 8px;
	height: fit-content;
	position: sticky;
	top: 20px;
}

.archive-news-template .sidebar .widget {
	margin-bottom: 30px;
}

.archive-news-template .sidebar .widget:last-child {
	margin-bottom: 0;
}

.archive-news-template .sidebar .widget-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #64b856;
}

.archive-news-template .sidebar a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.archive-news-template .sidebar a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

.archive-news-template .sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.archive-news-template .sidebar ul li {
	margin-bottom: 10px;
	padding-left: 0;
}

/* Responsive Design for Archive News Template */
@media (max-width: 992px) {
	.archive-news-template .archive-hero {
		padding: 50px 0;
	}

	.archive-news-template .archive-hero .page-title {
		font-size: 32px;
	}

	.archive-news-template .archive-news-content {
		padding: 50px 0;
	}

	.archive-news-template .archive-wrapper.has-sidebar {
		grid-template-columns: 1fr;
		padding: 0 15px;
	}

	.archive-news-template .archive-wrapper.no-sidebar {
		padding: 0 15px;
	}

	.archive-news-template .archive-wrapper.no-sidebar .posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.archive-news-template .sidebar {
		position: static;
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	.archive-news-template .archive-hero {
		padding: 40px 0;
	}

	.archive-news-template .archive-hero .page-title {
		font-size: 28px;
	}

	.archive-news-template .archive-hero .archive-description {
		font-size: 16px;
	}

	.archive-news-template .archive-news-content {
		padding: 40px 0;
	}

	.archive-news-template .archive-wrapper {
		gap: 30px;
		padding: 0 15px;
	}

	.archive-news-template .posts-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.archive-news-template .post-card .product-image {
		height: 180px;
	}

	.archive-news-template .post-card .product-card-content {
		padding: 15px;
	}

	.archive-news-template .post-card .entry-title {
		font-size: 16px;
	}

	.archive-news-template .post-card p {
		font-size: 14px;
	}

	.archive-news-template .sidebar {
		padding: 20px;
	}
}

@media (max-width: 480px) {
	.archive-news-template .archive-hero .page-title {
		font-size: 24px;
	}

	.archive-news-template .post-card .product-image {
		height: 160px;
	}

	.archive-news-template .post-card .entry-title {
		font-size: 15px;
	}

	.archive-news-template .post-card .btn {
		padding: 10px;
		font-size: 14px;
	}

	.archive-news-template .archive-pagination .page-numbers a,
	.archive-news-template .archive-pagination .page-numbers span {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/*--------------------------------------------------------------
# Archive Gallery Template Styles
--------------------------------------------------------------*/

/* Archive Gallery Hero Section */
.archive-gallery-template .archive-hero {
	background: #e5e5e5;
	padding: 60px 0;
	margin-bottom: 0;
	text-align: center;
}

.archive-gallery-template .archive-hero .page-title {
	font-size: 36px;
	margin-bottom: 15px;
	color: #333;
	line-height: 1.3;
	font-weight: 700;
}

.archive-gallery-template .archive-hero .archive-description {
	font-size: 18px;
	color: #666;
	line-height: 1.6;
	margin-top: 15px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Archive Gallery Content Section */
.archive-gallery-template .archive-gallery-content {
	padding: 60px 0;
	background: #fff;
	margin-top: 0;
}

.archive-gallery-template .archive-gallery-content .container {
	max-width: 100%;
	padding: 0;
}

.archive-gallery-template .archive-wrapper {
	display: grid;
	gap: 40px;
	margin: 0;
	align-items: start;
}

.archive-gallery-template .archive-wrapper.no-sidebar {
	grid-template-columns: 1fr;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.archive-gallery-template .archive-wrapper.has-sidebar {
	grid-template-columns: 3fr 1fr;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.archive-gallery-template .main-content {
	width: 100%;
}

/* Posts Grid */
.archive-gallery-template .posts-grid {
	display: grid;
	gap: 30px;
	margin-bottom: 40px;
}

.archive-gallery-template .archive-wrapper.no-sidebar .posts-grid {
	grid-template-columns: repeat(3, 1fr);
}

.archive-gallery-template .archive-wrapper.has-sidebar .posts-grid {
	grid-template-columns: repeat(2, 1fr);
}

/* Gallery Card Styling */
.archive-gallery-template .gallery-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	max-height: 500px;
}

.archive-gallery-template .gallery-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
	border-color: #64b856;
}

.archive-gallery-template .gallery-card .product-image {
	height: 200px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #f7f7f7;
	position: relative;
}

.archive-gallery-template .gallery-card .product-image::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(100, 184, 86, 0);
	transition: background 0.3s ease;
	z-index: 1;
}

.archive-gallery-template .gallery-card:hover .product-image::after {
	background: rgba(100, 184, 86, 0.1);
}

.archive-gallery-template .gallery-card .product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	position: relative;
	z-index: 0;
}

.archive-gallery-template .gallery-card:hover .product-image img {
	transform: scale(1.05);
}

.archive-gallery-template .gallery-card .product-card-content {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
}

.archive-gallery-template .gallery-card .post-meta {
	font-size: 13px;
	color: #999;
	margin-bottom: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
}

.archive-gallery-template .gallery-card .post-date {
	color: #999;
}

.archive-gallery-template .gallery-card .post-category {
	background: #64b856;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
}

.archive-gallery-template .gallery-card .post-category:hover {
	background: #4a9a3f;
	color: #fff;
	text-decoration: none;
}

.archive-gallery-template .gallery-card .entry-title {
	font-size: 18px;
	margin: 0 0 12px;
	flex-grow: 1;
	line-height: 1.4;
}

.archive-gallery-template .gallery-card .entry-title a {
	color: #333;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.archive-gallery-template .gallery-card .entry-title a:hover {
	color: #64b856;
}

.archive-gallery-template .gallery-card p {
	margin: 0 0 20px;
	color: #666;
	line-height: 1.7;
	font-size: 15px;
	flex-grow: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.archive-gallery-template .gallery-card .btn {
	display: block;
	width: 100%;
	padding: 12px;
	background: #64b856;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	text-align: center;
	border: 2px solid #64b856;
}

.archive-gallery-template .gallery-card .btn:hover {
	background: #4a9a3f;
	border-color: #4a9a3f;
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
}

/* Pagination */
.archive-gallery-template .archive-pagination {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #eee;
}

.archive-gallery-template .archive-pagination .page-numbers,
.archive-gallery-template .archive-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.archive-gallery-template .archive-pagination .page-numbers a,
.archive-gallery-template .archive-pagination .page-numbers span,
.archive-gallery-template .archive-pagination .nav-links a,
.archive-gallery-template .archive-pagination .nav-links span {
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #64b856;
	transition: all 0.3s ease;
	display: inline-block;
	background: #fff;
}

.archive-gallery-template .archive-pagination .page-numbers a:hover,
.archive-gallery-template .archive-pagination .nav-links a:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	text-decoration: none;
}

.archive-gallery-template .archive-pagination .page-numbers .current,
.archive-gallery-template .archive-pagination .nav-links .current {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* No Posts Message */
.archive-gallery-template .no-posts {
	text-align: center;
	padding: 60px 20px;
}

.archive-gallery-template .no-posts p {
	font-size: 18px;
	color: #666;
	margin-bottom: 20px;
}

.archive-gallery-template .no-posts .btn {
	display: inline-block;
	padding: 12px 24px;
	background: #64b856;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 2px solid #64b856;
}

.archive-gallery-template .no-posts .btn:hover {
	background: #4a9a3f;
	border-color: #4a9a3f;
	color: #fff;
	text-decoration: none;
}

/* Link Colors - Archive Gallery Template */
.archive-gallery-template a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.archive-gallery-template a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Sidebar Styling */
.archive-gallery-template .sidebar {
	background: #f9f9f9;
	padding: 30px;
	border: 1px solid #eee;
	border-radius: 8px;
	height: fit-content;
	position: sticky;
	top: 20px;
}

.archive-gallery-template .sidebar .widget {
	margin-bottom: 30px;
}

.archive-gallery-template .sidebar .widget:last-child {
	margin-bottom: 0;
}

.archive-gallery-template .sidebar .widget-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #64b856;
}

.archive-gallery-template .sidebar a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.archive-gallery-template .sidebar a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

.archive-gallery-template .sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.archive-gallery-template .sidebar ul li {
	margin-bottom: 10px;
	padding-left: 0;
}

/* Responsive Design for Archive Gallery Template */
@media (max-width: 992px) {
	.archive-gallery-template .archive-hero {
		padding: 50px 0;
	}

	.archive-gallery-template .archive-hero .page-title {
		font-size: 32px;
	}

	.archive-gallery-template .archive-gallery-content {
		padding: 50px 0;
	}

	.archive-gallery-template .archive-wrapper.has-sidebar {
		grid-template-columns: 1fr;
		padding: 0 15px;
	}

	.archive-gallery-template .archive-wrapper.no-sidebar {
		padding: 0 15px;
	}

	.archive-gallery-template .archive-wrapper.no-sidebar .posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.archive-gallery-template .sidebar {
		position: static;
		margin-top: 40px;
	}
}

@media (max-width: 768px) {
	.archive-gallery-template .archive-hero {
		padding: 40px 0;
	}

	.archive-gallery-template .archive-hero .page-title {
		font-size: 28px;
	}

	.archive-gallery-template .archive-hero .archive-description {
		font-size: 16px;
	}

	.archive-gallery-template .archive-gallery-content {
		padding: 40px 0;
	}

	.archive-gallery-template .archive-wrapper {
		gap: 30px;
		padding: 0 15px;
	}

	.archive-gallery-template .posts-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.archive-gallery-template .gallery-card .product-image {
		height: 180px;
	}

	.archive-gallery-template .gallery-card .product-card-content {
		padding: 15px;
	}

	.archive-gallery-template .gallery-card .entry-title {
		font-size: 16px;
	}

	.archive-gallery-template .gallery-card p {
		font-size: 14px;
	}

	.archive-gallery-template .sidebar {
		padding: 20px;
	}
}

@media (max-width: 480px) {
	.archive-gallery-template .archive-hero .page-title {
		font-size: 24px;
	}

	.archive-gallery-template .gallery-card .product-image {
		height: 160px;
	}

	.archive-gallery-template .gallery-card .entry-title {
		font-size: 15px;
	}

	.archive-gallery-template .gallery-card .btn {
		padding: 10px;
		font-size: 14px;
	}

	.archive-gallery-template .archive-pagination .page-numbers a,
	.archive-gallery-template .archive-pagination .page-numbers span {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/*--------------------------------------------------------------
# Gallery Template Styles
--------------------------------------------------------------*/

/* Gallery Template Hero Section */
.gallery-template-wrapper .hero-pages.about-section {
	padding: 60px 0;
	margin-bottom: 0;
}

.gallery-template-wrapper .hero-pages .about-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.gallery-template-wrapper .hero-pages .about-text h2 {
	margin-bottom: 15px;
	font-size: 32px;
	color: #333;
	line-height: 1.3;
	font-weight: 700;
}

.gallery-template-wrapper .hero-pages .about-text p {
	font-size: 18px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 0;
}

.gallery-template-wrapper .hero-pages .about-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}

.gallery-template-wrapper .hero-pages .about-image img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Gallery Sort Options Section */
.gallery-template-wrapper .features-checkmarks {
	padding: 30px 0;
	background: #f7f7f7;
	margin-top: 0;
}

.gallery-template-wrapper .sort-options {
	margin: 0;
}

.gallery-template-wrapper .sort-options ul#sort-by {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-template-wrapper .sort-options ul#sort-by li {
	margin: 0;
}

.gallery-template-wrapper .sort-options ul#sort-by li a.btn {
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.3s ease;
	font-weight: 500;
	border: 2px solid transparent;
}

.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary {
	background: #fff;
	color: #333;
	border-color: #ddd;
}

.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(100, 184, 86, 0.3);
}

.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary.active {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* Premium gallery page overrides */
#primary.gallery-template-wrapper .hero-pages.about-section.hero-section.gallery-page-hero {
	display: block;
	text-align: left;
	align-items: unset;
	justify-content: flex-start;
}

#primary.gallery-template-wrapper .gallery-page-hero.gallery-page-hero--has-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	min-height: min(420px, 50vh);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	background: transparent;
}

#primary.gallery-template-wrapper .gallery-page-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #cbd5e1;
	background-size: cover;
	background-position: 50% 42%;
	background-repeat: no-repeat;
	pointer-events: none;
}

#primary.gallery-template-wrapper .gallery-page-hero.gallery-page-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		92deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(248, 250, 252, 0.76) 18%,
		rgba(248, 250, 252, 0.28) 40%,
		rgba(248, 250, 252, 0) 58%
	);
}

#primary.gallery-template-wrapper .gallery-page-hero.gallery-page-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to left, rgba(15, 23, 42, 0.17) 0%, rgba(15, 23, 42, 0) 52%);
}

#primary.gallery-template-wrapper .gallery-page-hero.gallery-page-hero--has-bg .about-container {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
	justify-items: start;
	
	
	width: 100%;
}

#primary.gallery-template-wrapper .gallery-page-hero.gallery-page-hero--has-bg .about-text {
	max-width: min(40rem, 100%);
	margin: 0;
	
	text-align: left;
	justify-self: start;
	align-items: flex-start;
}

#primary.gallery-template-wrapper .gallery-page-hero__title {
	margin: 0 0 0.55rem;
	color: #0b1220;
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.14;
	font-size: clamp(2.2rem, 1.7vw + 1.55rem, 3rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 1.25rem rgba(255, 255, 255, 0.85),
		0 2px 14px rgba(255, 255, 255, 0.55);
}

#primary.gallery-template-wrapper .gallery-page-hero__subtitle {
	margin: 0;
	color: #1e293b;
	font-weight: 550;
	line-height: 1.72;
	font-size: clamp(1.02rem, 0.45vw + 0.95rem, 1.2rem);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 0 1rem rgba(255, 255, 255, 0.7);
}

#primary.gallery-template-wrapper .gallery-page-switcher {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	padding: 1.35rem 0;
	border-top: 1px solid rgba(15, 23, 42, 0.06);
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options {
	display: flex;
	justify-content: center;
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0.55rem;
	margin: 0 auto;
	padding: 0.45rem;
	list-style: none;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.1);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by li {
	width: auto !important;
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by li a.btn.primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 116px;
	padding: 0.62rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: #334155;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	box-shadow: none;
	transform: none;
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by li a.btn.primary:hover {
	background: rgba(31, 111, 178, 0.1);
	color: var(--color-primary-blue, #1f6fb2);
	border-color: rgba(31, 111, 178, 0.2);
}

#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by li a.btn.primary.active {
	background: linear-gradient(135deg, var(--color-primary-blue, #1f6fb2) 0%, var(--color-secondary-blue, #1a5c96) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(31, 111, 178, 0.32);
}

#primary.gallery-template-wrapper .gallery-page-listing .media-card.gallery-item {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 8px 26px rgba(15, 23, 42, 0.07);
}

#primary.gallery-template-wrapper .gallery-page-listing .media-card.gallery-item .gallery-image {
	aspect-ratio: 4 / 3;
}

#primary.gallery-template-wrapper .gallery-page-listing .media-card.gallery-item .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

#primary.gallery-template-wrapper .gallery-page-listing .media-card.gallery-item:hover .gallery-image img {
	transform: scale(1.04);
}

@media (max-width: 768px) {
	#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by {
		flex-wrap: wrap;
	}

	#primary.gallery-template-wrapper .gallery-page-switcher .sort-options ul#sort-by li a.btn.primary {
		min-width: 102px;
	}
}

/* Gallery lightbox */
body.is-lightbox-open {
	overflow: hidden;
}

#primary.gallery-template-wrapper .gallery-lightbox[hidden] {
	display: none;
}

#primary.gallery-template-wrapper .gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

#primary.gallery-template-wrapper .gallery-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 6, 23, 0.78);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#primary.gallery-template-wrapper .gallery-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	width: min(1100px, 100%);
}

#primary.gallery-template-wrapper .gallery-lightbox__figure {
	margin: 0;
	background: #0b1220;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 24px 54px rgba(2, 6, 23, 0.5);
}

#primary.gallery-template-wrapper .gallery-lightbox__image {
	display: block;
	max-width: min(84vw, 960px);
	max-height: 78vh;
	width: auto;
	height: auto;
}

#primary.gallery-template-wrapper .gallery-lightbox__caption {
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(15, 23, 42, 0.88);
}

#primary.gallery-template-wrapper .gallery-lightbox__close,
#primary.gallery-template-wrapper .gallery-lightbox__nav {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.32);
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	border-radius: 999px;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#primary.gallery-template-wrapper .gallery-lightbox__close {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	z-index: 2;
	font-size: 1.35rem;
}

#primary.gallery-template-wrapper .gallery-lightbox__nav {
	font-size: 1.6rem;
	font-weight: 700;
}

#primary.gallery-template-wrapper .gallery-lightbox__close:hover,
#primary.gallery-template-wrapper .gallery-lightbox__nav:hover {
	background: rgba(31, 111, 178, 0.88);
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	#primary.gallery-template-wrapper .gallery-lightbox {
		padding: 1rem;
	}

	#primary.gallery-template-wrapper .gallery-lightbox__dialog {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	#primary.gallery-template-wrapper .gallery-lightbox__nav {
		position: absolute;
		top: calc(50% - 1.25rem);
		z-index: 2;
	}

	#primary.gallery-template-wrapper .gallery-lightbox__nav--prev {
		left: 0.5rem;
	}

	#primary.gallery-template-wrapper .gallery-lightbox__nav--next {
		right: 0.5rem;
	}

	#primary.gallery-template-wrapper .gallery-lightbox__image {
		max-width: 92vw;
		max-height: 68vh;
	}
}

/* Gallery Media Grid Section */
.gallery-template-wrapper .media-section {
	padding: 60px 0;
	margin-top: 0;
}

.gallery-template-wrapper .media-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0 0 40px 0;
}

/* Gallery Item Styling - Enhanced UI/UX */
.gallery-template-wrapper .gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #f7f7f7;
	aspect-ratio: 1;
	transition: all 0.3s ease;
}

.gallery-template-wrapper .gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.gallery-template-wrapper .gallery-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

.gallery-template-wrapper .gallery-image {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: #f7f7f7;
}

.gallery-template-wrapper .gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	display: block;
}

.gallery-template-wrapper .gallery-item:hover .gallery-image img {
	transform: scale(1.1);
}

.gallery-template-wrapper .gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-template-wrapper .gallery-item:hover .gallery-overlay {
	opacity: 1;
}

.gallery-template-wrapper .gallery-title {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 0;
	line-height: 1.3;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Pagination - Gallery Template */
.gallery-template-wrapper .media-section .page-numbers,
.gallery-template-wrapper .media-section .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 40px 0 0 0;
	padding: 0;
	flex-wrap: wrap;
}

.gallery-template-wrapper .media-section .page-numbers a,
.gallery-template-wrapper .media-section .page-numbers span,
.gallery-template-wrapper .media-section .pagination a,
.gallery-template-wrapper .media-section .pagination span {
	padding: 10px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #64b856;
	transition: all 0.3s ease;
	display: inline-block;
	background: #fff;
}

.gallery-template-wrapper .media-section .page-numbers a:hover,
.gallery-template-wrapper .media-section .pagination a:hover {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	text-decoration: none;
}

.gallery-template-wrapper .media-section .page-numbers .current,
.gallery-template-wrapper .media-section .pagination .current {
	background: #64b856;
	color: #fff;
	border-color: #64b856;
	font-weight: 600;
}

/* Link Colors - Gallery Template */
.gallery-template-wrapper a {
	color: #64b856;
	text-decoration: none;
	transition: color 0.3s ease;
}

.gallery-template-wrapper a:hover {
	color: #4a9a3f;
	text-decoration: underline;
}

/* Section Spacing for Gallery Template */
.gallery-template-wrapper .hero-pages.about-section+.features-checkmarks {
	padding-top: 30px;
	margin-top: 0;
}

.gallery-template-wrapper .features-checkmarks+.media-section {
	padding-top: 40px;
	margin-top: 0;
}

/* No Gallery Items Message */
.gallery-template-wrapper .media-card.blog p:only-child {
	text-align: center;
	padding: 40px 20px;
	color: #999;
	font-style: italic;
}

/* Responsive Design for Gallery Template */
@media (max-width: 1200px) {
	.gallery-template-wrapper .media-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}
}

@media (max-width: 992px) {
	.gallery-template-wrapper .hero-pages.about-section {
		padding: 50px 0;
	}

	.gallery-template-wrapper .hero-pages .about-container {
		gap: 30px;
	}

	.gallery-template-wrapper .hero-pages .about-text h2 {
		font-size: 28px;
	}

	.gallery-template-wrapper .media-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.gallery-template-wrapper .media-section {
		padding: 50px 0;
	}
}

@media (max-width: 768px) {
	.gallery-template-wrapper .hero-pages.about-section {
		padding: 40px 0;
	}

	.gallery-template-wrapper .hero-pages .about-container {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.gallery-template-wrapper .hero-pages .about-image {
		order: -1;
		justify-content: flex-start;
	}

	.gallery-template-wrapper .hero-pages .about-text {
		text-align: center;
	}

	.gallery-template-wrapper .hero-pages .about-text h2 {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.gallery-template-wrapper .hero-pages .about-text p {
		font-size: 16px;
	}

	/* Sort Options Mobile */
	.gallery-template-wrapper .features-checkmarks {
		padding: 20px 0;
	}

	.gallery-template-wrapper .sort-options ul#sort-by {
		flex-direction: column;
		gap: 10px;
	}

	.gallery-template-wrapper .sort-options ul#sort-by li {
		width: 100%;
	}

	.gallery-template-wrapper .sort-options ul#sort-by li a.btn {
		width: 100%;
		text-align: center;
		padding: 14px 24px;
	}

	/* Media Grid Mobile */
	.gallery-template-wrapper .media-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.gallery-template-wrapper .media-section {
		padding: 40px 0;
	}

	.gallery-template-wrapper .gallery-title {
		font-size: 14px;
	}

	.gallery-template-wrapper .gallery-overlay {
		padding: 15px;
	}

	/* Section Spacing Mobile */
	.gallery-template-wrapper .hero-pages.about-section+.features-checkmarks {
		padding-top: 20px;
	}

	.gallery-template-wrapper .features-checkmarks+.media-section {
		padding-top: 30px;
	}
}

@media (max-width: 480px) {
	.gallery-template-wrapper .hero-pages .about-text h2 {
		font-size: 22px;
	}

	.gallery-template-wrapper .hero-pages .about-text p {
		font-size: 14px;
	}

	.gallery-template-wrapper .media-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.gallery-template-wrapper .gallery-title {
		font-size: 13px;
	}

	.gallery-template-wrapper .gallery-overlay {
		padding: 12px;
	}

	.gallery-template-wrapper .media-section .page-numbers,
	.gallery-template-wrapper .media-section .pagination {
		gap: 8px;
	}

	.gallery-template-wrapper .media-section .page-numbers a,
	.gallery-template-wrapper .media-section .page-numbers span,
	.gallery-template-wrapper .media-section .pagination a,
	.gallery-template-wrapper .media-section .pagination span {
		padding: 8px 12px;
		font-size: 13px;
	}
}

.btn.primary,
.product-card a.btn.btn-primary,
.pagination .current,
.page-numbers .current {
	background: var(--color-primary-blue);
	color: var(--color-white);   /* prevent blue text bleeding in from link-color ancestors */
}

.btn.secondary,
#primary .product-card a.btn:hover,
#primary .product-card .btn:hover {
	background: var(--color-secondary-blue);
	color: var(--color-white);
}

a.btn.primary:hover,
#primary .product-card .btn:hover {
	background: var(--color-secondary-blue);
	color: var(--color-white);
}

a.btn.secondary:hover {
	background: var(--color-primary-blue);
	color: var(--color-white);
}

/* BEM button variants used on single-product hero */
.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
	border: 1px solid var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-white);
}
.btn-secondary {
	background: var(--color-surface-sunk);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: var(--color-slate-200);
	border-color: var(--color-slate-300);
	color: var(--color-text);
}

#primary.page-template-wrapper .page-content a {
	color: var(--color-primary-blue);
}

#primary .step-number,
#primary.page-template-wrapper .page-content p,
#primary.gallery-template-wrapper .page-hero .about-text p,
#primary.blog-template-wrapper .page-hero .about-text p,
#primary.page-template-wrapper .page-hero .about-text p,
#primary h1,
#primary h2,
#primary h3,
#primary h4,
#primary h5,
#primary h6,
#primary,
#primary .product-card p,
#primary .product-card .product-card__meta,
#primary.gallery-template-wrapper .hero-pages .about-text p,
#primary.blog-template-wrapper .hero-pages .about-text p,
#primary.blog-template-wrapper .media-card.blog>p,
#primary.blog-template-wrapper .media-card.blog .about-text p,
.site-footer,
.site-footer .footer-column ul li a,
.main-navigation ul#primary-menu li a,
.site-info {
	color: var(--color-neutral-dark);
}

#primary .features-checkmarks ul li svg {
	fill: var(--color-primary-blue, #1f6fb2);
	width: 1.125rem;
	height: 1.125rem;
	max-width: 1.125rem;
	max-height: 1.125rem;
	flex-shrink: 0;
}

#primary .pagination a,
.pagination span,
.page-numbers a,
.page-numbers span {
	color: var(--color-neutral-dark);
	background-color: var(--color-light-grey-bg);
}

header#masthead .main-navigation ul#primary-menu > li > a:hover,
header#masthead .main-navigation ul#primary-menu > li > a:focus {
	color: var(--color-primary-blue);
	background-color: rgba(31, 111, 178, 0.08);
}

header#masthead .main-navigation ul#primary-menu li ul.sub-menu li a:hover,
header#masthead .main-navigation ul#primary-menu li ul.sub-menu li a:focus {
	color: var(--color-primary-blue);
	background-color: rgba(31, 111, 178, 0.12);
}

#primary .sort-options ul#sort-by li a:hover,
#primary .sort-options ul#sort-by li a.active {
	color: var(--color-primary-blue);
	background-color: var(--color-light-grey-bg);
}

header#masthead .main-navigation ul#primary-menu > li.is-nav-cta > a:hover,
header#masthead .main-navigation ul#primary-menu > li.is-nav-cta > a:focus,
header#masthead .main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:hover,
header#masthead .main-navigation ul#primary-menu:not(:has(> li.is-nav-cta)) > li:last-child:not(.no-nav-cta) > a:focus {
	color: #fff !important;
	background-color: var(--color-secondary-blue, #1a5c96) !important;
}

#primary .product-card,
#primary .icon-features:not(.strength-section),
#primary .media-card,
#footer .footer-widgets,
#primary section.features-checkmarks,
#primary.single-post-template .single-post-hero,
#primary.single-post-template .sidebar,
#primary form#product-searchform,
#primary .coverage-section,
#primary .vmv-block,
#primary .compliance-item,
#primary .step,
#primary .partner-item {
	background: var(--color-light-grey-bg);
}

#primary .hero-section:not(.hero-section--has-bg) {
	background: var(--color-light-grey-bg);
}

#primary .product-card,
#primary .icon-item,
footer .footer-column,
footer .footer-widgets {
	border-color: var(--color-border-grey);
}

#primary .pagination .current,
#primary .page-numbers .current {
	border-color: var(--color-secondary-blue);
}

#primary .pagination a:hover,
#primary .page-numbers a:hover {
	border-color: var(--color-primary-blue);
	background-color: var(--color-secondary-blue);
}

#primary.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary,
#primary.blog-template-wrapper .media-card.blog .btn.primary,
#primary.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary {
	background-color: var(--color-primary-blue);
	border-color: var(--color-secondary-blue);
}

#primary.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary:hover,
#primary.blog-template-wrapper .media-card.blog .btn.primary:hover,
#primary.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary:hover,
#primary.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary.active,
#primary.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary.active {
	background-color: var(--color-secondary-blue);
	border-color: var(--color-primary-blue);
}

.mercos,
.main-navigation ul#primary-menu li#menu-item-400 a {
	color: var(--color-mercos-teal);
}

#primary.blog-template-wrapper .sort-options ul#sort-by li a.btn.primary,
#primary.gallery-template-wrapper .sort-options ul#sort-by li a.btn.primary,
#primary h1.hero-title {
	color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Playfair Display, Inter, sans-serif;
}

body,
li.menu-item a {
	font-family: Inter, Arial, Helvetica;
}

/* footer .footer-column, footer .footer-widgets{
	background: var(--color-light-grey-bg);
} */

@media (min-width: 640px) {
	.media-section .about-text {
		font-size: 15px;
		line-height: 1.4;
		text-align: center;
	}
}

@media (min-width: 768px) {
	.media-section .about-text {
		font-size: 15px;
		line-height: 1.4;
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.media-section .about-text {
		font-size: 15px;
		line-height: 1.4;
		text-align: left;
	}
}

/* Product listing: list-style pagination + table (overrides late #primary .page-numbers rules) */
#primary.product-listing-page ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	margin: 1.5rem 0 0.35rem;
	padding: 0;
}

#primary.product-listing-page ul.page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#primary.product-listing-page ul.page-numbers a,
#primary.product-listing-page ul.page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.55rem;
	min-height: 2.55rem;
	padding: 0 0.6rem;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid rgba(15, 23, 42, 0.12);
	color: #334155 !important;
	background: #fff !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#primary.product-listing-page ul.page-numbers a:hover {
	color: #fff !important;
	background: var(--color-primary-blue, #1f6fb2) !important;
	border-color: var(--color-secondary-blue, #1a5c96) !important;
	box-shadow: 0 2px 10px rgba(31, 111, 178, 0.32);
}

#primary.product-listing-page ul.page-numbers span.current,
#primary.product-listing-page ul.page-numbers span.page-numbers.current,
#primary.product-listing-page ul.page-numbers .page-numbers.current {
	color: #fff !important;
	background: var(--color-primary-blue, #1f6fb2) !important;
	border-color: var(--color-secondary-blue, #1a5c96) !important;
	box-shadow: 0 2px 12px rgba(31, 111, 178, 0.38);
	cursor: default;
}

#primary.product-listing-page ul.page-numbers span.dots,
#primary.product-listing-page ul.page-numbers .page-numbers.dots {
	min-width: auto;
	padding: 0 0.35rem;
	border: none;
	background: transparent !important;
	color: #64748b !important;
	box-shadow: none;
}

#primary.product-listing-page .responsive-table thead th {
	background: linear-gradient(180deg, #f1f5f9 0%, #e8edf3 100%);
	color: #0f172a;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

@media screen and (max-width: 600px) {
	#primary.product-listing-page .responsive-table th,
	#primary.product-listing-page .responsive-table td {
		white-space: normal;
		word-break: break-word;
	}

	#primary.product-listing-page .responsive-table th:first-child,
	#primary.product-listing-page .responsive-table td:first-child {
		min-width: 50px;
	}

	#primary.product-listing-page ul.page-numbers a,
	#primary.product-listing-page ul.page-numbers span.page-numbers {
		min-width: 2.35rem;
		min-height: 2.35rem;
		font-size: 0.875rem;
		padding: 0 0.45rem;
	}
}

/*--------------------------------------------------------------
# Homepage UI/UX Improvements — Modern Design Pass
# Applied via /ui-ux skill — scoped to front-page & mdh-front-home
--------------------------------------------------------------*/

/* ─── Design tokens local to the front page ─── */
#primary.site-main.mdh-front-home {
	--mdh-icon-blue-bg: rgba(31, 111, 178, 0.08);
	--mdh-icon-blue-ring: rgba(31, 111, 178, 0.14);
	--mdh-shadow-card-hover: 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ─── Hero: modern gradient fallback when no ACF image is set ─── */
body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) {
	background: linear-gradient(145deg, #0b2545 0%, #1a4e7c 45%, #143560 100%) !important;
	color: #fff;
	min-height: clamp(24rem, 55vh, 38rem);
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-title {
	color: #fff;
	font-size: clamp(1.9rem, 2.8vw + 1rem, 3.1rem);
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-subtitle {
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(1rem, 1.1vw + 0.65rem, 1.2rem);
	line-height: 1.6;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-buttons .btn.primary {
	background: var(--color-primary-blue, #1f6fb2);
	color: #fff;
	border: 2px solid transparent;
	box-shadow: 0 4px 16px rgba(31, 111, 178, 0.4);
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-buttons .btn.primary:hover {
	background: var(--color-secondary-blue, #1a5c96);
	box-shadow: 0 6px 20px rgba(31, 111, 178, 0.5);
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-buttons .btn.secondary {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.72);
}

body.front-page #primary.site-main > .hero-section:not(.hero-section--has-bg) .hero-buttons .btn.secondary:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

/* ─── Section heading accent lines ─── */
body.front-page #primary.site-main .product-portfolio__header,
#primary.site-main.mdh-front-home .mdh-home-media__header {
	position: relative;
}

body.front-page #primary.site-main .product-portfolio__title::after,
#primary.site-main.mdh-front-home .mdh-home-media__header h2::after {
	content: "";
	display: block;
	margin: 0.55rem auto 0;
	width: 2.75rem;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-primary-blue, #1f6fb2) 0%, rgba(31, 111, 178, 0.25) 100%);
}

/* ─── About section: heading style + accent ─── */
body.front-page #primary.site-main .about-text h2 {
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-neutral-dark, #0f172a);
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1.1rem;
}

body.front-page #primary.site-main .about-text h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--color-primary-blue, #1f6fb2);
}

body.front-page #primary.site-main .about-text p {
	font-size: clamp(0.9375rem, 1.1vw, 1.05rem);
	line-height: 1.72;
	color: #4b5563;
	margin-bottom: 1.75rem;
}

/* ─── About image: aspect-ratio + object-fit cover ─── */
body.front-page #primary.site-main .about-section .about-image {
	height: auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

body.front-page #primary.site-main .about-section .about-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ─── About: CTA button modern style ─── */
body.front-page #primary.site-main .about-section .btn.primary,
body.front-page #primary.site-main .about-section a.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.8rem 1.85rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	background: var(--color-primary-blue, #1f6fb2);
	color: #fff !important;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 3px 12px rgba(31, 111, 178, 0.28);
}

body.front-page #primary.site-main .about-section .btn.primary:hover,
body.front-page #primary.site-main .about-section a.btn:hover {
	background: var(--color-secondary-blue, #1a5c96);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(26, 92, 150, 0.38);
}

/* ─── Strength section: brand-colored icon circles + hover lift ─── */
body.front-page #primary.site-main .strength-section,
#primary.site-main.mdh-front-home .icon-features.strength-section {
	background: linear-gradient(180deg, #f4f8fd 0%, #eaf2fb 100%);
	border-top: 1px solid rgba(31, 111, 178, 0.08);
	border-bottom: 1px solid rgba(31, 111, 178, 0.08);
	padding: clamp(3rem, 6vw, 5rem) 0;
}

body.front-page #primary.site-main .strength-section .strength-section__icon,
#primary.site-main.mdh-front-home .strength-section .strength-section__icon {
	color: var(--color-primary-blue, #1f6fb2);
	background: var(--mdh-icon-blue-bg, rgba(31, 111, 178, 0.08));
	border-radius: 50%;
	border: 1.5px solid var(--mdh-icon-blue-ring, rgba(31, 111, 178, 0.15));
	width: clamp(5rem, 10vw, 6.5rem);
	height: clamp(5rem, 10vw, 6.5rem);
	padding: 1.1rem;
	box-sizing: border-box;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body.front-page #primary.site-main .strength-section__col:hover .strength-section__icon,
#primary.site-main.mdh-front-home .strength-section__col:hover .strength-section__icon {
	background: rgba(31, 111, 178, 0.14);
	box-shadow: 0 6px 24px rgba(31, 111, 178, 0.22);
	transform: translateY(-4px);
}

body.front-page #primary.site-main .strength-section .strength-section__col,
#primary.site-main.mdh-front-home .strength-section .strength-section__col {
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 2.5vw, 2.25rem);
	transition: transform 0.25s ease;
	border-radius: 12px;
}

body.front-page #primary.site-main .strength-section .strength-section__col:hover,
#primary.site-main.mdh-front-home .strength-section .strength-section__col:hover {
	transform: translateY(-4px);
}

body.front-page #primary.site-main .strength-section .strength-section__title,
#primary.site-main.mdh-front-home .strength-section .strength-section__title {
	font-family: Inter, system-ui, sans-serif;
	font-size: clamp(1rem, 1.35vw, 1.15rem);
	font-weight: 600;
	margin-top: 1rem;
	color: var(--color-neutral-dark, #0f172a);
}

/* ─── Product cards: hover lift ─── */
body.front-page #primary.site-main .product-portfolio .product-card.product-card--slider {
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	will-change: transform;
}

body.front-page #primary.site-main .product-portfolio .swiper-slide:hover .product-card.product-card--slider {
	transform: translateY(-5px);
	box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14);
	border-color: rgba(31, 111, 178, 0.28);
}

/* Product card "View Details" button */
body.front-page #primary.site-main .product-portfolio .product-card__actions .btn {
	background: var(--color-primary-blue, #1f6fb2);
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

body.front-page #primary.site-main .product-portfolio .product-card__actions .btn:hover,
body.front-page #primary.site-main .product-portfolio .product-card__actions .btn:focus {
	background: var(--color-secondary-blue, #1a5c96);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(31, 111, 178, 0.32);
}

/* Swiper pagination: pill-style active dot */
body.front-page #primary.site-main .product-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	transition: width 0.22s ease, background 0.22s ease;
}

body.front-page #primary.site-main .product-swiper .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 4px;
	background: var(--color-primary-blue, #1f6fb2);
}

/* ─── Features checkmarks: vertical dividers on desktop ─── */
@media (min-width: 768px) {
	body.front-page #primary.site-main .features-checkmarks ul {
		gap: 0;
	}
	body.front-page #primary.site-main .features-checkmarks li {
		flex: 1 1 0;
		padding: 0 1.75rem;
	}
	body.front-page #primary.site-main .features-checkmarks li:first-child {
		padding-left: 0;
	}
	body.front-page #primary.site-main .features-checkmarks li:last-child {
		padding-right: 0;
	}
	body.front-page #primary.site-main .features-checkmarks li + li {
		border-left: 1px solid rgba(15, 23, 42, 0.1);
	}
}

/* ─── Enquiry CTA: side-by-side layout on desktop (mirrors Mercos section) ─── */
@media (min-width: 768px) {
	.enquiry-cta--promo .enquiry-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		gap: 2rem;
	}
	.enquiry-cta--promo .enquiry-cta__title {
		text-align: left;
		max-width: 32rem;
		margin: 0;
	}
	.enquiry-cta--promo .enquiry-cta__btn {
		flex-shrink: 0;
	}
}

/* ─── Section vertical rhythm ─── */
body.front-page #primary.site-main .product-portfolio,
body.front-page #primary.site-main .mdh-home-media {
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

/* Hero search bar styles live in css/home.css (front-page only). */

/* ─── Mobile: stack about container + center accent ─── */
@media (max-width: 767px) {
	body.front-page #primary.site-main .about-section .about-container {
		grid-template-columns: 1fr;
	}
	body.front-page #primary.site-main .about-section .about-image {
		aspect-ratio: 16 / 9;
	}
	body.front-page #primary.site-main .about-text {
		text-align: center;
	}
	body.front-page #primary.site-main .about-text h2::after {
		left: 50%;
		transform: translateX(-50%);
	}
}