/*
Theme Name: DMG Kadence Child
Theme URI: https://gps-mapping.com
Description: Digital Mapping Group child theme for Kadence. Implements the official DMG brand standard (BrandingKit.pdf 2025): Montserrat typography and the approved colour palette.
Author: Digital Mapping Group
Template: kadence
Version: 2.0.0
*/

/* ---------------------------------------------------------------
   DMG brand tokens - from BrandingKit.pdf (authoritative)
   --------------------------------------------------------------- */
:root {
	--dmg-dark:      #024179; /* primary navy   */
	--dmg-medium:    #0D78BE; /* primary blue   */
	--dmg-light:     #D1EAF6; /* pale blue tint */
	--dmg-offwhite:  #F8F6F3; /* warm ground    */
	--dmg-gray:      #EAEAEA; /* neutral surface*/
	--dmg-green:     #143B35; /* alternative 1  */
	--dmg-accent:    #F4BB38; /* alternative 2  */
}

/* Brand colour utility classes (usable from the block editor) */
.has-dmg-dark-color            { color: var(--dmg-dark); }
.has-dmg-dark-background-color { background-color: var(--dmg-dark); }
.has-dmg-medium-color            { color: var(--dmg-medium); }
.has-dmg-medium-background-color { background-color: var(--dmg-medium); }
.has-dmg-accent-color            { color: var(--dmg-accent); }
.has-dmg-accent-background-color { background-color: var(--dmg-accent); }
.has-dmg-offwhite-background-color { background-color: var(--dmg-offwhite); }
.has-dmg-light-background-color    { background-color: var(--dmg-light); }

/* ---------------------------------------------------------------
   Typography - Montserrat, per brand kit
   Headings: ExtraBold with -10% vertical spacing
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.kadence-advanced-heading-wrapper h1,
.kadence-advanced-heading-wrapper h2,
.kadence-advanced-heading-wrapper h3 {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

body {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   Header - keep the vector lockup tight and crisp
   --------------------------------------------------------------- */
.site-branding img.custom-logo,
.site-header-item .site-branding img {
	max-height: 56px;
	width: auto;
	height: auto;
}

/* Navigation: lighter and sleeker than the heading weight.
   The h1-h6 rule above sets 800 across the theme; the nav must not
   inherit that, so it is set explicitly here. */
.primary-menu-container > ul > li > a,
.header-navigation .menu > li > a,
.header-navigation ul li a,
.header-navigation .header-menu-container > ul > li > a {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 400;
	letter-spacing: 0.08em;
}

/* The current page keeps a subtle weight bump rather than full bold */
.header-navigation ul li.current-menu-item > a,
.header-navigation ul li.current_page_item > a {
	font-weight: 600;
}

/* Top notice bar - quiet, not shouty */
.site-top-header-wrap .header-html p,
.header-html-inner p {
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0;
}

/* ---------------------------------------------------------------
   Hero: looping video background behind the copy
   The video is a product render on pure black, so it blends into
   the navy ground with a multiply-ish scrim rather than a hard edge.
   --------------------------------------------------------------- */
.dmg-hero-video-row {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dmg-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dmg-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	/* black-background render -> lighten blend keeps the navy and drops the black */
	mix-blend-mode: screen;
}

/* scrim so headline contrast stays well clear of the video */
.dmg-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 40%, rgba(2, 65, 121, 0.55) 0%, rgba(2, 65, 121, 0.88) 70%),
		linear-gradient(180deg, rgba(2, 65, 121, 0.4) 0%, rgba(2, 65, 121, 0.75) 100%);
}

/* keep all hero content above the video */
.dmg-hero-video-row > .kt-row-column-wrap,
.dmg-hero-video-row .kt-inside-inner-col {
	position: relative;
	z-index: 1;
}

/* Motion preference: hold the poster frame instead of looping */
@media (prefers-reduced-motion: reduce) {
	.dmg-hero-video {
		display: none;
	}
	.dmg-hero-bg {
		background-size: cover;
		background-position: center;
	}
}

/* ---------------------------------------------------------------
   Hero feature cards
   --------------------------------------------------------------- */
.dmg-feature-card .kt-inside-inner-col {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(209, 234, 246, 0.18);
	border-radius: 10px;
	padding: 1.1rem 1.15rem 1.25rem;
	height: 100%;
	backdrop-filter: blur(4px);
}

.dmg-feature-img {
	margin: 0 0 0.85rem;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
}

.dmg-feature-img img {
	display: block;
	width: 100%;
	height: 132px;
	object-fit: contain;
	object-position: center;
}

.dmg-feature-card h3 {
	margin: 0 0 0.3rem;
	letter-spacing: 0.01em;
}

.dmg-feature-card p {
	margin: 0;
}

@media (max-width: 767px) {
	.dmg-feature-img img {
		height: 108px;
	}
}

/* ---------------------------------------------------------------
   Product cards - the docs.gps-mapping.com pattern:
   image, tier label, name, 2-3 key specs.
   --------------------------------------------------------------- */
.dmg-product-card .kt-inside-inner-col {
	background: #fff;
	border: 1px solid var(--dmg-gray);
	border-radius: 10px;
	padding: 1.1rem 1.15rem 1.35rem;
	height: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dmg-product-card:hover .kt-inside-inner-col {
	border-color: var(--dmg-medium);
	box-shadow: 0 10px 28px rgba(2, 65, 121, 0.12);
	transform: translateY(-2px);
}

/* product shots are on white - never crop them */
.dmg-product-img {
	margin: 0 0 0.9rem;
}
.dmg-product-img img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: contain;
	object-position: center;
}

.dmg-product-card h3 {
	margin: 0.1rem 0 0.6rem;
	line-height: 1.25;
}
.dmg-product-card h3 a {
	color: var(--dmg-dark);
	text-decoration: none;
}
.dmg-product-card h3 a:hover {
	color: var(--dmg-medium);
}

/* spec list: quiet, scannable, no bullets fighting the type */
.dmg-spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.86rem;
	line-height: 1.5;
}
.dmg-spec-list li {
	position: relative;
	padding-left: 1.05rem;
	margin: 0 0 0.3rem;
	color: #4a5568;
}
.dmg-spec-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dmg-medium);
}

@media (max-width: 767px) {
	.dmg-product-img img { height: 132px; }
}

/* ---------------------------------------------------------------
   News archive - single-column list, image beside the text.
   Kadence provides the layout via post_archive_columns=1 and
   item_image_placement=beside; this tunes the proportions.
   --------------------------------------------------------------- */
/* Kadence lays this out as `grid-template-columns: 1fr 2fr` on
   `.item-image-style-beside article.loop-entry`. Match that specificity or
   the rules below silently lose. */
.item-image-style-beside article.loop-entry {
	border-bottom: 1px solid var(--dmg-gray);
	padding-bottom: 2.2rem;
	margin-bottom: 2.2rem;
	align-items: start;
}

.item-image-style-beside article.loop-entry:last-of-type {
	border-bottom: 0;
}

/* Landscape thumbnails. Without an explicit ratio the source image
   dictates the shape, which is why portrait shots rendered cropped. */
.item-image-style-beside article.loop-entry .post-thumbnail,
.item-image-style-beside article.loop-entry .post-thumbnail-inner {
	margin-bottom: 0;
	width: 100%;
}

.item-image-style-beside article.loop-entry .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
}

@media (max-width: 767px) {
	.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
		grid-template-columns: 1fr;
	}
}

.post-archive .entry-title {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.2;
	margin: 0.3rem 0 0.5rem;
}

.post-archive .entry-taxonomies .category-style-normal a {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dmg-medium);
	text-decoration: none;
}

.post-archive .entry-meta {
	font-size: 0.82rem;
	color: #6b7a8d;
}

.post-archive .entry-summary {
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   Contact page - HubSpot form + details
   HubSpot injects its own markup, so these rules bring it in line
   with the rest of the site rather than restyling it wholesale.
   --------------------------------------------------------------- */
.dmg-contact-details .kt-inside-inner-col {
	background: var(--dmg-offwhite);
	border-radius: 10px;
	padding: 1.6rem 1.7rem;
}

.dmg-contact-block + .dmg-contact-block {
	margin-top: 1.35rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--dmg-gray);
}

.dmg-contact-block h3 {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dmg-medium);
	margin: 0 0 0.35rem;
}

.dmg-contact-block p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: #33475b;
}

.dmg-contact-block a {
	color: var(--dmg-dark);
	text-decoration: none;
}

.dmg-contact-block a:hover {
	color: var(--dmg-medium);
	text-decoration: underline;
}

/* HubSpot form */
.hbspt-form {
	margin-top: 1.1rem;
}

.hbspt-form .hs-form-field {
	margin-bottom: 1.05rem;
}

.hbspt-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--dmg-dark);
	margin-bottom: 0.35rem;
}

.hbspt-form input[type="text"],
.hbspt-form input[type="email"],
.hbspt-form input[type="tel"],
.hbspt-form input[type="number"],
.hbspt-form select,
.hbspt-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: #33475b;
	background: #fff;
	border: 1px solid #cbd6e2;
	border-radius: 6px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hbspt-form input:focus,
.hbspt-form select:focus,
.hbspt-form textarea:focus {
	outline: none;
	border-color: var(--dmg-medium);
	box-shadow: 0 0 0 3px rgba(13, 120, 190, 0.15);
}

.hbspt-form textarea {
	min-height: 130px;
	resize: vertical;
}

.hbspt-form .hs-button {
	background: var(--dmg-medium);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 0.8rem 1.6rem;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hbspt-form .hs-button:hover {
	background: var(--dmg-dark);
}

.hbspt-form .hs-error-msg,
.hbspt-form .hs-error-msgs label {
	color: #b32d2e;
	font-size: 0.82rem;
	font-weight: 400;
}

.dmg-form-placeholder {
	padding: 1.4rem;
	background: var(--dmg-offwhite);
	border: 1px dashed var(--dmg-gray);
	border-radius: 8px;
	color: #6b7a8d;
}

/* ---------------------------------------------------------------
   Customer logo strip
   --------------------------------------------------------------- */
.dmg-logo-eyebrow {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7c8b9c;
	margin: 0 0 1.6rem;
}

.dmg-logo-strip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.6rem 3.4rem;
}

.dmg-logo-item {
	margin: 0;
	flex: 0 0 auto;
}

/* Logos arrive at wildly different sizes and colours. Cap the height and
   desaturate so the strip reads as one row rather than a collage. */
.dmg-logo-item img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.62;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.dmg-logo-item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 640px) {
	.dmg-logo-strip { gap: 1.8rem 2.2rem; }
	.dmg-logo-item img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.dmg-logo-item img { transition: none; }
}

/* ---------------------------------------------------------------
   Category cards - whole card is one link
   --------------------------------------------------------------- */
.dmg-cat-grid {
	display: grid;
	grid-template-columns: repeat(var(--dmg-cat-cols, 4), minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

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

/* placeholder when a category has no thumbnail set yet */
.dmg-cat-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--dmg-light), var(--dmg-gray));
}

.dmg-cat-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--dmg-gray);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dmg-cat-link:hover {
	border-color: var(--dmg-medium);
	box-shadow: 0 12px 30px rgba(2, 65, 121, 0.13);
	transform: translateY(-2px);
}

.dmg-cat-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dmg-offwhite);
}

.dmg-cat-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.dmg-cat-link:hover .dmg-cat-media img {
	transform: scale(1.05);
}

.dmg-cat-body {
	display: flex;
	flex-direction: column;
	padding: 1.05rem 1.15rem 1.25rem;
	flex: 1;
}

.dmg-cat-count {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dmg-medium);
	margin-bottom: 0.4rem;
}

.dmg-cat-name {
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.12rem;
	line-height: 1.2;
	color: var(--dmg-dark);
	margin-bottom: 0.45rem;
}

.dmg-cat-blurb {
	font-size: 0.86rem;
	line-height: 1.5;
	color: #4a5568;
	margin-bottom: 0.9rem;
}

.dmg-cat-cta {
	margin-top: auto;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--dmg-medium);
}

.dmg-cat-cta span {
	display: inline-block;
	transition: transform 0.18s ease;
}

.dmg-cat-link:hover .dmg-cat-cta span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.dmg-cat-link,
	.dmg-cat-media img,
	.dmg-cat-cta span { transition: none; }
	.dmg-cat-link:hover { transform: none; }
	.dmg-cat-link:hover .dmg-cat-media img { transform: none; }
}

/* ---------------------------------------------------------------
   Smart Handle rotating render.
   The clip is a product render on pure black, so it sits on the DMG
   navy and the black is dropped with a screen blend.
   --------------------------------------------------------------- */
/* The clip is rendered on pure black and the source has no alpha channel,
   so instead of fighting it the whole section is black: the video's own
   background then disappears into the section and the product keeps its
   true colours. */
.dmg-handle-section {
	background: #000;
}

.dmg-handle-section h1,
.dmg-handle-section h2,
.dmg-handle-section h3,
.dmg-handle-section .kt-adv-heading38_2bd212-c5 {
	color: #fff;
}

.dmg-handle-section p {
	color: #c9d6e2;
}

.dmg-handle-video {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	background: #000;
}

.dmg-handle-video video {
	display: block;
	width: 100%;
	height: auto;
}

/* Outline buttons need to read on black, not on the light page ground. */
.dmg-handle-section .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.dmg-handle-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--dmg-dark);
	border-color: #fff;
}

/* Reduced motion: hold the poster frame rather than looping. */
@media (prefers-reduced-motion: reduce) {
	.dmg-handle-video video {
		display: none;
	}
	.dmg-handle-video {
		aspect-ratio: 16 / 9;
		background-size: cover;
		background-position: center;
	}
}

/* ---------------------------------------------------------------
   FastRTK band - light section.
   Deliberately NOT black: it follows the black Smart Handle band, and
   two dark sections in a row read as one long stretch. Typography stays
   Montserrat so the section belongs to this site rather than borrowing
   fastrtk.com's typeface. The one borrowed cue is the green status dot,
   which is how FastRTK uses colour.
   --------------------------------------------------------------- */
.dmg-fastrtk-section {
	background: var(--dmg-offwhite) !important;
}

.dmg-fastrtk-section h2,
.dmg-fastrtk-section h3 {
	color: var(--dmg-dark);
}

.dmg-fastrtk-section p {
	color: #4a5568;
}

.dmg-frtk-label {
	font-family: "Montserrat", system-ui, sans-serif;
}

.dmg-frtk-media {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--dmg-gray);
	box-shadow: 0 18px 40px rgba(2, 65, 121, 0.13);
	background: #fff;
}

.dmg-frtk-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* product cards */
/* Matches the Skadi lineup cards above: contained image on white with
   generous padding, small blue label, navy name, bulleted specs. */
.dmg-frtk-card .kt-inside-inner-col {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.15rem 1.15rem 1.35rem;
	background: #fff;
	border: 1px solid var(--dmg-gray);
	border-radius: 10px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dmg-frtk-card:hover .kt-inside-inner-col {
	border-color: var(--dmg-medium);
	box-shadow: 0 10px 28px rgba(2, 65, 121, 0.12);
	transform: translateY(-2px);
}

/* image floats on white, never cropped or filled to the edges */
.dmg-frtk-thumb {
	display: block;
	background: none;
	border: 0;
	padding: 0.5rem 0 1.4rem;
	overflow: visible;
}

.dmg-frtk-thumb img {
	display: block;
	width: 100%;
	height: 155px;
	object-fit: contain;
	object-position: center;
}

/* small blue label, as on the Skadi cards */
.dmg-frtk-label {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dmg-medium);
	margin-bottom: 0.55rem;
}

.dmg-frtk-card h3 {
	margin: 0 0 0.7rem;
	padding: 0;
	font-size: 1.22rem !important;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--dmg-dark);
}

/* no rule or dot before the title - the label does that job now */
.dmg-frtk-card h3::before {
	content: none;
}

/* bulleted specs, matching .dmg-spec-list */
.dmg-frtk-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.86rem;
	line-height: 1.5;
}

.dmg-frtk-specs li {
	position: relative;
	padding-left: 1.05rem;
	margin: 0 0 0.3rem;
	color: #4a5568;
}

.dmg-frtk-specs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--dmg-medium);
}

.dmg-frtk-card p {
	margin: 0;
	padding: 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: #4a5568;
}

@media (max-width: 767px) {
	.dmg-frtk-thumb img { height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
	.dmg-frtk-card .kt-inside-inner-col { transition: none; }
	.dmg-frtk-card:hover .kt-inside-inner-col { transform: none; }
}

/* buttons back to the DMG palette */
.dmg-fastrtk-section .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--dmg-medium) !important;
	color: #fff !important;
	border-radius: 4px !important;
}

.dmg-fastrtk-section .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--dmg-dark) !important;
}

.dmg-fastrtk-section .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--dmg-dark);
	border-color: #c7d3de;
	border-radius: 4px !important;
}

.dmg-fastrtk-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--dmg-dark);
	color: #fff;
	border-color: var(--dmg-dark);
}

@media (max-width: 767px) {
	.dmg-frtk-media { margin-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dmg-frtk-card .kt-inside-inner-col { transition: none; }
}

/* ---------------------------------------------------------------
   Customer stories - photo-led editorial cards.
   The photo carries the story; type stays quiet underneath it.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   Stories carousel (Splide, borrowed from Kadence Blocks)
   --------------------------------------------------------------- */
.dmg-stories-carousel {
	position: relative;
	/* room for the arrows on the sides and pagination underneath */
	padding: 0 3rem 3rem;
}

/* Splide only lays the track out once it has mounted. Until then - and
   permanently if Splide fails to load - lay the slides out as a grid so the
   cards never stack full-width. `.is-initialized` is added by Splide on mount. */
.dmg-stories-carousel:not(.is-initialized) .splide__list,
.dmg-stories-carousel.dmg-carousel-fallback .splide__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6rem;
	transform: none !important;
}

.dmg-stories-carousel:not(.is-initialized) .splide__slide,
.dmg-stories-carousel.dmg-carousel-fallback .splide__slide {
	width: auto !important;
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.dmg-stories-carousel:not(.is-initialized) .splide__list,
	.dmg-stories-carousel.dmg-carousel-fallback .splide__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.dmg-stories-carousel:not(.is-initialized) .splide__list,
	.dmg-stories-carousel.dmg-carousel-fallback .splide__list {
		grid-template-columns: 1fr;
	}
}

/* hide the controls when we are in fallback mode - they would do nothing */
.dmg-stories-carousel.dmg-carousel-fallback .splide__arrows,
.dmg-stories-carousel.dmg-carousel-fallback .splide__pagination {
	display: none;
}

/* slides must stretch so cards are equal height */
.dmg-stories-carousel .splide__list {
	align-items: stretch;
}
.dmg-stories-carousel .splide__slide {
	height: auto;
	display: flex;
}
.dmg-stories-carousel .splide__slide > .dmg-story-card {
	width: 100%;
}

/* NOTE: never set overflow/clip on .splide__track - Splide needs it to clip
   the moving list, and overriding it makes every slide render stacked. */

/* arrows */
.dmg-stories-carousel .splide__arrow {
	width: 40px;
	height: 40px;
	background: #fff;
	border: 1px solid var(--dmg-gray);
	border-radius: 50%;
	opacity: 1;
	box-shadow: 0 4px 14px rgba(2, 65, 121, 0.12);
	transition: border-color 0.18s ease, background 0.18s ease;
}
.dmg-stories-carousel .splide__arrow svg {
	width: 16px;
	height: 16px;
	fill: var(--dmg-dark);
}
.dmg-stories-carousel .splide__arrow:hover:not(:disabled) {
	background: var(--dmg-medium);
	border-color: var(--dmg-medium);
}
.dmg-stories-carousel .splide__arrow:hover:not(:disabled) svg {
	fill: #fff;
}
.dmg-stories-carousel .splide__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* sit the arrows in the side padding, level with the card images */
.dmg-stories-carousel .splide__arrows {
	position: static;
}
.dmg-stories-carousel .splide__arrow {
	position: absolute;
	top: 130px;          /* roughly the middle of the 16:10 image */
	transform: translateY(-50%);
	z-index: 2;
}
.dmg-stories-carousel .splide__arrow--prev { left: 0; right: auto; }
.dmg-stories-carousel .splide__arrow--next { right: 0; left: auto; }

/* Splide rotates the prev arrow via its own stylesheet; make sure that
   still applies now that we position them ourselves. */
.dmg-stories-carousel .splide__arrow--prev svg {
	transform: scaleX(-1);
}

@media (max-width: 640px) {
	.dmg-stories-carousel {
		padding: 0 0 3rem;
	}
	.dmg-stories-carousel .splide__arrow {
		top: 110px;
	}
	.dmg-stories-carousel .splide__arrow--prev { left: 0.4rem; }
	.dmg-stories-carousel .splide__arrow--next { right: 0.4rem; }
}

/* pagination dots */
.dmg-stories-carousel .splide__pagination {
	bottom: 0;
	gap: 0.35rem;
}
.dmg-stories-carousel .splide__pagination__page {
	width: 7px;
	height: 7px;
	margin: 0;
	background: #c7d3de;
	opacity: 1;
	transition: width 0.2s ease, background 0.2s ease;
}
.dmg-stories-carousel .splide__pagination__page.is-active {
	width: 22px;
	border-radius: 4px;
	background: var(--dmg-medium);
	transform: none;
}

/* grid comes from the [dmg_stories] shortcode */
.dmg-stories-grid {
	display: grid;
	grid-template-columns: repeat(var(--dmg-story-cols, 3), minmax(0, 1fr));
	gap: 1.6rem;
	align-items: stretch;
}

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

.dmg-story-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(2, 65, 121, 0.06), 0 8px 24px rgba(2, 65, 121, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dmg-story-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(2, 65, 121, 0.08), 0 16px 38px rgba(2, 65, 121, 0.14);
}

/* --- media --- */
.dmg-story-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--dmg-gray);
}

.dmg-story-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.dmg-story-card:hover .dmg-story-media img {
	transform: scale(1.04);
}

/* gradient so the tag stays legible on any photo */
.dmg-story-media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(2, 65, 121, 0.72), transparent);
	pointer-events: none;
}

.dmg-story-tag {
	position: absolute;
	left: 0.9rem;
	bottom: 0.8rem;
	z-index: 1;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(13, 120, 190, 0.92);
	padding: 0.3rem 0.6rem;
	border-radius: 3px;
}

/* --- body --- */
/* Explicit margins rather than flex `gap`: gap also applies to the
   auto-margin pushing the CTA down, which opened uneven holes in the card. */
.dmg-story-body {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.3rem 1.4rem;
	flex: 1;
}

.dmg-story-customer {
	margin: 0 0 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--dmg-medium);
	text-transform: uppercase;
}

.dmg-story-tagline {
	margin: 0 0 0.6rem;
	font-size: 1.24rem;
	line-height: 1.22;
	color: var(--dmg-dark);
	text-wrap: balance;
}

.dmg-story-text {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #4a5568;
}

.dmg-story-stack {
	margin: 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--dmg-gray);
	font-size: 0.78rem;
	color: #6b7a8d;
}

.dmg-story-cta {
	margin-top: auto;
	padding-top: 0.9rem;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--dmg-medium);
	text-decoration: none;
	align-self: flex-start;
}

.dmg-story-cta span {
	display: inline-block;
	transition: transform 0.18s ease;
}

.dmg-story-cta:hover span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.dmg-story-card,
	.dmg-story-media img,
	.dmg-story-cta span {
		transition: none;
	}
	.dmg-story-card:hover { transform: none; }
	.dmg-story-card:hover .dmg-story-media img { transform: none; }
}

/* ---------------------------------------------------------------
   Shop sidebar - search + layered nav filters
   --------------------------------------------------------------- */
.woocommerce-page .primary-sidebar .widget,
.archive.woocommerce .primary-sidebar .widget {
	margin-bottom: 1.9rem;
	padding-bottom: 1.9rem;
	border-bottom: 1px solid var(--dmg-gray);
}

.woocommerce-page .primary-sidebar .widget:last-child {
	border-bottom: 0;
}

.woocommerce-page .primary-sidebar .widget-title,
.woocommerce-page .primary-sidebar h2 {
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.72rem !important;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--dmg-dark);
	margin: 0 0 0.9rem;
}

/* search box */
.woocommerce-page .primary-sidebar .woocommerce-product-search {
	display: flex;
	gap: 0.4rem;
}

.woocommerce-page .primary-sidebar .woocommerce-product-search input[type="search"] {
	flex: 1;
	font-family: inherit;
	font-size: 0.9rem;
	padding: 0.58rem 0.75rem;
	border: 1px solid #cbd6e2;
	border-radius: 6px;
	background: #fff;
}

.woocommerce-page .primary-sidebar .woocommerce-product-search input[type="search"]:focus {
	outline: none;
	border-color: var(--dmg-medium);
	box-shadow: 0 0 0 3px rgba(13, 120, 190, 0.15);
}

.woocommerce-page .primary-sidebar .woocommerce-product-search button {
	background: var(--dmg-medium);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0 0.85rem;
	font-size: 0.85rem;
	cursor: pointer;
}

.woocommerce-page .primary-sidebar .woocommerce-product-search button:hover {
	background: var(--dmg-dark);
}

/* category list */
.woocommerce-page .primary-sidebar .product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-page .primary-sidebar .product-categories li {
	margin: 0;
	border-bottom: 1px solid #f1f4f7;
}

.woocommerce-page .primary-sidebar .product-categories li:last-child {
	border-bottom: 0;
}

.woocommerce-page .primary-sidebar .product-categories li a {
	display: inline-block;
	padding: 0.52rem 0;
	font-size: 0.92rem;
	color: #33475b;
	text-decoration: none;
	transition: color 0.15s ease;
}

.woocommerce-page .primary-sidebar .product-categories li a:hover,
.woocommerce-page .primary-sidebar .product-categories li.current-cat > a {
	color: var(--dmg-medium);
}

.woocommerce-page .primary-sidebar .product-categories .count {
	float: right;
	padding-top: 0.52rem;
	font-size: 0.82rem;
	color: #9aa8b8;
}

/* layered nav checkbox lists */
.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list__item {
	margin: 0 0 0.42rem;
	font-size: 0.9rem;
}

.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list__item a {
	color: #33475b;
	text-decoration: none;
	transition: color 0.15s ease;
}

.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list__item a:hover,
.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list__item.chosen a {
	color: var(--dmg-medium);
	font-weight: 600;
}

.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-list__item .count {
	color: #9aa8b8;
	font-size: 0.82rem;
}

/* active filter chips */
.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.woocommerce-page .primary-sidebar .woocommerce-widget-layered-nav-filters li a {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	background: var(--dmg-light);
	color: var(--dmg-dark);
	font-size: 0.8rem;
	border-radius: 4px;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Catalog cards - compact and information-dense: category, image,
   name, one-line description, up to three specs, then a CTA.
   Buyers here compare specs, so the card carries more than a shop tile.
   --------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	/* three across beside the filter sidebar keeps each card readable */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0 0 3rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6ebf0;
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	text-align: left;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--dmg-medium);
	box-shadow: 0 14px 32px rgba(2, 65, 121, 0.13);
	transform: translateY(-3px);
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

/* image band - no padding on the img itself, so transparent PNGs do not
   show an inner box against the tile colour */
/* No background here: the product PNGs are transparent, so any fill shows
   as a visible box around the product. Plain white keeps them floating. */
.dmg-card-media {
	display: block;
	background: none;
	padding: 1.15rem 1.15rem 0.4rem;
}

.woocommerce ul.products li.product .dmg-card-media img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: contain;
	object-position: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* text block */
.woocommerce ul.products li.product .dmg-card-cat,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3.dmg-card-title,
.woocommerce ul.products li.product .dmg-card-blurb,
.woocommerce ul.products li.product .dmg-card-specs,
.woocommerce ul.products li.product .dmg-card-cta {
	margin-left: 1.05rem;
	margin-right: 1.05rem;
}

.dmg-card-cat {
	display: block;
	margin-top: 0.95rem;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--dmg-medium);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3.dmg-card-title {
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 1rem !important;
	font-weight: 800;
	line-height: 1.25;
	color: var(--dmg-dark);
	margin-top: 0.28rem;
	margin-bottom: 0.32rem;
	padding: 0;
	letter-spacing: 0;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

/* Clamp to two lines as a backstop: PHP already truncates, but this keeps
   any long text from stretching one card and leaving its row uneven. */
.woocommerce ul.products li.product .dmg-card-blurb {
	font-size: 0.82rem;
	line-height: 1.45;
	color: #6b7a8d;
	margin-top: 0;
	margin-bottom: 0.7rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em;
}

.dmg-card-specs {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0.9rem;
	padding: 0.7rem 0 0;
	border-top: 1px solid var(--dmg-gray);
	font-size: 0.79rem;
	line-height: 1.45;
}

.dmg-card-specs li {
	position: relative;
	padding-left: 0.95rem;
	margin: 0 0 0.24rem;
	color: #4a5568;
}

.dmg-card-specs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dmg-medium);
}

/* Whole-card click target.
   Kadence only links the image and the title, so the CTA is a real link and
   is stretched over the entire card via ::after. Everything sits above it
   except the card itself, so text stays selectable and the title link works. */
.woocommerce ul.products li.product {
	position: relative;
}

.dmg-card-cta {
	display: block;
	margin-top: auto;
	margin-bottom: 1.05rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dmg-medium);
	text-decoration: none;
}

.dmg-card-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dmg-card-cta:hover {
	color: var(--dmg-dark);
	text-decoration: underline;
}

/* keep the existing links usable above the stretched overlay */
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title a {
	position: relative;
	z-index: 2;
}

.dmg-card-cta span {
	display: inline-block;
	transition: transform 0.18s ease;
}

.woocommerce ul.products li.product:hover .dmg-card-cta span {
	transform: translateX(3px);
}

/* result count + sort */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 0.86rem;
	color: #6b7a8d;
	margin-bottom: 1.8rem;
}



/* the products archive header should not dominate - the cards are the point */
.post-type-archive-product .page-header,
.tax-product_cat .page-header,
body.woocommerce .dmg-products-compact-header {
	padding-top: 2.4rem !important;
	padding-bottom: 2.2rem !important;
}

.woocommerce .woocommerce-ordering select {
	font-family: inherit;
	font-size: 0.86rem;
	border: 1px solid var(--dmg-gray);
	border-radius: 4px;
	padding: 0.35rem 0.6rem;
	background: #fff;
}

@media (max-width: 1100px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.woocommerce ul.products { grid-template-columns: 1fr; }
	.woocommerce ul.products li.product .dmg-card-media img { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.dmg-card-media,
	.dmg-card-cta span { transition: none; }
	.woocommerce ul.products li.product:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Product catalog (/products/ and category archives)
   --------------------------------------------------------------- */

/* category tiles that lead the shop page */
.woocommerce ul.products li.product-category {
	text-align: left;
}

.woocommerce ul.products li.product-category > a {
	display: block;
	background: #fff;
	border: 1px solid var(--dmg-gray);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.woocommerce ul.products li.product-category > a:hover {
	border-color: var(--dmg-medium);
	box-shadow: 0 12px 30px rgba(2, 65, 121, 0.13);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product-category img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
}

.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	font-size: 1.1rem;
	color: var(--dmg-dark);
	padding: 1rem 1.15rem 1.15rem;
	margin: 0;
}

.woocommerce ul.products li.product-category mark.count {
	background: none;
	color: #7c8b9c;
	font-size: 0.8rem;
	font-weight: 400;
}

/* catalog-mode: no prices, so hide the empty price node and its spacing */
.woocommerce ul.products li.product .price:empty {
	display: none;
}

/* result count / ordering row */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: 0.88rem;
	color: #6b7a8d;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product-category > a,
	.woocommerce ul.products li.product a img { transition: none; }
	.woocommerce ul.products li.product-category > a:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Secondary product button (external sign-up, docs, etc)
   --------------------------------------------------------------- */
.dmg-product-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0.72rem 1.4rem;
	font-family: "Montserrat", system-ui, sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dmg-medium);
	background: #fff;
	border: 2px solid var(--dmg-medium);
	border-radius: 4px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dmg-product-cta:hover {
	background: var(--dmg-medium);
	color: #fff;
}

.dmg-cta-ext {
	font-size: 0.9em;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.dmg-product-cta { transition: none; }
}

/* ---------------------------------------------------------------
   Catalog-mode helpers (no cart - quote model)
   --------------------------------------------------------------- */
.dmg-quote-btn,
.woocommerce a.button.dmg-quote-btn {
	background-color: var(--dmg-medium);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.dmg-quote-btn:hover,
.woocommerce a.button.dmg-quote-btn:hover {
	background-color: var(--dmg-dark);
	color: #fff;
}

/* Product imagery is shot on white - never crop it */
.dmg-card-img img,
.woocommerce ul.products li.product img {
	object-fit: contain;
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--dmg-accent);
	outline-offset: 2px;
}

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